@font-face {
    font-family: 'helveticaneue';
    src: url('../font/helvetica neue/ttf/helveticaneue.ttf') format('truetype');
}

body {
    font-size: 1rem;
    font-family: "helveticaneue" !important;
}


input {
    outline: 0 !important;
    border-width: 0 0 1px !important;
    border-color: #ced4da;
    border-radius: 0px !important;
}

.scoll-y{
    overflow-y : auto;
}

.form-control:focus {
    border-width: 0 0 1px !important;
    border-color: #0094ff !important;
    box-shadow: none;
}

.bg-payment-success {
    border-radius: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    font-size: 1.1rem;
    text-align: center;
    background: #e3f9fc;
    color: #198754;
}

.bg-white-opacity {
    background: #e5e5e5;
}

.logo {
    width: 110px;
}

.capsule {
    height: 100%;
    background: #e5e5e5;
    overflow-y: auto;
}

.logo-service {
    border: 1px solid #0094ff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 98px;
    height: 55px;
    padding: 10px;
}

    .logo-service img {
        padding: 5px;
        width: auto;
        height: auto;
        max-width: 98px;
        max-height: 55px;
    }

.btn-primary {
    background: #0094ff;
    border-radius: 20px;
    height: 44px;
    border: 1px solid #0094ff;
    font-size: 1.2rem;
}

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

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

.text-value {
    color: #000000;
    font-weight: 600;
}

