#all_controller {
    background: linear-gradient(to bottom, #a1e3f9, #fff);
    min-height: 80vh;
}

.announcement_bar {
    background-image: linear-gradient( 108.7deg, rgb(221, 22, 224) 11%, rgb(111, 22, 190) 88.2%);
}

.batsman_sec {
    background-image: radial-gradient( circle at 10% 20%, rgb(100, 43, 115) 0%, rgb(4, 0, 4) 90%);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.151);
    padding: 0.5rem;
}

.runs_with_score {
    background-image: linear-gradient( to top, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.151);
    padding: 0.5rem;
}

.bolling_details {
    background-image: linear-gradient( rgb(42, 245, 152) 0%, rgb(0, 158, 253) 100%);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.151);
    padding: 0.8rem;
}

.balls_w_run span {
    height: 35px;
    width: 35px;
    display: block;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.balls_w_run .b1 {
    background-color: #fff;
}

.balls_w_run .b2 {
    background-color: #fff;
}

.balls_w_run .b3 {
    background-color: #fff;
}

.balls_w_run .b4 {
    background-color: #3a7d44;
    color: #fff;
}

.balls_w_run .b6 {
    background-color: #3a7d44;
    color: #fff;
}

.balls_w_run .bn {
    background-color: #ece852;
}

.balls_w_run .wd {
    background-color: #fff;
}

.balls_w_run .bw {
    background-color: #c62300;
    color: #fff;
}

.selects label {
    font-weight: 600;
    font-size: 16px;
}

@media screen and (max-width: 480px) {
    .selects label {
        font-size: 14px;
    }
    .selects {
        flex-wrap: wrap;
    }
}


/* ! main controller section start */

.c_btn {
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    outline: none;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}

.c_btn:hover {
    color: #fff;
}

.c_btn.swap {
    background-color: #3a7d44;
}

.c_btn.retire {
    background-color: #5cb338;
}

.c_btn.change {
    background-color: #e0a75e;
}

.c_btn.default {
    background-color: #1a5319;
}

.c_btn.score {
    background-color: #03346e;
}

.c_btn.name {
    background-color: #1e3e62;
}

.c_btn.b1 {
    background-color: #7ed4ad;
}

.c_btn.b2 {
    background-color: #006a67;
}

.c_btn.bowler {
    background-color: #22177a;
}

.c_btn.batting {
    background-color: #16c47f;
}

.c_btn.bowling {
    background-color: #155e95;
}

.c_btn.pp {
    background-color: #441752;
}

.c_btn.end {
    background-color: #f93827;
}

.c_btn.undo {
    background-color: #8e1616;
}

.add_batsman {
    animation: batsman_scale 1s linear infinite;
    background-color: #123524;
}

@keyframes batsman_scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@media screen and (max-width: 768px) {
    .c_btn {
        font-size: 15px;
        padding: 5px 10px;
        margin-top: 5px;
    }
}

.start_innings_btns {
    flex-wrap: wrap;
}


/* ? run controlling section */

.send_value {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.send_value span {
    height: 50px;
    width: 50px;
    border: 2px solid #03346e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.send_value span:hover {
    color: #fff;
    background-color: #171717;
}


/* edit team short name */

.edit_team_names {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 50%;
    background: linear-gradient(0deg, #1714d3f8, #123d11);
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.459);
    display: none;
}

.edit_team_names.active {
    display: block;
}


/* ! main controller section end */


/* ! team edit section */

.short_name {
    display: flex;
    align-items: center;
    justify-content: center;
}

.short_name span {
    width: max-content;
}


/* ? animation section start */

.animate_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.animate_btns span {
    padding: .2rem 0.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.animate_btns span.a_free {
    background-color: yellowgreen;
}

.animate_btns span.a_hat {
    background-color: violet;
}

.animate_btns span.a_four {
    background-color: rgb(17, 167, 84);
}

.animate_btns span.a_six {
    background-color: rgb(77, 167, 17);
}

.animate_btns span.a_wicket {
    background-color: rgb(206, 75, 15);
}

.animate_btns span.t_boundaries {
    background-color: rgb(21, 102, 194);
}

.animate_btns span.a_stop {
    background-color: red;
}


/* ? animation section end */


/* ? DISPLAY CONTROLLER SECTION START */

.display_controller_btns {
    flex-wrap: wrap;
}

.custom_input {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.inputField,
.inputName {
    width: 30%;
}

.inputField input {
    width: 100%;
}

.inputField select {
    width: 100%;
}

.display_controller_btns button {
    font-size: 16px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 4px;
}

.display_controller_btns button:nth-child(1) {
    background-color: #118B50;
}

.display_controller_btns button:nth-child(2) {
    background-color: #FDB7EA;
}

.display_controller_btns button:nth-child(3) {
    background-color: #D91656;
}

.display_controller_btns button:nth-child(4) {
    background-color: #3D8D7A;
}

.display_controller_btns button:nth-child(5) {
    background-color: #DE3163;
}

.display_controller_btns button:nth-child(6) {
    background-color: #B82132;
}

.display_controller_btns button:nth-child(7) {
    background-color: #2973B2;
}

.display_controller_btns button:nth-child(8) {
    background-color: #EFB036;
}

.display_controller_btns button:nth-child(9) {
    background-color: #C30E59;
}

.display_controller_btns button:nth-child(10) {
    background-color: #C84C05;
}

.display_controller_btns button:nth-child(11) {
    background-color: #8D0B41;
}

.display_controller_btns button:nth-child(12) {
    background-color: #F72C5B;
}


/* ? DISPLAY CONTROLLER SECTION END */


/* ? custom input section */

.custom_input {
    display: flex;
    width: 60%;
    /* background-color: red; */
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.custom_input input {
    max-width: 200px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: .3rem .5rem;
    border-radius: 4px;
}

.custom_input select {
    max-width: 200px;
    border: none;
    outline: none;
    font-size: 16px;
    padding: .3rem .5rem;
    border-radius: 4px;
}

.custom_input select option {
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .animate_btns span {
        font-size: 14px;
    }
    .custom_input {
        width: 100%;
    }
    .inputName label {
        font-size: 14px;
    }
    .custom_input button {
        font-size: 14px;
        text-wrap: nowrap;
    }
    .custom_input input {
        max-width: 150px;
    }
}

.ex_con_input {
    font-size: 24px;
    width: 100px;
    outline: none;
    border: none;
    border-radius: 4px;
}