/* Minification failed. Returning unminified contents.
(156,45): run-time error CSS1034: Expected closing parenthesis, found ','
(156,45): run-time error CSS1042: Expected function, found ','
(156,50): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(161,51): run-time error CSS1034: Expected closing parenthesis, found ','
(161,51): run-time error CSS1042: Expected function, found ','
(161,56): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(203,27): run-time error CSS1046: Expect comma, found '238'
(203,34): run-time error CSS1046: Expect comma, found ')'
(208,27): run-time error CSS1046: Expect comma, found '201'
(208,34): run-time error CSS1046: Expect comma, found ')'
(879,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(905,18): run-time error CSS1035: Expected colon, found '{'
(917,70): run-time error CSS1019: Unexpected token, found ' '
(917,70): run-time error CSS1034: Expected closing parenthesis, found ' '
(917,70): run-time error CSS1019: Unexpected token, found ' '
(917,70): run-time error CSS1042: Expected function, found ' '
(917,70): run-time error CSS1019: Unexpected token, found ' '
(917,70): run-time error CSS1042: Expected function, found ' '
(917,70): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
 */
html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 55px;
    padding-bottom: 1px;
    margin-bottom: 49px;
    /* Margin bottom by footer height */
    font-family: 'Quicksand', sans-serif;
}

.screen-as-page {
    margin-left: 4.75rem !important;
    margin-right: 4.75rem !important;
}

.private {
    background-color: rgba(74, 136, 160, 0.14);
    margin-bottom: 0 !important;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    /* Set the fixed height of the footer here */
    line-height: 16px;
}

h1,
h2,
h3,
h4 {
    font-weight: 300;
}

.false-a {
    color: #3CB1EF;
    cursor: pointer;
}

.false-a:hover {
    color: #0056b3;
    text-decoration: underline;
}

select {
    -webkit-appearance: none;
    appearance: none;
    /* Add paddings to accommodate arrow */
    padding-right: 30px !important;
    /* Add arrow icon */
    /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="5 0 24 24" xml:space="preserve"><path fill="rgb(132, 137, 142)" d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
    background-position: center right;
    background-repeat: no-repeat;
}

/*colors*/

.text-primary-1 {
    color: #003e5f;
}

.text-primary-2 {
    color: #4a88a0;
}

.text-primary-3 {
    color: #caefe6;
}

.text-primary-4 {
    color: #ff6c40;
}

.bg-primary-1 {
    background-color: #003e5f;
    color: white;
}

.bg-primary-1:hover {
    background-color: #005473;
}

.bg-primary-2 {
    background-color: #4a88a0;
}

.bg-primary-2:hover {
    background-color: #6398ad;
}

.bg-primary-3 {
    background-color: #caefe6;
}

.bg-primary-3:hover {
    background-color: #a7e5d9;
}

.bg-primary-4 {
    background-color: #ff6c40;
}

.bg-primary-4:hover {
    background-color: #ff5226;
}

.bg-secondary-1 {
    border-color: #4a88a0;
    border-radius: .50em;
    color: #4a88a0;
    background-color: rgba(229, 238, 241, 0.23);
}

.bg-secondary-3 {
    background-color: rgba(74, 136, 160, 0.15);
}

.bg-secondary-4 {
    background-color: rgba(255, 108, 64, 0.1);
}

.bg-dark {
    background-color: #1c3643 !important;
}

.bg-dark:hover {
    background-color: #00202d;
}

.nav-pills .nav-item .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #003e5f !important;
}


/* bootstrap override*/
/*
.btn, .card, .form-control {
    border-radius: 10px;
}

.nav-link {
    border-radius: 10px 10px 0 0;
}
    */

#app>div>.card {
    border: 1px solid rgba(9, 56, 86, .23);
    border-radius: .50rem;
    box-shadow: 0px 2px 8px rgb(57, 127, 175, .22);
}

.card-header {
    background-color: transparent !important;
    box-shadow: inset 0 -2px 6px rgb(210, 235, 243, .42);
}


