/** Globals */
.project_logo {
    max-height: 40px;
    width: auto;
}

.green-succes {
    color:  #00cd10;
}

.tooltip_last_date {
    width: max-content;
    font-size: 0.75rem;
    margin-left: auto;
    caret-color: transparent;
}

.select_deep_current:not(.is-multiple):not(.is-loading)::after {
    z-index: 0;
}

@media (min-width: 407px) {
    .title_first_cell { min-width: 12rem }
    .title_variable_current { min-width: 13rem }
}


/*Estilo en el mapa*/
/*Define el ancho del mapa con respecto al tamano de la pantalla*/
/*Define el alto del mapa con respecto al tamano de la pantalla*/
/*
#map {			                        
                                        
    height: calc(100vh - 3.25rem);
    position: relative;
    overflow: hidden;
    width: 100%;
}
*/

img {
    max-width: 100%;
    display: block;
}

.right_content{
    height: calc(100vh - 3.25rem);
    overflow-y: scroll;
}

.caret_none {
    caret-color: transparent;
}

.board_location > div.column {
    border: solid 1px white;
}

.board_info > .column {
    border: solid 1px #5B577A;
}

.overflowx_auto {
    overflow-x: auto;
}

.board_info > .column:last-child {
    border-top: 1px solid #5B577A;
    border-bottom: 0px solid #5B577A;
}

.fixed_boya_name {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 2;
}

.btn-contraer-mapa {
    position: absolute;
    top: 0px;
    right: 0px;
    background: none rgb(255, 255, 255);
    border: 0px;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
    z-index: 10;
}

.btn-expandir-mapa {
    /* ekimran --- position: fixed; */
    top: 52px;
    left: 0px;
    background: none rgb(255, 255, 255);
    border: 1px solid #00000012;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
    z-index: 10;
}
.posicion_controlTemporal{
	
    /* position: fixed;
    top: 52px;
    left: 0px;
    background-color: aqua;
    margin-top: 10px;
    margin-left: 10px;
    width: 17%; */
    position: fixed;
    top: 52px;
    left: 0px;
    width: 17%;
    background-color: rgba(238, 238, 238, 0.663);
    margin: 10px;
    padding: 5px;
}
.control_content{
    background-color: #00cd10;
    z-index: -2;
    display: inline-block;
}



.estilos_btn_control {
	/*
    position: fixed;
    top: 150px;
    left: 400px;
    background: none rgb(255, 255, 255);
    border: 1px solid #00000012;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
    z-index: 10;
    position: 0;
    padding: 5px;
    */
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    padding: 5px;
} 





/* .btn-contrae-control {
    position: fixed;
    top: 52px;
    left: 0px;
    background: none rgb(255, 255, 255);
    border: 1px solid #00000012;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
    z-index: 10;
    position: 0;
}  */

.contenido_marcadores{
    padding: 5px;
}
	
@media screen and (max-width: 1055px) {
    .btn-expandir-mapa {
        background: none rgb(255, 255, 255);
        border: 0px;
        margin: 10px;
        padding: 0px;
        text-transform: none;
        appearance: none;
        cursor: pointer;
        user-select: none;
        border-radius: 2px;
        height: 40px;
        width: 40px;
        box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
        overflow: hidden;
        z-index: 10;
    }
}


.posicion_controlTemporal {
    position: fixed;
    top: 141px;
    left: 320px;
    width: 17%;
    background-color: rgba(238, 238, 238, 0.663);
    margin: 10px;
    padding: 5px;
}


/* Vista control movil */
@media screen and (max-width: 700px) {
    .posicion_control{
        width: 100%;
        padding: 5px;
        background-color: rgba(255, 255, 255, 0.4);

        position: fixed;
        top: 50px;
        left: 0px;
        width: 70%;
        background-color: rgba(238, 238, 238, 0.663);
        margin: 10px;
    }
}

.contraer_mapa{
    width: 0% !important;
    transition: 0.5s;
}

.expandir_mapa_map {
    width: 100%;
    transition: 0.5s;
}

.expandir_mapa_content_map {
    width: 25%;
    transition: 0.5s;
}

.bg-warning {
    background-color: rgb(239 188 36);
}

.overlay-img-carousel {
    position: absolute;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 12px;
    padding: 5px;
} /* to img carousel buoys */

.container-img-carousel:hover .overlay-img-carousel {
    opacity: 1;
}

@media (max-width: 446px) {
    #carousel-bot, #carousel-bmt {
        width: 20rem !important;
    }
}

.container-carousel { height: inherit }

.zoom {
    width: 25rem;
    margin: 0 auto;
    cursor: zoom-in;
}

.zoom img:hover {
    opacity: 0;
}

.zoom img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
}

.expand-more-info {
    height: auto;
    overflow: none;
    transition: 0.5s;
}

