:root {
  --primary-color: #009cdd;
  --primary-color_light: var(--primary-color);

  --primary-backgroung_top: #ffffff;
  --primary-backgroung: #f7f7f7;
  --primary-off_element: #cdcccc;
  --primary-color_nav_bar: rgb(41, 38, 38);
  --primary-breadcrumb_list: #999;
  --primary-contrtol_button: #666;

  --primary-color_tippy: var(--primary-color);

  --primary-bage_online: #28a745;
  --primary-bage_offline: #343a40;
  --primary-bage_off: #343a40;
  --primary-bage_info: var(--primary-color);
  --primary-bage_error: #dc3545;
  --primary-bage_warning: #ffc107;

  --primary-input_border:#e5e5e5;
  --primary-color_control_text: #666;


  --primary-font-weight_dashboard_unit_elements: 500;
  --primary-dashboard_bar_height:2px;


  --units-bg_units_update: url(../images/2VV/units/unit_update_fw.svg);
  --units-bg_units_offline: url(../images/2VV/units/unit_offline.svg);
  --units-bg_units_on: url(../images/2VV/units/unit_on.svg);
  --units-bg_units_off: url(../images/2VV/units/unit_off.svg);
  --units-bg_units_r_on: url(../images/2VV/units/unit_r_on.svg);
  --units-bg_units_r_off: url(../images/2VV/units/unit_r_off.svg);
  --units-bg_ac_on: url(../images/2VV/units/ac_on.svg);
  --units-bg_ac_off: url(../images/2VV/units/ac_off.svg);
  --units-bg_au_on: url(../images/2VV/units/unit_A_on.svg);
  --units-bg_au_off: url(../images/2VV/units/unit_A_off.svg);

  --icons-basic-gunsight: url(../images/2VV/icon/basic-gunsight.svg);
  --icons-icon_copy: url(../images/2VV/icon/icon_copy.png);
}

.sar_theme {
  --primary-color: #004985;
  --primary-color_light: #4c89a6;

  --primary-backgroung_top: #ffffff;
  --primary-backgroung: #f4f5f5;
  --primary-off_element: #999c9e;
  --primary-color_nav_bar: var(--primary-color_light);
  --primary-breadcrumb_list: #2B2A29;
  --primary-contrtol_button: var(--primary-color_light);

  --primary-color_tippy: var(--primary-color_light);

  --primary-bage_online: #31A94D;
  --primary-bage_offline: #343a40;
  --primary-bage_off: #343a40;
  --primary-bage_info: var(--primary-color_light);
  --primary-bage_error: #E18060;
  --primary-bage_warning: #D6D718;

  --primary-input_border:var(--primary-color_light);
  --primary-color_control_text: #1D1D1B;


  --primary-font-weight_dashboard_unit_elements: 700;
  --primary-dashboard_bar_height:3px;

  --units-bg_units_update: url(../images/SAR/units/unit_update_fw.svg);
  --units-bg_units_offline: url(../images/SAR/units/unit_offline.svg);
  --units-bg_units_on: url(../images/SAR/units/unit_on.svg);
  --units-bg_units_off: url(../images/SAR/units/unit_off.svg);
  --units-bg_units_r_on: url(../images/SAR/units/unit_r_on.svg);
  --units-bg_units_r_off: url(../images/SAR/units/unit_r_off.svg);
  --units-bg_ac_on: url(../images/SAR/units/ac_on.svg);
  --units-bg_ac_off: url(../images/SAR/units/ac_off.svg);
  --units-bg_au_on: url(../images/SAR/units/unit_A_on.svg);
  --units-bg_au_off: url(../images/SAR/units/unit_A_off.svg);

  --icons-basic-gunsight: ../images/SAR/icon/basic-gunsight.svg;
  --icons-icon_copy: ../images/SAR/icon/icon_copy.png;

}
/* zmena icon fontu pro sar mode */
/*.sar_theme [class^="iconnew-"],*/
/*.sar_theme [class*=" iconnew-"] {*/
   /* font-family: "icon_sar" !important;*/
    /*color: var(--primary-color);*/
    /*font-weight: normal;*/
/*}*/
/* Override inside SAR theme */
/*.sar_theme .icon {*/
/*  font-family: 'icon_sar2' !important;*/
/*}*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.iconsize{
  font-size: 120%;
  font-weight: 700;
 }

 /* Remove horizontal line from modal footer */
.modal-footer {
  border: none;
}


/* hide sym in google maps on control page*/
#AG_Control_map .gm-fullscreen-control,
#AG_Control_map .gm-style-cc
{
  display:none;
 }

 /*------------------------------------------*/
 .sar_theme .header__navbar{
  font-family: 'Inter', system-ui, sans-serif;
}

.genio_theme .header__navbar ul li a,
.sar_theme .header__navbar ul li a {
  font-size: 19px;
}

.genio_theme .bot-line,
.sar_theme .bot-line {
  bottom: 9px;
}

.genio_theme #AG_Unit_view,
.sar_theme #AG_Unit_view {
  font-family: "Roboto", system-ui, sans-serif; 
}


 /*------------------------------------------*/
.disabled_user_control_level_1 {
  pointer-events: none;   /* blocks clicks/hover */
  user-select: none;      /* prevents text selection */
  opacity: 0.4;           /* optional: grey it out */
}

.permission-note {
    position: absolute;
    left: 30px;
    bottom: 10px;
    font-size: 0.9rem;
    color: #972f2f;
    /* opacity: 0.8; */
}
 /*------------------------------------------*/

#AG_Unit_container_ID{
  float:right;
  height: 100%;
  width: 79%;
  transform-origin:0 0;
  /*transform: scale(0.8);*/
}

#AG_Unit_Zoom_Wrap{
  transform-origin:0 0;
}
#Search_panel_left_fixed{
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}


#left_panel_Units{
  margin-top: 5px;
  margin-left: 15px;
  float:left;
  height: 168vh;
  width: 19%;
  overflow:auto;
  background: #f7f7f7;
  justify-content: space-around;
  flex-wrap: wrap;
  direction: rtl;
  /* min-width: 18% !important;*/
}


@media (max-width: 991px) {
  #left_panel_control {
      display: none; 

  }

  #AG_Unit_container_ID {
   /* margin-left: 10px;*/ 
    margin-right: 10px; 
    padding-left: 10px;
}
}

@media (max-width: 991px) {
  #AG_Unit_container_ID {
    float:left !important;
    width: 100% !important;
  }
}


 /* COntrol page - right menu -------------------------------- */

 #AG_Unit_info {
  position: relative;
   transform-origin:0 0;
   background-color: var(--primary-color);
   color: rgb(255, 255, 255);
   height: 100px;
   margin-top: 10px;
 }
  .sar_theme #AG_Unit_info {
  position: relative;
   font-family: 'Inter', system-ui, sans-serif;
 }

 #AG_Unit_status {
  position: relative;
  transform-origin:0 0;
  display: flex;
  justify-content: space-between; 
  height: 100px;
  margin-top: 10px;

}

#AG_Unit_view_wrap {
  position: relative;
  transform-origin:0 0;
  background-color: #f7f7f7;
}

#AG_Unit_view_subwrap {
  position: relative;
  transform-origin:0 0;
}

 #AG_Unit_view {
  position: relative;
  transform-origin:0 0;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  color: var(--primary-color_control_text);
}


/* fire_alarm*/
.fire_alarm :not(#AG_Unit_el_Fire,#AG_Unit_el_info_lb,#AG_Unit_Button_1,#AG_Unit_el_Button) {
  opacity: 0.7;
  filter: grayscale(90%);
}
.fire_alarm #AG_Unit_el_Fire{
  display: block;
}

#AG_Unit_control {
  position: relative;
  transform-origin:0 0;
}

#AG_Unit_control_prime {
  position: relative;
  transform-origin:0 0;
}

 /* service menu-------------------------------- */
 #AG_Unit_service {
  position: relative;
  width: 1137px;
}
/* 45% - 992px for one items per line*/
@media (min-width: 1500px){
  .modal_width-service {
      max-width: 65%;
  }}

@media (min-width: 1200px)and (max-width: 1500px){
  .modal_width-service {
      max-width: 75%;
  }}
  @media (min-width: 576px) and (max-width: 1200px){
    .modal_width-service {
        max-width: 95%;
    }}

 /*-------------------------------- */
 #bt_collapse_menu{
  position: absolute;
  top: 26px;
  right: 82px;
  cursor: pointer;
 }
 #bt_collapse_menu:hover{
  color: var(--primary-color);
 }

 .servicewrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.service_row {
  /*--bs-gutter-x: 1.5rem; */
  /* --bs-gutter-y: 0; */
  display: flex;
  flex-wrap: wrap;
  /* margin-top: calc(var(--bs-gutter-y) * -1); */
  /* margin-right: calc(var(--bs-gutter-x)/ -2); */
  /* margin-left: calc(var(--bs-gutter-x)/ -2);*/
}

.servicebtn{
  padding-top: 0px; 
  padding-bottom: 20px; 
}
.servicebtnitem{
  margin-right: .6em;
}

 .serviceitem {
  margin-bottom: 5px;
  position: relative;
  width: 100%;
  min-height: 1px;
  font-size: 16px; 
}
.serviceitem .Check_container{
  font-size: 16px; 
  font-weight: 700; 
}

.JS_direct_cntrl .Check_container{
  font-size: 16px; 
  font-weight: 700; 
}

.serviceitem .disable{
  opacity: 0.6;
  filter: grayscale(90%);
  pointer-events: none;
}

.serviceitem .shide{
  display: none;
}

.service_control-label_select {
  margin-bottom: 1px;
  margin-left: -8px;
  font-weight: 700; 
}
.service_control-label_select>i {
  font-weight: 700; 
}

.service_control-label {
  margin-bottom: -5px;
  font-weight: 700; 
}
.direct_control-label {
  margin-bottom: -5px;
  font-weight: 700; 
  font-size: 25px;
  color: var(--primary-color);
}

.service_control-label>i {
  font-weight: 700; 
}


.service_control-action {
  margin-bottom: -5px;
  font-weight: 700;
  
}

/*
@media (min-width: 991px){
.serviceitem{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}
*/
 /*-------------------------------- */

.Scollapsible {
  margin-right: 10px;
  color: #666;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 20px;
  margin-bottom: -2px;
  border:none;
  font-weight: bold;
  background-color: #ffffff;
  border-bottom: double;
}

.SSubparam {
  font-weight: normal;
  font-size: 15px;
  text-align: left;
  margin-top: 5px;
  margin-left: 15px;
}

.Scollapsible.changegroup {
  color: var(--primary-color);;
}

