@CHARSET "UTF-8";

div.app_top { position: -webkit-sticky; position: sticky; top: 0px; z-index: 5000}

#menu-icon { margin-top: 10px; font-size: 30px;}

#profile { display: none; }
#profile-icon { margin-right: 2px; margin-top: 10px; cursor: pointer; }
#profile-icon img { width: 45px; height: 45px; border-radius: 50%}
#profile-icon span { display: inline-block;}

#profile-card {position: fixed; top: 70px; right: 5px; z-index: 6000; max-width:97%; display: none;}
#profile-card img { width: 96px; height: 96px; border-radius: 50%;}

div#profile-card > div { white-space: nowrap; vertical-align: top; }
div#profile-card > div > div { display: inline-block; position: relative;  vertical-align: top; width: calc(100% - 107px) }
div#profile-card > div > div:first-child { width: 96px }

div#profile-card > div > div > span { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%;}	
div#profile-card button { border-radius: 2px;}	

div#app { position: relative }
div.app_status_wrap {
	height:40px; 
	width: 100%;
	position: fixed; 
	top: 81px; 
	z-index: 1000;
	display:none;
}
span.status_close {
	cursor: pointer;
}
.pointer { curosr: pointer }

div#app_content { z-index: 500 }

.field_help {  }

input#select2-search__field[placeholder] {
	color: #999;
}

div#form_container { margin-top: 32px !important;}
div#form_container form { min-height: 300px;}

form { position: relative; }
label {  margin-right: 5px;}
label:after { content: ':' }

label.radio_group_label { margin-right: unset;}
label.radio_button { margin-right: unset; }
label.radio_button:after { content: unset}

div.radio_group input { margin-right: 4px;}
div.radio_group span { margin-left: 10px; white-space: nowrap; display:inline-block;}
div.radio_group { display: inline-block }

div.scale_fc {  }
div.scale_fc div { display: inline-block;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.scale_fc div.range_label_min { width: 24%; text-align: right; padding-right: 5px;}
div.scale_fc div.range_label_max { width: 24%; text-align: left; padding-left: 5px;}
div.scale_fc div.range_fc { width: 51% }
div.scale_fc div.range_fc input[type="range"] { width: 100%; }

div.overlay {
	display:none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #b7b7b7;
	top: 0px;
	left: 0px;
	padding: 10px;
	opacity: .8;	
}

div.loader {
	display:none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 120px; /* to be more intuitive */
	width: calc( 100% - 18px ); /* take the parent's width */
	text-align: center;
}

div.loader_icon {
	display: inline-block;	
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #183c34;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;	
}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


div#list { padding: 5px; }
div#list span { padding: 2px 5px}	
th:first-child { width: 35% }

button,.ptr { cursor: pointer; }

.list_header { position: -webkit-sticky; position: sticky; top: 81px; z-index: 200}

div.coach_stats span { margin-left: 10px;}

div.dash_title { padding-left: 16px}
div.dash_title h3 { display: inline-block; }
div.dash_title div {     
	display: inline-block;
    float: right;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
    }
    
@media (min-width: 993px) {
	
	div#page div.header { position: sticky; top: 90px; }
}

@media (max-width: 992px) {
	div.loader_icon {
		border: 8px solid #f3f3f3;
		border-top: 8px solid #183c34;
		width: 60px;
		height: 60px;
	}	
	
	div.dash_title { position: sticky; top: 81px }
	div.dash_hdr { position: sticky; top: 81px }
	
}


@media (max-width: 500px) {
	h2 { margin-top: 5px; font-size: 20px}
	#menu-icon { margin-top: 5px; font-size: 20px;}
	#profile-icon { margin-top: 5px;  }	
	#profile-icon img { width: 32px; height: 32px;}

	.list_header { position: -webkit-sticky; position: sticky; top: 61px; z-index: 200}
	
	div.app_status_wrap { top: 61px !important;}

	div.dash_title { position: sticky; top: 58px }
	div.dash_hdr { position: sticky; top: 102px }
	
}

@media (max-width: 380px) {
	h2 { margin-top: 5px; font-size: 18px}
	#menu-icon { margin-top: 5px; font-size: 18px;}
	#profile-icon { margin-top: 5px;  }	
	#profile-icon img { width: 27px; height: 27px;}
	
} 
 
.w3-teal { background-color: #183c34 !important;}
.w3-light-teal { background-color: #baccc8 !important; }
.w3-text-teal { color: #183c34 !important;}

#pres_check { text-decoration: none; pointer: cursor;}
#pres_check i { width: 17px; display: inline-block;}

#pres_check:hover .fa-check-square-o,
#pres_check .fa-check-square { display: none; }
#pres_check .fa-check-square-o,
#pres_check:hover .fa-check-square { display: inline-block; }

#pres_check.chk:hover .fa-check-square,
#pres_check.chk .fa-check-square-o { display: none; }
#pres_check.chk .fa-check-square,
#pres_check.chk:hover .fa-check-square-o { display: inline-block; }
 
.w3-col.tr  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.capitalize { text-transform: capitalize; }