/* =============================header controll========================== */
.header-to-controller {
    padding: var(--basic-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.icon {
    font-size: 18px;
    cursor: pointer;
    transition: all linear 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.icon:hover {
    opacity: 0.8;
    transform: scale(1.2);
}

/* .main-logo{

} */
.main-logo img {
    width: 80px;
}

.header-catagory-controller {
    margin-top: var(--basic-gap);
    display: flex;
}

.header-catagory-controller .cat-item {
    padding: var(--basic-gap);
    background-color: rgb(11, 10, 13);
    width: 100%;
    color: var(--primary-color);
}

/* ==============================notifaction work=================== */
.notice-description {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.noti-count {
    position: relative;
}

.noti-count::before {
    position: absolute;
    content: attr(count);
    background-color: red;
    color: #fff;
    font-size: 13px;
    top: -11px;
    height: 20px;
    border-radius: 50%;
    padding: 5px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 8px;
}

/* ========================catagory========================= */
.catagory-contaienr {
    height: 39px;
    background-color: rgba(3, 3, 3, 0.429);
    margin-top: 5px;
    padding: 3px;
    overflow: hidden;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    overflow-x: auto;
}

.catagory-contaienr .cat-box {
    min-width: auto;
    height: 100%;
    background-color: #8f8f8f96;
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    padding: 1px 3px;
    cursor: pointer;
    transition: all linear 0.3s;
}

.catagory-contaienr .cat-box:hover {
    background-color: #03A9F4;
}

.catagory-contaienr .cat-box:last-child {
    margin-right: 0px;

}

.catagory-contaienr .cat-box .cat-logo {

    height: 27px;

    width: 29px;

    border-radius: 50%;
}

.catagory-contaienr .cat-box .cat-logo img {
    height: 100%;
    width: 100%;
}

.catagory-contaienr .cat-box .cat-title {

    margin-left: 6px;

    color: white;

    font-size: 15px;
}

/* ===============================slider===================================== */

.slider-controller {
    width: 100%;
    height: var(--slider-height);
    display: flex;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: var(--basic-gap);
}

.slider-item {
    min-width: var(--slider-weidth);
    height: 100%;
    margin-right: var(--basic-gap);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
}

.slider-item:hover {
    opacity: 0.8;
}

.slider-item:last-child {
    padding-right: 0px;
}

.title-dashboard {
    margin-top: var(--basic-gap);
    font-size: 14px;
    color: var(--primary-color);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

/* ==============================notice===================================== */
.notice-controller {
    display: flex;
    background-color: #fff;
    height: 24px;
    width: 100%;
}

.notice-controller .notice-title {
    background-color: #FF5722;
    color: rgb(255 255 255);
    padding-right: 24px;
    padding-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
}

/* ==============================catagory=========================== */
.catagry-box {
    height: auto;
    width: 100%;
    background-color: #131212f2;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    box-sizing: content-box;
    padding: 4px 0px;
}

.catagry-box .catagory-item {
    min-width: 87px;
    height: 100%;
    background-color: #e4e4e43e;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 30px;
    margin-right: var(--basic-gap);
    cursor: pointer;
    flex-direction: row;
    padding: 3px 7px;
    box-sizing: content-box;
}

.catagry-box .catagory-item:last-child {
    margin-right: 0px;
}

.catagry-box .catagory-item .cat-lgog {
    height: 25px;
    width: 25px;
    /* background-color: black; */
    border-radius: 50%;
    margin-right: 9px;
}

.catagry-box .catagory-item .cat-lgog img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

.catagry-box .catagory-item .cat-title {
    font-size: 12px;
    color: var(--icon-color);
    font-weight: 500;
}

/* ===============================siderbar================================ */
.sildebar-header {
    background-color: #FF9800;
    position: relative;
    margin-bottom: var(--basic-gap);
}

.user-name,
.user-email {
    font-size: 14px;
    font-weight: 500;
    color: rgb(70, 69, 69);
    margin-left: 10px;
}

.user-email {
    font-size: 12px;
}

.close-btn-siderbar {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* ===============notifaction============================= */
.notifaction-controlelr {
    position: relative;
    height: 100%;
}

.notifaction-head {
    height: 60px;
}

.notifaction-body {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.noti-colse-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #ff0000;
    cursor: pointer;
}

.show-toast {
    display: block !important;
    margin-bottom: 10px;
}

/* ===========================fotter section=================== */

.foote-title {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 40px;
}

img.payment-logo {
    height: 49px;
    margin-bottom: 30px;
}

.fotter-description {
    margin-top: 30px;
    /* background-color: rgb(5 5 49 / 63%); */
    padding: 10px;
    /* box-shadow: 8px 7px 15px 1px black; */
}

/* ===============================game section===================== */
.game-type {
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.game-type img {
    width: 30px;
}

.game-type span {
    color: white;
    font-weight: bold;
}

.gap {
    margin-top: 10px;
}

.upcomming {
    padding: 8px;
}

/* =================================profile page========================================================= */
/* =================================profile page========================================================= */
/* =================================profile page========================================================= */
.profile-top-user {
    height: 150px;
    background: linear-gradient(rgb(70, 5, 200), rgb(211, 192, 255));
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.profile-top-user i {
    font-size: 84px;
    color: #fff;
}

.profile-top-user .user-name {
    font-size: 19px;
    color: #fff;
}

.wellet-box {
    height: 80px;
    background-color: #07021b;
    border-radius: 10px 10px 0px 0px;
    width: 98%;
    margin: auto;
    margin-top: -15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-shadow: -2px 4px 0 0 black;
    justify-content: space-between;
}

.wellet-box p {
    color: var(--icon-color);
    font-size: 15px;
}

.box-title {
    color: #fff;
}

.box-hr {
    background-color: #fff;
    height: 2px;
}

.funds-box {
    background-color: rgba(27, 2, 2, 0.171);
    margin: auto;
    margin-top: 15px;
    box-shadow: 1px 2px 0px 3px black;
}

.alin-sp-all {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.alin-sp-all .box-all {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: column;
    color: #fff;
    cursor: pointer;
}

.alin-sp-all .box-all .icons {
    background-color: rgba(194, 189, 189, 0.21);
    padding: 10px;
    border-radius: 50%;
}

.alin-sp-all .box-all .icons:hover {
    background-color: #03A9F4;
}

.alin-sp-all .box-all .icons-title {
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
}

/* =========loing box desing======================= */
.box-header {
    position: relative;
}

.box-header i {
    position: absolute;
    right: 10px;
    top: 10px;
    color: red;
    font-size: 16px;
    cursor: pointer;
}

.box-body {
    padding: 10px;
}

/* ============================sidbar===================== */
.siderbar-ui ul li {
    font-size: 14px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.siderbar-ui ul li:hover {
    background-color: blue;
}

.siderbar-ui ul li a i {
    margin-right: 15px;
}

/* ======================withdow page desing============================ */
.my-custom-box {
    box-shadow: -1px 3px 0 #000000;
    width: 100%;
    background: #040423;
    margin-top: 2px;
}

.my-custom-box .box-title {
    font-size: 14px;
    color: #fff34d;
    margin: 2px 12px;
}

.my-custom-box .box-body .select-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-custom-box .box-body .select {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    border-radius: 5px;
    cursor: pointer;
}

.my-custom-box .box-body .active-slect {
    border: 2px solid red;
}

.select .select-logo {
    padding: 5px;
}

.select .select-logo img {
    width: 100%;
    height: 30px;
}

.my-controler-input {
    width: 100%;
    border: 0;
    padding: 4px 7px;
    background-color: #0000004d;
    border: 1px solid #ffffff69;
    color: #fff;
}

.amount-controller {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin-bottom: 10px;
}

.amount-controller .amount-box {
    padding: 5px 10px;
    border: 1px solid rgba(193, 193, 193, 0.515);
    color: #fff;
    cursor: pointer;
}

.active-method {
    border: 1px solid #f33904;
}

/* profile info page */
.profile-top-info-user {
    height: 180px;
    background: linear-gradient(rgb(70, 5, 200), rgb(211, 192, 255));
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-top-info-user i {
    font-size: 84px;
    color: #fff;
}

/* fotter design */
.buttom-bar-for-mobail {
    display: flex;
    align-items: center;
    height: 100%;
}

.buttom-bar-for-mobail button {
    border-radius: 0px;
    width: 98%;
    height: 100%;
    justify-content: center;
    color: #fff;
    font-weight: 500;
}

/* ============custom table desing========== */
table.custom-table-desing {
    width: 100%;
    color: #fff;
    border: 1px solid #FF9800;
    background: #060629;
}

table.custom-table-desing td {
    padding: 5px 5px;
}

/* ==================pasowed hide show============= */
.eye-mother {
    position: relative;
}

.eye-mother i {
    position: absolute;
    right: 9px;
    top: 36px;
    cursor: pointer;
}

/* =======================my custom notice================= */
.my-custom-notice {
    background: #fff;
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-custom-notice .notice-head {
    background: red;
    color: #ffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
}

.my-custom-notice .notice-body {
    display: flex;
    justify-content: start;
    align-items: center;
    color: red;
    flex-wrap: wrap;
    width: 70%;
}

/* .my-custom-notice .notice-body marquee {} */
/* sponser desing */
.sponser-desing {
    background: #03A9F4;
    padding: 6px 12px;
    border-radius: 5px;
    border: 2px dotted red;
}

.sponser-desing span {
    color: #fff;
}

.sponser-desing i {
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

/* balesnce deisgn */
.menu-icons-contaienr {
    display: flex;
    gap: 19px;
}

.acount-balense {
    color: #FF5722;
    background: yellow;
    border-radius: 35px;
    padding: 2px 11px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 21px;
}

/* form box desing */
.frombox {
    width: 95%;
    margin: auto;
    border: 1px solid #00BCD4;
    padding: 9px;
    margin-top: 66px;
    margin-bottom: 66px;
    box-shadow: 9px 9px 20px 7px #000000;
}

/* betting page design */
.div-button-container {
    margin: auto;
}

.div-button-container .tab-button {
    cursor: pointer;
}

.div-button-container .div-button-child {
    height: 0px;
    transition: all linear 0.3s;
    overflow: hidden;
}

.div-button-container .child-show {
    height: auto;
}

.sub-gam-design {
    font-size: 16px;
    color: #ffff;
    background: #4CAF50;
    padding: 4px 6px;
}

.as-design {
    display: grid;
    grid-template-columns: auto auto;
    background-color: #2196F3;
}

.as-design .as-box {
    background-color: #002b4d;
    padding: 5px 5px;
    font-size: 16px;
    text-align: center;
    margin: 5px;
    /* border-radius: 7px; */
    color: #fff;
    cursor: pointer;
    transition: all linear 0.3s;
    position: relative;
}

.as-design .as-box:hover {
    background-color: #2196F3;
}

.lock-design {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #0606069b;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: yellow;
}

.custom-btn-design {
    padding: 3px 13px;
    border: 1px solid lime;
    font-size: 15px;
    background: #FFC107;
    color: #fff;
}

.custom-btn-design:hover {
    background: #0f07ff;
}

.active-cat {
    background-color: #03A9F4 !important;
}

/* live scroe */
.livescore {
    background-color: rgb(25, 178, 212);
    text-align: center;
    color: #fff;
    margin-bottom: 5px;
    font-size: 16px;
    padding: 2px;
}

.my-card-design {
    background: #0b0b2d;
    border: 1px solid #ffc0cb63;
    border-radius: 0px !important;
    box-sizing: border-box;
}

.title-card-text {

    font-size: 14px;

    color: #fff;

    text-transform: uppercase;
}

.cutom-table {
    background: #030321 !important;
    --bs-table-bg: #0b0b2d;
    --bs-table-color: #fff;
    border: 1px solid #575656;
}
.search-bar{
    padding: 2px 5px;
    box-sizing: border-box !important;
    border: 0px;
    font-size: 14px;
    color: #673AB7;
    outline: 0px;
}
.search-bar:focus{
    border: 0px;
}