#bt_service_save.changebtn>i:after{
  content: '\f3b2'!important;
  font-weight: bold !important;
  font-size: 18px !important;
  color: var(--primary-color);
  margin-left: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.changegroup>i:after{
  content: '\f3b2'!important;
  font-weight: bold !important;
  font-size: 18px !important;
  margin-left: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.change:after {
  content: '\f3b2'!important;
  color: var(--primary-color);
  font-weight: bold !important;
  font-size: 18px !important;
  margin-left: 10px;
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.Sactive {
  background-color: whitesmoke;
}


.Scollapsible:hover {
  color: var(--primary-color);
}CallBackStartServic


.Scollapsible:hover:after {
  border-color: var(--primary-color);
}

.Scollapsible:after {
  border-bottom: 4px solid #666;;
  border-right: 4px solid #666;;
  content: '';
  display: block;
  height: 11px;
  margin-right: 20px;
  margin-top: 12px;
  float: right;
  -webkit-transform-origin: 66% 66%;
      -ms-transform-origin: 66% 66%;
          transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 11px; }
.Scollapsible.Sactive:after {
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg); }


.Scontent {
  /*padding-left: 2em;
  padding-right: 2em;*/
  max-height: 0;
  /*overflow: hidden;*/
  transition: max-height 0.2s ease-out;
  background-color: white;
}

.Sicon_m {
margin-right: 6px;
}

.Sicon_mdi {
  margin-right: 12px;
  }
.Sicon_mdst {
   margin-right: 12px;
   margin-left: 5px;
 }
 .Sicon_mdch {
  margin-right: 9px;
  margin-left: 3px;
}


/*gauges-----------------------------------------------------*/
  /* ------------------- Default Style ------------------------- */

  .gauge-container {
    position: relative;
    width: 260px;  /*width: 152px;*/
    height: 100px;
    display: block;
    /* float: left; */
    padding: 8px;
    padding-top: 8px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    
  }

  .gauge-container.gaug1 {
    max-width: 150px;
    min-width: 150px;
  }

  .gauge-container:not(:first-child){
    margin-left: 10px;
}

  .gauge-container.one > .gauge > .dial {
    stroke: #f7f7f7;
    stroke-width: 2;
  }
  
  .gauge-container.one > .gauge > .value {
    stroke: var(--primary-color);
    stroke-width: 2;
  }
  
  .gauge-container.one > .gauge > .value-text {
    fill: var(--primary-color);
    font-weight: bold;
    font-size: 0.6em;
  }

  /* ------------------- Alternate Style ------------------------- */

  .gauge-container.two > .gauge > .dial {
    stroke: #f7f7f7;
    stroke-width: 18;
  }
  .gauge-container.two > .gauge > .value {
    /*stroke: orange;*/
    stroke-dasharray: none;
    stroke-width: 18;
  }

  .gauge-container.two > .gauge .value-text {
    fill: var(--primary-color);
    transform: translate3d(0%, -10%, 0);
    display: inline-block;
    font-size: 1.0em;
    font-weight: bold;
  }
  .MGheight{
    position:relative;
    padding-bottom: 55%;
}
.MGtext{
    left: 0px;
    width: 100%;
    color:#fff;
    position:absolute;   
}

.gauge-container.two .value-text {
  color: var(--primary-color);
  /*font-weight: 400;*/
  text-align: center;
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  font-weight: bold;
  font-size: 0.91em;
}

  .gauge-container.two .value-text .big {
    font-weight: 400;
    margin-right: 0.4em;
  } 
/* --- icon font ---*/
  .gauge-container.ico .value-icon_n {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-weight: 250;
  } 


  .gauge-container.ico.active {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 70px;
  font-weight: 700;
  } 

  .gauge-container.ico:not(.active) {
  background-color: #fff;
  color: var(--primary-color);
  font-size: 50px;
  font-weight: 700;
  } 

/* --- icon svg ---*/
/*
  .gauge-container.ico .value-icon {
    color: var(--primary-color);
    font-weight: 100;
    text-align: center;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-block;
    font-weight: bold;
    font-size: 0.7em;
    opacity: 0.5;
  } 
*/
  .gauge-container.two .value-mode {
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-block;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: .2rem;

    /*text-wrap: nowrap;*/
    /*line-height: 140%;*/
  } 

   .sar_theme #gauge_mode {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;   /* velikost domečku */
    }

    .genio_theme #gauge_mode .value-mode_icon {
      display: none;
    }

    /* IKONA DOMEČKU */
    .sar_theme #gauge_mode .value-mode_icon {
      color: var(--primary-color);
      font-size: 1em;    /* domeček */
      position: absolute;
      line-height: 1;
      z-index: 1;
    }

    /* TEXT UVNITŘ DOMEČKU */
    .sar_theme #gauge_mode .value-mode {
      color: var(--primary-color);
      position: absolute;
      font-size: 0.25em; /* text = 25 % domečku */
      font-weight: 900;
      text-transform: uppercase;
     letter-spacing: -0.001em; 
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) translateY(13px); /* doladění pod střechu */
      z-index: 2;
      white-space: nowrap;
    }

  .gauge-container.two .value-mode-prime {
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    display: inline-block;
    font-size: 22px;
    line-height: 90%;

    text-wrap: nowrap;
    line-height: 140%;
  } 

  .gauge-container.two .value-mode.warning {
    color: #d51317;
  } 

/*end gauges--------------------------------------------------*/

/*MAIN AG CONTROL BOXES---------------------------------------*/
#AG_Unit_control_wrap {
  display: flex;
  justify-content: space-between;
  max-width: 1137px;
  width: 100%;
  flex-wrap: wrap;
 /* margin-right: -15px;
  margin-left: -15px;*/
}

 /*
@media (max-width: 1445px) {
  #AG_Unit_control_wrap {
    display: block;
    margin-right: 10px;
  }
}
*/

.control_panel_box {
  background-color: rgb(255, 255, 255);
  height: 180px;
  margin-top: 10px; 
}

.control_panel_box_graph {
  background-color: rgb(255, 255, 255);
  height: 420px;
  margin-top: 10px; 
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 15px;
}

.clegend-container{
  position: absolute;
  height: 60px;
  bottom: -21px;
  white-space: nowrap;

}

.clegend-container ul {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clegend-container li {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  font-size: 18px;
}

  /* Media query for smaller screens */
  @media screen and (max-width: 1221px) {
    .clegend-container li {
      margin-left: 0; /* Remove the left margin for list items in the column layout */
      margin-bottom: 10px; /* Add bottom margin for spacing between items */
      font-size: 16px; /* Adjust the font size for smaller screens */
    }
  }

  @media screen and (max-width: 940px) {
    .clegend-container li {
      font-size: 12px; /* Adjust the font size for smaller screens */
    }
  }

  @media screen and (max-width: 585px) {
    .clegend-container li {
      font-size: 8px; /* Adjust the font size for smaller screens */
    }
  }

  @media screen and (max-width: 480px) {
    .clegend-container li {
      font-size: 6px; /* Adjust the font size for smaller screens */
    }
  }

#AG_Unit_graph_inside{
  width: 100%;
  padding-bottom: 32px; 
}

#AG_Unit_graph_loader{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#toggle_fullscreen_graph {
  position: absolute;
  right: 15px;
  bottom: 10px;
  font-size: 40px;
  color: var(--primary-contrtol_button);
  opacity: 0.8;
}
#toggle_fullscreen_graph:hover {
  transform: scale(1.3, 1.3);
  opacity: 1;
}

#reset_zoom_graph {
  position: absolute;
  right: 57px;
  bottom: 15px;
  font-size: 30px;
  color: #ce2626;
  opacity: 0.9;
}
#reset_zoom_graph:hover {
  transform: scale(1.2, 1.2);
  opacity: 1;
}

/*
.control_panel_box {
  position: relative;
  margin-top: 10px;  
  height: 180px;
  display: block;
  padding: 8px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  min-width: 564px;
  max-width: 1137px;
}
@media (max-width: 991px) {
  .control_panel_box {
    min-width: 10px;
    margin-right: 10px;
  }
}
*/


#TestTimer {
  cursor: pointer;
  position: absolute;
  top: 5px;
  left: 103px;
  right: 40px;
  /* width: 80%; */
  /* height: 80%; */
}

/*end slider--------------------------------------------------*/

/**scrollbar****/
::-webkit-scrollbar {
  width: 0px;
  height: 2em 
}
/* problem with popup in google maps
::-webkit-scrollbar-button {
  background: #ccc 
}
*/
::-webkit-scrollbar-track-piece {
  background: #888 
}
::-webkit-scrollbar-thumb {
  background: #eee 
}
/*end slider--------------------------------------------------*/



/*------------------------------------------*/
.units-left_panel_list {
  position: relative;
  padding: 5px;
}
.myinside  {
  /*float: left;*/
  text-align: left;
  position: relative;
  background: #fff;
  display: block;
  color: #666;
  padding: 15px 25px;
  font-size: 16px;
  font-weight: 600;
}

.units-left_panel_list .error_left {
  position: absolute;
  top: 12px;
  right: -7px;
  z-index: 2;
  transform: scale(0.8, 0.8);
}

.myinside.myinsideoff {
  background: #fff;
  color: rgb(165, 159, 159);
}

.myinside.myinsideoffline {
  background: #dfdfdf;
  color: rgb(255 255 255);
}


.panel_active {
  z-index: 2;
  height: 100%;
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  float:left;
  width: 5px;
 }

.panel_active.active {
  background: var(--primary-color);
 }

@media (max-width: 1400px) {
  .units-left_panel_list a {
    font-size: 12px;
    font-weight: 500;
  }
}

.units-left_panel_list .myinside:hover:not(.myinsideoffline) {
  background: var(--primary-color);
  color: #fff;
}
.units-left_panel_list .myinside i {
  line-height: 1;
  margin-right: 18px;
  /*font-size: 18px;*/
  vertical-align: middle;
}

/*------------------------ */

#AG_Unit_view.loading {
  opacity: 0;
}
.AG_Unit_box {
  position: relative;
  left: 0px;
  left: 0px;

}

.myunit.AG_Unit_box.AHAHl_unit:not(.AHAHl_slave) #div_unit_container{
  position: relative;
  top: 110px;
}



/*------------------------ */
.Blink {
  animation: blinker 0.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker {
  from {
      opacity: 1;
 }
  to {
      opacity: 0;
 }
}

@keyframes blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.blink2 {
  animation: 1.3s blink_effect infinite
}

.blinkError {
  color: #d51317;
  animation: 1.3s blink_effect infinite
}

@keyframes blinkerUnit {
  50% {
     opacity: 0;
 }
}
@keyframes rotationFan {
  from {
     -webkit-transform: rotate(0deg);
 }
  to {
     -webkit-transform: rotate(359deg);
 }
}

.myunitwrap {
  transition: 0.4s;
}

.myunit {
  width: 1137px;
  height: 460px;
   /*
  box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.25), -2px -2px -10px -2px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: 0.4s;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(184, 190, 186);
  */
}
/* .myunit:hover {
  transform: scale(0.94, 0.94);
  box-shadow: 2px 2px 2px 2px rgba(59, 63, 65, 0.25), -2px -2px -2px -2px rgba(26, 26, 27, 0.22);
}
*/
#AG_Control_Button {
 position: absolute;
 cursor: pointer;
  top: 93px;
  left: 33px;
}

.main_button_boost {
  position: absolute;
  cursor: pointer;
   top: 20px;
   left: 33px;
   width: 50px;
   height: 50px;
   border: 2px solid #cdcccc;
   border-radius: 3px;
   color: #cdcccc;
 }


.sar_theme .main_button_boost {
  border: 0;
  border-radius: 0;
}

 .main_button_boost:hover {
    transform: scale(1.1, 1.1);
 }

 .main_button_boost .value-icon_n {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  font-weight: 700;
  font-size: 35px;
} 
.sar_theme .main_button_boost .value-icon_n {
  font-weight: 500;
  font-size: 40px;
}

.main_button_boost.active{
  border-color: var(--primary-color_light);
  color: var(--primary-color_light);
}

#AG_Control_Slider_div,
#AG_Control_Slider_div_prime {
  position: absolute;
   top: 14px;
   left: 115px;
   right: 15px; 
 }
 #AG_Control_Slider_div.FlowAutomat_mode {
   top: 68px; 
 }
 #AG_Control_Slider_div_prime.FlowAutomat_mode {
  top: 68px; 
}

#AG_Control_Slider_temp_new,
#AG_Control_Slider_temp_prime
 {
  position: absolute;
   top: -10px;
   left: 48px;
   right: 5px;
   overflow: hidden;
 }

#AG_Control_Slider_flow_new,
#AG_Control_Slider_flow_prime
 {
  position: absolute;
   top: 58px;
   left: 48px;
   right: 5px;
   overflow: hidden;
 }

 #AG_Control_lb_temp,
 #AG_Control_lb_temp_prime
  {
  position: absolute;
  color: var(--primary-color);
  font-weight: 900;
   top: 30px;
   left: 60px;
 }

#AG_Control_lb_flow,
#AG_Control_lb_flow_prime
 {
 position: absolute;
 color: var(--primary-color);
 font-weight: 900;
  top: 98px;
  left: 60px;
}