.list-group-flush:first-child .list-group-item:first-child {
    border-top: 0;
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.text-center {
    text-align: center !important;
}

.list-group-item {
    background-color: transparent;
}

.btn-shadow {
    box-shadow: 0px 2px 8px rgba(56, 126, 173, .3);
}

.input-group-append>.btn-sm,
.input-group-append>.btn {
    box-shadow: none !important;
}

.btn-sm-shadow {
    box-shadow: 0px 0px 8px rgba(56, 126, 173, .22) !important;
}

td .btn-sm {
    box-shadow: none !important;
    border-color: rgb(229 238 241);
}

.btn-outline-secondary,
.btn-light {
    border-color: rgb(178 201 209);
    background-color: transparent;
}

li.list-group-item.active {
    color: white;
    background-color: #6398ad;
    border-color: #4a88a0;
}

.btn-primary {
    color: #fff;
    background-color: #003e5f !important;
    border-color: #005473 !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #005473 !important;
    border-color: #005473 !important;
}

.btn-warning {
    background-color: rgba(255, 108, 64, .5) !important;
}

.btn-outline-primary {
    color: #4a88a0 !important;
    border-color: #4a88a0 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    color: white !important;
    background-color: #6398ad !important;
    border-color: #4a88a0;
}

.btn-outline-primary.active {
    background-color: #4a88a0 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #4a88a0 !important;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #4a88a0;
    background-color: #6398ad;
}

/* material icons */

.btn-material-icons {
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.3em;
}

.btn-sm img {
    width: 18px;
    vertical-align: top;
    margin-top: 2px;
}

.btn .material-icons {
    vertical-align: top;
}

.btn-sm .material-icons {
    font-size: 16px;
    position: relative;
    top: 5px;
}

.b-table-row-selected .btn-sm {
    color: white;
}

.big.custom-control-label::before {
    width: 1.5em !important;
    height: 1.5em !important;
    margin-top: -4px;
}

.big.custom-control-label::after {
    width: 1.5em !important;
    height: 1.5em !important;
    margin-top: -4px;
}

.td-icon {
    font-size: 2.5em !important;
    display: block !important;
    margin: -7px 0 -10px 0;
    text-align: center;
}

.material-icons,
.material-icons-outlined {
    cursor: pointer;
    line-height: 0.8 !important;
}

.cursor {
    cursor: pointer;
}

.material-icons-sm {
    font-size: 1em !important;
}

.nav-link .material-icons {
    top: 2px;
    position: relative;
}

a i.material-icons {
    vertical-align: top;
    font-size: 1.1em;
    line-height: 1.3em;
}

.input-group-append button:not(.btn-sm) .material-icons {
    font-size: 1.5em;
}

/* Tooltip container */
.eplat-tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.eplat-tooltip .tooltiptext {
    visibility: hidden;
    max-width: 200px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 10px;
    border-radius: 4px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    left: -1px;
    top: 32px;
}

.eplat-tooltip .tooltiptext-above {
    visibility: hidden;
    max-width: 200px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 10px;
    border-radius: 4px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    left: -30px;
    top: -45px;
    text-wrap: nowrap;
}

/* Show the tooltip text when you mouse over the tooltip container */
.eplat-tooltip:hover .tooltiptext {
    visibility: visible;
}

.eplat-tooltip:hover .tooltiptext-above {
    visibility: visible;
}

/* eplat-select */
.eplat-select .input-group-append .material-icons {
    vertical-align: top;
}

.eplat-select .input-group {
    overflow: hidden;
    margin: -1px 0 -1px 0;
}

.eplat-select-options {
    position: absolute;
    background-color: white;
    z-index: 3;
    border: 1px solid #3db1ef !important;
}

.eplat-selec-options-container {
    width: 300px;
    max-height: 250px;
}

.eplat-selec-options-container li:hover {
    background-color: #eee;
    padding-left: 5px;
    margin-left: -5px;
}

.eplat-selec-options-container label {
    display: block;
}

.eplat-select .btn-outline-secondary.focus,
.btn-outline-secondary:focus {
    box-shadow: none;
}

.eplat-select .btn-outline-secondary:hover,
.eplat-select .btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: transparent !important;
    color: #212529 !important;
}

.eplat-select.form-control {
    padding: 0;
    position: relative;
}

.eplat-select.form-control.is-invalid {
    background-image: none !important;
}

/* fine uploader */
#fine-uploader-basic i.material-icons {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 3px 0;
}

/* Submenus */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}



/* Status Bar*/
#statusBar {
    height: 40px;
    background-color: rgba(52, 58, 64, 0.9);
    color: white;
    z-index: 1000;
    position: fixed;
    bottom: 45px;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: .8em;
    display: none;
}

#statusBar .loading {
    background-image: url('/content/images/loading.gif');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 25px;
    width: auto;
}


body[sidebar="open"] {
    overflow: hidden;
}

@media (min-width: 768px) {
    body[sidebar="open"] {
        overflow: auto;
    }
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0rem;
    bottom: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    overflow: auto;
    margin-top: 3.5rem;
}

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0rem;
        bottom: 0;
        right: 0;
        z-index: 100;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
        height: 100%;
    }
}

.account-icon {
    font-size: 90px !important;
    width: 90px;
}

.edit-picture {
    position: absolute;
    left: 57%;
    width: 24px;
    margin-top: 63px;
}

/* misc */
.form-control.reportrange-text {
    height: 32px !important;
    font-size: 14px;
    display: flex;
}

.pointer {
    cursor: pointer;
}

.text-primary {
    color: #4a88a0 !important;
}

.component-arrow {
    margin-left: -26px;
    position: absolute;
}

.multiselect-container.dropdown-menu {
    max-height: 300px !important;
    overflow: auto !important;
    z-index: 10000 !important;
}

