:root {
    --color-primary-900: #80B616;
    --color-primary-600: #A6CC5C;
    --color-primary-300: #CCE2A2;
    --color-primary-100: #E6F0D0;
    --color-primary-50: #F2F8E8;
    --color-secondary-700: #EA7D33;
    --color-danger-900: #C10000;
    --color-danger-50: #F9E6E6;
    --color-neutral-900: #24272A;
    --color-neutral-800: #373737;
    --color-neutral-400: #909090;
    --color-neutral-500: #7A7A7A;
    --color-neutral-300: #A6A6A6;
    --color-neutral-100: #D3D3D3;
}

.btn-slsn {
    background-color: #28BF7E;
    border-color: #28BF7E;
    border-radius: 5px;
}

    .btn-slsn:hover {
        background-color: #209f69;
        border-color: #209f69;
        color: #fff;
        border-radius: 5px;
    }


.btn-outline-slsn {
    color: #28BF7E;
    background-color: transparent;
    background-image: none;
    border-color: #28BF7E;
}

    .btn-outline-slsn:hover {
        color: #fff;
        background-color: #28BF7E;
        border-color: #28BF7E;
    }

.contentLogin {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
}

/* BEGIN: Common */
.form-group {
    margin: 0;
}
/* END: Common */

/* BEGIN: Colors Style Guide */
.text-danger {
    color: var(--color-danger-900) !important;
}

.text-success {
    color: var(--color-primary-900) !important;
}

.text-info {
    color: #002f56 !important;
}

.text-warning {
    color: #FFD71A !important;
}
/* END: Colors Style Guide */

/* BEGIN: Typography Style Guide */
label {
    color: var(--color-neutral-900);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0.25rem;
}

.h5 {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 45px !important;
    color: var(--color-neutral-900) !important;
}

.body1 {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: var(--color-neutral-900) !important;
}
/* END: Typography Style Guide */

/* BEGIN: Textbox, Input Style Guide */
input[type=text],
input[type=password] {
    display: block;
    color: var(--color-neutral-900);
    font-weight: 400;
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--color-neutral-100);
    background-color: #FFF;
    transition: border-color 0.15s ease;
}

    input[type=text].is-invalid,
    input[type=password].is-invalid {
        border: 1px solid var(--color-danger-900);
    }

        input[type=text].is-invalid ~ .invalid-feedback,
        input[type=password].is-invalid ~ .invalid-feedback {
            display: block;
            color: var(--color-danger-900) !important;
            font-size: 14px !important;
            line-height: 20px !important;
            margin-top: 2px !important;
        }

input:disabled,
input:read-only:not([type=checkbox]):not([type=submit]) {
    background-color: #E9E9E9 !important;
}

    input:disabled::-webkit-input-placeholder,
    input:read-only::-webkit-input-placeholder {
        color: var(--color-neutral-100) !important;
    }

    input:disabled::-moz-placeholder,
    input:read-only::-moz-placeholder {
        color: var(--color-neutral-100) !important;
    }

input::placeholder {
    color: var(--color-neutral-100);
    font-weight: 400;
}

input::-webkit-input-placeholder {
    color: var(--color-neutral-100);
    font-weight: 400;
}

input::-moz-placeholder {
    color: var(--color-neutral-100);
    font-weight: 400;
}

input[type=text]:not(.is-invalid):focus,
input[type=password]:not(.is-invalid):focus {
    border-color: var(--color-neutral-900);
    outline: 0;
    box-shadow: none;
}

input[type=text].is-invalid:focus-visible,
input[type=password].is-invalid:focus-visible {
    outline: 0;
}

.form-control-sm {
    font-size: 14px;
    line-height: 20px;
    padding: 13px 16px;
    height: 46px;
}

.form-control {
    font-size: 18px;
    line-height: 20px;
    padding: 13px 16px;
    height: 50px;
}

.form-control-lg {
    font-size: 18px;
    line-height: 26px;
    padding: 15px 16px;
    height: 56px;
}

.field-icon {
    font-size: 20px;
    float: right;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0;
    position: relative;
    z-index: 2;
    transform: translate(-16px, -50%);
}

.form-control-sm ~ .field-icon {
    margin-top: -23px;
}

.form-control ~ .field-icon {
    margin-top: -25px;
}

.form-control-lg ~ .field-icon {
    margin-top: -28px;
}

.input-group-text { /* Input add-on */
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    border: none;
    background-color: #D1D5DB;
    padding-left: 16px;
    padding-right: 16px;
}

.form-group-icon {
    position: relative
}

    .form-group-icon > i {
        color: var(--color-neutral-100);
        position: absolute;
        top: 50%;
        left: 19px;
        transform: translateY(-50%);
    }

    .form-group-icon > input[type=text] {
        padding: 16px 16px 16px 42px;
    }
/* END: Textbox, Input Materials Style Guide */

