/*
 * SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

html, body
{
    height:100%;
}

#map {
    background-color: #ffffff;
}

#map .ol-viewport {
    border-radius: 45px 0px 0px 0px;
}


#map-popup
{
    display:inline-block;
}

#map-popup-box
{
    background-color: white;
    padding:6px;
    border-radius: 6px;
    min-width: 4em;
    overflow: hidden;
}

#map-popup-close
{
    float:right;
}

#map-popup-arrow
{
    margin-left:50%;
}

#map-popup-arrow > div
{
    margin-left:-10px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:16px solid white;
    width:0px;
    height:0px;
}

.layers
{
    display: flex;
    flex-direction: column;
    width: 376px;
    flex-shrink: 0;
    background-color: #ffffff;
    margin-top: 85px;
}


.layer_template > img
{
    vertical-align:middle;
    height:2em;
    margin-right:4px;
}

#layers-container {
    overflow-y: auto;
    flex-grow: 1;
    padding-top: 55px;
}

@keyframes example {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.layers .spinner.loading
{
    animation: example 2s linear infinite;
    visibility: visible;
}

.layers .spinner
{
    visibility: hidden
}

.layer-div
{
    display: flex;
    align-items: center;
    font: normal normal normal 20px/27px 'Roboto', sans-serif;
    color: #464545;
    opacity: 1;
    text-align: left;
    padding: 12px 56px;
    cursor: pointer;
}

.layer-div svg
{
    width: 27px;
    height: 27px;
    overflow: clip;
}

.layer-div.inactive svg ellipse
{
    fill: #E9E9E7 !important;
}

.layer-div .layer-label-div
{
    display: flex;
    justify-content: space-between;
    background: #F7D25A 0% 0% no-repeat padding-box;
    color: #ffffff;
    box-shadow: 0px 5px 7px #00000008;
    border-radius: 10px 0px 10px 10px;
    width: 100%;
    margin-left: 18px;
    padding: 5px 10px 5px 20px;
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
}

.layer-div .img-hide {
    width: 24px;
    height: 24px;
}

.layer-div.loading .img-hide {
    display: none;
}
.layer-div.inactive .img-hide {
    display: none;
}

.layer-div .img-loading {
    width: 24px;
    height: 24px;
    display: none;
}

.layer-div.loading .img-loading {
    display: block;
}

.layer-div.inactive .layer-label-div
{
    background: transparent !important;
    box-shadow: 0px 0px 0px transparent;
    color: #A5ABB7;
    padding: 5px 0px;
}

.layer-div.inactive .layer-label-div .hide-img
{
    display: none;
}

.layer_template .error
{
    visibility: hidden;
    color:red;
    font-weight: bold;
    padding: 10px;
}

.layer_template.selected .error.show
{

}

.layer_template .progressbar_container
{

}

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

.layers-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F6F6F4 0% 0% no-repeat padding-box;
    min-height: 91px;
    border-radius: 45px 0px 0px 0px;
}

.layers-footer img {
    margin: 0px 6px;
}

#details-container
{
    min-width: 350px;
    width: 350px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 30px;
    opacity: 1;
    z-index: 101;
    margin-left: -30px;
}

.details-header {
    position: fixed;
    width: 350px;
    background: #8BD1E6 0% 0% no-repeat padding-box;
    border-top-left-radius: 30px;
    box-shadow: 0px -5px 15px #4645451A;
    opacity: 1;
    padding: 28px 12px 21px 0px;
    display: flex;
    align-items: center;
}

.details-header .ic-container {
    min-width: 85px;
    display: flex;
    justify-content: center;
    filter: invert(0.75);
}

#details-title
{
    font: normal normal normal 20px/27px 'Roboto', sans-serif;
    text-align: left;
    letter-spacing: 0px;
    color: #464545;
    flex-grow: 1;
    word-wrap: anywhere;
    margin-right: 24px;
}

#details-content
{
    font-weight: 400;
    padding: 55px 36px;
}

.details-valueItem1 {
    font: normal normal normal 15px/20px 'Roboto', sans-serif;
    color: #478DDD;
}

.details-valueItem1 a {
    color: #478DDD;
}

.details-valueItem2 {
    font: normal normal normal 13px/17px 'Roboto', sans-serif;
    color: #A5ABB7;
}

#details-close
{
    display: flex;
    position: absolute;
    margin-left: -20px;
    padding: 5px;
    cursor: pointer;
}

#header
{
    z-index: 100;
    position: absolute;
    width: 100%;
    pointer-events: none;
}

#logo
{
    height: max-content;
    margin-left: 39px;
    margin-top: 45px;
    margin-right: 113px;
}

.header-nav
{
    flex-grow: 1;
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding: 45px 60px;
}

.header-nav-item
{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 7px #00000008;
    border: 1px solid #A767A5;
    border-radius: 10px 0px 10px 10px;
    opacity: 1;
    padding: 5px 21px;
    height: -moz-fit-content;
    pointer-events: auto;
    cursor: pointer;
    margin: 0px 6px;
}

.header-nav-item > span
{
    text-align: left;
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #A767A5;
    opacity: 1;
}

.header-nav-item:hover > span
{
    text-decoration: underline;
}

.header-nav-item.active
{
    background: #A767A5 0% 0% no-repeat padding-box;
}

.header-nav-item.active > span
{
    color: #FFFFFF;
}

.header-login {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding: 40px 60px;
    height: max-content;
}

.login_button {
    text-align: left;
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #A767A5;
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    line-height: 38px;
}

.login_button:hover {
    text-decoration: underline;
}

.header_text
{
    margin-left: 45px;
    margin-top: 26px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    cursor: pointer;
    color: #919499;
}

.login_element
{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #94A9BD;
    background: #454956;
    padding: 7px;
    padding-left: 17px;
    width: 200px;
    border: 0px;
    border-radius: 3px;
    margin-left: 15px;

}

.logout-container {
    display: flex;
    align-items: center
}

.logout-container span {
    text-align: left;
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #A767A5;
    opacity: 1;
    min-width: 8em;
    display:inline-block;
    margin-left: 1em;
}

.logout_button
{
    background: #A767A5 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 7px #00000008;
    border: 1px solid #A767A5;
    border-radius: 10px 0px 10px 10px;
    text-align: left;
    font: normal normal normal 16px/21px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #F5F7F9;
    opacity: 1;
    padding: 7px 20px;
    pointer-events: auto;
    cursor: pointer;
}

.logout_button:hover
{
    text-decoration: underline;
}


.details-name
{
    text-align: left;
    font: normal normal bold 15px/20px 'Roboto', sans-serif;
    color: #464545;
    text-transform: capitalize;
    opacity: 1;
    width: 105px;
    min-width: 105px;
    /* don't write text outside the div element */
    overflow: hidden;
    text-overflow: ellipsis;
}

