:root{
	--coil-blue: #0C4459;
	--coil-button-blue: #0C4459;
	--coil-button-color: white;
	--coil-dark:rgb(9,10,40);
	--header-blue: #0C4459;
	--subheader-blue: #0C4459;
	--renew-green: #2d401c;	
	--coil-white: white;
	--needs-attention: rgba(255, 235, 150, 1);
	--text-grey: #474747;
	--active: #007f00;
	--coil-folder: #f9f4dd;
	
	--coil-blue-active: rgb(54, 87, 102);
	--coil-bright: #D9D9D9;
	--old-button-blue: rgba(67, 64, 107, 1);
	--coil-admin: teal;
	--coil-warn: maroon;
	--coil-dev-color: orange;

	--coil-course-open: #019b01;
	--coil-course-partnered: #b38010;
	--coil-course-closed: #0a0a70;
	--inactive-bg: #fcdde2;
	--chat-idle: #316e83;
	--graphcat-impl: grey;
	--graphcat-infra: white;
	--graphcat-assess: white;
}



@font-face{
	font-family: 'gill-sans-bold';
	src: url('/resource/fonts/gill-sans/Gill Sans Bold.otf');
}
@font-face{
	font-family: 'gill-sans-medium';
	src: url('/resource/fonts/gill-sans/Gill Sans Medium.otf');
}

.bold{ font-weight: bold }

#xyzzy{
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 50px;
	padding-left: 50px;
	width: 100%;
	height: 100%;
	background: var(--coil-dark);
	z-index: 99999;
	transition: 1s;
	opacity: 1;
}
#xyzzy *{
	color: var(--coil-bright)
}

/* .gill-sans{
	font-family: 'gill-sans';
} */
.gill-sans-bold{
	font-family: 'gill-sans-bold';
}
.gill-sans-medium{
	font-family: 'gill-sans-medium';
}

#coil-register.logged{
	background: #088a9f;
}


#staging{
	position: fixed;
	z-index: 999999;
	top: 10px;
	left: 10px;
	padding: 10px;
	background: #da5f11;
	color: white;
}

#init-hal{
	display: none;
}

.coil-blue{
	color: var(--coil-blue)
}

#site-data{
	display: none;
}

textarea{
	width: 100%;
    min-height: 100px;
}


#construction{
	position: fixed;
	z-index: 9999;
	font-size: 1.7rem;
	text-align: center;
/* 	width: 100%; */
	top: 60px;
	left: 30%;
	font-weight: bold;
/* 	color: #b70606; */
	color: orange;
	background: rgba(0, 0, 0, .1);
	transform: rotate(-4deg);
	pointer-events: none;
	display: inline-block;
}

body{

    scroll-behavior: smooth;

    margin: 0;
    /* background: lightgrey; */
    color: var(--text-grey);
    /* font-family: sans-serif; */
/*     font-family: Courier */
	/* font-family: gill-sans-medium */
	/* font-family: Alata; */
	
	font-family: "gill-sans-medium";
	background: var(--coil-white);
}

p,
h1, h2, h3, h4, h5, h6,
input, 
li{
	color: var(--text-grey);
}

input,
option{
/*	font-family: Alata;*/
/*	font-family: gill-sans;*/
}

img{
	max-width: 100%;
}

div,
form,
input,
span,
ul,
li,
a,
canvas,
button, 
pre{
    box-sizing: border-box;
}

form input,
#forgot-form input,
.coil-input{
    background: transparent;
    border: 0px;
    border-left: 1px solid;
    width: 100%;
    margin: 10px 0;
    padding: 5px 10px;
    color: black;
    font-size: 16px;
}
input[type=checkbox].coil-input{
	width: 25px;
	height: 25px;
	display: inline-block;
	margin: 5px;
}
select.coil-input{
	background: #e7e7e7;
}


input:focus,
select:focus{
/*     background: rgba(0,0,0,.1); */
    outline: 0;
}

input:focus::placeholder{
/* 	color: white; */
}

.button{
    
    display: inline-block;
	
    width: auto;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: sans-serif;
    font-family: gill-sans-medium;
    padding: 5px 7px 0px 7px;
    user-select: none;
    background: var(--coil-button-blue);
    color: var(--coil-button-color);
	border-radius: 3px;
}
a.button{
	text-decoration: none;
}
.button a{
	color: white;
	text-decoration: none;
}

.button:hover{
	background: rgba(67, 64, 107, .8);
}
.button:active{
	background: rgba(67, 64, 107, .6);
}

.secondary-button{
	color: #297029;
	cursor: pointer;
	display: inline-block;
}

.secondary-button:hover{
	color: #44bc19;
}

.button.submit{
    display: inline-block;
    width: auto;
    min-width: 50px !important;
}

#spinner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
    z-index: 999999;
    user-select: none;
    background: rgba(0, 0, 0, .3);
}
#spinner.contained{
	position: absolute;
	background: transparent;
}
#spinner img{
	max-width: 70px;
}

.coil-wrapper{
	text-align: center;
}
.coil-constrain{
	display: inline-block;
	width: 100%;
	max-width: 1000px;
	text-align: left;
}
.coil-constrain>*{
/* 	font-size: initial; */
/* 	font-size: bla; */
}

.coil-text-width{
	padding: 0 6% 100px 6%;
}

.coil-text-width h1{
	color: var(--coil-blue);
}

.coil-text-width p{
	font-size: 1.2rem;
}

