/*.row{
	margin-bottom: 30px;
}*/

.top-bar{
	background-color: #80ccae;
	/*padding:20px;*/
	padding-bottom: 20px;
}



/*------------------ Navbar styles --------------*/

.navbar-default {

    background-color: #bedec7;

    border-color: #bedec7;

}

.navbar-default .navbar-brand, .navbar-default .navbar-brand {

    color: #000;

    background-color: transparent;

}

.navbar-default .navbar-nav > li > a {

    color: #000;

    background-color: transparent;

	border-right:1px solid #000; 

}

.navbar-default .navbar-nav > li:last-child > a {
	border-right: none;
}




.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {

    color: #000;

    background-color: transparent;

}

/*------------------ Navbar logo styles --------------*/

.navbar-brand .top-logo{

	width: auto;

	/*height: 94px;*/

	position: relative;

	top: -57px;

}

/*------------------ About-text styles --------------*/

#ghm-about{
	color: #fff;

	font-family: 'Roboto', sans-serif;

	padding-bottom: 20px;

}

#ghm-about p{

	font-size: 18px;

}

.grn{

	color: green;

}

/*------------------ abt-img styles --------------*/

.grid {

	position: relative;

	clear: both;

	margin: 0 auto;

	/*padding: 1em 0 4em;*/

	/*max-width: 1000px;*/

	list-style: none;

	text-align: center;

}



/* Common style */

.grid figure {

	position: relative;

	float: left;

	overflow: hidden;

	margin: 10px 1%;

	min-width: 100%;

	max-width: 100%;

	max-height:100%;;

	width: 100%;

	height: 100%;

	background: #3085a3;

	text-align: center;

	cursor: pointer;

}



.grid figure img {

	position: relative;

	/*display: block;*/

	min-height: 100%;

	max-width: 100%;

	opacity: 0.8;

}



.grid figure figcaption {

	padding: 2em;

	color: #fff;

	text-transform: uppercase;

	font-size: 1.25em;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}



.grid figure figcaption::before,

.grid figure figcaption::after {

	pointer-events: none;

}



.grid figure figcaption,

.grid figure figcaption > a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */

.grid figure figcaption > a {

	z-index: 1000;

	text-indent: 200%;

	white-space: nowrap;

	font-size: 0;

	opacity: 0;

}



.grid figure h2 {

	word-spacing: -0.15em;

	font-weight: 300;

}



.grid figure h2 span {

	font-weight: 800;

}



.grid figure h2,

.grid figure p {

	margin: 0;

}



.grid figure p {

	letter-spacing: 1px;

	font-size: 68.5%;

}



/*-----------------*/

/***** Apollo *****/

/*-----------------*/



figure.effect-apollo {

	background: #3498db;

}



figure.effect-apollo img {

	opacity: 0.95;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale3d(1.05,1.05,1);

	transform: scale3d(1.05,1.05,1);

}



figure.effect-apollo figcaption::before {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(255,255,255,0.5);

	content: '';

	-webkit-transition: -webkit-transform 0.6s;

	transition: transform 0.6s;

	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);

	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);

}



figure.effect-apollo p {

	position: absolute;

	right: 0;

	bottom: 0;

	margin: 3em;

	padding: 0 1em;

	max-width: 150px;

	border-right: 4px solid #fff;

	text-align: right;

	opacity: 0;

	-webkit-transition: opacity 0.35s;

	transition: opacity 0.35s;

}



figure.effect-apollo h2 {

	text-align: left;

}



figure.effect-apollo:hover img {

	opacity: 0.6;

	-webkit-transform: scale3d(1,1,1);

	transform: scale3d(1,1,1);

}



figure.effect-apollo:hover figcaption::before {

	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);

	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);

}



figure.effect-apollo:hover p {

	opacity: 1;

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}

.navbar {
	border-radius: 0px !important;
}



/*------------------ feature styles --------------*/

#frmlog{
	margin-bottom: 30px;
	padding-bottom:30px;

}

.box{
min-height: 400px;
	border: 1px solid red;

	overflow: hidden;

}

.box-txt{

	padding-top:20px;

	padding-left: 10px;

	padding-right: 10px;

	font-family: 'Raleway', sans-serif;

	font-size: 16px;

}

