:root {

    /*these are color vars used in first style/theme.  Leaving here for any components that may be using it directly */
    /*These incidents should be removed and the formal theme updated instead. */
    --secondary-blue: #80B7CD;
    --primary-blue: #1F5975;
    --text-onLightBlue: #ffffff;
    --light-blue-bg: rgba(128, 183, 205, 0.2);
    --dark-blue-text: #174b64;
    --focus-box-shadow: rgba(33, 37, 41, 0.15)
}

.bg-control-lt-blue {
    background: var(--light-blue-bg);
    border-radius: 10px;
    padding: 10px;
}

/* This switch style is here because bootstrap doesn't display label text (display none) */
.k-switch-label-on, .k-switch-label-off {
    display: inline !important;
    text-transform: uppercase;
}

/* this makes sure the swtich text appears in the correct horizontal position (so not to be under the circle)*/
/* it also makes the text color visible */
.k-switch-label-on {
    left: 7px;
    color: white;
}
.prevent-typing input {
    caret-color: transparent;
    user-select: none;
}

.k-switch-label-off {
    right: 5px;
}
.k-switch{
    width:62px !important;
}
.custom-dialog{
    min-width:400px !important;
}
.MoveLeft {
    position: relative;
    left: -42%;
}
/* This is to allow the overriding of the text color on the loaders */
.k-loader-container {
}
    .k-loader-container .k-text-primary {
        color: #1F5975 !important

    }

.k-dialog-actions {

}

.k-dialog-actions .k-button {
    color: white !important;
    background: var(--primary-blue) !important;
}


.k-svg-icon {
    width: 16px !important;
}

.excel-grid-container {
    overflow-x: auto;
}

.yellow {
    color: #fff780;
}


.blue {
    color: #174b64;
}

.k-card {
    border: none !important;
}

.font-size-header {
    font-size: 1.50rem !important;
    color: #174b64 !important;
    font-weight: 700;
}
 

.k-input-md, .k-picker-md {
    font-size: 0.95rem !important;
    line-height: 1.5;
}

.section-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #174b64 !important;
    color: white;
    padding-left: 10px;
    text-align: left;
}

.section-container {
    /* padding: 10px; */
    margin-bottom: 10px;
    /* padding-left: 2%; */
}

.k-card {
    font-size: 0.95rem !important;
}

.k-card-body {
    padding-top: 4px !important;
    padding-right: 1rem !important;
    padding-bottom: 2px !important;
    padding-left: 1rem !important;
}

fieldset {
    display: block !important;
    padding-block-start: 0.35em !important;
    padding-inline-start: 0.75em !important;
    min-inline-size: min-content;
    border-width: 1px !important;
    border-style: groove !important;
    border-color: rgb(192, 192, 192) !important;
    margin: 10px 0px 20px 0px;
}

legend {
    width: auto !important;
    font-size: 14px !important;
    font-weight: 700;
}

.form-check {
    padding-left: .25rem !important;
}

.k-radio:checked, .k-radio.k-checked {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e);
}

.k-radio-md {
    width: 16px;
    height: 16px;
}

.k-radio {
    border-radius: 50%;
    margin: 0;
    padding: 0;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
}

    .k-radio:checked, .k-radio.k-checked {
        border-color: #174b64;
        color: white;
        background-color: #174b64;
    }

.grid-container {
    width: 100%;
    overflow-x: auto;
}

.main-container {
    padding: 20px;
}


.prompt-details {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #174b64 !important;
}

.form-group {
    margin-bottom: 10px;
    font-size: 14px !important;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

 .form-check input {
        margin-right: 10px;

 }

.google-sheet-container {
    border-right: 1px solid #ddd;
    padding-right: 20px;
    margin-top: 20px;
}

.label-font {
    font-weight: 500;
}

.span-font {
    font-weight: 400;
}


.textboxHeight {
    overflow-y: auto;
    height: 400px;
}


.errorMessage {
    color: orangered;
    font-weight: 500;
}

.successMessage {
    color: green;
    font-weight: 500;
}
.alert-message {
    color: #721c24
}
.k-svg-icon {
    width: 16px !important;
}

.red {
    color: red;
}

.black {
    background-color: black;
}

.k-menu-group-md .k-menu-item {
    height: 42px !important;
    width: 210px;
}

.k-menu-group .k-item > .k-link:hover {
    background-color: #1f5975 !important;
    color: #ffffff;
}

.excel-grid-container {
    overflow-x: auto;
}


.k-card {
    border: none !important;
}

.font-size-header {
    font-size: 1.50rem !important;
    color: #174b64 !important;
    font-weight: 700;
}

.k-input-md, .k-picker-md {
    font-size: 0.95rem !important;
    line-height: 1.5;
}

.section-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #174b64 !important;
    color: white;
    padding-left: 10px;
    text-align: left;
}

.section-container {
    /* padding: 10px; */
    margin-bottom: 10px;
    /* padding-left: 2%; */
}

.k-card {
    font-size: 0.95rem !important;
}

.k-card-body {
    padding-top: 4px !important;
    padding-right: 1rem !important;
    padding-bottom: 2px !important;
    padding-left: 1rem !important;
}

.form-check {
    padding-left: .25rem !important;
}

.k-radio:checked, .k-radio.k-checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e");
}