#AG_Control_Icon_temp, 
#AG_Control_Icon_temp_prime {
  position: absolute;
   top: 4px;
   left: 0px;
   width: 60px;
   color: var(--primary-color);
   font-weight: 400;
   font-size: 2.8em;
 }

 #AG_Control_Icon_flow,
 #AG_Control_Icon_flow_prime {
  position: absolute;
   top: 74px;
   left: 0px;
   width: 60px;
   color: var(--primary-color);
   font-weight: 400;
   font-size: 2.8em;
 }

 #subicon {
  position: absolute;
  top: -1px;
  left: -24px;
  /* width: 30px; */
  /* height: 30px; */
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.55em;
 }



#AG_Control_map {
  position: absolute;
   top: 5px;
   right: 5px;
   left: 5px;
   bottom: 5px;
 }

/*info------------------*/
#AG_Unit_view_name {
 position: absolute;
  top: 2px;
  left: 15px;
  font-weight: 900;
  font-size: 2.1rem;
}
.sar_theme #AG_Unit_view_name {
  font-weight: 700;
}

#AG_Unit_view_sub {
 position: absolute;
  top: 45px;
  left: 15px;
  font-weight: 700;
}
#AG_Unit_view_name2 {
 position: absolute;
  top: 65px;
  left: 15px;
  font-weight: 900;
}
.sar_theme #AG_Unit_view_name2 {
  font-weight: 700;
}

#AG_Unit_view_sn {
 position: absolute;
  top: 10px;
  right: 15px;
}
#AG_Unit_view_ean {
 position: absolute;
  top: 40px;
  right: 15px;
}

#AG_Unit_view_button_info{
  position: absolute;
   top: 75px;
   right: 15px;
   color: rgb(255, 255, 255);
   font-weight: 600;
   font: 20px;
 }
/*---------------------------------------------------------------- */
#AG_Unit_el_ {
  position: absolute;
  left: 0px;
  top: 0px;
}
#AG_Unit_el_Fire {
  width: 453px;
  height: 326px;
  z-index: 10;
  position: absolute;
  left: 318px;
  top: 62px;
  display: none;
}

#AG_Unit_el_UnitImg {
  width: 890px;
  height: 409px;
  z-index: 0;
  position: absolute;
  left: 131px;
  top: 12px;
  /*transform: scaleX(-1);*/
  /*filter: grayscale(100%);*/
}

#toggle_fullscreen {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 40px;
  color: var(--primary-contrtol_button);
  opacity: 0.8;
}
#toggle_fullscreen:hover {
  transform: scale(1.3, 1.3);
  opacity: 1;
}


#AG_Unit_el_Button {
  position: absolute;
  right: 102px;
  bottom: 14px;
  font-size: 40px;
  color: var(--primary-contrtol_button);
  opacity: 0.8;
}
#AG_Unit_el_Button:hover {
  transform: scale(1.3, 1.3);
  opacity: 1;
}

#AG_Unit_el_Button.active {
  color: var(--primary-color);
}

#AG_Unit_Service_menu_bt {
  position: absolute;
  right: 22px;
  bottom: 3px;
  font-size: 40px;
  color: var(--primary-contrtol_button);
}
#AG_Unit_Service_menu_bt:hover {
  transform: scale(1.2, 1.2);
  opacity: 1;
}

#AG_Unit_Service_menu_bt.active {
  color: var(--primary-color);
}

#AG_Unit_history_player_bt {
  position: absolute;
  right: 65px;
  bottom: 5px;
  font-size: 34px;
  color: var(--primary-contrtol_button);
}
#AG_Unit_history_player_bt:hover {
  transform: scale(1.2, 1.2);
  opacity: 1;
}

#AG_Unit_history_player_bt.active {
  color: var(--primary-color);
}

#AG_Unit_Error_B_div {
  position: absolute;
  left: 42px;
  bottom: 12px;
  font-size: 20px;
  transform: scale(1.3, 1.3);
}
#AG_Unit_Error_B_div:hover {
  transform: scale(1.5, 1.5);
}
.bigfirst {
  font-size: 40px;
}

.bigfirstDash {
  font-size: 30px;
}

.errorbage1 {
  position: absolute;
  left: 25px;
  top: -5px;
  color: rgb(255, 255, 255);
  background-color: #b6b7b8;
}
.errorbage2 {
  position: absolute;
  left: 26px;
  top: -2px;
  color: rgb(255, 255, 255);
  background-color: #b6b7b8;
}
.errorbage3 {
  position: absolute;
  left: 25px;
  top: -1px;
  color: rgb(255, 255, 255);
  background-color: #b6b7b8;
}

#Error_unit_clipboard_content {
  font-size: 18px;
  color: #666;
  font-weight: 900;
}

#Modal_info_content {
  font-size: 18px;
  color: #666;
  font-weight: 700;
}

.Imput_error_message {
  color: #fa4251;
  font-size: 13px;
  font-weight: 400;
}


.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_UnitImg {
  width: 890px;
  height: 409px;
  left: 68px;
  top: 28px;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_UnitImg {
  width: 876px;
  height: 409px;
  left: 135px;
  top: -90px;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_UnitImg_slave {
  position: absolute;
  width: 572px;
  height: 192px;
  left: 437px;
  top: 219px;
}

/* icons-------------*/
#AG_Unit_cooldown {
  width: 55px;
  height: 55px;
  z-index: 2;
  position: absolute;
  left: 30px;
  top: 390px;
}

#AG_Unit_calibration {
  z-index: 2;
  position: absolute;
  left: 339px;
  top: 392px;
}

#AG_Unit_calibration_text
{
  position: absolute;
  left: 50px;
  top: 0px;
  font-weight: 700;
}

#AG_Unit_calibration_bar
{
  position: absolute;
  left: 50px;
  top: 25px;
}

#AG_Unit_calibration_ico
{
  position: absolute;
  left: 0px;
  top: 5px;
  color: var(--primary-color);
}


/* fans------------ */
#AG_Unit_el_Img_fan_l {
  width: 60px;
  height: 60px;
  z-index: 1;
  position: absolute;
  left: 315px;
  top: 292px;
}
.AG_Unit_box.AC_Unit #AG_Unit_el_Img_fan_l {
  display: none;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_Img_fan_l {
  left: 315px;
  top: 82px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_Img_fan_l {
  left: 590px;
  top: 294px;
}

.sar_theme #AG_Unit_el_Img_fan_l {
  width: 37px;
  height: 37px;
  left: 317px;
  top: 303px;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_Img_fan_l {
  left: 335px;
  top: 92px;
}

#AG_Unit_el_lb_fan_l {
  white-space: nowrap;
  text-align: right;
  position: absolute;
  left: 285px;
  top: 230px;
  font-weight: 700;
  width: 120px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_lb_fan_l {
  left: 284px;
  top: 181px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_lb_fan_l {
  left: 559px;
  top: 212px;
}

.sar_theme #AG_Unit_el_lb_fan_l {
    left: 285px;
    top: 267px;
    font-weight: 700;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_lb_fan_l {
    left: 300px;
    top: 140px;
}


#AG_Unit_el_bar_fan_l {
  z-index: 1;
  position: absolute;
  left: 331px;
  top: 233px;
  width: 8px;
  height: 63px;
  transform: rotate(90deg);
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_bar_fan_l {
  left: 330px;
  top: 137.5px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_bar_fan_l {
  left: 606px;
  top: 236.5px;
}

#AG_Unit_el_press_fan_l {
  white-space: nowrap;
  text-align: right;
  position: absolute;
  left: 302px;
  top: 382px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_press_fan_l {
  left: 304px;
  top: 25px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_press_fan_l {
  left: 668px;
  top: 284px;
}
.sar_theme #AG_Unit_el_press_fan_l {
  left: 315px;
  top: 352px;
  text-align: center;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_press_fan_l {
  left: 330px;
  top: 63px;
  text-align: center;
}


#AG_Unit_el_Img_fan_r {
  width: 60px;
  height: 60px;
  z-index: 1;
  position: absolute;
  left: 746px;
  top: 292px;
}
.AG_Unit_box.AC_Unit #AG_Unit_el_Img_fan_r {
  width: 120px;
  height: 120px;
  left: 524px;
  top: 101px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_Img_fan_r {
  left: 746px;
  top: 292px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_Img_fan_r {
  left: 587px;
  top: 93px;
}

.sar_theme #AG_Unit_el_Img_fan_r {
  width: 37px;
  height: 37px;
  left: 759.5px;
  top: 303px;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_Img_fan_r {
  left: 760px;
  top: 302px;
}

#AG_Unit_el_lb_fan_r {
  white-space: nowrap;
  text-align: right;
  position: absolute;
  left: 714px;
  top: 230px;
  font-weight: 700;
  width: 120px;
}
.AG_Unit_box.AC_Unit #AG_Unit_el_lb_fan_r {
  left: 369px;
  top: 321px;
  font-weight: 700;
  font-size: 70px;
  width: 180px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_lb_fan_r {
  left: 715px;
  top: 229px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_lb_fan_r {
    left: 715px;
    top: 266px;
}

.sar_theme #AG_Unit_el_lb_fan_r {
    left: 720px;
    top: 267px;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_lb_fan_r {
    left: 715px;
    top: 266px;
}

#AG_Unit_el_press_fan_r {
  white-space: nowrap;
  text-align: left;
  position: absolute;
  left: 730px;
  top: 382px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_press_fan_r {
  left: 730px;
  top: 383px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_press_fan_r {
  left: 669px;
  top: 83px;
}

.sar_theme #AG_Unit_el_press_fan_r {
    left: 763px;
    top: 352px;
    text-align: center;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_press_fan_r {
    left: 764px;
    top: 349px;
}

#AG_Unit_el_bar_fan_r {
  z-index: 1;
  position: absolute;
  left: 761px;
  top: 233px;
  width: 8px;
  height: 63px;
  transform: rotate(90deg);
}
.AG_Unit_box.AC_Unit #AG_Unit_el_bar_fan_r {
  left: 556px;
  top: 25px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_bar_fan_r {
  left: 760.5px;
  top: 231.6px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_bar_fan_r {
  left: 604px;
  top: 35px;
}
/* filters------------ */

#AG_Unit_el_filter_l{
  z-index: 1;
  position: absolute;
  left: 300px;
  top: 62px;
  width: 50px;
  height: 100px;
}

#AG_Unit_el_filter_r{
  z-index: 1;
  position: absolute;
  left: 772px;
  top: 62px;
  width: 50px;
  height: 100px;
}


#AG_Unit_filter_IMG_l,
#AG_Unit_filter_IMG_r {
  z-index: 4;
  position: absolute;
  left: 0px;
  top:  0px;
  width: 46px;
  height: 100px;
}

.sar_theme #AG_Unit_filter_IMG_r {
  transform: rotate(180deg);
}


#AG_Unit_filter_mask_l,
#AG_Unit_filter_mask_r {
  z-index: 2;
  position: absolute;
  left: 1px;
  top: 8px;
  width: 44px;
  height: 84px;
  background-color: #ffffff;
}

#AG_Unit_el_filter_bar_r,
#AG_Unit_el_filter_bar_l {
  z-index: 3;
  position: absolute;
  left: 3px;
  top: 10px;
  width: 42px;
  height: 81px;
}

#AG_Unit_el_filter_press_r, 
#AG_Unit_el_filter_press_l {
  white-space: nowrap;
  text-align: right;
  position: absolute;
  left: 4px;
  top: 114px;
}

.sar_theme #AG_Unit_el_filter_press_r, 
.sar_theme #AG_Unit_el_filter_press_l {
  text-align: center;
  left: 6px;
  top: 4px;
  z-index: 5;
}


.AG_Unit_box.HRU_rotary #AG_Unit_el_filter_press_l {
  top: 113px;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_filter_press_l {
  top: 4px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_filter_press_l {
  top: 131px;
}
.AG_Unit_box.AHAHl_unit #AG_Unit_el_filter_press_r {
  top: 128px;
}

