:root {
    --border-radius: 0.25rem;
    /* ReSharper disable once InvalidValue */
    --loading-background: linear-gradient(100deg, var(--input-background-color) 30%, var(--text-color) 50%, var(--input-background-color) 70%);
    --loading-animation: loading 1.2s ease-in-out infinite;
    --input-background-color: #f5f5f5;
    --text-color: #1f1f1f;
    --text-color-inverse: #f5f5f5;
    --dark-button-primary: #f9d428;
}

/*test autodeploy*/

@font-face {
    font-family: Poppins;
    src: url(/fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: PoppinsLight;
    src: url(/fonts/Poppins-Light.ttf);
}

@font-face {
    font-family: PoppinsBold;
    src: url(/fonts/Poppins-Bold.ttf);
}

@media (max-height: 900px) {
    .home-user-stats-content table tr:first-of-type td {
        font-size: 28px;
    }
}

@media (max-height: 800px) {
    .home-user-stats-content table tr:first-of-type td {
        font-size: 20px;
    }

    .home-user-stats-content div {
        font-size: 10px !important;
    }
}

@media (max-height: 740px) {
    .home-user-stats-content table tr:first-of-type td {
        font-size: 20px;
    }

    .home-user-stats-content div {
        font-size: 10px !important;
    }

    .whats-new-message {
        font-size: 12px !important;
    }

    .message-message {
        font-size: 12px !important;
    }

    #ClosedCount {
        display: none;
    }

    #OverdueCount {
        margin-bottom: 0;
    }
}

@media (max-width: 800px) {
    .ntc-table tr {
        display: flex;
        flex-direction: column;
    }

    .ntc-table th:not(.ntc-table-column-reactive),
    .ntc-table td:not(.ntc-table-column-reactive) {
        display: none;
    }
}

@media (max-width:1200px) {
    .menu-expand {
        display: block !important;
        position: absolute;
        bottom: 20px;
    }

    .sidebar-expand:hover div.sidebar-mask {
        display: block !important;
    }

    /*.sidebar-expand ~ .navbar-corner-top {
        display: none !important;
    }

    .sidebar-expand ~ .navbar-corner-bottom {
        display: none !important;
    }*/

    .sidebar-expand a div {
        display: none !important;
    }

    .sidebar hr {
        display: none;
    }

    .sidebar-items {
        overflow-y: auto;
        overflow-x: hidden;
        height: 80%;
        padding-bottom: 2rem;
    }

    .navbar-link span {
        display: none;
    }

    .navbar-brand-title {
        display: none;
    }

    .navbar-brand {
        display: none;
    }

    .navbar-top a img {
        width: 26px !important;
        height: 26px !important;
    }

    .navbar-corner-top {
        left: 75px !important;
    }

    .navbar-corner-bottom {
        left: 75px !important;
    }

    .navbar-link-active-corner-top {
        left: 15px !important;
    }

    .navbar-link-active-corner-bottom {
        left: 15px !important;
    }

    .sidebar:hover {
        width: 250px !important;
        z-index: 1000;
    }

        .sidebar:hover a {
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            margin-right: 10px;
        }

            .sidebar:hover a div {
                display: none;
            }

            .sidebar:hover a span {
                display: inline-block !important;
            }

        .sidebar:hover ~ .navbar-corner-top {
            left: 250px !important;
            z-index: 1000;
        }

        .sidebar:hover ~ .navbar-corner-bottom {
            left: 250px !important;
            z-index: 1000;
        }

        .sidebar:hover div.sidebar-mask {
            display: block;
            position: fixed;
            opacity: 0.2;
            top: 0;
            left: 250px;
            height: 100%;
            width: calc(100% - 250px);
            background-color: #666666;
            z-index: 1000;
        }

    .sidebar-mask:hover {
        display: none !important;
    }

    .sidebar {
        width: 75px !important;
        background-position: right bottom !important;
    }

    .main-content {
        margin-left: 75px !important;
    }
}

html, body {
    width: 100%;
    height: calc(100% - 8px);
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 4px solid #2a3f8b;
    border-bottom: 4px solid #3c559b;
    overflow: hidden;
    font-family: Poppins,Arial;
}

body {
    position: relative;
}

.sidebar {
    width: 250px;
    background-color: #2a3f8b !important;
    color: #ffffff;
    height: 100%;
    position: fixed;
    background-image: url("/images/sidebar-base.png");
    background-size: 250px 106px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

    .sidebar hr {
        width: calc(100% - 40px);
        margin: 0 20px 30px 20px;
        background-color: #496cac;
    }

.sidebar-mask {
    display: none;
}

/****************************************/

.sidebar-expand {
    width: 250px !important;
    z-index: 1000;
}

    .sidebar-expand a {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        margin-right: 10px;
    }

        .sidebar-expand a div {
            display: none;
        }

        .sidebar-expand a span {
            display: inline-block !important;
        }

    .sidebar-expand ~ .navbar-corner-top {
        left: 250px !important;
        z-index: 1000;
    }

    .sidebar-expand ~ .navbar-corner-bottom {
        left: 250px !important;
        z-index: 1000;
    }

    .sidebar-expand div.sidebar-mask {
        display: block;
        position: fixed;
        opacity: 0.2;
        top: 0;
        left: 250px;
        height: 100%;
        width: calc(100% - 250px);
        background-color: #666666;
        z-index: 1000;
    }

/****************************************/

.navbar {
    min-height: 57px;
}

.navbar-top {
    margin-left: 25px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.navbar-brand a {
    color: #ffffff !important;
}

.navbar-brand-title {
    font-family: 'PoppinsBold';
    font-size: 18px;
    margin: 0 20px;
    width: calc(100% - 40px);
    text-align: center;
}

.navbar-brand-subtitle {
    font-size: 12px;
    font-family: PoppinsLight, Arial;
    margin-top: -5px;
}

.navbar-corner-top {
    width: 30px;
    height: 30px;
    top: 8px;
    left: 250px;
    position: fixed;
    background: #2a3f8b;
    /* ReSharper disable once InvalidValue */
    -webkit-mask-image: radial-gradient(circle 30px at 30px 30px, transparent 0, transparent 30px, #ffffff 30px);
    mask-image: radial-gradient(circle 30px at 30px 30px, transparent 0, transparent 30px, #ffffff 30px);
    z-index: 10;
}

.navbar-corner-bottom {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 250px;
    position: fixed;
    background: #3c559b;
    /* ReSharper disable once InvalidValue */
    -webkit-mask-image: radial-gradient(circle 30px at 30px 0, transparent 0, transparent 30px, #ffffff 30px);
    mask-image: radial-gradient(circle 30px at 30px 0, transparent 0, transparent 30px, #ffffff 30px);
    z-index: 10;
}

.navbar-link {
    color: #ffffff;
    margin: 5px 0 0 10px;
    padding-left: 20px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    display: block;
}

    .navbar-link:hover {
        text-decoration: underline;
        color: #ffffff;
    }

    .navbar-link img {
        filter: invert(99%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

.navbar-link-active {
    background-color: #ffffff;
    color: #2a3f8b;
    font-family: PoppinsBold;
}

    .navbar-link-active:hover {
        color: #2a3f8b;
    }

    .navbar-link-active img {
        filter: invert(19%) sepia(42%) saturate(3050%) hue-rotate(216deg) brightness(89%) contrast(91%);
    }

.navbar-link-active-corner-bottom {
    width: 30px;
    height: 30px;
    left: 190px;
    bottom: 30px;
    position: relative;
    z-index: 1;
    background: #ffffff;
    /* ReSharper disable once InvalidValue */
    -webkit-mask-image: radial-gradient(circle 30px at 0 30px, transparent 0, transparent 30px, #2a3f8b 30px);
    display: none;
}

.navbar-link-active-corner-top {
    width: 30px;
    height: 30px;
    left: 190px;
    top: -80px;
    position: relative;
    z-index: 1;
    background: #ffffff;
    /* ReSharper disable once InvalidValue */
    -webkit-mask-image: radial-gradient(circle 30px at 0 0, transparent 0, transparent 30px, #2a3f8b 30px);
    display: none;
}

.navbar-link-active div.navbar-link-active-corner-bottom, .navbar-link-active div.navbar-link-active-corner-top {
    display: block;
}

.menu-expand {
    display: none;
}

.main-content {
    height: 100%;
    overflow-y: auto;
    margin-left: 250px;
    padding: 100px 30px 30px;
}

.main-content-top {
    width: calc(100% - 266px);
    height: 80px;
    top: 8px;
    left: 250px;
    position: absolute;
    background-color: #ffffff;
    z-index: 1;
}

.main-content-header {
    position: absolute;
    top: 30px;
    z-index: 10;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    /* ReSharper disable once CssNotResolved */
    scrollbar-width: auto;
    /* ReSharper disable once CssNotResolved */
    scrollbar-color: #666666 #ffffff;
}

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 16px;
        z-index: 20000;
    }

    *::-webkit-scrollbar-track {
        background: #ffffff;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #666666;
        border-radius: 0px;
        border: 3px none #ffffff;
        z-index: 20001;
    }

/*.user-pill {
    position: fixed;
    top: 26px;
    right: 30px;
    z-index: 20;
    padding: 4px 10px;
    background-color: #efefef;
    cursor: pointer;
    border-radius: 15px;
}

    .user-pill p {
        margin: 0 10px 0 0;
        padding: 0;
        line-height: 24px;
    }

    .user-pill img, .user-pill p {
        display: inline-block;
    }

    .user-pill:hover p {
        text-decoration: underline;
    }
*/

.user-pill {
    background-color: #efefef;
    border-radius: 15px;
    cursor: pointer;
    flex: 0 0 auto;
    position: fixed;
    padding: 2px 10px;
    right: 2rem;
    top: 25px;
    z-index: 20;
    overflow: hidden;
}

    .user-pill:hover {
        background-color: #2a3f8b;
        color: #ffffff;
        padding-bottom: 0;
    }

.user-pill-name {
    display: inline-block;
    float: left;
    margin-right: 10px;
    margin-top: 2px;
    overflow: hidden;
}

    .user-pill-name:hover {
        cursor: pointer;
    }

.user-pill-controls {
    display: none;
    margin-left: -10px;
    width: calc(100% + 20px);
    white-space: nowrap;
    z-index: 10;
    text-align: left;
    padding: 0;
    overflow: hidden;
    margin-top: 5px;
    border-top: 1px dashed #ffffff;
}

.user-pill-control {
    word-break: unset;
}

.user-pill-control-disabled .user-pill-control-text {
    color: #999;
    cursor: not-allowed;
    background-color: #efefef !important;
}

.user-pill-control:hover .user-pill-control-text {
    background-color: #ccc;
}

.user-pill-control-text {
    background-color: #efefef;
    color: #000;
    display: block;
    margin: 0;
    padding: 5px 0 5px 20px;
    text-align: left;
    user-select: none;
    width: 100%;
}

    .user-pill-control-text:disabled {
        color: #666;
        cursor: not-allowed;
    }

.user-pill:hover .user-pill-controls {
    display: block !important;
}



@keyframes loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.queue-loading {
    color: transparent;
    background: linear-gradient(100deg, #dfe1e4 30%, #f6f7f8 50%, #dfe1e4 70%);
    background-size: 400%;
    animation: loading 1.2s ease-in-out infinite;
    border-radius: 5px;
}

    .queue-loading > * {
        display: none !important;
    }

#Queue_Results .queue-loading,
#QueueResults.queue-loading {
    min-height: 200px;
}

.customer-contact .queue-loading {
    min-height: 1.5rem;
    width: 100%;
}

.queue-title {
    width: auto;
    display: inline-block;
    margin-bottom: 15px;
    margin-right: 10px;
    white-space: nowrap;
}

.queue-title-outer {
    display: flex;
    position: relative;
    overflow: visible;
}

    .queue-title-outer h2 {
        display: inline-block;
        float: left;
    }

    .queue-title-outer div {
        display: inline-block;
    }

    .queue-title-outer button {
        width: 40px;
        height: 40px;
        padding: 6px;
        cursor: pointer;
    }

        .queue-title-outer button img {
            width: 20px;
            cursor: pointer;
            filter: invert(19%) sepia(42%) saturate(3050%) hue-rotate(216deg) brightness(89%) contrast(91%);
        }

        .queue-title-outer button:hover {
            background-color: #323e8a;
        }

        .queue-title-outer button.btn-link:hover {
            background-color: transparent;
        }

        .queue-title-outer button:hover img {
            filter: invert(99%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
        }

.quick-filters-outer {
    margin-left: 10px;
    flex-grow: 1;
    height: 40px;
    overflow: visible;
    position: relative;
}

.quick-filters {
    white-space: nowrap;
    z-index: 5;
    height: 40px;
    overflow: hidden;
    background-color: #efefef;
    border-radius: 5px;
    position: absolute;
    width: 100%;
}

#QuickFilters > div {
    display: inline-block;
    height: 29px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 5px 15px 15px 5px;
    overflow: hidden;
    /*float: left;*/
    padding: 0;
    display: flex;
}

    #QuickFilters > div button {
        height: 100% !important;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0;
        border: 0 !important;
        outline: none !important;
    }

    #QuickFilters > div:hover {
        border: 1px solid #bcbcbc;
        background-color: #f6f8fb;
    }

        #QuickFilters > div:hover button.btn-quickdelete {
            background-color: bisque;
        }

#QuickFilters {
    white-space: normal;
    width: calc(100% - 160px);
}

.btn-quickdelete {
    padding-left: 2px !important;
    width: 20px !important;
    filter: none !important;
    height: 30px !important;
    border: 0;
    border-radius: 0;
}

    .btn-quickdelete img {
        filter: none !important;
    }

    .btn-quickdelete:hover {
        background-color: darksalmon !important;
    }

.quick-filters-expand {
    height: auto;
    -webkit-box-shadow: 0px 2px 10px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 10px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 10px -3px rgba(0,0,0,0.75);
}

    .quick-filters-expand #ShowMore {
        display: none;
    }

    .quick-filters-expand #ShowLess {
        display: block !important;
    }

#QueueName.queue-loading {
    min-width: 400px;
}

.queue-filters {
    width: 100%;
    min-height: 62px;
    display: inline-block;
    margin-bottom: 15px;
}

    .queue-filters table {
        width: 100%;
        border: 0;
        border-spacing: 0;
    }

        .queue-filters table tbody tr {
            border: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            width: 100%;
        }

            .queue-filters table tbody tr td {
                border: 0;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

                .queue-filters table tbody tr td span div.btn-group {
                    width: 100% !important;
                }

                .queue-filters table tbody tr td span div button {
                    width: 100% !important;
                }

        .queue-filters table tr td > * {
            width: 100%;
        }

.queue-table-outer {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    max-height: calc(100% - 196px);
    overflow-y: auto;
}

    .queue-table-outer::-webkit-scrollbar-thumb {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .queue-table-outer table thead th {
        border: 0;
        font-family: PoppinsBold;
        background-color: #323e8a;
        color: #fff;
        cursor: pointer;
    }

        .queue-table-outer table thead th.tablehead-caret-ASC::after {
            background-image: url("/images/icons/caret-up.svg");
            background-size: 16px 16px;
            display: inline-block;
            width: 16px;
            height: 16px;
            content: "";
            position: relative;
            top: 2px;
            left: 5px;
        }

        .queue-table-outer table thead th.tablehead-caret-DESC::after {
            background-image: url("/images/icons/caret-down.svg");
            background-size: 16px 16px;
            display: inline-block;
            width: 16px;
            height: 16px;
            content: "";
            position: relative;
            top: 2px;
            left: 5px;
        }

        .queue-table-outer table thead th:hover {
            background-color: #474eaf;
        }

        .queue-table-outer table thead th:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 3px;
        }

    .queue-table-outer table tbody tr td {
        border: 0;
    }

    .queue-table-outer table tbody tr {
        border: 0;
    }

        .queue-table-outer table tbody tr:hover {
            text-decoration: underline;
            background-color: #dee4f0 !important;
            cursor: pointer;
        }

        .queue-table-outer table tbody tr:nth-child(even) {
            background-color: #f6f8fb;
        }

    .queue-table-outer table {
        width: 100%;
        border: 0;
        border-spacing: 0;
    }

        .queue-table-outer table thead {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1;
            background: #323e8a;
        }

.queue-page {
    width: 100%;
    min-height: 40px;
    display: inline-block;
    /*margin-bottom: 15px;*/
    margin-bottom: 0;
}

    .queue-page p {
        margin-bottom: 0;
    }

    .queue-page button {
        padding-left: 0;
        padding-right: 0;
    }

.multiselect-native-select div.btn-group {
    /*min-width: 200px !important;
    max-width: 200px !important;*/
}

    .multiselect-native-select div.btn-group button {
        /*height: 2.75rem;*/
        height: 2.5rem;
        text-align: left !important;
    }

a:disabled {
    color: #dfe1e4 !important;
    text-decoration: none !important;
}

.customer-type img {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    margin-top: 10px;
}

.queue-subtitle {
    font-size: 13px;
    font-family: PoppinsLight, Arial;
}

.hide-buttons button {
    display: none !important;
}

#IdentityUsername {
    margin-left: 10px;
}

.info-pills {
    display: block;
    min-height: 22px;
    cursor: default;
    position: relative;
}

    .info-pills.queue-loading {
        width: 400px;
    }

    .info-pills div {
        display: inline-block;
        float: left;
        font-size: 12px;
        background-color: #dfe1e4;
        border-radius: 6px;
        padding: 2px 10px;
        margin-right: 10px;
    }

.info-pills-stack div {
    margin-bottom: 6px;
}


.info-pill-menu {
    position: absolute;
    top: 1.75rem;
    left: 0;
    width: 15rem !important;
    z-index: 10;
}


.block {
    display: block !important;
    float: none !important;
}

.interaction-outer {
    /*display: flex;
flex-direction: row;*/
    width: 100%;
    margin-top: 20px;
    min-height: calc(100% - 20px);
}

    .interaction-outer > div:first-child {
        /*flex: 2 1 0;*/
        overflow-x: hidden;
        display: inline-block;
        float: left;
        width: calc(100% - 480px);
    }

    .interaction-outer > div:last-child {
        /*flex: 1 1 0;*/
        display: inline-block;
        overflow-x: hidden;
        padding-left: 40px;
        border-left: 2px solid #cccccc;
        background: rgb(243,243,243);
        background: linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(255,255,255,1) 4%);
        /*margin-top: -52px;*/
        padding-top: 20px;
        padding-bottom: 20px;
        /*z-index: 1;*/
        padding-right: 20px;
        /*border-bottom: 2px solid #cccccc;
    border-right: 2px solid #cccccc;*/
        width: 460px;
    }

.customer-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
}

    .customer-header img {
        width: 40px;
        height: 40px;
        margin-right: 15px;
        margin-top: 5px;
        border: 0 !important;
        outline: 0 !important;
    }

    .customer-header div {
        flex: auto;
    }

