@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:100,200,300,400,500,600,700|Roboto:100,200,300,400,500,600,700,900&display=swap');

:root {
  --red: #992E38; /* Scavi */
  --red2: #e67681; /* Para cuando red es demasiado red */
  --red2_trans: #e676814D;
  --blue: #308CAD; /* Monumenti */
  --blue2: #85A9CD;
  --yellow: #ff9b4e; /* Reperti */
  --green: #4CA228; /* Disegni */
  --orange: #FF9B4E; /* Admin */
  --lila: #b770c4; /* Foto */
  --brown: #773412; /* Progetti */
  --red_light: #fb8155;
  --lila_light: #d9b3da;
  --orange_light: #F8C478;
  --orange_lighter: #fff1db;
  --blue_light: #A8D3DF;
  --green_light: #CCD784;
  --black: #000000;
  --white: #FFFFFF;
  --gray: #E2E3DD;
  --gray2: #b4b4b0;
  --gold: #beaa32;
  --gray_selected: #c6c6bc;
  --gray_dark: #3B3B3B;
  --gray_medium: #5c5c5c;

  --font-family-sans-serif: 'Roboto', sans-serif;
  --font-family-condensed: 'Roboto Condensed', sans-serif;

  --sombra: 0px 1px 21px -4px rgba(0,0,0,0.63);
  --sombraParalela: 6px 5px 4px 0px rgba(0,0,0,0.35);
}

/* SHORT COMMON STYLES */

.red { color: var(--red) }
.blue { color: var(--blue) }
.yellow { color: var(--yellow) }
.green { color: var(--green) }
.cyan { color: var(--cyan) }
.orange { color: var(--orange) }
.lila { color: var(--lila) }
.white { color: var(--white) }
.bkgr_red{ background-color: var(--red) }
.bkgr_red2{ background-color: var(--red2) }
.bkgr_blue{ background-color:var(--blue) }
.bkgr_yellow{ background-color: var(--yellow) }
.bkgr_green{ background-color: var(--green) }
.bkgr_lila{ background-color: var(--lila) }
.bkgr_orange{ background-color: var(--orange) }
.bkgr_cyan{ background-color: var(--cyan) }
.bkgr_gray.bkgr_gray{ background-color: var(--gray) } /* no es un error, la doble clase aumenta la especificidad (se aconseja en lugar de !important) */
.bkgr_white{ background-color: var(--white) }
.bkgr_black{ background-color: var(--black) }

/* RESET  */
html,body{
    height: 100%;
    width: 100%;
}
body{
    font-family: var(--font-family-sans-serif);
    margin:0;
    display: flex;
    justify-content: space-between;
    scrollbar-color: var(--gray) white; /* firefox */
    font-size: 13px;
}
::-webkit-scrollbar { /* chromium, non-standard */
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--gray);
}
::-webkit-scrollbar-track {
    background: var(--white);
}
input,textarea{
    font-family: var(--font-family-sans-serif);
}

.ml-5{ margin-left: 5px; }
.mr-5{ margin-right: 5px; }

/* Reset all inputs & textareas */
input {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    outline: none;
}
textarea {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    outline: none;
}

body.gray{
    background-color: var(--gray);
}
h2{
    margin:0;
}
.button--line{
    color: white;
    border: 1px solid white;
    margin-bottom: 5px;
}
.minititle{
    margin: 0 0 30px;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
}
.breadcrumbModal__crumb .minititle {
    margin-bottom: 5px;
    padding-bottom: 0;
    padding-top: 0;
    text-transform: uppercase;
}
.items_header {
    font-size: 13px;
    line-height: 14px;
    font-weight: 500;
    margin: 0 0 0 5px;
    padding-top: 8px;
}
.mirror{ transform:rotate(180deg) }
.blankSpace{
    width: 100%;
    height: 1px;
}
.blankSpace.blankSpace--50{ height: 50px }
.blankSpace.blankSpace--100{ height: 100px }
/*---- buscador ------*/
.buscador {
    flex-grow: 1;
    padding-left: 5px;
}
.buscador_header {
    margin-left: auto;
    max-width: 500px;
}
.crossSearch {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 50px;
    display: none;
    cursor: pointer;
    background: var(--gray) url(/img/icon/icono-x.svg) no-repeat center/15px;
}
.crossSearch.active{
    display: block;
}
.search_box {
    position: relative;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #3B3B3B;
    display: flex;
    padding: 5px 3px 3px 3px;
    height: 40px;
    box-sizing: border-box;
    background-color: white;
}
.search_input {
    width: 100%;
    padding-left: 10px;
}
.search_box img{
    width: 40px;
    cursor: pointer;
}

/* custom radio buttons */
[id="form_create"] input[type="radio"],
[id="form_create"] input[type="checkbox"],
.radio_circle input[type="radio"],
.radio_circle input[type="checkbox"] {
    width: 100%;
    height: 110%;
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 0;
    cursor: pointer;
}
[id="form_create"] input[type="radio"][disabled],
[id="form_create"] input[type="checkbox"][disabled],
.radio_circle input[type="radio"][disabled],
.radio_circle input[type="checkbox"][disabled] {
    cursor: default;
}
.checkmark {
    height: 15px;
    width: 15px;
    background-color: var(--black);
    border-radius: 50%;
    display: none;
}
.radio_circle input:checked ~ .checkmark{
    display: block;
}

