/*custom font*/
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/*basic reset*/
* {margin: 0; padding: 0;}

html {
	height: 100%;
	/*Image only BG fallback*/
	
	/*background = gradient + image pattern combo*/
	background: linear-gradient(rgb(37, 78, 154), rgb(44, 84, 156));
}

body {
	font-family:sans-serif, verdana;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	background: none !important;
}

input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom: 30px
}

/*form styles*/
#msform {
	/* width: 550px; */
	width: 99%;
	/* margin: 40px auto; */
	margin: 20px auto 40px auto;
	text-align: center;
	position: relative;
}
#msform fieldset {
	background: white;
	border: 0 none;
	/* border-radius: 3px; */
	/* box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); */
	padding: 20px 30px;
	box-sizing: border-box;
	width: 90%;
	margin: 0 5%;
	
	/*stacking fieldsets above each other*/
	position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	/* display: none; */
}
/*inputs*/
#msform input, #msform textarea {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	/* margin-bottom: 10px; */
	/* width: 100%; */
	box-sizing: border-box;
	font-family: sans-serif;
	color: #2C3E50;
	font-size: 13px;
}
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	/* margin: 10px 5px; */
	position: relative;
	margin-top: 40px;
	margin-bottom: 0;
	top: 0;
	left: 0
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 20px;
	/* text-transform: uppercase; */
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 40%;
	/* float: left; */
	position: relative;
	display: inline-block;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

input {
  /* position: fixed; */
  /* top: -1.5em; */
  /* left: -1.5em; */
}

label {
  cursor: pointer;
  /* display: block; */
  display: inline-block;
  font-weight: bold;
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
  /* transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95); */
}
label:not(:last-of-type) {
  /* margin-bottom: 1.5em; */
}
label span {
  box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset;
  display: inline-block;
  /* margin-right: 0.5em; */
  vertical-align: bottom;
  width: 1.5em;
  height: 1.5em;
  /* transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95); */
}

label span,
.worm__segment:before {
  border-radius: 50%;
}

input:checked + label,
input:checked + label span,
.worm__segment:before {
  color: #27ae60;
}

input:checked + label, input:checked + label span {
  /* transition-delay: 0.4s; */
}
input:checked + label span {
  transform: scale(1);
}

.worm {
  /* top: 0.375em; */
  /* left: 0.375em; */
	top: 3.3em;
	left: 12.25em;
}
.worm, .worm__segment {
  position: absolute;
}
.worm__segment {
  top: 0;
  left: 0;
  width: 0.75em;
  height: 0.75em;
  transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.worm__segment:before {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  background: currentColor;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}
.worm__segment:first-child:before, .worm__segment:last-child:before {
  /* box-shadow: 0 0 1em 0 currentColor; */
}

.worm__segment:nth-child(2) {
  transition-delay: 0.004s;
}
.worm__segment:nth-child(2):before {
  animation-delay: 0.004s;
}

.worm__segment:nth-child(3) {
  transition-delay: 0.008s;
}
.worm__segment:nth-child(3):before {
  animation-delay: 0.008s;
}

.worm__segment:nth-child(4) {
  transition-delay: 0.012s;
}
.worm__segment:nth-child(4):before {
  animation-delay: 0.012s;
}

.worm__segment:nth-child(5) {
  transition-delay: 0.016s;
}
.worm__segment:nth-child(5):before {
  animation-delay: 0.016s;
}

.worm__segment:nth-child(6) {
  transition-delay: 0.02s;
}
.worm__segment:nth-child(6):before {
  animation-delay: 0.02s;
}

.worm__segment:nth-child(7) {
  transition-delay: 0.024s;
}
.worm__segment:nth-child(7):before {
  animation-delay: 0.024s;
}

.worm__segment:nth-child(8) {
  transition-delay: 0.028s;
}
.worm__segment:nth-child(8):before {
  animation-delay: 0.028s;
}

.worm__segment:nth-child(9) {
  transition-delay: 0.032s;
}
.worm__segment:nth-child(9):before {
  animation-delay: 0.032s;
}

.worm__segment:nth-child(10) {
  transition-delay: 0.036s;
}
.worm__segment:nth-child(10):before {
  animation-delay: 0.036s;
}

.worm__segment:nth-child(11) {
  transition-delay: 0.04s;
}
.worm__segment:nth-child(11):before {
  animation-delay: 0.04s;
}

.worm__segment:nth-child(12) {
  transition-delay: 0.044s;
}
.worm__segment:nth-child(12):before {
  animation-delay: 0.044s;
}

.worm__segment:nth-child(13) {
  transition-delay: 0.048s;
}
.worm__segment:nth-child(13):before {
  animation-delay: 0.048s;
}

.worm__segment:nth-child(14) {
  transition-delay: 0.052s;
}
.worm__segment:nth-child(14):before {
  animation-delay: 0.052s;
}

.worm__segment:nth-child(15) {
  transition-delay: 0.056s;
}
.worm__segment:nth-child(15):before {
  animation-delay: 0.056s;
}

.worm__segment:nth-child(16) {
  transition-delay: 0.06s;
}
.worm__segment:nth-child(16):before {
  animation-delay: 0.06s;
}

.worm__segment:nth-child(17) {
  transition-delay: 0.064s;
}
.worm__segment:nth-child(17):before {
  animation-delay: 0.064s;
}

.worm__segment:nth-child(18) {
  transition-delay: 0.068s;
}
.worm__segment:nth-child(18):before {
  animation-delay: 0.068s;
}

.worm__segment:nth-child(19) {
  transition-delay: 0.072s;
}
.worm__segment:nth-child(19):before {
  animation-delay: 0.072s;
}

.worm__segment:nth-child(20) {
  transition-delay: 0.076s;
}
.worm__segment:nth-child(20):before {
  animation-delay: 0.076s;
}

.worm__segment:nth-child(21) {
  transition-delay: 0.08s;
}
.worm__segment:nth-child(21):before {
  animation-delay: 0.08s;
}

.worm__segment:nth-child(22) {
  transition-delay: 0.084s;
}
.worm__segment:nth-child(22):before {
  animation-delay: 0.084s;
}

.worm__segment:nth-child(23) {
  transition-delay: 0.088s;
}
.worm__segment:nth-child(23):before {
  animation-delay: 0.088s;
}

.worm__segment:nth-child(24) {
  transition-delay: 0.092s;
}
.worm__segment:nth-child(24):before {
  animation-delay: 0.092s;
}

.worm__segment:nth-child(25) {
  transition-delay: 0.096s;
}
.worm__segment:nth-child(25):before {
  animation-delay: 0.096s;
}

.worm__segment:nth-child(26) {
  transition-delay: 0.1s;
}
.worm__segment:nth-child(26):before {
  animation-delay: 0.1s;
}

.worm__segment:nth-child(27) {
  transition-delay: 0.104s;
}
.worm__segment:nth-child(27):before {
  animation-delay: 0.104s;
}

.worm__segment:nth-child(28) {
  transition-delay: 0.108s;
}
.worm__segment:nth-child(28):before {
  animation-delay: 0.108s;
}

.worm__segment:nth-child(29) {
  transition-delay: 0.112s;
}
.worm__segment:nth-child(29):before {
  animation-delay: 0.112s;
}

.worm__segment:nth-child(30) {
  transition-delay: 0.116s;
}
.worm__segment:nth-child(30):before {
  animation-delay: 0.116s;
}

/* States */
input:nth-of-type(1):checked ~ .worm .worm__segment:before {
  animation-name: hop1;
}

@keyframes hop1 {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.5em);
  }
}
input:nth-of-type(2):checked ~ .worm .worm__segment {
  transform: translateY(3em);
}
input:nth-of-type(2):checked ~ .worm .worm__segment:before {
  animation-name: hop2;
}