.box h3{

	margin-top: 70px;

	font-style: italic;

	color: green;

}

/*------------------ feature-img styles --------------*/

.grn-img{

	height: auto;

}

/*------------------ login styles --------------*/

.grn h2{

	margin-bottom: 30px;

}

.grn-form{

	overflow: hidden;

	padding: 40px 0px 40px;

	background-color: green;
	min-height:400px;

}

.grn-fm{

	height: 40px;

	margin-bottom: 20px;

}

.grn-sub{

	width: 100%;

	background-color: #bedec7;

	box-shadow: none;

	height: 40px;

}



/*------------------footer styles --------------*/

#copyright{
	padding-top:10px; 
	background-color: #80ccae;
	color: #fff;
	bottom: 1px;
	left: 0;
	position:fixed;
	right: 0;
	z-index:99;
}
/*--------------------------------------------------- Custom Alert Start ---------------------------------------------------------------*/
#dialogoverlay{
	display: none;
	opacity: .8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 100;
}
#dialogbox{
	display: none;
	position: fixed;
	background: #FFB617;
	border-radius:7px; 
	width:550px;
	z-index: 100;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #19A7FB; font-size:19px; padding:10px; color:#FFFFFF; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:25px; text-align:center; color:#FFF; text-transform:uppercase; }
#dialogbox > div > #dialogboxfoot{ background: #19A7FB; padding:10px; text-align:right; }
.altBtn{
	border: 0;
	border-radius: 3px;
	padding: 4px 27px;
	background-color: #FFB617;
	color: #FFFFFF;
}
/*--------------------------------------------------- Custom Alert End ---------------------------------------------------------------*/
.side-menu ul {
    list-style-type: none;
    margin: 19px auto 19px auto;
    padding: 0;
    width: auto;
    background-color: #f1f1f1;
    /*border: 1px solid #555;*/
}

.side-menu li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.side-menu li {
    text-align: center;
    /*border-bottom: 1px solid #555;*/
}

.side-menu li:last-child {
    border-bottom: none;
}

.side-menu li a.active {
    background-color: #4CAF50;
    color: white;
}

.side-menu li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
.gap{
	margin:4px auto;	
}
/*------------------------------------ Lignt Box Start --------------------------------------*/
  .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            opacity:.80;
            /*-moz-opacity: 0.8;
            filter: alpha(opacity=80);*/
        }
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }        

/*------------------------------------ Lignt Box End --------------------------------------*/
.ui-datepicker-month, .ui-datepicker-year{
	color:#000000;
}
.view-table{
	max-height:357px;
}

/* MT Silvertoad 21/02/19 */
.ui-datepicker {
	z-index: 2000 !important;
}

/*----------------------------------- Drop Down Menu Start -----------------------------------------*/
.caret-up {
    width: 0; 
    height: 0; 
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;
    
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}
/*----------------------------------- Drop Down Menu End -----------------------------------------------------*/
/* .table{
	margin-bottom:0px;

}
.table > tbody > tr > th{
	word-break: break-all;
}
.table > tbody > tr > td{
	word-break: break-all;
} */
/*------------------------------Affix Menu---------------------------*/
.affix {
    position: fixed;
    top: 0;
    z-index: 9999;
    left: 0;
    right: 0;
}
.abstable tbody{
	position: absolute;
	left: 0;
	right: 0;
	padding-bottom: 41px;
}
.btn{
	white-space: normal;
}
.vericaltext{
	font-size: 20px; 
}
.zero-pad{
	padding:0px !important;
}
.without-border{
	border:0px !important;
	width:100% !important;
}

/*------------------------------Tab Menu---------------------------*/

