.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.theme-background {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1f415b 70%);
    color: antiquewhite;
}

.theme-background-text-color {
    color: antiquewhite;
}

.large-bootstrap-icon-blue {
    font-size: 2rem;
    color: #346d98;
}

.large-bootstrap-icon-green {
    font-size: 2rem;
    color: #31c478;
}

.large-bootstrap-icon-purple {
    font-size: 2rem;
    color: #ae96df;
}

.large-bootstrap-icon-red {
    font-size: 2rem;
    color: #d72842;
}

.large-bootstrap-icon-orange {
    font-size: 2rem;
    color: #e38a4f;
}

.large-bootstrap-icon-gray {
    font-size: 2rem;
    color: gray;
}

.large-bootstrap-icon-brightblue {
    font-size: 2rem;
    color: cornflowerblue;
}

.small-bootstrap-icon-blue {
    color: cornflowerblue;
}

a, .btn-link {
    color: #0366d6;
}

    a.active {
        background-color: rgba(255,255,255,0.25);
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.main {
    flex: 1;
    background: url(../images/brand_transparent.png) no-repeat, radial-gradient(circle, rgba(160,187,200,1) 10%, rgba(196,214,227,1) 40%);
    background-attachment: fixed;
    background-position: center;
    background-size: 90vh;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            background-color: rgba(0,0,0,0.4);
        }

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

/* Start Error Styles */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    /*outline: 1px solid red !important;*/
}

.validation-message {
    color: red;
}

