:root {
    /* Brand Colors */
    --global-primary-color: #00adef; /* TV Blue */
    --global-secondary-color: #ffc604; /* TV Gold #f8b55b OR #ffc604 */
    --global-success-color: #4caf50; /* Green for success */
    --global-success-color-dark: #388e3c; /* Dark Green for success */
    --global-info-color: #5b8cf8; /* Light Blue for info */
    --global-info-color-dark: #2f5df4; /* Dark Blue for info */
    --global-warning-color: #ff9800; /* Orange for warning */
    --global-warning-color-dark: #ef6c00; /* Dark Orange for warning */
    --global-danger-color: #f44336; /* Red for danger */
    --global-danger-color-dark: #c62828; /* Dark Red for danger */
    --global-light-color: #f8f9fa; /* Light Gray */
    --global-light-color-dark: #e0e0e0; /* Darker Light Gray */
    --global-dark-color: #212529; /* Dark Gray */
    --global-dark-color-dark: #121417; /* Darker Dark Gray */
    /* Bootstrap Theme Colors */
    --bs-primary: var(--global-primary-color);
    --bs-primary-dark: #008ecc; /* Darker TV Blue */
    --bs-secondary: var(--global-secondary-color);
    --bs-secondary-dark: #e39e3d; /* Darker TV Gold */
    --bs-success: var(--global-success-color);
    --bs-success-dark: var(--global-success-color-dark);
    --bs-info: var(--global-info-color);
    --bs-info-dark: var(--global-info-color-dark);
    --bs-warning: var(--global-warning-color);
    --bs-warning-dark: var(--global-warning-color-dark);
    --bs-danger: var(--global-danger-color);
    --bs-danger-dark: var(--global-danger-color-dark);
    --bs-light: var(--global-light-color);
    --bs-light-dark: var(--global-light-color-dark);
    --bs-dark: var(--global-dark-color);
    --bs-dark-dark: var(--global-dark-color-dark);
    /* Common Bootstrap Colors */
    /*--bs-body-color: var(--global-dark-color);*/ /* Default text color */
    /*--bs-body-bg: var(--global-light-color);*/ /* Default background color */
    /*--bs-heading-color: var(--global-dark-color);*/ /* Heading color */
    /*--bs-muted: var(--global-secondary-color);*/ /* Muted text color */
    /*--bs-border-color: var(--global-light-color);*/ /* Border color */
    /* Buttons */
    /*--bs-btn-hover-color: var(--global-light-color);*/ /* Button hover text color */
    /*--bs-btn-hover-bg: var(--global-primary-color);*/ /* Button hover background */
    /* Alerts */
    /*--bs-alert-bg: var(--global-danger-color);*/ /* Background color for alerts */
    /*--bs-alert-color: var(--global-light-color);*/ /* Text color for alerts */
    /* Links */
    /*--bs-link-color: var(--global-primary-color);*/ /* Link color */
    /*--bs-link-hover-color: var(--global-dark-color);*/ /* Link hover color */
    /*}*/
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


body {
    background-color: white;
    padding: 0px;
}

a {
    text-decoration-skip: objects;
    text-decoration-skip-ink: objects;
}

img {
    max-width: 100%;
}

table caption {
    caption-side: top; /* Ensure caption is above the table */
    font-weight: bold;
    text-align: center;
    color: black;
    color: var(--bs-heading-color);
    font-size: 1.2em;
}

::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    font-style: italic;
    color: #999;
}

.nounderline {
    text-decoration: none !important;
}

.tv-font {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: var(--global-secondary-color);
}


li.rule-item input[type="image"] {
    height:24px;
}
/* Labels for Checkboxes */
input[type="checkbox"] + label {
    cursor: pointer;
    margin-left: 5px;
}


.form-check-input {
    background-color: transparent;
    border: none;
}

.monospace {
    font-family: monospace, "Courier New", Courier;
    font-size: 0.9em;
    color: #333; /* Dark gray for better readability */
}


/** HIDE EMPTY SPAN **/
span:empty {
    display: none;
}


