/* VARIABLES */
:root {
	/* COLORS */
	--white: #fff;
	--black: #000;
	--primary: #FF7FAB;
	--primary-thin: #FFF7F9;
	--primary-light: #FFC0D6;
	--primary-regular: #ED749D;
	--main: #3A4754;
	--main-thin: #B4BABF;
	--main-dark: #363636;
	--light-gray: #F8F8F8;
	--light-gray-2: #F9F9F9;
	--secondary: #ACACAC;
	--secondary-2: #7F7F7F;
	--secondary-3: #696973;
	--links: #579AC0;
	--border: #EAEAEA;
	--success: #40B46E;
	--success-thin: #F0FAF4;
	--warning: #FF8D5C;
	--warning-thin: #FCF5F2;
	--danger: #FA4B60;
	--danger-thin: #FCF2F4;
	--info: #51C2E5;
	--yellow: #DEAF09;
	--yellow-thin: #FFF4CE;

	/* TYPOGRAPHY */
	--open-sans: 'Open Sans', sans-serif;

	--baseFontFamily: var(--open-sans);
	--baseFontSize: 14px;
	--baseLineHeight: 22px;

	--light: 300;
	--regular: 400;
	--medium: 500;
	--semi-bold: 600;
	--bold: 700;
	--extra-bold: 800;

	/* UI */
	--border-radius: 10px;
	--box-shadow: 0px 0px 1px rgba(26, 32, 36, 0.32), 0px 1px 2px rgba(91, 104, 113, 0.32);

	/* ANIMATION */
	--transition: all .2s ease;
}

/* COMMON */
body {
	font: var(--regular) var(--baseFontSize)/var(--baseLineHeight) var(--baseFontFamily);
	color: var(--main);
}

::-webkit-scrollbar {
	width: 5px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--border);
	border-radius: 10px;
}

/* BUTTONS */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--baseFontFamily);
	line-height: var(--baseLineHeight);
	font-weight: var(--semi-bold);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	transition: var(--transition);
}

.btn:hover [class^="color-"] {
	color: currentColor;
}

.btn:disabled {
	pointer-events: none;
}

.btn svg {
	color: currentColor;
}

.btn svg:first-child:not(:last-child) {
	margin-right: 10px;
}

.btn svg:last-child:not(:first-child) {
	margin-left: 10px;
}

/* buttons sizing */
.btn--sm {
	padding: 6px 10px;
	font-size: 14px;
}

.btn--md {
	padding: 11px 16px;
	font-size: 15px;
}

/* button variant */
.btn--icon {
	padding: 0;
}

.btn--icon.btn--sm {
	width: 36px;
	height: 36px;
}

.btn--icon.btn--md {
	width: 46px;
	height: 46px;
}

.btn--pill {
	border-radius: 30px;
}

.btn--shadow {
	box-shadow: var(--box-shadow);
}

/* button style */
/* primary */
.btn--primary {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}

.btn--primary:hover {
	background-color: var(--primary-regular);
	border-color: var(--primary-regular);
}

.btn--primary:disabled {
	background-color: var(--primary-light);
	border-color: var(--primary-light);
}

/* primary outline */
.btn--outline-primary {
	border-color: currentColor;
	color: var(--primary);
}

.btn--outline-primary:hover {
	background-color: var(--primary);
	color: var(--white);
}

.btn--outline-primary:disabled {
	color: var(--primary-light);
}

/* primary link */
.btn--link-primary {
	color: var(--primary);
}

.btn--link-primary:hover {
	background-color: var(--primary-thin);
}

.btn--link-primary:disabled {
	color: var(--primary-light);
}

/* deafault outline */
.btn--outline-deafault {
	border-color: var(--border);
	color: var(--main);
}

.btn--outline-deafault:hover {
	background-color: var(--border);
}

/* secondary */
.btn--secondary {
	background-color: var(--white);
	color: var(--secondary-2);
}