#AG_Unit_el_filter_perct_r,
#AG_Unit_el_filter_perct_l {
  white-space: nowrap;
  text-align: right;
  position: absolute;
  left: 0px;
  top: 96px;
  font-weight: 700;
  width: 50px;
}

.sar_theme #AG_Unit_el_filter_perct_r,
.sar_theme #AG_Unit_el_filter_perct_l {
  text-align: center;
  left: 0px;
  top: 75px;
  font-weight: 700;
  width: 50px;
  z-index: 5;
}

.AG_Unit_box.HRU_rotary #AG_Unit_el_filter_perct_l {
  top: -18px;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_filter_perct_l {
   top: 75px;
}

/* unit modification ------------ */
.AG_Unit_box.AC_Unit #AG_Unit_el_filter_r {
  left: 390px;
  top: 109px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_filter_r {
  left: 766px;
  top: 266px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_filter_l {
  left: 301px;
  top: 63px;
}

.AG_Unit_box.HRU_rotary #AG_Unit_el_filter_l {
  left: 295px;
  top: 271px;
}

.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_filter_l {
  left: calc(295px + 15px);
}

/* preheater------------ */

.AG_center_text{
  text-align: center !important; 
  display :block !important; 
}

/* preheater------------ */
#AG_Unit_el_preheater_c {
  z-index: 1;
  position: absolute;
  left: 362px;
  top: 69px;
  width: 44px;
  height: 151px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_c {
  left: 364px;
  top: 276px;
}

.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_c {
  left: calc(364px + 15px);
}

#AG_Unit_el_preheater_c_2 {
  z-index: 1;
  position: absolute;
  left: 233px;
  top: 69px;
  width: 44px;
  height: 151px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_c_2 {
  left: 233px;
  top: 276px;
}

.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_c_2 {
  left: calc(233px + 0px);
}

#AG_Unit_el_preheater_Img,#AG_Unit_el_preheater_Img_2 {
  z-index: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 23px;
  height: 87px;
}
#AG_Unit_el_preheater_bar,#AG_Unit_el_preheater_bar_2 {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 15px;
  height: 63px;
 /* background-color: #888;*/
}


#AG_Unit_el_preheater_perc,#AG_Unit_el_preheater_perc_2 {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  left:-8px;
  top: 89px;
  font-weight: 700;
  width: 40px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_perc {
  top: -23px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_preheater_perc_2{
  top: -23px;
}

/* postheater------------ */
#AG_Unit_el_postheater_c {
  z-index: 1;
  position: absolute;
  left: 594px;
  top: 244px;
  width: 112px;
  height: 231px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_postheater_c {
  left: 583px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_postheater_c {
  left: 412px;
  top: 48px;
}


#AG_Unit_el_postheater_c_2 {
  z-index: 1;
  position: absolute;
  left: 790px;
  top: 244px;
  width: 112px;
  height: 231px;
}
#AG_Unit_el_postheater_c_2.doubleposheater {
  left: 845px;
}
.AG_Unit_box.AC_Unit #AG_Unit_el_postheater_c_2 {
  left: 365px;
  top: 83px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_postheater_c_2 {
  left: 790px;
  top: 48px;
}

#AG_Unit_el_postheater_Img,#AG_Unit_el_postheater_Img_2 {
  z-index: 2;
  position: absolute;
  right: 0px;
  top: 30px;
  width: 23px;
  height: 91px;
}
#AG_Unit_el_postheater_Img.long{
  width: 25px;
  height: 142px;
}
#AG_Unit_el_postheater_Img_2.long{
  width: 25px;
  height: 142px;
}

#AG_Unit_el_postheater_power,#AG_Unit_el_postheater_power_2 {
  position: absolute;
  white-space: nowrap;
  left: 80px;
  top: 8px;
  font-weight: 700;
  width: 40px;
}


#AG_Unit_el_postheater_W_in,#AG_Unit_el_postheater_W_in_2 {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  right: 23px;
  top: 162px;
  font-weight: 700;
}
#AG_Unit_el_postheater_W_out,#AG_Unit_el_postheater_W_out_2 {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  right: 30px;
  top: 140px;
  font-weight: 700;
}
#AG_Unit_el_postheater_Bar,#AG_Unit_el_postheater_Bar_2 {
  z-index: 3;
  position: absolute;
  right: 4px;
  top: 34px;
  width: 16px;
  height: 65px;
  /*background-color: #888;*/
}

.doubleposheater #AG_Unit_el_postheater_Bar_2 {
  right: 4px;
}

/* jen pokud je sar_theme → rozdělení na 4 segmenty */
.sar_theme #AG_Unit_el_preheater_bar,
.sar_theme #AG_Unit_el_preheater_bar_2, 
.sar_theme #AG_Unit_el_postheater_Bar,
.sar_theme #AG_Unit_el_postheater_Bar_2 {
  display: flex;
  flex-direction: column-reverse;
  justify-content: stretch;
  gap: 3px;
  padding: 2px 0;
  background: transparent;
}

/* jeden blok (kostička) */
.sar_theme .postheater-seg {
  flex: 1;
  position: relative;
  border-radius: 3px;
  background-color: #e5e5e5; /* vypnutý blok */
  overflow: hidden;
}

/* výplň kostičky – barvu bereme z .bargraph_blue/.bargraph_red */
.sar_theme .postheater-seg-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  transition: height 0.2s linear;
}
/* end postheater------------ */

.icon_outside {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 60px;
}

.AC_slave_visible .icon_outside {
  left: 106px;
  top: 10px;
}


.icon_outside_bms {
  position: absolute;
  left: 29px;
  top: 73px;
  z-index: 1;
  font-weight: 700;
  color: var(--primary-color);
  background-color: rgb(206, 204, 204);
  width: 40px;
  height: 20px;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}

.AC_slave_visible .icon_outside_bms {
  left: 115px;
  top: 72px;
}

.icon_inside {
  position: absolute;
  left: 840px;
  top: 12px;
  width: 60px;
}

.AC_slave_visible .icon_inside {
  left: 389px;
  top: 425px;
}

.icon_inside_bms{
  position: absolute;
  z-index: 1;
  font-weight: 700;
  color: var(--primary-color);
  background-color: rgb(206, 204, 204);
  width: 40px;
  height: 20px;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}
.icon_inside_bms.HRU_bms{
  left: 1042px;
  top: 164px;
}
.icon_inside_bms.AC_bms{
  left: 850px;
  top: 73px;
}
.icon_inside_bms.AHAL_bms{
  left: 1025px;
  top: 48px;
}

.AC_slave_visible .icon_inside_bms.AC_bms{
  left: 399px;
  top: 488px;
}

.icon_outside_ahal {
  position: absolute;
  left: 130px;
  top: 10px;
  width: 60px;
}

.icon_inside_ahal {
  position: absolute;
  left: 936px;
  top: 12px;
  width: 60px;
}

.icon_inside_bms.AC_bms{
  left: 850px;
  top: 73px;
}

.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_room,
.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_room_bms {
  left: 910px;
  top: 26px;
  right: initial;
}

.myunit.AG_Unit_box.AC_Unit.AC_slave_visible #AG_Unit_el_room,
.myunit.AG_Unit_box.AC_Unit.AC_slave_visible #AG_Unit_el_room_bms {
  left: 466px;
  top: 449px;
  right: initial;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_room,
.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_room_bms {
  left: 1024px;
  top: 9px;
  right: initial;
}

.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_ext1,
.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_ext1_bms {
  left: 76px;
  top: 26px;
  right: initial;
}

.myunit.AG_Unit_box.AC_Unit.AC_slave_visible #AG_Unit_el_ext1,
.myunit.AG_Unit_box.AC_Unit.AC_slave_visible #AG_Unit_el_ext1_bms {
  left: 166px;
  top: 26px;
  right: initial;
}




#AG_Unit_el_Img_Rotary_symbol {
  width: 60px;
  height: 60px;
  z-index: 1;
  position: absolute;
  left: 496px;
  top: 191px;
}
.sar_theme #AG_Unit_el_Img_Rotary_symbol {
  left: 503px;
}

#AG_Unit_el_ext1_bms {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  right: 1017px;
  top: 91px;
  font-weight: 900;
}

#AG_Unit_el_Recirculation {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  left: 176px;
  top: 193px;
  font-weight: 900;
  width: 100px;
  transform: rotate(270deg);
}

#AG_Unit_el_Recirculation_img {
  position: absolute;
  left: 200px;
  top: 121px;
  width: 100px;
  height: 187px;
}
.myunit.AG_Unit_box.HRU_rotary #AG_Unit_el_Recirculation_img{
  transform: rotate(180deg);
}


#AG_Unit_el_ext1 {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  right: 1017px;
  top: 91px;
  font-weight: 900;
}
.myunit.AG_Unit_box.HRU_rotary #AG_Unit_el_ext1{
  top: 302px;
}

#AG_Unit_el_int2 {
  position: absolute;
  white-space: nowrap;
  text-align: right;
  right: 1017px;
  top: 302px;
  font-weight: 900;
}
.myunit.AG_Unit_box.HRU_rotary #AG_Unit_el_int2{
  top: 91px;
}
#AG_Unit_el_int1 {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 1030px;
  top: 91px;
  font-weight: 900;
}
.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_int1 {
  text-align: right;
  left:initial;
  right: 927px;
  top: 139px;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_int1 {
  text-align: right;
  left: 1030px;
  top: 292px;
}


#AG_Unit_el_ext3 {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 1030px;
  top: 302px;
  font-weight: 900;
}
.myunit.AG_Unit_box.AC_Unit #AG_Unit_el_ext3 {
  left: 785px;
  top: 403px;
}
.myunit.AG_Unit_box.AC_Unit.AC_slave_visible #AG_Unit_el_ext3 {
  left: 679px;
  top: 458px;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_ext3 {
  left: 1030px;
  top: 91px;
}

#AG_Unit_el_ext4 {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 863px;
  top: 285px;
  font-weight: 700;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_ext4 {
  left: 716px;
  top: 130px;
}

#AG_Unit_el_room {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 1030px;
  top: 190px;
  font-weight: 900;
}

#AG_Unit_el_room_bms {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 1030px;
  top: 190px;
  font-weight: 900;
}


#AG_Unit_el_ext2 {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 612px;
  top: 324px;
  font-weight: 700;
}

.sar_theme #AG_Unit_el_ext2 {
  left: 620px;
  top: 328px;
}

.AG_Unit_box.HRU_rotary #AG_Unit_el_ext2 {
  top: 284px;
  left: 590px;
}

.AG_Unit_box.AHAHl_unit #AG_Unit_el_ext2 {
  top: 129px;
  left: 393px;
}

#AG_Unit_el_Img_bypass{
  position: absolute;
  left: 398px;
  top: 116px;
  width: 244px;
  height: 209px;
}

.sar_theme #AG_Unit_el_Img_bypass {
    left: 407px;
    top: 116px;
    width: 250px;
    height: 212px;
}


#AG_Unit_el_bypass {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 491px;
  top: 319px;
  font-weight: 900;
}
.sar_theme #AG_Unit_el_bypass {
  left: 505px;
  top: 328px;
}
.AG_Unit_box.HRU_rotary #AG_Unit_el_bypass {
  left: 490px;
  top: 138px;
  font-weight: 700;
  font-size: 1.5rem;
}
.sar_theme .AG_Unit_box.HRU_rotary #AG_Unit_el_bypass {
    left: 484px;
    top: 260px;
    font-weight: 700;
    font-size: 1.5rem;
}

#AG_Unit_el_press_ext {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 1032px;
  top: 354px;
  font-weight: 700;
}

.myunit.AG_Unit_box.AHAHl_unit #AG_Unit_el_press_ext {
  left: 1032px;
  top: 134px;
}

#AG_Unit_slave_number {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  left: 770px;
  top: 30px;
  font-weight: 900;
  font-size: 25px;
  color: var(--primary-color);
}


#AG_Unit_Button_1 {
  position: absolute;
  right: 60px;
  bottom: 12px;
}

