html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
body {
    margin-bottom: 20px;
    /* font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';*/
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size:15px;
}
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}
.font-weight-100 {
    font-weight: 100 !important;
}
.font-weight-200 {
    font-weight:200;
}
.font-weight-300 {
    font-weight: 300;
}
.font-weight-400 {
    font-weight: 400;
}
.font-weight-600 {
    font-weight: 600;
}
.font-weight-700 {
    font-weight: 700;
}
.font-weight-900 {
    font-weight: 900;
}
.font-size-20 {
    font-size:20px !important;
}
.font-size-16 {
    font-size:16px !important;
}
.font-size-15 {
    font-size: 15px !important;
}
.font-size-14 {
    font-size: 14px !important ;
}
.font-size-13 {
    font-size: 13px !important;
}
.font-size-12 {
    font-size: 12px !important;
}

.padding-15 {
     padding:0 15px;
}
.padding-20 {
    padding: 0 20px;
}

.mt-8-rem {
    margin-top: 0.8rem !important;
}

.mb-7-rem {
    margin-bottom: 0.7rem !important;
}

.forncolor {
    color: coral;
}
.btn-height {
    height:50px;
}
.container-padding-2{
    padding:2px;
}
.container-padding-10 {
    padding: 0px 10px;
}
.mb-8 {
    margin-bottom: 5rem !important;
    padding-bottom: 30px;
}
.col-group-botton {
    margin-bottom: 5.5rem !important;
}


/*.line-height-initial {
    line-height: inherit;
}*/
/*Login*/
#login .layout-logo {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 10vh auto;
}
#login .img-logo {
    width: 200px;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
    display:block;

}
#login .container-logo {
    text-align: center !important;
}

#login .main-input {
    padding: 0px 0px 0px 42px;
    background: #ffffff 13px 13px no-repeat;
    background-image: url("/img/Tel.png"), url("~/img/Tel.png"),url("../img/Tel.png");
    background-size: 16px 16px;
    -webkit-appearance: none;
}
    #login .input-tel[type="tel"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    width: 20px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=) no-repeat;
    background-size: 10px 10px;
}

#login .input-tel {
    border-radius: 25px;
    border: 1px solid #CACACA;
    height: 43px;
    width: 100%;
    color: #F15C22;
}

    #login .input-tel::placeholder {
        color: #FCCBB1;
    }

    #login .input-tel:focus {
        outline: 0;
    }

#login .btn-login {
    font-size: 16px;
    border-radius: 25px;
    padding: 5px 0px 5px 0px;
    background: #FF6C26;
    border: 2px solid #FF6C26;
    color: #FFFFFF;
    box-shadow: 1px 1px 15px rgb(0 0 0 / 10%);
    width:100%;
}

    #login .btn-login:focus {
        box-shadow: none;
    }

    #login .btn-login:hover {
        color: #ffffff;
    }

#login .footer-help {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 10px 0px 0px 0px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#login .img-padding {
    padding: 0px 0px 30px 0px;
}

#login .footer-img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 200px;
}

#login .size-img-no-order {
    height: 120px;
    width: 120px;
}
#login .footer-alert {
    display: flex;
    position: fixed;
    bottom: 60px;
    width: 100%;
    padding: 0px 10px 25px 10px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#login .progress-bar-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #F95900;
    transition: width .6s ease;
}
#login .bg-gif {
    background-color: #ffffff;
    /*background-color: rgba(0,0,0,0.4);*/
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow: hidden;
}
#login .gif-loadering {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    display: flex;
    justify-content: center;
}
#login .gif-loadering-logo {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}
#login .progress {
    display: flex;
    height: 0.6rem;
    width: 250px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
}
#login .gif-loadering-SNS {
    position: absolute;
    bottom:3%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}
#login .img-sns {
    width:180px;
}

@media only screen and (min-height: 0px) and (max-height: 550px) {
    #login .footer-help {
            display: contents;
            position: fixed;
            bottom: 0px;
            width: 100%;
            padding: 10px 0px 0px 0px;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
        }

        #login .img-padding {
            padding: 0px 0px 20px 0px;
        }
    }

#registeroffline .layout-logo {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 10vh auto;
}

#registeroffline .img-logo {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#registeroffline .container-logo {
    text-align: center !important;
}

#registeroffline .main-input-sccode {
    padding: 0px 0px 0px 42px;
    background: #ffffff 13px 13px no-repeat;
    background-image: url("/img/ScCode.png"), url("~/img/ScCode.png"),url("../img/ScCode.png");
    background-size: 16px 16px;
    -webkit-appearance: none;
}
#registeroffline .main-input-membercard {
    padding: 0px 0px 0px 42px;
    background: #ffffff 13px 13px no-repeat;
    background-image: url("/img/MembercardID.png"), url("~/img/MembercardID.png"),url("../img/MembercardID.png");
    background-size: 16px 16px;
    -webkit-appearance: none;
}

#registeroffline .input-tel[type="tel"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    width: 20px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=) no-repeat;
    background-size: 10px 10px;
}

#registeroffline .input-tel {
    border-radius: 25px;
    border: 1px solid #CACACA;
    height: 43px;
    width: 100%;
    color: #F15C22;
}

    #registeroffline .input-tel::placeholder {
        color: #FCCBB1;
    }

    #registeroffline .input-tel:focus {
        outline: 0;
    }

#registeroffline .btn-login {
    font-size: 16px;
    border-radius: 25px;
    padding: 5px 0px 5px 0px;
    background: #FF6C26;
    border: 2px solid #FF6C26;
    color: #FFFFFF;
    box-shadow: 1px 1px 15px rgb(0 0 0 / 10%);
    width: 100%;
}

    #registeroffline .btn-login:focus {
        box-shadow: none;
    }

    #registeroffline .btn-login:hover {
        color: #ffffff;
    }

#registeroffline .footer-help {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 10px 0px 0px 0px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#registeroffline .img-padding {
    padding: 0px 0px 30px 0px;
}

#registeroffline .footer-img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 200px;
}

#registeroffline .size-img-no-order {
    height: 120px;
    width: 120px;
}

#registeroffline .footer-alert {
    display: flex;
    position: fixed;
    bottom: 60px;
    width: 100%;
    padding: 0px 10px 25px 10px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

#registeroffline .progress-bar-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #F95900;
    transition: width .6s ease;
}

#registeroffline .bg-gif {
    background-color: #ffffff;
    /*background-color: rgba(0,0,0,0.4);*/
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow: hidden;
}

#registeroffline .gif-loadering {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    display: flex;
    justify-content: center;
}

#registeroffline .gif-loadering-logo {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

#registeroffline .size-head {
    font-weight: 400 !important;
    margin-bottom: 0;
    font-size: 15px;
}
#registeroffline .progress {
    display: flex;
    height: 0.6rem;
    width: 250px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
}

#registeroffline .gif-loadering-SNS {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

#registeroffline .img-sns {
    width: 180px;
}
#registeroffline .navbar-default {
    padding: 10px 0px;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    background-color: #FFFF;
    margin-bottom: 0.1rem !important;
}

@media only screen and (min-height: 0px) and (max-height: 550px) {
    #registeroffline .footer-help {
        display: contents;
        position: fixed;
        bottom: 0px;
        width: 100%;
        padding: 10px 0px 0px 0px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    #registeroffline .img-padding {
        padding: 0px 0px 20px 0px;
    }
}

@media only screen and (min-width: 768px) {
    #registeroffline .container-main.container {
        max-width: 540px
    }

    #registeroffline .footer-container {
        max-width: 540px;
    }
}
    /*otp*/
    #otp .navbar-default {
    padding: 10px 0px;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    background-color: #FFFF;
    margin-bottom: 0.1rem !important;
}

