body{
	margin: 0;
	padding: 0;
	background-color: #EDF6FF;
	height: auto;
	/*background-image: linear-gradient(0deg, rgb(204, 204, 255), rgb(164, 211, 238));*/
}
p{
	font-size: 13.5px;
}
#content{
	
	height:auto;
}
#content::before{
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url('../images/img-01.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 45%;
}

.header{

	min-height:75px;
}
.logoText{
	font-family: 'Montserrat', Verdana;
    color: #20244F;
    font-size: 32px;
    font-weight: bold;
    display: block !important;
    text-align: center;
}
#wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.noPadding{
	padding:0px !important;
}
.noMargin{
	margin:0px !important;
}
.footer{
	z-index: 2;
	margin-top: auto;
	padding: 10px;
	color: #473C8B;
	width:100%;
	padding-left: 30px;
	font-size: 12px;
	
}
div.login, div.signInOutBox{
	z-index: 2;
	min-height: 400px;
	/*border: 1px solid #ccc;*/
	margin-top: 50px;
	background-color: white;
	max-width: 500px;
	padding: 3px;
	border-radius: 30px;
	 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
div.signInOutBox{
	margin-top:110px !important;
}
h1.login{
	font-family: 'Montserrat', Verdana !important;
	width: 100%;
	text-align:left;
	font-size: 25px;
	border-bottom: 1px solid rgba(10, 10, 10, 0.25);
	margin-bottom: 0px !important;
	padding-left: 10px !important
}
h1.welcome{
	display: inline-block;
	width:100%;
	text-align: center;
	font-size: 25px;
	color: #20244F !important;
	font-weight: bold;
}
h2.clubName{
	display:inline-block;
	width:100%;
	text-align: center;
	font-size: 20px;
}
.formLabel{
	 display: block;
  margin-bottom: .1rem;
  font-weight: 600;
  color: #333;
}

.Passsymbol , .Usersymbol{
	font-size: 20px;
	color: #999999;

	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	position: absolute;
	border-radius: 25px;
	bottom: 38px;
	left: -16px;
	width: 100%;
	height: 100%;
	padding-left: 23px;
	padding-bottom: 5px;
	pointer-events: none;

	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.Usersymbol{
	bottom:-4px;

}
.wrap{
	position: relative;
	width: 100%;
	z-index: 1;
}

.input{
	font-size: 18px;
	line-height: 1.2;
	color: #686868;
	width: 100%;
  	padding: 0.75rem;
  	border: 1px solid #ccc;
  	border-radius: 6px;
  	margin-top: 0.25rem;
  	font-size: 1rem;
}
.button.primary {
  background-color: #392c76;
  color: white;
  border-radius: 6px;
  font-weight: bold;
  padding: 0.75rem;
  width: 100%;
  text-align: center;
  transition: background-color 0.25s ease-in, color 0.25s ease-in;
}

.button.primary:hover {
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
  background-color: #2c225e;
}

form{
	width: 100%;
	padding: 5px;
}

.loginMain{
	
}
.signInMain{
	margin-top:-65px;
}
.loginError{
	width:100%;
	margin-left: 10px;
	margin-right: 10px;
}
h1.loginError{
	font-size: 18px;
	font-weight: bold;
	color:#8b0000;
	padding-left: 0px;
	margin-left: 0px;
	border-bottom: 1px solid #8b0000;
}
.topLogo{
	display: block !important;
	margin-left: auto;
	margin-right: auto;
	max-height: 100px;
}

.genieLogo{
	max-height: 45px;
	margin-bottom: 5px;
}
.loginGenie{
	margin-bottom: 0px
}
.logo{
	text-align: center;
}
label{
	font-family: verdana;
	font-size: 20px;
	margin-left:3px;
}
input.loginField{
	width:100%;
	border-radius: 5px;
}
input.profile{
	width: 80%
	border-radius: 0px 5px 5px 0px;
	color: #1D90FF;
	font-weight: bold;
	background-color: white !important;
}

input.profile:focus, input.availabilityTime:focus, textarea.tinyMCEnotice:focus, div.tox-tinymce:focus, textarea.profile:focus, select.profile:focus, textarea.notice:focus, textarea.request:focus, textarea.timeOff:focus, textarea.timeOff2:focus, textarea.safeguard:focus, textarea.welfareBox:focus, input.safe:focus, textarea.safe:focus, input.timOff:focus, input.request:focus, input.welfareNotes:focus {
	box-shadow: 0px 0px 5px  #1D90FF;
}

textarea.profile, textarea.notice, textarea.request, textarea.timeOff, textarea.timeOff2, textarea.welfareBox, textarea.safeguard, input.welfareNotes {
	min-height: 150px;
	color: #1D90FF;
	font-weight: bold;
}

label.profile, label.requestBox, label.noticeBox, label.timeOffBox, label.timeOffBox2, label.timeOff, label.profileAddress, label.welfareBox, label.safe {
	width: 20%;
	min-width: 250px !important;
	float:left;
	background-color: #1D90FF;
	border-radius: 5px 0px 0px 5px;
	padding: 5px;
	font-weight: bold;
	color: white;
	font-size: 16.2px;
}

span.labelInput{
	overflow: hidden;
	display: block;
	padding: 0 4px 0 0px
}
@media screen and (max-width: 450px) {
	span.labelInput{
		display: block;
		padding: 4px;
	}
	.loginLabel, label.profile, label.requestBox, label.noticeBox, label.timeOffBox, label.timeOffBox2, label.timeOff, label.profileAddress, label.welfareBox, label.safe {
		display: block;
		width: 97.8% !important;
		margin-left: 4px;
		border-radius: 5px 5px 0px 0px !important;
		margin-bottom:-4px;
	}
	form input{
		display:block;
		width: 100% !important;
	}
}

select.profile{
	color:#1D90FF;
	font-weight: bold;
}
i.profile{
	font-size: 20px;
	text-align: right
}

.loginLabel{
	width:33%;
	float:left;
	background-color: #1D90FF;
	border-radius: 5px 0px 0px 5px;
	padding: 5px;
	font-weight: bold;
	color: white;
	font-size: 16.2px;
}

form label.required:after {
	color: white;
	content: " *";
}


select.signInOutName{
	margin:0;
	border-radius: 5px;
}

/* Toggle Sign in */

.toggle {
	justify-content: center !important;
	margin: 1rem 0rem 0rem !important;
	min-height: 100px;
}

.toggle input + label {
	padding: 3rem 4rem !important;

}
.toggle input + label:first-of-type {
	border-right: #ddd !important;
	border-right-style: solid !important;
	border-width: thin !important;
}   
.toggle input + label:last-of-type {
	border-left: #ddd !important;
	border-left-style: solid !important;
	border-width: thin !important;
}

.toggle input:checked + label {
	background-image: linear-gradient(0deg, #5151ff, #a4d3ee);
	box-shadow: none !important;
}

.toggle input:focus + label {
	outline: none !important;
}
.toggle input:hover + label {
	border-color: #aaa !important;
}
.chrome{
	font-size:13px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: #cecece;
}
i.alert{
	color:red;
}
.callout.alertSignIn{
	width: 98%;
	margin: auto;
	color: #8E1600;
	border-radius: 5px;
	background-color: #f7e4e1;
}
.alert{
	color: #8E1600;
	border-radius: 5px;
}
h1.success,h1.alert{
	font-size: 25px;
	font-weight: bold;
}
div.callout.alert.notices{
	margin-top: 20px !important;
	border-radius: 5px;
}
.alertHome{
	color:red;
	font-size: 25px;
	font-weight: bold;
}



/* New CSS */

.nav{
	/*margin-top: -75px;*/
	height: 55px;
	padding-top: 8px;
	padding-left: 50px;
	background: #A4D3EE;
	box-shadow: 0px 5px 5px 1px rgb(0 91 171 / 30%);
	position: sticky;
	top:0;
	width: 100%;
	z-index: 5 !important;
}

.secondaryNav, .secondaryNavJudging{
	margin-top: 15px;
	margin-bottom: 45px;
	height: 55px;
	padding-top: 8px;
	padding-left: 50px;
	background: #9CFAAE;
	box-shadow: 5px 5px 5px 1px rgb(0 91 171 / 30%);
	position: sticky;
	top:0;
	width: 100%;
	z-index: 5 !important;
}
.secondaryNavJudging{
	margin-bottom:30px !important;
}

.content{
	z-index: 1;
}
div.box {

	margin-top: 2vh;
	background-color: white;
	box-shadow: 5px 5px 5px 1px rgba(0,91,171, 0.3);
	border-radius: 7px;
	z-index:2;
	padding:1rem;

}
div.headerContainer{
	margin-top: 6vh;
	background-color: white;
	box-shadow: 5px 5px 5px 1px rgba(0,91,171, 0.3);
	border-radius: 7px;
	z-index:2;
	padding:1rem;
}


/*div.podium {
	height: 8vh;
	max-width:60vw;
	margin-top: 3vh;
	background-color: white;
	box-shadow: 5px 5px 5px 1px rgba(0,91,171, 0.3);
	border-radius: 7px;
	z-index:2;
	padding:1rem;
	padding-bottom:1rem;
	margin-left: 25vw;
} */
div.podiumContainer {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    height:100%;
}
div.podiumTitle {
	margin-top: 3vh;
	background-color: white;
	box-shadow: 5px 5px 5px 1px rgba(0,91,171, 0.3);
	border-radius: 0px 7px 7px 0px;
	z-index:2;
	padding:5vw;
	grid-row:2/4;
}
div.podiumBox1, div.podiumBox2, div.podiumBox3, div.podiumBox4, div.podiumBox5, div.podiumBox6 {
	margin-top: 3vh;
	background-color: white;
	box-shadow: 5px 5px 5px 1px rgba(0,91,171, 0.3);
	border-radius: 7px;
	z-index:2;
	padding:1rem;
	padding-bottom:1rem;
	grid-column:2/4;
	margin-left: 6vw;
}
div.podiumBox2{
	margin-left: 8vw !important;
}
div.podiumBox3{
	margin-left: 10vw !important;
}
div.podiumBox4{
	margin-left: 12vw !important;
}
div.podiumBox5{
	margin-left: 14vw !important;
}
div.podiumBox6{
	margin-left: 16vw !important;
}

div.judgeBox{
	display: grid;
}
div.apparatusBox{
}

.menu-hover-lines {
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all 0.35s ease;
	width: 100%;
}

.menu-hover-lines li a {
	padding: 0.75rem 0;
	color: rgba(10, 10, 10, 0.5);
	position: relative;
	margin-left: 1rem;
}

.menu-hover-lines li:first-child a {
	margin-left: 0;
}

.menu-hover-lines li.active > a {
	background-color: transparent;
}

.menu-hover-lines a:before,
.menu-hover-lines a::after {
	height: 3px;
	position: absolute;
	content: '';
	transition: all 0.35s ease;
	background-color: #01A89E;
	width: 0;
}

.menu-hover-lines a::before {
	top: 0;
	left: 0;
}

.menu-hover-lines a::after {
	bottom: 0;
	right: 0;
}

.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
	color: #0a0a0a;
	transition: all 0.35s ease;
}

.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
	width: 100%;
}
h1.heading{
	font-size: 25px;
	border-left: 5px solid #01A89E;
	padding-left: 10px;
}
h1.headingPodiumTitle{
	font-size: 2rem;
}

h2.heading{
	font-size: 20px;
	border-left: 5px solid #01A89E;
	padding-left: 10px;
	
}
h3.heading, h3.headingFirst{
	font-size: 15px;
	border-left: 5px solid #01A89E;
	padding-left: 10px;	
	color: #01A89E;
	font-weight: bold;
}
h3.headingFirst{
	margin-top: 30px !important;
}

img.genieLogo{
	max-height: 30px;
}

table.judge, table.results {
	width: 85%;
	margin: 0px auto;
	margin-top:20px;
	margin-bottom: 30px;
}
table.judge th, table.results th, table.register th{
	background: #01A89E;
	color:white;
	text-align: center !important
}
table.register{
	width: 100%;
	margin: 0px auto;
	margin-top:10px;
	margin-bottom: 30px;
	height: 300px;
}

tbody.judge tr:nth-child(even), tbody.results tr:nth-child(even), tbody.register tr:nth-child(even){
	/*background-image: linear-gradient(0deg, #94b9f2, #a4d3ee);*/
	background:#78E7AA;
}
table.results th, table.judge th, table.register th, {
	text-align: center;
}

table.results{
	margin-bottom: 80px !important;
}

input.tableSearchInput{
	padding: 10px;
	font-size: 17px;
	font-weight: bold;
	border: 1px solid grey;
	float: left;
	width: 80%;
	background: white;
	color:#1D90FF;
}
input.tableSearchInput:hover{
	box-shadow: 0px 0px 5px  #1D90FF;
}
button.searchButton{
	float: left;
	width: 20%;
	height: 39px;
	padding: 10px;
	background: #1D90FF;
	color: white;
	font-size: 17px;
	border-left: none; /* Prevent double borders */
	cursor: pointer;
	background: -webkit-linear-gradient(top, #60AFFE 0%,#1d90ff 24%,#1D90FF 100%);
}
table.dataTable thead th, table.dataTable thead td{
	border:none !important;
}
table.dataTable.no-footer{
	border-bottom:1px solid #ddd !important;
}
.paginate_button{
	border-radius: 3px !important;
	border: none !important;
}    
.paginate_button.current{
	background: -webkit-linear-gradient(top, #F0F8FF 0%,#a4d3ee 24%,#a4d3ee 100%) !important;	
	border-radius: 3px !important;
	border: none !important;
}
.paginate_button:hover{
	background: -webkit-linear-gradient(top, #F0F8FF 0%,#a4d3ee 24%,#a4d3ee 100%) !important;
	
}
.pagination a{
	background: none !important;
	padding:0 !important;
}
thead tr, tfoot tr{
	background-color: #A4D3EE;
}
tbody tr{
	text-align: center;
}
a.datatables{
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	color: inherit;
}
a.datatables:hover{
	transition: background-color 0.25s ease-in, color 0.25s ease-in;
	color: #1D90FF;
}
.navLogo{
	max-height: 45px;
	margin-top: -3px;
}
.podiumLogo{
	max-height: 95px;
	margin-left: 3vw;
	margin-top: 3vw;
}
.button.judge, .button.register{
	width: 20%;
	margin-top: -5px;
	margin-right:7vw;
	float: right;
	background-color: #01A89E;
	transition: background-color 0.25s ease-in, color 0.25s ease-in;
	/*background: -webkit-linear-gradient(top, #60AFFE 0%,#1d90ff 24%,#1D90FF 100%);*/
	border-radius: 3px;
	border:none;
	/*background-image: linear-gradient(0deg,#01A89E, #9CFAAE)*/
}
.button.judge:hover, .button.register:hover, .button.sheets:hover,{
	background-color: #a4d3ee !important;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	background: inherit;
}

.button.sheets{
	width: 100%;
	height: 75%;
	background-color: #1e90ff  !important;
	transition: background-color 0.25s ease-in, color 0.25s ease-in;
	/*background: -webkit-linear-gradient(top, #60AFFE 0%,#1d90ff 24%,#1D90FF 100%);*/
	border-radius: 3px;
	border:none;
	background-image: linear-gradient(0deg, #5151ff, #a4d3ee);
	font-size: 2rem;
}

.buttonNew{
	height:35px;
	width: 150px;
	background-color: #a4d3ee;
	border-radius: 5px 5px 5px 5px;
	transition: background-color 0.25s ease-out, background-color 0.25s ease-out;

}
.buttonLeft{
	width: 35px;
	height: 35px;
	border-radius: 5px 0px 0px 5px;
	background-color: #88A7F3;
	padding-left: 11px;
	padding-top: 7px;
	float:left;
}
.buttonRight{
	float: left;
	padding-left: 25px;
	padding-top: 8px;
	font-size: 11px;
}
.buttonNew:hover{
	transition: background-color 0.25s ease-in, background-color 0.25s ease-in;
	background-color: #93ccea;

}

.button.register {
    width: 50%;
    margin-top: 20px;
    float: right;
    margin-right:0px;

}


.clear{
	clear:both;
}
form label{
	font-size: 15px;

}

i.podium1, i.podium2, i.podium3, i.podium4, i.podium5, i.podium6, i.cup {
	font-size: 2rem !important;
	margin-right: 1rem;
}

i.podium1 {
	color: gold;
	font-size: 2rem !important;
	margin-right: 1rem;
}
i.podium2 {
	color: silver;
	font-size: 2rem !important;
	margin-right: 1rem;
}
i.podium3 {
	color: #ea9347;
	font-size: 2rem !important;
	margin-right: 1rem;
}
i.podium4 {
	color: #e619df;
	font-size: 2rem !important;
	margin-right: 1rem;
}
i.podium5 {
	color: red;
	font-size: 2rem !important;
	margin-right: 1rem;
}
i.podium6 {
	color: blue;
	font-size: 2rem !important;
	margin-right: 1rem;
}


.container3{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-rows: 1fr;
	grid-gap: 0.1vw 3vw;
	padding: 10px 40px;
}
#safe3.button, #safe4.button{
	height: 8vw !important;
	width: 16vw !important;
	border-radius: 10px;
	font-size: 1.2vw;
}
#safe4.button{
	transition: background-color 0.25s ease-in, color 0.25s ease-in;
}
#safe4.button:hover{
	background-color:#9CFAAE !important;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	color: #01A89E;
	background: #9CFAAE;
}
/*#safe4.button:active{
	background: -webkit-linear-gradient(top, #F0F8FF 0%,#a4d3ee 24%,#a4d3ee 100%);
	color: #1D90FF;
}*/

h2.round{
	font-size:1.35em;
}
@media screen and (max-width: 450px) {
  .container3{
   	display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    padding: 2vw 3vw 2vw 0vw;
    grid-gap: 2vw 2vw;
  }
  #safe3.button, #safe4.button{
	margin:5px;
	width: 43vw !important;
	height: 32vw !important;
	border-radius: 20px;
	font-size: 3.3vw;
	}
	h2.cleanH2{
	font-size:6.7vw;
}
}
input.score{
	width:40%;
	text-align: center;
}


.registerBox{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-template-rows: 1fr;
	grid-gap: 0.1vw 3vw;
	padding: 10px 40px;
}
tr.isolating{
	background:  red !important;
}

.routineBox{
	display: grid;
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 1fr 1fr;
	grid-gap: 3vw;
	padding: 10px 40px;
}
table.results thead th, table.judge thead th{
	text-align: center !important;
}
.gold{
	color: #AF9500;
	font-size: 23px;
}
.silver{
	color:grey;
	font-size: 23px;
}
.bronze{
	color: #6A3805;
	font-size: 23px;
}
@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
    .printHide{
		display: none;
	}
}
input.registerCheck,input.check{
	    height: 1.75em;
    width: 1.75em;
    margin-top: 6px;
    margin-bottom: 0px;
}
table.fullWidth{
	width: 100% !important;
}
i.fontAwesome{
	font-size: 23px;
	margin-right: 10px;
}