/* ============================= Body & General Styles ============================= */

body {
    font-family: 'Montserrat', sans-serif;
}

.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}
/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}
/* Form inputs */

input, select, textarea {
    max-width: 280px;
}
/* ============================= Header & Footer ============================= */

.site-header {
    background-color: #004080;
    color: white;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
}

    .site-header img {
        height: 60px;
        margin-right: 15px;
    }

.skh-title {
    font-size: 1.7rem !important; /* larger text */
    font-weight: 700 !important; /* bold */
    letter-spacing: 0.5px; /* subtle spacing */
    text-transform: uppercase; /* optional: make it strong */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* subtle depth */
    margin: 0;
}

   

.site-footer {
    background-color: #004080;
    color: white;
    text-align: center;
    padding: 1rem 0;
    font-family: 'Montserrat', sans-serif;
}
/* ============================= Navbar ============================= */

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #adc7db;
    }


.hero-section {
    background: linear-gradient(rgba(53,122,184,0.85), rgba(53,122,184,0.85)), url('/images/roof-banner.jpg') center no-repeat;
}
/* ============================= Info Strip ============================= */

.info-strip {
    background-color: #111; /* black */
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .info-strip .info-text i, .info-strip .account-text i {
        margin-right: 0.5rem;
        color: #00bfff; /* light blue icon */
    }

    .info-strip a {
        color: #00bfff;
    }

        .info-strip a:hover {
            color: #80d4ff;
            text-decoration: underline;
        }
/* ============================= Page Headers ============================= */

.page-header h2 {
    color: #004080; /* strong blue */
    font-weight: 600;
    font-size:1.7rem;
    border-bottom: 2px solid #357ab8;
    padding-bottom: 0.3rem;
    margin-bottom: 1rem;
}
/* ============================= Sections ============================= */

.section-header {
    font-size: 1.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #357ab8;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: .5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.section-item {
    margin-bottom: 20px;
    padding: 25px;
    background-color: #f5f6f7; /* light gray background */
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.05);
}

/*.section-item {
    background-color: #f5f6f7;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}*/

.section-title {
    color: steelblue;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.section-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}



.section-list {
    list-style: none; /* remove default bullets */
    padding-left: 0;
    line-height: 1.6;
    color: #333;
}

    .section-list li {
        position: relative;
        padding-left: 2rem; /* space for the icon */
        margin-bottom: 1rem;
    }

        .section-list li::before {
            content: "\f058"; /* Font Awesome check-circle icon */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 0;
            color: #357ab8; /* primary blue */
            font-size: 1rem;
        }
/* ============================= Login Section ============================= */

.login-section .login-card {
    background: #e0f0ff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s;
}

    .login-section .login-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

.login-section .login-icon i {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 10px;
}

.login-section .btn {
    width: 80%;
}
/* Login Section Styling */



.section-title {
    color: steelblue;
    margin-bottom: 15px;
}

.input-group-text {
    background-color: #e0f0ff;
    border: 1px solid #ccc;
    color: #007bff;
}

.form-control {
    border-radius: 0;
}

.btn-primary {
    background-color: #007bff;
    border: none;
}

.text-success {
    font-weight: 500;
}

.text-center a {
    color: #007bff;
    text-decoration: none;
}

    .text-center a:hover {
        text-decoration: underline;
    }

.error-message {
    display: none; /* hidden by default */
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    color: #721c24; /* dark red text */
    background-color: #f8d7da; /* light red/pink background */
    border: 1px solid #f5c6cb; /* red border */
    font-weight: 500;
    text-align: center;
}



.card-info {
    background-color: #e9f5ff;
    border-left: 5px solid #007bff;
}

.table-responsive {
    margin-top: 1rem;
}

table thead tr th {
    background-color: #357ab8  ;
    color: white ;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table tbody tr:hover {
    background-color: #f1f7ff;
}

#pnlPageError {
    font-weight: 500;
    font-size: 0.95rem;
}
/* Table */

.table-hover tbody tr:hover {
    background-color: #f1f7ff;
}


/* Action buttons */

.table .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* space between icon and text */
    font-weight: 500;
}

.table .btn-primary,
.table .btn-info {
    background: none !important;
    border: none !important;
    color: #357ab8 !important; /* or #17a2b8 for info */
    padding: 0.25rem;
    font-size: 1.1rem; /* adjust size */
    cursor: pointer;
}

    .table .btn-primary:hover,
    .table .btn-info:hover {
        color: #357ab8 !important; /* darker shade on hover */
        background: none !important;
    }


/* Panel Box */

