/*$tabs-underline-color: $primary-color-light !default;*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Footer
# General
# Header
# -->Header - h1,h2,h3,h4,h5
# Organization Page
# Welcome Page
# Custom Card
# Progress
# Custom Grid
# Forms - form builder
# User Page
# Bulk Upload
# Detail List (DL) Inline Editor
# Language Selector
# Floating Button
# Search Texbox 
# Power, Play Pause Box
# Tabs Folder Look (aka Tab2)
# Tooltip
# Modal Detail Panel (the popups after clicking an item from the main grid)
# contact page specific
# organization page specific
# Tenant Status Bar
# SMSButtons
# progress tracker
--------------------------------------------------------------*/
/*--------------------------------------------------------------


# Footer
----------------------------------------------------------------*/
.pink {
    background-color: #ae1146!important;
}
.pink-text {
    color: #ae1146!important;
}
.secondary-content {
    color: #A36A11;
}
/*--------------------------------------------------------------


# Footer
----------------------------------------------------------------*/
.language-selector-txt-color {
    color: #00b2e3;
    font-size: 1.1rem;
}

.labelwhite{
    color:#fff!important;
}
/*------------------------------------------------------------
# AODA Color
-------------------------------------------------------------*/
.dark-deep-orange-text {
    color: #df3600 !important;
}

.dark-deep-orange {
    background-color: #df3600 !important;
}

.dark-gold-text {
    color: #967100 !important;
}

.dark-gold {
    background-color: #967100 !important;
}

.dark-red-text {
    color: #d32f2f !important;
}

.dark-red {
    background-color: #d32f2f !important;
}

.dark-purple-text {
    color: #8e24aa !important;
}

.dark-purple {
    background-color: #8e24aa !important;
}

.grass-green-text {
    color: #358538 !important;
}

.grass-green {
    background-color: #358538 !important;
}

.dark-cyan-text {
    color: #00838f !important;
}

.dark-cyan {
    background-color: #00838f !important;
}

.dark-grey-text {
    color: #767676 !important;
}

.dark-grey {
    background-color: #767676 !important;
}

/*--------------------------------------------------------------
# General
----------------------------------------------------------------*/
*[tabindex]:focus, a:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: #fff;
    font-size: .875rem;
}

    body label {
        color: #042D42;
    }

.darktext {
    color: #042D42;
}

.loginbodybackground {
    background-color: #042D42;
}

.logintext {
    color: #fff;
    font-size: 150%;
}

.logintextbox {
    color: #fff;
}

.menutab {
    font-size: 12pt;
}

    .menutab a {
        padding: 0px 5px !important;
    }

main {
    flex: 1 0 auto;
}

a.dark-bg-link {
    color: #d0edff;
}

dl {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    min-width: 500px;
}

    dl.bordered {
        border: solid 1px;
        border-radius: 10px;
        padding: 10px 10px;
    }

dt {
    display: inline-block;
    vertical-align: top;
    flex-basis: 30%;
    padding: 2px 4px;
    text-align: right;
    font-weight: bold;
    background-color: #042D42;
    color: whitesmoke;
    border-bottom: solid white;
    overflow-wrap: break-word;
    /*word-break: break-all;*/
}

dd {
    display: inline-block;
    vertical-align: top;
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0;
    padding: 2px 4px;
    overflow-wrap: break-word;
}

dt::after {
    content: ": ";
}

.auto-grid {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.auto-grid2 {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.address-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 450px));
}

.address-grid-radio {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
}

.grid-container50 {
    display: grid;
    grid-template-columns: 50% auto;
}

.grid-container33 {
    display: grid;
    grid-template-columns: 33% auto;
}


.grid-item {
    text-align: left;
}

.bordered {
    border: solid 1px #1751a4;
}

.align-left {
    float: left;
}

span.badge.custom {
    font-weight: 300;
    font-size: inherit;
    color: #fefef8;
    background-color: #197bba;
    border-radius: 2px;
    height: unset;
}

span.badge.custom-new {
    font-weight: 300;
    font-size: inherit;
    color: #fff;
    background-color: #26a69a;
    border-radius: 2px;
}

span.badge.tenant {
    font-size: 0.8rem;
    color: #d68c16;
    height: unset;
    padding: 5px 5px;
}

span.chip.tenant {
    background-color: #042D42;
    color: #fff;
    font-weight: 300;
    font-size: 0.8rem;
}

i.tenant-info {
    color: #042D42;
    cursor: help;
}

.chip.location-contacts {
    font-size: inherit;
    border-radius: 5px;
}

/** Fix for browser autofill */
#login-form input[type]:-webkit-autofill,
#login-form input[type]:-webkit-autofill:hover,
#login-form input[type]:-webkit-autofill:focus,
#login-form input[type]:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
}

input[type]:-webkit-autofill,
input[type]:-webkit-autofill:hover,
input[type]:-webkit-autofill:focus,
input[type]:-webkit-autofill:active {
    transition: background-color 5500s ease-in-out 0s;
    -webkit-box-shadow: inset 0 0 0 500px transparent;
}

    /* Materialize fix labels overlapping */
    input[type]:-webkit-autofill + label {
        -webkit-transform: translateY(-140%);
        transform: translateY(-140%);
    }

/* fix clicking label does not activate text input */
.input-field label {
    pointer-events: all;
}

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

.side-by-side span, .side-by-side div {
    float: left;
    padding-right: 1px;
}

.html-div {
    padding: 8px;
}

.clear-both {
    clear: both;
}

a.keyboard-focused-only {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
    color: #000;
    background-color: #fff;
}

    a.keyboard-focused-only:focus {
        left: auto;
        top: auto;
        width: 30%;
        height: auto;
        overflow: auto;
        margin: 0 35%;
        padding: 5px;
        font-size: 20px;
        outline: 3px solid red;
        text-align: center;
        z-index: 999;
        color:#000;
        background-color: #fff;
    }

.clickable {
    cursor: pointer;
}

/*--------------------------------------------------------------
# Header
----------------------------------------------------------------*/
h1, h2, h3, h4, h5 {
    color: #042D42;
}

h1 {
    font-size: 2rem !important;
}

h2 {
    font-size: 1.5rem !important;
}

h4 {
    font-weight: bold !important;
}

.modal h1, .modal h2, .modal h3, .modal h4 {
    margin-bottom: 10px;
}
/*--------------------------------------------------------------
# Organization Page
----------------------------------------------------------------*/
.org-details li.detail {
    padding: 10px 0px 10px 35px;
    position: relative;
}

.org-details li i {
    position: absolute;
    left: 0;
}

.org-primary-section, .org-secondary-section {
    min-height: 800px !important;
}

.org-primary-section {
    background-color: #e0e0e0;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px #31d2ff !important;
}

.org-secondary-section {
    background-color: #fff;
}

    .org-secondary-section .tabs {
        background-color: #fff;
    }

.org-info-card, .org-info-card-header {
    /*width: 80%;*/
}

.org-info-card-header {
    text-align: center;
    background-color: #e0e0e0;
    margin-top: 20px;
}

.org-about-section {
    padding: 20px;
}

.row.section-header {
    margin-bottom: 0px;
}

