.panel-title {
    background: #1d2327;
    color: #fff;
    padding: 20px;
    position: relative;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap
}

.panel-title a {
    color: #fff;
    font-size: 27px;
    display: inline-block;
    margin: 0;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.panel-title a .det {
    font-size: 12px;
    font-family: tahoma, Helvetica, sans-serif;
    margin-top: 10px
}

.panel-title p {
    margin: 0;
}

.panel-nav {
    background: #fafafa;
    padding: 10px;
}

.panel-body {
    background: #FFF;
}

.table td {
    vertical-align: middle;
}

.team-info {
    display: flex;
    height: 100%;
    align-items: center;
}

.team-info.team {
    display: flex;
}

.team-info.team.a {
    justify-content: flex-end;
}

.team-info.team.a .team-info_img {
    margin-right: 10px;
}

.team-info.team.b {
    justify-content: flex-start;
}

.team-info.team.b .team-info_img {
    margin-left: 10px;
}

.team-info .score {
    color: green;
}

.team-info_img img {
    height: 30px;
    width: 30px;
    border-radius: 45px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center
}

.team-info_img i::before {
    font-size: 25px;
    margin: 0;
    line-height: 20px;
    text-align: center;
    font-family: dashicons;
    display: inline-block;
    content: "\f332";
    font-style: initial;
    color: #838691
}

.match-info {
    display: flex;
}

.match-info .icon {
    position: relative;
    margin: 0 3px;
    height: 30px;
    width: 30px;
    border-radius: 45px;
    border: 3px solid #fff;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.match-info .icon:hover {
    background: #c00;
    border-color: #c00;
    color: #FFF;
}

.match-info .icon:hover:before {
    content: attr(data-content);
    background-color: #1d2327;
    color: #fff;
    opacity: 90;
    padding: 5px 10px;
    border-radius: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -110%);
    -webkit-transform: translate(-50%, -110%);
    -moz-transform: translate(-50%, -110%);
    -ms-transform: translate(-50%, -110%);
    -o-transform: translate(-50%, -110%);
    white-space: nowrap;
    z-index: 999;
}

.match-status span,
.time span {
    padding: 5px 10px;
    border: 1px solid #EEE;
    border-radius: 3px;
}

.time span {
    display: inline-block;
    color: #1d2327;
}

/* Customize the datepicker container */
/* Adjust the width and font for the datepicker */
.ui-datepicker {
    width: 220px;
    font-family: Arial, sans-serif;
}

/* Style the header bar */
.ui-datepicker-header {
    background-color: #00a0d2 !important;
    background-image: none !important;
    border-radius: 0;
    color: #fff;
    padding: 3px;
    text-align: center;
}

/* Style the "prev" and "next" buttons */
.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

/* Style the days of the week */
.ui-datepicker th {
    background-color: #f2f2f2;
    padding: 6px 0;
    font-weight: bold;
}

.ui-datepicker-calendar {
    background: #fff;
    width: 100%;
}

/* Style the individual days */
.ui-datepicker-calendar .ui-state-default {
    padding: 4px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Style the selected date */
.ui-datepicker-calendar .ui-state-active {
    background-color: #007bff;
    color: #fff;
}

/* Style the hovered date */
.ui-datepicker-calendar .ui-state-hover {
    background-color: #f2f2f2;
}

/* Style the input field */
#datepicker {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media screen and (max-width: 768px) {
    .hidmob {
        display: none !important;
    }
}

/* Status */
.status_Playing span {
    color: #008000;
    background-color: transparent;
    border-color: #008000
}

.status_Cancelled span {
    color: #dc3545;
    background-color: transparent;
    border-color: #dc3545
}

.status_Played span {
    color: #000;
    background-color: transparent;
    border-color: #000
}

.status_Postponed span {
    color: #e67e22;
    background-color: transparent;
    border-color: #e67e22
}

.status_Fixture span {
    color: #666;
    background-color: transparent;
    border-color: #666
}

/* Spinner */
.is-active .spinner {
    visibility: visible;
}

.panel-nav .spinner {
    float: none;
}

.m-0 {
    margin: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.text-center {
    text-align: center;
}

.apliveapi_row {
    position: relative;
}

.onload:after {
    content: "";
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 35, 39, 0.9) url(../img/loader.svg) center no-repeat;
    background-color: rgba(29, 35, 39, 0.9);
    background-size: auto;
    background-size: auto;
    -webkit-background-size: 25px auto;
    background-size: 25px auto;
    z-index: 99999
}

.button-orange {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #fff !important;
}

.button-error {
    background: #c00 !important;
    border-color: #c00 !important;
    color: #fff !important;
}

.button-orange:focus,
.button-error:focus {
    box-shadow: none !important;
}



