.custom-search-wrapper {
    position: relative;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    color: #6c757d;
    pointer-events: none;
}

.custom-search-input {
    width: 100%;
    padding-left: 2.25rem; /* space for icon */
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    outline: none;
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out;
    background: transparent;
}

    .custom-search-input:focus {
        border-bottom: 2px solid #1976d2;
        box-shadow: none;
    }
    
    
.smaller-icon .mud-input-adornment-icon {
    font-size: 18px; /* or try 16px, 14px */
    height: 18px;
    width: 18px;
}

.bold-label .mud-input-label {
    font-weight: bold !important;
}

.beta-stamp {
    transform: rotate(-8deg);
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

html, body {
    height: 100%;
    font-size:0.9rem;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.multi-line-truncate {
    display: -webkit-box; /* Defines a flex container for truncated content */
    -webkit-box-orient: vertical; /* Specifies the orientation of the box */
    overflow: hidden; /* Ensures overflow content is hidden */
    text-overflow: ellipsis; /* Adds ellipsis for truncated text */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
}

.company_logo_img {
    max-height: 65px;
}

.custom-height {
    height: auto;
}

@media (min-width: 992px) {
    .custom-height {
        height: 80vh; 
    }
}

.text-black-30 {
    opacity: 1;
    color: rgba(0,0,0,.3) !important
}

.card {
    border: 1px solid black;
}

.prompttextarea {
    resize: none;
    width: 100%;
    height:95%;
}

#alert {
    position: fixed;
    top: 20px;
    left: 40%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 500px;
    width: 90%;
    animation: slideDown 0.5s;
}

@media (max-width: 768px) {
    #alert {
        left: unset;
        padding: 10px;
        margin-left:-0.3rem;
        margin-right:0.4rem;
        width: unset;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.message {
    font-size: 16px;
    font-weight: bold;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.slider {
    -webkit-appearance: none; 
    width: 100%; 
    height: 10px; 
    background-color: #e9ecef; 
    border-radius: 5px; 
    outline: solid;
    outline-color: #4f4a81;
}

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none; 
        appearance: none; 
        width: 20px; 
        height: 20px; 
        background-color: #4f4a81; 
        border: none; 
        border-radius: 50%; 
    }

    .slider::-ms-thumb {
        width: 20px; 
        height: 20px; 
        background-color: #007bff; 
        border: none; 
        border-radius: 50%;
    }


a.copybtn {
    text-decoration: none;
    background-color: #4f4a81 !important;
    color: white !important;
    padding:2px;
    font-weight:600;
    font-size:smaller;
}

.active-link {
    border-bottom: 2px solid #4f4a81;
}

.nav-link {
    background-color: #f1f5f9 !important;
    border-radius: 20px !important;
    color: black !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-right: 5px;
}

    .nav-link.active {
        background-color: #3b82f6 !important;
        margin-right: 5px;
        border-radius: 20px !important;
        color: #ffffff !important;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn:disabled {
    background-color: #4f4a81;
}

.pre-prompt {
    margin-bottom: 0px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: auto;
}

.prompteditrow {
    padding: 10px;
    padding-top: 5px;
    margin-bottom:0px!important;
}

#itemsList {
    padding-left:14px;
}

#itemsList li {
    list-style: none;
}

