/*
    KANOS CUSTOMER PORTAL
      -> MAIN CSS
    
    version: 0.01
    date: 07.06.2023
    
    created by tokk.sk
    
    (C) kanos.sk, 2023
    all rights reserved
*/

/* 
   ZOOM IN OHACK

   font-size: 25px; //19px original
   height:66px;
   transform-origin: top left;
   transform: scale(0.76);
*/

@font-face {
  font-family: 'Autography';
  src:  url('/fonts/Autography.woff2') format('woff2'),
        url('/fonts/Autography.otf') format('truetype');
}

@font-face {
  font-family: 'Marhaban-Regular';
  src:  url('/fonts/Marhaban-Regular.woff2') format('woff2'),
        url('/fonts/Marhaban-Regular.otf') format('truetype');
}
html {
  user-select: none;
}
 
body {
  font-family: 'Open Sans';

  background-color: #1E1E1E;
  min-width:600px;

  /*min-height: 1000px;*/
  /* min-width:550px; */
  /* width: 100%; */
  /* height: 100%; */
  /* padding: 0 auto; */
  /*font-style: normal;*/
}

/*.bodybox { */
  /* display: block; */
  /* position: relative; */
  /* min-width:500px; */
  /* height: auto; */
  /* transform: translateX(50%); */
  /* left: -50%; */
  
  /* left: calc(50% - width/2 + 0.5px); */
/* } */

.hide {
  display: none;
}

.lostpassword-message {
  color: #fff;
  text-align: center;
  top: 160px;
  position: relative;
  font-size: 18px;
  font-weight: 500;
}

.menubox {
  min-width: unset;
  min-height: unset;
  width: 100%;
  height: 100%;
  
  padding: 0;
  margin: 0;
  
  left: 0;
  top: 0;
  
  /* position: absolute; */
  position: fixed;
  
  background-color: #484848;
  
  z-index: 1;
}

.menubox-close {
  top: 13px;
  position: fixed;
  right: 13px;
  z-index: 2;
  color: #CCCCCC; /*red;*/      
}

.menubox-dropdown {
  display: none;
  position: absolute;
  background-color: #484848;
  
  text-align: center;
  
  /*min-width: 450px;*/
  height: calc(100vh - 165px);
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  /*right: 0px;*/
  z-index: 1;
  top: 200px; /*160px;*/
  width: 100%;
  overflow-x: auto;
}

.menubox-dropdown.show {
  display: unset;
}

.menubox-dropdown a {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 35px; /*45px;*/
  line-height: 150%;
  /* or 30px */

  text-align: center;

  color: #FFFFFF;
  
  text-decoration: none;      
}
.menubox-dropdown a:not(:first-child) {
  margin-top: 35px;      
}
.menubox-dropdown a:hover {
  text-decoration: underline;
}
.menubox-dropdown a:active {
  color: #ff0000;
  text-decoration: none;
}
.menubox-dropdown a:visited {
  color: #fff;
}

.header-menu {
  min-width: 450px;
  width: 100%;
}

.header-menu-center {
    width: 210px;
    height: 162px;
    left: calc(50% - 210px/2);
    position: absolute;
}

.header-menu-center-logo {
  position: absolute;
  width: 216px;
  height: 227px;
  left: 0px;
  top: 0px;

  font-family: 'Autography';
  font-style: normal;
  font-weight: 400;
  font-size: 120px;
  line-height: 227px;
  
  color: #FFFFFF;      
}

.header-menu-center-product {
  position: absolute;
  width: 226px;
  height: 35px;
  left: 63px;
  top: 127px;

  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
  /* or 30px */

  text-align: center;

  color: #FFFFFF;
}      


.header {
  position: relative;
  margin: auto;
  width: 90vw;
  height: 165px;
}

.header-left {
  float: left;
  width: 300px;
  height: 162px;
}      

.header-left-logo {
  position: absolute;
  width: 216px;
  height: 227px;
  left: 0px;
  top: 0px;

  font-family: 'Autography';
  font-style: normal;
  font-weight: 400;
  font-size: 120px;
  line-height: 227px;
  
  color: #FFFFFF;      
}

.header-left-product {
  position: absolute;
  width: 226px;
  height: 35px;
  left: 63px;
  top: 127px;

  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
  /* or 30px */

  text-align: center;

  color: #FFFFFF;
}      

.header-right {
  position: relative;
  float: right;
  top: 96px;
  width: auto;
  height: 50px;
  /*margin-right: 150px;*/
  text-align: left;
  color: #FFFFFF;
}

.header-right-dropdown {
  display: none;
  position: absolute;
  background-color: #484848;
  
  text-align: center;
  
  min-width: 450px;
  height: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0px;
  z-index: 1;
  top: 36px;
  width: 90vw;
}

.header-right-dropdown-show {
  display: none;
}

.header-right-dropdown a {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 35px;
  line-height: 150%;
  /* or 30px */

  text-align: center;

  color: #FFFFFF;
  
  text-decoration: none;      
}
.header-right-dropdown a:not(:first-child) {
  margin-top: 25px;      
}
.header-right-dropdown a:hover {
  text-decoration: underline;
}
.header-right-dropdown a:active {
  color: #ff0000;
  text-decoration: none;
}
.header-right-dropdown a:visited {
  color: #fff;
}            