.select2-help {
    margin-top: -10px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



/* End Error Styles */


/* start resizing */


@media (max-width: 0px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 0px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* end resizing*/

/* start controls */

/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

.fullscreen {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    top: 0;
    left: 0;
    overflow: auto;
}

.cform {
    width: 100%;
    border: 1px solid groove #d1d1d1;    
}

.cform-title {
    height: 2rem;
    font-size: 16px;
    font-weight: 500;
    padding-left: 5px;
    text-align: left;
    border-collapse: collapse;
    background: rgb(15,48,105);
    background: linear-gradient(90deg, rgba(15,48,105,1) 0%, rgba(71,92,156,1) 49%, rgba(69,118,131,1) 100%);
    color:antiquewhite;
}

.form-control-vertical-space {
    margin-top: 10px;
}

.form-control-label {
    margin-top: 10px;
    margin-bottom: -30px;
    color: black;
}

.valid.modified:not([type=checkbox]) {
    /*outline: 1px solid #26b050;*/
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.invalid {
    /*outline: 1px solid red;*/
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .invalid::placeholder {
        color: #dc3545;
    }

.invalid-label {
    color: #dc3545;
}

.message-display {
    font-size: 8pt;
}

.clickable {
    cursor: pointer !important;
}

.autocomplete-div {
    height: 300px;
    border: 1px solid;
    margin-top: -15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    z-index: 99;
    width: 100%;
}



.cgrid-table {
    width: 100%;
    border: 1px solid groove #d1d1d1;
    overflow: hidden;
    
}

    .cgrid-table > * > tr > th {
        padding: 6px;
        border: 1px solid #d1d1d1;
        text-align: left;
    }

    .cgrid-table > * > tr > td {
        padding: 6px;
        border: 1px solid #d1d1d1;
        text-align: left;
        color: black;
    }

.cgrid-title {
    height: 2rem;
    font-size: 16px;
    font-weight: 500;
    padding-left: 5px;
    text-align: left;
    border-collapse: collapse;
    background: rgb(15,48,105);
    background: linear-gradient(90deg, rgba(15,48,105,1) 0%, rgba(71,92,156,1) 49%, rgba(69,118,131,1) 100%);
    color: antiquewhite;
}

.cgrid-header {
    text-align: left;
    border-collapse: collapse;
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1f415b 70%);
    color: antiquewhite;
}

.ctoolbar {
    text-align: left;
    border-collapse: collapse;
    background-color: #ebebf9;
}

.ctoolbar-archived {
    text-align: left;
    border-collapse: collapse;
    background-color: #ffadad;
}

.ctoolbar > th, td {
    padding: 6px;
    border: 1px solid #d1d1d1;
    text-align: left;
}

.cnavigationbar {
    text-align: left;
    border-collapse: collapse;
    background-color: #ebebf9;
}

.cgrid-searchbar {
    text-align: left;
    border-collapse: collapse;
    background-color: #ebebf9;
}

.ctoolbar-item {
    cursor: pointer;
    margin-left: 5px;
    margin-bottom: -10px;
}

.ctoolbar-seperator {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: -1px;
    border-left: 1px solid #d1d1d1;
}


.cgrid-row-even:nth-child(even) {
    background-color: #e6f3ff;
}

.cgrid-row-odd:nth-child(odd) {
    background-color: #cce6ff;
}

.cgrid-row-hover:hover {
    background-color: #9fcdf4;
}

.cgrid-row-selected {
    background-color: #b3dbc6 !important;
}

.cgrid-sortable {
    cursor: pointer;
    color: #66ccff;
    white-space: nowrap;
    vertical-align: middle;
}

.ccrosstable-form {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.cchecbox-label-after {
    margin-left: 6px;
}

.cchecbox-label-before {
    margin-right: 6px;
}

.ctabcontrol {
    border: 2px solid rgb(5, 39, 103);
    padding: 10px;
}

.ctabcontrol-content {
    border: 1px solid rgb(5, 39, 103);
    padding: 10px;
}

.ctabcontrol-activetabheader {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #1f415b 70%);
    color: antiquewhite;
    border: 1px solid #d1d1d1;
}

    .ctabcontrol-activetabheader:hover {
        color: antiquewhite;
    }


.ctabcontrol-tabheader {
    background-color: #ebebf9;
    border: 1px solid #d1d1d1;
    color: #0366d6;
    cursor: pointer;
}

    .ctabcontrol-tabheader:hover {
        color: #0366d6;
    }

.cmodal {
    border-radius: 4px;
    border: 1px solid #fff;
    z-index: 102;
    box-shadow: 0 2px 2px rgba(0,0,0,.75);
    background-color: #ebebf9;
}

.cmodal-header {
    font-size: 14px;
    padding-left: 5px;
    text-align: left;
    border-collapse: collapse;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(15,48,105,1) 0%, rgba(71,92,156,1) 49%, rgba(69,118,131,1) 100%);
    color: antiquewhite;
}

.cmodal-body {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.cmodal-body-form {
    width: 100%;
    border: 2px solid rgb(5, 39, 103);
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 0px;
}

.cmodal-footer {
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 0px;
    background: radial-gradient(circle, rgba(160,187,200,1) 10%, rgba(196,214,227,1) 40%);
}

.cinputfile-preview-image {
    margin-top: 10px;
    max-width: 100%;    
    border: 2px solid rgb(5, 39, 103);
    padding: 10px;
}

.div-hide {
    display: none;
}

.div-show {
    display: block;
}

.div-show-highlighted {
    display: block;
    color: #ea8a8a;
    border: 3px solid #ea8a8a;
}
/* end controls */

/* start escalation list styles for tooltip*/

.esc-tooltip-wrapper {
    position: absolute;
    display: inline-block;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    width: 100%;
    text-align: left;
    vertical-align: middle !important;
    margin-top: -10px;
}

.esc-tooltip-div {
    visibility: hidden;
    position: absolute;
    padding: 5px 0;
    left: 0;
    margin-top: 20px;
    border-radius: 6px;
    background: radial-gradient(circle, rgba(160,187,200,1) 10%, rgba(196,214,227,1) 40%);
    z-index: 1;
}

    .esc-tooltip-div::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555 transparent;
    }

.esc-tooltip-wrapper:hover div {
    visibility: visible;
}

/* end escalation list styles for tooltip*/