html{
    height: 100%;
}

/*@media (max-width: 575px){
    html {
        font-size: 0.75rem;
    }
}*/

body {
    height: 100%;
    overflow-x: hidden;
    /*background: url('/_content/SharedFiles/images/bg.jpg') no-repeat center;*/
}

.wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

    .wrapper > .top-header {
        padding: 10px 0;
    }
        .wrapper > .top-header img {
            width: 171px;
            margin: 0 auto;
        }


    .wrapper > .main {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 15px;
    }

/*.form-control {
    min-width: 280px;
}*/

.card.login-card {
    min-width: 320px;
}

@media screen and (max-width: 575px) {
    .card.login-card {
        min-width: 100%;
    }
}

.payment-info {
    display: grid;
    grid-template-columns: 220px auto 1fr;
    align-items: center;
    
}

@media screen and (max-width: 575px) {
    .payment-info {
        grid-template-columns: 120px auto 1fr;
        grid-row-gap: 15px !important;
        font-size: 14px;
    }
}

.border-style-dashed {
    background-color: transparent;
    border-top: 1px dashed;
    border-color: #919eab;
}

.payment-detail-popup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

#debt2 {
    min-width: auto !important;
}

#paymentUrl {
    display: inline-block;
    overflow-wrap: break-word;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #F00;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }


.samo-popup-template {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#payment-list {
    font-size: 16px;
}

@media screen and (max-width: 425px){
    #payment-list {
        font-size: 14px;
    }
}