main .animation-board .animation .formula {
    display: flex;
    flex-direction: column;
    height: 450px;
    width: 800px;
    align-items: center;
    justify-content: space-around;
    border: 2px solid #F5F5F577;
}

main .animation-board .animation .action-btn-container .calculator-active-btn {
    background-color: #FF0000CC;
    border: 2px solid rgba(255, 0, 0, 0.9);
}

main .animation-board .control .control-section div {
    width: 80%;
}

main .animation-board .control .control-section p {
    display: flex;
    height: 200px;
    overflow: auto;
}

main .animation-board .control button {
    display: flex;
    height: 45px;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    font-size: 1.1rem;
    color: #F5F5F5;
    background-color: #252525;
    border: 2px solid #F5F5F577;
    cursor: pointer;
}

main .animation-board .control .active-btn {
    background-color: #FF0000CC;
    color: #F5F5F5;
}

main .animation-board .control button:hover {
    background-color: #FF0000CC;
    color: #F5F5F5;
    transition: ease-in-out 0.3s;
}

main .animation-board .control button:active {
    transform: scale(0.98);
    transition: ease-in-out 0.1s;
}

main .animation-board .hidden {
    display: none !important;
    height: 0;
}






/* Gain calculator */

.formula .gain-diagram {
    display: flex;
    height: 35%;
    width: 100%;
    justify-content: center;
    margin-top: 5%;
}

.formula .gain-diagram div {
    display: flex;
    width: 33%;
    height: 100%;
    align-items: center;
}

.formula .gain-diagram .circuit-block {
    border: 2px solid #F5F5F5;
    justify-content: center;
    flex-direction: column;
}

.formula .gain-diagram .Vin {
    justify-content: end;
}

.formula .gain-diagram .Vout {
    justify-content: start;
}

.formula .gain-diagram .Vin h3, .Vout h3 {
    display: flex;
    align-items: center;
}

.formula .gain-diagram input {
    display: flex;
    width: 80px;
    height: 35px;
    background-color: #252525;
    border: none;
    color: #F5F5F5;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.formula .results {
    display: flex;
    height: 40%;
    width: 100%;
}

.formula .results .res-box {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.formula .results .res-box1 {
    width: 42%;
}

.formula .results .res-box2 {
    width: 58%;
}

.formula .results .res-box .formula-line1, .formula-line2 {
    display: flex;
    width: 60px;
    justify-content: center;
}

.formula .results .res-box .formula-line1 h3, .formula-line2 h3 {
    margin: 10px;
}

.formula .results .res-box .formula-line1 {
    border-bottom: 2px solid #F5F5F5;
}

.formula .results .res-box .formula-line2 {
    border-top: 2px solid #F5F5F5;
}



/* reactance calculator */

#ReactanceCalc-box .formula .gain-diagram .circuit-block {
    border: solid 10px #F5F5F5;
    border-top: none;
    border-bottom: none;
    width: 95%;
}

#ReactanceCalc-box .formula .gain-diagram .inductor {
    border: dashed 3px #F5F5F5;
    border-radius: 20px;
    position: relative;
    width: 95%;
}

#ReactanceCalc-box .formula .gain-diagram .circuit-block select {
    display: flex;
    height: 35px;
    width: 65px;
    background-color: #F5F5F5;
    font-size: 1.1rem;
    font-weight: 600;
}

#ReactanceCalc-box .formula .gain-diagram .circuit-block .reactance-input {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

#ReactanceCalc-box .formula .gain-diagram .circuit-block .reactance-input h3 {
    display: flex;
    align-items: center;
}

#ReactanceCalc-box .formula .results .res-box1 {
    width: 100%;
}




/* Resonance circuit calculator */

#ResonanceCalc-box .formula .gain-diagram .circuit-block {
    border: solid 3px #F5F5F5;
    width: 95%;
}

#ResonanceCalc-box .formula .gain-diagram .inductor {
    border: dashed 3px #F5F5F5;
    border-radius: 20px;
    position: relative;
    width: 95%;
}

#ResonanceCalc-box .formula .gain-diagram .circuit-block select {
    display: flex;
    height: 35px;
    width: 65px;
    background-color: #F5F5F5;
    font-size: 1.1rem;
    font-weight: 600;
}

#ResonanceCalc-box .formula .gain-diagram .circuit-block .reactance-input {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

#ResonanceCalc-box .formula .gain-diagram .circuit-block .reactance-input h3 {
    display: flex;
    align-items: center;
}

#ResonanceCalc-box .formula .results .res-box1 {
    width: 100%;
}




/* Quality factor calculator */

#ResonanceCalc-box .formula .gain-diagram .quality-fact {
    width: 76%;
}

#ResonanceCalc-box .formula .gain-diagram .V {
    width: 12%;
}

#ResonanceCalc-box .formula .results .res-box1 .res-box-content {
    display: flex;
    align-items: center;
}