.main-content {
    padding-left: 23rem;
    padding-right: 2rem;
    /* padding-top: 180px; */
    width: 100%;
    position: relative;
}

.border-bottom-admin-side {
    border-bottom: 1px solid #bebebe;
    width: 100%;
}

.sidebar-menu > .nav-item > .nav-link,
.dropdown-menu > .nav-link {
    color: #40454f;
}

.background-list.active img {
    filter: invert(69%) sepia(98%) saturate(6035%) hue-rotate(205deg)
        brightness(99%) contrast(105%);
}

.background-list:hover {
    border-radius: 5px;
    background-color: #d4d6d8 !important;
    /* color: #1e78ff !important; */
}

.background-list.active {
    border-radius: 5px;
    background-color: #e9f2ff !important;
    color: #1e78ff !important;
}

.user-profile-sidebar {
    list-style-type: none;
    /* position: absolute; */
    /* top: 80vh; */
}

.background-body {
    background: linear-gradient(90deg, #e9f2ff 0%, #d4e4fb 100%);
}

.main-sidebar .sidebar-menu li a.custome-row-right:after {
    right: 55px;
}

.color-auth {
    color: #1e78ff;
}

.magnifying-icon {
    width: 20px;
    height: 20px;
    position: relative;
    top: 12px;
    right: 35px;
    z-index: 100;
}

.breadcumb-new-design {
    font-size: 1.3rem;
    font-weight: 700;
    color: #40454f;
}

.sport-font {
    font-size: 1rem;
    font-weight: 400;
    color: #40454f;
}

.branch-sport-font {
    font-size: 1rem;
    font-weight: 400;
    color: #1e78ff;
}

.event-right-font {
    font-size: 1rem;
    font-weight: 700;
    color: #40454f;
}

.pulse-result-green {
    background: #2cbf6e;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    color: white;
    margin: 0 0 0 10px;

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulse_green 2s infinite;
}

@keyframes pulse_green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 #acefb3;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(215, 95, 10, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(5, 243, 53, 0);
    }
}

.pulse-result-red {
    background: #a22c2c;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    color: white;
    margin: 0 0 0 10px;

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    transform: scale(1);
    animation: pulse_red 2s infinite;
}

@keyframes pulse_red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 #fce4e4;
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(215, 95, 10, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(5, 243, 53, 0);
    }
}

.img-contingent-admin {
    width: 3.25rem;
    height: 3.25rem;
}

.event-name-style {
    font-size: 18px;
    font-weight: 500;
    color: var(--neutral-gray-prim, #40454f);
}

.contingent-name-style {
    font-size: 13px;
    color: var(--neutral-gray-prim, #40454f);
}

.button-blue {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #1e78ff;
    border-color: #1e78ff;
    color: #ffffff !important;
    font-size: 14px !important;
    border-radius: .25rem;
}

.button-blue:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #ffffff;
    border-color: #1e78ff;
    color: #1e78ff !important;
    font-size: 14px !important;
}

.button-red {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #da2323;
    border-color: #da2323;
    color: #ffffff !important;
    font-size: 14px !important;
    border-radius: .25rem;
}

.button-red:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #da2323;
    color: #da2323 !important;
    font-size: 14px !important;
}

.button-green {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #2cbf6e;
    border-color: #2cbf6e;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-green:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #2cbf6e;
    color: #2cbf6e !important;
    font-size: 14px !important;
}

.button-black {
    box-shadow: 0 2px 6px #252634;
    background-color: #000000;
    border-color: #000000;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-black:hover {
    box-shadow: 0 2px 6px #252634;
    background-color: #ffffff;
    border-color: #000000;
    color: #000000 !important;
    font-size: 14px !important;
}

.red-icon:hover img {
    filter: invert(31%) sepia(31%) saturate(3661%) hue-rotate(334deg)
        brightness(85%) contrast(119%);
}

.blue-icon:hover img {
    filter: invert(38%) sepia(42%) saturate(5135%) hue-rotate(206deg)
        brightness(101%) contrast(102%);
}

.green-icon:hover img {
    filter: invert(59%) sepia(75%) saturate(444%) hue-rotate(94deg)
        brightness(91%) contrast(84%);
}

.white-color-img {
    filter: invert(100%) sepia(3%) saturate(11%) hue-rotate(348deg)
        brightness(102%) contrast(105%);
}

.button-group-white {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #2cbf6e;
    color: #2cbf6e !important;
    font-size: 14px !important;
}

