$primary: #008186;
$warning: #deab27;

@import "bootstrap/scss/bootstrap";

body {
    background-color: #f8f9fa;
}

#page {
    display: grid;
    padding: 0.5rem;
    margin-top: 1rem;
    grid-template-columns: auto;
}

@media (min-width: 800px) and (max-width: 1300px) {
    #page {
        grid-template-columns: 10rem auto;
    }
    #root-list-wrapper {
        grid-row: 1 / span 2;
    }
    #meta-wrapper {
        grid-column: 1 / span 2;
    }
}

@media (min-width: 1300px) {
    #page {
        grid-template-columns: 10rem 30rem auto;
    }
    #root-list-wrapper {
        grid-row: 1 / span 2;
    }
    #prompt-wrapper {
        grid-column: 2 / span 2;
    }
}

#page > div {
    padding: 1rem;
}

#page #logo {
    width: 160px;
    margin-left: -25px;
    margin-top: -30px;
}

#page-login #logo {
    width: 160px;
    margin-left: -8px;
    margin-top: -8px;
}

.htmx-indicator{
    display: none;
}
.htmx-request .htmx-indicator{
    display: block;
}
.htmx-request.htmx-indicator{
    display: block;
}

#path-list-wrapper {
    z-index: 10;
}

#path-list .active {
    background-color: #008287;
    border-color: #008287;
    color: white;
}

.btn-outline-success {
    color: #008287;
    border-color: #008287;
}

.btn-outline-success:hover {
    color: whitesmoke;
    background-color: #008287;
}

.tab-content {
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 1rem;
}

.nav-tabs {
    margin-bottom: 0;
}

#logout-form button {
    padding: 0;
    border: 0;
    vertical-align: inherit;
}

.file_upload label {
}

.file_upload.active label {
    color: blue;
}

.file_upload label:hover {
    color: blue;
}

.file_upload input {
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file_upload .htmx-request i {
    display: none;
}
