/*Added by Carley and needs to be tested*/
/* Grid Columns */
.col1 { grid-column: span 1 !important; }
.col2 { grid-column: span 2 !important; }
.col3 { grid-column: span 3 !important; text-align: center !important; }
.col4 { grid-column: span 4 !important; }
.col5 { grid-column: span 5 !important; }
.col6 { grid-column: span 6 !important; }
.col7 { grid-column: span 7 !important; }
.col8 { grid-column: span 8 !important; }
.col9 { grid-column: span 9 !important; }
.col10 { grid-column: span 10 !important; }

/* Form Styles */
.gform_wrapper { border: none; padding: 0px 10px !important; line-height: 15px; }
.gform_wrapper.gravity-theme * { padding-bottom: 10px; }
.py-5, .gform_wrapper, .ginput_container_consent { padding-top: 0 !important; padding-bottom: 0 !important; }
.gform_wrapper .gform_page_footer { position: fixed; width: 100%; background: #fff; z-index: 1000; left: 0%; bottom: -24px; }

.gform_wrapper.gravity-theme * {
    padding-bottom: 10px;
    font-family: "Courier New", Courier, monospace;
}
.gform_page_footer input[type="submit"],
.gform_page_footer input[type="button"] {
    background-color: #333333 !important; /* Dark grey background */
    color: #ffffff !important; /* White text for contrast */
    border: none !important;   /* Remove any default borders if necessary */
    padding: 10px 20px;        /* Optional: add some spacing */
    cursor: pointer;           /* Optional: ensure pointer cursor on hover */
}
.gf_progressbar_wrapper {
    display: none;
}

/* Form Font Styles */
body .gform_wrapper .gfield_label { font-family: "Courier New", Courier, monospace; font-size: 15px; }
body .gform_wrapper input,
body .gform_wrapper textarea,
body .gform_wrapper select { font-family: "Courier New", Courier, monospace; font-size: 15px; }
body .gform_wrapper .gfield_description { font-family: "Courier New", Courier, monospace; font-size: 15px; }
body .gform_wrapper .gform_button,
body .gform_wrapper .gform_next_button,
body .gform_wrapper .gform_previous_button,
body .gform_wrapper input[type="submit"] { font-family: "Courier New", Courier, monospace; font-size: 15px; }

.gsection_title {
    font-size: 18px;
    margin-bottom: 0px;
}

/* Legal Signing Fields */
.legalsigning-field-signature__adopt { font-size: 10px !important; }
.legalsigning-field-signature__signed-edit { background: #ccc !important; color: #000 !important; padding-top: 10px !important; }
.button.legalsigning-field-signature__adopt span { padding: 13px 32px 8px 5px !important; font-size: 10px !important; background: yellow !important; }

/* Sections and Blocks */
.section-grey { background: #e9e9e9; padding: 20px; margin: 0px; color: #000; }
.section-warranty-blocks { background: #e4e4e4 !important; padding: 20px !important; border: 1px solid #ccc !important; margin-bottom: 10px !important; }

/* Modals */
.modal-footer.justify-content-end.bg-black.border-0 { position: fixed; top: 25px; right: 25px; padding: 0; border-radius: 50%; }
.modal-footer.justify-content-end.bg-black.border-0 .btn { overflow: hidden; text-indent: 100%; white-space: nowrap; width: 35px; height: 35px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background-color: #F26322; font-weight: bold; }
.modal-footer.justify-content-end.bg-black.border-0 .btn::after { content: 'X'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-indent: 0; color: #FFF; font-size: 18px; }
#INDmenu-btn, .modal-header.text-bg-black, .gform_title { display: none; }

/* Bottom Alignment */
.bottom { display: flex; flex-direction: column !important; justify-content: flex-end !important; height: auto !important; }
.fixed-bottom { background: none !important; }
.lgl-state-btm { border-bottom: 1px solid !important; margin-bottom: 15px !important; }

/* Datepicker */
.ui-datepicker { width: auto; display: none; background: #4c4c4c; border: 1px solid #555; z-index: 9999; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 10px; }
.ui-datepicker table { width: 100%; font-size: 14px; border-collapse: collapse; color: #fff; }
.ui-datepicker-header { color: #fff; background-color: #4c4c4c; border-bottom: none; padding: 5px 10px; display: flex; justify-content: space-between; align-items: center; }
.ui-datepicker-prev, .ui-datepicker-next { cursor: pointer; color: #ccc; text-align: center; width: 30px; height: 30px; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { color: #fff; }
.ui-datepicker-month, .ui-datepicker-year { background: transparent; border: 1px solid #666; color: #ddd; border-radius: 4px; padding: 5px; margin: 0 5px; }
.ui-datepicker-calendar td { padding: 8px; text-align: center; cursor: pointer; }
.ui-datepicker-calendar .ui-state-active { background-color: #f76c6c; color: #fff; border-radius: 50%; }
.ui-datepicker-calendar td:hover { background-color: #555; color: #fff; }
.ui-datepicker-today { background-color: #666; }
.ui-datepicker-today .ui-state-default { background-color: #888; }

.m_carousel_tab_component { display: none !important;}
.gform-settings-header {display: none;}
/*DONE ADDED BY CARLEY*/

.form-check-input {
    position: static; /* Or your desired value */
    margin-top: 0; /* Reset margin */
    margin-left: 0; /* Reset margin */
}




/* Apply styles only to tables with the class "highlight-rows" */
.highlight-rows tbody tr:has(input:checked) {
    background-color: #d4edda; /* Light green background */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.mr-3, .kt-pets,  #kt-pets-select-all {
    width: 21px; /* Adjust size as needed */
    height: 21px; /* Adjust size as needed */
    accent-color: black; /* Makes the checkbox black */
    cursor: pointer; /* Optional: Add a pointer cursor for better UX */
}

.highlight-rows tbody input[type="checkbox"],
.highlight-rows tbody input[type="radio"] {
    accent-color: black; /* Black checkbox or radio */
    width: 21px; /* Adjust size */
    height: 21px;
    margin: 0; /* Ensure alignment */
}

.highlight-rows th,
.highlight-rows td {
    padding: 10px; /* Consistent padding */
    vertical-align: middle; /* Center align content */
    /*border-top: 1px solid #b4b4b4;*/
}

/* Optional: Apply a hover effect for better user feedback */
.highlight-rows tbody tr:hover {
    background-color: #f8f9fa; /* Light grey background */
    transition: background-color 0.3s ease;
}

td.breed a {
    color: #000;
}

.pc-table th, .pc-table td {
    vertical-align: middle;
}

.table-padding {
    padding: 15px 15px;
}

.add-on-list-header {
    background: #ff7b01;
    color: white;
    margin-top: 40px;
}

.lg-txtbx {
    width: 31px;
    height: 31px;
    accent-color: black;
    cursor: pointer;
}

.fabs {
    display: none !important;
}

.name a {
    color: black !important;
    text-decoration: none;
}
/* Slider Toggle (Checkout page) */
.slider-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
}

.slider-toggle input {
    display: none;
}

.slider-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider-toggle .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* This is the key change: Increased specificity */
.slider-toggle input.default:checked + .slider {
    background-color: #444 !important;
}

.slider-toggle input.primary:checked + .slider {
    background-color: #2196F3 !important;
}

.slider-toggle input.success:checked + .slider {
    background-color: #8bc34a !important;
}

.slider-toggle input.info:checked + .slider {
    background-color: #3de0f5 !important;
}

.slider-toggle input.warning:checked + .slider {
    background-color: #FFC107 !important;
}

.slider-toggle input.danger:checked + .slider {
    background-color: #f44336 !important;
}

.slider-toggle input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.slider-toggle input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider-toggle .slider.round {
    border-radius: 34px;
}

.slider-toggle .slider.round:before {
    border-radius: 50%;
}

.table-input {
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    width: 100%; /* Optional: makes the input fill the cell width */
}
.table-input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

#report-logo img {
    width: 90px;
}

 /* Style for the radio buttons */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: black; /* Change active radio button color to black */
}
.custom-radio .custom-control-label::before {
    width: 1.5rem; /* Larger size for the radio button circle */
    height: 1.5rem;
    border: 2px solid black; /* Black border */
}
.custom-radio .custom-control-label {
    font-size: 1.25rem; /* Larger text size */
    color: black; /* Black text color */
    padding-left: 0.5rem; /* Add separation between the circle and label text */
    margin-left: 0.5rem; /* Ensure consistent spacing */
}
.custom-controls-inline .custom-radio {
    display: inline-flex;
    align-items: center;
    margin-right: 20px; /* Add spacing between radio buttons */
}

/* Sidebar styles */
.sideHeader {
    display: flex;
    align-items: center;
    padding: 10px;
}

.logo {
    margin-left: 10px;
    height: 30px; /* Adjust the height as needed */
    max-width: 130px; /* Ensure the logo doesn't overflow */
    object-fit: contain;
    transition: opacity 0.3s ease; /* Smoothly hide the logo */
}

.version {
    font-size: 10px;
    color: #666;
    text-align: right;
    margin-top: -30px;
    margin-right: 17px;
}

.sidebar {
    transition: width 0.3s ease;
    width: 250px; /* Full size */
}

.sidebar.collapsed {
    width: 50px; /* Collapsed size */
}

.sidebar.collapsed .logo {
    display: none; /* Completely hide the logo */
}

.sidebar.collapsed .version {
    display: none; /* Hide the version in collapsed mode */
}

.sideBarTab ul li .nav-link span {
    display: inline; /* Default state, show menu item text */
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sideBarTab ul li .nav-link span {
    display: none; /* Hide the menu item text in collapsed mode */
}

.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerAsc {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerDesc {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
    border-right: 1px solid #dfe2e6;
}
.tablesorter-bootstrap tfoot td, .tablesorter-bootstrap tfoot th, .tablesorter-bootstrap thead td, .tablesorter-bootstrap thead th {
    font: 13px / 30px Arial, Sans-serif;
    padding: 0px;
}
.nav-container {
    padding: 0px !important;
}
.form-check-inline {
    margin-right: 0px;
}

/* Table Header Styling */
.pc-puppies thead th {
    font-weight: normal;
    font-size: 13px; /* Match font size from kt-listing */
    padding: 8px 10px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
    position: relative;
}

/* Title Case for the Kennel column */
.pc-puppies th.kennel {
    text-transform: capitalize; /* Capitalize first letter of each word */
}

/* Title Case for the content in Kennel column cells */
.pc-puppies td.kennel {
    text-transform: capitalize; /* Capitalize first letter of each word */
}

.pc-puppies th i {
    font-size: 10px; /* Smaller arrows for sorting */
}

/* Sorting Arrow Styles */
.pc-puppies th.sortable::after {
    content: '\f0dc'; /* Default sorting arrow */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.pc-puppies th.sortable.sorted-asc::after {
    content: '\f0de'; /* Ascending arrow */
}

.pc-puppies th.sortable.sorted-desc::after {
    content: '\f0dd'; /* Descending arrow */
}

/* Apply styles for sorting icons and background size */
.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerAsc {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerDesc {
    background-size: 8px 10px;
}

.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
    border-right: 1px solid #dfe2e6;
}

.tablesorter-bootstrap tfoot td, .tablesorter-bootstrap tfoot th, .tablesorter-bootstrap thead td, .tablesorter-bootstrap thead th {
    font: 13px / 30px Arial, Sans-serif;
    padding: 0px;
}

/* Table Styling */
.pc-puppies td,
.pc-puppies th {
    padding: 8px;
    vertical-align: middle;
}

.pc-puppies .image a {
    display: block;
}

.pc-puppies .image img {
    width: 56px;
    height: auto;
}

.pc-puppies .name {
    max-width: 271px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-puppies .dropdown .btn {
    font-size: 14px;
}

/* Checkbox Style */
.check-all-btn input {
    margin-left: 6px;
}

/* Loading Spinner for Gravity Forms */
img.gform_ajax_spinner {
    position: fixed !important;
    z-index: 999999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url('data:image/svg+xml,<svg width="24" height="24" stroke="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3" stroke-linecap="round"><animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>' );
    background-repeat: no-repeat;
    background-size: 4rem;
    background-position: center center;
    content: "";
}

/* Ensure spinner fades out smoothly */
img.gform_ajax_spinner.hidden {
    display: none !important;
}

.status_indicator {
    padding: 4px;
    border-radius: 20%;
    color: #fff;
    font-size: 10px;
    display: inline-block;
    text-align: center;
}

.status_label { margin-left: 8px; font-size: 12px; color: #333; }

.status_indicator.publish, .nav-item .status-color-square.publish {
    background-color: #28a745;
}
.status_indicator.pending, .nav-item .status-color-square.pending {
    background-color: #ff7b01;
}
.status_indicator.on_watch, .nav-item .status-color-square.on_watch {
    background-color: #ff5c92;
}
.status_indicator.on_hold, .nav-item .status-color-square.on_hold {
    background-color: #5570ff;
}
.status_indicator.coming_soon, .nav-item .status-color-square.coming_soon {
    background-color: #6c757d;
}
.status_indicator.reserved_puppy, .nav-item .status-color-square.reserved_puppy {
    background-color: #8a35dc;
}
.status_indicator.iso, .nav-item .status-color-square.iso {
    background-color: #ff2d2d;
}
.status_indicator.sold_puppy, .nav-item .status-color-square.sold_puppy {
    background-color: #000000;
}
.status_indicator.default_status, .nav-item .status-color-square.default_status {
    background-color: #d9d9d9;
}

/**/

.nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .nav-container .nav-item .nav-link {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 4px;
        color: #333;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .nav-container .nav-item .nav-link:hover,
    .nav-container .nav-item .nav-link.active {
        background-color: #e9ecef;
        color: #000;
    }

    .status-color-square {
        width: 12px;
        height: 12px;
        margin-right: 8px;
        border-radius: 2px;
    }

    .offcanvas {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100%;
        background-color: #fff;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        z-index: 1050;
        font-family: sans-serif;
    }

    .offcanvas.show {
        right: 0;
    }

    .offcanvas-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .offcanvas-header h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
    }

    .offcanvas-body {
        padding: 15px;
    }

    .form-check {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }

    .form-check:last-child {
        border-bottom: none;
    }

    .form-check-input {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        cursor: pointer;
    }

    .form-check-label {
        font-size: 1rem;
        line-height: 1.4;
        cursor: pointer;
        color: #333;
    }

    .btn-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        padding: 8px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    .btn-close:hover {
        background-color: #e9ecef;
    }

    .btn {
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 1.25rem;
        color: #333;
        transition: background-color 0.3s;
        border-radius: 4px;
    }

    .btn:hover {
        background-color: #e9ecef;
    }