/* style.css */
* {
    font-size: 14px;
}
.section-maintenance {
    font-family: Kanit, sans-serif;
    color: #3056CB;
}

    .section-maintenance img {
        width: 680px;
        max-width: 90%;
    }

.sub-title-maintenance, .sub-title-maintenance-time {
    padding-top: 2rem;
}
    .title-maintenance,
    .sub-title-maintenance span:nth-child(1) {
        font-size: 2rem;
        font-weight: 500;
    }
    .sub-title-maintenance span:nth-child(3) {
        font-size: 1.25rem;
    }
.sub-title-maintenance-time span {
    font-size: 1.5rem;
}
.sub-title-maintenance-time button {
    border-radius: 12px;
    background-image: linear-gradient(to top,#0099FF, #2A51C9);
    color: #fff;
    padding: 12px 24px;
    margin-top:2rem;
    filter: drop-shadow(0px 4px 12px rgba(78, 106, 139, 0.30));
}
    .sub-title-maintenance-time button:hover {
        background-image: linear-gradient(to top, #2A51C9,#0099FF);
    }


.my-reconnect-modal-old2 > div {
    position: fixed;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 10000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: hsla(0, 0%, 100%, 0.73);
    font-family: Kanit, sans-serif;
    backdrop-filter: blur(6px);
}

.my-reconnect-modal-2 > div {
    position: fixed;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: auto;
    z-index: 10000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-bottom: 1px solid #eef1f9;
    background-color: rgba(255, 46, 46, 0.1);
    font-family: Kanit, sans-serif;
    font-size: 16px;
    line-height: 32px;
    font-weight: 300;
    backdrop-filter: blur(6px);
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
}

.components-reconnect-show > .show {
    display: flex;
}

.components-reconnect-failed > div {
    display: none;
}

.components-reconnect-failed > .failed {
    display: flex;
}

.components-reconnect-refused > div {
    display: none;
}

.components-reconnect-refused > .refused {
    display: flex;
}

.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-rejected > .rejected {
    display: flex;
}

.data-row-value {
    word-break: break-all;
}


/*Theme*/

/*
.e-input-group {
    border-radius: 5px !important;
    border: 2px solid #f1f1f1 !important;
}

    .e-input-group:hover {
        border: 2px solid rgba(57, 106, 255, 0.15) !important;
    }


input.e-control {
    border-radius: 5px !important;
    border: 2px solid white !important;
}


input.e-input {
    border-radius: 5px !important;
    border: 2px solid white !important;
    height: 38px !important;
}

.e-control {
    border-radius: 5px !important;
    border-top: 0px solid white !important;
    border-left: 0px solid white !important;
    border-right: 0px solid white !important;
}
*/

.e-dialog {
    border-radius: 5px !important;
    background-color: white !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px 0px !important;
}

.e-row {
    height: 40px;
}

.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd),
.e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
    color: black !important;
}

.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-indentcell, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-rowdragdropcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailindentcell, .e-grid .e-detailcell {
    border-color: #eef1f9;
}

.e-grid.e-gridhover .e-gridcontent tr.e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: #f8f9fd5c !important;
    color: #396aff !important;
}

.e-grid .e-gridheader {
    border-top-color: white !important;
    color: #536883 !important;
}

.e-grid .e-rowcell {
    font-size: 14px !important;
}

.validation-message {
    word-break: break-all;
}

.content-wrapper .e-grid .e-gridheader .e-sortfilter .e-headercelldiv {
    padding: 0px !important;
}

.t-bot-app {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #777;
    font-size: 12px;
    margin-right: 10px;
}

.t-b-deposit {
    margin-bottom: 0px;
    width: 90%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #777;
    font-size: 12px;
    font-weight: unset;
}

.t-b-active {
    margin-bottom: 0px;
    padding: 0px 10px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #28a745;
    font-size: 12px;
    font-weight: unset;
}

.t-b-Suspended {
    margin-bottom: 0px;
    padding: 0px 10px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #dc3545;
    font-size: 12px;
    font-weight: unset;
}

.img-b-deposit {
    width: 24px;
    height: 24px;
    margin: 0px 10px;
}

.popup-content .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    height: inherit;
    min-width: 0px !important;
    padding: 0 1px;
}

.popup-content .e-richtexteditor .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
    margin-left: 0;
    margin-right: 0;
    padding-left: 21px;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    /*border-top: 1px solid #dadada !important;*/
}

.popup-content .e-richtexteditor .e-rte-content .e-content {
    padding-left: 22px !important;
}

.popup-content .e-richtexteditor.e-rte-tb-expand .e-rte-content {
    border-bottom: 0px solid #dadada !important;
}

.form-popup-em {
    margin-bottom: 0px;
    padding: 0px 10px;
}

.size-svg {
    width: 64px;
    height: 64px;
}