.button-group-white:hover,
.button-group-green {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #2cbf6e;
    border-color: #2cbf6e;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-group-red {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #da2323;
    border-color: #da2323;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-blue-deep {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #4842ee;
    border-color: #4842ee;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-blue-deep:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #4842ee;
    color: #4842ee !important;
    font-size: 14px !important;
}

.blue-deep-icon:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(93%) saturate(2893%)
        hue-rotate(240deg) brightness(94%) contrast(98%);
}

.button-cyan {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #33d6ec;
    border-color: #33d6ec;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-cyan:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #33d6ec;
    color: #33d6ec !important;
    font-size: 14px !important;
}

.cyan-icon:hover img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(14%) saturate(2474%)
        hue-rotate(146deg) brightness(97%) contrast(91%);
}

.button-pink {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #da31dd;
    border-color: #da31dd;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-pink:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #da31dd;
    color: #da31dd !important;
    font-size: 14px !important;
}

.pink-icon:hover img {
    filter: brightness(0) saturate(100%) invert(32%) sepia(86%) saturate(2157%)
        hue-rotate(277deg) brightness(90%) contrast(105%);
}

.button-orange {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #ff9900;
    border-color: #ff9900;
    color: #ffffff !important;
    font-size: 14px !important;
}

.button-orange:hover {
    box-shadow: 0 2px 6px #acb5f6;
    background-color: #fff;
    border-color: #ff9900;
    color: #ff9900 !important;
    font-size: 14px !important;
}

.orange-icon:hover img {
    filter: brightness(0) saturate(100%) invert(62%) sepia(64%) saturate(2784%)
        hue-rotate(1deg) brightness(103%) contrast(109%);
}

/* toogle button */
.toggle {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: #cfcfcf;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}
.toggle-switch:before,
.toggle-switch:after {
    content: "";
}
.toggle-switch:before {
    display: block;
    background: #797979;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
    background: #cefcd8;
}
.toggle-checkbox:checked + .toggle-switch:before {
    left: 30px;
    background: #2cbf6e;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.toggle-label {
    margin-left: 5px;
    position: relative;
    top: 2px;
}

/* end toggle button */

.img-modal-preview {
    border-radius: 8px;
}

.logo-event-breadcrumb {
    width: auto;
    height: 30px;
    object-fit: contain;
}
a.event-link {
    text-decoration: none;
}

.logo-event-breadcrumb.selected {
    border: #a22c2c solid 2px;
}

.font-new-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #40454f;
}

.image_team {
    object-fit: contain;
    max-width: 200px;
    height: 150px;
}

.goal-font-new {
    font-size: 4.5rem;
    font-weight: 600;
    color: #40454f;
}

.cust-button {
    padding: 0.55rem 1.5rem;
    font-size: 12px;
}

.font-time {
    font-size: 1.4rem;
    color: #da2323;
}

.bordering-time-left {
    border: 1px solid #da2323;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.bordering-time-right {
    border: 1px solid #da2323;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.additional-setting {
    display: none;
}

.play-new-font {
    font-size: 3rem;
    font-weight: 600;
    color: #40454f;
}

.play-new-font-large {
    font-size: 7rem;
    font-weight: 600;
    color: #40454f;
}

.back-icon,
.back-icon:hover {
    font-size: 2rem;
    text-decoration: none;
}

.font-plus-minus-button {
    font-size: 1.5rem !important;
}

.play-new-font {
    font-size: 3rem;
    font-weight: 600;
    color: #40454f;
}

.play_game_font {
    font-size: 2rem;
    font-weight: 500;
    color: #40454f;
}

@media only screen and (min-width: 1200px) {
    .lg-gone {
        display: none !important;
    }
}

@media only screen and (max-width: 1024px) {
    .sm-gone-2 {
        display: none !important;
    }
}
@media only screen and (max-width: 1200px) {
    .main-content {
        padding-left: 0rem;
        padding-right: 0rem;
        /* padding-top: 180px; */
        width: 100%;
        position: relative;
    }

    .sm-gone {
        display: none !important;
    }

    .font-new-title {
        font-size: 1rem;
    }

    .goal-font-new.tennis-score {
        font-size: 2rem;
    }

    .font-plus-minus-button {
        font-size: 1rem !important;
        padding: 0.66rem 1rem !important;
    }

    .goal-font-new {
        font-size: 2rem;
    }
}