:root {
  --left-width: 230px;
}

/*-------------------------------------------------------------------------------------------*/
body {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
}

#main {
  display: flex;
  justify-content: center;
  height: 100vh;
}

#left {
  display: flex;
  flex-direction: column;
  min-width: var(--left-width);
  max-width: var(--left-width);
  background-color: hsl(240, 53%, 10%);
  z-index: 1000;
}

#user {
  height: 160px;
  background-color: #182058BF;
  background-image: radial-gradient(#513FF2eb 0%,#182058FA 80%,#1820581A 100%);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#user-img {
  width: 90px;
  border-radius: 50%;
  border:  1px solid #404040;
  box-shadow: 1px 1px 12px 1px #a0a0a0;
}

#user>div{
  color:  #fff;
}

#menu_container {
  /*background-color: hsl(240, 53%, 10%);*/
  width: 100%;
}


#right {
  position: relative;
  width: calc(100% - var(--left-width));
  display: flex;
  flex-direction: column;
}

#header {
  position: relative;
  min-height: 60px;
  max-height: 60px;
  background-color: #ccccff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 2px 3px #40404040;
}

#toggle-menu {
  margin-left: 10px;
  vertical-align: middle;
  font-size: 18px;
  font-weight: lighter;
  padding: 8px 6px 4px 6px;
  border-radius: 3px;
  background-color: #182058BF;
  color: #fffffff0;
  box-shadow: 1px 1px 2px #707070f0;
  cursor: pointer;
}

#footer {
  position: absolute;
  bottom: 0;  
  min-height: 40px;
  max-height: 40px;
  background-color: #ccccff;
  width: 100%;
  box-shadow: 1px -1px 3px #40404040;
}

#content {
  background-color: #DADEE66B;
  height: calc(100% - 100px);
  position: relative;
  display: flex;
  justify-content: center;
}

.k-drag-clue.k-state-selected, 
.k-draghandle.k-state-selected:hover, 
.k-ghost-splitbar-horizontal, 
.k-ghost-splitbar-vertical, 
.k-list>.k-state-highlight, 
.k-list>.k-state-selected, 
.k-marquee-color, 
.k-panel>.k-state-selected, 
.k-scheduler .k-scheduler-toolbar .k-state-selected, 
.k-scheduler .k-today.k-state-selected, 
.k-state-selected, 
.k-state-selected:link, 
.k-state-selected:visited {
  background-color: #9CA7DC;
  color: #282828E0;
}

.k-list>.k-state-focused, .k-list>.k-state-hover {
    color: #444;
    background-color: #cbcbcb;
    border-color: #bbbbbb;
}


.k-grid-header, th.k-header {
  background-color:  hsl(240, 53%, 30%)!important;
  color: #f0f0f0f0!important;
 }




.modo-read {
    background-color: #D0E0E0;
 }
.modo-edit {
    background-color: #000080;
 }
.modo-new {
    background-color: #008000;
 }
.modo-delete-read {
    background-color: #600000;  
}
.modo-delete-edit {
    background-color: #800000;     
}
.modo-delete-new {
    background-color: #A00000;     
}

.modo-read-row {
    background-color: #D0E0E040;
 }
.modo-edit-row {
    background-color: #00008040;
 }
.modo-new-row {
    background-color: #00800040;
 }
.modo-delete-read-row {
    background-color: #60000040;  
}
.modo-delete-edit-row {
    background-color: #80000040;     
}
.modo-delete-new-row {
    background-color: #A0000040;     
}


button.command {
    margin: 0 4px 0 0;
    position: relative;
    font-family: sans-serif;
    font-size: 14px;
 }
button.command>i {
    font-size: 12px;
	  margin-right: 3px;
    position: relative;
    top:2px;  
    color: #AD7FEBE2;
    text-shadow: 1px 1px 2px #707070;    
 }



button.subcommand {
    margin: 0 4px 0 0;
    position: relative;
    font-family: sans-serif;
    font-size: 10px;
 }
button.subcommand>i {
    position: relative;
    margin-right: 3px;
    position: relative;
    top:2px;  
    color: #AD7FEBE2;
    text-shadow: 1px 1px 2px #707070;    
 }

/* RESPONSIVE============================================================== */
 
/* Móviles en horizontal o tablets en vertical------------------------------ */
@media (max-width: 768px) { 
  #left {
    display: none;
  }

  #right {
    width: 100%;
  }

  #footer {
    position:fixed;
  }
}
 
/* Tablets en horizonal y escritorios--------------------------------------- */
@media (max-width: 1024px) { }