html, body{
	overflow-x: hidden;
}

html{
	scroll-behavior: smooth;
}

body{
	margin: 0;
	padding: 0;
}

:root {
	--body: #1a1919;
	--h1: #000;
	--rose: #fe728f;
	--ff915e: #ff915e;
	--b7c68e: #b7c68e;
	--7a7bad: #7a7bad;
	--ccccdb: #ccccdb;
	--bfbfca: #bfbfca;
}

:root {
	--font-family: "Montserrat", sans-serif;
	--second-family: "Sofia Sans", sans-serif;
	--third-family: "Inter", sans-serif;
	--font3: "Montserrat ExtraBold", sans-serif;
	--font4: "Montserrat SemiBold", sans-serif;
  }

div, input, textarea{
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
	font-family: var(--second-family);
	font-weight: 700;
	text-align: center;
	color: var(--h1);
	margin: 0;	
}

h1{
	font-size: 80px;
	letter-spacing: -0.03em;
}

h2{
	font-size: 42px;
	letter-spacing: -0.03em;
}

h3{
	font-size: 24px;
	letter-spacing: -0.01em;
}

h4{
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--h1);
}

h5{
	font-family: var(--second-family);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -0.03em;
	color: #fff;
}

p, ul, li, ol, input, textarea, label, span, button, div{
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: -0.02em;
	color: var(--h1);
}

p strong{
	font-weight: 700;
}

a, input{
	outline: none;
}
	
	input:hover, input:active, input:focus, input:link,
	textarea:hover, textarea:active, textarea:focus, 
	textarea:link{
	outline: none;
}
	
a, a:visited{
	text-decoration: none;
	font-family: Roboto, sans-serif;
	transition: transform 0.3s;
	color: #f97b95;
}
	
a:hover, a:active, a:focus{
	text-decoration: none;
	border: 0;
	outline: none;
	color: #fe728f;
}

input[type="text"], input[type="password"], 
input[type="textarea"], input[type="email"], 
.form-input, textarea, input[type="time"],
input[type="date"], input[type="datetime-local"],
input[type="number"], select{
	border: 1px solid #9191B1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 14px;
	line-height: 171%;
	letter-spacing: -0.02em;
	color: var(--body);
	padding: 8px 11px;
}

input::placeholder{
	font-weight: 400;
}

input[type="file"] {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	visibility: hidden;
}

.custom-file-upload-label {
	position: relative;
	display: inline-block;
	padding: 8px 20px 8px 50px;
	cursor: pointer;
	background-color: var(--rose);
	color: white;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	transition: 0.3s ease;
	font-size: 14px;
}

.custom-file-upload-label.selected{
	background-color: #b7c68e;
}

.custom-file-upload-label:before {
	position: absolute;
	left: 20px;
	content: '\f019';
	font-family: FontAwesome;
	color: #fff;
}

.custom-file-upload-label.selected:before {
	content: '\f00c';
}

.custom-file-upload-label:hover {
	-webkit-box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	-moz-box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	background: #ff8147;
}

.custom-file-name {
	display: block;
	margin-top: 10px;
	color: #333;
}

input[type="radio"], input[type="checkbox"] {
    position: absolute;
	z-index: -1;
	opacity: 0;
}

label{
	min-width: 20px;
	min-height: 20px;
}

.radio-label, .checkbox-label{
	display: flex !important;
	cursor: pointer;
	transition: 0.3s ease;
}

.radio-label:hover, .checkbox-label:hover{
	color: var(--rose);
}

.radio-label i.fa{
	margin-top: 2px;
}

.radio-span, .checkbox-span{
	position: relative;
	padding-left: 30px;
}

.radio-span:before, .checkbox-span:before {
    content: '';
    width: 16px;
    height: 16px;
	left: 0;
	top: 0;
    border: 2px solid #66635f;
    position: absolute;
    vertical-align: middle;
    margin-right: 10px;
    cursor: pointer;
	transition: 0.4s ease;
}

.radio-span:before{
	border-radius: 50%;
}

.checkbox-span:before {
	border-radius: 4px;
	pointer-events: none;
}

.radio-span.custom-radio:before,
.checkbox-span.custom-checkbox:before {
    border: 2px solid var(--rose);
	transition: 0.4s ease;
}

.custom-radio:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--rose);
    position: absolute;
    top: 5px;
    left: 5px;
    transition: 0.4s ease;
}

.custom-checkbox:after {
    content: '\f00c';
	font-family: FontAwesome;
    display: block;
	font-size: 14px;
    color: var(--rose);
    position: absolute;
    top: -2px;
    left: 3px;
	cursor: pointer;
    transition: 0.4s ease;
}

.radio-span:hover::before,
.checkbox-span:hover::before{
	border: 2px solid var(--rose);
}

/*---validation inputs forms---*/

input.phone:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.1s;
}

@keyframes onAutoFillStart {
    from {}
    to {}
}

input.phone-input-error, .input-error, .empty-field{
	border-color: var(--rose) !important;
}

.input-to-short{
	position: relative;
}

.empty-field-radio, .empty-field-checkbox{
	border-right: 2px solid var(--rose);
}

.input-to-short::after,.empty-field-radio::after, 
.empty-field-checkbox::after, .empty-field-span::after,
.error-input-file::after, .error-input-email::after,
.error-input-data::after{
	display: block;
	position: relative;
	top: -5px;
	width: 100%;
	height: auto;
	z-index: 999;
	color: var(--rose);
	font-family: var(--font-family);
	font-size: 14px;
}

.empty-field-span{
	position: relative;
}

.empty-field-span::after{
	position: absolute;
}

.input-to-short::after{
	content: 'не вистачає символів для цього поля';
}

.input-to-long::after{
	content: 'занадто символів для цього поля';
}

.empty-field-radio::after, .empty-field-checkbox::after{
	content: 'виберіть хочаб один варіант';
}

.error-input-data::after{
	content: 'введіть коректну дату у форматі ДД.MM.РРРР';
}

.error-input-email::after{
	content: 'введіть коректний e-mail через "@"';
}

.error-input-file{
	position: relative;
	display: block;
	width: 100%;
	
}

.error-input-file::after{
	position: absolute;
	content: 'додайте фото документа';
	top: 40px;
}

.empty-field-span::after{
	content: '*';
}

.empty-field-span::before{
	border: 2px solid var(--rose);
}

/*---end validation inputs forms---*/

/*---basic rules---*/

.container-1240px{
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;	
}

@media (min-width: 1240px){

	.container-1240px{
		width: 1240px;	
	}

}

@media (min-width: 900px){

	.width-800px{
		width: 800px !important;
		margin-left: auto;
		margin-right: auto;
	}

}

.head-title h3{
	margin-top: 15px;
}

.name-of-user{
	font-size: 16px;
	margin-right: 15px;
	display: flex;
	align-items: center;
}

/*---dropdown menu for sign-up---*/

.right-orientation{
	position: absolute;
	display: flex;
	right: 20px;
}

.sign-in-dropdown {
	position: relative;
	display: inline-block;
  }
  
.sign-in-dropdown-btn {
	background-color: transparent;
	color: transparent;
	line-height: 0%;
	padding: 0;
	border: none;
	cursor: pointer;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 3px solid #fff;
	overflow: hidden;
	width: 50px;
	height: 50px;
	transition: all 0.3s ease;
  }

.sign-in-dropdown-btn:hover{
	box-shadow: 0px 8px 16px rgba(212, 118, 75, 0.2);
  }

.sign-in-dropdown-btn img{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;
    object-position: top;
}

.sign-in-dropdown-content{
	min-width: 160px;
}

.sign-in-dropdown-content,
.notifications-dropdown-content {
	position: absolute;
	top: 60px;
	right: 0;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px rgba(212, 118, 75, 0.2);
	z-index: 1;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
.sign-in-dropdown-content a, .sign-in-dropdown-content button {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	font-weight: 600;
	transition: 0.3s ease;
  }

.sign-in-dropdown-content button{
	width: 100%;
	background-color: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	position: relative;
  }

.sign-in-dropdown-content button:before,
.notifications-dropdown-content a:before{
	content: '';
	position: absolute;
	top: -1px;
	left: 16px;
	width: calc(100% - 32px);
	height: 1px;
	background-color: #f1f1f1;
  }

  .sign-in-dropdown-content button:hover:before,
  .notifications-dropdown-content a:hover:before{
	display: none;
  }

.sign-in-dropdown-content a:first-child,
.notifications-dropdown-content a:first-child {
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
  }

.sign-in-dropdown-content a:last-child, 
.sign-in-dropdown-content button,
.notifications-dropdown-content a:last-child {
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
  }
  
.sign-in-dropdown-content a:hover,
.sign-in-dropdown-content button:hover,
.notifications-dropdown-content a:hover {
	background-color: #f1f1f1;
  }
  
.sign-in-dropdown-content.show,
.notifications-dropdown-content.show{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	z-index: 999;
  }  
  
/*---end dropdown menu for sign-up---*/

/*---dropdown menu for notifications---*/

.notifications-dropdown {
	position: relative;
	display: inline-block;
}

.notifications-dropdown-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	position: relative;
	padding-top: 5px;
	margin-right: 15px;
}

.notifications-dropdown-btn i.fa-bell-o:before{
	font-family: 'FontAwesome';
	font-style: normal;
	color: var(--rose);
	transition: transform 0.3s ease;
		display: inline-block;
}

.notifications-dropdown-btn i.fa-bell-o:hover:before{
	transform: rotate(-30deg);
}

.notification-count {
	position: absolute;
	bottom: -5px;
	right: -5px;
	background: #FF915E;
	color: white;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	font-size: 10px;
}

.notifications-dropdown-content {
	min-width: 300px;
	max-height: 400px;
    overflow: hidden;
}