.org-about-section .section-details {
    padding: 0px 50px;
}

.org-about-section .section-topbutton {
    padding: 10px 60px;
}

.org-about-section .section-details .title {
    padding: 10px 0px;
    font-weight: bold;
}

.org-about-section .section-details .info {
    padding: 10px 0px;
}

.org-about-section.org-notes .section-details ul > li {
    list-style-type: circle;
    padding-bottom: 20px;
}

.btn-floating.halfway-fab-card {
    position: absolute;
    right: 24px;
    bottom: 30px;
}

/*--------------------------------------------------------------
# Welcome Page
----------------------------------------------------------------*/
.search-option {
    padding-right: 20px;
}

.results-panel {
    max-height: 300px;
    overflow-y: auto;
}

.results-panel-s2 {
    max-height: 500px;
    overflow-y: auto;
}

/*--------------------------------------------------------------
# Custom Card
----------------------------------------------------------------*/
.nopadding-custom-card-item {
    padding: 0px !important;
}

.custom-card .card-header {
    z-index: 3 !important;
}

.custom-card .card-header {
    border-bottom: none;
    background: transparent;
}

.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
}

    .card-header h2 {
        line-height: 110%;
        /*margin: 1.09333rem 0 0.656rem 0;*/
        margin: 0.5rem 0 0.656rem 0;
        font-size: 22px !important;
    }

.custom-card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
    padding: 10px;
}

.custom-card .card-header-primary .card-icon, .custom-card .card-header-primary:not(.card-header-icon):not(.card-header-text), .custom-card .card-header-primary .card-text {
    /*box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px $secondary-color;*/
}

.custom-card .card-header-primary .card-icon, .custom-card .card-header-primary .card-text, .custom-card .card-header-primary:not(.card-header-icon):not(.card-header-text), .card.bg-primary, .card.card-rotate.bg-primary .front, .card.card-rotate.bg-primary .back {
    /*background: linear-gradient(60deg, #cba52e, #d68c16);*/
    background: #A36A11;
}

.card-darktext {
    color: #042D42 !important;
}

.custom-card-header {
    background: none !important;
    background-color: #fff !important;
    padding: 15px !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px #31d2ff !important;
}

.custom-card [class*="card-header-"] {
    /*margin: 0px 15px 0;*/
    padding: 0;
    position: relative;
}

.custom-card [class*="card-header-"], .custom-card[class*="bg-"] {
    color: #fff;
}

.custom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    min-height: 250px;
    padding-bottom: 10px;
    word-wrap: break-word;
    background-color: #fff;
    background: #fff;
    background-clip: border-box;
    border: 1px solid #eeeeee;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

    .custom-card .card-header .card-title {
        margin-bottom: 3px;
    }

    .custom-card [class*="card-header-"] .card-title a, .custom-card [class*="card-header-"] .card-title, .custom-card [class*="card-header-"] .icon i, .custom-card[class*="bg-"] .card-title a, .custom-card[class*="bg-"] .card-title, .card[class*="bg-"] .icon i {
        color: #fff;
    }

    .custom-card .card-title, .card .custom-card .card-title {
        /*margin-top: 0;*/
        margin-bottom: 3px;
        font-size: inherit;
    }

    .custom-card .card-title {
        margin-top: 0.625rem;
    }

.title, .title a, .card-title, .card-title a, .card-subtitle, .card-subtitle a, .info-title, .info-title a, .footer-brand, .footer-brand a, .footer-big h5, .footer-big h5 a, .footer-big h4, .footer-big h4 a, .media .media-heading, .media .media-heading a {
    color: #007a7a;
    text-decoration: none;
    font-weight: bold;
}

.card-title {
    margin-bottom: 0.2rem;
}

h1.card-title {
    font-weight: bold !important;
    margin-top: 0rem;
}

h4.card-title {
    margin-top: 0px !important;
    font-size: 1.7rem !important;
    line-height: 110% !important;
    margin: 1.52rem 0 0 0;
}

h5.card-subtitle {
    margin-left: 15px !important;
    font-size: 1.2rem !important;
    line-height: 100% !important;
    margin: 0px 0 10px 0;
}

h2.card-subtitle, h6.card-subtitle {
    margin-left: 15px !important;
    font-size: 0.8rem !important;
    line-height: 100% !important;
    margin: 0px 0 5px 0;
}

.custom-card [class*="card-header-"] .card-title + .card-category {
    color: rgba(255, 255, 255, 0.8);
}

.custom-card .card-header .card-category {
    margin: 0;
}

.custom-card [class*="card-header-"] .author a, .custom-card [class*="card-header-"] .stats, .custom-card [class*="card-header-"] .card-category, .custom-card [class*="card-header-"] .card-description, .custom-card[class*="bg-"] .author a, .custom-card[class*="bg-"] .stats, .custom-card[class*="bg-"] .card-category, .custom-card[class*="bg-"] .card-description {
    color: rgba(255, 255, 255, 0.8);
}

.custom-card .card-category:not([class*="text-"]) {
    color: #999999;
}

.custom-card .card-category {
    margin-top: 10px;
}

.custom-card .card-content-primary th {
    color: #d68c16;
}

.custom-card [class*="card-header-"] .card-icon, .custom-card [class*="card-header-"] .card-text {
    background-color: #555555;
    padding: 2px;
    margin-top: -10px;
    margin-right: 15px;
    float: left;
    border-radius: 50px;
    /*border-color: #042D42;
    border-style: solid;
    border-width: 2px;  */
}

.custom-card .card-header-icon i, .custom-card .card-header-text i {
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 33px;
}

.custom-card .card-header-icon .card-icon .material-icons.circle {
    position: unset;
    background-color: transparent;
}

.custom-card .card-icon .material-icons {
    /*font-size: 34px !important;*/
    color: white !important;
}

.custom-card.card-header-icon .card-title, .custom-card.card-header-text .card-title {
    margin-top: 15px;
    color: #000000;
}

.custom-card.card-header-icon h4, .custom-card.card-header-text h4 {
    font-weight: 300;
}

.custom-card .custom-card-content {
    padding: 0 25px;
}

.custom-card .card-header .card-button-top {
    margin-top: 10px;
    margin-right: 10px;
}

.address-card {
    border-radius: 5px;
    width: 450px;
}

    /*
.address-card .card-title, .session-card .card-title {
    margin-top: 8px;
    font-weight: 300;
    font-size: 1.2rem;
    color: #fff;
    background-color: #00b2e3;
    border-radius: 5px 5px 0 0;
    padding: 5px 0 5px 15px;
    min-height: 2rem;
}*/
    .address-card .card-title, .session-card .card-title, .participant-card .card-title {
        margin-top: 0;
        margin-bottom: 3px;
        font-weight: 300;
        font-size: inherit;
        color: #fefef8;
        background-color: #042d42;
        border-radius: 5px 5px 0 0;
        padding: 5px 0 5px 15px;
        min-height: 2rem;
        display: block;
        line-height: 32px;
    }

        /*
.participant-card .card-title {
    border-bottom: none;
    margin-top: -10px;
    margin-left: 0px !important;
    background-color: #eee;
    color: #042D42;
    text-align: center;
    font-weight: 400;
    border-bottom: none;
}*/
        .address-card .card-title input, .address-card .card-title select.browser-default, .session-card .card-title input {
            width: unset;
        }

    .address-card .card-content {
        min-height: 170px;        
    }

        .address-card .card-content input {
            background: white;
        }

    .address-card .card-action a i {
        /*margin-bottom: 5px;*/
    }

    .address-card .card-reveal {
        padding: 0px;
    }