@keyframes hop2 {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.5em);
  }
}
input:nth-of-type(3):checked ~ .worm .worm__segment {
  transform: translateY(6em);
}
input:nth-of-type(3):checked ~ .worm .worm__segment:before {
  animation-name: hop3;
}

@keyframes hop3 {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.5em);
  }
}

.font-16 {
	font-size: 16px
}

.boxx {
	display: inline-block;
	width: 31px
}

.boxxx {
	display: inline-block;
	/* width: 210px; */
	width: auto;
}

.ml-5 {
	margin-left: 5px
}

input.previous.action-button {
    background: #606763 !important;
}

#first-yes, #first-no, #second-yes, #second-no {
	/* display: none */
	display: inline-block
}

.mb-0 {
	margin-bottom: 0 !important
}

.mt-20 {
	margin-top: 20px !important
}

.mt-15 {
	margin-top: 15px !important
}

.mt-10 {
	margin-top: 10px !important
}

.mr-25 {
	margin-right: 25px !important
}

.mr-100 {
	margin-right: 0px !important
}

.dn {
	display: none
}

.limited {
	display: inline-block;
    width: 46%;
}

.limited.left {
    text-align: left;
}

.limited.right {
    text-align: right;
}

.ml-25 {
	margin-left: 25px
}

.mb-20 {
	margin-bottom: 20px
}

.logo {
	width: 70px;
    margin-bottom: 10px;
}

.main-h {
	color: white;
    font-size: 30px;
}

.oauth {
	display: block;
    margin: auto;
    margin-top: 20px;
    text-decoration: none;
}

.courses_list1, .courses_list2, .courses_list3, .courses_list4 {
	display: inline-block !important;
	width: 40% !important;
	margin: auto;
	text-align: left;
	font-size: 13px;
}

.coordinators_list1, .coordinators_list2, .coordinators_list3, .coordinators_list4 {
	display: inline-block !important;
	width: 40% !important;
	margin: auto;
	text-align: left;
	font-size: 13px;
}

.dropdown-maxItem-alert {
	background: #ffecdf !important;
}

.dropdown-maxItem-alert p {
	padding-left: 12px !important;
}

.full-width {
	width: 100%
}

.reqd {
	color: red;
}

