/* Move down content because we have a fixed navbar that is 50px tall */
body {
    overflow: auto;
    /*padding-top: 50px;
    padding-bottom: 20px;*/
    font-family: "Montserrat", Helvetica, sans-serif;
    /* Overflow hidden on body causes android issues with scrolling */
    /*overflow: hidden;*/
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 15px;*/
    /*padding-right: 15px;*/
}

/*body, input, select, textarea, span, a.btn {
    font-size: 90% !important;
}*/

.input-group-addon:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

a, button {
    transition: all 300ms ease 0s;
    -webkit-transition: all 300ms ease 0s;
    -moz-transition: all 300ms ease 0s;
    cursor: pointer;
}

button {
    background-color: transparent;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

a:hover {
    text-decoration: none;
}

button.nohover:hover {
    background-color: transparent;
}

.no-gutter {
    margin-right: 0px;
    margin-left: 0px;
}

.content .sectionHeader {
    padding: 5px;
    font-weight: bold;
    font-size: 150%;
    background: var(--bcot-darkblue);
    border: 1px solid var(--bcot-primary);
    color: var(--bcot-light-text);
    margin-bottom: 15px;
    border-radius: 5px;
}

.content .sectionHeader-sm {
    font-size: 100%;
}

.content .img-sm {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border: 2px solid gray;
}

.content .img-sm img {
    background-color: #631d76;
}

.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    /*position: fixed !important;*/
    top: 0px;
    left: 0px;
    background-color: #818a8f;
    opacity: 0.95;
    z-index: 9999 !important;
}

.stickyPadding {
    /*padding-left: 265px;*/
}

.dashboard {
    text-align: center;
    padding: 10px 0px 5px 10px;
    font-weight: bold;
    letter-spacing: 0.7em;
    font-size: 150%;
    text-shadow: 2px 2px purple;
}

@media screen and (max-width: 768px) {
    .sticky {
        opacity: 1;
    }

    .stickyPadding {
        padding-left: 0px;
    }
}

.sticky + .content {
    padding-top: 102px;
}

.text-xs {
    font-size: 40%;
}

.text-sm {
    font-size: 85%;
}

.text-md {
    font-size: 110%;
}

.text-lg {
    font-size: 130%;
}

.mainBtn {
    display: inline-block;
    padding: 10px 8px;
    color: white;
    border-radius: 5px;
    background-color: #0098db;
}

.mainBtn:hover {
    background-color: #002c77;
    color: white;
}

.mainBtn-xs {
    width: 80px;
}

.mainBtn-sm {
    width: 150px;
}

.mainBtn-md {
    width: 200px;
}

.mainBtn-lg {
    width: 250px;
}

.mainBtnPill {
    border-radius: 20px;
}

.page-title {
    background-color: var(--bcot-darkblue);
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    }

/* Stops google chart tooltip from flickering */
div.google-visualization-tooltip, svg > g > g:last-child {
    pointer-events: none;
    z-index: 1000;
}

/*
    When use with font awesome unicode
    https://fontawesome.com/cheatsheet
    There are different types of font awesome icons; regular, solid, brands and light
    Add .useFA and either one of the types CSS when implementing
    e.g. class = "useFA useFASolid"
*/
.useFA {
    font-family: "Font Awesome 5 free" !important;
}

.useFASolid {
    font-weight: 900;
}

.useFARegular {
    font-weight: 400;
}

.useFALight {
    font-weight: 300;
}

.studentName
{
    font-size: medium;
    font-weight: bold;
    color: white;
    text-align:center;
}

.transparentBackground {
    background-color: rgba(255, 255, 255, .1);

}

::placeholder {
    color: #818a8f !important;
}

#navigation #closeMenu {
    padding: 5px 15px;
    font-size: 20px;
    margin-right: 10px;
}

#searchIcon:hover .searchIcons,
#closeSearchIcon:hover .searchIcons {
    border-top: 5px solid white;
}

.searchIcons {
    color: white;
    padding: 12px;
    font-size: 150%;
    border-top: 5px solid transparent;
}