.coil-row{
	font-size: 0;
	width: 100%;
	position: relative;
}

.column{
	width: 100%;
	display: inline-block;
	vertical-align: top;
	font-size: initial;
/* 	border: 1px solid; */
}


.column-2{
    max-width: 50%;
}
.column-3{
	max-width: 33.3%;
}
.column-4{
	max-width: 25%;
}
.column-5{
	max-width: 20%;
}
.column-6{
	max-width: 16%;
}
.column-7{
	max-width: 14%;
	overflow: auto;
}
.column-8{
	max-width: 12%;
/* 	overflow: auto; */
}
.column-9{
	max-width: 11%;
/* 	overflow: auto; */
}
.column-2-3{
	max-width: 66%;
}


.header-item{
	font-size: initial;
	display: inline-block;
	background: var(--coil-blue);

	color: white;
	vertical-align: top;
	position:relative;
	text-transform: uppercase;
	cursor: pointer;
	font-family: verdana;
	font-family: gill-sans-medium;
	width: calc(20% - 4px);
	margin: 0 2px;
	user-select: none;
}

.spacer{
	display: inline-block;
	width: 100%;
	height: 50px;
}

.coil-folder .coil-folder{
	/* border: 2px solid red; */
	background: #ebddb0;
	padding: 5px;
	border-radius: 10px;
}


/* .hi-home{
	width: 7%;
}
.hi-who{
	width: 12%;
}
.hi-connectspace{
	width: 14%;
}
.hi-programs{
	width: 20%;
}
.hi-courses{
	width: 18%;
}
.hi-organizations{
	width: 16%;
}
.hi-resources{
	width: 10%;
} */
.header-item *{
	font-size: 14px;
	/* letter-spacing: 2px; */
}
.header-item .flex-liner{
	height: 100%;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: center;
	padding: 5px 0 0 0;
}
.header-item a{
	color: white;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	/* padding: 10px 0 0 0; */
}
.header-item a,
.header-item .flex-liner{
	/* font-weight: bold; */
	font-size: 16px;
}
.header-item.has-drop:hover,
.header-item a:hover{
	color: lightgrey;
}
.header-item.active{
	pointer-events: none;
	background: var(--coil-blue-active);
}
.active.header-item .flex-liner{
	opacity: .3;
}

.header-item-drop{
	display: none;
	position: absolute;
	background: white;
	left: 0;
	padding: 2px 0 0 0;
}
.splash .header-item-drop{
	background: var(--coil-dark);
}
.header-item-drop ul{
	padding-left: 0;
	text-align: left;
	margin: 0;
}
.header-item-drop li{
	list-style: none;
	background: var(--coil-blue);
	margin-top: 2px;
}

.header-item-drop a{
	padding: 0;
	padding: 12px 10px;
	font-size: 14px;
}

.header-item.dropped{
	/* background: black; */
	/* background: #1d3375; */
}
.header-item.dropped>.flex-liner{
	animation: pulse 1s infinite linear;
}
.dropped .header-item-drop{
	display: inline-block;
	width: 100%;
}


#sub-nav-toggle{
	position: relative;
	z-index: 9999;
	vertical-align: middle;
}
#sub-nav-toggle{
	display: inline-block;
	font-size: .9rem;
	vertical-align: middle;
	border-bottom: 2px solid transparent;
	margin: 0 10px 0 30px;
	padding: 3px 8px;
}
#sub-nav-drop{
/* 	the toggle */
	color: white;
	cursor: pointer;
	text-transform: uppercase;
	font-size: .8rem;
	font-weight: bold;
/* 	margin-left: 30px; */
}
#sub-nav-drop .arrow{
	position: absolute;
	left: -10px;
	top: 0%;
}
.toggled #sub-nav-drop .arrow{
	transform: rotate(90deg);
}
#sub-nav-toggle.sub-toggled{
	background: white;
}
.sub-toggled #sub-nav-drop{
	color: blue;
}
.sub-toggled #sub-nav-content{
	display: inline-block;
}
#sub-nav-content{
/* 	border: 2px solid yellow; */
	position: absolute;
	z-index: 99;
	top: 0px;
	right: calc(100% + 5px);
	width: 200px;
	background: white;
	text-align: left;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

	display: none;
}
#sub-nav-content .nav-item{
	display: block;
	margin: 10px 0
}
#sub-nav-content .nav-item a{
/* 	color: orange; */
	color: black;
	background: transparent;
}

/* .shrunk{
	height: 0%;
	opacity: 0;
	overflow: hidden;
}
.unshrunk{
	height: 100%;
	opacity: 1;
} */

#header{
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0px;
	width: 100%;
	height: 90px;
	/* text-align: center; */
	background: white;
	/* 	background: lightgrey; */
	/* background: var(--coil-blue); */
	/* box-shadow: 0px 0px 10px rgba(0,0,0,.8); */
	border-bottom: 1px solid lightgrey;
}
#header-cap{
	margin-bottom: 15px;
	margin-top: 0px;
	margin-left: 22px;
	font-size: 17px;
	text-transform: uppercase;
	font-family: gill-sans-medium;
	letter-spacing: 5px;
	line-height: 10px;
}
#header-cap a{
	color: var(--coil-dark);
}
#header-cap span{
	font-size: 28px;
	font-family: gill-sans-bold;
}
#header-cap a{
	text-decoration: none;
}
.splash #header-cap a{
	color: lightgrey;
}