/* Usado en securityLvl */
.radio_circle {
    background-color: white;
    width:25px;
    height:25px;
    border-radius: 25px;
    border: solid 1px black;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.big_circle {
    width: 30px;
    height: 30px;
    margin: 0 8px;
}
.depoSearch .big_circle {
    margin-left: 0;
}


.upload_img {
    min-height: 100px;
    background: #C8CABF url('/img/icon/icono_camara.svg') no-repeat center/40px;
    margin-bottom: 10px;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
}
.delete_img {
    display: block;
    width: 35px;
    height: 35px;
    background: var(--gray) url('/img/icon/bin_b.svg') no-repeat center/25px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
.upload_files {
    margin-top: 15px;
}
.upload_files .filesList {
    margin: 10px 0;
}
.filesList .buttonSquare {
    background-color: var(--dot-color, black);
}
[name="deleteFiles[]"]:checked + .link {
    opacity: 0.5;
}
.filesList .link.disabled {
    display: none;
}

/* Estilos generales */

a{
    text-decoration: none;
}
p{
    margin: 5px 0;
    padding: 0;
}
.alert{
    padding: 3px 10px;
    margin-top: 10px;
    background-color: var(--red2_trans);
}
.footerText{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 10px;
}
h4{
    margin: 5px 0;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
}
h3{
    margin: 0;
    font-size: 13px;
}
input,textarea{
    font-family: var(--font-family-sans-serif);
    font-size: 1em;
}
.input--editable{
    width: 100%;
    background-color: unset;
    border: none;
    pointer-events: none;
}
.input--editable.edit{
    border: none;
    pointer-events: initial;
    padding: 10px;
    border: 1px solid var(--gray);
}
.textButton--link{
    cursor: pointer;
    font-size: 13px;
    float:right;
    color: gray;
}
.textButton{ /* Los botones que tienen texto y pueden tener icono */
    position: relative;
    color: #ffffff;
    background-color: var(--gray_dark);
    height: 40px;
    min-width: 70px;
    display: flex;
    font-weight: 500;
    align-items: center;
    text-transform: uppercase;
    justify-content: center;
    cursor: pointer;
    padding: 0 15px;
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    flex-shrink: 0;
}
.textButton--add span {
    max-width: 120px;
}
.button__dropdown .textButton {
    margin-top: 2px;
}
.textButton.blackText span{
    color: black;
}
.textButton--black.textButton--black{
    background-color: var(--black);
}
.textButton--large{
    padding-left: 30px;
    padding-right: 30px;
}
.textButton--side{
    align-self: flex-end;
    margin-top: 5px;
    margin-left: auto;
}
.textButton--left{
    align-self: flex-start;
}
.textButton img{
    width: 20px;
    margin-left: 15px;
}
.textButton--continue{
    margin-top: 10px;
    width: 120px;
    background: url(/img/icon/icono_arrow.svg) no-repeat right 10px center/15px;
    justify-content: flex-start;
    align-self: flex-end;
}
.textButton--continue.hide{
    display:none
}
.textButton--min{
    color: black;
    padding: 10px 0;
    height: unset;
    justify-content: unset;
    min-height: unset;
}
.textButton--alignLeft{
    justify-content: space-between;
    text-align: left;
}
.textButton--min2{
    color: black;
    padding: 8px;
    height: unset;
    justify-content: unset;
    min-height: unset;
    font-size: 0.8rem;
    text-transform: unset;
}
.button__dropdown{
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    width: 100%;
    z-index: 1;
}
.button__dropdown.show{
    display: flex;
}
.newItemList .button__dropdown{
    width: auto;
    top: unset;
    right: unset;
    bottom: calc(100% + 5px);
    left: 0;
}
.squareButton{ /* Son los cuadrados de las barras laterales, por ejemplo */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    cursor: pointer;
    height: 50px;
    width: 55px;
}
.squareButton.selected{
    color: black;
    background-color: var(--gray);
}

.squareButton--fixed{
    position: absolute;
    bottom: 0;
}

.main__header {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    flex: none;
}
.main__title{
    font-weight: 300;
    font-size: 1.3rem;
    margin-right: auto;
}
.main__title strong {
    font-weight: 700;
}
.main__title--archive {
    max-width: 300px;
}
.main__title--public {
    max-width: 230px;
    margin-left: 10px;
}
@media (max-width: 768px) {
    .main__title, .buscador_header {
        max-width: none;
    }
    .buscador_header {
        display: none;
    }
    .main__title--public {
        background: var(--gray_medium);
        color: #fff;
        flex: 1;
        padding: 5px 10px;
        font-size: 15px;
        min-height: 80px;
        margin-bottom: 5px;
    }
}
.icono{
    min-width: 40px;
    min-height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('/img/icon/icono_lupa.svg')
}

/* COMPONENT -> archiveCat / tabs,tab */
.folderTrigger {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    background: url('/img/icon/icono_arrow_down.svg') no-repeat right 15px center/25px;
    cursor: pointer;
    display: none;
}
.folderTrigger.active {
    background-image: url('/img/icon/icono_arrow_up.svg');
    left: calc(100% - 55px);
    width: 55px;
}
.folders{
    display:flex;
    position: relative;
    overflow: auto;
    flex-shrink: 0;
}
.folders::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: solid 1px var(--gray_dark);
}
.folders.hide {
    display: none;
}
.folder{
    display:flex;
    flex: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    align-items: flex-start;
    margin: 0 2px;
    padding-bottom: 5px;
    z-index: 1;
}
.folder.hide{
    display: none;
}
.folders .squareButton{
    width: 40px;
    height: 40px;
    margin-left: 10px;
}
.folderButton{
    display: flex;
    background: no-repeat right 15px center/25px;
    background-color: var(--gray);
    padding: 0 20px;
    align-items: center;
    height: 40px;
    cursor: pointer;
    font-weight: 500;
    line-height: 14px;
    width: 100%;
}
.buttonSquare{
    width: 8px; min-width: 8px;
    height: 8px;
    margin-right: 6px;
}
.folderButton--icon{
    padding: 0 15px;
}
.folderButton--icon img{
    width: 25px;
    margin-left: 15px;
}
.folderButton--map {
    color: white;
    background-color: black;
}
.folder.activo{
    border: 1px solid var(--gray_dark);
    border-bottom-color: white;
}
.pageInterna .folder.activo {
    border-bottom-color: var(--gray);
}
.folder.activo .folderButton{
    background-color: unset !important;
}
.folders--min .folder.activo .folderButton{
    color: black;
}
.folders--min .folderButton{
    color: white
}
@media (max-width: 768px) {
    /* MOBILE DROPDOWN */
    .folders {
        flex-direction: column;
    }
    .folder:not(.activo) {
        display: none;
    }
    .folderTrigger {
        display: inline-block;
    }
    .folders.active .folder {
        display: flex;
    }
    .folder.activo {
        border-color: transparent;
    }
    .folder.activo .folderButton {
        background-color: var(--gray) !important;
    }
    .folderButton br {
        display: none;
    }
}

/* ARCHIVE */
.archiveContent{
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}
.archiveFiles{
    display: block;
    margin-top: 10px;
    overflow-y: auto;
}
.noResults {
    margin: 10% auto;
    font-size: 20px;
}
/* Visualizations*/
.archiveFiles.vis_2 .brickData{
    display:flex;
    border-top: 2px solid white;
}
.archiveFiles.vis_2 .brick .imgCont{
    background-position: bottom 10px center;
}
.archiveFiles.vis_3{
    display: flex;
    flex-direction: column;
    padding-right: 3px;
}
.archiveFiles.vis_3 .brick{
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    min-height: unset;
    margin-bottom: 2px;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
    flex: none;
}
.archiveFiles.vis_3 .brick p{
    margin: 0;
}
.archiveFiles.vis_3 .brick .brickOptions{
    margin-left: auto;
    min-width: 200px
}
.archiveFiles.vis_3 .brick .imgCont{
    display: none
}

.loading{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/icon/loading.svg');
    background-repeat: no-repeat;
    background-position: top 200px center;
    background-size: 60px;
    background-color: rgba(255,255,255,0.8);
    display: flex;
    z-index: 1;
}
.loading img{
    margin: auto;
}
.loading--center{
    background-position: center;
    background-color: rgba(255,255,255,0.8);
}
.loading--noImg{ background-image: unset }
.loading--noBackground{ background-color: unset }

/* FOLDER CONTENT */
#form_create{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}
.folderContent{
    position: relative;
    display: none;
    overflow-y: auto;
    flex: 1;
}
.folderContent.show{
    display: flex;
}
.folderContent h1{
    font-size: 1.4rem;
    font-weight: 300;
    margin: 10px 0;
}
.folderContent h1::before{
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--dot-color, black);
    margin-right: 5px;
}
.folderContent .mapBox h1::before{
    content: none;
}
.folderContent h2{
    color: black;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 10px 0;
}
.folderContent__info{
    position: relative;
    padding-right: 10px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    scrollbar-color: var(--gray2) var(--gray);
}
.folderContent__info::-webkit-scrollbar-thumb {
    background: var(--gray2);
}
.folderContent__info::-webkit-scrollbar-track {
    background: var(--gray);
}
.folderContent__info:last-child{
    max-width: 250px;
    min-width: 180px;
    width: 29%;
    flex: none;
    margin-right: 0;
}
@media (max-width: 768px) {
    .folderContent.show {
        flex-wrap: wrap;
    }
    .folderContent__info {
        margin-right: 0;
    }
    .folderContent__info:last-child {
        max-width: none;
        width: 100%;
        padding: 0;
        order: -1;
    }
}
.pageInterna .folderContent__info:last-child {
    width: 21%;
}
.folderContent__info:last-child img{
    max-height: 100%;
}
.folderContent__info__section{
    border-top: 1px solid black;
    padding-bottom: 20px;
}
.folderContent__info__section > img{
    margin-top: 10px;
}
.folderContent__info__section .imageForm_title{
    font-weight: 700;
    width: 100%;
    margin: 10px 0;
}
.folderContent__info__section .imageForm_cover{
    background-color: unset;
    height: 100px;
    width: 100%;
    font-size: 11px;
}
.folderContent.tabContent__links{
    flex-direction: column;
    background: white;
    padding: 25px;
}
.folderContent.tabContent__geolocalization{
    flex-direction: column;
}
.folderContent__info .confermaSection{
    position: relative;
    margin-bottom: 10px;
}
.folderContent__subtitle{
    font-weight: 700;
    font-size: 0.8rem;
    margin-top: 22px;
}
.itemOptions{
    margin-left: auto;
    margin-top: 10px;
    width: 300px;
    margin-right: 20px;
}
.itemOptions.hide{
    display: none;
}
/* INCLUDE -> LATERALS */
.lateral_content{
    position: relative;
    color: var(--white);
    display: none;
    flex-direction: column;
    padding: 10px 5px 50px 15px;
    box-sizing: border-box;
}
.lateral .extensionButton {
    display: none;
}
.lateral.visible .lateral_content,
.lateral.visible .extensionButton {
    display: flex;
}
.lateral_content.lc_right {
    padding: 40px 15px 50px 20px;
}
.lateral_content--flexItems{
    justify-content: space-between;
}
.lc_left {
    width: 130px;
    position: relative;
}
.lc_right {
    width: 180px;
}
.lateral_content--public {
    width: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.img_bkgr {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 15px auto;
}
.headerLogo {
    width: 90px;
    height: 90px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.headerLogo__simovi{
    background: url(/img/logo_simovi.svg) no-repeat center/contain;
}
.lateral_content .headerLogo {
    margin-right: 0;
}

.user_text {
    text-align: center;
    font-size: 1em;
    margin-top: 0;
}
.img_user_bkgr {
    position: relative;
    height: 80px;
}
#img_user{
    border-radius: 100px;
    width: 70px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/img/icon/icono_user.svg) no-repeat center;
}
/*--------------*/

