*{margin:0px;padding:0px;box-sizing:border-box;}
html,body{width:100%;height:100%;font-family: Montserrat,monospace;background:#f3f5f7}
a{text-decoration:none;cursor:pointer}
#header{position:absolute;top:0px;height:60px;width:100%;background:#fff}
#header h3{display:inline-block;vertical-align:top;height:60px;line-height:60px;margin-left:20px;font-size:26px;font-family: 'Roboto', sans-serif;}
#header #logout{position:absolute;top:10px;right:20px;font-size:20px;line-height:20px;cursor:pointer}
#header img{ margin-left:8px;cursor:pointer }
#container{display:none}
#login_container{display:none}
#login_submit{cursor:pointer}

#area{position:absolute;top:60px;bottom:0px;left:0px;right:0px}
#content{border-top: 1px solid #e7eaee;padding:8px;}
.menu{width:260px;height:100%;background:#fff;border-right: 1px solid #e7eaee;}
.menusmall{width:60px !important;overflow-x:hidden}
.menusmall label{display:none}
.menu_item{height:60px;line-height:60px;font-size:20px;cursor:pointer;text-decoration:none;color:#000;display:block;cursor:pointer}
.menu_item:hover{background:#f3f5f7}
.menu_item span{margin:20px;height:20px}
.menu_item label{cursor:pointer;vertical-align:top;height:60px}
.menu_item_selected{color: #0059fc;}
.menu_text{}

.submenu{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.submenu li{display:inline-block;padding:8px}


#company_status{height:60px;line-height:60px;display:inline-block;vertical-align:top;margin-left:4px;text-decoration:none;color:#000}
#profile_status{position:absolute;top:0px;right:220px;height:60px;line-height:30px;text-align:center}
#fs_button{position:absolute;top:10px;right:130px;font-size:24px;line-height:24px;height:24px;cursor:pointer}


@keyframes move_wave {0% {transform: translateX(0) translateZ(0) scaleY(1)} 50% {transform: translateX(-25%) translateZ(0) scaleY(0.55)} 100% {transform: translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper {overflow: hidden;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto}
.waveWrapperInner {position: absolute;width: 100%;overflow: hidden;height: 100%;bottom: -1px;background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);}
.bgTop{z-index: 15;opacity: 0.5;}
.bgMiddle{z-index: 10;opacity: 0.75;}
.bgBottom{z-index: 5;}
.wave{position: absolute;left: 0;width: 200%;height: 100%;background-repeat: repeat no-repeat;background-position: 0 bottom;transform-origin: center bottom;}
.waveTop{background-size: 50% 100px;background-image: url('/i/wave-top.png')}
.waveAnimation .waveTop {animation: move-wave 3s;animation-delay: 1s; }
.waveMiddle{ background-size: 50% 120px;background-image: url('/i/wave-mid.png') }
.waveAnimation .waveMiddle{ animation: move_wave 10s linear infinite; }
.waveBottom{ background-size: 50% 100px;background-image: url('/i/wave-bot.png') }
.waveAnimation .waveBottom{ animation: move_wave 15s linear infinite; }





#login_area{z-index:100;background:rgba(0,0,0,0.5);border-radius:7px;position:absolute;padding:20px;margin:auto;top:40%;left:50%;transform:translate(-50%, -50%);font-size:18px;color:#fff;text-align:center}
#login_area input{border-color:rgba(255,255,255,0.8);background:none;color:#fff;border:1px solid #ccc;border-radius:3px;font-size:18px;height:40px;line-height:20px;margin:12px;width:260px;padding:6px;}
#login_area .icon{height:150px;position:absolute;top:-100px;}


.red{display:inline-block;width:30%;height:100px;border-radius:8px;padding:23px 32px;background:linear-gradient(90deg, rgb(252, 199, 195), rgb(248, 187, 208) 108%);color:rgb(20, 37, 63);box-shadow:rgba(252, 199, 195, 0.4) 0px 15px 30px 0px;}
.yellow{display:inline-block;width:30%;height:100px;border-radius:8px;padding:23px 32px;background:linear-gradient(90deg, rgb(255, 244, 179), rgb(254, 221, 179) 108%);color:rgb(20, 37, 63);box-shadow:rgba(252, 199, 195, 0.4) 0px 15px 30px 0px;}
.blue{display:inline-block;width:30%;height:100px;border-radius:8px;padding:23px 32px;    background:linear-gradient(90deg, rgb(191, 233, 252), rgb(179, 206, 254) 108%);color:rgb(20, 37, 63);box-shadow:rgba(252, 199, 195, 0.4) 0px 15px 30px 0px;}

.dash_chat{width:50%;border-radius:8px;height:400px;background:#fff;box-shadow:rgba(252, 199, 195, 0.4) 0px 15px 30px 0px;}

h2{text-decoration:none;color:#000}
h2 a{text-decoration:none;color:#000}
h3{text-decoration:none;color:#000}
h3 a{text-decoration:none;color:#000}

var{font-style:normal}

.data table {border-collapse:collapse;width:100%;}
.data td, .data th {border:1px solid #dddddd;text-align:left;padding:8px;}
.data tr:nth-child(even) {background-color:#dddddd;}



.calendar {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 120px;
  overflow: auto;
}
.calendar-container {
  width: 90%;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  max-width: 1200px;
}
.calendar-header {
  text-align: center;
  padding: 20px 0;
  background: linear-gradient(to bottom, #fafbfd 0%, rgba(255, 255, 255, 0) 100%);
  border-bottom: 1px solid rgba(166, 168, 179, 0.12);
}
.calendar-header h1 {
  margin: 0;
  font-size: 18px;
}
.calendar-header p {
  margin: 5px 0 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(81, 86, 93, 0.4);
}
.calendar-header button {
  background: 0;
  border: 0;
  padding: 0;
  color: rgba(81, 86, 93, 0.7);
  cursor: pointer;
  outline: 0;
}

.day {
  border-bottom: 1px solid rgba(166, 168, 179, 0.12);
  border-right: 1px solid rgba(166, 168, 179, 0.12);
  text-align: right;
  padding: 14px 20px;
  letter-spacing: 1px;
  font-size: 12px;
  box-sizing: border-box;
  color: #98a0a6;
  position: relative;
  pointer-events: none;
  z-index: 1;
}
.day:nth-of-type(7n + 7) {
  border-right: 0;
}
.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
  grid-row: 2;
}
.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
  grid-row: 3;
}
.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
  grid-row: 4;
}
.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
  grid-row: 5;
}
.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
  grid-row: 6;
}
.day:nth-of-type(7n + 1) {
  grid-column: 1/1;
}
.day:nth-of-type(7n + 2) {
  grid-column: 2/2;
}
.day:nth-of-type(7n + 3) {
  grid-column: 3/3;
}
.day:nth-of-type(7n + 4) {
  grid-column: 4/4;
}
.day:nth-of-type(7n + 5) {
  grid-column: 5/5;
}
.day:nth-of-type(7n + 6) {
  grid-column: 6/6;
}
.day:nth-of-type(7n + 7) {
  grid-column: 7/7;
}
.day-name {
  font-size: 12px;
  text-transform: uppercase;
  color: #99a1a7;
  text-align: center;
  border-bottom: 1px solid rgba(166, 168, 179, 0.12);
  line-height: 50px;
  font-weight: 500;
}
.day--disabled {
  color: rgba(152, 160, 166, 0.6);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  cursor: not-allowed;
}

.task {
  border-left-width: 3px;
  padding: 8px 12px;
  margin: 10px;
  border-left-style: solid;
  font-size: 14px;
  position: relative;
}
.task--warning {
  border-left-color: #fdb44d;
  grid-column: 4/span 3;
  grid-row: 3;
  background: #fef0db;
  align-self: center;
  color: #fc9b10;
  margin-top: -5px;
}
.task--danger {
  border-left-color: #fa607e;
  grid-column: 2/span 3;
  grid-row: 3;
  margin-top: 15px;
  background: rgba(253, 197, 208, 0.7);
  align-self: end;
  color: #f8254e;
}
.task--info {
  border-left-color: #4786ff;
  grid-column: 6/span 2;
  grid-row: 5;
  margin-top: 15px;
  background: rgba(218, 231, 255, 0.7);
  align-self: end;
  color: #0a5eff;
}
.task--primary {
  background: #4786ff;
  border: 0;
  border-radius: 4px;
  grid-column: 3/span 3;
  grid-row: 4;
  align-self: end;
  color: #fff;
  box-shadow: 0 10px 14px rgba(71, 134, 255, 0.4);
}
.task__detail {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid rgba(166, 168, 179, 0.2);
  color: #000;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.task__detail:after, .task__detail:before {
  bottom: 100%;
  left: 30%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.task__detail:before {
  border-bottom-color: rgba(166, 168, 179, 0.2);
  border-width: 8px;
  margin-left: -8px;
}
.task__detail:after {
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
.task__detail h2 {
  font-size: 15px;
  margin: 0;
  color: #51565d;
}
.task__detail p {
  margin-top: 4px;
  font-size: 12px;
  margin-bottom: 0;
  font-weight: 500;
  color: rgba(81, 86, 93, 0.7);
}



.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}















.emergency #container:before {
  content: "";
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 3px solid #F00;
  box-sizing: border-box;
  pointer-events: none;
  z-index:99999;
  animation: pulse-border 1s infinite;
}
@keyframes pulse-border {
  0% {
    border: 2px solid #F00;
  }
  100% {
    border: 5px solid #F00;
  }
}



#riskdot {
  display: inline-block;
  background: red;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
  height: 20px;
  width: 20px;
}

.emergency #riskdot {
  transform: scale(1);
  animation: pulse-red 2s infinite;
}


@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
 
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
 
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}


@media (orientation: landscape) {
    body{min-width:1200px}
}

@media (orientation: portrait) {
    #login_area{width:85%}
    #login_area input{width:90%;font-size:2.5vh;height:5vh;line-height:5vh}
    #login_area .icon{height:16vh;position:absolute;top:-12vh;}
}


:root{
    --dark-color1: #D5EAED; /* text color */
    --dark-color2: #1B4D3E; /* */
    --dark-color3: #252422; /* content text */
    --dark-color4: #b7d4d8; /* content background */
    --dark-color5: #1A171D; /* background,menu,topbar */
}

/* todo for dark mode the boxes backgrounds are semi transparent to make them look darker */
body .dark{background:var(--dark-color5) !important;color:var(--dark-color1)}
html .dark{background:var(--dark-color5) !important;color:var(--dark-color1)}
.dark h2{color:var(--dark-color1)}
.dark #header{background:var(--dark-color5)}
.dark #header h3{color:var(--dark-color1)}
.dark #content{background:var(--dark-color4);border-top: 1px solid #6180A7;color:var(--dark-color3)}
.dark .menu{background:var(--dark-color5);border-right: 1px solid #e7eaee;}
.dark a{color:var(--dark-color1)}
.dark .data tr:nth-child(even) { background-color:var(--dark-color5); }
.dark #company_status{color:var(--dark-color1)}