a, input {
    transition: all 0.2s ease;
}

html {
    scroll-behavior: auto;
}

body {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
    margin-bottom: 100px;
    margin: 0 35px 100px 35px;
    font: 1rem/1.4 system-ui, sans-serif;
}

input[type=radio] + label {
    padding-left: 10px;
    margin: 0;
}


:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

.text-underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.bs-radios td:hover {
    background-color: #bcdeff;
}

.bs-radios tr:not(:last-of-type) td {
    border-bottom: solid 1px #ced4da;
}

.bs-radios table {
    width: 100%;
}

.bs-radios td {
    padding: 0;
    border-spacing: 0 !important;
}

.bs-radios label {
    width: calc(100% - 25px);
    padding: 7px;
}

input[type=checkbox] + label {
    padding-left: 10px;
    margin: 0;
}

.bs-checkboxes input[type=checkbox] {
    margin: 0 0 0 5px;
}

.bs-checkboxes td:hover {
    background-color: #bcdeff;
}

.bs-checkboxes tr:not(:last-of-type) td {
    border-bottom: solid 1px #ced4da;
}

.bs-checkboxes table {
    width: 100%;
}

.bs-checkboxes td {
    padding: 0;
    border-spacing: 0 !important;
}

.bs-checkboxes label {
    width: calc(100% - 25px);
    padding: 7px;
}

.ck.ck-button {
    -webkit-appearance: none;
}

.logo {
    background-color: #fff;
    border-bottom: solid 2px silver;
    padding: 15px 0 0 15px;
    margin-bottom: 15px;
}

    .logo img {
        max-width: 100%;
    }

.login-info {
    float: right;
    width: 400px;
    text-align: right;
}

.dev-mode {
    background-color: #bf0000;
    padding: 5px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
}

    .dev-mode span {
    }

.header-to-do a {
    display: inline-block;
    border: solid 1px silver;
    border-radius: 5px;
    padding: 10px;
    margin-right: 5px;
    text-align: center;
    height: 67px;
}

    .header-to-do a i {
        font-size: 16pt;
    }

    .header-to-do a:hover {
        text-decoration: none;
        background-color: #efefef;
    }

.menu {
    margin: 0 0 15px 0;
}

.content {
    padding: 10px 0;
    margin-bottom: 50px;
}

.fs-21{
    font-size:21px;
}

.footer {
    padding: 10px;
    background-color: #EFEFEF;
    position: fixed;
    margin-top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    text-align: center;
}

.logo-text-color {
    background: rgb(235,21,21);
    background: linear-gradient(90deg, rgba(235,21,21,1) 15%, rgba(17,17,215,1) 60%, rgba(232,187,4,1) 86%);
    background-clip: text;
    text-fill-color: transparent;
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.text-white a {
    color: #fff;
}

    .text-white a:hover {
        color: #fff;
    }

.val-invalid, .val-invalid:focus {
    border-left:solid 4px #ff0000;
}

.cbl td {
    padding: 0 15px;
}

    .cbl td input {
        margin-right: 5px;
    }

.text-red {
    color: red;
}

.bg-off-white {
    background-color: #F2F2F2 !important;
}

.allow-break, .allow-break a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

#cc_c2a {
    z-index: 1050 !important;
    border-collapse: separate;
}

.gvr-click-row {
    cursor: pointer;
}

    .gvr-click-row:hover {
        /*        background-color: rgba(255, 255, 0, 0.2);*/
        background-color: #ffff93 !important;
    }

.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td, .table > tr > td, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > tr > th {
    padding: 5px 3px;
    font-size: 10pt;
}

.hilight {
    background-color: #ffff93;
}

.section-nav {
    border: solid 1px silver;
    border-radius: 4px;
    margin-bottom: 5px;
    display: block;
    padding: 5px;
}

    .section-nav:hover {
        cursor: pointer;
        border-color: gray;
        text-decoration: none;
        background-color: #efefef;
    }

    .section-nav .progress-bar:hover {
        text-decoration: none;
    }

.js-precedent-preview {
    height: 600px;
    overflow-y: auto;
    z-index: 2000;
    background-color: #fff;
    border: solid 2px black;
    border-radius: 5px;
    padding: 15px;
    margin-left: -15px;
}

.js-precedent {
    background-color: #eea3ff;
    margin: 0 5px;
    border-radius: 3px;
}

    .js-precedent:hover {
        padding: 1px;
        cursor: pointer;
        border: solid 1px black;
        border-radius: 3px;
    }

.js-merge-tag {
    background-color: yellow;
    margin: 0 5px;
    border-radius: 3px;
    padding: 0 5px;
}

    .js-merge-tag:hover {
        cursor: pointer;
        border-radius: 3px;
        background-color: #000;
        color: #fff;
        text-decoration: none;
    }

.js-tag-set {
    background-color: #03ff00;
    color: #000;
}

.report-item-end {
    border-top: solid 1px #000 !important;
}

figure {
    margin: 0 0 20px 0;
    padding: 0;
    border: 0;
}

    figure.table table{
        width:100%;
    }

    figure.table table, figure.table td {
        border: 0 !important;
    }

    figure.image {
        display: inline-block;
    }

    figure.image img{width:100%;}

        figure.image.image-style-align-center {
            margin-left: auto;
            margin-right: auto;
            display:table;
        }

        figure.image.image-style-align-left {
            margin: 0 20px 20px 0;
            float: left;
        }

        figure.image.image-style-align-right {
            margin: 0 0 20px 20px;
            float: right;
        }


    .sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 15px;
    }

    .sticky-top {
        z-index: 50 !important;
    }