#divMainContent {
    z-index: 1;
    margin-top: 0;
    background-color: white
}

.floatr, .floatr table {
    float: right;
}

.floatl {
    float: left;
}

.floatclear, .floatc {
    clear: both;
}

.nudge-up{
    margin-top: -8px !important;
}

.fit-content {
    max-width: fit-content !important;
}

.firmname {
    text-align: center;
    font-weight: 200;
    font-size: 1.9em;
    color: #f8b55b /* #ffd700*/;
    font-family: 'Antonio', sans-serif;
}

.form-group input, .form-group select, .editpanel input, .editpanel select {
    margin-bottom: 15px;
}

input.integer-sm {
    width: 100px;
}
input.integer-xs {
    width: 60px;
}

.CheckBoxList td {
    padding-right: 15px;
    white-space: nowrap;
}

.RadioButtonList input {
    margin-bottom: 0;
    margin-right: 5px;
}


.RadioButtonList {
    display: inline-flex;
    margin: 0;
    border-collapse: separate;
}

    .RadioButtonList td {
        padding: 0 12px 0 0;
    }

    .RadioButtonList input[type="radio"] {
        margin-right: 5px;
        cursor: pointer;
    }

    .RadioButtonList label {
        cursor: pointer;
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }

    .RadioButtonList input[type="radio"]:checked + label {
        font-weight: 600;
        color: #0d6efd;
    }

/* For better spacing with adjacent elements */
.form-control + .RadioButtonList {
    margin-left: 15px;
}

/* If you want a more modern look with custom radio buttons */
.RadioButtonList input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    background-clip: content-box;
    padding: 2px;
    margin-right: 6px;
    vertical-align: middle;
}

    .RadioButtonList input[type="radio"]:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
        background-clip: content-box;
        padding: 2px;
    }


.RadioButtonList.AutoPostback input, .RadioButtonList.AutoPostback label {
    cursor: pointer;
}

.RadioButtonList.AutoPostback .aspNetDisabled label, .RadioButtonList.AutoPostback .aspNetDisabled input {
    cursor: not-allowed;
}

.toggleSidebar {
    cursor: pointer;
    font-size: 25px;
}

.pointer, .pointer label, .pointer input {
    cursor: pointer;
}

.version {
    position: inherit;
    bottom: 2px;
    left: 10px;
    font-family: 'Antonio';
    font-size: .8em;
    color: #ddd;
    display: inline-block;
    vertical-align: super;
    width: fit-content;
}


.pkey {
    position: inherit;
    bottom: 2px;
    left: 10px;
    font-family: 'Antonio';
    font-size: .9em;
    color: #ddd;
    /*  width: 100%;*/
}

.pindown {
    bottom: 2px;
    right: 10px;
    font-family: 'Antonio';
    font-size: .9em;
    color: #ddd;
    position: fixed;
}

#header {
    /* height: 36px
    width: 100vw;
    display: block;;*/
    background-color: aliceblue;
    padding: 2px;
}

    #header span#lblUserName {
        vertical-align: middle;
    }

    #header a {
        color: inherit;
        text-decoration: none;
    }

    #header .profilepic img, .profilepic img {
        height: 36px;
        margin: 3px;
    }

#content {
    /*margin-top: 10px;
    margin-left: 200px;*/ /* Avoid content under sidebar */
    transition: margin-left 0.3s;
    padding: 0; /* Add padding */
    flex-grow: 1;
}

    #content #messageContainer {
        width: 100%;
        text-align: center;
    }

        #content #messageContainer #lblError {
            /*font-size:1.5em;*/
            background-color: yellow;
            padding: 5px 20px;
        }

    #content.transition-enabled {
        transition: margin-left 0.3s;
    }

    #content.content-expanded {
        margin-left: 0;
    }

.stickyLeft {
    position: fixed; /* Fix sidebar position */
}


.nav.nav-pills {
    border: #ddd solid 1px;
    padding: 3%;
    border-radius: 5px;
}

    .nav.nav-pills .nav-link {
        color: #ffc107;
    }

        .nav.nav-pills .nav-link.active {
            background-color: var(--global-secondary-color);
            color: white;
        }


