body{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: rgb(245, 245, 245);
    display: flexbox;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(imagini/fundal_apa.jpg);
    background-position: center;
}

h2 {
    margin-top:0; 
    color:rgb(226, 232, 240);
}

/* numere de pe biureta */
#nr-biureta0{
    top: 0;
}

#nr-biureta1{
    top: 3.0rem;
}

#nr-biureta2{
    top: 6.0rem;
}

#nr-biureta3{
    top: 9.0rem;
}

#nr-biureta4{
    top: 12.0rem;
}

#nr-biureta5{
    top: 15.0rem;
}

#nr-biureta6{
    top: 18.0rem;
}

#nr-biureta7{
    top: 21.0rem;
}

#nr-biureta8{
    top: 24.0rem;
}

#nr-biureta9{
    top: 27.0rem;
}

#nr-biureta10{
    top: 30.0rem;
}

/* gradatii de pe pahar */
#gradatie-pahar1, #nr-pahar1{
    bottom: 1.5625rem;
}

#gradatie-pahar2{
    bottom: 1.9375rem;
}

#gradatie-pahar3{
    bottom: 2.3125rem;
}

#gradatie-pahar4{
    bottom: 2.6875rem;
}

#gradatie-pahar5{
    bottom: 3.0625rem;
}

#gradatie-pahar6, #nr-pahar2{
    bottom: 3.4375rem;
}

#gradatie-pahar7{
    bottom: 3.8125rem;
}

#gradatie-pahar8{
    bottom: 4.1875rem;
}

#gradatie-pahar9{
    bottom: 4.5625rem;
}

#gradatie-pahar10{
    bottom: 4.9375rem;
}

#gradatie-pahar11, #nr-pahar3{
    bottom: 5.3125rem;
}

#elementTextVolum{
    color: rgb(96, 165, 250); 
    font-weight: bold;
}

.centru{
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    display: flex;
    height: fit-content;
}

nav{
    background-image: url("imagini/fundal_apa.jpg");
    background-position: center;
    padding: 2%;
    width: 80%;
    padding: 1.875rem 3.75rem;
    margin: 0.5rem 1.5rem;
    border-radius: 0.9375rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.8);
    text-align: center;
    display: flex;
    flex-direction:row;
    align-items: center;
}

.menu_option{
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: 100;
    font-size: x-large;
    text-align: center;
    color: rgb(102, 204, 184);
    text-shadow: -1px -1px 0 rgb(13, 78, 65), 1px -1px 0 rgb(13, 78, 65), -1px 1px 0 rgb(13, 78, 65), 1px 1px 0 rgb(13, 78, 65);
}

.menu_option:hover{
    color: rgb(23, 147, 137);
    text-shadow: -1px -1px 0 rgb(17, 69, 65), 1px -1px 0 rgb(17, 69, 65), -1px 1px 0 rgb(17, 69, 65), 1px 1px 0 rgb(17, 69, 65);
}

header{
    margin-top: 1%;
    margin-bottom: 2%;
}

.main-casuta{
    display: block;
    margin-left: 4%;
    margin-right: 4%;
    padding-bottom: 6%;
}

#experiment-laborator {
    min-width: max-content;
    max-width: 60%;
    background-color: rgb(43, 43, 54);
    padding: 1.875rem 3.75rem;
    margin: 1.875rem 3.75rem;
    margin-top: 0;
    border-radius: 0.9375rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lucrare-laborator-pdf{
    height: 40rem;
    width: 60rem;
    border: none;
    margin: 0.5rem;
    align-self: self-start;
}

.ansamblu-biureta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.3125rem;
    z-index: 10;
}

.cilindru-biureta {
    width: 1.5rem;
    height: 34rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 0.125rem solid rgba(200, 200, 200, 0.4);
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;
    position: relative;
    overflow: hidden;
}

.cilindru-biureta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(255, 255, 255, 0.7) 20%,
    transparent 40%,
        rgba(0, 0, 0, 0.2) 85%,
        rgba(255, 255, 255, 0.3) 100%);
    z-index: 4;
    pointer-events: none;
}

.gradatii-biureta {
    position: absolute;
    top: 1.25rem;
    left: 0;
    width: 100%;
    height: 30.2rem;
    background-image:
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.9) 2px, transparent 2px, transparent 3.0rem),
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.7) 1px, transparent 1px, transparent 1.5rem),
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 0.3rem);
    background-size: 0.6rem 100%, 0.4rem 100%, 0.2rem 100%;
    background-position: left top;
    background-repeat: no-repeat;
    z-index: 5;
}

