@font-face {font-family: Rockwell; src: url(../fonts/rockb.ttf);}
::selection{background-color: #ffff66;color: #26292b;}
::placeholder{color: #ffff66; opacity: 1;}
:-ms-input-placeholder{color: #ffff66;}
::-ms-input-placeholder{color: #ffff66;}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background: #26292b;} 
::-webkit-scrollbar-thumb{background: #2d3033;}
::-webkit-scrollbar-thumb:hover{background: #2d3033;}
body {background-color: #26292b;color: #ffff66;}
.sunset,.sunrise{    
    position: fixed;
    left: 0;
    right: 0;
    min-width: 100vw;
    width: auto;
    min-height: 100vh;
}
.tog-container{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center;
}
.tog-container:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.clockArc, .clockHour, .clockMinute, .clockWhiteSpace, .clockSecond{font: 0/0 a;}
.tog-container img, .tog-container .clockTimeView, .tog-container .clockSecondView{
    vertical-align: middle;
    display: inline-block;
    z-index: 99;
}
.clockSecondView{
    z-index: 999;
    font-family: Rockwell;
    color: #000;
    font-size: 0.9vw !important;
    position: relative;
}
.clockSecondView1{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10.35vw;
    width: 12px;
    height: 6px;
    background: #f00;
    margin-left: 2px;
    border-radius: 5px;
}
.tog-container img {width: 88%;}
.tog-container .clockTimeView{
	font-family: Rockwell;
    color: #000;
    font-size: 0.9vw !important;
    margin-top: 8vh;
    margin-left: -5px;
}
.timeText2a{font-size:1vw;}
.timeText2a{position: relative;}
.timeText2a div p span{font-size:3.1vw;color:#ff6;}
.timeText2a div p sup{color:#ff6;top:-8px;font-size: 1.2vw;}
.timeText2a div {
    width: 15vw;
    border: 1px solid #000;
    font-size: 1.2vw;
    background-color: #000;
    padding: 0.2rem 0.1rem;
}
.timeText2a div p{
    margin-bottom: 0px;
    padding: 0px;
}
.timeText2a div p:nth-child(2){
    font-size: 1.7vw;
	letter-spacing:2px;
	color: #ff6;
}
.timeText2a div:nth-child(2){
    position: relative;
}
.timeText2a .am_pm{
    position: absolute;
    left: 105%;
    top: 25px;
    font-size: 14px;
    color: #000;
}
.timeText3 span{  
    color: #f00;
    font-size: 10px;
}
.timeText6i:nth-child(1) span{
    font-size: 10px;
    padding: 0.1rem 0.5rem;
    margin-top: -16px;
    background: #ff6;
}
.timeText6i:nth-child(2) span{
    font-size: 10px;
    background: #ff6;
    letter-spacing: 2px;
    padding: 0.2rem 0.2rem;
}
.timeText6i:nth-child(3) span {
    padding: 1px 2px;   
    margin: 0px 1px;
    border: 1px solid;
    background: #ff6;
    border-radius: 4px;
    font-size: 5px;
    text-transform: uppercase;
}
.workweek span{
    color: #000;
}
.weekend span{
    color: #f00;
}
.weekend{
    margin-left: 10px;
    position: relative;
}
.timeText6i:nth-child(3) .workweek span.current{
    background: #000;
    color: #ff6;
    border-color: #000;
}
.timeText6i:nth-child(3) .weekend span.current{
    background: #f00;
    color: #ff6;
    border-color: #f00;
}
    .dayzone-format .workweek span{ font-size:2px !important;    padding: 1px;}
    .dayzone-format .weekend span{ font-size:2px !important;    padding: 1px;}
.blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
.modal.fade.zoneControlsModal:not(.show) .modal-dialog ,.modal.fade.clockControlsModal:not(.show) .modal-dialog {
    transform: translate3d(0,25%,0);
}
.zoneControlsModal.modal ,.clockControlsModal.modal {
    overflow: hidden !important;
}
.zoneControlsModal .zone-dialog, .clockControlsModal .zone-dialog{
    position: absolute;
    display: flex;
    margin: 0;
    max-width: 400px;
    bottom: 0;
    right: 0;
}
.zoneControlsModal .real-time-dialog{
    position: absolute;
    display: flex;
    margin: 0;
    max-width: 100%;
    bottom: 0;
    right: 0;
    left:0;
}
.clockControlsModal .modal-dialog{
    position: absolute;
    display: flex;
    margin: 0;
    max-width: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
}
.modal.zoneControlsModal.fade .modal-dialog,.clockControlsModal.fade .modal-dialog  {
    transform: translate3d(0,100%,0);
}
.modal.zoneControlsModal.show .modal-dialog,.clockControlsModal.show .modal-dialog{
    transform: translate(0,0);
}
.h-90{
    height: 90%;
}
.ctrl-close{
    position: absolute;
    top: -35px;
    right: -4px;
}
.ctrl-clockControls.fixed-bottom{
    right: auto;
    z-index: 9999;
}
.ctrl-zoneControls.fixed-bottom{
    left: auto;
    z-index: 9999;
}
.ctrl-open, .ctrl-close{
    border-radius: 0;
    border-width: 2px;
    /*background-color: #ffffff61;*/
    color: #f00;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 2px 10px 0 rgba(0,0,0,.12);
}
.mw-150 img{
    max-width: 150px;
}
.tooltip-inner {
    color: #000;
    background-color: #ef0;
}
.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
    border-right-color: #ef0;
}
.bs-tooltip-auto[x-placement^=right], .bs-tooltip-right {
    margin-left: 10px;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    border-left-color: #ef0;
}
.bs-tooltip-auto[x-placement^=left], .bs-tooltip-left {
    margin-right: 10px;
}
.radio-step-2, .dayzone{
    background: #f5f5f5;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    border: 5px solid #f5f5f5;
    color: #000;
}
.dayzone .form-control {
    color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0;
}
.input-group-text {
    background-color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0;
}
.dayzone-val:hover{
    color: #fff;
    background: #343a40;
}
.radio-step-2>span{
    position: absolute;
    padding-left: 5px;
    color: #f00;
    font-weight: 600;
}
.radio-step-2 .btn-group>.btn, .radio-step-3 .btn-group>.btn{
    -ms-flex: 1;
    flex: 1;
    border-radius: 0;
    border-width: 2px;
}
.clockControlsModal .modal-content {
    border-radius: 0;
    border: none;
    background-color: transparent;
}
.zoneControlsModal .modal-content, .clockControlsModal .real-time-dialog .modal-content, .clockControlsModal .zone-dialog .modal-content{
    border-radius: 0;
    border: 4px solid #ffffff;    
    background-color: #fff;
}
.real-time-column, .zone-column{
    border: 4px solid #ffffff;    
    background-color: #fff;
}
.real-time-column .form-control,.zone-column  .form-control{
    color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0 !important;
}
.real-time-column .input-group-text, .zone-column  .input-group-text{
    background-color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0 !important;
}
.zoneControlsModal .real-time-dialog .modal-content, .clockControlsModal .real-time-dialog .modal-content, .clockControlsModal .zone-dialog .modal-content{
    width: auto;
}
.zoneControlsModal .modal-content .modal-title, .clockControlsModal .real-time-dialog .modal-content .modal-title, .clockControlsModal .zone-dialog .modal-content .modal-title{
    font-size: 12px;
}
.zoneControlsModal .form-control, .clockControlsModal .real-time-dialog .form-control, .clockControlsModal .zone-dialog .form-control {
    color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0 !important;
}
.zoneControlsModal .input-group-text, .clockControlsModal .real-time-dialog .input-group-text, .clockControlsModal .zone-dialog .input-group-text  {
    background-color: #343a40;
    border: 2px solid #343a40;
    border-radius: 0 !important;
}
.fn-clockContols.btn-check.active,.real-time-column .active .input-group-text, .zone-column .active .input-group-text, .zoneControlsModal .active .input-group-text, .clockControlsModal .active .input-group-text{
    background-color: #ff7f7f;
    border-color: #ff7f7f;
}
.zoneControlsModal .active .form-control, .clockControlsModal .active .form-control,.zone-column .active .form-control {
    color: #ff7f7f;
    border-color: #ff7f7f;
}
.realtime-expamle{
    font-size: 13px;
}
.border-dashed{
    border-top: 1px dashed;
}
.RealTime-R, .RealTime-S{
    display: none;
}
.clockType-S .RealTime-S{
    display: block;
}
.clockType-R .RealTime-R{
    display: block;
}
/*********************
    Contro Panel
**********************/
.controlPanelBtn{
    z-index: 10;
    position: fixed;
    right: 0.5vw;
    background: #333;
    border-radius: 0;
    color: #ef0;
    padding: 0.5em 1em;
}
.modal-lg{
    width: 90vw;
    max-width: 100vw;
}
.modal-open .cpModal{
   font-weight: 300;
   z-index: 999999;
   overflow-y: hidden;
}
.cpModal .modal-lg{
   width: 100vw;
   max-width: 100vw;
   margin: 0px auto;
}
.cpModal-content{
   border-radius: 0;
   box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}
.cpModal-content .modal-header{
   border-bottom: 1px solid #ffff66;
   background: #ffff66;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   border-radius: 0;
   color: #333333;
   position: fixed;
   top: 0;
   width: 100vw;
}
.cpModal-content .modal-header .close{
   background: #a5ab55;
   color: #fff;
   padding: 22px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   margin-top: -15px;
   opacity: 0.8;
}
.cpModal-content .modal-body{
   margin-top: 10vh;   
   max-height: 90vh;
   overflow-y: auto;
   color: #363636;
   font-size: 14px;
}
.ctrl-table thead td, .ctrl-table thead th {
   background: #333333;
   color: #dee2e6;
   border-color: #333333;
}
.cpModal label{
   font-weight: 500;
}
.cpModal .input-group-text {
   color: #495057;
   background-color: #e9ecef;
   border: 1px solid #333;
}
.custom-file-label {
    color: #495057;
    background-color: #fff;
    border: 1px solid #333;
}
.cpModal .custom-file-label::after {
   color: #495057;
   background-color: #e9ecef;
   border-left: 1px solid #333;
}
.cpModal .page-item.active .page-link {
   color: #fff;
   background-color: #333;
   border-color: #333;
}
.cpModal .page-link {
   color: #333;
}
.cpModal form .btn {
   float: right;
   padding-left: 30px;
   padding-right: 30px;
}
.cpDark .modal-content {
   background-color: #333333;
}
.cpDark .ctrl-table thead td, .cpDark .ctrl-table thead th {
   background: #ffff66;
   color: #333333;
}
.cpDark .ctrl-table thead th {
   vertical-align: bottom;
   border-bottom: 2px solid #ffff66;
}
.cpDark  .ctrl-table td, .cpDark .ctrl-table  th {
   border: 1px solid #ffff66;
}
.cpDark .cpModal .form-control{ 
   background-color: #333333;
   color: #ffff66;
}
.ctrl-table tr td:nth-child(1){width: 6%;text-align: center;}
.ctrl-table tr td:nth-child(2){width:20%;}
.ctrl-table tr td:nth-child(3){width:74%;}
.view_events_tbl tr td:nth-child(3){width:40%;}
.ctrl-table thead tr th:nth-child(3),.ctrl-tbody tr td:nth-child(3){
   text-align: center;
}
.ctrl-table tr:hover{}
.cpModel thead{background: #ddd;}
.view_stat_tbl tr td:nth-child(4){width:12%;}
.cpModel thead th{font-weight: 500;}
.cpModel label{font-weight: 300;}
.btn-control{
   border-radius: 0;
   padding: 6px 8px;
   font-size: 12px;
}
.cpModal .badge{
   -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
   -webkit-border-radius: .125rem;
   border-radius: .125rem;
   color: #dee2e6!important;
   width: 25px;
   background: #333333;
   padding: 5px 0 3px;
}
.cpModal .btn-info     {color: #4285f4;background-color: transparent;border-color: #4285f4 !important;}
.cpModal .btn-warning  {color: #ff941a;background-color: transparent;border-color: #ff941a;}
.cpModal .btn-danger   {color: #dc3545;background-color: transparent; border-color: #dc3545;}
.cpModal .btn-success  {color: #00c851;background-color: transparent;border-color: #00c851;}
.cpModal .btn-primary  {color: #b579d2;background-color: transparent;border-color: #b579d2;}
.cpModal .btn-default  {color: #333333;background-color: transparent; border-color: #333;}
.cpModal .btn-info:hover    {color: #ffffff;background-color: #4285f4 !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .btn-primary:hover {color: #ffffff;background-color: #b579d2 !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .btn-success:hover {color: #ffffff;background-color: #00c851 !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .btn-warning:hover {color: #ffffff;background-color: #ff941a !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .btn-danger:hover  {color: #ffffff;background-color: #dc3545 !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .btn-default:hover {color: #ffffff;background-color: #333333 !important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);}
.cpModal .form-control{ 
   border-radius: 0;
   border: 1px solid #333;
   box-shadow: none;
}
.cpModal .btn-info    i {color: #4285f4;}
.cpModal .btn-warning i {color: #ff941a;}
.cpModal .btn-danger  i {color: #dc3545;}
.cpModal .btn-success i {color: #00c851;}
.cpModal .btn-primary i {color: #b579d2;}
.cpModal .btn-default i {color: #333333;}
.cpModal .btn-info:hover    i {color: #ffffff;}
.cpModal .btn-primary:hover i {color: #ffffff;}
.cpModal .btn-success:hover i {color: #ffffff;}
.cpModal .btn-warning:hover i {color: #ffffff;}
.cpModal .btn-danger:hover  i {color: #ffffff;}
.cpModal .btn-default:hover i {color: #ffffff;}

/*button 8-13-19*/
.button-main{
    position: absolute;
    top: 1vh;
    right: 2vw;
    z-index: 2;
    width: 100px;
    text-align: center;
    cursor: pointer;
}
.myIntroVdo .modal-content{
    border-radius:0;
    background-color: transparent; 
    border: 0px solid rgba(0,0,0,.2);
}
.myIntroVdo .modal-body{
    padding: 3px;
}
.myIntroVdo .close{
    position: absolute;
    right: -54px;
    color: #000;
    background: #fff;
    padding: 20px;
    opacity: 1;
    top: 3px;
}
.myIntroVdo video{
    padding: 3px;
    width: 100%;
    height: auto;
}
.myIntroVdo .modal-dialog {
    width: 80vw;
    max-width: 80vw;
}
.tab-content{
    color: #000;
}
#v-pills-tab, #v-pills-tabContent{
    height: 85vh;
    overflow: auto;
}
#takeATourModal .close{
    position: absolute;
    right: -54px;
    color: #000;
    background: #fff;
    padding: 20px;
    opacity: 1;
    top: 0px;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
}
.nav-pills{
    padding: 9px;
}
.nav-pills .nav-link{
    color: #333;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
    background-color: #ccc;
    margin-bottom: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color: #333;
    background-color: #ff6;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.footer .btn{
    font-weight: 700;
    border-width: 2px;
    border-radius: 50px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}
.footer .btn-group-sm>.btn, .btn-sm {
    padding: .2rem .5rem;
}
#note {
    position: absolute;
    bottom: 0px;
    width: 100%;
  /* //height: 100%; */
/* // border: 1px solid #fff; */
    /* //overflow: hidden; */
    font-size:20px;
    color:#fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.welcome-text{
    z-index: 100;
    background-color: #00000063;
}
.welcome-side-sticky-tab {
    top: 3vh;
    left: 50px;
    z-index: 9;
}
.welcome-side-sticky-tab div {
    margin: 0px;
    padding: 0px;
}
.welcome-side-sticky-tab .sticky-container {
    border-radius: 0px 0px 6px 6px;
    left: -350px;
    position: fixed;
    width: 350px;
    -webkit-transition-property: left; /* Safari */
    -webkit-transition-duration: 1s; /* Safari */
    transition-property: left;
    transition-duration: 1s;
    cursor: pointer;
}
.welcome-side-sticky-tab .sticky-container:hover {
    left: -10px;
}
.welcome-side-sticky-tab .gfg-callout {
    position: relative;
    display: block;
    border-radius: 0px 0px 6px 6px;
}
.welcome-side-sticky-tab .slideout {
    position: relative;
    vertical-align: middle;
    height: 190px;
    display: block;
    background-color: #000;
}
.welcome-side-sticky-tab .slideout .inner .inner-item {
    padding: 10px 0px 12px 20px;
    font-size: 12px;
}
.welcome-side-sticky-tab .gfg-callout .slide-out-btn {
    color: white;
    background-color: #000;
    height: auto;
    width: 190px;
    margin: 0;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    right: -122px;
    transform: rotate(270deg);
    top: -122px;
    border: 0;
    cursor: pointer;
    outline:0;
}