/********** REQUIRED DOCS **********/

/* Inline, full-width bar */
.add-req-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    flex-wrap: nowrap;
}


.add-req-select {
    flex: 0 0 auto; /* don't stretch */
}


.add-req-input {
    flex: 1 1 auto;
    min-width: 0; /* lets it actually stretch on one line */
}

.add-req-btn {
    display: inline-block; /* keep images aligned inline with textbox */
}




input.select_filter {
    margin: 0 4px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    font-size: .7em;
    position: relative;
    top: -4px;
}

/*** PROFILE PAGE ***/
ul#profile-tabs.nav {
    margin-bottom: 10px;
}



/** VALIDATE **/
#MainContent_pnlSearch {
}

    #MainContent_pnlSearch .form-group input {
        margin-bottom: 5px;
    }


#MainContent_gvSignatures.GridView .LineNbr {
    background-size: cover;
    text-align: center;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px yellow;
}

#MainContent_gvSignatures.GridView .highlightedItem .LineNbr {
    background-image: none !important;
    color: blue;
    font-size: 2em;
}

.LineNbrWrap {
    display: inline;
    float: right;
    margin-top: 10px;
}

    .LineNbrWrap input {
        text-align: center;
        font-size: 2em;
        font-weight: bold;
        padding: 0;
    }

.PreviousNextButtons input[type='submit'] {
    width: 30px
}

.transition-enabled {
    transition: all 0.3s;
}

.openseadragonwrap {
    position: relative; /* Allows positioning of child elements inside */
    width: 100%; /* Ensure it matches the width of the container */
}

#openseadragon1 {
    height: 500px;
    border: 1px solid gold;
}

.rotateImage {
    position: absolute;
    bottom: 10px; /* Adjust the distance from the bottom */
    left: 10px; /* Adjust the distance from the left */
    display: flex;
    gap: 10px; /* Space between buttons */
    align-items: center; /* Vertically align images */
    z-index: 1000; /* Ensure it appears above the viewer */
}

.btn-image {
    cursor: pointer;
    width: 40px; /* Adjust button size */
    height: 40px;
    transition: transform 0.2s;
}

    .btn-image:hover {
        transform: scale(1.1); /* Slight zoom effect on hover */
    }

#rotateLeft {
    margin-top: 6px;
}

#rotateLeft, #rotateRight {
    transition: transform 0.2s ease-in-out; /* Smooth transition for rotation */
}


#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(155, 155, 155, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none; /* Initially hidden */
}

    #loadingOverlay img {
        max-width: 100%;
        max-height: 100%;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
    }

#ddlFirmSelection {
    padding: 0;
    margin: 0;
    line-height: 1;
    float: right;
    transition: width 0.3s ease-in-out;
}



    #ddlFirmSelection option {
        padding: 0;
        margin: 0;
        line-height: 1.5;
    }



/*BOOTSTRAP OVERRIDES*/

.badge {
    color: #f8b55b;
}

.editpanel .badge {
    color: #fff;
}


.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    margin-left: 0;
}

.alert {
    display: block;
}

.form-control:disabled, .form-control[readonly], input[type=image]:disabled {
    background-color: var(--bs-secondary-bg) !important;
    opacity: .85 !important;
    pointer-events: none;
    filter: grayscale(100%);
}



.bg-primary {
    background-color: var(--global-primary-color) !important; /* Your custom color */
    color: white !important;
}

    .bg-primary, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6 {
        color: white !important;
    }

.bg-secondary {
    background-color: var(--global-secondary-color) !important; /* Your custom color */
    color: white !important;
}

    .bg-secondary, .bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6 {
        color: white !important;
    }

.mb-3 {
    margin-bottom: 6px;
}

/*.btn-success {
    background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-success-dark) 100%);
}*/