/* BEGIN: Select Style Guide */
.select-control {
    display: flex;
    position: relative;
    width: 100%;
}

.select-input {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-100);
    border-radius: 4px;
    padding: 12px 16px;
    background-color: #FFF;
    height: 50px;
    transition: border-color 0.15s ease;
}

    .select-input > .value {
        font-size: 18px;
        line-height: 26px;
        user-select: none;
    }

        .select-input > .value.placeholder {
            color: var(--color-neutral-100);
        }

    .select-input > .fa-chevron-down {
        font-size: 12px;
        color: var(--color-neutral-100);
    }

    .select-input.select-sm {
        padding: 10px 16px;
        height: 46px;
    }

    .select-input.select-lg {
        padding: 15px 16px;
        height: 56px;
    }

    .select-input:focus {
        outline: none;
        box-shadow: none;
        border: 1px solid var(--color-neutral-900);
    }

.select-menu {
    width: 100%;
    max-height: 180px; /* Preview 6 Items */
    overflow-y: scroll;
    position: absolute;
    top: calc(100% + 3px);
    margin: 0;
    z-index: 500;
    padding: 0;
    list-style: none;
    padding: 8px 0;
    background-color: #FFF;
    border: 1px solid var(--color-neutral-100);
    border-radius: 4px;
}

    .select-menu::-webkit-scrollbar {
        width: 5px;
    }

    .select-menu::-webkit-scrollbar-thumb {
        background: var(--color-neutral-300);
        border-radius: 10px;
    }

    .select-menu .option {
        padding: 16px;
        transition: background-color 0.005s ease, color 0.005s ease;
    }

        .select-menu .option.placeholder {
            color: var(--color-neutral-100);
        }

        .select-menu .option:hover {
            color: var(--color-primary-900);
            background-color: var(--color-primary-50);
        }
/* END: Select Style Guide */

/* BEGIN: Button Materials Style Guide */
.btn {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    border-radius: 40px;
    padding: 15px 24px;
    height: 56px;
    border: none;
}

    .btn:active {
        color: inherit !important;
        background-color: inherit !important;
    }

    .btn:focus {
        outline: 0 !important;
        box-shadow: none !important;
    }

    .btn.btn-lg {
        font-size: 22px;
        font-weight: 500;
        line-height: 34px;
        padding: 16px 32px;
        height: 66px;
    }

    .btn.btn-sm {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 8px 24px;
        height: 36px;
    }

    .btn.btn-success {
        color: #FFF;
        background-color: var(--color-primary-900);
    }

        .btn.btn-success:not(:disabled):hover,
        .btn.btn-success:not(:disabled):active { /* Temp? */
            color: var(--color-primary-900) !important;
            background-color: var(--color-primary-50) !important;
        }

        .btn.btn-success:disabled,
        .btn.btn-danger:disabled {
            color: #A6A6A6 !important;
            background-color: var(--color-neutral-100) !important;
        }

    .btn.btn-success-outline {
        color: var(--color-primary-900);
        background-color: #FFF;
        border: 1px solid var(--color-primary-900);
    }

        .btn.btn-success-outline:not(:disabled):hover,
        .btn.btn-success-outline:not(:disabled):active {
            background-color: var(--color-primary-50);
        }

        .btn.btn-success-outline:disabled,
        .btn.btn-success-outline:disabled {
            color: var(--color-neutral-300);
            border: 1px solid var(--color-neutral-300);
        }

    .btn.btn-danger {
        color: #FFF;
        background-color: var(--color-danger-900);
    }

        .btn.btn-danger:not(:disabled):hover,
        .btn.btn-danger:not(:disabled):active {
            color: var(--color-danger-900) !important;
            background-color: var(--color-danger-50) !important;
        }

    .btn.btn-danger-outline {
        color: var(--color-danger-900);
        background-color: #FFF;
        border: 1px solid var(--color-danger-900);
    }

        .btn.btn-danger-outline:not(:disabled):hover,
        .btn.btn-danger-outline:not(:disabled):active {
            background-color: var(--color-danger-50);
        }
/* END: Button Style Guide */

/* BEGIN: Checkbox Style Guide */
input[type=checkbox] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}

    input[type=checkbox]:before {
        display: block;
        font-family: 'FontAwesome';
        content: '';
        height: 16px;
        width: 16px;
        border: 1px solid var(--color-primary-900);
        border-radius: 2px;
        transition: border-color 0.15s ease;
    }

span.checkbox-lg > input[type=checkbox]::before {
    height: 24px;
    width: 24px;
}

input[type=checkbox].checkbox-lg:before {
    height: 24px;
    width: 24px;
}

input[type=checkbox]:checked:before {
    background: var(--color-primary-900) url('/img/check-sm.svg') no-repeat center;
}

