/*

INVISIO -n
Invision, in this instance meaning the way we see the webskite in general.

*/


/* ----- MENU ----- */
	.navbar-default {
		background-color: var(--cbp);
		border: none;
		box-shadow: 0px 0.4px 2.2px -15px rgba(0, 0, 0, 0.02), 0px 1px 5.3px -15px rgba(0, 0, 0, 0.028), 0px 1.9px 10px -15px rgba(0, 0, 0, 0.035), 0px 3.4px 17.9px -15px rgba(0, 0, 0, 0.042), 0px 6.3px 33.4px -15px rgba(0, 0, 0, 0.05), 0px 15px 80px -15px rgba(0, 0, 0, 0.07);
	}

	.navbar-header .region-navigation {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
	}

	.navbar-collapse {
		float: right;
	}

	#block-navigation a,
	#block-accountmenu a {
		display: inline-block;
		vertical-align: middle;
		background-color: var(--cbl);
		padding: 16px 25px 17px;
		font-size: 0.8rem;
		color: var(--cbp);
	}

	#block-navigation a {
		border-right: 3px solid var(--cbw);
	}

	#block-accountmenu a {
		border-left: 3px solid var(--cbw);
	}

	#block-navigation a svg,
	#block-accountmenu a svg {
		margin-right: 6px;
	}

	h1.page-header {
		border: none;
		font-weight: 700;
		font-size: 1.5rem;
		color: var(--cbw);
		margin: 0px 25px;
		padding: 12px 0px;
	}


/* ----- PAGE ----- */
	.page .field--name-body {
		padding: 25px 25px 0px;
	}

	.custom-page {
		padding: 25px 25px 0px;
	}

	.view-navigation-pages .view-content {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		min-height: 78vh;
		gap: 40px;
	}

	.dash-itm {
		text-align: center;
	}

	.dash-itm a {
		width: 290px;
		padding: 70px 30px;
		border-radius: 20px;
		background-color: var(--cbl);
		display: inline-block;
		height: 290px;
		vertical-align: middle;
	}

	.dash-itm a:hover, .dash-itm a:focus, .dash-itm a:active {
		background-color: var(--cbs);
		color: var(--cbw);
	}

	.lnkgrp {
		text-align: center;
	}

	.main-container {
		min-height: 92vh;
	}


/* ----- NAVIGATION ----- */
	.navsvg {
		fill-rule: evenodd;
		clip-rule: evenodd;
		stroke-linejoin: round;
		stroke-miterlimit: 2;
		fill: var(--cbp);
		width: 100px;
		height: 100px;
		margin-bottom: 25px;
		transition: var(--bsl);
	}

	.dash-itm a:hover .navsvg, .dash-itm a:focus .navsvg, .dash-itm a:active .navsvg {
		fill: var(--cbw);
	}



