﻿.container-width-login {
    width: 60%;
    margin: auto;
    padding: 2rem 0 2rem 0;
}

.container-width-confirm {
    width: 50%;
    margin: auto;
    padding: 2rem 0 2rem 0;
}

.note-alt {
    font-weight: bold;
    border-right: solid 2px #E74011;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.content-from {
    background: #F4F5F6;
    padding: 1rem;
    border-radius: .5rem;
}

    .content-from p {
        color: #9099A0;
        text-align: justify;
    }


.form-control + label {
    text-align: right;
    left: auto;
    right: 0;
}

.form-control::placeholder {
    font-size: .675rem;
}

.form-control[dir="ltr"]::placeholder {
    text-align: right;
}

.form-control[dir='ltr'] + label {
    text-align: right;
    left: auto;
    right: 0;
}



.form-control + label.active {
    transform-origin: right;
}

.prefx-holder {
}

    .prefx-holder span.prefx {
        position: absolute;
        left: 0;
        top: .6rem;
    }

    .prefx-holder .form-control {
        box-sizing: border-box !important;
        padding-left: .9rem;
    }

    .prefx-holder label {
        color: #495057;
        font-size: .875rem;
    }

.radio-selector {
}

    .radio-selector .form-group {
        margin-bottom: 0;
    }

    .radio-selector .form-check {
        display: inline-block;
    }

.form-check-input[type="radio"]:not(:checked) + label, .form-check-input[type="radio"]:checked + label, label.btn input[type="radio"]:not(:checked) + label, label.btn input[type="radio"]:checked + label {
    padding-left: 0;
    padding-right: 35px;
}

.form-check-input[type="radio"] + label:before, .form-check-input[type="radio"] + label:after, label.btn input[type="radio"] + label:before, label.btn input[type="radio"] + label:after {
    left: auto;
    right: 0;
}

.form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:after {
    background-color: #28A745;
}

.form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:before, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:before, label.btn input[type="radio"].with-gap:checked + label:after {
    border-color: #28A745;
}

.captcha-img {
}

    .captcha-img a {
        position: absolute;
        left: .1rem;
        top: .5rem;
        color: #3B4248;
    }

    .captcha-img img {
        position: absolute;
        left: 0;
    }

    .captcha-img .form-control {
        text-align: right;
    }

.container-width-login .btn {
    background: #E74011 !important;
    width: 100%;
    border-radius: .3rem;
    padding: .5rem;
}

.container-width-login .holder-button {
    margin: auto;
}

.form-check-input[type="checkbox"] + label, label.btn input[type="checkbox"] + label {
    padding-left: 0;
    padding-right: 35px;
}

.form-check-input[type="checkbox"]:checked + label:before, label.btn input[type="checkbox"]:checked + label:before {
    left: auto;
    right: -1px;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    transform-origin: left center;
    border-right: 2px solid #28A745;
    border-bottom: 2px solid #28A745;
}

.form-check-input[type="checkbox"] + label:before, .form-check-input[type="checkbox"]:not(.filled-in) + label:after, label.btn input[type="checkbox"] + label:before, label.btn input[type="checkbox"]:not(.filled-in) + label:after {
    left: auto;
    right: 0;
}

.btn-confirm {
    padding-top: 1rem;
}

    .btn-confirm .btn {
        width: 100%;
        padding: .8rem 0;
        border-radius: .3rem;
        margin: 0;
    }

        .btn-confirm .btn.btn-orange {
            background-color: #E74011 !important;
        }

.container-width-OTP {
    width: 50%;
    margin: auto;
    padding: 2rem 0 2rem 0;
}

.otp-number {
}

    .otp-number span.otp-time {
        position: absolute;
        left: 0;
        top: .6rem;
    }

    .otp-number .form-control {
        padding-left: 2rem;
        box-sizing: border-box !important;
    }

.select-wrapper input.select-dropdown {
    font-size: .875rem;
}

.dropdown-content li > a, .dropdown-content li > span {
    font-size: .875rem;
}

.colorful-select .dropdown-content {
    padding: 0;
}

.dropdown-content li {
    text-align: right;
    color: #495057;
}

    .dropdown-content li > a, .dropdown-content li > span {
        color: #495057;
    }

    .dropdown-content li:hover, .dropdown-content li.active {
        background-color: rgb(0 0 0 / 16%);
    }

.colorful-select .dropdown-content li.active span {
    box-shadow: none;
}

.btn-profile {
    padding: 2rem 0;
    direction: ltr;
    text-align: left;
}

    .btn-profile .btn {
        margin: 0;
        padding: .5rem 3rem;
    }

.custom-file-uploader {
    position: relative;
}

    .custom-file-uploader input[type='file'] {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: default;
        font-size: 100%;
    }

.wrapper-form-sim-profiles {
}

    .wrapper-form-sim-profiles .form-group {
    }

        .wrapper-form-sim-profiles .form-group span.input-group-btn {
            position: absolute;
            left: 0;
            top: 0;
        }

            .wrapper-form-sim-profiles .form-group span.input-group-btn .btn {
                padding: .5rem;
                margin: 0;
                font-size: .875rem;
            }

li.nav-item {
    border: none;
}

ul#myTab {
    padding: 0;
    margin: 0;
    border-bottom: none;
}

#myTab li.nav-item .nav-link {
    border: none;
    border-radius: 0;
    text-align: right;
    color: #3B4248;
    padding: .25rem 1rem;
    border-right: solid 3px #DFDFE0;
}

    #myTab li.nav-item .nav-link.active {
        border-right: solid 3px #E74011;
        font-weight: 450;
    }

#home .holder-button {
    margin: auto;
}

    #home .holder-button .btn {
        width: 100%;
        background-color: #E74011 !important;
        margin: 0;
    }

@media screen and (max-width: 425px) {
    .container-width-login, .container-width-confirm, .container-width-OTP {
        width: 100%;
    }

    .btn-confirm .btn {
        margin: .5rem 0;
    }
}