.search-group {
    position: absolute;
    right: 100px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 200ms linear, opacity 150ms linear;
    z-index: 2000;
}

.search-group-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 200ms linear, opacity 150ms linear;
}

.textSearchMiddle
{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

}

.textSearch 
{
    border-left: 0 !important;
    border-right: 0 !important;
    color: white;
}

.textSearch:focus {
    color: white;
}

.textSearch::placeholder {
    color: white !important;
}

.topSearch ul {
    margin: 0 !important;
}

.delete {
    color: red;
}

.delete:hover {
    color: green;
}

.cssFavicon {
    width: 32px;
}

.bgCover {
    background-size: cover !important;
    background-position: center;
}

.impersonate {
    position: absolute;
    top: 45px;
    left: 45px;
    border: 5px solid red;
}

/*
    Boostrap 'Invisible' class will only make the object disappear from view
    By adding the hide class, the object will be made as small as possible
*/
.hide {
    display: inline-block;
    width: 0%;
}

.errorPanel {
    position: fixed !important;
    top: 35%;
    left: 50%;
}

/* Default button styles */
button, input[type=submit] {
    border: none;
    outline: none !important;
    font-family: "Montserrat", Helvetica, sans-serif;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover {
    cursor: pointer;
}

/* Styles for the search button at the top */
button.input-group-addon {
    background-color: rgba(222, 222, 222, 0.3);
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    padding-left: 19px !important;
}

.card-header {
    background-color: #002c77;
}

ul {
    list-style: none;
    padding-left: 0;
}

.text-primary {
    color: #007bff !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Ripple effect */
.notificationDot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
  
  position: absolute;
  top: 12px;
  left: 30px;
  -webkit-transition: height .25s ease, width .25s ease;
  transition: height .25s ease, width .25s ease;
  
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.notificationDot:hover {
    /*height: 150px;
    width: 150px;*/
}

.notificationDot:before,
.notificationDot:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1px solid red;
}

.notificationDot:before {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}
.notificationDot:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}

