body {
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

/* common classes */
.h2, h2 {
    font-size: 26px;
}

#fc_frame {
    bottom: 45px !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: black !important;
}

picture > source.power-by-ee {
    margin-left: 15px;
    width: 100px;
}
/*.modal#PortInConfirmationPopUp {
    z-index: 1060 !important;
}

.modal-backdrop.show:last-child {
    z-index: 1059 !important;
}*/
form#TopMenuMsisdnForm-m {
    padding: 5px !important;
}

.nm-plans-item h4 > img, .nm-buyNow-field p span > img, .Fiveg-img, .summary-detail strong > img {
    width: 28px !important;
    margin-left: 8px;
    display: inline-block !important;
    margin-top: -5px;
}

.Fiveg-img {
    width: 40px !important;
}

.dash-header .header-inner-wrapper picture > img {
    width: 100px;
    margin-left: 8px;
}


a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.bg-light-pink {
    background: #F4F9EB !important;
}

input:focus {
    outline: none !important;
    border-color: #ced4da !important;
    box-shadow: none !important;
}

#TopMenuMsisdnForm select {
    height: 40px !important;
}
/*#buttonDiv div[role="button"]{
    margin:auto !important;
}*/
#buttonDiv div[role="button"], #buttonDiv iframe {
    margin: auto !important;
}

.form-outer div.fb-login-button {
    text-align: center !important;
}