.numere-biureta {
    position: absolute;
    top: 1.25rem;
    left: 0.75rem;
    width: 100%;
    height: 30.0rem;
    z-index: 6;
    color: rgb(17, 17, 17);
    font-size: 0.75rem;
    font-weight: 800;
}

.numere-biureta span {
    position: absolute;
    transform: translateY(-50%);
    left: 0;
}

.lichid-biureta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32.75rem;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.3) 20%, transparent 40%, rgba(0, 0, 0, 0.1) 90%);
    transition: height 0.4s ease-out;
    z-index: 1;
}

.ingustare-cilindru-biureta {
    width: 1.5rem;
    height: 1.5625rem;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.6) 20%, transparent 40%, rgba(0, 0, 0, 0.2) 85%, rgba(255, 255, 255, 0.2) 100%);
    clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%);
    border-left: 0.125rem solid rgba(200, 200, 200, 0.4);
    border-right: 0.125rem solid rgba(200, 200, 200, 0.4);
}

.ansamblu-robinet {
    width: 2.75rem;
    height: 1.25rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -0.0625rem;
    z-index: 3;
}

.cilindru-robinet {
    width: 2.25rem;
    height: 0.875rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(200, 200, 200, 0.6), rgba(255, 255, 255, 0.4));
    border: 0.0625rem solid rgba(150, 150, 150, 0.8);
    border-radius: 0.1875rem;
    position: absolute;
}

.maner-robinet {
    width: 0.5rem;
    height: 1.625rem;
    background: linear-gradient(to right, rgb(220, 38, 38), rgb(153, 27, 27));
    border-radius: 0.125rem;
    position: absolute;
    right: 0;
    box-shadow: -0.0625rem 0.125rem 0.1875rem rgba(0, 0, 0, 0.4);
}

.varf-biureta {
    width: 0.5rem;
    height: 3.75rem;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 60%, rgba(0, 0, 0, 0.2) 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    margin-top: -0.0625rem;
    position: relative;
    z-index: 3;
}