.details-value
{
    width: 100%;
    text-align: left;
    font: normal normal normal 15px/20px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #A5ABB7;
    text-transform: capitalize;
    padding: 12px 0px 12px 20px;
}

.details-value.highlited {
    box-shadow: 0px 5px 7px #00000008;
    border-radius: 10px 0px 10px 10px;
    color: #464545;
    padding: 12px 20px;
}

.details-valueItem1
{
    margin-top: 30px;
    font-size: 16px;
}

.details-valueItem2
{
    margin-top: 5px;
    color: #898989;
    font-size: 16px;
    margin-bottom: 10px;
}




.circular-chart {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: auto;
}



.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    stroke-dasharray: 0, 100;
    stroke: #578ce8;
    display: none;
}



.percentage {
    fill: #666;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    font-size: 0.5em;
    text-anchor: middle;
    display: none;
    stroke: #578ce8;
}

.layer_template .label.group_label {
    font-weight: bold;
}

.ol-zoom, .ol-zoom:hover, .ol-zoom:focus {
    bottom: 57px;
    right: 40px;
    left: auto;
    top: auto;
    background: #464545 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 7px #00000008;
    border-radius: 10px 0px 10px 10px;
    opacity: 1;
}

.ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out  {
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    cursor: pointer;
}

.ol-zoom .ol-zoom-in {
    background: #464545 0% 0% no-repeat padding-box;
}

.ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-in:hover, .ol-zoom .ol-zoom-in:focus,
.ol-zoom .ol-zoom-out, .ol-zoom .ol-zoom-out:hover, .ol-zoom .ol-zoom-out:focus {
    background: #464545 0% 0% no-repeat padding-box;
}

.unsee-all {
    position: absolute;
    left: 69px;
    bottom: 57px;
    background: #464545 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 7px #00000008;
    border-radius: 10px 0px 10px 10px;
    opacity: 1;
    padding: 10px 13px;
    text-align: left;
    font: normal normal normal 18px/24px 'Roboto', sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    cursor: pointer;
}

.unsee-all span {
    margin: 13px;
}