.md .button.active-state,
.ios .button.active-state {
    background: rgba(20, 48, 78, 0.27) !important;
}

.window-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #518cd4f5;
    color: white;
    font-size: 35px;
    z-index: 1000000;
    top: 100%;
    text-align: center;
    padding: 30%;
    transition: all 0.35s;
}

/*#region  ****  Framework7 Override  ****/

/* solve problem of hidden data on invoice-list page */
/* or can be solved use class .general-tab  */
.tabs-animated-wrap .tab {
    overflow: scroll;
}

/* this to fix bug */
.calendar-modal {
    z-index: 13001;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */

/*#region  ****  GENERAL  ****/

body,
.unselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
}

button {
    width: unset;
}

/* .my-list-s{
    margin: 5px 0 !important;
    font-size: 15px;    
} */

.my-list {
    margin: 5px 0 !important;
}

/* .ios .my-list-s .item-inner:after, */

.md .my-list .item-inner:after,
.ios .my-list .item-inner:after {
    content: '';
    position: absolute;
    background-color: #c8c7cc5e;
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.my-smart-value {
    height: 44px;
    padding-top: 8px;
    font-size: 17px;
}

.my-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-right: -15px;
    margin-left: -15px;
}

.view-main {
    transition-property: transform, -webkit-transform, all;
    transition-duration: 400ms;
}

.my-togle-item {
    margin-top: 15px;
}

.block-container {
    float: left;
    position: relative;
    width: 96%;
    margin: 35px 2% !important;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 13px;
    -webkit-box-shadow: 1px 1px 22px -6px rgba(163, 163, 163, 1);
    -moz-box-shadow: 1px 1px 22px -6px rgba(163, 163, 163, 1);
    /* box-shadow: 1px 1px 22px -6px rgba(163,163,163,1); */
    box-shadow: 4px 4px 25px -10px rgb(0, 0, 0);
    box-sizing: border-box;
}

.block-container-video {
    padding-bottom: 40px;
}

.block-container .block {
    margin: 0 !important;
    padding: 5px 0 !important;
}

.block-container .block-strong:after {
    height: 0 !important;
}

.general-note {
    width: 85%;
    margin: 10px auto 35px;
    font-size: 13px;
    /* float: left; */
    color: steelblue;
}