.panel-box {
    background: #f8f9fa;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 25px;
}
/* Error Box */

.error-box {
    display: block;
    padding: 12px 15px;
    border: 1px solid #dc3545;
    border-radius: 6px;
    background: #f8d7da;
    color: #721c24;
    font-weight: 500;
}
/* Questions & Labels */

label.col-form-label {
    font-weight: 500;
    line-height: 1.4;
}
/* Radio Buttons */

/*.rbl input[type="radio"] {
    margin-right: 6px;
}

.rbl label {
    margin-right: 20px;
    font-weight: 400;
}*/

.rbl {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px 24px; /* row gap, column gap */
    padding: 5px 0;
}

    .rbl input[type="radio"] {
        margin-right: 6px;
        accent-color: #0d6efd; /* Bootstrap primary blue */
    }

    .rbl label {
        font-weight: 500;
        color: #333;
        cursor: pointer;
    }
/* Button */

.btn-primary {
    background-color: #4a90e2 !important; /*#4a90e2;*/
    border-color: #4a90e2;
    font-weight: 500;
}

    .btn-primary:hover {
        background-color: #357ab8;
        border-color: #357ab8;
    }





    /*Agent*/
    /* ============================= Agent Page Styles ============================= */
    /* RadioButtonList / Inline Radios */
    .form-check-inline {
    margin-right: 15px;
}

    .form-check-inline input[type="radio"] {
        margin-top: 2px;
        margin-right: 5px;
    }

/* Card for 3rd Party Panel */
#pnl3rdParty {
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #f8f9fa;
}

/* Small adjustments for labels aligned right */
.col-form-label.text-end {
    padding-right: 10px;
}

/* Optional: highlight required asterisks */
#pnl3rdParty .text-danger {
    font-weight: 700;
}
    /*Agent*/

.inline-radio span {
    display: inline-block;
    margin-right: 20px; /* spacing between radios */
}

/* === Claim.aspx Custom Styling === */

