:root {
    --flex-btn-size: 95px;
    --flex-btn-size-hovered: 108px;
}

input[type=radio] + .flex-btn {
    /* background: radial-gradient(circle farthest-corner, rgba(161, 36, 42, 0.36) 1%, rgb(255, 216, 216, 0.12) 120%); */
    width: var(--flex-btn-size);
    height: var(--flex-btn-size);
    font-size: 14px;
    background-color:rgba(133, 133, 133, 0.36);
}

input[type=radio] + .flex-btn:hover {
    /* background: radial-gradient(circle farthest-corner, rgba(161, 36, 42, 0.88) 1%, rgb(255, 216, 216, 0.66) 80%); */
    background-color:rgba(161, 36, 42, 0.88);
    /* border: rgba(47, 47, 47, 0.66) 6px solid; */
    border-radius: 100%;
    margin-top: 18px;
    margin-bottom: 18px;
    width: 108px;
    height: var(--flex-btn-size-hovered);
}

.row_box {
    
}

.badge {
    background-color: rgba(196, 196, 196, 0.8);
}

input[type=radio]:checked + label .badge {
    background-color: rgba(161, 36, 42, 0.8);
}

.shadow {
    box-shadow:         0px 3px 10px rgba(36, 36, 36, .3);
    -webkit-box-shadow: 0px 3px 10px rgba(36, 36, 36, .3);
    -moz-box-shadow:    0px 3px 10px rgba(36, 36, 36, .3);
    -ms-box-shadow:     0px 3px 10px rgba(36, 36, 36, .3);
    -o-box-shadow:      0px 3px 10px rgba(36, 36, 36, .3);
}

.content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    margin: 0 6rem 3rem 6rem;
    min-height: 42vh;
    .results {
        flex: 3;
        padding: 2rem 6rem;
        margin: 0 3rem;
        .shadow();
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .info-box {
            display: none;
            overflow: visible; 
            min-height: 55vh;
            width: 100%;
            .box-flex {
                display: flex;
                min-height: 55vh;
                width: 100%;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                z-index: 1; 
                table {
                    width: 100%;
                    thead {
                        background-color: rgb(192, 75, 81);
                        color: rgba(236, 236, 236, 1);
                        position: sticky;
                        top: 0;
                    }
                }
            }
        }
        
        
        
    }
    
    #conditions {
        flex: 2;
        position: sticky;
        top: 1.2rem;
        padding: 2rem 3rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .shadow();
        .title-badge {
            font-size: 1rem;
            line-height: 2rem;
            cursor: default;
            font-weight: 500;
            margin-right: 0.5rem;
        }
    }
}