pre {
    font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.problem::before {
    content: 'PROBLEM: '
}

.solution::before {
    content: 'SOLUTION: '
}

.custom-inline-form label,
.custom-inline-form input {
    display: inline-block;
}


.row-hover:hover {
    background-color: #cccccc; 
    color: #000000;
    transition: background-color 0.3s;
}

.custom-file-upload {
    position: relative;
    display: inline-block;
}

.file-upload-input {
    display: none;
}

.custom-file-upload label {
    border: 1px solid #ccc;
    padding: 6px 12px;
    margin-right:5px;
    cursor: pointer;
}

.text-style-button {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    border: none;
    margin: 0;
}

    .text-style-button:hover,
    .text-style-button:focus {
        color: inherit;
        text-decoration: none;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

.btn.dropdown-toggle::after {
    display: none;
}

.optimaize-ui-dialog-titlebar {
    background-color: #3b82f6;
    color: #fff;
}

.custom-footer h5 {
    color: #fff;
}


.btn-optimaize {
    background-color: #37c2bd !important;
    color:#fff;
    border: unset;
    font-size: 1.4rem;
    text-decoration: none;
    padding-left: 6px;
    padding-right: 6px;
    min-width: 130px;
    min-height: 30px;
}

.btn-optimaize-sm {
    font-size: 1rem;
    padding-left: 5px;
    padding-right: 5px;
}

.btn-optimaize:hover {
    text-decoration: none;
    color:unset;
}

.btn-optimaize:disabled {
}

    .btn-optimaize:disabled, .btn-optimaize:disabled:hover {
        background-color: grey !important;
        color: unset;
    }

.min-vh-60 {
    min-height: 55vh;
}

.dropdown-toggle.btn-optimaize {
    font-size: 1rem;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px;
    min-width:unset;
}

.navbar .btn-optimaize {
    font-size: 1.4rem;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
}

.faq-entry {
    color: white;
    width: 70%;
    font-size: 1.2rem;
}

.newsletter {
    background-color: #000;
}

    .newsletter p {
        color: #fff;
        font-size: 2rem;
    }

.content_container_gradient {
    background: linear-gradient(90deg, #325871 0%, #37c2bd 100%);
    background-size: 100% 100%;
}


@font-face {
    font-family: 'manrope-regular';
    src: url('../fonts/manrope-regular.otf') format('opentype');
}

.btn-newstyle {
    color: #ffffff;
    background-color: #3B82F6;
    border: none;
    border-radius: 10px;
}

.dropdown-toggle.btn-newstyle {
    padding: 0 .55rem;
    border-radius: 5px;
}

.active-employee-badge {
    background-color: #dcfce7;
    font-weight: bold;
    color: #438c5d;
    border-radius: 30px;
    padding: 10px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

#supportModal .modal-dialog {
    position: absolute;
    margin:0;
}

.support-dialog-header {
    display: flex;
    align-items: center;
    background-color: #3b82f6;
    color: #fff;
    padding: 12px 16px;
}

.support-dialog-backdrop {
    background-color: transparent !important;
}

.dashed-border {
    border: 1px dashed #007bff;
}

.accordion-body-scroll-skill-params {
    max-height: 250px;
    overflow-y: auto;
}

#AuthorisationTable .table-container {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

#AuthorisationTable .table-header, #AuthorisationTable .table-row {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

#AuthorisationTable .table-header {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

    #AuthorisationTable .table-header div, #AuthorisationTable .table-row div {
        flex: 1;
        vertical-align: middle;
        display: flex;
        justify-content: center;
    }

#AuthorisationTable .table-row:hover {
    background-color: #f1f1f1;
}

#AuthorisationTable .table-row:last-child {
    border-bottom: none;
}

#AuthorisationTable .form-check-input {
    width: 1.5em;
    height: 1.5em;
}

.my-employee {
    border: 1px solid !important;
}

#scrapersessions td {
    vertical-align: middle;
}

.employee-selection, .user-selection {
    cursor: pointer;
}

.video-container {
    display: flex;
    justify-content: center; /* Center the iframe horizontally */
    align-items: center; /* Center the iframe vertically if needed */
    width: 100%; /* Ensure the container spans the full width */
}

    .video-container iframe {
        width: 85%; /* Make iframe as wide as its parent */
        max-width: 85%; /* Prevent overflow */
        aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */
        border: none; /* Remove any borders for a cleaner look */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for style */
        border-radius: 8px; /* Optional rounding for style */
    }

.fs-7 {
    font-size:0.8rem;
}

#CompanyList .list-group-item
{
    border:unset;
}

/* Add this for small italic text */
.small-italic {
    font-size: 0.85em;
    font-style: italic;
}

.prompttextarea {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 5px;
    outline: none;
    border: 1px solid grey
}

.CharCounter {
    position: absolute;
    color: #888;
    background: rgba(255,255,255,0.8);
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 6px;
}

#aistore_view .nav-pills .nav-link {
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    color: #212529; /* Bootstrap's default text color */
}

    #aistore_view .nav-pills .nav-link:hover {
        background-color: #f5f5f5 !important;
    }

    #aistore_view .nav-pills .nav-link.active {
        background-color: #3b82f6 !important;
        font-weight: bold;
    }

/* Employee list default layout */
.employee-list-root {
    display: flex;
    flex-direction: column;
}

.employee-list-scroll {
    height: calc(100vh - 285px);
    overflow-y: auto;
}

/* System Management - flex layout for employee/user list containment */
.system-mgmt-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.system-mgmt-tabs .mud-tabs {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.system-mgmt-tabs .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.system-mgmt-tabs .employee-list-root {
    position: absolute;
    inset: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.system-mgmt-tabs .employee-list-scroll {
    flex: 1;
    height: auto;
    min-height: 0;
    overflow-y: auto;
}