.btn--secondary:hover {
	background-color: var(--light-gray);
	border-color: var(--light-gray);
}

.btn--secondary:active,
.btn--secondary:focus,
.btn--secondary.active,
.btn--secondary.active:hover {
	background-color: var(--primary-thin);
	border-color: var(--primary-thin);
	color: var(--primary);
}

.btn--secondary.active:disabled,
.btn--secondary.active:hover:disabled {
    background-color: var(--white);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

/* secondary outline */
.btn--outline-secondary {
	background-color: transparent;
	border-color: var(--border);
	color: var(--secondary-2);
}

.btn--outline-secondary:hover {
	background-color: var(--border);
	border-color: var(--border);
}

.btn--outline-secondary:active,
/*.btn--outline-secondary:focus,*/
.btn--outline-secondary.active,
.btn--outline.active:hover {
	background-color: var(--primary-thin);
	border-color: var(--primary-thin);
	color: var(--primary);
}

/* accent secondary */
.btn--accent-secondary {
	border-color: var(--border);
	color: var(--primary);
}

.btn--accent-secondary:hover {
	background-color: var(--primary-thin);
	border-color: var(--primary-thin);
}

/* like */
.btn-like {
	border-radius: 50%;
	color: var(--primary);
}

.btn-like:active svg,
.btn-like--active svg {
	fill: var(--primary);
}

/* filter label */
.filter-label {
	/* display: inline-flex; */
	border-color: var(--border);
}

.filter-label__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	margin: -10px -10px -10px 6px;
	color: var(--primary);
}

.filter-label__button:hover {
	color: var(--primary-light);
}

/* ALERT */
.alert {
	padding: 12px;
	border-radius: var(--border-radius);
	font-size: 15px;
	font-weight: var(--semi-bold);
	text-align: center;
}

.alert--succses {
	color: var(--success);
	background-color: var(--success-thin);
}

.alert--info {
	color: var(--primary);
	background-color: var(--primary-thin);
}

.alert--warning {
	color: var(--warning);
	background-color: var(--warning-thin);
}

.alert--danger {
	color: var(--danger);
	background-color: var(--danger-thin);
}

.alert--dismissible {
	padding: 20px;
	border: 1px solid;
	text-align: left;
	font-weight: var(--regular);
}

.alert__heading {
	display: flex;
	margin-bottom: 15px;
}

.alert__title {
	font-weight: var(--semi-bold);
}

.alert__button {
	margin-left: auto;
	color: inherit;
}

.alert__button:hover {
	opacity: .5;
}

.alert--simple {
	display: flex;
	padding: 15px;
	text-align: left;
	font-weight: var(--regular);
}

.alert__icon {
	width: 24px;
	height: 24px;
	margin-left: 20px;
	color: inherit;
}

.alert strong {
	font-weight: var(--semi-bold);
}

/* BADGE */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 9px 15px 9px 10px;
	border-radius: var(--border-radius);
	font-size: 12px;
	font-weight: var(--semi-bold);
	line-height: 1.5;
}

.badge__icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
}

.badge__icon + .badge__text {
	margin-left: 8px;
}

.badge--succses {
	color: var(--success);
	background-color: var(--success-thin);
}

.badge--warning {
	color: var(--warning);
	background-color: var(--warning-thin);
}

.badge--default {
	color: var(--secondary);
	background-color: var(--light-gray);
}

/* FORMS */
/* switch */
.switch {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 24px;
}

.switch__slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--light-gray);
	border-radius: 50px;
	transition: .4s;
}

.switch__slider::before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	border-radius: 50%;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
	transition: .4s;
}

.switch__field {
	width: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

.switch__field:checked + .switch__slider {
	background-color: var(--primary);
}

.switch__field:checked + .switch__slider::before {
	transform: translateX(23px);
}

/* form-check */
.form-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	line-height: 1;
}

.form-check__field {
	position: absolute !important;
	opacity: 0;
	visibility: hidden;
}