/* Datepiker */
/* datepicker css */

.ui-datepicker {
    text-align: center;
    font-family: Open Sans, Arial, sans-serif;
    margin-top: 2px;
    padding: 0 !important;
    background: #FFF;
    width: 256px;
    box-shadow: 0 0 30px rgb(0 0 0 / 15%);
}

.ui-datepicker-trigger {
    margin: 0 0 0 5px;
    vertical-align: text-top;
}


.ui-datepicker table {
    width: 256px;
    table-layout: fixed;
}

.ui-datepicker-title {
    line-height: 35px !important;
    margin: 0 10px !important;
}

.ui-datepicker-prev span {
    display: none !important;
}

.ui-datepicker-next {
    text-align: center;
}

.ui-datepicker-next span {
    display: none !important;
}

.ui-datepicker-prev {
    background-color: transparent !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAUklEQVQYlXWPwQnAMAwDj9IBOlpH8CjdJLNksuujFIJjC/w6WUioFBcqJ7sGEAD5Y/hpqLRghRv4YQlUjqXI3Kql2MixraGbEhVcDXcFUR/1egEHNuTBpFW0NgAAAABJRU5ErkJggg==') !important;
    height: 12px !important;
    width: 7px !important;
    margin: 14px 12px;
    display: inline-block;
    left: 0 !important;
    top: 0 !important;
}

.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-prev {
    cursor: pointer;
}

.ui-datepicker-next {
    background-color: transparent !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAVUlEQVQYlXWQ0Q3AIAhEL07gKI7kKN2kI3Wk1w9to3KQEELucQEECOizhhTQGHFnwOdgobWx0GkZILfYBhXl0STVbPoBarbkL7ozN/F8VBBXh8uJgF5r2hrI4GHUkAAAAABJRU5ErkJggg==') !important;
    height: 12px !important;
    width: 8px !important;
    margin: 14px 12px;
    display: inline-block;
    right: 0 !important;
    top: 0 !important;
}

.ui-datepicker-month {
    border-radius: 2px;
    background-color: #3985a0;
    width: 110px !important;
    height: 22px;
    font-family: Open Sans !important;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    text-align: right;
    border: none !important;
    margin-left: 17px !important;
    vertical-align: text-top;
}

.ui-datepicker-year {
    border-radius: 2px;
    background-color: #3985a0;
    width: 61px !important;
    height: 22px;
    border: none !important;
    font-family: Open Sans !important;
    color: #fff;
    font-size: 14px !important;
    font-weight: 600;
    text-align: right;
    vertical-align: text-top;
}

.ui-datepicker-month option,
.ui-datepicker-year option {
    color: #3985a0 !important;
    background-color: #fff !important;
    font-family: Open Sans !important;
    font-size: 14px !important;
    font-weight: 600;
}

.ui-datepicker-month option[selected],
.ui-datepicker-year option[selected] {
    background-color: #e5edf0 !important;
}

.ui-datepicker .ui-state-hover {
    /*background: none !important;*/
    border: 0 !important;
}

.ui-datepicker td {
    vertical-align: top;
}

.ui-datepicker .ui-state-default {
    border-radius: 2px;
    border-color: #edebeb !important;
    /*     background: white !important; */
    width: 24px;
    height: 24px;
    padding: 0 !important;
    line-height: 24px;
    text-align: center !important;
    font-family: Open Sans, Arial, sans-serif;
    color: #707070;
    font-size: 13px;
    font-weight: 400 !important;
    margin: 7px 0 0 4px;
}

.ui-datepicker .ui-state-default.ui-state-highlight {
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
    color: #00a0d2 !important;
}

.ui-datepicker td {
    width: 33px;
}

.ui-state-default.ui-state-hover {
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
}

.ui-datepicker .ui-state-active {
    border-color: #dcdcdc;
    background-color: #cff3f8 !important;
    color: #00a0d2 !important;
}

.ui-datepicker-calendar thead tr th {
    font-family: Open Sans, Arial, sans-serif;
    color: #549fa8;
    font-size: 12px;
    font-weight: 400;
    padding: 0.45em 0.3em !important;
    /*   width: 15px !important; */
}

.ui-datepicker-close {
    display: none;
}

.ui-datepicker thead {
    background-color: #f5f5f5;
}

.ui-state-default.ui-datepicker-current {
    float: none !important;
    font-family: Open Sans, Arial, sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    border-width: 0 !important;
    border: none;
    vertical-align: top;
    margin: 0 !important;
    background-color: transparent !important;
}

.ui-datepicker-buttonpane.ui-widget-content {
    text-align: center;
    background-color: #00a0d2;
    margin: 0 !important;
    height: 28px;
    padding: 0 !important;
}