.usageHistory-tabs svg.pay-pal-icon {
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.usageHistory-tabs button.nav-link.active svg path {
    fill: #ffffff !important;
}
.country-flag + h4{
    margin-bottom:0 !important;
}
.radius-end-4 {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.bg-gray {
    background: #EEF1F5;
}

.bg-light-green {
    background: #F4F9EB;
}

.text-green {
    color: #1CB227 !important;
}

.shapes {
    position: absolute;
}

.form-control, .form-select {
    font-size: 16px;
    height: 52px;
    border-radius: 4px;
}

    .form-select.form-control {
        height: 50px;
    }

    .form-control[type="text"]::-webkit-input-placeholder,
    .form-control[type="password"]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    textarea.form-control::-webkit-input-placeholder {
        color: #999999;
        font-size: 16px !important;
    }

.form-label {
    font-size: 16px;
    color: #353535;
}

.ns-link {
    color: #1CB227;
    text-decoration: none;
}

    .ns-link:hover {
        color: #fdd900;
    }

.btn-primary {
    font-size: 14px;
    font-weight: 600;
    border: 0;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    height: 48px;
    padding: 0 30px;
    line-height: 50px;
    transition: 500ms;
    text-decoration: none;
    display: inline-block;
}

.nm-title {
    text-align: center;
    position: relative;
}

    .nm-title h2 {
        font-size: 36px;
        font-weight: 700;
        color: #252525;
    }

.btn-full {
    width: 100%;
}

.mobile-logo img, .mobile-logo {
    display: none;
}

.desktop-logo img {
    /*display: block;*/
    width: 100px;
    margin-right: 20px;
    cursor: pointer;
}

    .desktop-logo img.fiveG-logo {
        width: 130px !important;
    }

.btn-green {
    background: #1bb127 !important;
}

    .btn-green:hover {
        background: #fdd900 !important;
        transition: 500ms;
        color: #000 !important;
    }

.btn-yellow {
    background: #fdd900 !important;
    color: #000;
}

    .btn-yellow:hover {
        background: #1bb127 !important;
        transition: 500ms;
        color: #fff !important;
    }

.log-move1 {
    animation: log_move1 10s infinite linear;
}

.btn-close:focus {
    outline: 0;
    border: none;
    box-shadow: none;
}

/*.btn:hover {
    color: rgb(255, 255, 255) !important;
    background: rgb(39, 50, 64) !important;
}*/
.btn-hover-gray .btn-yellow:hover, .btn-hover-gray .btn-green:hover, .free-payg .btn-yellow:hover, .btn-hover-gray .btn-primary:hover {
    color: rgba(255, 255, 255) !important;
    background: rgba(39, 50, 64) !important;
}

.btn.btn-link:hover {
    background: transparent !important;
    color: black !important;
}

.log-move2 {
    animation: log_move2 10s infinite linear;
}

.log-move3 {
    animation: log_move3 10s infinite linear;
}

@keyframes log_move1 {
    0% {
        transform: translate(0px, 0px);
    }

    25% {
        transform: translate(20px, 0px);
    }

    50% {
        transform: translate(30px, -20px);
    }

    75% {
        transform: translate(20px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes log_move2 {
    0% {
        transform: translate(0px, 0px);
    }

    15% {
        transform: translate(0px, 20px);
    }

    30% {
        transform: translate(-20px, 20px);
    }

    45% {
        transform: translate(-20px, 40px);
    }

    60% {
        transform: translate(-25px, 30px);
    }

    75% {
        transform: translate(-20px, 20px);
    }

    90% {
        transform: translate(0px, 20px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes log_move3 {
    0% {
        transform: translate(0px, 0px);
    }

    25% {
        transform: translate(10px, 20px);
    }

    50% {
        transform: translate(30px, 30px);
    }

    75% {
        transform: translate(20px, 10px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.log_leftRight2 {
    animation: log_leftRight2 4s infinite alternate;
}

@keyframes log_leftRight2 {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(30px);
    }
}

.nm-checkbox {
    display: flex;
    align-items: center;
    position: relative;
}

    .nm-checkbox .form-check-input {
        width: 26px;
        height: 26px;
        box-shadow: 0 0 0;
        margin-right: 15px;
        margin-top: 1px;
    }

        .nm-checkbox .form-check-input:checked {
            background-color: #1bb127;
            border-color: #1bb127;
        }

    .nm-checkbox .form-check-label {
        font-size: 16px;
    }

.error-alert {
    font-size: 12px;
    line-height: 10px;
    position: relative;
    top: 8px;
}

    .error-alert i {
        font-size: 16px;
        position: relative;
        top: 2px;
    }

.nm-checkbox .error-alert {
    position: absolute;
    left: 42px;
    top: 90%;
}

.alert {
    display: flex;
    font-size: 14px;
    border: 0;
    justify-content: space-between;
    align-items: center;
}

.alert-danger {
    background: #FDEDEE;
}

.alert span { /*font-weight: 600;*/
    display: block; /*margin-bottom: 10px;*/
}

.alert img {
    margin-right: 15px;
    margin-top: 3px;
}

.alert .btn-yellow {
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
    margin-top: 18px;
    padding: 0 30px;
    margin-bottom: 10px;
}

.alert .btn-close {
    box-shadow: 0 0 0 !important;
}
/*.alert i {
    position: absolute;
    right: 3px;
    top: 5px;
    font-size: 12px;
}*/
.user-info + div {
    flex-grow: 1;
}

.alert-danger .btn-close {
    color: #842029;
    background: transparent url(../png/close_fill1.png);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}

.alert-success {
    background: #DEFFDB;
}

    .alert-success .btn-close {
        color: #842029;
        background: transparent url(../png/close_fill1_black.png);
        background-repeat: no-repeat;
        background-position: center;
        opacity: 1;
    }

.alert-secondary {
    font-size: 16px;
    background: #EEF1F5;
}

.dash-title {
    margin-bottom: 25px;
}

    .dash-title h2 {
        display: flex;
        align-items: center;
        color: #000;
        font-size: 22px;
        font-weight: 600;
    }

    .dash-title i {
        font-size: 32px;
        margin-right: 15px !important;
    }

    .dash-title h2 img {
        margin-right: 20px;
        width: 28px;
    }

.dash-sub-title h3 {
    color: #252525;
    font-size: 22px;
    font-weight: 600;
    margin: 30px 0 20px;
}

.dash-sub-title p, .dash-title p {
    font-size: 18px;
    color: #252525;
}

.dash-sub-title p {
    margin-top: 0px;
}

.dash-mt-0 h3 {
    margin: 0 0 5px !important;
}

.mySubscriptions-slider .owl-item .active {
    margin-right: 15px !important;
}

.btnChangePaymentCard > .nav-link i {
    vertical-align: middle;
    font-size: 40px;
}

#credit-card .card:hover,
#credit-card .card:hover li span.text-green,
#credit-card .card:hover p,
#credit-card .card:hover h3 {
    background: #1bb127 !important;
    color: white !important; /*border:1px solid #1bb127 !important;*/
}
/*Home Buy Now Modal*/
.modal.BuyNow .modal-body {
    padding: 0px 30px 30px;
    margin-top: -10px;
}

.nm-overlay {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.5);
    z-index: 99;
}

.modal.BuyNow .modal-body .nm-sim-icon {
    width: 45px;
}

.modal.BuyNow .modal-body .h-72 {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Login page */
.trust-piolet-rating {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #e5f0e6;
    border-radius: 50px;
    width: 100%;
    max-width: 400px;
    padding: 10px;
  
    color: #000;
}

    .trust-piolet-rating img.trust-piolet-logo {
        width: 200px !important;
        margin: 0 !important;
    }

    .trust-piolet-rating span {
        font-weight: 500;
        padding-top: 5px;
    }

a.trust-piolet-rating:hover {
    color: black !important;
}

.login-outer .col-right .trust-piolet-rating {
    background-color: #fff !important;
    justify-content: start !important;
    padding: 10px 0 !important;
    gap: 5px;
}

.login-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 94px);
    justify-content: center;
}

.col-left {
    background: #32B93C;
    display: grid;
    align-items: center;
    justify-content: start;
    position: relative;
}

.login-content {
    color: #fff;
    height: calc(50vh - 47px);
  padding-left:100px;
}
.now-mobile-app-image {
    height: calc(50vh - 47px);
    padding-left:100px;
}
.login-content h2 {
    margin-top: 70px;
    font-size:20px;
    font-weight:400;
    margin-bottom:16px;
}

#loginSlider {
    margin-bottom: 82px;
    width: 570px;
}

    #loginSlider .carousel-item h2 {
        font-size: 20px;
    }

    #loginSlider .carousel-item h1 {
        font-size: 55px;
        font-weight: 600;
    }

.carousel-indicators button {
    height: 10px !important;
    width: 10px !important;
    border-radius: 50%;
    opacity: 1 !important;
    border: 0 !important;
    background: #fff !important;
}

    .carousel-indicators button.active {
        background: #FDDA00 !important;
        width: 30px !important;
        border-radius: 10px !important;
    }

.login-outer p {
    font-size: 16px;
   margin-bottom:25px;
}

.carousel-indicators {
    margin: 0;
    justify-content: left;
    bottom: -20px;
}

.login-outer .group-img {
    width: 320px;
    margin-bottom: 20px;
}

.log-shape1 {
    top: 10px;
    right: 10px;
}

.log-shape2 {
    bottom: 10px;
    right: 40px;
}

.login-copyright {
    position: absolute;
    bottom: 40px;
    width: 570px;
}

.col-right {
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-form {
    width: 545px;
}

    .login-form h2, .Signup-form h2, .forget-password h2 {
        font-size: 42px;
        font-weight: 700;
        color: #353535;
    }

    .login-form h3,
    .forget-password h3,
    .Signup-form h3 {
        font-size: 36px;
        font-weight: 600;
        color: #353535;
    }

    .login-form p,
    .Signup-form p,
    .forget-password p {
        font-size: 18px;
        color: #353535;
    }

.newpass-form h3 {
    font-weight: 600;
    color: #353535;
    font-size: 30px;
    margin-bottom: 20px;
}

.form-outer {
    width: 500px;
    margin-top: 25px;
}

    .form-outer .mb-3 {
        position: relative;
    }

.pass-visible { /*position: absolute;*/ /*top: 22px;
    right: 15px;*/
    cursor: pointer;
    color: #999999;
}

.log-shape-3 {
    top: 75px;
    right: 80px;
}

.log-shape-4 {
    top: 100px;
    right: 110px;
}

.log-shape-5 {
    bottom: 180px;
    right: 110px;
}

.log-shape-6 {
    bottom: 150px;
    right: 90px;
}

.log-shape-7 {
    bottom: 90px;
    right: 100px;
}

.verify-account .form-control {
    font-size: 28px; /*letter-spacing:12px;*/
}

    .verify-account .form-control::-webkit-outer-spin-button,
    .verify-account .form-control::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .verify-account .form-control[type=number] {
        -moz-appearance: textfield;
    }

.forget-password .ns-link i {
    font-size: 22px;
    margin-right: 8px;
    position: relative;
    top: 2px;
}

.forget-password .btn-primary:disabled {
    background: #EBEBE9 !important;
    color: #000000;
}

/* Dashboard style */
.main-wrapper {
    width: 100%;
    min-height: 100%;
    background: #fff;
    margin: auto;
    display: grid;
    grid-template-columns: 290px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "sidebar header"
        "sidebar main"
        "sidebar footer";
}

.side-nav {
    width: 290px;
    background: transparent;
    height: calc(100vh - 290px);
    overflow-y: auto;
}

    .side-nav ul li ul {
        list-style: none;
    }

.dash-header {
    position: sticky;
    top: 0;
    background: #fff;
    grid-area: header;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.05); /* padding-right: 62px; */
    z-index: 99;
}

.dash-footer {
    position: sticky;
    bottom: 0;
    background: #F5F5F5;
    grid-area: footer;
    padding-right: 20px;
    z-index: 99;
}

.dash-sidebar {
    grid-area: sidebar;
    background: #1CB227;
    position: relative;
}

    .dash-sidebar .btn-yellow {
        position: relative;
        margin-bottom: 20px;
        /*bottom: 60px;
        left: 30px;*/
        width: 230px;
        font-weight: 600;
    }

.dash-main-content {
    grid-area: main; /* padding-right: 62px; */
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 140px);
}

.nm-national-rates {
    background: #fff;
    padding: 1rem;
    border: 2px solid #CCCCCC;
    border-radius: 5px;
}

.nationalRates-tbl thead tr:first-child th,
.nationalRates-tbl tbody tr td:first-child,
.custom-tbl tbody tr td:first-child,
.custom-tbl thead tr:first-child th {
    border-right: 1px solid #E0E0E0;
}

.nm-national-rates .nationalRates-tbl thead, .custom-tbl thead {
    background: #1cb227;
    color: #fff;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: #f3f3f3;
    color: var(--bs-table-striped-color);
}

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

.nationalRates-tbl thead th:first-child {
    border-top-left-radius: 5px !important;
}

.nationalRates-tbl thead th:last-child {
    border-top-right-radius: 5px !important;
}

.nm-national-rates .nationalRates-tbl thead th,
.custom-tbl thead th, .custom-tbl tbody td,
.nm-national-rates .nationalRates-tbl tbody td {
    padding: 15px;
    font-weight: normal;
    width: 49% !important;
}

.dash-sidebar .btn-yellow:hover {
    background: #545454 !important;
}
/* main content scroll bar */
.dash-main-content::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

.dash-main-content::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 2px solid transparent;
}

.dash-main-content::-webkit-scrollbar-thumb {
    background-color: #b0b7c4;
}

    .dash-main-content::-webkit-scrollbar-thumb:hover {
        background-color: #b0b7c4;
    }

.dash-main-content::-webkit-scrollbar-corner, .dash-main-content::-webkit-scrollbar-track {
    background-color: #fff;
}
/* side-nav scroll bar */
.side-nav::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

.side-nav::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 2px solid transparent;
}

.side-nav::-webkit-scrollbar-thumb {
    background-color: #fdd900;
}

    .side-nav::-webkit-scrollbar-thumb:hover {
        background-color: #fdd900;
    }

.side-nav::-webkit-scrollbar-corner, .side-nav::-webkit-scrollbar-track {
    background-color: transparent;
}

.view-detail-slider .owl-stage-outer {
    padding: 20px;
    margin: -20px;
}
/* sidebar */
.user-info {
    text-align: center;
    margin-top: 20px;
    color: #fff;
}

    .user-info .user-img {
        width: 90px;
        max-width: 90px;
        height: 90px;
        max-height: 112px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 auto;
    }

        .user-info .user-img img {
            height: 100%;
            width: 100%;
            border: 1px solid black;
            border-radius: 50%;
        }

    .user-info h2 {
        font-size: 26px;
        font-weight: 600;
        margin-top: 15px;
        margin-bottom: 3px;
    }

    .user-info p {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 75%;
        margin: 0 auto;
    }

        .user-info p:hover {
            text-overflow: initial;
            overflow: inherit;
            color: #fdd900;
        }

.dash-shape-1 {
    top: 20px;
    left: 20px;
}

.dash-shape-2 {
    bottom: 5px;
    width: 98.5%;
}

.dash-shape-3 {
    bottom: 35px;
    right: 20px;
    opacity: 0.7;
}

.dash-shape-4 {
    bottom: -30px;
    right: 60px;
    opacity: 0.7;
}

.seprator {
    background: #fff;
    width: 70px;
    height: 2px;
    margin: 30px auto 15px;
}

.side-nav {
    padding: 0 30px;
    position: relative;
}

    .dropdown-toggle::after, .side-nav a[data-bs-toggle="collapse"]::after {
        border: 0;
        width: 24px;
        height: 12px;
        position: absolute;
        right: 0;
        top: -1px;
        background: transparent;
        content: '\f107';
        font: var(--fa-font-solid);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        font-size: 26px;
    }

    .side-nav .navbar {
        padding: 0;
        list-style-type: none;
        display: block;
    }

        .side-nav .navbar li a {
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            position: relative;
        }

            .side-nav .navbar li a:before {
                position: absolute;
                width: 0px;
                height: 100%;
                background: #DDE22F;
                content: '';
                top: -1px;
                right: -30px;
                transition: 300ms;
            }

            .side-nav .navbar li a.active:before, .side-nav .navbar li a:hover:before {
                width: 7px;
                transition: 300ms;
            }

        .side-nav .navbar li.dropdown li a:before {
            display: none;
        }


#portOutPopUpForm .dropdown-menu {
    background: white !important;
}

#portInPopUpForm .dropdown-menu {
    background: white !important;
}

.dropdown-menu.show {
    position: relative;
}

/*.dropdown-menu li {
    margin-bottom: 5px !important;
}*/

.dropdown-menu li a {
    padding-left: 40px;
    background: transparent !important;
    font-size: 16px !important;
}