.notificationDot:hover:before,
.notificationDot:hover:after {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes ripple {
  0% {-webkit-transform: scale(1); }
  75% {-webkit-transform: scale(1.5); opacity: 1;}
  100% {-webkit-transform: scale(2); opacity: 0;}
}

@keyframes ripple {
  0% {transform: scale(1); }
  75% {transform: scale(1.5); opacity: 1;}
  100% {transform: scale(2); opacity: 0;}
}

/*
    Ripple effect for alert icon
    https://codepen.io/pauginer/pen/PjbLEL
*/
.iconDiv {
    padding-left: 45px;
    color: white;
}

.iconAlert {
    position: relative;
    overflow: hidden;
    padding: 8px 8px;
    cursor: pointer;
    margin-left: 15px;
    z-index: 999;
}

.iconAlert:after {
    content: '';
    mix-blend-mode: screen;
    position: absolute;
    top: 5px;
    left: 5px;
    height: 16px;
    width: 16px;
    background: rgba(255, 255, 255, .5);
    opacity: 0;
    border-radius: 100%;
    transform-origin: 50% 50%;
}

@keyframes iRipple {
    0%, 35% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}

.iconAlert::after {
    animation: iRipple 1.2s ease-out infinite;
    animation-delay: 1s;
}

.alertNav {
    height: 0;
    width: calc(92% - 265px);
    position: fixed;
    z-index: 9999;
    top: 20px;
    right: 20px;
    overflow-y: hidden;
    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
}

.alertNav a {
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    transition: 0.3s;
}

.alertNav a:hover {
    color: #f1f1f1;
}

.alertNav .closebtn {
    font-size: 20px;
    margin-left: 50px;
}

.alertContent {
    background-color: white;
    margin: 0px 15px;
}

.alertData {
    padding: 10px 15px;
}

.alertData .row {
    padding: 5px 0px;
}

.alertAlt {
    background-color: #dbafc2;
}

@media screen and (max-width: 991px) {
    .alertNav {
        width: 92%;
    }
}

/* Checkbox
	https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
*/
.control {
	display: inline-block;
	position: relative;
	padding-left: 40px;
	padding-top: 4px;
	padding-right: 5px;
	margin-bottom: 15px;
	cursor: pointer;
	font-size: 12px;
    color: var(--bcot-opp-text) !important;
}

.control p {
    margin-bottom: 0px !important;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	height: 30px;
	width: 32px;
	background-color: #e6e6e6;
	border: 2px solid #e6e6e6;
    border-radius: 5px;
}

.control__indicator_right {
	right: 0;
    left: auto;
}

.control input:focus ~ .control__indicator {
}

.control:hover input ~ .control__indicator {
	/*background: #ccc;*/
	background-color: lightgreen;
    border: 2px solid lightgreen;
}

.control input:checked ~ .control__indicator {
	/*background: #2aa1c0;*/
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	/*background: #0e647d;*/
}

.control input:disabled ~ .control__indicator {
	background: #e6e6e6;
	opacity: 0.6;
	pointer-events: none;
}

.control__indicator:after {
	content: '';
	position: absolute;
	display: none;
}

.control input:checked ~ .control__indicator:after {
	display: block;
}

.control--checkbox .control__indicator:after {
	left: 11px;
	top: 4px;
	width: 8px;
	height: 15px;
	border: solid #7ab800;
	border-width: 0 4px 4px 0;
	transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

.validationError{
    font-weight: bold;
    color:red;
}

/* Set box shadow */
.boxShadowDark {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

.boxShadowAmber {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 180, 0, 0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(255, 180, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(255, 180, 0, 0.75);
}

.boxShadowRed {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(255, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(255, 0, 0, 0.75);
}

.boxShadowGreen {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 255, 0, 0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 255, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 255, 0, 0.75);
}

.boxShadowBlue {
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 123, 255, 0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 123, 255, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 123, 255, 0.75);
}

.blDark {
    border-left: 15px solid var(--bcot-secondary);
}

.blAmber {
    border-left: 15px solid var(--bcot-warning);
}

.blRed {
    border-left: 15px solid var(--bcot-danger);
}

.blGreen {
    border-left: 15px solid var(--bcot-success);
}

.blBlue {
    border-left: 15px solid var(--bcot-primary);
}

/* Overwrite now ui dashboard text area */
textarea.form-control {
    padding: .375rem .75rem;
}

/* Displaying markbook warning */
.mbWarning span {
    color: darkblue;
    font-weight: bold;
    text-transform: uppercase;
}

.mbWarningCount {
    display: block;
    background-color: #97233f;
    text-align: center;
    width: 100%;
    color: white !important;
}

.footer {
    background-color: rgba(32, 64, 101, 0.5);
    color: white;
    margin: 0px 15px 15px 15px;
}

.footer span {
    width: 120px;
    font-size: 1em;
    text-align: center;
    display: inline-block;
}

.footer span:nth-child(2),
.footer span:nth-child(5),
.footer span:nth-child(8) {
    color: #d5d2ca;
    font-size: 90%;
    text-transform: uppercase;
}

.footer span.spanBCoT {
    width: 245px;
    margin-left: 10px;
}

/* Blur text */
.textBlurWhite {
    color: transparent;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.textBlurBlack {
    color: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
}

.panelDemo {
    background-image: url('../Images/matrix-bg.gif') !important;
    /*opacity: 0.8;*/
}

.panelDemoHeading {
    /*background-color: rgba(255, 255, 255, 0.5);*/
    /*border-radius: 5px;*/
    color: red;
    font-weight: bold;
    display: block;
    position: fixed;
    top: 0px;
    left: 50%;
    background-color: white;
    padding: 2px 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*
    https://codepen.io/555/pen/pdwvBP
*/
.stamp {
    color: #555;
    font-size: 1.5rem;
    font-weight: 700;
    border: 5px solid #555;
    display: inline-block;
    padding: 0px 5px;
    text-transform: uppercase;
    border-radius: 1rem;
    font-family: 'Courier';
    -webkit-mask-image: url('../Images/grunge.png');
    /*-webkit-mask-size: 500px 777px;*/
    /*mix-blend-mode: multiply;*/
    flex: 0 0 80%;
    -ms-flex: 0 0 80%;
}

.is-approved {
    color: white;
    border: 0.5rem solid white;
    -webkit-mask-position: 15rem 5rem;
    border-radius: 0;
    margin: 5px auto;
}

/* Custom Checkbox */
/* https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3 */
.customcb {
    margin-top: 1rem;
}

.customcb input[type="checkbox"] {
    opacity: 0;
}

.customcb label {
    position: relative;
    display: inline-block;
    padding-left: 40px;
    padding-top: 8px;
    color: var(--bcot-opp-text);
}

.customcb label::before,
.customcb label::after {
    position: absolute;
    transition: all 300ms ease 0s;
    -webkit-transition: all 300ms ease 0s;
    -moz-transition: all 300ms ease 0s;
}

.customcb:hover input ~ label::before {
    transition: all 300ms ease 0s;
    -webkit-transition: all 300ms ease 0s;
    -moz-transition: all 300ms ease 0s;
    border: 2px solid lightgreen;
}

/* Outer box */
.customcb label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 32px;
    border: 1px solid;
    top: 3px;
    left: 0px;
	background-color: #e6e6e6;
	border: 2px solid #e6e6e6;
    border-radius: 5px;
}

/* Check mark */
.customcb label::after {
    content: "";
    display: inline-block;
    height: 12px;
    width: 20px;
    border-left: 4px solid green;
    border-bottom: 4px solid green;
    transform: rotate(-45deg);
    left: 6px;
    top: 9px;
}

/* Hide the check mark by default */
.customcb input[type="checkbox"] + label::after {
    content: none;
}

/* Unhide the check mark on the checked state */
.customcb input[type="checkbox"]:checked + label::after {
    content: "";
}

.dropdown-toggle-none.dropdown-toggle::after {
    content: none;
}

.anchor {
    display: block;
    visibility: hidden;
    position: relative;
    top: -65px;
}

/* When loading */
.loading {
    position: fixed;
    width: 120px;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
}

.loading div {
    font-size: 80%;
    position: absolute;
    color: white;
    bottom: 12px;
    left: 32px;
}

/* Faded horizontal line */
.hrFaded {
    display: block;
    border: none;
    color: white;
    height: 1px;
    background: black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#000), to(#fff));
}

/* Student more options button */
.options {
    float: right;
    top: 0px;
}

.card-header .options {
    top: -20px;
    position: absolute;
    right: 0px;
}

.card .card-title {
    font-size: 16px;
    font-weight: normal;
}

.card {
    background-color: transparent;
}

.card-header {
    border-radius: 5px;
    background-color: #002C77;
}

/* Hide the arrow */
.options .dropdown-menu {
    top: 0px !important;
    left: -180px !important;
    right: 25px !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Set wider menu to accommodate trips */
.options .wide {
    left: -360px !important;
}

.options .dropdown-menu::before {
    display: none;
    /*border-bottom: .4em solid transparent;
    border-right: .4em solid transparent;
    border-left: .4em solid;
    border-top: .4em solid transparent;
    top: 8px;
    left: 160px;*/
}

.options .dropdown-toggle::after {
    display: none;
}

.options i {
    color: white;
}

/* Make drop down menu in front of tooltip but behind sticky header */
.options .dropdown-menu.show {
    z-index: 1;
}

.wrapper {
    display: flex;
    width: 100%;
    /*background-color: rgba(235, 236, 241, 0.5);*/
    background-color: var(--bcot-body-opaque);
    overflow: hidden;
}

#sidebarOpen {
    position: absolute;
    top: 50%;
    left: 0px;
    padding: 5px 10px;
    font-size: 20px;
    padding-left: 15px;
    z-index: 1000;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: rgba(80, 80, 80, 0.5);
    background-color: var(--bcot-primary);
    color: var(--bcot-light);
}

#sidebarOpen:hover {
    background-color: var(--bcot-primary-hover);
}

#sidebarCollapse,
#sidebarMinimise {
    position: absolute;
    top: 0px;
    right: 15px;
    padding: 5px 10px;
    font-size: 20px;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    background-color: var(--bcot-primary);
    transform: rotate(90deg);
    color: var(--bcot-light);
}

#sidebarCollapse {
    top: 50%;
    transform: rotate(0deg);
    right: 0px;
    padding-right: 10px;
    z-index: 1000;
}

#sidebarCollapse:hover {
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    background-color: var(--bcot-primary-hover);
}

