﻿:root {
    --body-bg-rgb: 240, 241, 247;
    --primary-rgb: 24, 133, 185;
    --secondary-rgb: 35, 183, 229;
    --warning-rgb: 245, 184, 73;
    --info-rgb: 73, 182, 245;
    --success-rgb: 38, 191, 148;
    --danger-rgb: 230, 83, 60;
    --light-rgb: 243, 246, 248;
    --dark-rgb: 35, 35, 35;
    --orange-rgb: 255, 165, 5;
    --pink-rgb: 231, 145, 188;
    --teal-rgb: 18, 194, 194;
    --purple-rgb: 137, 32, 173;
    --input-border: #e9edf6;
    --default-font-weight: 400;
    --default-text-color: #333335;
    --form-control-bg: #ffffff;
    --custom-white: #fff;
    --light-rgb: 43,46,49;
    --dark-rgb: 240,245,248;
    --primary01: rgba(var(--primary-rgb), 0.1);
    --bs-nav-link-padding-y: 0.3rem!important;
}
.form-control {
    border-color: var(--input-border);
    color: var(--default-text-color);
    background-color: var(--form-control-bg);
    font-size: 0.975em;
    font-weight: var(--default-font-weight);
    line-height: 1.5em;
    border-radius: 0.2em;
    padding: 0.21em 0.75em;
}
.form-control:focus {
    box-shadow: none;
    border-color: var(--input-border);
    background-color: var(--custom-white);
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
    color: var(--default-text-color);
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--default-text-color);
}

.form-text {
    color: var(--text-muted);
}

.form-control-light {
    background-color: rgb(var(--light-rgb));
    border: 0;
}

.form-control-light:focus {
    background-color: rgb(var(--light-rgb));
}

.form-control-primary {
    background-color: var(--primary01);
    border: 0;
    color: var(--primary-color);
}

.form-control-primary:focus {
    background-color: var(--primary01);
    color: var(--primary-color);
}

.form-input-color {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    color: var(--text-muted);
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
    color: var(--text-muted);
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--text-muted);
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-select {
    background-color: var(--form-control-bg);
    border: 1px solid var(--input-border);
    color: var(--default-text-color);
    font-size: 0.813rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-size: 1.25rem;
}

    .form-select option {
        background-color: var(--custom-white);
        padding: 0.35rem 0.75rem;
        border-radius: 0.25rem;
    }

        .form-select option:checked {
            background-color: var(--primary02);
            color: var(--primary-color);
        }