.em-textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    border: 1px solid #c8c8c8;
}

.em-text {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 14px;
    text-align: inherit;
    color: #333;
}

.box-color {
    width: auto;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #eaeaea;
}

.box-generals {
    display: flex;
    -webkit-align-items: center;
}

.radio-generals {
    /*margin: 0px 5px 0px 10px;*/
}

.text-generals {
    margin: 0px;
    font-weight: normal;
}

.p-cursor .e-multi-select-wrapper {
    cursor: pointer !important;
}

.b-set-color {
    padding: 1rem 1rem;
    width: 100%;
    text-align: center;
}

.box-check {
    /*margin-left: 10px;*/
}

.h-sdm {
    /*height: 190px;*/
    overflow: auto;
    width: 550px;
    margin-top: 0px;
    /*width: 400px;*/
}

.sdm {
    cursor: pointer;
    min-height: 30px;
    /*width: 400px;*/
}

/*Blue Scrollbar Styling 
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #eef1f9;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: rgb(54, 49, 49);
}



.scroll-blue::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #dbe4fd;
}
*/

.transaction__info {
    width: 320px;
    font-size: 16px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
}

.card__body {
    border-top: 1px solid #efeff7;
}

.card__Logo {
    text-align: center;
    padding: 15px 0 15px 0;
}

    .card__Logo img {
        height: 24px;
    }

.ts-card {
    position: relative;
    margin-top: 12px;
}

.ts-checkicon {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    width: 35px;
    height: 35px;
    margin: auto;
    background: #6ce679;
    padding: 8px;
    border-radius: 50%;
}

    .ts-checkicon span.e-icons.e-check.e-medium {
        font-size: 24px;
        color: #fff;
    }

.card__msg {
    font-size: 18px;
    font-weight: 600;
    /* padding: 15px 0; */
    padding-bottom: 0;
}

.card__time {
    color: #77888f;
    padding-top: 5px;
    font-size: 14px;
    margin: 0;
}

.card__amount {
    border-radius: 10px;
    padding: 30px 0 15px 0;
}

    .card__amount p:first-child {
        margin: 0;
        color: #000;
    }

.txt__amount {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    font-weight: 600;
}

.table__card-info {
    width: 100%;
    padding: 0 15px;
}

.block__info.bd-bt {
    border-bottom: 1px solid rgb(57 106 255 / 20%);
}

.block__info.outtable {
    border-top: 1px solid #efeff7;
    padding: 15px;
}

.block__info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 0 0 0;
}

    .block__info .wrap-f {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

.tt__info {
    min-width: fit-content;
    /* font-weight: 600;*/
    width: 80px;
    text-align: left;
}

.card__Note {
    text-align: left;
    font-size: 12px;
}

    .card__Note span {
        font-weight: 500;
        font-size: 12px;
    }

.table__card-info tr td:first-child {
    padding-right: 30px;
    text-align: left;
}

.card__from-info,
.card__to-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
}

.img__bank-logo {
    height: 16px;
    margin-right: 10px;
}

.card__from-info div, .card__to-info div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 5px;
}

.card__to-acc,
.card__from-acc {
    margin: 0px;
    text-align: left;
}

.card__to-number,
.card__from-number {
    color: #77888f;
    min-width: fit-content;
    text-align: right;
    margin-bottom: 0px;
}

.card__to-number {
    color: #77888f;
}


.bd-bt0 {
    padding-bottom: 0px;
}

.mg-bt0 {
    margin-bottom: 0px;
}

.tt__info-out {
    font-size: 11px;
    /*  color: rgb(255 255 255 / 70%); */
    color: rgb(131 135 141 / 70%);
}

.card__time-out {
    font-size: 11px;
    text-align: right;
    padding-top: 10px;
    margin-top: 8px;
    color: #83878d;
}

/* New Create Promotion */
.n-popup-frame {
    overflow: hidden;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 7px 14px 0 rgb(0 0 0 / 14%);
    font-family: Kanit, sans-serif;
}

.n-popup-content {
    width: 100%;
    padding: 22px;
}

.n-popup-title {
    color: #7D839E;
    font-size: 16px;
    font-family: 'Kanit';
}

.n-icon-list-o {
    background-color: #A3A3A3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 26px;
    min-width: 26px;
    margin-right: 6px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 18px;
}

.n-popup-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    cursor: pointer;
}

.n-form-popup {
    border: 1px solid #E2E9FF;
    border-radius: 15px;
    margin-top: 40px;
    padding: 0 20px 5px 20px;
}

.n-popup-label {
    margin-top: -15px;
    margin-bottom: 0px;
    font-weight: 400;
}

.txt-pro {
    font-family: sarabun;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin-bottom: 0;
    background-color: #fff;
}