#otp i.back-green {
    font-size: 30px;
    color: #F15C22;
}

#otp .size-head {
    font-weight: 400 !important;
    margin-bottom: 0;
    font-size: 15px;
}

#otp .container-otp {
    width: 100%;
    max-width: 315px;
    padding: 15px;
    margin: 3vh auto;
}

#otp .img-otp {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90px;
    height: 90px;
}

#otp .color-samp-otp {
    color: #F75600;
}

#otp .digit-group {
    display: flex;
    justify-content: space-evenly;
}
    #otp .digit-group input {
        width: 37px;
        height: 45px;
        text-align: center;
        font-size: 23px;
        font-weight: 500;
        margin: 0 3px;
        border: 1px solid #DEE2E6;
        outline: none;
        color: #F75600;
        border-radius:0;
    }

#otp .p-resend {
    margin-bottom: 1rem;
    color: #8898AA;
}

#otp .layout-test-otp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#otp .color-otp-fail {
    color: #F75600;
}

#otp .border-focus {
    border: 1px solid #FF9A68 !important;
}

#otp .nocursor {
    caret-color: transparent;
    -webkit-text-fill-color: transparent;
}
/*Register*/
#register {
    background-color: #F5F5F5;
}

    #register .navbar-default {
        padding: 10px 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }

    #register i.back-green {
        font-size: 30px;
        color: #F15C22;
    }
    #register input::-webkit-date-and-time-value {
        text-align: left;
    } 

    #register .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }

    #register .form-group {
         margin-bottom: 0rem; 
    }

    #register .bg-color-img {
        padding: 30px 0;
        background-color: #FFFF;
    }

    #register .img-user {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50%;
        height: 100px;
        width: 100px;
    }

    #register .bg-color-white {
        background-color: #FFFF;
    }

    #register .col-group {
        margin-bottom: 0.1rem !important;
    }

    #register .padding-group {
        padding: 10px 0px 6px 0px;

    }

    #register input.input-text {
        color: #F75600;
    }

    #register input.input-text:focus {
        outline: 0;
        color: #F75600;
    }

    #register .input-text {
        border: 0px solid #CACACA;
    }

        #register .input-text:focus {
            box-shadow: none;
        }

        #register .input-text::placeholder {
            color: #FCCBB1;
        }

    #register .color-necessary {
        color: #F75600;
    }
    #register .footer-submit {
        display: flex;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background-color: #ffffff;
        padding: 0px 10px 25px 10px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    #register .btn-color-orange {
        background-color: #F75600 !important;
        color: #FFFF;
    }

        #register .btn-color-orange:hover {
            background-color: #F75600 !important;
            color: #FFFF;
        }
    #register .btn.btn-color-orange {
        border-radius: 5px;
    }

    #register select.input-select {
        color: #F75600;
    }

        #register select.input-select:focus {
            box-shadow: none;
            outline: 0;
            color: #F75600;
        }
    #register input.input-select {
        color: #F75600;
    }

        #register input.input-select:focus {
            outline: 0;
            color: #F75600;
        }

    #register .input-select {
        border: 0px solid #CACACA;
    }

        #register .input-select:focus {
            box-shadow: none;
        }

        #register .input-select::placeholder {
            color: #FCCBB1;
        }

    #register .custom-select {
        background: #fff no-repeat right .75rem center;
        background-image: url(/img/Next.png),url(../img/Next.png) !important;
        background-size: 20px 20px;
        background-position-y: top;
    }

    #register .form-control {
        padding: 0rem 0.75rem 0rem 0rem;
    }


    #register input[type="date"]::-webkit-calendar-picker-indicator {
        background: none;
    }

    #register .input-date {
        position: relative;
    }

    #register .padding-top-20 {
        padding-top: 0.4rem !important;
    }


#register .text-label {
    margin-bottom: 0rem;
}
    #register button.btn:focus {
        box-shadow: none;
        outline: 0;
    }

    #register .button-next {
        position: absolute;
        padding: 1px;
        top: 0px;
        bottom: 0;
        right: 20px;
        border: 0;
        background-color:#FFFFFF;
    }

    #register .modal-select-option {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    #register .text-gender-padding {
        color: #F75600;
        margin: 0;
        padding-top: 0.485rem;
        padding-bottom: 0.485rem;
    }

    #register .text-gender-padding-hidden {
        border: 1px solid #ced4da;
        background: #e9ecef;
        border-radius: .25rem;
        color: #212529;
        margin: 0;
        padding-top: 0.485rem;
        padding-bottom: 0.485rem;
    }
    #register .btn-modal-hidden {
        display:none;
    }

    #register #ModalProvince ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    #register #ModalDistrict ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    #register #ModalSubDistrict ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    #register .modal-body-p-0 {
        padding:0;
    }

    #register .modal-header {
        border-bottom: 0px solid #dee2e6;
    }

    #register .footer-alert {
        display: flex;
        position: fixed;
        bottom: 60px;
        width: 100%;
        padding: 0px 10px 25px 10px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    #register .alert-info-null {
        width: 100%;
        color: #4e4e4e;
        background-color: #FFFFFF;
        border-color: #e2e2e2;
    }






/*welconme*/
#main.bg-welcome {
    background: linear-gradient(to bottom, #FFF6F3 40%, #FFF6F3 0%, #ffffff 50%) fixed;
}
#main.bg-main {
    background-color: #F5F5F5;
}
#main .card-border-info-ing {
    border: 0px solid rgba(0,0,0,.125);
}
#main .card-border-info-body {
    border: 1px solid rgba(0,0,0,.125);
}

.cut-text {
    white-space: nowrap;
    width: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.welconme-img {
    background-image: url("~/img/background.png"),url(/img/background.png),url(../img/background.png);
}
#welconme .bg-image {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#welconme .footer-submit {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 0px 10px 20px 10px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    
}
#welconme .btn-color-orange {
    
    background-color: #F75600 !important;
    color: #FFFF;
}

        #welconme .btn-color-orange:hover {
            background-color: #F75600 !important;
            color: #FFFF;
        }

    #welconme .btn.btn-color-orange {
        border-radius: 5px;
    }

#welconme .container-welcome {
    position: fixed;
    top: 46.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
}
@media only screen and (min-width: 768px) {
    #welconme .btn-color-orange {
        
        width:520px;
        background-color: #F75600 !important;
        color: #FFFF;
    }
}



/*main*/
#main .navbar-default {
    padding: 10px 0px;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    background-color: #FFFF;
    margin-bottom: 0.1rem !important;
}
#main button:focus {
    box-shadow: none;
}

#main .border-radius-15 {
    border-radius:15px;
}

#main .size-head {
    font-weight: 400 !important;
    margin-bottom: 0;
    font-size: 15px;
}
#main .layout-text-head {
    transform: translate(-50%, -50%);
    left: 49%;
    position: absolute;
    top: 32px;
    /*margin-left: 9vw;*/
}
#main .img-profile {
    width: 40px;
    height: 40px;
}

#main .card-img-out {
    width: 100%;
    height: 17rem;
    border-radius: 15px;
}

#main .card-img-in {
    width: 35px;
    height: 35px;
}

#main .layout-top {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
}

#main .caedtext {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 11px;
}
#main .boxcolor {
    background-color: rgba(255, 255, 255, 0.8);
}

#main .boxcard {
    border-radius: 5px;
}

#main .body-text-container {
    
    border-left: 1px solid coral;
}

#main .body-text-right {
}

#main .body-text-left {
}

#main .layout-body-text {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
}
#main .size-img-main {
    border: 2px solid #FCCBB1;
    background-color: white;
    color: black;
    border-radius: 10px;
    padding: 10px;
    height: 18vw;
    width: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}