.side-nav .navbar li .dropdown-menu.show {
    padding-bottom: 0;
    margin-bottom: -5px;
}

.side-nav .navbar li {
    margin-bottom: 15px;
}

    .side-nav .navbar li a:hover, .side-nav .navbar li a.active, .side-nav .navbar li.active > a {
        color: #DDE22F;
    }

    .side-nav .navbar li a .bg-danger {
        margin-left: 10px;
        font-weight: 400;
        font-size: 13px;
    }

    .side-nav .navbar li a .icon, .side-nav .navbar li button .icon {
        font-size: 20px;
        margin-right: 10px;
    }

.dropdown-divider {
    height: 1px;
    background: #fff;
    margin: 15px 0;
}

.header-inner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin: 0 auto;
    width: calc(100% - 100px);
}

.dash-header .header-inner-wrapper .dash-logo {
    width: 50px;
}

.dash-header .header-inner-wrapper .user-info {
    margin-top: 0;
}

    .dash-header .header-inner-wrapper .user-info .user-img {
        width: 40px;
        height: 40px;
    }

.dash-header .header-inner-wrapper .dropdown-toggle {
    width: 115px;
    color: #707070;
}


.dropdown-toggle::after {
    top: 5px !important;
}

.dash-header .header-inner-wrapper .dropdown-menu {
    background: #EEF1F5;
    box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.12);
    top: 15px !important;
    right: 0 !important;
    left: auto !important;
}

    .dash-header .header-inner-wrapper .dropdown-menu:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 12px solid #EEF1F5;
        top: -12px;
        right: 46px;
        filter: drop-shadow(0px -1px 1px rgba(0,0, 0, 0.02));
    }

    .dash-header .header-inner-wrapper .dropdown-menu li a {
        padding-left: 15px;
    }

.footer-inner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin: 0 auto;
    width: calc(100% - 100px);
}

    .footer-inner-wrapper p {
        margin: 0;
        color: #545454;
        font-size: 16px;
    }

    .footer-inner-wrapper a {
        color: #545454;
        font-size: 20px;
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px;
    }

        .footer-inner-wrapper a:hover {
            color: #1bb127;
        }

.d_flex {
    display: flex;
}

.content-inner {
    padding: 30px 0;
    margin: 0 auto;
    width: calc(100% - 60px);
    position: relative;
}

.dash-main-content .log-shape-3 {
    top: 40px;
    right: 70px;
}

.dash-main-content .log-shape-4 {
    top: 70px;
    right: 90px;
}

.dash-main-content .log-shape-5 {
    right: 90px;
}

.dash-main-content .log-shape-6 {
    right: 80px;
}

.dash-main-content .log-shape-7 {
    right: 90px;
}

.dash-access {
    padding: 60px 80px;
    border-radius: 8px;
    position: relative;
    z-index: 9;
}

.dash-access-title {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

    .dash-access-title h3 {
        font-size: 24px;
        color: #252525;
        line-height: 34px;
    }

.dash-access p {
    font-size: 20px;
    color: #252525;
    margin-bottom: 35px;
    padding-right: 10px;
}

.dash-access-title img {
    margin-right: 20px;
    width: 55px;
}

.dash-access .btn-yellow {
    font-weight: 600;
}

.dash-main-content .log_leftRight2 {
    right: -60px;
    bottom: -50px;
}

.modal-header {
    background: #EFEFEF;
    padding-left: 30px;
    border: 0;
}

#autoTopup-Alert-modal i, #paygPlan-Alert-modal i {
    font-size: 5rem;
}

#portOutPopUp .modal-dialog,
#portInPopUp .modal-dialog,
#replaceSIM .modal-dialog {
    max-width: 680px;
}

p#authorize_card_message {
    margin-top: 1rem;
}

.modal-dialog, .modal-content {
    border: 0;
}

    .modal-dialog .btn-close {
        margin-right: 5px;
        opacity: 1;
    }

.modal-title {
    font-size: 22px;
    color: #353535;
}

.modal-body {
    padding: 20px 50px 5px;
}

.dash-initial .dash-access {
    height: 100%;
}


/* My Account */
label.btn-uploadFile,
label.btn-uploadFile:hover,
label.btn-uploadFile:focus {
    border: 1px solid black;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
}
/* Main dashboard */
.no-detail-item {
    border: 1px solid #DFDFDF;
    box-shadow: 6px 6px 6px 0px rgba(0,0, 0,0.01);
    padding: 30px 30px 25px;
    border-radius: 8px;
    height: 100%;
    position: relative;
    z-index: 9;
    background: #fff;
}

.dash-main-home p {
    color: #353535;
    margin: 0;
    font-size: 14px;
}

    .dash-main-home p span {
        font-weight: 600;
    }

.active-no {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #dadcdf;
    padding-bottom: 20px;
    margin-bottom: 18px;
}

    .active-no h3 {
        font-size: 20px;
        margin: 0;
        font-weight: 600;
        color: #343434;
    }

    .active-no h2 {
        font-size: 36px;
        margin: 0;
        font-weight: 600;
        color: #32B93C;
        line-height: 46px;
        text-align: right;
    }

    .active-no p {
        font-size: 14px;
        margin: 0;
    }

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

.no-explore p {
    font-size: 18px;
    margin-bottom: 10px;
}

.no-explore h3 {
    color: #353535;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 20px;
}

.no-explore .btn-green {
    margin-left: 10px;
}

.dash-auto-topUp {
    height: 100%;
    padding: 20px 20px 0;
    border-radius: 8px;
}

    .dash-auto-topUp h3 {
        color: #353535;
        font-size: 18px;
        font-weight: 500;
        margin: 0;
    }

.dash-main-home .form-switch .form-check-input {
    box-shadow: 0 0 0 !important;
    outline: none !important;
    height: 24px;
    width: 40px;
    border: 1px solid rgba(0,0,0,.25) !important
}

    .dash-main-home .form-switch .form-check-input:focus, .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    }

    .dash-main-home .form-switch .form-check-input:checked, .form-switch .form-check-input:checked {
        background-color: #1cb227;
        border-color: #1cb227 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

.dash-info-icon {
    font-size: 20px;
    margin: 7px 0 0 10px;
    display: inline-block;
    color: #1bb127;
}

.dash-auto-topUp p {
    font-size: 14px;
}

.dash-active-package {
    height: 100%;
    padding: 20px 20px 0;
    border-radius: 8px;
}

    .dash-active-package h3 {
        color: #353535;
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        word-break: break-all;
    }

    .dash-active-package h4 {
        color: #353535;
        font-size: 16px;
        font-weight: 400;
        margin: 15px 0 0;
        text-align: center;
    }

        .dash-active-package h4 span {
            font-weight: 600;
        }

    .dash-active-package p {
        color: #353535;
        font-size: 14px;
        font-weight: 400;
        margin: 0;
    }

    .dash-active-package .form-switch {
        margin: 0 0 0 auto;
        display: table;
    }

.dash-progress {
    margin: 0 auto;
}

    .dash-progress .loader-bg {
        box-shadow: 0 0 0;
    }

    .dash-progress .text {
        font-size: 19px !important;
    }

.package_data-text {
    text-align: center;
    line-height: 17px;
    font-size: 16px;
    padding-top: 5px;
}

.progress-orange .text {
    color: #FABE2A !important;
}

.progress-orange .loader-bg {
    border-color: #f7e6bc;
}

.progress-orange .loader-spinner {
    border-color: #FABE2A;
}

.progress-green .text {
    color: #6AAF42 !important;
}

.progress-green .loader-bg {
    border-color: #b3df99;
}

.progress-green .loader-spinner {
    border-color: #6AAF42;
}

.progress-red .text {
    color: #bf081b !important;
}

.progress-red .loader-bg {
    border-color: #efb8be;
}

.progress-red .loader-spinner {
    border-color: #bf081b;
}
/* Plans */
.nm-index {
    z-index: 5;
    position: relative;
}

.nm-plans .tab-pane {
    position: relative;
}

.nm-shapes {
    position: absolute;
    z-index: -1;
}

.nm-shapes1 {
    left: -100px;
    top: -80px;
}

.nm-shapes2 {
    right: -100px;
    bottom: -70px;
}
/* Tabs Css */
.nm-plans .nav-tabs {
    justify-content: center;
    border: 0;
    margin: 0;
}

    .nm-plans .nav-tabs .nav-link.active {
        color: #1cb227;
        border-bottom: 5px solid #1cb227;
        background: transparent;
    }

    .nm-plans .nav-tabs .nav-link {
        border: 0;
        font-size: 18px;
        font-weight: 600;
        color: #000;
        border-bottom: 5px solid #d8d8d8;
        width: 160px;
        padding: 14px 0;
        position: relative;
        background: transparent;
    }

/* Plans item */
.nm-badge {
    background: #bf081b;
    border-radius: 5px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 6px 10px;
    position: absolute;
    font-weight: 400;
}

.nm-plans-item {
    border-radius: 12px;
    padding: 30px 30px 115px;
    background-color: #eef1f5; /*box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 6%);*/
    margin-top: 30px;
    background: #eef1f5;
    position: relative;
    z-index: 5;
    transition: 300ms;
    height: calc(100% - 30px);
}

.dash-main-content .nm-plans-item {
    margin-top: 0;
    margin-bottom: 30px;
}

.nm-plans-item h4 {
    color: #353535;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    /*margin-bottom: 15px;*/
}

#checkout-form-new .bg-light-green .fiveG {
    font-size: 18px !important;
    display: inline;
}

    #checkout-form-new .bg-light-green .fiveG > img {
        display: inline !important;
        width: 24px;
        margin-left: 10px;
        margin-top: -5px;
    }