#sidebarMinimise {
    right: 55px;
    font-size: 16px;
    top: 3px;
}

#sidebarMinimise:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.main-panel {
    width: 100%;
}

.sidebar {
    -webkit-transform: translate3d(-265px, 0, 0);
    transform: translate3d(-265px, 0, 0);
}

.active .pnlSummary {
    display: none;
}

.active .main-panel {
    width: calc(100% - 265px);
}

.active .sidebar {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.minimise .pnlInfo {
    display: none;
}

.minimise .main-panel {
    width: calc(100% - 100px);
}

.minimise .sidebar {
    -webkit-transform: translate3d(-160px, 0, 0);
    transform: translate3d(-160px, 0, 0);
    font-size: 10px;
}

.minimise .sidebar-wrapper {
    width: 100px;
    float: right;
}

.minimise .quicklink button,
.minimise .quicklink a {
    width: 100%;
    text-align: center;
}

.minimise .quicklink div {
    float: none;
    margin: 0;
}

.minimise .sidebar .sectionHeader,
.minimise #divStudentName,
.minimise .sidebar .courseButton {
    font-size: 11px;
}

.minimise #divStudentName {
    margin-bottom: 10px;
}

.minimise .attendanceMedal {
    width: 30px;
    height: 30px;
    font-size: small;
}