.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
.vertical-text {
  margin-top:50px;
  border: none;
  position: relative;
}
.vertical-text>li {
  height: 20px;
  width: 120px;
  margin-bottom: 100px;
}
.vertical-text>li>a {
  border-bottom: 1px solid #ddd;
  border-right-color: transparent;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
  font-size:10px;
}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
}
.vertical-text.tabs-left {
  left: -50px;
}
.vertical-text.tabs-right {
  right: 47px;
}
.vertical-text.tabs-right>li {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.vertical-text.tabs-left>li {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}


.oxb button{
height: 65px;
    width: 190px;
margin-bottom:15px;

}
.gap1 button {
        width: 90px;
    height: 63px;
    
}
/*.col-sm-2 h4{
	text-align:center;
font-size: 15px;
}*/
.space .col-sm-6 {
padding-left:0px !important;
padding-right:0px !important;}
.add-text{
	height:33px !important;
}
textarea[placeholder]{
    text-align: center;
}
.indref{
	font-size:14px;
}
.pad{
	padding-top: 10px;
}
.nav-tabs > li > a{
	font-size: 15px;
}
.mrt {
	margin-top: 15px;
}
.limvis{
  	width: 100%;
	max-height:344px;
	overflow-y:scroll;
}
/*********************************************************************************************/
.conta {
    margin: 5px 0;
    display: block;
    position: relative;
}
.overlay1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
}
.middle {
    transition: .5s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.conta:hover .overlay1 {
    opacity: 0.8;
}

#dialogboxbody a,
#dialogboxbody a:hover{
	color:#fff;
	text-decoration:none;
	text-transform:capitalize;
}
.usuer-typ{
	color: #FFFFFF;
	font-size: 18px;
	position: absolute;
	top:1%;
	right: 0;
	text-transform: uppercase;	
}

/** MT Silvertoad 29/01/19 Sticky header */
#ghm-about {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
}

#alert {
	width: 100%;
}

#page-number {
	display: block;
	padding-top: 140px;
}

.option-red { color: red; }
.option-green { color: green; }
.option-yellow { color: yellow; }
.option-blue { color: blue; }
.option-orange { color: orange; }
.option-black { color: black; }
.option-purple { color: purple; }
.option-orangered { color: orangered; }
.option-pink { color: deeppink; }
.option-khaki { color: darkkhaki; }
.option-plum { color: plum; }
.option-slateblue { color: slateblue; }
.option-lime { color: lime; }
.option-teal { color: teal; }
.option-turquoise { color: darkturquoise; }
.option-royalblue { color: royalblue; }
.option-almond { color: navajowhite; }
.option-brown { color: sienna; }
.option-grey { color: grey; }
.option-salmon { color: darksalmon; }
.option-silver { color: darkgrey; }

