:root {
    --error: #E54048;
    --notification: #BB151D;

    --white: #ffffff;
    --red: #E54048;
    --orange: #E9864F;
    --blue: #6ECCDA;
    --table-blue: #334F95;
    --green: #6ECCDA;
    --purple: #A140DC;


    --ultra-light-blue: #e2f5f8;
    --light-blue: #E2F5F8;
    --normal-blue: #6ECCDA;
    --dark-blue: #46828b;

    --ultra-light-grey: #F3F3F3;
    --light-grey: #DADADA;
    --normal-grey: #575757;
    --dark-grey: #141414;


    --primary-button-bg-color: #6ECCDA;
    --primary-button-bg-color-hover: #c5ebf0;
    --primary-button-bg-color-focus: #46828b;

    --primary-button-border-color: #6ECCDA;
    --primary-button-border-color-hover: #c5ebf0;
    --primary-button-border-color-focus: #46828b;

    --primary-button-text-color: #f3f3f3;
    --primary-button-text-color-hover: #46828b;
    --primary-button-text-color-focus: #f3f3f3;

    --secondary-button-bg-color: #fff;
    --secondary-button-bg-color-hover: #c5ebf0;
    --secondary-button-bg-color-focus: #c5ebf0;

    --secondary-button-border-color: #6ECCDA;
    --secondary-button-border-color-hover: #6ECCDA;
    --secondary-button-border-color-focus: #46828b;

    --secondary-button-text-color: #6ECCDA;
    --secondary-button-text-color-hover: #6ECCDA;
    --secondary-button-text-color-focus: #46828b;



    --tertiary-button-bg-color: #fff;
    --tertiary-button-bg-color-hover: #fff;
    --tertiary-button-bg-color-focus: #fff;

    --tertiary-button-border-color: #fff;
    --tertiary-button-border-color-hover: #fff;
    --tertiary-button-border-color-focus: #fff;

    --tertiary-button-text-color: #6ECCDA;
    --tertiary-button-text-color-hover: #46828b;
    --tertiary-button-text-color-focus: #023F1E;


    --box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.10), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 24px 14px 0px rgba(0, 0, 0, 0.05), 0px 42px 17px 0px rgba(0, 0, 0, 0.01), 0px 66px 18px 0px rgba(0, 0, 0, 0.00);
    --font-size-s: 12px;
    --font-size-m: 13px;
    --font-size-l: 15px;
    --font-size-xl: 20px;

    --border: 1px solid #dadada;
    --border-focus: 1px solid #6ECCDA;

    --ultra-light-text: #b6b6b6;
    --light-text: #575757;
    --dark-text: #141414;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

.form-group {
    position: relative
}

.form-group label {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    margin-bottom: 0;
}

.form-control,
select,
.select2-container--bootstrap4 .select2-selection,
.select2-container--bootstrap-5 {
    border-radius: 6px;
    border: var(--border);
    padding: 8px !important;
    color: var(--light-text) !important;
    background-color: var(--white);
    height: 35px !important;
    line-height: 20px;
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    width: 100% !important;
}

.form-control:focus,
select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border: var(--border-focus);
    box-shadow: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
}

/* Hide the default checkbox */
input[type=checkbox] {
    visibility: hidden;
}

/* Creating a custom checkbox
    based on demand */
.custom-check {
    position: absolute;
    top: -2px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--white);
    border: var(--border);
    border-radius: 4px;
}

/* Specify the background color to be
    shown when hovering over checkbox */
.form-checkbox:hover input~.custom-check {
    background-color: var(--light-blue);
    border: 1px solid var(--light-blue);
}

/* Specify the background color to be
    shown when checkbox is active */
.form-checkbox input:active~.custom-check {
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
}

/* Specify the background color to be
    shown when checkbox is checked */
.form-checkbox input:checked~.custom-check {
    background-color: var(--light-blue);
    border: 1px solid var(--blue);
}

/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.custom-check:after {
    content: "";
    position: absolute;
    display: none;
}

/* Display checkmark when checked */
.form-checkbox input:checked~.custom-check:after {
    display: block;
}

/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and
    showing only two border to make it look
    like a tickmark */
.form-checkbox .custom-check:after {
    left: 8px;
    bottom: 7px;
    width: 6px;
    height: 12px;
    border: solid var(--blue);
    border-width: 0px 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.form-checbox-label {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    margin-bottom: 0;
    margin-left: 30px;
}

.search {
    border-radius: 6px;
    border: var(--border);
    font-size: 12px;
    max-width: 185px;
}

textarea.form-control {
    height: auto !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: not-allowed;
    border: 1px solid #e9ecef;
}


.form-control[readonly].flatpickr-input {
    border-radius: 6px;
    border: var(--border);
    padding: 8px !important;
    color: var(--light-text) !important;
    background-color: var(--white);
    height: 35px !important;
    line-height: 20px;
    cursor: pointer;

}

.problem-select {
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.problem-select :focus {
    color: #495057;
    background-color: #fff;
    border-color: transparent !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}


.filter-fields .custom-check {
    width: 20px;
    height: 20px;
    top: 0;
}

.filter-fields .form-checkbox .custom-check::after {
    left: 6px;
    bottom: 5px;
    width: 6px;
    height: 12px;
    border: solid var(--blue);
    border-width: 0px 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.f-checkbox input[type=checkbox] {
    visibility: visible !important;
}


.flatpickr-input {
    cursor: pointer;
    border-radius: 6px;
    border: var(--border);
    padding: 8px !important;
    color: var(--light-text) !important;
    background-color: var(--white);
    height: 35px !important;
    line-height: 20px;
}

.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-month.endRange {
    background-color: var(--primary);
    box-shadow: none;
    color: var(--primary-button-text-color);
    border: var(--primary);
}

.flatpickr-monthSelect-month.today:hover,
.flatpickr-monthSelect-month.today:focus {
    background-color: var(--primary-button-bg-color);
    border: var(--primary-button-border-color);
    color: var(--primary-button-text-color);
}

.custom-file {
    z-index: 0;
}

.select2-container {
    z-index: 1;
}