/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 04-Jul-2016, 09:34:07
    Author     : chris.burton
*/

/*@import url(https://fonts.googleapis.com/css?family=Poppins Light Light:400,500);*/

.page-header{
    margin:20px 0;
}


.support-table tr{border-bottom-width: 0;}
.support-table td{padding:8px 5px;background-color: #f1f1f1;}
.support-table th{padding:8px 5px;background-color: #38b5ab;color:#fff;border-radius: 3px 3px 0 0;font-size: 16px;font-family: 'Poppins Light';letter-spacing: 1px;}
.support-table{border-collapse: collapse;}
.admin-spacer{
    max-width: 30vw;
}
#support-table{ border: 1px solid black;}
.dataTables_scroll{ border: 1px solid black;}
.background-styling{background: #38b5ab; color: white;}
.support-collapse{position: absolute; right: 0; margin-right: 20px; font-size: large;}
.support-header th{position: relative;}

.admin-stats{margin: 25px 0 50px 0;text-align: center;}
.admin-stats .number-stats {margin-top: 50px;}
.admin-stats > div {
    width: 15%;
    min-width: 150px;
    display: inline-block;
}
.admin-stats > div > div:nth-of-type(1){
    width:100%;
    font-size: xx-large;
}
.admin-stats > div > div:nth-of-type(2){
    width:100%;
}
.dataTables_wrapper{overflow-x: auto;}
/*.dataTable {width:99%!important;}*/
/*bug on ie causes horizontal scrollbar*/
textarea{border: 0}

.super-admin-container .std-input, .super-admin-container .std-select, .super-admin-container .dataTable th {background-color: rgb(83, 95, 107) !important;}
.super-admin-container .dataTables_wrapper .dataTables_paginate .paginate_button {color: rgb(51,51,51) !important;}

.super-admin-nav{position: relative;text-align: right;}
.super-admin-mobile-nav, .super-admin-nav{
    width: 100%;height: 75px;line-height: 70px;
    background-image: linear-gradient(45deg, #008181, #c7d417);
    color: rgb(255,255,255); border-bottom: 5px solid #38b5ab;position: absolute;top: 0;left: 0; z-index:1000;
}
.super-admin-mobile-slide-in{display: none;position: absolute;top: 0;left: 0; background:#38b5ab; color:white; z-index:999;width: 100%;height: 100%;}
.super-admin-mobile-slide-in a{color:white!important;}
.super-admin-mobile-nav{display: none;padding:0 20px;}
.super-admin-mobile-slide-in .even-level{
    background-color: rgba(0,0,0,0.1);
}
.super-admin-mobile-slide-in .nav-scroller > ul{ padding-top:70px;}
.super-admin-mobile-slide-in .nav-scroller > ul > li:not(i){ font-size: larger;}
.super-admin-mobile-slide-in a{ text-decoration: none;}
.super-admin-mobile-slide-in .nav-scroller{width:100%;height:100%;overflow-y: auto;}
.super-admin-mobile-slide-in ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.super-admin-mobile-slide-in li{
    margin: 0;
    padding: 10px 20px;
}
.super-admin-mobile-nav .fa-bars {cursor: pointer;}


.super-admin-nav i {vertical-align: middle; color: white !important;}
.super-admin-nav ul.not:(.dropdown-content) {float:left;height: 100%;margin: 0;}
.super-admin-nav ul.not:(.dropdown-content) a:not(.btn){text-decoration: none; color: white; width:100%; height: 100%;}
.super-admin-nav ul.not:(.dropdown-content) ul a{text-decoration: none; color: white;line-height: 25px;}
.super-admin-nav > ul > li{display:inline-block;padding:0 20px 0 20px;text-align:center;}
.super-admin-nav > ul > li:hover{ }/*background-color: rgba(251,251,251,0.1);*/
.super-admin-nav > ul > li:hover ul{display:block !important;}
.super-admin-nav > ul > li ul{
    display:none;
    position: absolute;
    padding: 5px;
    margin: 0px 0 0 -30px;
    z-index: 1000;
    height: inherit;
    background: #38b5ab;
    box-shadow: 0px 10px 15px -8px rgba(0,0,0,0.4);
}
.super-admin-nav > ul > li li{
    color: white;
    box-sizing: border-box;
    list-style-type: none;
    text-align: left;
    padding: 5px 10px;
    height: 35px;
    line-height: 25px;
}
.super-admin-nav > ul > li li:hover{background-color: rgb(29,72,95); }
.super-admin-nav > ul > li li:hover a{color: rgb(255,255,255);}
.super-admin-nav .fa-search { position: absolute;left: 10px;text-align: left;color: white; pointer-events: none; width:20px;}

.super-admin-body{margin-top: 20px;width:84%;margin-left:8%;margin-top: 100px;padding-bottom: 100px;}
.super-admin-body .dataTable, table.dataTable.no-footer {border:1px solid #f1f1f1}
.super-admin-body .dataTable td{height:30px;}
.super-admin-body .dataTable th {border-radius: 0;}

.dataTable th, .dataTable td { white-space: nowrap; border-bottom-width: 0px!important; }

.display-message{padding: 20px;width:100%;border: 1px solid black;border-radius: 10px;margin: 40px 0;}

.display-message a{color: rgb(51,51,51);}
.display-message button {display: block; margin: 10px 0;}

.display-message p:first-child {margin-top:0;}
.display-message p:last-child {margin-bottom:0;}

.display-message h1:first-child, .display-message h2:first-child, .display-message h3:first-child {margin-top:0;}

.display-message button:first-child {margin-top:0;}
.display-message button:last-child {margin-bottom:0;}

.display-message.message-error{background-color: #ec7676;}
.display-message.message-success{background-color: #90c392;}

.filter-support{display:none;}
.filter-holder{padding: 0 10px;border: 1px solid rgb(83, 95, 107);height: 60px;line-height: 60px;background: rgb(83, 95, 107);}
.filter-holder p {height: 30px;line-height: 30px; margin: 10px;}
.form-button{margin-top:20px;}
.filter-item{background-color: rgba(0,0,0,0.2);border: 1px solid rgb(83, 95, 107); margin:0 5px; padding:0 5px; display:inline-block; border-radius: 5px;height: 40px;line-height: 40px;background: #38b5ab;color: white;}
.filter-item:first-child{margin-left:0;}

.form-label{ margin-top: 25px; }

/*Whole stylesheet below taken from V2*/

/*## Screen Independent Styles ##*/

/*# General Styles #*/

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Poppins Light', sans-serif !important; overflow-x: hidden; font-size: 16px !important;}
body { -webkit-transition-duration: 1s; transition-duration: 1s; }
input, select { border: none; padding: 1vmin 1vmin; outline: 0; font-family: 'Poppins Light', sans-serif !important; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
/*to review*/
#admin-centre .form-elem input, #admin-centre .form-elem select, #login-area input, #login-area select { width: 100%; padding: 15px; }
strong, b { font-family: 'Poppins', sans-serif; font-weight: 500; }
a{color: #38b5ab;}

nav, main { display: none; }

main .tile > label, main .tile > a > label, .admin-tile span, .block-header, table thead th, .mock-label { font-family: 'Poppins Medium', sans-serif; }

main p { margin: 0; }
table { width: 100%; text-align: left; /*color: #fff;*/ }
table.fixed { table-layout: fixed; }
table.info tr td { padding: 2%; border-bottom: 1px solid #fff; }
table th { padding: 0.5vmin; }
td > span { display: block; }
label { display: inline-block; vertical-align: middle; padding: 1vmin; }
hr { margin: 2vh 0; }

.ps-container.tile {
    overflow: hidden !important;
}
select::-ms-expand {
    display: none; /*IE 10+ fix for selects having default arrow*/
}
input[type=text]::-ms-clear {
    display: none; /*IE 10+ fix for inputs having clear buttons*/
}


form .group { margin-bottom: 2vmin; }
form .group h4, .block-body h4 { margin-bottom: 0.5vmin; }
form .group input { margin-bottom: 0.5vmin; }

.std-padding { padding: 1vmin; }

.tile-select select, .tile-select input, .tile-select .dropdown { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }
.tile-select i { width: auto; position: absolute; right: 1vh; bottom: initial!important; left: initial!important; z-index: 1; }
.dropdown { width: 100%; position: relative; }
.dropdown .chevron { width: auto; position: absolute; right: 1vh; color: inherit; }

.col-sm { width: 15%;}

.center { text-align: center; }
.right {text-align: right;}

.scroll-container { position: relative; overflow: hidden; }

.ellipsis{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

.status-display { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.status-display i, report-block i { position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

.green { background-color: #21A757 !important; }
.amber { background-color: #FF9109 !important; }
.red { background-color: #F95D5D !important; }
.blue { background-color: #3EAAA5 !important; }

.green-text { color: #50e48c !important; }
.amber-text { color: #FF9109 !important; }
.red-text { color: #F95D5D !important; }
.blue-text { color: rgb(29,72,95) !important; }

.thumb-status { 
    height: 66px;
    width: 66px;
    /*height: 10vmin;*/
    /*width: 10vmin;*/
    margin: 0 auto;
    color: #F5fffa;
    padding: 4%;
    /*height: 100%; width: 100%; position: absolute!important; top: 0; left: 0; color: #F5fffa;*/ }
.thumb-status-filled { position: relative; padding: 6px 3px; /*color: #F5fffa;*/ }
.thumb-status > i { vertical-align: middle; }
.thumb-status .sub-icon { position: absolute; top: 3px; right: 3px; background-color: inherit; padding: 1px; border: 1px solid; }
.thumb-status .sub-icon i {}
.thumb-status.expired { background-color: #cd526a;  }
.thumb-status.grace { background-color: #e4794f; }
.in-progress { background-color: #3EAAA5; }
.thumb-status.not-required { background-color: gray; }
.thumb-status.complete { background-color: #61ab61; }

#team-skills-view .thumb-status { position: absolute; top: 0; left: 0; width: 100%;height: 100%; border: none; }
#team-skills-view > div { margin-top: 2vmin; }
#team-skills-view .DTFC_LeftBodyWrapper { background-color: #fff; }
#team-skills-view .DTFC_ScrollWrapper { overflow: hidden; }

.centre { text-align: center; }

.date-stamp { width: 40px; outline: 1px solid #ddd; margin: 0 auto; }

.inline { display: inline-block; vertical-align: middle; margin-right: 3%; }
.huge-text { font-size: 5.8vmin; }
.large-text { font-size: 2.3vmin; }
.medium-text { font-size: 2vmin; }
.small-text { font-size: 1.8vmin }
.tiny-text { font-size: 1.5vmin }
.mini-text { font-size: 1.1vmin; }

.vertical-centre { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.block-content { display: block; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.block-content > * { display: inline-block; margin: 0 1vmin; }
.block-content > p { display: block; text-align: center; }

a { text-decoration: none; cursor: pointer; }
/*a, .link-button:hover { text-decoration: underline; }*/

.link-button { 
    background: none;
    border: none;
    padding:0;
    font-size: 1em;
    text-decoration: none; 
    cursor: pointer;
}

.small-screen-show{
    display:none;
}


.draggable-container ul{
    list-style-type: none;
    padding:0;
    border: 1px solid black; 
    width:100%;
    height:100%; 
    float:left; 
    overflow-y: auto; 
    overflow-x:hidden;
    background:white;
}
.draggable-container li {
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    border: 1px solid rgb(51,51,51);
    margin:-1px;
}
.draggable-container .title-holder h1,
.draggable-container .title-holder h2,
.draggable-container .title-holder h3,
.draggable-container .title-holder h4{
    display: inline-block; 
    float:left; 
    text-align: center;
}
.draggable-container .draggable-empty {
    color: black !important;
    position: absolute;
    text-align: center;
    width:100%;
    top:50%;
    transform: translateY(-50%);
    display:none;
}
.draggable-holder{
    position: relative;
    display: inline-block;
    float: left;
    height:88%;/* to allow space for headers */
}
.sub-admin-empty{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

main ul, nav ul { margin: 0; padding: 0; white-space: nowrap; }

section { display: none; }
section.active { display: block; }

nav { float: left; position: fixed; z-index: 5; width: 100px; height: 100vh; border-right: 1px solid #142d4d; }
main { float: left; width: calc(100% - 100px); height: 100%; margin-left: 100px; padding: 4vh; -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
main.transition { transform: scale(0.5); }

nav > ul > li { list-style-type: none; }
nav > ul > li > a { display: block; width: 100%; padding: 1.35vw 0; text-align: center; border-bottom: 1px solid #92A9C5; cursor: pointer; }
nav > ul > li.selected, nav > ul > li > a { -webkit-transition-duration: 1s; transition-duration: 1s; }

.tile { position: absolute; overflow: hidden; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -o-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0.1; }
.tile a { text-decoration: none; }
.tile-float { position: relative; float: left; margin-bottom: 1vh; }

.tile.overflow { overflow: visible!important; z-index: 1; }

.tile.report-block { position: static; padding: 0; margin: 0.5vmin; /*background-color: #E8E8ED;*/ }

.no-select { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

/*JQuery UI Autocomplete*/
.auto-input{
    padding-left:2vh;
    width: 100%;
} 
.auto-input-inverted{
    padding-left:2vh;
    width: 100%;
} 
.auto-user{
    height: 6.1vh;
    padding-left: 2.5vh;
}

.ui-autocomplete{
    font-family: 'Poppins Light', sans-serif; 
    max-height: 30vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index:100;
}
.ui-autocomplete a{
    text-decoration: none;
}
.ui-menu .ui-menu-divider {
    margin: 0 !important; 
}
.ui-autocomplete a {
    line-height:35px;
    text-decoration: none;
    color:white!important;
}

#profile p.medium { padding: 1% 0; }
#profile > a > *:not(label) { padding: 3px 0; }

.user-profile-link{cursor:pointer;}

#user-profile-picture:hover{transform: scale(1.05);} 
#user-profile-picture-upload { /*background-image: url("../images/default-user.png");*/text-align: center; }
#user-profile-picture-upload .dz-remove { display:none; }

#polygons { display: block; position: absolute; top: 0; right: 0; opacity: 0.2; z-index: -1; }

header, #user-display, #search, #identity { height: 9.7vh; min-height: 100px; }
#user-display { float: left; position: relative; width: 30%; padding-left: 120px; z-index: 1 }
#user-profile-picture { position: absolute; top: 0; left: 0; width: 100px; height: 100px; overflow: hidden; }
#user-profile-picture > img { position: relative; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#user-display > h4 { margin: 0.5vmin 0; }

/* Breadcrumbs styling */
#breadcrumb { padding-top: 4%; }
#breadcrumb ul li { display: inline-block; padding-right: 2%; }
#breadcrumb ul li a { padding: 0.5vmin 1vmin; text-decoration: none; cursor: initial; }
#breadcrumb ul li a[href] { /*background-color: rgb(184, 189, 199); color: #1a1a1a;*/ text-decoration: none; cursor: pointer; }
#breadcrumb ul li a[href]:hover { text-decoration: underline; }

/* Breadcrumb wrap */
.wrap-text { display: none; }
.toggle-text { margin: 0 1vh; padding: 0 1vh; cursor: pointer; }

#search { float: left; position: relative; width: 40%; padding-top: 1.3%; text-align: center; }
#search i { display: inline-block; width: 6%; height: 100%; padding: 0 30px; }
#search input { display: inline-block; border: none; border-bottom: 2px solid rgba(0,0,0,0.2); background-color: transparent; padding: 0 0 3px; width: 55%; font-family: 'Poppins Light', sans-serif; }
#search input:focus { outline: none; }

.search-input { width: 100%; border: none; border-bottom: 2px solid rgba(0,0,0,0.2); background-color: transparent; padding: 0 0 15px; font-family: 'Poppins Light', sans-serif; }
.search-input:focus { outline: none; }

#identity { float: right; position: relative; width: 30%; text-align: right; }
#identity > img { height: 9vh; }

#pages { min-height: 74vh; margin-top: 2vh; }
#pages section, #async-output { position: relative; width: 100%; height: 100%; }
#async-output { display: none; }
#pages section > div, #pages > #async-output > section > div, #team-enrol > form > div { padding: 2.7vmin; overflow: hidden; }
#pages section > div > i, #pages > section > div > a > i { display: block; position: absolute; bottom: 10px; left: 10px; }
#pages section > div > i.fa-chevron-left { display: none; position: absolute; top: 50%; left: 10px; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#pages section > div > i.fa-chevron-right { display: none; position: absolute; top: 50%; right: 10px; left: auto; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#pages section > div > span, #pages > section > div > a > span { display: block; position: absolute; bottom: 10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

/*width: 8vh; height: 8vh;*/



.login-area { height: 50vh; width: 90%; max-width: 1200px; position: absolute!important; text-align: center; transition-duration: 0.8s; }
.login-area .branding, .login-area .form { position: relative; float: left; height: 100%; padding: 3vh; }
.login-area .branding { width: 35%; }
.login-area .branding img { width: 65%; margin: 3vh 0;max-height: 60%; }
.login-area .branding .footer { width: 100%; position: absolute; bottom: 0; left: 0; padding: 3vh; }
.login-area .form { width: 65%; }
.login-area .form form { width: 100%; max-width: 500px; margin: 0 auto; }
.login-area .form form * { margin-bottom: 2vh; }
/*.login-area > img { width: 60%; margin-bottom: 20px; -webkit-animation-duration: 3s; animation-duration: 3s; }
.login-area .button { margin: 3vmin 0; }
.login-form input { margin: 10px 0; }
.login-footer { margin-top: 60px; }*/

main .tile > label, main .tile > a > label, .mock-label { display: block; position: absolute; bottom: 0; right: 0; z-index: 1;}

.block-list { list-style-type: none; }
.block-list li { position: relative; float: left; width: 10%; height: 11vh; margin-right: 1vh; white-space: normal; }
.block-list li i { position: absolute; top: 35%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 2vmin; border-radius: 100vh; }
.block-list li span { position: absolute; bottom: 0; left: 0; padding: 2%; }
.triangle-top-left { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 4vmin 4vmin 0 0; }
.triangle-number { position: absolute; top: 0; left: 0; padding: 2% 5%; }

.block-question { margin-top: 3%; list-style-type: none; }
.block-question > li { margin-bottom: 3.5%; }
.block-question > li > label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.block-question > li > label > span { padding: 0 2%; position: relative; }
.block-question > li > label { border: 4px solid transparent; display: block; }
.block-question input[type="radio"]:checked+label{ /*background:none; color: white;*/ border: 4px solid white;}
.block-question input[type="radio"] { display: none; }
.block-question input[type="submit"] { padding: 0; /*background: white;*/ margin: 0; height: 5.5vh; /*color: black;*/ border: 0; width: 100%;}

.block-percentage { width: 100%; height: 10vh; text-align: center; }

.block-header, .block-body, .block-description { position: relative; padding: 1.5vmin; }
.block-body { width: 100%; overflow: auto; }

.block-header i { float: right; margin-top: -3px; cursor: pointer; }

.block-row > div { height: 12vmin; padding: 1vmin; }

#team-skills-summary label { /*background-color: #1d485f;*/ }
#team-grid { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.team-skills-photo { position: relative; float: left; width: 20%; height: 33.3%; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.team-skills-photo > img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

#profile-display { width: 49.7%; height: 73vh; top: 0; left: 0; }
#activity { width: 49.7%; height: 73vh; top: 0; left: 50.2%; }

#my-training-record-summary { width: 52%; height: 23vh; top: 0; left: 0; }
#my-training-timeline { width: 40%; height: 73vh; top: 0; left: 0; }
#my-certificates { width: 59.5%; height: 73vh; top: 0; left: 40.5%; }
#my-certificates .carousel .side-text-position { /*padding: 9vh 0; */}
#my-certificates .carousel-page { overflow-y: hidden; }

#my-awaiting-approval { width: 25.7%; height: 24vh; top: 24vh; left: 0;}
#my-approved-learning { width: 25.7%;  height: 24vh; top: 24vh; left: 26.2%;}
#my-booked-to-attend { width: 52%; height: 24vh; top: 49vh; left: 0;}
#my-skills-audit { width: 47.5%; height: 73vh; top: 0; left: 52.5%; }

#my-skills-audit .scroll-container { height: 67%; }

#team-skills-summary { width: 33%; height: 38vh; top: 0; left: 0;}
#team-skills-search { width: 33%; height: 24vh; top: 0; left: 0; }
#team-skills-stats1 { width: 33%; height: 24vh; top: 0; left: 33.5%; }
#team-skills-stats2 { width: 33%; height: 24vh; top: 0; left: 67%; }
#team-skills-view { width: 100%; height: 48vh; top: 25vh; left: 0; }

#manager-news-summary { width: 33%; height: 36vh; top: 37vh; left: 0;}
#team-bookings-summary { width: 33%; height: 24vh; top: 0; left: 33.5%;}
#team-requests-summary { width: 33%; height: 24vh; top: 0; left: 67%;}
#service-select { width: 66.5%; height: 6vh; top: 25vh; left: 33.5%;}
#certificate-upload-summary { width: 66.5%; height: 20vh; top: 32vh; left: 33.5%;}
#team-enrol-summary { width: 66.5%; height: 20vh; top: 53vh; left: 33.5%;}

#tour-viewer{width:100%;height:100%;background-color:rgba(0,0,0,0.8); z-index:1000; position: absolute; display:none; color:rgb(51,51,51);}
#tour-container{margin-left:10%;width:80%;height:100%;background-color:rgb(255,255,255); z-index:1000;height: 82vh;}
#tour-options-container{position: absolute;left:0;right:0;bottom:0; height:7%; }
#tour-options-container .tour-option{cursor: pointer; transition: background-color 0.5s ease;height:100%; position: relative;background-color: rgb(31, 75, 99); color: white;}
#tour-options-container .tour-option span{background-color:transparent;}
/*#tour-options-container .tour-option.has-option:hover, #tour-options-container .tour-option.has-option:hover span{background-color: white; color: black;}*/
#tour-data-target {width:100%;height:91%;}
#tour-data-target .tour-main-title{width:100%;height:9%;background-color: rgb(31, 75, 99); color: white;}
#tour-data-target .tour-main-title h2{text-align: center;}
#tour-data-target .tour-slide{ padding-left:10px;padding-right:10px;display:none;width:100%;height:93%;border-bottom:1px solid rgba(0,0,0,0.3); border-top:1px solid rgba(0,0,0,0.3);}
#tour-data-target .tour-slide.tour-active, #tour-data-target .tour-slide.tour-active {display: block;}
#tour-data-target .tour-block {height:100%; float:left; display: inline-block;overflow-y: auto; overflow-x:hidden;}
#tour-data-target .tour-title {width:100%; text-align:center; margin-bottom: 20px;}
#tour-data-target .tour-text {width:100%; overflow: auto; max-height: 100%; padding-left:20px; padding-right:20px;}
#tour-data-target .tour-text h3,#tour-data-target .tour-text h2,#tour-data-target .tour-text h1 {
    -webkit-margin-after: 1em; /* SIMULATING NORMAL P BEHAVIOR */
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;}
#tour-data-target .tour-image-holder {width:100%; padding:50px 0 50px 0; }
#tour-data-target .tour-image-holder .image-description {width: 100%;margin: 0;text-align: center;margin-bottom:20px; font-weight: bold;}
#tour-data-target .tour-image-holder .image-description:last-child {margin-bottom:20px;}
#tour-data-target .tour-image {object-fit: cover;width: 95%; margin: 0 2.5% 0 2.5%; border: 2px solid rgb(31, 75, 99);}
/*#tour-data-target .tour-image:not(.steven-image) {padding:20px 20px 0 20px;}*/
#tour-data-target .tour-welcome .tour-image {background-repeat: no-repeat;background-size: initial;height: 275px;width: 275px; border-radius: 150px;background-position-y: 100%;}
#tour-data-target .tour-welcome-message {padding:20px; height:100%; background-position-y: 10%; background-position-x: 95%; background-repeat: no-repeat; background-size: 200px; padding-left: 7%;padding-right: 20%;}
#tour-data-target #tour-close-holder {text-align:center; width:100%; margin-top: 100px}

#tour-hide {position: absolute;background-color: grey;height: 30px;width: 30px; line-height:28px; text-align: center; right: 8px;top: 8px; border: 2px solid white; cursor: pointer;background-color: rgb(115,133,150);color: rgb(255,255,255); z-index:1000;}
#tour-disable {position: absolute; background-color: grey; height: 30px; min-width: 200px; text-align: center;line-height: 28px;right: 54px;top: 8px; border: 2px solid white; cursor: pointer;background-color: rgb(115,133,150);color: rgb(255,255,255); z-index:1000;}
#tour-hide i{pointer-events: none;}

.full-block { width: 100%; height: 73vh; top: 0; left: 0; }

.control-block { width: 23%; height: 73vh; top: 0; left: 0; }
.view-block { width: 76.5%; height: 73vh; top: 0; left: 23.5%; }

.half-block-left { width: 49.7%; height: 73vh; top: 0; left: 0; }
.half-block-right { width: 49.7%; height: 73vh; top: 0; left: 50.3%; }

.half-block-top { width: 100%; height: 36.5vh; top: 0; left: 0; }
.half-block-bottom { width: 100%; height: 36.5vh; top: 37.5vh; left: 0; }

.quarter-block-top { width: 100%; height: 18.25vh; top: 0; left: 0; }
.three-quarter-block-bottom { width: 100%; height: 54.75vh; top: 19.25vh; left: 0; }

.three-quarter-block-left { width: 49.7%; height: 54.75vh; top: 19.25vh; left: 0; }
.three-quarter-block-right { width: 49.7%; height: 54.75vh; top: 19.25vh; left: 50.3%; }

footer { position: relative; margin-top: 2vh; height: 6vh; }
footer #help { position: absolute; top: 0; left: 0; padding: 1.2vmin 2vmin; }
footer #about { position: absolute; top: 0; right: 0; text-align: right; }
footer > * { padding: 0.5vh 0; }

#overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 5; }
#overlay > section { display: none; height: 100%; padding: 4vmin; }

.tile-in {
    -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
}

.tile-out {
    -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
}

.tile-link { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 2.7vmin; color: inherit; text-decoration: none; }

.delay-1 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.delay-2 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.delay-3 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.delay-4 { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.delay-5 { -webkit-transition-delay: 1s; transition-delay: 1s; }
.delay-6 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
.delay-7 { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }
.delay-8 { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; }
.delay-9 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

.anim-delay-1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.anim-delay-2 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.anim-delay-3 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.anim-delay-4 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.anim-delay-5 { -webkit-animation-delay: 1s; animation-delay: 1s; }
.anim-delay-6 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.anim-delay-7 { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.anim-delay-8 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.anim-delay-9 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }

.tile-options { list-style-type: none; white-space: initial; margin: 0; padding: 0; }
.tile-options li { display: inline-block; vertical-align: top; width: 19%; height: 28vmin; margin: 0 1% 1% 0; }
.tile-options li a { display: block; width: 100%; height: 100%; }
.tile-options li i { position: absolute; top: 40%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.tile-options li span { position: absolute; bottom: 10px; left: 10px; right: 10px;}

.admin-tile.update-block a{background-color: rgb(243, 243, 243)!important;color: black !important;}

.central-block { width: 76vw; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

#report-profile-menu-overlay { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 10; /*background-color: rgba(0,0,0,0.8);*/ }

.admin-tile { overflow: hidden; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0.1; }
.admin-tile-default { overflow: hidden; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0.1; transition-duration: 0.6s; }
.admin-tile-in { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
.admin-tile-flip-in { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }

#overlay-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transition-duration: 0.4s; transform: translate3d(0,0,0); }

#admin-header h1, #admin-header h3 { margin: 0; }

#admin-header { position: relative; height: 13vmin; }
#admin-header p { margin-top: 0.5vmin; }
#admin-header img { position: absolute; top: 0; right: 5vh; height: 9vh !important; }

#admin-home-screens { width: 76vw; position: absolute; top: 18%; left: 50%; webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

#admin-exit { display: block; }

.tile-indicator{  
    position: absolute;
    top: 10px;
    right: 10px; 
    background: red !important;
    color: white !important;
    height: 46px;
    width: 46px;
    border-radius: 23px;
    text-align: center;
    line-height: 46px;
    z-index: 1000;
}

.infinite-list-item{margin-top:5px;}

.std-select, .std-input, .snd-select, .snd-input {padding: 1vmin; width: 100%;}

.std-select option[disabled] {
    color: rgba(255,255,255,0.75); /*our inputs are grey so we dont want the colour to be that aswell*/
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgb(51,51,51);
}
::-moz-placeholder { /* Firefox 19+ */
    color: rgb(51,51,51);
}
:-ms-input-placeholder { /* IE 10+ */
    color: rgb(51,51,51);
}
::-ms-input-placeholder { /* Edge */
    color: rgb(51,51,51);
}
:-moz-placeholder { /* Firefox 18- */
    color: rgb(51,51,51);
}

#admin-footer { position: fixed; left: 0; bottom: 0; height: 13vh; }
#back-triangle { display: none; position: fixed; left: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 13vh 0 0 13vh; opacity: 0.4; cursor: auto; }
#back-text { display: none; position: fixed; bottom: 0; left: 0; /*color: #fff;*/ padding: 1.5vmin 2vmin; opacity: 0.4; }
#back-text a { text-decoration: none; cursor: auto; }
#back-triangle.back-active, #back-text.back-active { opacity: 1; }
#back-text.back-active a:hover { text-decoration: underline; cursor: pointer; }
#next-triangle { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 13vh 13vh; /*border-color: transparent transparent #1C4A61 transparent;*/ }
#next-text { position: fixed; bottom: 0; right: 0; /*color: #fff;*/ padding: 1.5vmin 2vmin; }
.close-triangle { position: fixed; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 12vh 12vh 0; z-index: 1; }
.close-text { position: fixed; right: 2vh; top: 2vh; /*color: #fff;*/ z-index: 1; }
.close { cursor: pointer; }
.overlay-display-container .close-triangle, .overlay-display-container .close-text { position: absolute; }

.mlc-expert { display: none; position: absolute; bottom: 0; left: 50%; height: 10vmin; overflow: hidden; webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.mlc-expert:hover { height: 11vmin; }
.mlc-expert-content { position: relative; height: 100%; padding-left: 14vmin; }
.mlc-expert-content * { margin: 0; padding: 0.2vmin 0; cursor: pointer; }
.mlc-expert-content:hover { text-decoration: underline; }
.mlc-expert img { position: absolute; top: 0; left: 0; width: 12vmin; }

#mlc-expert-tutorial { position: absolute; width: 50%; outline: 5000px solid rgba(0,0,0,0.5) }

#historic-mappings { list-style-type: none; margin: 0; padding: 0 1vmin; }
#historic-mappings li { position: relative; border-bottom: 1px solid #ddd; padding-bottom: 2vmin; }
#historic-mappings span, #historic-mappings select { display: block; float: right; width: 50%; }

.form-zone { width: 100%; height: 30vh; padding: 2vmin; margin-bottom: 2vmin; /*background-color: rgba(240,240,240,0.5);*/ border: 2px dashed #1C4A61; overflow: hidden; }
.form-zone > div:not(.ps-scrollbar-y-rail) { margin-bottom: 5vh; }
.form-zone > div > select { display: inline-block; width: 94%; margin-bottom: 1vmin; }
.form-zone > div > i { display: inline-block; width: 5%; margin-bottom: 1vmin; cursor: pointer; text-align: center; /*color: #1C4A61;*/ }

/* Base for label styling */
#mapping-approve[type="checkbox"]:not(:checked),
#mapping-approve[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
#mapping-approve[type="checkbox"]:not(:checked) + label,
#mapping-approve[type="checkbox"]:checked + label {
    position: relative;
    padding: 0 5vmin 1vmin 5vmin;
    cursor: pointer;
}

/* checkbox aspect */
#mapping-approve[type="checkbox"]:not(:checked) + label:before,
#mapping-approve[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 0;
    width: 3vmin; height: 3vmin;
    border: 1px solid #aaa;
    /*background: #f8f8f8;*/
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
#mapping-approve[type="checkbox"]:not(:checked) + label:after,
#mapping-approve[type="checkbox"]:checked + label:after {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    top: 0.5vmin; left: 0.3vmin;
    line-height: 0.8;
    /*color: #1C4A61;*/
    transition: all .2s;
}
/* checked mark aspect changes */
#mapping-approve[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
#mapping-approve[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
/* disabled checkbox */
#mapping-approve[type="checkbox"]:disabled:not(:checked) + label:before,
#mapping-approve[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    /*border-color: #bbb;
    background-color: #ddd;*/
}
#mapping-approve[type="checkbox"]:disabled:checked + label:after {
    /*color: #999;*/
}
#mapping-approve[type="checkbox"]:disabled + label {
    /*color: #aaa;*/
}
/* accessibility */
#mapping-approve[type="checkbox"]:checked:focus + label:before,
#mapping-approve[type="checkbox"]:not(:checked):focus + label:before {
    border-width: 1px;
    border-style: dotted;
    /*border-color: blue; */
}

#sessions thead {
    /*background-color: #275063;*/
}

#sessions .title {
    font-weight: 500;

}

#sessions .session-date {
    font-weight: 500;
    display: inline-block;
}

#sessions .session-details {
    margin-left: 1vw;
    display: inline-block;
}

#sessions tbody td {
    /*color: black;*/
}

#sessions .form-section-header {
    font-weight: 500;
    /*color: #1C4A61;*/
}

.text-red {
    /*color: #ff5959;*/
}

.col { padding: 0 10px; float: left; }
.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%;}
.col-reverse { margin-left: -10px; margin-right: -10px; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; }
th.col-1, td.col-1, th.col-2, td.col-2, th.col-3, td.col-3, th.col-4, td.col-4, th.col-5, td.col-5, th.col-6, td.col-6, th.col-7, td.col-7, th.col-8, td.col-8, th.col-9, td.col-9, th.col-10, td.col-10, th.col-11, td.col-11, td.col-12, th.col-12 { float: none; }
.row { margin-bottom: 10px; }

.col-offset-1 { margin-left: 8.33333333%; }
.col-offset-2 { margin-left: 16.66666667%; }
.col-offset-3 { margin-left: 25%; }
.col-offset-4 { margin-left: 33.33333333%; }
.col-offset-5 { margin-left: 41.66666667%; }
.col-offset-6 { margin-left: 50%; }
.col-offset-7 { margin-left: 58.33333333%; }
.col-offset-8 { margin-left: 66.66666667%; }
.col-offset-9 { margin-left: 75%; }
.col-offset-10 { margin-left: 83.33333333%; }
.col-offset-11 { margin-left: 91.66666667%; }
.col-offset-12 { margin-left: 100%; }


.tbl-10 { width: 10%; }
.tbl-20 { width: 20%; }
.tbl-30 { width: 30%; }
.tbl-40 { width: 40%; }
.tbl-50 { width: 50%; }
.tbl-60 { width: 60%; }
.tbl-70 { width: 70%; }
.tbl-80 { width: 80%; }
.tbl-90 { width: 90%; }
.tbl-100 { width: 100%; }

.fixed-scroll { width: 100%; position: relative; border: 1px solid #ddd; overflow: hidden; text-align: center; }
.fixed-scroll ul { margin: 0; padding: 0; }
.fixed-scroll ul li { margin: 0; padding: 0; vertical-align: top; }
.fixed-scroll-header { width: 100%; height: 60px; /*background-color: #275063; color: #f5fffa;*/ padding-left: 20%; overflow: hidden; }
.fixed-scroll-sidebar { float: left; width: 20%; height: 750px; overflow: hidden; }
.fixed-scroll-header ul { list-style-type: none; white-space: nowrap; }
.fixed-scroll-header ul li { display: inline-block; vertical-align: top; width: 20%; height: 60px; }
.fixed-scroll-sidebar ul li { display: inline-block; vertical-align: top; width: 100%; height: 60px; /*background-color: #E6E2E2;*/ }
.fixed-scroll-sidebar ul li:nth-of-type(even) { /*background-color: #F5F5F5;*/ }
.fixed-scroll-cell { position: absolute; top: 0; left: 0; width: 20%; height: 60px; /*background-color: #275063; color: #f5fffa;*/ z-index: 1; }
.fixed-scroll-body { width: 100%; }
.fixed-scroll-content { height: 440px; width: 80%; position: relative; float: left; overflow: scroll; }
.fixed-scroll-content ul { white-space: nowrap; /*background-color: #E6E2E2;*/ }
.fixed-scroll-content ul li { /*background-color: #E6E2E2;*/ }
.fixed-scroll-content ul:nth-of-type(even) li { /*background-color: #F5F5F5;*/ }
.fixed-scroll-content ul li { height: 60px; width: 20%; display: inline-block; }
.fixed-scroll span.v-align { padding: 0 10px; white-space: normal; }


#approval-display { padding: 20px 0; height:100%}
#approval-display > div { position: relative; height: 90px; text-align: center; padding: 0; }
.approval-progress-line { float: left; width: 50%; height: 50%; border-bottom: 4px solid #63e8cf }
.approval-progress-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    padding: 20px 0;
    /*background-color: #63E8CF;
    color: #1C4A61;*/
    border-radius: 50px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.approval-progress-line.inactive { border-bottom: 2px solid #93a8b1; }
.approval-progress-bubble.inactive { /*background-color: #93a8b1;*/ }

#my-team-skills-audit .fixed-scroll { height: 500px; }

.team-view { display: none; }
.team-view:first-of-type { display: block; }
.team-view .tile { padding: 2.7vmin; }

/* Vertical alignment */
.v-align, .h-align, .vh-align { position: relative; display: block; }
.v-align, .vh-align { top: 50%; }
.h-align, .vh-align { left: 50%; }
.v-align { max-height: 100%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.h-align { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.vh-align { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.a-left { text-align: left; }
.a-center { text-align: center; }
.a-right { text-align: right; }

.f-left{ float:left; }
.f-right{ float:right; }

#document-viewer,
#popout { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; }
#document-viewer .document,
#popout .document { height: 95%; width: 95%; position: relative; top: 2.5%; margin: 0 auto; padding: 2.7vmin; background-color: #f5fffa; }
#document-viewer .document i.fa-times,
#popout .document i.fa-times { position: absolute; top: 2.7vmin; right: 2.7vmin; z-index: 1; cursor: pointer; }
#document-viewer .title { height: 10%; }
#document-viewer .body,
#popout .body { height: 90%; }
#document-viewer .title,
#document-viewer .body,
#popout .title,
#popout .body { width: 100%; float: left; }
#document-viewer .body object,
#popout .body object { height: 100%; width: 100%; }

#popout .body { height: 86%; overflow-y: scroll; }


#report-profile-menu { height: 40%; max-height: 500px; width: 90%; max-width: 1200px; text-align: center; }
#report-profile-menu-overlay { display: none; }
.report-profile-button { height: 100%; width: 24%; position: relative; display: inline-block; margin: 0 0.5%; cursor: pointer; }
.report-profile-button:hover { /*background-color: #5A7988; color: #f5fffa;*/ }
.report-profile-text-container, .report-profile-button-container { width: 100%; position: relative; float: left; }
.report-profile-text-container { height: 25%; color: #f5fffa; }
.report-profile-text-container i { float: right; cursor: pointer;font-size: 2em; }
.report-profile-button-container { height: 75%; }

/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
    opacity:1 !important;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    /*background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;*/
    content: attr(data-tooltip);
    line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    /*border-top-color: #000;
    border-top-color: hsla(0, 0%, 20%, 0.9);*/
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    /*border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    /*border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before {
    margin-bottom: -6px;
    margin-left: -12px;
    /*border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}

.loader {
    border-top: 5px solid #38b5ab;
    border-radius: 50%;
    width: 220px;
    height: 220px;
    animation: spin 1s ease-in-out infinite;
}
.loader-holder{position: absolute; top:0; left:0; width:100%; height:100%; background:white;display:none;}
.loader-holder img{max-width:150px; margin-top:-110px;}

@keyframes spin {
    0% { 
        margin-left:-110px;
        margin-top:-110px;
        transform: rotate(0deg); 
    }
    100% { 
        margin-left:-110px;
        margin-top:-110px;
        transform: rotate(360deg);
    }
}

.spinner {
    /* Size and position */
    font-size: 100px; /* 1em */
    width: 1em;
    height: 1em;
    margin: 100px auto;
    position: relative;

    /* Styles */
    list-style: none;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.1); /* Subtle white line circling the dots */
}

.spinner li {
    width: .2em;
    height: .2em;
    position: absolute;
    border-radius: 50%;
}

.spinner li:nth-child(1) {
    background: #00C176; /* Blue */
    top: 0;
    left: 50%;
    margin-left: -.1em; /* Width/2 */
    transform-origin: 50% 250%;
    animation: 
        rota 1.13s linear infinite,
        opa 3.67s ease-in-out infinite alternate;
}

.spinner li:nth-child(2) {
    background: #FF003C; /* Red */
    top: 50%; 
    right: 0;
    margin-top: -.1em; /* Height/2 */
    transform-origin: -150% 50%;
    animation: 
        rota 1.86s linear infinite,
        opa 4.29s ease-in-out infinite alternate;
}

.spinner li:nth-child(3) {
    background: #FABE28; /* Yellow */
    bottom: 0;
    left: 50%; 
    margin-left: -.1em; /* Width/2 */
    transform-origin: 50% -150%;
    animation: 
        rota 1.45s linear infinite,
        opa 5.12s ease-in-out infinite alternate;
}

.spinner li:nth-child(4) {
    background: #88C100; /* Green */
    top: 50%; 
    left: 0;
    margin-top: -.1em; /* Height/2 */
    transform-origin: 250% 50%;
    animation: 
        rota 1.72s linear infinite,
        opa 5.25s ease-in-out infinite alternate;
}

@keyframes rota {
    to { transform: rotate(360deg); }
}

@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

#mandatoryTrainingStatisticsChart { margin: 5vh 0; }

/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
    position: relative;
    cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    /*background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;*/
    content: attr(data-tooltip);
    line-height: 1.2;
}

.tooltip.table-tooltip:after,
.table-tooltip[data-tooltip]:after {
    white-space: nowrap;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    /*border-top-color: #000;
    border-top-color: hsla(0, 0%, 20%, 0.9);*/
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -22px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    /*border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    /*border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
    font-size: 16px;
}

.tooltip-right:before {
    margin-bottom: -6px;
    margin-left: -12px;
    /*border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);    
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}

.notify { min-height: 100px; width: 90%; max-width: 500px; position: fixed; z-index: 6; color: #f5fffa; padding: 2.5vmin; display: none; }
.notify i { position: absolute; top: 1vmin; right: 1vmin; cursor: pointer; }
.notify.notify-success { background-color: rgb(35, 142, 0); }
.notify.notify-failure { background-color: rgb(199, 9, 51); }
.notify.notify-warning { background-color: rgb(202, 85, 7); }

.scroll-row { width: 100%; height: 15vh; margin-bottom: 2vh; /*background-color: rgba(0,0,0,0.3)*/ }
.scroll-row-control, .scroll-row-content { height: 100%; position: relative; float: left; }
.scroll-row-control { width: 10%; cursor: pointer; }
.scroll-row-content { width: 80%; white-space: nowrap; overflow: hidden; padding: 1vmin 0; }
.scroll-row-control .vh-align { position: absolute; }
.scroll-row-control i { /*color: #f5fffa;*/ }
.scroll-row-tile { height: 100%; width: 25%; display: inline-block; position: relative; text-align: center; vertical-align: top; white-space: normal; border: 1px solid #275063; margin: 0 10px 0 0; /*background-color: #f5fffa;*/ cursor: pointer; overflow: hidden; }
.scroll-row-icon, .scroll-row-title { width: 100%; position: absolute; left: 0; }
.scroll-side-panel { height: 100%; width: 10%; position: absolute; top: 0; padding: 0.5vmin; padding: 0.5vm; }
.scroll-side-panel span { display: block; width: 5.5vh; position: absolute; top: 6vh; left: -1.7vh; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); white-space: nowrap; }
.scroll-row-icon { height: 75%; top: 0; /*background-color: #f5fffa;*/ }
.scroll-row-icon i, .scroll-row-icon img { height: 75%; /*background-color: rgb(115,133,150);*/ border-radius: 50%; padding: 1.5vmin; }
.scroll-row-title { height: 25%; bottom: 0; /*background-color: rgb(115,133,150);*/ padding: 0.5vmin; padding: 0.5vm; }

.data { table-layout: fixed; border-spacing: 0; }
.data th, table.data td { padding: 1vmin 1.5vmin; }
.data tbody { position: relative; }
table.data td { position: relative; padding: 1vmin 1.5vmin; }
tbody.data td a { /*color: rgb(27,73,96);*/ }

.fixed-data-table { height: 45vh; position: relative; overflow-y: auto; background-color: white; /*color: #f5fffa;*/ }
.db-purposes-table{table-layout: fixed;}
.db-purposes-table .dragable:hover span.duration-info{opacity:0;}

#awaiting-approval-overview .fixed-data-table { height: 54vh; }
#approved-learning-overview .fixed-data-table { height: 55vh; }
#my-training-timeline .fixed-data-table { height: 52vh; }
#my-skills-audit .fixed-data-table { height: 45vh; }
#component-interaction .fixed-data-table { height: 38vh;overflow-y: auto; }

.date-tile { width: 66px; height: 66px; display: inline-block; color: black; background-color: #fff; padding: 0; text-align: center; font-weight: 500; border-style: solid; border-width: 1px; margin: 0 auto; }
.date-tile.completed { border-color: #014866; }
.date-tile.expired { border-color: #57001f; }
.date-tile.blank { color: #f5fffa; background-color: #f5fffa; opacity: 0; }
.date-tile-month { color: #f5fffa; }
.date-tile.completed .date-tile-month { background-color: #014866; }
.date-tile.expired .date-tile-month { background-color: #57001f; }
.a-left .date-tile, .a-right .date-tile { display: block; }
.date-tile > * { line-height: 1.4; }

.sp-picker-container, .sp-replacer { border: none; }

.admin-area { position: relative; width: 100%; height: 100%; }
.admin-area > i.fa-chevron-left { display: block; position: absolute; top: 50%; left: 0; }
.admin-area > i.fa-chevron-right { display: block; position: absolute; top: 50%; right: 0; }
.admin-area-content { width: 90%; margin: 0 auto; overflow: auto; padding-bottom: 50px; }
.admin-screen { display: none; }
.admin-screen-header { margin-bottom: 1.5vmin; }
.admin-segments { position: absolute; bottom: 14vh; left: 0; width: 100%; height: 50px; text-align: center; }
.admin-segment { display: inline-block; vertical-align: top; width: 16px; height: 16px; border-radius: 8px; margin-right: 5px; cursor: pointer; }
.admin-view-toggle { position: absolute; bottom: 10vh; left: 0; width: 100%; height: 50px; text-align: center; }

.admin-header { margin-bottom: 3vmin; }
.admin-header > * { display: inline-block; vertical-align: top; }
.admin-header > i { padding: 3vmin; margin-right: 2vmin; }
#admin-home-header * { margin: 1vmin 0 1vmin 0; }

#admin-breadcrumbs { list-style-type: none; margin: 0; padding: 0; }
#admin-breadcrumbs li { display: inline-block; margin: 0; padding: 0; }
#admin-breadcrumbs li+li:before { margin: 0 5px; content: ">"; }

.admin-sub-page { display: none; }

.admin-time{width:20vh;}
.admin-time input{text-align: center;}

.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }

.sortable-labels { list-style-type: none; height: 100%; padding: 0; }
.sortable-labels li { padding: 1vmin; margin: 10px 0; cursor: -webkit-grab; cursor: -moz-grab; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: normal; }
.sortable-label-placeholder { width: 100%; height: 10px; background: transparent!important; border: 1px dashed #000!important; }

.multi-select > div { height: 100%; }
.multi-select h3 {  }
.multi-select button { display: block; margin: 7px auto; }
.multi-select select { width: 100%; height: 76%; }
.multi-select select option { padding: 7px; }

.assignment-rule-select > div > div, .assignment-rule-select > div > select { display: inline-block; padding: 1vmin; }
.assignment-rule-topic-cycle { list-style-type: none; min-height: 80px; }
.assignment-rule-topic-cycle li { display: block; padding: 2vmin; margin-bottom: 10px; cursor: pointer; }
.assignment-rule-logic-screen { display: none; margin-top: -1px; padding: 2vmin; }
.assignment-rule-logic-screen.selected { display: block; }

.assignment-rule-component-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.assignment-rule-component-overlay-content { width: 50%; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

.assignment-rule-topic-cycle-placeholder { background: transparent!important; height: 60px; }

.dropzone { position: relative; background: transparent; cursor: pointer; overflow: hidden; margin: 30px 0;padding: 10px;}
.dropzone p { display: block; margin: 0; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.dropzone .dz-preview.dz-file-preview .dz-image, .dropzone .dz-preview .dz-image { border-radius: 0; }
.dropzone .dz-details { cursor: pointer; }
.dropzone .dz-preview .dz-details .dz-filename { white-space: normal; }
.dropzone .dz-image { position: relative; }
.dropzone .dz-image img { position: absolute; top: 50%; left: 50%; width: 100%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.dropzone .dz-preview:hover .dz-image img { top: 0; left: 0; }
.dropzone .dz-message span { display: block; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.dropzone .dz-filename {pointer-events: none;}

/*.dropzone-single { width: 124px; height: 124px; min-height: 120px; padding: 0; margin: 0; background-image: url('../images/default-upload.png'); background-size: 100% 100%; background-repeat: no-repeat; }
.dropzone-single .dz-preview { margin: 0; }
.dropzone-single .dz-message { display: none; }*/
.dropzone-button { display: none!important; }
.dropzone .dz-preview .dz-details {height:86%;overflow:hidden;}

#hierarchy-container { padding: 0 4vmin; }
#hierarchy-header { margin-bottom: 5vmin; position: relative; }
#hierarchy-header i.fa { width: 38px; height: 38px; padding: 1vmin; margin-bottom: 5px; }
#hierarchy-footer { position: relative; padding: 2vmin; margin-bottom: 4vmin; }

#hierarchy { list-style-type: none; /*background-color: rgba(240,240,240,0.5);*/ overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; padding: 0; }
#hierarchy > div { position: relative; display: block; /*background-color: #1C4A61; color: #fff;*/ padding: 3vmin; overflow-x: hidden; }
#hierarchy > div > span { position: absolute; top: 50%; right: 2vmin; }
#hierarchy ul { list-style-type: none; margin: 0; border-left: 1px dashed #333; overflow-x: hidden; }
#hierarchy li { position: relative; margin: 0; }
#hierarchy li span { display: inline-block; /*color: #333;*/ border-width: 2px; border-style: solid; /*border-color: #1C4A61;*/ padding: 1vmin 2vmin; margin-right: 2vmin; cursor: -webkit-grab; }
#hierarchy li span:focus { /*background-color: #fff; color: #333!important;*/ border: 2px dashed #1C4A61; }
#hierarchy li .options { display: block; position: absolute; top: 1.2vmin; right: 1.5vmin; }
#hierarchy li i { display: inline-block; cursor: pointer; }
#hierarchy li i.fa-arrows { cursor: -webkit-grab; }

#hierarchy .add-node, #hierarchy .save-node { margin-left: 2vmin; margin-bottom: 8px; }
#hierarchy .std-input { width: auto; }

#hierarchy button { min-width: 0; margin-right: 1vmin; }
#hierarchy .expand-collapse { display: none; }

.add-node, .save-node { margin-top: 5px; }

/* What's on styling */
.whats-on { border-collapse: collapse; }
.whats-on th { text-align: center; border-bottom: 1px solid white; padding:0; }
.whats-on .table-center {    text-align: center;}
.whats-on td { padding:1vh;}
.whats-on tr { border-bottom: 1px solid rgba(255,255,255,0.1);}
.whats-on-scroller{max-height: 95%; overflow: auto;}
.whats-on .view-more span{line-height: 1.5vmin;font-weight:bold;text-decoration: none;}
.whats-on .view-more span:hover{text-decoration: underline;}
.whats-on .view-more{border:none;}

/* Calendar Styling */
#calendar { z-index: 4; }
#calendar-output { height: 100%; width: 100%;}
#calendar-output table .fc-axis { width: 10%!important;}
.fc-unthemed td, .fc-unthemed th { /*border-color: #ddd;*/ }
.fc-unthemed .fc-day-header { /*background-color: rgb(115,133,150);*/ }
.fc-unthemed .fc-day { /*background-color: #f5fffa;*/ }
.fc-unthemed .fc-day-number { /*color: rgb(95,110,109);*/ text-align: left!important; padding: 0.25vmin 0.5vmin!important; }
.fc-unthemed .fc-other-month { /*background-color: #cccccc;*/ }
.fc-unthemed .fc-other-month.fc-day-number { opacity: 1; }
.fc-unthemed .fc-today { /*background-color: #3EAAA5;*/ }
.fc-unthemed .fc-today.fc-day-number { /*color: #f5fffa;*/ }

#calendar-form .select { margin: 1vh 0; }

/* Components styling */
.clickable { cursor: pointer; }
.hidden { display: none; }
.central-icon { text-align: center; }
.central-icon div { padding: 4vmin; margin: 0 auto; }

/* Carousel styling below */
.carousel { height: 100%; width: 100%; position: relative; }
.carousel > div { height: 100%; position: relative; float: left; }
.carousel-chevron { width: 10%; text-align: center; cursor: pointer; }
.carousel-body { width: 80%; position: relative; overflow: hidden; white-space: nowrap; }
#popular-topics .carousel-chevron { width: 12%; }
#popular-topics .carousel-body { width: 76%;}
.carousel-page { width: 100%; height: 100%; display: inline-block; vertical-align: top; }
.carousel-block-outer { position: relative; float: left;   text-align: center; }
.carousel-block-outer {padding: 1vmin;}
.carousel-block {height: 98%;width: 98%; margin: 1%;position: relative;}
.carousel-block:hover { /*background-color: #5A7988; color: #f5fffa!important;*/ }
.carousel-block > a { height: 100%; width: 100%; position: relative; display: block; text-decoration: none; /*color: inherit!important;*/ }
.carousel-block > a .v-align { padding: 0 10px; }
.carousel-block .icon { }
.carousel-block .title { white-space: normal; color: inherit; }
.carousel .side { position: absolute; top: 0; right: 0; width: 15%; height: 100%; }
.carousel .side-text-container { position: absolute; top: 0; right: 0; width: 15%; height: 100%; }
.carousel .side-text-position { position: relative; width: 100%; height: 100%;}/* padding: 12vh 0; */
.carousel .side-text { transform: rotate(-90deg) translateX(-50%); color: #fff; top: 50%; position: relative;}
#topic-overview .side-text {transform: rotate(-90deg);}

/* Custom carousel styling */
#popular-topics { padding: 0!important; }
#popular-topics .carousel-page, #topic-components .carousel-page, #topic-cpd .carousel-page { overflow-y: hidden!important; }
#topic-components .carousel-page, #topic-cpd .carousel-page { height: 95%; }
#popular-topics .carousel { position: absolute; top: 0; left: 0; padding: 0!important; }
#popular-topics .carousel-chevron { width: 15%; height: 84%;}
#popular-topics .carousel-body { width: 70%;}
#popular-topics .carousel-block-outer {  }
#popular-topics .carousel-block { /*background-color: #f5fffa;*/ height: 84%; }
#popular-topics .carousel-block:hover { /*background-color: #5A7988; color: #f5fffa!important;*/ }
#popular-topics .icon { height: 30%; width: 100%; }
#popular-topics .title { height: 70%; width: 100%; }

#guidance-document-viewer .carousel-block-outer { }

#reports-overview .carousel-block-outer {  }
#reports-overview .carousel-block { /*background-color: #E8E8ED; color: #555;*/ }
#reports-overview .carousel-block:hover { /*background-color: #5A7988; color: #f5fffa;*/ }
#reports-overview .tile-in { transform: rotateX(0deg); }
#reports-overview .tile-out { transform: rotateX(0deg); }

#mandatory-in-date-tiles .block-header, 
#mandatory-in-date-tiles .side,
#mandatory-certificate-tiles .block-header,
#mandatory-certificate-tiles .side { background-color: rgb(33,167,87); }
#mandatory-expiring-tiles .block-header, 
#mandatory-expiring-tiles .side, 
#cpd-certificate-tiles .block-header,
#cpd-certificate-tiles .side { background-color: rgb(255,145,9); }
#mandatory-expired-tiles .block-header, 
#mandatory-expired-tiles .side,
#historic-certificate-tiles .block-header,
#historic-certificate-tiles .side { background-color: rgb(249,93,93); }
#mandatory-training-tiles .carousel { height: 16.5vh; background-color: rgba(0, 0, 0, 0.3); }
#mandatory-training-tiles .carousel-chevron { background-color: transparent; }
#mandatory-training-tiles .carousel-block-outer { }
#mandatory-training-tiles .icon, #my-certificates .icon { display:none; } /* We have so many problems with these tiles when we cram in too much information */
.carousel-body i { left: 0; right: 0; position: absolute;}
#mandatory-training-tiles .title { top: 0%; height: 100%; width: 85%; position: absolute; left: 0; padding:5px;}
#my-certificates .title { top: 0%; height: 100%; width: 85%; position: absolute; left: 0; padding:5px;}
#mandatory-training-tiles .carousel .side-text-position { /*padding: 7.5vh 0;*/ }

#topic-carousel .carousel-block-outer, 
#reports-overview  .carousel-block-outer{ height: 33%; width: 20%; }

#topic-carousel .title, #topic-carousel .icon, 
#reports-overview .title, #reports-overview .icon { height: 50%; width: 100%; position: relative;}
#topic-carousel .icon i, #reports-overview .icon i {position: absolute;bottom: 0;left: 0;right: 0;}

#topic-certificates .carousel { height: 18vh; }
#topic-certificates .carousel-block .icon { height: 13vh; }
#topic-certificates .carousel-block-outer { }
#topic-certificates .carousel .side { width: 15%; }

#topic-components .carousel { height: 28vh; margin: 5px 0; }
#topic-certificates .carousel { height: 20vh; margin: 2vh 0; }
#topic-components .carousel-chevron, #topic-certificates .carousel-chevron, #topic-cpd .carousel-chevron { width: 7%; }
#topic-components .carousel-body, #topic-certificates .carousel-body { width: 86%; height: 95%; }
#topic-cpd .carousel-body { width: 86%; height: 85%; } 
#topic-components .icon { height: 40%; width: 85%; }
#topic-components .title  { height: 60%; width: 85%; }
.letter-icon { height: 6vmin; width: 6vmin; display: block; border: 2px solid; border-radius: 50%; line-height: 6vmin; }

#all-certificate-tiles .carousel { height: 16vh; background-color: rgba(0, 0, 0, 0.3); }
#all-certificate-tiles .carousel-chevron { background-color: transparent; }
#mandatory-certificate-tiles .block-header { /*background-color: rgb(33,167,87);*/ }
#cpd-certificate-tiles .block-header { /*background-color: rgb(173, 31, 94);*/ }
#historic-certificate-tiles .block-header { /*background-color: rgb(49,138,198);*/ }

/* report styling */
.reportHeaderContainer{display: flex; padding:0!important;min-height: 20vh;}
.reportHeader{ width:60.5%; display: inline-block;padding:2.7vmin; margin-right: 0.5%; position: relative; padding-bottom: 40px;}
.reportFilters{ width:39.5%; float:right; padding:2.7vmin; padding-bottom: 40px; padding-top: 40px; position: relative;}
.filterHolder{padding: 0 5px 0 5px;}

/*.reportHeader{width:66.5%;height:27vh;display: inline-block;padding:2.7vmin;color:white; overflow-x: auto;}
.reportFilters{width:33%;float:right;padding:2.7vmin;height:27vh;color:white;}*/

.limitReportHolder {position:relative;}
.limitReportConfirm {position:absolute;height:100%; right:0; display:inline-block; padding: 10px;}
.limitReportConfirm.less-padding {padding: 5px;}
.limitReportOptions {display: inline-block;}

.nmdsTable{display:none;}

.no-wrap{white-space: nowrap;}
/*.report .dataTables_scrollBody{margin-top: 5.2vh;}*/
.report .dataTables_scrollFoot{position: absolute;top: 3.5vh;}
/*table.reportDataTables tbody{margin-top: 5.2vh;}
table.reportDataTables tfoot{ position: absolute;top: 3.5vh;}*/
/*.report .reportDataTables {border:1px solid rgba(0,0,0,0.6);}*/
.reportFilters .std-input{padding-left:1.5vh;}

.reportSkillsTables thead th {height:3vh;white-space: nowrap;}

.chart-central-label {position: absolute;}

.viewerTable thead th{text-align: center;}
.viewerTable td, .viewerTable th{padding:10px;border: 1px solid rgba(0,0,0,0.5);background-color: rgba(0,0,0,0.3); text-align: center;}
.viewerTable{border-collapse: collapse;}

#team-skills-view tbody td, #team-skills-view tbody tr{
    height:45px !important;
}

#manager-overview .dataTables_scrollBody{margin-top: 0;}
.font-xl { font-size: 1.75em; }

.report .DTFC_LeftHeadWrapper{border-right:1px solid black;}
.report .DTFC_LeftBodyWrapper{border-right:1px solid black;}
.report .table-sizer{min-width:175px;height: 100%;}
.report .table-sizer-header{min-width:175px;height: 100%;}
.report .reportSkillsTable th{white-space:nowrap;}
.report .reportSkillsTable td{padding:0 !important;}
.report .reportSkillsTable .thumb-status{width:100%;height: 100%;}
.dataTableFilter{width: 100%;}
.report .dataTables_empty { cursor: initial; padding:2vh 0 2vh 0!important;}
#eval-centre-admin .dataTables_empty {padding:0!important;}
.report label{background-color:transparent !important;}
.report label{background-color:transparent !important;}

section.report .col { padding: 0 0.25%!important; }
section.report .tile { width: 100%; /*position: relative;*/ padding: 2.7vmin; margin-bottom: 1vh; }
.lg-report-tile { height: 35vh; }
.sm-report-tile { height: 28vh; }
#report-table-current-page { text-align: center; }
#eval-centre-admin .tile { width:19.6%; }
#eval-comp-holder {width: 100% !important;}

#report-select { margin: 1vmin 0 3vmin 0; }
#report-view-body table { text-align: center; }
#report-view-body .chart { margin: 0; }
#report-view-body .tile { /*background-color: #E8E8ED; color: #000;*/ border-width: 1px; border-style: solid; /*border-color: rgba(0,0,0,0.125);*/ }
#report-view-body input { border: 1px solid rgba(0,0,0,0.5); padding: 1vmin 1vmin; /*background: #E8E8ED;*/ }
#report-view-body input:focus { /*border-color: rgb(62, 123, 228);*/ }
.report-tile-container { padding: 0 10px!important; margin: 5px 0; }
.report-tile-container > .tile, .report-tile-container > .blank-tile { position: static; padding: 2.7vmin; }

.report-tile-container table { margin: 2vh 0; }
.report-table-container { position: absolute; right: 0; top: -15vh; top: -26.5vh; height: 26vh; /*background-color: #B8BDC7;*/ }

#reports-overview { height: 73vh; width: 100%; }
#reports-overview .report-block { height: 24vmin; width: 33%; padding: 1vmin 1vmin 0 0; float: left; }
#reports-overview .report-block-inner { height: 100%; width: 100%; position: relative; text-align: center; cursor: pointer; }
#reports-overview .report-block-inner:hover {  /*background-color: #5A7988; color: #fff; */ }

#overlay-report { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}

#report-table-container { min-height: 66vh; }

.box-class{height:100%;margin-top: 0;}
.table-holder{margin-bottom:1vh;margin-top: 1vh;overflow-x: hidden;padding:0 !important;}
.table-holder .dataTables_scroll{border: 1px solid rgba(0,0,0,0.3);}
.sorting_asc, .sorting_desc{background-color: rgba(0,0,0,0.1);}
.export-options{height: 50px;text-align: center;padding-right: 0.5vh;}
.export-options .exportSelect {height:100%; float:right; margin:0;}
.export-options .dropdown {height:100%;}
.export-options-cell{height:100%;/*line-height:4vh;*/float:left;padding: 5px;padding-right: 0;}
.export-options-cell button{min-width:0;border: 1px solid rgba(0,0,0,0.2)}
.export-text{height:100%;line-height:5vh;display: inline-block;text-align:left;padding-left:1vmin;float:left;}
.filter-spacer{width:100%;height:10px;}
.export-options-cell button{width:100%;height:100%;}
.report-tables{border-collapse: collapse;}
.report-tables th{border:1px solid rgba(184, 189, 199,0.5);}
.report-tables td{border:1px solid rgba(184, 189, 199,0.5);}
.dt-buttons{display:none;}
.paging_full_numbers{color:black !important;}


table.dataTable tr.odd { background-color: white; }
table.dataTable tr.even { background-color: rgb(241,241,241); }
table.dataTable {width: 100%;margin: 0 auto;clear: both;}
table.dataTable {border-collapse: collapse;}
table.dataTable td {border: none;}/*height:3vh !important; */
table.dataTable tr {border: none;}/*height:3vh !important; */
table.dataTable tr:hover{background-color: rgba(0,0,0,0.1)!important;}
.report table.dataTable tr:hover{background-color: white!important;}
/*table.reportDataTables th {height:8vh !important; }*/
table.dataTable tfoot th, table.reportDataTabless tfoot td {
    border-top: 1px solid #111 !important;
    border-bottom: 1px solid #111 !important;
}

/*.carousel-block:hover{text-shadow: 5px 5px rgba(0,0,0,0.1);}*/

/* dataTables Styling */
table.dataTable {color:rgb(51,51,51);}
table.dataTable a {color:rgb(51,51,51);} /* IE is making datatables text black */
#reports-container table.report-table { /*color: #555;*/ }
#reports-container tr.odd { /*background-color: #E8E8ED;*/ }
#reports-container label { display: table-cell; }
.report-table { width: 100%; }
table.nowrap th, table.nowrap td { white-space: nowrap; }
table.dataTable td { position: relative; height: 70px; }
div.dataTables_scrollBody  {
    background-color: white !important;
}
.DTFC_LeftBodyLiner{overflow:hidden!important;}
.table-name-sizer {width:120px; word-break:break-word;}/*we want these to be bigger*/
.dataTable { /*color: #000; background-color: #f5fffa*/ }
.dataTable th, .dataTable td { position: relative; padding: 1vmin 1.5vmin; }
.dataTable.hover tbody tr:hover { /*background-color: #3EAAA5 !important; color: #f5fffa;*/ cursor: pointer; }
.dataTable.hover tbody tr:hover a { /*color: #f5fffa!important;*/ }
.dataTable thead { /*background-color: #738596 !important; color: #fff !important;*/ }
.dataTable.row-border tr { border-width: 1px!important; border-style: solid!important; /*border-color: rgba(0,0,0,0.5) !important;*/ }
.dataTable .dataTables_length { padding: 1vh; }
.dataTable a { /*color: #3EAAA5!important;*/ }
.tile .dataTables_info, .tile .dataTables_paginate { /*color: #f5fffa;*/ }
.dataTables_empty { /*padding: 24vh!important;*/ cursor: initial; }

.dataTables_wrapper select { width: auto; }

/* DATA TABLES GENERAL STYLING */
.full-pagination select{
    width: initial;
}
.data-table-filters{
    position:absolute;
    top:-25%;
    right:0;
    z-index: 1;
    float:right;
    /*input title/page info with col-8 div*/
}
.full-data-table-filters{
    position:absolute;
    top:-17%;
    right:0;
    z-index: 1;
    float:right;
    /*input title/page info with col-8 div*/
}
.data-table-filters .dataTables_length, .full-data-table-filters .dataTables_length{ /*margin-top:2.5vh;*/float:right;}
.data-table-filters .dataTables_filter, .full-data-table-filters .dataTables_filter{margin-right:1vw;}
.data-table-title{height: 9vh; max-width:60%;}
.full-data-table-filters label{/*color:white;*/}

#overlay-report { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,0.8); }
.font-awesome-select { position: relative; }
.font-awesome-selection { position: relative; height: 5.6vmin; padding: 1.3vmin 2vmin; cursor: pointer; }
.font-awesome-selection > i { position: absolute; top: 2vmin; right: 2vmin; }
.font-awesome-selection > span > span { display: block; padding: 0.2vmin 0; }
.font-awesome-options { display: none; position: absolute; top: 5.2vmin; width: 100%; max-height: 25vmin; overflow: auto; }
.font-awesome-option { display: inline-block; width: 6.4vmin; padding: 1vmin 2vmin; cursor: pointer; }

.description-list { list-style-type: none; margin: 4vh 0; }
.description-list li { position: relative; height: 16vh; padding-left: 20vh; margin: 2vh 0; }
.description-list div:first-of-type { position: absolute; top: 0; left: 0; width: 10vh; height: 10vh; /*color: #fff;*/ }
.description-list span { display: block; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

.description-list h3, .description-list p { margin-top: 0; }

.icon-component { border-radius: 100vh; /*background-color: #1C4A61;*/ }

.file-tile-button button{height: 200px;width: 200px;}
.file-tile-button{display: inline-block;padding: 10px;}

/* overlay display styling */
.overlay-display {
    height: 74vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background-color: rgba(115, 133, 150, 0.95);*/
    display: none;
    z-index: 1;
    /*color: #f5fffa;*/
    padding: 0!important;
} 
.overlay-display-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 10%;
}
/*.overlay-display i.fa-times.close {
    top: 2.7vmin;
    right: 2.7vmin;
    left: initial!important;
    bottom: initial!important;
    cursor: pointer;
}*/
.overlay-display h2 {
    border-bottom: 1px solid;
    margin-bottom: 3vh;
}
.overlay-display .v-align {
    max-height: 100%;
    overflow-y: auto;
    padding: 20px 0 20px 0;
    /*overflow-y: scroll;*/
}
.overlay-display a {
    text-decoration: underline;
}

/*table accordion*/
table a { color: #38b5ab; font-family: 'Poppins', sans-serif }
table.accordion tr.control { cursor: pointer; /*background-color: rgb(231,232,236);*/ }
table.accordion a { font-weight: 500; }
table.accordion tr.hidden-tr th, table.accordion tr.hidden-tr td, table.accordion tr.hidden-tr th > div, table.accordion tr.hidden-tr td > div { display: none; }
table.accordion tr.hidden-tr { /*background-color: rgba(231,232,236,0.85)*/ }
table.accordion tr.hidden-tr th { /*background-color: rgb(115,133,150); color: #f5fffa;*/ }


.filter{
    position:relative;

}

.manage-branding-theme-shot { padding: 0 10vmin; }
.manage-branding-theme-shot img { width: 100%; }

/*Manager and User news styling*/

.news-pop-wrapper .news-pop-title{width: 100%; max-height: 25%; overflow-y: auto;}
.news-pop-wrapper .news-pop-content{width: 100%;height: 35vh;overflow-y: auto;white-space: pre-wrap;}
.news-pop-wrapper .news-pop-content iframe, .news-pop-wrapper .news-pop-content .news-pop-image{float:right;height:33vh;margin-left: 3vh;margin-bottom: 2vh;border: 3px solid rgba(255,255,255,0.7);}
.news-pop-wrapper .news-pop-image{width:50%;background-size: cover;background-position: center;background-repeat: no-repeat;}
.news-pop-wrapper .news-pop-publish{width: 100%;text-align: right;}

#news .block-header ,#manager-news .block-header{ z-index: 1;}
#news .news-name ,#manager-news .news-name{white-space: nowrap; max-width:65%; float: right; overflow-x:hidden; padding-right:1vmin;}
#news .carousel ,#manager-news .carousel{ position: absolute; top: 13%; left: 0; height: 85%;}
#news .carousel-page ,#manager-news .carousel-page{height:98%;}
#news .carousel-chevron ,#manager-news .carousel-chevron{ width: 12%; }
#news .carousel-body ,#manager-news .carousel-body{ width: 76%; }
#news .carousel-block-outer ,#manager-news .carousel-block-outer{ }
#news .carousel-block-outer:hover ,#manager-news .carousel-block-outer:hover{ transform: scale(1.005); }
#news .carousel-block ,#manager-news .carousel-block{ /*background-color: #f5fffa;*/ }
#news .news-content ,#manager-news .news-content{text-align: left;margin:1%; padding:10px;overflow-y: hidden;height:72%;border:2px solid rgba(115,133,150,0.5);/*color: black;*/white-space: normal;position: relative;}
#news .news-info ,#manager-news .news-info{position: absolute;width:98%;text-align: left;bottom: 0;margin:1%;padding:5px;border:2px solid rgba(0,0,0,0.2);height: 12%;}
#news .title ,#manager-news .title{ height: 14%; width: 100%; overflow: hidden; border-bottom: 2px solid rgba(0,0,0,0.2);}
#news .news-image, #manager-news .news-image {height: 17vh; background-size: cover; background-position:center; background-repeat: no-repeat;border: 2px solid rgba(115,133,150,0.5); margin-bottom:10px;}
#news .news-video-icon ,#manager-news .news-video-icon{position: absolute;bottom: 1vh;right: 1vh;left: auto;}

/* Notifications */

#notifications #mail-options button{
    position: relative;
    text-align: right;
    line-height: 6vh;
    font-size: 2vh;
    font-weight: 500;
    padding: 1vh;
    width: 100%;
    margin-top: 0.5vh;
    height: 6vh;
    border: 1px solid rgba(0,0,0,0.7);
}

#notifications #mail-options .button-active{/*color:black;background-color: rgb(255,255,255);*/}
#notifications #mail-options .button-deleted:hover{/*background-color: rgba(255,50,50,0.5);*/}
#notifications #mail-options button:focus {outline:none;}
#notifications #mail-options button:hover{/*color:black;background-color: rgb(255,255,255);*/}
#notifications #mail-options .search-button-notif{font-family: 'Poppins Light', sans-serif;}
#notifications #mail-options .search-button-notif:hover{transform: scale(1.01);}
#notifications #mail-options button i{position: absolute;font-size: 4vh;left: 1vw;line-height: 4.5vh;}
#notifications #mail-options label{position: absolute;right: 4vh;margin-top:1.5vh;font-size: 2vh;}
#notifications #mail-options select{width:100%;margin-top:1vh;padding-left: 1vmin;}
#notifications #mail-options .inbox-divider{border:1px dotted rgba(255,255,255,0.3); padding:1vh;margin-top:1vh;}
#notifications-inbox {overflow-y:auto;}
#notifications #mail-options div:nth-child(1){margin-top:5vh;}

#notifications .notif-info-headers{text-align: right;padding: 1vh;height: 30vh;}
#notifications .notif-info-content{padding: 1vh;height: 6vh;}
#notifications .notif-body{padding-left: 3vh;padding-right: 3vh;max-height:35vh;border-right: 1px solid white; position: relative;overflow-y: auto;}
#notifications .notif-body ul{margin:2vh;margin-left:4vh;}
#notifications .notif-body p { margin: 1vh 0; }
#notifications .notif-options{text-align: center;border-top: 1px solid white;margin-top: 2vh;}
#notifications .option-full{height: 6vh;line-height: 6vh;}
#notifications .option-empty{height: 6vh;line-height: 6vh;text-align: right;}
#notifications .option-full:hover{/*background-color: rgba(0,0,0,0.05);*/border-bottom: 1px solid rgba(0,0,0,0.2);}
#notifications .notif-full-options{width:100%;}
#notifications .notif-split-options{width:45%;}
#notifications .notif-view { cursor: pointer; }
#notif-introduction { height: 9vh; }

#notifications-summary-wrapper{text-align: left;}
#notification-settings .data td{background:white;}

#team-skills-view .dataTables_scrollBody table.skills-table{margin-left:0;}
#team-skills-view .dataTables_scrollBody {background-color: transparent !important; border-bottom: none !important;}


/* Policy Quiz CSS */
#documents .pop-view {height:65vh;overflow:hidden;}
#documents .quiz-pop-view {height:65vh;text-align: center;overflow:auto;}
#documents .quiz-pop-view #content-pop h1{border-bottom:2px dotted rgba(255,255,255,0.5);margin:1vh;padding:1vh;}
#document-table th{text-align: center;}
#documents .question-wrapper .question-quiz{/*background-color: rgba(62, 170, 165, 0.5);color: black;*/height: 7vh;border:1px solid rgba(0,0,0,0.5);margin-bottom: 1vh;margin-top: 1vh;}
#documents .question-wrapper .answer{/*background-color: rgba(29, 72, 95, 0.6);color: black;*/height: 7vh;border:1px solid rgba(0,0,0,0.5);}
#documents .question-wrapper .answer-disable{background-color: rgba(29, 72, 95, 0.2);color: black;height: 7vh;border:1px solid rgba(0,0,0,0.4);}
#documents .question-wrapper .quiz-align{text-align: center;vertical-align: middle;line-height: 7vh;}
#documents .quiz-pop-view button{margin:2vh;}
#documents .quiz-selected{/*background-color: rgba(29, 72, 95, 0.8);color: black;*/height: 7vh;border:1px solid rgba(255,255,255,1);}
#documents .quiz-unselected{/*background-color: rgba(29, 72, 95, 0.6);color: black;*/height: 7vh;border:1px solid rgba(0,0,0,0.5);}

/* Document & Venues Control CSS */
.search-intro{margin-bottom: 3vh;}
.docven-filter .dropdown { margin-top: 2vh; }

/* Venues CSS */
#main-venue-container{height: 100%;border-bottom: 2px solid rgba(255,255,255,0.5);overflow-x:hidden;box-shadow: 5px 20px 11px -16px rgba(0,0,0,0.5);overflow-y: scroll;overflow-y: auto;}
.venue-container{height: 33.2%;padding: 1vh;}
.venue-container:hover{transform: scale(1.02);}
.venue-wrapper{height:100%;width:100%;/*background-color: rgb(184, 189, 199);*/overflow: hidden;position: relative; cursor:pointer;}
.tour-carousel-title{left: 0;right: 0;}
.tour-carousel-title, .venue-title {position: absolute;max-height:10vh;text-align: center;/*background-color: white;*/bottom: -1px;line-height:4vh;padding-left: 2px;padding-right: 2px; white-space: pre-wrap;}
.venue-container img {min-width:100%;height:100%;object-fit: cover;bottom:0;}
.venue-wrapper div{width:100%;height:90%;height:75%;text-align: center;/*color:black;*/}
.venue-wrapper label{width:100%;}
.venue-wrapper i{margin-top: 2vh;}
.venue-search{height:100%;box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.overlay-venue-img {width: 25%;display: inline-block;float: left;height: 35vh;text-align: center;padding: 2vh;}
.overlay-venue-address{width: 34%;display: inline-block;float: left;padding: 1vh;padding-left:4vh;height: 40vh;}
.overlay-venue-info{width: 65%;display: inline-block;float: right;padding:1vh;padding-left: 4vh;padding-right: 4vh;max-height: 40vh;border-left: 1px solid white;}

/* Andrew global search view? */
#search-overlay .search-results-list > div { display: inline-block; vertical-align: top; width: 22%; height: 19vh; padding: 1%; margin: 1%; margin-left:0px; border-radius: 5px; position: relative; /*background-color: rgb(27,73,96);*/ }
#search-overlay .search-results { height: 100%; }
#search-overlay .search-results-list { height: 100%; overflow: auto; }
#search-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(47, 64, 80, 0.8); z-index: 5; display:none; }
#search-overlay > .search-area { position: absolute; top: 50%; left: 50%; width: 60%; height: 50%; margin-top: 2%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transition: 1.8s ease-in-out; -moz-transition: 1.8s ease-in-out; -o-transition: 1.8s ease-in-out; transition: 1.8s ease-in-out; }
#search-overlay > .search-area input { display: inline-block; border: none; border-bottom: 2px solid rgba(255,255,255,0.6); background-color: transparent; padding: 1.3% 0; width: 91%; color: #fff!important; }
#search-overlay .search-results > p { margin-top: 2vh; display: none; }
#search-overlay > div.search-area > div > div > div { display: none; }
#search-overlay .search-result > a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1vmin 2vmin; }
#search-overlay p { color:white; }
#search-overlay .search-area > p { display: none; } 

/* Support block */
#new-ticket .dropzone{margin: 0;}
#my-support-log .log-wrapper{height: 61vh; margin:0;}
#admin-support-log .log-wrapper{height: 47vh; margin:0;}
.log-message{width:50%; text-align: center;}
.ticket-response input, .ticket-response button {width:100%;border:0; height:5vh;}
#my-support .closed-ticket, #admin-support .closed-ticket {opacity: 0.6;}
#admin-support-table tbody tr, #my-support-table tbody tr{cursor: pointer}
#supportContent{ display: block; width: 100%; height: 13vh; margin-top: 1vh; padding: 1%; border: 0; resize: none; /*color: #000;*/ }
#ticketResponseField {margin: 0 !important;height: 100% !important;min-height: initial !important;}
#admin-log-wrapper #log-container{height:34.5vh;}

.wizard-screen { visibility:visible; pointer-events: none; position: absolute; left:200%; }
.wizard-screen > * { 
    opacity: 0;
}
.wizard-screen-header { position: absolute; top: 0; left: 14vmin; padding: 5vmin 2vmin; }
.wizard-screen-header * { margin: 0; padding: 4px 0; }
.wizard-screen-header p a { display: block; margin-top: 2vmin; }
.wizard-screen-body { width: 76vw; /* max-height: 58vmin; */ position: absolute; top: 30vh; left: 50%; webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.wizard-submit { display: block; position: absolute; bottom: 0; right: 20vmin; padding: 5vmin; }

.multi-select-controls { padding-top: 4vh; }
.wizard-form-row { margin-bottom: 4vh; }

#wizard-breadcrumbs { position: fixed; top: 50%; right: 8vmin; width: 2vh; }
.wizard-breadcrumb { border-radius: 100vh; width: 2vh; height: 2vh; margin-bottom: 0.8vmin; cursor: pointer; }
.breadcrumb-rotate { transition-duration: 0.6s; transform: rotateY(180deg); }

#wizard-exit { position: absolute; top: 0; left: 0; padding: 6vmin; }
#wizard-exit i { width: auto; height: auto; padding: 2.5vmin; cursor: pointer; }

.wizard-backwards { position: fixed; bottom: 0; left: 0; }
.wizard-forwards { position: fixed; bottom: 0; right: 0; }
.wizard-triangle { position: relative; width: 12vmin; height: 12vmin; cursor: pointer; }
.wizard-triangle p { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.wizard-triangle-inactive { opacity: 0.2; cursor: default; }
.wizard-backwards p { position: absolute; top: 0; left: 0; display: block; padding: 6vmin 1.5vmin; }
.wizard-forwards p { position: absolute; top: 0; left: 0; display: block; padding: 6vmin; }
.wizard-left-triangle { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 12vmin 0 0 12vmin; }
.wizard-right-triangle { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 12vmin 12vmin; }

.wizard-current { display: block;opacity:1; visibility:visible; pointer-events: all; position: inherit;}
.wizard-breadcrumb.wizard-current{position: relative;}
.wizard-current > * { opacity: 1 !important; }

#admin-table-footer { margin: 2vmin 0; }
.wizard-button { position: relative; margin-right: 2vmin; }

.form-error { color: #e02828; }

/* Custom select basic styling */
.select { width: 100%; position: relative; display: inline-block; padding: 1vh; cursor: pointer; /*background-color: #1d485f;*/ z-index: 0; /*color: #f5fffa;*/ }
.select .current { display: block; }
.select .chevron { position: absolute; right: 1vh; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.select .list { width: 100%; position: absolute; left: 0; top: 100%; display: none; margin: 0; padding: 0; border: 1px solid; background-color: inherit; }
.select .list .option { list-style-type: none; padding: 1vh; /*color: #f5fffa;*/ }
.select .list .option.selected { /*background-color: #3EAAA5;*/ }

.select.inverted { /*background-color: #3EAAA5;*/ }
.select.inverted .list .option.selected { /*background-color: #1d485f;*/ }

.select.fill { height: 100%; position: absolute; top: 0; left: 0; }
.select.fill .current { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.cycles-container { width: 100%; /*background-color: #ff00ff;*/ }
.cycles-header { width: 100%; height: 12vmin; background-color: #ff0000; }
.cycles-corner { display: inline-block; vertical-align: top; width: 20%; height: 100%; /*background-color: #fff000;*/ }
.cycles-columns { display: inline-block; vertical-align: top; width: 80%; height: 100%; white-space: nowrap; overflow: hidden; }
.cycles-column { display: inline-block; vertical-align: top; width: 20%; height: 100%; }
.cycles-body { width: 100%; }
.cycles-components { display: inline-block; vertical-align: top; width: 20%; /*background-color: #00ff00;*/ }
.cycles-timeline { display: inline-block; vertical-align: top; width: 80%; height: 100%; /*background-color: #0000ff;*/ white-space: nowrap; overflow-x: auto; }

#team-bookings-summary .block-content { width: 90%; }

#quick-question { overflow-y: auto!important; }
#quick-question input[type=radio] { display: none; }
#quick-question label, #quick-question button {
    position: relative;
    width: 100%;
    display: block;
    /*background-color: #f5fffa;
    color: #333;*/
    margin-top: 8px;
    cursor: pointer;
    padding: 1.5vmin;
}

#quick-question button {
    border: none;
    padding: 2vmin;
    /*background-color: #3EAAA5;
    color: #fff;*/
    font-family: 'Poppins Light', sans-serif;
}    

#quick-question label > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    opacity: 0.7;
    transition: 1s ease-in-out;
}

#quick-question label > span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 1.5vmin;
}

#quick-question label.selected { /*background-color: #738596; color: #fff;*/ }

#user-profile .profile-banner{padding: 1vh;margin-bottom:2vh;height:8vh;border-bottom: 2px dotted rgba(255,255,255,0.5);}
#user-profile .profile-banner h1{}
#user-profile .details-box{padding:1vh;padding-right:2vh;overflow: hidden;}
#user-profile .details-box label { color: #1a1a1a; }
#user-profile .details-box table { border-collapse: collapse;border-spacing: 0; border: none; }
#user-profile .details-box .form-elem { margin-bottom: 2vh; position: relative; }
#user-profile .details-box .progress-bar-holder .form-error{display:none;}
#user-profile .details-box .progress-bar {border: 1px solid rgba(0,0,0,0.2); border-top:0px;position: absolute;left: 0;top: 100%;background: rgba(255, 0, 0,0.5);width: 15%; display: none;text-align: right;padding-right: 10px;}
#user-profile .details-box .messages-holder{list-style-type: disc !important;white-space: pre-wrap;padding-left: 8%;margin-top: 10px;}
#user-profile .details-box i { height: 4vh; width: 4vh; line-height: 4vh; background-color: #f5fffa; }
#user-profile .details-box input { border: none; }
#user-profile .details-box .detail-label{/*background-color: rgba(255,255,255,0.2);*/ margin-bottom: 2vh; padding: 1vmin;}
#user-profile ul{list-style-type: none;}
#user-profile .user-details h3{width:95%; text-align: center;height:4vh;}
#user-profile .profile-wrapper{border: 1px dotted rgba(255,255,255,0.3);height: 52vh;padding: 1vh;position: relative; background-color: #f5fffa; color:#1a1a1a;overflow-y:auto;}
#user-profile #profile-picture-wrapper .img-container{display: inline-block; height: 16vh;}
#user-profile #profile-picture-wrapper .img-container button{margin-top:-1vh; float:left;width: 20vh;margin-left: 5vh;}
#user-profile #profile-picture-wrapper {width: 100%;height: 18vh;border-bottom: 1px dotted rgba(255,255,255,0.3);/*background-color: rgba(255,255,255,0.1);*/overflow: hidden;margin-bottom: 2vh;}
#profile-picture-container { position: relative; width: 100%; height: 25vh; padding: 1.2vmin; margin: 0 auto; }
#profile-picture-container button { display: block; position: absolute; top: 50%; webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#user-profile #user-password button{margin-top: 1vh;float:right;}
#user-profile .log-in-as-wrapper{float: right;height: 6vh;margin-right: 1vh;line-height: 5vh;}
#user-profile .log-in-as-wrapper label{text-align: right;}
#user-profile .auto-comp-target{height: 5vh;border: 1px dotted rgba(255,255,255,0.3);}
#user-profile .dropzone { margin: 0; padding: 0; }

/* table div */

/* James approval css */
textarea#response-field {
    display: block;
    width: 100%;
    height: 8vh;
    padding: 1%;
    border: 0;
    resize: none;
    /*color: #000;*/
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 1.8vh;
    margin-top: 20px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

textarea#response-field:focus {
    border: 2px solid #63E8CF;
    box-shadow: inset 0 0 20px #63E8CF;
}

button.response-send {
    float: right;
    margin-top: 20px;
}

/*approvals-requests df*/
#manager-reschedule-select{margin-top:20px;}
.request-form-wrapper{margin:1vh;}
.request-form-wrapper div{height: 3vh;margin-bottom: 1vh;border-bottom: 1px solid rgba(255,255,255,0.3);}
.request-form-wrapper p{padding-left:1vh;}

.session-wrapper{/*background-color: rgb(184, 189, 199);*/ padding: 1vh; margin-top:1vh;margin-bottom:1vh; /*color:black;*/}

.approval-message-wrapper{margin-bottom:2vh; width:100%;}
.approval-message-wrapper img{width: 100%; margin: 0 -1vh 0 -1vh;}

.approval-message{padding:1vh; padding-left: 2vh;background-color: #3EAAA5; border-radius: 10px; margin:0.5vh; float:left;border: 1px solid rgba(0,0,0,0.2);}
.approval-message-diff{padding:1vh; padding-left: 2vh;background-color: #fff; border-radius: 10px; margin:0.5vh; float:right; color:black;/*box-shadow: 4px 5px 5px 0 rgba(112, 112, 111, 0.22);box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20)*/}

.approval-date-wrapper{padding: 1vh;border-bottom: 1px solid rgba(0,0,0,0.2);border-top: 1px solid rgba(0,0,0,0.2);margin-bottom: 2vh;margin-top: 2vh;}

.approval-nudge{padding:1vh; padding-left: 2vh; background-color: #3EAAA5; border-radius: 10px; margin:0.5vh; color:red;border: 1px solid rgba(0,0,0,0.2);}
.approval-nudge-diff{padding:1vh; padding-left: 2vh; background-color: rgb(184, 189, 199); border-radius: 10px; margin:0.5vh; color:red; float:right;border: 1px solid rgba(0,0,0,0.2);}

.approval-approved{padding:1vh; padding-left: 2vh;background-color: #339933; border-radius: 10px; margin:0.5vh;border: 1px solid rgba(0,0,0,0.2);}
.approval-approved-diff{padding:1vh; padding-left: 2vh;background-color: #c7d417; border-radius: 10px; margin:0.5vh; float:right;/*border: 1px solid rgba(0,0,0,0.2);*/}

.approval-declined{padding:1vh; padding-left: 2vh;background-color: #ff6b6b; border-radius: 10px; margin:0.5vh;border: 1px solid rgba(0,0,0,0.2);}
.approval-declined-diff{padding:1vh; padding-left: 2vh;background-color: #ff6b6b; border-radius: 10px; margin:0.5vh; float:right;border: 1px solid rgba(0,0,0,0.2);}

.approval-rescheduled{padding:1vh; padding-left: 2vh;background-color: #63b9ff; border-radius: 10px; margin:0.5vh;color:black;border: 1px solid rgba(0,0,0,0.2);}
.approval-rescheduled-diff{padding:1vh; padding-left: 2vh;background-color: #63b9ff; border-radius: 10px; margin:0.5vh; float:right; color:black;border: 1px solid rgba(0,0,0,0.2);}

.force-reschedule{padding:1vh; padding-left: 2vh;background-color: #f7ab14; border-radius: 10px; margin:0.5vh;}
.force-reschedule-diff{padding:1vh; padding-left: 2vh;background-color: #ff6b6b; border-radius: 10px; margin:0.5vh; float:right;border: 1px solid rgba(0,0,0,0.2);}

.file-message{padding:1vh; padding-left: 2vh;background-color: #63b9ff; border-radius: 10px; margin:0.5vh;color:black;border: 1px solid rgba(0,0,0,0.2);}
.file-message-diff{padding:1vh; padding-left: 2vh;background-color: #63b9ff; border-radius: 10px; margin:0.5vh; float:right; color:black;border: 1px solid rgba(0,0,0,0.2);}
.file-message a{color: black;}
.file-message button{color: black !important; text-decoration: underline;}


.approval-by-diff{float:right; text-align: right;padding-right:2vh; margin-bottom: 1vh; max-width: 70%;}
.approval-by{padding-left:2vh; margin-bottom: 1vh; width:100%;display: table;}

/*.approve-text{color:#339933;}
.declined-text{color:#ff6b6b;}
.rescheduled-text{color: #4f91c7;}
.force-text{color:#ff6b6b;}
.file-text{color: #63b9ff;}*/

.no-approval-message{text-align: center;}
.approval-message-time{color:rgba(0,0,0,0.7);}
.upload-confirm{margin-top: 40px;}

.log-wrapper{border:1px dotted rgba(255,255,255,0.3); overflow-x: hidden; overflow-y:auto; height: 46.5vh; margin:1%; padding:1%;position:relative; background-color: #f1f1f1;color: black;}
.log-refresh{position: fixed;top: 3.5vh;right: 8vh;background-color: rgba(62,170,165,0.3);width: 4vh;height: 3vh;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;text-align: center;}
.log-refresh i:hover{
    transform: rotate(90deg);
}

#manager-certificate-mapping .block-body { height: 62.5vmin; }
#manager-certificate-mapping ul { white-space: normal; }
#manager-certificate-selection .dropzone-single { margin: 0 auto; }

#manager-certificate-upload form .block-body { height: 62.5vh; overflow-y: auto; overflow-x: hidden; position: relative; }
#manager-certificate-upload form .mapping .inputs { display: none; }

/*#certificate-upload .outputs{ background-color: rgb(115,133,150) !important;color: white; }*/

#manager-certificate-upload-body, #team-enrol-body { height: 52vh; overflow: hidden; }
.certificate-upload-entry { height: 20vh; }

.inputs, .outputs{
    border: 1px dotted rgba(0, 0, 0, 0.498039);
    padding: 3vh;
}
.inputs{
    padding-bottom: 7vh;
}
.outputs{
    display: none;
}
.outputs ul{
    margin-left: 5vh;
}

/* C3 */
/* Custom c3 styling */
.c3-chart-arc .c3-gauge-value { fill: #f5fffa; }
.c3-tooltip { /*color: #1a1a1a;*/ }
.chart { position: relative; margin: 2vh 0; }

.data-table-title{

}

#icon-display-output { width: 100%; text-align: center; font-size: 80px; padding: 20px; }


/* MEDIA QUERIES */
/* Based of the data-tag breakpoints */

@media screen and (max-device-width: 1200px){

    #user-profile .user-details{
        width:100%;
        display: inline-block;
    }

    #user-profile #profile-picture-wrapper{
        width:40%;
        height:100%;
        display: inline-block;
        margin-bottom: 0;
    }

    #user-profile .profile-wrapper {
        height:51vh;
    }

    #user-profile .profile-details{
        width:59%;
        float: right;
        display: inline-block;
    }

    #profile-picture-container .col-6 {
        width:100%;
    }

    #profile-picture-container .col-6 button {
        margin-top:10vh;
    }

    .carousel .side {
        width: 19%;
    }
    .carousel .side span {
        left: -1.5vh;
    }
    #mandatory-training-tiles .title {
        width: 81%;
    }
    #mandatory-training-tiles .icon {
        width: 81%;
    }

    .news-info label{
        max-width: 49%;
        overflow:hidden
    }

    #popular-topics .title div{
        top: 12.5%;
    }

    #my-skills-audit .fixed-data-table {
        height: 42vh;
    }

    #approval-display {
        padding: 15px 0;
    }
    #request-container .three-quarter-block-left {
        width: 59.7%;
    }
    #request-container .three-quarter-block-right {
        width: 39.7%;
        height: 54.75vh;
        top: 19.25vh;
        left: 60.3%;
    }
    .log-refresh {
        top:3.3vh;
    }
    textarea#response-field {
        height: 10vh;
    }

    #topic-components .title {
        width:81%;
    }
    #topic-components .icon {
        width:81%;
    }
    #notifications #mail-options div:nth-child(1){margin-top:1vh;}
    #notifications #mail-options button {line-height: 5vh;height: 5.6vh;}
    #notifications #mail-options i {line-height: 4vh;}
}

@media screen and (max-device-width: 900px){
    .block-content{
        width:90%;
        text-align: center;
    }

    #my-skills-audit .fixed-data-table {
        height: 35vh;
    }

    #all-certificate-tiles .carousel {
        height: 14.5vh;
    }

    .data-table-title {
        height: 9vh;
    }

    .search-intro {
        margin-bottom: 1vh;
    }
}

@media screen and (max-device-width: 768px){
    /* remove if you want but headers are ridicolously large at this size */
    body{
        font-size: 12px;
    }
    /* HOME */
    #identity > img {
        height: 5vh;
    }
    #user-display{
        width: 30vh
    }
    #quick-question form span{display:none;}

    .tiny-text {
        font-size: 10px;
    }
    #quick-question label, #quick-question button {
        margin-top: 6px;
    }
    .thumb-status {
        height: 40px;
        width: 40px;
    }
    .medium-text {
        font-size: 3vmin;
    }
    .small-text {
        font-size: 2.8vmin;
    }
    nav {
        width: 8.5%;
    }
    nav > ul > li > a {

    }
    nav > ul > li {

    }

    footer #about {
        top: 90px;
        text-align: center; 
    }
    footer #help {
        text-align: center;
    }
    /* My Learning */

    /* My team */

    /* topics */

    /* calendar */

    /* documents */

    /* auth */
}

.ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail {
    opacity: 0.6;
    z-index: 4;
}

button.button, button.button-inverted, button.button-primary {
    font-size: inherit;
}
.button, .button-inverted, .button-primary, .button-secondary, .snd-button {
    min-width: 7vw;
    display: inline-block;
    padding: 1vh;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
    cursor: pointer;text-align: center;
}
.text{
    min-width: 7vw;
    display: inline-block;
    padding: 1vh;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease;
    text-align: center;
    margin-top:20px;
    color:black;
}
.button-auto { width: auto; min-width: auto; }

.disabled{
    background-color: #ccc;
    cursor: not-allowed;
}

#admin-body > div { display: none; }

#admin-centre tr { cursor: pointer; }

#take-attendance-container { width: 100%; height: 70vh; background-color: #ff00ff; margin-top: 10vh; }
.take-attendance-column { display: inline-block; vertical-align: top; width: 33%; height: 100%; border-right: 2pc solid #333; }

.admin-guide-container { display: block!important;position: fixed;left: 0;right: 0; bottom:0;}
.admin-guide { background-color: rgb(171,104,18)!important; position: absolute; display: block!important; left: 50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); text-align:center; height:50px; line-height: 50px; cursor: pointer; padding-left:20px; padding-right:20px;}
.admin-guide:hover{height:60px; text-decoration: underline;}
.admin-guide img { width: 180px; cursor: pointer; }
.admin-guide-screen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); width: 95%; height: 95%; background-color: #333; outline: 100vh solid rgba(0,0,0,0.7); }
.admin-guide-screen video { width: 100%; height: 100%; }

#admin-centre table.dataTable td {
    position: relative;
    height: 3.2vh;
    min-height: 32px; 
}
#admin-centre textarea.std-input, #admin-centre textarea.snd-input { min-height: 200px; margin: 15px auto; font-family: 'Poppins', sans-serif; font-weight: 300; }
textarea::-webkit-input-placeholder {  color: white; }

.admin-user-container{position: relative; width: 80%; margin-left: 10%;}
.admin-user-container p {margin-top: 0.5em; margin-bottom: 0.5em;}
.admin-user-container a{text-decoration: underline;}
.admin-user-container .wizard-button{margin: 0 5px 0 5px}
.admin-user{background: grey; padding: 10px; padding-left: 10px; display:flex; position: relative;}
.admin-user .data-target{padding-left: 5px;}
.admin-user-profile-pic{width:125px; height:125px; overflow:hidden;}
.admin-user-profile-pic img {width: auto;height: 100%;}
.admin-user-box{width: 31.3%; position: relative; float:left; margin:1%;}
.admin-user-search{width: 100%;margin-bottom: 25px; min-height: 4vh;}
/*.admin-user-search input{width: 64%; margin-left:2%;}*/
/*.admin-user-search .dropdown{width: 14%; margin-left:10%; display: inline-block; float:left;}*/
.admin-user-options, .admin-user-view{padding: 10px;}
.admin-user-options a {text-align: center; display: inline-block;}
.admin-user-create{margin-bottom: 25px;}
.admin-user-unhide{margin-top: 20px;display: inline-block;width: 100%;}

.faq-tile-options li {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 28vmin;
    margin: 0 1% 1% 0;
}
.faq-tile-options li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.faq-tile-options li i {
    position: absolute;
    top: 40%;
    left: 50%;
    webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.faq-tile-options li span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.new-video-faq{
    width: 20%;
    height: 50%;
    position: absolute;
    left: 85% !important;
    top: 15% !important;
    color: rgb(183,0,0) !important;
}
.new-video-faq i{
    font-size: 8vh;
}
.new-video-faq span{
    font-size: 1.5vh;
    color: white !important;
    top: 22% !important;
    left: 25% !important;
}
#admin-centre .overlay-display{
    height: 100vh;
}
.admin-options{
    border: 1px dotted rgba(0,0,0,0.5);
    height: 64vh;
    overflow: auto;
    padding-top: 2vh;
}
.admin-faq-header{
    width:50%; 
    margin-left: 25%; 
    height: 10vh; 
}
.admin-container{
    position:relative;
    width:80%;
    margin-left:10%;
}
.admin-letters{
    width:100%;
    height: 5vh;
    margin-bottom: 2vh;
    text-align: center;
}
.admin-letters .letter{
    text-align: center;
    line-height: 4vh;
}
.letter-container{
    padding:2px;
    display: inline-block;
    width:3%;
    height: 4vh;
}
.admin-gloss-scroller{
    max-height: 20vh;
    overflow: auto;
}

.admin-manage-blocks { position: absolute; top: 50%; left: 50%; width: 70%; list-style-type: none; transform: translate(-50%,-50%);text-align: center; }
.admin-manage-blocks li { position: relative;display: inline-block;width: 35vmin;height: 22vmin;cursor: pointer; }
.admin-manage-blocks li i { position: absolute; display: block; }
#topic-configuration-interface-header-title h2 { margin: 0 auto 30px auto; }

#evaluation-centre { overflow: hidden;background: white; }

.evaluation-centre-background { background-color: #fff; }
#evaluation-footer svg {
    position: fixed;
    bottom: -26px;
    right: -23px;
    transform: rotate(90deg);
    opacity: 0.5;
}

#evaluation-body { position: absolute; width: 75%; z-index: 4; }

.evaluation-screen { display: none; }
.evaluation-screen.evaluation-current { display: block; }

.evaluation-screen h3 { margin-top: 2vmin; }
.evaluation-screen textarea { width: 100%; height: 200px; padding: 10px; background-color: #1d485f; color: #fff; font-family: Poppins; font-weight: 200; }

/* STEVEN REQUESTED THE EVALUATION CENTRE BE NOT BRANDABLE! */
.evaluation-screen button { background-color: rgb(29,72,95); color: rgb(255,255,255); }

.evaluation-screen input { display: none; }
.evaluation-screen label { position: relative; background-color: #e8e8e8; margin: 0 2vmin 2vmin 0; cursor: pointer; width: 20vmin;  height: 20vmin; text-align: center; }
.evaluation-screen label.small { width: 8vmin; height: 8vmin; margin-bottom: 0; }
.evaluation-screen input:checked + label { background-color: #3eaaa5; color: #fff; }
.evaluation-screen > span { display: inline-block; margin: 0 2vmin; }
.evaluation-screen label span { display: block; position: absolute; top: 50%; left: 50%; webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

.evaluation-submit-button { position: absolute; left: 0; display: block; margin-top: 40px; }

#topic-cpd .icon { padding: 7vh 0 2vh 0; }
#topic-cpd .icon, #topic-cpd .title { width: 85%; }

#team-enrol-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 2vmin; z-index: 999;}

#sm-header { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 60px; padding: 15px 20px; z-index: 5; }
#sm-header i { cursor: pointer; }

#navbar-bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; opacity: 0.4; z-index: 4; }

.nav-text { display: none; margin-left: 20px; }

#news-summary .news-item p { max-height: 4vh; overflow: hidden; }
#news-summary .news-item p.tiny-text{
    /*font-size:12px;*/
}



/*End of V2 css*/

@media only screen and (max-width : 768px){
    .login-area .branding .footer{bottom: 5px;padding:0px;}
}    
@media only screen and (min-width : 768px) and (max-width : 768px){
    .login-area .separator{display:none;}
}
@media only screen and (max-width : 600px) {   
    .login-area .branding,.login-area .form{width:100%;}
    .login-area{width: 100%;}
}
@media only screen and (min-width : 600px) {   
    .login-area{
        width:75%; 
    }
}
@media only screen and (max-width : 1024px) and (orientation:landscape){
    .login-area .branding,.login-area .form,.login-area{width:100%;}
    .login-area .branding img{width: auto;right: 0px;position: absolute;height: 15vh;margin:2vh;}
    .login-area .branding .footer {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 3vh;
        text-align: left;
    }
    .login-area .separator{display:none;}
    .login-area .footer p a{display:block;}
    .login-area .copyright{display:inline;}
    .login .vh-align{top:0px;left:0px;-webkit-transform: none;-ms-transform: none;transform: none;}
    .login-area {
        height: 100% !important;
    }
    .login-area .branding{
        height: 26%;
    }
    .login-area .form {
        height: 73%;
    }
}

/*## Extra Large ##*/
@media only screen and (max-width : 1440px) {    

}

/* Large laptops, Small Desktops */
@media only screen and (max-width : 1200px){ 
    .super-admin-nav .small-screen-hide {display:none;}
    .super-admin-nav .small-screen-show {display:initial;}
}

/* Medium Devices, Laptops */
@media only screen and (max-width : 900px) { 
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .super-admin-mobile-slide-in {display: none !important;}
}
@media only screen and (max-width : 768px) {
    .super-admin-nav{display: none !important;}
    .super-admin-mobile-nav{display: block;}
    .support-container{width:100%; margin-bottom: 50px;}
    .support-container > div{ 
        max-height: fit-content;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 576px) {
    .small-screen-hide { display:none !important; }
    .small-screen-show { display:block !important; }
}

/*# Custom Styles #*/

.autosearch{
    text-align:left;

}
.autosearch-container{
    display:none;
}

.fieldgroup{
    float:left;
    //width:100px;
}
.fieldgroup div,.fieldgroup input,.fieldgroup label{
    margin:0px;
}
.fieldgroup div,.fieldgroup label{
    padding:2px;
    line-height:15px;
}
.fieldgroup div{
    text-align: center;
}
.fieldgroup div input[type="checkbox"]{
    margin:10px;
}
.finduser{width:57%;}
/*.fieldgroup input{
    padding:10px;
}*/
.search-results-header{
    display:none;
}
#finduser17879 .results{
    background-color:grey;
    background-color:rgb(29, 72, 95);
}
/*.text-selection{
    -webkit-user-select: text;  Safari 3.1+ 
    -moz-user-select: text;  Firefox 2+ 
    -ms-user-select: text;  IE 10+ 
    user-select: text;  Standard syntax 
}*/
.text-selection::-moz-selection {
  color: #3eaaa5;
  background: white;
}
.export-button{
    float:right;
}
#copy-db-form-submit{
    margin:25px 0px 0px 0px;
}
h1 {
    font-size: 2.5rem;
}
h2 {
    font-size: 1.7rem;
}
h3, h4, h5, h6 {
    font-size: 1.5rem;
}
.btn-flat, .btn {
    text-decoration: none;
    text-transform: none;
    color: #fff;
    font-size: 16px;
}
.btn:hover {
    color: unset;
}
a:hover, a:focus {
    text-decoration: none;
    color: unset;
}
select {
    display: block;
}
table.dataTable a.btn {
    color: #fff;
}
.bold {
    font-weight: 600;
}
.ticket-value-element.text {
    width: calc(100% - 7vw - 10px)!important;
}
.collapsible-body {
    padding: 0;
}
.collapsible-body tr td:first-child {
    padding-left: 15px;
}
.collapsible-body tr td:last-child {
    padding-right: 15px;
}

.removeOutcomeContainer .removeOutcome {
    position: relative;
    
}
