html {
    font-size: 16px;
    height: 100%;
    --var-color-red: #d24b4b;
}

/*body {
    margin: 0;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}*/

#app {
    margin: 0;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    margin-inline: 1.5rem;
    margin-bottom: 1rem;
}

footer {
    grid-row-start: 3;
    grid-row-end: 4;
    padding-inline: 3rem;
    font-size: smaller;
    background-color: hsl(0, 60%, 56%);
    color: white;
}

    footer a {
        color: white;
    }

h1 {
    font-size: 1.5rem !important;
}

h2 {
    font-size: 1.2rem !important;
}

input[type=radio] {
    accent-color: hsl(0, 60%, 56%);
}



.home-map {
    height: 80vh;
    border-radius: 0.375rem;
}

.link-article {
    text-decoration: none;
    color: #333333;
}

.pagination {
    gap: 0.5rem;
}


/*.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    color: hsl(214, 61%, 28%);
    font-size: 48px !important;
}*/

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}


.side-by-side {
    min-height: 500px;
    max-height: 500px;
    overflow-y: scroll;
}

    .side-by-side li {
        height: 2.0rem;
        border: 1px black solid;
        background-color: white;
        border-radius: 0.5rem;
        margin-block: 0.25rem;
    }

    .side-by-side ol, ul {
        list-style-position: inside;
    }


.draggable-list {
    /*list-style-type: none;*/
    list-style-position: inside;
    min-height: 500px;
    max-height: 500px;
    padding: unset;
    padding-inline: 0.5rem;
    overflow-y: scroll;
}

.draggable-target {
    border: 1px dashed var(--var-color-red);
}

.draggable-list > li {
    border: 1px black solid;
    background-color: white;
    margin-block: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

    .draggable-list > li:hover {
        cursor: move;
    }

    .draggable-list > li::marker {
        color: black;
    }

#insertedItemList > li {
    background-color: #d24b4b;
    color: white;
}

    #insertedItemList > li::marker {
        color: white;
        font-weight: 700;
    }

.checkpoint-item b {
    padding: unset;
}

.checkpoint-item p {
    padding: unset;
}

.rule-setup {
    /*list-style-type: none;*/
    list-style-position: inside;
    padding-left: 0;
}

    .rule-setup > li {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        margin-bottom: 2.0rem;
        padding: 0.5rem;
    }

        .rule-setup > li::marker {
            color: var(--var-color-red);
        }

.btn-red {
    background: hsl(0, 60%, 56%) !important;
    color: white !important;
}

.icon-red {
    color: hsl(0, 60%, 56%) !important;
}

.icon-green {
    color: hsl(101, 51%, 39%) !important;
}

.icon-blue {
    color: hsl(236, 90%, 48%) !important;
}

.icon-gray {
    color: hsl(0, 0%, 20%) !important;
}

.row-red {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    color: hsl(0, 0%, 20%);
    background-color: white;
    border: 2px solid hsl(0, 60%, 56%);
    border-radius: 0.775rem;
}

.row-green {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    color: hsl(0, 0%, 20%);
    background-color: white;
    border: 2px solid hsl(101, 51%, 39%);
    border-radius: 0.775rem;
}

.row-blue {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    color: hsl(0, 0%, 20%);
    background-color: white;
    border: 2px solid hsl(236, 90%, 48%);
    border-radius: 0.775rem;
}

.row-gray {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    color: hsl(0, 0%, 20%);
    background-color: white;
    border: 2px solid hsl(0, 0%, 20%);
    border-radius: 0.775rem;
}

.row-red > a {
    color: hsl(0, 0%, 20%);
}

.border-black {
    border: 1px hsl(0, 0%, 20%) solid !important;
    padding: 0.5rem;
}

.color-red {
    color: hsl(0, 60%, 56%) !important;
}

#imgPhoto {
    object-fit: contain;
}

.hide-up-down-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}

.accordion-button:not(.collapsed) {
    background-color: #F8F8F8;
    color: #000000;
}

.accordion-button:link,
.accordion-button:visited,
.accordion-button:hover,
.accordion-button:active {
    background-color: #F8F8F8;
    color: #000000;
    border: hidden;
    border-color: #FFF;
    box-shadow: 0px;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #FFF;
    outline: 0;
    box-shadow: 0 0 0 .25rem #FFF;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23YOUR_HEX_CODE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.page-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.login-card {
    padding: 2rem;
    background: hsl(0, 60%, 96%);
    border-radius: 0.5rem;
    border: 1px white solid;
}

.login-form {
    padding: 0.1rem
}

    .login-form button {
        background: linear-gradient(45deg, hsl(0, 60%, 56%), hsl(0, 60%, 41%));
        color: white;
        padding: 0.5rem 3rem;
        display: flex;
        margin-inline: auto;
        border-radius: 0.25rem;
        outline-color: transparent;
        border-color: transparent;
    }



#routes-map-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}

.map-container-with-sidebar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}