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

/*-------------------------------------------------------------------------------------------*/
html, body {
	overflow-x: hidden;
 }

body {
  margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 12px;
	box-sizing: border-box;
	position: relative;
 }

#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============================================================== */
 
/*----------------------------------------------------------------------------*/
@media all and (max-width: 768px) { 
  #left {
    display: none;
  }

  #right {
    width: 100%;
  }

  #footer {
    position:fixed;
  }
 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 769px) and (max-width: 990px) {
   
 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 991px) and (max-width: 1024px) { 

 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 1025px) and (max-width: 1280px) {

 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 1281px) and (max-width: 1366px) { 

 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 1367px) and (max-width: 1515px) {
   
 }
/*----------------------------------------------------------------------------*/
@media all and (min-width: 1516px) and (max-width: 1920px) {

 }
/*----------------------------------------------------------------------------*/