/* MENU ITEM */
.menuItem {
  /* Produkty */
  /*position: absolute;
  display: block; */
  padding-right: 35px;
  width: 129px;
  height: 35px;
  /*left: 845px;
  top: 96px;*/

  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 150%;
  /* or 30px */

  text-align: center;

  color: #FFFFFF;
  
  text-decoration: none;      
}
.menuItem:hover {
  text-decoration: underline;
}
.menuItem:active {
  color: #ff0000;
  text-decoration: none;
}
.menuItem:visited {
  color: #fff;
}            

.menuItem.icon {
  display:none;
}

.menuItem.icon.active {
  color: #ff0000;
}

.loginbox {
  position: relative;
  width: 805px;
  height: 383px;
  left: calc(50% - 805px/2 - 0.5px);
  top: 75px;
  
  background: #313033;      
}

.loginbox a {
  font-family: 'Open Sans';
  font-style: normal;

  color: #fff;
  text-decoration: none;
}
.loginbox a:hover {
  text-decoration: underline;
}      
.loginbox a:active {
  color: #FF0000;
}
.loginbox a:visited {
  color: #fff;
}

.loginbox .checkbox {
  display: none;
}
.loginbox .label {
  position: relative;
  /*font-family: sans-serif;*/
  /*font-size: 22px;*/
  color: #fff;
  display: block;
  padding-left: 25px;
  user-select: none;
  margin: 0px 20px;
}
.loginbox .check-mark {
  width: 25px;
  height: 25px;
  background-color: #9A9A9A; /*e9f1fa;*/
  position: absolute;
  left: -10px; /*80px;*/
  display: inline-block;
  top: -2px;
  border-radius: 50%;
}
.loginbox .label .checkbox:checked + .check-mark {
  background-color: #fff; /*#9691f4;*/
  /*transition: .1s;*/
}
.loginbox .label .checkbox:checked + .check-mark:after {
  content: "";
  position: absolute;
  width: 10px;
  /*transition: .1s;*/
  height: 5px;
  background: #fff; /*#9691f4;*/
  top: 45%;
  left: 50%;
  border-left: 2px solid #313033;/*#fff;*/
  border-bottom: 2px solid #313033;/*#fff;*/
  transform: translate(-50%, -50%) rotate(-45deg);
}


.loginbox-header {
  position: absolute;
  width: 301px;
  height: 36px;
  
  /*left: 120px;*/
  left: 50%;
  transform: translateX(-50%);
  
  top: 58px;

  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  text-align: center;

  color: #FFFFFF;
}

.loginbox-input {
  left:120px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  /*font-size: 18px;*/
  line-height: 150%;
  color: #fff;
  margin: 0 auto;
  padding: 16px 40px; /*8px 20px;*/
  border-radius: 24px;/*14px;*/
  background-color: #3f3e3e;
  border: none;
  /* width: 566px; */
  /* height: 50px; */
  font-size: 36px;
  height: 100px;
  width: 1132px; 
  transform-origin: top left;
  transform: scale(0.5);
  
  display: block;
}
.loginbox-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #716e61;
  opacity: 1; /* Firefox */
}

.loginbox-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #716e61;
}

.loginbox-input::-ms-input-placeholder { /* Microsoft Edge */
  color: #716e61;
}

.loginbox-password {
  left:120px;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  /*font-size: 18px;*/
  line-height: 150%;
  color: #fff;
  margin: 0 auto;
  padding: 16px 40px; /*8px 20px;*/
  border-radius: 24px; /*14px;*/
  background-color: #3f3e3e;
  border: none;
  /*width: 566px;*/
  /*height: 50px;*/
  display: block;
  -webkit-text-security:disc;
  
  font-size: 36px;
  height: 100px;
  width: 1132px; 
  transform-origin: top left;
  transform: scale(0.5);
}
.loginbox-password::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #716e61;
  opacity: 1; /* Firefox */
}

.loginbox-password:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #716e61;
}

.loginbox-password::-ms-input-placeholder { /* Microsoft Edge */
  color: #716e61;
}
.loginbox-password:placeholder-shown {
  -webkit-text-security:none;
}

.loginbox-buttons {
  position: absolute;
  top: 274px;
  right: 119px;
  width: auto;
}    

.loginbox-submit {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: #fff;
	margin: 0 auto;
  padding: 8px 20px;
  border-radius: 14px;
  background-color: #79d046;
  
  /*box-shadow: 2px 2px 5px #299b0d;*/
  
  border: none;
  width: 189px;
  height: 42px;
  display: block;
}

.loginbox-submit:active {
  background-color: #5A9D33; /*#ff0000;*/
  /*box-shadow: -3px -3px 5px #8e0000;*/
}

.passwordrecovery-div {
  color: #fff;
  text-align: center;
  /* margin: auto; */
  top: 120px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
}

