:root {
	--back: #282828;
	--inner: #3C3C3C;
	--sred: #CC4A3B;
	--syellow: #EFB24B;
	--sgrey: #888888;
	--slgrey: #EEEEEE;
	--sdgrey: #9E9E9E;
	--slblack: #5F5F5F;

	--tooltip-color: #EEEEEE;
	
	--AVRG: #CC4A3B;
	--PEAK: #3CA7DF;
	--DIRE: #3FA07E;
	--TEMP: #EFB24B;
	--NOSI: #9E9E9E;

	--clicker: .0;
	--text-color: white;

	--fng: #809e4d;
	--member: #d6c28c;
	--aide: #2575b1;
	--senior-aide: #e74c3c;
	--owner: #e4b400;
	--inactive: #9E9E9E;
}

body {
	font-family: Arial Rounded MT Bold, Arial, sans-serif;
	background-color: var(--back) !important;
}

h4, h3, h2, h1, label, p, ol, li {
	color: var(--text-color) !important;
}

a {
	color: var(--syellow) !important;
}

select {
	color: var(--DIRE);
	border: 0px;
	background-color: var(--sdblack);
}

.header {
	position: absolute;
	top: 0%;
	width: 100%;
	height: 80px;
}

.header .button_container {
	top: 13%;
	position: absolute;
	right: 10px;
	height: 76%;
}

.header .button_container form {
	height: 100%;
}

.header .button_container .button {
	width: 150px;
	height: 80%;
	padding: 0px;
	color: var(--slblack);
	border-radius: 10px;
	border: 0px; /*solid var(--slgray);*/
	background-color: var(--slgrey);
	font-size: 130%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.header .button_container .button:hover {
	background-color: var(--sred);
	color: white;
	width: 170px;
}

.logo {
	background-image: url('../images/logo.png');
	background-size: 64px 64px;
	position: absolute;
	top: 5px;
	left: 15px;
	width: 64px;
	height: 64px;
}

.header .title {
	position: absolute;
	left: 90px;
}

.index {
	position: absolute;
	top: 90px;
	width: 100%;
	height: 60px;
	overflow-y: hidden;
}

.index .button_mp {
	position: relative;
	top: 30%;
	width: 150px;
	height: 60px;
	padding-bottom: 1.5%;
	color: var(--slblack);
	border-radius: 10px;
	border: 0px;
	background-color: var(--slgrey);
	font-size: 130%;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	margin-right: 10px;
	margin-left: 10px;
}

.index .button_mp:hover, .index .button_mp:disabled {
	background-color: var(--sred);
	color: white;
}

.overlay {
	position: absolute;
	width:	0%;
	height: 0%;
	top: 50%;
	left: 50%;
	opacity: 0;
	background: rgba(40,40,40,0);
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
}

.overlay.show {
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(40,40,40,0.8);
	opacity: 1;
}

.overlay .settigs_general {
	position: relative;
	top: 10%;
	left: 25%;
	width: 50%;
	height: 80%;
	background: var(--inner);
	border-radius: 20px;
	overflow: hidden;
}

.overlay .settigs_general .button {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 1%;
	right: 1%;
	padding: 0px;
	border-radius: 5px;
	border: 2px solid var(--sgrey);
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	background-color: var(--sgrey);
}

.overlay .settigs_general .button:hover {
	background-color:	var(--sred);
	border: 2px solid var(--sred);
}

.overlay .settigs_general form, .overlay .settigs_general .divform {
	width: 100%;
	display: none;
}

.overlay .settigs_general form.show, .overlay .settigs_general .divform.show {
	display: block;
}

.info {
	position: absolute;
	top: 50px;
	width: 100%;
	height: calc(100% - 150px);
	overflow-y: hidden;
}

.image_background {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;;
	background-image: url("../images/11th_ACR_DARK.png");
	background-size: cover;
}

.haze {
	position: absolute;
	top: 0px;
	left: -175%;
	width: 450%;
    opacity: 30%;
	height: 100%;
	border-top: 2px solid var(--sred);
	background-image: url("../images/overlay_smoke.png");
	background-size: cover;
  	animation-name: haze_anim;
  	animation-duration: 150s;
	animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes haze_anim {
  from {left: 0%;}
  to {left: -350%;}
}

.background {
	position: absolute;
    max-width: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.inactive {
	color: var(--inactive) !important;
}

.FNG {
	color: var(--fng) !important;
}

.Member {
	color: var(--member) !important;
}

.Aide {
	color: var(--aide) !important;
}

.Senior-Aide {
	color: var(--senior-aide) !important;
}

.Owner {
	color: var(--owner) !important;
}

.BAN {
	background-color: var(--sred) !important;
}

.info .text {
	position: relative;
	top: 20px;
	left: 5%;
	width: 90%;
	height: 100%;
	overflow: hidden;
}

.info .text .entry {
	display: none;
	height: 95%;
	width: 103%;
	overflow-y: scroll;
	background-color: rgba(10,10,10,0.75);
	border-radius: 5px;
	padding: 0px 15px 0px 10px; 
}

.info .text .entry.show
{
	display: block;
}

.info .text .entry input[type="text"], select, input[type="date"]
{
	width: 300px;
	/*background-color: var(--sldblack);*/
	background-color: var(--back);
	color: var(--text-color)
}

select {
	height: 40px;
	border-radius: 5px;
	border: 1px solid white;
}

.info .text button {
	width: 150px;
	height: 50px;
	padding: 0px;
	color: var(--slblack) !important;
	border-radius: 10px;
	border: 0px; /*solid var(--slgray);*/
	background-color: var(--slgrey);
	font-size: 130%;
	margin: 10px 10px 10px 10px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.info .text button:hover {
	background-color: var(--sred);
	color: white;
	width: 150px;
}

.info .text .button img {
	border: 0px;
	border-radius: 0px;
}

/*.info .text.wide {
	left: 15%;
	width: 70%;
}*/

.info .text img {
	border: 2px solid var(--sred);
	border-radius: 10px;
}

.info .text.wide h2 {
	color: var(--syellow) !important;
}

.info .profile table, #settings_profile table {
	position: relative;
	right: -55%;
	top: -140px;
	width: 40%;
	color: white;
	background-color: var(--back);
	font-size: larger;
}

.info .profile table tr, #settings_profile table tr {
	background-color: var(--sgrey);
	border: 5px solid var(--back);
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.info .profile table td, #settings_profile table td {
	padding: 5px 5px 5px 5px;
}

.info .profile table td:nth-child(odd), #settings_profile table td:nth-child(odd) {
	background-color:var(--slblack);
}

.info .profile img, #settings_profile img {
	position: relative;
	left: 10%;
	top: 50px;
	border: 2px solid var(--sred);
	border-radius: 10px;
}