.import-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-success-dark) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: var(--bs-font-sans-serif);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--bs-success-rgb), 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

    .import-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--bs-success-rgb), 0.6);
    }

    .import-button:active {
        transform: translateY(1px);
    }

    .import-button svg {
        margin-right: 10px;
        transition: transform 0.3s ease;
    }

    .import-button:hover svg {
        transform: rotate(15deg);
    }

    .import-button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .import-button:focus:not(:active)::after {
        animation: ripple 1s ease-out;
    }

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Add styling for file input */
.import-button input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.tv-active-btn {
    background: var(--global-primary-color);
    margin: auto;
    margin-bottom: 20px !important;
    width: auto;
    min-width: 120px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
    cursor: pointer; /* Change cursor to pointer on hover */
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    border-radius: 7px !important;
}

    .tv-active-btn:hover {
        background: var(--global-primary-color); /* #0099cc Darker shade of the original background color */
        color: var(--global-secondary-color); /* #f0f0f0; Slightly lighter text color */
        border-color: var(--global-primary-color); /* Change border color to match the original background */
        transform: scale(1.05); /* Slightly scale up the button */
    }

    /* Remove left margin if it's the first child or if it's after a non-button element */
    .tv-active-btn:first-child,
    :not(.tv-active-btn) + .tv-active-btn {
        margin-left: 0;
    }

input + .tv-active-btn, a + .tv-active-btn {
    margin-left: 20px !important; /* Default margin for all buttons */
}

.modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

    .modal-footer > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


.GridView tr.EditRowStyle input {
    vertical-align: middle;
}

.GridView .tv-active-btn {
    margin: 2px;
    width: auto;
    height: auto;
    min-width: 50px;
    margin-bottom: 0px !important;
}

.GridView td {
    padding: 3px 9px;
    border: 1px solid #f8b55b;
    text-align: center;
}

.GridView tr.EditRowStyle td {
    padding: 3px 0px;
}



.GridView tr.FooterStyle {
    background-color: #c5e8ef;
}

    .GridView tr.FooterStyle td {
        background-color: #c5e8ef;
        font-weight: bold;
        color: #000;
        text-align: center;
    }

.nowrap {
    white-space: nowrap; /* Prevents wrapping */
}


.big-font * {
    font-size: 1.25rem; /* adjust as needed */
}


.small-font {
    font-size: 0.8em;
}

.fkey {
    float: right;
    color: #ccc;
    font-family: Courier New, Courier, monospace;
    font-size: .8em;
}

.highlightedItem {
    background-color: yellow !important; /* Set the background color or any other styles for highlighting */
}

.SignaturePageSummary ul {
    list-style-type: none;
}

.SignaturePageSummary li.unverified {
    list-style-image: url("img/sig_unverified.png")
}


.SignaturePageSummary li.hard {
    list-style-image: url("img/sig_hard.png")
}


.SignaturePageSummary li.soft {
    list-style-image: url("img/sig_soft.png")
}


.SignaturePageSummary li.blank {
    list-style-image: url("img/sig_blank.png")
}


.SignaturePageSummary li.invalid {
    list-style-image: url("img/sig_invalid.png")
}


#MainContent_signatureReason input[type="radio"]:checked + label {
    background-color: yellow;
}