#AG_Unit_el_info_lb {
  position: absolute;
  left: 10px;
  top: 10px;
}

.AG_Unit_box.AC_Unit .nvsbl {
  display: none !important;
}

.AG_Unit_box.off_state .offhide {
  display: none !important;
}

#AG_Unit_status.off_state.offgray {
  filter: grayscale(100%) !important;
  opacity: 0.8 !important;
}

.AG_Unit_box.off_state .offgray {
  filter: grayscale(100%) !important;
  opacity: 0.8 !important;
}

#AG_Unit_control.off_state .offgray {
  filter: grayscale(100%) !important;
  opacity: 0.8 !important;
}

#AG_Unit_control_prime.off_state .offgray {
  filter: grayscale(100%) !important;
  opacity: 0.8 !important;
}


/*------------------------------------------------------------ */
.mapslist {
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(255,255,255,0.5);
}
.myboxes {
  margin-top: 160px;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
@media screen and (min-width: 991px) {
  .myboxes {
      margin-top: 210px;
 }
}
.mymytestimage {
  position: absolute;
  top: 60px ;
  left: 50px;
}
.cards-list {
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.mycard2 {
  position: relative;
  width: 300px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(184, 190, 186);
}
/* slave units ----------------------------------------------------------------  */
#div_unit_container{
transition: transform 0.5s ease-out;
}

#AG_Unit_AC_slave_container_outbox{
  position: absolute;
  transition: transform 0.5s ease-out;
  display: flex;
  height: 100%;
  align-items: center;
  top: 0px;
  }

.AC_slave_visible #div_unit_container{
  position: relative;
  top: 54px;
  left: -183px;
  transform: scale(0.7, 0.7);
}

#AG_Unit_AC_slave_container {
  position: absolute;
  width: 529px;
  /*height: 436px;*/
  left: 569px;
  /* top: 12px;*/ 
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
}

.mycard_ac_slave {
  position: relative;
  margin: 5px;
  width: 154px;
  height: 95px;
  transition: 0.4s;
  border-style: dotted;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgb(184, 190, 186);
  overflow: hidden;
}

.mycard_ac_slave .mycard-name {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  top: -1px;
  left: 4px;
  font-weight: 700;
  color: var(--primary-color);
}

.mycard_ac_slave .mycard-unit_img {
  position: absolute;
  width: 93px;
  height: 90px;
  top: 11px;
  left: 52px;
}

.mycard_ac_slave .mycard-btoff {
  position: absolute;
  cursor: pointer;
  top: 62px;
  left: -2px;
  transform: scale(0.6, 0.6);
}

.mycard_ac_slave.btn_nvsbl .mycard-btoff {
  display:none;
}

.mycard_ac_slave .mycard-rotate_fan {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 108px;
  top: 20px;
  /*transform: scale(0.6, 0.6);*/
}



.mycard_ac_slave .mycard-loader {
  position: absolute;
  top: 28px;
  left: 2px;
  transform: scale(0.6, 0.6);
}

.mycard_ac_slave .mycard-ext3 {
  position: absolute;
  text-align: right;
  top: 73px;
  right: 6px;
  font-weight: 500;
}
.mycard_ac_slave.prime_slave .mycard-ext3 {
  top: auto;
  right: auto;
  left: 6px;
  text-align: left;
  font-size: 15px;
  bottom: -5px;
}

.mycard_ac_slave .mycard-int1 {
  position: absolute;
  text-align: right;
  top: 29px;
  left: 3px;
  font-weight: 500;
}

.mycard_ac_slave .mycard-SetPoint_F {
  position: absolute;
  text-align: left;
  top: 68px;
  left: 58px;
  font-weight: 500;
}

.mycard_ac_slave.prime_slave .mycard-SetPoint_F {
  top: auto;
  left: auto;
  right: 5px;
  font-size: 15px;
  bottom: -5px;
}

.mycard_ac_slave .mycard-wout {
  position: absolute;
  text-align: right;
  top: 43px;
  left: 67px;
  font-weight: 400;
  transform: scale(0.7, 0.7);
}

.mycard_ac_slave.prime_slave .mycard-wout {
  top: 42px;
  left: 62px;
}

.mycard_ac_slave .mycard-status {
  position: absolute;
  top: 4px;
  left: 18px;
}

.mycard_ac_slave .mycard-status i{
  color: var(--primary-color);
  font-weight: 700;
  /*margin-right: -2px;*/
}


.mycard_ac_slave.card_offline .nvsbl_sl {
  display: none;
}
.mycard_ac_slave.card_offline .nvsbl_sl1 {
  display: none;
}
.mycard_ac_slave.card_offline .nvsbl_sl2 {
  display: none;
}

.mycard_ac_slave.card_off .nvsbl_sl {
  display: none;
}
.mycard_ac_slave.card_off .nvsbl_sl1 {
  opacity: 0.7;
  filter: grayscale(90%);
}

.mycard_ac_slave .mycard-info {
  position: absolute;
  top: 70px;
  width: 100%;
  text-align: center;
}

.mycard_ac_slave.card_offline {
  opacity: 0.6;
  background: var(--units-bg_units_offline);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 33%;
  background-color: rgb(255, 255, 255);
}





/* slave units end  ----------------------------------------------------------------  */

.backAnimate {
  background-color: var(--primary-color);
  border-radius: 4px;
  position: absolute;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

.mycard {
  position: relative;
  border-radius: 1px;
  margin: 10px ;
  width: 300px;
  height: 200px;
  transition: 0.4s;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(184, 190, 186);
  overflow: hidden;
  cursor: url("../images/2VV/icon/cursor_control.svg") 16 16, auto;
}

.mycard.card_offline {
  cursor: default;
  background-color: #f7f7f7;
}

.sar_theme .mycard {
    border-radius: 5px;
    border-color: var(--primary-color_light);
    border-width: 4px;
    cursor: pointer;
    /*font-family: "Daxline Offc Pro";*/
}



.cards-list .mycard:hover:not(.card_offline) {
  transform: scale(0.98, 0.98);
  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 25%), 1px 0px 6px 0px rgb(0 0 0 / 22%);
}



.title-white {
  color: white;
}
.title-black {
  color: black;
}
@media all and (max-width: 500px) {
  .mycard-list {
     /* On small screens, we are no longer using row direction but column */
      flex-direction: column;
 }
}
.mycard .mycard-name {
  position: absolute;
  white-space: nowrap;
  text-align: left;
  top: 5px ;
  left: 10px;
 font-weight: 700;
}


.sar_theme .mycard-name{
  font-family: 'Inter', system-ui, sans-serif;
}

.genio_theme .mycard .mycard-preheater {
  position: absolute;
  width: 8px;
  height: 8px;
  overflow: hidden;
  background-color: rgba(255, 0, 0, 1);
  border-radius: 4px 4px 4px 4px;
  opacity:0;
  filter: blur(2px);
  top: 64px ;
  left: 99px;
}

.sar_theme .mycard .mycard-preheater {
  position: absolute;
  width: 17px;
  height: 17px;
  overflow: hidden;
  opacity:0;
  top: 53px ;
  left: 90px;
}

.genio_theme .mycard .mycard-postheater {
    position: absolute;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: rgba(255, 0, 0, 1);
    border-radius: 4px 4px 4px 4px;
    opacity: 0;
    filter: blur(2px);
    top: 105px;
    left: 187px;
}

.sar_theme .mycard .mycard-postheater {
  position: absolute;
  width: 17px;
  height: 17px;
  overflow: hidden;
  opacity:0;
  top: 99px ;
  right: 90px;
}

.sar_theme .mycard .mycard-bypass {
    position: absolute;
    width: 12px;
    height: 12px;
    overflow: hidden;
    background-color: rgba(0, 73, 113, 1);
    border-radius: 5rem 5rem 5rem 5rem;
    opacity: 0;
    filter: blur(3.5px);
    top: 80px;
    right: 141px;
}

.genio_theme .mycard .mycard-bypass {
    position: absolute;
    width: 12px;
    height: 12px;
    overflow: hidden;
    background-color: rgba(0, 156, 221, 1);
    border-radius: 6px 6px 6px 6px;
    opacity: 0;
    filter: blur(3px);
    top: 83px;
    left: 141px;
}

.genio_theme .mycard.card_on.rotary .mycard-preheater { 
  top: 105px ;
  }

.sar_theme .mycard.card_on.rotary .mycard-preheater { 
  top: 99px ;
  }

.mycard.clona_card_on .mycard-preheater {
  visibility: hidden;
}
.mycard.clona_card_on .mycard-postheater {
  top: 83px ;
  left: 175px;
}
.mycard.alfa_card_on .mycard-postheater {
  top: 105px ;
  left: auto;
  right: 98px;
}


.mycard .mycard-int2 {
  position: absolute;
  text-align: right;
  top: 100px ;
  right: 235px;
  font-weight: var(--primary-font-weight_dashboard_unit_elements);
}

.sar_theme .mycard.card_on.rotary .mycard-int2 {
  top: 54px ;
}


.mycard .mycard-int1 {
  position: absolute;
  text-align: left;
  top: 54px ;
  left: 238px;
  font-weight: var(--primary-font-weight_dashboard_unit_elements);
}

.mycard .mycard-ext3 {
  position: absolute;
  text-align: left;
  top: 100px ;
  left: 238px;
  font-weight: var(--primary-font-weight_dashboard_unit_elements);
}

.mycard .mycard-ext1 {
  position: absolute;
  text-align: right;
  top: 54px ;
  right: 235px;
  font-weight: var(--primary-font-weight_dashboard_unit_elements);
}

.sar_theme .mycard.card_on.rotary .mycard-ext1 {
  top: 100px ;
}


.mycard .mycard-status {
  position: absolute;
  top: 28px ;
  left: 10px;
  font-size: 24px;
}

.mycard .mycard-status i{
  color: var(--primary-color);
  font-weight: 700;
  margin-right: 0px;
}

.mycard .mycard-status .fire{
  color: #ff0000;
}

.mycard .mycard-bage {
  position: absolute;
  cursor:pointer;
  bottom: 12px;
  Right: 15px;
}


 .small1 {
  position: absolute;
  top: 28px;
  left: 0px;
  font-size: 15px;
}

 .small2 {
  position: absolute;
  top: 31px;
  left: 19px;
  font-size: 11px;
}

.small3 {
  position: absolute;
  top: 0px;
  left: 19px;
  font-size: 15px;
}

.padleftfive {
  padding-left: 5px;
}

.padicon {
  padding-left: 5px;
  padding-right: 5px;
}

.my_info_blue {
  color: var(--primary-color_light);
  font-size: 130%;
}
.my_info_blue2 {
  color: var(--primary-color_light);
  font-size: 37px;
}

.mycard .Card_AQS {
  display: none;
  position: absolute;
  top: 27px ;
  left: 108px;
  width: 80px;
}
.mycard.aqs .Card_AQS {
  display: inherit;
}

    .mycard .Card_AQS .bar_AQS {
      position: absolute;
      top: 20px ;
      left: 0px;
      width: inherit;
      height: 2px;
      background-color: #e7e5e5;
      border-radius: 2px;
      overflow: hidden;
    }

    .mycard .Card_AQS .barIn_AQS {
      position: absolute;
      top: 0px ;
      left: 1px;
      /*width: 60px;*/
      height: 2px;
      background-color: var(--primary-color);
      border-radius: 1px;
    }
    .mycard .Card_AQS .mycard-AQS {
      position: absolute;
      white-space: nowrap;
      text-align: center;
      width: inherit;
      top: 2px ;
      left: 0px;
      font-size: 14px;
      font-weight: 500;
    }

.mycard .Card_SetPoints {
  position: absolute;
  top: 125px ;
  left: 80px;
}

.sar_theme .mycard .Card_SetPoints {
  top: 120px ;
}