.grid-2-column {
    display: -ms-grid;
    display: grid;
    margin-top: 12px;
    margin-bottom: 10px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 12px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.left-column {
    max-width: 100%;
}

.right-column {
    max-width: 100%;
}

.btn-popup-2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 40px;
    margin: 5px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    border-radius: 6px;
    background-color: #D9DCE3;
    color: #86868A;
    text-decoration: none;
}

.n-popup-controll {
    font-family: 'Kanit';
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 17px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.n-txt-info-label {
    font-family: 'Sarabun' !important;
    font-size: 14px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 60%;
    max-width: 60%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(65%, hsla(0, 0%, 100%, 0)), to(#fff));
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 65%, #fff);
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #777;
    line-height: 26px;
    white-space: break-spaces;
}

.right-w {
    width: 40% !important;
    max-width: 40% !important;
}

.pd-l-10 {
    padding-left: 10px
}

.pd-l-15 {
    padding-left: 15px
}

.pro-list:hover {
    background-color: yellow;
}

.i-setbank {
    margin: 0 10px 0 0;
}

.nn-txt-info {
    font-family: 'Sarabun' !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 30%;
    max-width: 30%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(65%, hsla(0, 0%, 100%, 0)), to(#fff));
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 65%, #fff);
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #777;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
}

.n-Editor {
    padding: 15px 0;
}

.mr-10 {
    margin-right: 10px;
}
/*Syncfusion.Blazor.QueryBuilder*/
@media screen and (min-width: 522px) {
    .e-query-builder .e-group-body .e-rule-container {
        padding-right: 0px !important;
    }

    .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator {
        width: 30% !important;
    }

    .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
        width: 30% !important;
    }

    .e-query-builder .e-group-body .e-rule-value.e-show {
        width: 30% !important;
    }

    .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
        margin-left: 1px !important;
    }
}

@media screen and (max-width: 521px) {
    .e-query-builder .e-group-body .e-rule-value.e-show {
        width: 90% !important;
    }
}

@media screen and (max-width: 488px) {
    .e-query-builder .e-group-body .e-rule-value.e-show {
        width: 85% !important;
    }
}

@media screen and (max-width: 320px) {
    .e-query-builder .e-group-body .e-rule-value.e-show {
        width: 80% !important;
    }
}

.OpenName {
    display: block;
}

.CloseName {
    display: none;
}

.OpenNameMember .OpenName {
    display: none;
}

.OpenNameMember .CloseName {
    display: block;
}

/*---- Tournament Create*/
.tnm-t-header {
    margin: auto 10px;
    color: #536883;
    font-size: 16px;
    font-family: Sarabun, sans-serif;
}

.tnm-t-sub {
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 0px 5px;
    margin-left: 40px;
    top: 0px;
    position: absolute;
    color: #333333;
    background-color: white;
}

.tnm-t-str .txt-info-label, .tnm-t-str .tnm-t-sub {
    font-size: 14px;
    font-weight: 300;
    font-family: kanit,sans-serif !important;
}

.tnm-icon-back {
    width: 30px;
    height: 30px;
    color: #A3A3A3;
    cursor: pointer;
}

.tnm-b {
    width: 100%;
    border: 1px solid #E2E9FF;
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 20px;
}

.tnm-b-sub {
    display: flex;
    justify-content: space-between;
}

.tnm-b-reward {
    padding: 0px 10px;
    display: flex;
    justify-content: center;
}

.tnm-div {
    position: relative;
    padding-top: 12px;
}

.tnm-div-sub {
    width: 100%;
}

.tnm-w-sub {
    width: 24% !important;
}

.tnm-frame {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.tnm-str-btn {
    border-top: none;
    padding: 17px 20%;
}

.content-col.tnm-str {
    padding: 0px 17px;
}

.tmn-Add {
    cursor: pointer;
    color: #396AFF;
    margin-right: 20px;
}

.tmn-Add, .tmn-Remove {
    width: 30px;
    height: 30px;
}

.tnm-stg-reward {
    display: flex;
}

.tnm-reward-sub {
    display: flex;
}

.tnm-t-reward {
    padding-right: 70%;
}

.tnm-input-rank {
    width: 64%;
}

.tnm-select-rank {
    width: 30%;
}

.tnm-input-money {
    width: 50%;
}

.tnm-set-flex {
    display: flex;
    margin-left: 3%;
    padding-top: 7.2px;
}

.tnm-bd-reward {
    border-bottom: none;
    width: 63%;
}

.tnm-sub-reward {
    display: flex;
}

.tnm-policy-sub {
    display: flex;
}

.tnm-bd-policy {
    border-bottom: none;
    width: 63%;
}

.tnm-t-policy {
    width: 36%;
    padding-right: 0%;
}

.tnm-sub-policy {
    display: flex;
}

.tnm-policy-flex {
    display: flex;
    width: 80%;
}

.tnm-r-1 {
    margin-right: 1%;
}


table#FirstLevelParentGrid_content_table,
table#FirstLevelParentGrid_header_table,
colgroup#FirstLevelParentGridcolGroup {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background: white;
}

tr {
    border-bottom: 1px solid #ccc;
}

table#FirstLevelParentGrid_content_table td:first-child,
table#FirstLevelParentGrid_header_table tr.e-columnheader th:first-child,
table#FirstLevelParentGrid_header_table tr.e-filterbar th.e-filterbarcell:first-child,
colgroup#FirstLevelParentGridcolGroup col:first-child {
    vertical-align: top;
    left: 0;
    width: 200px;
    padding: 5px;
    position: sticky;
    background: white;
    z-index: 10;
}