#welconme .img-welcome {
    width: 33vw;
    height: 85vh;
    padding: 20px;
}

#main, #mycoupon .img-info {
    width: 100%;
    height: 260px;
}
    #main a {
        color: #404040;
        text-decoration: none;
    }
        #main a:hover {
            color: #404040;
            text-decoration: none;
        }
    #main .card-border-info-body.card-body {
        flex: 1 1 auto;
        padding: 0.5rem 0.5rem;
    }

@media only screen and (min-width: 677px) and (max-width: 767px) {
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 120.91px;
        width: auto;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

@media only screen and (min-width: 625px) and (max-width: 676px) {
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 118.75px;
        width: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 590px) {
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 20.5vw;
        width: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}
@media only screen and (min-width: 591px) and (max-width: 599px) {
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 20.5vw;
        width: auto;
        margin-top: 12px;
        margin-bottom: 12px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 624px) {
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 19.5vw;
        width: auto;
        margin-top: 12px;
        margin-bottom: 12px;
    }
}
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #main .size-img-main {
        border: 1px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 1px;
        height: 20.5vw;
        width: 21.3vw;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}
@media only screen and (min-width: 768px) {
    #main .container-main.container {
        max-width: 540px
    }
    #main .size-img-main {
        border: 2px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 5px;
        padding: 5px;
        height: 120px;
        width: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #main .card-img-in {
        width: 45px;
        height: 45px;
    }
}
@media only screen and (min-width:0px) and (max-width:320px) {

    #welconme .img-welcome {
        width: 20.5rem;
        height: 28rem;
        padding: 20px;
        margin: 5px;
    }
    #welconme .container-welcome {
        position: fixed;
        top: 43.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
}
@media only screen and (min-width:321px) and (max-width:360px) {

    #welconme .img-welcome {
        width: 26rem;
        height: 36rem;
        padding: 20px;
        margin: 5px;
    }

}
@media only screen and (min-width:361px) and (max-width:899px) {

    #welconme .img-welcome {
        width: 29rem;
        height: 40rem;
        padding: 20px;
        margin: 5px;
    }

    #welconme .container-welcome {
        position: fixed;
        top: 46.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
}
@media only screen and (min-width:900px) and (max-width:1500px) {

    #welconme .img-welcome {
        width: 30rem;
        height: 40rem;
    }

    #welconme .container-welcome {
        position: fixed;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
}


/*NewsFeed*/
#newsfeed {
    background-color: #FFFFFF;
}

    #newsfeed .navbar-default {
        padding: 0.86rem 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }

    #newsfeed .img-profile {
        width: 40px;
        height: 40px;
    }

    #newsfeed i.back-green {
        font-size: 30px;
        color: #F15C22;
    }

    #newsfeed .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }

    #newsfeed .border-radius-0 {
        border-radius: 0;
    }

    #newsfeed .margin-bottom-0 {
        margin-bottom: 0
    }

    #newsfeed .card-body-padding {
        padding: 0.1rem 0.3rem 0.3rem 0.3rem;
    }

    #newsfeed .card {
        border: 0px solid rgba(0,0,0,.125);
    }

    #newsfeed .text-header-center {
        margin-right: 0px;
    }

    #newsfeed .color-list-head {
        color: #404040 !important;
    }

    #newsfeed .color-list {
        color: #A2A2A2;
    }

    #newsfeed .p-text-list {
        margin-bottom: 0rem;
    }

    #newsfeed .p-text-margin-top {
        margin-top:1rem;
    }

    #newsfeed .border-bottom-readeemlist {
        border-bottom: 1px solid #F6F6F6 !important;
    }

    #newsfeed .modal-lists-footer {
        background: linear-gradient( to right, #F75600 0%, #F75600 50%, #D8D8D8 50%, #D8D8D8 100% );
        border-radius: 0px 0px 14px 14px;
    }

    #newsfeed .text-model-body {
        margin-bottom: 0rem;
    }

    #newsfeed .madal-model-body {
        margin-top: 30px;
        margin-bottom: 25px;
    }

    #newsfeed .modal-content {
        border-radius: 15px;
    }

    #newsfeed.modal-open .modal {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    #newsfeed .center-color {
        border-left: 2px solid coral;
    }

    #newsfeed button:focus {
        box-shadow: none;
    }

    #newsfeed .color-confirm {
        color: #F75600;
    }

    #newsfeed .color-cancel {
        color: #404040;
    }

    #newsfeed .color-text-modal-list {
        color: #404040;
    }

    #newsfeed .madal-model-body-list {
        margin: 0;
    }

    #newsfeed .color-secret-code {
        color: #F75600;
    }

    #newsfeed .img-barcode {
        width: 200px;
        padding: 15px 0px 15px 0px;
        margin: 0 auto;
        display: block;
    }

    #newsfeed .col-btn-list-6 {
        flex: 0 0 auto;
        width: 50%;
        text-align: center;
        height: 40px;
    }

    #newsfeed .modal-footer-btnlist {
        border-radius: 0px 0px 14px 14px;
        background: linear-gradient( to right, #F75600 0%, #F75600 50%, #D8D8D8 50%, #D8D8D8 100% );
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1px 5px;
        margin: 0;
    }

    #newsfeed .btn-size-list {
        width: 100%;
        height: 100%;
    }

    #newsfeed .color-mycoupons-list {
        color: #ffffff;
    }

    #newsfeed .color-cancel-list {
        color: #727272;
    }

    #newsfeed .modal-footer-btnconfirm {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1px;
        margin: 0;
    }

    #newsfeed .col-btn-confirm-6 {
        flex: 0 0 auto;
        width: 50%;
        text-align: center;
        height: 40px;
        margin: 0.1rem;
    }

    #newsfeed .border-left-1 {
        border-left: 1px solid #E6E6E6 !important;
    }

    #newsfeed .btn-width-cancel {
        width: 100%;
        min-width: 100%;
        height: 40px;
    }

    #newsfeed .total-number {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        color: #A2A2A2;
    }
    #newsfeed .img-barcode {
        width: 200px;
        padding: 15px 0px 15px 0px;
        margin: 0 auto;
        display: block;
    }




@media only screen and (min-width: 0px) and (max-width: 320px) {
    #newsfeed .img-info-model-list {
        width: 100%;
        height: 11.8rem;
    }
}

@media only screen and (min-width: 321px) and (max-width: 425px) {
    #newsfeed .img-info-model-list {
        width: 100%;
        height: 13rem;
    }
}

@media only screen and (min-width: 0px) and (max-width: 320px) {
    #newsfeed .modal-dialog {
        max-width: 300px;
        margin: 1.75rem auto;
    }
}

@media only screen and (min-width: 321px) and (max-width: 576px) {
    #newsfeed .modal-dialog {
        max-width: 350px;
        margin: 1.75rem auto;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    #newsfeed .container-newsfeed {
        max-width: 540px;
        width: 100%;
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (min-width: 768px) {
    #newsfeed .container-main.container {
        max-width: 540px
    }
    #newsfeed .container-newsfeed {
        max-width: 540px;
        width: 100%;
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
        margin-right: auto;
        margin-left: auto;
    }
}


/*EditProFile*/
#editprofile {
    background-color: #F5F5F5;
}

    #editprofile .navbar-default {
        padding: 10px 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }

    #editprofile i.back-green {
        font-size: 30px;
        color: #F15C22;
    }

    #editprofile .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }
#editprofile label {
    margin-bottom: 0rem;
}
    #editprofile input::-webkit-date-and-time-value {
        text-align: left;
    } 

    #editprofile .form-group {
        margin-bottom: 0rem;
    }

    #editprofile .bg-color-img {
        padding: 30px 0;
        background-color: #FFFF;
    }

    #editprofile .img-user {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50%;
        height: 100px;
        width: 100px;
    }

    #editprofile .bg-color-white {
        background-color: #FFFF;
    }

    #editprofile .col-group {
        margin-bottom: 0.1rem !important;
    }

    #editprofile .padding-group {
        padding: 10px 0px 4px 0px;
    }

    #editprofile input.input-text {
        color: #F75600;
    }

        #editprofile input.input-text:focus {
            outline: 0;
            color: #F75600;
        }

    #editprofile .input-text {
        border: 0px solid #CACACA;
    }

        #editprofile .input-text:focus {
            box-shadow: none;
        }

        #editprofile .input-text::placeholder {
            color: #FCCBB1;
        }

    #editprofile .color-necessary {
        color: #F75600;
    }

    #editprofile .footer-submit {
        display: flex;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background-color: #ffffff;
        padding: 0px 10px 25px 10px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    #editprofile .btn-color-orange {
        background-color: #F75600 !important;
        color: #FFFF;
    }

        #editprofile .btn-color-orange:hover {
            background-color: #F75600 !important;
            color: #FFFF;
        }

    #editprofile .btn.btn-color-orange {
        border-radius: 5px;
    }

    #editprofile select.input-select {
        color: #F75600;
    }

        #editprofile select.input-select:focus {
            box-shadow: none;
            outline: 0;
            color: #F75600;
        }

    #editprofile input.input-select {
        color: #F75600;
    }

        #editprofile input.input-select:focus {
            outline: 0;
            color: #F75600;
        }

    #editprofile .input-select {
        border: 0px solid #CACACA;
    }

        #editprofile .input-select:focus {
            box-shadow: none;
        }

        #editprofile .input-select::placeholder {
            color: #FCCBB1;
        }

    #editprofile .custom-select {
        background: #fff no-repeat right .75rem center;
        background-image: url(~/img/Next.png),url(/img/Next.png),url(../img/Next.png);
        background-size: 20px 20px;
        background-position-y: top;
    }

    #editprofile .form-control {
        padding: 0rem 0.75rem 0.375rem 0rem;
    }



    #editprofile input[type="date"]::-webkit-calendar-picker-indicator {
        background: none;
        background-size: 20px 20px;
        margin: 0px 0px 20px 0px;
    }

    #editprofile .intput-date {
        background: #fff no-repeat right .75rem center;
        background-image: url(/img/Next.png),url(../img/Next.png) !important;
        background-size: 20px 20px;
        background-position-y: top;
    }

    #editprofile .text-label {
        margin-bottom: 0rem;
    }
    #editprofile .padding-top-20 {
        padding-top: 0.3rem !important;
    }
    #editprofile .button-next {
        position: absolute;
        padding: 1px;
        top: 0px;
        bottom: 0;
        right: 20px;
        border: 0;
        background-color: #FFFFFF;
    }
    #editprofile .modal-select-option {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #editprofile .text-gender-padding {
        color: #F75600;
        margin: 0;
        padding-top: 0.485rem;
        padding-bottom: 0.485rem;
    }

    #editprofile .text-gender-padding-hidden {
        border: 1px solid #ced4da;
        background: #e9ecef;
        border-radius: .25rem;
        color: #212529;
        margin: 0;
        padding-top: 0.485rem;
        padding-bottom: 0.485rem;
    }

    #editprofile .btn-modal-hidden {
        display: none;
    }

    #editprofile #ModalProvince ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    #editprofile #ModalDistrict ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }

    #editprofile #ModalSubDistrict ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }

    #editprofile .modal-body-p-0 {
        padding: 0;
    }

    #editprofile .footer-alert {
        display: flex;
        position: fixed;
        bottom: 60px;
        width: 100%;
        padding: 0px 10px 25px 10px;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    #editprofile .modal-header {
        border-bottom: 0px solid #dee2e6;
    }
    #editprofile button.btn:focus {
        box-shadow: none;
        outline: 0;
    }



@media only screen and (min-width: 768px) {
    #editprofile .container-main {
        max-width: 540px
    }
}

/*MyQRCode*/

#myqrcode {

}

    #myqrcode .navbar-default {
        padding: 10px 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }
    #myqrcode .img-profile {
        width: 40px;
        height: 40px;
    }
    #myqrcode i.back-green {
        font-size: 30px;
        color: #F15C22;
    }
    #myqrcode .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }
    #myqrcode .text-header-center {
        margin-right:0px;
    }
    #myqrcode .size-img-qrcord {
        width: 250px;
        margin: 0 auto;
        display: block;
    }
    #myqrcode .id-qrcord {
        font-size: 15px;
        padding: 10px;
        border: 1px solid #A2A2A2;
        text-align: center !important;
        color: #A2A2A2;
    }
    #myqrcode .form-container-myqrcord {
        width: 100%;
        max-width: 280px;
        padding: 15px;
        margin: 0 auto;
        margin-top: 50px;
    }

    #myqrcode #qrcode {
        margin-bottom: 3rem !important;
    }

/*MyCouPon*/
#mycoupon {
    background-color: #F5F5F5;
}
    #mycoupon .navbar-default {
        padding: 0.86rem 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }
    #mycoupon .img-profile {
        width: 40px;
        height: 40px;
    }
    #mycoupon i.back-green {
        font-size: 30px;
        color: #F15C22;
    }
    #mycoupon .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }
    #mycoupon .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #F75600;
        background-color: #ffffff;
    }
    #mycoupon .nav-link{
        color: #A2A2A2;
    }
    #mycoupon .nav-link:focus, .nav-link:hover {
        color: #A2A2A2;
    }

    #mycoupon .list-menu-mycoupon {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    #mycoupon .color-list-menu {
        background-color: #FFFF;
    }

    #mycoupon .text-center-menu {
        text-align:center !important;
    }
    #mycoupon .text-pluscoupon {
        font-size: 14px;
        color: #F75600;
        margin-bottom: .5rem !important;
    }
    #mycoupon .border-radius-0 {
        border-radius:0;
    }
    #mycoupon .margin-bottom-0 {
        margin-bottom:0
    }
    #mycoupon .color-list-head {
        color: #404040;
    }

    #mycoupon .color-list {
        color: #A2A2A2;
    }
    #mycoupon .card-body-padding {
        padding: 0.1rem 0.3rem 0.3rem 0.3rem;
    }
    #mycoupon .img-info {
        width: 100%;
        height: 260px;
    }
    #mycoupon .text-header-center {
        margin-right: 0px;
    }
    #mycoupon .nav-link {
        padding: 0.5rem 0rem;
    }
    #mycoupon .img-barcode {
        width: 200px;
        padding: 15px 0px 15px 0px;
        margin: 0 auto;
        display: block;
    }
    #mycoupon .color-secret-code {
        color: #F75600;
    }
    #mycoupon .p-text-list {
        margin-bottom: 0rem;
    }
    #mycoupon .modal-footer-btnlist {
        border-radius: 0px 0px 14px 14px;
        background: #D8D8D8;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1px 5px;
        margin: 0;
    }
    #mycoupon .col-btn-list-12 {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
        height: 40px;
    }
    #mycoupon .madal-model-body-list {
        margin: 0;
    }
    #mycoupon .modal-content {
        border-radius: 15px;
    }
    #mycoupon .btn-size-list {
        width: 100%;
        height: 100%;
    }
    #mycoupon button.btn.btn-size-list:focus {
        box-shadow: none;
    }
    #mycoupon .modal-secret-code {
    }
        #mycoupon .modal-secret-code .close {
            padding: 0rem;
            margin: 0rem;
        }
    #mycoupon .img-secret-code {
        margin: 50px auto;
        display:block;
    }
    #mycoupon .digit-group {
        display: flex;
        justify-content: space-evenly;

    }

        #mycoupon .digit-group input {
            width: 37px;
            height: 45px;
            text-align: center;
            font-size: 23px;
            font-weight: 500;
            margin: 0 3px;
            border: 1px solid #DEE2E6;
            outline: none;
            color: #F75600;
            border-radius: 0;
        }
    #mycoupon .modal-body-all {
        padding: 1px;
        /*margin: 0 120px;*/
    }
    #mycoupon .body-text-secret-code p {
        margin-bottom:0rem;
    
    }
    #mycoupon .layout-box-code {
        padding: 0 110px;
        margin: 60px auto;
        display: block;
    }
    #mycoupon .modal-footer-btnlist-secret-code {
        border-radius: 0px 0px 14px 14px;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1px 5px;
        margin: 0;
        border: 0px solid #ffffff;
    }
    #mycoupon .modal-footer-btnlist-success-fail, #mycoupon .modal-footer-btnlist-success {
        border-radius: 0px 0px 14px 14px;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1px 5px;
        margin: 0;
    }
    #mycoupon .color-cancel-list-success {
        color: #F75600;
    }
    #mycoupon .color-text-success {
        color: #404040;
    }
    #mycoupon .text-full-rights {
        padding: 15px 0;
        width: 100%;
        text-align: center;
        margin: 0px;
        position: absolute;
        background-color: #FFFFFF;
        color:#000000;
        opacity: 0.5;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #mycoupon .text-center-1 {
       position:relative;
    }
    #mycoupon .opacity-img {
        opacity: 0.5;
    }