/* ----- WEBFORM ----- */
	.webform-submission-form,
	.webform-submission-data {
		margin: 40px 40px 0px;
	}

	.webform-submission-form .panel-default ,
	.webform-submission-data .panel-default {
		margin-bottom: 25px;
		background-color: var(--cbw);
		border: none;
		border-radius: 20px;
		box-shadow: var(--bsl);
 	}

 	.webform-submission-form .panel-body,
 	.webform-submission-data .panel-body {
 		padding: 25px;
 	}

	.webform-submission-form .panel-default > .panel-heading,
	.webform-submission-data .panel-default > .panel-heading {
  		background-color: var(--cbg);
  		padding: 15px 25px;
  		border-radius: 20px 20px 0px 0px;
  		border: none;
 	}

	.webform-submission-form .panel-title,
	.webform-submission-data .panel-title {
  		padding: 0px;
  		font-size: 1.3rem;
  		font-weight: 700;
  		color: var(--cbw);
  		margin: 0px;
 	}

 	.webform-submission-form label,
 	.webform-submission-data label {
 		display: block;
 		margin-bottom: 5px !important;
 		color: var(--cbt);
 		font-weight: 600;
 	}

 	.webform-flexbox {
 		margin: 0px;
 	}

 	.iti--allow-dropdown {
 		width: 100%;
 	}

 	.webform-options-display-buttons label.webform-options-display-buttons-label {
 		border: none;
 		border-radius: 10px;
 		background-color: var(--chp);
 		padding: 15px 30px;
 		font-size: 0.8rem;
 		color: var(--cbw);
 		transition: var(--tr);
 		font-weight: 400;
  	}

  	#edit-stamps label.webform-options-display-buttons-label {
  		width: 85px;
  		font-size: 1.2rem;
  	}

  	.webform-options-display-buttons label.webform-options-display-buttons-label:hover,
  	.webform-options-display-buttons label.webform-options-display-buttons-label:focus,
  	.webform-options-display-buttons label.webform-options-display-buttons-label:active {
  		background-color: var(--chs);
  		color: var(--cbw);
  	}

	.webform-options-display-buttons label.webform-options-display-buttons-label:hover .description,
	.webform-options-display-buttons label.webform-options-display-buttons-label:focus .description,
	.webform-options-display-buttons label.webform-options-display-buttons-label:active .description {
		color: var(--cbw);
	}

	.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label {
		background-color: var(--chs);
		color: var(--cbw) !important;
	}

	.webform-options-display-buttons input:hover + label.webform-options-display-buttons-label {
		color: var(--cbw) !important;
	}

	.webform-options-display-buttons-description {
		color: var(--cbt);
	}

	.webform-options-display-buttons input:hover .webform-options-display-buttons-description,
	.webform-options-display-buttons input:focus .webform-options-display-buttons-description,
	.webform-options-display-buttons input:active .webform-options-display-buttons-description {
		color: var(--cbw);
	}

	.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label .webform-options-display-buttons-description {
		color: var(--cbw);
	}

	.checkboxes--wrapper .fieldset-wrapper,
	.radios--wrapper .fieldset-wrapper {
		margin: 5px 0px 15px;
	}

	.form-control {
		display: block;
		width: 100%;
		height: 45px;
		padding: 6px 12px;
		font-size: 16px;
		line-height: 1.5;
		color: var(--cbt);
		background-color: var(--cbw);
		background-image: none;
		border: 2px solid var(--cbp);
		border-radius: 15px;
    	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	}

	.form-control:focus {
		border-color: var(--cbs);
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(91 12 136 / 60%);
		box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(91 12 136 / 60%);
	}

	.webform-address__row-1 {
		margin-top: 0px;
	}

	.input-group-addon {
		text-align: left;
		background-color: var(--cbn);
		border: 2px solid var(--cbp);
		padding: 10px 20px;
		margin-top: -27px;
		color: var(--cbw) !important;
		border-radius: 15px;
	}

	.form-control:focus .input-group-addon {
		border-color: var(--cbs);
	}

	html.js .form-item .input-group-addon .glyphicon {
		color: var(--cbw);
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow {
		display: none;
	}

	.select2-container .select2-selection--single {
		height: 45px;
		border-radius: 15px;
		border: 2px solid var(--cbp);
	}

	.select2-container .select2-selection--single .select2-selection__rendered {
		padding: 8px 10px;
		line-height: 1.5;
		color: var(--cbt);
	}

	.select-wrapper:after {
		color: var(--cbp);
		padding-right: 10px;
		margin-top: -7px;
	}

	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background-color: var(--cbp);
	}

	.webform-submission-navigation,
	.webform-submission-information {
		display: none;
	}

	.wsf-flex,
	.wsd-flex {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: center;
	}

	.wsfbitm {
		flex: 1;
		margin: 20px;
	}

	.webform-multiple-table--operations .btn {
		padding: 5px 10px;
		margin: 2px;
	}

	.webform-submission-confirm-form {
		margin: 40px;
		background-color: var(--cbl);
		border-radius: 20px;
		padding: 30px;
	}

	.form-item-annual-leave,
	.form-item-sick-leave {
		flex: 1;
		margin: 20px;
	}

	.webform-multiple-add {
		display: none;
	}

	.form-type-number.form-inline .input-group,
	.form-type-date.form-inline .form-control {
		width: 100%;
	}

	.form-type-number.form-inline .input-group .input-group-addon  {
		width: 50px;
	}

	td.form-inline .form-type-date,
	td.form-inline .form-type-number {
		width: 100%;
	}