.mycard .Card_SetPoints .firstNonVis{
  display: none;
}

      .mycard .Card_SetPoints .Icon_SetPoint_F {
        position: absolute;
        top: 35px ;
        left: 0px;
        width: 32px;
        font-size: 22px;
      }
      .sar_theme .mycard .Card_SetPoints .Icon_SetPoint_F {
        color: var(--primary-color);
      }

      .mycard .Card_SetPoints .Icon_SetPoint_T {
        position: absolute;
        top: 2px ;
        left: 0px;
        width: 32px;
        font-size: 22px;
      }

      .sar_theme .mycard .Card_SetPoints .Icon_SetPoint_T {
        color: var(--primary-color);
      }

      .mycard .Card_SetPoints .bar_SetPoint_F {
        position: absolute;
        top: 62px ;
        left: 30px;
        width: 100px;
        height: var(--primary-dashboard_bar_height);
        background-color: #e7e5e5;
        border-radius: 2px;
        overflow: hidden;
      }
      .mycard .Card_SetPoints .bar_SetPoint_T {
        position: absolute;
        top: 27px ;
        left: 30px;
        width: 100px;
        height: var(--primary-dashboard_bar_height);
        background-color: #e7e5e5;
        border-radius: 2px;
        overflow: hidden;
      }

      .mycard .Card_SetPoints .barIn_SetPoint {
        position: absolute;
        top: 0px ;
        left: 1px;
        /*width: 60px;*/
        height: var(--primary-dashboard_bar_height);
        background-color: var(--primary-color);
        border-radius: 1px;
      }

    .mycard .Card_SetPoints .mycard-SetPoint_F {
      position: absolute;
      white-space: nowrap;
      top: 38px ;
      left: 30px;
      font-weight: var(--primary-font-weight_dashboard_unit_elements);
    }

    .mycard .Card_SetPoints .mycard-SetPoint_T {
      position: absolute;
      white-space: nowrap;
      top: 2px ;
      left: 30px;
      font-weight: var(--primary-font-weight_dashboard_unit_elements);
    }


.mycard .mycard-btoff {
  position: absolute;
  cursor: pointer;
  top: 165px ;
  left: 12px;  
  transform: scale(0.6, 0.6);
}

.sar_theme .mycard .mycard-btoff {
  top: 160px ;
  left: 10px;  
  transform: scale(0.65, 0.65);
}

.mycard .mycard-loader {
  position: absolute;
  top: 126px ;
  left: 21px;  
  /*transform: scale(0.6, 0.6);*/
}

.sar_theme .mycard .mycard-loader {
  top: 120px ;
  left: 19px;  
}

.mycard .mycard-info {
  position: absolute;
  top: 110px;
  left: 0px; 
  width: 100%;
  text-align: center;
}
.mycard .mycard-info span {
  font-size: 13px;
  font-weight: bold;
  color: var(--primary-color_light);
}

/*
.mycard-btoff:hover {
  border-radius: 4px 4px 4px 4px;
  transform: scale(1.2, 1.2);
  cursor: pointer;
}
*/

.mycard .card_title {
  text-align: center;
  border-radius: 0px 0px 15px 15px;
  /*font-family: sans-serif;*/
  font-weight: bold;
  font-size: 30px;
  margin-top: -80px;
  height: 40px;
}
.mycard.card_on {
  background: var(--units-bg_units_on);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
}
.mycard.card_on.rotary {
   background: var(--units-bg_units_r_on);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
 }

.sar_theme .mycard.card_on {
    background-position: 50% 41%;
}
.mycard.card_off {
  background: var(--units-bg_units_off);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
}
 .mycard.card_off.rotary {
   background: var(--units-bg_units_r_off);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
 }

.sar_theme .mycard.card_off {
    background-position: 50% 41%;
}

.mycard.card_update_fw {
  opacity: 0.6;
  background: var(--units-bg_units_update);
  background-repeat: no-repeat;
  background-size: 190px 62px;
  background-position: 50% 33%;
  background-color: rgb(255, 255, 255);
}

.mycard.clona_card_on {
  background: var(--units-bg_ac_on);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
}
.mycard.clona_card_off {
  background: var(--units-bg_ac_off);
  background-repeat: no-repeat;
  background-size: 190px 72px;
  background-position: 50% 43%;
  background-color: rgb(255, 255, 255);
}


.mycard.alfa_card_on {
   background: var(--units-bg_au_on);
   background-repeat: no-repeat;
   background-size: 190px 72px;
   background-position: 50% 43%;
   background-color: rgb(255, 255, 255);
 }
 .mycard.alfa_card_off {
   background: var(--units-bg_au_off);
   background-repeat: no-repeat;
   background-size: 190px 72px;
   background-position: 50% 43%;
   background-color: rgb(255, 255, 255);
 }

 .mycard.alfa_card_on .mycard-ext1 {
  text-align: right;
  top: 77px ;
  right: 239px;
}
.mycard.alfa_card_on .mycard-ext3 {
  text-align: left;
  top: 77px ;
  left: 233px;
}

.mycard.clona_card_on .mycard-int2 {
  text-align: right;
  top: 74px ;
  right: 214px;
}
.mycard.clona_card_on .mycard-ext3 {
  text-align: left;
  top: 100px ;
  left: 210px;
}

#AG_Unit_container_ID.cold .cold_nvsbl {
  display: none;
}

.mycard.cold .cold_nvsbl {
  display: none;
}
.mycard.cold .Card_SetPoints {
  top: 95px;
}

.mycard.card_off .nvsbl {
  display: none;
}
.mycard.card_off .nvsbl1 {
  opacity: 1;
}
.mycard.card_offline .nvsbl1 {
  display: none;
}
.mycard.card_offline .nvsbl {
  display: none;
}

.mycard.card_update_fw .nvsbl1 {
  display: none;
}
.mycard.card_update_fw .nvsbl {
  display: none;
}

.mycard.clona_card_off .nvsbl {
  display: none;
}
.mycard.clona_card_off .nvsbl1 {
  opacity: 1;
}

.mycard.alfa_card_off .nvsbl {
  display: none;
}
.mycard.alfa_card_off .nvsbl1 {
  opacity: 1;
}

.center_loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }

.Smart_point_center_loader_top {
    position: relative;
    height: 350px;
    }
.Smart_point_center_loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }

  /* pin---------------------*/

  .modal-content-pin {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    /* background-color: #fff; */
    background-clip: padding-box;
    outline: 0;
  }

  #pin {
    /*background: #212121;*/
    background: #fff;
    width: 22em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 1em;
    border-radius: 0.3em;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    margin: auto;
    color: #666;
  }
  
  .dots {
    width: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 1em;
    padding-top: 3em;
  }
  
  .dot {
    position: relative;
    background: rgba(56, 56, 56, 0.2);
    border-radius: 0.8em;
    width: 0.8em;
    height: 0.8em;
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
    transform: scale3d(0.7, 0.7, 0.7);
  }
  
  .dot.active {
    background: var(--primary-color);
    -webkit-animation: growDot 0.5s ease;
    animation: growDot 0.5s ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  
  .dot.wrong {
    -webkit-animation: wrong 0.9s ease;
    animation: wrong 0.9s ease;
  }
  
  .dot.correct {
    -webkit-animation: correct 0.9s ease;
    animation: correct 0.9s ease;
  }
  
  #pin p {
    font-size: 1em;
  }
  
  .numbers {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    margin: 2em 0;
  }
  
  .number {
    position: relative;
    width: 2.5em;
    height: 2.5em;
    margin: 0.5em;
    border-radius: 2.5em;
    border: 2.5px solid rgba(34, 34, 34, 0.5);
    text-align: center;
    line-height: 2.5em;
    font-weight: 400;
    font-size: 1.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  .number:hover {
    color: var(--primary-color);
    border: 2.5px solid var(--primary-color);
  }
  
  /*
  .number:hover:before {
    border: 2.5px solid var(--primary-color);
  }
  
  .number:before {
    content: "";
    position: absolute;
    left: -2px;
    width: 2.5em;
    height: 2.5em;
    border: 2.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 2.5em;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
      .number.grow:before  {
    -webkit-animation: grow 0.6s ease;
    animation: grow 0.6s ease;
  }
  */
  .number.grow {
    -webkit-animation: grow 0.6s ease;
    animation: grow 0.6s ease;
  }
  
  /* Animations */
  @-webkit-keyframes growDot {
    100% {
      background: var(--primary-color);
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  }
  
  @keyframes growDot {
    100% {
      background: var(--primary-color);
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  }
  
  @-webkit-keyframes grow {
    50% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
      transform: scale3d(1.2, 1.2, 1.2);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes grow {
    50% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
      transform: scale3d(1.2, 1.2, 1.2);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @-webkit-keyframes wrong {
    20% {
      background: crimson;
    }
    40% {
      -webkit-transform: translate(-15px, 0);
      transform: translate(-15px, 0);
    }
    60% {
      -webkit-transform: translate(10px, 0);
      transform: translate(10px, 0);
    }
    80% {
      -webkit-transform: translate(-5px, 0);
      transform: translate(-5px, 0);
    }
  }
  
  @keyframes wrong {
    20% {
      background: crimson;
    }
    40% {
      -webkit-transform: translate(-15px, 0);
      transform: translate(-15px, 0);
    }
    60% {
      -webkit-transform: translate(10px, 0);
      transform: translate(10px, 0);
    }
    80% {
      -webkit-transform: translate(-5px, 0);
      transform: translate(-5px, 0);
    }
  }
  
  @-webkit-keyframes correct {
    20% {
      background: limegreen;
    }
    40% {
      -webkit-transform: translate(0, -15px);
      transform: translate(0, -15px);
    }
    60% {
      -webkit-transform: translate(0, 10px);
      transform: translate(0, 10px);
    }
    80% {
      -webkit-transform: translate(0, -5px);
      transform: translate(0, -5px);
    }
  }
  
  @keyframes correct {
    20% {
      background: limegreen;
    }
    40% {
      -webkit-transform: translate(0, -15px);
      transform: translate(0, -15px);
    }
    60% {
      -webkit-transform: translate(0, 10px);
      transform: translate(0, 10px);
    }
    80% {
      -webkit-transform: translate(0, -5px);
      transform: translate(0, -5px);
    }
  }




  .zoom_anim {
    animation: zoom-in-zoom-out 2s ease infinite;
  }
  
  @keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.15, 1.15);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  .breadcrumb_item {
    color: #808080;
    display: inline-block;
  }


  .breadcrumb_item.item_space>i {
    margin-right: 5px;
  }

  .breadcrumb_item.item_space:not(:last-child) {
    margin-right: 12px;
  }

  .breadcrumb_item.active {
    color: var(--primary-color);
    transform: scale(1.15, 1.15);
    font-weight: 700;
  }

  .breadcrumb_item:hover {
    color: var(--primary-color);
    transform: scale(1.2, 1.2);
    cursor: pointer;
  }

  .badge-success_my {
    color: #fff;
    background-color: var(--primary-bage_online);
  }
  .badge-dark_my {
    color: #fff;
    background-color: var(--primary-bage_offline);
  }
    .badge-secondary_my {
    color: #fff;
    background-color: var(--primary-bage_off);
  }
    .badge-danger_my {
    color: #fff;
    background-color: var(--primary-bage_error);
  }
    .badge-warning_my {
    color: var(--primary-breadcrumb_list);
    background-color: var(--primary-bage_warning);
  }
    .badge-info_my {
    color: #fff;
    background-color: var(--primary-bage_info);
  }

  .subbread_disable {
    position: relative;
    width: 119px;
    padding-left: 15px;
    margin-top: 6px;
    border: 1.5px solid rgba(105, 18, 18, 0.63);
    border-radius: 3px;
    color: rgba(105, 18, 18, 0.699) !important;
    font-size: 12px !important;;
  }
  .subbread_disable:hover {
    border: 1.5px solid rgba(105, 18, 18, 1);
    cursor: pointer;
    color: rgba(105, 18, 18, 1);
  }
  
  .subbread_disable .close-btn {
    position: absolute;
    top: -2px;
    right: 4px;
    font-size: 15px;
    font-weight: bold;
    color:  rgba(105, 18, 18, 0.63);
}


  .my_bage{
  background: var(--icons-basic-gunsight);
  background-repeat: no-repeat;
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}


.my_invalid {
  border-color: #dc3545;
}

.my_valid  {
  border-color: #28a745;
}

.field-icon {
  float: right;
  margin-right: 17px;
  margin-top: 5px;
  position: relative;
  font-size: 22px;
  z-index: 2;
  color: #666;
  cursor: pointer;
  opacity: 0.8;
}
.field-icon:hover {
  opacity: 1;
  color: var(--primary-color);
}

.qr-icon_start {
  color: #666;
  cursor: pointer;
  opacity: 0.8;
}
.qr-icon_start:hover {
  opacity: 1;
  color: var(--primary-color);
}

/*
#Modal_Add_unit_content{
width: 300px !important;
height: 200px !important;
position: relative; 
}
*/
.form_label_style{
  font-weight: 700;
}


#camera_stop_bt{
  margin-top: 10px;
}

#div_camera {
  position: relative;
  height: 75vh;
}

#div_camera>span{
  z-index: 0;
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 75vh!important;
  position: absolute !important;
}

  #div_camera  .cut-border {
    position: absolute ;
    display: flex;
    justify-content: center;
    z-index: 1;
    width: 60%;
    height: 60%;
    left:20%;
    top:20%;
    --size: 42px;
    padding: 10px;
    background:
      linear-gradient(var(--primary-color) var(--size), transparent 0 calc(100% - var(--size)), var(--primary-color) 0) 0 0 / 4px 100%,
      linear-gradient(var(--primary-color) var(--size), transparent 0 calc(100% - var(--size)), var(--primary-color) 0) 100% 0 / 4px 100%,
      linear-gradient(to right, var(--primary-color) var(--size), transparent 0 calc(100% - var(--size)), var(--primary-color) 0) 0 0 / 100% 4px,
      linear-gradient(to right, var(--primary-color) var(--size), transparent 0 calc(100% - var(--size)), var(--primary-color) 0) 0 100% / 100% 4px
      ;
    background-repeat: no-repeat;
  }