.chosen-container-multi .chosen-choices li.search-choice.option-red, .group-name-coloured.option-red {
	background: red;
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-green, .group-name-coloured.option-green {
	background: green;
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-yellow, .group-name-coloured.option-yellow {
	background: yellow;
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-blue, .group-name-coloured.option-blue {
	background: blue;
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-orange, .group-name-coloured.option-orange {
	background: orange;
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-black, .group-name-coloured.option-black {
	background: black; 
	color: white; 
}

.chosen-container-multi .chosen-choices li.search-choice.option-purple, .group-name-coloured.option-purple { 
	background: purple; 
	color: white; 
}
	
.chosen-container-multi .chosen-choices li.search-choice.option-orangered, .group-name-coloured.option-orangered {
	background: orangered; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-pink, .group-name-coloured.option-pink { 
	background: pink; 
	color: black; 
}

.chosen-container-multi .chosen-choices li.search-choice.option-khaki, .group-name-coloured.option-khaki { 
	background: khaki; 
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-plum, .group-name-coloured.option-plum { 
	background: plum; 
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-slateblue, .group-name-coloured.option-slateblue { 
	background: slateblue; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-lime, .group-name-coloured.option-lime { 
	background: lime; 
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-teal, .group-name-coloured.option-teal { 
	background: teal; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-turquoise, .group-name-coloured.option-turquoise {
	background: turquoise; 
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-royalblue, .group-name-coloured.option-royalblue { 
	background: royalblue; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-almond, .group-name-coloured.option-almond { 
	background: blanchedalmond; 
	color: black;
}

.chosen-container-multi .chosen-choices li.search-choice.option-brown, .group-name-coloured.option-brown { 
	background: sienna; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-grey, .group-name-coloured.option-grey { 
	background: grey; 
	color: white; 
}

.chosen-container-multi .chosen-choices li.search-choice.option-salmon, .group-name-coloured.option-salmon { 
	background: darksalmon; 
	color: white;
}

.chosen-container-multi .chosen-choices li.search-choice.option-silver, .group-name-coloured.option-silver { 
	background: silver; 
	color: black;
}

/** MT Silvertoad 25/04/19 Key Information styling */

textarea {
	padding: 6px;
}

/** MT Silvertoad 25/04/19 Telephone and email validation */
input:invalid, textarea:invalid, select:invalid {
	border-color: red;
	box-shadow: 0px 0px 0px 2px red;
}

/** MT Silvertoad 30/04/19 Training list styling */
select.training-session-date {
	height: 26px;
}

/** MT Silvertoad Groups Management page */
#group-management-alert {
	margin: 2rem auto;
	width: 600px;
}

.groups {
	margin: 2rem auto 0 auto;
}

.groups th.group-name {
	width: 300px;
} 

.groups th.group-colour {
	width: 200px;
} 

.groups td, .groups th  {
	padding: 5px;
}

.groups select, .groups input {
	width: 100%;
}

.groups select {
	height: 34px;
}

/** MT Training Events Styling */
select.training-session-date {
	width: 100%;
}

/** MT Silvertoad Groups Membership Report */
table.group-membership {
	margin: 2rem auto;
	width: 600px;
}

table.group-membership th {
	border: 1px solid grey;
	padding: 5px;
}

table.group-membership tr td.group-name-coloured {
	padding: 10px;
	border: 1px solid black;
}

table.group-membership tr td {
	border: 1px solid grey;
	padding: 5px;
}

table.group-membership tr td:nth-child(2) {
	width: 120px;
}

table.group-membership .download-link {
	float: right;
}

table.group-membership .download-link a {
	color: inherit;
}

/** MT Silvertoad 14/05/19 All Users layout */

#all-users table {
	margin-bottom: 100px;
}

/** MT Silvertoad 05/09/19 Change Password Form */

#change-password-form table {
	width: 500px;
	margin: 0 auto;
}

#password-mismatch {
	color: red;
}

/** MT Silvertoad 30/09/19 GDPR Report */
table.gdpr-report {
	margin: 2rem auto;
	width: auto;
}

table.gdpr-report th {
	border: 1px solid grey;
	border-bottom-width: 0;
	padding: 5px;
    position: sticky;
    top: 150px;
    background: white;
}

table.gdpr-report th:after{
    content:'';
    position:absolute;
    left: 0;
    bottom: 0;
    width:100%;
    border-bottom: 1px solid grey;
}

table.gdpr-report tr td {
	border: 1px solid grey;
	padding: 5px;
}

.gdpr-never {
	color: grey;
	font-style: italic;
}

#gdpr-alert {
	background: #debec7;
	text-align: center;
	padding: 1rem;
	font-weight: bold;
}

.individual-consent td {
	padding: 5px;
}

#referral-info {
	display: block;
	padding-top: 1rem;
}

.gdpr-confirm {
	position: fixed;
	bottom: 50px;
	right: 50px;
}

/** MT Silvertoad 26/11 Select and Communicate */
table.query-report {
	margin: 2rem auto;
	width: auto;
}

table.query-report th {
	border: 1px solid grey;
	border-bottom-width: 0;
	padding: 5px;
    position: sticky;
    top: 150px;
    background: white;
}

table.query-report th:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid grey;
}

table.query-report tr td {
	border: 1px solid grey;
	padding: 5px;
}

#select-communicate-alert {
	background: #debec7;
	text-align: center;
	padding: 1rem;
	font-weight: bold;
}

/** MT 28/11/19 Field Info editor */
table.field-info {
	margin: 2rem auto;
	width: auto;
}

table.field-info th {
	border: 1px solid grey;
	border-bottom-width: 0;
	padding: 5px;
    position: sticky;
    top: 150px;
    background: white;
}

table.field-info th:after{
    content:'';
    position:absolute;
    left: 0;
    bottom: 0;
    width:100%;
    border-bottom: 1px solid grey;
}

table.field-info tr td {
	border: 1px solid grey;
	padding: 5px;
}

/** MT 13/12/19 Standard Texts */
.standard-text {
	margin: 2rem auto;
	max-width: 1000px;
}

.standard-text .field-header {
	font-weight: bold;
	padding: 1rem 0;
}

.standard-text textarea {
	height: 25rem;
}

/** MT 05/02/20 Field Hint Text */
.hint-text {
	width: 70rem;
}

/** MT 09/02/20 New Relationships Register */
.relationships-register td {
	vertical-align: middle !important;
}

.register-attendance-block {
	font-size: 2rem;
	align-items: center;
}

.register-attendance-block input {
	height: 2rem;
	width: 2rem;
	margin-left: 2rem;
}

.relationships-register {
	border-collapse: separate;
}

.register-entry-mentor td {
	border-top: 1px solid black !important;
}

.register-entry-mentor td[rowspan="2"] {
	border-top: 1px solid black !important;
	border-bottom: 1px solid black !important;
}

.register-entry-mentee td {
	border-bottom: 1px solid black !important;
}

td[rowspan="2"] input.register-attendance-attended {
	width: 4rem;
	height: 4rem;
}

.ui-datepicker.ui-datepicker-inline {
	width: 100%;
}

.individual-photo {
	width: 116px;
	background-color: #F00;
}

.has-gdpr-information * {
	color: red !important;
}

.cafe-helper .event-attendance {
	text-align: center;
}

.cafe-helper .event-attendance input {
	width: 2rem;
	height: 2rem;
}

.cafe-helper .individual-jump-container {
	padding-right: 10px;
}

#add-search-individual .modal-dialog {
	width: 800px;
}

#add-search-individual .modal-dialog form td {
	padding-right: 20px;
}

#add-search-individual .modal-dialog form input {
	width: 100%;
}

#set-gdpr-information input {
	width: 100%;
}

.generic-record-list .course-title {
	width: 350px;
}

#save-query input {
	width: 100%;
}

.individual-file.disabled {
	background: #eee;
}

.form-parent .importable {
	background: #bedec7;
}

.form-parent .not-importable {
	background: #fcc;
}

.form-parent .import-value th { 
	padding-left: 1em;
}

.form-parent .import-value.importable {
	background: #deeee7;
}

.form-parent .import-value.importable th {
	position: relative;
}

.form-parent .import-value.importable th:after {
	position: absolute;
	content: '(import)';
	top: calc(100% - 2em);
	right: 1em;
}

.form-parent .import-value.not-importable {
	background: #fdd;
}

.admin-security {
	text-align: center;
	font-weight: bold;
	padding: 1em;
	background: purple;
	color: white;
}

body > .container-fluid {
	padding-bottom: 5rem;
}

.referrer-job-title {
	float: right;
}

.profile-results {
	height: 5em;
	overflow-y: auto;
}

.profile-results td {
	padding-right: 1em;
}

.reports-list h4 {
    text-align: center;
}

.reports-list a {
	display: block;
	text-align: center;
}

.cohort-grid .element {
	text-align: center;
	background: palegoldenrod;
	border: 1px solid #ccc;
	padding: 0.3em;
}

.cohort-grid .general {
	text-align: center;
	background: aliceblue;
	border: 1px solid #ccc;
	padding: 0.3em;
}

.cohort-grid .member td {
	border: 1px solid #ccc;
}

.cohort-grid .id, .cohort-grid .name {
	padding: 0.3em;
}

th.rotate {
	/* Something you can count on */
	height: 140px;
	white-space: nowrap;
	min-width: 30px;
    vertical-align: bottom;
    position: relative;
}

th.rotate > div.border {
	transform: translate(101px, -173px) rotate(-60deg);
    width: 200px;
    right: 0;
    position: absolute;
    border-bottom: 1px solid #ccc;
    transform-origin: right bottom
}

th.rotate > div.text {
	transform: translate(-50%, 0) translate(18px, -50px) rotate(-60deg);
	width: 30px;
	left: 50%;
	position: absolute;	
	transform-origin: right bottom;
}

th.rotate > div.text > span {
	display: inline-block;
	max-width: 175px;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 5px 10px;
}

.group-delete {
	vertical-align: top;
}

input[type=checkbox].form-control {
	margin-top: 0;
	box-shadow: none;
}

.alert {
	margin-bottom: 0;
}

@media not print {
	.print-only {
		display: none;
	}
}

@media print {
	a[href]:after {
		content: none !important;
	}

	.print-page, .no-print {
		display: none !important;
	}

	.usuer-typ {
		display: none;
	}

	input[type='checkbox'] {
		width: 1.5em;
		height: 1.5em;
	}

	th i.red-card {
		font: inherit !important;
	}

	th i.red-card::before {
		content: 'Red Card?' !important;
	}

	th i.yellow-card {
		font: inherit !important;
	}

	th i.yellow-card::before {
		content: 'Yellow Card?' !important;
	}

	td i.red-card::before, td i.yellow-card::before {
		content: ' ' !important;
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
		border: 0.1em solid black;
		border-radius: 0.25em;
	}
}

.group-members {
	display: none;
}

.group-members.active {
	display: table-row-group;
}

.group-member-toggle i {
	padding-right: 1em;
}

.group-member-toggle .icon-collapse {
	display: none;
}

.group-member-toggle.active .icon-collapse {
	display: initial;
}

.group-member-toggle.active .icon-expand {
	display: none;
}

.floating-toolbar {
	position: fixed;
	top: 250px;
	left: calc(50% + 350px);
}

.edit-toggle:not(.edit-active) .edit-only {
	display: none;
}	

.edit-toggle.edit-active .edit-hide {
	display: none;
}	

.group-member.delete {
	background: #fcc;
}

.group-member.added {
	background: #bedec7;
}

table.sticky-header th {
	padding: 5px;
    position: sticky;
    top: 150px;
    background: white;
}

td.role-type-title {
	width: 25em;
}

option:disabled {
	color: #ccc;
}

.paging-header {
	font-weight: bold;
	margin-top: 1em;
}

.full-width {
	width: 100%;
}

.training-feedback-grid td {
    vertical-align: top;
}

.training-feedback-grid td:first-child {
    width: 2em;
}

.training-feedback-grid td.training-feedback-element {
    width: 15em;
}

.dashboard {
    columns: 1;
}

@media (min-width: 740px) {
	.dashboard {
		columns: 2;
	}	
}

@media (min-width: 1110px) {
	.dashboard {
		columns: 3;
	}	
}

@media (min-width: 1480px) {
	.dashboard {
		columns: 4;
	}	
}

@media (min-width: 1850px) {
	.dashboard {
		columns: 5;
	}	
}

.dashboard-entry {
    display: flex;
	gap: 20px;
    flex-direction: column;
    border: 5px solid #eee;
    border-radius: 10px;
    text-transform: uppercase;
    justify-content: stretch;
    padding: 10px;
    background: #f7f7f7;
	margin-bottom: 10px;
	break-inside: avoid-column;
}

.dashboard-entry h2 {
    margin: 0;
}

.dashboard-entry .dashboard-details {
    font-size: 10px;
}

.dashboard-stat-single {
    font-size: 60px;
    text-align: center;
    background: white;
}

.dashboard-stat-details {
    background: white;
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: center;
	align-items: stretch;
}

.dashboard-stat-details .details-main {
    font-size: 60px;
	order: 2;
}

.dashboard-stat-details .details-header {
	order: 1;
}

.dashboard-stat-details .details-footer {
    order: 3;
}

.dashboard-entry.wide {
}

.dashboard-table {
    background: white;
}

.dashboard-table td:first-child {
    padding: 10px;
}

.dashboard-table td:last-child {
    font-size: 30px;
    text-align: right;
    padding-right: 10px;
}

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-height: 100vh;
    padding: 2em;
}

.login img {
    max-height: 50vh;
}

.login form {
    color: #0A223E;
}

.login h2 {
    text-transform: uppercase;
}

.login td:first-child {
    padding: 1em 1em 1em 0;
    font-weight: bold;
}

.login input {
    border: none;
    background: #0A223E;
    color: white;
    padding: 0.5em;
}

.login tr:last-child td {
    text-align: center;
}

.login input[type="submit"] {
    text-transform: uppercase;
    padding: 1em 2em;
}


@media print {
    .dashboard {
        columns: 3;
    }

    .dashboard h2 {
        font-size: 20px;
    }

    .dashboard-table {
        font-size: 10px;
    }

    .dashboard-table td:last-child {
        font-size: 15px;
    }

    .dashboard .dashboard-stat-single, .dashboard .details-main {
        font-size: 32px;
    }
}