@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --solimar-teal: #2ea99a;
    --solimar-teal-light: #38c9b7;
    --main-toolbar-color: #1c1c1c;
    --main-toolbar-color-hover: #4c4c4c;
    --main-toolbar-height: 48px;
    --main-navbar-width: 250px;
    --nav-color: #1c1c1c;
    --bs-red: #dc3545;
    --bootstrap-primary-color: #3B71CA;
    --bootstrap-info-color: #54B4D3;
}

/* Hide the Google Translate top bar */
#goog-gt-tt, .skiptranslate iframe {
    display: none !important;
}

/* The Google Translate refresh icon appears in the upper left while it's translating 
and blocks the dropdown menu for mobile. We cann hide this by hiding the div that
immediately follows the google translate top bar. */
#goog-gt-tt ~ div {
    display: none !important;
}
    
html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Ensure no extra padding or space is left. This prevents a white bar at the top if google translate is in use */
    top: 0px !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

* {
    box-sizing: border-box;
}

.viewport-height {
    height: calc(100vh - var(--main-toolbar-height)); /* Subtract the toolbar's height from the viewport height */
}

.ssc-validation {
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-red);
}

.table-hover tbody tr:hover .hover-color {
    background-color: lightblue; /* Change this to your desired hover color */
}

.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 black;
    border: none;
}

.main-toolbar {
    background-color: var(--main-toolbar-color);
    color: white;
    align-items: center;
    display: flex;
    height: var(--main-toolbar-height);
}

.main-toolbar-button {
    align-items: center;
    background-color: var(--main-toolbar-color);
    display: flex;
    color: #eee;
    text-decoration: none !important;
    cursor: pointer;
    border: 0px;
    height: var(--main-toolbar-height);
}

.main-toolbar-button-selected {
    align-items: center;
    background-color: #fff;
    display: flex;
    color: #000;
    text-decoration: none !important;
    cursor: pointer;
    border: 0px;
    height: var(--main-toolbar-height);
}

.main-toolbar-button:hover {
    background-color: var(--main-toolbar-color-hover);
    color: #fff;
}

.title-text {
    margin: 0;
}

.subtitle-text {
    font-size: 12px;
    line-height: 14px;
    color: #646464;
    margin: 0;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.toolbar {
    display: flex;
    flex-direction: row;
}

.toolbar-sep {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

.toolbar-button {
    background-color: #fff;
    color: #000;
    text-decoration: none !important;
    cursor: pointer;
    border: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-button:hover {
    background-color: #eee;
    color: #000;
}

.toolbar-button:disabled,
.toolbar-button.disabled-btn {
    color: #6c757d !important; /* Bootstrap’s gray-600 */
    opacity: 0.65; /* Faded look */
    cursor: not-allowed;
    pointer-events: none;
}

.toolbar-img {
    color: #1b6ec2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.property-container {
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 0;
}

.button-container {
    display: flex;
    margin-top: auto;
    border-top: 1px solid #ccc;
    padding: 20px;
}

.disabled-button {
    color: #A19F9D;
    pointer-events: none;
}

.disabled-button span {
    color: #A19F9D;
    pointer-events: none;
}

.text {
    margin: 0 10px 0 10px;
}

.nav-link.d-none {
    display: none;
}

textarea {
    padding: 12px;
}

.tr-editable:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

/* Define the spinning animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* Apply the spinning animation to an element */
.loading-list-spinner {
    width: 15px;
    height: 15px;
    border: 3px solid #ccc;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Apply the 'spin' animation infinitely */
}

.loading-icon {
    font-size: 16px; /* Adjust the size of the icon */
    animation: spin 1s linear infinite; /* Apply the 'spin' animation infinitely */
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
}

/* Sets the width of a column that contains an icon or a checkbox */
.w-icon-column {
    width: 40px;
}

.bm-full-height {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    min-height: 100vh; /* Minimum height set to 100% of the viewport */
    max-height: auto;
    height: auto;
    width: 100vw;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.desktop-table {
    display: none; /* Hide desktop table */
}

.mobile-table {
    display: block; /* Show mobile layout */
}

.mobile-row {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

    /* Striping: Even rows */
    .mobile-row:nth-child(even) {
        background-color: #f6f6f6; /* Light gray for even rows */
    }

    /* Odd rows */
    .mobile-row:nth-child(odd) {
        background-color: #ffffff; /* White for odd rows */
    }

.mobile-view-pdf {
    display: flex;
    margin-bottom: 5px;
    /*background-color: lightgray;*/
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
}

.mobile-cell {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.column-name {
    font-weight: bold;
    margin-right: 10px;
}

.column-value {
    flex-grow: 1;
    text-align: right;
}

@media (min-width: 641px) {
    /* Hide unchecked checkboxes by default */
    .checkbox-column input[type="checkbox"]:not(:checked) {
        visibility: hidden;
    }

    /* Show the unchecked checkbox on hover */
    .checkbox-column:hover input[type="checkbox"]:not(:checked) {
        visibility: visible;
    }

    .bm-full-height {
        width: 600px; /* Set the desired width of the modal */
    }

    .desktop-table {
        display: table; /* Show desktop table */
    }

    .mobile-table {
        display: none; /* Hide mobile layout */
    }   
}