:root{
    /*colores primarios*/
    --primary-sea-1: #012356;
    --primary-sea-2 : #034581;
    --primary-sea-3 : #0677B4;
    --primary-sea-4 : #39A6D2;
    --primary-sea-5 : #61CAE8;
    --primary-sea-6 : #87E1F1;
    --primary-sea-7 : #A1F1F8;
    --primary-sea-8 : #C1FCFC;
    --primary-sea-9 : #E0FDFB;
    /*colores secundarios*/
    --secondary-color-1: #008CD3;
    --secondary-color-2: #31AABD;
    --secondary-color-3: #1FDE7E;
    --secondary-color-4: #1EDDB4;
    --secondary-color-5: #DCE1FF;
    --secondary-color-6: #F1F0FE;
    --secondary-color-7: #00547F;

    /*colores funcionales*/
    --functional-white: #FFFFFF;
    --functional-black: #000000;
    --functional-red: #EF476F;
    --functional-yellow: #F4E04D;
    --functional-green: #06BA63;
    --functional-cian: #42EAF8;
    --functional-violet: #944BBB;
    
    /*colores del fondo*/
    --main-bg-1: #FFFFFF;
    --main-bg-2: #F1F0FE;
    --main-bg-3: #CAF6FB;
    --main-bg-4: #012356;
    --main-bg-5: #034581;
    --main-bg-6: #39A6D2;
    --main-bg-7: #2F7BB3;

    /* gradientes */
    --gradiant-color-1: linear-gradient(90deg, #3CB4BE 0%, #1EDCB4 100%);;
    --gradiant-color-2: linear-gradient(90deg, #008CD2 0%, #32AABE 100%);
    --gradiant-color-3: linear-gradient(90deg, #01DEBF 2.69%, #01DB7A 100%);
    --gradiant-color-4: linear-gradient(90deg, #01ADDB 2.69%, #018CD1 100%);
    
    /*Escala de grises*/
    --gray-color-1: #333333;
    --gray-color-2: #848484;
    --gray-color-3: #C1C1C1;
    --gray-color-4: #EAEAEA;
    --gray-color-5: #F4F4F4;


    /*colores neutrales*/
    --neutral-color-05: #F6F6F6;
    --neutral-color-10: #ECECEC;
    --neutral-color-20: #DADADA;
    --neutral-color-30: #C7C7C7;
    --neutral-color-40: #B5B5B5;
    --neutral-color-50: #A2A2A2;
    --neutral-color-60: #8F8F8F;
    --neutral-color-70: #7C7C7C;
    --neutral-color-80: #6A6A6A;
    --neutral-color-90: #575757;


    /*colores redes sociales*/
    --rrss-color-dbox: #0061FF;
    --rrss-color-fb: #3B5998;
    --rrss-color-g: #D34836;
    --rrss-color-ig: #4C5FD7;
    --rrss-color-in: #0077B5;
    --rrss-color-s: #00AFF0;

}

@font-face {
    font-family: Roboto-Regular;
    src: url('/static/fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
    font-family: Roboto-Black;
    src: url('/static/fonts/Roboto/Roboto-Black.ttf');
}
@font-face {
    font-family: Roboto-Bold;
    src: url('/static/fonts/Roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: Roboto-Medium;
    src: url('/static/fonts/Roboto/Roboto-Medium.ttf');
}



body{
    background-image: url('/static/svg2/bg.svg');
    background-repeat: no-repeat;
    background-color: var(--main-bg-4);
    position: relative;
    width: 100%;
    background-size: contain;
    background-position-y: bottom;
    background-attachment: fixed;
    font-family: 'Roboto-Regular';
    margin: 0;
}

.header-icons{
    display: flex;
    width: 130px;
    justify-content: space-evenly;
}














.btn-apply {
    background: var(--gradiant-color-4);
    border-radius: 10px;
    border: 0px solid var(--gradiant-color-4);
    height: 30px;
    font-family: 'Roboto-Medium';
    font-size: 16px;
    color: var(--functional-white);
}
.btn-apply:focus, .btn-apply:hover{
    background: var(--gradiant-color-1);
  }

.btn-cancel {
    background: var(--main-bg-2);
    border-radius: 10px;
    border: 1px solid var(--secondary-color-1);
    height: 44px;
    font-family: 'Roboto-Medium';
    font-size: 16px;
    color: var(--secondary-color-7);
}
.btn-cancel:focus, .btn-cancel:hover{
    background: var(--gradiant-color-2);
  }

/*iconos*/
.input-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    left: 8px;
    top: 36%;
    transform: translateY(-50%);
    background-color: var(--primrary-sea-5);
}


.input-submit{
    padding: 0 0 14px 0; /*top, right, bottom, and left*/
}

.form-recover-pass a{
    font-family: 'Roboto-Medium';
    color: var(--primary-sea-4);
    text-decoration: none;
}

.form-recover-pass a:link{
    font-family: 'Roboto-Medium';
    color: var(--primary-sea-4);
    text-decoration: none;
}
.form-recover-pass a:visited{
    font-family: 'Roboto-Medium';
    color: var(--primary-sea-5);
    text-decoration: none;
}
.form-recover-pass a:hover{
    font-family: 'Roboto-Medium';
    color: var(--primary-sea-6);
    text-decoration: none;
}
.form-recover-pass a:active{
    font-family: 'Roboto-Medium';
    color: var(--primary-sea-6);
    text-decoration: none;
}


/*card values*/
.card-parameter{
    /* width: 150px;
    height: 100px;
    max-width: 100;
    background: var(--main-bg-5);
    border: 1px solid #019AD5;
    border-radius: 24px;
    justify-self: center; */

    /* padding: 2rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 55px 5px rgb(0 0 0 / 6%); */
    width: 45%; /* Ancho de las columnas */
    box-sizing: border-box;
    background: var(--main-bg-5);
    border: 1px solid #019AD5;
    border-radius: 20px;
    max-width: 150px;
    margin: 0 auto;
    display: grid;
    /* min-height: 80px; */
    min-height: 70px;
    grid-gap: 0.4rem;
}

.parameter-data-container{
    /* padding-inline: calc(0.1em + 1.8vh); */
    padding-inline: 8px;
    padding-top: calc(0.5em + 0.4vh);
    padding-bottom: calc(0.5em + 0.4vh);

}

.parameter-info{
    display: flex;
    justify-content: space-between;
    font-size: calc(0.3em + 0.6vw);
}
.loader{
    border: 12px solid var(--neutral-color-50);
    border-top: 12px solid var(--functional-cian);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 55%;
    margin-top: -25px;
    margin-left: -25px;
    z-index: 1;
}

#loader_graph{
    border: 12px solid var(--neutral-color-50);
    border-top: 12px solid var(--functional-cian);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 30px;
    margin-bottom: 30px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.parameter-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/oxygen.svg');
    mask-image: url('/static/svg2/card-icons/oxygen.svg');
}

.parameter-icon{
    width: calc(1em + 0.4vw);
    height: calc(1em + 0.4vw);
}
.oxygen-svg {
    width: calc(0.5em + 0.4vw);
    height: calc(0.5em + 0.4vw);
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url(/static/svg2/card-icons/oxygen.svg);
    mask-image: url(/static/svg2/card-icons/oxygen.svg);
}
.temperature-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url(/static/svg2/card-icons/temperature.svg);
    mask-image: url(/static/svg2/card-icons/temperature.svg);
}
.conductivity-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/conductivity.svg');
    mask-image: url('/static/svg2/card-icons/conductivity.svg');
}

.distance-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/level.svg');
    mask-image: url('/static/svg2/card-icons/level.svg');
}

.level-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/level.svg');
    mask-image: url('/static/svg2/card-icons/level.svg');
}