/* ----- VIEWS ----- */
	
	.view {
		padding: 0px 25px 40px;
	}

	.view-staff-directory > .view-content {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
	}

	.view-staff-directory .views-row {
		background-color: var(--cbw);
		padding: 25px;
		width: 48%;
		margin: 15px;
		border-radius: 15px;
		box-shadow: var(--bsl);
	}

	.ccard {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}

	.sd-ppic img {
		width: 250px;
		height: 250px;
		border-radius: 50%;
		border: 10px solid var(--cbp);
		margin-right: 20px;
		object-position: center;
		object-fit: cover;
		background-position: center;
		background-size: cover;
	}

	.ccin {
		width: 70%;
		margin-left: 40px;
	}

	.sd-nam {
		font-size: 2rem;
		font-weight: 700;
		color: var(--cbp);
	}

	.sd-pnum {
		margin-top: 20px;
	}

	.act-drop {
		position: relative;
	}

	.act-cog {
		display: inline-block;
		vertical-align: middle;
		padding: 10px 20px;
		border-radius: 15px;
		background-color: var(--chp);
		transition: var(--trb);
		color: var(--cbw);
		width: 150px;
		text-align: center;
		cursor: pointer;
	}

	.act-cog svg:nth-of-type(2) {
		margin-left: 10px;
	}

	.act-cog + .act-nav {
		max-height: 0px;
		overflow: hidden;
		transition: var(--trb);
		position: absolute;
		width: 150px;
		z-index: 999;
		right: 0px;
	}

	.act-cog:hover + .act-nav,
	.act-cog:focus + .act-nav,
	.act-cog:active + .act-nav,
	.act-cog + .act-nav:hover,
	.act-cog + .act-nav:focus,
	.act-cog + .act-nav:active {
		max-height: 300px;
	}

	.an-itm a {
		display: inline-block;
		vertical-align: middle;
		padding: 8px 15px;
		width: 100%;
		background-color: var(--chm);
		border-top: 2px solid var(--cbw);
		color: var(--cbw);
		transition: var(--trb);
		font-size: 0.8rem;
	}

	.an-itm:first-of-type a {
		border-top: none;
		margin-top: 5px;
		border-radius: 15px 15px 0px 0px;
	}

	.an-itm:last-of-type a {
		border-radius: 0px 0px 15px 15px;
	}

	.an-itm a svg {
		margin-right: 10px;
	}

	.an-itm a:hover, .an-itm a:focus, .an-itm a:active {
		background-color: var(--chs);
		color: var(--cbw);
	}

	.table > caption + thead > tr:first-child > th,
	.table > colgroup + thead > tr:first-child > th,
	.table > thead:first-child > tr:first-child > th,
	.table > caption + thead > tr:first-child > td,
	.table > colgroup + thead > tr:first-child > td,
	.table > thead:first-child > tr:first-child > td {
		background-color: var(--cbp);
		color: var(--cbw);
		padding: 15px;
		border: 2px solid var(--cbw);
	}

	.table-striped > tbody > tr:nth-of-type(odd) {
		background-color: var(--ctp);
	}

	.table-striped > tbody > tr:nth-of-type(even) {
		background-color: var(--cts);
	}

	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td {
		vertical-align: middle;
	}

	.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
	.table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td,
	.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
		border: 2px solid var(--cbw);
	}

	.pager li > a, .pager li > span {
		background-color: var(--chp);
		color: var(--cbw);
		border: none;
		border-radius: 15px;
		padding: 15px 30px;
	}

	.pager li > a:hover, .pager li > a:focus, .pager li > a:active {
		background-color: var(--chs);
	}

	.views-header-flex {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-between;
		margin: 40px 0px;
	}

	.views-header-flex .view-header {
		order: 2;
	}

	.views-addbtn .vsb-itm a {
		display: inline-block;
		vertical-align: middle;
		background-color: var(--chp);
		color: var(--cbw);
		padding: 15px 50px;
		border-radius: 15px;
		margin-right: 10px;
		transition: var(--trb);
	}

	.views-addbtn .vsb-itm a:hover, .views-addbtn .vsb-itm a:focus, .views-addbtn .vsb-itm a:active {
		background-color: var(--chs);
	}

	.form-item-items-per-page label {
		display: none;
	}

	.view .form-control {
		height: 56px;
	}

	.view .table-responsive {
		overflow-x: visible;
	}

	.dash-head,
	.dash-head h3 {
		text-align: center;
	}

	.view-navigation-pages .views-header-flex,
	.view-manage-vets .view-header-full,
	.view-customers .view-header-full,
	.view-finances-credits .view-header-full,
	.view-fpl .view-header-full,
	.view-executive-manage-staff .view-header-full ,
	.view-refunds .view-header-full,
	.view-mvouchers .view-header-full,
	.view-elm .view-header-full {
		display: none;
	}


/* ----- OFFLINE PAGE ----- */

	.offline-page {
		position: absolute;
		left: 0;
		top: -55px;
		width: 100vw;
		height: 100vh;
		text-align: center;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		background-color: var(--cbn);
		z-index: 9999;
	}

	.op-elements {
		width: 50%;
		background-color: var(--cbw);
		padding: 60px;
		border-radius: 25px;
		box-shadow: var(--bsl);
	}

	.op-elements > h1 {
		font-size: 3rem;
		font-weight: 900;
		color: var(--cbd);
	}

	.ope-subhead {
		font-size: 1.3rem;
		color: var(--cbg);
		width: 80%;
		margin: 40px auto 0px;
	}

	.opes-title {
		font-size: 1.2rem;
		color: var(--cbg);
	}

	.opes-number a {
		font-size: 1.5rem;
		color: var(--cbd);
		font-weight: 700;
	}

	.ope-support {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-around;
	}


