body {
    font-family: 'Work Sans', sans-serif !important;
    overflow-x: hidden;
    color: var(--main-black-color) !important;
}



:root {
    --main-black-color: #000;
    --main-white-color: #fff;
    --main-gold-yelow-color: #FBE382;
    --main-green-color: #90c340;
    --main-red-color: #ee5c36;
    --main-orange-color: #ee5c36;
}



/*menu*/


/* PEN STYLES ========== */
a,
.side_menu {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

/* MENU CONTAINER ----- */
.side_menu {
    background: linear-gradient(135deg, #fbe382 0%, #fff 99%);
    height: 100vh;
    left: -300px;
    position: fixed;
    top: 0;
    width: 300px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    padding: 75px 19px 0;
    z-index: 999;
}

.side_menu .container {
    padding: 0 1em;
}

.side_menu .logo {
    margin: 0 auto;
    display: block;
    text-align: center;
}
.prefx_dv{position: relative;
     overflow: hidden;}
.prefx_dv .prefix {
    font-weight: 300;
    font-size: 14px;
    color: #999;
    position: absolute;
    top: 18px;
    left: 20px;
}

.prefx_dv input {
    text-indent: 72px !important;
}

.list_item {
    margin-bottom: 10px;
}
.logo{text-align: left; width: 150px;}
.logo img {
    width: 100%;
}
.list_item a img {
    margin-right: 10px;
}

/* HAMBURGER STYLES ----- */
.head-left {
    display: flex;
}

.burger_box {
    z-index: 999999;
}

.burger_box a.menu-icon {
    display: inline-block;
    float: none;
    height: 43px;
    padding: 10px;

    width: 45px;
    z-index: 100;
}

.burger_box a.menu-icon:hover,
.burger_box a.menu-icon.opened {
    opacity: 1;
}

/*.burger_box a.menu-icon.opened {
        background: rgba(0,20,60,.9);
    }*/
.burger_box .menu-icon_box {
    display: inline-block;
    height: 25px;
    position: relative;
    text-align: left;
    width: 25px;
}

.burger_box .menu-icon_line {
    background: #000;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    position: absolute;
    width: 100%;
}

.burger_box .menu-icon_line--1 {
    top: 2px;
}

.burger_box .menu-icon_line--2 {
    top: 10px;
}

.burger_box .menu-icon_line--3 {
    top: 18px;
}

.burger_box .menu-icon_line--1 {
    transition: top 200ms 250ms, transform 200ms;
    -webkit-transition: top 200ms 250ms, -webkit-transform 200ms;
}

.burger_box .menu-icon_line--2 {
    transition: opacity 0ms 300ms;
    -webkit-transition: opacity 0ms 300ms;
}

.burger_box .menu-icon_line--3 {
    transition: top 100ms 300ms, transform 200ms;
    -webkit-transition: top 100ms 300ms, -webkit-transform 200ms;
}

.burger_box .menu-icon.opened .menu-icon_box {
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
}

.burger_box .menu-icon.opened .menu-icon_line {
    top: 10px;
}

.burger_box .menu-icon.opened .menu-icon_line--1 {
    transform: rotate3d(0, 0, 1, 45deg);
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transition: top 100ms, transform 200ms 250ms;
    -webkit-transition: top 100ms, -webkit-transform 200ms 250ms;
}

.burger_box .menu-icon.opened .menu-icon_line--2 {
    opacity: 0;
    transition: opacity 200ms;
    -webkit-transition: opacity 200ms;
}

.burger_box .menu-icon.opened .menu-icon_line--3 {
    transform: rotate3d(0, 0, 1, -45deg);
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transition: top 200ms, transform 200ms 250ms;
    -webkit-transition: top 200ms, -webkit-transform 200ms 250ms;
}

/* STAGGER LIST ----- */
.list_load {
    display: none;
    list-style: none;
    padding: 0;
}

.list_item {
    margin-left: -20px;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.list_lng a {
    color: #000;
    text-decoration: none;
}

.list_lng a:hover {
    text-decoration: none;
    color: #000;
}

.nzwh {
    background: #fff;
}

.drt {
    height: 500px;
    overflow: auto;
}

.user_pop {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 17px 0px;
   justify-content: space-between;
   
}
.trans-id {
    padding: 0 20px;
    width: 100%;
}
.seprate_cls {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-flow: row wrap;
}
.seprate_cls div{    width: 100%;
    border-bottom: 1px solid #bfbfbf;
    padding-bottom: 11px;
    margin-bottom: 10px;}
.pop-heading {
    display: flex;
    flex-direction: column;
    text-align: left;
    
}

.pop-heading span:first-child{font-weight: 600; font-size: 18px;}
.user_pop1 {
    background: #dcdcdc;
}
.pop-trans-detail .failed-name-tag {
    margin-right: 0;
}
.list_item a {
    color: #000;
    display: block;
    padding: 5px 10px;
    text-decoration: none;
}

.list_item a:hover {
    text-decoration: none;
    color: #000;
    letter-spacing: 1px;
}

.list_item:hover a img {
    transform: rotate(360deg);
    transition: .3s all ease
}



/*header-one*/
.head-bg {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(251, 227, 130, 0.3));
    padding: 40px 0;
}

/*select-country*/
.SelectBox {
    position: relative;
    width: 130px;
    height: 42px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
}

.SelectBox select {
    width: 130px;
    height: 42px;
    margin-bottom: 17px;
    padding: 0 5px;
    font-size: 25px;
    color: var(--main-black-color);
    cursor: pointer;
    -webkit-appearance: none;
    font-weight: 500;
    background: var(--main-gold-yelow-color);
    border: none;
}

.SelectBox .chevron {
    position: absolute;
    top: 8px;
    right: 18px;
    pointer-events: none;
}

.SelectBox select option {
    background: var(--main-gold-yelow-color);
    font-size: 20px;

}

/*choose-log*/
.choose-login {
    padding: 80px 0;
}

.choose-login h3 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 50px;
    text-align: center;
}

.c-log-box {}

.grad-one {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c99b3d+0,fbe382+50,c99b3d+99 */
    background: #c99b3d;
    /* Old browsers */
    background: -moz-linear-gradient(top, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c99b3d', endColorstr='#c99b3d', GradientType=0);
    /* IE6-9 */
}

.grad-two {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c99b3d+0,fbe382+50,c99b3d+99 */
    background: #c99b3d;
    /* Old browsers */
    background: -moz-linear-gradient(left, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c99b3d', endColorstr='#c99b3d', GradientType=1);
    /* IE6-9 */
}

.grad-three {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c99b3d+0,fbe382+50,c99b3d+99 */
    background: #c99b3d;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c99b3d', endColorstr='#c99b3d', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */

}

.c-log-box {
    border-radius: 10px;
    transition: .3s all ease
}

.c-log-box a {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-black-color);
    padding: 20px;

    font-size: 26px;
    font-weight: 600;
    height: 200px;
    box-shadow: 0 7px 11px rgba(132, 132, 132, 0.2);
    transition: .3s all ease
}

.c-log-box:hover {
    transform: scale(1.1);
    transition: .3s all ease
}

.c-log-box:hover a {
    color: var(--main-black-color);
    transition: .3s all ease;
    text-decoration: none
}

/*pre-register-left-head*/
.form-box-pre-register {
    position: relative;
    min-height: 647px;
}

.pre-register-left-head {
    padding: 100px 0;
}

.pre-register-left-head h1 {
    font-size: 77px;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    line-height: 69px;
}

.pre-register-left-head h1 span {
    font-size: 55px;
    text-transform: capitalize;
    font-weight: 600
}

.pre-register-left-head h1:after {
    position: absolute;
    border-bottom: 4px solid var(--main-gold-yelow-color);
    width: 338px;
    content: "";
    bottom: -10px;
    left: 0;
}

.join-app {
    margin-top: 28px;
}

.join-app p {
    font-size: 22px;
    font-weight: 600;
}

.join-app a {
    margin-right: 10px;
    transition: .3s all ease
}

.join-app a:hover img {
    box-shadow: 0 0 20px rgba(251, 227, 130, 0.5);
    transition: .3s all ease
}

.pre-register-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 80px;

}

.form-heading {
    position: relative;
    font-size: 30px;
    font-weight: 600;
    margin: 0 auto 36px;
}

.form-heading:after {
    width: 22px;
    height: 22px;
    background: var(--main-gold-yelow-color);
    content: "";
    position: absolute;
    border-radius: 100%;
    right: -7px;
    z-index: -1;
}

.pre-register-form form {
    width: 100%
}

.form-group label {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 14px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group input {
    height: 56px;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    text-indent: 14px;
}

.btn-grad {
    margin-top: 24px;
    width: 100%;
    border: none;
    font-size: 22px;
    font-weight: 600;
    font-size: 22px;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    box-shadow: 0 11px 38px -16px rgba(0, 0, 0, 0.3);
    transition: .3s all ease;
}

.btn-grad:hover {
    box-shadow: 0 11px 10px -16px rgba(0, 0, 0, 0.2);
    transition: .3s all ease;
}

.bg-img-phone {
    position: absolute;
    left: 25%;
    bottom: 0%;


    width: auto;
    text-align: center;
}

input::placeholder {

    color: var(--main-black-color) !important
}

.veri-input {
    display: flex;
    justify-content: space-between;
}

.veri-input input {
    width: 56px;
    height: 56px !important;
    border-radius: 10px;
    padding: 5px !important;
    font-size: 28px !important;
    color: var(--main-black-color) !important;
    text-align: center;
    text-indent: 0 !important;
}

.pre-register-form p {
    font-size: 15px;
    font-weight: 500;
}

.small-text {
    font-size: 15px;
    color: var(--main-black-color);
    font-weight: 500;
    transition: .3s all ease;
}

.small-text:hover {
    text-decoration: none;
    color: var(--main-black-color);
    letter-spacing: 1px;
    transition: .3s all ease;
}

.step-text {
    font-size: 16px;
    font-weight: 500;
    margin-top: 22px;
    display: block;
    width: 100%
}

.file-uploader label[for="file-input"] {
    padding: 10px 14px;
    justify-content: space-between;
    text-align: center;
    color: var(--main-gray-color);
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 114px;
    margin-bottom: 0 !important
}

.file-uploader #file-input {
    display: none;
}

.file-uploader label[for="file-input1"] {
    padding: 10px 14px;
    justify-content: space-between;
    text-align: center;
    color: var(--main-gray-color);
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 114px;
    margin-bottom: 0 !important
}

.file-uploader #file-input1 {
    display: none;
}