.courses_list1 .dropdown-chose, .courses_list2 .dropdown-chose, .coordinators_list1 .dropdown-chose, .coordinators_list2 .dropdown-chose, .courses_list3 .dropdown-chose, .courses_list4 .dropdown-chose, .coordinators_list3 .dropdown-chose, .coordinators_list4 .dropdown-chose {
	background: #e6e6e6;
}

#other_info {
	width: 80.5%;
}

.no-shadow {
	text-shadow: none !important;
}

#counter {
	display: inline-block;
}

.zero_left {
	color: red !important
}

#admin #msform .action-button {
    width: 170px;
    margin-top: 0;
}

#admin table {
	margin-top: 10px !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
	background: white;
}

#admin table th {
    border: 1px solid #bdbdbd;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
	background: #a5a5a5;
}

#admin table td {
    border: 1px solid #bdbdbd;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

#admin table tr:nth-child(2n+1) {
    background: #e8e8e8;
}

#phone {
	text-align: center;
}

.table_container {
	/* overflow-x: scroll */
}

.del_disable {
	filter: grayscale(1);
}

#imgdel {
	cursor: pointer;
}

.view_other_info {
	overflow: hidden !important;
    background: white !important;
    padding: 5px !important;
	cursor: help !important;
}

#admin table tr:nth-child(2n+1) td textarea {
    background: transparent !important;
}

#admin #msform {
    overflow-x: scroll
}

#msform fieldset {
	margin: 0;
	width: 100%
}

#admin #msform tr:hover td {
    background: #deeaff;
}

#admin #msform tr:hover td textarea.view_other_info {
    background: transparent !important;
}

.text-right {
	text-align: right
}

input[id="show"] {
	vertical-align: middle;
}

label[for="show"] {
	text-shadow: none;
    font-weight: normal;
    font-size: 14px;
}

#admin .bgwhite {
	background: tranparent !important
}

#admin table tr.bgwhite:nth-child(2n+1) {
	background: none !important;
}

.dt-buttons {
	/* position: absolute !important; */
    /* right: 31px !important; */
    /* top: 115px !important; */
    left: 200px !important;
}

.dt-buttons button {
	border: 2px solid grey;
    line-height: 1;
	margin-left: 5px !important
}

#sub-dtable_filter {
	float: none;
    margin-left: 22%;
}

select.input-sm {
	margin: 0px 5px;
}

.dataTables_paginate.paging_simple_numbers {
	position: absolute;
    bottom: 18px;
    right: 31px;
}

li.paginate_button {
    border: 1px solid #dedede !important;
    padding: 0 6px !important;
}

li.paginate_button a {
	color: #383838;
}

li.paginate_button a:hover {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    position: unset !important;
}

.text-left {
	text-align: left !important
}

.logout {
	background: #da3f1c !important;
}

.ml-65 {
	margin-left: 65px !important;
}

.text-blue {
	color: #264f9b !important;
}

#total_t span {
	font-size: 10px;
	color: grey;	
}

.reg td {
	padding-right: 40px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.dis {
	background: #dcdcdc !important;
}

.wid100p {
	width: 100% !important;
}

.notecv {
	margin-top: 10px !important;
	font-size: 13px !important;
	color: #d83636 !important
}

#msform .action-button-add {
    width: auto;
    background: #27509b;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    position: relative;
    margin-top: 5px;
    margin-bottom: 10px !important;
    top: 0;
    left: 0;
    float: left !important;
	clear: both !important;
}

.float-left {
	float: left !important;
}

#tbody td {
    border: 1px solid gray !important;
    padding: 10px !important;
}

tr#addhead {
    background: #cccccc;
    color: black;
    font-weight: bold;
    font-size: 14px;
}

.remove {
    background: none !important;
    padding: 10px !important;
    color: #da3f1c !important;
    border: 2px solid #da3f1c;
}

.text-center {
	text-align: center !important;
}

.sel_reg {
	padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#total td {
	padding-right: 0px !important;
}

.font-bold {
	font-weight: bold !important
}

.font-17 {
	font-size: 17px !important
}

input[name*=bene_name] {
	text-transform: uppercase;
}

.appr {
	color: #09820d;
    font-weight: bold;
}










/* -------------------- Media Queries -------------------- */
	
@media screen and (max-width: 399px) {
	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 900px) {
	#msform {
		width: 100%
	}
	
	.limited.right {
		text-align: center;
		display: block;
		width: 100%;
	}
	
	.mr-100 {
		margin-right: 0px !important;
	}
	
	.ml-25 {
		margin-left: 0px !important;
	}
	
	.limited.left {
		text-align: center;
		display: block;
		width: 100%;
		margin-top: 15px
	}
	
	.courses_list1, .courses_list2, .courses_list3, .courses_list4 {
		width: 100% !important;
		margin: 10px auto;
	}

	.coordinators_list1, .coordinators_list2, .coordinators_list3, .coordinators_list4 {
		width: 100% !important;
		margin: 10px auto;
	}
	
	#other_info {
		width: 100%;
	}
	
	#phone {
		width: 100%
	}
}

/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
  
}