*{
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}



body{
	width: 100%;
	background-color: #eaeaea;
	margin: 0;
}

header{
	width: 100%;
	display: flex;
	padding: 1rem 10%;
	background-color: #fff;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 100;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}

.logo{
	height: 1rem;
}

header a{
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	font-size: 0.7rem;
	padding: 0.3rem 0.5rem;
	background-color: #00a9ef;
	border-radius: 1.5rem;
}

.content{
	width: 70%;
	margin: 5% auto;
	padding: 3rem;
	text-align: left;
    border-radius: 0.5rem;
}

.submit, .form-group, .live-search, .boxed, .date, .highlight, .fav-bar .dash-item, .fav-bar, h1 {
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}

.lock-bottom {
    position: sticky;
    bottom: 20px;
}

.flex{
    display: flex;
    gap: 1rem;
}

.flex > div:not(.action){
    width: 100%;
}

h1 {
    color: #fff;
    font-weight: 500;
    padding: 0.5rem;
    margin: 0 0 2rem 0;
    background-color: #333;
    border-radius: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    font-weight: 600;
    position: sticky;
    top: 5rem;
    z-index: 999;
}

h2, h3{
    margin: 0 0 0.5rem 0;
}

.search-box{
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
}


.form-group{
    background-color: #fff;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.2rem;
    font-size: 1rem;
    position: relative;
}

.form-group.flex div:not(.action){
    width: 100%;
}

.boxed{
    border: 3px solid #aeaeae;
    border-radius: 0.2rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.boxed > p{
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    background-color: #aeaeae;
    color: #fff;
}

.boxed .form-group{
    margin: 0.5rem 1rem;
}

.boxed .highlight{
    margin: 0 1rem;
}

.med .form-group, .med.form-group{
    border: 1px solid #cfcfcf;
}

.flex.center{
    justify-content: center;
}

.flex.wrap{
    flex-wrap: wrap;
}

.thick{
    border: 3px solid #00699f;
    display: flex;
    margin-bottom: 1rem;
    border-radius: 0.2rem;
}

.thick .form-group{
    width: 100%;
    margin-bottom: 0;
}

b{
    letter-spacing: 1px;
}

.outer{
    padding: 0.5rem;
    width: fit-content;
    background-color: #00699f;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.outer i{
    color: #fff;
    font-size: 1rem;
}

.form-group p:first-of-type{
    margin-top: 0;
}

.short input{
    width: 95%;
}

.flickity-prev-next-button{
    background: #333 !important;
    color: #fff !important;
    border-radius: 0.2rem !important;
    height: 1.5rem !important;
    width: 1.5rem !important;
}

.flickity-prev-next-button.next{ right: -3rem !important; }
.flickity-prev-next-button.previous{ left: -3rem !important; }

i{
    color: #00a9ef;
}

.bold, label, .submit, .action{
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
}

.service-label {
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
}

a{
    text-decoration: none;
}

.lowercase{
    text-transform: lowercase;
}

.untransform{
    text-transform: none;
}

button{
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.search-box{
    padding: 2rem 3rem;
}

.date{
    background-color: #00a9ef;
    padding: 0.2rem 0.5rem;
	border-radius: 3rem;
    border: 3px solid #00a9ef;
    color: #fff;
    height: fit-content;
    font-size: 12px;
    font-weight: 600;
}

.date.unused{ background-color: #fff; }
.date.ghost{ background-color: #d3d3d3; border: 3px solid #d3d3d3; }
.date.half{ background-color: #00a7ef49; border: 3px solid #00a7ef49; }
.date.dna{ background-color: #ffa3a3; border: 3px solid #ffa3a3; }
.sess-circle.dna{ background-color: #ffa3a3; }

.action{
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 1rem;
    text-transform: uppercase;
    padding: 0.5rem;
    border-radius: 0.2rem;
    font-size: 12px;
}

.action div{
    padding: 0.5rem;
    border-radius: 0.2rem;
}

.action.mini{
    top: 0.5rem;
    right: 0.5rem;
}

.action i{
    font-size: 1rem;
}

.action .red, .action.red{ background-color: #ffd4d4; }
.action .orange, .action.orange{ background-color: #ffe6c4; }
.action .yellow, .action.yellow{ background-color: #fffab7; }
.action .green, .action.green{ background-color: #caffd2; }
.action .blue, .action.blue{ background-color: #cef0ff; }
.action .purple, .action.purple{ background-color: #d9ceff; }
.action .pink, .action.pink{ background-color: #ffcef0; }
.action .lime, .action.lime{ background-color: #e3ffb7; }

.action .bright{
    background-color: #d4fff6;
    border: 2px solid #5fffde;
}

label{
    margin-bottom: 0.5rem;
    display: block;
}

input, select, textarea{
    padding: 0.5rem;
    outline: 1px solid #999;
    border-radius: 0.2rem;
	width: 100%;
    display: block;
	font-size: 12px;
	border: none;
}

input:focus-visible, select:focus-visible{
	outline: 1px solid #00a9ef;
}

.radio-group{
    display: flex;
    justify-content: space-around;
}

.radio-group label{
    font-weight: 400;
}

input[type="radio"]{
    outline: none;
    margin: 0 0 0.5rem 0;
}

input[type="checkbox"]{
    width: auto;
    outline: none;
}

.check-group label{
    display: flex;
    gap: 1rem;
    align-items: center;
}

.highlight{
    margin-top: 0.5rem;
    background-color: #c9efff;
    padding: 0.5rem;
    border-radius: 0.2rem;
}

.highlight a{ color: #00a9ef; }

.submit{
    background-color: #00a9ef;
    color: #fff;
    outline: none;
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    border-radius: 3rem;
}

.darker{
    background-color: #00699f;
}

.subtle{
	color: #a4a4a4;
    font-weight: 400;
	font-style: italic;
}

.red-text{
    color: #ff5c5c;
}

.red{
    background-color: #ff5c5c;
}

.submit, button, a{
    cursor: pointer;
}

.empty{
	background-color: #f5f5f5;
    padding: 0.5rem;
    border-radius: 0.2rem;
    text-align: center;
	font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a1a1a1;
    font-size: 12px;
}

.fa-folder-open{ color: #ffc77c; }
.fa-circle-check,
.fa-check-circle,
.fa-thumbs-up{ color: #2fd158; }
.fa-circle-half-stroke{ color: #f4d900; }
.fa-ghost{ color: #8d9ecd; }
.fa-circle-exclamation,
.fa-circle-minus,
.fa-folder,
.fa-circle-xmark,
.fa-times-circle,
.fa-thumbs-down{ color: #f13737; }
.fa-angle-double-right{ color: #333; }
.fa-chart-pie{ color: #ff6aaf; }
i.untrue { color: #aeaeae; }

.form-group ul{
    font-size: 12px;
    padding-left: 1rem;
    margin-top: 0.2rem;
}

.no-margin{ margin: 0; }

.double-input{
	display: flex;
	gap: 1rem;
	width: 100%;
}

.double-input .form-group{
	width: 100%;
}

.btm-btn{
    margin-top: 2rem;
}

.hide{
    display: none;
}

.inactive{
    background-color: #cbcbcb;
}

.active{
    background-color: #00a9ef;
}

.greyed{
    background-color: #eaeaea;
    color: #888;
}

.float-right {
    float: right;
}

.region {
    background-color: #000;
    color: #fff;
}

.district {
    background-color: rgb(204, 204, 204);
    color: #000;
}

.district > option {
    background-color: #fff;
    color: #000;
}

.support-prev {
    width: 100%;
}

.hidden-for-search {
    position: absolute; 
    width: 1px;         
    height: 1px;
    overflow: hidden;   
    clip: rect(1px, 1px, 1px, 1px); 
    clip-path: inset(50%);         
    white-space: nowrap; 
}