@font-face {
    font-family: 'Frutiger Light';
    font-style: normal;
    font-weight: 400;
    src: url('/_content/Frankly.AI.Razor/fonts/Linotype - FrutigerLTPro-Light.otf') format('truetype');
}

@font-face {
    font-family: 'Frutiger Bold';
    font-style: normal;
    font-weight: 400;
    src: url('/_content/Frankly.AI.Razor/fonts/Linotype - FrutigerLTPro-Bold.otf') format('truetype');
}

@font-face {
    font-family: 'Frutiger';
    font-style: normal;
    font-weight: 400;
    src: url('/_content/Frankly.AI.Razor/fonts/Linotype - FrutigerLTPro-Roman.otf') format('truetype');
}


:root {
    --scroll-bar-color: #9D1D9677;
    --scroll-bar-bg-color: #f6f6f6;
}

.code-block {
    max-height: 100px;
    overflow: auto;
    padding: 8px 7px 5px 15px;
    margin: 0px 0px 0px 0px;
    border-radius: 7px;
}

::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0.5);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    *::-webkit-scrollbar-track {
        background: var(--scroll-bar-bg-color);
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--scroll-bar-color);
        border-radius: 20px;
        border: 3px solid var(--scroll-bar-bg-color);
    }

body {
    font-family: 'Frutiger';
}


.text-color-green {
    color: #4C9C2E !important;
}

.text-color-red {
    color: #DF483C;
}

.text-color-purple {
    color: #9D1D96;
}

.text-color-lighter-purple {
    color: #9D1D96AA;
}


.text-color-white {
    color: #fff !important;
}

.text-color-black {
    color: #000 !important;
}

.text-color-gray {
    color: #cccccc;
}

.text-color-darkgray {
    color: #999999;
}

.bg-lightgray {
    background-color: #f7f7f7;
}

.bg-frankly-green {
    background-color: #4C9C2E;
}

.bg-frankly-purple {
    background-color: #9D1D96;
}

.bg-frankly-light-purple {
    background-color: #9D1D9677;
}

.bg-lessgray {
    background-color: #f7f7f7;
}

.bg-gray {
    background-color: #eee;
}

.bg-grayer {
    background-color: #ccc;
}

.bg-lightred {
    background-color: #DF483C55;
}

.sf-license-warning {
    display: none !important;
}

.col-2em {
    width: 2em;
}

.col-5em {
    width: 5em;
}

.col-7-5em {
    width: 7.5em;
}


.col-10em {
    width: 10em;
}

.col-15em {
    width: 15em;
}

.col-25em {
    width: 25em;
}

.w-min-10em {
    min-width: 10em;
}


.col-20em {
    width: 20em;
}

.col-30em {
    width: 30em;
}

.col-35em {
    width: 35em;
}

.col-40em {
    width: 40em;
}

.col-50em {
    width: 50em;
}

.col-60em {
    width: 60em;
}

.col-70em {
    width: 70em;
}

pre {
    margin-top: 0;
    margin-bottom: 0;
}

.rad-1 {
    border-radius: 0.25em;
}

.rad-2 {
    border-radius: 0.5em;
}

.rad-3 {
    border-radius: 0.75em;
}

.rad-4 {
    border-radius: 1em;
}

.rad-5 {
    border-radius: 1.5em;
}

.h-1em {
    height: 1em;
}

.h-2em {
    height: 2em;
}

.h-5em {
    height: 5em;
}

.hmin-3em {
    min-height: 3em;
}

.hmin-5em {
    min-height: 5em;
}

.hmax-5em {
    max-height: 5em;
}

.hmax-8em {
    max-height: 8em;
}

.hmax-30em {
    max-height: 80em;
}

.h-10em {
    height: 10em;
}

.hmin-10em {
    min-height: 10em;
}

.hmin-15em {
    min-height: 15em;
}

.hmin-25em {
    min-height: 25em;
}

.hmin-40em {
    min-height: 40em;
}

.wmin-5em {
    min-width: 5em;
}

.wmax-10em {
    max-width: 10em;
}

.wmax-5em {
    max-width: 5em;
}

.h-15em {
    height: 15em;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
}

.box-shadow-dark {
    box-shadow: 0 0.15rem 0.5rem rgba(0,0,0,0.3);
}

.frankly-red {
    color: #DF483C;
}

.frankly-yellow {
    color: #F7B541;
}

.frankly-teal {
    color: #00ADBB;
}

.frankly-green {
    color: #4C9C2E;
}

.frankly-purple {
    color: #9D1D96;
}