.notifications-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.notifications-scroll-container::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar {
    position: absolute;
    top: 20px;
    bottom: 20px;
    right: 2px;
    width: 8px; 
    background: #f1f1f1;
    border-radius: 20px; 
}

.custom-scrollbar-thumb {
    background: #888; 
    border-radius: 20px; 
    width: 100%;
    position: absolute;
    transition: background 0.2s ease; 
}

.custom-scrollbar-thumb:hover {
    background: #555; 
}

.notifications-dropdown-content a {
	position: relative;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	transition: 0.3s ease;
	color: var(--h1);
}

.notifications-dropdown-content a p{
	margin: 0;
}

.notifications-dropdown-content a p.admin-message{
	position: relative;
	color: var(--ff915e);
	display: inline-block;
	font-weight: normal !important;
}

.notifications-dropdown-content a p.admin-message::after{
	position: absolute;
	top: 0;
	right: -20px;
	content: "\f05d";
	font-family: 'FontAwesome';
	font-size: 15px;
}

.notifications-dropdown-content a.unread span{
	color: #7a7bad;
}

.notifications-dropdown-content a.unread span.color-green{
	color: #B7C68E;
}

.notifications-dropdown-content a.unread span.color-red{
	color: var(--rose);
}

.notifications-dropdown-content a.unread p{
	font-weight: bold;
}

.notifications-dropdown-content a:first-child::before {
	display: none;
}

.notifications-dropdown-content small {
	display: block;
	color: #666;
	font-size: 0.8rem;
}

/*---end dropdown menu for notifications---*/

/*---dropdown menu for sign-in and notifications---*/

@media screen and (max-width: 870px) {
	.right-orientation{
		right: 60px;
	}	
}

@media screen and (max-width: 420px) {
	.right-orientation{
		right: 50px;
	}
	
	.right-orientation a.black-border-button,
	.right-orientation a.orange-button{
		padding: 10px 16px;
	}

	.sign-in-dropdown {
		margin-right: 10px;
	}

	.notifications-dropdown-content{
		right: -95px;
	}
}

/*---end dropdown menu for sign-in and notifications---*/

.sections{
	margin-bottom: 110px;
}

.section-content{
	position: relative;
	z-index: 2;
}

.block-for-button{
	margin-top: 40px;
	margin-bottom: 40px;
}

ul.errorlist li{
	color: #fe728f;
	font-size: 14px;
}

a, a:visited, a:hover, a:active, a:focus{
	text-decoration: none;
	outline: none;
}

a.black-border-button, a.orange-button, 
a.orange-button-big, a.black-border-button-big,
button.orange-button-big, button.orange-button,
button.black-border-button{
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	margin-right: 10px;
	font-family: var(--font-family); 
	font-weight: 600;
	font-size: 16px;
	text-align: center;
	transition: 0.3s ease;
	display: inline-block;
	cursor: pointer;
}

button.orange-button-big, button.orange-button{
	border: none;
}

a.black-border-button, a.orange-button, 
button.orange-button, button.black-border-button{
	padding: 10px 27px;
}

a.orange-button-big, a.black-border-button-big,
button.orange-button-big{
	padding: 16px 30px;
}

a.black-border-button, a.black-border-button-big,
button.black-border-button{
	border: 1px solid rgba(0, 0, 0, 0.32);
	color: var(--body);
	background: none;
}

a.black-border-button:hover, a.black-border-button-big:hover,
button.black-border-button:hover{
	border: 1px solid rgba(0, 0, 0, 0.9);
}

a.orange-button, a.orange-button-big, button.orange-button,
button.orange-button-big{
	background: var(--ff915e);
	color: #fff;
}

a.orange-button:hover, a.orange-button-big:hover,
button.orange-button-big:hover, button.orange-button:hover{
	-webkit-box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	-moz-box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	box-shadow: 1px 15px 40px 0 rgba(212, 118, 75, 0.37);
	background: #ff8147;
}

.position-relative{
	position: relative;
}

.module1-fon {
    width: 300px;
    height: auto;
	position: relative;
	z-index: 2
}

.vector-line{
	position: relative;
}

.vector-line img{
	position: absolute;
	width: 100%;
	height: auto;
	top: -21vw;
}

@media (max-width: 450px){

	.sections{
		margin-bottom: 50px;	
	}

	h1{
		font-size: 52px;
	}

	h2{
		font-size: 34px;
		line-height: 38px;
		margin: 0 20px;
	}

	.module1-fon {
		width: 230px;
	}

}

/*---end basic rules---*/

/*---header---*/

header{
	position: absolute;
	width: 100%;
}

header .container-1240px{
	position: relative;
	display: flex;
	align-items: center;
	height: 120px;
}

.left-side{
	position: absolute;
	left: 20px;
}

.left-side .logo-header{
	width: 80px;
	height: auto;
}

.right-side{
	position: absolute;
	right: 20px;
	display: flex;
}

.right-side.margin-right-menu-notuser{
	right: 300px;
}

.right-side.margin-right-menu-user{
	right: 110px;
}

.for-mobile-sidebar{
	display: flex;
}

@media screen and (max-width: 768px) {
	header .container-1240px{
		height: 100px;
	}	

	.left-side .logo-header{
		width: 50px;
		height: auto;
	}
}

@media screen and (max-width: 450px) {
	header .container-1240px{
		height: 100px;
	}	
}

/*---menu---*/

header nav{
	display: flex;
	align-items: center;

}

header nav ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}

header nav ul li{
	margin-right: 30px; 
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.02em;
	display: inline-block;
	position: relative;
}

header nav ul li:after{
    content: ''; 
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 0;
    height: 2px;
    background-color: var(--rose);
    transition: width 0.3s ease;
}

header nav ul li:hover::after, header nav ul li.active::after{
    width: calc(100% + 20px);
}

header nav ul li a{
	color: var(--h1) !important;
	transition: color 0.3s ease;
}

header nav ul li:hover a, header nav ul li.active a{
	color: var(--rose) !important;
}

/*---end menu---*/

/*---sign-up-in buttons---*/

.sign-up-in{
	display: flex;
}

/*---end sign-up-in buttons---*/

/*---mobile menu & sign-up-in buttons---*/

.menu-toggle {
    display: none;
	position: absolute;
	right: 20px;
	transition: right 0.3s;
}

.menu-toggle .bar {
    width: 28px;
    height: 2px;
    background-color: #FF915E;
    margin: 5px 0;
	transition: transform 0.3s;
	animation-duration: 0.3s;
}

.menu-toggle .bar:hover{
	background-color: #FF8147;
}

/* Поворот гамбургера в крестик */

.menu-toggle.active .bar{
	background-color: #fff;

}

.menu-toggle.active .bar{
	height: 1px;
	margin: 6px 0;
}

.menu-toggle.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
	transition-delay: 0.35s;
}

.menu-toggle.active .bar:nth-child(2) {
    transform: scale(0);
	transition-delay: 0.35s;

}

.menu-toggle.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
	transition-delay: 0.35s;
	transition-duration: 0.1s;
}

.mobile-menu {
    display: none;
	padding: 30px 20px 0 30px;
	box-sizing: border-box;
}

h5.title-of-menu{
	display: none;
	text-align: left;
	transition-delay: 0.35s;
}

.mobile-menu.active h5.title-of-menu{
	display: block;
}

@media screen and (max-width: 870px) {

	.right-side {
		display: none;
	}

    .menu-toggle {
        display: block;
    }

    .menu-toggle.active {
		/*right: min(calc(80% + 20px), 445px);*/
		z-index: 9999;
		position: fixed;
		transition: right 0.3s; 
    }

	.mobile-overlay {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100vh;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transition: all 0.5s ease-in-out;
		z-index: 998;
	}
    
    .mobile-menu {
		background-image: url('../images/head-of-sidebar-3.svg');
		background-size: auto 220px;
		background-position: right top;
		background-repeat: no-repeat;
        display: block;
		position: fixed;
		top: 0; 
		right: -80%; 
		width: 80%; 
		max-width: 425px;	
		height: 100%; 
		background-color: white; 
		z-index: 999; 
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: right 0.3s; 
    }

	.menu-toggle.active + .mobile-menu.active {
		right: 0;
	}

	.mobile-menu.active {
		z-index: 1000;
		filter: drop-shadow(50px 5px 80px #000000);
	}

	.mobile-overlay.active {
		opacity: 1;
		visibility: visible;
		transition: all 0.5s ease-in-out;
	}

	.for-mobile-sidebar{
		margin-top: 180px;
		display: block;
	}

	header nav, header nav ul{
		display: block;
	}

	header nav{
		margin-bottom: 20px;
	}

	header nav ul li{
		margin: 0 0 20px 0;
		display: block;
		font-size: 18px;
	}
}

@media screen and (max-width: 450px) {

	.for-mobile-sidebar{
		margin-top: 130px;
	}
}

.deley-1{
	transition-delay: 0.1s
}

.deley-2{
	transition-delay: 0.15s
}

.deley-3{
	transition-delay: 0.2s
}

.deley-4{
	transition-delay: 0.25s
}

/*---end mobile menu & sign-up-in buttons---*/

/*---modal window---*/

.modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
	z-index: 99998;
}

.user-details-modal{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100vh;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
	z-index: 99998;
}

.modal {
	position: relative;
	box-shadow: 2px 3px 88px 0 rgba(221, 206, 199, 0.6);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #fff;
	width: auto;
	height: auto;
	margin: auto;
	display: none;
	z-index: 99999;
	overflow-y: auto;
	overflow-x: hidden;
	flex-shrink: 0;
	-webkit-overflow-scrolling: touch;
    transition: transform 0.5s ease;
}

.modal--3 {
    width: 90%;
	height: 90%;
	max-width: 1200px;
}