input[type=checkbox]:checked.checkbox-lg:before {
    background: var(--color-primary-900) url('/img/check-lg.svg') no-repeat center;
}

input[type=checkbox]:hover:before {
    border: 1px solid var(--color-primary-600);
}

input[type=checkbox]:focus:before {
    border: 1px solid var(--color-primary-300);
}

input[type=checkbox]:disabled:before {
    border: 1px solid var(--color-neutral-100);
    background-color: #FFF;
}

input[type=checkbox]:disabled:checked:before {
    background: var(--color-neutral-100) url('/img/check-sm.svg') no-repeat center;
}

input[type=checkbox].checkbox-lg:disabled:checked:before {
    background: var(--color-neutral-100) url('/img/check-lg.svg') no-repeat center;
}
/* END: Checkbox Style Guide */

/* BEGIN: Table Style Guide */
.table th,
.table td {
    font-size: 14px;
}

.table th {
    border: none;
    border-bottom-width: 1px !important;
    padding: 24px 12px;
}

.table td {
    padding: 16px 12px;
    /*    transition: background-color 0.005s ease;*/
}

.table th {
    font-weight: 500;
}

    .table th:first-child,
    .table td:first-child {
        padding-left: 24px;
    }

    .table th:last-child,
    .table td:last-child {
        padding-right: 24px;
    }

.table tr:hover td {
    background-color: #EEE;
}

.table th {
    background-color: #E6F0D0;
}

.table td {
    background-color: #FFF;
}

.table tr:last-child td {
    border-bottom: 1px solid #DEE2E6;
}
/* END: Table Style Guide */

/* BEGIN: Date Picker Style Guide */
.datetimepicker {
    padding: 16px 18px !important;
}

    .datetimepicker::before {
        content: none !important;
    }

    .datetimepicker::after {
        content: none !important;
    }

    .datetimepicker * {
        font-family: 'Prompt';
    }

    .datetimepicker thead tr:first-child th {
        font-size: 14px;
        color: #000;
    }

        .datetimepicker thead tr:first-child th.prev:before {
            color: var(--color-neutral-500);
            font-family: 'FontAwesome';
            content: '\f053'
        }

        .datetimepicker thead tr:first-child th.next:before {
            color: var(--color-neutral-500);
            font-family: 'FontAwesome';
            content: '\f054'
        }

    .datetimepicker th {
        font-size: 12px;
        font-weight: 400;
        color: var(--color-neutral-400);
    }

        .datetimepicker th:first-child {
            color: var(--color-secondary-700);
        }

    .datetimepicker tfoot tr th {
        color: var(--color-primary-900) !important;
    }

    .datetimepicker td.day {
        padding: 0;
        font-size: 12px;
        font-weight: 400;
        color: var(--color-neutral-900);
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
    }

        /*        .datetimepicker td.day:hover {
            border-radius: 50% !important;
            background-color: transparent !important;
            outline: 1px solid var(--color-primary-900);
        }*/

        .datetimepicker td.day.active {
            background-color: var(--color-primary-900) !important;
            background-image: none !important;
            text-shadow: none !important;
            overflow: hidden !important;
        }

    .datetimepicker .month {
        font-size: 10px;
        text-shadow: none !important;
        background-image: none !important;
        background-color: transparent !important;
    }

        .datetimepicker .month.active {
            background-color: var(--color-primary-900) !important;
        }

        .datetimepicker .month:not(.active):hover {
            background-color: var(--color-neutral-100) !important;
        }

    .datetimepicker .year {
        font-size: 10px;
        text-shadow: none !important;
        background-image: none !important;
        background-color: transparent !important;
    }

        .datetimepicker .year.active {
            background-color: var(--color-primary-900) !important;
        }

        .datetimepicker .year:not(.active):hover {
            background-color: var(--color-neutral-100) !important;
        }

.datetimepicker-hours > table > thead > tr > th,
.datetimepicker-minutes > table > thead > tr > th {
    font-size: 0px !important;
    height: 0;
    padding: 0;
}

.timepicker .datetimepicker-hours,
.timepicker .datetimepicker-minutes > table {
    font-family: 'Prompt';
    color: var(--color-neutral-900);
    font-size: 12px !important;
    margin-top: 0 !important;
}

.datetimepicker .hour.active,
.datetimepicker .minute.active {
    text-shadow: none !important;
    background-image: none !important;
    background-color: var(--color-primary-900) !important;
}
/* END: Date Picker Style Guide */
@media (max-width: 576px) {
}

/*START Placeholder icon Style Guide*/
.placeholder-icon-calendar {
    box-sizing: border-box;
    border-radius: 50px;
    background-color: white;
    background-image: url(../../../img/calendar-icon.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.placeholder-icon-time {
    box-sizing: border-box;
    border-radius: 50px;
    background-color: white;
    background-image: url(../../../img/time-icon.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* END: Placeholder icon Style Guide */