#header-contain{
	width: calc( 100% - 40px);
	margin-left: 20px;
	position: relative;
	font-size: 0px;
	/* border: 1px solid red; */
}
.toggled #header-contain{
	margin-top: 70px;
}

#header-contain .header-item{
	height: 30px;
}

input:-webkit-autofill{
	-webkit-box-shadow: 0 0 0px 1000px lightgrey inset;
}
input:-webkit-autofill:focus{
	-webkit-box-shadow: 0 0 0px 1000px grey inset;
}

select{
	margin: 10px 0;
}

input[type='number']{
	display: inline-block;
	width: auto;
	border-left: 0;
/* 	border: 2px solid; */
}

.header-section{
    vertical-align: top;
}
.header-section:nth-of-type(1){
	/* max-width: 28%; */
	text-align: left;
}
.header-section:nth-of-type(2){
/*     position: relative; */
	text-align: right;
    max-width: 72%;

}



#content{
	margin-top: 70px;
}

#header,
#content{
    padding: 20px;
}
#header{
	padding-left: 0;
	padding-right: 0;
}

#content p{
	/*max-width: 750px;*/
}

#errors{
    display: none;
}

.flex-liner{
	display: flex;
	justify-content: center;
	align-items: center;
}



#alert-contain{
	position: fixed;
	bottom: 70px;
	right: 10px;
	z-index: 999999999;
	text-align: right;
	width: 100%;
	pointer-events: none;
}

#alert-contain .alert-msg{
	display: inline-block;
	background: lightgrey;
	padding: 8px 14px;
	padding-right: 60px;
	position: relative;
    margin: 5px 0;
    max-width: 500px;
    text-align: left;
    color: black;
    letter-spacing: 1px;
    pointer-events: initial;
	box-shadow: 0px 0px 10px rgba( 0, 0, 0, .6);
	border-radius: 10px;
}

.alert-close{
    position: absolute;
	z-index: 99;
    right: 0;
    top: 0;
    background: rgb(0,0,0);
	display: inline-block;
	padding: 5px 8px;
	cursor: pointer;
    pointer-events: initial;
    color: white;
	border-radius: 0 10px 0 0;
}


.ui-minimize,
.ui-fullscreen{
	position: absolute;
	top: 0px;
	right: 0px;
	background: black;
	padding: 5px;
	color: white;
	transform: rotate( 90deg);
	width: 30px;
	height: 30px;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;

	user-select: none;
}


.ui-fader{
    transition: .5s;
    opacity: 1;
}

.standard .alert-close{
	color: white;
}
#alert-contain a{
	font-weight: bold;
	background: rgba(255, 255, 255, .5);
	color: black;
	padding: 0 3px;
	text-decoration: none;
	border-radius: 3px;
	display: block;
	text-align: center;
	margin-top: 5px;
}
#alert-contain .standard{
	color: black;
	background: lightblue;
}
#alert-contain .error{
	background: maroon;
	color: white;
}
#alert-contain .dev{
	background: #da5f11;
}
#alert-contain .success{
	background: rgb(115, 200, 100)
}
#alert-contain .test{
	background: #eac0ea;
}
/* info */
#alert-contain .info .alert-close,
#alert-contain .info.alert-msg{
	border-radius: 0px;
}
#alert-contain .info.alert-msg{
	padding-right: 15px;
	max-width: 350px;
	right: 50px;
	top: 200px;
	bottom: initial !important;
	position: fixed;
}

#alert-contain .alert-msg.direct_message{
	background: white;
	padding: 20px 40px 20px 20px;
}

#alert-contain .combat{
    background: linear-gradient( 12deg, orange, red );
    color: black;
}
.combat .alert-close{
	color: white;
}

input.error{
/* 	border: 1px solid maroon; */
	background: pink;
}

input.hovered,
select.hovered{
/* 	for dev */
    background: rgba( 255, 0, 0, .1);
}

body.programs #content{
/* 	margin-top: 0; */
	/* box-shadow: 0px 0px 10px rgba( 0, 0, 0, .5); */
	position: relative;
}
body.programs{
	overflow-x: hidden;
}

#map{
	text-align: center;
/* 	background: #f5e4cc; */
	height: 250px;
	margin-top: 110px;
/* 	background: red; */
	overflow: hidden;
	position: relative;
/* 	background: yellow; */
/* 	border: 2px solid; */
    background: radial-gradient( black, black, #2d3150 );
    background-position: 0% 50%;
/*     border: 10px solid green; */
/* 	background-image: url('/resource/stars.jpg'); */
}

#map canvas{
	width: 100%;
	height: 100%;
/* 	height: 450px; */
	box-sizing: border-box;
/* 	border: 10px solid red; */
/* 	background: blue; */
}

#coil-intro{
	text-align: left;
	padding-bottom: 30px;
}

#coil-intro2{
	text-align: center;
	/* padding-top: 40px; */
}
#coil-intro2 h2{
	font-weight: 100;
	color: var(--coil-blue);
	text-align: left;
	font-size: 2.4rem;
}
#coil-intro2 li{

/* 	list-style: none; */
	text-align: left;
}

#coil-intro2 ul{
/*	max-width: 450px;*/
	display: inline-block;

/* 	padding-left: 0px; */
}

#coil-subtitle{
	background: var(--coil-blue);
	width: 100%;