table#FirstLevelParentGrid_header_table tr.e-columnheader th:first-child,
table#FirstLevelParentGrid_header_table tr.e-filterbar th:first-child,
colgroup#FirstLevelParentGridcolGroup col:first-child {
    z-index: 999;
}

.tr > td:first-child {
    position: sticky;
    background: white;
}

table#FirstLevelParentGrid_content_table td {
    border-right: 1px solid #eaeaea;
}

.e-content.e-yscroll {
    height: auto;
}

.tr > td:first-child {
    left: 0;
    width: 200px;
    background: white;
}

.outer {
    position: relative;
}

.inner {
    overflow-x: scroll;
    width: 100%;
}

/*Setting Theme*/
:root {
    --Main-Size: 1rem;
    --Main-Size-Text: 1rem;
    --Primary-1: #396AFF;
    --Primary-2: #EEF1F9;
    --Primary-3: #E2E9FF;
    --Primary-4: #333333;
    --Secondary-1: #777;
}

.setting-t-sub {
    font-weight: 400;
    padding: 0px 5px;
    margin-left: 34px;
    position: absolute;
    color: #333333;
    background-color: white;
    font-family: kanit,sans-serif;
}

hr {
    background-color: #777;
}

.setting-tab-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-div {
    padding: calc(var(--Main-Size)*2.5) calc(var(--Main-Size)*1.25) calc(var(--Main-Size)*1.25);
}

.setting-Web.nav-tabs .nav-link {
    border-top-left-radius: calc(var(--Main-Size)*0.938);
    border-top-right-radius: calc(var(--Main-Size)*0.938);
}

.setting-t-sub {
    font-size: calc(var(--Main-Size-Text)*1);
    top: calc(var(--Main-Size)*-0.625);
}

.content-col.str-setting {
    padding: 0px;
}

.setting-Web.nav-tabs .nav-item.show .nav-link, .setting-Web.nav-tabs .nav-link.active {
    color: var(--Primary-1);
    background-color: var(--Primary-2);
    border-color: var(--Primary-3);
}

.nav-tabs {
    border-bottom: 1px solid var(--Primary-3);
}

.setting-Web .nav-link {
    color: var(--Primary-4);
    border-color: var(--Primary-3);
    margin-right: 3px;
}

.setting-Web.nav-tabs .nav-link:focus, .setting-Web.nav-tabs .nav-link:hover {
    background-color: var(--Primary-2);
    isolation: isolate;
}

.setting-b.card-body {
    border: 0.5px solid var(--Primary-3);
    border-top: 0px;
}

