body{margin: 0; background: #1a1d1f; color:#fff;}
.menuPanel{width:250px; border-right:1px solid #2b2e33; height: 100%; overflow-y: auto; position: fixed;}
#SPAPage{width: calc(100% - 250px); height: 100%; position: fixed; overflow-y: auto; margin-left: 251px;}
#toast{width: 320px; display: flex; height:75px;align-items: center; position: fixed; z-index: 1000; padding: 15px; background:#383d45; border-radius: 7px; top:0; right:0; margin-top: 90px; margin-right: 20px; transition: transform 1.5s ease-out; }
#toast.slide-out { transform: translateX(120%);}
#toast.slide-in {transform: translateX(0%); opacity: 1;}
#toast .img{display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; width: 40px;}
#toast .body{width: calc(100% - 40px);}
#toast .title{text-transform: uppercase; font-weight: bold; font-size: 12px; color: #a3a4a4; margin-bottom: 5px;}
#toast .message{ font-size: 14px;}
.logo_name{font-size: 42px;}
.logo {font-size:20px; margin-right: auto; padding:3px 0;}
.logo div{display: inline-block;}
.logo img{height:20px; margin-top: 1px; float: left; margin-right: 5px;}
.submenu {width:100%;}
.submenu a {color:#fff; text-decoration: none; padding: 10px; float: left; width:100%;}
.submenu a:hover {background: #25282d;}
.submenu i {margin-right: 10px;}
.org{margin-top: 3px; float: left;}
.org .title{color: #7c8186; font-size: 13px;}
.divider{border-bottom: 1px solid #2b2e33;}
.headerBtn{height:30px; text-decoration: none; border-radius: 6px; padding: 5px 15px; background: #055ffa; color:#fff; min-width: 100px; float: right; text-align:center;}
.headerBtn svg{float: left; margin-left: 2px; margin-right: 5px;}
.form-descriptor{padding: 10px 0; margin-top: 20px; text-decoration: underline dotted; }
.form-title{color: #7c8186; font-size: 13px; margin-top: 10px;}
form input, form select{height: 40px; background: #000; color:#fff; width: 90%; outline: none; border:1px solid #7c8186; border-radius: 5px; padding: 10px; margin-top: 5px;}
.generator{width: 90%; margin-top:1px; border:none; background: #2d3136;height: 40px; color:#fff; cursor:pointer;}
.generator:hover{opacity: .8;}
.saveBtn{background: #055ffa; color:#fff; margin-top: 30px; border:none; width: 90%; border-radius: 5px; cursor:pointer; padding: 10px 0;}
.saveBtn:disabled{background: #2d3136; pointer-events: none; opacity: .3;}
.errResp{color:#f44336; font-size: 15px; margin-top: 5px; margin-left: 5px;}
#noPaybill{width:15px; position: absolute; border-radius: 0px; color:#fff; height: 15px; margin-top: 3px; cursor: pointer; outline: none; padding: 0; border:1px solid #7c8186; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
#noPaybill:checked::after {content: '✔'; position: absolute; top: -2px; left: 1px;font-size: 12px;color: white;}
#noPaybill + span{margin-left: 25px; cursor: pointer;}
.station-card{background: #586164; border-radius: 10px; width:90%; float: left; padding: 10px 20px;}
.cards_station{margin-top: 20px;}
.cpBox{padding:10px; border-right:1px solid #2b2e33;}
.tableBorder{width:calc(100% - 48px); float: left; border: 2px solid #2b2e33; border-radius:10px; margin:10px 24px; }
.lightBg{background: #292c2d;}
.topSearch{width: 90%; background: transparent; border-radius: 5px; margin-top: 4px; padding: 2px; text-indent: 10px; border:1px solid #6f7173; outline:none; color:#fff; height: 27px;}
#check01:checked~#stationsListFilter {display: block; }
#stationsListFilter{width: 250px; display:none; overflow-x: hidden; max-height: 320px; overflow-y: auto; position: absolute; background:#292c2d; margin-top: 40px; border:1px solid #858789; border-radius:10px;}
#stationsListFilter > div{border-bottom: 1px solid #4f545b;}
#stationsListFilter > div:hover{background: #111;}
.no-org-dash{margin-top: 20px; width: 100%; border:1px solid #fff; padding:24px;}
.no-org-dash a{float:right; text-decoration: none; color:#fff; font-weight:bold;}
.no-org-dash i{margin-left: 8px;}
.no-org-dash a:hover{text-decoration: underline;}
.help-submenu{width:200px; border-right:1px solid #2b2e33; float: left; height:calc(100vh - 78px);}
.help-submenu div{padding:10px 5px 10px 15px ; cursor: pointer; float: left; width:100%;}
.help-submenu div i{ float: right; font-size: 14px; padding:3px 0; display: none;}
.help-submenu div.active{background:#586164; }
.help-submenu div.active i{display: inline-block; }
.help-submenu div:hover{background: #586164;}
#help_main{width:calc(100% - 200px); float:left; height:calc(100vh - 78px); overflow-y: auto;}
#help_main img{float:left; max-width:90%;}
.mts{background:gray; border-radius:5px; padding:2px 3px;}
.hamburger{display: none;}
#hamburgerCheck:checked ~.menuPanel{display: block;}
.mshow{display: none;}
.rd1{height: 14px; width:14px; margin:0;}

.checkmark {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: block;
      stroke-width: 2;
      stroke: #4CAF50;
      stroke-miterlimit: 10;
      box-shadow: inset 0px 0px 0px #4CAF50;
      animation: fill .4s ease-in-out 1.4s forwards, scale .3s ease-in-out 1.9s both;
      position: relative;
      margin: 50px auto;
    }

    .checkmark__circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #4CAF50;
      fill: none;
      animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
      animation-delay: 1s
    }

    .checkmark__check {
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .6s forwards;
      animation-delay: 1.6s
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes scale {
      0%, 100% {
        transform: none;
      }

      50% {
        transform: scale3d(1.1, 1.1, 1);
      }
    }

    @keyframes fill {
      100% {
        box-shadow: inset 0px 0px 0px 30px #4CAF50;
      }
    }

.tooltip-text {
      position: absolute;
      /*bottom: 125%;*/
      left: 60%;
      /*transform: translateX(-50%);*/
      background: #000;
      color: #fff;
      padding: 6px 10px;
      border-radius: 5px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }

    .tooltip-trigger:focus + .tooltip-text {
      opacity: 1;
      visibility: visible;
      animation: hideTooltip 1s forwards;
    }

    @keyframes hideTooltip {
      0% {
        opacity: 1;
        visibility: visible;
      }
      99% {
        opacity: 1;
        visibility: visible;
      }
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }


* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5);
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

@media(max-width:768px){
  .topbar .hamburger{display: block;}
  .hamburger{display: block; position: absolute; margin-left: 20px; cursor: pointer; z-index: 5; margin-top: 30px;}
  .menuPanel{z-index: 4; background: #000; display: none; width:300px;}
  #SPAPage{width: 100%; margin: 0; position: relative;}
  .router > .divider:first-of-type > div{ margin-left: 40px; }
  .logo{margin-left: 20px;}
  .orgHome .b3{width: 50%; float: left;}
  .cards_station > .b3{width:calc(100% / 3);}
  .nCForm .basic .b4{width:100%;}
  .nCForm .billing .b3{width:50%;}
  .nCForm .stsp .b3{width:calc(100% / 3);}
  .tableBorder, .cpBox, .mf14{font-size: 13.5px;}
  .tableBorder{width:calc(100% - 8px); margin:5px 4px;}
  .mb6{width:50%;}
  .mb4{width:calc(100% / 3);}
  #addOrgForm .b4{width:100%;}
  #nStationsForm .b6{width:100%;}
  #nStationsForm .pz-pd-10{padding:0px;}
  .nformModal{padding: 10px;}
  .stationsTable{width:calc(100% - 20px); margin-left: 10px; float: left; margin-top: 10px; overflow-x: auto;}
  .stationsTable .tableBorder{min-width: 800px; padding:0;}
  .cProfile{width: 100%;}
  .cProfile > .b6{width: 100%;}
  .mhide{display: none;}
  .mshow{display: block;}
  #help_main{width: 100%; padding:5px 10px;}
  #checkh1:checked~#menuList {display: block; }
  #menuList {width: 200px; display:none; overflow-x: hidden; right:0; position: absolute; background:#292c2d; margin-top: 50px; border:1px solid #858789; border-radius:3px;}
  .menuItem {border-bottom: 1px solid #4f545b; padding: 8px; cursor: pointer;}
  .dash-cards .b3{width: 100%; margin-top: 20px;}
  .dash-cards .station-card{width: 100%;}
}