.picatura {
    width: 0.5625rem;
    height: 0.5625rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    position: absolute;
    bottom: -0.3125rem;
    opacity: 0;
    z-index: 2;
    box-shadow: inset -0.0625rem -0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

/* .picatura.forma-jet {
    width: 0.15rem;
    height: 20rem; 
    border-radius: 0.05rem;
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.85);
    bottom: auto;
    top: 100%;
} */

.picatura.animatie-cadere {
    animation: cadere 0.4s cubic-bezier(0.5, 0, 1, 1) forwards;
}

/* .picatura.forma-jet.animatie-cadere {
    animation: curgere-jet 0.4s ease-in forwards;
} */

@keyframes cadere {
    0% {
    opacity: 1;
    bottom: -0.3125rem;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        bottom: -18rem;
    }
}

/* @keyframes curgere-jet {
    0% { clip-path: inset(0 0 100% 0); opacity: 1; }
    30% { clip-path: inset(0 0 0 0); opacity: 1; }
    70% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(100% 0 0 0); opacity: 0; }
} */

.ansamblu-stativ-suport-biureta{
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
}

.stativ-biureta{
    z-index: 0;
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    width: 1.2rem;
    height: 61rem;/* 34 - cilindru biureta, 6.48 - gat pahar, 20 - triunghi pahar */
    border-radius: 0.4rem;
    border-top: 0.15rem solid rgb(119, 118, 129);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
}

.stativ-biureta, .suport-biureta{ /*aspect metalic*/
    background: linear-gradient(to right, rgb(72, 71, 74) 0%, rgba(141, 140, 148) 2%, rgb(119, 118, 129) 2%, rgb(119, 118, 129) 18%, rgba(31, 34, 47) 34%, rgba(31, 34, 47) 60%, rgb(119, 118, 129) 70%, rgb(119, 118, 129) 96%, rgb(72, 71, 74) 98%);
}

.suport-biureta{
    z-index: 17;
    top: 30%;
    margin-top: 0rem;
    width: 4rem;
    height: 3rem;
    border-top: none;
    position: absolute;
    border-bottom: none;
    /*curbarea marginilor de sus*/
    border-top-left-radius: 80% 1rem; 
    border-top-right-radius: 80% 1rem;
    border-bottom-left-radius: 80% 1rem; 
    border-bottom-right-radius: 80% 1rem;
}

.ansamblu-pahar{
    position: relative; /*relative=>muta fata de pozitia initiala, centreaza paharul*/
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: -0.2rem;
    margin-left: 0.3125rem;
    margin-right: 0.3125rem;
    height: 20.30rem;
    width: 20rem;
}

.bucata-pahar{
    background-color: rgba(255, 255, 255, 0.05);
    position: absolute;
}

.cerc-gat-pahar{
    z-index: 15;
    top: 0;
    width: 4rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.125rem solid rgba(200, 200, 200, 0.4);
    background-color: transparent;
}

.gat-pahar {
    z-index: 10;
    top: 0;
    margin-top: 0rem;
    width: 4rem;
    height: 6.48rem;
    border-top: none;
    border-bottom: none;
    /*curbarea marginilor de sus*/
    border-top-left-radius: 50% 1rem; 
    border-top-right-radius: 50% 1rem;
}

.triunghi-pahar{
    width: 20rem;
    opacity: 1; /*ca border*/
} 

.triunghi-pahar, .triunghi-pahar::before{
    position: absolute;
    z-index: 5;
    top: 3rem;
    -webkit-mask:
    conic-gradient(from -30deg at 50% calc(200% - 3*var(--r)/2),rgb(0, 0, 0) 60deg,rgba(0, 0, 0, 0) 0)
     0 100%/100% calc(100% - 3*var(--r)/2) no-repeat,
    radial-gradient(var(--r) at 50% calc(2*var(--r)),rgb(0, 0, 0) 98%,rgba(0, 0, 0, 0) 101%),
    radial-gradient(var(--r) at left  var(--_g)),
    radial-gradient(var(--r) at right var(--_g));
    mask:
    conic-gradient(from -30deg at 50% calc(200% - 3*var(--r)/2),rgb(0, 0, 0) 60deg,rgba(0, 0, 0, 0) 0)
     0 100%/100% calc(100% - 3*var(--r)/2) no-repeat,
    radial-gradient(var(--r) at 50% calc(2*var(--r)),rgb(0, 0, 0) 98%,rgba(0, 0, 0, 0) 101%),
    radial-gradient(var(--r) at left  var(--_g)),
    radial-gradient(var(--r) at right var(--_g));
    --r:20px;
    aspect-ratio: 1/cos(30deg);
    --_g:calc(tan(60deg)*var(--r)) bottom var(--r),rgb(0, 0, 0) 98%,rgba(0, 0, 0, 0) 101%;
    clip-path: polygon(40% 3.5rem, 60% 3.5rem, 100% 100%, 0 100%);
}

.triunghi-pahar::before{
    display: none; /* scapam de dublarea opacității (gâtul și corpul au acum 5% amândouă) */
}

.gradatii-pahar {
    position: absolute;
    bottom: 0;
    right: 3.4375rem;
    width: 3.125rem;
    height: 100%;
    z-index: 5;
}

.linie-mare-gradatie-pahar {
    position: absolute;
    right: 0;
    width: 1.25rem;
    height: 0.125rem;
    background: rgb(17, 17, 17);
}

.linie-mica-gradatie-pahar {
    position: absolute;
    right: 0;
    width: 0.625rem;
    height: 0.0625rem;
    background: rgb(17, 17, 17);
}

.numar-pahar {
    position: absolute;
    right: 1.75rem;
    color: rgb(17, 17, 17);
    font-size: 1.15rem;
    font-weight: bold;
    transform: translateY(50%);
    text-align: right;
    text-shadow:
        -0.5px -0.5px 0 rgb(214, 214, 211),
         0.5px -0.5px 0 rgb(214, 214, 211),
        -0.5px  0.5px 0 rgb(214, 214, 211),
         0.5px  0.5px 0 rgb(214, 214, 211),
         0   -0.5px 0 rgb(214, 214, 211),
         0    0.5px 0 rgb(214, 214, 211),
        -0.5px  0   0 rgb(214, 214, 211),
         0.5px  0   0 rgb(214, 214, 211);
}

.lichid-pahar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5625rem;
    background-color: rgba(154, 193, 211, 0.375);
    /* rgb(242, 211, 46) */
    transition: background-color 1.5s ease, height 0.4s ease-out;
    z-index: 1;
    opacity: 0.9;
}

.agitator {
    width: 6rem;
    height: 0.7rem;
    background-color: #f8f9fa;
    border-radius: 0.3125rem;
    position: absolute;
    bottom: 0.625rem;
    /* left: 50%;
    margin-left: -1.25rem; */
    box-shadow: 0.125rem 0.125rem 0.3125rem rgba(0,0,0,0.5);
    z-index: 6;
    animation: rotire 0.3s linear infinite;
    display: flex;
}