.spec {
	width: 50px;
  height: 50px;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
	display:inline-block;
	margin-left: 5px;
	border: 1px solid var(--sgrey);
	border-radius: 5px;
}

.spec:hover {
	background-color: var(--syellow);
}

.spec.sl {
	background-image: url("../images/training/sl.png");
}

.spec.tl {
	background-image: url("../images/training/tl.png");
}

.spec.med {
	background-image: url("../images/training/med.png");
}

.spec.eng {
	background-image: url("../images/training/eng.png");
}

.spec.at {
	background-image: url("../images/training/at.png");
}

.spec.mg {
	background-image: url("../images/training/mg.png");
}

.spec.mks {
	background-image: url("../images/training/mks.png");
}

.spec.gre {
	background-image: url("../images/training/gre.png");
}

.spec.rto {
	background-image: url("../images/training/rto.png");
}

.spec.wps {
	background-image: url("../images/training/wps.png");
}

.spec.arm {
	background-image: url("../images/training/arm.png");
}

.spec.air {
	background-image: url("../images/training/air.png");
}

.info .entry .members div {
	position: relative;
	background-color: var(--back);
	height: 100px;
	margin: 20px 00px 20px 00px;
}

#Roster table, #Ranks table, #Votes table, #Staff table {
	background-color: var(--slback);
	width: 99%;
	margin: 20px 0px 0px 0px;
}

#Roster table tbody tr, #Ranks table tbody tr, #Votes table tbody tr, #Staff table tbody tr, #warning_table_user tr {
	background-color: var(--back);
	border: 5px solid var(--inner);
}

#Roster table tbody tr:hover, #Ranks table tbody tr:hover, #Votes table tbody tr:hover {
	background-color: rgba(200,127,0,0.4);
}

#Roster table tbody tr th, #Ranks table tbody tr th, #Votes table tbody tr th, #Staff table tbody tr th, #warning_table_user tr th {
	height: 50px;
	color: white !important;
	font-size: x-large;
}