.setting-b-div, .data-Setting, .setting-b-div-color, .data-Setting-Generals {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-b-div, .setting-b-div-color, .setting-b-div-Generals {
    width: 80%;
}

.data-Setting, .data-Setting-Generals {
    margin-bottom: 3px;
}

.str-setting-theme {
    font-size: calc(var(--Main-Size-Text)*0.875);
    font-weight: 300;
    font-family: kanit,sans-serif !important;
}

.theme-t {
    color: var(--Secondary-1);
}

.str-b-generals {
    position: relative;
}

.setting-b .box-color {
    width: 35%;
    height: 40px;
    border-radius: 5px;
    margin-right: 3px;
}

.setting-b-tab {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.setting-t-tab-s {
    font-size: calc(var(--Main-Size-Text)*0.75);
    line-height: calc(var(--Main-Size-Text)*0.75);
}

.t-Tahoma {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #585858;
}

.str-f-setting {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.setting-textbox {
    height: 40px !important;
}

.setting-b-set-color {
    padding: 1rem 1rem;
    width: 30%;
    text-align: center;
    margin: auto;
}

.btn-setting-theme {
    /*padding-right: 14px;*/
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*set order prov*/
.grid-set-webprov {
    display: -ms-grid;
    display: grid;
    margin-top: 12px;
    margin-bottom: 10px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 20px;
    /*grid-row-gap: 12px;*/
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.sgrid-set-webprov-1 {
    display: -ms-grid;
    display: grid;
    /* margin-top: 12px;
    margin-bottom: 10px;*/
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 20px;
    /*grid-row-gap: 12px;*/
    -ms-grid-columns: 1.25fr 0.75fr;
    grid-template-columns: 1.25fr 0.75fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.sgrid-set-webprov-2 {
    display: -ms-grid;
    display: grid;
    /*margin-top: 12px;
    margin-bottom: 10px;*/
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 20px;
    /*grid-row-gap: 12px;*/
    -ms-grid-columns: 0.85fr 1.15fr;
    grid-template-columns: 0.75fr 1.25fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

    .sgrid-set-webprov-1 .selectbox-popup,
    .sgrid-set-webprov-2 .selectbox-popup,
    .sgrid-set-webprov-1 .w-input,
    .sgrid-set-webprov-2 .w-input {
        font-size: 12px;
    }


    .sgrid-set-webprov-2 .left-column .popup-data .txt-info-label {
        padding-right: 20px;
        min-width: 80px;
        justify-content: flex-end;
    }

    .sgrid-set-webprov-2 .left-column .popup-data .frame {
        display: flex;
        justify-content: flex-start;
        width: 50%;
    }

.sgrid-set-webprov- .left-column .popup-data .frame {
    width: 180px;
    max-width: 100%;
}

.sgrid-set-webprov-1 .left-column .popup-data .txt-info-label,
.sgrid-set-webprov-2 .right-column .popup-data .txt-info-label {
    width: 50%;
    max-width: 50%;
    justify-content: flex-end;
    padding-right: 20px;
}

.sgrid-set-webprov-1 .right-column .popup-data .txt-info-label {
    width: 100px;
    justify-content: flex-end;
    padding-right: 20px;
}

.sgrid-set-webprov-2 .right-column .popup-data .txt-info-label {
    padding-right: 20px;
    justify-content: flex-end;
}

.grid-set-webprov.onefr {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

    .grid-set-webprov.onefr .sgrid-set-webprov-1 {
        -ms-grid-columns: 1.5fr 1fr;
        grid-template-columns: 1.5fr 1fr;
    }
    .grid-set-webprov.onefr .textbox-popup {
        border: 1px solid rgb(206, 212, 218);
    }

    .grid-set-webprov.onefr .frame {
        padding-left: 5px;
    }
        .grid-set-webprov.onefr .sgrid-set-webprov-1 .left-column .popup-data .txt-info-label,
        .grid-set-webprov.onefr .sgrid-set-webprov-2 .right-column .popup-data .txt-info-label {
            justify-content: flex-start;
        }
        .grid-set-webprov.onefr .sgrid-set-webprov-1 .left-column .popup-data .txt-info-label {
            width: 100px;
            justify-content: flex-start;
            padding-right: 20px;
        }
.w-tt-tab {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    align-items: center;
}

.b-QrCodeKBank {
    width: 100%;
    padding: 4px 0px 4px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.w-btn-tab {
    display: flex;
    align-items: center;
}

.b-DepositsMode, .b-modal-DepositsMode {
    align-items: flex-start !important;
    border-top: 0.5px solid var(--Primary-3);
    margin-top: 1rem !important;
    padding-top: 1rem !important;
}

.width-Method {
    width: 100px;
}

.text-Language {
    margin-left: 5px;
    font-weight: bold;
    line-height: 14px;
}

.setting-Language {
    padding: 5px 10px;
    color: var(--Primary-4);
    border: 2px solid var(--Primary-3);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    width: 80px;
    align-items: center;
    justify-content: center;
}

    .setting-Language:hover {
        background-color: var(--Primary-2);
    }

.input-con {
    width: 50px;
    padding: 5.5px 0px;
    margin-left: 15px;
    margin-right: 50px;
    border: 0px;
    border-bottom: 1px solid;
    border-style: dashed;
    text-align: center;
}

    .input-con:hover {
        background-color: #f1f3f4;
        border-bottom: 0px;
        padding: 6px 0px;
    }

    .input-con:focus {
        width: 20%;
        padding: 5px;
        margin: 0px 15px;
        background-color: white;
        border: 1px solid #396aff;
        outline: 0;
        box-shadow: none;
        text-align: unset;
    }

.s-local {
    border-color: #dbe6f8;
    background-color: #dbe6f8;
    color: rgb(95, 99, 104);
    cursor: pointer;
}

    .s-local:hover {
        background-color: #f7f9ff;
    }

    .s-local:focus {
        background-color: #fff;
        box-shadow: 0 0 14px -9px rgba(0, 0, 0, 0.69);
    }

    .s-local:hover, .s-local:focus {
        border-color: #f7f9ff;
    }

@media screen and (max-width: 1825px) {
    .setting-url {
        height: auto !important;
    }

    .str-setting-default {
        display: flex;
        align-items: flex-start;
    }

    .t-setting-default {
        margin-top: 13px;
    }
}

@media screen and (max-width: 1440px) {
    .setting-b-div, .setting-b-div-color, .setting-b-div-Generals {
        width: 70%;
    }
}

@media screen and (max-width: 1290px) {
    .nav-main {
        overflow-x: scroll;
    }

        .nav-main::-webkit-scrollbar {
            -webkit-appearance: none !important;
            width: 7px !important;
            height: 3px !important;
        }

        .nav-main::-webkit-scrollbar-thumb {
            border-radius: 4px !important;
            height: 3px !important;
            background-color: rgba(0, 0, 0, .5) !important;
            box-shadow: 0 0 1px rgba(255, 255, 255, .5) !important;
        }

    .tab-set-slide {
        width: 900px;
    }
}

@media screen and (max-width: 1279px) {
    .tab-set-slide {
        width: auto;
    }
}

@media screen and (max-width: 985px) {
    .tab-set-slide {
        width: 900px;
    }
    /* set order prov*/
    .grid-set-webprov {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .sgrid-set-webprov-1 {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .sgrid-set-webprov-2 {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .grid-set-webprov .popup-data {
        justify-content: space-between;
    }

    .sgrid-set-webprov-1 .left-column .popup-data .frame {
        padding-left: 5px;
    }

    .sgrid-set-webprov-1 .left-column .popup-data .txt-info-label {
        width: 100%;
        justify-content: unset;
    }

    .sgrid-set-webprov-2 .right-column .popup-data .txt-info-label {
        justify-content: flex-end;
        width: 100%;
    }

    .sgrid-set-webprov-2 .left-column .popup-data .txt-info-label {
        justify-content: unset;
    }

    .sgrid-set-webprov-1 .right-column .popup-data .txt-info-label {
        width: 100%;
    }

    .sgrid-set-webprov-2 .left-column .popup-data .frame {
        width: 100%;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 928px) {
    .str-setting-default {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .t-setting-default {
        margin-top: unset;
    }

    .setting-b-div-Generals {
        width: 60%;
    }

    /*tournament*/
    .grid-2-column {
        display: block;
    }

    .tnm-b-sub {
        display: block;
    }

    .tnm-set-flex {
        margin-left: 0%;
        justify-content: center;
    }

    .tnm-reward-sub, .tnm-policy-sub {
        flex-direction: column;
    }

    .tnm-sub-reward {
        border-bottom: 1px solid #d1d1d1;
    }

    .tnm-sub-reward, .tnm-sub-policy {
        flex-direction: column;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .tnm-t-reward {
        padding-right: 3%;
    }

    .tnm-b-reward {
        padding: unset;
        display: flex;
        justify-content: flex-start;
        padding-right: 3%;
    }

    .tnm-bd-reward, .tnm-bd-policy {
        border-top: 1px solid #d1d1d1;
        padding-top: 10px;
        margin: 10px 0px;
        width: 100%;
    }

    .tnm-input-rank, .tnm-select-rank, .tnm-input-money {
        width: auto;
    }

    .tnm-policy-flex {
        width: 100%;
    }
}

@media screen and (max-width: 855px) {
    .setting-b-div, .data-Setting, .setting-b-div-color {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        margin-bottom: 5px;
    }

    .setting-b .box-color {
        width: 100%;
    }

    .setting-textbox {
        height: auto !important;
    }

    .box-generals.box-resetpass {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .sub-title-maintenance, .sub-title-maintenance-time {
        padding-top: 2rem;
    }

        .title-maintenance,
        .sub-title-maintenance span:nth-child(1) {
            font-size: 1.75rem;
        }

        .sub-title-maintenance span:nth-child(3) {
            font-size: 1.rem;
        }

        .sub-title-maintenance-time span {
            font-size: 1.25rem;
        }

        .sub-title-maintenance-time button {
            margin-top: 2rem;
        }

}

@media screen and (max-width: 767px) {
    .frame-payment {
        min-width: 100% !important;
    }
}

@media screen and (max-width: 651px) {
    .popup-frame {
        width: 100%;
        max-width: 100%;
        min-width: auto;
        margin-right: 16px;
        margin-left: 16px;
    }

    .content-wrapper .e-grid .e-table {
        border-collapse: separate;
        table-layout: fixed;
        width: 650px !important;
    }

    .data-popup {
        padding-top: 0px;
    }
}

@media screen and (max-width: 632px) {
    .tnm-w-sub {
        width: 40% !important;
    }
}

@media screen and (max-width: 575px) {
    .nav-sub {
        overflow-x: scroll;
    }

        .nav-sub::-webkit-scrollbar {
            -webkit-appearance: none !important;
            width: 7px !important;
            height: 3px !important;
        }

        .nav-sub::-webkit-scrollbar-thumb {
            border-radius: 4px !important;
            height: 3px !important;
            background-color: rgba(0, 0, 0, .5) !important;
            box-shadow: 0 0 1px rgba(255, 255, 255, .5) !important;
        }

    .tab-set-slide-sub {
        width: 575px;
    }
    /* set order prov*/
    .sgrid-set-webprov-1 .txt-info-label,
    .sgrid-set-webprov-2 .txt-info-label,
    .sgrid-set-webprov-1 .selectbox-popup,
    .sgrid-set-webprov-2 .selectbox-popup,
    .sgrid-set-webprov-1 .w-input,
    .sgrid-set-webprov-2 .w-input {
        font-size: 12px;
    }
}

@media screen and (max-width: 535px) {
    /* set order prov*/
    .grid-set-webprov,
    .grid-set-webprov.onefr .sgrid-set-webprov-1 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
        .grid-set-webprov.onefr .sgrid-set-webprov-1 .right-column .popup-data .txt-info-label {
            width: 100px;
        }
        .sgrid-set-webprov-1 {
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
        }

    .sgrid-set-webprov-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

        .sgrid-set-webprov-1 .right-column .popup-data .txt-info-label,
        .sgrid-set-webprov-2 .right-column .popup-data .txt-info-label {
            justify-content: unset;
        }
}

@media screen and (max-width: 479px) {
    .n-txt-info-label {
        max-width: 100% !important;
        width: 100% !important;
    }

    .pd-l-10 {
        padding-left: 0px !important;
    }

    .popup-data-2 {
        width: 100%;
        min-width: auto !important;
    }

    .b-modal-DepositsMode {
        border-top: unset !important;
        padding-top: unset !important;
    }

    .top-DepositsMode {
        margin-top: 1rem !important;
    }
}

@media screen and (max-width: 425px) {
    .setting-b-set-color {
        width: 50%;
    }

    .w-tt-tab {
        display: block;
    }

    .w-btn-tab {
        display: flex;
        padding: 15px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgb(119 119 119 / 25%);
    }
}

@media screen and (max-width: 415px) {
    .data-Setting-Generals {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .setting-b-div-Generals {
        width: 100%;
    }

    .b-DepositsMode {
        border-top: unset !important;
        padding-top: unset !important;
    }

    .top-DepositsMode {
        margin-top: 1rem !important;
    }
}

@media screen and (max-width: 375px) {
    .b-modal-res {
        width: 100% !important;
    }
}

.w-url {
    max-height: 36px;
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
}

.icon-copy {
    background-color: #eeeeee;
    padding: 6px;
}

.bkl {
    width: 430px !important;
}

.btn-use-disabled {
    color: #a7a7a7 !important;
    cursor: not-allowed !important;
}

.bank-channel.dropdown-menu {
    position: absolute !important;
    top: -26px !important;
    transform: translate3d(0px, 28px, 0px) !important;
    padding: 0 !important;
    border: 0px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 14px 9px rgba(74, 80, 100, 0.16);
}


.h-role {
    border-top: 1px solid #f1f1f1;
    padding: 10px 0;
    margin: 10px 0 0;
}

.txt-info-role {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 70%;
    max-width: 70%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(65%, hsla(0, 0%, 100%, 0)), to(#fff));
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 65%, #fff);
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color: #777;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
}
/*report*/
.info-title-dark {
    color: #293544;
}
.box-cal-layout {
    width: calc(100vw - 390px);
}

.b-context-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:120px;
}
    .b-context-item.b-string {
        min-width: 0;
    }

.b-context-item-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 120px;
}

.s-context {
    line-height: 0.8;
    padding-bottom: 4px;
    text-align: left;
}

.vh-center {
    display: flex;
    align-items: center;
}

.member-color {
    height: 12px;
    width: 12px;
    margin-left: 4px;
    border-radius: 2px;
}

.wordwrap {
    display: table-cell;
    overflow-wrap: break-word !important;
    width: auto;
    white-space: normal;
    line-height: 1;
}

.s-context .txt-ranking,
.s-context .txt-subtxt {
    font-size: 85%;
}

.txt-ranking.premium {
    color: #9F6AE1;
}

.txt-ranking.gold {
    color: #FDC079;
}

.g-border-fill {
    background-color: #E5EDFF;
    border-radius: 30px;
    padding: 4px 16px;
    width: fit-content;
}

.g-color-positive {
    color: #4FCFA7;
}

.g-color-negative {
    color: #F56363;
}

.g-color-blue {
    color: #396AFF;
}

.bghead-col {
    background: linear-gradient(180deg, #FFF 0%, #F9FBFE 100%);
    filter: drop-shadow(0px 4px 12px rgba(78, 106, 139, 0.30));
    margin-bottom: 20px;
}
.w-box-select {
    display: flex ;
    gap: 10px;
    flex-wrap: wrap;
}
    .w-box-select div{
        width: 200px;
        max-width: 100%;
    }
    .w-box-select div:nth-child(1) {
        width: 200px;
        max-width:100%;
    }
        .w-box-select div:last-child {
            width: auto;
            max-width: 100%;
        }
    button.btn-primary-search {
        font-weight: 500;
        height: fit-content;
        border-radius: 30px !important;
        background-image: linear-gradient(to top,#3767E2, #3F97E9);
        color: #fff;
        padding: 0.4rem 1.5rem;
    }

button.btn-primary-search:hover{
    background-image: linear-gradient(to top,#3F97E9, #3767E2);
}

.box-bet-detail {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.rp-link {
/*text-decoration:none;
*/
}
.rp-link:hover {
    font-weight: bold;
}

.ShowAmount .tooltiptext {
    visibility: hidden;
    text-align: center;
    display: contents;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 16px;
}

.ShowAmount:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}





.oldTaskBorad {
    margin-top: 20px;
    padding: 15px 17px;
    border-radius: 12px;
    background-color: #fff;
}
/*responsive new bo*/
@media screen and (max-width: 1280px) {
    .box-cal-layout {
        width: calc(100vw - 110px);
    }
}

@media screen and (max-width: 1174px) {
    .b-link > div > img {
        width: 100px !important;
    }
}

@media screen and (max-width: 1006px) {
    .b-movie > .grid-container {
        grid-template-columns: auto;
    }
}


@media screen and (max-width: 966px) {
    .b-link > div > img {
        width: 80px !important;
        margin-bottom: 0.5em !important;
        margin-left: 1em !important;
        margin-right: 1em !important;
    }

    .b-link {
        padding: 1em 0.5em !important;
    }

        .b-link > div {
            padding: 0 0.5em 0 1em !important;
        }
}

@media screen and (max-width: 942px) {
    .b-all-link {
        grid-column-gap: 1em;
        grid-row-gap: 2em;
    }

}@media screen and (max-width: 991px) {
    .w-box-select {
        display: grid;
        grid-template-columns: auto auto;
        column-row:0;
    }
        .w-box-select div,
        .w-box-select div:nth-child(1){
            width: auto;
        }
    .box-cal-layout {
        width: calc(100vw - 118px);
    }
}

@media screen and (max-width: 848px) {
    .t-total {
        font-size: 30px !important;
    }

    .b-all-link {
        display: grid !important;
        grid-template-columns: auto auto auto !important;
    }
}
@media screen and (max-width: 767px) {
    .box-cal-layout {
        width: calc(100vw - 50px);
    }
}
@media screen and (max-width: 714px) {
    .b-information {
        display: grid !important;
    }

    .b-all-link, .b-information {
        grid-template-columns: auto auto !important;
    }

}

@media screen and (max-width: 567px) {
    .b-footer {
        flex-direction: column !important;
    }

        .b-footer > div {
            justify-content: center !important;
        }
}

@media screen and (max-width: 522px) {
    .card-movie > img {
        width: 100px !important;
        margin-right: 1em !important;
    }

    .grid-container {
        grid-row-gap: 1em !important;
    }

    .t-movie {
        margin-bottom: 1em !important;
    }

    .b-movie {
        padding: 2em 2em !important;
    }
    .w-box-select {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

        .w-box-select div,
        .w-box-select div:nth-child(1) {
            width: 100%;
        }
}

@media screen and (max-width: 469px) {
    .b-all-link {
        grid-template-columns: auto !important;
        justify-content: center !important;
    }
   
}

@media screen and (max-width: 398px) {
    .t-type {
        font-size: 12px !important;
    }

    .b-detail > div {
        font-size: 16px !important;
    }

    .card-movie {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}


/*Customize responsive promotion*/
@media screen and (max-width: 1443px) {
    .res-pro > .tnm-b-sub > .tnm-div-sub > .data-popup {
        display: block;
    }

        .res-pro > .tnm-b-sub > .tnm-div-sub > .data-popup > .txt-info-label {
            margin: 0.5rem 0;
        }

        .res-pro > .tnm-b-sub > .tnm-div-sub > .data-popup:first-child > .txt-info-label {
            margin-top: 0;
        }
}

@media screen and (max-width: 928px) {
    .res-pro > .tnm-b-sub > .tnm-div-sub > .data-popup > .txt-info-label {
        margin: 0.5rem 0 !important;
    }
}

@media screen and (max-width: 479px) {
    .txt-info-label {
        margin: 0.5rem 0 !important;
    }

    .tnm-div-sub:first-child > .data-popup:first-child > .txt-info-label {
        margin-top: 0 !important;
    }
}

/* --- setting sound and language --- */
.res-mobile {
    display: none;
}

.res-desktop {
    display: block;
}

@media screen and (max-width: 856px) {
    .res-mobile {
        display: block;
    }

    .res-desktop {
        display: none;
    }
}

@media screen and (max-width: 1550px) {
    .structure_colorv2 {
        display: flex;
        flex-direction: column;
    }

    .structure_colorv2 > div:first-child {
        width: 100% !important;
    }
}