.nm-plans-item h3 {
    color: #000;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
}

    .nm-plans-item h3 span {
        font-weight: 600;
    }

.nm-plans-item h2 {
    color: #000;
    font-size: 34px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: right;
}

.nm-plans-item .hr {
    margin-bottom: 15px;
}

.nm-plans-item p {
    font-size: 14px;
    color: #353535;
    font-weight: 400;
    margin-top: 8px;
    margin-bottom: 8px;
}

    .nm-plans-item p img {
        margin-right: 10px;
    }

.nm-plans-item .btn-green {
    width: calc(100% - 60px) !important;
    margin-top: 15px !important;
    position: absolute;
    bottom: 60px;
}

.nm-plans-item .btn-link {
    font-size: 14px;
    color: #000;
    text-decoration: none;
    display: table;
    margin: 0 auto 0;
    padding: 15px 0 0;
    border-bottom: 1px solid #535353;
    border-radius: 0;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

    .nm-plans-item .btn-link:hover {
        border-bottom-color: #1bb127;
        color: #1cb227 !important;
    }

.nm-plans-item .nm-badge {
    top: -13px;
    left: 30px;
}

.sidebarDropdown {
    display: block !important;
    height: 0;
    overflow: hidden
}

    .sidebarDropdown li {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .sidebarDropdown.show {
        height: auto;
    }

.nm-plans-item:hover {
    box-shadow: 0px 0px 12px 7px rgba(0,0,0, 0.01); /*cursor: pointer;*/
    transition: 300ms;
}

/* component style */
/* great value sim */
.great-value-sim {
    padding-top: 25px;
    padding-bottom: 20px;
    border-color: #e2ebd1;
}

    .great-value-sim p {
        font-size: 16px;
    }

    .great-value-sim h3 {
        font-size: 20px;
        margin-bottom: 13px;
    }

    .great-value-sim .btn-green {
        margin-left: 0;
        font-size: 16px;
        height: 44px;
        line-height: 46px;
        padding: 0 20px;
    }

    .great-value-sim .order-new-sim {
        background: url(../png/new-sim-bg2.png);
        background-size: 100% 100%;
    }

        .great-value-sim .order-new-sim .btn-yellow {
            margin-top: 15px;
        }
/* No active product */
.no-active-product {
    padding: 30px;
    border-radius: 8px;
}

    .no-active-product h3 {
        display: flex;
        align-items: center;
        font-size: 29px;
        color: #545454;
        font-weight: 400;
    }

    .no-active-product img {
        margin-right: 10px;
    }

    .no-active-product h2 {
        font-size: 26px;
        margin-top: 24px;
        color: #545454;
        font-weight: 600;
    }

.dropdown-item:hover {
    cursor: pointer !important;
}

.modal.show {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
/* Order messages */
.order-messages {
    padding: 50px 0;
    margin: 0 auto;
    width: calc(100% - 170px);
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .order-messages img {
        width: 140px;
    }

    .order-messages h1 {
        font-size: 38px;
        font-weight: 600;
    }

    .order-messages p {
        font-size: 18px;
        color: #353535;
    }

    .order-messages .btn {
        width: 270px;
    }

    .order-messages h4 {
        font-size: 18px;
    }

        .order-messages h4 a {
            text-decoration: underline;
        }

    .order-messages h3 {
        font-weight: 600;
    }

.text-dark-danger {
    color: #842029;
}

/* order summary */
.order-summary h4 {
    font-size: 22px;
    color: #545454;
}

.order-summary h5 {
    font-size: 18px;
    color: #353535;
}

.promo-code {
    margin-top: 120px;
}

    .promo-code .dash-sub-title h3 {
        margin-bottom: 10px;
    }

.summary-detail .sum-row {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.summary-detail p {
    margin: 0;
}

.summary-detail .sum-left {
    flex: 0 0 35%;
}

.summary-detail .btn-green {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    margin-left: 100px;
}

.summary-detail .form-switch .form-check-input {
    box-shadow: 0 0 0 !important;
    outline: none !important;
    height: 24px;
    width: 40px;
    border: 1px solid rgba(0,0,0,.25) !important;
}

.summary-detail img {
    width: 50px;
}

.summary-auto-topUp {
    padding: 15px;
    flex: 0 0 100%;
    border-radius: 8px;
}

    .summary-auto-topUp i.text-green {
        margin-right: 10px;
        margin-top: 5px;
    }
/* select 2 international plans */
.select2-selection {
    border: 1px solid #ced4da;
    outline: none !important;
    background: #fff !important;
    line-height: 50px !important;
    height: 50px !important;
    padding: 5px 10px !important;
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url(../png/arrow-down-2.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: contain;
    border: none !important;
    width: 30px !important;
    height: 9px !important;
}

.select2-container {
    width: 100% !important;
    display: block !important;
}

.nm-select2-img-flag {
    width: 40px;
    margin-right: 5px;
    border: 1px solid lightgray;
}

.roaming-charges {
    margin: 10px 0;
    padding: 15px;
}

    .roaming-charges img {
        width: 22px;
        margin-right: 10px;
    }

.select2-container--default .select2-selection--single .select2-selection__rendered,
#PaymentCardInfo_AddressInfo_CountryCode .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
#PaymentCardInfo_AddressInfo_CountryCode .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
    right: 15px !important;
}

/* Badge */
.nm-plans .nav-tabs .nav-link .badge {
    top: 4px;
    right: -56px;
}

.nm-badge {
    background: #bf081b;
    border-radius: 5px;
    font-size: 14px;
    text-transform: uppercase;
    padding: 7px 14px;
    position: absolute;
    font-weight: 400;
}

.nm-plans-item .nm-badge {
    top: -15px;
    left: 30px;
}

/* History */
table {
    white-space: nowrap;
}

    table tbody tr td img {
        width: 55px;
        margin-right: 10px;
        vertical-align: middle;
    }

a i {
    cursor: pointer;
}

#PaymentHistory table tbody tr td.bi-credit-card {
    cursor: default !important;
}

.usageHistory-tabs .nav-tabs .nav-link {
    color: #000;
    background-color: #EEF1F5;
    border-radius: 5px;
    border: 0;
}

    .usageHistory-tabs .nav-tabs .nav-link.active, .selectTopUpAmount > input[type="radio"]:checked + label.btn-secondary {
        color: #fff;
        background: #1cb227;
        border-radius: 5px;
        border: 0;
    }

        .usageHistory-tabs .nav-tabs .nav-link.active > .paypal {
            color: #fff;
        }

.usageHistory-tabs .nav-tabs-history {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 15px;
}

.selectTopUpAmount {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.card-selected .card {
    background: #1bb127 !important;
}

    .card-selected .card h3, .card-selected .card p, .card-selected .card i {
        color: #fff !important;
    }

#newCarde.card-selected .card {
    background: #1bb127;
    color: #fff;
}

    #newCarde.card-selected .card h5 {
        color: #fff;
    }

#useAnotherCard.card-selected .card {
    background: #1bb127;
    color: #fff;
}

    #useAnotherCard.card-selected .card h5 {
        color: #fff;
    }

.paypal {
    color: blue;
}

.selectTopUpAmount .btn-secondary {
    border-radius: 4px;
    background: #EEF1F5;
    font-weight: 500;
    margin-right: 5px;
    font-size: 20px;
    color: #000;
    border: 1px solid #f1f3f4;
    padding: 6px 15px;
    cursor: pointer;
}

.selectTopUpAmount .price-radio input {
    position: absolute;
    opacity: 0;
}

[type="radio"]:checked + label {
    background: #1bb127;
    color: #fff;
}
/* //payments */
.card-selected .saved-card > ul li > span.text-green {
    color: white !important;
}

.saved-card h3 {
    color: #353535;
    font-weight: 600;
    font-size: 18px;
    padding: 0;
    margin: 20px 0 0;
}

.saved-card p {
    font-size: 14px;
    margin: 0;
    color: #545454;
}
/* .saved-card ul li img{
    width: 70px;
} */

/* Rates */
.rates-table table td:last-child {
    text-align: right;
    font-weight: 600;
    padding-right: 0;
}

.internationalRates-details {
    background: #f8f9fa;
    margin-bottom: 30px;
    border: 1px solid #e8e8e8;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .internationalRates-details h3 {
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 15px;
    }

    .internationalRates-details h2 {
        font-size: 40px;
        margin: 0;
    }

        .internationalRates-details h2 span {
            font-size: 12px;
            font-weight: 400;
            display: block;
            text-align: center;
            margin-top: 10px;
        }

    .internationalRates-details img {
        height: 40px;
        width: 40px;
        margin-bottom: 20px;
    }

/* my producr */
#dashPlanSlider .carousel-indicators {
    position: absolute;
    justify-content: center;
    bottom: -30px;
}