/* Panels / Section wrappers */
.DPLpanel1, .container1 {
    background: #fff;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 25px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Section headers */
.TKFSection {
    font-size: 1.15rem;
    font-weight: 600;
    color: #004080;
    margin: 30px 0 12px 0;
    border-bottom: 2px solid #d6e4f0;
    padding-bottom: 6px;
}

/* Info / alerts */
.alert-info {
    background: #e9f3ff;
    border: 1px solid #b3d4fc;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Inline form groups for better alignment */
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .form-group > div {
        flex: 1;
        min-width: 200px;
        margin-right: 15px;
    }

    .form-group .text-right {
        flex: 0 0 160px;
        text-align: right;
        font-weight: 500;
        color: #444;
    }

/* Submit panel */
#pnlSubmit {
    text-align: center;
    margin-top: 25px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1.1rem;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none; /* remove underline */
}

/* Primary button */
.btn-primary {
    background-color: #007bff;
    color: #fff !important; /* Force white text */
    border: 1px solid #007bff;
}

    .btn-primary:hover {
        background-color: #0069d9;
        color: #fff !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
    }

/* Secondary button */
.btn-secondary {
    background-color: #6c757d;
    color: #fff !important;
    border: 1px solid #6c757d;
}

    .btn-secondary:hover {
        background-color: #5a6268;
        color: #fff !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    }

/* Icon spacing */
.btn i.me-2 {
    margin-right: 0.5rem;
}

.btn i.ms-2 {
    margin-left: 0.5rem;
}

/* Icon size */
.btn i {
    font-size: 1.2rem;
    vertical-align: middle;
}

.site-header, .site-footer {
    background-color: #1f6fb8; /* same blue */
    color: white;
}
.info-strip a {
    text-decoration: underline;
}

/* Optional: responsive font size for header */
.site-header h1 {
    font-size: 1.25rem;
}

/* Optional: add a small shadow to header/footer for better separation */
.site-header, .site-footer {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



/* Card Container */
.login-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background-color: #ffffff;
    transition: transform 0.3s, box-shadow 0.3s;
}

    .login-card:hover {
       
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

    /* Header Section */
    .login-card .login-header {
        
        color: #357ab8;
        padding: 20px;
        font-size: 1.5rem;
        font-weight: 600;
        text-align: center;
    }

    /* Input Groups */
    .login-card .input-group-text {
        background-color: #357ab8;
        color: #fff;
        border: none;
    }

    .login-card .form-control:focus {
        border-color: #357ab8;
        box-shadow: 0 0 0 0.2rem rgba(53,122,184,0.25);
    }

    /* Submit Button */
    .login-card .btn-primary {
        background: #357ab8;
        border: none;
        font-weight: 600;
      
    }

        .login-card .btn-primary:hover {
            background: #23527c;
            transform: translateY(-2px);
        }

    /* Links */
    .login-card a {
        color: #357ab8;
        text-decoration: none;
    }

        .login-card a:hover {
            text-decoration: underline;
        }

/* Optional: ReCaptcha spacing */
/*#html_element {
    margin: 0 auto;
}*/

.rbl input[type="radio"] {
    margin-left: 15px;
    margin-right: 1px !important;
}

.rbl label {
    margin-left: 5px;
    margin-right: 1px;
}


.section-header-admin {
   
    color: #357ab8; /* dark slate text */
    font-weight: 600;
}

.tile-card {
    background-color: #c7ddf0; /* light bluish-gray */
    border: 1px solid #4f8cc7;
}

    .tile-card:hover {
        background-color: #e2ebf3; /* slightly darker on hover */
       
    }

.nav-tabs .nav-link {
    color: #1f4e7a; /* Soft dark blue text */
    background-color: #d6e4f0; /* Light steel-blue background */
    border: 1px solid #b0c4db; /* Slight border for separation */
    border-bottom: none; /* Remove bottom border for active effect */
    margin-right: 2px;
    font-weight: 600;
}

    .nav-tabs .nav-link.active {
        color: #fff;
        background-color: #357ab8; /* Slightly deeper blue for active tab */
        border-color: #357ab8;
        border-bottom: none;
    }

.tab-content {
    border: 1px solid #b0c4db;
    padding: 1rem;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: #f8faff; /* Very light blue background for content */
}

* Enterprise button refinement */
.enterprise-btn {
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.2px;
    background-color: #f8f9fa; /* light neutral */
    border-width: 1px;
}

.enterprise-btn:hover {
    background-color: #e9ecef;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.enterprise-btn i {
    opacity: 0.8;
}

/* Optional: make the section header align cleanly */
.section-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

tr.upload-row:hover {
    background-color: transparent !important; /* keep it normal */
}

.btn-group .btn {
    min-width: 85px;
    font-weight: 500;
}

textarea.form-control {
    width: 90%;
    resize: none;
    font-size: 0.85rem;
}

#docSearch {
    max-width: 350px;
    margin-bottom: 10px;
}
.label-fixed {
    width: 600px; /* adjust based on your longest label */
    display: inline-block;
}

.rbl > table {
    margin-bottom: 0;
}

.fixed-width {
    width: 700px !important; /* Set exact width */
    min-width: 0 !important; /* Remove Bootstrap min-width */
    max-width: 100% !important; /* Allow responsive shrink on mobile */
    flex-shrink: 0 !important; /* Prevent flex from shrinking */
}

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

.form-control, .form-select {
    border-radius: 6px;
}

.btn {
    min-width: 140px;
}

::-ms-reveal {
    display: none;
}

.instruction-box {
    background: #e8f3ff;
   
    padding: 15px 20px;
    
    margin-bottom: 15px;
}

.login-card {
    border-radius: 10px;
}

#pnltwilio .otp-input,
#pnltwilio .otp-btn {
    width: 100%;
    flex: 0 0 100%;
}

/* Prevent textbox shrinking */
#pnltwilio .otp-input {
    min-width: 100%;
}

/* Desktop only */
@media (min-width: 768px) {
    #pnltwilio .otp-input,
    #pnltwilio .otp-btn {
        width: auto;
        flex: 0 0 auto;
    }
}
@media (max-width: 767.98px) {

    .col-md-6.d-flex {
        flex-direction: column;
        align-items: stretch;
    }

        .col-md-6.d-flex .form-control,
        .col-md-6.d-flex .btn {
            width: 100%;
        }
}

@media (max-width: 767.98px) {
    .col-md-6.d-flex > * {
        margin-bottom: 0.5rem;
    }
}

.grid-wrapper {
    width: 100%;
   
    overflow: auto;
    border: 1px solid #ccc;
}

/* Force grid to expand horizontally */
.excel-grid {
    width: max-content !important;
    border-collapse: separate;
}

    /* Prevent wrapping */
    .excel-grid th,
    .excel-grid td {
        white-space: nowrap;
    }

    /* Sticky header */
    .excel-grid th {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 3;
    }

/* Freeze first column */
.freeze-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 4;
}

/* Make header cell above frozen column stronger */
.excel-grid th.freeze-col {
    z-index: 5;
    background: #e9ecef;
}

.wrap-column {
    white-space: normal !important;
    word-break: break-word;
    max-width: 1000px; /* adjust width as needed */
}