:root {
    --colorPrimary: #00008c;
    --colorCorBg: #fafafa;
    --corCsummaryCol: 19rem;
    --corScsPadding: calc(2rem + .5vw);
    --borderColor: color-mix(in srgb, var(--colorCorBg), black 10%);
    --radioIcoSize: calc(1.5rem + .25vw);
}

.cor_outer-sec {
    padding-block: 2rem;

    .btn {
        border-width: .1rem;
        padding: 1em 1.5em;
        font-weight: 500 !important;
        box-shadow: none !important;
    }

    .btn-light {
        --btnThemeColor: #ecedee;
        background-color: var(--btnThemeColor);
        border-color: var(--btnThemeColor);

        &:hover, &:active {
            background-color: color-mix(in srgb, var(--btnThemeColor), black 8%);
            border-color: var(--btnThemeColor);
        }
    }

    .form-group {
        margin: 0;

        label {
            letter-spacing: initial;
            text-transform: initial;
            font-size: .8rem;
            font-weight: 500;
        }
    }

    .form-control {
        padding: .6415em 1em;
        height: auto;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }
}

.text-blue {
    color: var(--colorPrimary) !important;
}

.fs-4 {
    font-size: 1.25rem !important;
}

.gap-1-2 {
    gap: 1rem 2rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

select.form-control {
    padding-right: 2rem;
    background-color: white;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10"><polyline fill="none" stroke="%23666666" stroke-width="1.75" points="1 1.5 8 8.5 15 1.5"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - .75rem) 50%;
    background-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;

    &::-ms-expand {
        display: none !important;
    }
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #00008c;
    background-color: #00008c;
    box-shadow: none !important;
}

thead, tfoot {
    font-weight: 600;
}

.login_signup-cols {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.login_signup-cols article {
    flex: 1;
    background-color: var(--colorCorBg);
    border-radius: .5rem;
    overflow: hidden;
}

.login_signup-cols aside {
    width: var(--corCsummaryCol);
    border: var(--borderColor) 1px solid;
    border-radius: .5rem;
    padding: 1rem;

    @media screen and (min-width: 1200px) {
        position: sticky;
        top: 13.2rem;
    }

    table {
        font-size: .9rem;

        tr {
            td, th {
                padding: .5em 0;
                vertical-align: middle;

                &:last-child {
                    text-align: right;
                }
            }
        }
    }

    .form-check {
        label {
            font-size: .85rem;
            padding-top: .2em;
        }
    }
}

.cor_article-footer {
    background-color: color-mix(in srgb, var(--colorCorBg), black 5%);
    padding: calc(var(--corScsPadding) / 1.5) var(--corScsPadding);
}

.cor_lft-options {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: .9rem;
    gap: 2rem;
}

.cor_lft-options li {
    font-weight: 500;
    display: flex;
    gap: 1em;
}

.cor_lft-options li img {
    display: block;
    width: auto;
    height: 2.5em;
}

.cor_lft-options li small {
    display: block;
    font-weight: normal;
    font-size: .85em;
}

.login_inner-cols {
    display: flex;
    padding: var(--corScsPadding);
}

[class^="login_col-"] {
    flex: 50%;
    max-width: 50%;
}

.login_col-left {
    padding-right: var(--corScsPadding);
    border-right: var(--borderColor) 1px solid;
}

.login_col-right {
    padding-left: var(--corScsPadding);
}

.cor_signup-step {
    padding: var(--corScsPadding);

    &[data-step="creditCard"] {
        background-color: color-mix(in srgb, var(--colorCorBg), black 5%);
    }
}

.pinl-min {
    padding-inline: .25em !important;
}

.text-semibold {
    font-weight: 500 !important;
}

.cor_shipping-radio {
    position: relative;

    input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    label {
        --lblPadding: calc(1rem + .25vw);
        display: block;
        background-color: white;
        border: var(--borderColor) .1rem solid;
        border-radius: .35em;
        padding: var(--lblPadding) var(--lblPadding) var(--lblPadding) calc(var(--lblPadding) + var(--radioIcoSize) + 1rem);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.5rem;

        @media screen and (max-width: 767.98px) {
            flex-direction: column;
            align-items: flex-start;
        }

        .radio_ico {
            width: var(--radioIcoSize);
            height: var(--radioIcoSize);
            position: absolute;
            top: calc(var(--lblPadding) + .25rem);
            left: var(--lblPadding);
            border: color-mix(in srgb, var(--borderColor), black 10%) 1px solid;
            border-radius: 2rem;
        }

        .cor_srl-inner {
            margin-right: auto;

            strong {
                display: block;
                margin-bottom: .5em;

                small {
                    font-weight: 500;
                    padding: .5em .75em;
                }
            }
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 1em 0;
            font-weight: 300;
            font-size: .9rem;

            li {
                position: relative;
                line-height: 1.25;

                &:not(:last-child) {
                    margin-right: 1.5em;
                    @media screen and (min-width: 768px) {
                        padding-right: 1.5em;
                        border-right: color-mix(in srgb, var(--borderColor), black 5%) 1px solid;
                    }
                }
            }
        }

        output {
            font-size: 1.2em;
            font-weight: 500;
        }
    }

    input:checked + label {
        border-color: var(--colorPrimary);

        .radio_ico {
            border-color: var(--colorPrimary);
            background-color: var(--colorPrimary);
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16" fill="none" stroke="%23ffffff" stroke-width="5" stroke-miterlimit="10"><polyline points="2 6.279 9.147 13.426 20 2.574"/></svg>');
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 1.1em;
        }
    }

    &:not(:last-child) {
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 1023.98px) {
    .login_signup-cols {
        --corCsummaryCol: 100%;
        flex-direction: column;
    }

    .login_signup-cols article {
        width: 100%;
    }
}

@media screen and (max-width: 767.98px) {
    .login_inner-cols {
        flex-direction: column-reverse;
    }

    [class^="login_col-"] {
        flex: 100%;
        max-width: 100%;
        padding: 0;
        border: none;
    }

    .login_col-left {
        padding-top: calc(var(--corScsPadding) * 2);
    }
}

@media screen and (max-width: 575.98px) {
    :root {
        --corScsPadding: calc(1rem + 1vw);
    }
}