#dashPlanSlider .nm-plans-item .nm-badge {
    top: -8px;
    font-size: 12px;
    padding: 3px 6px;
    left: 15px;
}

#dashPlanSlider .nm-plans-item {
    margin-bottom: 0;
    padding: 12px 15px 15px;
}

.dashRateSlider .nm-plans-item {
    padding: 30px !important;
}

#dashPlanSlider .nm-plans-item .hr {
    margin: 0 0 10px;
}

#dashPlanSlider .nm-plans-item p {
    margin: 5px 0;
}

#dashPlanSlider .carousel-indicators button {
    background: #ccc !important;
}

    #dashPlanSlider .carousel-indicators button.active {
        background: #FDDA00 !important;
    }

#dashPlanSlider .nm-plans-item .btn-green {
    margin-top: 10px;
    height: 40px;
    line-height: 42px;
}

#dashPlanSlider .nm-plans-item h3 {
    font-size: 22px;
    margin: 0;
}

#dashPlanSlider .nm-plans-item .btn-link {
    padding-top: 10px;
}

#dashPlanSlider .carousel-inner {
    padding-top: 8px;
    margin-top: -8px;
}

#dashPlanSlider .nm-plans-item:hover {
    box-shadow: 0 0 0;
}

.nm-freeSIM-link {
    text-decoration: none;
    color: #1cb227;
    font-weight: 500;
}

.flag-modal a {
    text-decoration: none;
    color: #1cb227;
    font-weight: 500;
}

.active-sim-no {
    padding: 30px 25px 25px;
    background: #F4F9EB;
    position: relative;
    height: 100%;
}

    .active-sim-no:after {
        content: '';
        position: absolute;
        border-left: 45px solid transparent;
        border-right: 45px solid transparent;
        border-bottom: 45px solid #fff;
        transform: rotate(135deg);
        right: -31px;
        bottom: -7px;
    }

    .active-sim-no h2 {
        font-size: 20px;
        color: #353535;
        font-weight: 400;
    }

    .active-sim-no h3 {
        font-size: 20px;
        color: #353535;
        font-weight: 600;
    }

    .active-sim-no .no-active-link {
        color: #1bb127;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 600;
        display: block;
        margin-top: 20px;
    }

        .active-sim-no .no-active-link span {
            font-size: 50px;
            display: inline-block;
            position: relative;
            top: -2px;
            line-height: 16px;
        }

    .active-sim-no .dropdown-toggle::after {
        display: none;
    }

    .active-sim-no .dropdown {
        position: absolute;
        right: 20px;
        top: 30px;
        width: 50px;
    }

    .active-sim-no .dropdown-toggle {
        font-size: 22px;
        text-align: right;
        display: block;
    }

    .active-sim-no .dropdown:hover .dropdown-menu {
        display: block;
    }

    .active-sim-no .dropdown .dropdown-menu {
        background: #fff;
        right: 0 !important;
        left: auto !important;
        padding-left: 0px;
        border-radius: 8px;
        margin-top: 0 !important;
    }

        .active-sim-no .dropdown .dropdown-menu.show {
            transform: translate(0px, 22px) !important;
        }

        .active-sim-no .dropdown .dropdown-menu li a {
            padding-left: 15px;
            padding-right: 15px;
            font-size: 16px;
        }

            .active-sim-no .dropdown .dropdown-menu li a:hover {
                color: #1bb127;
            }

.order-new-sim {
    padding: 20px 30px;
    height: 100%;
    background: url(../png/new-sim-bg.png);
    background-size: 100% 100%;
}

    .order-new-sim img {
        width: 40px;
        margin-right: 15px;
        height: auto;
    }

    .order-new-sim h2 {
        font-size: 20px;
        margin: 0;
    }

    .order-new-sim .btn-yellow {
        height: 40px;
        line-height: 42px;
        font-size: 16px;
        margin-top: 10px;
        padding: 0 20px;
    }

.dash-auto-topUp.my-account-auto-topUp {
    height: auto;
    padding: 30px 30px 15px;
}

    .dash-auto-topUp.my-account-auto-topUp .form-label {
        font-size: 16px;
    }

/* Top up SIM */
section.usageHistory-tabs .card-body {
    cursor: pointer;
    padding: 10px;
}

/* Porting Details */
input[type='radio'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px; /* border:1px solid darkgray; */
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 5px 0px gray;
}

    input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

    input[type='radio']:checked:before {
        background: green;
    }

#useAnotherCard {
    background: #1bb127;
    color: #fff;
}

/* menu toggle button*/
.menu-toggle {
    border: 0;
    background: transparent;
    color: #1bb127;
    opacity: 1;
    font-size: 36px;
    margin: 0 0 0 8px;
    position: relative;
    top: 5px;
    border-radius: 6px;
    padding: 0;
    display: none;
}

.menu-toggle-close {
    border: 0;
    /*background-image: url(../images/close-icon.png);*/
    background-position: center;
    background-size: 36px 36px;
    opacity: 1;
    margin: 0 15px 0 0;
    position: relative;
    top: 10px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 15px;
    display: none;
    background-color: #1bb127;
}

#anotherCardForm .dash-sub-title h3 {
    margin-bottom: 10px;
    margin-top: 20px;
}

.num-list-toggle {
    border: 0;
    background: transparent;
    font-size: 26px;
    padding: 0;
    margin-right: 0px;
    display: none;
}
/*App section in Dashboard*/
.app-bottom-cta {
    display:flex;
    align-items:center;
    justify-content:start;
    background-color: #273240;
    color:#fff;
    padding:20px;
    gap:0 20px;
    padding-left:100px;
}
.app-bottom-cta img{width:25%;}
.app-login-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}
.copy-right-app{
    display:flex;
    align-items:center;
    justify-content:end;
}
    .copy-right-app p{
        margin:0;
    }
.desktop-logo{
    margin-top:60px;
}
.now-use-app-btn {
    background-color: #1bb127 !important;
    color: #fff !important;
    border-radius: 3px;
    padding: 4px 10px;
    margin-top: 10px;
}
.login-content h1{font-size:2rem !important;margin-bottom:16px;}
/* Media Queries */
@media screen and (min-width:1700px) and (max-width:2500px){

    .now-mobile-app-image {
        margin-top: 70px !important;
    }}

@media screen and (max-width:1600px) {

    .great-value-sim .order-new-sim h2 {
        font-size: 16px;
    }

    .great-value-sim .no-explore h3 {
        font-size: 16px;
    }

    .great-value-sim .gx-4 {
        --bs-gutter-x: 1rem;
        align-items: flex-start;
    }

    .great-value-sim .order-new-sim {
        padding: 18px 15px;
        height: auto;
    }

    .great-value-sim .col-md-6:first-child {
        width: 58%;
    }

    .great-value-sim .col-md-6:last-child {
        width: 42%;
    }

    .great-value-sim .order-new-sim .btn-yellow {
        padding: 0 9px;
    }

    .great-value-sim .order-new-sim img {
        width: 35px;
    }

    .no-detail-item {
        padding: 15px 10px 15px;
    }

    .no-explore h3 {
        font-size: 22px;
    }

    .dash-initial .dash-access {
        padding: 30px;
    }

   
}
@media screen and (min-width:1480px) and (max-width:1800px) {
    #buttonDiv{margin-top:0;}
    .login-form h2, .Signup-form h2, .forget-password h2 {
        font-size: 34px;
    }
    .desktop-logo img {
        width: 80px;
    }
    .desktop-logo {
        margin-top: 20px;
    }
        .desktop-logo img.fiveG-logo{width:115px !important;}
        .login-content h2 {
            margin-top: 30px;
        }
    .now-mobile-app-image .img-fluid{max-width:70% !important;margin-top:60px;}
    .login-outer {
        height: calc(100vh - 79px)
    }
}
@media screen and (max-width:1440px) {
    .header-inner-wrapper, .content-inner, .footer-inner-wrapper {
        width: calc(100% - 60px);
    }

    .main-wrapper {
        grid-template-columns: 290px 1fr;
    }

    .side-nav {
        width: 290px;
    }

    .dash-sidebar .btn-yellow {
        width: 230px;
    }

    .dash-main-content .shapes {
        display: none;
    }

    .dash-auto-topUp, .dash-active-package {
        padding: 15px;
    }

        .dash-active-package h4, .no-explore p {
            font-size: 16px;
        }

        .dash-auto-topUp p {
            padding-right: 5px;
        }

    .dash-access-title h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .dash-access p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .dash-access-title {
        margin-bottom: 20px;
    }

    #loginSlider {
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .login-copyright {
        bottom: 20px
    }

    #loginSlider .carousel-item h1 {
        font-size: 42px;
    }

    .login-form h2 {
        font-size: 32px;
    }

    .login-content {
        color: #fff;
        height: auto;
    }

    .desktop-logo {
        margin-top: 15px;
    }

    .now-mobile-app-image {
        height: auto;
    }

    .login-content h2 {
        margin-top: 12px;
    }

    .now-mobile-app-image img {
        width: 54% !important;
    }

    .login-form p, .Signup-form p, .forget-password p {
        font-size: 18px;
        color: #353535;
        margin-top: 5px !important;
        margin-bottom: 10px;
    }

    .trust-piolet-rating {
        margin-bottom: 0 !important;
    }

    .app-download-btns {
        margin-bottom: 20px;
    }
}
@media screen and (min-width:1400px) and (max-width:1799px) {
    .login-outer {
        height: calc(100vh - 74px)
    }
    .now-mobile-app-image img {
        width:100% !important;
        margin-top:50px;
    }
    .desktop-logo{margin-top:30px !important;}
}
@media screen and (max-width:1365px) {
    .main-wrapper {
        grid-template-areas:
            "header header"
            "main main"
            "footer footer";
    }

    .dash-header .header-inner-wrapper .dropdown-toggle::after {
        content: ''
    }

    .dash-sidebar {
        position: fixed;
        height: 100vh;
        z-index: 2147483601;
        left: -101%;
        transition: 500ms;
    }

        .dash-sidebar.menu-show {
            transition: 500ms;
            left: 0;
        }

        .dash-sidebar .btn-yellow {
            bottom: 30px;
        }

    .side-nav {
        height: calc(100vh - 360px);
    }

    .header-inner-wrapper, .content-inner, .footer-inner-wrapper {
        width: calc(100% - 40px);
    }

    .gcs-1 {
        --bs-gutter-x: 1rem;
    }

    .menu-toggle-close, .menu-toggle {
        display: inline-block;
    }
}