.k-radio-md {
    width: 16px;
    height: 16px;
}

.k-radio {
    border-radius: 50%;
    margin: 0;
    padding: 0;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
}

    .k-radio:checked, .k-radio.k-checked {
        border-color: #174b64;
        color: white;
        background-color: #174b64;
    }

.grid-container {
    width: 100%;
    overflow-x: auto;
}

.main-container {
    padding: 20px;
}


.prompt-details {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #174b64 !important;
}

.form-group {
    margin-bottom: 10px;
    font-size: 14px !important;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .form-check input {
        margin-right: 10px;
    }

.google-sheet-container {
    border-right: 1px solid #ddd;
    padding-right: 20px;
    margin-top: 20px;
}

.label-font {
    font-weight: 500;
}

.span-font {
    font-weight: 400;
}

.k-breadcrumb-current-item .k-breadcrumb-link, .k-breadcrumb-last-item .k-breadcrumb-link {
    color: #8a969e !important;
}

.k-breadcrumb-link, .k-breadcrumb-root-link {
    text-decoration: none !important;
    color: #4f6c68 !important;
    font-size: 0.9em;
    font-weight: 500;
}

.k-breadcrumb {
    border-style: none;
}
.blazor-link {
    color: #1f5975 !important;
    font-weight: 500;
}

.strike{
    text-decoration:line-through;
}


.checkbox-container {
    text-align: right;
    margin-top: 10px;
}

.button-container {
    margin-top: 10px;
    text-align: right;
}

.checkbox-label {
    margin-left: 8px;
    margin-top: 0px !important;
    padding: 0px !important;
}
.ip-range-section {
    margin-bottom: 2%;
    width:100%;
}

.input-group {
    display: flex;
    align-items: center;
}

.alert {
    margin-top: 2%;
}

.no-record {
    padding: 30px;
}

.footer-buttons {
    float: right;
}
.password-reset {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width:100%;
}
.password-reset-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.two-step-verification-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.mismatch-password {
    background-color: #ffe6e6;  
    border: 1px solid red;
}


.email-forgotpassword-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.verification-input {
    display: flex;
    gap: 10px;
    align-items: center;
}

.verification-message {
    margin-top: 10px;
    color: #4caf50;  
    font-weight: bold;
}
.box-section {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    width: 700px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.box-section1 {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    max-width: 700px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
 

.box-section2 {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    width: 500px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} 

.margin-10 {
    margin-left: 10px;
}

.width70 {
    width: 70%;
}

.margin-bottom2 {
    margin-bottom: 2%;
}

.marging-15 {
    margin-top: 15%;
}

.marging-2 {
    margin-top: 1%;
    margin-bottom: 1%;
}
.checkbox-group {
    max-width: fit-content;
    min-width: max-content;
}

.checkbox-list {
    height: 35%;
}

.warning-message {
    color: #721c24;
    margin-bottom: 11px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

    .warning-message strong {
        font-weight: bold;
    }


.alert-info {
    font-size: 14px;
    padding: 10px; 
    color: #721c24;
}
.loader-indicator {
    margin-left: 5px;
}


.green-icon .k-icon {
    color: green;
}

.red-icon .k-icon {
    color: red;
}

.active-chk-position {
    position: absolute;
    top: 1%;
    left: 86%;
    width: 92px;
}
.browser-notification {
    position: absolute;
}

    .browser-notification .k-notification {
        width: 530px;
    }

.k-notification-container {
    margin: 6px 0;
}

#browser-runner {
    height: 320px;
}

.h-95 {
    height: 95% !important;
}



.content {
    overflow: hidden !important;
    height: calc(100% - 10px);
}

.initial-data-loader .k-loader-container-overlay.k-overlay-light {
    background-color: white;
}

.k-loader-container {
    z-index: 100;
}
 
.group-header {
    font-weight: bold;
}

.sub-headers {
    margin-top: 2px;
} 
.no-border {
    border: transparent !important;
}

.toolbar-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}
 
.header-container {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
}

.header-title {
    font-weight: bold;
    font-size: 0.9rem;
}

.header-textbox {
    width: 100%;
    background-color: transparent;
    font-weight: bold;
    font-size: 0.95rem;
}

.header-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.type-selector {
    min-width: 45%;
    font-size: 0.85rem;
}

.format-selector {
    min-width: 40%;
    font-size: 0.85rem;
}

.custom-format-box {
    margin-top: 0.3rem;
}

.custom-format-input {
    width: 100%;
    font-size: 0.85rem;
}  

.custom-format {
    margin-top: 4px;
}

.sub-headers {
    width: 100%;
    margin-top: 2px;
}


.group-header {
    font-weight: bold;
}

.k-column-title {
    width: 100% !important;
}


.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0px;
}

.splitter-container {
    flex: 1;
    min-height: 0;
}

.pane-content {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    padding-right: 12px; /* Ensure the pane content has proper padding for scrollbars */
}

.help-content-pane {
    background: var(--light-blue-bg);
    padding: 10px;
}

.non-shrinking-stack {
    flex-shrink: 0;
} 
  
/* Custom scrollbar styling */
/* Should look at moving this to the main style sheet/main layout for default look*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.k-calendar .k-calendar-cell-inner, .k-calendar .k-link
{
    display:inherit !important;
}