.form-check-input {
    width: 0.9rem;
    height: 0.9rem;
    background-color: var(--custom-white);
    border: 1px solid var(--input-border);
    vertical-align: middle;
}
.form-switch .form-check-input{
    margin-left:auto!important;
    cursor:pointer;
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .form-check-input.form-checked-outline:checked {
        background-color: transparent;
        border-color: var(--primary-color);
    }

    .form-check-input.form-checked-secondary:checked {
        background-color: rgb(var(--secondary-rgb));
        border-color: rgb(var(--secondary-rgb));
    }

    .form-check-input.form-checked-warning:checked {
        background-color: rgb(var(--warning-rgb));
        border-color: rgb(var(--warning-rgb));
    }

    .form-check-input.form-checked-info:checked {
        background-color: rgb(var(--info-rgb));
        border-color: rgb(var(--info-rgb));
    }

    .form-check-input.form-checked-success:checked {
        background-color: rgb(var(--success-rgb));
        border-color: rgb(var(--success-rgb));
    }

    .form-check-input.form-checked-danger:checked {
        background-color: rgb(var(--danger-rgb));
        border-color: rgb(var(--danger-rgb));
    }

    .form-check-input.form-checked-light:checked {
        background-color: rgb(var(--light-rgb));
        border-color: rgb(var(--light-rgb));
    }

    .form-check-input.form-checked-dark:checked {
        background-color: rgb(var(--dark-rgb));
        border-color: rgb(var(--dark-rgb));
    }

    .form-check-input:focus {
        box-shadow: none;
    }

.form-checked-outline:checked[type=checkbox] {
    background-image: none;
    position: relative;
    background-color: transparent;
}

    .form-checked-outline:checked[type=checkbox]:before {
        content: "\f633";
        font-family: bootstrap-icons !important;
        position: absolute;
        color: var(--primary-color);
        width: 0.625rem;
        height: 0.625rem;
        inset-block-start: -1px;
        inset-inline-start: 0px;
        font-size: 0.688rem;
    }

    .form-checked-outline:checked[type=checkbox].form-checked-secondary:before {
        color: rgb(var(--secondary-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-warning:before {
        color: rgb(var(--warning-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-info:before {
        color: rgb(var(--info-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-success:before {
        color: rgb(var(--success-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-danger:before {
        color: rgb(var(--danger-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-light:before {
        color: rgb(var(--light-rgb));
    }

    .form-checked-outline:checked[type=checkbox].form-checked-dark:before {
        color: rgb(var(--dark-rgb));
    }

.form-checked-outline:checked[type=radio] {
    background-image: none;
    position: relative;
    background-color: transparent;
}

    .form-checked-outline:checked[type=radio]:before {
        content: "\f309";
        font-family: bootstrap-icons !important;
        position: absolute;
        color: var(--primary-color);
        width: 0.625rem;
        height: 0.625rem;
        inset-block-start: -1.0938rem;
        inset-inline-start: -0.626rem;
        font-size: 2rem;
    }

    .form-checked-outline:checked[type=radio].form-checked-secondary:before {
        color: rgb(var(--secondary-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-warning:before {
        color: rgb(var(--warning-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-info:before {
        color: rgb(var(--info-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-success:before {
        color: rgb(var(--success-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-danger:before {
        color: rgb(var(--danger-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-light:before {
        color: rgb(var(--light-rgb));
    }

    .form-checked-outline:checked[type=radio].form-checked-dark:before {
        color: rgb(var(--dark-rgb));
    }

fieldset:disabled .btn {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-select:focus {
    border-color: var(--primary05);
    outline: 0;
    box-shadow: none;
}

.btn-check:focus + .btn,
.btn:focus {
    background-color: none;
    border-color: none;
    outline: 0;
}

.btn-check:active + .btn:focus,
.btn-check:checked + .btn:focus,
.btn.active:focus,
.btn.show:focus,
.btn:active:focus {
    box-shadow: none;
}

.form-control-plaintext {
    color: var(--default-text-color);
}

.form-control::-webkit-file-upload-button {
    color: var(--default-text-color);
    background-color: var(--default-background);
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--default-background);
}

/* Start::placeholder */
.form-control:focus::-webkit-input-placeholder, .form-control:focus::placeholder {
    -webkit-padding-start: 0.3rem;
    padding-inline-start: 0.3rem;
    -webkit-transition: -webkit-padding-start 0.1s ease-in;
    transition: -webkit-padding-start 0.1s ease-in;
    transition: padding-inline-start 0.1s ease-in;
    transition: padding-inline-start 0.1s ease-in, -webkit-padding-start 0.1s ease-in;
}

.form-control::-webkit-input-placeholder {
    font-weight: 500;
    opacity: 0.4;
    color: var(--default-text-color);
    -webkit-padding-start: 0px;
    padding-inline-start: 0px;
    -webkit-transition: -webkit-padding-start 0.1s ease-in;
    transition: -webkit-padding-start 0.1s ease-in;
    transition: padding-inline-start 0.1s ease-in;
    transition: padding-inline-start 0.1s ease-in, -webkit-padding-start 0.1s ease-in;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    font-weight: 500;
    opacity: 0.4;
    color: var(--default-text-color);
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    font-weight: 500;
    opacity: 0.4;
    color: var(--default-text-color);
}

.form-control:-ms-input-placeholder {
    font-weight: 500;
    opacity: 0.4;
    color: var(--default-text-color);
}

/* End::placeholder */
/* Start:: sizes */
.form-control-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.8rem;
}

.form-control-lg {
    font-size: 1rem;
    padding: 0.5rem .1rem;
}

.form-check-md .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
}

.form-check-md.form-switch .form-check-input {
    width: 2.25rem;
}

.form-check-md label {
    -webkit-margin-start: 0.5rem;
    margin-inline-start: 0.5rem;
    font-size: 0.95rem;
    -webkit-margin-before: 3px;
    margin-block-start: 3px;
}

.form-check-lg .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
}

.form-check-lg.form-switch .form-check-input {
    width: 2.5rem;
}

.form-check-lg label {
    -webkit-margin-start: 0.5rem;
    margin-inline-start: 0.5rem;
    font-size: 1rem;
    -webkit-margin-before: 3px;
    margin-block-start: 3px;
}