.filform-group {
    display: flex;
    align-items: flex-end;
}

.filform-group img {
    margin-right: 28px;
}

.pre-register-form form .fg-id {
    position: relative;
}

.pre-register-form form .fg-id img {
    position: absolute;
    top: 20px;
    right: 17px;
}

.main-option-thumb-box form .fg-id img {
    position: absolute;
    top: 21px;
    right: 17px;
}

.check-tearm {
    position: relative;
    margin-bottom: 10px;
}

.check-tearm input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.check-tearm label::before {
    content: '';
    -webkit-appearance: none;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c99b3d+0,fbe382+50,c99b3d+99 */
    background: #c99b3d;
    /* Old browsers */
    background: -moz-linear-gradient(top, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c99b3d', endColorstr='#c99b3d', GradientType=0);
    /* IE6-9 */
    border: none;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;

    width: 18px;
    height: 18px;
    margin-right: 20px;

}

.check-tearm input:checked+label::after {

    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid #000;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);

}

.SelectBox.ml-auto.select-new {
    width: 100% !important;
    box-shadow: none !important;
    height: auto !important;

}

.SelectBox.ml-auto.select-new select {
    width: 100% !important;
    background: #fff;
    height: 56px !important;
    border-radius: 10px;
    padding: 5px 5px 5px 14px !important;
    font-size: 16px !important;
    color: var(--main-black-color) !important;
    text-align: left;
    text-indent: 0 !important;
    border: 1px solid #ccc;
    margin-bottom: 0
}

/*home*/
.pro-card {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
    min-height: 198px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.pro-pic-box {
    display: flex;
    align-items: center;
}

.pro-card-pic {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 100%;
    border: 2px solid #fff;
    margin-right: 23px;
}

.pro-card-pic img {
    width: 100%;
        height: 100%;
        object-fit: fill;
}
.pro-pic-box h4 {
    font-weight: 600;
    font-size: 24px;
    width: 60%;
}
.requst_btn.refnt_btn{text-align: right;}

.banlance-card h6 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0
}

.banlance-card h5 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 0
}