@media screen and (max-width:1280px) {
    .login-form {
        width: 100%;
    }

    #loginSlider {
        width: 100%;
    }

    .login-outer .col-left {
        padding: 0 20px;
    }

    .form-outer {
        width: 100%;
    }

    .login-outer .col-right {
        justify-content: initial;
        padding: 0 20px 20px;
    }

    .dash-auto-topUp.my-account-auto-topUp {
        height: auto;
        padding: 25px 25px 10px;
    }

        .dash-auto-topUp.my-account-auto-topUp .col-md-4 .gx-5 {
            --bs-gutter-x: 1rem !important;
        }

        .dash-auto-topUp.my-account-auto-topUp .col-md-4 {
            width: 40%;
        }

        .dash-auto-topUp.my-account-auto-topUp .col-md-8 {
            width: 60%;
        }

    .dash-auto-topUp p br {
        display: none;
    }
}

@media screen and (max-width:1024px) {
    .mobile-logo img, .mobile-logo {
        display: block;
    }
        .mobile-logo img {
            display: inline;
            margin-right: 12px;
            width: 50px;
        }
            .mobile-logo img.power-by-ee {
                width: 100px;
                margin-top: 5px;
            }
    #loginSlider {
        width: auto;
    }

    .form-outer {
        margin: auto;
    }

    .col-left {
        padding: 30px;
    }

    #loginSlider .carousel-item h1 {
        font-size: 50px;
    }

    .login-form h2,
    .login-form h3,
    .login-form p {
        width: 440px;
        margin: 10px auto;
    }

    .order-new-sim h2 {
        font-size: 16px;
    }

    .great-value-sim .col-md-6:first-child {
        width: 55%;
    }

    .great-value-sim .col-md-6:last-child {
        width: 45%;
    }
    .col-left {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .login-content {
        text-align: center;
        padding-bottom: 30px;
        padding-left: 0;
    }

    .now-mobile-app-image {
        height: auto;
        text-align: center;
        margin-top: 30px;
        padding-left: 0;
    }

        .now-mobile-app-image img {
            width: 70%;
        }

    .login-outer {
        height: auto;
    }

    .app-login-footer {
        display: block;
    }

    .app-bottom-cta {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px 0;
        background-color: #273240 !important;
        text-align: center;
    }

        .app-bottom-cta p {
            font-size: 14px;
        }

    .bg-color-on-mobile {
        background-color: #273240 !important;
    }

    .login-content {
        height: auto;
    }

    .app-bottom-cta img {
        width: 200px;
    }

    .copy-right-app p {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        text-align: center;
    }

    .login-content h2 {
        margin-top: 0;
    }

    .login-content h2 {
        font-size: 16px !important;
    }

    .login-content h1 {
        font-size: 22px !important;
    }

    .login-content p {
        font-size: 14px !important;
    }
    .login-outer {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    .desktop-logo img {
        display: none;
    }
}

@media screen and (min-width:992px) and (max-width:1025px) {
    body{overflow:auto;}
    .col-right{padding:30px;}
    .copy-right-app{justify-content:center !important;}
    .login-copyright {
        width: 100% !important;
    }
    .login-form h2, .login-form h3, .login-form p{width:auto;}
}
@media screen and (max-width:991px) {

    .mobile-logo {
        padding: 10px 0;
    }

    .mobile-logo {
        display: block;
    }

        .mobile-logo img {
            display: inline;
            margin-right: 12px;
            width: 50px;
        }

            .mobile-logo img.power-by-ee {
                width: 100px;
                margin-top: 5px;
            }



    .login-outer {
        justify-content: start;
        grid-template-columns: 1fr;
    }

    .login-form .trust-piolet-rating {
        background-color: transparent !important;
        margin: 5px;
    }

    l

    .login-form h2,
    .Signup-form h2,
    .forget-password h2,
    .login-form h3 {
        font-size: 24px; /* text-align: center; */
        margin-bottom: 20px;
        font-weight: 600;
    }

    /* .login-form p {
        text-align: center;
    } */

    .shapes {
        display: none;
    }

    .form-control[type="text"]::-webkit-input-placeholder,
    .form-control[type="password"]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    textarea.form-control::-webkit-input-placeholder {
        font-size: 16px;
    }

    .col-left .logo {
        display: none;
    }

    .col-right {
        padding: 20px;
    }

        .col-right .logo {
            display: block;
            width: 90px;
            margin: 20px auto;
        }

    input.btn-yellow + p {
        text-align: left;
    }

    #loginSlider,
    .login-copyright,
    .form-outer,
    .login-form h2,
    .login-form h3,
    .login-form p {
        width: 100%;
    }

    .login-copyright {
        position: static;
    }

    #login #loginSlider .carousel-item h1 {
        font-size: 35px;
    }

    .login-outer .group-img {
        width: 250px;
    }

    /* .login-outer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }*/

    .form-outer input.btn-yellow {
        width: 100%;
    }

    .package-overview .col-md-6 {
        display: grid;
        width: 100%;
    }

        .package-overview .col-md-6:first-child {
            margin-bottom: 25px;
        }

    .dash-graphs { /*display: grid;*/
        grid-template-columns: 1fr 1fr;
    }

        .dash-graphs > .col-md-4 {
            width: 100%;
        }

            .dash-graphs > .col-md-4:first-child {
                grid-column: 1/4;
                margin-bottom: 15px;
            }

        .dash-graphs.product-graphs > .col-md-4:first-child {
            grid-column: initial;
            margin: 0;
        }

        .dash-graphs.product-graphs > .col-md-4:last-child {
            grid-column: 1/4;
            margin-bottom: 15px;
            margin-top: 15px;
        }

    .dash-initial .row {
        display: table;
        margin: 0;
    }

        .dash-initial .row .col-md-6 {
            width: 100%;
            margin-bottom: 20px;
            text-align: center;
            padding: 0;
        }

    .dash-access-title {
        display: block;
    }

    br {
        display: none;
    }

    .dash-access-title h3 {
        margin-top: 15px;
    }

    .dash-initial .dash-access {
        padding: 20px;
    }

    .dash-initial .btn-primary {
        width: 210px;
        margin-top: 10px;
    }

    .nm-plans .row.gx-5.mt-5 {
        margin-top: 10px !important;
    }

    .history-form .form-label {
        margin: 0 5px !important;
        font-size: 14px;
    }

    .history-form .col-sm-6 {
        display: flex;
        align-items: center;
    }

    .history-form select, .history-form input {
        font-size: 16px;
    }

    .rates-table {
        padding: 0 5px !important;
    }

        .rates-table tr td {
            font-size: 14px;
        }

            .rates-table tr td span {
                display: block;
            }

        .rates-table table td:last-child {
            padding-right: 5px;
        }

    .active-sim-no-list {
        margin-bottom: 2rem !important;
    }

        .active-sim-no-list .col-lg-3 {
            margin-bottom: 15px;
        }

    .order-summary .col-md-6:first-child {
        width: 35%;
    }

    .order-summary .col-md-6:last-child {
        width: 65%;
        padding-left: 30px;
    }

    .summary-detail .btn-green {
        margin-left: 60px;
    }

    .order-summary h5.mx-2 {
        margin-right: 0 !important;
    }

    .order-summary .promo-code .btn-green {
        padding: 0 15px;
    }

    .form-outer mt-5 {
        margin-top: 2rem !important
    }

    .login-form .mt-5 {
        margin-top: 2rem !important;
    }

    .login-form h2 {
        margin-top: 20px;
    }

    .login-content > img:first-child {
        width: 90px;
        margin-top: 30px;
    }

    body {
        overflow-y: scroll
    }
    /*app section css*/
    /* .col-left {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .login-content {
        text-align: center;
        padding-bottom: 30px;
        padding-left:0;
    }

    .now-mobile-app-image {
        height: auto;
        text-align: center;
        margin-top: 30px;
        padding-left:0;
    }

        .now-mobile-app-image img {
            width: 70%;
        }

    .login-outer {
        height: auto;
    }

    .app-login-footer {
        display: block;
    }

    .app-bottom-cta {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px 0;
        background-color: #273240 !important;
        text-align: center;
    }

        .app-bottom-cta p {
            font-size: 14px;
        }

    .bg-color-on-mobile {
        background-color: #273240 !important;
    }

    .login-content {
        height: auto;
    }

    .app-bottom-cta img {
        width: 200px;
    }

    .copy-right-app p {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        text-align: center;
    }

    .login-content h2 {
        margin-top: 0;
    }

    .login-content h2 {
        font-size: 16px !important;
    }

    .login-content h1 {
        font-size: 22px !important;
    }

    .login-content p {
        font-size: 14px !important;
    }*/
}