.btn-discreet {
    color: #007bff;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .btn-discreet:hover { /* Brand Colors */
        --global-primary-color: #00adef; /* TV Blue */
        --global-secondary-color: #f8b55b; /* TV Gold */
        --global-success-color: #4caf50; /* Green for success */
        --global-success-color-dark: #388e3c; /* Dark Green for success */
        --global-info-color: #5b8cf8; /* Light Blue for info */
        --global-info-color-dark: #2f5df4; /* Dark Blue for info */
        --global-warning-color: #ff9800; /* Orange for warning */
        --global-warning-color-dark: #ef6c00; /* Dark Orange for warning */
        --global-danger-color: #f44336; /* Red for danger */
        --global-danger-color-dark: #c62828; /* Dark Red for danger */
        --global-light-color: #f8f9fa; /* Light Gray */
        --global-light-color-dark: #e0e0e0; /* Darker Light Gray */
        --global-dark-color: #212529; /* Dark Gray */
        --global-dark-color-dark: #121417; /* Darker Dark Gray */
        /* Bootstrap Theme Colors */
        --bs-primary: var(--global-primary-color);
        --bs-primary-dark: #008ecc; /* Darker TV Blue */
        --bs-secondary: var(--global-secondary-color);
        --bs-secondary-dark: #e39e3d; /* Darker TV Gold */
        --bs-success: var(--global-success-color);
        --bs-success-dark: var(--global-success-color-dark);
        --bs-info: var(--global-info-color);
        --bs-info-dark: var(--global-info-color-dark);
        --bs-warning: var(--global-warning-color);
        --bs-warning-dark: var(--global-warning-color-dark);
        --bs-danger: var(--global-danger-color);
        --bs-danger-dark: var(--global-danger-color-dark);
        --bs-light: var(--global-light-color);
        --bs-light-dark: var(--global-light-color-dark);
        --bs-dark: var(--global-dark-color);
        --bs-dark-dark: var(--global-dark-color-dark);
        color: #0056b3;
        text-decoration: underline;
    }


/**** UNIVERSAL MESSAGING ****/
.messageContainer {
    width: 100%;
}

.message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    position: relative;
}

    .message .close-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 20px;
        color: #333;
    }

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.hide, .hidden {
    display: none;
}



button.close {
    position: absolute;
    right: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #bbb;
    color: #333;
}

.aspNetDisabled {
    background-color: #ccc;
}


textarea.form-control {
    height: auto; /* This allows the rows attribute to control the height */
}

.form-control {
    appearance: auto;
    margin-left: 10px; /* Default margin for all form controls */
    height: 40px;
}
input.form-control {
    border: 1px solid var(--global-secondary-color); /* Default border */
}

    /* If a .form-control is immediately followed by another .form-control */
    .form-control + .form-control {
        margin-top: 10px; /* Add top margin if on a new line */
    }

    /* If a .form-control is followed by another .form-control on the same line */
    .form-control:not(:first-child):not(:last-child) {
        margin-left: 0; /* Remove left margin if it's not the first or last in a line */
    }

    /* If a .form-control is the first in a line but not the last */
    .form-control:not(:last-child) {
        margin-left: 10px; /* Keep left margin if it's the first but not the last */
    }

    /* If a .form-control is the last in a line but not the first */
    .form-control:not(:first-child) {
        margin-left: 0; /* Remove left margin if it's the last but not the first */
    }

.pkinfo {
    font-size: x-small;
    color: #CCC;
}

#imageContainer .thumbnail {
    margin: 1%;
    border: 1px solid #aaaaaa73;
    display: inline-flex;
    /* width: 200px; */
    padding-bottom: 1%;
}

    #imageContainer .thumbnail img {
        cursor: pointer;
    }

    #imageContainer .thumbnail .btnReplacePage {
        font-size: .7em;
        padding: 0px 5px;
    }


.editpanel {
    background-color: lightblue;
}



.date_picker,
.date-range-picker {
    width: 115px;
    max-width: 115px !important;
    background: url('img/menu/calendar.png') no-repeat right center;
    background-color: white;
    background-position: right 5px center;
    padding-right: 20px;
    padding-left: 2px !important;
    text-align: left !important;
}

.date-range-picker {
    width: 210px;
    max-width: 210px !important;
}



/***********************************************/
@media (max-width: 600px) {
    #header .tv-font {
        font-size: 1.2em;
    }

    #header .profilepic img {
        height: 24px;
    }

    #header span#ctl00_lblUrl {
        display: none; /* Hide the URL label on small screens */
    }
}


@media (min-width: 1000px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: none; /* Remove the max-width constraint */
        width: 100%; /* Ensure it spans the full width */
    }

    #sidebar {
        min-width: 140px;
    }
}

.showMore {
    display: block;
    position: relative;
    max-height: 3em; /* adjust to your "natural" height, e.g. 2-3 lines */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .showMore.expanded {
        max-height: none;
    }

.showMoreToggle {
    display: block;
    font-size: 0.8em;
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 4px;
}