@keyframes rotire {
    from { 
        transform: rotateY(0deg); 
    }
    to { 
        transform: rotateY(360deg); 
    }
}

.plita-magnetica {
    position: relative;
    z-index: 2;
    width: 14rem;
    height: 1.5rem;
    background: linear-gradient(to bottom, rgb(119, 118, 129), rgba(31, 34, 47));
    border-radius: 0.4rem;
    border-top: 0.15rem solid rgb(119, 118, 129);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5rem;
}

.panou-butoane {
    margin-top: 1.875rem;
    display: flex;
    gap: 0.9375rem;
    position: relative;
    z-index: 100;
}

button, .butonFormular {
    color: rgb(255, 255, 255);
    border: none;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2);
}

#butonPornestePicurare, #butonOprestePicurare, .butonSchimbaVolumApa{
    background-color: rgb(59, 130, 246);
}

.butonFormular{
    background-color: rgb(118, 198, 108);
    color: rgb(15, 46, 78);
    margin: 0.4rem;
}

#butonAgitator, #butonSchimbaApa, #butonAdaugaApa, #butonAdaugaIndicator{
    background-color: rgb(0, 134, 146);
}

#butonPornestePicurare:hover, #butonOprestePicurare:hover, .butonSchimbaVolumApa:hover{
    background-color: rgb(37, 99, 235);
    transform: translateY(-0.125rem);
}

.butonFormular:hover, #butonAgitator:hover, #butonSchimbaApa:hover, #butonAdaugaApa:hover, #butonAdaugaIndicator:hover{
    background-color: rgb(6, 111, 121);
    transform: translateY(-0.125rem);
}

#butonPornestePicurare:disabled, #butonOprestePicurare:disabled, .butonFormular:disabled, #butonAgitator:disabled, #butonSchimbaApa:disabled, #butonAdaugaApa:disabled, #butonAdaugaIndicator:disabled, .butonSchimbaVolumApa:disabled {
    background-color: rgb(100, 116, 139);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#butonResetare {
    background-color: rgb(239, 68, 68);
    display: none;
}

#butonResetare:hover {
    background-color: rgb(220, 38, 38);
    transform: translateY(-0.125rem);
}

.panou-informatii {
    margin-top: 1.25rem;
    font-size: 1rem;
    text-align: left;
    display: inline-block;
    background: rgb(51, 51, 64);
    padding: 0.9375rem 1.5625rem;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0.625rem rgba(0, 0, 0, 0.3);
    max-width: 28rem; 
    box-sizing: border-box;
}

.panou-informatii p {
    margin: 0.5rem 0;
}

.textCuloareSolutie {
    font-weight: bold;
    color: rgb(96, 165, 250);
    transition: color 1s ease;
}

.textDuritate {
    font-weight: bold;
    color: rgb(74, 222, 128);
    display: none;
    margin-top: 0.625rem;
    border-top: 0.0625rem solid rgb(85, 85, 85);
    padding-top: 0.625rem;
}

.text-informatii {
    font-size: 1.2rem;
    margin-left: 2rem;
}

li{
    text-align: left;
}

b{
    color: rgb(136, 218, 125);
}

.casuta-observatie{
    border: 0.125rem solid rgb(249, 248, 113);
    padding: 0.5rem;
    background-color: rgba(32, 31, 31, 0.5);
    width: fit-content;
}

.observatie{
    color: rgb(249, 248, 113);
}

table{
    margin: 2rem;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 0.2rem solid rgb(0, 134, 146);
    background-color: rgba(32, 31, 31, 0.5);
}

th{
    /* line-height: 1.5; */
    letter-spacing: 0.1rem;
    height: 1rem;
    width: 9rem;
}

th, td{
    padding: 1rem;
    text-align: left;
    border: 0.15rem solid rgb(0, 88, 122);
}

td{
    height: 1rem;
    width: 3rem;
    font-size: 1.2rem;
}

caption{
    padding: 1rem;
    text-align: center;
    caption-side: top;
    font-size: 1.2rem;
}

.input-tabel, #volumEchivalenta{
    width: 3rem;
    background-color: transparent;
    border-color: rgba(32, 31, 31, 0.5);
    color: rgb(255, 255, 255);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.2rem;
}

.calcule{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    font-weight: 200;
}

.formule-chimice{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 0.6rem;
    font-size: 1.6rem;
    color: rgb(249, 248, 113);
}