.customer-contact {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

    .customer-contact img {
        width: 16px;
        height: 16px;
        margin-top: 4px;
        margin-right: 10px;
        border: 0 !important;
        outline: 0 !important;
    }


.customer-contact-input {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

    .customer-contact-input img {
        width: 16px;
        height: 16px;
        border: 0 !important;
        outline: 0 !important;
    }

    .customer-contact-input > *:not(:first-child) {
        margin-left: 1rem;
    }

.customer-contact-items {
    list-style: none;
    margin: 0 0 0 2rem;
    padding: 0;
}

.activity {
    width: 100%;
}

    .activity.queue-loading {
        min-height: 300px;
    }

.queue-loading.queue-loading-100 {
    min-height: 100px;
}

.queue-loading.queue-loading-200 {
    min-height: 200px;
}

.queue-loading.queue-loading-300 {
    min-height: 300px;
}

.queue-loading.queue-loading-400 {
    min-height: 400px;
}

.width-100 {
    width: 100%;
}

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

.customer-contact p div {
    display: inline-block;
}

    .customer-contact p div.info-pills {
        margin-left: 10px;
    }

.bold {
    font-weight: bold;
}

.ntc-navigation-menu-top > div {
    margin-bottom: 0;
}

.customer-contact a {
    color: #000000;
}

.info-pills-customer {
    margin-left: 0 !important;
}

    .info-pills-customer div {
        width: 75px;
        text-align: center;
    }

.info-pills-w100 div {
    width: 100%;
}

.info-pills-value {
    min-width: 20rem;
}

.info-customer {
    margin-bottom: 5px;
    clear: both;
}

.interaction-details p {
    font-size: 14px;
    margin-bottom: 0;
}

.interaction-sections {
    display: flex;
    flex-direction: column;
    /*flex: 1 0 auto;*/
    /*height: 100%;
    width: 100%;*/
    min-height: calc(100% - 78px);
}

.interaction-section {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.interaction-section-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.interaction-section-content-description {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 1rem 0;
}

    .interaction-section-content-description > p {
        margin: 0 2rem 0 0;
    }

    .interaction-section-content-description > button {
    }

.interaction-section-controls {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.interaction-reference {
    /*background-color: var(--dark-primary-background);*/
    background-color: #f5f5f5;
    border-radius: 0.25rem;
    color: #000;
    display: inline-block;
    font-size: 2rem;
    padding: 0.5rem 1rem;
}

.interaction-nav > *:not(:last-child) {
    margin-right: 1rem
}

.interaction-nav-control {
    align-items: center;
    background-color: var(--dark-button-primary);
    border-radius: var(--border-radius);
    border: none;
    color: var(--dark-primary-background);
    display: flex;
    flex: 0 0 3rem;
    font-weight: bold;
    justify-content: center;
}

.interaction-nav-control-icon {
    height: 4rem;
    width: auto;
}

.interaction-nav-control:hover {
    cursor: var(--hover-cursor);
    opacity: var(--hover-opacity);
}

.interaction-nav-control.ip-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.interaction-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
}

.interaction-nav-section {
    background-color: var(--dark-button-primary);
    border-radius: var(--border-radius);
    color: var(--dark-primary-background);
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    margin-bottom: 1rem;
    margin-right: 1rem;
    min-height: 5rem;
    min-width: 12rem;
    padding: 0.5rem;
}

    .interaction-nav-section.interaction-nav-section-complete {
        background-color: #78be20;
    }

/*.interaction-nav-section-item {
    border-spacing: 0;
    border: none;
}

.interaction-nav-section-item td {
    border: none;
    vertical-align: top;
}

    .interaction-nav-section-item td:nth-child(2) {
        font-weight: bold;
    }*/

.interaction-nav-section-item {
    display: flex;
    flex-direction: row;
    padding: 0.25rem;
}

    .interaction-nav-section-item > .interaction-nav-section-item-name {
        flex: 0 0 5rem;
    }

    .interaction-nav-section-item > .interaction-nav-section-item-value {
        flex: 1 0 0;
    }


.interaction-nav-pills {
    border-bottom: 0.25rem solid #2a3f8b;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    width: 100%;
}

    .interaction-nav-pills.ip-success {
        border-color: #007a53;
        /*background-color: #007a53;*/
    }

.interaction-nav-pill {
    color: var(--dark-primary-background);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    height: 5rem;
    /*margin-bottom: 0.5rem;*/
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}



    .interaction-nav-pill.ip-success .interaction-nav-pill-card {
        background-color: #007a53;
        /*background-color: #007a53;*/
    }

    .interaction-nav-pill.interaction-nav-pill-large {
        flex-basis: 26%;
    }

    .interaction-nav-pill.interaction-nav-pill-medium {
        flex-basis: 16%;
    }


    .interaction-nav-pill.interaction-nav-pill-start .interaction-nav-pill-card {
        border-top-left-radius: 0.25rem;
        clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    }

    .interaction-nav-pill.interaction-nav-pill-middle .interaction-nav-pill-card {
        clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
    }

    .interaction-nav-pill.interaction-nav-pill-middle.interaction-nav-pill-medium .interaction-nav-pill-card {
        clip-path: polygon(93% 0%, 100% 50%, 93% 100%, 0% 100%, 7% 50%, 0% 0%);
    }

    .interaction-nav-pill.interaction-nav-pill-end .interaction-nav-pill-card {
        border-top-right-radius: 0.25rem;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 7% 50%);
    }

    .interaction-nav-pill:not(.interaction-disabled):hover .interaction-nav-pill-card {
        cursor: pointer;
        opacity: 0.8;
    }


.interaction-nav-pill-card {
    align-items: center;
    background-color: #2a3f8b;
    color: #fff;
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    position: relative;
}

.interaction-nav-pill-path {
    background-color: #2a3f8b;
    color: #fff;
    height: 0.5rem;
    margin-top: 0.25rem;
}

.interaction-nav-pill.interaction-nav-pill-large .interaction-nav-pill-path {
    width: 95%;
}

.interaction-nav-pill.interaction-nav-pill-medium .interaction-nav-pill-path {
    width: 93%;
}


.interaction-nav-pill.interaction-nav-pill-start .interaction-nav-pill-path {
    clip-path: polygon(0% 0, 100% 0, 99% 100%, 0% 100%);
    width: 94.5%;
}

.interaction-nav-pill.interaction-nav-pill-large.interaction-nav-pill-middle .interaction-nav-pill-path {
    clip-path: polygon(1.25% 0%, 100% 0%, 99% 100%, 0% 100%);
    margin-left: -1.5%;
    width: 96%;
}

.interaction-nav-pill.interaction-nav-pill-medium.interaction-nav-pill-middle .interaction-nav-pill-path {
    clip-path: polygon(2.25% 0%, 100% 0%, 98.5% 100%, 0% 100%);
    margin-left: -3%;
    width: 95.5%;
}

.interaction-nav-pill.interaction-nav-pill-medium.interaction-nav-pill-end .interaction-nav-pill-path {
    clip-path: polygon(2% 0%, 100% 0%, 100% 100%, 0% 100%);
    margin-left: -3%;
    width: 103.25%;
}


.interaction-nav-pill:not(.ip-active) .interaction-nav-pill-path {
    visibility: hidden;
}

.interaction-nav-pill.ip-success .interaction-nav-pill-path {
    background-color: #007a53;
    /*background-color: #007a53;*/
}

.interaction-nav-pill-icon {
    background-color: transparent;
    border-radius: 50%;
    color: #fff;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 3rem;
    margin-top: -1.7rem;
    margin-right: 0.5rem;
    width: 2rem;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 50%;
    transform: rotate(218deg) scaleX(-1);
}






.interaction-section-addon {
    font-size: 1rem;
    font-weight: normal;
}

    .interaction-section-addon:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.interaction-review-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.interaction-review-item-name {
    width: 12rem;
}

.interaction-review-item-value,
.interaction-review-item-values {
    margin-top: 0.5rem;
}

.interaction-review-item-values {
    list-style: none;
    padding: 0;
}

.interaction-section-review-values > li {
    margin: 0 0 1rem 0;
    padding: 0;
}

.interaction-section-review-value {
    margin-bottom: 1.5rem;
}

.pill-success .interaction-pill-start,
.pill-success .interaction-pill-middle,
.pill-success .interaction-pill-end {
    /*background-color: #5c9219;*/
    background-color: #007a53;
    color: #fff;
}

    .pill-success .interaction-pill-start:after {
        border-left-color: #007a53;
    }

    .pill-success .interaction-pill-middle:before {
        border-bottom-color: #007a53;
        border-top-color: #007a53;
    }

    .pill-success .interaction-pill-middle:after {
        border-left-color: #007a53;
    }

    .pill-success .interaction-pill-end:after {
        border-left-color: #007a53;
    }

.ip-section-jumbo {
    background-color: #f5f5f5;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
}

.ip-section-jumbo-title {
    border-bottom: 1px solid #000;
    color: #000;
    padding-bottom: 0.25rem;
}

.interaction-section-controls {
    margin-top: 30px;
    text-align: right;
}

.interaction-az-navs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.interaction-az-nav {
    align-items: center;
    background-color: #2a3f8b;
    border: 0.25rem solid #2a3f8b;
    border-radius: 25px;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    font-weight: bold;
    height: 2.5rem;
    justify-content: center;
    margin: 0.5rem;
    min-width: 3rem;
    color: #ffffff;
}

    .interaction-az-nav.active {
        /*background-color: var(--dark-primary-background);*/
        background-color: #fff;
        color: #2a3f8b;
    }

    .interaction-az-nav:not(.interaction-az-nav-empty):hover {
        cursor: pointer;
        opacity: 0.8;
    }

    .interaction-az-nav.interaction-az-nav-empty {
        pointer-events: none;
    }

.interaction-az-nav-empty {
    background-color: #c9c9c9;
    border-color: #c9c9c9;
    color: #000000;
}

.interaction-az-contents {
}

.interaction-az-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

    .interaction-az-content > div {
        background-color: #efefef;
        border-radius: 25px;
        margin: 0 1rem 1rem 0;
        padding: 1rem;
    }

.interaction-review {
    /*align-items: flex-start;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
}

    .interaction-review .interaction-review-block {
        background-color: #f5f5f5;
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
        margin-right: 1rem;
        padding: 0.5rem 0.75rem;
    }

        .interaction-review .interaction-review-block > h5 {
            border-bottom: 1px solid #ccc;
            padding-bottom: 0.25rem;
            /*margin-bottom: 1rem;*/
        }

.interaction-review-customer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.interaction-review-assets {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.interaction-review-report {
    display: flex;
    flex-direction: column;
    flex: 5 1 auto;
}

.interaction-directory-results {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}




.flag-download-link {
    width: 100%;
    display: inline-block;
}

    .flag-download-link a {
        display: inline-block;
        line-height: 20px;
        float: left;
    }

.file-download-delete {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin-left: 5px;
    background: url('/images/icons/delete.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    user-select: none;
    border-radius: 10px;
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent;
    display: inline-block;
}

    .file-download-delete:hover {
        background-color: #ffc0cb;
    }


/* CUSTOMER */

.customer-details-sections {
    display: flex;
    flex-direction: row;
}

    .customer-details-sections hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
        width: 100%;
    }

.customer-details-section {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
}

.customer-details-section-icon {
    display: flex;
    flex: 0 0 auto;
    padding: 0.25rem;
}

    .customer-details-section-icon img {
        margin-right: 0.5rem;
        width: 16px;
    }

.customer-details-section-content {
    display: flex;
    flex-direction: column;
    /*flex: 1 0 auto;*/
}

.customer-details-section-content-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.fav {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/images/icons/star-grey.svg");
    cursor: pointer;
    width: 40px;
    height: 40px;
}

    .fav:hover {
        background-image: url("/images/icons/star-grey-hover.svg");
    }

.fav-active {
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/images/icons/star-yellow.svg");
    cursor: pointer;
    width: 40px;
    height: 40px;
}

    .fav-active:hover {
        background-image: url("/images/icons/star-yellow-hover.svg");
    }

.refresh {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/images/icons/refresh-grey.svg");
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    display: inline-block;
    margin-top: 19px;
}

    .refresh:hover {
        background-image: url("/images/icons/refresh-blue.svg");
    }

.actionable {
    cursor: pointer;
}

    .actionable:hover {
        text-decoration: underline;
    }

.stats-container {
    width: 100%;
    background-color: #efefef;
    min-height: 70px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.btn-action {
    height: 24px;
    line-height: 24px;
    margin: 8px 16px 18px 16px !important;
    font-size: 12pt;
    background-image: url("/images/icons/arrow-down.svg") !important;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    padding-right: 20px !important;
    color: #000000 !important;
}

.btn-primary {
    background-color: #2a3f8b !important;
    border-color: #2a3f8b !important;
}

.ntc-column {
    display: inline-block;
    margin: 0;
    padding: 0;
    float: left;
}

.tab-pane {
    padding-top: 20px;
}

.navbar-nav, .navbar-collapse {
    cursor: default !important;
}

.nav-item .nav-link img {
    width: 20px;
    height: 20px;
    user-select: none;
}

.nav-item .nav-link span {
    margin-left: 10px;
    user-select: none;
}

.nav-item .nav-link:disabled {
    cursor: not-allowed !important;
}

    .nav-item .nav-link:disabled img {
        opacity: 0.5;
    }

@media(min-width:768px) {
    .ntc-column-right {
        border-left: 2px solid #cccccc;
        background: rgb(243,243,243);
        background: linear-gradient(90deg, rgba(243,243,243,1) 0%, rgba(255,255,255,1) 4%);
        padding-left: 30px;
    }

    .ntc-column-left {
        padding-right: 20px;
    }

    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: block !important;
        background-color: #ffffff !important;
    }

    .navbar-nav {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 10px;
    }

        .navbar-nav .nav-item {
            display: inline-block !important;
            margin-left: 10px;
            margin-left: 10px;
        }

    .nav-item .nav-link {
        background-color: #ffffff;
        border-radius: 5px;
        padding: 5px !important;
        /*width: 34px;*/
        text-align: center;
    }

        .nav-item .nav-link span {
            /*display: none;*/
            font-size: 14px;
        }

    .navbar-nav .nav-item:hover .nav-link {
        background-color: #efefef;
    }

    /*.nav-item .nav-link:hover span {
        display: block;
        position: absolute;
        top: 57px;
        left: -10px;
        padding: 2px 10px;
        width: 100%;
        font-size: 14px;
        background-color: #efefef;
        color: #000000;
    }*/
}

@media(max-width:767.79px) {
    .ntc-column {
        border-bottom: 1px dashed #323e8a;
        margin-bottom: 35px;
        padding-bottom: 25px;
    }

    .home-quick-actions {
        display: block !important;
    }

        .home-quick-actions button {
            width: 100% !important;
            display: block;
            float: none;
            margin-bottom: 15px;
        }

    .home-user-stats {
        width: 100% !important;
    }

    .home-tasks-content {
        flex-direction: column !important;
        height: auto !important;
        overflow: scroll;
    }

    .home-assigned-content {
        height: auto !important;
        margin-left: 0 !important;
    }

    .home-assigned-content-content {
        height: auto !important;
        display: contents !important;
    }

    .message, .whats-new {
        display: inline-table !important;
    }
}

.image-text-left {
    margin-bottom: 30px;
}

    .image-text-left > * {
        display: inline-block;
    }

    .image-text-left img {
        float: left;
        width: 70px;
        height: 70px;
        margin-right: 20px;
    }

    .image-text-left div {
        width: calc(100% - 90px);
    }

.bg-base {
    background-image: url("/images/bg_base.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.bg-container {
    background-color: #ffffff;
    border: 3px solid #dcecf8;
    margin-top: 40px;
    border-radius: 20px;
    padding: 0 30px 30px;
    max-width: 660px;
    text-align: left;
    display: inline-block;
}

.search-panel > div {
    display: inline-block;
    float: left;
    margin-top: 5px;
}

    .search-panel > div.col-md-6:nth-child(odd) {
        padding-left: 0;
    }

    .search-panel > div.col-md-6:nth-child(even) {
        padding-right: 0;
    }

    .search-panel > div.col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .search-panel > div > button {
        margin-top: 23px;
    }

    .search-panel > div.col-md-12 > button {
        margin-top: 10px;
    }

    .search-panel > div > span > div.btn-group {
        width: 100%;
        max-width: none !important;
    }

@media(max-width:767.79px) {
    .search-panel > div {
        padding-left: 0;
        padding-right: 0;
    }

        .search-panel > div > button {
            margin-top: 10px;
            width: 100% !important;
        }
}

.text-success {
    color: #32cd32;
}

.text-error {
    color: #dc143c;
}

.switch {
    width: 50px;
    height: 30px;
    cursor: pointer;
    padding: 0;
    margin: 5px 0 0 10px;
    background-position: center center;
    background-size: 50px 50px;
    border: 0;
    outline: 0;
    background-color: transparent;
}

.switch-on {
    background-image: url("/images/icons/switch-on.svg");
}

.switch-off {
    background-image: url("/images/icons/switch-off.svg");
}

.switch:disabled {
    cursor: not-allowed;
    filter: grayscale(1);
}

.table-popup {
    width: 100%;
    border: 0;
}

    .table-popup tr {
        border: 0;
    }

        .table-popup tr td {
            border: 0;
            vertical-align: top;
        }

            .table-popup tr td input, .table-popup tr td select {
                width: 100%;
                border-color: #c2c6c9;
                /*border-radius: 0;*/
            }

input[type=file] {
    border: 0;
}

.flag-pill {
    border-radius: 10px;
    padding: 2px 10px;
    text-decoration: none !important;
    font-size: 14px;
    font-family: PoppinsBold;
}

.flag-pill-large {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 4px 20px;
    text-decoration: none !important;
    font-size: 16px;
    font-family: PoppinsBold;
}

.flag-pill-large-image {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 2px;
    border-width: 2px;
    border-style: solid;
    height: 32px;
    width: 32px;
    padding: 3px;
    float: left;
}

.customer-flag-pill {
    cursor: pointer;
}

    .customer-flag-pill img {
        width: 17px;
        height: 17px;
        margin: 0;
    }

.datepicker-popup {
    cursor: pointer;
}

.modal-header img {
    height: 20px;
    width: 20px;
    margin-top: -3px;
    margin-right: 10px;
}

.svg-black {
    filter: invert(0%) sepia(6%) saturate(7500%) hue-rotate(284deg) brightness(94%) contrast(106%) !important;
}

.svg-white {
    filter: invert(100%) sepia(1%) saturate(5%) hue-rotate(340deg) brightness(100%) contrast(104%) !important;
}

.modal-subtitle {
    width: 100%;
    font-size: 10pt;
    background-color: #e9ecef;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 15px;
}

.address-result {
    border-radius: 15px;
    background-color: #f5f5f5;
    padding: 0.25rem 0.5rem;
}

    .address-result:hover {
        cursor: pointer;
        opacity: 0.8;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader {
    width: 24px;
    height: 24px;
    border: 5px solid #323e8a;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.interaction-comment {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

    .interaction-comment:hover {
        background-color: #f5f5f5;
        cursor: default;
    }

    .interaction-comment div {
        width: 100%;
    }

        .interaction-comment div p {
            font-size: 12px;
        }

            .interaction-comment div p:first-child {
                font-family: PoppinsBold;
            }

    .interaction-comment p {
        padding: 1px 5px;
        margin: 0;
        width: 100%;
    }

.ip-residenttype-select {
    display: none;
}

    .ip-residenttype-select + label {
        border: 1px solid #fff;
        border-radius: 15px;
        margin-right: 1rem;
        padding: 1rem;
        text-align: center;
    }

        .ip-residenttype-select + label:hover {
            cursor: pointer;
            opacity: 0.8;
        }

    .ip-residenttype-select:checked + label {
    }

    .ip-residenttype-select + label > img {
        height: 10rem;
        width: 10rem;
    }


.ip-checkbox {
    display: none;
}

    .ip-checkbox + label {
        border: 1px solid #2a3f8b;
        border-radius: 0.25rem;
        color: #2a3f8b;
        font-family: PoppinsBold;
        margin-right: 1rem;
        padding: 0.5rem;
        text-align: center;
    }

        .ip-checkbox + label:hover {
            cursor: pointer;
            opacity: 0.8;
        }

    .ip-checkbox:checked + label {
        background-color: #2a3f8b;
        color: #fff;
    }

        .ip-checkbox:checked + label > .ip-checkbox-icon {
            filter: brightness(0) invert(1);
        }


.ip-sections {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}

.ip-section-fixed {
    display: flex;
    flex: 0 0 auto;
}

.ip-section {
    display: flex;
}

.ip-section-grow {
    display: flex;
    flex: 1 0 auto;
}

.ip-section-row {
    display: flex;
    flex-direction: row;
}

.ip-section-column {
    display: flex;
    flex-direction: column;
}

.ip-section-align-start {
    display: flex;
    align-items: flex-start;
}

.ip-section-align-center {
    display: flex;
    align-items: center;
}

.ip-section-align-end {
    display: flex;
    align-items: flex-end;
}

.ip-section-justify-center {
    display: flex;
    justify-content: center;
}

.ip-section-justify-end {
    display: flex;
    justify-content: flex-end;
}

.ip-section-justify-sbetween {
    display: flex;
    justify-content: space-between;
}

.ip-section-wrap {
    display: flex;
    flex-wrap: wrap;
}

.ip-section-inputgroup {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin: 0 1rem 1rem 0;
}

    .ip-section-inputgroup > .form-control {
        width: 20rem;
    }

.form-control {
    /*height: 2.875rem;*/
    height: 2.5rem;
}

select.form-control[value=""] {
    font-weight: bold;
}

.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ip-section-grow-1 {
    flex-grow: 1;
}

.ip-section-grow-2 {
    flex-grow: 2;
}

.ip-section-grow-3 {
    flex-grow: 3;
}


.ip-section-m {
    margin-right: -1rem;
}

    .ip-section-m > * {
        margin-right: 1rem;
    }


.ip-customer-informations {
    display: flex;
    flex: 0 0 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    font-size: 14px;
}

.ip-customer-informations {
    border-bottom: 1px solid #333;
}

.ip-customer-information {
    background-color: #292a2d;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    flex: 0 0 14rem;
    margin: 0 1rem 1rem 0;
    /*min-width: 8.75rem;*/
    padding: 0.5rem 0.75rem;
}

.ip-customer-information-icon {
    height: auto;
    margin-top: -2px;
    width: 1rem;
}

.highlight .ip-customer-information-icon {
    filter: invert(85%) sepia(53%) saturate(898%) hue-rotate(336deg) brightness(107%) contrast(95%);
}

.ip-customer-information-name {
    color: #666666;
}

.ip-customer-information-value {
}

.ip-customer-information-remove {
}

.ip-customer-information-setprimary {
}

.ip-customer-information-remove,
.ip-customer-information-setprimary {
    /*vertical-align: top;
    margin: -1px 1rem 0 2rem;
    padding: 0;*/
}

.ip-direction-column {
    display: flex;
    flex-direction: column;
}

.ip-direction-row {
    display: flex;
    flex-direction: row;
}

.ip-align-start {
    align-items: flex-start;
}

.ip-justify-start {
    justify-content: flex-start;
}

/*
.ip-customer-information {
    background-color: #292a2d;
    border-radius: 0.25rem;
    color: #fff;
    display: grid;
    grid-template-columns: 2rem auto 6rem 6rem;
    grid-template-rows: auto auto;
    margin-right: 1rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.ip-customer-information.highlight {
        background-color: #f9d428;
        color: #292a2d;
    }

        .ip-customer-information.highlight > .ip-customer-information-icon {
            filter: invert(11%) sepia(7%) saturate(706%) hue-rotate(187deg) brightness(92%) contrast(84%);
        }

        .ip-customer-information.highlight > .ip-customer-information-name {
            color: #666666;
        }

        .ip-customer-information.highlight > .ip-customer-information-value {
            color: #292a2d;
        }

.ip-customer-information-icon {
    display: grid;
    filter: invert(100%) sepia(7%) saturate(706%) hue-rotate(187deg) brightness(92%) contrast(84%);
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 2rem;
    padding: 0.5rem;
    width: 2rem;
}

.highlight .ip-customer-information-icon {
    filter: invert(85%) sepia(53%) saturate(898%) hue-rotate(336deg) brightness(107%) contrast(95%);
}

.ip-customer-information-name {
    color: #666666;
    display: grid;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    min-width: 8rem;
}

.ip-customer-information-value {
    display: grid;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
}

.ip-customer-information-remove {
    display: grid;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.ip-customer-information-setprimary {
    display: grid;
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
*/
/**/
/* bootstrap */
.btn:disabled {
    pointer-events: none;
}

.modal {
    z-index: 90;
}

.modal-backdrop {
    z-index: 80;
}

.input-label,
.form-label {
    font-family: Poppins,Arial;
}

.date-clear {
    position: absolute;
    right: 30px;
    line-height: 0;
    cursor: pointer;
    color: #c2c6c9;
    margin-top: -20px;
}

    .date-clear:hover {
        color: #180277;
    }

@media (max-width:1200px) or (max-height:680px) {
    /*.interaction-nav-pills {
        border-bottom: 0.5rem solid #2a3f8b;
        border-bottom-left-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
        border-top-right-radius: 0.25rem !important;
        border-top-left-radius: 0.25rem !important;
        margin: 0 !important;
        display: flex;
        flex-direction: row-reverse;
    }

    .interaction-pills {
        display: flex;
        flex-direction: column;
        margin-left: 0.5rem;
    }

    .interaction-pill {
        height: 4rem;
        margin-bottom: 0.5rem;
    }

    .interaction-pill-start {
        border-radius: 0;
        border-top-right-radius: 0.25rem !important;
    }

        .interaction-pill-start:after {
            border: none;
        }

    .interaction-pill-middle {
        border-radius: 0;
    }

        .interaction-pill-middle:before {
            border: none;
        }

        .interaction-pill-middle:after {
            border: none;
        }

    .interaction-pill-end {
        border-radius: 0;
    }

        .interaction-pill-end:before {
            border: none;
        }

    .interaction-pill-paths {
        background-color: #2a3f8b;
        border-top-left-radius: 0.25rem !important;
        display: flex;
        flex-direction: column;
        border-bottom: none;
        border-radius: 0;
        margin: 0;
        width: 0.5rem;
    }

    .interaction-pill-path {
        height: 4rem;
        margin-bottom: 0.5rem;
        min-width: initial;
        width: 0.5rem;
    }


    .interaction-pill-path-start,
    .interaction-pill-path-middle,
    .interaction-pill-path-end {
        margin-left: 0.5rem;
        width: 0.5rem;
    }

    .interaction-pill-path-start {
    }

        .interaction-pill-path-start:after {
            border-bottom-color: #2a3f8b !important;
            border-left-color: #2a3f8b !important;
            border-right-color: #2a3f8b !important;
            border-top-color: #2a3f8b !important;
        }

    .interaction-pill-path-middle {
    }

        .interaction-pill-path-middle:before {
            border-bottom-color: #2a3f8b !important;
            border-left-color: #2a3f8b !important;
            border-right-color: #2a3f8b !important;
            border-top-color: #2a3f8b !important;
        }

        .interaction-pill-path-middle:after {
            border-bottom-color: #2a3f8b !important;
            border-left-color: #2a3f8b !important;
            border-right-color: #2a3f8b !important;
            border-top-color: #2a3f8b !important;
        }

    .interaction-pill-path-end {
    }

        .interaction-pill-path-end:before {
            border-bottom-color: #2a3f8b !important;
            border-left-color: #2a3f8b !important;
            border-right-color: #2a3f8b !important;
            border-top-color: #2a3f8b !important;
        }*/




    .t {
    }

    /*.interaction-pill {
        height: 4rem;
    }

    .interaction-pill-paths {*/
    /*display: none;*/
    /*left: 0;
        margin: 0;
        position: absolute;
        top: 0;
        width: 0rem;
    }

    .interaction-pill-path {*/
    /*background-color: red;
        border-color: blue;*/
    /*}

    .interaction-pills {
        border-left: 0.25rem solid #f9d428;
        flex-wrap: wrap;
    }

    .interaction-pill-path-start,
    .interaction-pill-path-middle,
    .interaction-pill-path-end {
        background-color: #2a3f8b;
        height: 100%;
        margin-left: 0.25rem;
        position: absolute;
    }

    .interaction-pill-path-start,
    .interaction-pill-path-middle,
    .interaction-pill-path-end {
        height: 4rem;
        margin: 0;
        width: 1.25rem;
    }

    .interaction-pill-path-middle {
        left: -12.25rem;
        top: 5rem;
    }

        .interaction-pill-path-middle:before {
            border-left-color: transparent;
            border-bottom-color: transparent;
        }

        .interaction-pill-path-middle:after {
            border-bottom-color: transparent;
            border-left-color: transparent;
        }*/



    /*.interaction-pills:after {
            border-left: 0.25rem solid #f9d428;
            content: '';
            height: 500px;
            top: 200px;
            left: -0.25rem;
            border-image: linear-gradient(to bottom, #f9d428, rgba(0, 0, 0, 0)) 1 100%;
            position: absolute;
        }*/
    /*.interaction-pills.ip-success:after {
            border-left-color: green;
        }

    .interaction-pill:not(.active) {
        margin-left: 1rem;
    }

    .interaction-pill-start {
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        margin-bottom: 1rem;
    }

        .interaction-pill-start:after {
            border-bottom: none;
            border-left: none;
            border-top: none;
        }

    .interaction-pill-middle:before {
        border-bottom: none;
        border-left: none;
        border-top: none;
    }

    .interaction-pill-middle:after {
        border-bottom: none;
        border-left: none;
        border-top: none;
    }

    .interaction-pill-end {
        border-top-right-radius: 0;
        border-bottom-right-radius: 1rem;
    }

        .interaction-pill-end:before {
            border-bottom: none;
            border-left: none;
            border-top: none;
        }

    .interaction-pill:not(:first-child) {
        margin-top: 1rem;
    }

    .interaction-pills {
    }*/
}


/*
.loading-mask-40,
.loading-mask-80,
.loading-mask-160,
.loading-mask {
    color: transparent;
    background: linear-gradient(100deg, #dfe1e4 30%, #f6f7f8 50%, #dfe1e4 70%);
    background-size: 400%;
    animation: loading 1.2s ease-in-out infinite;
    border-radius: 5px;
    min-height: 40px;
    width: 100%;
}

    .loading-mask-40,
    .loading-mask-80,
    .loading-mask-160,
    .loading-mask > * {
        display: none !important;
    }

.loading-mask-40 {
    height: 40px;
}

.loading-mask-80 {
    height: 80px;
}

.loading-mask-160 {
    height: 160px;
}
*/

/* CHOICES */

.choices {
    border-radius: 0.25rem;
}

.ip-form-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #000;
}

.customer-container {
    width: 25rem;
}

@media (max-width: 900px) {
    .customer-container {
        width: 100%;
    }
}


.ip-table-page {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ip-table-page-controls {
}


.ip-detailslist {
}

    .ip-detailslist > dt,
    .ip-detailslist > dd {
        float: left;
    }

    .ip-detailslist > dt {
        clear: both;
        width: 10rem;
    }


table.borderless {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

    table.borderless td {
        border-top-style: none;
        border-left-style: none;
        border-right-style: none;
        border-bottom-style: none;
    }



.ip-modal {
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.ip-modal-close {
    background: none;
    border: none;
    color: #000;
    font-size: 2rem;
    height: 2rem;
    line-height: 2rem;
    width: 2rem;
}

    .ip-modal-close:hover {
        opacity: 0.8;
        cursor: pointer;
    }

.ip-modal-s > .ip-modal-content {
    width: 30rem !important;
}

.ip-modal-m > .ip-modal-content {
    width: 50rem !important;
}

.ip-modal-l > .ip-modal-content {
    width: 100% !important;
}

.ip-modal-content {
    background-color: #fff;
    border-radius: 0.25rem;
    margin: 2rem 1rem;
    padding: 1rem;
}

.ip-modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ip-modal-body {
    width: 100%;
}

.ip-modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

    .ip-modal-footer > button:not(:last-child) {
        margin-right: 1rem;
    }

.ip-customer-search {
    display: flex;
    flex-direction: column;
}

.ip-customer-search-nav {
    display: flex;
    flex-direction: row;
}

.ip-customer-search-controls {
    display: flex;
    flex-direction: row;
}

.ip-customer-search-results {
    display: flex;
    flex-direction: row;
}

.correspondence-result {
    margin-bottom: 15px;
    width: 100%;
    background-color: #f6f8fb;
}

.correspondence-actions {
    background-color: #2a3f8b;
    color: #ffffff;
    display: block;
    overflow: hidden;
}

    .correspondence-actions > * {
        display: inline-block;
        float: left;
    }

    .correspondence-actions > p {
        padding: 0 15px;
        background-color: #496cac;
    }

    .correspondence-actions > button {
        height: 19px;
        margin-left: 10px;
        padding: 0 8px;
        border: 0;
        line-height: 20px;
        background-color: #2a3f8b;
        color: #ffffff;
    }

        .correspondence-actions > button:hover {
            background-color: #496cac;
            text-decoration: underline;
        }

        .correspondence-actions > button:disabled {
            color: #ccc;
            background-color: transparent !important;
            text-decoration: none !important;
            cursor: not-allowed;
        }

.correspondence-header {
    height: 20px;
    width: 100%;
    background-color: #e9ecef;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

    .correspondence-header:hover {
        background-color: #cccccc;
    }

.correspondence-collapse {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    background-size: 14px 14px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("/images/icons/contract-button.svg");
}

.correspondence-header-expanded .correspondence-collapse {
    background-image: url("/images/icons/expand-button.svg");
}

.correspondence-header-expanded + div.correspondence-body {
    display: block;
}

.correspondence-direction {
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    background-color: #cccccc;
    float: right;
    width: 100px;
    text-align: center;
}

.correspondence-case {
    height: 20px;
    display: inline-block;
    background-color: #2a3f8b;
    float: right;
    width: 20px;
}

    .correspondence-case div {
        width: 20px;
        height: 20px;
        background-image: url("/images/icons/ticket.svg");
        background-size: 14px 14px;
        background-position: center center;
        background-repeat: no-repeat;
        filter: invert(99%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
    }

.correspondence-date {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    text-align: right;
    float: left;
    font-weight: bold;
    width: 160px;
    text-align: left;
}

.correspondence-subject {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    text-align: right;
    float: left;
    font-weight: normal;
    width: calc(100% - 300px);
    text-align: left;
}

.correspondence-body {
    display: none;
    border-radius: 0 !important;
}

    .correspondence-body .ip-success {
        margin-bottom: 1rem;
    }

.correspondence-message iframe {
    border: 0;
    width: 100%;
    min-height: 300px;
    background: transparent !important;
    background-color: transparent !important;
}

.correspondence-contacts div {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    border-bottom: 1px dotted #cccccc;
}

.correspondence-contacts-label {
    display: inline-block;
    height: 20px;
    width: 70px;
    float: left;
    padding-left: 15px;
}

.correspondence-button {
    margin: 15px 0 0 15px;
    padding: 0;
}

.correspondence-message {
    padding: 15px;
}

.correspondence-attachments {
    width: 100%;
    height: 20px;
}

.correspondence-forward {
    display: inline-block;
    float: left;
    width: 79px;
    height: 20px;
    line-height: 20px;
    background-color: #2a3f8b;
    border-right: 1px dotted #ffffff;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .correspondence-forward:hover {
        background-color: #3f559a;
    }

.correspondence-attachments-icon {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    background-color: #2a3f8b;
    background-image: url("/images/icons/attach.svg");
    background-size: 14px 14px;
    background-position: center center;
    background-repeat: no-repeat;
}

.correspondence-attachments-items {
    display: inline-block;
    width: calc(100% - 100px);
    height: 20px;
    background-color: #e9ecef;
}

    .correspondence-attachments-items div {
        display: inline-block;
        height: 20px;
        float: left;
        line-height: 20px;
        font-size: 14px;
        margin-left: 10px;
    }

.ip-interaction-audit {
    background-color: #f5f5f5;
    border-radius: 0.25rem;
    color: #000;
    padding: 1rem;
}

    .ip-interaction-audit:not(:last-child) {
        margin-bottom: 1rem;
    }


.ip-interaction-version {
    min-height: 2rem;
}

.ip-interaction-version-nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1rem 0;
}

.attachment-result {
    width: 100%;
    display: block;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 6px;
    padding-bottom: 18px;
    padding-left: 15px;
}

    .attachment-result a {
        display: inline-block;
        line-height: 20px;
        float: left;
    }

.attachment-delete {
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin-left: 15px;
    background: url('/images/icons/delete.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    user-select: none;
    border-radius: 10px;
    border: 0 !important;
    outline: 0 !important;
    background-color: transparent;
    display: inline-block;
}

    .attachment-delete:hover {
        background-color: #ffc0cb;
    }

.nav-tabs a img {
    height: 16px;
    width: 16px;
    display: inline-block;
}

.nav-tabs a p {
    margin-left: 10px;
    line-height: 16px;
    height: 16px;
    padding: 0 0 0 10px;
    margin: 0;
    display: none;
}

.nav-tabs a.active p {
    display: inline-block;
}

.nav-tabs button img {
    height: 16px;
    width: 16px;
    display: inline-block;
}

.nav-tabs button:disabled img {
    filter: invert(69%) sepia(99%) saturate(4%) hue-rotate(322deg) brightness(97%) contrast(94%);
}

.nav-tabs button p {
    margin-left: 10px;
    line-height: 16px;
    height: 16px;
    padding: 0 0 0 10px;
    margin: 0;
    display: inline-block;
    color: #000000;
}

.nav-tabs button.active p {
    display: inline-block;
    color: #2a3f8b;
}

.ip-interaction-version-nav {
    border-bottom: 1px solid #dee2e6;
    margin-top: 0;
    align-items: baseline;
}

    .ip-interaction-version-nav button {
        background-color: transparent !important;
        color: #2a3f8b !important;
        border: none;
        padding: 0 !important;
        margin: 0 1rem !important;
        outline: none !important;
    }

        .ip-interaction-version-nav button:hover {
            color: #111111 !important;
        }

        .ip-interaction-version-nav button:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        .ip-interaction-version-nav button:disabled {
            cursor: not-allowed !important;
        }

.ip-interaction-version-nav-details {
    text-align: center;
}

.ip-interaction-version-nav > button {
    margin: 0 1rem;
}

.ip-interaction-version-nav-details p {
    padding: 3px 8px;
    display: inline-block;
    background-color: #f9d428;
    border-radius: 4px;
    color: #000000;
    font-size: 14px;
}

    .ip-interaction-version-nav-details p.archive {
        background-color: #cccccc;
    }

.ip-interaction-version-nav-details small {
    font-size: 60%;
}

.navbar {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.navbar-collapse {
    background-color: #efefef;
    padding-left: 0px;
}

.nav-item a {
    padding-left: 20px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

    .nav-item a:hover {
        font-weight: bold;
        text-decoration: underline !important;
    }

/*.queue-title-outer div {
    overflow-y: hidden;
}*/

.nav-disabled {
    cursor: default !important;
    color: #cccccc !important;
    border: none !important;
}

.navbar-nav > li > button {
    width: 100%;
    text-align: left;
}

button.nav-link {
    border: none;
    color: #666666;
    padding-left: 35px !important;
    padding-top: 13px !important;
    padding-bottom: 9px !important;
}

    button.nav-link:hover {
        text-decoration: underline;
        font-weight: normal;
        background-color: #e5e5e5;
    }

    button.nav-link:disabled {
        text-decoration: none !important;
        font-weight: normal !important;
        cursor: default !important;
        color: #cccccc !important;
        border: none !important;
    }

.nav-tabs button {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 16px !important;
    color: #007bff !important;
}

    .nav-tabs button:hover {
        font-weight: normal !important;
    }

.stripe {
    background-color: #f5f5f5;
}

#form_customer_cases div {
    width: 100%;
    padding: 10px;
    user-select: none;
    cursor: pointer;
}

    #form_customer_cases div:hover {
        background-color: #cccccc;
    }

    #form_customer_cases div p {
        margin: 0;
    }




/* helpers */

.ip-disabled:hover {
    cursor: not-allowed !important;
}

.gg-chevron-left,
.gg-chevron-right {
    border: 0.25rem solid transparent;
    border-radius: 100px;
    box-sizing: border-box;
    display: block;
    width: 22px;
    position: relative;
    height: 22px;
}

    .gg-chevron-left:after,
    .gg-chevron-right:after {
        border-bottom: 0.25rem solid;
        box-sizing: border-box;
        content: "";
        display: block;
        height: 2rem;
        position: absolute;
        top: -0.5rem;
        width: 2rem;
    }

    /*.gg-chevron-left:before {
        border-bottom: 0.25rem solid;
        content: "";
        left: 1rem;
        position: absolute;
        top: 1.75rem;
        width: 1rem;
    }*/

    .gg-chevron-left:after {
        border-left: 0.25rem solid;
        transform: rotate(45deg);
        left: 0rem;
    }

    /*.gg-chevron-right:before {
        border-bottom: 0.25rem solid;
        content: "";
        right: 1rem;
        position: absolute;
        top: 1.75rem;
        width: 1rem;
    }*/

    .gg-chevron-right:after {
        border-right: 0.25rem solid;
        transform: rotate(-45deg);
        right: 0;
    }






.ip-customer-search {
    display: flex;
    flex-direction: column;
}

.ip-customer-search-form {
    display: flex;
    flex: 0 0 auto;
}

.ip-customer-search-results {
    display: flex;
    flex: 1 0 auto;
}

.ip-customer-search-pagination {
    display: flex;
    flex: 0 0 auto;
}


.ip-message {
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: 1px;
    color: var(--text-color);
    padding: 1rem;
}

.ip-message-icon {
    height: auto;
    vertical-align: middle;
    width: 1.5rem;
    filter: brightness(0%);
}

::-webkit-input-placeholder {
    color: #6C7575;
    font-weight: bold;
}


.choices__placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}
/*
.choices__inner,
.choices__list,
.choices__item {
    background-color: #fff !important;
}
*/

.form-control {
    background-color: #f9f9f9 !important;
}

.ip-loading {
    animation: var(--loading-animation);
    background: var(--loading-background);
    background-size: 400%;
    border-radius: 5px;
    color: transparent;
    display: inline-block;
    margin: 0;
    min-height: 1.75rem;
    min-width: 5rem;
    padding: 0;
    width: 100%;
}

    .ip-loading > * {
        display: none !important;
    }

.ip-loading-spinner {
    animation: spin 1s infinite;
}

.ip-icon {
}

.ip-icon-16 {
    width: 1rem;
    height: auto;
}


.interaction-pill-text .ip-icon {
    margin: -0.25rem 0.5rem 0 0;
    filter: brightness(0%) invert(100%);
}

.ip-results {
    background-color: #fff;
    border-radius: 0.25rem;
    color: #000;
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: 14rem;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 3rem;
}

.ip-result {
    align-items: center;
    background: none;
    border: none;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}

.ip-results > .ip-result:not(:last-child) {
    margin-bottom: 0.5rem;
}

.ip-results > .ip-result:hover {
    cursor: pointer;
    opacity: 0.8;
}

.ip-result-value {
    display: flex;
    /*flex: 1 0 auto;*/
}

.ip-result-controls {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
}

    .ip-result-controls > button {
        margin-left: 1rem;
    }

.ip-results .info-customer:not(:last-child) {
    margin-bottom: 1rem;
}

#interaction_nav_next, #interaction_nav_previous, #interaction_nav_save {
    display: none;
}

.queue-item-type {
    width: 20px;
    background-color: #dddddd;
    display: inline-block;
    float: left;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.9rem;
}

.queue-item-type-small {
    font-size: 0.7rem !important;
}

.queue-item-type-task {
    background-color: #dddddd;
}

.queue-item-type-case {
    background-color: #f9d428;
}

.queue-item-type-overdue {
    background-color: #d33f4a;
    left: 20px;
    color: #f1f1f1;
    font-size: 0.8rem;
}

.queue-item-type-overdue-urgent {
    left: 40px;
}

.queue-item-type-urgent {
    background-color: #f9d428;
    left: 20px;
    color: #000000;
    font-size: 0.8rem;
}

.queue-item-type p {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    position: absolute;
    top: 50%;
    left: 50%;
}

.ip-hover:hover {
    cursor: pointer;
    opacity: 0.8;
}

.sla {
    width: 100%;
}

    .sla p {
        width: 100%;
        display: flex;
        padding: 0;
        margin: 10px 0 0 0;
        color: #999999;
        font-weight: bold;
        font-size: 12px;
    }

    .sla hr {
        width: 100%;
        display: flex;
        padding: 0;
        margin: 0 0 5px 0;
    }

.sla-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.sla-progress-outer {
    display: flex;
    flex-grow: 1;
    background-color: #dddddd;
    border-radius: 5px;
}

.sla-progress-inner {
    background-color: #f9d428;
    border-radius: 5px;
}

.sla-overdue {
    background-color: #ff4136;
}

.sla-remaining {
    margin-left: 15px;
    font-weight: bold;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}

.ip-form-error {
}

.ip-form-directory {
}

.ip-form-directory-queues {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ip-form-directory-queue {
    padding-left: 1.5rem;
    position: relative;
}

    .ip-form-directory-queue:after {
        background-image: url(/images/icons/caret-up.svg);
        background-size: 16px 16px;
        display: inline-block;
        width: 16px;
        height: 16px;
        content: "";
        position: absolute;
        top: 0.65rem;
        left: 0;
    }

    .ip-form-directory-queue.ip-collapsed:after {
        transform: rotate(90deg);
    }

    .ip-form-directory-queue.ip-expanded:after {
        transform: rotate(180deg);
    }

.ip-form-directory-queue-name {
    display: inline-block;
    margin: 0;
    padding: 0.5rem;
}

    .ip-form-directory-queue-name:hover {
        background-color: #dee4f0 !important;
        border-radius: 0.25rem;
        color: #000;
        cursor: pointer;
        /*opacity: 0.8;*/
    }

.ip-form-directory-forms {
    list-style: none;
    margin: 0 0 1rem 1rem;
    padding: 0;
}

.ip-form-directory-form {
}
    /*
    .ip-form-directory-form:hover {
        background-color: #ccc;
        border-radius: 0.25rem;
        color: #000;
        cursor: pointer;
        opacity: 0.8;
    }
*/
    .ip-form-directory-form > span {
        display: inline-block;
        padding: 0.25rem 0.5rem;
    }

        .ip-form-directory-form > span:hover {
            background-color: #dee4f0 !important;
            border-radius: 0.25rem;
            color: #000;
            cursor: pointer;
            /*opacity: 0.8;*/
        }

.ip-form-directory-filter {
    margin-bottom: 1rem;
}

.ip-form-directory-none {
    color: #888;
    display: block;
    padding: 0.25rem 0.5rem;
}

.message {
    width: 100%;
    background-color: #e9ffe8;
    border-radius: 10px;
    overflow: hidden;
}

.message-info {
    background-color: #eaffff;
}

.message-alert {
    background-color: #feffd9;
}

.message-urgent {
    background-color: #fde7e7;
}

.message div.message-content {
    display: none;
}

.message-message {
    color: #666666;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
}

    .message-message b {
        color: #000000;
    }

    .message-message:hover {
        background-color: #d6edda;
    }

.message-info div.message-message:hover {
    background-color: #d0e4fe;
}

.message-alert div.message-message:hover {
    background-color: #fdf3cf;
}

.message-urgent div.message-message:hover {
    background-color: #f5d8da;
}

.message.whats-new-toggle {
    display: none !important;
}

.message.message-toggle {
    display: flex;
    flex: 1;
    flex-direction: column;
}

    .message.message-toggle .message-message {
        background-color: #d6edda;
    }

.message-info.message-toggle .message-message {
    background-color: #d0e4fe;
}

.message-alert.message-toggle .message-message {
    background-color: #fdf3cf;
}

.message-urgent.message-toggle .message-message {
    background-color: #f5d8da;
}

.message.message-toggle div.message-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: scroll;
    padding: 20px;
}

    .message.message-toggle div.message-content::-webkit-scrollbar-track {
        background: #e9ffe8;
    }

.message-info.message-toggle div.message-content::-webkit-scrollbar-track {
    background-color: #eaffff;
}

.message-alert.message-toggle div.message-content::-webkit-scrollbar-track {
    background-color: #feffd9;
}

.message-urgent.message-toggle div.message-content::-webkit-scrollbar-track {
    background-color: #fde7e7;
}

.home-outer {
    flex-direction: column;
    display: flex;
    height: 100%;
}

.home-content {
    margin: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .home-content.whats-new-toggle {
        display: none !important;
    }

    .home-content.message-toggle {
        display: none !important;
    }

.whats-new {
    width: 100%;
    background-color: #eeeeee;
    border-radius: 10px;
    overflow: hidden;
}

    .whats-new.message-toggle {
        display: none !important;
    }

    .whats-new div.whats-new-content {
        display: none;
    }

.whats-new-message {
    color: #666666;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
}

    .whats-new-message b {
        color: #000000;
    }

    .whats-new-message:hover {
        background-color: #dddddd;
    }

.whats-new.whats-new-toggle {
    display: flex;
    flex: 1;
    flex-direction: column;
}

    .whats-new.whats-new-toggle .whats-new-message {
        background-color: #dddddd;
    }

    .whats-new.whats-new-toggle div.whats-new-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: scroll;
        padding: 20px;
    }

        .whats-new.whats-new-toggle div.whats-new-content::-webkit-scrollbar-track {
            background: #eeeeee;
        }

.home-quick-actions {
    display: flex;
    flex-direction: row;
    width: 100%;
}

    .home-quick-actions button {
        flex: 1;
        margin-right: 20px;
        border-radius: 10px;
        text-align: center;
        vertical-align: center;
    }

        .home-quick-actions button:hover {
            text-decoration: underline;
        }

        .home-quick-actions button img {
            filter: invert(99%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }

        .home-quick-actions button:last-of-type {
            margin-right: 0;
        }

.home-tasks-content {
    flex: 1;
    height: 100%;
    display: flex;
    margin-top: 20px;
    flex-direction: row;
}

.home-user-stats {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 100%;
}

.home-assigned-content {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.home-assigned-content-content {
    width: 100%;
    flex: 1 0 0;
    overflow-y: auto;
    border-radius: 5px;
}

    .home-assigned-content-content table thead th {
        border: 0;
        font-family: PoppinsBold;
        background-color: #323e8a;
        color: #fff;
        cursor: pointer;
    }

        .home-assigned-content-content table thead th.tablehead-caret-ASC::after {
            background-image: url("/images/icons/caret-up.svg");
            background-size: 16px 16px;
            display: inline-block;
            width: 16px;
            height: 16px;
            content: "";
            position: relative;
            top: 2px;
            left: 5px;
        }

        .home-assigned-content-content table thead th.tablehead-caret-DESC::after {
            background-image: url("/images/icons/caret-down.svg");
            background-size: 16px 16px;
            display: inline-block;
            width: 16px;
            height: 16px;
            content: "";
            position: relative;
            top: 2px;
            left: 5px;
        }

        .home-assigned-content-content table thead th:hover {
            background-color: #474eaf;
        }

        .home-assigned-content-content table thead th:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 3px;
        }

    .home-assigned-content-content table tbody tr td {
        border: 0;
    }

    .home-assigned-content-content table tbody tr {
        border: 0;
    }

        .home-assigned-content-content table tbody tr:hover {
            text-decoration: underline;
            background-color: #dee4f0 !important;
            cursor: pointer;
        }

        .home-assigned-content-content table tbody tr:nth-child(even) {
            background-color: #f6f8fb;
        }

    .home-assigned-content-content table {
        width: 100%;
        border: 0;
        border-spacing: 0;
    }

        .home-assigned-content-content table thead {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1;
            background: #323e8a;
        }

.home-user-stats-content {
    width: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 5px;
    flex-direction: column;
}

    .home-user-stats-content:last-of-type {
        margin-bottom: 0;
    }

    .home-user-stats-content div {
        display: block;
        font-weight: bold;
        width: 100%;
        text-align: center;
        background-color: #dddddd;
        font-size: 0.9rem;
        padding: 5px 0;
    }

    .home-user-stats-content table {
        flex: 1;
        text-align: center;
        border: 0;
        background-color: #efefef;
    }

        .home-user-stats-content table tr {
            border: 0;
        }

            .home-user-stats-content table tr:first-of-type {
                font-size: 3rem;
                vert-align: bottom;
            }

            .home-user-stats-content table tr:last-of-type {
                font-size: 0.8rem;
                vert-align: top;
            }

            .home-user-stats-content table tr td {
                border: 0;
            }

.home-outer hr {
    width: 100%;
    margin: 0 0 10px 0;
    background-color: #eeeeee;
}

/* HELPERS */
.ip-hidden {
    display: none !important;
}

.ip-validation {
    border-radius: 0.25rem;
    display: inline-block;
    margin: 0.5rem 0;
    padding: 0.5rem;
}

    .ip-validation.ip-danger {
        color: red;
    }

.text-always p {
    display: inline-block !important;
}

p[data-validator] {
    color: red;
}

/*
    bootstrap multiselect
*/
.multiselect-filter > .form-control {
    margin-left: -0.75rem !important;
}

.multiselect-filter > i {
    color: white;
}

.multiselect-container.dropdown-menu {
    max-height: 20rem;
    overflow-y: auto;
}






.dashboard2 {
    display: grid;
    grid-template-columns: 10rem auto;
    grid-template-rows: 5rem 5rem auto;
}

.dashboard2-title {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.dashboard2-menu {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
}

.dashboard2-sidebar {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.dashboard2-content {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.print-header {
    -webkit-print-color-adjust: exact;
    background-color: #dddddd;
    width: 100%;
    font-weight: bold;
    padding: 5px;
    display: none;
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 16pt
}

.print-headline {
    display: none;
    margin-bottom: 30px;
}

.print-headline-text {
    display: inline-block;
    margin: 7px
}

.print-logo {
    position: relative;
    display: inline-block;
    float: left;
    background: url("/images/ntc_digital_logo_68.png") center center no-repeat;
    background-size: 100%;
    width: 68px !important;
    height: 68px !important;
    -webkit-print-color-adjust: exact;
}

.printer-details {
    padding-top: 13px;
    float: right;
}

    .printer-details p {
        text-align: right;
        margin: 0;
    }

.ip-notification {
    align-items: flex-start;
    background-color: var(--background-color);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    left: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
}

.ip-notification-content {
    background-color: var(--input-background-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
}

.ip-notification-icon {
    filter: brightness(0) invert(1);
}

.ip-notification-title {
    margin: 0;
}

.ip-notification-message {
    margin: 0;
}

    .ip-notification-message:not(:last-child) {
        margin-bottom: 1rem;
    }

.ip-notification-control {
}

.ip-notification-texts {
}

.ip-notification-text {
    margin: 0;
}

.ip-notification-highlight {
    border-radius: 0.25rem;
    background-color: var(--text-color);
    color: var(--background-color-highlight);
    display: inline-flex;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
}

.ip-notification-timestamp {
    margin: 0;
}

.ip-height-small {
    height: 2rem;
    max-height: 2rem;
    min-height: 2rem;
}

.ip-height-medium {
    height: 8rem;
    max-height: 8rem;
    min-height: 8rem;
}

.ip-invisible {
    visibility: hidden !important;
}

.ip-autocomplete-results {
    border: none;
    margin-top: 1rem;
    table-layout: fixed;
    width: 100%;
}

    .ip-autocomplete-results > thead > tr {
    }

        .ip-autocomplete-results > thead > tr > th {
            background-color: var(--dark-primary-main);
            border: none;
            color: var(--dark-foreground);
        }

            .ip-autocomplete-results > thead > tr > th:first-child {
                border-top-left-radius: 0.25rem;
                border-bottom-left-radius: 0.25rem;
            }

            .ip-autocomplete-results > thead > tr > th:last-child {
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;
            }

    .ip-autocomplete-results > tbody > tr > td {
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.ip-loading-inline {
    animation: spin 1s infinite;
    filter: invert(0%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
    height: auto;
    position: absolute;
    right: 0.25rem;
    top: 5.3rem;
    width: 2rem;
    z-index: 1000;
}

.whatsnew-highlight {
    width: 100%;
    border: 3px solid #e8e8e8;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: default;
    user-select: none;
}

    .whatsnew-highlight:hover {
        background-color: aliceblue;
    }

.whatsnew-highlight-info {
    width: calc(100% - 120px);
    display: inline-block;
    float: left;
    padding: 10px;
}

.whatsnew-highlight-image {
    width: 120px;
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.whatsnew-highlight-title {
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.whatsnew-highlight-subtitle {
    font-size: 10pt;
    padding: 0;
    margin: 0 0 10px 0;
}

.whatsnew-highlight-info table {
    width: calc(100% - 100px);
    border: none !important;
    outline: none !important;
}

    .whatsnew-highlight-info table tr th {
        color: #999999 !important;
        font-size: 8pt;
        font-weight: bold;
        background-color: transparent !important;
        border: none !important;
        outline: none !important;
        padding: 0 !important;
    }

        .whatsnew-highlight-info table tr th:nth-child(1) {
            width: 150px;
        }

        .whatsnew-highlight-info table tr th:nth-child(2) {
            width: 200px;
        }

    .whatsnew-highlight-info table tr td {
        border: none !important;
        outline: none !important;
        padding: 0 !important;
    }

.sidebar-highlight > div.whatsnew-highlight {
    display: flex;
    cursor: pointer;
    border-color: #7f8fac;
}

    .sidebar-highlight > div.whatsnew-highlight:hover {
        background-color: #496cab;
    }

    .sidebar-highlight > div.whatsnew-highlight > div.whatsnew-highlight-info table tr th {
        color: #cccccc !important;
    }

    .sidebar-highlight > div.whatsnew-highlight > div.whatsnew-highlight-info table tr td.info-pills > div {
        color: #000000;
    }

.queue-filters-advanced-outer {
    width: 100%;
}

.queue-filters-advanced {
    width: 100%;
    display: flex;
    flex-direction: row;
}

    .queue-filters-advanced div {
        /*display: inline-block;
    float: left;
    min-width: 20%;
    width: 20%;*/
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

        .queue-filters-advanced div:last-of-type {
            margin-right: 0 !important;
        }

        .queue-filters-advanced div > * {
            width: 100%;
        }

        .queue-filters-advanced div > p {
            margin-bottom: 3px;
            padding-bottom: 0;
        }

        .queue-filters-advanced div > select {
            padding: 3px;
        }

        .queue-filters-advanced div > input {
            padding: 3px;
            border: 1px solid #000000;
        }

            .queue-filters-advanced div > input:disabled {
                border-color: rgba(118, 118, 118, 0.3) !important;
            }

.queue-filters-advanced-btngroup {
    flex: none !important;
    width: 100px !important;
    min-width: 100px !important;
}

.ip-section-column > .choices {
    margin-bottom: 0;
}

.queue-rules {
    width: 100%;
}

.interaction-details-dates {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.interaction-details-date {
}

.ip-gizmo-locator-popup-table {
    border: none;
    border-spacing: 0;
}

    .ip-gizmo-locator-popup-table td {
        border: none;
        font-size: 0.75rem;
        vertical-align: top;
    }

        .ip-gizmo-locator-popup-table td:first-child {
            font-weight: bold;
        }

.ip-interaction-view-control {
    /*border-bottom: 1px solid #666;*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

    .ip-interaction-view-control > h6 {
        padding-right: 2rem;
        /*width: 15rem;*/
    }

.ip-interaction-view-answer {
    /*flex: 1 1 25rem;*/
    /*min-width: 25rem;*/
}

    .ip-interaction-view-answer > p {
        white-space: pre-wrap;
    }

.ip-interaction-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
}

.ip-interaction-view-body {
    flex: 1 0 0;
    height: 100%;
    overflow-y: scroll;
    padding-right: 2rem;
}

.ip-interaction-view-menu {
    flex: 0 0 20rem;
    border-left: 2px solid #cccccc;
    height: 100%;
    overflow-y: auto;
    padding-left: 1rem;
}

@media (max-width:1200px) {
    .ip-interaction-view-body {
        padding-right: 0;
        flex-basis: 100%;
    }

    .ip-interaction-view-menu {
        border-left: none;
        flex-basis: 100%;
        padding-left: 0;
        height: 100%;
    }

    .ip-interaction-view-control > h6 {
        padding-right: 0;
        width: 100%;
    }

    .ip-interaction-version-nav {
        justify-content: space-between;
    }
}





.ip-identity {
    height: 100%;
    position: relative;
    width: 100%;
}

    .ip-identity > .ip-identity-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        padding-left: 0.5rem;
        width: 100%;
    }

        .ip-identity > .ip-identity-card[data-mode="Minimal"] {
            justify-content: center;
        }

        .ip-identity > .ip-identity-card > .ip-identity-card-icon {
            display: flex;
            flex-direction: row;
            margin-right: 0.5rem;
        }

            .ip-identity > .ip-identity-card > .ip-identity-card-icon > img {
                height: auto;
                width: 1.25rem;
            }

            .ip-identity > .ip-identity-card > .ip-identity-card-icon > span {
                display: none;
            }

        .ip-identity > .ip-identity-card > .ip-identity-card-name {
            align-items: center;
            display: flex;
            flex: calc(100% - 3rem) 0 0;
            flex-direction: row;
            font-size: 1rem;
            margin-right: 0.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .ip-identity > .ip-identity-card > .ip-identity-card-name > .ip-identity-card-value {
                font-weight: bold;
            }

        .ip-identity > .ip-identity-card > .ip-identity-card-dob {
            align-items: center;
            display: flex;
            flex-direction: row;
            font-size: 0.8rem;
            margin-right: 0.5rem;
        }

        .ip-identity > .ip-identity-card > .ip-identity-card-address {
            align-items: center;
            display: flex;
            flex-direction: row;
            font-size: 0.8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 18rem;
        }

            .ip-identity > .ip-identity-card > .ip-identity-card-address > .ip-identity-card-value {
                width: 18rem;
            }

        .ip-identity > .ip-identity-card .ip-identity-card-value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 8rem;
        }

.ip-identity-popup {
    background-color: #2a3f8b;
    border-radius: var(--border-radius);
    color: var(--input-background-color);
    display: flex;
    flex-direction: column;
    left: -1.5rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    position: absolute;
    top: calc(100% + 1rem);
    width: 22rem;
    z-index: 100000;
    -webkit-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 50px 0px rgba(0,0,0,0.75);
}

    .ip-identity-popup small {
        display: inline-block;
        width: 4rem;
    }

    .ip-identity-popup > .ip-identity-card-icon {
    }

        .ip-identity-popup > .ip-identity-card-icon > img {
            filter: invert(100%) sepia(1%) saturate(5%) hue-rotate(340deg) brightness(100%) contrast(104%) !important;
            height: 2rem;
            width: 2rem;
            vertical-align: top;
        }

        .ip-identity-popup > .ip-identity-card-icon > b {
            font-size: 1.5rem;
            margin-left: 0.5rem;
            vertical-align: top;
        }

    .ip-identity-popup > .ip-identity-card-name {
        font-size: 1.25rem;
        margin: 0.5rem 0;
        inline-size: 100%;
        overflow-wrap: break-word;
    }

    .ip-identity-popup > .ip-identity-card-dob {
    }

    .ip-identity-popup > .ip-identity-card-address {
    }


/*
.ip-identity-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    padding-left: 0.5rem;
    width: 100%;
}

    .ip-identity-card[data-mode="Minimal"] {
        justify-content: center;
    }

.ip-identity-card-icon {
    display: flex;
    flex-direction: row;
    margin-right: 0.5rem;
}

    .ip-identity-card-icon > img {
        height: auto;
        width: 1.25rem;
    }

.ip-identity-card-name {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    margin-right: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 8rem;
}

.ip-identity-card-dob {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    margin-right: 0.5rem;
}

.ip-identity-card-address {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 18rem;
}

    .ip-identity-card-address > .ip-identity-card-value {
        width: 18rem;
    }

.ip-identity-card-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 8rem;
}
*/


.ip-label {
    color: #121314;
}



/*li.no-results {
    display: none !important;
}

.has-no-choices {
    display: none !important;
}*/


.ip-validation {
}

input.ip-validation-error {
    background-color: #ffdbdd !important;
    color: #000 !important;
}

div.ip-validation-error {
    background-color: #ff0000 !important;
    color: #fff !important;
}








.ntc-environments {
    display: flex;
    flex-direction: column;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.ntc-environment {
    display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    font-weight: bold;
    height: 1rem;
    line-height: 1rem;
    justify-content: center;
}

.ntc-environment-local {
    background-color: #fff;
}

.ntc-environment-dev {
    background-color: #fff;
}

.ntc-environment-test {
    background-color: #fff;
}

.ntc-environment-pre {
    background-color: #fff;
}

.ntc-environment-live {
    background-color: transparent;
    color: transparent;
}

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

    .ntc-datepicker:hover {
        cursor: pointer !important;
    }


.ntc-table {
    width: 100%;
}

.form-control[readonly="readonly"] {
    cursor: default;
}

.slots-timeline-outer {
    width: 100%;
    border-radius: 15px;
    background-color: #efefef;
    padding: 10px;
    height: 100%;
    position: absolute;
}

    .slots-timeline-outer table {
        width: 100%;
        table-layout: fixed;
        border: 0;
        outline: 0;
        height: 100%;
    }

        .slots-timeline-outer table thead tr {
            background-color: transparent;
            border: 0;
            outline: 0;
        }

            .slots-timeline-outer table thead tr th {
                background-color: transparent;
                border: 0;
                outline: 0;
                color: #000000;
                text-align: center;
            }

                .slots-timeline-outer table thead tr th:first-of-type {
                    text-align: left;
                }

                .slots-timeline-outer table thead tr th:last-of-type {
                    text-align: right;
                }

                .slots-timeline-outer table thead tr th select {
                    min-width: 200px;
                    max-width: 500px;
                }

                .slots-timeline-outer table thead tr th span {
                    color: #999999;
                }

        .slots-timeline-outer table tbody tr td {
            background-color: transparent;
            border: 0;
            outline: 0;
            color: #000000;
        }

            .slots-timeline-outer table tbody tr td > div {
                background-color: #ffffff;
                border: 0;
                outline: 0;
                color: #000000;
                text-align: center;
                min-height: 100px;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                height: 100%;
            }

            .slots-timeline-outer table tbody tr td div > div.day-name {
                width: 26px;
                background-color: #f9d428;
                display: inline-block;
                float: left;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                font-size: 0.9rem;
                border-radius: 0;
            }

                .slots-timeline-outer table tbody tr td div > div.day-name p {
                    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                }

.slots-day {
    margin-left: 26px;
    width: calc(100% - 26px);
    height: calc(100% - 26px);
    overflow-y: auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    user-select: none;
}

    .slots-day > div {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        color: #bbbbbb;
    }

        .slots-day > div.slot {
            min-height: 100px;
            border-bottom: 1px dotted #cccccc;
            cursor: pointer;
            color: #000000;
        }

            .slots-day > div.slot:hover {
                background-color: #f6f8fb;
            }

/*.slots-day > div.slot:last-of-type {
        border-bottom: none;
    }*/

.slot {
    background-color: #FFFFFF;
}

select > option:disabled {
    color: #000000;
    background-color: #dddddd;
}

.btn-task-td {
    position: relative;
}

.btn-task-group {
    width: 100%;
    height: 100%;
    display: flex;
    user-select: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
}

.btn-task {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    min-height: 23px;
    background-color: transparent;
    border: none;
}

    .btn-task:hover {
        background-color: #f9d428;
    }

.btn-task-preview {
    background-image: url('/images/icons/magnifying-glass.svg');
}

.btn-task-close {
    background-image: url('/images/icons/check.svg');
}

.btn-task-unassign {
    background-image: url('/images/icons/bin.svg');
}

.btn-task-urgent {
    background-image: url('/images/icons/exclamation.svg');
}

.draggable {
    cursor: grab !important;
}

.full-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    background-color: #333333;
    pointer-events: none;
}

.drag-index {
    position: relative;
    z-index: 1500;
}

.never-drag-index {
    position: relative;
    z-index: 1 !important;
}

.btn-week {
    cursor: pointer;
}

    .btn-week:hover {
        text-decoration: underline;
    }

.new-slot {
    position: absolute;
    bottom: 0;
    left: 26px;
    width: calc(100% - 26px);
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    background-color: #f6f8fb;
}

    .new-slot:hover {
        background-color: #dddddd;
    }

.hide-me {
    display: none;
}

.worklist-start {
}

    .worklist-start .hide-me {
        display: block;
    }

    .worklist-start img.hide-me {
        display: inline;
        margin-top: 30px;
    }

    .worklist-start .show-me {
        display: none;
    }

    .worklist-start select.change-me {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 30px;
        width: 80%;
        max-width: none;
    }

    .worklist-start th.change-me {
        background-color: #f6f8fb;
        border-radius: 5px;
        text-align: center;
    }

    .worklist-start .slots-timeline-outer {
        background: none;
    }

.slot-task-noaction button.btn-task {
    display: none;
}

.slot-task-noaction tr {
    cursor: pointer !important;
}

.account-pin-description {
    margin: 0;
    padding: 0;
}

.account-pin-helper {
    /*font-style: italic;*/
    color: #aaa;
    margin: 0;
    padding: 0;
}

.account-pin-inputs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1rem auto 1rem auto;
    width: 15rem;
}

.account-pin-input {
    margin: 0 0.5rem;
    text-align: center;
    width: 3rem;
}

.account-pin-validation {
    color: red;
}

.account-pin-validation-message {
    margin: 0 0 1rem 0;
}

.account-pin-validation-list {
    margin: 0;
    list-style: none;
    padding: 0;
}

.account-pin-validation-item {
    margin: 0;
    padding: 0;
}

.account-pin-validation-item-icon {
    background-color: red;
    border-radius: 50%;
    /*filter: invert(12%) sepia(95%) saturate(5410%) hue-rotate(5deg) brightness(88%) contrast(118%);*/
    /*filter: invert(100%);*/
    height: auto;
    margin-top: -0.125rem;
    margin-right: 0.5rem;
    padding: 0.25rem;
    width: 1rem;
}

.correspondence-body dl {
    padding: 0 0.25rem;
}

.correspondence-body dt,
.correspondence-body dd {
    margin-bottom: 0;
}

    .correspondence-body dt.ip-success {
        background-color: #007a53 !important;
        border-bottom-left-radius: 0.25rem;
        border-top-left-radius: 0.25rem;
        color: #fff;
    }

    .correspondence-body dd.ip-success {
        background-color: #007a53 !important;
        border-bottom-right-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        color: #fff;
    }

.correspondence-body .ip-success > img {
    filter: invert(31%) sepia(24%) saturate(3421%) hue-rotate(130deg) brightness(97%) contrast(101%);
}

.choices__item.choices__item--selectable:not([data-choice]):not([data-item]):not([role="treeitem"]) {
    background-color: #10069f !important;
    border-color: #10069f !important;
}

.fullscreen-icon {
    background-image: url('../images/icons/icon-fullscreen.svg') !important;
    background-size: 26px 52px;
}

.leaflet-popup-table {
    color: var(--text-color);
    width: 100%;
}

    .leaflet-popup-table * {
        font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .leaflet-popup-table a {
        color: var(--text-color) !important;
    }

    .leaflet-popup-table,
    .leaflet-popup-table th,
    .leaflet-popup-table td {
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
    }

        .leaflet-popup-table td {
            /*padding: 0 1.25rem 0 0rem;*/
            /*padding-right: 2rem;*/
            text-align: center;
        }

.leaflet-popup-tip,
.leaflet-popup-content-wrapper {
    color: var(--text-color) !important;
    background-color: #fff !important;
}

.leaflet-popup-details {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.leaflet-popup-icon {
    background-color: #ccc;
    border-radius: 0.5rem;
    height: 5.25rem;
    width: auto;
}

.ip-link {
    color: var(--text-color) !important;
}

.ip-button-copy {
    border-bottom: 1px solid transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    background: none;
}

    .ip-button-copy:hover {
        border-color: #000;
    }

.ip-map-select {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ip-map-select-item {
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    margin: 0.5rem;
    padding: 0;
}

    .ip-map-select-item:hover {
        cursor: pointer;
    }

        .ip-map-select-item:hover .ip-map-select-item-icon img {
            filter: invert(0%) sepia(5%) saturate(344%) hue-rotate(134deg) brightness(114%) contrast(100%);
        }

    .ip-map-select-item:hover {
        background-color: #ccc;
        color: #000;
    }

    .ip-map-select-item.ip-active {
        background-color: #007a53;
    }

.ip-map-select-item-name {
    flex: 1 0 0;
}

.ip-map-select-item-icon {
    align-items: center;
    display: flex;
    flex: 0 0 0;
    flex-direction: row;
    justify-content: center;
    padding: 1rem 0rem 1rem 1rem;
}

    .ip-map-select-item-icon img {
        height: auto;
        width: 2rem;
    }

.ip-asset-select {
    display: flex;
    flex: 1 0 0;
}

    .ip-asset-select .ip-asset-select-map {
        display: flex;
        flex: 1 0 0;
        flex-direction: column;
    }

    .ip-asset-select .ip-asset-select-nearby {
        display: flex;
        flex: 1 0 0;
        height: 30rem;
        overflow-x: hidden;
        overflow-y: auto;
    }

.ip-wizard {
}

.ip-wizard-step {
}



.ntc-datepicker-timepicker-only .datepicker--nav,
.ntc-datepicker-timepicker-only .datepicker--content {
    display: none;
}

.ntc-datepicker-timepicker-only .datepicker--time {
    border-top: none;
}


.ip-customer-search-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
}

.ip-customer-search-form-control {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    margin-right: 1rem;
    min-width: 10rem;
}

    .ip-customer-search-form-control .btn-group {
        width: 100%;
    }

    .ip-customer-search-form-control > .ip-customer-search-form-control-label {

    }

    .ip-col-6 {
        width: calc(50% - 1rem);
    }

.ip-col-4 {
    width: calc(100% / 3 - 1rem);
}

.filter-advanced:hover {
    margin-top: 0 !important;
    height: 34px !important;
    padding-top: 5px !important;
}

.filter-advanced:hover > div.filter-small {
    display: block !important;
}

.filter-small {
    width: 100%;
    background-color: #f4d53e;
    display: inline-block;
    float: left;
    height: 10px;
    position: absolute;
    top: 0px;
    left: 0;
    font-size: 0.9rem;
    display: none !important;
    padding-left: 6px;
    font-weight: bold;
    user-select: none;
}

.filter-small p {
    font-size: 9px;
}

.adv-queue-outer {
    background-color: #f5f5f5;
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.sidebar-items {
    overflow-y: auto;
    overflow-x: visible;
    height: calc(100% - 193px);
    direction: rtl;
}

    .sidebar-items a {
        direction: ltr;
    }