@media only screen and (min-width: 0px) and (max-width: 325px) {
        #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 10vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 8vw auto;
        display: block;
    }
}
@media only screen and (min-width: 326px) and (max-width: 350px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 7.5vw auto;
        display: block;
    }
    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 351px) and (max-width: 369px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 8vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 370px) and (max-width: 398px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 8.5vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 399px) and (max-width: 434px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 9vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 435px) and (max-width: 478px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 9.5vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 479px) and (max-width: 503px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 10vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 504px) and (max-width: 545px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 10.5vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}
@media only screen and (min-width: 546px) and (max-width: 575px) {
    #mycoupon .layout-box-code {
        padding: 0 140px;
        margin: 11vw auto;
        display: block;
    }

    #mycoupon .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}






    @media only screen and (min-width: 768px) {
        #mycoupon .container-main.container, .container-main-menu {
            max-width: 540px
        }
    }


    /*Redeem*/
    #redeem {
        background-color: #F5F5F5;
    }

        #redeem .navbar-default {
            padding: 0.86rem 0px;
            box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
            background-color: #FFFF;
            margin-bottom: 0.1rem !important;
        }

        #redeem .img-profile {
            width: 40px;
            height: 40px;
        }

        #redeem i.back-green {
            font-size: 30px;
            color: #F15C22;
        }

        #redeem .size-head {
            font-weight: 400 !important;
            margin-bottom: 0;
            font-size: 15px;
        }

        #redeem .list-data {
            display: flex;
            justify-content: space-between;
        }

        #redeem .p-text-list {
            margin-bottom: 0rem;
        }

        #redeem a {
            color: none !important;
            text-decoration: none !important;
        }

            #redeem a:hover {
                color: none !important;
                text-decoration: none !important;
            }

        #redeem .color-list-head {
            color: #404040;
        }

        #redeem .color-list {
            color: #A2A2A2;
        }

        #redeem .card-body-padding {
            padding: 0.1rem 0.3rem 0.3rem 0.3rem;
        }

        #redeem .text-header-center {
            margin-right: 0px;
        }
        #redeem .text-full-rights {
            padding: 15px 0;
            width: 100%;
            text-align: center;
            margin: 0px;
            position: absolute;
            background-color: #FFFFFF;
            opacity: 0.5;
            color: black;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        #redeem .text-center-1 {
            position: relative;
        }

        #redeem .opacity-img {
            opacity: 0.5;
        }
        #redeem .free-img-size {
            position:absolute;
            width:90px;
            top:0px;
        }
        #redeem .modal-footer-btnlist-success {
            border-radius: 0px 0px 14px 14px;
            background: #ffffff;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px 5px;
            margin: 0;
        }
        #redeem .border-radius-0 {
            border-radius: 0;
        }




    @media only screen and (min-width: 768px) {
        #redeem .container-main.container {
            max-width: 540px
        }
    }

    /*RedeemList*/
    #redeemlist {
        background-color: #FFFFFF;
    }

        #redeemlist .navbar-default {
            padding: 0.86rem 0px;
            box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
            background-color: #FFFF;
            margin-bottom: 0.1rem !important;
        }

        #redeemlist .img-profile {
            width: 40px;
            height: 40px;
        }

        #redeemlist i.back-green {
            font-size: 30px;
            color: #F15C22;
        }

        #redeemlist .size-head {
            font-weight: 400 !important;
            margin-bottom: 0;
            font-size: 15px;
        }

        #redeemlist .footer-submit {
            display: flex;
            position: fixed;
            bottom: 0px;
            width: 100%;
            padding: 0px 10px 25px 10px;
            background-color: #FFFFFF;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
        }

        #redeemlist .btn-color-orange {
            border-radius: 0.5rem;
            background-color: #F75600 !important;
            color: #FFFF;
        }

        #redeemlist .border-radius-0 {
            border-radius: 0;
        }

        #redeemlist .margin-bottom-0 {
            margin-bottom: 0
        }

        #redeemlist .card-body-padding {
            padding: 1rem 0.3rem 1rem 0.3rem;
        }

        #redeemlist .card {
            border: 0px solid rgba(0,0,0,.125);
        }

        #redeemlist .text-header-center {
            margin-right: 0px;
        }

        #redeemlist .color-list-head {
            color: #404040;
        }

        #redeemlist .color-list {
            color: #A2A2A2;
        }

        #redeemlist .p-text-list {
            margin-bottom: 0rem;
        }

        #redeemlist .list-data {
            display: flex;
            justify-content: space-between;
        }

        #redeemlist .border-bottom-readeemlist {
            border-bottom: 1px solid #F6F6F6 !important;
        }

        #redeemlist .modal-lists-footer {
            background: linear-gradient( to right, #F75600 0%, #F75600 50%, #D8D8D8 50%, #D8D8D8 100% );
            border-radius: 0px 0px 14px 14px;
        }

        #redeemlist .text-model-body {
            margin-bottom: 0rem;
        }

        #redeemlist .madal-model-body {
            margin-top: 30px;
            margin-bottom: 25px;
        }

        #redeemlist .modal-content {
            border-radius: 15px;
        }

        #redeemlist.modal-open .modal {
            overflow-x: hidden;
            overflow-y: hidden;
        }

        #redeemlist .center-color {
            border-left: 2px solid coral;
        }

        #redeemlist button:focus {
            box-shadow: none;
        }

        #redeemlist .color-confirm {
            color: #F75600;
        }

        #redeemlist .color-cancel {
            color: #404040;
        }

        #redeemlist .color-text-modal-list {
            color: #404040;
        }

        #redeemlist .madal-model-body-list {
            margin: 0;
        }

        #redeemlist .color-secret-code {
            color: #F75600;
        }

        #redeemlist .img-barcode {
            width: 200px;
            padding: 15px 0px 15px 0px;
            margin: 0 auto;
            display: block;
        }

        #redeemlist .col-btn-list-6 {
            flex: 0 0 auto;
            width: 50%;
            text-align: center;
            height: 40px;
        }

        #redeemlist .modal-footer-btnlist {
            border-radius: 0px 0px 14px 14px;
            background: linear-gradient( to right, #F75600 0%, #F75600 50%, #D8D8D8 50%, #D8D8D8 100% );
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px 5px;
            margin: 0;
        }

        #redeemlist .btn-size-list {
            width: 100%;
            height: 100%;
        }

        #redeemlist .color-mycoupons-list {
            color: #ffffff;
        }

        #redeemlist .color-cancel-list {
            color: #727272;
        }

        #redeemlist .modal-footer-btnconfirm {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px;
            margin: 0;
        }

        #redeemlist .col-btn-confirm-6 {
            flex: 0 0 auto;
            width: 50%;
            text-align: center;
            height: 40px;
            margin: 0.1rem;
        }

        #redeemlist .border-left-1 {
            border-left: 1px solid #E6E6E6 !important;
        }

        #redeemlist .btn-width-cancel {
            width: 100%;
            min-width: 100%;
            height: 40px;
        }

        #redeemlist .total-number {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            color: #A2A2A2;
        }
        #redeemlist .btn-size-list {
            width: 100%;
            height: 100%;
        }

        #redeemlist button.btn.btn-size-list:focus {
            box-shadow: none;
        }

        #redeemlist .modal-secret-code {
        }

            #redeemlist .modal-secret-code .close {
                padding: 0rem;
                margin: 0rem;
            }

        #redeemlist .img-secret-code {
            margin: 50px auto;
            display: block;
        }

        #redeemlist .digit-group {
            display: flex;
            justify-content: space-evenly;
        }

            #redeemlist .digit-group input {
                width: 37px;
                height: 45px;
                text-align: center;
                font-size: 23px;
                font-weight: 500;
                margin: 0 3px;
                border: 1px solid #DEE2E6;
                outline: none;
                color: #F75600;
                border-radius: 0;
            }
        #redeemlist .modal-body-all {
            padding: 1px;
            /*margin: 0 120px;*/
        }

        #redeemlist .body-text-secret-code p {
            margin-bottom: 0rem;
        }

        #redeemlist .layout-box-code {
            padding: 0 110px;
            margin: 60px auto;
            display: block;
        }

        #redeemlist .modal-footer-btnlist-secret-code {
            border-radius: 0px 0px 14px 14px;
            background: #ffffff;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px 5px;
            margin: 0;
            border: 0px solid #ffffff;
        }

        #redeemlist .modal-footer-btnlist-success-fail, #redeemlist .modal-footer-btnlist-success {
            border-radius: 0px 0px 14px 14px;
            background: #ffffff;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px 5px;
            margin: 0;
        }

        #redeemlist .color-cancel-list-success {
            color: #F75600;
        }

        #redeemlist .color-text-success {
            color: #404040;
        }

        #redeemlist .text-full-rights {
            padding: 15px 0;
            width: 100%;
            text-align: center;
            margin: 0px;
            position: absolute;
            background-color: #FFFFFF;
            color: #000000;
            opacity: 0.5;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        #redeemlist .text-center-1 {
            position: relative;
        }

        #redeemlist .opacity-img {
            opacity: 0.5;
        }
        #redeemlist .col-btn-list-12 {
            flex: 0 0 auto;
            width: 100%;
            text-align: center;
            height: 40px;
        }