.frankly-dark-blue {
    color: #00407D;
}

.border-red {
    border: 1px solid #DF483C;
}

.border-purple {
    border: 1px solid #9D1D96;
}

.border-green {
    border: 1px solid #4C9C2E;
}

.navbar.top-row {
    height: 3.5rem;
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    border-right: 1px solid #d6d5d555;
}

.nav-logo {
    width: 8em;
    margin-top: -0.4em;
}

.navbar-brand {
    font-size: 1.1rem;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
    white-space: nowrap;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

div.nav-child-item {
    margin-left: 1.5em;
}

.e-toast-container .e-toast.frankly-toast-normal .e-toast-message .e-toast-title {
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #00ADBB33;
}

.e-toast-container .e-toast.frankly-toast-normal .e-toast-message .e-toast-content {
    color: #333;
    font-size: 1em;
    font-weight: normal;
    background-color: white;
}


.e-toast-container .e-toast.frankly-toast-danger .e-toast-message .e-toast-title {
    color: #842029;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #f8d7da;
}

.e-toast-container .e-toast.frankly-toast-danger .e-toast-message .e-toast-content {
    color: #842029;
    font-weight: bold;
    font-size: 1em;
}


.e-toast-container .e-toast.frankly-toast-success .e-toast-message .e-toast-title {
    color: #0f5132;
    font-weight: bold;
    font-size: 1.1em;
    background-color: #d1e7dd;
}

.e-toast-container .e-toast.frankly-toast-success .e-toast-message .e-toast-content {
    color: #0f5132;
    font-size: 1em;
}

.larger {
    font-size: 1.1em;
}

.largest {
    font-size: 1.3em;
}

.huge {
    font-size: 1.5em;
}

.huger {
    font-size: 2em;
}

.hugest {
    font-size: 2.5em;
}


.smaller {
    font-size: 0.7em;
}

.smallest {
    font-size: 0.6em;
}

.large-button {
    width: 10em;
    height: 2em;
    font-size: 1.5em;
}

    .large-button .e-btn-icon {
        font-size: 1em;
    }

.e-btn.e-icon-btn.default-danger-button-css {
    padding: 4px 8px;
}

.default-danger-button-css {
    border-radius: 30px;
    color: #DF483C;
    background-color: transparent;
    border: none;
}

    .default-danger-button-css:hover {
        background: #DF483C;
        color: #fff;
        cursor: pointer;
        transition-duration: .2s;
    }

.e-btn.e-icon-btn.default-success-button-css {
    padding: 4px 8px;
}

.default-success-button-css {
    border-radius: 30px;
    color: #4C9C2E;
    background-color: transparent;
    border: none;
}

    .default-success-button-css:hover {
        background: #4C9C2E;
        color: #fff;
        cursor: pointer;
        transition-duration: .2s;
    }

.e-btn.e-icon-btn.default-neutral-button-css {
    padding: 4px 8px;
}

.default-neutral-button-css {
    border-radius: 30px;
    color: #ccc;
    background-color: transparent;
    border: none;
}

    .default-neutral-button-css:hover {
        background: #ccc;
        color: #fff;
        cursor: pointer;
        transition-duration: .2s;
    }

.pointer {
    cursor: pointer;
}

/* =========================================== */
/* ========  Speech Bubble and Counts ======== */
/* =========================================== */
.col-card-labels {
    font-size: 2em;
    font-weight: bold;
    width: 6em;
}


.speech-bubble-counts-css {
    height: 10em;
    width: 10em;
    padding-bottom: 1em;
}


.speech-bubble-campaign-count-css {
    height: 3em;
    color: white;
    font-size: 1.3em;
    width: 3em;
    padding-bottom: 0.5em;
}


.count-totals-1 {
    color: white;
    font-size: 5em;
    font-weight: bold;
}

.count-totals-2 {
    color: white;
    font-size: 4.5em;
    font-weight: bold;
}

.count-totals-3 {
    color: white;
    font-size: 3.5em;
    font-weight: bold;
}

.count-totals-4 {
    color: white;
    font-size: 3em;
    font-weight: bold;
}

.count-totals-more {
    color: white;
    font-size: 2em;
    font-weight: bold;
}

.score-count {
    color: white;
    font-size: 1.7em;
    font-weight: bold;
}


.score-percentage {
    color: white;
    font-size: 1.3em;
    /*font-weight: bold;*/
}


@media (max-width: 1400px) {
    .speech-bubble-counts-css {
        height: 6em;
        width: 6em;
        padding-bottom: 0.6em;
    }

    .col-card-labels {
        font-size: 1.5em;
        width: 3.5em;
    }

    .count-totals-1 {
        color: white;
        font-size: 4em;
        font-weight: bold;
    }

    .count-totals-2 {
        color: white;
        font-size: 3.5em;
        font-weight: bold;
    }

    .count-totals-3 {
        color: white;
        font-size: 3em;
        font-weight: bold;
    }

    .count-totals-4 {
        color: white;
        font-size: 2.5em;
        font-weight: bold;
    }

    .count-totals-more {
        color: white;
        font-size: 1.25em;
        font-weight: bold;
    }
}

/*@media (min-width: 1281px) and (max-width: 1600px) {
    .col-card-labels {
        font-size: 1.75em;
        width: 4.5em;
    }
}*/

/* =========================================== */
/* ======END Speech Bubble and Counts ======== */
/* =========================================== */

.loggedinuser {
    padding: 0.5em;
    margin-left: 1rem !important;
}

    .loggedinuser:hover {
        background-color: white;
        border-radius: 0.25em;
        box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
    }


.e-btn.e-small {
    font-size: 0.7em;
}


.index-page-video {
    width: 35vw;
    height: 19.6875vw;
}


@media (max-width: 1200px) {

    .index-page-video {
        width: 60vw;
        height: 33.75vw;
    }
}


@media (max-width: 640px) {

    .index-page-video {
        width: 80vw;
        height: 45vw;
    }
}

.page .e-spinner-pane.e-spin-overlay {
    background-color: rgba(0, 0, 0, 0.1);
}


/* Frankly Themed button colors */

.f-info.far, .f-info.fas {
    color: #25cff2;
}

.f-success.far, .f-success.fas {
    color: #4C9C2E;
}

.f-danger.far, .f-danger.fas {
    color: #DF483C;
}

.e-btn.f-success:hover, .e-css.e-btn.f-success:hover {
    background-color: #146c43;
    border-color: #146c43; /*#4C9C2E*/
    box-shadow: none;
    color: #fff;
}

.e-btn.f-success, .e-css.e-btn.f-success {
    background-color: #4C9C2E;
    border-color: #198754;
    color: #fff;
}

    .e-btn.f-success:disabled, .e-css.e-btn.f-success:disabled {
        background-color: #4C9C2E77;
        border-color: #4C9C2E66;
        box-shadow: none;
        color: #ffffff77;
    }

.e-btn.f-info:hover, .e-css.e-btn.f-info:hover {
    background-color: #31d2f2;
    border-color: #25cff2;
    box-shadow: none;
    color: #fff;
}

.e-btn.f-info, .e-css.e-btn.f-info {
    background-color: #00ADBB;
    border-color: #00ADBB;
    color: #fff;
}


    .e-btn.f-info:disabled, .e-css.e-btn.f-info:disabled {
        background-color: #00ADBB77;
        border-color: #00ADBB66;
        box-shadow: none;
        color: #ffffff77;
    }

.e-btn.f-danger:hover, .e-css.e-btn.f-danger:hover {
    background-color: #a92c38;
    border-color: #a92c38;
    box-shadow: none;
    color: #fff;
}

.e-btn.f-danger, .e-css.e-btn.f-danger {
    background-color: #DF483C;
    border-color: #DF483C;
    color: #fff;
}

    .e-btn.f-danger:disabled, .e-css.e-btn.f-danger:disabled {
        background-color: #DF483C77;
        border-color: #DF483C66;
        box-shadow: none;
        color: #ffffff77;
    }



.e-dialog .e-dlg-content {
    font-size: 1.25em;
}

.e-dialog .e-dlg-header {
    font-size: 1.5em;
}

.pbi-logo-tiny {
    width: 1.25em;
    margin-right: 0.25em;
}

.e-upload-drag-hover {
    border: 1px solid #4C9C2E;
    background-color: #4C9C2E22;
}


.text-align-right {
    text-align: right;
}

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


/* Tooltip customizations   */
.e-control.e-tooltip.e-lib {
    display: inline;
    font-size: unset;
    font-family: unset;
}

.e-tooltip-wrap .e-tip-content {
    border-radius: 4px;
    /*background-color: #fff;*/
    opacity: 1;
}

.e-tooltip-wrap.e-popup {
    background-color: #9D1D96;
    color: white;
    border: 0px solid white !important;
    box-shadow: 2px 3px 5px 0px rgb(0 0 0 / 75%);
}

    /* used to show menu hovers in playbook tree view */
    .e-tooltip-wrap.e-popup.e-playbook {
        background-color: white;
        color: #9D1D96;
    }

.e-tooltip-wrap.e-playbook .e-tip-content {
    color: #9D1D96;
}

/* To customize the arrow tips */
.e-tooltip-wrap .e-arrow-tip.e-tip-top,
.e-tooltip-wrap .e-arrow-tip.e-tip-left,
.e-tooltip-wrap .e-arrow-tip.e-tip-right,
.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    /*border: 1px solid white !important;*/
}

