.dark-mode{
    background-color: black;
    color: white;
}
.dark-mode ::placeholder {
    color: #b2b2b2;
}
.dark-mode #sidebar-nav, .dark-mode #sidebar-nav .dropdown-menu{
    background: #212121;
}
.dark-mode .video-item-wrapper .video-preview{
    background:#212121;
}
.dark-mode .video-item-wrapper .video-btn-list{
    background:#212121;
}
.dark-mode .bg-white {
    background: black !important;
}

.dark-mode a{
    color: white;
}
.dark-mode li .title{
    color: white;
}
.dark-mode select, .dark-mode input{
    background: #3d3d3d;
    color: #c2c2c2;
}
.dark-mode #seek {
    background: inherit;
    color: #c2c2c2;
}

.dark-mode .form-control:focus {
    background: black;
    color: #c2c2c2;
}

.dark-mode select{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237fc23d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

.dark-mode span{
    color: #989898;
}

.dark-mode .team-name span{
    color: #d2d2d2;
}

.dark-mode .table{
    color: #c4c4c4;
}
.dark-mode .rank-box{
    color: black;
}

.switch {
    position: relative;
}
.switch__input {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 1;
}
.switch__label {
    display: block;
    position: relative;
    width: 44px;
    height: 20px;
    background-color: #333;
    border-radius: 25px;
    transition: 0.4s;
}
.switch__label::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 2px #333 solid;
    background-color: #fff;
    color: #333;
    transition: 0.4s;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 14px;
    font-weight: 900;
    box-sizing: border-box;
}
.switch__input:checked + .switch__label {
    background-color: #fff;
}
.switch__input:checked + .switch__label::before {
    left: calc(100% - 20px);
    border-color: #fff;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    content: "";
}

.dark-mode .field{
    background: black  !important;
    border: solid 5px #212121;
}

.dark-mode .field-pointer::before, .dark-mode  .field-pointer::after {
    background-color: #41a8cd;
    width: 5px;
}
.dark-mode .field-wrapper{
    padding: 0 !important;
    margin: 0 !important;
}

.dark-mode #team_performance_table_header th:first-child, .dark-mode #team_factor_performance td:first-child {
    background: black;
}

.dark-mode .freezed{
    background: black;
}

.dark-mode .relate-content a{
    color: white;
}

.dark-mode .new-box-title span{
    color: black;
}
.dark-mode .modal-content{
    background-color: #2f2e2e;
}

.dark-mode .selected-filter{
    background-color: #2f2e2e;
}

.dark-mode .player-wrapper, .dark-mode .team-wrapper, .dark-mode .match-result, .header-data-title{
    color: #989898;
}

.dark-mode .team-factor-value, .dark-mode .player-rank {
    color: white;
}
.dark-mode .custom-select, .dark-mode .input{
    background: #212121;
}
.dark-mode .sticky-col{
    background-color: black;
}
.dark-mode .video-btn-list{
    background: black;
}
.dark-mode .stats-body {
    border: solid 5px #212121;
}

.dark-mode .field__line--outline,
.dark-mode .field__line.field__line--penalty,
.dark-mode .field__line.field__line--goal,
.dark-mode .field__line.field__line .field__line--goal .field__line--goal--far,
.dark-mode .field__line.field__line--penalty,
.dark-mode .field__line.field__line--penalty-arc,
.dark-mode .field__line.field__line--penalty-arc.field__line--penalty-arc--far,
.dark-mode .field__line.field__line--mid,
.dark-mode .field__line.field__line--circle,
.dark-mode .field__line--penalty-arc:after,
.dark-mode .field__line.field__line--penalty-arc.field__line--penalty-arc--far::after
{
    border-color: #656565;
}

.dark-mode .field__line--mid{
    background-color: #656565;
}

.dark-mode .field__texture.field__texture--gradient-b{
    opacity: 1;
    background-color: black;
}
.dark-mode .text-black {
    color: white !important;
}

.dark-mode .color-black {
    color: black !important;
}

.dark-mode .selected-report, .dark-mode .selected-filter {
    background: #9b9b9b;
    color: white;
}

@media print{
    .dark-mode{
        background-color: #ffffff;
        color: #000000;
    }

    .dark-mode .bg-white {
        background: #ffffff !important;
    }

    .dark-mode a{
        color: #000000;
    }
    .dark-mode select{
        background: #c2c2c2;
        color: #626262;
    }

    .dark-mode .form-control:focus {
        background: #ffffff;
        color: #c2c2c2;
    }
    .dark-mode span{
        color: #989898;
    }
    .dark-mode .team-name span{
        color: #d2d2d2;
    }
    .dark-mode .table{
        color: #c4c4c4;
    }
    .dark-mode .rank-box{
        color: #ffffff;
    }
    .switch__label::before {

        border: 2px #333 solid;
        background-color: #000000;
        color: #333;
    }
    .switch__input:checked + .switch__label {
        background-color: #fff;
    }
    .switch__input:checked + .switch__label::before {
        left: calc(100% - 20px);
        border-color: #fff;
        background-color: #333;
        color: #fff;
        font-size: 12px;
        content: "";
    }

    .dark-mode .field{
        background: #ffffff !important;
        border: solid 5px #939393;
    }

    .dark-mode .field-pointer::before, .dark-mode  .field-pointer::after {
        background-color: #41a8cd;
        width: 5px;
    }
    .dark-mode .field-wrapper{
        padding: 0 !important;
        margin: 0 !important;
    }

    .dark-mode #team_performance_table_header th:first-child, .dark-mode #team_factor_performance td:first-child {
        background: #ffffff;
    }

    .dark-mode .freezed{
        background: #ffffff;
    }

    .dark-mode .relate-content a{
        color: #000000;
    }

    .dark-mode .new-box-title span{
        color: #ffffff;
    }
    .dark-mode .modal-content{
        background-color: #2f2e2e;
    }

    .dark-mode .selected-filter{
        background-color: #2f2e2e;
    }

    .dark-mode .player-wrapper, .dark-mode .team-wrapper, .dark-mode .match-result, .header-data-title{
        color: #989898;
    }

    .dark-mode .team-factor-value, .dark-mode .player-rank {
        color: #000000;
    }
    .dark-mode .custom-select{
        background: #212121;
    }
    .dark-mode .sticky-col{
        background-color: #ffffff;
    }
    .dark-mode .video-btn-list{
        background: #ffffff;
    }
    .dark-mode .field__line--outline,
    .dark-mode .field__line.field__line--penalty,
    .dark-mode .field__line.field__line--goal,
    .dark-mode .field__line.field__line .field__line--goal .field__line--goal--far,
    .dark-mode .field__line.field__line--penalty,
    .dark-mode .field__line.field__line--penalty-arc,
    .dark-mode .field__line.field__line--penalty-arc.field__line--penalty-arc--far,
    .dark-mode .field__line.field__line--mid,
    .dark-mode .field__line.field__line--circle,
    .dark-mode .field__line--penalty-arc:after,
    .dark-mode .field__line.field__line--penalty-arc.field__line--penalty-arc--far::after
    {
        border-color: #656565;
    }

    .dark-mode .field__line--mid{
        background-color: #656565;
    }

    .dark-mode .field__texture.field__texture--gradient-b{
        opacity: 1;
        background-color: #ffffff;
    }
    .dark-mode .text-black {
        color: #000000 !important;
    }

    .dark-mode .selected-report, .dark-mode .selected-filter {
        background: #9b9b9b;
        color: #000000;
    }
}