@media screen and (max-width: 450px) {
	.modal--3 .modal-body{
		padding: 60px 15px 40px;
	}

	.modal--3 ol{
		padding-left: 30px;
	}

	.modal--3 ul{
		padding-left: 0;
	}
}

.total-modals .modal--3 .modal-content p{
    text-align: left;
	display: block;
}

.modal--3 .modal-content, .modal--3 .modal-content-in{
	display: block;
	overflow: hidden;
}

.modal--3 .modal-content-in-1{
	overflow-y: auto;
	max-height: 90%;
	height: 90%;
}

.modal--3 .modal-content h4{
	margin: 20px 0;
}

.modal--3 .footer-of-modals{
	margin-top: 40px;
}

.modal-overlay--visible {
	opacity: 1;
	visibility: visible;
	transition: all 0.5s ease-in-out;
}

.modal--visible {
	display: block;
	transform: translateY(0%);
	transition: transform 0.5s ease;
}

.modal--visible{
	right: 0;
	transition: transform 0.5s ease;
	transform: translateX(0%) !important;
}

.modal-body{
	padding: 80px 60px 40px;
}

.modal-body h2{
	margin-bottom: 30px;
	text-transform: uppercase;
}

.modal-content{
	display: flex;
	justify-content: center;
}

.modal-content-sign-in{
	display: flex !important;
	margin-top: 30px;
}

.modal-content-sign-in input{
	margin-bottom: 5px;
}

.modal-content-sign-in .block-for-button{
	margin-top: 20px;
	margin-bottom: 20px;
}

.footer-of-modals{
	width: 100%;
	text-align: center;
	font-size: 16px;
}

.footer-of-modals p{
	padding: 0;
	margin: 0;
}

.footer-of-modals a, .footer-of-modals a:visited{
	font-weight: 600;
	color: var(--h1);
	transition: color 0.3s ease;
}

.footer-of-modals a:hover{
	color: #CCCCDB;
}

.total-modals .modal-content p{
	display: none;
	width: 100%;
	text-align: center;
	margin: 0;
}

.style-for-x{
	position: fixed;
	right: 30px;
	top: 30px;
	cursor: pointer;
}

.footer-of-modals a.orange-button-big, 
.footer-of-modals a.orange-button-big:visited{
	color: #fff;
}

.modal-close .bar{
	width: 28px;
    height: 1px;
    background-color: var(--h1);
    margin: 13px 0;
    transition: transform 0.3s;
    animation-duration: 0.3s;
}

.modal-close .bar:nth-child(1){
	transform: rotate(-45deg) translate(-5px, 5px);
    transition-delay: 0.35s;
}

.modal-close .bar:last-child{
	transform: rotate(45deg) translate(-5px, -5px);
    transition-delay: 0.35s;
    transition-duration: 0.1s;
}

@media screen and (max-width: 1170px) {

	.total-modals .image-in-modal{
		width: 22vw;
		margin: auto;
		display: block;
	}
}

@media screen and (max-width: 810px) {
	.modal {
		width: 80%;
	}	
}

@media screen and (max-width: 780px) {

	.modal-body{
		padding: 60px 30px 40px;
	}

	.modal-body h2 {
		font-size: 5vw;
	}

	.total-modals .image-in-modal{
		width: 22vw;
		margin: auto;
		display: block;
	}

	.total-modals .modal-content{
		display: block;
	}

	.total-modals .image-in-modal{
		display: none;
	}

	.total-modals .modal-content p{
		display: block;
	}

	.total-modals .block-for-button {
		margin-top: 10px;
	}
}

@media screen and (max-width: 450px) {
	.modal-body h2 {
		font-size: 26px;
		line-height: 32px;
	}

	.total-modals .block-for-button {
		margin-bottom: 20px;
	}

	.modal-close {
		top: 15px;
		right: 15px;
	}
}

.image-modal-overlay {
    z-index: 199999;
}

.modal--image {
    max-width: 90%;
    max-height: 90%;
}

.modal--image img {
    max-width: 100%;
    max-height: 100%;
}

/*---end modal window---*/

/*---end header---*/

/*---head of main page---*/

.head-fon-main{
	background-image: url('../images/design-background-1-svg.svg');	
	background-size: cover;
	background-position: center bottom;
	height: auto;
	width: 100%;
	overflow: hidden;
}

.head-fon-main .head-slide{
	padding-top: 260px;
}

.head-title-buttons{
	width: 100%;
	text-align: center;
}

.head-title h1{
	margin-top: 0;
	margin-bottom: 40px;
}

.head-fon-main .head-buttons{
	position: relative;
	z-index: 2;
}

.head-fon-main .head-buttons .orange-button-big{
	padding: 16px 84px;
}

.head-image-main{
	position: relative;
}

.heart-cage, .heart-main, .hearts-small{
	position: absolute;
	left: 50%;
}

.heart-cage{
	top: -50px;
	transform: translateX(-95px);
}

.heart-main{
	top: 210px;
	transform: translateX(105px);	
}

.hearts-small{
	top: 10px;
	transform: translateX(-95px);	
}

@media screen and (max-width: 768px) {
	.head-fon-main .head-slide {
		padding-top: 34vw;
	}

	.head-title h1 {
		margin-bottom: 6vw;
		font-size: 10.5vw;
	}

	.hearts-small{
		width: 83vw;
		top: 1.1vw;
	}

	.heart-cage{
		width: 73vw;
		top: -6vw;
	}

	.heart-main{
		width: 32vw;
		top: 28vw;
		transform: translateX(14vw);
	}
}

@media screen and (max-width: 470px) {

	.head-title h1 {
		font-size: 52px;
	}

	.heart-main{
		transform: translateX(3vw);
	}	

	.head-fon-main .head-buttons .orange-button-big{
		padding: 16px 40px;
	}
}

@media screen and (max-width: 380px) {
	.head-fon-main .head-buttons .orange-button-big{
		padding: 16px 30px;
		margin-right: 5px;
	}

	.head-fon-main .head-buttons .black-border-button-big{
		margin-right: 0;
	}
}

/*---end head of main page---*/

/*---head of tip page---*/

.head-fon-tip{
	background-image: url('../images/head-background-tip.svg');	
	background-size: cover;
	background-position: center bottom;
	height: auto;
	width: 100%;
	overflow: hidden;
}

.tip-sections .head-title{
	padding: 150px 0 200px;
}

@media screen and (max-width: 450px) {

	.tip-sections .head-title{
		padding: 100px 0 130px;
	}	
}

/*---end head of tip page---*/

/*---head of ragistration page---*/

.head-fon-reg{
	background-image: url('../images/reg-head-background-1.svg');	
	background-size: cover;
	background-position: center bottom;
	height: auto;
	width: 100%;
	overflow-x: hidden;
}

.head-fon-reg .head-slide{
	padding: 150px 0 200px;
}

.head-fon-reg .head-title{
	padding: 0;
}

.head-fon-reg .content{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 2px 3px 88px 0 rgba(221, 206, 199, 0.6);
	background: #fff;
	width: 100%;
	height: auto;
}

/*---end head of registration page---*/

/*---module1 carusel---*/

.ourhelp-module{
	width: 100%;
	overflow: hidden;
}

.ourhelp-module h2{
	margin-bottom: 125px;
}

.mother-corusel{
	width: 100%;
	height: 410px;
    overflow: hidden;
	padding-bottom: 60px;
}

.ourhelp-module .module1-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    display: flex;
}

.ourhelp-module .module1-fon {
    margin-right: 150px;
}

.ourhelp-module .module1-fon h3{
	margin-top: 60px;
	padding: 0 20px;
}

.block-for-button{
	width: 100%;
	text-align: center;
}

.duplicate-module-photo {
    position: absolute;
    top: 0;
    left: 100%; /* Поместим дубликат справа за пределами родительского блока */
    width: auto;
    display: flex;
}

@media (max-width: 450px){

	.ourhelp-module h2{
		margin-bottom: 50px;
	}

	.mother-corusel{
		height: 340px;
		padding-bottom: 20px;
	}

	.ourhelp-module .module1-fon {
		margin-right: 40px;
	}

	.ourhelp-module img.module-photo{
		width: 230px;
	}

	.ourhelp-module .module1-fon h3{
		margin-top: 40px;
	}

}

/*---end module1 carusel---*/

/*---section how it works---*/

.main-section-3{
	padding-top: 120px;
}

.main-section-3 h2{
	margin-bottom: 100px;
}

.block-fon-2{
	position: relative;
}

.fon-2{
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%) translateX(-55px);
}

.main-section-3 ol{
	list-style-type: none;
	counter-reset: my-counter;
	display: flex;
	margin: 0;
	padding: 0;
	justify-content: space-between;
}

.main-section-3 ol li{
	position: relative;
	width: 150px;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--h1);
	display: inline-block;
	padding-left: 52px;
}

.main-section-3 ol li:before{
	content: counter(my-counter);
	counter-increment: my-counter;
	background-image: url('../images/circule-number.png');
	background-size: cover;
	font-family: var(--second-family);
	font-weight: 500;
	font-size: 28px;
	text-align: center;
	color: #fff;	
    border-radius: 50%;
	display: inline-block;
	padding-top: 4px;
	width: 40px;
	height: 36px;
	position: absolute;
	left: 0;
}

.main-section-3 .section-content p{
	max-width: 555px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin: 55px auto 0 auto;
}

@media (max-width: 960px){
	.main-section-3 ol{
		display: block;
		width: 640px;
		margin: 0 auto;
	}

	.main-section-3 ol li{
		width: 155px;
		height: 50px;
	}
}

@media (max-width: 680px){
	.main-section-3{
		margin-bottom: 50px;
	}

	.main-section-3 ol{
		width: 200px;
	}
}

@media (max-width: 450px){
	.main-section-3{
		padding-top: 80px;
	}

	.fon-2{
		top: -90px;
		left: 0;
		transform: translateX(0);
	}

	.main-section-3 h2{
		margin-bottom: 50px;
	}

	.main-section-3 .section-content p{
		width: 90%;
	}
}