.dropdown-menu{
    z-index:2000;
}

.top-right-button {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    padding: 2px 15px;
}

.top-right-button-10 {
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    padding: 2px 15px;
}

.top-right-button-into-header {
    position: absolute;
    z-index: 10;
    top: -50px;
    right: -10px;
    padding: 2px 15px;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.merge-tags-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 1rem;
}

.insert-merge-tag {
    display: inline-flex;
    flex-grow: 4;
    margin: 0 2px 2px 0;
    border: solid 1px #000;
    background-color: #000;
    padding: 1px 5px;
    text-align: center;
    color: #FFF;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

    .insert-merge-tag:hover {
        background-color: #fff;
        color: #000;
        text-decoration: none;
    }

.h-precedents {
    border: solid 1px mediumpurple;
    background-color: #feecff;
    padding: 5px 15px;
    margin-bottom: .25rem;
    border-radius: 5px;
}

.h-precedent {
    display: inline-block;
    padding: 0 2px;
    margin: 0 2px;
    color: red;
    background-color: yellow;
    border: solid 1px red;
    border-radius: 3px;
}

/* Auto-Grow-Text-Area */
.auto-grow {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

    .auto-grow::after {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
        /* This is how textarea text behaves */
        white-space: pre-wrap;
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
    }

    .auto-grow > textarea {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        /* Firefox shows scrollbar on growth, you can hide like this. */
        overflow: hidden;
        line-height: 22px;
        background: transparent;
    }

    .auto-grow > textarea, .auto-grow::after {
        /* Identical styling required!! */
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        box-sizing: border-box;
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
    }

/* END Auto-Grow-Text-Area */


/* Bootstrap Overrides */

.alert.alert-info {
    background: #dcf6fa;
    padding-left:50px!important;
    min-height:50px;
}

    .alert.alert-info:before {
        position: absolute;
        font-family: 'Font Awesome 6 Free';
        font-size: 30px;
        top: 3px;
        left: 10px;
        color: #0d505a;
        content: "\f059";
    }

    .tooltip-inner {
    max-width: 350px;
    text-align: left;
}

.btn-warning {
    color: #fff !important;
}

.form-inline label {
    margin-right: 5px;
}

    .form-inline label:not(:first-child) {
        margin-left: 5px;
    }

.form-inline .input-group:not(:last-child) {
    margin-right: 5px;
}

.form-inline .input-group:not(:first-child) {
    margin-left: 5px;
}

.form-inline .input-group label + input[type=text], .form-inline .input-group label + select {
    border-radius: 4px 0 0 4px;
}

body, .btn, .form-control, .dropdown-menu, .input-group-text {
    font-size: 11pt;
}

select {
    padding: 4px 12px;
}

.btn-light {
    color: #212529;
    background-color: #d7d7d7;
    border-color: silver;
}

.btn.aspNetDisabled, .btn.aspNetDisabled:active, .btn.aspNetDisabled:focus, .btn.aspNetDisabled:hover, .btn.aspNetDisabled:visited {
    background-color: silver;
    border-color: gray;
    color: #000;
    cursor: not-allowed;
}

.system-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

    .system-menu .btn-group {
        margin-bottom: 5px;
        display: inline-flex;
        flex-grow: 4;
    }

        .system-menu .btn-group .dropdown {
            width: 100%;
            margin-right: 5px;
        }

            .system-menu .btn-group .dropdown .btn {
                width: 100%;
            }


        .system-menu .btn-group .btn {
            margin-right: 5px;
        }

.ui-datepicker-year {
    padding: 4px 1px;
}

.dashboard-menu a {
    text-decoration: none;
    display: block;
    border: solid 3px #02003b;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    margin-bottom: 30px;
    background: rgb(37,197,255);
    background: linear-gradient(170deg, rgba(37,197,255,1) 0%, rgba(26,172,226,1) 100%);
}

    .dashboard-menu a:hover {
        background: rgb(109,212,252);
        background: linear-gradient(170deg, rgba(109,212,252,1) 0%, rgba(46,183,233,1) 100%);
        transform: translateY(-1px);
    }

    .dashboard-menu a i {
        font-size: 50px;
        display: block;
        margin-bottom: 10px;
        color: #02003b;
    }

    .dashboard-menu a span {
        font-weight: bold;
        color: #02003b;
    }

/* END --------------- Bootstrap Overrides */

@media only screen and (max-width: 767px) {

    .nav-fill-sm .nav-item {
        flex: 1 1 auto;
        text-align: center;
    }

    .table.responsive > thead > tr > th {
        display: none;
    }

    .table.responsive > tbody > tr > th {
        display: none;
    }

    .table.responsive > tbody {
        border: 0;
    }

        .table.responsive > tbody > tr {
            display: block;
        }

            .table.responsive > tbody > tr > td {
                display: block;
                text-align: right;
                border: 0;
                border-bottom: dashed 1px silver;
                width: auto !important;
            }

                .table.responsive > tbody > tr > td:last-child {
                    border-bottom: solid 2px gray;
                }

                .table.responsive > tbody > tr > td::before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    margin-right: 15px;
                }

                .table.responsive > tbody > tr > td::after {
                    content: "\00a0 ";
                }
}