.form-check__label {
	cursor: pointer;
	padding-left: 20px;
	font-size: 15px;
}

.form-check__label::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--white);
	background-image: url("data:image/svg+xml;utf8,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.47754 4.28463L3.64544 6.45253L3.63144 6.43852L8.52247 1.54749' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 5px;
	border: 1px solid var(--border);
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.form-check__label span {
	display: inline-block;
	padding-left: 10px;
}

.form-check__field:checked + .form-check__label::before {
	border-color: var(--primary);
	background-color: var(--primary);
}

.form-check__field:disabled + .form-check__label {
	pointer-events: none;
	color: var(--main-thin);
}

.form-check__field:checked:disabled + .form-check__label::before {
	border-color: var(--primary-light);
	background-color: var(--primary-light);
}

/* form-radio */
.form-radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	line-height: 1;
}

.form-radio__field {
	position: absolute !important;
	opacity: 0;
	visibility: hidden;
}

/*abc*/


/*abc*/

.form-radio__label {
	cursor: pointer;
	padding-left: 20px;
	font-size: 15px;
}

.form-radio__label::after,
.form-radio__label::before {
	content: '';
	top: 50%;
	box-sizing: border-box;
	position: absolute;
	border-radius: 50%;
	background-color: var(--white);
	transition: all 0.3s ease;
	transform: translateY(-50%);
}

.form-radio__label::after {
	left: 6px;
	width: 8px;
	height: 8px;
}

/* .form-radio__label::before {
	left: 0;
	width: 20px;
	height: 20px;
    
    border-color: var(--primary);
    background-color: var(--primary);
}

.form-radio__label span {
	display: inline-block;
	padding-left: 10px;
}

.form-radio__field:checked + .form-radio__label::before {
	border-color: var(--primary);
	background-color: var(--primary);
}

.form-radio__field:disabled + .form-radio__label {
    cursor: not-allowed;
}

.form-radio__field:disabled + .form-radio__label {
	pointer-events: none;
	color: var(--main-thin);
}

.form-radio__field:checked:disabled + .form-radio__label::before {
	border-color: var(--primary-light);
	background-color: var(--primary-light);
} */


.form-radio__label::before {
    content: '-'; 
    display: inline-block;
     color: var(--primary); 
    width: auto;
    height: auto; 
    left: 0;
    text-align: center; 
    padding-right: 5px; 
    font-size: 20px; 
}

.form-radio_field:checked + .form-radio_label::before {
    color: var(--primary);
}

.form-radio_field:disabled + .form-radio_label {
    cursor: not-allowed;
}

.form-radio_field:disabled + .form-radio_label {
    pointer-events: none;
    color: var(--main-thin);
}

.form-radio_field:checked:disabled + .form-radio_label::before {
    color: var(--primary-light);
}

/* form-control */
.form-control {
	display: block;
	width: 100%;
	padding: 11px 15px;
	background-color: var(--white);
	border-radius: var(--border-radius);
	border: 1px solid var(--border);
	font-family: var(--baseFontFamily);
	font-size: 15px;
	line-height: var(--baseLineHeight);
	appearance: none;
	transition: var(--transition);
}

.form-control:focus {
	border-color: var(--primary-thin);
}

.form-control:disabled {
	background-color: var(--light-gray);
	color: var(--secondary);
}

.form-control::placeholder {
	color: var(--secondary);
}

