html, body {
  background-color: black;  /*9C9C9C;  #CFCFCF */
  color: white;
}

header {
  position: absolute;
  left: 0;
  top: 0;
  height: 3rem;
  width: 100%;
  overflow: hidden;
  /*z-index: 100002;*/
}

#user-info {
  top: 0;
  right: 0;
  z-index: 2000;
}

#sidebar {
  height: calc(100% - 3rem);
  max-height: calc(100% - 3rem);
  width: 0;
  position: fixed;
  top: 3rem;
  left: 0;
  overflow: hidden;
  transition: 0.5s;
  z-index: 1000;
}

#sidecontent {    
  min-height: calc(100% - 3rem);
  max-height: calc(100% - 3rem);
  overflow-y: auto;
}

#menu_content, #webagent_content  {
  display: none;
  max-height: 50vh;
  overflow-y: auto;
}

#menu_footer {
  height: 3rem;
}

main {
  position: absolute;
  top: 3rem;
  left: 0;
  line-height: 16px;
  height: calc(100% - 3rem);
  max-height: calc(100% - 3rem);
  width: 100%;
  overflow: auto;
}

#owerlay {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: .5;
  z-index: 999;
}

@media (min-width: 992px) {
  #showMenu {display: none;}
  #sidebar {width: 300px;}
  main {left: 300px; width: calc(100% - 300px); max-width: calc(100% - 300px);}
}

.karta {
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
}
.karta.active1 {
  background-image: url('/web-agent/images/active1.png');
}
.karta.active0 {
  background-image: url('/web-agent/images/active0.png');
}
.karta > p.rem {
  overflow: auto;
  height: 3.5rem;
  min-height: 3.5rem;
  max-height: 3.5rem;
  cursor: row-resize;
}

article {
  position: relative;
  float: left;
  width: 20rem;
  margin: 4px;
  max-width: calc(100% - 16px);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
}
article.active1 {
  background-image: url('/web-agent/images/active1.png');
}
article.active0 {
  background-image: url('/web-agent/images/active0.png');
}

#sidebar article, td article {
  display: block;
  float: none;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

article > p {
  overflow: auto;
}

#sidebar article > p, .p-3rem {
  height: 5rem;
  min-height: 5rem;
  max-height: 5rem;
}

article > p > a, .karta > p > a {
  color: white;
}

article > p img, .karta > p img {
  height: 2rem;
}

.card, .karta {
  background-color: rgb(116,116,116);
  color: white;
}

.border-secondary { border-color: #d1d1d1 !important; }
.active {background-color: rgb(152,209,152);}
.noactive {background-color: rgb(230,147,146);}
.cursor {cursor: pointer;}
.cursor_move {cursor: move;}
.cursor_none {cursor: default !important;}
.cursor-resize {cursor: ns-resize;}
.text-decoration-none {text-decoration: none !important;}
.text-decoration-underline {text-decoration: underline !important;}
.clear {clear: both;}
.maxheight10rem {max-height: 10rem; overflow: auto;}
.maxheight20rem {max-height: 20rem !important; overflow: auto;}
.lineheight110 {line-height: 1.1;}

.flatpickr-day.selected {background-color: #0099fd !important;}
.popover {color: black; width: 250px;}
.popover-body {max-height: 200px; overflow-y: auto;}

.text-overflow {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: "----";
  max-width: 100px; 
}

iframe {
	position: absolute;
  left: 0;
  top: 0;
	border: none;
	width: 100%;
	height: 100%;
	z-index: 214748364;
}

.bg-modal-content {background-color: #eeeeee !important;}
.bg-transparent {background-color: transparent !important;}
.bg-primarylight {background-color: #b8daff !important;}
.bg-successlight {background-color: #bfdf67 !important;}
.bg-secondarylight {background-color: #d6d8db !important;}
.bg-darklight {background-color: #525353 !important;}
.bg-infolight {background-color: #bee5eb !important;}
.bg-dangerlight {background-color: #f5c6cb !important;}
.bg-warninglight {background-color: #eb8f6b !important;} /* #fdeeba */

.bg-gray {background-color: #bebebe !important;}
.bg-graylight {background-color: #eeeeee !important;} /* #d1d1d1 */
.bg-yellow {background-color: #fff392 !important;}
.back_body {background-color: black !important;}
.back_widget {background-color: rgb(116,116,116) !important;}
.back_black {background-color: #000;}
.back_blacklight {background-color: #505050;}
.back_white {background-color: #fff;}
.back_schadow {background-color: #dadada;}
.back_gray {background-color: #757575;}
.back_graylight {background-color: #a5a5a5 !important;}
.back_blue {background-color: #0099fd;}
.back_bluelight {background-color: #87cefa;}
.back_green {background-color: #008040 !important;}
.back_greenlight {background-color: #a1b400;}
.bg-red {background-color: #e2001a;}
.back_redlight {background-color: #F08080 !important;}
.back_orange {background-color: #ffde7f;}
.back_orangelight {background-color: #ffebb2 !important;}
.back_yellow {background-color: #fcf4c2;}
.back_transparent {background-color: transparent;}
.back_finance {background-color: #fbecc8;} 
.text-black {color: #000 !important;}
.text-white {color: #fff !important;}
.text-red {color: #e2001a !important;}

.editor {background-color: #6c757d;}
.view {background-color: #343a40;}
.editor label, .view label {color: #ffc107 !important;}
.editor label {cursor: pointer;}
.error_small {background-color: #ffc107 !important;}
.error_small label, .error_small svg {color: #000;}
.error {background-color: #dc3545 !important;}
.error label, .error svg {color: #fff;}
.editor div, .editor p, .view div, .view p, 
.error div, .error p, .error_small div, .error_small p {color: #fff;}
.modal_xxl {margin: 30px auto;}
#html1, #html2 {
  position: relative;
  color: black !important;
  z-index: 10000;
}

.modal_xxl {
  margin: 30px auto auto;
  width: 95%;
}
@media (min-width: 1320px) {
  .modal_xxl {width: 1300px;}
}

i span {
  display: none; 
  top: 0rem; 
  right: 0; 
  padding: .5rem;
  min-height: 00px;
  height: auto;
  color: black;
  background-color: #ffde7f;
  max-height: 100%;
	width: 300px; 
	overflow: hidden;
  z-index: 214748364;
}
i:hover span {display: inline; position: fixed;}

input[type=text]:read-only, .readonly {
  background-color: #fdeeba;
}

#table_cal {
  table-layout: fixed;
}
#table_cal td th {
  width: 14.28% !important;
  max-width: 14.28% !important;
  background-color: #000 !important;
}
#table_cal thead tr:nth-child(1) th { 
  background-color: black;
  position: sticky; 
  top: 0; 
  z-index: 10;
}