@media screen and (max-width:767px) {
    .package_data-text {
        line-height: 16px;
        font-size: 14px;
    }

    .mobile-logo {
        padding: 10px 0;
    }

    .mobile-logo {
        display: block;
    }

        .mobile-logo img {
            display: inline;
            margin-right: 12px;
            width: 50px;
        }

            .mobile-logo img.power-by-ee, .dash-header .header-inner-wrapper picture > img {
                width: 100px;
                margin-top: 5px;
            }

    .dash-header .header-inner-wrapper .dash-logo {
        width: 40px;
    }

    .dash-header .header-inner-wrapper picture > img {
        width: 25px;
    }

    #portOutPopUp, #portInPopUp {
        margin-top: 10px !important;
    }

    #checkout-form-new select.w-auto {
        width: 100% !important;
    }

    .desktop-logo img {
        display: none;
    }

    .dash-graphs {
        grid-template-columns: 1fr;
    }

        .dash-graphs > .col-md-4:first-child {
            grid-column: initial;
        }

        .dash-graphs > .col-md-4:nth-child(02) {
            margin-bottom: 15px;
        }

    .header-inner-wrapper {
        padding: 5px 0 7PX;
    }

    .main-wrapper {
        grid-template-columns: 1fr;
    }

    body {
        overflow: initial;
    }

    .dash-main-content {
        height: auto;
        overflow: hidden;
    }

    .dash-footer {
        position: static;
    }

    .dash-title h2, .active-no h3 {
        font-size: 20px;
    }

    .active-no h2 {
        font-size: 30px;
    }

    .btn-primary { /*margin: 10px 0 0 !important;*/
        height: 44px;
        line-height: 46px;
    }

    .dash-sub-title h3, .no-explore h3, .dash-auto-topUp h3, .dash-active-package h3 {
        font-size: 18px;
    }

    .dash-access-title h3 {
        font-size: 20px;
        line-height: 24px;
    }

    .dash-access p {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .usageHistory-tabs .nav-tabs .col-md-3 {
        width: 50%;
    }

    #anotherCardForm .dash-sub-title h3 {
        margin-bottom: 10px;
        margin-top: 20px;
    }

    #savedCardForm .col-lg-3 {
        width: 50%;
    }

    .h4, h4 {
        font-size: 18px;
    }

    .h2, h2 {
        font-size: 20px;
    }

    .num-list {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        background: #e2ebd1;
        z-index: 999;
        top: 72px;
        padding: 0 20px;
        height: 0;
        overflow: hidden;
        display: block !important;
        transition: 500ms;
    }

        .num-list.num-show {
            transition: 500ms;
            height: 91px;
            padding: 7px 20px 10px;
        }

        .num-list select {
            width: 100% !important;
        }

    .num-list-toggle {
        display: block;
    }

    .dropdown-toggle .user-info .user-img {
        margin: 0 0 0 10px;
    }

    .dash-header .header-inner-wrapper .dropdown-toggle {
        width: 60px;
    }

    .history-form .col-sm-6 {
        width: 100% !important;
    }

    .history-form .row {
        display: block;
    }

    .history-form select, .history-form input {
        width: 100% !important;
    }

    .history-form .col-sm-6:first-child {
        margin-bottom: 15px;
    }

        .history-form .col-sm-6:first-child .form-label {
            width: 160px;
        }

    .usageHistory-tabs .nav-tabs-history button i {
        display: block;
        margin: 0 0 5px !important;
    }

    .dash-sub-title p {
        font-size: 16px;
    }

    .porting-form {
        display: block !important;
    }

        .porting-form .form-label {
            width: 190px;
        }

    .portIn-btns {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

        .portIn-btns .btn-primary {
            width: 100% !important;
        }

    .dash-auto-topUp.my-account-auto-topUp .col-md-4, .dash-auto-topUp.my-account-auto-topUp .col-md-8 {
        width: 100%;
        margin: 0 !important;
    }

        .dash-auto-topUp.my-account-auto-topUp .col-md-4 .row .col-md-6 {
            width: 50%;
        }

    .dash-auto-topUp.my-account-auto-topUp {
        height: auto;
        padding: 20px 25px 15px;
        margin-bottom: 2.5rem !important;
    }

    .dash-graphs.product-graphs > .col-md-4:nth-child(02) {
        margin-bottom: 0 !important;
    }

    #dashPlanSlider .nm-plans-item {
        margin-bottom: 0;
        padding: 12px 18px 15px;
    }

    .dash-graphs.product-graphs > .col-md-4:last-child {
        grid-column: initial;
    }

    .dash-graphs.product-graphs > .col-md-4:first-child {
        margin-bottom: 15px;
    }

    .title-mb {
        display: block !important;
        margin-bottom: 20px;
    }

        .title-mb .dash-sub-title {
            margin-bottom: 10px !important;
        }

    .order-new-sim, .great-value-sim .order-new-sim {
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 12px;
        padding: 15px;
    }

        .great-value-sim .order-new-sim .btn-yellow {
            width: 100%;
        }

    .order-messages img {
        width: 100px;
    }

    .order-messages h1 {
        font-size: 24px;
    }

    .order-messages p {
        font-size: 16px;
    }

    .order-messages h3 {
        font-size: 18px !important;
    }

    .order-messages {
        width: calc(100% - 40px);
    }

        .order-messages .btn-primary {
            width: 100%;
            margin: 0 0 10px !important;
        }

        .order-messages h4 {
            margin-top: 1.5rem !important;
        }

    .modal-dialog {
        max-width: 92% !important;
        margin: 0 auto;
        /*align-items: self-end !important;*/
        margin-bottom: 15px;
    }

    .modal-header {
        padding-left: 15px;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-body {
        padding: 15px 15px 5px;
    }

    .modal-dialog .btn-close {
        margin-right: -2px;
        opacity: 1;
    }

    .modal-body p {
        font-size: 16px !important;
    }

    .order-summary .promo-code {
        position: static !important;
        margin-top: 30px;
    }

    .order-summary .col-md-6:first-child {
        width: 100%;
    }

    .order-summary .col-md-6:last-child {
        width: 100%;
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .summary-detail .sum-left {
        flex: 0 0 160px;
    }

    .order-summary h4 {
        font-size: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .order-summary .dash-sub-title h3 {
        margin-top: 30px;
    }

    .summary-detail .btn-green {
        margin-left: 0;
        display: block;
    }

    #loginSlider .carousel-item h1 {
        font-size: 32px;
    }

    .nm-plans-item {
        margin-top: 30px;
    }

    /*  .nm-checkbox .form-check-input {
        width: 15px;
        height: 15px;
    }
*/
    .selectTopUpAmount .btn-secondary {
        font-size: 16px;
    }

    .postal-lookup > button {
        width: 100%;
        margin-top: 10px;
    }
    
}

@media screen and (max-width:575px) {
    .login-form, .Signup-form {
        width: 100%;
    }

        .login-form h2,
        .Signup-form h2,
        .login-form h3,
        .Signup-form h3,
        .login-form p,
        .Signup-form p {
            width: 100%;
        }

    .dash-header .header-inner-wrapper .user-info .user-img {
        width: 25px;
        height: 25px;
    }

    .menu-toggle {
        font-size: 30px;
        top: 3px;
    }

    .dash-graphs .dash-active-package .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .nm-plans-item {
        padding: 18px 18px 106px;
    }

    .dash-graphs .dash-auto-topUp .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .nm-plans-item .btn-green {
        width: calc(100% - 35px) !important;
    }

    .footer-inner-wrapper {
        display: block;
        text-align: center;
    }

        .footer-inner-wrapper a {
            margin: 10px 5px 0 5px;
        }

    .nm-plans-item .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .nm-plans-item .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    /*   .nm-plans-item {
        padding: 15px;
    }*/

    .nm-plans-item h2, .nm-plans-item h3 {
        margin: 0;
    }

    .nm-plans-item .hr, .nm-plans-item .btn-green {
        margin-top: 10px;
    }

    .dash-sidebar, .side-nav {
        width: 100%;
        height: 100vh;
        overflow-y: auto;
    }

        .dash-sidebar .btn-yellow {
            width: calc(100% - 60px) !important;
        }

    .nm-plans-item .nm-badge {
        top: -11px;
        left: 18px;
        font-size: 12px;
        padding: 5px 10px;
    }

    .selectTopUpAmount {
        display: block;
    }

        .selectTopUpAmount .price-radio {
            display: inline-block;
            margin-bottom: 8px;
        }

        .selectTopUpAmount .btn-secondary {
            width: 55px;
            padding: 6px 0;
            text-align: center;
            font-size: 18px;
        }

    #anotherCardForm .dash-sub-title h3 {
        margin-top: 15px;
    }

    .nm-plans .nav-tabs .nav-link .badge {
        top: -16px;
        right: 50%;
        transform: translateX(50%);
    }

    .nm-plans {
        margin-top: 10px;
    }
}

