.st { color: white; }
.topTxt { font-size: 25px; }
.topSubTxt { font-size: 20px; }
.topSubTypeTxt { font-size: 15px !important; }
.verticalCenter{vertical-align: middle; }
.types { height: 10px !important; 
margin-top: 90px !important ;
width: 100%;
font-size: 15px;
}
.view {
  font-size: 10px;
}
.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  display: block;
  position: fixed;
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* half of the elements height */
  margin-right: -..px; /* half of the elements widht */
}

.spinner {
  color: #A9A9A9 !important;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}


.ss-dashboard, .bg-dark { background: #4d2e99 !important; font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 400; color: #5f5f5f }
.ss-dashboard h1, .ss-dashboard h2, .ss-dashboard h3, .ss-dashboard h4, .ss-dashboard h5, .ss-dashboard h6, .ss-dashboard .form-control { font-weight: 400; }
.ss-dashboard .whitebg { background: #FFF; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2); }
.ss-dashboard .main-content { margin-top: 60px; padding: 0px; }
.ss-dashboard .main-content .container-fluid { padding: 0px 30px;/* border-bottom: 1px solid #ececec;*/ }
.ss-dashboard .main-content .container-fluid.footer { padding: 15px 15px; font-size: 14px; background: #FFF; }
.ss-dashboard .navbar { padding-left: 0px; padding-right: 0px; background: #26174c !important }
.ss-dashboard .navbar .whitebg { padding-top: 10px; padding-bottom: 10px; }
.ss-dashboard .navbar .nav-link { font-size: 14px; font-weight: 400; }
.ss-dashboard .navbar .btn-success, .ss-dashboard .navbar .btn-success:hover { color: #FFF; padding-left: 15px; padding-right: 15px; }
.ss-dashboard .btn-info { background: #b93cc7; border-color: #b93cc7; }
.ss-dashboard .card { box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2); margin-bottom: 20px; }
.brand { max-height: 30px; }
.inline-radio { margin-top: 40px; }
.multi-in-one { margin-bottom: 15px; }
.ss-dashboard label { font-weight: 400; }
.ss-dashboard .gj-timepicker .btn-outline-secondary { border: 1px solid #ced4da; }
.ss-dashboard .gj-picker.timepicker [role=header] div { width: 76px; }
.sm-up { display: block }
.sm-down { display: none }
.gj-datepicker button { background: #FFF; }
.gj-datepicker button:hover { background: #cecece !important; }
.ss-dashboard .left-shadower { background: url(http://creativeforcedesign.com/shadower.png) 0 0 no-repeat; background-size: 15px 100%; padding-left: 30px }
.ss-dashboard .topnav-options { color: #FFF; margin-right: 20px; line-height: 1; }
.ss-dashboard .text-light {color: #f8f9fa!important;}

.ss-dashboard .kpi-half .dash-kpi {min-height: 18.5vh;margin-bottom: 2vh !important;}
.ss-dashboard .grid-half .dash-kpi {height: 80vh !important; overflow:auto;}
.ss-dashboard .grid-half .table td, .ss-dashboard .grid-half .table th {border-top: 1px solid rgba(255,255,255,0.3); text-shadow: 0 1px 6px #000000;}
.ss-dashboard .grid-legend .table td {border: 1px solid rgba(255,255,255,0.3); text-shadow: 0 1px 6px #000000; font-size: 0.8rem;}
.ss-dashboard .grid-half .table td .kpi-badge-green {background:rgba(72,235,154,1); color: rgba(0,0,0,0.7); border-radius: 20px; padding: 3px 10px; margin-top: 3px; font-size: 75%; width:fit-content !important; font-weight:700 !important; text-transform:uppercase; text-shadow: none !important;}
.ss-dashboard .dash-kpi .left-val {border-right: 2px dashed rgba(255,255,255,0.5); padding-right: 10px;}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: rgba(255,255,255,0.2); margin:20px 0px;border-radius:5px;} 
::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.2); border-radius:10px;}
::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,0.5); }
 @media (max-width:500px) {
.ss-dashboard .navbar .whitebg { padding-left: 10px; padding-right: 10px; }
.inline-radio { margin-top: 0px; }
.sm-up { display: none }
.sm-down { display: block }
.ss-dashboard .left-shadower { background: transparent; padding-left: 15px; }
}
/*SPECIFICS*/
.ss-dashboard .dash-kpi { background: rgba(0,0,0,0.5) !important; border-radius: 15px; padding: 10px 20px;}
.ss-dashboard .dash-kpi.grid-legend { padding: 10px;}
.ss-dashboard .dash-kpi > h2 sup { font-size: 45% !important; }
.ss-dashboard .dash-kpi h2 { font-size: 60px; margin-top: 30px; }
.ss-dashboard .dash-kpi h2 small { font-size: 25px; display: block; text-transform: uppercase; margin-top: -10px; }
.ss-dashboard .dash-kpi .time-left h2 { font-size: 45px !important; margin-top: 40px; }
.ss-dashboard .dash-kpi .time-left h2 sup { font-size: 20px !important; }
.ss-dashboard .dash-kpi .kpi-label { font-size: 20px; text-align: left; text-transform: uppercase; font-weight: 700;border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 5px;}
.ss-dashboard .close-btn {margin-left: 2vh; margin-right: 1vh;}
.ss-dashboard .grid-half .table td, .ss-dashboard .grid-half .table th {font-size:20px !important;}
.ss-dashboard .grid-half .table th {border-top: 0px !important;}
.tr-green {background:rgba(72,235,154,0.7);}
.tr-red {background:rgba(249,102,121,0.7);}
.tr-orange {background:rgba(250,205,138,0.7);}
.tr-yellow {background:rgba(255,250,158,0.7);}
.txt-green {color: #48eb9a !important;}
.txt-red {color: #f96679 !important;}
.txt-orange {color: #f4b757 !important;}
.txt-yellow {color: #fffa9e !important;}

@media (max-width:1081px) {
.ss-dashboard .kpi-half, .ss-dashboard .grid-half { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important }
.types { height: 15px !important; 
    margin-top: 140px !important ;
    width: 100%;
    font-size: 22px;
    }
.view {
  font-size: 15px;
}

}

@media (min-width:2500px) { 
.ss-dashboard .container-fluid.dashboard-bg {padding-top: 60px !important;}
.ss-dashboard .navbar {padding: .7rem 1rem !important;}
.ss-dashboard .navbar-brand {font-size: 2rem !important;margin-right: 2rem !important;}
.ss-dashboard .topnav-options {margin-right: 40px !important;font-size: 1.6rem !important;}
.ss-dashboard .fa-2x {font-size: 3em !important;}
.ss-dashboard .dash-kpi .kpi-label {font-size: 28px !important;}
.ss-dashboard .dash-kpi h2 {font-size: 80px !important;}
.ss-dashboard .dash-kpi h2 sup {font-size: 40px !important;}
.ss-dashboard .dash-kpi .time-left h2 {font-size: 65px !important;}
.ss-dashboard .dash-kpi .time-left h2 sup {font-size: 30px !important;}
.ss-dashboard .grid-half .table td, .ss-dashboard .grid-half .table th {font-size: 2rem !important;}
.ss-dashboard .dash-kpi .left-val {padding-right: 20px;}
.ss-dashboard .grid-legend .table td {font-size: 1.2rem;}
.topTxt { font-size: 45px !important; }
.topSubTxt { font-size: 40px !important; }
.topSubTypeTxt { font-size: 30px !important; }
.types { height: 40px !important; 
 margin-top: 180px !important ;
width: 100%;
font-size: 30px;
}
.view {
  font-size: 20px;
}

}

@media (min-width:3800px) { 
.ss-dashboard .container-fluid.dashboard-bg {padding-top: 110px !important;}
.ss-dashboard .navbar {padding: 1.4rem 2rem !important;}
.ss-dashboard .navbar-brand {font-size: 3rem !important;margin-right: 3rem !important;}
.ss-dashboard .topnav-options {margin-right: 60px !important;font-size: 2.5rem !important;}
.ss-dashboard .fa-2x {font-size: 4em !important;}
.ss-dashboard .dash-kpi {padding:10px 40px !important;}
.ss-dashboard .dash-kpi .kpi-label {font-size: 45px !important;padding-bottom: 10px !important; border-bottom:2px solid rgba(255,255,255,0.5) !important;}
.ss-dashboard .dash-kpi h2 {font-size: 120px !important;margin-top: 90px !important;}
.ss-dashboard .dash-kpi h2 sup {font-size: 60px !important;}
.ss-dashboard .dash-kpi .time-left h2 {font-size: 105px !important;margin-top: 90px !important;}
.ss-dashboard .dash-kpi .time-left h2 sup {font-size: 50px !important;}
.ss-dashboard .grid-half .table td, .ss-dashboard .grid-half .table th {font-size:3rem !important; border-top: 2px solid rgba(255,255,255,0.5) !important;}
.ss-dashboard .grid-legend .table td {font-size: 1.8rem;}
.topTxt { font-size: 65px !important; }
.topSubTxt { font-size: 60px !important; }
.topSubTypeTxt { font-size: 45px !important; }
.types { height: 80px !important; 
 margin-top: 160px !important ;
width: 100%;
font-size: 45px;
}
.view {
  font-size: 25px;
}

}