html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif
}

.container .card {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    border-radius: 0px;
}

.navbarColor {
    background: #435d3f41;
}

.navbarColor img{
    width:23%;
}

.navbarColor p{
    font-size:0.85rem !important;
}
/*Start Payment/Index Css section*/
.btn:focus, .btn:active, .btn:hover {
    outline: none !important;
    box-shadow: none;
}

.container-fluid .card .img-box {
    display:block;
    width: 100px;
    height: 80px;
}

.container-fluid .card img {
    width: 100%;
    object-fit: contain;
    height: 100%;
}

.container-fluid .card .number {
    font-size: 24px;
}

.lblMainbox {
    position: relative;
    transition: 0.2s ease transform;
}

.choosepay {
    cursor: pointer;
    border-radius: 10px !important;
    height:150px;
}

    input[type="radio"]:checked ~ .choosepay, .choosepay:active, .choosepay:hover, .choosepay:focus {
        outline: 2px solid #3693f9;
    }

.lblMainbox:hover {
    transform: scale(1.05);
}

.radioChooses {
    position: absolute;
    z-index:1;
    top: 8%;
    left: 10%;
    cursor: pointer;
}

.notextwarp {
    text-wrap: nowrap;
}
/*End Payment/Index Css section*/
/*Start Payment/Process CssSection*/
#procress {
    border: 1px solid #ced4da;
    border-radius: 5px;
}

#procress #processSubmit:active {
    cursor: not-allowed;
}

.processBtn{
    width:40%;
}
/*End Payment/Process CssSection*/
/*Start Payment/Confirm */
.main-container {
    width: 100%;
    height: 70vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.check-container {
    width: 15.25rem;
    height: 17.25rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
}

    .check-container .check-background {
        width: 100%;
        height: calc(100% - 1.25rem);
        background: linear-gradient(to bottom right, #5de593, #41d67c);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
        transform: scale(0.84);
        border-radius: 50%;
        animation: animateContainer 0.75s ease-out forwards 0.75s;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
    }

.check-background.error {
    background: linear-gradient(to bottom right, #e55a5a, #d64141);
}

        .check-container .check-background svg {
            width: 65%;
            transform: translateY(0.25rem);
            stroke-dasharray: 80;
            stroke-dashoffset: 80;
            animation: animateCheck 0.35s forwards 1.25s ease-out;
        }

    .check-container .check-shadow {
        bottom: calc(-15% - 5px);
        left: 0;
        border-radius: 50%;
        background: radial-gradient(closest-side, #49da83, transparent);
        animation: animateShadow 0.75s ease-out forwards 0.75s;
    }

.check-shadow.error {
    background: radial-gradient(closest-side, #e57373, transparent);
}

@keyframes animateContainer {
    0% {
        opacity: 0;
        transform: scale(0);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }

    25% {
        opacity: 1;
        transform: scale(0.9);
        box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }

    43.75% {
        transform: scale(1.15);
        box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    }

    62.5% {
        transform: scale(1);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
    }

    81.25% {
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
    }

    100% {
        opacity: 1;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
    }
}

@keyframes animateCheck {
    from {
        stroke-dashoffset: 80;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes animateShadow {
    0% {
        opacity: 0;
        width: 100%;
        height: 15%;
    }

    25% {
        opacity: 0.25;
    }

    43.75% {
        width: 40%;
        height: 7%;
        opacity: 0.35;
    }

    100% {
        width: 85%;
        height: 15%;
        opacity: 0.25;
    }
}

#confirm .paymentAni {
    opacity: 0;
    animation: animateTextbtn 0.75s ease-out forwards 0.75s;
}

@keyframes animateTextbtn {
    0% {
        opacity: 0;
     
    }

    100% {

        opacity: 1;
    }
}

/*End Payment/Confirm*/


/* Media Css */
@media (Max-width:500px){
    .h5text {
        font-size:1rem !important;
    }
}