/* BUTTON */
.btn {
    display: flex;
    align-items: center;
    border: auto;
}

/* END BUTTON */

/* FORM INPUT */
.form {
    box-shadow: unset;
    background-color: transparent;
}

.form-label {
    color: #4b4b4b;
    font-size: 12px;
}

select {
    height: 34px;
}

.toggle-password {
    float: right;
    cursor: pointer;
    margin-right: 10px;
    margin-top: -26px;
    color: #cbcbcb;
}

.form-control {
    transition: none;
}

.form-select,
input.form-control.form-input {
    /* background: #fbfbfb;
    border-color: #f3f3f3 !important; */
}

input.form-input.is-invalid {
    border: 0.9px solid #f82a54 !important;
}

div[readonly],
input[disabled],
input[readonly] {
    background-color: #ecedf0;
    pointer-events: none;
}

div[readonly]:hover,
input[disabled]:hover,
input[readonly]:hover {
    background-color: #ecedf0;
}

div[readonly]:focus,
input[readonly]:focus,
input[disabled]:focus {
    background-color: #ecedf0;
}

/* ON FOCUS */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
/* input[type="radio"]:focus, */
input[type="color"]:focus,
select:focus,
span:focus,
.uneditable-input:focus {
    border-color: rgba(128, 22, 235) !important;
    box-shadow: unset !important;
    outline: 0 none;
}

/* END ON FOCUS */

/* END FORM INPUT */

/* CARD */
.card {
    border-radius: 15px;
    border-color: var(--color-grey-600);
}

/* END CARD */

/* BREADCRUMB */
.breadcrumb-item::before {
    float: unset !important;
}

/* END BREADCRUMB */

/* DROPDOWN */
.dropdown-menu.show {
    box-shadow: 3px 6px 14.6px -1px #0000000f;
    border: unset;
    left: -16px;
    padding: 10px;
    display: grid;
    gap: 5px;
}

/* END DROPDOWN */

/* RADIO BUTTON */
.form-check-input[type="radio"] {
    border: 1px solid #d9dde4 !important;
    margin: 0px;
}

.form-check-input:checked {
    background-color: #8016eb;
}

/*  END RADIO BUTTON */

/* MODAL */
.modal-dialog.modal-sm {
    max-width: 345px;
}

.modal-dialog.modal-md {
    max-width: 640px;
}

.modal-dialog.modal-lg {
    max-width: 918px;
}

.modal-body {
    max-height: 530px;
}

.modal-content {
    border-radius: 20px;
}

.modal-header {
    padding: 1.5em 2em !important;
    font-family: open-sauceone-semibold;
    border-bottom: 1px solid #f4f4f4 !important;
}

.modal-footer {
    padding: 15px 20px !important;
    border-top: 1px solid #f4f4f4;
}

/* END MODAL */

/* BUTTON */
button:focus {
    outline: 0;
    border: 1px solid #afbcff !important;
}

/* END BUTTON */

/* Col divide 10 */

.col-md-p10,
.col-md-p20,
.col-md-p30,
.col-md-p40,
.col-md-p50,
.col-md-p60,
.col-md-p70,
.col-md-p80,
.col-md-p90,
.col-md-p100 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
    .col-md-p10 {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
        -webkit-box-flex: 0;
    }

    .col-md-p20 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
        -webkit-box-flex: 0;
    }

    .col-md-p30 {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
        -webkit-box-flex: 0;
    }

    .col-md-p40 {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
        -webkit-box-flex: 0;
    }

    .col-md-p50 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        -webkit-box-flex: 0;
    }

    .col-md-p60 {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
        -webkit-box-flex: 0;
    }

    .col-md-p70 {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
        -webkit-box-flex: 0;
    }

    .col-md-p80 {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
        -webkit-box-flex: 0;
    }

    .col-md-p90 {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
        -webkit-box-flex: 0;
    }

    .col-md-p100 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        -webkit-box-flex: 0;
    }
}