.pH-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/ph.svg');
    mask-image: url('/static/svg2/card-icons/ph.svg');
}
.porcentage-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/porcentage.svg');
    mask-image: url('/static/svg2/card-icons/porcentage.svg');
}
.salinity-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/salinity.svg');
    mask-image: url('/static/svg2/card-icons/salinity.svg');
}

.saturation-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/saturation.svg');
    mask-image: url('/static/svg2/card-icons/saturation.svg');
}

.turbidity-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/turbidity.svg');
    mask-image: url('/static/svg2/card-icons/turbidity.svg');
}

.volume-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/volume.svg');
    mask-image: url('/static/svg2/card-icons/volume.svg');
}

.depth-svg {
    width: 25px;
    height: 25px;
    background-color: var(--secondary-color-3);
    -webkit-mask-image: url('/static/svg2/card-icons/level.svg');
    mask-image: url('/static/svg2/card-icons/level.svg');
}

.parameter-name{
    font-size: 16px;
    line-height: 24px;
    align-self: center;

}
.parameter-name p{
    font-family: 'Roboto-Regular';
    font-style: normal;
    font-weight: 700;
    font-size: calc(0.5em + 0.8vh);
    line-height: 1em;
    margin:0 0 5px 0;
    color: var(--functional-white);
    
    width: 80%;
    max-width: 80%;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */

    
}