/* 	max-width: 100%; */
	position: fixed;
	z-index: 9;
	top: 110px;
	padding: 5px 0 9px 0;
	left: 0px;
	color: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

    text-align: center;

	display: none;
/* 	font-weight: 100; */
}

.programs #coil-subtitle{
	display: initial;
}

/* #map svg{
	max-width: 100%;
	margin-top: 25px;
	display: inline-block;
}

svg path:hover{
	fill: rgba(0, 0, 0, .1) !important;
}
svg path.ocean:hover{
	fill: white !important;
} */




.disabled{
	opacity: .4;
	pointer-events: none;
	user-select: none;
}
.no-select{
	user-select: none;
}

#map-controls{
	display: none;
	position: absolute;
	z-index: 9;
	bottom: 0;
	right: 0;
}

.map-control:hover{
	color: white;
}

.map-control{
	display: inline-block;
	font-size: .8rem;
	padding: 10px;
	cursor: pointer;
}

#criteria{
    text-align: center;
    margin: 10px 0;
/*     display: inline-block; */
/*     border: 1px solid; */
}
.criteria{
	display: inline-block;
	line-height: 25px;
}
.criteria input{
	width: 25px;
	height: 25px;
    vertical-align: bottom;
}

#query{
	margin-top: 10px;
}

.hidden{
	display: none;
}
.invisible{
	pointer-events: none;
	opacity: 0;
}

.inline-error{
	color: #bf5050;
}

.clarification{
	font-style: italic;
/* 	opacity: .5; */
}

.attention{
	color: #258e0a;
}



#coil-search{

    display: none;

/* 	entire div */
	padding: 0 10px;
	text-align: center;
}

#coil-search .page-title{
	text-align: left;
}

#program-search{
	color: black;
}

#program-list{
/* 	margin-top: 20px; */
/*     max-height: 350px; */
	/* overflow-y: auto; */
	margin-bottom: 10px;
	
/* 	background: lightgrey;; */
/* 	border-bottom: 3px solid black; */
}

#admin-login{
	position: absolute;
	left: -100px;
/* 	bottom: -10px; */
/* 	height: 20px; */
/* 	border: 2px solid; */
/* 	position: fixed; */
/* 	z-index: 999999; */
/* 	bottom: -3px; */
/* 	right: 0px; */
/*     left: 50%; */
/*     margin-left: -30px; */
}
#header .button.admin,
#admin-login .button{
	padding: 8px;
	background: var(--coil-admin);
}
#header .button.admin{
	position: absolute;
	top: 5;
	bottom: auto;
	right: 5;
	left: auto;
	z-index: 99;
}

#footer{
	position: relative;
	background: grey;
	color: white;
	padding: 30px 0 50px 0;
}

.programs #footer{
/* 	(bottom popup) */
    padding-bottom: 80px;
}

#footer li{
	list-style: none;
}

#footer .column:nth-of-type(3){
	text-align: center;
/* 	display: flex; */
}

#coil-social{
    
    display: none;

	padding-top: 10px;
}

a.coil-social{
	max-width: 35px;
	margin: 0 5px;
	display: inline-block;
}

#coil-register{
	display: none;
	position: fixed;
	width: 40%;
	z-index: 999;
	left: 0;
	top: calc( 100vh - 70px);
	box-shadow: 0px 0px 10px rgba( 0, 0, 0, .5);
	background: var(--coil-blue);
	padding: 0 1%;
	transition: .1s;
	text-align: center;
	padding-bottom: 50px;
	/*     border: 1px solid blue; */
}
#coil-register.hovered-popup{
	top: auto;
	bottom: 0px;	
}
/* #coil-register:hover{
	top: auto;
	bottom: 0px;
} */
#coil-register ul{
	max-width: 360px;
	display: inline-block;
	/* 	background: white; */
	/* 	padding: 50px; */
	/* 	padding-left: 70px */
	/* 	display: inline-block; */
}
#coil-register li{
	text-align: left;
	/* 	list-style: decimal; */
	color: #cacae6;
	/* 	display: inline-block; */
	/* 	padding: 20px; */
	list-style: decimal;
	font-size: 1.2rem;
}
#coil-register h3.button{
	margin: 10px 0;
}
/* #coil-register  */
#coil-register h4,
#coil-register h3{
    font-weight: 100;
}
#coil-register *{
    color: white;
}
#coil-register h4 a,
#coil-register h3 a{
	text-decoration: none;
}

#no-thanks{
	cursor: pointer;
	color #f7ff08;
	text-decoration: underline;
}
.underline{
	text-decoration: underline;
}

.mobile-only{
	display: none;
}

.toggled .header-section:nth-of-type(2){
	top: 80px;
}

#logo-bg{
/*     display: none; */
	position: absolute;
	z-index: -1;
/* 	background: linear-gradient(90deg, #9c9cec, transparent); */
	top: 0;
	left: 0;
	/* width: 400px; */
	/* height: 110px; */
}


#auth-area{
	position: absolute;
	top: 65px;
	right: 20px;
}

#auth-area .nav-item .button{
	color: lightgrey;
/* 	background: rgba( 255,255, 255, .1) */
}

#option-toggle{
	margin: 20px 0;
}

.follow-up{
	background: #f5f3de;
	display: none;
	padding: 10px;
}

.follow-up input{
    width: 100%;
    max-width: 500px;
}

#terms-popup{
	position: fixed;
    z-index: 999;
    top: 110px;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 20px;
	display: none;
    
    text-align: center;

}