.minimise .circular--portrait {
    width: 80px;
    height: 80px;
}

.minimise .divCourseRef {
    padding: 0;
}

.minimise #divWelcome,
.minimise #divStaffName,
.minimise #lblFaculty,
.minimise #lblHelpdesk,
.minimise .labelQuickLink,
.minimise .mbPanelChart {
    display: none;
}

.minimise .row-vs div {
    padding: 0 5px;
}

.minimise .col-vs-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 5px;
}

.minimise .col-vs-6 button,
.minimise .col-vs-6 a {
    padding: 2px 5px;
    display: block;
    text-align: center;
}

.minimise .col-vs-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 5px;
}

.minimise .col-vs-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 5px;
}

@media (max-width: 768px) {
    #sidebarMinimise {
        display: none;
    }

    .active .main-panel {
        width: 100%;
        -webkit-transform: translate3d(265px, 0, 0);
        transform: translate3d(265px, 0, 0);
    }

    .main-panel {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .wrapper {
        overflow: auto;
    }

    #bodyClick {
        height: 100%;
        width: 100%;
        position: fixed;
        opacity: 1;
        top: 0;
        right: 0;
        left: 265px;
        content: "";
        z-index: 9999;
        overflow-x: hidden;
        background-color: transparent;
        -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    }

    .search-group {
        visibility: visible;
        opacity: 1;
        transition: visibility 200ms linear, opacity 150ms linear;
        position: inherit;
        right: 0px;
    }}
}

/*
    Progress bar
*/
.progress-1x {
    height: 25px;
}

.progress-2x {
    height: 36px;
}


/* Stops bootstrap tooltip from flickering */
.tooltip,
.popover {
    pointer-events: none;
}

.showPointerEvents {
    pointer-events: inherit;
}

/*
    Tooltip colour customisation 
    Add the leading style to the tooltip panel and also add a data-container attribute with the class
    e.g. data-container=".tt-success"
*/
.tt-success .tooltip-inner {
    background-color: #28a745;
}

.tt-success .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tt-success .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #28a745;
}

.tt-success .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tt-success .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #28a745;
}

.tt-success .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tt-success .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #28a745;
}

.tt-success .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tt-success .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #28a745;
}

.tt-danger .tooltip-inner {
    background-color: #dc3545;
}