/* To customize the arrow color */
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-left,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-right,
.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
    color: #9D1D96;
}

/* Bottom arrow tip border*/
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 7px solid #00000055;
}

/* Top arrow tip border*/
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom: 7px solid #00000055;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* Left arrow tip border*/
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #00000055;
    border-top: 8px solid transparent;
}

/* Right arrow tip border*/
.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-bottom: 8px solid transparent;
    border-left: 8px solid #00000055;
    border-top: 8px solid transparent;
}


/* Used When Highlighting search terms   */
.search-term-highlight {
    background-color: #9D1D9633;
    padding: 0.0em 0em;
    color: black;
    border: 1px dashed #9D1D9666;
    border-radius: 0.15em;
}

    /* when search is fuzzy */
    .search-term-highlight.fuzzy {
        border-top: none;
        border-bottom: 1px dashed #9D1D9644;
        border-radius: 0;
        border-left: none;
        border-right: none;
        background-image: linear-gradient(to right, #fff, #9D1D9622,#9D1D9633,#9D1D9622, #fff);
        /*background-color: #9D1D9633;*/
    }


.speech-bubble-reviews-css {
    height: 5em;
    width: 5em;
    padding-bottom: 1em;
}

.pre-wrap-break-all {
    white-space: pre-wrap;
    word-break: break-all;
}

.teams-cmd {
    border: 1px solid #ccc;
    border-radius: 0.25em;
    padding: 0.25em;
}

.e-btn.e-upload-browse-btn {
    background-color: #9D1D96;
    border: 1px solid #9D1D96;
}

    .e-btn.e-upload-browse-btn:hover {
        border: 1px solid #9D1D96;
        background-color: #9D1D9688;
    }

.loading-pls-wait-skeleton {
    width: 100%;
    border-radius: 12px;
    margin-top: 5px;
    display: flex;
    color: #aaa;
    height: calc(100vh - 100px);
    justify-content: center;
    align-items: center;
}

.teams-tenant-counts {
    color: white;
    font-size: 1em;
}


.fwtbl table, .fwtbl tr, .fwtbl td, .fwtbl th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 0.25em;
}

