body { padding: 0px; margin: 0px; }

inlblk { display: inline-block; }

vst { display: inline; font-size: 10px; } /* Very small text tag */

* { box-sizing: border-box; }
a { text-decoration: none; }
a:visited { text-decoration: none; }
h1, h2 { margin: 0px; padding: 0px;}
a.boldLink { font-weight: bold; }
a.boldBigLink { font-weight: bold; font-size: larger; }

#scrollToGoToTopBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; color: white; cursor: pointer; }
#scrollToGoToTopBtn:hover { }

input[type=checkbox] { transform: scale(1.5); -webkit-transform: scale(1.5);  -moz-transform: scale(1.5); vertical-align: middle; }

/* Layout Responsive */
.row::after { content: ""; clear: both; display: block; }
[class*="col-"] { width: 100%; float: none; padding: 12px; }

/* Desktop cols layout */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
    [class*="col-"] { float: left; }
}

/* Tooltips */
.divTooltip { position: absolute; max-width: 250px; z-index: 999; overflow: hidden; border: 1px solid Black; background-color: #fbfbfb; padding: 5px; text-align: left; left: 0px; top: 0px; z-index: 999; display: none;  }
.divTooltipContent { font-size: 14px; max-height: 150px; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; }
.divTooltip a { font-size: 12px; }


/* VisioSoft SchoolTray Slideshow (vssts) styles - Begin */
.vssts { position: relative; overflow: hidden;  }
.vssts img { width: 100%; height: 100%; display: block; }
.vsstsImgCur { position: relative; top: 0px; left: 0px; z-index: 8; }
.vsstsImgNext { position: absolute; top: 0px; left: 0px; z-index: 7; }
.vsstsInfo { position: absolute; bottom: 0%; width: auto; max-width: 60%; height: auto; max-height: 90%; margin-left: 2%; margin-bottom: 0%; overflow: hidden; z-index: 9; opacity: 0;}
.vsstsInfo div { border-radius: 6px; padding: 5px; }
.vsstsInfoShow { opacity: 1; margin-bottom: 2%; transition: 1s margin-bottom, 0.6s opacity; -webkit-transition: 1s margin-bottom, 0.6s opacity; }  
                       
.vsstsImgFrame { max-width: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; }
.vsstsSlides { display: none; }

.vsstsInfo .bkg, .vsstsInfo .blackBkg, .vsstsInfo .whiteBkg { padding: 5px; }
.vsstsInfo a { display: inline-block; margin: 6px 3px 6px 0px; padding: 5px; border-radius: 6px; border-width: 1px; border-style: solid; }
.vsstsInfo .blackBkg { background: rgba(0,0,0,0.5); color: White; }
.vsstsInfo .blackBkg a { color: White; background-color: #3b9ad0; border-color: #999; box-shadow: 5px 5px 10px #333333; } .vsstsInfo .blackBkg a:hover { color: Red; }
.vsstsInfo .whiteBkg { background: rgba(255,255,255,0.7); color: Black; }
.vsstsInfo .whiteBkg a { color: White; background-color: #3b9ad0; border-color: #999; box-shadow: 5px 5px 10px #555; } .vsstsInfo .whiteBkg a:hover { color: Red; }
        
.vsstsNextBtn, .vsstsPrevBtn { color: Gray; position: absolute; background: transparent; top: 50%; font-size: 2em; margin-top: -.75em; opacity: 0.6; user-select: none; z-index: 11; }
.vsstsNextBtn:hover, .vsstsPrevBtn:hover { cursor: pointer; opacity: 0.5; color: Red;  }
.vsstsNextBtn { right: 6px;  }
.vsstsPrevBtn { left: 6px; }      
@media only screen and (min-width: 1024px) { .vsstsInfo { font-size: 1em; } }
@media only screen and (max-width: 768px) { .vsstsInfo { font-size: 0.8em; } }
/* VisioSoft SchoolTray Slideshow (vssts) styles - End */


/* Live clock - Begin */
 .clock { border-radius: 50%; background: #fff url('/Images/ios_clock.svg') no-repeat center; background-size: 90%; height: 84%; position: relative; width: 84%; margin: 8% auto 8% auto; }
 .clock:after { background: #000; border-radius: 50%; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7%; height: 7%; z-index: 10; }
 .minutesContainer, .hoursContainer, .secondsContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
 .hours { background: #000; height: 20%; left: 48.75%; position: absolute; top: 30%; transform-origin: 50% 100%; width: 2.5%; }
 .minutes { background: #000; height: 40%; left: 50%; position: absolute; top: 10%; transform-origin: 50% 100%; width: 2%; }
 .seconds { background: red; height: 40%; left: 49.5%; position: absolute; top: 10%; transform-origin: 50% 100%; width: 1%; z-index: 8; }
 @keyframes rotate { 100% { transform: rotateZ(360deg); } }
 .hoursContainer { animation: rotate 43200s infinite linear; }
 .minutesContainer { animation: rotate 3600s infinite steps(60); }
 .secondsContainer { animation: rotate 60s infinite steps(60); }
/* Live clock - End */





.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    width: 100%;
}

.autocomplete-items {
    display: none;  height: auto; max-height: 300px; overflow-y: scroll; font-size: 12px;
    position: absolute;  border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0;  right: 0;
   
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}


/* Time picker styles */
.timePickerVs { width: 160px; padding: 8px; position: absolute; display: none; background-color: White; border: 1px solid Gray; }
.timePickerVs a.hrMin { color: Gray; display: inline-block; padding: 3px 6px 3px 0px; border: 1px solid Transparent; } .timePickerVs a.hrMin:hover { background-color: #edf9ff; border: 1px solid #daf2fc; }
.timePickerVs a.lbtn { color: #0399cd; font-weight: bold; } a.lbtn:hover { color: Red; } 
.timePickerVs .hLit { color: #0399cd; }