:root {
	 --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
}

@font-face {
  font-family: ps-regular;
  src: url("font/PassengerSans-Regular.woff");
}
@font-face {
  font-family: ps-bold;
  src: url("font/PassengerSans-Bold.woff");
}


@font-face {
  font-family: 'Font Awesome 5';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("font/fa-solid-900.eot");
  src: url("font/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("font/fa-solid-900.woff2") format("woff2"), url("font/fa-solid-900.woff") format("woff"), url("font/fa-solid-900.ttf") format("truetype"), url("font/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5';
  font-weight: 900; }

a {
	text-decoration: none !important;
	color: #ffffff80 !important;
}

h1 {
	color: #fff;
	font-size: 40px;
	font-family: ps-bold, ps-regular;
}
h2 {
	font-size: 24px;
}

h1.modal-title-2 {
	margin: 20px 0px;
	font-size: 38px;
	font-family: ps-regular;
}

h2.modal-title {
	margin: 40px 0px;
}
h2.modal-title-2 {
	margin: 20px 0px 20px 0px;
}

h3 {
	font-size: 21px;
	color: #fff;
	font-weight: 400;
	margin: 5px 0px;
}

strong {
	font-family: ps-bold !important;
}

body {
	font-family: ps-regular, Arial, Helvetica, sans-serif;
	background: #314853;
	background-image: linear-gradient(to right, #3b525b, #314853);
	height: 100%;

}

body:before {
	width: 100%;
	left: 0px;
	top: 0px;
	content: '';
    background-image: url("background.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	height: 100%;
	z-index: -1;
	opacity: 15%;
	
}

.col-label {
	color: #ffffff40;
	text-align: center;
}

select {
  	background: var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
    padding-right: 35px;
	color: #fff;
	font-size: 16px;
    margin-left: 12px;
    padding: 13px 35px 13px 16px;
    border: 2px solid #ffffff10;;
    border-radius: 6px;
    outline: none;
	-webkit-appearance: none;
}
.select-label {
	display: inline-block;
	font-size: 18px;
	color: #fff;
}

input.input-field {
	background: none;
    padding-right: 35px;
	color: #fff;
	font-size: 16px;
/*    margin-left: 12px;*/
    padding: 13px 35px 13px 16px;
    border: 2px solid #ffffff10;;
    border-radius: 6px;
    outline: none;
	-webkit-appearance: none;
}
input.input-field::placeholder {
	color: #fff !important;
}

.input-78{
	width: 78%;
}

.form {
	position: relative;
	width: 20rem;
	
}

.info-text {
	color: #ffffff80;
	font-size: 16px;
	margin: 8px 3px 10px 0px;
	line-height: 1.1em;
}
.info-text-bottom-pad {
	color: #ffffff80;
	font-size: 16px;
	margin: 8px 0px 8px 0px;
	line-height: 1.1em;
	display: block;
}



.info-value{
	border-bottom: 1px solid #ffffff20;
	padding: 8px 0px 8px 0px;
	color: #fff;
	margin-right: 15px;
}

.container{ 
max-width: 890px;
margin: 0 auto;
}

.flex-grid {
  display: flex;
  justify-content: space-between;
}
.flex-grid .col {
  width: 49%;
}


.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 31%;
}

.flex-grid-fourths {
  display: flex;
  justify-content: space-between;
}
.flex-grid-fourths .col {
  width: 24%;
}

.flex-grid-fifths {
  display: flex;
  justify-content: space-between;
}
.flex-grid-fifths .col {
  width: 19%;
}

.weekday-table-row {
	background: #21353d;
	border-radius: 8px;
	padding: 30px 12px 30px 30px;
	margin: 30px 0px;
    box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 15%);
	border: 2px solid #3e555e;
}

.weekday-table-row .col {
	transition: all 0.3s ease;
	display: flex; 
	flex-direction: column;
}
.weekday-table-row .col .col-body{
	justify-content: space-between;
    flex-direction: column;
}

.col-center {
	text-align: center;
}

.col-dont-break {
	-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
	margin-bottom: 10px;
}
.three-col-flow{
	column-count: 3;
}


.dayOfWeek{
	color: #f1bb0c;
	font-size: 15px;
	padding-bottom: 5px;
	margin: 0px 10px 0px 0px ;
	border-bottom: 1px solid #3e555e;
	text-align: center;
}

.acid-rinse-note {
	font-size:12px;
	color: #f1bb0c;
}
.ampm {
	color: #81959c;
	font-size: 13px;
	margin: 15px 10px -5px 0px;
	text-align: center;
}
.event-title {
	color: #fff;
	font-size: 19px;
	cursor: pointer;
	border-bottom: 0px;
	margin: 10px 10px;
	padding: 16%;
	transition: all 0.3s ease;
	border-radius: 50%;
	height: 48px;
	width: 48px;
	text-align: center;
	border: 2px solid #3e555e;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 15%);
	background: -webkit-linear-gradient(#21353d,#3e555e);
    background: -moz-linear-gradient(#21353d,#3e555e);
    background: -o-linear-gradient(#21353d,#3e555e);
    background: linear-gradient(#21353d,#3e555e);
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    
    background-size:1px 200px;

}


.event-title:hover {
	transform: scale(1.1);
	border: 1px solid #f1bb0c;
	border-top: 1px solid #f1bb0c;
	background-position:100px;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 25%);
}


.icon-row {
	background: #21353d50;
	border-radius: 8px;
	margin: 30px 0px;
	border: 2px solid #3e555e;
}

body {
  padding: 20px;
}
.flex-grid { 
  margin: 0 0 20px 0;
}

.primaryButton {
	width:100%;
	color: #fff;
	padding: 20px;
	font-size: 20px;
	line-height: 1.1em;
	height: 100px;
	border-radius: 8px;
	border: 2px solid #3e555e;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 15%);
	cursor: pointer;
	
	 background: -webkit-linear-gradient(#21353d,#3e555e);
    background: -moz-linear-gradient(#21353d,#3e555e);
    background: -o-linear-gradient(#21353d,#3e555e);
    background: linear-gradient(#21353d,#3e555e);
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    
    background-size:1px 200px;
}

.primaryButton:hover {
	transform: scale(1.05);
	background-position:100px;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 25%);
	border: 1.5px solid #f1bb0c;
	
}
.secondaryButton {	
	margin: 20px 0px;
	padding: 5px;
	border: 0px;
	background: none;
	width: 100%;
    font-weight: 300 !important;
	font-size: 17px;
	color: #81959c;
	cursor: pointer;
	transition: all 0.3s ease;
}

.secondaryButton:hover {
	color: #90a0a6;
}

button.secondaryButton > span.fa-icon { 
		font-size: 22px !important;
		color: #fff;
		margin-right: 10px;
		vertical-align: -2px;transition: all 0.3s ease;
}
button.secondaryButton:hover > span.fa-icon{
		color: #f1bb0c;
}

button.secondaryButton.unlocked > span.fa-icon {
	color: red !important;
}

.thirdButton {
	padding: 10px 20px;
	font-size: 17px;
	color: #fff;
	border: 1px solid #ffffff10;
	border-radius: 25px;
	postion: relative;
	display: inline;
	background: #ffffff10;
	cursor: pointer;
	transition: all 0.1s ease;
}
.thirdButton:hover {
	transform: scale(1.01);
	background: #ffffff20;
}

.loginButton {
	padding: 10px 20px;
	font-size: 17px;
	color: #fff;
	border: 1px solid #ffffff10;
	border-radius: 25px;
	postion: relative;
	background: #ffffff10;
	cursor: pointer;
	width: 100%;
	transition: all 0.1s ease;
	margin-top:20px;
}
.loginButton:hover {
	transform: scale(1.01);
	background: #ffffff20;
}

.modalButtonContainer {
    display: flex;
    justify-content: center;
	gap: 10px;
	margin: 0px -5px 0px 0px;
}
.modalButton {
	padding: 10px 30px;
	font-size: 17px;
	color: #fff;
	border: 1px solid #ffffff10;
	border-radius: 25px;
	postion: relative;
	background: #ffffff10;
	cursor: pointer;
	width: 50%;
	transition: all 0.1s ease;
	margin-top: 10px;
	
}
.modalButton:hover {
	transform: scale(1.01);
	background: #ffffff20;
}

.actionButton {
	width:100%;
	color: #fff;
	padding: 10px;
	font-size: 17px;
	line-height: 1.1em;
	height: 68px;
	border-radius: 8px;
	border: 2px solid #3e555e;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 15%);
	cursor: pointer;
	
	 background: -webkit-linear-gradient(#21353d,#3e555e);
    background: -moz-linear-gradient(#21353d,#3e555e);
    background: -o-linear-gradient(#21353d,#3e555e);
    background: linear-gradient(#21353d,#3e555e);
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    
    background-size:1px 200px;
}

.actionButton.stop {
	border: 2px solid red;
}

.actionButton.go {
	border: 2px solid green;
}

.actionButton:hover {
	transform: scale(1.05);
	background-position:100px;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 25%);
	border: 1.5px solid #f1bb0c;
	
}
.actionButton.stop:hover {
	border: 2px solid red;
}
.actionButton.go:hover {
	border: 2px solid green;
}

	button.actionButton > span.fa-icon { 
		font-size: 22px !important;
		color: #fff;
		margin-right: 10px;
		vertical-align: 0px;transition: all 0.3s ease;
}
	button.actionButton:hover > span.fa-icon{
		color: #f1bb0c;
}

	button.actionButton.stop:hover > span.fa-icon{
		color: red;
}
	button.actionButton.go:hover > span.fa-icon{
		color: green;
}
.valueSection {
	border-bottom: #ffffff10 solid 1px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.valueSpace {
	margin-bottom: 20px;
}
.valueField {
	padding: 10px 20px;
	font-size: 17px;
	color: #fff;
	border: 1px solid #ffffff40;
	border-radius: 25px;
	background: none;
	text-align: center;
}
.valueFieldLeft {
	padding: 10px 20px;
	font-size: 17px;
	color: #fff;
	border: 1px solid #ffffff40;
	border-radius: 25px;
	background: none;
	text-align: left;
}

.valueLabel {
	color: #ffffff50;
}

/*Status page*/
.section-title {
	text-align: center;
	color: #ffffff80;
	font-size: 15px;
	margin: 0 0 28px 0;
}


.status-title, .chem-level {
	text-align: center;

}

.status-title{
	margin-bottom: 20px;
	text-transform: uppercase;
	color: #f1bb0c;
}


.chem-level {
	height: 120px;
	width: 120px;
	background: #ffffff40;
	border-radius: 50%;
	margin:auto;
	padding: 8px 5px 5px 5px;
	color: #fff;
	text-shadow: 0px 0px 20px #21353d, 0px 0px 30px #21353d, 0 0 3px #21353d;
}


.chem-inner-border {
	height: 110px;
	width: 110px;
	border: 3px solid #21353d;
	border-radius: 50%;
	margin: auto;
	position: relative;
	overflow: hidden;
}
.chem-inner-level-1,.chem-inner-level-2,.chem-inner-level-3,.chem-inner-level-4 {
	height: 110px;
	width: 110px;
	border-radius: 50%;
	margin: auto;
	padding: 38% 0;	
}

.chem-inner-level-1::before, .chem-inner-level-2::before, .chem-inner-level-3::before, .chem-inner-level-4::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.3.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 110 110' style='enable-background:new 0 0 110 110%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bopacity:0.9%3Bfill:url(%23SVGID_1_)%3Benable-background:new %3B%7D%3C/style%3E%3Cg%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='55' y1='12.6895' x2='55' y2='105.4432'%3E%3Cstop offset='0' style='stop-color:%23FFFFFF%3Bstop-opacity:0.7'/%3E%3Cstop offset='0.6127' style='stop-color:%23FFFFFF%3Bstop-opacity:5.000000e-02'/%3E%3C/linearGradient%3E%3Cpath class='st0' d='M110 109.9c0-12.7 0-94.4 0-107.1c-2.5-0.4-5.1-0.9-7.6-1.3c-3.5-0.6-7.1-1-10.7-1.2C85.4-0.2 79.1 0.5 72.9 2c-5.1 1.2-10.1 2.7-15.1 4.1C53 7.4 48.2 8.6 43.2 9.4c-2.7 0.4-5.4 0.7-8.1 0.9c-5.8 0.3-11.4-0.4-17-1.7C13.3 7.5 8.7 6 4.1 4.3C2.7 3.8 1.3 3.3 0 2.8c0 12.7 0 94.4 0 107.1H110z'/%3E%3C/g%3E%3C/svg%3E");
}

.chem-inner-level-1::before {
	top: 10%;
}

.chem-inner-level-2::before {
	top: 20%;
}

.chem-inner-level-3::before {
	top: 60%;
}
.chem-inner-level-4::before {
	top: 80%;
}


/*::-webkit-datetime-edit { padding: 0em; }*/
::-webkit-datetime-edit-fields-wrapper { background: none; font-family: ps-regular, Arial, Helvetica, sans-serif !important;}
::-webkit-datetime-edit-text { color: #ffffff40; padding: 0 0.1em; }
::-webkit-datetime-edit-month-field { color: #fff; }
::-webkit-datetime-edit-day-field { color: #fff; }
::-webkit-datetime-edit-year-field { color: #fff; }
::-webkit-inner-spin-button { display: initial; }
::-webkit-calendar-picker-indicator { filter: invert(1); margin-right: -25px; }

/* Drum Sizes CSS */

.five-col-grid {
display: grid;
grid-template-columns: 0.4fr repeat(3, 1fr) 0.6fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 0px;
}
.six-col-grid-drum-size {
display: grid; 
grid-template-columns: 80px 100px 150px repeat(2, 155px) 100px; 
grid-template-rows: 1fr; 
grid-column-gap: 15px;
grid-row-gap: 30px; 
}

input.input-field[type=date] {
	width: 105px;
	height:18px;
}

.modal {
	border-radius: 8px;
	border: 2px solid #3e555e;
	box-shadow: 0px 15px 20px -6px rgb(0 0 0 / 15%);
	cursor: pointer;
	padding: 20px 40px 50px;
	background: #21353d;
	max-width: 420px;
	margin: auto;
	color: #fff;
}
.field-bottom-pad {
	margin-bottom: 18px;
}
.close-modal {
	text-align: right;
	font-size: 30px;
	color: #ffffff20;
	transition: all 0.3s ease;
	margin-top: -10px;
	margin-right: -20px;
	cursor: pointer;
}
.close-modal:hover{
	color: #ffffff80;
}
.modal-note{
	font-size: 14px;
	color: #ffffff50;
	text-align: center;
	margin-top:12px;
}

@media (max-width: 890px) {
.flex-grid-fourths {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;}
	.flex-grid-fourths .col {
		width: 49%;
      margin: 0 0 10px 0;
	}

}
@media (max-width: 560px) {
  .flex-grid,
  .flex-grid-thirds, .flex-grid-fourths {
	  display: block;}
    .flex-grid-thirds .col, .flex-grid .col, .flex-grid-fourths .col {
      width: 100%;
      margin: 0 0 10px 0;
    }
	 .secondaryButton {	
	margin: 5px 0px;
	}
	.icon-row {
	padding: 20px;
}
div.weekday-table-row > div > div:nth-child(7) > div.dayOfWeek {
	margin: 0px 10px 10px 0px;
}	
	.dayOfWeek {text-align: left;}
	.ampm {
		text-align: left;
	}
	.event-title{ padding: 6%; margin: 10px -5px 0px 0px;}
}