.collaps-more-info {
    height: 0px;
    overflow: hidden;
    transition: 0.5s;
}

/* Contenedor responsivo para los archivos de descarga FTP */
.content_grid_columns_ftp {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.content_grid_columns_ftp_2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.time_series_files {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.time_series_files_three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media screen and (max-width: 520px) {
    .content_grid_columns_ftp {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (min-width: 520px) and (max-width: 780px) {
    .content_grid_columns_ftp {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 780px) and (max-width: 1055px) {
    .content_grid_columns_ftp {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1055px) and (max-width: 1330px) {
    .content_grid_columns_ftp {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1023px) {
    .section_menu_contract_respons {
        padding: 0px;
        max-height: 0px;
        overflow: hidden;
        transition: all 0.35s;
    }
    .section_menu_expand_respons {
        
        max-height: 100vh;
        transition: all 0.35s;
    }
    .navbar-link:not(.is-arrowless)::after {
        transform: rotate(225deg);
        transition: all 0.35s;
    }
    .rotate_arrow.navbar-link:not(.is-arrowless)::after {
        transform: rotate(315deg);
        transition: all 0.35s;
    }
}

@media (max-width: 620px) {
    #content-map {
        flex: none;
        width: 100%;
        padding-right: 0px;
    }
    #map {
        height: 40vh;
    }
    #content_first {
        display: block !important;
    }
    .btn-contraer-mapa {  display: none !important }
    .expandir_mapa_map {
        width: 100%;
        transition: 0.5s;
    }
    .contraer_mapa {
        width: 100% !important;
        transition: 0.5s;
    }
    .gm-fullscreen-control { display: none }
    .btn-expandir-mapa { display: none }
}

/** ================= Navbar ================== */
@media (min-width: 1024px) and (max-width: 1110px) {
    .navbar-end { font-size: 0.7rem }
}

@media (min-width: 1111px) and (max-width: 1200px) {
    .navbar-end { font-size: 0.8rem }
}

@media (min-width: 1201px) and (max-width: 1290px) {
    .navbar-end { font-size: 0.9rem }
}
/** ================================================  */

@media (min-width: 621px) and (max-width: 768px) {
    #content_first {
        display: flex;
    }
    #content-map {
        flex: none;
        width: 100%;
    }
}

/* @media (min-height: 1030px) {
    #content_first {
        display: block;
    }
    #content-map {
        width: 100%;
        padding-right: 0;
    }
    #map {
        height: calc(100vh - 58.25rem);
    }
    .btn-expandir-mapa, .btn-contraer-mapa { display: none !important }
    .expandir_mapa_map {
        width: 100%;
        transition: 0.5s;
    }
    .contraer_mapa {
        width: 100% !important;
        transition: 0.5s;
    }
} */

/* @media (min-height: 1024px) {
    #content_first {
        display: block;
    }
    #content-map {
        width: 100%;
        padding-right: 0;
    }
    #map {
        height: calc(100vh - 45.25rem);
    }
    .btn-contraer-mapa { display: none !important }
    .expandir_mapa_map {
        width: 100%;
        transition: 0.5s;
    }
    .contraer_mapa {
        width: 100% !important;
        transition: 0.5s;
    }

} */

@media (max-height: 500px) {
    .gmnoprint, .gm-fullscreen-control { display: none }
}

@media (max-width: 768px) {
    #map-safety-circle {
        height: 30rem;
    }
    #table_last_positions {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1.5rem;
    }
    #distance_last_position {
        flex-direction: column;
    }
    #btn_last_position_download {
        margin: 1.3rem 0;
        text-align: end;
    }
}

@media (max-width: 480px) {
    #carousel-bmt { height: auto !important }
    #carousel-bot { height: auto !important }
    .overlay-img-carousel { display: none !important }
    .cs1_instal { height: 296.61px !important }
    .bmt2_img_content { height: 100% !important }
    .bmt2_jaula_instrumentada { height: 191.47px !important }
    .bmt2_img_content_2 { height: 95% !important }
    .bmt2_jaula_instrumentada_2 { height: 190px !important }
    .bot1_img_content { height: 100% !important }
    .bot1_img { height: 150.53px !important }
    .bot1_img_2 { height: 150px !important }
}

@media (max-width: 560px) {
    .variable_title_measurement { width: 10.5rem !important}
    /* .width_box_table_dynamic { min-width: 10.5rem !important } */
}


.img_cover {
    height:350px;
   	width: 350px;
    object-fit: cover;
}

.img_buoy_cover {
    height:530px;
   	width: 500px;
    object-fit: cover;
}

@media (max-width: 480px) {
    .content_grid_columns_ftp_2 {
        grid-template-columns: repeat(1, 1fr); /* O cualquier otra configuración */
    }
}