.initials-avatar {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.search-card,
.mt-flat {
    border-radius: 0 0 .25rem .25rem;
    border-top: none;
}

div[name="HeaderSettings"] {
    display: none;
}

tr.selected {
    color: #fff;
    background-color: #6398ad !important;
    box-shadow: inset 0 2px 15px rgba(0, 0, 0, .2);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #c5d5de;
    border-color: #abbcc5;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #6398ad;
    border-color: #4a88a0;
}

.multiselect-container>li>a>label {
    padding: 3px 10px 3px 10px;
    width: 230px;
}

.multiselect-selected-text {
    width: 80%;
    display: inline-block;
}

.multiselect-container {
    padding: .5rem 0;
    margin: .125rem 0 0;
}

#ddlSelectedTerminals {
    padding: 5px 5px 5px;
    border: #ddd solid 1px;
    border-radius: 3px;
}

.terminals-list {
    max-height: 190px !important;
    margin: 0 0 5px 0;
    overflow-y: auto;
    border-top: #ddd solid 1px;
    border-bottom: #ddd solid 1px;
    padding: 5px;
}

.input-group-append .material-icons {
    vertical-align: middle;
}

a {
    color: #3CB1EF;
}

.input-auto-width {
    width: 140px;
}

.display-5 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
}

.blank-canvas {
    height: 110px;
    border-radius: 3px;
}

.input-group .btn-outline-secondary {
    border: 1px solid #ced4da;
}

.deleted {
    color: #ddd;
    text-decoration: line-through;
}

.text-so-muted {
    color: #ddd;
}

.form-group small.legend {
    background: #f3f3f3;
    display: block;
    padding: 5px 20px;
    margin: 0 -20px 0 -20px;
}

.badge-pill {
    position: absolute;
    margin: -5px 0 0 15px;
}

/* Map */
#map {
    height: 400px;
    width: 100%;
}

/*Workflows*/
.wf-btn {
    min-width: 150px;
}

.full-width {
    width: 100%;
}

.google-visualization-orgchart-node i {
    display: block;
    color: white;
    float: right;
    /*margin: 2px;*/
    margin-right: -30px !important;
    margin-top: -20px !important;
    border: 1px hidden;
    border-radius: 50%;
    /*font-size: larger;*/
}

.invisible {
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

.wf-step {
    display: block;
    cursor: pointer;
    margin: 2px;
}

/* secondary menu */
#secondaryMenu {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left: -15px;
}

.navbar-collapse.collapse.show {
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
}

#secondaryMenu .navbar-nav {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#secondaryMenu .nav-item {
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
    text-align: center;
}

/* validation */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #ced4da;
    background-image: none;
}

.custom-control-input.is-valid~.custom-control-label,
.was-validated .custom-control-input:valid~.custom-control-label {
    color: #212529;
}

.custom-control-input.is-valid:checked~.custom-control-label::before,
.was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: #007bff;
    background-color: #007bff;
}

.custom-control-input.is-valid~.custom-control-label::before,
.was-validated .custom-control-input:valid~.custom-control-label::before {
    border-color: #007bff;
}

.field-validation-error {
    color: red;
}

.was-validated .display-4:invalid {
    border: solid 1px red !important;
    border-radius: 5px;
    margin-bottom: 10px;
}

tr.b-table-row-selected td {
    background-color: #4a88a0 !important;
    color: white !important;
}

.table-active .text-primary {
    color: white !important;
}

tr.b-table-row-selected small.text-muted {
    color: #d4d4d4 !important;
}

.ck-content {
    border: #ced4da solid 1px !important;
    border-radius: 0 0 5px 5px !important;
    border-top: none !important;
}

.pending-bullet {
    font-size: 2em;
    line-height: 0.1em;
    vertical-align: middle;
    margin-top: -5px;
    display: inline-block;
    margin-right: 3px;
    color: #3db1ef;
}

.pending-bullet-white {
    font-size: 2em;
    line-height: 0.1em;
    vertical-align: middle;
    margin-top: -5px;
    display: inline-block;
    margin-right: 3px;
    color: white;
}

/*iPhone SE or anything under its resolution 375px (667 used for horizontal) width can have scrolling*/

@media (max-width: 667px) {

    .nav-collapse.show {
        max-height: 50vh;
    }

    #dropDownMenuNavBar {
        position: relative;
        max-height: 30vh;
        overflow-y: auto;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }

    #secondaryMenu {
        position: static;
        bottom: auto;
        width: auto;
        margin-left: 0;
    }

    #statusBar {
        bottom: 0;
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        color: #003e5f;
    }

    a.dropdown-item {
        color: #003e5f !important;
    }

    a.dropdown-item:active {
        background-color: #003e5f !important;
        color: white !important;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}



.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: .5;

    &.btn::before {
        display: inline-block;
        content: "";
    }
}


.placeholder-xs {
    min-height: .6em;
}

.placeholder-sm {
    min-height: .8em;
}

.placeholder-lg {
    min-height: 1.2em;
}

.placeholder-avatar {
    border-radius: 50%;
    height: 2.5em;
    width: 2.5em;
}

.placeholder-glow {
    .placeholder {
        animation: placeholder-glow 2s ease-in-out infinite;
    }
}

@keyframes placeholder-glow {
    50% {
        opacity: .2;
    }
}

.placeholder-wave {
    mask-image: linear-gradient(130deg, black 55%, rgba(0, 0, 0, (1 - .2)) 75%, black 95%);
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
    100% {
        mask-position: -200% 0%;
    }
}