.panel-left:after {
    content: '';
    position: absolute;
    background-color: #c7c5c5d6;
    display: block;
    z-index: 5001;
    top: 0;
    right: 0px;
    bottom: auto;
    left: auto;
    width: 2px;
    height: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.panel-left:before {
    content: '';
    position: absolute;
    background-color: #c7c5c5d6;
    display: block;
    z-index: 5001;
    top: 0;
    left: 0px;
    bottom: auto;
    right: auto;
    width: 2px;
    height: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.btn-50 {
    width: 48%;
    /* height: 50px !important; */
    /* font-size: 22px; */
    margin: 0 1%;
    float: left;
}

.btn-md-50 {
    width: 48%;
    height: 50px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-md-100 {
    width: 100%;
    height: 50px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-big-50 {
    width: 48%;
    height: 60px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
}

.btn-big-100 {
    width: 98%;
    height: 60px !important;
    font-size: 22px;
    margin: 0px auto;
    position: relative;
    /* float: left; */
}

/* .btn-big-100 {
    width: 100%;
    height: 60px !important;
    font-size: 22px;
    margin: 0 1%;
    float: left;
} */

/* ((((((((((((((((////////////////-------------------////////////)))))))))))))))) */
.btn-col-opertion {
    margin: 10px 0 0 0;
}


.radio.active span {
    width: 40px;
    height: 40px;
    background: no-repeat center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%23007aff'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E");
    background-size: 13px 10px;
}

.editor-div-margin {
    margin-top: 10px;
}

.editor-font {
    font-size: 15px !important;
}

/*#endregion*/

.bg-white {
    background-color: white;
}

/* --------------------------------------------------------------------------  */

/*#region  ****  feed  ***  */

.adv-video,
.adv-Img,
.fan-coverImg,
.fan-listImg,
.academy-coverImg,
.academy-logoImg,
.club-coverImg,
.club-logoImg,
.agent-listImg,
.agent-coverImg,
.event-listImg,
.event-coverImg,
.feed-listImg,
.feed-coverImg {
    text-align: center;
    padding-top: 40px;
    cursor: pointer;
    color: #52525270;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    position: relative;
    box-shadow: 2px 6px 15px 0px rgba(0, 0, 0, 0.55);
}

.adv-div-video,
.adv-div-img,
.fan-div-listImg,
.fan-div-img,
.academy-div-listImg,
.academy-div-img,
.club-div-listImg,
.club-div-img,
.agent-div-listImg,
.agent-div-img,
.feed-div-img,
.feed-div-listImg,
.event-div-listImg,
.event-div-img {
    margin-top: 5px;
    margin-bottom: 5px;
}

.adv-video,
.adv-Img,
.fan-coverImg,
.academy-coverImg,
.club-coverImg,
.agent-coverImg,
.event-coverImg,
.feed-coverImg {
    width: 100%;
    height: 200px;
}

.fan-listImg,
.academy-logoImg,
.club-logoImg,
.agent-listImg,
.event-listImg,
.feed-listImg {
    width: 130px;
    height: 130px;
}

.player-profileImg,
.agent-profileImg {
    text-align: center;
    cursor: pointer;
    color: rgba(82, 82, 82, 0.44);
    background-color: rebeccapurple;
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 calc(50% - 50px);
}

.jodit_toolbar {
    background: #f9f9f9 !important;
}

.jodit_toolbar_popup {
    z-index: 100000;
}

.ico_upload i {
    width: 32px !important;
    padding-top: 5px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.ios .border-custom {
    content: '';
    position: absolute;
    background-color: var(--f7-list-item-border-color);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 50% 100%;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}

.img-resource {
    background-repeat: no-repeat;
    background-position: 50%;
    width: 250px;
    height: 250px;
    background-size: contain;
    float: left;
    margin: 0 10px;
    position: relative;
    box-shadow: 2px 6px 15px 0px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.copy-url {
    height: 100%;
    width: 100%;
}

.viedo-copy-url {
    position: absolute;
    bottom: 0;
    left: 80px;
    margin-bottom: -30px;
}

.resource-remove-img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #007aff;
    border-radius: 50%;
    font-size: 20px;
    text-align: center;
    border: 1px solid #e4e3e6;
    color: #ffffff;
}

.copy-url-link {
    text-align: center;
    text-decoration: underline;
}

#feed-inputSelected-country {
    font-size: 13px;
}

/*#endregion*/

/*#region  ****  player  ***  */
.range-slider-div {
    margin-bottom: 25px;
}

.general-btn-uploadProfile {
    height: 36px;
    padding: 4px;
    width: 60px !important;
}

/*#endregion*/

/*#region  ****  map  ***  */
#popup-map-txt-search {
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    margin: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 53%;
    max-width: 400px;
    height: 30px;
    margin-top: 2px;
    border: 1px solid #dadbddb8;
}

#popup-map-txt-search:focus {
    border-color: #4d90fe;
}

.pac-container {
    z-index: 10000000000 !important;
}

/*#endregion*/


/* -------------------------------------------------------  */
/* ------------------------ rtl --------------------------  */
/* -------------------------------------------------------  */

/*#region  ****  rtl  ***  */
.AR {
    display: none;
}

.rtl .AR {
    display: unset;
}

.rtl .EN {
    display: none;
}

.rtl .fixed-table-container thead th:first-child:not([data-not-first-th]),
.rtl .fixed-table-container tbody td:first-child {
    border-left: 1px solid #ddd !important;
    /* set important as we load this css after bootstrap */
}

.rtl .fixed-table-container thead th:last-child:not([data-not-first-th]),
.rtl .fixed-table-container tbody td:last-child {
    border-left: none !important;
    /* set important as we load this css after bootstrap */
}

.rtl th {
    text-align: right !important;
}

/*#endregion*/

/* --------------------------------------------------------------------------  */