#Ranks table tbody tr th {
	font-size: medium;
	padding: 10px;
}

#Ranks table tbody tr td:nth-child(1) {
	width: 8%;
}

#Roster table tbody tr td, #Ranks table tbody tr td, #Votes table tbody tr td, #Staff table tbody tr td, #warning_table_user tr td {
	font-size: x-large;
	color: white;
}

#Roster table tbody tr td:nth-child(1), #Roster #inactive_table td:nth-child(1), #Zeus table th:nth-child(1){
	width: 10%;
}

#Roster table tbody tr td:nth-child(2), #Roster #inactive_table td:nth-child(2) {
	width: 8%;
}

#Roster table tbody tr td:nth-child(3), #Roster #inactive_table td:nth-child(3) {
	width: 20%;
}

#Roster table tbody tr td:nth-child(4), #Roster #inactive_table td:nth-child(4) {
	width: 62%;
}

#Roster table tr td img, #Staff table tr td img, #Zeus table tr th img{
	height: 64px;
	width: 64px;
	margin: 13px 0px 13px 20px;
}

#specify {
	height: 0px;
	overflow: hidden;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

#specify.show {
	height: 100px;
}

#Sign\ up div, #Event\ rating div{
	position: relative;
	left: 10px;
	width: calc(100% - 20px);
	background-color: rgba(0.2, 0.2, 0.2, 0.4);
	padding: 1px 10px 10px 10px;
	margin-top: 10px;
	border-radius: 10px;
}

#Sign\ up table, #Event\ rating table, #Zeus table {
	position: relative;
	color: white;
	margin: 0px 10px 10px 0px;
	font-size: medium;
	width: 100%;
}

#Sign\ up table tr, #Event\ rating table tr, , #Zeus table tr {
	height: 25px;
	width: 100%;
}

#event_rating tbody td {
  text-align: center;
  vertical-align: middle;
}

#event_rating tbody tr:nth-child(2n) td {
	padding-bottom: 10px;
}

#Sign\ up table th, #Event\ rating table th, #Zeus table th {
	background-color: rgba(0.2, 0.2, 0.2, 0.4);
}

#Sign\ up table th:hover, #Event\ rating table tr:hover, #Zeus table tr:hover{
	background-color: var(--syellow);
	padding-left: 10px;
	cursor: pointer;
}

#Event\ rating table tr:hover {
	cursor: default;
}

#Event\ rating table tr.zeus {
	background-color: var(--PEAK);
	opacity: 0.8;
	padding-left: 10px;
	cursor: default;
}

#Event\ rating table tr.you, #Ranks table tr.you, #roaster_table tr.you {
	background-color: var(--DIRE);
	opacity: 0.8;
	padding-left: 10px;
	cursor: default;
}

#Event\ rating input[type="number"] {
	background-color: rgba(0,0,0,0.5);
	border: none;
	margin: 5px 5px 5px 5px;
	-moz-appearance:textfield;
}

#Event\ rating input[type="number"]::-webkit-inner-spin-button { 
	-webkit-appearance: none; 
	margin: 0;
}

#Sign\ up table td {
	padding-left: 20%;
}

#Sign\ up table td.first {
	color: var(--PEAK);
	font-weight: bold;
}

#Sign\ up #Thursday, #Sign\ up #Saturday {
	background-color: rgba(0,0,0,0);
	display: none;
}

#Sign\ up #Thursday.show, #Sign\ up #Saturday.show {
	display: block;
}

input[type="file"] {
	width: 300px;
	height: 50px;
	border-radius: 5px;
	padding-left: 2px;
	color: white;
	background-color: rgba(0.5,0.5,0.5,0.5);
}

@media (pointer:none), (pointer:coarse) {
	.overlay .settigs_general .button {
		width: 50px;
		height: 50px;
	}
	
	h2, h3, a, p {
		font-size-adjust: 25vw;
	}
	
	button{
		font-size-adjust: 2.5vw;
	}
	
	.info .text, .info .text.wide {
		left: 5%;
		width: 90%;
	}

	.overlay .settigs_general {
		top: 5%;
		left: 10%;
		width: 80%;
		height: 90%;
	}
	
	.index {
		top: 50px;
	}
	.index .button_mp {
		height: 40px;
		margin-bottom: 10px;
	}	
	#img {
		position: relative;
		top: 50vw;
		width: 100vh;
	}
	 @media screen and (orientation:landscape) {
		 #img_overlay {
			width: 100vw;
			 height: 100vh;
		 }
		 #img {
			position:relative;
			top: 0px;
			width: 70%;
		}
		 
	}
}