.refresh {
    position: absolute;
    right: 18px;
    cursor: pointer;
}

.add-icon {
    position: absolute;
    bottom: 18px;
    right: 18px;
}

.ticket-top-home {
    border-radius: 15px;
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
    min-height: 198px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ticket-top-home a {
    width: 100%;
    min-height: 198px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.namebox-top-ticket {
    padding-left: 27px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: 22px;
}
.form-control{color: #000 !important}
.namebox-top-ticket h6 {
    color: var(--main-black-color);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 38px;
}

.arow-rt {
    width: 27px;
    height: 27px;
    border-radius: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 31px;
    bottom: 39px;
}
.arow-rt img{
    width: 100%;
}
.category {
    margin-top: 60px;
}

.cat-box {
    margin-bottom: 30px;
    overflow: hidden;
}

.cat-box a {
    width: 100%;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #EFEFEF;
    padding: 10px;
    border-radius: 8px;
    transition: .3s all ease
}

.cat-box a span {
    font-size: 16px;
    color: var(--main-black-color);
    margin: 13px 0 0 0;
    font-weight: 500;
    text-align: center;
}

.cat-box a:hover {
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: .3s all ease;
    transform: scale(1.1);
}

.section-head {
    font-size: 24px;
    color: var(--main-black-color);
    font-weight: 600;
    margin-bottom: 30px;
}

.comming {
    text-align: center;
}

.comming img {
    margin: 0 auto
}









/*page-heading*/
.page-heading {
    margin: 23px 0 55px;
}

.page-heading h2 {
    font-size: 54px;
    font-weight: 500;
    text-align: center;
}

.main-option-thumb-box {
    border: 1px solid #ECECEC;
    padding: 76px;
}

.option-thumb {
    box-shadow: 0 0 14px rgba(136, 136, 136, 0.1);
    border-radius: 24px;
    transition: .3s all ease
}

.option-thumb:hover {
    transform: scale(1.1);
    transition: .3s all ease
}

.option-thumb a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.option-thumb a span {
    font-size: 17px;
    color: var(--main-black-color);
    font-weight: 500;
    margin-top: 22px;
}

.card-form-group {
    display: flex;
    flex-direction: column;
}

.btn-one {
    margin-top: 15px;
}

.input-relative {
    position: relative;
}

.input-relative span {
    position: absolute;
    right: 10px;
    top: 16px;
}

.input-relative input {
    width: 100%;
}

.qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-box a {
    margin: 23px 0 0;
    color: var(--main-black-color);
    font-size: 24px;
    font-weight: 500;
}

.qr-box a img {
    margin-left: 10px;
}

.para-qr {
    font-size: 26px;
    font-weight: 500;
    margin-top: 75px;
}

.recharge-comp-card {
    width: 179px;
    border: 1px solid #EFEFEF;
    margin: 0 15px 20px;
    border-radius: 8px;
    overflow: hidden;

}

.recharge-comp-card a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%
}

.recharge-comp-card img {
    margin: 0 auto
}

.sub-title {
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    margin-top: 15px;
}

.recharge-box {
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 10px;

    margin: 20px 0;
    transition: .3s all ease
}

.recharge-box:hover {
    background: #F6EA98;
    transition: .3s all ease
}

.recharge-box a {
    padding: 20px;
    ;
    display: block;
    color: var(--main-black-color)
}

.recharge-box a:hover {
    color: var(--main-black-color)
}

/*agents*/
.agent-box {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 95px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
    transition: .3s all ease
}

.agent-box:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: .3s all ease
}

.agent-detail-small {
    display: flex;
    align-items: center;
    width: 100%;
    flex-flow: row wrap;
    margin-top: 21px;
}

.agent-pic {
    width: 58px;
    height: 58px;
    border-radius: 100%;
    overflow: hidden;
    margin-right: 15px;
    margin-left: 10px;
}

.agent-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-namebox h5 {
    font-size: 14px;
    font-weight: 500;
}

.agent-namebox h6 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0
}