@media only screen and (min-width: 0px) and (max-width: 325px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 12vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11.5vw auto;
        display: block;
    }
}

@media only screen and (min-width: 326px) and (max-width: 340px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 11vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 12.5vw auto;
        display: block;
    }
}
@media only screen and (min-width: 341px) and (max-width: 350px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 2.8rem auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 2.7rem auto;
        display: block;
    }
}

@media only screen and (min-width: 351px) and (max-width: 369px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 10vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 12vw auto;
        display: block;
    }
}

@media only screen and (min-width: 370px) and (max-width: 398px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 2.4rem auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 3rem auto;
        display: block;
    }
}

@media only screen and (min-width: 399px) and (max-width: 434px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 2.1rem auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}

@media only screen and (min-width: 435px) and (max-width: 478px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 1.5rem auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}

@media only screen and (min-width: 479px) and (max-width: 503px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 10vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}

@media only screen and (min-width: 504px) and (max-width: 545px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 10.5vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}

@media only screen and (min-width: 546px) and (max-width: 575px) {
    #redeemlist .layout-box-code {
        padding: 0 140px;
        margin: 11vw auto;
        display: block;
    }

    #redeemlist .img-secret-code {
        margin: 11vw auto;
        display: block;
    }
}


    @media only screen and (min-width: 0px) and (max-width: 320px) {
        #redeemlist .img-info-model-list {
            width: 100%;
            height: 11.8rem;
        }
    }

    @media only screen and (min-width: 321px) and (max-width: 425px) {
        #redeemlist .img-info-model-list {
            width: 100%;
            height: 13rem;
        }
    }

    @media only screen and (min-width: 0px) and (max-width: 320px) {
        #redeemlist .modal-dialog {
            max-width: 300px;
            margin: 1.75rem auto;
        }
    }

    @media only screen and (min-width: 321px) and (max-width: 576px) {
        #redeemlist .modal-dialog {
            max-width: 350px;
            margin: 1.75rem auto;
        }
    }

    @media only screen and (min-width: 768px) {
        #redeemlist .container-main.container {
            max-width: 540px
        }
        #redeemlist .footer-container {
            max-width:540px;
        }
    }



    /*PlusCoupon*/
    #pluscoupon {
        background-color: #F5F5F5;
    }

        #pluscoupon .navbar-default {
            padding: 10px 0px;
            box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
            background-color: #FFFF;
            margin-bottom: 0.1rem !important;
        }

        #pluscoupon .img-profile {
            width: 40px;
            height: 40px;
        }

        #pluscoupon i.back-green {
            font-size: 30px;
            color: #F15C22;
        }

        #pluscoupon .size-head {
            font-weight: 400 !important;
            margin-bottom: 0;
            font-size: 15px;
        }

        #pluscoupon .list-data {
            display: flex;
            justify-content: space-between;
        }

        #pluscoupon .p-text-list {
            margin-bottom: 0rem;
        }

        #pluscoupon .img-info-redeem {
            width: 100%;
            height: 189px;
        }

        #pluscoupon a {
            color: none !important;
            text-decoration: none !important;
        }

            #pluscoupon a:hover {
                color: none !important;
                text-decoration: none !important;
            }

        #pluscoupon .color-list-head {
            color: #404040;
        }

        #pluscoupon .color-list {
            color: #A2A2A2;
        }

        #pluscoupon .card-body-padding {
            padding: 0.1rem 0.3rem 0.3rem 0.3rem;
        }

        #pluscoupon .text-header-center {
            margin-right: 0px;
        }

    @media only screen and (min-width: 768px) {


        #pluscoupon .container-main.container {
            max-width: 540px
        }
    }

    /*PlusCouponList*/
    #pluscouponlist {
    }

        #pluscouponlist .navbar-default {
            padding: 10px 0px;
            box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
            background-color: #FFFF;
            margin-bottom: 0.1rem !important;
        }

        #pluscouponlist .img-profile {
            width: 40px;
            height: 40px;
        }

        #pluscouponlist i.back-green {
            font-size: 30px;
            color: #F15C22;
        }

        #pluscouponlist .size-head {
            font-weight: 400 !important;
            margin-bottom: 0;
            font-size: 15px;
        }

        #pluscouponlist .footer-submit {
            display: flex;
            position: fixed;
            bottom: 0px;
            width: 100%;
            padding: 10px 0px 0px 0px;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
        }

        #pluscouponlist .btn-color-orange {
            border-radius: 0rem;
            background-color: #F75600 !important;
            color: #FFFF;
        }

        #pluscouponlist .border-radius-0 {
            border-radius: 0;
        }

        #pluscouponlist .card-body-padding {
            padding: 0.1rem 0.3rem 0.3rem 0.3rem;
        }

        #pluscouponlist .p-text-list {
            margin-bottom: 0rem;
        }

        #pluscouponlist .color-list-head {
            color: #404040;
        }

        #pluscouponlist .card {
            border: 0px solid rgba(0,0,0,.125);
        }

        #pluscouponlist .border-bottom-pluscouponlist {
            border-bottom: 1px solid #F6F6F6 !important;
        }

        #pluscouponlist .color-list {
            color: #A2A2A2;
        }

        #pluscouponlist .list-data {
            display: flex;
            justify-content: space-between;
        }

        #pluscouponlist .color-text-modal-list {
            color: #404040;
        }

        #pluscouponlist .modal-content {
            border-radius: 15px;
        }

        #pluscouponlist .madal-model-body {
            margin-top: 30px;
            margin-bottom: 25px;
        }

        #pluscouponlist .text-model-body {
            margin-bottom: 0rem;
        }

        #pluscouponlist .modal-footer-btnconfirm {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px;
            margin: 0;
        }

        #pluscouponlist .col-btn-confirm-6 {
            flex: 0 0 auto;
            width: 50%;
            text-align: center;
            height: 40px;
            margin: 0.1rem;
        }

        #pluscouponlist .btn-width-cancel {
            width: 100%;
            min-width: 100%;
            height: 40px;
        }

        #pluscouponlist .color-cancel {
            color: #404040;
        }

        #pluscouponlist .border-left-1 {
            border-left: 1px solid #E6E6E6 !important;
        }

        #pluscouponlist .color-confirm {
            color: #F75600;
        }

        #pluscouponlist .madal-model-body-list {
            margin: 0;
        }

        #pluscouponlist .img-barcode {
            width: 200px;
            padding: 5px 0;
            margin: 0 auto;
            display: block;
        }

        #pluscouponlist .color-secret-code {
            color: #F75600;
        }

        #pluscouponlist .modal-footer-btnlist {
            border-radius: 0px 0px 14px 14px;
            background: linear-gradient( to right, #F75600 0%, #F75600 50%, #D8D8D8 50%, #D8D8D8 100% );
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            padding: 1px 5px;
            margin: 0;
        }

        #pluscouponlist .col-btn-list-6 {
            flex: 0 0 auto;
            width: 50%;
            text-align: center;
            height: 40px;
        }

        #pluscouponlist .color-mycoupons-list {
            color: #ffffff;
        }

        #pluscouponlist .btn-size-list {
            width: 100%;
            height: 100%;
        }
        /*    #pluscouponlist .feedback-slider-item img {
        display: block;
        width: 100%;
        height: auto;
    }
*/

        #pluscouponlist .total-number {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            color: #A2A2A2;
        }



    /*History*/
    #history .navbar-default {
        padding: 0.86rem 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }

    #history .img-profile {
        width: 40px;
        height: 40px;
    }

    #history i.back-green {
        font-size: 30px;
        color: #F15C22;
    }

    #history .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }

    #history .layout-body-text {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 100%;
    }

    #history .body-text-container {
        border-left: 1px solid coral;
    }

    #history .body-text-right {
        text-align: center;
        margin: 0 auto;
    }

    #history .body-text-left {
        text-align: center;
        margin: 0 auto;
    }

    #history .list-card-body {
        background-color: #EAEAEA;
        border-radius: 5px;
    }

    #history .color-head-score {
        color: #404040;
    }

    #history .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #F75600;
        background-color: #fff;
        border-bottom: 1px solid #F75600 !important;
        border-radius: 0rem !important;
    }

    #history .nav-link {
        color: #A2A2A2;
        border-bottom: 1px solid #FFFF !important;
        border-radius: 0rem !important;
    }

    #history li.col-menu {
        padding-right: 0px;
        padding-left: 0px;
    }

    #history .margin-bottom-0 {
        margin-bottom: 0
    }

    #history .list-score {
        display: flex;
        justify-content: space-between;
    }

    #history .color-list-name {
        color: #404040;
    }

    #history .color-list-time {
        color: #A2A2A2;
    }

    #history .color-list-number-add {
        color: #F75600;
    }

    #history .color-list-number-delete {
        color: #404040;
    }

    #history .list-score-expire {
        display: flex;
        flex-direction: column;
    }

    #history .table-striped > tbody > tr:nth-of-type(odd) {
        --bs-table-accent-bg: #FFFFFF;
        color: #FFFFFF;
    }

    #history .table > :not(caption) > * > * {
        padding: .5rem .5rem;
        background-color: #F9F9F9;
        border-bottom-width: 0px;
        box-shadow: inset 0 0 0 9999px var(#F9F9F9);
    }

    #history .table td, .table th {
        padding: .75rem;
        vertical-align: top;
        border-bottom: 1px solid #EFEFEF;
    }

    #history .th-head-padding {
        padding: 0 !important;
    }

    #history .table th.th-head-padding {
        padding: .75rem;
        vertical-align: top;
        border-bottom: 0px solid #EFEFEF;
    }

    #history .table td, .table th {
        border-top: 0px solid #dee2e6;
    }

    #history .text-header-center {
        margin-right: 0px;
    }

    @media only screen and (min-width: 768px) {
        #history .container-main.container, .container-main-menu {
            max-width: 540px;
        }

        #history .container-main {
            max-width: 540px;
            padding-right: var(--bs-gutter-x,.75rem);
            padding-left: var(--bs-gutter-x,.75rem);
            margin-right: auto;
            margin-left: auto;
        }
    }



    /*ContactUs*/
    #contactus .navbar-default {
        padding: 0.86rem 0px;
        box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        background-color: #FFFF;
        margin-bottom: 0.1rem !important;
    }

    #contactus .img-profile {
        width: 40px;
        height: 40px;
    }

    #contactus i.back-green {
        font-size: 30px;
        color: #F15C22;
    }

    #contactus .size-head {
        font-weight: 400 !important;
        margin-bottom: 0;
        font-size: 15px;
    }

    #contactus .text-head-contactus {
        display: flex;
        justify-content: space-between;
    }

    #contactus .size-img-contacus {
        width: 35px;
    }

    #contactus .color-list-menu-mycoupon {
        background-color: #F9F9F9;
    }

    #contactus p.text-head-left-contactus {
        color: #F75600;
        margin-bottom: 0rem;
    }

    #contactus p.texe-head-right-contactus {
        color: #404040;
        margin-bottom: 0rem;
    }

    #contactus .media {
        display: flex;
        align-items: center;
    }

    #contactus .text-contactus {
        margin-bottom: 0;
    }

    #contactus .layout-media {
        padding: 10px;
    }

    #contactus .border-contactus-head {
        padding: 0 10px;
    }

    #contactus .border-contactus-list {
        border-bottom: 2px solid #F9F9F9 !important;
    }

    #contactus .text-header-center {
        margin-right: 0px;
    }

    @media only screen and (min-width: 768px) {
        #contactus .container-main.container {
            max-width: 540px
        }
    }





    .text-footer {
        margin-bottom: 0.3rem;
        font-size: 14px;
    }

    .text-flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .color-footer {
        color: #7CC1A9;
    }

    .prompt {
        margin-bottom: 20px;
        font-size: 20px;
        color: black;
    }

    option.color-option-head {
        color: #FCCBB1;
    }

    .text-otp-p {
        margin-bottom: 0rem;
    }

    .btn-lg {
        width: 100%
    }





    p.card-p-text {
        margin-bottom: 0rem;
    }

    .layout-menu {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    @media only screen and (min-width: 0px) and (max-width: 425px) {
        .layout-menu {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    }

    @media only screen and (min-width: 456px) and (max-width: 576px) {
        .layout-menu {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    }

    @media only screen and (min-width: 577px) and (max-width: 576px) {
        .layout-menu {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
    }

    .main-box {
        border: 3px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 10px;
        padding: 10px 10px 0px 10px;
    }

    .main-box-redeem {
        border: 3px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 10px;
        padding: 12px 25px 0px 25px;
    }

    .main-box-tel {
        border: 3px solid #FCCBB1;
        background-color: white;
        color: black;
        border-radius: 10px;
        padding: 12px 25px 0px 25px;
    }

    .main-box-1 {
        height: 10px;
        width: 100%;
    }

    a.main-box, .main-box-tel, .main-box-redeem {
        text-decoration: none;
    }

    .main-box p.main-text {
        margin-bottom: 0rem;
    }

    p.main-text {
        color: #000000;
        text-align: center;
        font-size: 20px;
    }

        p.main-text:hover {
            color: #000000;
        }


    .size-img-mycoupon {
        height: 3.5rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        display: block;
    }

    .size-img-redeem {
        height: 3.5rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        display: block;
    }

    .size-img-history {
        height: 3.5rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        display: block;
    }

    .size-img-pluscoupon {
        height: 3.5rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        display: block;
    }

    .size-img-tel {
        height: 3.5rem;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        display: block;
    }

    .edit-btn-background {
        position: absolute;
    }

    .i-profile {
        width:30px;
/*        font-size: 20px !important;
        color: #FFF;*/
    }

    .btn-icon-background {
        position: absolute !important;
        border-radius: 50%;
        top: 0 !important;
        width: 35px;
        height: 35px;
        text-align: center;
        transform: translate(50.5vw,-100%) !important;
        /*background-color: #FF8A51;*/
        padding: 7px;
    }

    @media only screen and (min-width: 1025px) and (max-width: 1440px) {
        .btn-icon-background {
            transform: translate(51vw,-100%) !important;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 1024px) {
        .btn-icon-background {
            transform: translate(51.5vw,-100%) !important;
        }
    }

    @media only screen and (min-width: 426px) and (max-width: 768px) {
        .btn-icon-background {
            transform: translate(52vw,-100%) !important;
        }
    }

    @media only screen and (min-width: 376px) and (max-width: 425px) {
        .btn-icon-background {
            transform: translate(53.5vw,-100%) !important;
        }
    }

    @media only screen and (min-width: 321px) and (max-width: 375px) {
        .btn-icon-background {
            transform: translate(53.5vw,-100%) !important;
        }
    }

    @media only screen and (min-width: 0px) and (max-width: 320px) {
        .btn-icon-background {
            transform: translate(54vw,-100%) !important;
        }

        .main-box {
            border: 2px solid #FCCBB1;
            background-color: white;
            color: black;
            border-radius: 10px;
            padding: 10px 1px 0px 1px;
        }

        .main-box-redeem {
            border: 2px solid #FCCBB1;
            background-color: white;
            color: black;
            border-radius: 10px;
            padding: 10px 5px 0px 5px;
        }

        .main-box-tel {
            border: 2px solid #FCCBB1;
            background-color: white;
            color: black;
            border-radius: 10px;
            padding: 10px 5px 0px 5px;
        }

        p.main-text {
            font-size: x-small;
        }

        .size-img-mycoupon {
            height: 1.5rem;
            width: auto;
        }

        .size-img-redeem {
            height: 1.5rem;
            width: auto;
        }

        .size-img-history {
            height: 1.5rem;
            width: auto;
        }

        .size-img-pluscoupon {
            height: 1.5rem;
            width: auto;
        }

        .size-img-tel {
            height: 1.5rem;
            width: auto;
        }
    }


    @media only screen and (min-width: 0px) and (max-width: 400px) {
        /*Login*/
        #login .layout-logo {
            max-width: 300px;
        }

        #login .img-logo {
            width: 160px;
            height: 160px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 160px;
        }

        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 80px;
            height: 80px;
        }

        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        /*Main*/
        #main .card-img-out {
            width: 100%;
            height: 55vw;
            border-radius: 15px;
        }

        #main .img-info {
            width: 100%;
            height: 50vw;
        }

        #mycoupon .img-info {
            width: 100%;
            height: 50vw;
        }

        #redeemlist .img-info {
            width: 100%;
            height: 50vw;
        }

        #newsfeed .img-info {
            width: 100%;
            height: 50vw;
        }

        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        #redeem .img-info-redeem {
            width: 100%;
            height: 50vw !important;
        }
    }

    @media only screen and (min-width: 401px) and (max-width: 600px) {
        /*Login*/
        #login .layout-logo {
            max-width: 300px;
        }

        #login .img-logo {
            width: 160px;
            height: 160px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 180px;
        }

        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 80px;
            height: 80px;
        }

        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        /*Main*/
        #main .card-img-out {
            width: 100%;
            height: 59.86vw;
            border-radius: 15px;
        }

        #main .img-info, #mycoupon .img-info, #newsfeed .img-info, #redeemlist .img-info {
            width: 100%;
            height: 47.14vw;
        }
        /*EditProFile*/
        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        /*Redeem*/
        #redeem .img-info-redeem {
            width: 100%;
            height: 47.14vw;
        }

        #main .img-info {
            width: 100%;
            height: 47.14vw;
        }
    }

    @media only screen and (min-width: 601px) and (max-width: 800px) {
        /*Login*/
        #login .layout-logo {
            max-width: 300px;
        }

        #login .img-logo {
            width: 180px;
            height: 180px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 180px;
        }
        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100px;
            height: 100px;
        }
        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        /*EditProFile*/
        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        #main .img-info, #mycoupon .img-info, #redeemlist .img-info, #newsfeed .img-info {
            width: 100%;
            height: 257px;
        }

        #redeem .img-info-redeem {
            width: 100%;
            height: 257px;
        }
    }

    @media only screen and (min-width: 801px) and (max-width: 1200px) {
        /*Login*/
        #login .layout-logo {
            max-width: 350px;
        }

        #login .img-logo {
            width: 200px;
            height: 200px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 200px;
        }
        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100px;
            height: 100px;
        }
        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        /*EditProFile*/
        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        #redeem .img-info-redeem {
            width: 100%;
            height: 257px;
        }

        #main .img-info, #mycoupon .img-info, #redeemlist .img-info, #newsfeed .img-info {
            width: 100%;
            height: 257px;
        }
    }

    @media only screen and (min-width: 1201px) and (max-width: 1550px) {
        /*Login*/
        #login .layout-logo {
            max-width: 350px;
        }

        #login .img-logo {
            width: 200px;
            height: 200px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 200px;
        }
        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100px;
            height: 100px;
        }
        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        /*EditProFile*/
        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        #redeem .img-info-redeem {
            width: 100%;
            height: 257px;
        }

        #main .img-info, #mycoupon .img-info, #redeemlist .img-info, #newsfeed .img-info {
            width: 100%;
            height: 257px;
        }
    }

    @media only screen and (min-width: 1551px) {
        /*Login*/
        #login .layout-logo {
            max-width: 350px;
        }

        #login .img-logo {
            width: 240px;
            height: 240px;
        }

        #login .footer-img {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            width: 240px;
        }
        /*OTP*/
        #otp .img-otp {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100px;
            height: 100px;
        }
        /*Register*/
        #register .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        /*EditProFile*/
        #editprofile .img-user {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }

        #redeem .img-info-redeem {
            width: 100%;
            height: 257px;
        }

        #main .img-info, #mycoupon .img-info, #redeemlist .img-info, #newsfeed .img-info {
            width: 100%;
            height: 257px;
        }
    }