@media screen and (max-width:574px) {
    .great-value-sim .gx-4 {
        display: block !important;
    }

    .porting-form h5 {
        font-size: 18px !important;
    }

    .great-value-sim .col-md-6 {
        width: 100% !important;
    }

    #nav-paypal img {
        width: 120px;
    }

    #nav-paypal h4 {
        font-size: 18px;
        margin-top: 15px !important;
    }

    #nav-paypal .p-5 {
        padding: 30px 15px !important;
    }

    .nm-plans .row.gx-5.mt-5 {
        margin-top: 0px !important;
    }

    .usageHistory-tabs .nav-tabs-history button {
        font-size: 14px !important;
    }

    .history-form .col-sm-6:first-child .form-label {
        width: 190px;
    }

    .usageHistory-tabs .nav-tabs-history {
        column-gap: 8px;
    }

    #loginSlider .carousel-item h1 {
        font-size: 30px;
    }
    #TopMenuMsisdnForm select {
        width: 200px !important;
    }
}

@media screen and (max-width:425px) {
    .btn-100 {
        width: 100%;
    }

    .nm-plans-item h4 > img, .nm-buyNow-field p span > img, .Fiveg-img {
        width: 25px !important;
    }

    .porting-form label {
        display: block;
    }

    .porting-form h5 {
        margin: 0 5px !important;
    }

    .btn-primary {
        width: 100% !important;
        padding: 0 10px;
        font-size: 16px;
    }

    .nm-plans-item h3 {
        font-size: 20px;
    }

    .nm-plans-item h2 {
        font-size: 22px;
    }

    .dash-header .header-inner-wrapper .dash-logo {
        width: 30px;
    }

    .dash-header .header-inner-wrapper .dropdown-toggle {
        width: 40px;
    }

    .menu-toggle {
        font-size: 18px;
        /*top: 6px;*/
    }

    #TopMenuMsisdnForm select.w-auto {
        max-width: 240px !important;
    }
    form#TopMenuMsisdnForm > div > label{
        max-width:160px;
    }

    .nm-plans .nav-tabs .nav-link {
        font-size: 12px;
    }

    .num-list {
        top: 62px;
    }

    .history-form .col-sm-6:first-child .form-label {
        width: 190px;
    }

    .history-form .col-sm-6 {
        display: block;
    }

    /* .history-form .col-sm-6:last-child {
            display: flex;
        }*/

    .order-new-sim .btn-yellow {
        width: 100% !important;
    }

    .active-sim-no {
        padding: 15px;
    }

        .active-sim-no h2 {
            font-size: 16px;
        }

        .active-sim-no h3 {
            font-size: 18px;
        }

    .summary-btns {
        gap: 10px;
    }

        .summary-btns .btn-primary {
            width: 100% !important;
        }
}

@media screen and (max-width:424px) {
    .usageHistory-tabs .nav-tabs-history {
        grid-template-columns: 1fr 1fr;
    }

        .usageHistory-tabs .nav-tabs-history button {
            margin-top: 8px !important;
        }

    .porting-form > .d-flex {
        display: block !important;
    }

    .dash-auto-topUp.my-account-auto-topUp .col-md-4 .row .col-md-6 {
        width: 100%;
    }

    .dash-auto-topUp.my-account-auto-topUp {
        padding: 15px !important;
    }

    .postal-lookup {
        display: block !important;
    }

        .postal-lookup select {
            margin-bottom: 10px;
        }

    .modal-body p {
        font-size: 14px !important;
    }

    .order-summary h5.mx-2 {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    /*.summary-detail .sum-left {
        flex: 0 0 100px;
    }*/

    #loginSlider .carousel-item h1 {
        font-size: 28px;
    }

    .frmUserImage p {
        font-size: 12px;
    }
}

@media(max-width:389px) {
    .trust-piolet-rating > span {
        font-size: 10px !important;
    }

    .plan-name {
        width: 200px;
    }
    #TopMenuMsisdnForm select.w-auto {
        max-width: 190px !important;
    }
}

@media screen and (max-width:374px) {
    select#drpTopMenuMsisdn {
        padding-left: 5px;
        padding-right: 22px;
        background-position: right 0.25rem center;
        font-size: 12px;
    }

   

    .dash-header .header-inner-wrapper picture > img {
        margin: 0;
    }

    .active-no {
        display: block;
        padding-bottom: 5px;
    }

    .trust-piolet-rating {
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

        .trust-piolet-rating > img.trust-piolet-logo {
            width: 150px !important;
        }


    .active-no .right-col {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .active-no .right-col h2 {
            order: 2;
        }

    .no-last-topUp {
        display: block;
    }

    .btn-primary {
        width: 100% !important;
        margin: 10px 0 !important;
        height: 44px;
        line-height: 46px;
    }

    .no-explore h3 {
        margin-bottom: 10px;
    }

    .dash-progress {
        width: 70px !important;
        height: 70px !important;
    }

        .dash-progress .text {
            font-size: 16px !important;
        }

    .dash-auto-topUp .d-flex.align-items-center {
        display: block !important;
    }

    .dash-auto-topUp .justify-content-between {
        align-items: center;
    }

    .dash-active-package .d-flex {
        display: block !important;
    }

        .dash-active-package .d-flex .right-col {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

    .dash-title h2, .active-no h3 {
        font-size: 18px;
    }

    .dash-sub-title h3, .no-explore h3, .dash-auto-topUp h3, .dash-active-package h3 {
        font-size: 16px;
    }

    .header-inner-wrapper, .content-inner, .footer-inner-wrapper {
        width: calc(100% - 30px);
    }

    .dash-main-home p {
        font-size: 15px !important;
    }

    .dash-sub-title h3 {
        margin: 40px 0 20px 0;
    }

    .great-value-sim .order-new-sim {
        width: 100%;
    }

    #savedCardForm .col-lg-3 {
        width: 100%;
    }

    .w-25 {
        width: 100% !important;
    }

    .nm-plans .nav-tabs .nav-link {
        width: 125px;
    }

    /* .history-form {
        padding: 0 !important;
        background: #fff;
    }*/

    .portIn-btns {
        margin-top: 0;
    }

    .order-summary h5 {
        font-size: 16px;
    }

    .summary-detail .summary-auto-topUp p {
        font-size: 14px;
    }

    .summary-detail .btn-green {
        width: auto !important;
        margin-top: 3px !important;
    }

    #loginSlider .carousel-item h1 {
        font-size: 24px;
    }

    #loginSlider .carousel-item h2, .login-outer p {
        font-size: 16px;
    }

    Signup-form h2 {
        margin-top: 20px !important;
    }
    #TopMenuMsisdnForm select.w-auto {
        max-width: 160px !important;
    }
}


@media screen and (max-width:320px) {
    .dash-header .header-inner-wrapper picture > img {
        width: 20px;
    }

    #loginSlider {
        margin-top: 10px;
        margin-bottom: 50px;
    }

        #loginSlider .carousel-item h1 {
            font-size: 28px;
        }

        #loginSlider .carousel-item h2 {
            font-size: 16px;
        }

    .login-outer .group-img {
        width: 100%;
    }

    .login-outer p,
    .nm-checkbox .form-check-label {
        font-size: 16px;
    }

    .login-form h2,
    .Signup-form h2,
    .login-form h3,
    .Signup-form h3 {
        font-size: 20px;
    }

    .form-outer .form-label {
        font-size: 15px;
    }

    .alert .btn-yellow {
        padding: 0 15px
    }

    .btn-primary,
    .form-control {
        font-size: 14px;
    }

    .dash-progress {
        width: 60px !important;
        height: 60px !important;
    }

    .dash-active-package h4 {
        font-size: 15px;
    }

    .dash-access-title h3 {
        font-size: 18px;
        line-height: 22px;
    }

    .usageHistory-tabs .nav-tabs .col-md-3:first-child {
        margin-bottom: 10px;
    }

    .usageHistory-tabs .nav-tabs .col-md-3 {
        width: 100%;
    }

    .usageHistory-tabs .tab-content {
        margin-top: 0px !important;
    }

    #nav-paypal {
        margin-top: 15px;
    }

    .nm-checkbox .form-check-input {
        height: 20px;
    }

    .modal#renameProduct .modal-header {
        align-items: flex-start;
    }

    .roaming-charges li {
        font-size: 14px;
    }
    #TopMenuMsisdnForm select.w-auto {
        max-width: 120px !important;
    }
    .mobile-logo img.power-by-ee, .dash-header .header-inner-wrapper picture > img{width:90px;}
    .mobile-logo img{margin-right:0;}
}
@media (max-width:280px){
    .mobile-logo img{width:44px;}
    .now-use-app-btn{margin-right:0;}
    .login-outer .col-right {
        padding: 0 15px 20px
    }
    .app-download-btns img{width:45%;}
    .mobile-view{display:block;}
    #buttonDiv {
        padding: 0;
        margin-left: -2px;
    }

}