.form-control--search {
	padding-right: 40px;
	background-image: url(../img/ico-loop.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.form-control.valid,
.form-control.invalid {
	padding-right: 40px;
}

.form-control.valid {
	border-color: var(--success);
	background-image: url(../img/ico-checkmark-green.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.form-control.invalid {
	border-color: var(--danger);
	background-image: url(../img/ico-warning-red.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.select.invalid {
    border-color: var(--danger);
}

.form-control--primary {
	border-color: var(--primary);
	font-size: 16px;
}

.form-control--primary::placeholder {
	color: var(--secondary-2);
}

.form-control--readonly {
	pointer-events: none;
}

.form-control--cleanable.not-empty {
	padding-right: 30px;
}

/* form-label */
.form-label {
	display: flex;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: var(--baseLineHeight);
	font-weight: var(--semi-bold);
	text-transform: uppercase;
}

label.form-label {
	cursor: pointer;
}

.form-label.required::after {
	content: ' *';
	color: var(--primary);
}

.form-label--light {
	color: var(--secondary);
}

/* error-message */
.error-message {
	display: block;
	margin-left: auto;
	padding-left: 10px;
	font-size: 12px;
	line-height: var(--baseLineHeight);
	font-weight: var(--semi-bold);
	color: var(--danger) !important;
	text-align: right;
	text-transform: uppercase;
}

/* input-group */
.input-group {
	position: relative;
}

.input-group--left .form-control {
	padding-left: 45px;
}

.input-group--right .form-control {
	padding-right: 45px;
}

.input-group .form-control:focus + .input-group__label--icon {
	color: var(--primary);
}

.input-group__label {
	position: absolute;
	top: 11px;
	width: 24px;
	height: 24px;
}

.input-group--left .input-group__label {
	left: 11px;
}

.input-group--right .input-group__label {
	right: 11px;
}

.input-group__label--icon {
	pointer-events: none;
	color: var(--secondary-2);
}

.input-group__reset {
	position: absolute;
	top: 15px;
	right: 10px;
	color: var(--secondary);
	transition: var(--transition);
	opacity: 0;
	visibility: hidden;
}

.input-group__reset--active {
	opacity: 1;
	visibility: visible;
}

.input-group__reset:hover {
	color: var(--primary);
}

/* datepicker */
.air-datepicker {
	width: 284px;
	border: none;
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	color: var(--main-dark);
}

.air-datepicker--pointer {
	display: none;
}

.air-datepicker-nav {
	padding: 15px 15px 0;
	border: none;
}

.air-datepicker-nav--action {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	border: 1px solid #EDEDED;
	transition: var(--transition);
}

.air-datepicker-nav--action:hover {
	background-color: #EDEDED;
}

.air-datepicker-nav--title {
	font-family: var(--baseFontFamily);
	font-size: var(--baseFontSize);
}

.air-datepicker-nav--title i {
	font-size: inherit;
	color: inherit;
}

.air-datepicker--content {
	padding: 0 15px 15px;
}

.air-datepicker-body--day-names {
	margin: 4px -2px;
}

.air-datepicker-body--day-name {
	height: 32px;
	margin-left: 2px;
	margin-right: 2px;
	color: #A4A2A2;
	font-size: var(--baseFontSize);
	text-transform: capitalize;
}

.air-datepicker-body--cells {
	margin-left: -2px;
	margin-right: -2px;
}

.air-datepicker-body--cells.-days- {
	grid-auto-rows: 36px;
}

.air-datepicker-cell {
	border-radius: 7px;
	margin: 2px;
	transition: var(--transition);
}

.air-datepicker-cell.-other-month- {
	background-color: var(--light-gray-2);
}

.air-datepicker-cell.-focus-,
.air-datepicker-cell.-day-.-other-month-.-focus-,
.air-datepicker-cell.-day-.-other-month-:hover {
	background-color: var(--primary-light);
	color: var(--white);
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-focus-,
.air-datepicker-cell.-selected-.-current-,
.air-datepicker-cell.-selected-.-day-.-other-month-,
.air-datepicker-cell.-selected-.-year-.-other-decade- {
	background-color: var(--primary);
}

.air-datepicker-cell.-current- {
	border: 1px solid var(--primary);
	color: var(--main-dark);
	font-weight: var(--semi-bold);
}

.air-datepicker-cell.-current.-focus- {
	color: var(--white);
}

.color-secondary {
	color: var(--secondary);
}

.color-main {
	color: var(--main);
}