.passwordrecovery-buttons {
  position: absolute;
  top: 274px;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

.databox {
  position: relative;
  width: 90vw;
  height: 550px;
  margin: 0 auto;
  top: 25px;

  background: #313033;      
}

.databox.contact-nonlogin {
  height: unset;
  height: 485px;
  padding-top: 50px;
}

.databox.contact {
  height: unset;
  height: 485px;
  top: 120px;
  padding-top: 50px;
}

.databox.contact-form {
  height: unset;
  height: 485px;
  top: 120px;
  padding-top: 25px;
}

.databox.profile {
  height: unset;
  height: 740px;
}

.databox.changepassword {
  height: 388px;
  top: 60px;
}

.databox.register {
  height: unset;
  height: 970px;/*930px;*/
}

.databox a {
  color: #fff;
}
.databox a:active {
  color: #FF0000;
  text-decoration: none;
}
.databox a:visited {
  color: #fff;
}

.databox-top-left {
  position: absolute;
  top: 9px;
  left: 10px;

  font-family: 'Open Sans';
  font-style: normal;

  color: #9d9d9d;
}

.databox-top-right {
  height: 30px;
  position: absolute;
  right: 15px;
  top: 15px;

  font-family: 'Open Sans';
  font-style: normal;

  /* display: none; */
}
      
.databox-header {
  position: absolute;
  width: 301px;
  height: 36px;
  margin: 0px auto;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  /*overflow: auto;*/
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  text-align: center;

  color: #FFFFFF;
}

.databox-body {
  position: absolute;
  top: calc(58px + 56px);
  margin: 0px auto;
  width: 1020px;
  height: auto;
  left: calc(50% - 1020px/2 - 0.5px);
  /*left: 50%; 
  transform: translateX(-50%);*/
  /*  overflow-X: auto; */
}

.databox-profile-body {
  position: absolute;
  top: calc(58px + 56px);
  margin: 0px auto;
  width: 586px;
  height: auto;
  left: calc(50% - 586px/2 - 0.5px);
  /* left: 50%; 
  transform: translateX(-50%);*/
  /* overflow-X: auto; */
  text-align: center;
}
.databox-profile-body td {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */

  /*display: flex;*/
  align-items: center;
  text-align: right;
  padding-right: 10px;
  color: #FFFFFF;
}      


.databox-body-left {
  position: relative;
  top: 0px;
  float: left;
  /*left: calc(50% - 450px); */
  width: 450px;
  
  text-align: right;
  
  color: #FFFFFF;
}
.databox-body-right {
  position: relative;
  float: right;
  top: 0px;
  width: 420px;
  /* left: -240px; */
  
  color: #FFFFFF;
}

.databox-flex-body.card {
  display: flex;
  flex-wrap: wrap;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  overflow: hidden;
  width: calc(100vw - 250px); /*1500px;*/     
}


.databox-body td {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */

  /*display: flex;*/
  align-items: center;
  text-align: right;
  padding-right: 10px;
  color: #FFFFFF;
}      
.databox-body-bottom {
  position: absolute;
  top: 360px;
  left: 50%; 
  transform: translateX(-50%);
  height: 42px;
  width: auto;
  text-align: center;
}

.databox-profile-body-bottom {
  position: absolute;
  top: 670px;
  left: 50%; 
  transform: translateX(-50%);
  height: 42px;
  width: auto;
  text-align: center;
}

.databox-profile-body-bottom.changepassword {
  top: 318px; /*305px;*/
}

.databox-profile-body-bottom.register {
  top: unset;
  top: 900px; /*855px;*/
}

.device-name-save {
  position: absolute;
  right: 8px;
  top: 15px;  
}        


.databox-middle {
  position: relative;
  top: 40px; /*35px;*/
  width: 776px;
  left: calc(50% - 776px/2 - 0.5px);
}

.databox-middle.profile {
  top: 85px;
}

.databox-middle-header {
  position: relative;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  text-align: center;

  color: #FFFFFF;
  height: auto;
}      

/* Scrollbar */
.databox-middle {
  /* width */
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    /*background: #f1f1f1;*/
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #B1B1B1;
    /*box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.25);*/
    border-radius: 20px;
    /*transform: rotate(90deg);*/
    width: 16px;
    height: 16px;
  }

  /* Handle on hover */
  /*::-webkit-scrollbar-thumb:hover {
    background: #555;
  }*/
}

.databox-middle-body {
  position: relative;
  width: 100%;
  height: 240px; 
  overflow-X: auto;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  background-color: #3F3E3E;
  color: #FFFFFF;
}      

.databox-middle-body a {
  color: #79d046;
  
  text-decoration: none;      
}
.databox-middle-body a:hover {
  text-decoration: underline;
}
.databox-middle-body a:active {
  color: #ff0000;
  text-decoration: none;
}
.databox-middle-body a:visited {
  color: #79d046;
}


.databox-middle-body table {
  border-collapse: collapse;
  width: 100%;
  background-color: #3F3E3E;
  
  color: #FFFFFF;
}

/* .databox-middle-body th */

.databox-middle-body td {
  text-align: right;
  padding: 8px;
}

