:root {
    /* COLORS */


    --color-primary: #00205B;
    --color-accent: #37D3AE;
    --color-bg: #daeeff
}

body {
    margin-bottom: 0 !important;
    font-family: 'Montserrat' !important;
    color: var(--color-primary)!important
}

.body-content {
    padding-bottom: 120px;
  
}

    .body-content  h2 {
        font-weight: 800;
        letter-spacing: -3px;
    }
        .body-content h3{
            font-weight:600;
            letter-spacing:-1px;
            margin:10px 0 30px
        }

        p {
            margin: 0;
        }

.ng_cloak h5 {
    color: var(--color-primary)
}


a {
    color: var(--color-primary);
    font-weight: 600
}

    a:hover {
        color: #0755a3 !important;
    }

   hr{
        display:none
    }


header {
    margin-bottom: 20px;
    background-color: var(--color-primary)
}

.header__container {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .header__container p {
        position: absolute;
        bottom: 5px;
        right: 0;
        color: #fff;
        font-size:12px
    }

header img{
    max-height:70px;
    width:auto
}

.gasnam-logo{
    padding:10px 0
}

.radio-hover {
    padding: 20px;
    position: relative;
    border-radius: 5px
}
    .radio-hover .col-md-2.col-xs-3.text-right.text-nowrap {

        font-weight: 600
    }
    .radio-hover div.priceBaseBeforeDiscount {
        width: fit-content;
    }


    div.radio-hover:hover {
        background-color: var(--color-bg);
    }

label.radio > div{
    font-weight: 600;
    font-size:16px;
    color:var(--color-primary)
}

    label.radio > div small{
        font-weight:400
    }

    .form-control option:hover {
        background-color:var(--color-primary) !important;
        cursor: pointer;
    }

.nav-element {
    text-decoration: none;
    color: #fff;
    padding: 0 0.5em;
    border-right: 1px solid #ffffff;
    transition: color 0.2s linear 0.1s;
}

.well-sm{
    padding: 0;
    border:none;
    box-shadow:none
}


.clsPases h3 {
    font-size: 16px;
    font-weight: 600!important
}

.rrss {
    text-decoration: none;
    color: #fff;
    padding: 10px;
}

.btn.btn-primary, .btn.btnNextPage {
    background-color: var(--color-accent) !important;
    padding: 7px 20px;
    border: none;
    font-size: 14px;
    transition: background-color 0.4s linear
}
.btn-primary:hover,
.btnNextPage:hover,
.btn-default:hover {
    color: var(--color-primary) !important;
    background-color: #52fdd5 !important;
    border: none !important;
    transition: background-color 0.4s linear
}

.btn-default {
    border-color: var(--color-primary) !important;
    border-radius: 70px;
    font-weight: 600;
}

div.progress {
    border-color:transparent;
    background: var(--color-bg);
    box-shadow:none;
    border-radius:4px
}

div.progress-bar-success {
    background-color: var(--color-primary);
}

.row .col-md-6.ng_cloak.k_ng_cloak.columns .row.columns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#divBuySummary {
    padding: 10px 0;
    border: 1px solid #1d3e9059;
    border-radius: 5px;
}



table tr.lead {
    font-size: 14px;
    font-weight: 800;
}
.table thead > tr > th {
    border-bottom: 1px solid #1d3e9059
}
#divBuySummary table td {
    background-color: transparent
}

.form-control {
    border: 1px solid var(--color-primary) !important;
}

footer {
    background-color: var(--color-primary);
}

.footer__container {
    background-color: var(--color-primary);
    font-family: 'Montserrat', sans-serif !important;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    padding: 20px 50px;
    gap: 25px;
    align-items: center;
    max-width:960px;
    margin:0 auto
}

    .footer__container img {
        width: 141px;
        justify-self: end;
    }

    .footer__container p {
        color: #fff
    }



a.footer__legal {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 16px;
    font-weight:400
}

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

span#saveButton[disabled=disabled] {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

@media (min-width: 768px) {
    header img {
        max-height: 100px
    }
    .header__container p {
  font-size:14px;
  bottom:10px
    }

}

@media (max-width: 640px) {
    .radio-hover .col-md-6.col-xs-6{
        width:100%
    }
    .radio-hover div.priceBaseBeforeDiscount {
        position: absolute;
        width: fit-content;
        right: 20px;
        top: 0;
        font-size: 12px;
        padding: 0;
    }

    div.col-md-2.col-xs-1:has(select) {
        float: right;
        position: absolute;
        right: 5px;
        top: 50px;
        width: fit-content;
    }

    .radio-hover .col-md-2.col-xs-3.text-right.text-nowrap {
        width: fit-content;
        float: right;
        padding: 0;
        position: absolute;
        right: 20px;
    }
    #divBuySummary{
        font-size:12px;
        border:none;
        padding:0
    }

 

    .margin {
        margin-bottom: 50px;
    }

    .footer__container {
        display: flex;
        flex-wrap: wrap;
    }
}

@media(min-width: 1024px){
    .header__container {
        max-width: 960px;
    }
    .footer__container {
        padding: 20px 0;
    }
}

@media (min-width: 1440px) {


    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
}