/*---end section how it works---*/

/*---section our principles---*/

.main-section-4{
	padding-top: 120px;
}

.main-section-4 h2{
	margin-bottom: 100px;
}

.ourprinciples-module .module1-photo{
	display: flex;
	justify-content: space-between;
}

.ourprinciples-module .module1-fon{
	width: 300px;
}

.ourprinciples-module .module1-fon img{
	width: 162px;
	height: auto;
	margin: 0 auto 25px auto;
	display: block;
}

.ourprinciples-module .module1-fon p{
	text-align: center;
}

@media (max-width: 760px){
}

@media (max-width: 680px){
	.main-section-4{
		padding-top: 80px;
	}

	.ourprinciples-module .module1-photo{
		display: block;
		margin: 0 auto;
		width: 400px;
	}

	.ourprinciples-module .module1-fon{
		width: auto;
	}
}

@media (max-width: 450px){
	.ourprinciples-module .module1-photo{
		width: 300px;
	}

	.main-section-4 h2{
		margin-bottom: 50px;
	}
}

/*---end section our principles---*/

/*---section our specialists---*/

.main-section-5{
	padding-top: 120px;
}

.ourspecialists-module{
	position: relative;
}

.ourspecialists-module .fon-3{
	position: absolute;
	width: 100%;
	min-width: 700px;
	height: auto;
	top: 0;
}

.ourspecialists-module .content{
	margin-top: 60px;
}

.ourspecialists-module .content p{
	max-width: 500px;
	margin: auto;
	text-align: center;
}

/*---end section our specialists---*/

/*---section reviews---*/

.main-section-6{
	padding-top: 120px;
}

.fon-4{
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
}

.reviews-module .content{
	margin: 80px auto;
}

.reviews-module .media-images{
	display: inline-block;
}

.reviews-module img.image-fon{
	position: absolute;
	top: -60px;
	left: -30px;
	z-index: 2;
}

.reviews-module .image-avatar{
	position: relative;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	border: 3px solid #fff;
	z-index: 3;
	width: 190px;
	height: auto;
}

.reviews-module .text{
	width: 255px;
}

.star-rating{
	cursor: pointer;
}

.star-rating span{
	margin: 5px 0;
	margin-block-start: 5px !important;
	margin-block-end: 5px !important;
}

.star-rating .star {
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
    display: inline-block;
	transition: 0.3s ease;
}
.star-rating .star.filled {
    color: var(--ff915e);
}
.star-rating .star.hover {
    color: var(--ff915e);
}

@media (min-width: 760px){
.reviews-module .content{
	display: flex;
	align-items: center;
	width: 510px;
	margin: 80px auto;
}

	.reviews-module .text h4{
		text-align: left;
	}

	.reviews-module .text{
		margin-left: 60px;
	}
}

@media (max-width: 760px){

	.reviews-module .content{
		width: 255px;
		margin-bottom: 0;
	}

	.reviews-module .media-images{
		width: 100%;
	}

	.reviews-module img.image-fon{
		left: 50%;
		transform: translateX(-50%);		
	}

	.reviews-module .image-avatar{
		margin: 0 auto;
		display: block;
	}
	
	.reviews-module .text{
		text-align: center;
		margin-top: 20px;
	}
}

@media (max-width: 450px){
	.main-section-6{
		padding-top: 80px;
	}

	.fon-4{
		top: -40px;
		right: 0;
		left: unset;
		transform: translateX(0);
	}
}

/*---end section reviews---*/

/*---section faq---*/

.main-section-7{
  padding-top: 50px;
}

.faq-module .content{
  padding: 0 20px;
  margin: 80px auto 100px;
  text-align: left;
}

.faq-module h4{
  position: relative;
  text-align: left;
  cursor: pointer;
  width: 100%;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-right: 20px;
  border-bottom: 1px solid rgba(162, 162, 162, 0.27);
}

