﻿/* Common header settings (styles and includes) for every page */

html.waiting {cursor: wait;}
h1 {display:inline;}
h2 {display:inline;}
h3 {display:inline;}

.parent {position:relative;}
.wrap {position:relative; margin:0 auto; width:100%;}
#header {position:fixed; width:100%; float:left; text-align:left; padding:0px 0; z-index:10; clear:both; height:100px; top:0px; left:0;}
#footer {position:fixed; width:100%; float:center; padding:0px 0; text-align:center; bottom:0; z-index:10; clear:both; margin:0;}

/* Gray out background overlay */
#overlay {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5);
  display:none; align-items:center; justify-content:center; z-index:1000;}

.bodyContentClass{width:100%;}

/*Table classes--------------------------------------------------------------------------------------------------*/
/*Bootstrap table classes: table table-condensed table-hover table-striped (alternating gray/white rows), table-bordered (lghter version of tableStd below)  */

table {text-align:left;}
th {padding:3px; vertical-align:top;}
td {padding:3px; vertical-align:top;}

.tablesoft1 {border:1px solid #B5B5B5; border-collapse:collapse;}
.tablesoft1 th, .tablesoft1 tr {padding:1px; vertical-align:top; border:1px solid #B5B5B5;}
.tablesoft1 td {padding:1px; vertical-align:top; border:1px solid #B5B5B5;}

.tableStd {width:100%; text-align:left; border:1px solid black; border-collapse:collapse;}
.tableStd th, .tableStd tr {padding:3px; vertical-align:top; border:1px solid black;}
.tableStd td {padding:3px; vertical-align:top; border:1px solid black;}

.tableStd2 {width:100%; background-color:#FCFCFC; text-align:left; border-collapse:collapse; padding:0 20px 0 20px;}
.tableStd2 th, .tableStd2 tr {padding:10px; vertical-align:top; border:1px; border-bottom:1px solid #CBCBCB;}
.tableStd2 td {padding:10px; vertical-align:top; border:0px;}
.tableStd2 tr:hover{background-color:#F2F2F2;}

.tableStd3 {width:100%; background-color:#FCFCFC; text-align:left; border-collapse:collapse; padding:0 10px 0 10px;}
.tableStd3 th, .tableStd3 tr {padding:3px; vertical-align:top; border:1px; border-bottom:1px solid #CBCBCB;}
.tableStd3 td {padding:3px; vertical-align:top; border:0px;}
.tableStd3 tr:hover{background-color:#F2F2F2;}

.tableStd4 {width:100%; text-align:left; border:1px solid black; border-collapse:collapse;}
.tableStd4 th, .tableStd tr {padding:1px; vertical-align:top; border:1px solid black;}
.tableStd4 td {padding:1px; vertical-align:top; border:1px solid black;}

.trAdmin {background-color:#E8DDF1 !important;}
.trAdmin:hover {background-color:#DBB7F5 !important;}
.trMandatory {background-color:#D0E9EE !important;}
.trMandatory:hover {background-color:#74D3FF !important;}
.trOptional {background-color:#DDF2DC !important;}
.trOptional:hover {background-color:#73FF97 !important;}

/*---To make DIV element highlight on hover, good for data edit fields on forms---*/
.highlight {background-color:#FCFCFC; padding:10px 20px 24px 20px; border-top:1px solid #CBCBCB; border-bottom:1px solid #CBCBCB; margin-top:-1px;}
.highlight:hover {background-color: #F2F2F2;}

.tableBorderless {width:100%; text-align:left; border:0px; border-collapse:collapse;}
.tableBorderless th, .tableBorderless tr {padding:3px; vertical-align:top; border:0px;}
.tableBorderless td {padding:3px; vertical-align:top; border:0px;}

.tableBorderlessP1 {width:100%; text-align:left; border:0px; border-collapse:collapse;}
.tableBorderlessP1 th, .tableBorderlessP1 tr {padding:10px; vertical-align:top; border:0px;}
.tableBorderlessP1 td {padding:10px; vertical-align:top; border:0px;}

/*For track list displays*/
.divTable{display:table; width:100%; background-color:#FCFCFC; border-collapse:collapse;}
.divTableRow{display:table-row; border:0; border-bottom:1px solid #CBCBCB;}
.divTableRow:hover{background-color:#F2F2F2;}
.divTableRowNB{display:table-row; border:0;}  /*No bottom border*/
.divTableRowNB:hover{background-color:#F2F2F2;}  /*No bottom border*/
.divTableHeading{display:table-row; background-color:#FCFCFC; border-bottom:1px solid #CBCBCB;}
.divTableCell{display:table-cell; vertical-align:middle; padding:8px 10px; border:0;}
.divTableCellLeft{display:table-cell; vertical-align:middle; text-align:left; padding:8px 10px; border:0;}
.divTableCellCenter{display:table-cell; vertical-align:middle; text-align:center; padding:8px 10px; border:0;}
.divTableCellRight{display:table-cell; vertical-align:middle; text-align:right; padding:8px 10px; border:0;}
.divTableFoot{background-color:#EEE; display:table-footer-group; font-weight:bold;}
.divTableBody{display:table-row-group;}

/*For reports*/
.padded-table {width:100%; border-collapse:collapse;}
.padded-table td {padding:4px; border:1px solid black;}

.cursorPointer{cursor:pointer;}
.cursorInitial{cursor:initial;}
.cursorAuto{cursor:auto;}

.cursorPointerDynamic{cursor:initial;}
.cursorPointerDynamic:hover{cursor:pointer;}

.pointerNonClickable{pointer-events:none;}

.continueOpt {display:inline-block; background-image:url(/module/images/controls/icon_continue.png); width:14px; height:14px; background-size:14px 14px; vertical-align:baseline; border:0;}
.continueOpt:hover {background-image:url(/module/images/controls/icon_continue_hover.png);}
.triangle {display:inline-block; background-image:url(/module/images/controls/icon_continue.png); width:14px; height:14px; background-size:14px 14px; vertical-align:baseline; border:0;}

.continueIconOpt {display:inline-block; background-image:url(/module/images/controls/button_play_big.png); width:44px; height:44px; background-size:44px 44px;}
.continueIconOpt:hover {background-image:url(/module/images/controls/button_play_big_over.png);}

.subHeaderContainer{width:100%; background:url(/module/images/art/graydientv1.jpg); background-size:100% 100%;}
.subFooterContainer{width:100%; background:url(/module/images/art/graydientv2.jpg); background-size:100% 100%;}
.navFooterContainer{width:100%; background:url(/module/images/art/graydientv3.jpg); background-size:100% 100%;}

.charcLine{width:100%; background-color:#B5B5B5; padding:0px; margin:0px; margin-top:4px;}
.silverLine{width:100%; background-color:#F2F2F2; padding:0px; margin:0px; margin-top:4px; border-top:0;}
.separator{color:#DFDFDF; background-color:#DFDFDF; border:0px; borderStyle:solid; border-bottom:1px solid; height:12px; margin-bottom:20px;}

.sectionGraydient{width:100%; height:auto; background:url(/module/images/art/graydient.jpg); background-size:100% 100%;}
.sectionGraydientBot{width:100%; background:url(/module/images/art/graydientv1.jpg); background-size:100% 100%;}
.sectionGraydientTop{width:100%; background:url(/module/images/art/graydientv2.jpg); background-size:100% 100%;}
.silverBG1{width:100%; background:#E2E4E8 url(/module/images/panels/PanelBlank.jpg); center/100% no-repeat;}

/*--Common Div classes---*/
.divHover {border-bottom:1px solid #CBCBCB;}
.divHover:hover {background-color: #F2F2F2;}
.divHoverNoSep {}
.divHoverNoSep:hover {background-color: #F2F2F2;}

.backdropHand{width:100%; background:url(/module/images/art/divBackdropHand.png); background-size:100% 100%;}
.backdropConsole{width:100%; background:url(/module/images/art/divBackdropConsole.png); background-size:100% 100%;}
.backdropDNA{width:100%; background:url(/module/images/art/divBackdropDNA.png); background-size:100% 100%;}
.backdropGears{width:100%; background:url(/module/images/art/divBackdropGears.png); background-size:100% 100%;}
.backdropGuitarist{width:100%; background:url(/module/images/art/divBackdropGuitarist.png); background-size:100% 100%;}
.backdropHappy{width:100%; background:url(/module/images/art/divBackdropHappy.png); background-size:100% 100%;}
.backdropInfrastructure{width:100%; background:url(/module/images/art/divBackdropInfrastructure.png); background-size:100% 100%;}
.backdropMusicFreedom{width:100%; background:url(/module/images/art/divBackdropMusicFreedom.png); background-size:100% 100%;}
.backdropMusicNetwork{width:100%; background:url(/module/images/art/divBackdropNetwork.png); background-size:100% 100%;}
.backdropMusicRecord{width:100%; background:url(/module/images/art/divBackdropMusicRecord.png); background-size:100% 100%;}
.backdropMusicWhite1{width:100%; background:url(/module/images/art/divBackdropMusicWhite1.png); background-size:100% 100%;}
.backdropMusicWhite2{width:100%; background:url(/module/images/art/divBackdropMusicWhite2.png); background-size:100% 100%;}
.backdropBlue1{width:100%; background:url(/module/images/art/divBackdropBlue1.png); background-size:100% 100%;}

.sectionWhite{width:100%; text-align:center; padding:30px 20px 50px 20px;}
.sectionWhiteC{width:100%; text-align:center; padding:30px 20px 50px 20px;}
.sectionWhiteL{width:100%; padding:30px 20px 50px 20px;}

.controlPadContainer{display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; background-color:#F2F2F2; border-top:1px solid #B5B5B5; border-bottom:1px solid #B5B5B5; padding:20px; height:50px;}

.custom-select {-webkit-appearance:button; -moz-appearance:button; -webkit-user-select:none; -moz-user-select:none; -webkit-padding-end:20px; -moz-padding-end:20px; -webkit-padding-start:2px; -moz-padding-start:2px;
  background-image:url("/module/images/controls/select-arrow.png"); background-position:center right; background-repeat:no-repeat; border:1px solid #AAA; border-radius:2px; box-shadow:0px 1px 3px rgba(0, 0, 0, 0.1);
  color:#555; font-size:10pt; margin:0; overflow:hidden; padding-top:2px; padding-bottom:2px; text-overflow:ellipsis; white-space:nowrap;}

/*---View Type selector classes---*/
.viewTypeCompressedSelected{width:40px; height:35px; background: #B5B5B5 url("/module/images/controls/icon_viewTypeCompressed.gif") no-repeat center center;}
.viewTypeCompressed{width:40px; height:35px; background: url("/module/images/controls/icon_viewTypeCompressed.gif") no-repeat center center;}
.viewTypeExpandedSelected{width:40px; height:35px; background: #B5B5B5 url("/module/images/controls/icon_viewTypeExpanded.gif") no-repeat center center;}
.viewTypeExpanded{width:40px; height:35px; background: url("/module/images/controls/icon_viewTypeExpanded.gif") no-repeat center center;}

/*---Block view type selector classes---*/
.pbvTypeCompressedSelected{width:40px; height:35px; background: #B5B5B5 url("/module/images/controls/icon_pbvTypeCompressed.gif") no-repeat center center;}
.pbvTypeCompressed{width:40px; height:35px; background: url("/module/images/controls/icon_pbvTypeCompressed.gif") no-repeat center center;}
.pbvTypeExpandedSelected{width:40px; height:35px; background: #B5B5B5 url("/module/images/controls/icon_pbvTypeExpanded.gif") no-repeat center center;}
.pbvTypeExpanded{width:40px; height:35px; background: url("/module/images/controls/icon_pbvTypeExpanded.gif") no-repeat center center;}

/*---List/track view type classes---*/
.viewCompressed{width:40px; height:35px; background:url("/module/images/controls/viewCompressed.png") no-repeat center center; margin-right:4px;}
.viewCompressed:hover{background:#B5B5B5 url("/module/images/controls/viewCompressed.png") no-repeat center center; cursor:pointer;}
.viewExpanded{width:40px; height:35px; background:url("/module/images/controls/viewExpanded.png") no-repeat center center;}
.viewExpanded:hover{ background:#B5B5B5 url("/module/images/controls/viewExpanded.png") no-repeat center center; cursor:pointer;}
.viewCompressedSelected{width:40px; height:35px; background:#B5B5B5 url("/module/images/controls/viewCompressed.png") no-repeat center center; margin-right:4px;}
.viewExpandedSelected{width:40px; height:35px; background:#B5B5B5 url("/module/images/controls/viewExpanded.png") no-repeat center center;}

/*---Email classes---*/
.attachmentIndicator{width:11px; height:17px; background: url("/module/images/controls/icon_attachment.gif") no-repeat center center;}

/*---Color classess------------------------------*/
.color_silver{color:#D6D6D6;}
.bgColorSilver{background-color:#D6D6D6;}
.color_silver2{color:#EBEBEB;}
.color_silverlite{color:#F2F2F2;}
.color_graydark{color:#404040;}
.color_graymed{color:#969696;}
.color_graylite{color:#B5B5B5;}

.colorRed{color:red;}
.backColorRed{background-color:red;}
.colorOrange{color:orange;}
.bgColorOrange{background-color:orange;}
.colorBlue{color:blue;}
.colorAqua{color:#0080FF;}
.colorPurple{color:#8000FF;}
.colorGreen{color:green;}
.backColorGreen{background-color:green;}
.colorLime{color:#00FF00;}
.bgColorLime{background-color:#00FF00;}
.colorWhite{color:white;}
.colorBlack{color:black;}
.bgColorRose{background-color:#FFB5B5}

.bgColorGreenPale{background-color:#D6FFD7;}
.bgColorGreenPale:hover{background-color:#A5FFAB !important;}

.bgColorBluePale{background-color:#C3D8FF;}
.bgColorBluePale:hover{background-color:#7AACFF !important;}

.bolded{font-weight:bold;}
.bold{font-weight:bold;}
.unbold{font-weight:normal;}
.ucase{text-transform:uppercase;}
.italic{font-style:italic;}

/*---Style hyperlinks------------------------------*/
a:link { color:black; }
a:visited { color:#404040; }
a:hover { color:#404040; }
a:active { color:#404040; }

.alink{color:black !important; text-decoration:none;}
.alink:visited {color:black !important;}
.alink:hover{color:black !important; text-decoration:underline;}
.alink:active{color:black !important; text-decoration:underline;}

.alinkDecor{text-decoration:none;}
.alinkDecor:visited {text-decoration:none;}
.alinkDecor:hover{text-decoration:underline;}
.alinkDecor:active{text-decoration:underline;}

.alinkneg{color:white !important; text-decoration:none;}
.alinkneg:visited {color:white !important;}
.alinkneg:hover{color:white !important; text-decoration:underline;}
.alinkneg:active{color:white !important; text-decoration:underline;}

.alinkWP{color:white !important; text-decoration:none;}
.alinkWP:visited {color:white !important; text-decoration:none;}
.alinkWP:hover{color:white !important; text-decoration:none;}
.alinkWP:active{color:white !important; text-decoration:none;}

.alinkInvert{color:black !important; text-decoration:none;}
.alinkInvert:visited {color:black !important;}
.alinkInvert:hover{color:white !important; text-decoration:underline;}
.alinkInvert:active{color:white !important; text-decoration:underline;}

.alinkInvertDecor{color:black !important; text-decoration:underline;}
.alinkInvertDecor:visited {color:black !important;}
.alinkInvertDecor:hover{color:white !important; text-decoration:underline;}
.alinkInvertDecor:active{color:white !important; text-decoration:underline;}

.alinkNoDecor{text-decoration:none;}
.alinkNoDecor:hover{text-decoration:none;}

/*---Style def to make hyperlinks change when hovered over (no color change)---*/
.blink{text-decoration:none;}
.blink:visited {text-decoration:none;}
.blink:hover{text-decoration:underline;}
.blink:active{text-decoration:underline;}

/*---Style def to make hyperlinks always underlined---*/
.clink{text-decoration:underline;}
.clink:visited {text-decoration:underline;}
.clink:hover{text-decoration:underline;}
.clink:active{text-decoration:underline;}

/*---Classname: blinking (for blinking text)---*/
.blinking{animation:blinkingText 1.2s infinite;} @keyframes blinkingText{0%{color:#000;} 49%{color:#000;} 60%{color:transparent;} 99%{color:transparent;} 100%{color:#000;}}

/*---Static fonts-------------------------------------------------------*/

/* Arial Bold */
.tfont7{font-size:7pt; font-family:Arial; font-weight:bold;}
.tfont7w{font-size:7pt; font-family:Arial; font-weight:bold; color:white;}
.tfont8{font-size:8pt; font-family:Arial; font-weight:bold;}
.tfont8w{font-size:8pt; font-family:Arial; font-weight:bold; color:white;}
.tfont9{font-size:9pt; font-family:Arial; font-weight:bold;}
.tfont9w{font-size:9pt; font-family:Arial; font-weight:bold; color:white;}
.tfont10{font-size:10pt; font-family:Arial; font-weight:bold;}
.tfont10w{font-size:10pt; font-family:Arial; font-weight:bold; color:white;}
.tfont11{font-size:11pt; font-family:Arial; font-weight:bold;}
.tfont11w{font-size:11pt; font-family:Arial; font-weight:bold; color:white;}
.tfont12{font-size:12pt; font-family:Arial; font-weight:bold;}
.tfont12w{font-size:12pt; font-family:Arial; font-weight:bold; color:white;}
.tfont13{font-size:13pt; font-family:Arial; font-weight:bold;}
.tfont13w{font-size:13pt; font-family:Arial; font-weight:bold; color:white;}
.tfont14{font-size:14pt; font-family:Arial; font-weight:bold;}
.tfont14w{font-size:14pt; font-family:Arial; font-weight:bold; color:white;}
.tfont16{font-size:16pt; font-family:Arial; font-weight:bold;}
.tfont16w{font-size:16pt; font-family:Arial; font-weight:bold; color:white;}
.tfont18{font-size:18pt; font-family:Arial; font-weight:bold;}
.tfont18w{font-size:18pt; font-family:Arial; font-weight:bold; color:white;}
.tfont20{font-size:20pt; font-family:Arial; font-weight:bold;}
.tfont20w{font-size:20pt; font-family:Arial; font-weight:bold; color:white;}
.tfont24{font-size:24pt; font-family:Arial; font-weight:bold;}
.tfont24w{font-size:24pt; font-family:Arial; font-weight:bold; color:white;}
.tfont27{font-size:27pt; font-family:Arial; font-weight:bold;}
.tfont27w{font-size:27pt; font-family:Arial; font-weight:bold; color:white;}
.tfont30{font-size:30pt; font-family:Arial; font-weight:bold;}
.tfont30w{font-size:30pt; font-family:Arial; font-weight:bold; color:white;}
.tfont36{font-size:36pt; font-family:Arial; font-weight:bold;}
.tfont36w{font-size:36pt; font-family:Arial; font-weight:bold; color:white;}
.tfont40{font-size:40pt; font-family:Arial; font-weight:bold;}
.tfont40w{font-size:40pt; font-family:Arial; font-weight:bold; color:white;}
.tfont50{font-size:50pt; font-family:Arial; font-weight:bold;}
.tfont50w{font-size:50pt; font-family:Arial; font-weight:bold; color:white;}
.tfont56{font-size:56pt; font-family:Arial; font-weight:bold;}
.tfont56w{font-size:56pt; font-family:Arial; font-weight:bold; color:white;}

/* Arial */
.pfont1{font-size:1pt; font-family:Arial;}
.pfont1w{font-size:1pt; font-family:Arial; color:white;}
.pfont4{font-size:4pt; font-family:Arial;}
.pfont4w{font-size:4pt; font-family:Arial; color:white;}
.pfont6{font-size:6pt; font-family:Arial;}
.pfont7{font-size:7pt; font-family:Arial;}
.pfont8{font-size:8pt; font-family:Arial;}
.pfont8w{font-size:8pt; font-family:Arial; color:white;}
.pfont9{font-size:9pt; font-family:Arial;}
.pfont9w{font-size:9pt; font-family:Arial; color:white;}
.pfont10{font-size:10pt; font-family:Arial;}
.pfont10w{font-size:10pt; font-family:Arial; color:white;}
.pfont11{font-size:11pt; font-family:Arial;}
.pfont12{font-size:12pt; font-family:Arial;}
.pfont12w{font-size:12pt; font-family:Arial; color:white;}
.pfont14{font-size:14pt; font-family:Arial;}
.pfont14w{font-size:14pt; font-family:Arial; color:white;}
.pfont16{font-size:16pt; font-family:Arial;}
.pfont16w{font-size:16pt; font-family:Arial; color:white;}
.pfont18{font-size:18pt; font-family:Arial;}
.pfont18w{font-size:18pt; font-family:Arial; color:white;}
.pfont24{font-size:24pt; font-family:Arial;}
.pfont24w{font-size:24pt; font-family:Arial; color:white;}

/*---Lato Black---*/
.ltfont8{font-size:8pt; font-family:latoblack, Arial;}
.ltfont8w{font-size:8pt; font-family:latoblack, Arial; color:white;}
.ltfont9{font-size:9pt; font-family:latoblack, Arial;}
.ltfont9w{font-size:9pt; font-family:latoblack, Arial; color:white;}
.ltfont10{font-size:10pt; font-family:latoblack, Arial;}
.ltfont10w{font-size:10pt; font-family:latoblack, Arial; color:white;}
.ltfont11{font-size:11pt; font-family:latoblack, Arial;}
.ltfont11w{font-size:11pt; font-family:latoblack, Arial; color:white;}
.ltfont12{font-size:12pt; font-family:latoblack, Arial;}
.ltfont13{font-size:13pt; font-family:latoblack, Arial;}
.ltfont12w{font-size:12pt; font-family:latoblack, Arial; color:white;}
.ltfont14{font-size:14pt; font-family:latoblack, Arial;}
.ltfont14w{font-size:14pt; font-family:latoblack, Arial; color:white;}
.ltfont16{font-size:16pt; font-family:latoblack, Arial;}
.ltfont16w{font-size:16pt; font-family:latoblack, Arial; color:white;}
.ltfont18{font-size:18pt; font-family:latoblack, Arial;}
.ltfont18w{font-size:18pt; font-family:latoblack, Arial; color:white;}
.ltfont20{font-size:20pt; font-family:latoblack, Arial;}
.ltfont20w{font-size:20pt; font-family:latoblack, Arial; color:white;}
.ltfont24{font-size:24pt; font-family:latoblack, Arial;}
.ltfont24w{font-size:24pt; font-family:latoblack, Arial; color:white;}
.ltfont30{font-size:30pt; font-family:latoblack, Arial;}
.ltfont30w{font-size:30pt; font-family:latoblack, Arial; color:white;}
.ltfont40{font-size:40pt; font-family:latoblack, Arial;}
.ltfont40w{font-size:40pt; font-family:latoblack, Arial; color:white;}
.ltfont50{font-size:50pt; font-family:latoblack, Arial;}
.ltfont50w{font-size:50pt; font-family:latoblack, Arial; color:white;}
.ltfont60{font-size:60pt; font-family:latoblack, Arial;}
.ltfont60w{font-size:60pt; font-family:latoblack, Arial; color:white;}

/*---Lato Thin---*/
.lpfont1{font-size:1pt; font-family:latothin, Arial;}
.lpfont1w{font-size:1pt; font-family:latothin, Arial; color:white;}
.lpfont4{font-size:4pt; font-family:latothin, Arial;}
.lpfont4w{font-size:4pt; font-family:latothin, Arial; color:white;}
.lpfont6{font-size:6pt; font-family:latothin, Arial;}
.lpfont7{font-size:7pt; font-family:latothin, Arial;}
.lpfont8{font-size:8pt; font-family:latothin, Arial;}
.lpfont8w{font-size:8pt; font-family:latothin, Arial; color:white;}
.lpfont9{font-size:9pt; font-family:latothin, Arial;}
.lpfont9w{font-size:9pt; font-family:latothin, Arial; color:white;}
.lpfont10{font-size:10pt; font-family:latothin, Arial;}
.lpfont11{font-size:11pt; font-family:latothin, Arial;}
.lpfont12{font-size:12pt; font-family:latothin, Arial;}
.lpfont14{font-size:14pt; font-family:latothin, Arial;}
.lpfont14w{font-size:14pt; font-family:latothin, Arial; color:white;}
.lpfont16{font-size:16pt; font-family:latothin, Arial;}
.lpfont16w{font-size:16pt; font-family:latothin, Arial; color:white;}
.lpfont18{font-size:18pt; font-family:latothin, Arial;}
.lpfont20{font-size:20pt; font-family:latothin, Arial;}
.lpfont30{font-size:30pt; font-family:latothin, Arial;}
.lpfont40{font-size:40pt; font-family:latothin, Arial;}

/*---Lato Regular (Medium)---*/
.lmfont1{font-size:1pt; font-family:latoregular, Arial;}
.lmfont1w{font-size:1pt; font-family:latoregular, Arial; color:white;}
.lmfont4{font-size:4pt; font-family:latoregular, Arial;}
.lmfont4w{font-size:4pt; font-family:latoregular, Arial; color:white;}
.lmfont6{font-size:6pt; font-family:latoregular, Arial;}
.lmfont7{font-size:7pt; font-family:latoregular, Arial;}
.lmfont8{font-size:8pt; font-family:latoregular, Arial;}
.lmfont8w{font-size:8pt; font-family:latoregular, Arial; color:white;}
.lmfont9{font-size:9pt; font-family:latoregular, Arial;}
.lmfont9w{font-size:9pt; font-family:latoregular, Arial; color:white;}
.lmfont10{font-size:10pt; font-family:latoregular, Arial;}
.lmfont10w{font-size:10pt; font-family:latoregular, Arial; color:white;}
.lmfont11{font-size:11pt; font-family:latoregular, Arial;}
.lmfont12{font-size:12pt; font-family:latoregular, Arial;}
.lmfont12w{font-size:12pt; font-family:latoregular, Arial; color:white;}
.lmfont13{font-size:13pt; font-family:latoregular, Arial;}
.lmfont14{font-size:14pt; font-family:latoregular, Arial;}
.lmfont14w{font-size:14pt; font-family:latoregular, Arial; color:white;}
.lmfont16{font-size:16pt; font-family:latoregular, Arial;}
.lmfont16w{font-size:16pt; font-family:latoregular, Arial; color:white;}
.lmfont18{font-size:18pt; font-family:latoregular, Arial;}
.lmfont18w{font-size:18pt; font-family:latoregular, Arial; color:white;}
.lmfont20{font-size:20pt; font-family:latoregular, Arial;}
.lmfont20w{font-size:20pt; font-family:latoregular, Arial; color:white;}
.lmfont24{font-size:24pt; font-family:latoregular, Arial;}
.lmfont24w{font-size:24pt; font-family:latoregular, Arial; color:white;}
.lmfont30{font-size:30pt; font-family:latoregular, Arial;}
.lmfont30w{font-size:30pt; font-family:latoregular, Arial; color:white;}
.lmfont35{font-size:35pt; font-family:latoregular, Arial;}
.lmfont35w{font-size:35pt; font-family:latoregular, Arial; color:white;}
.lmfont40{font-size:40pt; font-family:latoregular, Arial;}
.lmfont40w{font-size:40pt; font-family:latoregular, Arial; color:white;}

/*------------------------------------------------------------------------------------------------------*/
/* Normal shadow */
.drop-shadow {
  -webkit-box-shadow:6px 7px 9px 4px rgba(0, 0, 0, 0.8);
  -moz-box-shadow:   6px 7px 9px 4px rgba(0, 0, 0, 0.8);
  box-shadow:        6px 7px 9px 4px rgba(0, 0, 0, 0.8);
  }

/* Minimal shadow */
.drop-shadow-min {
  -webkit-box-shadow:4px 4px 6px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow:   4px 4px 6px 3px rgba(0, 0, 0, 0.6);
  box-shadow:        4px 4px 6px 3px rgba(0, 0, 0, 0.6);
  }

/* Extra-Minimal shadow */
.drop-shadow-extramin {
  -webkit-box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:   2px 2px 2px 1px rgba(0, 0, 0, 0.5);
  box-shadow:        2px 2px 2px 1px rgba(0, 0, 0, 0.5);
  }

/* Full shadow (around all edges, stronger on bottom) */
.drop-shadow-full {
  -webkit-box-shadow:0px 5px 12px 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:   0px 5px 12px 4px rgba(0, 0, 0, 0.5);
  box-shadow:        0px 5px 12px 4px rgba(0, 0, 0, 0.5);
  }

/* Significant shadow*/
.drop-shadow-max {
  -webkit-box-shadow:0px 3px 6px 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:   0px 3px 6px 4px rgba(0, 0, 0, 0.5);
  box-shadow:        0px 3px 6px 4px rgba(0, 0, 0, 0.5);
  }

/* Shadow bottom */
.drop-shadow-bottom {
  -webkit-box-shadow:0px 4px 7px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:   0px 4px 7px 1px rgba(0, 0, 0, 0.5);
  box-shadow:        0px 4px 7px 1px rgba(0, 0, 0, 0.5);
  }

/* Shadow bottom */
.drop-shadow-bottommax {
  -webkit-box-shadow:0px 6px 8px 2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow:   0px 6px 8px 2px rgba(0, 0, 0, 0.6);
  box-shadow:        0px 6px 8px 2px rgba(0, 0, 0, 0.6);
  }

/* Shadow bottom minimum*/
.drop-shadow-bottommin {
  -webkit-box-shadow:0px 3px 4px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:   0px 3px 4px 0px rgba(0, 0, 0, 0.4);
  box-shadow:        0px 3px 4px 0px rgba(0, 0, 0, 0.4);
  }

/* Shadow bottom-left */
.drop-shadow-bottomleft {
  -webkit-box-shadow:-4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow:   -4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  box-shadow:        -4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  }

/* Shadow bottom-right */
.drop-shadow-bottomright {
  -webkit-box-shadow:4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow:   4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  box-shadow:        4px 4px 7px 2px rgba(0, 0, 0, 0.6);
  }

.drop-shadow-all {
  box-shadow: 0 0 25px rgba(0,0,15,3.6);
  -moz-box-shadow: 0 0 25px rgba(0,0,15,3.6);
  -webkit-box-shadow: 0 0 25px rgba(0,0,15,3.6);
  -o-box-shadow: 0 0 25px rgba(0,0,15,3.6);
  }

/* Test shadow */
.drop-shadow-test {
  -webkit-box-shadow:0px 5px 15px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:   0px 5px 15px 5px rgba(0, 0, 0, 0.5);
  box-shadow:        0px 5px 15px 5px rgba(0, 0, 0, 0.5);
  }

/* More versatile shadow on non-transparent PNG */
.filter-shadow {-webkit-filter:drop-shadow(5px 5px 5px #222); filter:drop-shadow(5px 5px 5px #222);}
.filter-shadow2 {-webkit-filter:drop-shadow(2px 2px 2px #222); filter:drop-shadow(2px 2px 2px #222);}

.contentBox {-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}
.borderBox {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}


/*------------------------------------------------------------------------------------------------------*/
.centerBoth {text-align:center; vertical-align:middle;}

/* Basic method of aligning something horizontally (place contents within a sized div, like this:   <div class="center" style="width:734px;"></div>    */
.center {float:none; margin-left:auto; margin-right:auto;}
.left {float:left; margin-left:auto; margin-right:auto;}
.right {float:right; margin-left:auto; margin-right:auto;}

/* Center horzontally (put class in child div to center horizontally with parent div, parent div may have to have absolute width specified) */
.halign {position:relative; left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); }

/* Center vertically (put class in child div to center vertically within parent div, parent div must have height specified)*/
.valign {position:relative; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); }

/* Should work without having to specify width */
.hfit {width:-moz-fit-content; width:-webkit-fit-content; width:fit-content; margin:auto;}


/*------------------------------------------------------------------------------------------------------*/
/* Center horizontally (Warning: Uses Flex Box display!  Apply to div and should cause anything in div to align horizontally to center) */
.centerH {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* Center div contents both horizontally and vertically (Warning: Uses Flex Box display!) */
.centerHV {
  display:-webkit-box; display:-moz-box; display:-webkit-flexbox; display:-ms-flexbox; display:-webkit-flex; display:flex;
  -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-direction:normal; -moz-box-direction:normal;
  -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center;  /*Center Vertically*/
  -webkit-box-pack:center; -moz-box-pack:center; -webkit-flex-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;  /*Center Horizontally*/
}



/*------------------------------------------------------------------------------------------------------*/
/* Alternate method of horizontal centering and left/right aligning (Warning: Uses Box display) */
.centerblock {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;

  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  /*-ms-flex-align: center;*/

  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;

  -webkit-align-content: center;
  align-content: center;
  /*align-items: center;*/
}


/*Style container to allow centering of content with overflow to left and right*/
.centercontainer {position:relative; width:100%; margin:0 auto; overflow-x:hidden; overflow-y:visible;}


/*Hide scrollbar*/
.hideWebkitScrollbars::-webkit-scrollbar {display:none; height:0px !important; width:0px !important; background:transparent;}
.hideMozScrollbars::-moz-scrollbar {display:none; height:0px !important; width:0px !important; background:transparent;}
.hideOtherScrollbars {-ms-overflow-style:none !important; overflow:-moz-scrollbars-none !important;}

/*Show vertical scrollbar*/
.showOtherScrollbarsVert {-ms-overflow-style:scrollbar !important;}

/*Iframe scrolling class (necessary for iPad)*/
/*
.scroll-wrapper {-webkit-overflow-scrolling:touch; overflow-y:scroll; position:relative; right:0; bottom:0; left:0; top:0;}
.scroll-wrapper iframe {height:100%; width:100%;}
*/
.scroll-wrapper {overflow-y:scroll !important; -webkit-overflow-scrolling:touch !important;}
/*.scroll-wrapper iframe {height:auto; width:auto;}*/


/*Button stylings*/
.buttonMid {width:26px; height:26px; border:0; margin-right:4px;}
.buttonMid14 {width:14px; height:14px; border:0; margin-right:3px;}
.buttonMid20 {width:20px; height:20px; border:0; margin-right:4px;}
.buttonMid30 {width:30px; height:30px; border:0; margin-right:4px;}
.buttonLrg {width:44px; height:44px; border:0; margin-right:8px;}

.buttonCloseWindowClass {cursor:auto; filter:invert(0%);}
.buttonCloseWindowClass:hover {cursor:pointer;  filter:invert(100%);}


/*Rounded corner stylings*/
.rcorners1 {border-radius:12px; background:#E0E0E0; padding:20px;}

/*For putting wait cursor over entire page*/
.wait, .wait * {cursor:wait !important;}

/*Class to control text line height based on selected language (i.e. Russian, Malay, and other languages are very "long" compared to English) */
.langChoiceLineHeight {line-height:110%;}

*.unselectable {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.unselectable {-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

@media screen and (max-width:700px) {
  .graphicPlusTextParent{display:flex; flex-direction:row; flex-wrap:wrap;}
  .graphicPlusTextParentReverse{display:flex; flex-direction:row; flex-wrap:wrap-reverse;}
  .graphicChild{width:100%; padding:0 30px 30px 20px;}
  .textChild{width:100%; padding:0 20px 30px 20px;}
  }
@media screen and (min-width:701px) {
  .graphicPlusTextParent{display:flex; flex-direction:row;}
  .graphicPlusTextParentReverse{display:flex; flex-direction:row;}
  .graphicChild{width:25%; min-width:300px; flex-shrink:0; padding:0 30px 30px 20px; text-align:left;}
  .textChild{width:75%; min-width:320px; padding:0 20px 30px 0;}
}

/*Bottom padding*/
.menuOptDisplayClass{padding-bottom:4px;}

/*Text blinking class*/
.blinking {animation: blinker 1s step-start infinite;}
@keyframes blinker {50% {opacity:0;}}



/*--- Classes for animated radio button -----------------------------------------*/
@keyframes click-wave {
  0% {height:40px; width:40px; opacity:0.35; position:relative;}
  100% {height:200px; width:200px; margin-left:-80px; margin-top:-80px; opacity:0;}
}

.option-input {-webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; position:relative;
  top:13.33333px; right:0; bottom:0; left:0; height:40px; width:40px; transition:all 0.15s ease-out 0s; background:#cbd1d8; border:none;
  color:#fff; cursor:pointer; display:inline-block; margin-right:0.5rem; outline:none; position:relative; z-index:1000;}
.option-input:hover {background: #9faab7;}
.option-input:checked {background: #0096FC;}

.option-input:checked::before {height:40px; width:40px; position:absolute; content:'✔'; display:inline-block; font-size:26.66667px; text-align:center; line-height:40px;}
.option-input:checked::after {-webkit-animation:click-wave 0.65s; -moz-animation:click-wave 0.65s; animation:click-wave 0.65s; background:#75BDFF; content:''; display:block; position:relative; z-index:100;}
.option-input.radio {border-radius: 50%;}
.option-input.radio::after {border-radius: 50%;}

/*---Hover menu---*/
.dropbtn {border:none; background-color:transparent;}
.dropdown {position:relative; display:inline-block;}
.dropdown-content {display:none; position:absolute; background-color:#f1f1f1; min-width:200px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;}
.dropdown-content a {color:black; padding:12px 16px; text-decoration:none; display:block;}
.dropdown-content a:hover {background-color:#ddd;}
.dropdown:hover .dropdown-content {display:block;}
.dropdown:hover .dropbtn {background-color:#D1D1D1;}


/* The radio button container -----------------------------------------*/
.ngradio {display:block; position:relative; padding-left:35px; margin-bottom:12px; cursor:pointer; font-size:22px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
/* Hide the browser's default radio button */
.ngradio input {position:absolute; opacity:0; cursor:pointer;}
/* Create a custom radio button */
.radioBtn {position:absolute; top:0; left:0; height:25px; width:25px; background-color:#eee; border-radius:50%;}
/* On mouse-over, add a grey background color */
.ngradio:hover input ~ .radioBtn {background-color:#B9B9B9;}
/* When the radio button is checked, add a blue background */
.ngradio input:checked ~ .radioBtn {background-color:#460BDB;}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radioBtn:after {content:""; position:absolute; display:none;}
/* Show the indicator (dot/circle) when checked */
.ngradio input:checked ~ .radioBtn:after {display:block;}
/* Style the indicator (dot/circle) */
.ngradio .radioBtn:after {top:9px; left:9px; width:8px; height:8px; border-radius:50%;	background:white;}


/* Progress spinner -----------------------------------------*/
#cover-spin {position:fixed; width:100%; left:0;right:0;top:0;bottom:0; background-color: rgba(255,255,255,0.7); z-index:9999; display:none;}
@-webkit-keyframes spin {from {-webkit-transform:rotate(0deg);}	to {-webkit-transform:rotate(360deg);}}
@keyframes spin {from {transform:rotate(0deg);}	to {transform:rotate(360deg);}}
#cover-spin::after {content:''; display:block; position:absolute; left:48%;top:40%; width:40px;height:40px; border-style:solid; border-color:black; border-top-color:transparent; border-width: 4px; border-radius:50%; -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite;}

.text-nowrap {white-space: nowrap;}

/* Suppress google translate bar*/
body {top:0px !important;}
body > .skiptranslate > iframe.skiptranslate { display:none !important; visibility:hidden !important; }