.tt-danger .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tt-danger .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #dc3545;
}

.tt-danger .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tt-danger .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #dc3545;
}

.tt-danger .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tt-danger .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #dc3545;
}

.tt-danger .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tt-danger .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #dc3545;
}

.tt-warning .tooltip-inner {
    background-color: #ffc107;
}

.tt-warning .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tt-warning .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #ffc107;
}

.tt-warning .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tt-warning .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #ffc107;
}

.tt-warning .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tt-warning .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #ffc107;
}

.tt-warning .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tt-warning .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #ffc107;
}

.tt-info .tooltip-inner {
    background-color: #17a2b8;
}

.tt-info .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tt-info .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #17a2b8;
}

.tt-info .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tt-info .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #17a2b8;
}

.tt-info .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tt-info .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #17a2b8;
}

.tt-info .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tt-info .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #17a2b8;
}

.tt-secondary .tooltip-inner {
    background-color: #6c757d;
}

.tt-secondary .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tt-secondary .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #6c757d;
}

.tt-secondary .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tt-secondary .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #6c757d;
}

.tt-secondary .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tt-secondary .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #6c757d;
}

.tt-secondary .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tt-secondary .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #6c757d;
}

/*
    The switch - the box around the slider
    https://www.w3schools.com/howto/howto_css_switch.asp
*/
label.switch::before {
    position: absolute;
    content: "Industry / Professional";
    left: -125px;
    top: 8px;
}