.address-block-right {
    margin-left: 35px;
}

.session-card .card-content {
    height: 450px;
    overflow-wrap: break-word;
}

    .session-card .card-content p {
        line-height: 2;
    }

.card-content p label:not(.radio-label)::after {
    content: ": ";
}

.card-content p label {
    color: inherit !important;
    font-weight: 700;
}

.address-card .card-content .browser-default, .session-card .card-content .browser-default {
    width: unset;
}

.address-card .card-action .activator {
    color: #ffab40;
    transition: color .3s ease;
    cursor: pointer;
}

.list-card {
    border: solid 1px;
    border-color: #ddd;
    border-radius: 5px 5px 10px 10px;
    background: #fff;
    width: 100%;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

    .list-card .card-title {
        border-bottom: solid 1px #d68c16;
        margin-bottom: 10px;
        border-radius: 5px 5px 0 0;
        margin-top: -10px;
        margin-left: 0px;
        background-color: #eee;
        font-size: inherit;
        color: #042D42;
        text-align: center;
        font-weight: 400;
    }

    .list-card .card-content {
        padding: 24px 5px;
    }

        .list-card .card-content.smsCompact {
            padding: 0px 5px;
        }

.btn-floating.btn-small.upper-right-fab {
    top: 5px;
    right: 5px;
    position: absolute;
}

.btn-floating.btn-tiny {
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    margin-right: 2px;
}

.btn-tiny {
    line-height: 20px;
    height: 23px;
}

    .btn-tiny i {
        font-size: .8rem;
        margin-top: -4px;
    }

.btn-floating.btn-tiny i {
    font-size: .8rem;
}

.btn:focus{
    text-decoration:underline;
    
}

/*--------------------------------------------------------------
# Chips & Tags
----------------------------------------------------------------*/
.chip .close-inert {
    cursor: pointer;
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
}

.tag-option {
    margin: 3px 3px 3px 3px;
    font-size: .7rem;
    font-weight: 300;
}

    .tag-option:before {
        content: '#';
    }

.btn.chip.tag-option:focus {
    outline: none;
    /*background-color: #042D42;*/
    color: inherit;
    text-decoration: underline;
}

.btn.chip.tag-option.selected {
    outline: none;
    background-color: #042D42;
    color: #fff;
}

    .btn.chip.tag-option.selected.not-owned {
        background-color: #042D42;
    }

.btn.chip.tag-option i {
    float: right;
    font-size: 16px;
    line-height: 32px;
    padding-left: 8px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.tag-option.GroupTag:before {
    content: '';
}

.btn.chip.tag-option.GroupTag.selected {
    outline: none;
    background-color: #197bba;
    color: #fff;
}

    .btn.chip.tag-option.GroupTag.selected.not-owned {
        background-color: #197bba;
    }

.chip:focus {
    text-decoration: underline;
}

.taglist-container {
    border: thin;
    border-style: solid;
    padding: 4px 8px;
    border-color: #000;
    background-color: #fafafa;
    border-radius: 10px 10px 10px 10px;
}

    .taglist-container.min-height {
        min-height: 175px;
    }

.participant-card {
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 0 0 20px 0;
    background-color: rgba(4, 45, 66, 0.9);
}

    .participant-card .card-header-primary h2 {
        text-align: center;
    }

    .participant-card h2 {
        color: #fff;
    }

.chip.participant {
    background-color: transparent;
    /*border-color: #333333;
    border-bottom: solid;*/
    border-radius: 0;
    font-size: inherit;
    margin: 10px 5px;
    box-shadow: none;
    display: inline-block;
    height: unset;
}

    .chip.participant:hover {
        box-shadow: none;
        border-color: #333333;
        border-bottom: solid;
    }

.participant .avatar {
    padding: 2px;
    margin-left: -13px;
    margin-top: 0px;
    vertical-align: middle;
    color: white;
    border-radius: 3px;
    font-size: .9rem;
    line-height: 1;
}

.chip.btn.participant:focus {
    /*text-decoration: underline;*/
    color: #333333;
}

.chip.participant span {
    padding-left: 8px;
    font-weight: bold;
    color: #042D42;
}

/*--------------------------------------------------------------
# Progress
----------------------------------------------------------------*/
.progress {
    margin: 0;
}

/*--------------------------------------------------------------
# Custom Grid
----------------------------------------------------------------*/
.grid-legend {
    border: solid 1px #ccc;
    padding: 10px 20px 0px 20px;
    border-radius: 7px;
    margin-bottom: 10px;
    font-size: small;
    float: right;
}

.emailmanagericonbox {
    background-color: #fff !important;
}

.emailmanagericon {
    color: #a96600;
    cursor: pointer;
}

.emailmanagericonboxCreate {
    background-color: white !important;
}

.emailmanagericonCreate {
    color: #042D42 !important;
    cursor: pointer;
}

.grid-checkbox-div {
    display: inline-block;
    vertical-align: top;
    width: 60px;
}

.customGridWrapper {
    border: 1px #1751A4 solid;
}

.customGridHeaderCard {
    padding: 0px 0 0 0 !important;
}

.customGridRow {
    padding: 7px 0;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

    .customGridRow.disabled {
        background-color: #ccc;
    }

.customGridRowHeader {
    background-color: #eee !important;
    /*padding: 1.2rem 0;*/
    margin-bottom: 5px;
    border-bottom: solid 1px #d68c16;
    border-radius: 7px 7px 0 0;
    padding: 5px;
    font-weight: bold;
    /*font-size: 125%;*/
}

.customGridRowHeaderItem {
    /*font-size: 16px;*/
    padding: 20px 0px;
    color: #042D42;
}

    .customGridRowHeaderItem.sortColumn {
        cursor: pointer;
        text-decoration: underline;
    }

        .customGridRowHeaderItem.sortColumn:hover {
            color: #197bba;
        }

.customGridRow:not(.active):hover {
    background-color: #ddd;
    transition: .25s;
}

.customGridRowFooter {
    /*background: linear-gradient(60deg, #cba52e, #d68c16);*/
    background-color: #eee;
    margin: 0px 5px 5px 5px !important;
    /*color: white;*/
    color: #042D42;
    border-radius: 0 0 10px 10px;
}

.smsCompact.customGridRowFooter {
    /*background: linear-gradient(60deg, #cba52e, #d68c16);*/
    margin: -25px 25px 25px 25px !important;
    /*color: white;
    border-radius: 0 0 10px 10px;*/
}

.customGridRowFooter p {
    font-size: 1.2rem;
    vertical-align: central;
}

.customGridRowFooter ul {
    margin-top: 5px;
    margin-bottom: 5px;
}

.customGridRow .activator {
    font-weight: bolder;
    cursor: pointer;
}

.customGridRow .pagination li a, .pagination li a {
    font-size: 1rem !important;
}

.customGridRow .pagination li i, .pagination li i {
    font-size: 1.2rem !important;
}

.empty-grid {
    min-height: 150px;
    width: 100%;
    text-align: center;
    vertical-align: center;
    color: #666;
    padding-top: 60px;
}

.list-container {
    min-height: 150px;
}

.custom-carousel {
    height: 400px !important;
}

.custom-carousel-item {
    width: 500px !important;
    height: 430px !important;
    padding: 0px;
}

.carousel .indicators {
    bottom: auto;
}

    .carousel .indicators .indicator-item {
        margin: 0 5px;
    }

.note {
    margin: 10px 0;
    padding-left: .5rem;
    border-left: 5px solid #197bba;
    /*border-right: 2px solid #d68c16;
    border-top: 2px solid #d68c16;
    border-bottom: 2px solid #d68c16;*/
    border-radius: 0 10px 10px 0;
    background-color: #fafafa;
}

    .note.read-only {
        border-left: 5px solid #eff0f1;
    }

    .note .note-title {
        margin-top: 3px;
        font-weight: 200;
        font-size: 0.7rem;
        color: #fefef8;
        background-color: #197bba;
        border-radius: 2px;
        padding: 0px 5px;
    }

        .note .note-title.read-only {
            color: #000000;
            background-color: #eff0f1;
        }

    .note .note-action {
        background-color: inherit;
        border-top: 1px solid rgba(160, 160, 160, 0.2);
        position: relative;
    }

        .note .note-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
            font-size: .6rem;
            color: #ffab40;
            margin-right: 20px;
            -webkit-transition: color .3s ease;
            transition: color .3s ease;
            text-transform: uppercase;
        }

.notelist-container {
    border: thin;
    border-style: solid;
    padding: 4px 8px;
    border-color: #eeeeee;
    min-height: 175px;
    max-height: 300px;
    background-color: #fafafa;
    border-radius: 10px 10px 10px 10px;
    overflow-y: scroll;
    margin-bottom: 5px;
}

.legend-container {
    font-size: .75rem;
    line-height: 1rem;
    border: double #ccc;
    padding: 10px !important;
}

    .legend-container i {
        margin-left: 6px;
        margin-right: 3px;
    }

    .legend-container a.btn-flat {
        border: solid 1px #ddd;
        text-transform: unset;
    }

        .legend-container a.btn-flat.active {
            background-color: #d0edff;
            color: #000;
            border-color: #343434;
        }

        .legend-container a.btn-flat i {
            margin-left: 0px;
        }

.collection.with-header .collection-header {
    border: solid 1px;
    padding: 0 20px;
    border-color: black;
}

.session-title {
    height: 3rem;
    line-height: 1rem;
    border-radius: 5px;
    padding: 0px 10px;
    border-color: #042D42;
    border-style: solid;
}

    .session-title i {
        height: inherit;
        line-height: inherit;
    }

/*--------------------------------
# Forms
--------------------------------*/
.css_empty_value {
    color: #767676;
}

.col_low_importance {
    border: solid 1px #ccc;
    border-radius: 7px;
    padding: 10px !important;
    display: inline-block;
    vertical-align: top;
}

.label_abbrev {
    color: #fff;
    background-color: #042D42;
    padding: 3px;
    min-width: 20px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
}

.label_abbrev_right {
    float: right;
    margin-left: 20px;
}

.label_abbrev_input {
    margin-left: 20px;
    padding-left: 10px;
}

input.browser-default:focus, textarea.browser-default:focus, select.browser-default:focus {
    box-shadow: 0 0 5px #51cbee;
    border: 1px solid #51cbee;
}

ul.select-dropdown {
    overflow-y: auto !important;
}

.smsLiner ul {
    text-align: center;
}

.smsLiner li {
    display: inline-block;
    padding: 0 10px;
    color: white;
}

[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked),
[type="checkbox"].browser-default,
[type="checkbox"].browser-default:checked,
[type="checkbox"].browser-default:not(checked) {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

    [type="checkbox"].reset-checkbox + span::before,
    [type="checkbox"].reset-checkbox + span::after,
    [type="checkbox"].reset-checkbox:checked + span::before,
    [type="checkbox"].reset-checkbox:checked + span::after,
    [type="checkbox"].browser-default + span::before,
    [type="checkbox"].browser-default + span::after,
    [type="checkbox"].browser-default:checked + span::before,
    [type="checkbox"].browser-default:checked + span::after {
        display: none;
    }

    [type="checkbox"].reset-checkbox + span:not(.lever),
    [type="checkbox"].browser-default + span:not(.lever) {
        padding-left: 10px;
    }

.input-field.space-saver {
    margin-top: 0px;
    margin-bottom: 0px;
}

.browser-window {
    text-align: left;
    height: auto;
    display: inline-block;
    border-radius: 10px 10px 10px 10px;
    background-color: #fafafa;
    margin: 2px 2px;
    padding: 2px 15px;
    overflow: hidden;
}

.white-button {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    min-width: 120px;
}

    .white-button:focus, .white-button:hover {
        text-decoration: underline;
        box-shadow: 0 0 5px #51cbee;
        border: 1px solid #51cbee;
    }

.btn-floating.x-button {
    background-color: #e90000 !important;
}

    .btn-floating.x-button:hover, .btn-floating.x-button:focus {
        background-color: #F44336 !important;
    }

.form-footer {
    padding-bottom: 20px;
}

label.control-label::after {
    content: ":";
}

.edit-form {
    /*padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;*/
}

    .edit-form li:not(.tab) a, a.label-link {
        color: #042D42;
        text-decoration: underline;
    }

.textarea-container {
    /*border: thick;*/
    /*border-style: double;*/
    border: solid 1px #ccc;
    padding: 4px 8px;
    /*border-color: #d68c16;*/
    min-height: 60px;
    /*background-color: #fafafa;*/
    border-radius: 10px 10px 10px 10px;
}

    .textarea-container.fixed-height {
        overflow-x: auto;
        overflow-y: auto;
        height: 250px;
    }

.textarea-container.goldbordered {
    border-style: solid;
    border-color: #e89a1e;
}

label.control-label {
    font-weight: bold;
}

label.value-label, .custom-card label.value-label {
    font-size: inherit;
    color: #333333;
}

.custom-card-content label {
    font-size: inherit;
    color: #042D42;
}

.main-field {
    font-size: 1rem;
    min-height: 1.8rem;
    font-weight: bold;
}

.sidenav .custom-card-content span.badge, .sidenav .card-content span.badge {
    margin-top: unset;
    font-size: .7rem;
}

.sidenav .sidenav {
    height: 100% !important;
    width: 100% !important;
}

.sidenav li {
    line-height: unset !important;
}

.field-group {
    padding: 5px 0 5px 0;
}

    .field-group label {
        word-break: break-word;
        padding-bottom: 10px;
        display: inline-block;
    }

.inline-field-group {
    padding: 5px 0 5px 0;
    word-break: break-word;
}

    .inline-field-group label {
        float: left;
        padding-right: 5px;
    }

    .inline-field-group span, .inline-field-group div {
        display: table-cell;
    }

.tabs.control-label {
    font-size: inherit;
}

.dropdown-trigger.btn-small {
    padding: 0px;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 200px;
}

.footprint {
    font-size: .7rem;
}

.errorMessageDock {
    color: red;
    padding: 4px 8px;
    background-color: #fafafa;
    border-radius: 10px 10px 10px 10px;
}

/*--------------------------------------------------------------
# SMSCOMPACT
----------------------------------------------------------------*/
.smsCompact .row {
    margin-bottom: unset;
    margin-left: unset;
    margin-right: unset;
}

    .smsCompact .row .custom-card {
        margin-bottom: 10px;
        margin-top: 10px;
    }

.smsCompact .col .row {
    margin-left: -0.35rem;
    margin-right: -0.35rem;
}

.smsCompact .card-content {
    padding: 5px 10px 10px 10px;
}

.smsCompact .input-field {
    margin-bottom: unset !important;
    margin-top: .5rem !important;
}

    .smsCompact .input-field > label {
        font-size: inherit !important;
    }

        .smsCompact .input-field > label:not(.label-icon).active {
            transform: translateY(-9px) scale(0.8);
            transform-origin: 0 0;
        }

    .smsCompact .input-field input:not(.browser-default) {
        height: 2rem !important;
    }

    .smsCompact .input-field textarea.materialize-textarea, .smsCompact textarea.materialize-textarea {
        /*height: 2rem;
    margin: unset;
    padding: .8rem 0 0 0;
        min-height: 1rem;
    height: 2rem;
            ;*/
        font-size: inherit;
    }

.smsCompact input:not(.browser-default) {
    height: 1rem !important;
    margin: unset;
    font-size: inherit;
}

.smsCompact .control-container .select-wrapper ul.dropdown-content.select-dropdown, ul.dropdown-content.select-dropdown {
    width: max-content !important;
}

.smsCompact .control-container .select-wrapper .caret {
    /*display: none;*/
}

.smsCompact .control-container input:not(.browser-default) {
    /*width: unset;*/
}

.smsCompact .input-field .prefix ~ input, .smsCompact .input-field .prefix ~ textarea, .smsCompact .input-field .prefix ~ label, .smsCompact .input-field .prefix ~ .validate ~ label, .smsCompact .input-field .prefix ~ .helper-text, .smsCompact .input-field .prefix ~ .autocomplete-content {
    margin-left: 3rem;
}

.smsCompact [type="checkbox"] + span:not(.lever) {
    font-size: inherit;
}

.smsCompact .dropdown-content li {
    min-height: unset !important;
}

    .smsCompact .dropdown-content li > a, .dropdown-content li > span {
        padding: 7px 8px !important;
        line-height: 18px !important;
        font-size: inherit;
    }

.smsCompact .file-field .btn {
    line-height: 36px;
    height: 36px;
}

.smsCompact h4 {
    font-size: 1.28rem !important;
}

.smsCompact .tabs .tab a {
    font-size: 100% !important;
}

.smsCompact .modal-content .dropdown-content.select-dropdown {
    /*max-height: 250px;*/
}

form.smsCompact.edit-form .row .col {
    /*padding-right:0px;*/
    padding-left: unset;
}

.sidenav .smsCompact li {
    line-height: unset;
}

    .sidenav .smsCompact li > a {
        margin-top: -10px;
        padding-left: 5px;
        padding-right: 5px;
        /*color: #042D42;
    display: unset;
    font-size: unset;
    font-weight: unset;    
    line-height: 30px;  */
    }

    .sidenav .smsCompact li.tab > a {
        margin-top: -0.2px;
    }

.smsCompact.collapsible-header {
    padding: .2rem 1rem .2rem 1rem;
    background-color: #d0edff;
}

    .smsCompact.collapsible-header i {
        font-size: unset;
        padding-right: 5px;
        text-align: left;
        margin-right: unset;
        width: unset;
    }

.smsCompact.collapsible-body {
    padding: .2rem;
}

.smsCompact span.badge.tenant {
    margin-top: unset;
}

.smsCompact.card.custom-card {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.hide {
    display: none;
}

.smsCompact .collection .collection-item {
    padding: 5px 5px !important;
}

/*--------------------------------------------------------------
# User Page
----------------------------------------------------------------*/
.user-info-card, .user-info-card-header {
    width: 80%;
}

/*--------------------------------------------------------------
# Bulk Upload
----------------------------------------------------------------*/
.headercontainer .headeritem {
    border: solid 1px silver;
    display: block;
    padding: 2px;
    background-color: lightskyblue;
    text-align: center;
    font-weight: bold;
    cursor: move;
}

.headercontainer .headeritemignore {
    border: solid 1px silver;
    display: block;
    padding: 2px;
    background-color: silver;
    text-align: center;
    font-weight: bold;
    cursor: move;
}

.uploadListTable {
    border: solid 1px silver;
    margin: auto;
}

.pastedContentCell {
    border: solid 1px silver;
    cursor: default;
}

    .pastedContentCell:hover {
        border: solid 2px blue;
        cursor: pointer;
    }

.column, .columns {
    position: relative;
    padding-left: 2.9375rem;
    padding-right: 2.9375rem;
    float: left;
}

/*--------------------------------------------------------------
# Detail List (DL) Inline Editor
    These classes are used in the javascript critical for the inline editor forms such as
    _GenericFieldEditor, _EmailList, _AddressList, _TelephoneList
----------------------------------------------------------------*/
/*
* Sample fo the Detail List
*
* <dl>
* <dt></dt>
* <dd>
*  <div class="Display-Container Editable-Field">
*      <span class="DisplayValue">http://www.ontario.ca</span>
*      <a href="http://www.ontario.ca">link</a>
*  </div>
*  <div class="Control-Container">
*      <input class="Control-Input" type="url"></input>
*  </div>
* <dd>
* </dl>
*
* */
/*
* Sample fo the Original-value
*
*   <form>
        <input type="hidden" class="original-value">
    </form>
*
* */
/*
* Sample fo the component-container
*   for generic forms
*   <form class="component-container">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </form>
*
    For List Forms

    <ul class="component-container">
        <li>
            <form></form>
        </li>
    </ul>

* */
.display-container {
    word-break: break-word;
}

.highlight {
    border: dashed;
    border-color: darkcyan;
}

form.highlight span.editable-field {
    border: solid;
    border-color: darkcyan;
}

.editable-field:hover {
    border: solid;
    border-color: darkcyan;
    min-width: 1rem;
    padding: 1px;
    border-width: 1px;
}

.non-editable-field:hover {
    cursor: not-allowed;
}

.btn-set-as-primary:hover {
    color: darkcyan;
}

    .btn-set-as-primary:hover i span {
        display: none;
    }

    .btn-set-as-primary:hover i:before {
        content: "check_box";
    }

.is-primary-item:hover {
    cursor: help;
}

.btn-delete-item, .btn-delete-chip {
    color: darkred !important;
}

    .btn-delete-item:hover, .btn-delete-chip:hover {
        color: red !important;
    }

        :not(.inert).btn-delete-item:hover i:before, .btn-delete-chip:hover i:before {
            content: "delete_forever";
        }

        .btn-delete-item:hover i span, .btn-delete-item:hover i span, .btn-delete-chip:hover i span {
            display: none;
        }


.btn-complete-item, .btn-complete-chip {
    color: lightslategrey !important;
}

    .btn-complete-item:hover, .btn-complete-chip:hover {
        color: green !important;
    }

        :not(.inert).btn-complete-item:hover i:before, .btn-complete-chip:hover i:before {
            content: "done_all";
        }

        .btn-complete-item:hover i span, .btn-complete-item:hover i span, .btn-complete-chip:hover i span {
            display: none;
        }

.sms-link {
    padding: unset !important;
    display: none;
}

    .sms-link:hover {
        cursor: alias;
    }

/*--------------------------------------------------------------
# Language Selector
----------------------------------------------------------------*/
.language-selector {
    background-color: transparent;
    border: none;
    color: #d0edff;
}

.landingPage-language-selector {
    float: right;
}

.searchHeader {
    color: #042D42;
    text-align: center;
    margin: 7px 0 3px 0;
}

.searchHeaderText {
    color: #042D42;
    text-align: center;
    padding: 3px;
    border-radius: 10px;
    background-color: aliceblue;
}

.floatingactionButton {
    background-color: #197bba;
    color: #fefef8;
}

.standoutcolor {
    background-color: #197bba;
    color: #fefef8;
}

.standoutdarkcolor {
    background-color: #042D42;
}

.standoutcolortext {
    color: #197bba !important;
}

.standoutdarkcolortext {
    color: #042D42 !important;
}

/*--------------------------------------------------------------
# Materialize CSS Overrides
----------------------------------------------------------------*/

strong {
    font-weight: bolder !important;
}

ul.collection {
    overflow: visible;
}

.collection li.collection-item:not(.active):hover {
    background-color: #ddd;
    transition: .25s;
}

.collection li.collection-item .collection-fab {
    margin-top: -6px;
    border-left: 1px solid #e0e0e0;
    padding-left: 10px;
}

.collection .collection-item.avatar:not(.circle-clipper) > .circle {
    margin-top: 8px;
}

.collapsible .custom-card-content .collection, .sidenav .collapsible.collection {
    margin: 0.5rem 0 1rem 0;
    border: 1px solid #e0e0e0;
}

    .collapsible .custom-card-content .collection li {
        padding: 10px 20px;
    }

.collapsible.collection .collection-item.active {
    /*background-color: #ffa726;*/
    color: inherit;
}

.collapsible.collapsible-container {
    border: thick;
    border-style: double;
    padding: 4px 8px;
    border-color: #d68c16;
    background-color: #fafafa;
    border-radius: 10px 10px 10px 10px;
}

    .collapsible.collapsible-container .collapsible-header {
        border: solid 1px;
        border-color: white;
        background: #042D42;
        color: white;
        border-radius: 10px 10px 10px 10px;
    }

.keyboard-focused .collection-item .collapsible-header:focus {
    background-color: #fff;
    border: 1px solid #ffa726;
}

.collection-item .collapsible-header {
    display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    background-color: #fff;
    border-bottom: none;
    min-height: 65px;
    padding: 10px;
}

.collection-item .collapsible-body {
    display: none;
    box-sizing: border-box;
    padding: 0rem 0rem 0rem 0rem;
    border-bottom: none;
    border-left: 1px solid #e0e0e0;
}

.collection .collection-item.active.avatar i.circle {
    font-size: 18px;
    line-height: 42px;
    color: #fff;
    background-color: #1751a4;
    text-align: center;
}

.collection-item .collapsible-header .row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    border-bottom: none;
}

/*
.collection-item .collapsible-body .row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  border-bottom: none; }*/
.collection .collection-item.avatar {
    min-height: 65px;
}

    .collection .collection-item.avatar .content {
        font-size: 14px;
        line-height: 1rem;
    }

    .collection .collection-item.avatar .collapsible-header .title {
        font-size: inherit;
        font-weight: bolder;
    }

.sidenav .collection .collection-item a.secondary-content {
    padding: 0;
}

    .sidenav .collection .collection-item a.secondary-content i {
        float: right;
        color: #d68c16;
    }

.collection-item .item-title, .address-card .item-title {
    font-weight: bolder;
}

.carousel.carousel-slider.customIndicator .indicators {
    background-color: rgba(23, 81, 164, 0.5);
}

.carousel.carousel-slider.customIndicator .carousel-fixed-item.with-indicators {
    bottom: 0px;
    background-color: rgba(23, 81, 164, 0.5);
}

a.content-indicator i.material-icons, a.content-indicator span.material-icons {
    color: white;
}

    a.content-indicator i.material-icons:hover, a.content-indicator span.material-icons:hover {
        color: #ffa726;
    }

.carousel.carousel-slider.custom-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 550px;
    perspective: 500px;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    top: 0;
    left: 0;
}

    .carousel.carousel-slider.custom-carousel .carousel-item {
        width: 100%;
        height: 100%;
        min-height: 400px;
        position: absolute;
        top: 0;
        left: 0;
    }

.carousel-item.small {
    line-height: 1rem;
    padding: 1rem 1rem;
}

.material-icons, .icon-text {
    vertical-align: middle;
}

.dropdown-content {
    overflow: visible !important;
    border: solid 1px;
}

.btn-error {
    background-color: #ED1C24;
}

    .btn-error:hover {
        background-color: #f47b7f;
    }

.btn-success {
    background-color: #09645b!important;
}

    .btn-success:hover {
        background-color: #13d8c4;
    }

.btn-danger {
    background-color: darkred;
}

    .btn-danger:hover {
        background-color: red;
    }

.btn-flat.btn-transparent:hover {
    color: #e89a1e;
    background-color: inherit;
    text-decoration: underline;
}

.carousel-item .modal.bottom-sheet {
    top: auto;
    bottom: -100%;
    margin: 0;
    width: 100%;
    max-height: 85%;
    border-radius: 0;
    will-change: bottom, opacity;
}

select.browser-default {
    padding: 0px;
    height: unset;
    border-width: 1px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
    min-width: 9rem;
}

.modal-large {
    width: 80% !important;
    max-height: 80% !important;
}

.modal-venue-search {
    width: 800px;
    max-height: 80% !important;
}

.modal-small50 {
    width: 50% !important;
}

.modal-small2, .modal-small40 {
    width: 40% !important;
}

.modal-small, .modal-small30 {
    width: 30% !important;
}

.modal-tiny {
    width: 25% !important;
    max-height: 35% !important;
}

.modal.bottom-sheet.modal-full {
    top: auto;
    bottom: -100%;
    margin: 0;
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    will-change: bottom, opacity;
}

.modal.modal-fixed-footer.modal-full {
    padding: 0;
    height: 100%;
}

a.tiny {
    width: 28px;
}

a.medium {
    width: 44px;
}

i.material-icons.smaller, span.material-icons.smaller {
    font-size: 1.5rem !important;
}

i.material-icons.tiny, span.material-icons.tiny {
    font-size: 1rem !important;
}

/*--------------------------------------------------------------
# Search Textbox
----------------------------------------------------------------*/
.searchTextboxWrapper {
    position: relative;
    /*  margin-left: 20px !important;*/
    display: inline-block;
    height: 50px;
    background-repeat: no-repeat;
    background-position: unset;
    background-size: contain;
    padding-left: 10px;
    width: 500px;
}

.searchTextbox {
    border: solid 1px #A06B00 !important;
    width: 280px;
    height: 33px !important;
    text-align: center;
    margin-bottom: 3px;
}
    .searchTextbox::placeholder {
        color: #A06B00;
    }
    /*
    .searchTextbox:focus {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-bottom: solid 2px red !important;
    }
    */
    .searchButton {
        /*position: absolute;*/
        /*right: 20px;*/
        /*top: 10px;*/
        display: inline-block;
        color: #fff;
        width: 120px;
        text-align: center;
        cursor: pointer;
        margin-left: 10px;
        margin-right: 10px;
    }

.searchTextboxMini {
    position: relative;
    height: 1.5rem !important;
    width: calc(90% - 5rem) !important;
    margin-left: 1rem;
    border-style: solid;
    border-color: #e89a1e;
}

.advanceSearchReportWrapper {
    display: inline-block;    
    padding: 2px;
}

    .advanceSearchReportWrapper a {
        color: #197bba;
    }

        .advanceSearchReportWrapper a > i, .advanceSearchReportWrapper a > span.material-icons {
            font-size: 40px;
        }

.advanceSearchWrapper {
    display: inline;
}

.searchAdvacnceDivRow {
    background-color: #fff;
    max-width: 740px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.searchAdvacnce {
    border: solid 1px;
    border-color: #042D42;
    border-radius: 5px;    
}


    .searchAdvacnce .header {
        background-color: #042D42;
        color: #fff;
        font-weight: bold;
        font-size: 0.8rem;
        cursor: pointer;
    }

.searchAdvanceCloseButton i.material-icons{
    margin-top: -7px;
}

.searchArea {
    margin-left: 20px;
    margin-right: 20px;
}

.modal {
    border: solid 2px;
    border-color: #042D42;
    border-radius: 5px;
}

    .modal .modal-content .header {
        border-bottom: solid #042D42;
        color: #042D42;
        font-weight: bold !important;
    }

/*--------------------------------------------------------------
# Power, Play Pause Box
----------------------------------------------------------------*/
.btn-power-off {
    margin: 5px 25px 5px 25px;
    color: white;
    background-color: darkred;
}

    .btn-power-off:hover {
        color: white;
        background-color: green;
    }

.btn-power-on {
    margin: 5px 25px 5px 0px;
    color: white;
    background-color: darkgreen;
}

    .btn-power-on:hover {
        color: white;
        background-color: red;
    }

.btn-play {
    margin: 5px 25px 5px 0px;
    color: white;
    background-color: darkcyan;
}

    .btn-play:hover {
        color: white;
        background-color: dimgrey;
    }

        .btn-play:hover i:before {
            content: "pause_circle_filled";
        }

.btn-pause {
    margin: 5px 25px 5px 0px;
    color: white;
    background-color: dimgrey;
}

    .btn-pause:hover {
        color: white;
        background-color: cyan;
    }

        .btn-pause:hover i:before {
            content: "play_circle_filled";
        }

.player-div {
    background-color: #fff;
    padding: 10px 0 0 0;
    border-radius: .3em;
    line-height: 1.3;
    margin: auto;
    text-align: center;
}

.player-div-status {
    font-weight: bold;
    color: rgba(4, 45, 66, 0.9);
    background-color: #d0edff;
    padding: 5px;
    display: block;
}

.fit-image {
    width: 100%;
    object-fit: cover;
    /*height: 300px;*/
    /* only if you want fixed height */
}

.imghover:hover {
    width: 80%;
    position: absolute;
    margin: auto;
    right: 0;
}

.imghover {
    width: 100%;
    object-fit: cover;
}

/*--------------------------------------------------------------
# Tabs
----------------------------------------------------------------*/
.tab .active {
    font-weight: bold;
}

.tab a.active {
    color: #042D42 !important;
    /*background-color: #fff !important;*/
}

    .tab a.active:hover, .tab a:focus {
        color: #042D42 !important;
        background-color: #31d2ff !important;
        text-decoration:underline;
    }



.tabs.tab-pin .tab, .tabs.tab-pin .tab a.active:hover {
    border-top: solid 1px black;
    border-left: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-radius: .5rem .5rem 0 0;
}

    .tabs.tab-pin .tab.disabled {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: solid 1px black;
    }

.tabs.tab-pin .active {
    border-bottom: none;
}

.tab-folder, .active.tab-folder {
    border-left: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    padding: 10px 20px 20px 20px;
    border-radius: 0 0 .5rem .5rem;
}

/*--------------------------------------------------------------
# Tabs Folder Look (aka Tab2)
----------------------------------------------------------------*/
.tabs2 {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tabs2 li {
        float: left;
        margin: 0 .5em 0 0;
    }

    .tabs2 a {
        position: relative;
        background: #ddd;
        background-image: linear-gradient(to bottom, #fff, #ddd);
        padding: 0.7em 2.8em !important;
        float: left;
        text-decoration: none;
        color: #444;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
        border-radius: 5px 0 0 0;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
        line-height: unset !important;
        font-size: 1em !important;
    }

        .tabs2 a::after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            right: -.5em;
            bottom: 0;
            width: 1em;
            background: #ddd;
            background-image: linear-gradient(to bottom, #fff, #ddd);
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
            transform: skew(10deg);
            border-radius: 0 5px 0 0;
        }

        .tabs2 a:focus {
            outline: 0;
        }

/*--------------------------------------------------------------
# Bread Crumbs
----------------------------------------------------------------*/
nav.breadcrumb {
    height: 2rem;
    line-height: 2rem;
}

.nav-wrapper div.col {
    padding-left: 20px;
}

#nav-mobile li a:focus, #nav-mobile li a:hover, nav ul a:focus {
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    border:#fff solid 1px;
}

nav .brand-logo:focus {
    box-shadow: 0 0 6px rgb(35 173 255);
}

#SwitchAccountDropdown:focus, #SwitchAccountDropdown:hover {
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
}
/*--------------------------------------------------------------
# Notification
----------------------------------------------------------------*/
nav .notification {
    top: 0px;
    bottom: 0px;
    line-height: 1rem;
    float: right;
    background-color: #d0edff;
    border-radius: 0px 0px 0px 25px;
    border-left: 1px solid #d0eaaa;
    border-bottom: 1px solid #d0eaaa;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav .notification i.material-icons, nav .notification span.material-icons {
    line-height: unset;
}

nav .notification .btn-flat {
    color: #042D42;
    text-transform: none;
}

nav .notification .btn-flat:hover {
    color: white;            
    text-transform: none;
}

.collapsible.notification .collapsible-header {
    padding: 6px;
    background-color: #d0edff;
}

.collapsible.notification .collapsible-header i {
    height: 1.5rem;
    width: 1.5rem;
}

.collapsible.notification .collapsible-body {
    padding: 10px 25px;
    min-height: 120px;
}

.notification .tabs {
    border: solid;
    border-color: #042D42;
}

.notification .tabs .tab a {
    font-size: .7rem;
}

.notification .collapsible-header .from {
    margin-left: -30px;
    font-style: italic;
}

#NotificationModal .modal-header {
    background-color: #042D42;
    color: white;
    min-height: 44px;
    padding-top: 8px;
}

.modal .modal-header {
    background-color: #042D42;
    color: white;
    min-height: 44px;
    padding-top: 8px;
}

.notification-header {
    font-weight: bolder;
}

.material-tooltip {
    background-color: #d0edff !important;
    color: #042D42;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    font-size: .7rem;
    border-radius: 15px 3px;
    padding: 15px 10px;
}

/*# Modal Detail Panel (the popups after clicking an item from the main grid)*/
.modal-detail-panel {
    background-color: #042D42;
    color: #fff;
    padding: 20px 5px 5px 5px;
    margin: 0 0 5px 0 !important;
}

    .modal-detail-panel h1.card-title, h2.card-title, h3.card-title, h4.card-title, h5.card-title, h6.card-title {
        color: #fff;
    }

    .modal-detail-panel h2.card-subtitle, h3.card-subtitle, h4.card-subtitle, h5.card-subtitle, h6.card-subtitle {
        color: #d0edff;
    }

        .modal-detail-panel h2.card-subtitle.default-color, h3.card-subtitle.default-color, h4.card-subtitle.default-color, h5.card-subtitle.default-color, h6.card-subtitle.default-color {
            color: unset;
        }


    .modal-detail-panel a {
        color: #fff;
    }

/*--------------------------------------------------------------
# contact page specific
----------------------------------------------------------------*/
.contact-notes-container .custom-card {
    min-height: 370px;
}

/*--------------------------------------------------------------
# organization page specific
----------------------------------------------------------------*/
.organization-notes-container .custom-card {
    min-height: 370px;
}

/*--------------------------------------------------------------
# Tenant Status Bar
----------------------------------------------------------------*/
.tenantstatusbar {
    float: right;
    clear: both;
    padding: 10px;
}

.privatetenantstatusbar {
    background-color: unset;
    color: #fff;
    font-size: 22px;
}

.publictenantstatusbar {
    background-color: unset;
    color: #fff;
    font-size: 22px;
}

/*--------------------------------------------------------------
# SMSButtons
----------------------------------------------------------------*/

.btn-floating {
    margin:2px 5px;
}
.smsButton {
    background-color: white;
    color: #042D42;
    border-bottom: #d68c16 solid 2px !important;
    box-shadow: 0 4px 8px 0 rgba(214, 140, 20, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    margin-left: 7px;
    margin-right: 7px;
    min-width: 120px;
}

.smsButton-red {
    border-bottom: #ff0000 solid 2px !important;
    box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.smsButton-blue {
    border-bottom: #197bba solid 2px !important;
    box-shadow: 0 4px 8px 0 rgba(0, 178, 227, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.smsButton-green {
    border-bottom: #00ff00 solid 2px !important;
    box-shadow: 0 4px 8px 0 rgba(0, 255, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

/*----------------------------------------------------------
    Progress Tracker
-------------------------------------------------------------*/
.progresscontainer {
    width: 500px;
    margin: 0 auto;
}


.progress-meter {
    padding: 0;
}

ol.progress-meter {
    padding-bottom: 9.5px;
    list-style-type: none;
}

ol.progress-meter li {
    display: inline-block;
    text-align: center;
    text-indent: -19px;
    height: 36px;
    width: 23.99%;/* set to 24.99 for 3 colums*/
    font-size: .8rem;
    border-bottom-width: 4px;
    border-bottom-style: solid;
}

ol.progress-meter li:before {
    position: relative;
    float: left;
    text-indent: 0;
    left: -webkit-calc(50% - 9.5px);
    left: -moz-calc(50% - 9.5px);
    left: -ms-calc(50% - 9.5px);
    left: -o-calc(50% - 9.5px);
    left: calc(50% - 9.5px);
}

ol.progress-meter li.done {
    font-size: .8rem;
}

ol.progress-meter li.done:before {
    content: "\2713";
    height: 19px;
    width: 19px;
    line-height: 21.85px;
    bottom: -28.175px;
    border: none;
    border-radius: 19px;
}

ol.progress-meter li.todo {
    font-size: .8rem;
}

ol.progress-meter li.todo:before {
    content: "\2B24";
    font-size: 17.1px;
    bottom: -26.95px;
    line-height: 18.05px;
}

ol.progress-meter li.done {
    color: #000;
    border-bottom-color: yellowgreen;
}

ol.progress-meter li.done:before {
    color: #fff;
    background-color: yellowgreen;
}

ol.progress-meter li.todo {
    color: #000;
    border-bottom-color: silver;
}

ol.progress-meter li.todo:before {
    color: #000;
}


/*----------------------------------------------------------
    Dropdown List Filter
-------------------------------------------------------------*/
.dropdown-filter-content {
    display: inline-block;
    background-color: #fafafa;
    overflow-y: scroll;
    margin-left: 3rem;    
    border-block: solid 1px #eeeeee;
}

    .dropdown-filter-content a {
        color: black;
        padding: 5px 5px;
        text-decoration: none;
        display: block;
        font-size: .7rem;
    }

        .dropdown-filter-content a:hover {
            background-color: #ddd;
        }

/*----------------------------------------------------------
    For Printing
-------------------------------------------------------------*/

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }

    .no-print, .no-print * {
        display: none !important;
    }
}

.reset-this {
    animation: none;
    animation-delay: 0;
    animation-direction: normal;
    animation-duration: 0;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-name: none;
    animation-play-state: running;
    animation-timing-function: ease;
    backface-visibility: visible;
    background: 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: repeat;
    background-size: auto auto;
    border: 0;
    border-style: none;
    border-width: medium;
    border-color: inherit;
    border-bottom: 0;
    border-bottom-color: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-collapse: separate;
    border-image: none;
    border-left: 0;
    border-left-color: inherit;
    border-left-style: none;
    border-left-width: medium;
    border-radius: 0;
    border-right: 0;
    border-right-color: inherit;
    border-right-style: none;
    border-right-width: medium;
    border-spacing: 0;
    border-top: 0;
    border-top-color: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-style: none;
    border-top-width: medium;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: inherit;
    columns: auto;
    column-count: auto;
    column-fill: balance;
    column-gap: normal;
    column-rule: medium none currentColor;
    column-rule-color: currentColor;
    column-rule-style: none;
    column-rule-width: none;
    column-span: 1;
    column-width: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    display: inline;
    empty-cells: show;
    float: none;
    font: normal;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    line-height: normal;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: disc;
    margin: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 0;
    outline: 0;
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes: '\201C' '\201D' '\2018' '\2019';
    right: auto;
    tab-size: 8;
    table-layout: auto;
    text-align: inherit;
    text-align-last: auto;
    text-decoration: none;
    text-decoration-color: inherit;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    nav ul li.active transform-style: flat;
    transition: none;
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: none;
    transition-timing-function: ease;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    widows: 0;
    width: auto;
    word-spacing: normal;
    z-index: auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: unset;
}

.checkboxOnWhiteBackground{
    color:#000;
}