/*
.full_height_page_section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.full_height_page_element {
  flex-grow: 1;
}
*/

#maps-div {
  width: 100%;
  height: 72.5vh;
}

@media (max-width: 991px) {
  #maps-div {
    height: 60vh;
  }
}


#maps-div>span{
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}



.mapstooltip{
  padding-left: 8px;
  padding-right: 8px;
  color: var(--primary-color);
  font-weight: 700;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.05rem;
}


#maps_add{
  /*padding: 20px;*/
  width: 100%;
  height: 400px;
  cursor: default;
}

#maps_add>span{
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* start cookies */
.cookieConsentContainer{
  z-index:999;
  width:350px;
  min-height:20px;box-sizing:border-box;
  padding:30px 30px 30px 30px;
  background:var(--primary-color);
  overflow:hidden;
  position:fixed;
  bottom:30px;
  left:30px; 
  display:none
  }
  .cookieConsentContainer .cookieTitle i{
  color:#fff;
  font-size:22px;
  line-height:20px;
  display:block
  }
  .cookieConsentContainer .cookieDesc p{
  margin:0;
  padding:0;
  color:#fff;
  font-size:13px;
  line-height:20px;
  display:block;
  margin-top:10px
  }
  .cookieConsentContainer .cookieDesc a{
  color:#fff;
  text-decoration:underline
  }
  .cookieConsentContainer .cookieButton i{
  display:inline-block;
  color:#666;;font-size:14px;
  font-weight:700;
  margin-top:14px;
  background:#f7f7f7;
  box-sizing:border-box;
  padding:7px 33px;
  text-align:center;
  transition:background .3s
  }
  .cookieConsentContainer .cookieButton>i:hover{
  cursor:pointer;
  background:#dfdede;
  }
  @media (max-width:980px){
  .cookieConsentContainer{
  bottom:0!important;
  left:0!important;
  width:100%!important
  }
  }
/* end cookies */

/* maintenance------------------------------------------------*/

.container_maintenance {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.6;
  position: relative;
  color: #616161 /*#757575*/;
  background-color: #eeeeee;
}

.container_maintenance .box {
  width: auto;
  height: 500px;
  background: #fff;
  /*
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;*/
  border-radius: 5px;
  box-shadow: 6px 18px 18px rgba(0, 0, 0, 0.08),
    -6px 18px 18px rgba(0, 0, 0, 0.08);
}

.container_maintenance .animation {
  margin-top: 30%;
  display: inline-block;
  margin-bottom: 5%;
}