.gallery img {
	width: 350px;
	height: 196px;
	margin: 2px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.gallery img:hover {
	width: 365px;
	height: 211px;
	border: 1px solid black;
}

#img_overlay {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0.5,0.5,0.5,0.9);
	border-radius: 10px;
}

#img_overlay img {
	max-width: 87%;
	max-height: 100%;
}

#FAQ img {
	width: 95%;
}

#FAQ h3, #Staff h3, #Zeus h3 {
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

#FAQ h3:hover, #Staff h3:hover, #Zeus h3:hover {
		color: var(--syellow) !important;
}

#Event-Chart {
	height: 250px;
	top: 70px;
	margin-bottom: 75px;
}

#Event-Chart svg {

}

.ct-series-a .ct-line {
	stroke: var(--sred) !important;
	stroke-width: 4px;
}

.ct-series-a .ct-point {
	stroke: var(--sred) !important;
	stroke-width: 10px;
	cursor: pointer;
}

.ct-label {
	color: red !important;
	width: 100px;
}
.ct-labels .ct-vertical {
	font-size: larger;
}
.ct-labels .ct-horizontal {
	font-size: small;
	padding: 10px;
	white-space: nowrap;
}

.ct-label .ct-horizontal .ct-end{
	width: 100px;
	height: 20px;
}

.ct-label.ct-label.ct-horizontal {
	text-align: right;
	transform-origin: 100% 0;
	transform: translate(-100%) rotate(45deg);
}

.ct-grids .ct-vertical {
	stroke: var(--slgrey) !important;
}

.chartist-tooltip {
	position: absolute;
	display: inline-block;
	opacity: 0;
	min-width: 5em;
	padding: .5em;
	background: var(--syellow); /*#F4C63D;*/
	color: #453D3F;
	font-family: Oxygen,Helvetica,Arial,sans-serif;
	font-weight: 700;
	text-align: left;
	pointer-events: none;
	z-index: 1;
	-webkit-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	transition: opacity .2s linear;
}
.chartist-tooltip:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top-color: var(--inner-color);
}

.chartist-tooltip.tooltip-show {
	opacity: 1;
}

#notification {
	position: fixed;
	top: 0px;
	left: 25%;
	width: 50%;
	height: 0px;
	background-color: rgba(200, 15, 15, 0.8);
	z-index: 9999;
	overflow: hidden;
	-webkit-transition: height .2s;
	-moz-transition: height .2s;
	-o-transition: height .2s;
	transition: height .2s;	
}

#notification.show {
	height: 80px;
}

.tr_profile td {
	width: 50%;
	padding-bottom: 2px;
  background-color: var(--slblack);
}

.tr_event td {
	width: 23.5%;

}

.nested_profile{
	position: relative;
	left: 0.45%;
	top: -8%;
	margin-bottom: 50px;
}

.nested_profile tbody td:nth-child(2n+0) {
  background-color: var(--grey);
}

#warning_table tr td:nth-child(1), #warning_table_user tr td:nth-child(1) {
	width: 11%;
}

#warning_table tr td:nth-child(2) {
	width: 11%;
}

#warning_table tr td:nth-child(3), #warning_table_user tr td:nth-child(2) {
	width: 32%;
}

#warning_table tr td:nth-child(4), #warning_table_user tr td:nth-child(3) {
	width: 14%;
}

#warning_table tr td:nth-child(5) {
	width: 32%;
}

#warning_table tr td button {
	width: 80%;
	height: 80%;
	font-size: 1.0vw;
}

#warning_table_user tr td textarea {
	margin-top: 1%;
	background-color: var(--slblack);
}

#warning_table_user tr td button {
	width: 100px;
}

.slidecontainer {
  width: 100%;
}

.slider {
	-webkit-appearance: none;

  height: 25px;
  background: linear-gradient(to right, red, orange, green);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 5px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  background: rgba(200,200,200,0.5);
  cursor: pointer;
}

.slider::-webkit-slider-thumb:hover, .slider::-webkit-slider-thumb:active  {
	background: rgba(100,100,200,0.8);
}

.slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: rgba(200,200,200,0.5);
  cursor: pointer;
}

.slider::-moz-range-thumb:hover,.slider::-moz-range-thumb:active  {
	background: rgba(100,100,200,0.8);
}