.faq-module h4:after{
  position: absolute;
  right: 0;
  font-family: FontAwesome;
  content: "\f107";
  color: #A8A8A8;
  font-weight: 100;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

@media (min-width: 900px){
  .faq-module .content{
    width: 800px;
  }  

  .faq-module .content-tab{
    padding: 0 40px 0 20px;
  }
}

@media (max-width: 450px){
  .faq-module .content{
    margin: 50px auto;
  }  

  .faq-module .content-tab{
    padding: 0 20px 0 0;
  }
}

/*---end section faq---*/

/*---tip content area---*/

.form-on-page{
	width: 300px;
	display: block;
	margin: auto;
	box-sizing: border-box;
}

.form-on-page p{
	margin: 0;
}

.form-on-page input{
	margin-top: 15px;
	width: 100%;
	box-sizing: border-box;
}
/*
.form-on-page form p:nth-child(3){
	position: relative;
}

.form-on-page form p:nth-child(3)::after{
	font-family: FontAwesome;
	content: '\f070';
	position: absolute;
	top: 23px;
	right: 16px;
	color: grey;
}
*/

.head-fon-reg .content{
	padding: 30px;
	margin-top: 50px;
	box-sizing: border-box;
}

.temporary-content{
	max-width: 800px;
	margin: auto;
}

.white-fon-shadow{
	box-shadow: 2px 3px 88px 0 rgba(221, 206, 199, 0.6);
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	padding: 30px 80px;
}

.max-600-center{
	max-width: 600px;
	margin: auto;
	margin-bottom: 50px;
}

.max-600-center .form-group{
	text-align: center;
}

.contact-page input,
.contact-page select,
.contact-page textarea{
	width: 100%;
}

.contact-page h3{
	margin-bottom: 30px;
}

.contact-page span{
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.max-500-center{
	max-width: 500px;
	text-align: center;
	margin: 0 auto 50px;
}

.head-fon-reg .content .text-area p:first-child{
	text-align: left;
}



@media (max-width: 768px){
	.white-fon-shadow{
		padding: 30px 20px;
	}	

	.temporary-content ul{
		margin: 0;
		padding: 0;
	}
}

/*---preview boxes on tip and for sections---*/

.box-previews, .box-previews-module{
	display: flex;
	/*justify-content: space-evenly;*/
	justify-content: left;
	gap: clamp(1rem, 2.0vw, 3rem);
	flex-wrap: wrap;
}

.box-previews-module{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.box-preview{
	position: relative;
	box-shadow: 0 0 33px 0 rgba(225, 223, 221, 0.6);
	background: #fff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	max-width: 270px;
	padding: 40px 15px;
	text-align: center;
	margin-top: 20px;
}

.box-previews-module .box-preview{
	box-shadow: unset;
	background: unset;
	-webkit-border-radius: unset;
	-moz-border-radius: unset;
	border-radius: unset;
	max-width: 290px;
}

.image-preview{
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: flex-start;
	width: 130px;
	height: 130px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	z-index: 1;
	margin: 0 auto;
}

.image-preview img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.title-preview h3{
	font-size: 20px;
}

.expiriense-preview{
	position: relative;
	z-index: 2;
}

.expiriense-preview p{
	display: block;
	margin: -20px auto 0;
	width: 130px;
	padding: 5px 10px;
	color: #fff;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	background-color: #8f90cf;
}

.box-previews-module .expiriense-preview p{
	margin: -20px auto 0;
}

.box-preview:hover .expiriense-preview p{
	background-color: var(--rose);
}

.expiriense-preview p span{
	color: #fff;
	display: inline;
}

.title-preview h3{
	margin: 10px 0;
}

.tegs-preview, .hidden-count{
	display: inline-block;
}

.tegs-preview span, .tegs-preview .hidden-count{
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 1px solid #000;
	padding: 5px 10px;
	font-family: var(--font-family);
	font-size: 14px;
	display: inline-block;
	margin-top: 2px;
	margin-bottom: 2px;
}

.tegs-preview span.hidden{
	display: none;
}

.title-preview, .expiriense-preview p, 
.tegs-preview span, .tegs-preview .hidden-count,
.description-preview p{
	cursor: default;
	user-select: none; /* Standard */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

.box-preview:hover .tegs-preview span, 
.box-preview:hover .tegs-preview .hidden-count{
	border-color: var(--rose);
	color: var(--rose);
}

.box-preview .button-preview button{
	opacity: 0;
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 1px solid #FF915E;
	padding: 10px 20px;
	background: #FF915E;
	color: #fff;
	cursor: pointer;
}

.box-preview:hover .description-preview{
	opacity: 0;
}

.box-preview:hover .button-preview button{
	opacity: 100%;
}

.box-preview:hover .button-preview button:hover{
	background: none;
	color: var(--h1);
}

.box-preview, .box-preview .button-preview button, 
.box-preview .expiriense-preview p, .box-preview .description-preview,
.box-preview .tegs-preview, .box-preview .tegs-preview span, 
.box-preview .tegs-preview .hidden-count{
	-webkit-transition: all 0.5s ease;
    transition: all 0.4s ease;
}

@media (min-width: 768px){
	.box-preview{
		min-height: 450px;
		min-width: 22%;
	}

	.box-previews-module .box-preview{
		min-height: unset;
	}
}

@media (max-width: 768px){
	.box-previews{
		display: block;
	}

	.box-preview{
		margin: 20px auto;
		width: 290px;
	}
}

/*---end preview boxes on tip and for sections---*/

/*---tip page of specialists---*/

.image-user-tip{
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: flex-start;
	width: 230px;
	height: 230px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	z-index: 1;
	margin: 0 auto;
	border: 3px solid #fff;
}

.image-user-tip img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.work-experience{
	text-align: center;
}

.work-experience span:first-child{
	background-image: url('../images/green-background.png');
	background-repeat: no-repeat;
	background-position: center center;
	height: 60px;
	display: block;
	color: #fff;
	font-weight: 700;
	font-size: 24px;
	padding-top: 30px;
}

.total-tegs h4{
	font-size: 18px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.tip-of-specialists .tegs{
	display: inline-block;
}

.tip-of-specialists .tegs span{
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 1px solid #000;
	padding: 5px 10px;
	font-family: var(--font-family);
	font-size: 14px;
	line-height: 35px;
	white-space: nowrap;
}

.reviews-specialists-page{
	margin-top: 70px;
}

.reviews-specialists-page h3{
	padding-bottom: 25px;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba(204, 204, 219, 0.14);
}

.reviews-specialists-page .klient-review-right-column{
	flex: 1 0 45%;
}

@media (min-width: 768px){
	.tip-of-specialists{
		display: flex;
	}

	.tip-of-specialists .users-left-column{
		flex: 1 0 25%;
        margin-right: 30px;
	}

	.tip-of-specialists .users-right-column{
		flex: 1 0 calc(50% - 30px);
	}

	.total-tegs h4{
		text-align: left;
	}
}

@media (max-width: 768px){
	.tip-of-specialists .tegs-work-direction span{
		white-space: wrap;
		border: none;
		display: block;
		padding: 0;
		margin-bottom: 5px;
		line-height: 16px;
	}

	.tip-of-specialists .tegs{
		text-align: center;
		width: 100%;
	}
}

/*---end tip page of specialists---*/

/*---registration form---*/

.registration-form .inner-form{
	display: flex;
}

.registration-form .inner-form h4{
	text-align: left;
	margin: 30px 0;
}

.registration-form input{
	margin-bottom: 5px;
}

.registration-form .button{
	margin-top: 20px;
	margin-bottom: 20px;
}

.registered-row{
	display: flex;
	gap: 20px;
}

.registered-row-element{
	flex: 1;
}

.questionare-data{
	padding-right: 60px;
}

.contact-data{
	flex: 1 0 33%;
}

.error-message{
	display: none;
	color: #f97b95;
}

.info-bloks-form p{
	text-align: left !important;
	margin: 10px 0 5px;
}

.info-bloks-form p span{
	color: #f97b95;
	font-weight: bold;
}

.info-bloks-form h4{
	margin: 0 0 5px !important;
}

.registration-form .inner-form label{
	margin-bottom: 10px;
}

.registration-form .inner-form .form-input{
	margin-bottom: 10px;
	width: 100%;
}

#id_negativeLevel{
	display: flex;
	justify-content: space-between;
	position: relative;
	padding-right: 5px;
}

#id_negativeLevel.empty-field-radio::after{
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: auto;
	z-index: 999;
	color: var(--rose);
	font-family: var(--font-family);
	font-size: 14px;
}

#id_negativeLevel label{
	text-align: center;
	display: block;
	margin-bottom: 0;
	padding-top: 1px;
}

#id_negativeLevel span{
	display: block;
	margin-bottom: 30px;
	padding-left: 20px;
}

.model-textarea{
	margin-top: 30px;
}

.model-textarea textarea{
	width: 100%;
	height: 100px;
}

input[type='file']{
	margin-bottom: 10px;
}

.castom-form-checkbox{
    display: flex;

}

.checkbox-text{
	margin-left: 15px;
}

.castom-form-checkbox{
	margin-bottom: 10px;
}

.castom-form-checkbox p{
    margin: 0;
	text-align: left !important;
}

/*.files-data .file {
	position: relative;
	width: 200px; 
	height: 40px; 
	overflow: hidden;
	background-color: #f0f0f0; 
	border: 1px solid #ccc; 
	border-radius: 5px; 
	padding: 8px; 
}


.files-data .file input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}


.file-input-label {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 14px;
	line-height: 24px;
}


.files-data .file:hover {
	background-color: #e0e0e0; 
}
*/

.files-data{
	margin-bottom: 30px;
}

@media (min-width: 1110px){
	.inner-form-spec{
		display: unset;
	}	

	.questionare-data-spec{
		width: 60%;
		float: left;
	}

	.content-data-spec{
		width: 35%;
		float:left;
	}
}

@media (max-width: 1110px){
	.content-data-spec{
		width: 45%;
		float:left;
	}
}

@media (min-width: 880px){

	.registration-form .inner-form .form-input{
		width: 350px;
	}

	.content-spec{
		margin: auto;
		width: 800px;
	}
}

@media (max-width: 768px){
	.registration-form .inner-form{
		display: block;
	}

	.content-data-spec{
		margin-top: 30px;
		width: 100%;
	}

	.questionare-data{
		padding-right: 0;
		width: unset;
	}
}

/*---registration from customuser---*/

.real-registration #id_username_helptext,
.profile-tabs-content #id_username_helptext,
.form-container .helptext{
	display: none;
}

.profile-tabs-content:before {
    content: '';
    display: block;
    height: 100px; 
    margin-top: -100px; 
    visibility: hidden; 
}

@media (min-width: 880px){
	.real-registration input,
	.real-registration textarea,
	.profile-tabs-content input,
	.profile-tabs-content textarea{
		width: 350px;
	}
}

@media (max-width: 880px){
	.registration-form .form-container,
	.profile-tabs-content .form-container{
		display: block;         
	}
	.real-registration input,
	.real-registration textarea,
	.profile-tabs-content input,
	.profile-tabs-content textarea{
		width: 100%;
	}
}

@media (max-width: 768px){
	.registration-form .form-container,
	.profile-tabs-content .form-container{
		display: block;         
	}
}

.real-registration textarea,
.profile-tabs-content textarea{
	height: 100px;
}

.registration-form p,
.profile-tabs-content form p{
	margin: 5px 0;
}

.text-in-profiles-tab p{
	font-family: var(--second-family);
	font-weight: bold;
}

.registration-form p label,
.registration-form label,
.profile-tabs-content form p label,
.profile-tabs-content form label{
	display: block;
	margin: 15px 0;
	font-weight: bold;
}

.registration-form label.custom-file-upload-label,
.profile-tabs-content form label.custom-file-upload-label{
	display: inline-block;
	font-weight: 400;
	width: auto;
	margin: 0 0 15px 0;
}

.registration-form .form-field label.checkbox-label,
.registration-form .form-field label.radio-label,
.profile-tabs-content label.checkbox-label,
.profile-tabs-content label.radio-label{
	margin: 5px 0;
	font-weight: 400;
}

@media (min-width: 768px){
	.registration-form .form-container,
	.profile-tabs-content .form-container{
		display: flex;         
		justify-content: space-between; 
		width: 100%;
	}

	.registration-form .form-column:nth-child(2) .form-field:first-of-type label {
		margin-top: 0;
	}

	.profile-tabs-content .form-container{
		padding: 40px;
	}

	.modal-body .form-container{
		padding: 0;
	}

	.text-in-profiles-tab p{
		text-align: right;
		width: 400px;
		font-size: 24px;
	}
}

@media (max-width: 768px){
	.profile-tabs-content .form-container{
		margin: 40px 0;
	}

	.text-in-profiles-tab p{
		text-align: center;
		font-size: 20px;
	}
}

.profile-tabs-content .tab-container{
	margin: 40px 0;
}

.registration-form .form-column,
.profile-tabs-content .form-column{
    flex: 1;
    margin: 0 10px;
	position: relative;
}

.form-column .success-message{
	position: absolute;
	top: -20px;
}

.button-on-registration-page{
	width: 100%;
	text-align: center;
	margin: 50px 0;
}

.help-text-modal{
	max-width: 600px;
}

@media (max-width: 768px){
	a.link-help-button{
		display: block;
		width: 100%;
	}
}

/*---end registration from customuser---*/

/*---end registration form---*/

/*---reviews page---*/

@media (min-width: 680px){
	.klient-review{
		display: flex;
	}
	
	.klient-review-left-column{
		flex: 1 0 22%;
	}
}

.klients-reviews-on-page{
	margin-bottom: 30px;
}

.klient-review{
	margin-bottom: 30px;
}

.klient-review-left-column{
    margin-right: 30px;
	text-align: center;
}

.klient-review-image,
.specialist-review-image{
	display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    z-index: 1;
	border: 5px solid #fff;
	box-shadow: 0 0 33px 0 rgba(225, 223, 221, 0.6);
}

.klient-review-image{
    width: 130px;
    height: 130px;
	margin: 0 auto;
}

.klient-review-image img,
.specialist-review-image img{
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.klient-review-name span{
	font-weight: bold;
}

.klient-review-date span{
	display: block;
    margin: -20px auto 0;
    width: 130px;
    padding: 5px 10px;
    color: #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: #8f90cf;
	text-align: center;
	z-index: 2;
	position: relative;
}

.klient-review-right-column{
	background-color: rgba(204, 204, 219, 0.14);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	padding: 15px 25px;
	flex: 1 75%;
}

.responses{
	border-top: 1px solid #edebeb;
	padding-top: 20px;
}

@media (min-width: 680px){
	.response{
		display: flex;
	}

	.response-header{
		flex: 1 0 5%;
	}

	.response-body{
		flex: 1 75%;
	}

	.response-body p{
		margin-top: 0;
		margin-left: 20px;
	}
}

@media (max-width: 680px){

	.klient-review-left-column{
		margin-right: 0;
	}

	.klient-review-right-column{
		text-align: center;
	}
}

.response-header{
	text-align: center;
}

.response-header small{
	display: block;
    margin: -15px auto 0;
    width: 110px;
    padding: 2px 8px;
    color: #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: #8f90cf;
    text-align: center;
    z-index: 2;
    position: relative;
}

.response-header p{
	margin: 5px 0;
}

.klient-review-specialist p{
	margin: 5px 0;
}

.specialist-review-image{
	width: 100px;
    height: 100px;
	margin: 0 auto;
}

.reviews {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.5s ease;
    will-change: opacity, max-height;
}

.reviews.active {
    opacity: 1;
    max-height: 500px; 
}

.reviews p{
	text-align: center;
}

.reviews-radio-main{
	display: flex;
    justify-content: center;
}

.reviews-radio-main label{
	text-align: center;
    display: block;
    margin: 0 5px;
    padding-top: 1px;
}

.reviews-radio-main label span{
	display: block;
    margin-bottom: 30px;
    padding-left: 20px;
}

.reviews-form{
	width: 100%
}

.reviews-form p{
	font-weight: bold;
}

.choosing-psychologist{
	width: 220px;
	margin: 0 auto 16px auto;
}

.reviews-form input, .reviews-form textarea{
	width: 100%;
}

.reviews-form input{
	margin-bottom: 10px;
}

.reviews-form textarea{
	border: 1px solid #9191B1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    letter-spacing: -0.02em;
    color: var(--body);
    padding: 8px 11px;
	height: 100px;
}

/*---end reviews page---*/

/*---contacts page---*/

.logo-fond{
	width: 100%;
}

.logo-fond img{
	width: 130px;
	height: auto;
	margin: 0 auto 20px;
}

.logo-fond h3{
	text-transform: uppercase;
}

/*---end contacts page---*/

/*---blog pages---*/

.blog-main .box-preview{
	padding-bottom: 70px;
}

.blog-main .box-preview .button-preview button{
	opacity: 100%;
}

.tip-of-blog .image-user-tip{
	width: 230px;
	height: 230px;
}

.categories-filter{
	text-align: center;
	max-width: 600px;
	margin: 10px auto;
}

.category-list {
	display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    flex-wrap: wrap;
}

.category-item {
	-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid #000;
    padding: 7px 15px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--body);
    transition: all 0.3s ease;
	cursor: pointer;
}

.category-item.active,
.category-item:hover  {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

/*---end blog pages---*/

/*---tab articles---*/

.article-form{
	text-align: center;
}

.article-form,
.article-form .user-row-item{
	display: block !important;
}

a.article-create-button,
a.category-create-button{
	padding: 5px 15px !important;
}

a.category-create-button{
	background-color: #FF915E !important;
	margin-right: 10px;
}

button.delete-button{
    cursor: pointer;
    border: none;
    background: none;
    color: #FF915E;
    font-size: 20px;
    margin-left: 10px !important;
}

.articles-forms input[type="text"],
.articles-forms input[type="textarea"],
.articles-forms textarea,
.articles-forms select{
	border: 2px solid #eee;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.articles-forms textarea{
	height: 300px;
	width: 100%;
}

.articles-forms select{
	min-width: 350px;
	height: 100px;
}

.articles-forms > div:nth-of-type(3) {
  position: relative;
}

.articles-forms > div:nth-of-type(3) {
  font-size: 0;
}
.articles-forms > div:nth-of-type(3) * {
  font-size: 16px;
}

.articles-forms > div:nth-of-type(3) br {
  display: none;
}

/* 3. Ставим label с checkbox и следующий label в строку */
.articles-forms > div:nth-of-type(3) label[for*="-clear_id"] {
  display: inline-block !important;
  align-items: center;
  margin: 0 -10px 0 10px;
}

.articles-forms > div:nth-of-type(3) label[for*="-clear_id"] + label {
  display: inline-block !important;
}

.articles-forms > div:nth-of-type(3) label.custom-file-upload-label{
	display: block !important;
	max-width: 130px;
	margin-top: 20px;
}

@media (max-width: 960px){
	.articles-forms select.form-control {
		width: 100%;
		min-width: 100%;
	}

	.search-input-filter{
		display: block !important;
	}

	.user-row-title{
		display: block !important;
		text-align: center;
		margin: 10px;
	}

	.user-row-title span{
		font-weight: bold;
	}

	.user-row{
		position: relative;
	}

	a.category-create-button{
		margin-right: 0;
		margin-bottom: 10px;
	}

	button.delete-button{
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/*---end tab articles---*/

/*---profile page---*/

.success-message span{
	color: #b7c68e;
}

.profile-content.content{
	margin-top: 100px;
	position: relative;
	padding-top: 110px;
}

.avatar-image-button{
	width: 150px;
	height: 150px;
	margin: 0 auto;
	position: absolute;
	top: -75px;
    left: 50%;
    margin-right: -50%;
    transform: translateX(-50%);
}

.view-profile-image{
	width: inherit;
	height: inherit;
	overflow: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid #fff;
}

.view-profile-image img{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;
    object-position: top;
}

.view-profile-image a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	text-align: center;
	box-sizing: border-box;
	color: #fff;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	margin: 5px;
	border-radius: inherit;
	opacity: 0;
	transition: all 0.3s ease;
}

.view-profile-image a:hover{
	opacity: 1;
}

label.add-file-label{
	margin: 10px 0;
}

.readonly-field{
	background-color: #F8F8FA;
	color: #a19f9f !important;
}

.profile-personal-data #id_username_helptext{
	display: none;
}

.profile-tabulation{
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
	flex-wrap: wrap;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.profile-personal-data .tab-link{
	white-space: nowrap;
}

.profile-personal-data .tab-link a{
	-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 1px solid #000;
    padding: 7px 15px;
    font-family: var(--font-family);
    font-size: 14px;
	line-height: 35px;
	color: var(--body);
	transition: all 0.3s ease;
}

.profile-personal-data .tab-link.active a, 
.profile-personal-data .tab-link a:hover{
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

	/*---modal-avatar---*/

.profile-avatar-modal.modal-body{
	padding: 60px 40px 20px !important;
}

.custom-file-input-widget label.clear-file{
	margin-bottom: 10px;
}

.profile-avatar-modal button.modal-content-button{
	margin: 10px 0;
	width: 100%;
}

.custom-file-input-widget .current-file{
	width: 150px;
	height: auto;
	margin: 0 auto;
	display: block;
}

.custom-file-input-widget .current-file img{
	width: 100%;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.custom-file-input-widget .clear-file,
.custom-file-input-widget .file-upload label{
	text-align: center;
	display: block;
}

#widget-chasti-zapitannya h2{
	display: none;
}

	/*---modal-avatar---*/

/*---moderator page---*/

.sort-filter{
	margin-top: 20px;
}

#consultations .sort-filter{
	margin-bottom: 40px;
}

.sort-filter .user-row{
	background-color: rgba(204, 204, 219, 0.25);
}

.user-row{
	background-color: rgba(204, 204, 219, 0.14);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 15px 25px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	transition: 0.3s ease;
	min-height: 85px;

}

.user-row:hover{
	background-color: rgba(204, 204, 219, 0.25);
}

.user-row-item{
	display: flex;
	flex: 1;
}

.user-row-approved,
.user-row-id,
.user-row-number,
.user-row-data-time,
.search-input-filter{
	flex: none;
}

.user-row-approved{
	width: 30px;
}

.user-row-approved #per-page,
.user-row-approved #consultation-per-page,
.user-row-approved select{
	min-width: 55px;
	border: 1px solid #9191B1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 171%;
    letter-spacing: -0.02em;
    color: var(--body);
    padding: 8px 4px;
	height: 40px;
	cursor: pointer;
}

.user-row-id{
	width: 0;
	padding-right: 40px;
}

.user-row-number{
	width: 80px;
	padding: 0 10px;
}

.user-row-number .radio-group{
	margin: 0 auto;
}

.user-row-number input[type="number"]{
	border: 1px solid #9191B1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 171%;
    letter-spacing: -0.02em;
    color: var(--body);
    padding: 8px 4px;
	width: 100%;
	height: 41px;
}

.user-row-last-first-name{
	width: 20%;
	flex-direction: column;
}

.user-row-last-first-name .user-row-user-type span{
	font-weight: normal;
}

.user-row-last-first-name > div{
	width: 100%;
}

.user-row-note-consultations{
	width: 20%;
	flex-direction: column;	
}

.user-row-note-consultations span{
	font-weight: normal;
}

.user-row-data-time{
	flex-direction: column;
	width: 150px;
}

.user-row-data-time input{
	border: 1px solid #9191B1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 171%;
    letter-spacing: -0.02em;
    color: var(--body);
    padding: 8px 4px;	
	margin: 0 auto;
	width: 120px;
	height: 41px;
}

.user-row-mobile{
	text-align: center;
	align-items: center;
	justify-content: center;
}

.user-row-date-joined-spec,
.user-row-number-spec{
	flex-direction: column;
}

.title-user-metrics{
	font-weight: bold;
}

.metrics-item{
	display: flex;
	justify-content: space-between;
}

.metrics-item span:first-child{
	text-align: right;
	margin-right: 20px;
}

.visiter-details-answers span{
	font-weight: bold;
}

.visiter-details-answers p{
	margin: 0;
}

#id_question_21{
	display: flex;
    justify-content: space-between;
}

#id_question_21 label{
	text-align: center;
    display: block !important;
    margin-bottom: 0px;
    padding-top: 1px;
}

#id_question_21 span{
	display: block;
    margin-bottom: 30px;
    padding-left: 20px;
}

