:root{
    --color-severe: rgb(209, 46, 55);
    --color-high: rgb(243, 148, 0);
    --color-medium:rgb(244, 203, 9);
    --color-low: rgb(167, 207, 23);

}

.card-container{
    position:absolute;
    color: white;
    z-index: 10;
    margin: 10px;
    width: 400px;
    display: flex;
    flex-direction: column;
    font-family:'Barlow', sans-serif;

}

.card-container-tr{
    top:0;
    right:0;
}

.card-container-bl{
    bottom:0;
    left:0;
    margin-bottom:30px;
}

.card-container-br{
    bottom:0;
    right:41px;
    margin-bottom:30px;
}

.card-container.container-bc{
    width:415px;
    height:76px;
}

.sidebar + .card-container-tl,
.sidebar + .card-container-tl + .card-container-bl {
    left:4.81rem;
}

.sidebar.open + .card-container-tl,
.sidebar.open + .card-container-tl + .card-container-bl{
    left:23.75rem;
}



.outsideToRight,
.outsideToRightForce
{
    transform: translateX(120%);
}

.outsideToLeft,
.outsideToLeftForce
{
    transform: translateX(calc(-120% - 23.75rem));
}

.outsideToTop,
.outsideToTopForce
{
    transform: translate(-50%, calc(-120%));
}

.outsideToBottom,
.outsideToBottomForce
{
    transform: translate(-50%, calc(120% + 30px)) !important;
}

.card-absolute{
    position: absolute;
}

.card-container-bl .card-absolute{
    bottom:0;
    left:0;
    width:100%;
}

.card-container-br .card-absolute{
    bottom: 40px;
    left: 0;
    right: 0;
}

.container-bc .card-absolute,
.card-container-bc .card-absolute{
    bottom: 0;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    width:100%;
}

.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    margin-bottom:1.2rem;
    padding: 10px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 15px;
    transition: all 0.3s ease-out;
}

.card.transparency{
    background-color:transparent;
}

.card-container-br .card:last-child,
.card-container-bl .card:last-child{ margin-bottom:0px;}

.card.stroke .parameters{
    padding: 10px;
    border: solid 1px rgb(60 60 60);
    border-radius: 5px;
}

.card.stroke .parameters + .parameters{
    margin-bottom:15px;
}

.card-control{
    padding: 10px;
    border: solid 1px rgb(60 60 60);
    border-radius: 10px;
    margin: 0 0 10px 0;
    position:relative;

}

.card-control .layer-on-demand,
.card .layer-on-demand,
li .layer-on-demand{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color:#000000;
    background-color:rgba(255,255,255,0.9);

}
.card h2{
    font-weight:normal;
    font-size:1.18rem;
    color:rgb(223, 215, 249);
    text-align:center;
    margin-bottom:0.5rem;
    padding-top:0;
    margin-top:0;
}

.card h3{
    font-weight:normal;
    font-size:0.95rem;
    color:rgb(223, 215, 249);
    text-align:center;
    margin-bottom:0.5rem;
    padding-top:0;
    margin-top:0;
}


.card h2.js-zone-name{
    font-size:1em;
}

.card .param{
    display:flex;
    align-items: center;
    padding:2px 0;
}


.card .param .param_name{
    text-align: end;
    margin-right: 10px;
    flex:1 0 50%;
}

.card .param .bar{
    background-color: rgba(61, 61, 61, 0.7);
    border-radius: 10px;
    height: 22px;
    flex:1 1 50%;
}

.card .param .bar .bar_value{
    text-align: center;
    color: #101110;
    border-radius: 10px;
    height: 22px;
    line-height:22px;
}

.card .param .bar .bar_value.severe{
    background-color: var(--color-severe);
}

.card .param .bar .bar_value.high{
    background-color: var(--color-high);
}

.card .param .bar .bar_value.medium{
    background-color: var(--color-medium);
}

.card .param .bar .bar_value.low{
    background-color: var(--color-low);
}

.card .param .bar .bar_value.disable{
    background-color: #797979b3 !important;
    color:#FFFFFF !important;
}

.link_download,
.link_view{
    max-width: 1.5em;
    aspect-ratio: 1/1;
    display: inline-block;
    background:#FFFFFF;
    padding:2px;
    margin-inline:5px;
    border-radius: 5px;
    transition: 0.3s background-color;
}

.link_download:hover,
.link_view:hover{
    background-color:#00a6d1;
}

.link_download img,
.link_view img{
    width: 100%;
}

.form-option-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.form-option-item > div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.form-option-item-title{
    text-align:right;
    min-width:100px;
    font-weight:bold;
}

.form-option-item .radio-left{
    color:#00a6d1;
}


.form-option-item:has(input[type="checkbox"]:checked) .radio-left{ color: #FFFFFF; }
.form-option-item:has(input[type="checkbox"]:checked) .radio-right{ color: #00a6d1; }


.card.available-on-demand{

}

.card select{
    border: solid 1px rgb(60 60 60);
    border-radius: 5px;
    color:#FFFFFF;
    background-color:#202020;
    padding:0.2rem;
}
.card .select__fullwidth{
    width:100%;
}

#card_ub_trees{
    min-height: 289px;
    justify-content: flex-start;

}

.grid-2-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.legend-color{
    display: inline-block;
    background-color:var(--clr-legend);
    width: .7em;
    height: .7em;
    border-radius: 100vw;
}