.get-direction {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--main-black-color);
}

.get-direction:hover {
    color: var(--main-black-color)
}

.km {
    font-size: 12px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--main-black-color);
}

.profile-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 46px;
}

.dp-box {
    width: 158px;
    height: 158px;
    border-radius: 100%;
    overflow: hidden;
    border: 2px solid #DEC164;
    margin-bottom: 23px;
}

.dp-box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.profile-detail h4 {
    font-size: 40px;
    text-align: center;
}

.profile-detail span {
    font-size: 27px;
}

.profile-detail span img {
    margin-right: 10px;
}

.setting-link {
    display: flex;
    align-items: center;
    padding: 18px;
    border: 1px solid #D4D4D4;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--main-black-color);
    transition: .3s all ease
}

.setting-link:hover {
    color: var(--main-black-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: .3s all ease
}

.setting-link img {
    margin-left: 20px;
    margin-right: 10px;
}

/*notification*/
.notification-box {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-flow: row wrap;
}

.notification-box .d-flex {
    align-items: center;
    padding: 0
}

.notification-box .d-flex img {
    margin-right: 15px;
    width: 40px;
}

.notification-box .d-flex p {
    margin-bottom: 0;
    font-size: 14px;
}

.noti-date {
    color: #777777;
    font-size: 11px;
}

.notification-box .text-right {
    padding: 0
}

/*history*/
.history-name-box {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.history-box-main {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.history-box-main .col-sm-4 {
    padding: 0
}

.history-box-main .col-sm-8 {
    padding: 0
}

.his-head {
    margin-bottom: 28px;
    font-size: 19px;
}

.mb-40 {
    margin-bottom: 40px;
}

.name-tag {
    width: 68px;
    height: 68px;
    background: var(--main-gold-yelow-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    margin-right: 26px;
}
.name-tag i{font-size: 18px;}
.success-name-tag {
    background: var(--main-green-color);
    color: #fff;
}
.pending-name-tag {
    background: var(--main-orange-color);
    color: #fff;
}
.failed-name-tag {
    background: var(--main-red-color);
    color: #fff;
}
.history-name {
     width: 75%
}
.col-sm-10.m-auto.setting_sec .head_msg {
    text-align: center;
    font-size: 18px;
    width: 52%;
    display: block;
}
.main-option-thumb-box .content {
    text-align: center;
    margin-top: 15px;
}
.history-name h6 {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 400;
}

.history-name span {
    color: #A6B1C0;
    font-size: 12px;
}

.history-detail span {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.history-detail small {
    display: block;
    font-size: 11px;
    color: #A6B1C0;
}

.history-detail .green {
    color: green
}

.history-detail .red {
    color: red
}

.history-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trans-head {
    display: flex;
    justify-content: space-between;
}

.trans-head a {
    color: #787878;
    font-size: 16px;
    font-weight: 500;
}

.home-history .name-tag {
    width: 46px;
    height: 46px;
    font-size: 16px;
    margin-right: 0px
}

.history-box-main.home-history {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.history-box-main.home-history:last-child {
    border-bottom: 0
}

.p-left {
    padding-left: 40px !important;
}
.success {
    text-align: center;
    padding: 70px 0;
}

/*popup-pin*/
.modal-body h1 {
  font-weight: 900;
  font-size: 2.3em;
  text-transform: uppercase;
}
.modal-body a.pre-order-btn {
  color: #000;
  background-color: gold;
  border-radius: 1em;
  padding: 1em;
  display: block;
  margin: 2em auto;
  width: 50%;
  font-size: 1.25em;
  font-weight: 6600;
}
.modal-body a.pre-order-btn:hover {
  background-color: #000;
  text-decoration: none;
  color: gold;
}
.pin-box {
    background: #fff;
    padding: 30px;
    text-align: center;
}

.pin-top{padding: 0 20px;}
.pin {
    border: 1px solid #CCC;
    width: 150px;
    padding: 8px 8px;
    border-radius: 10px;
    font-size: 24px;
    letter-spacing: 7px;
    margin: 0 auto 20px;
}
.pin-box .input-group {
    display: flex;
    justify-content: space-between;
    padding: 21px 60px;
}
.pin-box .input-group input{width: 54px;
height: 54px;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
font-size: 20px;
margin: 0 7px;}
.modal-content .btn-grad{border-radius: 0px !important;}
.modal-dialog {
    height: 100%;
    display: flex;
    align-items: center;
}
.mod-cancel {
    width: 50%;
    background: #000 !important;
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    height: auto !important;
    padding: 14px; 
    font-size: 22px !important;
    line-height:inherit !important; 
}
.modal-dialog .btns-pop{align-items: flex-end;}
.modal-dialog .btns-pop button{font-size: 14px !important;}
.modal-dialog .btns-pop .btn-grad {padding:10px 0; margin: 0; width: 50%;font-size: 14px; } 
.redirect-box{display: flex;justify-content: space-between; margin-top: 10px; width: 100%}
.redirect-box a{color: #000;}
.redirect-box a:hover{color: #000}

.redirect-box1 a{color: #000;}
.redirect-box1 a:hover{color: #000}
/*payment-page*/

.order-summery table {
    width: 100%;
}
.order-summery table th {
    width: 100%;
    background: var(--main-gold-yelow-color);
    padding: 10px;
     border: 1px solid #f7eec9;
     text-align: center;
}
.order-summery table td {
    border: 1px solid #f7eec9;
    padding: 10px;
    text-align: center;
}
.qr-box-payment {
    padding: 30px;
    box-shadow: 0 0 19px rgba(0,0,0,0.1);
    border-radius: 15px;
    margin-top: 50px;
    text-align: center;
    margin-bottom: 30px;
}
.qr-box-payment h4{margin-bottom: 20px;font-size: 27px;}

.log-payment-box {
     padding: 30px;
    box-shadow: 0 0 19px rgba(0,0,0,0.1);
    border-radius: 15px;
    margin-top: 50px;
     margin-bottom: 50px;
}
.qr-inner{margin: 20px 0}

.log-payment-box h5 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}
.thank-msg{text-align: center;}
.thank-msg a{color: var(--main-black-color); border-bottom: 1px solid}
.thank-msg a:hover{text-decoration: none; color: var(--main-gold-yelow-color)}
.qr-box-payment ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    color: #acacac;
    text-align: center;
}
.ee {width: 100%;}
.form-signin .form-group label.error { color: red; display: inline-block; padding: 5px 0px; width: 100%;margin-bottom: 0px;}
.form-signin .form-group input.error{border: 1px solid red !important;}
.form-signin .form-group textarea.error{border: 1px solid red !important;}

.border-form .form-group label.error { color: red; display: inline-block; padding: 5px 0px; width: 100%;margin-bottom: 0px;}
.border-form .form-group input.error{border: 1px solid red !important;}

.form-group label.error { color: red; display: inline-block; padding: 5px 0px; width: 100%;margin-bottom: 0px;}

.border-form .veri-input input.error{border: 1px solid red !important;}
.border-form .veri-input label.error { display: none !important;}

.logot_btn{
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #000;
    text-decoration: none;
    margin-bottom: 30px
}

.requst_btn {
    font-size: 12px;
    /* position: absolute; */
    color: var(--main-black-color);
    width: 100%;
    margin: 15px 0;
    text-align: center;
}
.requst_btn span{
    padding: 6px;
    background: linear-gradient(to right, #c99b3d 0%, #fbe382 50%, #c99b3d 99%);
    cursor: pointer;
box-shadow: 0 11px 38px -16px rgba(0, 0, 0, 0.3);
transition: .3s all ease;
border-radius: 10px;
color: #000;
}

.requst_btn a{
    color: #000;
    text-decoration: none;
    letter-spacing: 1px;
}
.requst_btn a:hover {
    text-decoration: none;
    color: #000;
    letter-spacing: 1px;
}

.gcerror {
    font-size: 15px;
    color: #f00;
    font-weight: 500;
    margin-top: 3px;
}
.pagination .page-item.active .page-link{background-color: var(--main-gold-yelow-color) !important;color: #000;
    border-color: var(--main-gold-yelow-color) !important;}
.pagination .page-link{color: #000}
.bdclass .prefx_dv .prefix {
    font-weight: 300;
    font-size: 14px;
    color: #999;
    position: absolute;
    top: 18px;
    right: 20px;
}
.bdclass .prefx_dv input {
     padding-right: 66px;
}
.bdclass .setting-link {
    display: flex;
    padding: 18px;
    border: 1px solid #D4D4D4;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--main-black-color);
    transition: .3s all ease;
    flex-direction: row-reverse;
    align-items: center;
}
.overlay-soon{position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    top: 0;
    left: 0;
    background: rgba(257,257,257,0.7);}



.redirect-box1 {
    margin-top: 10px;
}


div#transModal1539 {
    z-index: 999999999;
}

.mobile_set{display: none;}
a.menu-icon.js-menu_toggle.opened {
    position: fixed;
    left: 0;
    top: 10px;
}
.fg-id {
    position: relative;
}