#terms-popup .button{
	font-size: initial;
}

#terms-content{
	display: inline-block;
	text-align: left;
	background: white;
/* 	right: 5%; */
    margin-top: 25vh;
	box-shadow: 0px 0px 50px black;
	padding: 20px;
}

#terms-accept{
	text-align: center;
	margin-top: 20px;
}

#terms-accept .button:nth-of-type(1){
	margin-right: 20px;
	opacity: .6;
}
#terms-accept .button a{
	text-decoration: none;
	color: white;
}

#terms-popup input{
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
}

#view-terms{
	margin-top: 15px;
	cursor: pointer;
}
#view-terms a{
	display: block;
	text-decoration: none;
}


.suggestion-wrapper{
	position: fixed;
	z-index: 9999;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, .5);
/* 	box-shadow: 0px 0px 10px; */
/* 	font-size: initial; */
}

.suggestion-popup{
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	background: white;
	padding: 3%;
}

.suggestion-popup input{
	width: 100%;
    margin-bottom: 20px;
}
.suggestion-popup textarea,
.suggestion-popup input{
	border-radius: 0px;
	border: 1px solid lightgrey;
}
.suggestion-popup textarea,
.suggestion-popup .button{
/*     box-shadow: 0px 0px 10px black; */
}

.word-count{
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 99999;
	font-size: initial;
	color: black;
	background: white;
	padding: 5px;
}
.word-count.overboard{
    border: 2px solid red;
    background: rgb(255, 200, 200) !important;
}


.color-swatch{
	position: fixed;
	z-index: 9;
	left: 0;
}
.color-swatch:nth-of-type(4){
	bottom: 75px;
}
.color-swatch:nth-of-type(3){
	bottom: 100px;
}
.color-swatch:nth-of-type(2){
	bottom: 125px;
}
.color-swatch:nth-of-type(1){
	bottom: 150px;
}

option.option-child{
	margin-left: 15px;
	display: inline-block;
}
.option-group{
	font-weight: bold;
	margin-top: 10px;
}

.content-iframe{
	width: 80%;
	height: 500px;
	margin-left: 10%;
}

.qr-iframe{
	width: 100%;
	min-height: 400px;
}
#popup-steps ul{
    max-width: 600px;
}

body.register p{
    max-width: 700px;
}

.paragraph-intro{
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--coil-blue);
}

#news-test{
	background: white;
    padding: 10px;
}
#popup-news-wrapper h3{
	text-transform: uppercase;
}
#news-test p{
	color: var(--coil-blue);
    text-align: left;
}

.fast-login{
    background: pink;
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    margin: 20px;
}
.uppercase{
	text-transform: uppercase;
}
.font-spacing-1{
	letter-spacing: 1px;
}

.template-explain{
	padding-left: 200px;
}

input[type=checkbox]{
	width: 20px;
	height: 20px;
}

#register input[type=checkbox]{
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-left: 10px;
}

.highlighted,
#searchResults .coil-row.highlighted{
	background: var(--needs-attention)
}


.blink{
	animation: blink 3s infinite;
}
.pulse{
	animation: pulse 2s infinite;
}
.hint{
	animation: hint 1s infinite;
}


.video-wrapper{
	width: 1000px;
	max-width: 100%;
}

.video-wrapper video{
	max-width: 100%;
}

#spacecount{
	position: absolute;
	top: 80%;
	right: -10px;
	z-index: 99;
	background: #088a9f;
	background: white;
	padding: 2px 5px;
	display: none;
	width: 160px;
	pointer-events: none;
	
	/* color: white; */
	border-radius: 4px;
}

.coilspace-btn a{
/* 	background: #088a9f !important; */
}
.coilspace-btn{
	position: relative;
}

#menu-courses-nav{
	display: none;
}

input.box-indexer{
	max-width: 50px;
	margin-left: 10px;
}

.coil-quill-container{
	/*
		currently on Orgs only
	*/
	height: 300px;
	max-height: 30vh;
}

.programs .popup-header{
	height: 100px;
	border: 1px solid;
	background: url('/resource/popup-header.jpg');
	background-size: cover;
	text-align: center;
	padding-top: 30px;
	font-size: 2rem;
	color: white;
}

.modal.admin-popup{
	z-index: 9999;
	height: 100vh;
	overflow: hidden;
	background: rgba(0,0,0,.3);
}
.modal.admin-popup .alert-close{
	top: 0px;
	right: 0px;
}
.modal.admin-popup .modal-content{
	overflow-y: auto;
	max-height: calc(100vh - 140px);
	top: -50px;
	max-width: 60%;
}
.admin-popup p{
	margin: 3px 0;
}

#clear-popup{
	position: fixed;
	bottom: 20px;
	left: 20px;
/*	background: var(--coil-admin);*/
	background: var(--coil-blue);
}

#search-by-name{
	background: #c4dcf6;
	padding: 10px;
}
#search-by-name input{
	background: white;
}

#intro-actions{
	padding-left: 55px;
	margin-bottom: 15px;
	position: relative;

	display: none;
/* 	border: 3px solid; */
}
#intro-actions a,
#intro-actions .button{
	background: var(--coil-blue) ;
}
#intro-actions div{
	display: flex;
	justify-content: space-between;
	
}

.modal.add-inst .modal-content{
/* 	padding: 40px 70px; */
	max-width: 600px;
/* 	background: rgb(150, 200, 200); */
/* 	box-shadow: 0px 0px; */
/* 	border: 1px solid; */
	background: aliceblue;
}
.modal.add-inst{
/* 	background: white; */
/* 	z-index: 9; */
}