.container_maintenance h1 {
  color: var(--primary-color);
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}
.container_maintenance p {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.container_maintenance a {
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: none;
  margin-left: 5px;
}

.container_maintenance .one,
.container_maintenance .two,
.container_maintenance .three {
  display: block;
  float: left;
}

.container_maintenance .one {
  background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2281px%22%20height%3D%2280.5px%22%20viewBox%3D%220%200%2081%2080.5%22%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%2081%2080.5%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23d6171b%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M30.3%2C68.2c1.2%2C0.2%2C2.3%2C0.9%2C3.8%2C1.2c1.6%2C0.3%2C2.7%2C0.6%2C4%2C0.4l4.9%2C9.6c0.6%2C0.9%2C1.4%2C1.1%2C2.3%2C0.9l15.3-4.9%0A%09c0.5-0.3%2C1-1%2C0.9-2.3l-1.8-10.6c2-1.6%2C3.6-3.7%2C5.3-5.8l10.5%2C0.6c1.1%2C0.6%2C2.1-0.4%2C2.3-1.1L81%2C40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8%0A%09c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1%2C0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5%2C0.3l-8%2C6.9c-1.2-0.2-2.3-0.9-3.8-1.2%0A%09c-1.6-0.3-2.7-0.6-4-0.4L37.7%2C1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1%2C5c-0.5%2C0.3-1%2C1-0.9%2C2.3l1.8%2C10.6c-2%2C1.6-3.6%2C3.7-5.3%2C5.8L5.3%2C23%0A%09c-0.8-0.2-1.7%2C0.4-2%2C1.6L0%2C40.2c-0.2%2C0.8%2C0.4%2C2.1%2C1.1%2C2.3l9.8%2C3.7c0.7%2C2.6%2C1.4%2C5.2%2C2.5%2C7.5l-6%2C8.9c-0.6%2C0.7-0.4%2C2%2C0.3%2C2.5l12%2C10.7%0A%09c0.7%2C0.5%2C1.9%2C0.8%2C2.4%2C0.1L30.3%2C68.2z%20M26.7%2C37.3c1.6-7.4%2C9.1-12.3%2C16.5-10.8S55.6%2C35.7%2C54%2C43.1c-1.6%2C7.4-9.1%2C12.3-16.5%2C10.7%0A%09C30.1%2C52.3%2C25.1%2C44.7%2C26.7%2C37.3L26.7%2C37.3z%22%2F%3E%0A%3C%2Fsvg%3E");
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 40px;
  margin-right: 8px;
}

.container_maintenance .two {
  background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22103px%22%20height%3D%22103.7px%22%20viewBox%3D%220%200%20103%20103.7%22%0A%09%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%20103%20103.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23009cdd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M87.3%2C64.8c0.3-1.5%2C1.1-2.9%2C1.6-4.9c0.4-2%2C0.7-3.5%2C0.5-5.1l12.3-6.3c1.2-0.8%2C1.4-1.8%2C1.1-2.9l-6.3-19.6%0A%09c-0.4-0.6-1.3-1.3-2.9-1.1l-13.5%2C2.3c-2.1-2.5-4.7-4.7-7.4-6.8l0.8-13.4C74.3%2C5.8%2C73%2C4.5%2C72%2C4.3L52.1%2C0c-1-0.2-2.7%2C0.5-2.9%2C1.5%0A%09l-4.8%2C13c-3.2%2C0.4-6.1%2C1.8-9.5%2C3.2l-10.9-7.5c-1.4-0.8-2.5-0.5-3.7%2C0.3L6.5%2C25.8c-0.6%2C0.4-0.4%2C2%2C0.4%2C3.2l8.8%2C10.2%0A%09c-0.3%2C1.5-1.1%2C2.9-1.5%2C4.9c-0.4%2C2-0.7%2C3.5-0.6%2C5.1L1.2%2C55.4c-1.2%2C0.8-1.4%2C1.8-1.1%2C2.9l6.3%2C19.6c0.4%2C0.6%2C1.3%2C1.3%2C2.9%2C1.1l13.5-2.3%0A%09c2.1%2C2.5%2C4.7%2C4.7%2C7.4%2C6.8l-0.8%2C13.4c-0.2%2C1%2C0.6%2C2.2%2C2.1%2C2.5l20%2C4.2c1%2C0.2%2C2.7-0.5%2C2.9-1.5l4.7-12.6c3.3-0.9%2C6.6-1.7%2C9.5-3.2L80.1%2C94%0A%09c0.9%2C0.7%2C2.5%2C0.5%2C3.2-0.4L97%2C78.3c0.7-0.9%2C1-2.4%2C0.1-3.1L87.3%2C64.8z%20M47.8%2C69.5C38.3%2C67.5%2C32%2C57.8%2C34%2C48.3%0A%09c2-9.5%2C11.7-15.8%2C21.2-13.8c9.5%2C2%2C15.7%2C11.7%2C13.7%2C21.2C66.9%2C65.2%2C57.3%2C71.5%2C47.8%2C69.5L47.8%2C69.5z%22%2F%3E%0A%3C%2Fsvg%3E");
  width: 100px;
  height: 100px;
  margin-top: 50px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.container_maintenance .three {
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='81px' height='80.5px' viewBox='0 0 81 80.5' style='overflow:scroll;enable-background:new 0 0 81 80.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23d6171b;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M30.3,68.2c1.2,0.2,2.3,0.9,3.8,1.2c1.6,0.3,2.7,0.6,4,0.4l4.9,9.6c0.6,0.9,1.4,1.1,2.3,0.9l15.3-4.9 c0.5-0.3,1-1,0.9-2.3l-1.8-10.6c2-1.6,3.6-3.7,5.3-5.8l10.5,0.6c1.1,0.6,2.1-0.4,2.3-1.1L81,40.7c0.2-0.8-0.4-2.1-1.1-2.3l-10.2-3.8 c-0.3-2.5-1.4-4.8-2.5-7.5l5.9-8.5c0.6-1.1,0.4-1.9-0.2-2.9l-12-10.7c-0.3-0.5-1.6-0.3-2.5,0.3l-8,6.9c-1.2-0.2-2.3-0.9-3.8-1.2 c-1.6-0.3-2.7-0.6-4-0.4L37.7,1c-0.6-0.9-1.4-1.1-2.3-0.9L20.1,5c-0.5,0.3-1,1-0.9,2.3l1.8,10.6c-2,1.6-3.6,3.7-5.3,5.8L5.3,23 c-0.8-0.2-1.7,0.4-2,1.6L0,40.2c-0.2,0.8,0.4,2.1,1.1,2.3l9.8,3.7c0.7,2.6,1.4,5.2,2.5,7.5l-6,8.9c-0.6,0.7-0.4,2,0.3,2.5l12,10.7 c0.7,0.5,1.9,0.8,2.4,0.1L30.3,68.2z M26.7,37.3c1.6-7.4,9.1-12.3,16.5-10.8S55.6,35.7,54,43.1c-1.6,7.4-9.1,12.3-16.5,10.7 C30.1,52.3,25.1,44.7,26.7,37.3L26.7,37.3z'/%3E%3C/svg%3E");
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 0px;
  margin-left: -10px;
}

.container_maintenance .MN_logo {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='225.29px' height='86.12px' viewBox='0 0 225.29 86.12'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:url(%23strap_8);%7D.cls-2%7Bfill:%230a9bd8;%7D.cls-3%7Bfill:%23d5141a;%7D.cls-4%7Bfill:%23004d9b;%7D.cls-5%7Bfill:%23004e9c;%7D.cls-6%7Bfill:%23d6171b;%7D%3C/style%3E%3ClinearGradient id='strap_8' x1='34.2' y1='80.07' x2='34.2' y2='12.47' gradientTransform='matrix(1, 0, 0, 1, 0, 0)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23024e9c'/%3E%3Cstop offset='1' stop-color='%230d9bd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Vrstva_1-2'%3E%3Cg%3E%3Cpath class='cls-2' d='M95.19,38.91h-9.79l-1.87,4.52h-5l9.4-21.1h4.82l9.43,21.1h-5.12l-1.87-4.52Zm-1.54-3.71l-3.35-8.08-3.35,8.08h6.69Z'/%3E%3Cpath class='cls-2' d='M104.29,24.2c-.54-.5-.81-1.12-.81-1.87s.27-1.37,.81-1.87c.54-.5,1.25-.75,2.11-.75s1.57,.24,2.11,.72c.54,.48,.81,1.08,.81,1.81,0,.78-.27,1.43-.81,1.94-.54,.51-1.25,.77-2.11,.77s-1.57-.25-2.11-.75Zm-.24,3.01h4.7v16.21h-4.7V27.22Z'/%3E%3Cpath class='cls-2' d='M119.89,27.58c.95-.4,2.05-.6,3.3-.6v4.34c-.52-.04-.87-.06-1.05-.06-1.35,0-2.4,.38-3.16,1.13-.76,.75-1.15,1.88-1.15,3.39v7.66h-4.7V27.22h4.49v2.14c.56-.78,1.32-1.38,2.28-1.78Z'/%3E%3Cpath class='cls-2' d='M140.09,32.55h4.46v8.56c-1.14,.86-2.47,1.53-3.98,1.99-1.51,.46-3.02,.69-4.55,.69-2.19,0-4.16-.47-5.91-1.4s-3.12-2.23-4.11-3.89c-1-1.66-1.49-3.53-1.49-5.62s.5-3.96,1.49-5.62c.99-1.66,2.38-2.95,4.14-3.89,1.77-.93,3.76-1.4,5.97-1.4,1.85,0,3.53,.31,5.03,.93s2.77,1.53,3.8,2.71l-3.13,2.89c-1.51-1.59-3.33-2.38-5.46-2.38-1.35,0-2.54,.28-3.59,.84-1.04,.56-1.86,1.36-2.44,2.38-.58,1.03-.87,2.2-.87,3.53s.29,2.47,.87,3.5c.58,1.02,1.39,1.82,2.43,2.4,1.04,.57,2.22,.86,3.54,.86,1.41,0,2.67-.3,3.8-.9v-6.18Z'/%3E%3Cpath class='cls-2' d='M165.41,39.51v3.92h-16.33V22.33h15.94v3.92h-11.09v4.58h9.79v3.8h-9.79v4.88h11.48Z'/%3E%3Cpath class='cls-2' d='M188.64,22.33v21.1h-4.01l-10.52-12.81v12.81h-4.82V22.33h4.04l10.49,12.81v-12.81h4.82Z'/%3E%3Cpath class='cls-2' d='M193.65,22.33h4.88v21.1h-4.88V22.33Z'/%3E%3Cpath class='cls-2' d='M207.83,42.38c-1.76-.94-3.13-2.25-4.13-3.9-.99-1.66-1.49-3.52-1.49-5.59s.5-3.93,1.49-5.59c.99-1.66,2.37-2.96,4.13-3.9,1.76-.94,3.73-1.42,5.92-1.42s4.16,.47,5.91,1.42c1.75,.94,3.12,2.24,4.13,3.9,1,1.66,1.51,3.52,1.51,5.59s-.5,3.93-1.51,5.59c-1,1.66-2.38,2.96-4.13,3.9s-3.72,1.42-5.91,1.42-4.16-.47-5.92-1.42Zm9.3-3.6c1-.57,1.79-1.37,2.37-2.4,.57-1.03,.86-2.19,.86-3.5s-.29-2.47-.86-3.5c-.57-1.02-1.36-1.82-2.37-2.4-1-.57-2.13-.86-3.38-.86s-2.37,.29-3.38,.86c-1,.57-1.79,1.37-2.37,2.4s-.86,2.19-.86,3.5,.29,2.47,.86,3.5c.57,1.02,1.36,1.82,2.37,2.4,1,.57,2.13,.86,3.38,.86s2.37-.29,3.38-.86Z'/%3E%3Cpath class='cls-5' d='M81.3,49.77h4.88v21.1h-4.88v-21.1Z'/%3E%3Cpath class='cls-5' d='M95.48,69.81c-1.76-.94-3.13-2.25-4.13-3.9-.99-1.66-1.49-3.52-1.49-5.59s.5-3.93,1.49-5.59c.99-1.66,2.37-2.96,4.13-3.9,1.76-.94,3.73-1.42,5.92-1.42s4.16,.47,5.91,1.42c1.75,.95,3.12,2.25,4.13,3.9,1,1.66,1.51,3.52,1.51,5.59s-.5,3.93-1.51,5.59c-1,1.66-2.38,2.96-4.13,3.9-1.75,.94-3.72,1.42-5.91,1.42s-4.16-.47-5.92-1.42Zm9.3-3.6c1-.57,1.79-1.37,2.37-2.4,.57-1.02,.86-2.19,.86-3.5s-.29-2.47-.86-3.5c-.57-1.02-1.36-1.82-2.37-2.4s-2.13-.86-3.38-.86-2.37,.29-3.38,.86c-1,.57-1.79,1.37-2.37,2.4-.57,1.03-.86,2.19-.86,3.5s.29,2.47,.86,3.5,1.36,1.82,2.37,2.4c1,.57,2.13,.86,3.38,.86s2.37-.29,3.38-.86Z'/%3E%3Cpath class='cls-5' d='M120.68,53.75h-6.75v-3.98h18.38v3.98h-6.75v17.12h-4.88v-17.12Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-6' d='M28.82,86.12c-10.65,0-20.97-4.13-28.82-11.77l1.96-2.01c9.45,9.21,22.75,12.94,35.59,9.98,10.02-2.31,18.55-8.39,24-17.12,5.45-8.73,7.18-19.05,4.87-29.08-2.75-11.91-10.74-21.58-21.92-26.55l1.14-2.57c12,5.33,20.57,15.71,23.52,28.49,2.48,10.76,.63,21.84-5.22,31.2-5.85,9.36-14.99,15.88-25.75,18.37-3.11,.72-6.25,1.07-9.36,1.07Z'/%3E%3Cpath class='cls-1' d='M28.83,80.07c-9.09,0-17.9-3.52-24.6-10.05l6.37-6.53c6.41,6.26,15.45,8.79,24.16,6.78,6.81-1.57,12.59-5.7,16.29-11.62,3.7-5.92,4.87-12.93,3.3-19.74-1.88-8.12-7.33-14.71-14.98-18.07l3.67-8.36c10.16,4.46,17.71,13.57,20.2,24.37,2.12,9.18,.54,18.64-4.46,26.63-4.99,7.99-12.8,13.56-21.98,15.68-2.66,.61-5.34,.91-7.99,.91Z'/%3E%3Cg%3E%3Cpath class='cls-3' d='M12.54,10.32C15.55,5.64,13-.14,7.16,0,3.56,.09,.6,2.24,.66,6.63H5.07c0-1.42,.84-1.98,2-1.98,2.55,0,1.77,2.67,.75,4.04L.19,19.88v.78H15.63l-1.73-4.65h-5.46l4.09-5.7Z'/%3E%3Cpolygon class='cls-4' points='27.88 7.42 30.38 .88 30.38 .1 25.39 .1 25.39 .88 27.88 7.42'/%3E%3Cpolygon class='cls-3' points='25.39 .88 25.39 .1 21.78 9.88 21.63 9.88 18.02 .1 13.03 .1 13.03 .88 20.59 20.68 21.78 20.68 22.79 20.68 22.82 20.68 27.88 7.42 25.39 .88'/%3E%3Cpolygon class='cls-2' points='30.38 .88 30.38 .1 33.99 9.88 34.14 9.88 37.75 .1 42.74 .1 42.74 .88 35.18 20.68 33.99 20.68 32.95 20.68 27.88 7.42 30.38 .88'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
width: 263px;
    height: 102px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -174px;
    
}
@media (max-width: 991px){
.container_maintenance .MN_logo{
    margin-top: -48px;
}
}

@keyframes spin-one {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}

.spin-one {
  -webkit-animation: spin-one 4.5s infinite linear;
  animation: spin-one 4.5s infinite linear;
}

@keyframes spin-two {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(359deg);
  }
}

.spin-two {
  -webkit-animation: spin-two 4s infinite linear;
  animation: spin-two 4s infinite linear;
}


.user_setting_card{
  min-height: 300px;
}

.body_usser_sett{
  position: relative;
}
.body_usser_sett .au-btn{
  position: absolute;
  right:    20px;
  bottom:   20px;
}

.handle_sort {
  cursor: move;
  transition: all 0.3s linear;
}

.handle_sort:hover{
  transform: scale(1.005);
  color: var(--primary-color);
}
.sortable_placeholder{
  height: 70px;
}

.clone{
  background-color: var(--primary-color);
}

.ghost {
  background: var(--primary-color) !important;

}
.chosen {
  background: var(--primary-color) !important;

}
.drag {
  background: var(--primary-color) !important;
}

/* login cool style */
/*
  <div id="lg_username_group" class="user-box">
  <input  type="text" name="" required="">
  <label data-lngcode="login_menu-0" data-lngtext="Username"></label>
  </div>
*/
.user-box_my {
  position: relative;
}

.user-box_my input {
  width: 100%;
  padding: 10px 0;
  font-size: 20px;
  color: #5e5e5e;
  margin-bottom: 30px;
  border: none;
  border-bottom: 2px solid var(--primary-color);
  outline: none;
  background: transparent;
}
.user-box_my .first_label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 18px;
  color: var(--primary-color);
  pointer-events: none;
  transition: .5s;
}

.user-box_my input:focus ~ .first_label,
.user-box_my input:valid ~ .first_label,
.user-box_my.filled input ~ .first_label {
  top: -25px;
  left: 0;
  color: var(--primary-color);
  font-size: 16px;
}

.user-box_my .second_label {
  position: absolute;
  display: none;
  top: 52px;
  left: 0;
  color: #dd0000;
  font-size: 14px;
}
.user-box_my.my_invalid .second_label {
  display: block; /* Show the second label if the input has the class `my_invalid` */
}

.toggle-passwordmy {
  position: absolute;
  color: var(--primary-color);
  top: 36%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}


.custom-button_2vv {
  background-color: transparent;
  color: var(--primary-color); /* Set the default text color to dark blue */
  border: 1px solid var(--primary-color); /* Set the default border color to dark blue */
  transition: border-color 0.3s; /* Add a smooth transition effect for the border color */
}

.custom-button_2vv:hover {
  border-color: 009cdd; /* Change the border color to dark blue on hover */
  background-color: var(--primary-color);
  color:#ffffff;
}


/* end maintenance */

/* offline notification --------------------*/
.offline_notification
{
    background-color: #2b2b2b;
    position: fixed;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 1px;
    left: 16px;
    bottom: 10px;
    display: none;
    font-size: 15px;
    color: #d6cfcf;
    z-index: 100;
}

.offline_ok
{
    color: #0e8114;
}

.offline_div
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.offline_icon
{
  padding-left: 12px;
  font-size: 20px;
}
.offline_message
{
    padding: 12px;
}
.offline_refresh
{
    padding-right: 12px;
    padding-left: 6px;
    font-size: 13px;
    color: #216fDb;
    cursor: pointer;
}
.offline_close
{
    color: #c24e4e;
    cursor: pointer;
    font-size: 20px;
    padding-right: 12px;
}
/* end offline notification --------------------*/