/* PAGE -> HOME */
.showAllContainer{
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* PAGE -> LOGIN */
.login_background{
    width: 100%;
    height: 100vh;
    background: url(/img/login_background.jpg) no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_background_f{
    background: url(/img/login_background_f.jpg) no-repeat center/cover;
}
.login_container{
    width: 550px;
    display: flex;
}
.login_container.reverse{
    flex-direction: row-reverse;
}
.login_box{
    width: 60%;
    color: var(--white);
    background-color:var(--gray_dark);
    padding: 1.9rem 2.5rem;
    margin: 0 0.3rem;
}
.login_box h3{
    font-weight: 300;
    font-size: 20px;
}
.login_box form{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.login_box input{
    padding: 0.8rem;
    background-color: unset;
    border: 1px solid var(--white);
    color: var(--white);
    margin-bottom: 0.6rem;
}
.login_box input[type=submit]{
    align-self: flex-end;
    background: black url('/img/icon/icono_exit.svg') no-repeat right 10px center/30px;
    border: none;
    width: 100px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
}
.logo_box{
    width: 40%;
    display: flex;
    flex-direction: column;
}
.logo_box img{
    width: 100%;
    box-sizing: border-box;
}

.logo_box__logo1{
    margin-bottom: 0.3rem;
    background-color: var(--black);
    display: flex;
    justify-content: center;
    height: 75px;
}
.logo_box__logo1_f{ /* PARA EL FORO */
    background-color:white;
    height: 110px;
}
.logo_box__logo1 img{ max-width: 70px }
.logo_box__logo1.logo_box__logo1_f img{ max-width: 110px; } /* PARA EL FORO */

.logo_box__logo2{
    background-color: var(--gray);
    flex: 1;
    justify-content: center;
    display: flex;
}
.logo_box__logo2_f{ background-color: var(--black) } /* PARA EL FORO */
.logo_box__logo2.logo_box__logo2_f img{ max-width: 60% } /* PARA EL FORO */

.login_options{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login_options input{
    margin: 0;
}
.login_options a{
    font-size: 12px;
    text-transform: uppercase;
    color: white;
    font-weight: 300;
}
/* PAGE -> USER */
.userPage{
    background-color: var(--gray);
}
.userPage .dropdown{
    margin-top: 0;

}
.userPage #form_create{
    flex-direction: row;
}
.userPage #form_create .buttonSquare{
    display: none;
}
/* PAGE -> USER MANAGEMENT */
.userOptions {
    display: flex;
    margin-bottom: 10px;
}
.archiveUsers {
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 7fr 3fr 2fr 1fr; /*repeat(6, 1fr)*/
    grid-gap: 5px 0; /* old browsers */
    gap: 5px 0;
    margin-right: 5px;
}
.archiveUsers > div {
    padding: 0 20px;
    min-height: 40px;
    background-color: #eee;
    display: flex;
    align-items: center;
}
.archiveUsers .header {
    font-weight: 500;
    background-color: var(--gray);
    position: sticky;
    top: 0;
}
.archiveUsers img {
    height: 35px;
}
.action {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    background: #eee no-repeat center/28px;
    cursor: pointer;
}
.action:last-child {
    margin-right: 0;
}
.action--edit {
    background-image: url('/img/icon/icono_lapiz.svg');
}
.action--delete {
    background-image: url('/img/icon/bin_b.svg');
    background-size: 24px;
}

.welcomeMessage {
    line-height: 22px;
    font-size: 18px;
    font-weight: 300;
    margin: 5px 10px;
}
@media (max-width: 768px) {
    .welcomeMessage {
        font-size: 12px;
        line-height: 1.3em;
        margin: 5px 0;
    }
    .welcomeMessage br {
        display: none;
    }
}
.welcomeMessage strong {
    font-weight: 700;
}
.button--split {
    display: flex;
    margin-right: 40px;
}
.button--split .textButton {
    color: black;
    background-color: var(--gray);
    margin-right: 5px;
}
.button--split span {
    width: 40px;
    height: 40px;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}
@media (max-width: 768px) {
    .button--split {
        margin-right: -10px;
    }
    .button--split .textButton {
        display: none;
    }
}

/* SIDEBAR GENERAL */
.sidebar__group{
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
}
/* SIDEBAR ARCH MAP */
.lateral--archMap .lateral_content {
    width: 450px;
}
.archMapSearch .searchResults {
    background: white;
    color: black;
    padding: 0 25px;
}
.archMapSearch .linkList {
    max-height: 500px; /* por si algún navegador no soporta vh y/o calc */
    max-height: calc(100vh - 440px);
    overflow: auto;
    margin-bottom: 10px;
}
.public_page .archMapSearch .linkList {
    max-height: calc(100vh - 580px);
}
.panel--searchResults {
    position: relative;
    display: none;
}
.archMapSearch.searching .panel--searchResults {
    display: block;
}
.archMapSearch.searching .searchboxPanel,
.archMapSearch.searching .panel--layers {
    display: none;
}
.searchInfo span {
    text-transform: uppercase;
}
.layerList {
    display: flex;
    flex-direction: column;
    position: relative;
}
.panelHeader {
    display: none;
}
@media (max-width: 768px) {
    /* MOBILE ARCH MAP */
    .map__title {
        top: 0 !important;
        left: 0 !important;
        right: 0;
        justify-content: center;
    }
    .leaflet-control-zoom {
        display: none !important;
    }
    .map_toolbox.map_toolbox--arch {
        top: 85px;
        left: 20px;
    }
    .map_toolbox.map_toolbox--arch .textButton {
        min-width: auto;
        width: 40px;
        padding: 0;
        justify-content: center;
    }
    .map_toolbox.map_toolbox--arch .textButton img {
        margin: 0;
    }
    .map_toolbox.map_toolbox--arch > h2,
    .map_toolbox.map_toolbox--arch span {
        display: none;
    }
    .toolbox__menu {
        left: 20px !important;
        bottom: 50px !important;
    }
    .searchboxPanel {
        position: fixed;
        top: 110px;
        left: 0;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .archMapSearch .depoSearch__options {
        display: none;
    }
    .main--archMap {
        padding-top: 90px !important;
    }
    #mapArch {
        position: relative;
    }
    .lateral--archMap {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }
    .lateral--archMap .lateral_content {
        display: flex !important;
    }
    .archMapSearch.searching .searchboxPanel {
        display: block;
    }
    .archMapSearch .panel {
        position: fixed;
        bottom: 0;
        left: 0;
        background: white;
        color: black;
        margin: 0 30px;
        width: calc(100% - 60px);
    }
    .archMapSearch .panel > p {
        padding-left: 15px;
        padding-right: 40px;
        margin: 10px 0;
    }
    .archMapSearch .panel.collapsed .panelHeader ~ *,
    .depoSearch__searchClose,
    .panel .widgetIcon,
    .panel .sidebarTitle,
    .panel .sidebarSubtitle {
        display: none;
    }
    .panelHeader {
        display: flex;
    }
    .panelHeader .headerIcon {
        width: 40px;
        height: 40px;
        background: black no-repeat center/25px;
        margin-right: 5px;
    }
    .panelHeader .headerTitle {
        background: black;
        color: white;
        padding: 0 10px;
        font-size: 20px;
        font-weight: 300;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
    }
    .panelHeader .headerCollapse {
        width: 40px;
        height: 40px;
        background: url('/img/icon/icono_arrow_down.svg') no-repeat center/20px;
    }
    .archMapSearch .panel.collapsed .panelHeader .headerCollapse {
        background-image: url('/img/icon/icono_arrow_up.svg');
    }
    .searchResultsInfo {
        display: flex;
    }
    .searchResultsInfo .searchResultsInfoText {
        padding: 10px 0 0 15px;
        flex: 1;
    }
    .archMapSearch .searchResults {
        padding: 0 15px;
    }
    .archMapSearch .layerList {
        padding: 15px;
    }
    .archMapSearch .layerItem .layerIcon {
        border-left-color: white;
    }
}
/* SIDEBAR DEPOT */
.lateral--depot .lateral_content{
    width: 260px;
}
.depoSearch .filters {
    flex-direction: column;
}
.depoSearch .filterList {
    flex-direction: column;
}
.depoSearch .filter {
    display: flex;
    align-items: center;
    width: 100%;
    text-transform: uppercase;
    font-weight: 500;
    color: black;
    background-color: var(--gray);
    margin-bottom: 5px;
}
.depoSearch .filter p {
    flex-grow: 1;
    margin-left: 15px;
}
.depoSearch .filterIcon {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
}
.depoSearch__resultsContainer{
    display: none;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--gray_dark);
    padding: 40px 15px 0 20px;
    box-sizing: border-box;
}
.depoSearch__resultsContainer.show{
    display: flex;
}
.depoSearch__searchClose{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px; right: 10px;
    cursor: pointer;
    background: url('/img/icon/icono-x_w.svg') no-repeat center/20px;
}
.depoSearch__options{
    display: flex;
    flex-direction: column;
    margin: 14px 0;
}
.depoSearch__option{
    display: flex;
    margin: 7px 0;
    align-items: center;
}
.depoSearch__option .selectLink{
    min-width: 25px;
    margin-right: 7px;
    margin-left: 0;
}
/* DEPOT RESULTS */
.numberOfResults{
    color: var(--orange);
    margin-bottom: 30px;
}
.searchResults{
    position: relative;
    overflow-y: auto;
    padding-right: 5px;
    min-height: 100px;
    scrollbar-color: var(--gray2) var(--gray);
}
.searchResults::-webkit-scrollbar-thumb {
    background: var(--gray2);
}
.searchResults::-webkit-scrollbar-track {
    background: var(--gray);
}
.resultType__title{
    text-transform: uppercase;
    margin: 20px 0 10px 0;
}
.resultFolder{
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.resultFolder p{
    z-index: 1;
    color: var(--black);
    font-weight: 800;
}
.resultFolder__header{
    display: flex;
    background: url('/img/icon/icono_arrow_down.svg') no-repeat right top 4px/15px;
    margin-bottom: 5px;
    cursor: pointer;
}
.resultFolder.opened .resultFolder__header{
    background: url('/img/icon/icono_arrow_up.svg') no-repeat right top 4px/15px;
}
.resultFolder.folderSelected{
    background-color: var(--orange_lighter);
}
.resultFolder__markerNumber{
    position: relative;
    width: 20px;
    height: 30px;
    background: url('/img/icon/orangeMarker.svg') no-repeat center/20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resultFolder__markerNumber p{
    position: absolute;
    top: -2px;
}
.resultFolder__route{
    margin-left: 10px;
    text-transform: uppercase;
}
.resultFolder__route p{
    line-height: 16px;
    font-weight: 700;
    margin: 0 0 5px 0
}
.resultFolder__content{
    display: none;
}
.resultFolder.opened .resultFolder__content{
    display: block;
}
.resultFolder__resultElement{
    cursor: pointer;
    position: relative;
    border-top: 1px solid var(--gray_medium);
    color: var(--black);
    padding: 10px 0 10px 15px;
}
.resultFolder__resultElement:before{
    content: "";
    width: 10px; height: 10px;
    background-color: var(--dot-color, var(--orange));
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.resultSubfolder .subfolder__title{
    color: var(--red);
    text-transform: uppercase;
}

/* INCLUDE -> LEFT SIDEBAR */
.lateral{
    background-color: var(--sidebarBackgroundColor);
    display:flex;
    height: 100%;
}
.squareButton--sidebar{
    margin-bottom:3px;
}
.squareButton--sidebar.hide{
    display: none;
}
.squareButton--color{
    color: white;
    background-color: var(--sidebarBackgroundColor);
}
.squareButton--highlight {
    border: solid 3px var(--sidebarBackgroundColor);
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
}
.lateral_actions{
    background-color:var(--sidemenuColor);
    width: 55px;
    display:flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    padding: 40px 0 80px 0;
}
.lateral_actions--caida{
    margin-top: 175px;
}
.lateral_actions div{
    display:flex;
    flex-direction: column;
}
.logo_paestum{
    position: absolute;
    display: block;
    height: 100px;
    width: 100%;
    top: 40px;
}
.logo_paestum img{
    width: 100%;
}
.extensionButton{
    position: absolute;
    right: 100%;
    line-height: 14px;
    font-weight: 500;
    background-color: var(--gray_medium);
    color: black;
    height: 50px;
    width: 80px;
    padding: 0 15px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    cursor: pointer
}
.extensionButton--right{
    right: unset;
    left: 60px;
    justify-content: flex-start;
    width: 130px;
}
.extensionButton.selected{
    background-color: var(--gray_medium);
}
.extensionButton--highlight {
    background-color: var(--genericButtonColor);
    color: white;
    font-size: 19px;
    font-weight: 300;
    margin-top: 3px;
    padding-right: 15px;
    line-height: 1;
}
div.extensionButton--highlight {
    align-items: flex-end;
    justify-content: center;
}



/* INCLUDE -> RIGHT SIDEBAR */
.first_logo {
    margin-top: 60px;
}
.lateral--right .lateral_actions{
    padding-top: 95px;
}
#wrap_main {
    display: flex;
    justify-content: center;
}
.sidebarTitle{
    color: white;
    background: var(--genericButtonColor);
    font-size: 1.3rem;
    font-weight: 300;
    margin-top: 3px;
    margin-left: -15px;
    font-family: 'Roboto', sans-serif;
    padding: 12px 15px;
}
.sidebarTitle--inGroup{
    margin-top: 10px;
    background-color: transparent;
}
.sidebarInfo {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.sidebarSubtitle {
    font-size: 1.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 30px 0 10px;
}
.widgetIcon{
    width: 55px; height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
    position: absolute;
    top: 0;
}
.lc_right .widgetIcon { left: -75px }
.widgetIcon.hide{ display: none }
.widgetIcon--highlight {
    border: solid 3px var(--sidebarBackgroundColor);
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
}

.sidebarWidget{
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lateral_content--flexItems .sidebarWidget{
    flex: unset;
}
.widget__demoImg{
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    flex: 1;
    max-height: 330px;
}
.widget__demoImg--areaArch{
    min-height: 300px;
    margin-left: -15px;
    padding: 7.5px;
    margin-top: 5px;
}

.pageInterna {
}

.pageInterna #main {
    padding-left: 100px;
    padding-right: 100px;
}
.pageInterna__header{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 5px;
}
.pageInterna__header > *:first-child {
    margin-right: auto;
}
.pageInterna__header > p {
    font-size: 1.3rem;
    font-weight: 300;
    text-transform: capitalize;
}
.pageInterna__header .security_level{
    margin: 0;
}
.pageInterna__exit{
    background: url(/img/icon/icono-x.svg) no-repeat top center/20px;
    width: 40px;
    height: 40px;
}
.main__header .pageInterna__exit {
    background-position: center;
}
.pagePublic .public_page {
    overflow: auto;
}
.pagePublic .public_page #main {
    margin: 0 auto;
}
.pagePublic .pageInterna__exit,
.pagePublic .security_level {
    display: none;
}
#main{
    padding: 30px 60px;
    flex-direction: column;
    display: flex;
    width: 100%;
    max-width: 1500px;
    box-sizing: border-box;
    position: relative;
}
#main.main--full{
    padding: 0;
    max-width: 100%;
}
#main--public{
    padding: 30px 60px;
    flex-direction: column;
    display: flex;
    width: 100%;
    max-width: 1500px;
    box-sizing: border-box;
    position: relative;
}
@media (max-width: 768px) {
    /* MOBILE SCROLL */
    #main--public {
        padding: 10px;
    }
    /*.archiveContent, .archiveFiles {
        overflow: visible;
    }*/
    #main--public ~ .lateral {
        display: none;
    }
}
.main_content{
    padding: 60px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
}
.public_page{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0 40px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .public_page {
        padding: 0 10px;
    }
}