.intro-popup .modal-content{
	width: 100%;
	max-width: 950px;
}

.step-content{
/* 	border: 2px solid green; */
/* 	min-height: 300px; */
	padding-right: 10px;
}
.step-content ul{
	padding-left: 20px;
}

.step-nav{
	margin-top: 10px;
}

.intro-popup .column-2{
	min-height: 470px;
	position: relative;
}
.intro-popup .column-2:nth-of-type(1){
	max-width: 47%;
}
.intro-popup .column-2:nth-of-type(2){
	max-width: 52%;
}
.intro-popup .full-screen{
/* 	border: 2px solid blue; */
/* 	max-width: 300px; */
}
.intro-popup .full-screen .column-2:nth-of-type(2){
	display: none;
}
.intro-popup .full-screen .column-2:nth-of-type(1){
	max-width: 100%;
	text-align: center;
}
.intro-popup .full-screen .full-screen-liner{
	display: inline-block;
	max-width: 400px;
	text-align: left;
	padding-top: 50px;
}

.intro-popup .flex-wrapper{
	justify-content: center;
	align-items: center;
}
.intro-popup .next,
.intro-popup .close{
	float: right;
}

#view-intro{
	background: var(--coil-blue);
	display: inline-block !important;
	position:absolute;
	top: 0;
	left: 50%;
	margin-left: -70px;
}

body.error #content{
	min-height: 50vh;
}
#mobile-toggle{
	display: none;
}

.button.marked-editor{
	background: var(--coil-admin);
}
.marked{
	position: relative;
}
.marked .marked-editor{
	position: absolute;
	right: 0;
	bottom: 0px;
}

.marked-page #content{
	text-align: center;
}
.marked-page .marked{
	max-width: 1000px;
	display: inline-block;
	text-align: left;
	width: 100%;
}

.button.stack-edit{
	background: white;
	border: 6px solid;
	border-top-color: yellow;
	border-right-color: lightblue;
	border-bottom-color: lightgreen;
	border-left-color: orange;
	color: black;
	border-radius: 8px;
	text-transform: initial;
}
.modal-content .md-save{
	position: absolute;
	right: 20px;
}
.modal.edit-marked .modal-content{
	padding-top: 0px;
}
.modal.edit-marked textarea{
	font-size: .8rem;
	min-height: 250px;
}

body.guidebook h3{
	padding: 0 10px;
}



.wtf{
	display: inline-block;
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 220;
	left: 110;
	z-index: 99;
}

#my-links{
	/* border: 2px solid; */
}
#my-links a{
	border: 1px solid grey;
	margin: 5px 0;
	display: inline-block;
	padding: 5px;
	max-width: 300px;
}

.warning{
	background: var(--coil-warn);
}
.warn-text{
	color: var(--coil-warn);
}
.admin-bg{
	background: var(--coil-admin);
	color: white;
}
.admin-text{
	color: var(--coil-admin);
	
}
.data-embed{
	display: none;
}

.drop-choices{
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	padding: 10px;
	background: white;
	box-shadow: 0px 0px 10px;
	border-radius: 5px;
	overflow-y: auto;
}
.drop-choices .choice{
	padding: 5px 0;
	cursor: pointer;
}
.drop-choices .choice:hover{
	background: lightgrey;
}

.coil-folder-contents{
	display: none;
	padding: 5px 0;
	padding-top: 0;
	position: relative;
	min-width: 400px;
}

.waiver-past{
	padding: 10px;
}

.coil-folder-contents.selected,
.coil-folder-contents.selected .coil-folder-contents.selected{
	display: inline-block;
}

.coil-folder-nav{
	/* margin-bottom: 20px; */
}
.coil-tab{
	display: inline-block;
	/* border: 2px solid transparent; */
	padding: 5px 10px;
	background: lightgrey;
	cursor: pointer;
	font-weight: bold;
	user-select: none;
	border: 1px solid transparent;
	border-bottom: 1px solid grey;
	margin: 0 1px;
	border-radius: 7px 7px 0 0;
	position: relative;
	z-index: 9;
	transform: translate(1px, 1px)
}
.coil-tab:nth-of-type(1){
	margin-left: 10px;
}
.coil-tab.selected{
	background: white;
	border-top: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	border-bottom: 0px solid grey;
}
.coil-tab:hover{
	background: white;
}

.coil-form{
	background: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
	padding: 15px;
	border-radius: 10px;
}
.coil-form input[type=submit]{
	width: auto;
	/* border: auto;
	max-width: auto;
	background: grey;
	border-left: 0px; */
}

summary{
	cursor: pointer;
}

.stock-button{
	background: lightgrey;
	border: 1px solid grey;
	border-radius: 4px;
	box-shadow: inset 3px 3px white, inset -1px -1px 2px grey;
	font-size: initial;
	padding: 3px 5px;
}
.stock-button.selected{
	background: #b6b4b4;
	box-shadow: inset 3px 3px #b6b4b4;
}
.stock-button:hover{
	box-shadow: inset 3px 3px #b6b4b4;
	background: #b6b4b4;
}

.inst-image.inst-logo{
	margin-bottom: 20px;
}
.admin-name{
	font-size: .9rem;
	text-align: center;
}

#current-stripe-message{
	padding: 10px;
}