@media (min-width: 860px){

	.visiter-details-answers{
		display: flex;
		margin-bottom: 20px;
	}

	.visiter-details-answers span{
		flex: 5;
		text-align: right;
		padding-right: 20px;
		border-right: 1px solid #ccc;
	}

	.visiter-details-answers p{
		flex: 5;
		text-align: left;
		padding-left: 20px;
	}
}

@media (max-width: 960px){ 
	.user-row-consultations,
	.user-row-number-spec,
	.user-row-date-joined-spec{
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.user-row-date-joined-spec,
	.user-row-mobile{
		margin-bottom: 10px;
	}
}

/* for plagin select2 */
select.select2-hidden-accessible {
    display: none !important;
}

.search-input-filter .select2-container,
.create-consultation-row-item .select2-container{
    width: 200px !important;
    margin: 0 auto;
}

.search-input-filter .select2-container--default .select2-selection--single,
.create-consultation-row-item .select2-container--default .select2-selection--single {
    border: 1px solid #9191B1;
    border-radius: 4px;
    height: 41px; 
    padding: 8px 4px; 
    background-color: #fff; 
}

.search-input-filter .select2-container--default .select2-selection--single .select2-selection__rendered,
.search-input-filter .select2-container--default .select2-selection--single .select2-selection__rendered span,
.create-consultation-row-item .select2-container--default .select2-selection--single .select2-selection__rendered,
.create-consultation-row-item .select2-container--default .select2-selection--single .select2-selection__rendered span {
    font-family: var(--font-family);
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--body);
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-input-filter .select2-container--default .select2-selection--single .select2-selection__placeholder,
.create-consultation-row-item .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--body);
}