.databox-middle-body tr:nth-child(even) {background-color: #353232;}      
.databox-middle-body td:nth-child(even) {text-align: left; font-weight: bold;}

.databox-footer {
  position: relative;
  top: 55px;
  width: 776px;
  left: calc(50% - 776px/2 - 0.5px);
}
.databox-footer-header {
  position: relative;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  text-align: center;

  color: #FFFFFF;
  
  height: auto;
}      

.databox-footer-body {
  position: relative;
  width: 100%;
  height: auto; 
  /*overflow-X: auto;*/
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  background-color: #3F3E3E;
  color: #FFFFFF;
}

.databox-footer-body table {
  border-collapse: collapse;
  width: auto;
  background-color: #3F3E3E;
  margin: 0px auto;
  color: #FFFFFF;
}

/* .databox-middle-body th */

.databox-footer-body td {
  text-align: right;
  padding: 8px;
  /* width: 150px;
  text-align: center; */
}

/*.databox-footer-body tr:nth-child(even) {background-color: #353232;}*/      
.databox-footer-body td:nth-child(even) {text-align: left; font-weight: bold; background-color: #353232; width: 80px; text-align: center;}

.contact-bold1 {
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0em;
}

.contact-bold2 {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0em;
}

.contactbox-body {
  position: absolute;
  top: calc(58px + 56px);
  margin: 0px auto;
  width: 1020px;
  height: auto;
  left: calc(50% - 1020px/2 - 0.5px);
  /*left: 50%; 
  transform: translateX(-50%);*/
  /*  overflow-X: auto; */
  font-family: Open Sans;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  letter-spacing: 0em;
}
.contactbox-body-left {
  position: relative;
  top: 0px;
  float: left;
  /*left: calc(50% - 450px); */
  width: 450px;
  
  /*text-align: right;*/
  
  color: #FFFFFF;
}
.contactbox-body-right {
  position: relative;
  float: right;
  top: 0px;
  width: 420px;
  /* left: -240px; */
  
  color: #FFFFFF;
}


.databox-flex {
  display: flex;
  width: calc(100% - 100px*2);
  
  position: relative;

  height: 500px;
  margin: 0 auto;
  top: 35px;

  background: #313033;      
}

/* Scrollbar */
.databox-flex {
  /* width */
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    /*background: #f1f1f1;*/
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #B1B1B1;
    /*box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.25);*/
    border-radius: 20px;
    /*transform: rotate(90deg);*/
    width: 16px;
    height: 16px;
  }

  /* Handle on hover */
  /*::-webkit-scrollbar-thumb:hover {
    background: #555;
  }*/
}


.databox-flex a {
  color: #fff;
}
.databox-flex a:active {
  color: #FF0000;
  text-decoration: none;
}
.databox-flex a:visited {
  color: #fff;
}

.databox-flex-header {
  position: absolute;
  width: 301px;
  height: 36px;
  margin: 0px auto;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  /*overflow: auto;*/
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  /* identical to box height, or 36px */

  text-align: center;

  color: #FFFFFF;
}
.databox-flex-body {
  position: absolute;
  top: calc(58px + 56px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0px auto;
  width: 90%;
  height: 325px;
  overflow-X: auto;
  -webkit-overflow-scrolling: touch;
}

.databox-flex-body table {
  border-collapse: collapse;
  width: 100%;
  background-color: #3F3E3E;
  
  color: #FFFFFF;
}

/* .databox.body th */

.databox-flex-body td {
  text-align: left;
  padding: 8px;
}

.databox-flex-body tr:nth-child(even) {background-color: #353232;}      

.databox-flex-body tr:hover {
  background-color: #3A3A3A;
}
.databox-flex-body tr:nth-child(even):hover {
  background-color: #303030;
}

.databox-contact-form-body {
  position: relative;
  top: 100px;
  width: 100%;
  text-align: center;
}

.databox-contact-form-body textarea {
  background: #3F3E3E;
  color: #fff;
  
  width: 652px;
  height: 220px;
  
  border-radius: 10px;
  border: 0px;
  
  padding: 5px;
  
  resize: none;
  
  white-space: nowrap;
  overflow: auto;
}

.databox-contact-form-bottom {
  position: relative;
  top: 160px;
}

.footer {
  position: relative;
  width: 253px;
  height: 60px;
  top: 200px;
  left: calc(50% - 253px/2 - 0.5px);
  color: #fff;
  padding-bottom: 25px;
}

.footer.status {
  top:unset;
  top:135px;/*90px;*/
}

.footer.profile {
  top:unset;
  top:135px;/*90px;*/
}

.footer.registration {
  top:unset;
  top:120px;
}

.footer-buttons {
  position: relative;
  width: 253px;
  height: 25px;
  top: 0px;
  color: #fff;
  text-align: center;        
}      
.footer-buttons a {
  text-decoration: none;
  color: #fff;
}
.footer-buttons a:active {
  color: #FF0000;
  text-decoration: none;
}
.footer-buttons a:visited {
  color: #fff;
}


.footer-copyright {
  position: relative;
  width: 253px;
  height: 19px;
  top: 8px; /* 1px */
  color: #ffffff;
  text-align: center;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
}

.forgot-password {
  display: block;
  position:relative;
  top: 87px;
  text-align: center;
  color:#fff;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0em;
}

.forgot-password a, .forgot-password a:hover, .forgot-password a:active, .forgot-password a:visited {
  color: #fff;
  text-decoration: solid underline white 1px;
}

.forgot-password a:hover, .forgot-password a:active {
  text-decoration: solid underline white 1.5px;
}

@media screen and (max-width: 1336px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .header-right-dropdown-show.long {
    display: unset;
  }
  
  .header-right.long {
    margin-right: 0px; /*calc(20% - 25px);*/
    width: 30px;
    text-align: right;
    
    position:absolute;
    float:right;
    right: 0px;
  }
  .menuItem.icon.long {
    display:unset;
    /*float: left;*/
    /*right: 0px;*/
  }
  .menuItem.long{
    display:none;
  }        
}


/* responsive stage 1. hide menu and make button menu */
@media screen and (max-width: 1200px) {
  /*.topnav a:not(:first-child) {display: none;}*/
  .header-right-dropdown-show {
    display: unset;
  }
  
  .header-right {
    margin-right: 0px; /*calc(20% - 25px);*/
    width: 30px;
    text-align: right;
    
    position:absolute;
    float:right;
    right: 0px;
  }
  .menuItem.icon {
    display:unset;
    /*float: left;*/
    /*right: 0px;*/
  }
  .menuItem {
    display:none;
  }        


  .databox-flex {
    min-width: 450px;
    width: 90vw;
    /*width: calc(100% - 75px*2);*/
  }
  
/* }
/* responsive stage 2. shorten the databox */
/* @media screen and (max-width: 1000px) { */
  html, body {
    /*overflow-x: auto;*/
    /* min-height: 900px; */
    min-width: 550px;
    /*height: 100vw;*/
  }
  .header {
    min-width: 450px;
  }
  .header-right-dropdown {
    min-width: 450px;
    /*width: 450px;*/
  }
  .databox {
    /*top: 210px;*/
    width: 90vw;
    min-width: 450px;
    /*left: calc(50% - (450px/2) - 0.5px);*/
    /* transform: translateX(-50%); */
    height: 870px;
  }
  
  .databox.manual {
    height: 777px;
  }

  .databox.contact-nonlogin {
    height: unset;
    height: 820px;
  }

  /*.databox-header {
    left: 20px;
  } */
  .databox-body {
    height: 755px;
    width: 430px;
    min-width: 430px;
    left: calc(50% - 430px/2 - 0.5px);
  }
  
  .databox-body.manual {
    height: 657px;
  }
  
  .databox-body-left {
    float: unset;
    height: auto;
    width: 430px;
    min-width: 430px;
  }        
  .databox-body-right {
    /*position: aboslute;*/
    float: unset;
    top: 45px;
    left: 40px;
    height: auto;
    width: 390px;
    min-width: 390px;
  }
  .databox-body-bottom {
    position: relative;
    top: 91px;
  }

  .databox-middle {
    top: 50px;
    /*width: 450px;
    left: calc(50% - 450px/2 - 0.5px);*/
    height: calc(250px + 36px);

    width: 80vw;
    min-width: 450px;
    left: 50%;
    transform: translateX(-50%);
  }
  .databox-footer {
    top: 70px;
    /*width: 450px;
    left: calc(50% - 450px/2 - 0.5px);*/

    width: 80vw;
    min-width: 450px;
    left: 50%;
    transform: translateX(-50%);
  }
   .footer {
    top: 111px;
  }  
  .footer.contact {
    top: 180px;
  }
  .contactbox-body {
    height: 755px;
    width: 430px;
    min-width: 430px;
    left: calc(50% - 430px/2 - 0.5px);
  }
  
  .contactbox-body-left {
    float: unset;
    height: auto;
    width: 430px;
    min-width: 430px;
    left: 40px;
  }        
  .contactbox-body-right {
    /*position: aboslute;*/
    float: unset;
    top: 45px;
    left: 40px;
    height: auto;
    width: 390px;
    min-width: 390px;
  }

  /*.databox-body-bottom {
    top: 580px;
  }*/               
          
}

.input-text {
  width: 174px;
  height: 40px;
  
  box-sizing: border-box;
  
  /*left: 529px;
  top: 437px;*/

  background: #3F3E3E;
  
  border-radius: 14px;
  border: none;

  margin: 0 auto;
  padding: 8px 8px;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */
  color: #FFFFFF;
  /*transform: scale(0.5);*/  
}

.input-password {
  width: 174px;
  height: 40px;
  
  box-sizing: border-box;
  
  /*left: 529px;
  top: 437px;*/

  background: #3F3E3E;
  
  border-radius: 14px;
  border: none;

  margin: 0 auto;
  padding: 8px 8px;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */

  color: #FFFFFF;
  -webkit-text-security:disc;
}

.input-text:read-only {
  font-weight: bold;
  color: #A0A0A0;
}

.input-text.small {
  width: unset;
  width: 174px;
}

.input-text.long, .input-password.long {
  width: unset;
  width: 375px;
}

.input-text.color2 {
  background: unset;
  background: #353232;
}

.input-text.slim {
  height: unset;
  height: 30px;
}

/*
@media screen and (max-width: 913px) {
  .device-name-save {
    position: absolute;
    right: 15px;
    top: 30px;  
  }   
} */

.databox-profile-body .checkbox {
  display: none;
}
.databox-profile-body .label {
  position: relative;
  /*font-family: sans-serif;*/
  /*font-size: 22px;*/
  display: block;
  padding-left: 25px;
  user-select: none;
  margin: 0px 20px;
}
.databox-profile-body .check-mark {
  width: 30px;
  height: 30px;
  background-color: #9A9A9A; /*e9f1fa;*/
  position: absolute;
  left: 80px;
  display: inline-block;
  top: 10px;
  border-radius: 50%;
}
.databox-profile-body .label .checkbox:checked + .check-mark {
  background-color: #fff; /*#9691f4;*/
  /*transition: .1s;*/
}
.databox-profile-body .label .checkbox:checked + .check-mark:after {
  content: "";
  position: absolute;
  width: 10px;
  /*transition: .1s;*/
  height: 5px;
  background: #fff; /*#9691f4;*/
  top: 45%;
  left: 50%;
  border-left: 2px solid #313033;/*#fff;*/
  border-bottom: 2px solid #313033;/*#fff;*/
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* responsive stage 2. shorten the login box */
@media screen and (max-width: 850px) {
/*  html, body {
    overflow-x: hidden;
    height: 100vh;
  }
*/      
  .databox-profile-body .check-mark {
    left: 0px;
  }
  .loginbox {
    top: 123px;
    width: 525px;
    left: calc(50% - (525px/2) - 0.5px);
  }
  .loginbox-header {
    /*left: 20px;*/
    transform: translateX(-50%);
    left: 50%;
  }
  .loginbox-buttons {
    right: 25px;
  }
  .loginbox-input {
    width: 950px;/*475px;*/
    left:  25px;
  }
  .loginbox-password {
    width: 950px; /*475px;*/
    left:  25px;
  }
  .forgot-password {
    top: 140px;
  }
  .footer {
    top: 280px;
  }

  .databox-contact-form-body textarea {
    width: 90%;
  }

  .databox-profile-body {
    min-width: 450px;
    /* width: 90vw; */
    /* left: calc(50% - 90vw/2 - 20.5px); */
    width: 450px;
    left: calc(50% - 450px/2 + 20.5px);
  }
  .input-text.long, .input-password.long {
    /*width: 200px;*/
    width: 230px;
  }

}

/*@media screen and (max-width: 700px) {
  .device-name-save {
    position: absolute;
    right: 15px;
    top: 40px;  
  }
}

@media screen and (max-width: 576px) {
  .device-name-save {
    position: absolute;
    right: 15px;
    top: 50px;  
  }
} */

/* Switch button */
.hidden { display: none; }

.lbl {
  position: relative;
  display: block;
  
  width: 174px;
  height: 40px;
  
  background: #3F3E3E;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;

  text-align: center;
  color: #9A9A9A;
}

.lblOnOff {
  position: relative;
  display: block;
  
  width: 174px;
  height: 40px;
  
  background: #3F3E3E;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;

  text-align: center;
  color: #9A9A9A;
}


.lblTxt, .lblTxtOnOff, .lblTxtOnOff2, .lblTxtManAuto {
  position: relative;
  top: 6px;
  
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;

  color: #9A9A9A;  
}

.lblTxt::after {
  content: 'Letná';
}
.lblTxtOnOff::after {
  content: 'Zapnuté';
}
.lblTxtOnOff2::after {
  content: 'Zapnutá';
}
.lblTxtManAuto::after {
  content: 'Automat';
}

.lbl:after, .lblOnOff:after {
  position: absolute;
  top: 3px;
  left: 3px;
  display: block;
  width: 33px;
  height: 33px;
  border-radius: 100px;
  background: #FAFF00;
  content: '';
  transition: all 0.3s ease;
}

.lblOnOff:after {
  background: #79D046;
}

.lbl:active:after, .lblOnOff:active:after, .lblOnOffÄľ:active:after { transform: scale(1.15, 0.85); }

.cbx:checked ~ label, .cbxOnOff:checked ~ label {
}

.cbx:checked ~ * .lblTxt::after {
  content: 'Zimná';  
}

.cbxOnOff:checked ~ * .lblTxtOnOff::after {
  content: 'Vypnuté';  
}
.cbxOnOff:checked ~ * .lblTxtOnOff2::after {
  content: 'Vypnutá';  
}

.cbxOnOff:checked ~ * .lblTxtManAuto::after {
  content: 'Manuál';  
}

.cbx:checked ~ label:after {
  left: 135px;
  background: #8989FF;
}

.cbxOnOff:checked ~ label:after {
  left: 135px;
  background: #CCCCCC; /*#C11C1C;*/
}

.cbx:disabled ~ label {
  background: #d5d5d5;
  pointer-events: none;
}
.cbxOnOff:disabled ~ label {
  background: #d5d5d5;
  pointer-events: none;
}

.cbx:disabled ~ label:after { background: #bcbdbc; }
.cbxOnOff:disabled ~ label:after { background: #bcbdbc; }

.cbx:disabled ~ * .lblTxt::after {
  content: 'Blokované';  
}
.cbxOnOff:disabled ~ * .lblTxtOnOff::after {
  content: 'Blokované';  
}
.cbxOnOff:disabled ~ * .lblTxtOnOff2::after {
  content: 'Blokovaná';  
}
.cbxOnOff:disabled ~ * .lblTxtManAuto::after {
  content: 'Blokovaná';
}

.rgx {
  display: none;
}

.rgxLabel {
  appearance: none;
  
  position: absolute;
  display: block;
  width: 33px;
  height: 33px;
  border-radius: 100px;
  content: '';
  transition: all 0.3s ease;
}

.rgxLabel {
  display: none;
}

.rgxLabel.one {
  top: 3px;
  left: 3px;
  background: #FAFF00;
  transition: all 0.3s ease;
}
.rgxLabel.two {
  top: 3px;
  left: calc(50% - 33px/2);
  background: rgb(250,255,0);
  background: linear-gradient(90deg, rgba(250,255,0,1) 0%, rgba(250,255,0,1) 49%, rgba(137,137,255,1) 51%, rgba(137,137,255,1) 100%);
  transition: all 0.3s ease;
}
.rgxLabel.three {
  top: 3px;
  right: 3px;
  background: #8989ff;
  transition: all 0.3s ease;
}

.rgxLabel.show {
  display: unset;
}

.lblTriState {
  position: absolute;
  top: 3px;
}

.lblTriState.one {
  left: 65px; /*100px;*/
}
.lblTriState.two {
  left: -62px;
}
.lblTriState.two.hide {
  display: none;
}

.lblTriState.two.summer {
  left: 62px;
  color: #FAFF00;
}
.lblTriState.two.winter {
  left: 57px; /*62px;*/
  color: #8989ff;
}

.lblTriState.three {
  right: 65px; /*-80px;*/
}


.tri-state-toggle {
  display: block;
  position: relative;
  
  width: 174px;
  height: 40px;
  background: #3F3E3E;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  color: #9A9A9A;
}

.tri-state-toggle.overlay {
  position: absolute;
  z-index: 9999;
  left: 0px;
  right: 0px;
  width: 174px;
  height: 40px;  
  border-radius: 40px;
  cursor: pointer;
  background: transparent;
  user-select: none;
}

.tri-state-toggle.overlay.disabled {
  background: #d5d5d5;
  pointer-events: none;
}

.tri-state-toggle.overlay.disabled:after {
  position: absolute;
  top: 3px;
  background: #bcbdbc;
  pointer-events: none;
  display: block;
  width: 33px;
  height: 33px;
  border-radius: 100px;

  left: 3px;
  content: '';
}
.tri-state-toggle.overlay.disabled:before {
  position: absolute;
  top: 6px;
  color: #9A9A9A;
  pointer-events: none;

  left: 50px;
  content: 'Blokovaná';
}


.tri-state-toggle:hover, .tri-state-toggle.overlay:hover {
  cursor: pointer;
}

.button-send {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;                                                                                                         
  color: #fff;
	margin: 0 auto;
  padding: 8px 20px;
  border-radius: 14px;
  background-color: #79d046;
  
  /*box-shadow: 2px 2px 5px #299b0d;*/
  
  border: none;
  width: 264px;
  height: 42px;
  display: block;
}

.button-send:active {
  background-color: #5A9D33; /*#ff0000;*/
  /*box-shadow: -3px -3px 5px #8e0000;*/
}

.button-save {
  width: 107px;
  height: 42px;
}

.button-register {
  width: 150px;
  height: 42px;
}

.button-save, .button-register {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;                                                                                                         
  color: #fff;

  margin: 0 auto;
  padding: 8px 20px;
  border-radius: 14px;
  background-color: #79d046;
  
  /*box-shadow: 2px 2px 5px #299b0d;*/
  
  border: none;
  display: block;
}

.button-save:active, .button-register:active {
  background-color: #5A9D33;/*#ff0000;*/
  /*box-shadow: -3px -3px 5px #8e0000;*/
}


    .notification {
      position: fixed;
      bottom: 4px;

      width: max-content;
      
      border-radius: 6px;
      background-color: #313e2c;
      color: #aaec8a;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      tansform: translateY(30px);
      opacity: 0;
      visibility: hidden;
      
      z-index: 9999;
      
      right: 0px;
      left: 0px;
    
      margin-right: auto;
      margin-left: auto;
      
      }

      .notification.show-dbg {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .notification.show {
        animation: fade-in 3s linear;
      }

      .notification__icon {
        height: 26px;
        width: 26px;
        margin-right: 4px;
        position: relative;
        top: 13px;
      }
      
      .notification__body {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px 8px;
      }
      
      .notification__progress {
        position: absolute;
        left: 4px;
        bottom: 4px;
        width: calc(100% - 8px);
        height: 3px;
        transform: scaleX(0);
        transform-origin: left;
        background: linear-gradient(to right, #313e2c, #aaec8a);
        border-radius: inherit;
        
      }
      
      .notification__progress.animate {
        animation: progress 2.5s 0.3s linear;
      }
      
      
      @keyframes fade-in {
        5% {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);        
        }
        95% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      @keyframes progress {
        to {
          transform: scaleX(1);
        }
      }      
    }

/* FLEXBOX */
    @media screen and (max-width: 1050px) {
      .databox-flex-body.card {  
        width: 100%;
      }
    }
    .databox-flex-body-card {
      /*display: inline-flex;*/
      width: 290px;
      height: 266px;
      background: #313033;

      border-style: solid;
      border-width: 4px;
      border-color: #fff;
      border-radius: 20px;

      text-align: center;
      color: #fff;
      /*align-items: center;*/
      margin-bottom: 20px;
      margin-right: 20px;

      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 300;
      font-size: 14px;
      line-height: 150%;
 
    }

/*
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      font-size: 24px;
      line-height: 36px;
*/

    .databox-flex-body-card-bottom-link {
      position: relative;
      top: 36px;
      
      width: 100%;
      height: 66px;
      color: #000;
      background: #fff;
      text-decoration: none;
      
      font-family: 'Open Sans';
      font-size: 24px;
      font-weight: 700;
      line-height: 36px;
      letter-spacing: 0em;
      text-align: center;
    }

    .databox-flex-body-card-bottom {
      position: relative;
      left: -3.5px;      
      border-radius: 0 0 20px 20px;
      border-style: solid;
      border-width: 3.5px;
      border-color: #fff;
      
      width: 290px;
      height: 50px;/*66px;*/
      color: #000;
      background: #fff;
      text-decoration: none;
      
      padding-top: 11px;      
    }

    .databox-flex-body-card-text {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      
      font-family: 'Open Sans';
      font-size: 24px;
      font-weight: 600;
      line-height: 36px;
      letter-spacing: 0em;
      text-align: center;
      
      margin-top: 10px;

      color: #fff;
    }
    .databox-flex-body-card-icon {
      top: 10px;
      color: #fff;
    }


    .databox-flex-body-card a, .databox-flex-body-card a:visited {
      color: #000;
      font-weight: 700;
      text-decoration: none;
    }
    
    .databox-flex-body-card a:active, .databox-flex-body-card a:hover {
      color: #000;
    }

    .databox-flex-body-card.twoline {
      height: 266px;/*138px;*/
    }
    .databox-flex-body-card-icon {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      
      /*font-size: 90px;*/
      margin-top: 30px;
    }
   
    .databox-flex-body-card-clickable {
      position: relative;
      top: 21px;
      border-top: 1px solid #5c5c5c;
      padding-top: 7px;
      text-align: left;
      padding-left: 8px;
      
      background: #161616;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      height: 29px;    
    }

    .databox-flex-body-card-clickable-icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
   
    .databox-flex-body-card-text {
      top: 15px;
      left: unset;
      transform: unset;
    }
    @media screen and (max-width: 1525px) {
      /*dual row*/
      .databox-flex-body.card {  
        width: 70%;
        height: 720px;
      }
      .databox-flex {
        height: 820px;
      }      
    }
    @media screen and (max-width: 1050px) {
      /* single row */
      .databox-flex-body.card {  
        width: 100%;
        height: 520px;/*940px;*/
      }
      .databox-flex {
        height: 420px;
      }      

      .databox-flex-body-card {
        /*display: inline-flex;*/
        width: 200px;
        height: 245px; 
     }
    .databox-flex-body-card-bottom-link {
      font-size: 20px;  
    }
    .databox-flex-body-card-text {
      font-size: 16px;
    }
     .databox-flex-body-card-bottom {
       width: 200px;
     }            
      .databox-flex-body-card-icon {
        margin-top: 8px;
      }
    }

    @media screen and (max-width: 1015px) {
      /* dual row */
      .databox-flex-body.card {  
        width: 70%;
        height: 620px;/*940px;*/
        row-gap: 10px;
        column-gap: 1.5em;        
      }
      .databox-flex {
        height: 720px;
      }      
    }

    @media screen and (max-width: 850px) {
      .databox-flex-body.card {  
        width: 80%;
        height: 580px;/*940px;*/
        row-gap: 10px;
        column-gap: 1.75em;
      }
      .databox-flex.card {
        width: 100%;
        height: 700px;/*1140px;*/
      }
      .databox-flex-body.card .databox-flex-body-card:nth-child(even) {
        margin-right: 0px;
      }
    }

    @media screen and (max-width: 800px) {
      .databox-flex-body.card {  
        width: 100%;
      }
    }

    @media screen and (max-width: 650px) {
      .databox-flex-body.card {  
        width: 100%;
        height: 580px;/*940px;*/
      }
    }

.databox-flex.height500 {
  height: 500px;
}

/*input {
  font-size: 25px;
  transform-origin: top left;
  transform: scale(0.76);
}*/

/*#bday {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}*/

#bday:before {
/*    position: absolute;*/
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: white;
}

#bday::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

#bday::-webkit-calendar-picker-indicator {
    position: relative;
    width: 100%;
    left: 0px;
    right: 0px;
    padding-left: 5px;
    /*color: white;*/
    background: transparent;
    /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');*/
    text-align: right;
    /*background: white;*/
    opacity: 1;
}

/* <select> styles */
select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  /*font: inherit;*/
  /* Personalize */
  /*width: 20em;*/
  /*height: 3em;*/
  padding: 0 2.2em 0 0.5em;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg)
      no-repeat right 0.5em center / 1.0em,
    linear-gradient(to left, rgba(255, 255, 255, 0.3) 2em, rgba(255, 255, 255, 0.2) 2em);
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
select option {
  color: inherit;
  background-color: #320a28;
}

  /* Remove focus outline */
select option:focus {
    outline: none;
}
  /* Remove IE arrow */
select option::-ms-expand {
    display: none;
}