.contents-past-transfers .coil-form,
.contents-past-waivers .coil-form{
	border: 3px solid grey;
}
.contents-past-transfers .coil-form.approved,
.contents-past-waivers .coil-form.approved{
	border: 3px solid green;
}
summary{
	user-select: none;
}
details details summary{
	padding-left: 10px;
}
details.approved summary{
	color: green;
}
.coil-folder-contents details{
	position: relative;
}
.is-temp-credit summary{
    /* background: salmon; */
    border: 3px solid salmon;
}
.is-temp-credit form{
    background: #fbd0cb;
}
.is-temp-credit input,
.is-temp-credit textarea{
    background: white;
    color: black;
}
.is-temp-credit input.button{
    background: var(--coil-blue);
    color: white;
}
.temp-flag{
    position: absolute;
    right: 4px;
    top: 4px;
    font-weight: bold;
}
.is-temp-credit .temp-flag{
    color: salmon;
}

.status-label{
	display: inline-block;
	padding: 10px 0;
	font-weight: bold;
}
.approved .status-label{
	color: green;
}

.coil-frame{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
	border-radius: 10px;
	padding: 15px;
}

.coil-frame.flashed,
.coil-form.flashed{
    background: #fff6d3;
}


.numbered-list {
  counter-reset: item; /* Initialize the counter */
  list-style-type: none; /* Remove default list style */
  padding: 0; /* Remove default padding */
}

.numbered-list li {
  counter-increment: item; /* Increment the counter for each li */
  margin-bottom: 0.5em; /* Add some spacing between items */
}

.numbered-list li:before {
  content: counter(item) ". "; /* Display the counter number with a period */
  font-weight: bold; /* Optional: make the counter bold */
  margin-right: 0.5em; /* Optional: add space between number and item text */
}

.register .dev-button{
	position: fixed;
	bottom: 10;
	right: 10;
	z-index: 99;
}

.needs-attention{
	background: var(--needs-attention);
}

.waiver-explain,
.txfer-intro{
	display: none;
}
.is-new .waiver-explain,
.is-new .txfer-intro{
	display: inline-block;
}
.is-new .status-label{
	display: none;
}
.coil-folder summary{
	/* display: none; */
	margin: 4px 0;
	background: white;
	/* border: 2px solid; */
}

.is-dev{
	border: 3px solid var(--coil-dev-color);
}

.modal-content .register-multi input{
	display: inline-block;
	width: 50px;
}

li.sub-sub{
    /* background: var(--coil-folder); */
	background: #27657c;
}
li.sub-sub a{
    /* color: var(--text-grey); */
}
li.sub-sub:hover a{
    /* color: black; */
}


.is-header{
	font-weight: bold;
}


#everywhere-list{
	position: fixed;
	z-index: 99999;
	background: white;
	border-radius: 4px;
	padding: 40px 3px 40px 10px;
	display: inline-block;
	min-width: 165px;
	max-width: 200px;
	background: #c4dcf6;
	border: 1px solid black;
	background: #eae8e8;
	user-select: none;
	text-align: left;
}
#everywhere-list.collapsed{
	padding-right: 20px;
	min-width: 230px;
	padding-bottom: 10px;
	padding-top: 30px;
	text-align: center;
}
.splash #everywhere-list{
	background: #a6cddc;
	border: 1px solid #a2a2a2;
}

.chat-list-area,
.chat-list-header{
	padding-right: 7px;

}
.chat-list-area{
	max-height: 180px;
	overflow-y: auto;
	overflow-x: hidden;
}

#everywhere-list .member-icon{
	font-weight: bold;
	padding: 4px 5px;
	padding-bottom: 0px;
	cursor: pointer;
	position: relative;
	margin: 4px 0;
	padding-right: 15px;
	line-height: 1rem;
	font-size: .9rem;
}

#everywhere-list .member-icon:hover{
	background: rgba(255, 255, 255, .7);
}

.drag-icon{
	position: absolute;
	width: 20px;
	top: 2px;
	left: 2px;
	opacity: .5
}

.chat .danger,
#log .chat .danger{
    position: absolute;
    z-index: 9;
    font-size: .8rem;
    right: 00%;
    background: #9a3a15;
    top: 0;
}


.admin-only{
	display: none;
}
.admin-css .admin-only{
	display: initial;
}


@media screen and (max-width: 1350px){
	.header-section:nth-of-type(2){
/* 		text-align: left; */
		line-height: 1.2rem;
	}
}

@media screen and (max-width: 1250px){
    #auth-area{
    	top: 76px;
    }
    #logo-left{
		font-size: 2.5rem;
	}
	#logo-right{
		font-size: 1rem;
	}
	#logo .logo-row:nth-of-type(2){
		letter-spacing: 2px;
		font-size: .8rem;
		margin-top: 0px;
		padding-bottom: 0px;
	}

}

@media screen and (max-width: 1000px){
    .header-section:nth-of-type(2){
    	padding-top: 20px;
		text-align: right;
		line-height: 1rem;		
    }
    #popup-news-wrapper{
    	display: none;
    }
    #coil-register .coil-row>.column{
    	max-width: 100%;
    }
    #auth-area{
    	top: 10px;
    }
    #coil-intro2 h2{
        font-size: 2rem;
        text-align: center;
    }
	.modal.admin-popup .modal-content{
		top: 50px;
	}
	#header{
		white-space: nowrap;
	}
	.header-item{
		white-space: initial;
	}
	
}