.search-input-filter .select2-container--default .select2-selection--single .select2-selection__arrow,
.create-consultation-row-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 41px; 
    width: 20px; 
    right: 4px;
}

.search-input-filter .select2-container--default .select2-dropdown,
.create-consultation-row-item .select2-container--default .select2-dropdown {
    border: 1px solid #9191B1;
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--body);
}

.search-input-filter .select2-container--default .select2-results__option,
.search-input-filter .select2-container--default li.select2-results__option,
.create-consultation-row-item .select2-container--default .select2-results__option,
.create-consultation-row-item .select2-container--default li.select2-results__option{
    padding: 8px 4px;
	font-weight: 500 !important;
    font-size: 14px !important;
}

.search-input-filter .select2-container--default .select2-results__option--highlighted,
.create-consultation-row-item.select2-container--default .select2-results__option--highlighted {
    background-color: #f0f0f0;
    color: var(--body);
}

select.select2-error + .select2 .select2-selection,
.native-error {
    border: 1px solid var(--rose) !important;
    border-radius: 4px;
}

/* end for plagin select2 */

.user-row-data, .user-row-time{
	width: 100%;
}

.user-row-data span, .user-row-time span{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 95px;
	margin: 0 auto;
}

.user-row-time span{
	background-color: var(--rose);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
	color: #fff;
	height: 30px;
	margin-top: 5px;
}

.user-row-avatar-main{
	flex: none;
	padding: 0 10px;
}

.consultation-ditailes-head{
	background-color:rgba(204, 204, 219, 0.14);
	padding: 20px;
}

.user-ditailes-participant{
	margin-top: 20px;
}

.consultation-ditailes-head .user-ditailes-avatar{
	margin: auto;
}

.consultation-ditailes-head .user-ditailes-type{
	width: 100%;
	text-align: center;
}

.user-ditailes-for-opponent{
	display: block;
}

.user-ditailes-for-opponent span{
	color:rgba(0, 0, 0, 0.32);
}

.user-ditailes-for-opponent span a{
	color: inherit;
	transition: 0.3s ease;
}

.user-ditailes-for-opponent span a:hover{
	color: var(--rose);
	transition: 0.3s ease;
}

.phone-number-for-opponent span a:before{
	font-family: FontAwesome;
	content: '\f095';
	font-weight: 900;
	margin-right: 6px;
	color: inherit;
}

@media (min-width: 768px){

}

.user-row-avatar, 
.user-ditailes-avatar{
	overflow: hidden;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.user-row-avatar{
	width: 80px;
	height: 80px;
}

.user-ditailes-avatar{
	width: 120px;
	height: 120px;
}

.user-row-avatar img,
.user-ditailes-avatar img
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;
    object-position: top;
}

.user-row-last-first-name span{
	font-weight: bold;
}

.search-input-filter input{
	width: 100%;
	max-width: 140px;
	padding-right: 25px;
}

.user-row-num-consultation{
	width: 60px;
	text-align: center;
	border-left: 1px solid rgba(204, 204, 219, 0.35);
}

.user-row-num-consultation:first-child {
	border: none;
}

.user-row-num-consultation span{
	line-height: 2.5;
}

.user-row-button, .filter-row-button{
	justify-content: right;
}

.user-row-button a, .filter-row-button a{
	display: flex;
	justify-content: center;
	align-items: center;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
	color: #fff;
	height: 30px;
	transition: 0.3s ease;
	padding: 0 8px;
}

.user-row-button a{
	background: #B7C68E;
}

.filter-row-button a{
	background: #FF915E;
}

.user-row-button a:hover, .filter-row-button a:hover{
	-webkit-box-shadow: 1px 15px 40px 0 rgba(115, 140, 76, 0.37);
    -moz-box-shadow: 1px 15px 40px 0 rgba(115, 140, 76, 0.37);
    box-shadow: 1px 15px 40px 0 rgba(115, 140, 76, 0.37);
}

.user-row-button a:hover{
	background: #a7b581;
}

.filter-row-button a:hover{
	background:#f38a59;
}

.modal--3 .modal-content .user-details-left-column h4, 
.modal--3 .modal-content .user-details-right-column h4{
	background-color: rgba(204, 204, 219, 0.14);
	text-transform: uppercase;
	padding: 20px;
}

.user-details-row{
	margin-bottom: 10px;
	padding: 0 20px;
}

.user-details-row p{
	margin: 0;
}

.image-thumbnail-button{
	display: inline-block;
	box-shadow: 0 0 33px 0 rgba(225, 223, 221, 0.6);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	padding: 10px;	
}

.image-thumbnail-container{
	width: 175px;
	height: 125px;
	overflow: hidden;
	margin: 0 auto 10px auto;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.image-thumbnail-container .image-thumbnail{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

.image-thumbnail-container .image-thumbnail:hover{
	transform: scale(1.1); 
}

button.modal-content-button{
	margin: 20px auto;
	display: block;
}

.rotate-button-container{
	position: absolute;
	top: 0px;
	left: 50%;
    margin-right: -50%;
    transform: translateX(-50%);
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	background: #fff;
	padding: 35px 10px 10px 10px;
}

.rotatable-image {
    transition: transform 0.3s ease-in-out;
}

/* pagination */

.pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: sans-serif;
}

.pagination .page-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination .page-link,
.pagination .current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    background-color: rgba(204, 204, 219, 0.14);
    transition: background-color 0.2s;
    font-weight: normal;
}

.pagination .page-link:hover {
    background-color: rgba(204, 204, 219, 0.25);
}

.pagination .current-page {
    background-color: #B7C68E;
    color: #fff;
}

.pagination .page-link:first-child::before {
    content: '<';
    font-size: 16px;
}

.pagination .page-link:last-child::before {
    content: '>';
    font-size: 16px;
}

.pagination .page-link:first-child,
.pagination .page-link:last-child {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0; /* Скрыть текст, оставить только стрелку */
}

.pagination > span {
    margin-top: 4px;
    font-size: 14px;
    color: #666;
}

/* end pagination */

/* consultations */
.create-consultation-row{
	background-color: rgba(204, 204, 219, 0.25);
}

.create-consultation-row-item{
	flex-direction: column;
	flex: none;
}

.create-consultation-row-item:first-child,
.create-consultation-row-item .select2-container,
.search-input-filter .select2-container{
	margin-right: 10px;
}

.create-consultation-row-item input,
.create-consultation-row-item select{
	width: 100%;
	height: 40px;
}

.create-consultation-row-item label{
	margin: 0 0 15px 0 !important;
}

.user-row-button button{
	margin: 0;
}

.user-row-note-consultations div span{
	padding-left: 20px;
}

.user-row-note-consultations div span,
.user-row-num-consultations div span{
	position: relative;
}

.user-row-note-consultations div span:first-of-type::before,
.user-row-num-consultations div span:before{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	position: absolute;
}