/* ----- VOUCHER MANAGEMENT ----- */
	.scale-check {
		display: none;
	}

	.vsco #edit-stamps .webform-options-display-buttons-wrapper:nth-of-type(n+2), .vsco #edit-stamps-p1 .webform-options-display-buttons-wrapper:nth-of-type(n+2),
	.vsco #edit-stamps-p2 .webform-options-display-buttons-wrapper:nth-of-type(n+2), .vsco #edit-stamps-p3 .webform-options-display-buttons-wrapper:nth-of-type(n+2),
	.vsco #edit-stamps-p4 .webform-options-display-buttons-wrapper:nth-of-type(n+2), .vsco #edit-stamps-p5 .webform-options-display-buttons-wrapper:nth-of-type(n+2),
	.vsco #edit-stamps-p6 .webform-options-display-buttons-wrapper:nth-of-type(n+2), .vsco #edit-stamps-p7 .webform-options-display-buttons-wrapper:nth-of-type(n+2) {
		display: none;
	}

	.vscf #edit-stamps .webform-options-display-buttons-wrapper:nth-of-type(n+5), .vscf #edit-stamps-p1 .webform-options-display-buttons-wrapper:nth-of-type(n+5),
	.vscf #edit-stamps-p2 .webform-options-display-buttons-wrapper:nth-of-type(n+5), .vscf #edit-stamps-p3 .webform-options-display-buttons-wrapper:nth-of-type(n+5),
	.vscf #edit-stamps-p4 .webform-options-display-buttons-wrapper:nth-of-type(n+5), .vscf #edit-stamps-p5 .webform-options-display-buttons-wrapper:nth-of-type(n+5),
	.vscf #edit-stamps-p6 .webform-options-display-buttons-wrapper:nth-of-type(n+5), .vscf #edit-stamps-p7 .webform-options-display-buttons-wrapper:nth-of-type(n+5) {
		display: none;
	}

	.vsce #edit-stamps .webform-options-display-buttons-wrapper:nth-of-type(n+9), .vsce #edit-stamps-p1 .webform-options-display-buttons-wrapper:nth-of-type(n+9),
	.vsce #edit-stamps-p2 .webform-options-display-buttons-wrapper:nth-of-type(n+9), .vsce #edit-stamps-p3 .webform-options-display-buttons-wrapper:nth-of-type(n+9),
	.vsce #edit-stamps-p4 .webform-options-display-buttons-wrapper:nth-of-type(n+9), .vsce #edit-stamps-p5 .webform-options-display-buttons-wrapper:nth-of-type(n+9),
	.vsce #edit-stamps-p6 .webform-options-display-buttons-wrapper:nth-of-type(n+9), .vsce #edit-stamps-p7 .webform-options-display-buttons-wrapper:nth-of-type(n+9) {
		display: none;
	}

	.vscs #edit-stamps .webform-options-display-buttons-wrapper:nth-of-type(n+17), .vscs #edit-stamps-p1 .webform-options-display-buttons-wrapper:nth-of-type(n+17),
	.vscs #edit-stamps-p2 .webform-options-display-buttons-wrapper:nth-of-type(n+17), .vscs #edit-stamps-p3 .webform-options-display-buttons-wrapper:nth-of-type(n+17),
	.vscs #edit-stamps-p4 .webform-options-display-buttons-wrapper:nth-of-type(n+17), .vscs #edit-stamps-p5 .webform-options-display-buttons-wrapper:nth-of-type(n+17),
	.vscs #edit-stamps-p6 .webform-options-display-buttons-wrapper:nth-of-type(n+17), .vscs #edit-stamps-p7 .webform-options-display-buttons-wrapper:nth-of-type(n+17) {
		display: none;
	}


/* ----- LUNCH SCHEDULE ----- */
	.ls-table {
		width: 100%;
	}

	.ls-table td {
		padding: 10px;
		border-bottom: 4px solid var(--cbw);
		border-right: 4px solid var(--cbw);
	}

	.ls-table .ls-head th {
		background-color: var(--cbs);
		padding: 20px;
		font-size: 1.2rem;
		color: var(--cbw);
		border: 4px solid var(--cbw);
	}

	.ls-table .ls-active {
		background-color: var(--cbp);
		color: var(--cbw);
		text-align: center;
	}

	.ls-emp {
		background-color: var(--ctp);
	}

	.ls-table .ls-inactive {
		background-color: var(--cts);
		text-align: center;
	}


























/* ----- FOOTER ----- */
	.footer {
		border: none;
		padding: 15px 25px;
		background-color: var(--cbd);
	}

	.footer #block-footer {
		text-align: center;
		font-size: 0.7rem;
		color: var(--cbw);
	}