/* COMPONENT -> pagination */
.pageSelector{
    position: relative;
    text-align: center;
    padding: 0 10px;
    margin-left: 15px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.pagination__context{
    margin: 0 10px;
}
.pagination__context span{
    margin: 0 2px;
}
.pageSelector .pageSelector__page{
    --size: 30px;
    width: var(--size);
    height: var(--size);
    margin: 0 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray_medium);
    text-align: center;
    appearance: textfield;
}
.pageSelector .pageSelector__page::-webkit-outer-spin-button,
.pageSelector .pageSelector__page::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pagination{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
}
.archiveOptions .pagination {
    margin-left: auto;
}
.archiveOptions--info {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .archiveOptions--info {
        height: auto;
    }
    .archiveOptions .pagination {
        margin: auto;
    }
}
.archiveOptions--total {
    width: 100%;
}
.pagination.hide {
    display: none;
}
.pagination__title{
    margin-right: 15px;
}
.page,.page-item,.pagination__arrows{
    --size: 35px;
    margin: 0 1px;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination__arrows{
    --size: 35px;
    width: var(--size);
    height: var(--size);
}
.paginateNext,.paginatePrev{
    background: var(--gray) url(/img/icon/paginator_single.svg) no-repeat center/14px
}
.paginatePrev{
    transform: rotate(180deg);
}
.page,.page-item{
    width: auto;
    padding: 0 4px;
}
.page.selectedPage,.page-item.active{
    border-bottom: 2px solid var(--gray_medium);
    font-weight: 900;
}
.page-item .page-link {
    color: inherit;
}

/* COMPONENT -> archiveOptions */
.archiveOptions{
    display: flex;
    margin-top: 20px;
    line-height: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    flex: none;
}
@media (max-width: 768px) {
    .archiveOptions--info, .archiveOptions .visualizaciones {
        display: none;
    }
}
.searchFilter {
    display: flex;
    align-items: center;
}
.searchFilter .textButton {
    text-transform: none;
    background: var(--gray) url('/img/icon/up-and-down.svg') no-repeat right 10px center/20px;
    color: #000;
    justify-content: flex-start;
    font-weight: 300;
    padding-right: 40px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.searchFilterButton {
    position: relative;
    margin-left: 10px;
}
.searchFilterDropdown {
    background: #fff;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 1;
    display: none;
}
.searchFilterDropdown div {
    display: flex;
    align-items: center;
    background-color: var(--gray);
    margin-top: 3px;
    font-weight: 600;
    cursor: pointer;
}
.searchFilterDropdown div.active {
    background-color: var(--gray_dark);
    color: #fff;
}
.searchFilterDropdown .icon {
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 50%;
    border-right: solid 3px #fff;
    flex-shrink: 0;
}
.searchFilterDropdown .title {
    padding: 0 20px 0 10px;
}

/* COMPONENT -> bricks */
.brick{
    width: 18.2%;
    float: left;
    margin-bottom: 18px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    background-color: var(--gray);
    background-repeat: no-repeat;
    background-position: center top 50px;
    background-size: 30px;
}
.brick-sizer{
    width: 18.9%;
}
@media (max-width: 1400px) {
    .brick {
        width: 30%;
    }
    .brick-sizer {
        width: 32%;
    }
}
@media (max-width: 1200px) {
    .brick {
        width: 45%;
    }
    .brick-sizer {
        width: 48%;
    }
}
@media (max-width: 1000px) {
    .brick {
        width: 90%;
    }
    .brick-sizer {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .brick {
        width: 46%;
    }
    .brick-sizer {
        width: 48%;
    }
}
.brick p{
    margin: 0 0 30px;
    line-height: 16px;
    font-weight: 500;
    color: var(--black);
    padding: 0.5rem;
}
.brick .imgCont{
    position: relative;
    width: 100%;
    min-height: 80px;
    background-repeat: no-repeat;
    background-position: top 30px center;
    background-size: 35px;
    cursor: pointer;
}
.brick img{
    width: 100%;
}
.brickOptions{
    display: flex;
    justify-content: flex-end;
}
.squareButton--brick{
    width: 25%; /* según diseño, cada botón tiene que ocupar como máximo el 25% del espacio */
    height: 40px;
    border-left: 2px solid var(--white);
}
.squareButton--brick:first-child:nth-last-child(4){
    border-left: 0; /* cuando hay 4 botones, el primero no tiene que tener borde izquierdo */
}
.archiveFiles.vis_3 .squareButton--brick{
    border-left: 2px solid var(--white); /* en la vis_3, todos los botones tienen que tener borde */
}
.brickData{
    display: none;
    flex-direction: column;
    background-color: var(--gray);
    padding: 20px 15px;
    background: url('/img/icon/loading.svg') no-repeat center/40px;
    min-height: 70px;
}
.brickData.loaded{
    background: none;
}
.brickData p.data{
    font-weight: 400;
    margin: 0;
}

/* PANO */
.hdlink{
    display: none;
    position: absolute;
    right: 5px; top: 5px;
    width: 35px; height: 35px;
    background: var(--white) url('/img/icon/panoramic.svg') no-repeat center/25px;
    cursor: pointer;
}
.brick .imgCont:hover .hdlink{
    display: flex;
}
.panoViewer{
    width: calc(100% - 120px); height: 100%;
    position: fixed;
    top: 0; left: 60px;
    z-index: 1;
}
.panoViewer-inline {
    width: 100%;
    height: 100%;
}
.panoViewer__close{
    position: absolute;
    top: 10px; right: 10px;
    background: white url(/img/icon/icono-x.svg) no-repeat center/20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;
}
.panoViewer__close + div{
    z-index: 0;
}

/* COMPONENT -> dropdown */
.dropdown{
    background-color: white;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.dropdown.dropdown--gray{ background-color: var(--gray) }
.dropdown__title{
    display: flex;
    text-transform: uppercase;
    cursor: pointer;
    align-items: center;
    font-weight: 600;
    min-height: 25px;
}
.dropdown__title > p{
    margin: 0;
}
.dropdown__title__arrow{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: url('/img/icon/icono_arrow_open.svg') no-repeat center/20px;
    transform: rotate(-90deg);
}
.dropdown__title__tick{
    width: 25px;
    min-width: 25px;
    height: 25px;
    border-radius: 100%;
    background: url('/img/icon/icono_check_black.svg') no-repeat center/20px;
    margin-left: auto;
    box-sizing: border-box;
    border: 1px solid black;
}
.dropdown__title__tick.checked{
    background: #a8bf4a url('/img/icon/icono_check_white.svg') no-repeat center/20px;
    border: 1px solid #a8bf4a;
}
.dropdown__content{
    display: none;
    flex-direction: column;
    margin-bottom: 10px;
    margin-top: 10px;
}
.dropdown__content .form_dualInput{
    margin-top: 0;
}
.dropdown__content.dropdown__content--fixScroll{
    max-height: 300px;
    overflow-y: auto;
    scrollbar-color: var(--gray2) var(--gray);
}
.dropdown__content.dropdown__content--fixScroll::-webkit-scrollbar-thumb {
    background: var(--gray2);
}
.dropdown__content.dropdown__content--fixScroll::-webkit-scrollbar-track {
    background: var(--gray);
}

.dropdown.show .dropdown__content{
    display: flex;
}
.dropdown.show .dropdown__title__arrow{
    transform: rotate(0);
}

/* COMPONENT -> boxInput */
.inputBox{
    position: relative;
    background-color: white;
    border: 1px solid var(--gray_medium);
    display: flex;
    padding-left: 15px;
    margin-top: 10px;
    align-items: center;
    min-width: 250px;
    min-height: 45px;
    cursor: text;
}
.inputBox--textarea{
    padding: 15px;
    flex-direction: column;
    align-items: stretch;
}
.inputBox label{
    /*color: var(--gray_medium);*/
    text-transform: uppercase;
    cursor: text;
}
.inputBox input{
    border: none;
    flex: 1;
    width: 100%;
    padding: 0 40px 0 10px;
    align-self: stretch;
}
.inputBox--textarea label{
    align-self: flex-start;
}
.inputBox--textarea textarea{
    margin-top: 10px;
    border: none;
    height: 100px;
    resize: none;
}
.inputBox input[type=checkbox]{
    opacity: 100;
    right: 0;
    width: 40px;
    left: unset;
    top: 50%;
    transform: translateY(-50%);
}
/*
.inputBox select{
    flex: 1;
    align-self: stretch;
    border: none;
    padding-left: 10px;
}
*/

/* COMPONENT -> INPUTBOX_SELECT */
.inputBox--select, .inputBox--multiselect{
    flex: 1;
    position: relative;
    cursor: pointer;
}
.inputBox--select__input{
    flex: 1;
    background: url('/img/icon/up-and-down.svg') no-repeat right 10px center/20px;
    align-items: center;
    display: flex;
    align-self: stretch;
}
.inputBox--select__options{
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: -1px;
    width: calc(100% + 2px);
    background: white;
    z-index: 1;
    border: 1px solid var(--gray_dark);
    border-top: none;
    box-sizing: border-box;
    padding-left: 15px;
    max-height: 200px;
    min-height: 10px;
    overflow-y: scroll;
    display: none;
}
.inputBox--select__options.show{
    display: flex;
}
.inputBox--select__option, .inputBox--multiselect__option{
    position: relative;
    padding: 10px 0;
    cursor: pointer;
    padding-right: 15px;
}
.inputBox--select__option:hover{
    font-weight: 700;
}
.inputBox--multiselect__option{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inputBox__multiselectCheck{
    border: 1px solid var(--gray_dark);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inputBox__multiselectCheck:after{
    content: "";
    background-color: var(--gray_dark);
    width: 17px;
    height: 17px;
    border-radius: 100%;
    position: relative;
    display: none;
}
.inputBox--multiselect__option.selected .inputBox__multiselectCheck:after{
    display: flex;
}
.inputBox--select__option--add{
    border-top: 1px solid var(--gray_medium);
    margin: 10px 0;
}

/* COMPONENT -> searchBar */
.searchBar{
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 25px;
}
.tabContent__links .searchBar {
    padding: 0;
}
.searchBar > div{
    display: flex;
    align-items: center;
}
.searchBar input{
    background: url('/img/icon/icono_lupa.svg') no-repeat right 15px center/30px;
    width: 100%;
    border: 1px solid black;
    padding: 5px 10px;
    height: 40px;
    box-sizing: border-box;
    margin: 5px 0;
}
.searchBar .textButton{
    margin-left: 8px;
}

/* COMPONENT -> linksSelector */
.linksSelector{
    display: flex;
    padding-top: 25px;
    height: 100%;
    overflow: auto;
}

/* COMPONENT -> filters */
.filters{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.archMapSearch .filters {
    background: white;
    color: black;
    padding: 10px 25px 0;
    margin-top: 0;
    flex-direction: column;
    justify-content: flex-start;
}
.filters.hide {
    display: none;
}
.filterList{
    display: flex;
}
.filter{
    width: 40px;
    height: 40px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    cursor: pointer;
    opacity: 0.5;
}
.filter.selected{
    opacity: 1;
}
.filterOptions{
    display: flex;
    justify-content: space-between;
}
.filterOptions .textButton{
    flex: 1;
}


/* COMPONENT -> linkContainer */
.linkContainer{
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin-right: 25px;
    overflow: auto;
}
.linkContainer:last-child{
    padding-right: 0;
    margin-right: 0;
}
.linkList{
    margin-top: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.link,.list{
    display: flex;
    align-items: center;
    flex: none;
    border-top: 1px solid black;
    padding: 5px 0;
}
.link--clickable {
    cursor: pointer;
}
.link p{
    overflow-wrap: anywhere;
}
.linkOptions{
    margin-left: auto;
    display: flex;
    margin-right: 8px;
}
.viewLink{
    width: 30px;
    height: 30px;
    background: url('/img/icon/icono_ojo.svg') no-repeat center/30px;
    cursor: pointer;
}
.locateLink{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background: url('/img/icon/icono_pin_negro.svg') no-repeat center/40px;
    cursor: pointer;
}
.viewLink--autoRight{
    margin-left: auto;
}
.viewBreadcrumb{
    width: 30px;
    height: 30px;
    background: url('/img/icon/breadcrumb.svg') no-repeat center/23px;
    cursor: pointer;
}
.selectLink{
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 1px solid black;
    margin-left: 10px;
    cursor: pointer;
    position: relative;
}
.selectLink--white{
    background-color: white;
}
.unselectLink{
    width: 30px;
    height: 30px;
    margin-left: 10px;
    background: url('/img/icon/bin_b.svg') no-repeat center/20px;
    cursor: pointer;
}
.linkList .unselectLink{
    display: none;
}
.linksSelected {
    margin-top: 10px;
    padding-right: 10px;
    overflow: auto;
}
.linksSelected .selectLink:after{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.linkList--locked .selectLink{ display: none }
.linkList--locked .unselectLink{ display: none }
/* COMPONENT -> addItemToLink */
.addItemToLink{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 30px;
}
.addItemToLink.hide{
    display: none;
}
.newItemsList{
    display: flex;
    margin-left: 20px;
}
.newItemList{
    position: relative;
    min-width: 40px;
    height: 40px;
    margin-left: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    cursor:pointer;
}
/* COMPONENT -> */
.inputConfirmation{
    display: flex;
    margin: 2px 0;
    font-weight: 300;
}
@media (max-width: 768px) {
    .inputConfirmation {
        display: block;
    }
    .inputConfirmation div {
        display: inline;
    }
}
.inputConfirmation label{
    font-weight: 500;
    margin-right: 4px
}
.inputConfirmation a{
    color: var(--dot-color);
    text-decoration: underline;
}
.inputConfirmation a:hover{
    text-decoration: none;
}
.inputConfirmation--textarea{
    flex-direction: column;
    align-items: flex-start;
}
.inputConfirmation--list{
    flex-direction: column;
    align-items: flex-start;
}
.inputConfirmation textarea,.inputConfirmation input{
    background-color: unset;
    margin-left: 5px;
    resize: none;
    width: 100%;
}
.inputConfirmation--textarea textarea{
    flex: 1;
    margin-left: 0;
}
.inputConfirmation--textarea > div{
    white-space: pre-wrap;
}

/* COMPONENT -> SECURITY LEVEL */
.security_level {
    display:flex;
    border-width: 1px;
    margin: 10px 15px 0 0;
}
.security_level .security_text{
    align-self: flex-end;
    margin-bottom: 14px;
}
.security_level p{
    font-size: 0.9em;
    font-weight: bold;
}
.security_level > div {
    text-align: center;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* COMPONENT -> SHORTCUTEDIT */
.shortcutEdit{
    min-width: 30px;
    min-height: 30px;
    background: var(--gray2) url('/img/icon/icono_lapiz.svg') no-repeat center/20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}
.folderContent__info .shortcutEdit{
    right: 0;
    top: 10px;
}

/* COMPONENT -> VISUALIZACIONES*/
.archiveOptions .visualizaciones {
    margin-left: auto;
}
.visualizaciones > div{
    display: flex;
}
.vis {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background-color: var(--gray);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    cursor: pointer;
}
.vis#vis_3{
    background-size: 40px;
}
.vis--activa{
    background-color: white;
}
.text_searchbar {
    float:right;
    color: gray;
    cursor: pointer;
}
/* COMPONENT -> editDropdownOption */
.editDropdownOption{
    display: flex;
    justify-content: space-between;
    margin-right: 15px;
    padding: 10px 0;
    border-top: 1px solid var(--gray_dark);
}
.editDropdownOption__options{
    display: flex;
    position: relative;
}
.editDropdownOption__edit{
    position: relative;
    width: 40px;
    background: url('/img/icon/icono_lapiz.svg') no-repeat center/20px;
    cursor: pointer;
}
.editDropdownOption__edit.hide{
    display: none;
}
.editDropdownOption__editOptions{
    display: none;
    top: 0;
    right: 0;
}
.saveEdit{
    width: 40px;
    padding: 5px 10px;
    background-color: var(--gray_dark);
    color: white;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discardEdit{
    width: 40px;
    background: url('/img/icon/icono-x.svg') no-repeat center/15px;
    cursor: pointer;
}
.editDropdownOption__editOptions.show{
    display: flex;
}
.editDropdownOption__delete{
    width: 40px;
    height: 20px;
    background: url('/img/icon/bin_b.svg') no-repeat center/20px;
    cursor: pointer;
}

/* COMPONENT -> widget */
.widget{
    position: relative;
    margin-bottom: 15px;
}
.widgetGeo img{
    border: 1px solid var(--gray_medium)
}
.widgetGeo__previewMap{
    width: 100%;
    height: 300px;
    margin-top: 7px;
    z-index: 0;
}

/* MAP PLUGINS */
.map_plugin{
    position: absolute;
    z-index: 2;
}
.map_plugin h1{
    color: black;
}
/* COMPONENT -> map_layers */
.map_layers{
    top: 0;
    right: 20px;
}
.map_layers h1{
    text-align: right;
}
.layer{
    position: relative;
    background-color: white;
    padding: 10px 20px;
    border: 1px solid whitesmoke;
    cursor: pointer;
}
.layer.layer--active{
    color: white;
    background-color: var(--gray_medium);
}
.layer:after{
    content:"";
    position: absolute;
    background-color: var(--blue);
    left: 0;
    bottom: -6px;
    height: 5px;
    width: 0%;
    transition: 0.5s ease-out;

}
.layer.layer--loading:after{
    width: 100%;
    transition: 6s ease-in-out;
}

/* COMPONENT -> map_toolbox */
.map_toolbox{
    top: 0;
    left: 60px;
    width: 200px;
}
.map_toolbox h2{
    font-weight: 300;
    font-size: 1.3rem;
    margin: 10px 0;
}
.map_toolbox .textButton{
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px;
    justify-content: space-between;
}
.map_toolbox .textButton.inactive{
    opacity: 0.5;
}
.map_toolbox .textButton.selected{
    background-color: var(--genericButtonColor);
}
.map_toolbox .textButton.selected span{
    color: white;
}
.map_toolbox .textButton img{
    width: 30px;
}
.map_toolbox > div{
    background-color: white;
}
.toolbox__menu{
    background-color: white;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 15px;
    display: none;
}
.toolbox__menu.show{ display: block }

/* MAPS */
.mapBox{
    margin-top: 10px;
    flex: 1;
    display: flex;
    position: relative;
}
#map{
    flex: 1;
    z-index: 0;
}
.fullMap{
    width: 100%;
    height: 100%;
    z-index: 0;
}
.map__title{
    position: absolute;
    z-index: 1;
    top: 45px;
    left: 60px;
}
.map__title--mapArch{
    left: 60px;
    display: flex;
    align-items: center;
}
.map__title--depot{
    left: 50px;
    background: url('/img/icon/icono_deposito_b.svg') no-repeat left center/55px;
    padding-left: 55px;
}
.map__title__text h2{
    font-weight: 300;
    font-size: 1.3rem;
    text-transform: capitalize;
}
.map__title__text p{
    font-size: 12px;
    font-weight: 700;
    margin-top: 7px;
}
/* LEAFLET CURSORS */
.leaflet-alias, .leaflet-alias .leaflet-interactive {
    cursor: alias !important;
}
/* CUSTOM TOOLTIP LEAFLET */
.leaflet-tooltip.leaflet-tooltip {
    padding: 10px;
    font-family: var(--font-family-sans-serif);
    font-size: 13px;
    color: black;
    box-shadow: var(--sombra);
    border-radius: 0;
}
.leaflet-tooltip.coordinates {
    padding-left: 40px;
    background-image: url('/img/icon/orangeMarker.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px;
}
.leaflet-tooltip strong {
    font-weight: 300;
    font-size: 16px;
}
.leaflet-tooltip-left.leaflet-tooltip-left {
    margin-left: -1em;
}

.leaflet-container {
    background: white;
}

/* CUSTOM POPUP LEAFLET */
.map__text.leaflet-popup{
    margin-bottom: 0;
    pointer-events: none;
}
.map__text--hovered.leaflet-popup{ margin-bottom: 20px }
/*.map__text--hovered{ display: none}*/
.map__text--hovered.show{ display: block}
.map__text.map__text--type-corridors .leaflet-popup-content {
    font-size: 20px;
}
/*.map__text .leaflet-popup-close-button{ display: none }*/
.map__text .leaflet-popup-content-wrapper{
    background: unset;
    box-shadow: unset;
}
.map__text .leaflet-popup-tip-container{ display: none }
.map__text .leaflet-container .leaflet-control-attribution{ display: none }
.map__text .leaflet-popup-content{
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1rem;
    margin: 0;
}
.map__text.map__text--lite{
    bottom: -11px !important;
}
.map__text--standout{
    margin-bottom: 25px !important;
}
.map__text.map__text--lite p{
    font-size: 0.8rem;
}
/* FORMS */
.headerForm{
    margin-top: 15px;
    margin-bottom: 5px;
}
.headerForm p{
    margin: 0;
}
.headerForm,.headerForm p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}
.headerForm .buttonSquare{
    margin-left: 6px;
}
.form_dualInput{
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
}
.form_dualInput > *{
    flex: 1;
}
.form_dualInput > *:first-child{
    margin-right: 10px;
}
.form__pathSelect{
    display: flex;
    margin-top: 10px;
    align-items: center;
}
.form__pathSelect__path{
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
    background-color: var(--gray);
    text-transform: capitalize;
}
.form__pathSelect__path:hover{
    background-color: var(--gray_dark);
    color: white;
}
.form__pathSelect__path.selected{
    background-color: var(--gray_dark);
    color: white;
}
.form__pathBox{
    display: none;
    flex-direction: column;
}
.form__pathBox.selected{
    display: flex;
}

/* MODALS */
.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 800px;
    min-height: 100px;
    max-height: 80vh;
    max-width: 85vw;
    padding: 10px 30px 30px 30px;
    background-color: var(--gray);
    box-shadow: var(--sombra);
    display: none;
    z-index: 2;
    flex-direction: column;
    touch-action: none; /* Solo para que interact.js dejara de quejarse */
    box-sizing: border-box; /* Solo para que interact.js dejara de quejarse */
}
.modal.modal--active{
  z-index: 3;
}
.modal.modal--leftSidebarMode{
    width: 700px;
}
.modal.modal--rightSidebarMode{
    margin-left: -130px;
    width: 700px;
}
.modal.modal--rightSidebarMode.modal--leftSidebarMode{
    width: 600px;
    margin-left: -65px;
}
.modal.modal--depot{
    background-color: white;
    z-index: 1;
}
.modal.show{
    display: flex;
}
@media (max-width: 768px) {
    .modal.modal__general {
        box-sizing: border-box;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        box-shadow: none;
        border-top: solid 5px white;
        padding: 20px 40px;
        padding-bottom: 90px;
        margin-top: 90px;
    }
    .modal__header__close {
        position: absolute;
    }
}
.modal__header{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-bottom: 15px;
    position: relative;
    flex: none;
}
.modal__header__title{
    display: flex;
    align-items: center;
    margin-right: auto;
    margin-top: 11px;
}
.modal--prompt .modal__header__title {
    font-weight: 300;
    font-size: 16px;
}
.modal__header__title h2{
    font-weight: 600;
    font-size: 1.3rem;
}
.modal__header__title__content{
    display: flex;
    flex-direction: column;
}
.modal__header__title__content h2{
    font-weight: 300;
    margin-left: 15px;
    font-size: 1.3rem;
}
.modal__header__title__content .breadcrumb{
    margin: 3px 0 0 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}
.modal__header__title__content .counter{
    margin: 5px 0 0 15px;
    font-size: 0.8rem;
    color: var(--red);
    font-weight: 800;
    text-transform: uppercase;
}
.modal__header__close{
    background: url('/img/icon/icono-x.svg') no-repeat center/20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.modal__content{
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-color: var(--gray2) var(--gray);
}
.modal__content::-webkit-scrollbar-thumb {
    background: var(--gray2);
}
.modal__content::-webkit-scrollbar-track {
    background: var(--gray);
}
.modal--depot .modal__content{
    position: relative;
}
.modal__section{
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}
.optionsList{
    position: relative;
    width: 100%;
    min-height: 100px;
    max-height: 300px;
    overflow-y: scroll;
    margin-top: 5px;
}

.modal--prompt{
    position: absolute;
    z-index: 1000;
    width: 300px;
}
.modal--prompt.whiteBackground{
    background-color: white;
}
.feedbackText{
    margin-bottom: 20px;
}
.feedbackText li{
    font-size: 0.8rem;
    position: relative;
    padding-left: 10px;
    margin-top: 5px;
    margin-left: 7px;
    list-style: none;
}
.feedbackText li span{
    position: absolute;
    top: 0;
    left: -6px;
    font-weight: 700;
}
.modal--prompt .modal__header{
    height: 40px;
    margin-bottom: 0;
    align-items: center;
}
.modal--prompt .modal__content{
    min-height: unset;
    max-height: unset;
}

/* MODAL --> advancedSearch */
#advancedSearch {
    background-color: white;
}
.advancedSearch__option{
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}
.advancedSearch__option .sheetItem {
    width: 30%;
    flex-shrink: 0;
}
.advancedSearch__fields {
    flex-grow: 1;
}
.advancedSearch__field {
    display: flex;
    flex-direction: column;
}
.advancedSearch__field > div {
    display: flex;
    align-items: center;
    padding: 0 5px 5px;
}
.advancedSearch__field input[type="text"] {
    width: 100%;
    border: solid 1px #000;
    padding: 5px 10px;
    height: 40px;
    box-sizing: border-box;
}
.advancedSearch__field .icon {
    height: 30px;
    margin: 5px;
    cursor: pointer;
}
.advancedSearch__field .helptext {
    margin: 0;
    color: var(--gray_dark);
}

/* Toggler advanced search */
.andOrToggler {
    position: relative;
    white-space: nowrap;
    margin: 0 5px;
}
.andOrToggler span {
    display: inline-block;
    vertical-align: middle;
}
.andOrToggler span:empty {
    width: 60px;
    height: 30px;
    border: solid 1px black;
    border-radius: 100px;
    padding: 0 10px;
    box-sizing: border-box;
}
.andOrToggler span:empty::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    margin-top: 6px;
    background: black;
    border-radius: 50%;
}
.andOrToggler input:checked ~ span:empty::before {
    margin-left: auto;
}
.andOrToggler input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Dropdown advanced search */
.dropdown-wrapper {
    position: relative;
    width: 100%;
    height: 40px;
    background: var(--gray) url('/img/icon/up-and-down.svg') no-repeat right 10px center/20px;
    padding: 0 30px 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.dropdown-wrapper span {
    font-weight: 500;
}
.dropdown-options {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: var(--gray);
    width: 100%;
    padding: 15px;
    z-index: 1;
    max-height: 280px;
    overflow: auto;
    box-sizing: border-box;

    display: none;
}
.dropdown-wrapper.active .dropdown-options {
    display: block;
}
.dropdown-options p:hover {
    font-weight: 600;
}

details {
    padding-left: 20px;
}
details summary {
    position: relative;
    border-bottom: solid 1px #000;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-left: -20px;
    text-transform: uppercase;
    cursor: pointer;
}
details summary::marker {
    content: '';
}
details summary::after {
    content: '';
    background: url('/img/icon/icono_arrow_open.svg') no-repeat right center/contain;display: inline-block;
    width: 100%;
    height: 12px;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: -1;
}
details[open] summary::after {
    transform: scaleY(-1);
}

/* FREE MODAL */
.freeModal{
    position: absolute;
    background-color: var(--gray);
    min-width: 150px; min-height: 10px;
    z-index: 100;
    box-shadow: var(--sombraParalela);
    display: flex;
    align-items: flex-start;
    padding: 17px 34px 20px 17px;
    margin-right: 10px;
}
.freeModal--ficha{
    flex-direction: column;
    padding: 0;
    width: 180px;
    min-height: 50px;
}
.freeModal--ficha .brickOptions{
    width: 100%;
    margin-top: auto;
}
.freeModal--selector {
    padding-bottom: 10px;
    padding-top: 16px;
}
.freeModal--selector .selectorTitle {
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 0;
}
.freemodal__close{
    background: var(--gray) url(/img/icon/icono-x.svg) no-repeat center/13px;
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
}
.freemodal__close--outerCross{
    top: -40px;
    width: 40px;
    height: 40px;
    background: var(--gray2) url(/img/icon/icono-x.svg) no-repeat center/13px;
}
.freeModal__content{
    width: 100%;
}
.freeModal__content .minititle{
    color: var(--gray_dark);
}
.freeModal__breadcrumb {
    display: flex;
    align-items: flex-start;
}
.previewFicha__img{
    width: 100%;
    min-height: 50px;
}

/* MODAL FULL - Cuando hay un contenido que ocupa toda la seccion #main de la pagina, sin que se vea lo que hay detrás ni nada*/
.fullModal{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-color: white;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-direction: column;
}
.fullModal__header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.fullModal__header--alt{
    justify-content: flex-end;
}
.fullModal__content{
    overflow-y: auto;
    height: 100%;
    position: relative;
    padding-right: 5px;
}
.fullModal__close{
    background: url(/img/icon/icono-x.svg) no-repeat center/20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-left: auto;
}
.fullModal__close--alt{
    margin-left: 10px;
}

/*modals personalizadas por id*/
#addDropdownField{
    width: 500px;
    background-color: white;
}
#addDropdownField.modal__content{
    max-height: 350px;
}

/* Esconder el titulo cuando se carga en la modal */
.modal__content .pageInterna__header{
    display: none;
}
.modal__content .linkList,
.modal__content .linkList .link,
.confermaSection .linkList,
.confermaSection .linkList .link {
    padding-right: 0;
    overflow: auto;
}

/* HELP FUNCTION */
.helpersLayer{
    display: none;
    position: fixed;
    z-index: 10000;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.helpersLayer__close{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 5px 20px;
    cursor: pointer;
    padding-right: 50px;
    background: black url('/img/icon/icono-x_w.svg') no-repeat center right 15px/20px
}
.helpersLayer__close p{
    font-size: 25px;
}
.helpersLayer.show{
    display: flex;
}
.helpbox{
    display: block;
    position: absolute;
    top: 0; left: 0;
    box-sizing: border-box;
    border: 2px solid rgba(52, 152, 219, 0.9);
}
.helpbox:hover{
    background-color: rgba(52, 152, 219, 0.2);
}
.helpbox__info{
    display: none;
    position: absolute;
    top: 0; left: 0;
    background-color: white;
    padding: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    min-width: 100px;
    max-width: 200px;
    z-index: 1;
}
.helpbox__info::before{
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background-color: white;
}
.arrow--left::before{
    left: -7px;
    top: 4px;
}
.arrow--right::before{
    right: -7px;
    top: 4px;
}
.helpbox__info p{
    margin: 0;
}
.helpbox:hover .helpbox__info{
    display: flex;
}

.embed-16by9 {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
}
.embed-16by9 > * {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}

/* HOMEPAGE */
.homepage-wrapper {
    background: var(--gray_dark);
    color: white;
    scrollbar-color: var(--gray2) var(--gray);
}
.homepage-wrapper::-webkit-scrollbar-thumb {
    background: var(--gray2);
}
.homepage-wrapper::-webkit-scrollbar-track {
    background: var(--gray);
}
.homepage {
    width: 100%;
}
.homepage img {
    max-width: 100%;
}
.homepage nav {
    text-align: center;
    margin-top: 20px;
    margin-bottom: -100px;
    position: relative;
    z-index: 1;
}
.homepage nav .logo {
    display: inline-block;
    margin-right: 5px;
}
.homepage nav .logo img {
    width: 140px;
}
.homepage nav .logo:last-child {
    margin-right: 0;
}
.homepage section, .homepage footer {
    max-width: 1200px;
    margin: 40px auto;
    padding: 15px;
    box-sizing: border-box;
}
.homepage section.video {
    background: black;
    padding: 0;
    max-width: none;
}
.homepage section.video > div {
    max-width: 1200px;
    margin: 0 auto;
}
.homepage section.welcome {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin-top: -20px;
}
.homepage section.welcome div {
    width: 100%;
    margin-left: 90px;
}
.homepage section.welcome div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.homepage section.welcome div:last-child {
    margin-top: 25px;
    margin-right: 90px;
    margin-left: 40px;
}
.homepage section.welcome p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0;
}
.homepage section h1 {
    text-align: right;
    font-weight: 300;
    font-size: 25px;
    line-height: 1.3em;
    margin: 20px 0;
}
.homepage section h1 b, .homepage section p b {
    font-weight: 700;
}
.homepage .textButton {
    display: flex;
    background: var(--gray) no-repeat right 10px center/30px;
    color: black;
    font-weight: 500;
    font-size: 15px;
    padding: 0 15px;
    padding-right: 50px;
    height: 50px;
    box-sizing: border-box;
}
.homepage .textButton--black {
    background-color: black;
    color: white;
    font-weight: 700;
}
.homepage .textButton--left {
    padding-right: 15px;
    padding-left: 50px;
    background-position: 10px center;
}
.homepage .textButton--dot span {
    flex: 1;
}
.homepage .textButton--dot::before {
    content: '';
    display: inline-block;
    background: var(--dot-color);
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
.homepage section.block {
    border: solid 2px var(--gray2);
}
.homepage section.block figure {
    margin: 0;
    display: flex;
    align-items: center;
}
.homepage section.block figure img {
    max-width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
}
.homepage section.block figcaption {
    flex: 1;
    margin: 0 20px;
    margin-right: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.homepage section.block h1 {
    text-align: left;
}
.homepage section.block:nth-child(2n + 1) figcaption {
    order: -1;
    align-items: flex-end;
    margin-left: 90px;
    margin-right: 20px;
}
.homepage section.block:nth-child(2n + 1) figure img {
    padding-right: 0;
    padding-left: 20px;
}
.homepage section.block:nth-child(2n + 1) h1 {
    text-align: right;
}
.homepage footer {
    background: black;
    color: var(--gray2);
    margin-bottom: 0;
    padding: 30px;
    font-size: 13px;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
}
.homepage footer hr {
    margin: 5px 0;
    color: currentColor;
}
.homepage footer a {
    color: white;
}
.homepage footer .attribution {
    display: inline-flex;
    flex-direction: column;
    text-align: right;
    vertical-align: top;
}
.homepage footer .attribution--visivalab {
    margin-left: 300px;
}
@media (max-width: 768px) {
    .homepage {
        padding: 0 30px;
    }
    .homepage nav {
        display: flex;
        justify-content: center;
        margin-bottom: -30px;
    }
    .homepage nav .logo--home {
        width: auto;
        min-width: 40px;
    }
    .homepage section.welcome {
        flex-direction: column;
    }
    .homepage section.welcome div {
        margin: 0 !important;
        align-items: center !important;
        text-align: center;
    }
    .homepage section.welcome div:first-child {
        margin-bottom: 20px !important;
    }
    .homepage .textButton {
        width: 93%;
    }
    .homepage section h1 {
        text-align: center;
    }
    .homepage section.block figure {
        flex-direction: column;
    }
    .homepage section.block figure img {
        max-width: 100%;
        padding: 0 !important;
    }
    .homepage section.block figcaption {
        margin: 0 0 20px !important;
        align-items: center !important;
    }
    .homepage section.block h1 {
        text-align: center !important;
        order: -1;
    }
    .homepage section.block:nth-child(2n+1) figcaption {
        order: 0;
    }
    .homepage footer {
        flex-direction: column;
    }
    .homepage footer hr {
        width: 100%;
    }
    .homepage footer div {
        margin-bottom: 5px;
    }
    .homepage footer div:last-child {
        margin-bottom: 0;
        padding-top: 5px;
        border-top: solid 2px;
    }
    .homepage footer .attribution {
        margin: 0;
        text-align: left;
        flex-direction: row;
        margin-top: 5px;
    }
}

/* SHEET ITEMS */
.sheetItem {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    background: var(--gray);
    color: #000;
    font-weight: 700;
    cursor: pointer;
}
.sheetItem .icon {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    margin-right: 10px;
    flex-shrink: 0;
}
.sheetItem .radio_circle {
    margin-left: auto;
}
.sheetItem.selected .radio_circle .checkmark {
    display: block;
}

/* TABBED AREA for import/export */
.tabbedarea {
    display: flex;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .tabbedarea {
        flex-direction: column;
    }
}

.tabbedbox {
    position: relative;
    width: 100%;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
}

.tabbedbox .title {
    position: relative;
    top: 1px;
    border: solid 1px var(--gray_dark);
    border-bottom-color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0 20px 0 45px;
    height: 50px;
    line-height: 50px;
    align-self: flex-start;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: auto 30px;
}

.tabbedbox .contents {
    border: solid 1px var(--gray_dark);
    border-left: 0;
    border-bottom: 0;
    padding: 20px 20px 0 0;
    height: 100%;
}

.tabbedbox .contents p {
    color: var(--gray_dark);
}

.tabbedbox .contents > div {
    margin-top: 40px;
}

.message {
    background: var(--gray);
    padding: 15px 20px;
    font-weight: 700;
}

/* MEDIA QUERIEEEES */
@media (max-width: 1280px) {
    /* Para invertir el funcionamiento de sidebars abiertas o cerradas en pantallas pequeñas sin tener que tocar el js*/
    .squareButton--sidebar.mirrorable{ transform: rotate(180deg) }
    .squareButton--sidebar.mirror{ transform: none }
    .lateral.visible .lateral_content{ display: none }
    .lateral_content, .lateral .extensionButton { display: flex }

    /* Los botones del menu, que estan descontrolados */
    .lateral_actions{
        padding: 40px 0 40px 0;
    }

    /* El sidebar tiene demasiado espacio debajo */
    .sidebar__group{
        margin-bottom: 20px;
    }
}

/* Coño nunca me habia planteado hacer height media queries y tienen mucho sentido ostia que tonto he sido durante años */
@media (max-height: 700px){
    /* Lo que de problemas son los sidebars, lo demás tiene scrolls internos automaticos */
    .lateral_content.lateral_content{ padding-top: 5px }
    .widget__demoImg--areaArch {min-height: 220px;}
}


/* mainteinance calendar */
.calendarMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}
#monthName {
    font-family: 'Roboto';
    font-size: 20px;
    line-height: 22px;
    text-transform: capitalize;
}