@media screen and (max-width:800px){

	#header,
	#content{
	    padding: 20px 10px;
	}
	.intro-popup .column-2{
		min-height: auto;
		max-width: 100% !important;
	}
	#header-cap{
		line-height: 1.3rem;
		margin-top: 10px;
	}
	#header{
		white-space: initial;
		padding-top: 0px;
		/* border: 3px solid red; */
	}
	#header .header-item{
		display: none;
	}
	#header.toggled .header-item{
		display: block;
		width: 100%;
	}
	
	.header-item{
		display: block;
	}
	.header-item-drop{
		position: relative;
		z-index: 999;
	}
	.header-item-drop *{
		text-align: center;
	}
	/* .header */
	#sub-nav-drop{
		color: blue;
	}
	#sub-nav-toggle{
		margin-right: 0px;
/* 		display: block; */
		margin: auto
	}
	#sub-nav-toggle .arrow{
		left: calc(50% - 50px);
		top: 3px;
	}
	.sub-toggled #sub-nav-content{
		/*display: inline-block;*/
		top: 10px;
		margin-bottom: 10px;
		left: 00px;
		box-shadow: 0px 0px;
		position: relative;
		background: lightgrey;
/* 		maring */
	}
	.modal.admin-popup .modal-content{
		top: 30px;
		max-width: 90vw;
	}
	#menu-courses-nav{
		display: block;
	}
	#courses-nav{
		display: none;
	}
    #auth-area .nav-item .button{
    	color: grey;
    }

	#terms-content{
		width: 100%;
		left: 0px;
	}
	#terms-accept{
		width: calc(100% - 17px);
		left: 0px;
		margin-left: 0px;
		bottom: 0px;
	}

	#terms-content{
		height: 40%;
		bottom: 0px;
	}

    #coil-intro2{
    	padding-top: 0px;
    }

    #coil-intro2 h2{
        font-size: 1.7rem;
    }

	#coil-subtitle{
		top: 80px;
		padding-top: 10px;
		display: none;
	}

	#auth-area{
    	position: relative;
    	right: 0px;
        top: 0px;
    }

	#coil-register{
        top: calc(100vh - 145px);
    }

    #coil-register .mobile-only{
    	color: #f7ff08;
    }

    #bouncer{
        display: none;
    }

	#mobile-toggle{
		display: inline-block;
		position: fixed;
		top: 90px;
		right: 10px;
		z-index: 9999;
		cursor: pointer;
	}
	#mobile-toggle *{
		/* background: blue; */
		/* color: black; */
	}

    #header{
	    height: 80px;
		z-index: 99999;
    }

	#header .header-section{
		width: 100%;
		max-width: 100%;
	}
	
	.header-section:nth-of-type(2){
		z-index: 9;
		padding: 50px 0;
		background: white;
		top: -500px;
		left: 0px;
		transition: .3s;
		position: absolute;
		border-bottom: 1px solid;
	}
    .header-section:nth-of-type(2) .nav-item{
    	width:100%;
    	max-width: 100%;
    	text-align: center;
    }
    .header-section:nth-of-type(2) .nav-item .button{
        background: white;
        color: var(--coil-blue)
    }
    .mobile-only{
    	display: block;
    }

    .desktop-only{
    	display: none;
    }

	#construction{
		left: 35%;
		max-width: 150px;
		font-size: 1.5rem;
		top: -10px;
	}
  
    .criteria{
        display: block;
        text-align: left;
    }

    .coil-text-width{
    	padding: 0;
    }

    #coil-register{
	    padding: 0 0%;
	    display: none !important;
    }
    	
	.column{
	    max-width: 100%;
	    text-align: center;
	}
	#logo{
		margin-top: -20px;
	}
	#logo .logo-row>div{
	}
	#logo .logo-row{
	}
	#logo-left{
		font-size: 1.7rem;
	}
	#logo-right{
		font-size: 1rem;
		animation: pulse 5s linear infinite;
	}
	#logo .logo-row:nth-of-type(2){
	    font-size: .8rem;
	}

	#content{
	    margin-top: 80px;
    }

    #footer ul{
    	padding-left: 0;
    }

    #admin-login{
    	text-align: right;
    	left: auto;
    	display: inline-block;
    	width: auto;
        bottom: 0;
        left: 0;
    }

    #admin-login .button{
    	color: white;
    }
    #admin-login .button{
    	color: white !important;
    }

    #alert-contain{
    	right: 5px;
    }

    #alert-contain .alert-msg{
    	max-width: calc(100% - 10px);
    	padding-right: 20px;
    	letter-spacing: .9px;
    }
	.header-item ul{
		background: #2e2e47;
	}
	.header-item.has-drop ul li{
		background: var(--coil-blue);
	}

}

@keyframes pulse{
    0% {
    	opacity: 1;
    }
    50%{
    	opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hint{
    0% {
    	opacity: 1;
    }
    50%{
    	opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes chat_hint{
    0% {
    	background: #e6f4f8;
    }
    50%{
    	background: #bedde8;
    }
    100% {
        background: #e6f4f8;
    }
}

@keyframes blink{
    80%{
    	opacity: 1;
    }
    90%{
    	opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
@keyframes button-pulse-red{
    0% {
    	color: rgb(0, 0,0);
    }
    50%{
    	color: rgb(255, 255, 0);
    }
    100% {
        color: rgb(0, 0,0);
    }
}