.offcanvas-bottom {
    right: auto !important;
    width: 100%;
    max-width: 428px;
    left: auto !important;
    min-height: 200px;
    max-height: 600px;
    height: auto !important;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.offcanvas-bottom1 {
    right: auto !important;
    width: 100%;
    max-width: 428px;
    left: auto !important;
    min-height: 50px;
    max-height: 50px;
    height: 50px !important;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.offcanvas-body1 {
    border-top: 1px solid #ced4da;
    margin: 0rem 1rem 1rem 1rem;
    padding: 0.3rem 0rem 0rem 0rem !important;
}

.offcanvas-service {
    border-radius: 5px;
    border: 1px solid #ced4da;
    margin-top: 5px;
}

    .offcanvas-service .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 50px;
    }

        .offcanvas-service .logo img {
            padding: 5px;
            width: auto;
            height: auto;
            max-height: 50px;
            max-width: 90px;
        }

.service {
    display: flex;
    align-items: center;
}
.bill-lable {
    flex: 0 0 134px;
    margin-right: 8px;
    color:rgba(0,0,0,.5) !important
}
.history {
    height: 82%;
    background: #ffffff;
    max-height: 100%
}

.history-item {
    border: 1px solid #f1f7fb;
    padding: 10px;
    box-shadow: 2px 2px 2px #ced4da;
    border-radius: 3px;
    margin-bottom: 5px;
    width: 99%;    
}

.detail-item {
    height: 90%;
    background: #ffffff;
    max-height: 100%;
    overflow-y: auto;
}

.history-status {
    text-align: right;
    font-size: 12px;
}

.history-kn {
    margin-top: 4px;
    line-height: 1;
    width: 94px;
}

.p-bill-head {
    padding-bottom: 15px;
    border-bottom: 1px dashed #808080;
}

.p-bill-detail {
    padding-bottom: 15px;
    border-bottom: 1px dashed #808080;
}

.p-bill-footer {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .p-bill-footer a {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-decoration :none
    }

.text-amount {
    color: #0094ff;
    font-weight: bold;
}

.text-history {
    color: #FFCB05;
}

.text-history-red {
    color: #FF0000;
}

.text-history-green {
    color: #008B0E;
}

.text-history-blue {
    color: #78F38B;
}


.text-history-orange {
    color: #F5921D;
}

.text-history-blueocean {
    color: #2400FF;
}

.text-history-black {
    color: #414042;
}

.text-history-gray {
    color: #6D6E71;
}

.text-name-card {
    font-size: 15px;
    margin: 12% 6% 0% 6%;
    color: #0058A0;
    font-weight: 700;
}

.text-name-card1 {
    color: #007FFF;
    font-size: 19px;
    margin: 12% 6% 0% 6%;
    font-weight: 700;
}

.text-name-card2 {
    font-size: 15px;
    margin: 12% 6% 0% 6%;
    color: #515151;
    font-weight: 700;
}

.text-name-data {
    font-size: 8px;
    margin: 12% 6% 0% 6%;
    color: #0058A0;
    font-weight: 700;
}

.text-name-data1 {
    font-size: 8px;
    margin: 12% 6% 0% 6%;
    color: #FFCB05;
    font-weight: 700;
}

.text-data {
    font-size: 12px;
    margin: 12% 2% 0% 2%;
    color: #0058A0;
    font-weight: 700;
}

.text-data1 {
    font-size: 12px;
    margin: 12% 2% 0% 2%;
    color: #6D6E71;
    font-weight: 700;
}

.text-discount-card {
    font-size: 8px;
    color: #000000
}

.discount-card-amount {
    font-size: 9px;
    color: #FFCB05;
}

.padding-0 {
    padding: 0 !important;
}

.padding-7 {
    padding: 2px 11px !important;
}

.margin-0 {
    margin: 0 !important;
}

.paddingb-20 {
    padding-bottom: 20px;
}

.dispay-none {
    display: none;
}

.padding-top-61 {
    padding-top: 107px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left !important;
}

.image-50px {
    width: 38px;
    height: 30px;
    margin-top: 5%;
}

.header-index {
    background-color: #0054A5;
    padding: 3% 1% 3.2% 0.75%;
    position: fixed;
    width: 100%;
    z-index: 999;
    max-width: 428px;
}

.prev {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    padding-left: 3%;
    font-family: monospace;
}

.text-header {
    color: #fff;
    font-weight: 600;
    padding-left: 33%;
}

.text-header-detail-his {
    color: #fff;
    font-weight: 600;
    padding-left: 30%;
}

.icon-history {
    width: 18px;
    float: right;
    padding-top: 1%;
    margin-right: 3%;
}

.hr-staight {
    font-size: 20px;
    color: #6D6E71;
    padding-left: 25%;
}

.icon-back {
    width: 18px;
    float: left;
    padding-top: 2%;
}

.main-card {
    margin: 3%;
    box-shadow: 2px 2px #d5d5d5;
    border-radius: 7px;
    position: relative;
    top: -5%;
    z-index: 100;
    left: 0;
    background-color: #fff;
}

.choose-mobile {
    border: 1px solid #3363AF !important;
    color: #3363AF !important;
}

.choose-mobile_icon {
    width: 15px;
    height: 15px;
    margin-right: 10%;
    margin-top: 5%;
}

.choose-mobile_name {
    /*color: #3363AF;*/
    font-size: 13px;
    margin-top: 5%;
}

.mobile-number {
    width: 65%;
    font-size: 25px;
    font-weight: 600;
}

.email-area {
    width: 90%;
    max-width: 428px;
    font-size: 25px;
    font-weight: 600;
}

.button-choosenetwork {
    border: none;
    background-color: #fff;
    width: 63%;
    padding: 2%;
}

.icon-mobile {
    width: 22px;
    height: 23px;
}
.icon-updown {
    color: #5b5b5b;
    width: 20px;
    margin-top: 3%;
}

.part-title {
    font-size: 16px;
    font-weight: 500;
}

.padding-hr {
    padding: 0 2%
}

.div-totalamount {
    /*position: relative;*/
    width: 100%;
    max-width: 428px;
    background-color: #fff;
    margin-top: 1%;
    margin-bottom: -1.5%;
    height: 43px;
    padding: 8px 12px;
}

.total-amount {
    font-size: 26px;
    font-weight: 700;
    color: #FFCB05;
}

.canvas-choosenetwork {
    margin-top: 10px;
    font-weight: 700;
    height: 30px;
    color: #3363AF;
    font-size: 24px;
}

.canv-footer {
    position: relative;
    /*bottom: 0;*/
    /*z-index: 1;*/
    /*display: flex;*/
    flex-direction: column;
    margin-top: 4%;
    /*max-width: 100%;*/
    visibility: visible;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 1px solid rgba(0,0,0,.2);
    outline: 0;
    transition: transform .3s ease-in-out;
}

.canvas-option {
    margin: 3% 3% 3% 5%;
    font-size: 13px;
}

.canvas-body {
    display: flex;
    border: none;
    margin: 0% 2% 0% 0%;
    padding: 2% 4%;
}

.network-logo {
    margin: 1.5% -0.2%;
}

.content-network {
    border: 1px solid #d5d5d5;
    text-align: center;
    border-radius: 7px;
    min-height: 52px;
    min-width: 110px;
}

.input-image {
    margin: 8% 6% 0% 6%;
    width: 95px;
    height: 33px;
}

.prev:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.history-footer {
    text-align: center;
    font-size: 14px;
    font-style: italic;
    color: #F7691F;
    margin: -7% 4%;
}

.history-footer-detail {
    text-align: center;
    font-size: 14px;
    font-style: italic;
    color: #FFCB05;
    margin: 2% 4%;
}

.now {
    color: #007bff;
    /*text-decoration: underline;*/
    border: none;
    background-color: #f8f9fa;
    padding-left: 0.5px;
}

    .now:hover {
        color: #007bff;
        text-decoration: underline;
        border: none;
        background-color: #f8f9fa;
        padding-left: 0.5px;
    }

.now1 {
    color: #0058A0;
    text-decoration:none;
    border: none;
    font-style: italic;
    background-color: #FFFFFF;
    padding-left: 0.5px;
}

    .now1:hover {
        color: #0058A0;
        /*text-decoration: underline;*/
        border: none;
        font-style: italic;
        background-color: #f8f9fa;
        padding-left: 0.5px;
    }

.color-link {
    color: #007bff;
}

.Card {
    border: 1px solid #D1D3D4;
    text-align: center;
    background-color: #fff;
    border-radius: 7px;
}

.Card1 {
    border: 1px solid #007FFF;
    text-align: center;
    background-color: #C5E5FC;
    border-radius: 7px;
}

.Cardb {
    border: 1px solid #3363AF;
    text-align: center;
    background-color: #C5E5FC;
    border-radius: 7px;
}

.display-none{
    display: none;
}

.ContentSupport {
    width: 100%;
    border: none;
}

@media (max-width: 1450px) and (min-width:1440px) {
    .padding-top-61 {
        padding-top: 88px;
    }
    .history {
        height: 82%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
}

@media (max-width: 1439px) and (min-width:1024px) {
    .padding-top-61 {
        padding-top: 72px;
    }
    .history {
        height: 80%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
}

@media (max-width: 1023px) and (min-width:768px) {
    .padding-top-61 {
        padding-top: 61px;
    }
    .history {
        height: 80%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
}

@media (max-width: 767px) and (min-width:425px) {
    .padding-top-61 {
        padding-top: 47px;
    }
    .history {
        height: 80%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
}

@media (max-width: 424px) and (min-width:375px) {
    .padding-top-61 {
        padding-top: 45px;
    }
    .text-name-card{
        font-size: 17px;
    }
    .text-name-card1 {
        font-size: 17px;
    }
    .history {
        height: 80%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
}

@media (max-width: 375px) and (min-width:320px) {
    .padding-top-61 {
        padding-top: 43px;
    }

    .text-name-card {
        font-size: 13px;
    }
    .text-name-card1 {
        font-size: 13px;
    }
    .history {
        height: 80%;
        background: #ffffff;
        overflow-y: auto;
        max-height: 100%
    }
    .col-4{
        padding: 0 2% !important;
    }
}

.h-80 {
    height: 80% !important;
}

.h-85 {
    height: 85% !important;
}

.h-90 {
    height: 90% !important;
}

.main{
    height: 100% !important;
    background-color: #fff;
}

.mobile {
    border: 1px solid #D1D3D4;
    width: fit-content;
    padding: 0.5% 1% 1% 1%;
    border-radius: 6px;
    margin-right: 5px;
    color: #606060;
}

.mobile_icon {
    width: 15px;
    height: 15px;
}

.mobile_name {
    /*color: #606060;*/
    font-size: 13px;
    margin-top: 5%;
}

.mobile_me {
    display: flex;
    width: fit-content;
    padding: 0.9% 2% 1% 1% !important;
    border-radius: 6px;
    margin-right: 5px;
    border: 1px solid #D1D3D4;
    color: #606060;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-card {
    border: none;
    width:23px;
    font-weight: 600;
    font-size: 13px;
    color: #5b5b5b;
    margin-top: 3%;
}

.label-number {
    border: 1px solid #D1D3D4;
    border-radius: 7px;
    width: 42px;
    height: 30px;
    margin-left: 12%;
}

.email-option {
    font-size: 16px;
    padding-left: 3.5%;
    font-weight: 700;
}

.email-check {
    width: 17px;
    height: 17px;
    float: right;
}

.hr-custom {
    border: 1px dashed #D1D3D4;
    margin: 3% 0%;
}

.bottom-history-item {
    /*border-bottom: 1px dashed #D1D3D4;*/
    padding-bottom: 7px;
}
.top-history-item{
    padding-top: 7px;
}

.d-inline-block {
    display: inline-block !important;
}

.quantity-block {
    border: 1px solid #D1D3D4;
    border-radius: 7px;
    display: flex;
    width: 50px;
    margin-left: 4px;
}

    .quantity-block .quantity-num {
        padding: 3px 3px;
        border-radius: 4px;
        outline: none;
        width: 30px;
        border: none;
        font-weight: 600;
        text-align: center;
        background-color: #ffffff
    }

.modal-dialog {
    width: 100%;
    max-width: 400px;
    font-size: 13px
}

.width-46{
    width: 46%;
}

.width-4{
    width: 4%;
}

.width-50{
    width: 50%;
    text-align: right;
    padding-right: 2%;
}

.width-50-custom {
    width: 50%;
    text-align: right;
    /*padding-right: 2%;*/
}

.network-field {
    display: flex;
    padding: 2% 2% 1% 2%;
    border-bottom: 1px solid #D1D3D4;
    border-top: 1px solid #D1D3D4;
    margin: 2% 4% 2% 4%
}

.icon-blue {
    color: #0058A0;
}

.offcanvas-body{
    padding: 3rem 1rem;
}

#MobileNumberCard {
    border: none;
    width: 100% !important;
}

    #MobileNumberCard:focus, #MobileNumberCard:active {
        border-color: #ced4da !important;
    }

.myTooltip {
    /*visibility: hidden;*/
    width: 50%;
    max-width: 428px;
    background-color: #555;
    color: #fff;
    margin-left: 20%;
    text-align: center;
    border-radius: 6px;
    padding: 3px;
    position: absolute;
    z-index: 1;
    bottom: 25%;
    /*right: -10%;*/
    opacity: 0.8;
    transition: opacity 0.3s;
}

.sweet-alert {
    margin: auto;
    transform: translateX(-50%);
}

    .sweet-alert.sweetalert-lg {
        width: 100px;
        height: 200px;
    }


.hidett {
    visibility: hidden;
}

.tooltip {
    position: relative !important;
    display: inline-block !important;
    opacity: 1 !important;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 190px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        right: -70%;
        /*margin-left: -75px;*/
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        z-index: 1000;
    }

.tooltip1 {
    position: relative !important;
    display: inline-block !important;
    opacity: 1 !important;
}

    .tooltip1 .tooltiptext1 {
        visibility: hidden;
        width: 380px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        /*bottom: 10%;*/
        /*right: -10%;*/
        /*margin-left: -75px;*/
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip1 .tooltiptext1::after {
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip1:hover .tooltiptext1 {
        visibility: visible;
        opacity: 1;
        z-index: 1000;
    }