label.switchPD::before {
    position: absolute;
    content: "";
    width: 160px;
    left: 75px;
    top: 8px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.test::before {
    background-color: red;
}

/*
    https://envato.com/blog/css3-typography-code-snippets/
*/
@import url(https://fonts.googleapis.com/css?family=Tangerine);
*, *:before, *:after {
  box-sizing:border-box;
}

div.foo {
    font-family: 'Tangerine', sans-serif;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

div.fooRed i::before {
    color: red;
}

@media screen and (max-width: 991px) {
    div.foo {
        display: inline;
        padding: 0px 20px 0px 5px;
    }
}

.letter {
    display: inline-block;
    font-weight: 900;
    font-size: 3em;
    position: relative;
    color: #00B4F1;
    transform-style: preserve-3d;
    perspective: 400px;
    z-index: 1;
}
.letter:before, .letter:after {
    position: absolute;
    content: attr(data-letter);
    transform-origin: top left;
    top: -16px;
    left: 0;
}
.letter, .letter:before, .letter:after {
    transition: all 0.3s ease-in-out;
}
.letter:before {
    color: #fff;
    text-shadow: 
        -1px 0px 1px rgba(255,255,255,.8),
        1px 0px 1px rgba(0,0,0,.8);
    z-index: 3;
    transform:
        rotateX(0deg)
        rotateY(-15deg)
        rotateZ(0deg);
}
.letter:after {
    color: rgba(0,0,0,.11);
    z-index: 2;
    transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        skew(0deg,1deg);
}
.letter:hover:before {
    color: #fafafa;
    transform:
        rotateX(0deg)
        rotateY(-40deg)
        rotateZ(0deg);
}
.letter:hover:after {
    transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(40deg)
        rotateZ(0deg)
        skew(0deg,22deg);
}

.masterNotification {
    position: absolute;
    top: -5px;
    left: 20px;
}

.searchClearButton {
    height: 38px;
}

.staff--portrait {
    border-radius: 30px;
    overflow: hidden;
    width: 55px;
    height: 55px;
    display: inline-block;
    border: 2px solid gray;
}

.staff--name {
    vertical-align: top;
    margin-top: 5px;
    display: inline-block;
}

/* Top Menu */
.top-header-container {
    z-index: 1119;
    height: 100%;
}

.top-header {
    background: var(--bcot-background-gradient-top);
    background-color: var(--bcot-background-opaque);
}

.top-header .home {
    border-top: 5px solid transparent;
}

.top-header .home:hover {
    border-top: 5px solid white;
    transition: all 150ms linear;
}

.top-menu-col {
    z-index: 1050;
}

.top-menu {
    position: relative;
}

.top-menu button,
.top-menu a.topmenuLink {
    color: var(--bcot-lightgray);
    border-top: 5px solid transparent;
    display: block;
}

.top-menu:hover button,
.top-menu:hover a.topmenuLink {
    border-top: 5px solid white;
    transition: all 150ms linear;
    background-color: transparent;
}

.top-menu:hover .top-menu-expanded {
    visibility: visible;
    transition: visibility 200ms linear, opacity 150ms linear;
    opacity: 1;
}

.top-menu-expanded {
    background-color: var(--bcot-opp-background);
    position: absolute;
    top: 95%;
    left: -30px;
    border-radius: 12px;
    visibility: hidden;
    -webkit-box-shadow: var(--bcot-box-shadow);
    box-shadow: var(--bcot-box-shadow);
    opacity: 0;
    padding: 20px;
}

.top-menu-expanded-right {
    left: -200px;
}

.tme-col1 {
    width: 300px;
}

.tme-col2 {
    width: 500px;
}

.tme-col3 {
    width: 700px;
}

.top-menu-expanded .menuLink {
    border-left: 3px solid transparent;
}

.top-menu-expanded .menuLink:hover {
    border-left: 3px solid #631d76;
}

.top-menu-expanded a,
.top-menu-expanded button {
    display: block;
    color: var(--bcot-opp-text);
    /*border-bottom: 5px solid transparent;*/
}

.top-menu-expanded a:hover,
.top-menu-expanded button:hover {
    color: var(--bcot-opp-text-hover);
}

.top-menu-expanded a:hover .arrow,
.top-menu-expanded button:hover .arrow {
    /*border-bottom: 5px solid #631d76;*/
    visibility: visible;
    transition: visibility 200ms linear, opacity 150ms linear;
    opacity: 1;
}

.top-menu-expanded .arrow {
    visibility: hidden;
    opacity: 0;
}

.subLink .favButton {
    visibility: hidden;
    opacity: 0;
}

.subLink:hover .favButton {
    visibility: visible;
    transition: visibility 200ms linear, opacity 150ms linear;
    opacity: 1;
}

.searchResults {
    position: absolute;
    top: 50px;
    right: 0px;
    max-width: 700px;
    z-index: 1060;
    background-color: var(--bcot-opp-background);
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    color: var(--bcot-opp-text);
    -webkit-box-shadow: var(--bcot-box-shadow);
    box-shadow: var(--bcot-box-shadow);
}

.searchResults.visible {
    visibility: visible;
    transition: visibility 200ms linear, opacity 150ms linear;
    opacity: 1;
}

.linkResults a:hover .arrow {
    visibility: visible;
    transition: visibility 200ms linear, opacity 150ms linear;
    opacity: 1;
}

.linkResults .arrow {
    visibility: hidden;
    opacity: 0;
}

.staffResults, .linkResults {
    height: 300px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.staffResults .circular--portrait {
    width: 70px;
    height: 70px;
}

.staffResultsList {
    width: 98%;
}

.staffResultsItem {
    margin-bottom: 10px;
    width: 97%;
}

@media screen and (max-width: 768px) {
    #navigation {
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: gray;
        z-index: 2001;
        height: 100vh;
        overflow-y: scroll;
    }

    .top-menu button {
        cursor: default;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .top-menu-expanded {
        height: 0px;
        left: -10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .top-menu-expanded a {
        padding: 10px !important;
    }

    .top-menu:hover .top-menu-expanded {
        position: inherit;
        height: auto;
    }

    .top-menu-expanded-right {
        left: 0px;
    }

    .top-menu-expanded-stay {
        position: absolute !important;
    }

    .top-menu-expanded-stay.top-menu-expanded-right {
        right: 0px;
        left: auto;
    }

    .tme-col1,
    .tme-col2,
    .tme-col3 {
        /*width: auto;*/
    }

    .searchResults {
        position: fixed;
    }

    .subLink .favButton {
    visibility: visible;
    opacity: 1;
    }
}

.hideCalendarTime .fc-time {
    display: none !important;
}