@import url(https://fonts.googleapis.com/css?family=Lato:100);

:root {
    --border-color: #707070;
    --bubble-out-color: radial-gradient(ellipse, rgba(223, 235, 156, 0.7) 0%, rgba(171, 202, 0, 0.8) 60%, rgba(139, 162, 4, 0.8) 100%);
    --bubble-in-color: radial-gradient(ellipse, rgba(235, 207, 166, 0.7) 0%, rgba(246, 173, 67, 0.8) 70%, rgba(254, 157, 2, .8) 100%);
    --target-color: #BEDF00;
    --bubble-alfa-out-color: radial-gradient(circle at top, rgba(223, 235, 156, 0.7) 0%, rgba(171, 202, 0, 0.8) 60%, rgba(139, 162, 4, 0.8) 100%);
    --bubble-alfa-in-color: radial-gradient(circle at top, rgba(235, 207, 166, 0.7) 0%, rgba(246, 173, 67, 0.8) 60%, rgba(254, 157, 2, .8) 100%);
}

body {
    margin: 0 auto;
}


/* Contenitore principale asse gamma */
.rectangle_gamma {
    max-width: 330px;
    width: 100%;
    height: 50px;
    margin: 10px;
    background: linear-gradient(#BEDF00, #CDDC73 30%, #8BA204);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-right: 4px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

}

/* Contenitore centrale asse gamma */
.rectangle_gamma::after {
    content: "";
    display: block;
    width: 80px;
    height: 60px;
    border-left: 4px solid var(--border-color);
    border-right: 4px solid var(--border-color);
    position: absolute;
}

/* Bolla asse gamma */
.bubble_gamma {
    width: 72px;
    height: 62px;
    position: absolute;
    top: -8px;
    /* solo per vedere la bolla sotto la linea */
    border-radius: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    background: var(--bubble-out-color);
}

.contenitore_flex {
    display: flex;
    /* justify-content: space-between; */
    align-items: flex-end;
}

/* Contenitore principale asse beta */
.rectangle_beta {
    max-height: 330px;
    width: 50px;
    height: 100vh;
    top: 5%;
    margin: 10px;
    background: linear-gradient(90deg, #BEDF00, #CDDC73 30%, #8BA204);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--border-color);
    border-bottom: 4px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;

}

/* Contenitore centrale asse beta*/
.rectangle_beta::after {
    content: "";
    display: block;
    width: 60px;
    height: 80px;
    border-top: 4px solid var(--border-color);
    border-bottom: 4px solid var(--border-color);
    position: absolute;
}

/* Bolla asse beta */
.bubble_beta {
    width: 62px;
    height: 72px;
    position: absolute;
    /* top: calc(34.0258% + 85.6px); */
    /* solo per vedere la bolla al centro */
    left: -8px;
    border-radius: 30px;
    box-shadow: inset 0 0 10px rgba(86, 61, 24, 0.5);
    background: var(--bubble-out-color)
}

.sensor_info {
    width: 150px;
    padding-left: 5px;
    height: 80px;
    margin: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}


/* Bersaglio esterno */
.target {
    min-width: 220px;
    height: 220px;
    top: 100px;
    left: 120px;
    background-color: var(--target-color);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    border: 4px solid var(--border-color);
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    /* position: fixed; */
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Bersaglio mediano */
.target::before {
    content: "";
    display: block;
    width: 67%;
    height: 67%;
    background-color: var(--target-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bersaglio centrale */
.target::after {
    content: "";
    display: block;
    width: 33%;
    height: 33%;
    background-color: var(--target-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Croce orizzontale */
.cross {
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    position: absolute;
    top: 50%;
}

/* Croce verticale */
.cross::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    position: absolute;
    transform: rotate(90deg);
}

/* Bolla asse alfa */
.bubble_alfa {
    width: 60px;
    height: 60px;
    position: absolute;
    /* solo per vedere la bolla sotto la linea */
    border-radius: 30px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    background: var(--bubble-alfa-out-color);
    z-index: 1;
}
.admin_btn{
    display: inline-block;
    list-style: none;
    padding: 10px;
    font-size: 1.5rem;
    text-decoration: none;
    text-align: center;
    color: #34495e;
    cursor: pointer;
    border-top: 1px solid #34495e;
    border-left: 1px solid #34495e;
    border-right: 1px solid #34495e;
    border-bottom: 4px solid #34495e;
    border-radius: 10%;
    margin: 15px;
    background: none;
}

.admin_btn:hover{

    border-bottom: 5px solid #91ab00;
    background: radial-gradient(circle at top, rgb(223 235 156 / 4%) 0%, rgb(171 202 0 / 15%) 60%, rgb(139 162 4 / 50%) 100%);
}