.user-row-note-consultations div span:before{
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.user-row-num-consultations div span:before{
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}

.total_consultations span:before{
	background-color: #FF915E;
}

.past_consultations span:before{
	background-color: #B7C68E;
}

.canceled_consultations span:before{
	background-color: var(--rose);
}

.remainder_consultations span:before{
	background-color: #7A7BAD;
}

.row-position-depend.user-row-note-consultations{
	width: 100%;
}

@media (min-width: 960px){

	.custom-height-user-row{
		height: 110px;
	}

	.row-position-depend{
		position: absolute;
		top: 10px;
	}
}

.form-container.data-time-feild input{
	width: 100%;
}

.data-time-feild-modal{
	width: 100%;
}

.data-time-feild-modal .form-column{
	width: 300px;
	margin: 0 auto;
	text-align: center;
}

.consultation-status-display{
	background-color: rgba(204, 204, 219, 0.14);
	padding: 20px;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

.scheduled-time-modal .user-row-item{
	margin: 20px auto 0;
}

.participant-answers span{
	margin-top: 10px; 
	font-weight: bold;
	display: block;
}

.consultations-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
  
.consultations-buttons .button {
	margin: 0;
}

.confirmation-buttons{
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.confirmation-status-div{
	text-align: center;
}

span.confirmation-status{
	display: inline-block;
	margin: 10px auto 20px;
	padding: 5px 20px;
	width: auto;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	color: #fff;
}

.confirmation-status-div span.confirmation-status-wait{
	background-color: #7a7bad;
}

.confirmation-status-div span.confirmation-status-confirm{
	background-color: #b7c68e;
}

.confirmation-status-div span.confirmation-status-reject{
	background-color: var(--rose);
}

.confirmation-status-opponent span{
	display: inline-block;
	padding: 5px 20px;
	margin: 10px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.confirmation-status-opponent span.confirmation-status-wait{
	border: 1px solid #7a7bad;
}

.confirmation-status-opponent span.confirmation-status-confirm{
	border: 1px solid #b7c68e;
}

.confirmation-status-opponent span.confirmation-status-reject{
	border: 1px solid var(--rose);
}

.confirmation-buttons button{
	width: 130px;
	padding: 5px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border: 1px solid rgba(0, 0, 0, 0.32);
	background-color: unset;
	cursor: pointer;
	transition: 0.3s ease;
	margin: 0;
}

.confirmation-buttons button:hover{
	background-color: #fff;
}

.form-field-consultation{
	text-align: center;
}

/* for script show/hide profile-answers */

a.toggle-profile-answers,
a.toggle-review-response{
	display: block;
	width: 100%;
}

.profile-answers {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    max-width: 700px;
    margin: 10px auto;
    border-radius: 20px;
    background-color: #fff;
    text-align: left;
}

.profile-answers span{
	display: block;
    font-weight: bold;
	margin: 10px 20px 0;
}

.profile-answers p{
    display: inline-block;
	margin: 10px 20px !important;
}

.profile-answers a{
    text-align: center;
	width: 100%;
	display: block;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: var(--ff915e);
	transition: 0.3s ease;
	color: #fff;
	padding: 10px 0;
}

.profile-answers a:hover{
	background-color: var(--rose);
}

.review-response-form {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
	max-width: 400px;
	margin: 0 auto;
}

.review-response-form .textarea-response{
	width: 100%;
}

.review-response-form .block-for-button{
	margin-top: 10px;
}

.toggle-review-response, .collapse-review-response {
    color: var(--ff915e);
    text-decoration: none;
    cursor: pointer;
    margin: 10px 0;
    display: inline-block;
	transition: 0.3s ease;
}
.toggle-review-response:hover, .collapse-review-response:hover {
    color: #fbc7af;
}

/* end for script show/hide profile-answers */

.rejection-reason-input{
	padding: 10px;
	border: 1px solid #fff;
}

textarea.rejection-reason-input{
	border: 1px solid #9191B1;
}

/*
div.rejection-reason-input.field-error-visible{
	margin-top: 35px;
}
*/

.field-error-visible,
textarea.field-error-visible{
	border: 1px solid var(--rose);
	position: relative;
}
/*
.field-error-visible::after{
	position: absolute;
	content: 'Оберіть, будь ласка, варіант відповіді';
	left: 50%; 
    transform: translateX(-50%);
	top: -25px;
	color: var(--rose);
	font-family: var(--font-family);
	font-size: 14px;
}
*/

/* timer style */

.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(204, 204, 219, 0.14);
    padding: 25px 50px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
    width: fit-content;
    margin: 20px auto 50px auto;
}

.timer-button-container{
	display: flex;
	gap: 20px;
	justify-content: center;
    align-items: center;
}

.timer-display {
font-size: 2rem;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding: 10px 20px;
    background: #fff;
    min-width: 150px;
    margin-bottom: 30px;
	text-align: center;
	
}

.timer-button-container button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ff915e;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
	color: #fff;
	border: none;
}

.timer-button-container button:hover:not(:disabled) {
    transform: scale(1.1);
}

.timer-button-container button:disabled {
    cursor: default;
	border: 1px solid rgba(0, 0, 0, 0.32);
	color: #000;
	background: none;
}

.form-field-consultation.feedback-field {
    display: none;
}

.form-field-consultation.feedback-field.visible {
    display: block;
}

.complete-button {
    display: none;
}
.complete-button.visible {
    display: block;
}

.select2-results__option{
	padding: 0;
}

span.inactive-user{
	position: relative;
	cursor: help;
	display: block;
	color: #cfcccc;
}

span.inactive-user::after{
	content: 'Всі консультації проведені';
	position: absolute;
	top: -6px; 
	left: -6px;
	opacity: 0;
	width: calc(100% - 0px);
	height: calc(100% + 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
  	font-size: 12px;
	background-color: #fff;
	border: 1px solid #c3c1c1;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	color: #000;
	line-height: 18px;
	white-space: nowrap;
	padding: 2px 5px;
}

span.inactive-user:hover::after{
	opacity: 1;
}

.select2-results li:hover span,
.select2-results__option--highlighted span{
	color: #fff;
}

.select2-results li:hover span.inactive-user,
.select2-results__option--highlighted span.inactive-user{
	color: #e9e7e7;
}

/* end timer style */

@media (max-width: 960px) {
	.create-consultation-row,
	.sort-filter .user-row,
	.user-row-container .user-row{
	  flex-direction: column;
	  align-items: center;
	}

	.user-row-container .user-row-avatar{
		display: none;
	}

	.create-consultation-row-item,
	.sort-filter .user-row-item,
	.user-row-container .user-row-item {
		width: 100%;
	}

	.create-consultation-row-item:first-child, 
	.create-consultation-row-item .select2-container,
	.sort-filter .user-row-item select{
		margin: 0 auto;
		padding: 0;
	}

	.sort-filter .user-row-item .select2-container,
	.sort-filter .user-row-item input{
		margin: 0 auto 5px;
		display: block;
	}

	.sort-filter .user-row-item a.button,
	.user-row-container .user-row-item a.btn-modals,
	.user-row-container .user-row-item label.checkbox-label{
		margin: 10px auto;
	}

	.user-row-container .user-row-item .checkbox-span{
		padding: 0;
	}

	.create-consultation-row-item input,
	.user-row-container .user-row-number div{
		margin: 0 auto;
	}

	.user-row-container .user-row-num-consultations{
		display: flex;
		justify-content: center;
	}

	.user-row-container .user-row-number{
		width: 80px;
		margin-bottom: 10px;
	}

	.create-consultation-row-item input,
	.create-consultation-row-item .select2-container,
	.sort-filter .user-row-item .select2-container,
	.sort-filter .user-row-item input{
		width: 100% !important;
		max-width: 350px;
	}

	.create-consultation-row .user-row-button{
		margin: 10px;
	}

	.create-consultation-row label,
	.user-row-container .user-row-last-first-name,
	.user-row-container .user-row-status{
		text-align: center;
		margin: 10px 0 !important;
	}

	.user-row-container .user-row-status{
		display: block;
		width: 100%;
		max-width: 350px;
		background-color: #fff;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		border: 1px solid rgba(0, 0, 0, 0.62);
		padding: 10px;
	}

	.user-row-note-consultations{
		margin-bottom: 35px;
	}

	.user-row-inn{
		text-align: center;
		display: block;
	}

}
  
@media (max-width: 767px) {
	.consultations-buttons {
	  flex-direction: column;
	  align-items: center;
	}
}



/* end consultations */

@media (min-width: 860px){
	.user-details-left-right-column{
		display: flex;
	}

	.user-details-left-column, 
	.user-details-right-column{
		flex: 1;
	}

	.modal--3 .modal-content .user-details-left-column h4{
		-webkit-border-top-left-radius: 20px;
		-moz-border-radius-topleft: 20px;
		border-top-left-radius: 20px;
		border-right: 2px solid #fff;
	}

	.modal--3 .modal-content .user-details-right-column h4{
		-webkit-border-top-right-radius: 20px;
		-moz-border-radius-topright: 20px;
		border-top-right-radius: 20px;
	}
}

@media (max-width: 860px){
	.modal--3 .modal-content .user-details-left-column h4,
	.modal--3 .modal-content .user-details-right-column h4{
		-webkit-border-top-left-radius: 20px;
		-webkit-border-top-right-radius: 20px;
		-moz-border-radius-topleft: 20px;
		-moz-border-radius-topright: 20px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	.user-details-row p strong{
		line-height: 115%;
	}
}

/*---end moderator page---*/

/*---profile users page---*/

.questionare-image-button-profile{
	display: flex;
	align-items: center;
	width: 160px;
	height: 100px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	line-height: 0;
	overflow: hidden;
	position: relative;
}

.questionare-image-button-profile img,
.questionare-image-button-profile embed.peview-pdf{
	width: 100%;
}

a.peview-pdf-link{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

#change-password-form .block-for-button{
	margin-top: 20px;
	margin-bottom: 0;
}

.change-password-block-input{
	margin-top: 20px;
}

.change-password-block-input input{
	display: block;
	margin: 0 auto 5px;
}

.change-password-form-massages{
	text-align: center;
	max-width: 350px;
}

/*---profile users page---*/

/*---end profile page---*/

/*---end tip content area---*/

/*---footer---*/

.main-section-8{
	padding-top: 200px;
	margin-bottom: 200px;
}

.main-section-8 .section-content p{
	max-width: 500px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	margin: 55px auto 0 auto;
}

@media (max-width: 450px){
.main-section-8 .fon-2 {
    left: 20px;
	}
}

#footer{
	position: relative;
}

.footer-head{
	position: relative;
	top: 10px;
	width: 100%;
	height: auto;
}

.footer-body{
	background-color: #5F60A5;
}

#footer .content{
	min-height: 385px;
	position: relative;
	padding-top: 80px;
}

#footer .footer-logo{
	position: absolute;
	bottom: 0;
	right: -80px;
	z-index: 1;
}

#footer .links{
	display: flex;
	justify-content: space-between;
}

.columns{
	width: auto;
	margin: 0 auto 30px auto;
}

.columns a{
	display: block;
	color: #fff;
	font-weight: 500;
	margin-bottom: 20px;
	transition: color 0.3s;
}

.columns a:hover{
	color: #CCCCDB;
}

.copyright{
	position: absolute;
	bottom: 75px;
	left: 50%; 
    transform: translateX(-50%);
	width: 100%;
	padding: 0 20px;
	text-align: center;
}

.copyright p{
	color: #fff;
}

@media (max-width: 450px){
	#footer .links{
		display: block;
		text-align: center;
		position: relative;
		z-index: 2;
		bottom: 50px;
	}

	.copyright{
		bottom: 0;
	}
}

/*---end footer---*/

/*--- preloader ---*/

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.preloader.active {
    display: flex;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--rose);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*--- end preloader ---*/