.max-width {
    width: 100%;
}

@media (any-pointer: coarse) {
    .hide-on-mobile {
        display: none;
    }
}

.h-95 {
    height: 95%;
}

.e-footer-content .e-btn.e-bluish.e-flat {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

    .e-footer-content .e-btn.e-bluish.e-flat:hover {
        background-color: #0b5ed7;
        border-color: #0b5ed7;
        box-shadow: none;
        color: #fff;
    }


.dropdown-entry-description {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: break-spaces;
    text-indent: 0;
    line-height: 1.1;
    margin-left: 1em;
    margin-bottom: 1em;
    max-height: 5em;
}


.e-input-group.json-config textarea.e-input {
    font-family: monospace;
    color: darkblue;
}


/* hover buttons */

i.hover-button:hover {
    border-radius: 0.25em;
}

i.hover-button {
    padding-left: 0.1em;
    padding-right: 0.1em;
    margin: 0.1em;
    padding: 0.25em;
    background-color: transparent;
}

    i.hover-button.disabled {
        color: #ccc;
    }

        i.hover-button.disabled:hover {
            background-color: #ccc !important;
            border-color: #ccc !important;
            color: #fff;
        }
    /* info - light blue */
    i.hover-button.info {
        color: #00ADBB;
    }

    i.hover-button.disabled.info {
        color: #ccc;
    }

    i.hover-button.info:hover {
        background-color: #31d2f2;
        border-color: #31d2f2;
        color: #fff;
    }

    i.hover-button.info.disabled:hover {
        color: #fff;
    }
    /* warning - orange  */

    i.hover-button.warning {
        /*color: #ffc107;*/
        color: #000;
    }

    i.hover-button.disabled.warning {
        color: #ccc;
    }

    i.hover-button.warning:hover {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }

    i.hover-button.warning.disabled:hover {
        color: #fff;
    }