.parameter-value{
    display: flex;
    justify-content: space-between;
    color: var(--secondary-color-3);
}


.parameter-value p{
    font-family: 'Roboto-Regular';
    font-style: normal;
    font-weight: 700;
    font-size: calc(0.6em + 0.8vh);
    line-height: 24px;
    margin:0 0 0px 0;
    color: var(--secondary-color-3);
}

.parameter-unity p{
    font-family: 'Roboto-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: calc(0.7em + 1vh);
    margin:0 0 0px 0;
    color: var(--secondary-color-3);
}

.menu-navegation-a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Usa el color heredado (evita el color azul predeterminado) */
}
.menu-navegation-a p {
    color: var(--functional-white); /* Reemplaza "tu-color-personalizado" con el color que desees */
    font-weight: normal;
    transition: font-weight 0.5s ease;
}
.menu-navigation-a:hover p{
    font-weight: bold;
}

#soundBtn{
    height: 35px;
    width: 35px;
    background-color: var(--main-bg-5);
    border: 2px solid var(--primary-sea-4);
    border-radius: 8px;
    transition: background-color 0.3s;
}

#soundBtn svg{
    transition: transform 0.3s;
}

#soundBtn:hover{
    background-color: var(--primary-sea-4);
}
#soundBtn:active{
    background-color: var(--main-bg-7);
}
#soundBtn:active svg{
    transform: scale(0.8);
}


.btn_menu{
    height: 35px;
    width: 35px;
    background-color: var(--main-bg-5);
    border: 2px solid var(--primary-sea-4);
    border-radius: 8px;
    transition: background-color 0.3s;
}

.btn_menu svg{
    transition: transform 0.3s;
}

.btn_menu:hover{
    background-color: var(--primary-sea-4);
}
.btn_menu:active{
    background-color: var(--main-bg-7);
}
.btn_menu:active svg{
    transform: scale(0.8);
}

.estanque_container{
    width: 45%;
    text-align: center;
}
.btn_container{
    display: flex;
    justify-content: space-evenly;
    width: 50%;
    flex-wrap: wrap;
    row-gap: 12px;
}

.alerts{
    background-color: transparent;
    width: 47%;
    /* height: 70px; */
    position: absolute;
    top: 25px;
    justify-self: center;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    justify-content: center;

}

.alerts .alert {
    transition: opacity 0.5s ease, max-height 0.5s ease;
    opacity: 1;
    max-height: 200px; /* Ajusta según el contenido */
}
.alerts .alert.fade-out {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.alert{
    height: auto;
    background-color: var(--main-bg-5);
    width: 90%;
    justify-self: center;
    padding-inline: 8px;
    display: flex;
    border-radius: 0px 0px 10px 10px;
    border-top: 1px solid var(--primary-sea-4);
}


.alert-msg{
    margin: 5px;
    color: white;
    text-align: justify;
    font-size: 12px;
    width: 100%;
}

.close-alert{
    color:red;
    margin: 5px;
}



@media (max-width: 768px) {
    .card-parameter{
        width: 130px;
    }
}