/* Root Variables */

:root {
    --brand-color: #00CBFF;
    --brand-color-hover: #718093;
    --red:#FD212B;
    --light-orange: #FA8779
    --mid-orange:#FA7400;
    --dark-orange:#F85B48;
    --yellow:#FFCF01;
    --light-green:#8DF848;
    --mid-green:#52EB7F;
    --light-blue:#48E5F8;
    --mid-blue:#0E6FD1;
    --dark-grey:#B0B2B6;
    --light-purple:#B348F8;
    --mid-purple:#A469E0;
    --pink:#F9488C;
    --aquamarine:#79FAC8;
    --aqua:#42F0D5;
    --light-grey:#D1D0D0;
    --black:#010001;
    --bronze:#DD6E23;
    --silver:#B0B2B6;
    --gold:#D0AA56;
    --white: #fff;
}



.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #737373;
}

/* Generic Styles
---------------------------------------------*/

[v-cloak] {
	display: none;
}

body {
	font-family:'Roboto',sans-serif;
	color:#111;
	padding-bottom: 7rem;
    font-size: 1rem;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

* {
	border-radius: 0!important;
}

a {
	color: var(--brand-color);
}

.table-fixed {
	table-layout: fixed;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--brand-color);;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

a:hover {
	text-decoration:none;
}

.mce-menubar {
	background: #fff!important;
}

.page-link {
    color: var(--brand-color);
}

.white-space-pre {
	white-space: pre;
}

.page-item.active .page-link {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

.badge-white {
	color: var(--brand-color);
	background-color: #fff;
}

.btn-color {
	background-color: var(--brand-color);
	color: #fff;
	border-radius: 0;
	border: 1px solid var(--brand-color);
    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

.btn-color:hover {
	background: var(--brand-color-hover);
	border-color: var(--brand-color-hover);
	color: #fff;
}

.dataTables_wrapper.container-fluid {
	padding-right: 0;
	padding-left: 0;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before {
	border: none!important;
	box-shadow: none!important;
	padding: 2px;
	top: 14px!important;
	border-radius: 0!important;
	background: var(--brand-color)!important;
}

.table-bordered {
	border-top: 0;
	border-bottom: 0;
}

.table-bordered tfoot td, .table-bordered tfoot th {
	border-top-width: 2px
}

.dropdown-item.active, .dropdown-item:active {
	background-color: var(--brand-color);
}

img {
    flex-shrink: 0;
}

.alert a {
	color: inherit;
	text-decoration: underline;
}

.login-form {
	margin: 0 auto;
}

.login-form .logo {
	max-width: 100%;
	width: 15rem;
	margin-bottom: 2rem;
}

.multiselect .multiselect__tags {
	border-color: #ced4da;
}

.multiselect.is-invalid .multiselect__tags {
	border-color: #dc3545;
}

.multiselect.is-invalid .multiselect__select:before {
	border-color: #dc3545 transparent transparent;
}

table.layout-fixed {
	table-layout: fixed;
}

ul.dashed {
	margin: 0px;
	list-style-type: none;
}
ul.dashed > li {
	text-indent: -5px;
}
ul.dashed > li:before {
	content: '-';
	text-indent: -5px;
}

/* Abandoned
---------------------------------------------*/

.form-check.highlight {
	padding: 1rem 1rem 1rem 2.5rem;
	color: #fff;
}

.form-check.highlight.red {
	background: #e74c3c;
}

.form-check.highlight.green {
	background: #2ecc71;
}

.form-check.highlight.orange {
	background: #e67e22;
}

/* Attendance
---------------------------------------------*/


/* Upload
---------------------------------------------*/

.upload-page {
	min-height: 100vh;
	background: var(--brand-color);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.upload-page .upload-form {
	 background: #fff;
	 max-width: 100%;
	 width: 30rem;
	 padding: 1rem;

}

/* Large Auth Form
---------------------------------------------*/
.large-auth-form {
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom:15px;
}

.large-auth-form .logo {
	max-width: 10rem;
	margin-bottom: 2rem;
}

.auth-screen .large-auth-form {
	 background: #fff;
	 max-width: 100%;
	 width: 50rem;
	 padding: 1rem;
}

.tb-border {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
}

.tb-border p {
	margin-bottom: 0rem;
}

.rb-bg {
    color: #495057;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-control-label::before {
    border: solid 2px #ec7d0d;
    background-color: #fff;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: #ec7d0d;
}

/* Auth
---------------------------------------------*/

.auth-screen {
	 background: #077589;
	 min-height: 100vh;
	 display: flex;
	 align-items: center;
	 margin-bottom: -7rem;
}

.auth-screen .login-form {
	 background: #fff;
	 max-width: 100%;
	 width: 30rem;
	 padding: 1rem;
}

/* Sidebar
---------------------------------------------*/
.sidebar {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	padding:1.25rem;
	padding-left:0;
	padding-right:0;
	z-index:1000;
	overflow-x:hidden;
	overflow-y:auto;
	background:var(--brand-color);
}

.sidebar .logo {
	width: 80%;
	margin: 0 auto;
	display: block;
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.sidebar .nav-pills svg {
    margin-left: 1rem;
	width: 2rem;
}

.sidebar a {
	color:#fff;
	text-transform:uppercase;
	font-size:.7rem;
	letter-spacing:.2rem;
	padding:.75rem 1rem;
}

.sidebar a .badge {
	font-size:.7rem;
	letter-spacing: 0;
	min-width: 1.5rem;
	margin-right: 0.5rem;
}

.sidebar i {
	font-size:1rem;
	min-width:2rem;
	text-align:center;
}

.sidebar .site-title a:hover {
	background:none!important;
}

.sidebar .nav-item {
	width:100%;
    color: #fff;
    display: flex;
    align-items: center;
}

.sidebar .nav-item + .nav-item {
	margin-left:0;
}

.sidebar .nav-link {
	border-radius:0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#wrapper.toggled .sidebar-nav {
	display:none;
}

.sidebar .nav-item:hover,.sidebar .nav-item.active {
	background-color:#718093;
}

.sidebar .main-menu {
	margin-top: 1rem;
}

.sidebar .current-user {
	margin-left: 2.4rem;
    margin-top: 0.5rem;
    display: block;
}


/* Main View
---------------------------------------------*/
.view {
	margin-bottom:1rem;
	margin-top:1rem;
}

.view-header {
	margin-top:0;
	margin-bottom:2.4rem;
	padding-bottom:1rem;
	border-bottom:1px solid #eee;
}

.view-header h1 {
	padding:1rem 0;
	margin:0;
	width:100%;
	font-weight:700;
	letter-spacing:.2rem;
	text-transform:uppercase;
	font-size:2rem;
}

/* Sections
---------------------------------------------*/

.sections-container .sections-card {
	box-shadow: 0px 5px 30px rgba(0,0,0,0.1);
	padding: 2rem;
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	max-width: 100%;
}

.sections-container h4 {
	padding-bottom: 1rem;
}

.sections-container .btn[type="submit"] {
	margin-top: 1rem;
	padding: 1rem 2rem;
    width: 100%;
}

/* Date Picker
---------------------------------------------*/

.mx-input {
	height: 38px!important;
	box-shadow: none!important;
	border: 1px solid #ced4da!important;
	color: #495057!important;
}

.form-control-date.mx-datepicker {
	width: 100%!important;
}

.view-header .mx-input {
	height: 40px!important;
}

/* Queue
---------------------------------------------*/

#online-form-iframe {
	border: 0;
	width: 100%;
	height: calc(100vh - 13.4rem);
}

.data-row {
	margin: 1rem 0;
	padding: 1rem;
}

.data-row .multi-field > .col-12:first-of-type label {
	margin-top: 0;
}
.data-row .multi-field label {
	margin-top: 1rem;
	margin-bottom: 0.5rem
}

.data-row:nth-child(even) {
	background-color: #eee;
}

.data-row-flag {
	color: #721c24;
	background-color: #f8d7da!important;
}

/* Form
---------------------------------------------*/

.form-date {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-date select {
	box-sizing: border-box;
	margin-bottom: 0.625rem;
	width: calc(1/3*100% - (1 - 1/3)*1rem);
}


/* Information
---------------------------------------------*/

.information-section {
	height: calc(100vh - 170px);
	overflow-y: scroll
}

.information-section .list-group-item {
	cursor: pointer;
}

/* App Footer
-------------------------------------------------- */

.app-footer {
	background: var(--brand-color);
}

.app-footer a {
	color: #fff;
	padding: 1rem 1rem 3rem 1rem;
	display: inline-block;
}

#refresh-modal .modal-content {
	background: none;
	border: none;
	color: #fff;
}

/* Create Order Forms
---------------------------------------------*/

.input-col p,
.input-col li {
	font-size: 1rem;
}


.form-disclaimer {
	margin: 4rem 0 1rem 0;
}

.input-row {
	display: flex;
}

.input-row .input-col {
	flex: 1;
	margin: 0 1rem 2rem 1rem;
	background: #fff;
	padding: 2rem;
	flex-grow: 1;
	box-shadow: 0px 5px 30px rgba(0,0,0,0.1);
}

.input-row .input-col:first-child {
	margin-left: 0;
}

.input-row .input-col:last-child {
	margin-right: 0;
}

.input-row .input-col.title-placeholder {
	padding-top: 4.75rem;
}

.form-date {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-date select {
	box-sizing: border-box;
	margin-bottom: 0.625rem;
	width: calc(1/3*100% - (1 - 1/3)*1rem);
}

.input-col label {
	width: 100%;
}

.form-flag {
	color: #aaa;
	float: right;
}

.input-col table {
	table-layout: fixed;
	margin-top: 2rem;
}

.input-col .application-type-info {
	font-weight: bold;
}

.input-col p.total-label {
	font-size: 2rem;
	text-align: center;
	font-weight: 300;
	line-height: normal;
	margin-bottom: 0.5rem;
}

.input-col p.total-amount {
	font-size: 2rem;
	text-align: center;
	color: #02192f;
	line-height: normal;
	margin: 0;
}

.input-col .preview-card {
	width: 100%;
	max-width: 25rem;
}

.input-col .application-price {
	color: #02192f;
	font-size: 1.3em;
	line-height: normal;
	margin-top: 1rem;
	display: block;
}

.input-col .application-timescale {
	font-weight: normal;
}

.step-count {
	margin-top: 1rem;
}

.get-started {
	display: none;
}

.custom-select.is-invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
}

.btn-darkblue {
	background: var(--brand-color);
	color: #fff;
	border-radius: 0;
}

.btn-darkblue:hover {
	background: var(--brand-color);
	border-color: var(--brand-color);
	color: #fff;
}

.btn-attendance {
	background: var(--brand-color);
	color: #fff;
	border-radius: 0;
	padding: 0.75rem 1.25rem;
}

.btn-attendance:hover {
	background: var(--brand-color);
	border-color: #1a93a8;
	color: #fff;
}

.btn-attendance:focus {
	box-shadow: unset;
}

/* Members */
.nav-tabs {
    border-bottom: none !important;
    justify-content: center;
  }

.nav-tabs .nav-item {
    flex: 1;
}

.nav-tabs .nav-item:nth-child(2) {
    border-right: 1px solid var(--brand-color);
    border-left: 1px solid var(--brand-color);
}

.nav-tabs .nav-item .active {
    background: #00CAFE;
	color: #fff;
	border-radius: 0;
	border: 1px solid #00CAFE;
}

.nav-tabs .nav-item .active .nav-link {
    border: 1px solid var(--brand-color);
}

.nav-tabs .nav-item .nav-link {
    width: 100%;
    height: 100%;
    border: 1px solid #EEEFEE;
}

/* Levels Tab */
.levels-accordion .card {
    border: none;
    margin: 0 0 1.5rem;
}

.levels-accordion .card .card-header {
    padding: 0;
    background: #2996AB;
}

.levels-accordion .card .card-header button {
    width: 100%;
    text-align: left;
    text-decoration: none;
    align-items: center;
    position: relative;
    color: white;
}

.levels-accordion .card .card-header button::after {
    font-family: "Font Awesome 5 Pro";
    width: fit-content;
    font-size: 1rem;
    color: white;
    font-weight: 300;
    transition: content 1.5s;
    top: 0;
    right: 0;
    position: absolute;
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    margin-top: 0;
}

.levels-accordion .card .card-header button[aria-expanded="false"]::after {
    content: "\f078" ; /* fa-chevron-down */
}

.levels-accordion .card .card-header button[aria-expanded="true"]::after {
    content: "\f077"; /* fa-chevron-up */
}

.levels-accordion .card .card-body .wrapper {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.levels-accordion .card .card-body .wrapper i,
.levels-accordion .card .card-body .wrapper svg {
    margin-right: 0.5rem;
    font-weight: 500;
}

.levels-accordion .card .card-body .wrapper.achieved i,
.levels-accordion .card .card-body .wrapper.achieved svg {
    color: green;
}

.levels-accordion .card .card-body .wrapper.achieved {
    background-color: var(--mid-green);
    color: white;
}

.levels-accordion .card .card-body .wrapper.achieved svg {
    color: white;
}

.levels-accordion .card .card-body .wrapper.achieved p {
    flex: 1;
}

.levels-accordion .card .card-body .wrapper p {
    margin-bottom: 0;
}

.levels-accordion .card .card-body .wrapper.achieved button  {
    margin-left: 2rem;
    border-color: red;
    background: none;
    cursor: pointer;
}

.levels-accordion .card .card-body .wrapper.achieved button svg.fa-times {
    margin-right: 0;
    color: red;
}

/* Badges Accordion */
.badges-accordion .card {
    border: none;
    margin: 0 0 1.5rem;
}

.badges-accordion .card .card-header {
    padding: 0;
    background: #2996AB;
}

.badges-accordion .card .card-header button {
    width: 100%;
    text-align: left;
    text-decoration: none;
    align-items: center;
    position: relative;
    color: white;
}

.badges-accordion .card .card-header button::after {
    font-family: "Font Awesome 5 Pro";
    width: fit-content;
    font-size: 1rem;
    color: white;
    font-weight: 300;
    transition: content 1.5s;
    top: 0;
    right: 0;
    position: absolute;
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    margin-top: 0;
}

.badges-accordion .card .card-header button[aria-expanded="false"]::after {
    content: "\f067" ; /* fa-plus */
}

.badges-accordion .card .card-header button[aria-expanded="true"]::after {
    content: "\f068"; /* fa-minus */
}

.badges-accordion .card .card-body {
    background-color: #F6F7F6;
}

.badges-accordion .card .card-body .badge-col.admin {
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.badges-accordion .card .card-body .badge-col.admin:hover {
    background: #d7dbd7;
}

.badges-accordion .card .card-body .badge-col {
    padding: 1rem;
    display: flex;
    align-items: center;
}

.badges-accordion .card .card-body .wrapper {
    display: flex;
    align-items: center;
}

.badges-accordion .card .card-body .wrapper.not-achieved {
    opacity: 0.25;
}

.badges-accordion .card .card-body .wrapper i,
.badges-accordion .card .card-body .wrapper svg {
    margin-right: 1rem;
    font-size: 3rem;
    color: #2996AB;
}

.badges-accordion .card .card-body .wrapper p {
    margin-bottom: 0;
}

.height-div {
    height: 400px;
    position: relative;
}

.chart-col .percentage {
    text-align: center;
    position: absolute;
    top: 40%;
    width: 100%;
    margin: auto;
    text-align: center;
}

.chart-col .percentage h3 {
    font-size: 3rem;
}

.fa-check .green {
    color: green;
}

canvas {
    width: 100%;
    height: 100%;
    max-width: 375px;
    max-height: 375px;
    margin: auto;
}

.other-achievement-list .fa-star {
    color: #00CAFE;
}

.other-achievements-wrapper p {
    flex: 1;
}

.other-achievements-wrapper button {
    background: none;
    border-color: red;
    color: red;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: 0.3s ease-in-out;
}

.other-achievements-wrapper button:hover {
    background: red;
    color: white
}

.table th,
.table td {
    padding: 0.25rem;
}

/* Dashboard Accordions */
.accordion-body {
    padding: 3rem 1rem;
}
.accordion .label {
    position: relative;
    padding: 1rem 1.5rem;
    width: 100%;
    border: none;
    background-color: var(--brand-color-hover);
    color: var(--white);
    border-radius: 0;
    cursor: pointer;
  }

  .accordion .label h4 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .accordion .content {
    border-width: 1px;
    border-style: solid;
    border-color: var(--brand-color-hover);
    height: 100%;
    padding: 1rem 1.5rem;
  }

  .accordion .container {
    position: relative;
    padding: 0 0 1rem;
    cursor: pointer;
    max-width: 100%;
  }

    @keyframes arrow-rotation {
        from {
        transform: rotate(0deg);
        }

        to {
        transform: rotate(180deg);
        }
    }

  .accordion .container button span {
    transition: 0.5s all;
  }

  .accordion .container button[aria-expanded="true"] span {
      animation: arrow-rotation 0.5s;
      transform: rotate(180deg);
  }

/* Assign Rewards */
.day-pill {
    cursor: pointer;
    margin: 0 3px 6px 0;
    transition: all 0.2s;
    background-color: #e9ecef;
}
.day-pill.active {
    background-color: #00CBFF;
    color: white;
}

/* Select Cards */
.select-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
}
.select-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.select-card.selected {
    border-left: 4px solid #00CBFF;
    background-color: rgba(0,123,255,0.05);
}
.select-card .secondary {
    color: #6c757d;
    font-size: 0.9rem;
}
.select-card .badge {
    font-size: 0.85rem;
    background-color: #f8f9fa;
    padding: 2px 8px;
}



/* Media Queries
---------------------------------------------*/

@media only screen and (max-width: 800px) {
	.input-row {
		display: block;
	}

	.input-row .input-col {
		margin: 0 0 1rem 0 !important;
	}

	.input-row .input-col.title-placeholder {
		padding-top: 2rem;
	}
}

@media screen and (min-width: 576px) {
	.main-menu.collapse {
		display: block;
	}
}

@media screen and (max-width: 575px) {
	.sidebar {
		position:fixed;
		left:0;
		right:0;
		min-height:3rem;
		bottom: auto;
	}
	.view {
		margin-top: 5.3rem;
	}

	.view-header {
		padding-bottom: 0;
	}

	.sidebar .logo {
		width: auto;
		max-height: 2.8rem;
		margin-left: 1rem;
		margin-bottom: 0;
		margin-top: 0;
	}

	.sidebar a {
		padding: .75rem 1.5rem;
	}

	.mobile-button {
		float: right;
	}

	.sidebar .main-menu {
		height: calc(100vh - 6.3rem);
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 10rem;
	}
}

@media screen and (max-width: 480px) {
	.upload-page .upload-form {
		 width: 90vw;

	}
}

@media print {
	.sidebar {
		display: none;
	}

	.view {
		width: 100%!important;
		max-width: 100%!important;
		margin-left: 0;
		flex: none;
	}

	.sections-container .sections-card {
		padding: 0;
	}
}

.multiselect__option--highlight {
    background: var(--brand-color) !important;
}

.multiselect__option--highlight::after {
    background: var(--brand-color) !important;
}

.dataTables_scrollBody {
    overflow: visible !important;
}