body.modal-open {
    overflow: hidden;
}

.grey_bg{
	background: rgb(136 149 194 / 10%);
}

.grey_bg .title_section{
	font-size: 36px;
    line-height: 1.22em;
    text-align: center;
    color: #3049a1;
    font-weight: 700;
    margin-bottom: 50px;
    text-transform: uppercase;
	padding: 30px 0 0;
}

.block_section{
	background:#FFF;
	border-radius:15px;
	margin-bottom:20px;
	padding: 25px 40px;
}

.block_section .block_section_title{
	font-weight: 700;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 25px;
	color:#000;
	color:#3049a1;
	border-bottom:1px solid rgb(136 149 194 / 10%);
}

.block_section .section_data{
	display: flex;
	justify-content: space-between;
}

.block_section .doc_info{
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	align-items: center;
}

.block_section .section_data .photo_doc{
	background: #f3f4f9;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
	width:110px;
	max-width:100%;
}

.block_section .section_data .photo_doc img{
	width:100%;
	height:150px;
	border-radius:4px;
	object-fit:contain;
	margin-bottom:-5px;
}

.block_section .section_data .inform_doc .name_doc{
	font-size: 20px;
    line-height: 1.1em;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.block_section .section_data .inform_doc .post_doc{
	font-size: 16px;
	text-transform:uppercase;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 5px;
    color: #4c5e6e;
    display: block;
}

.block_section .section_data .inform_doc .exp{
	font-size: 18px;
	line-height: 1.2em;
	font-weight: 400;
	color: #4c5e6e;
    display: block;
}

.block_section .section_data .cost_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
}

.block_section .section_data .cost_info .consult_cost{
	display: block;
	font-size: 18px;
	margin-top: 5px;
    font-weight: 500;
	color: #4c5e6e;
}

.block_section .section_data .cost_info .cost_number{
	font-weight: 800;
    font-size: 20px;
}

.block_section .section_data .cost_info .free_for_declarants {
	font-weight: 700;
	font-size: 20px;
	color: #f16e1f;
}

.block_section .section_data .inform_doc .post_doc:last-child{
	margin-bottom:0;
}

.block_section .days_row{
	display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
	margin-bottom:30px;
}

.block_section .days_row a:hover,
.block_section .days_row a.selected{
	background: #3049a1;
	color:#fff;
	transition:0.3s;
}

.block_section .days_row a{
    padding: 20px 15px;
    border-radius: 10px;
    width: calc((100% / 7) - 10px);
    text-align: center;
	background: #f3f4f9;
    color: #000;
    text-decoration: none;
}

.block_section .days_row a b{
	display:block;
	margin-bottom:5px;
}

.block_section .selected_time {
	border-radius: 5px;
}

.block_section .time_title:before{
	content:'';
	display:block;
	width:45px;
	height:45px;
	background-image: url("data:image/svg+xml,%3Csvg _ngcontent-serverApp-c1327206358='' width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-serverApp-c1327206358='' d='M7.5 0C3.3645 0 0 3.3645 0 7.5C0 11.6355 3.3645 15 7.5 15C11.6355 15 15 11.6355 15 7.5C15 3.3645 11.6355 0 7.5 0ZM7.5 13.4041C4.24449 13.4041 1.59572 10.7557 1.59572 7.5C1.59572 4.24434 4.24449 1.59587 7.5 1.59587C10.7555 1.59587 13.4043 4.24434 13.4043 7.5C13.4043 10.7557 10.7555 13.4041 7.5 13.4041Z' fill='%233049a1'%3E%3C/path%3E%3Cpath _ngcontent-serverApp-c1327206358='' d='M11.4083 7.26845H8.03781V3.21586C8.03781 2.87482 7.76131 2.59832 7.42027 2.59832C7.07924 2.59832 6.80273 2.87482 6.80273 3.21586V7.88599C6.80273 8.22702 7.07924 8.50353 7.42027 8.50353H11.4083C11.7494 8.50353 12.0259 8.22702 12.0259 7.88599C12.0259 7.54495 11.7494 7.26845 11.4083 7.26845Z' fill='%233049a1'%3E%3C/path%3E%3C/svg%3E");
	margin-right:15px;
	border-radius: 5px;
    background-color: #f3f4f9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
	margin-top: 3px;
}

.block_section .time_title span{
	margin-left:5px;
	color:#4c5e6e;
	position:absolute;
	top: 35px;
    left: 55px;
}

.block_section .time_title span.must_select{
	color:#f16e1f;
}

.block_section .time_title{
    align-items: flex-start;
	font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
	color:#000;
	color:#3049a1;
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
	position:relative;
    margin-bottom: 40px;
}

.block_section .times_row{
	display:flex;
	flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
	display:none;
}

.block_section .times_row.active{
	display:flex;
}

.block_section .times_row a:hover,
.block_section .times_row a.selected{
	color:#FFF;
	transition:0.3s;
	background: #3049a1;
}

.block_section .times_row a{
	background: #f3f4f9;
	color:#3049a1;
	padding:10px 15px;
	text-decoration:none;
	font-weight: 500;
	border-radius:15px;
	
}


.block_section form {
	display: flex;
	flex-direction: column;
}

.block_section form .form-columns {
	display: flex;
	justify-content: space-between;
	gap: 35px;
}

.block_section form .form-column {
	width: 50%;
}

.block_section form .form-columns.birthday-gender {
	gap: 10px;
}

.block_section form .form-columns.birthday-gender .form-column.left {
	width: 30%;
}

.block_section form .form-columns.birthday-gender .form-column.right {
	width: 70%;
}

.block_section form .form-row.comment-textfield {
	width: calc(50% - 17.5px);
}

.block_section form .form-row label{
	font-size: 14px;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 10px;
    color: #4c5e6e;
    display: block;
}

.block_section form .form-row input{
	width:100%;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid rgb(136 149 194 / 30%);
	height:47px;
	margin-bottom: 15px !important;
}

.block_section form .form-row select{
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    display: block;
    line-height: 20px;
	height:47px;
    padding: 12px 30px 12px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    box-shadow: none;
    border-radius: 5px;
    border: 1px solid rgb(136 149 194 / 30%);
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.00065 3L9 1' stroke='%23969696' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
	font-size: 14px;
	line-height: 1em;
	color: rgb(117, 117, 117);
}

.block_section form .form-row textarea.open{
	display:block;
	margin-bottom: 10px;
}

.block_section form .form-row textarea{
	width:100%;
    padding: 15px 10px;
    border-radius: 5px;
    border: 1px solid rgb(136 149 194 / 30%);
	height:90px;
	resize: none;
	display:none;
}

.block_section form .form-row .show_comment{
	color: #3049a1;
	  text-decoration: none;
	  font-weight: 700;
	  font-size: 18px;
	  margin-bottom: 10px;
	  display: inline-flex;
	  gap: 10px;
	  align-items: baseline;
	  position: relative;
	  padding-right: 20px;
	  
}

.block_section form .form-row .show_comment::after{
	content:'»';
    font-size: 24px;
	position: absolute;
	right: 0;
	top: -4px;
	
	

  display: inline-block;
  width: 8px;
  height: 8px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.block_section form .form-row .show_comment:hover:after{
	transform: translateX(3px);
}

.block_section form .required::after {
	content: "*";
	color: red;
}

.block_section form .required-note {
	margin-top: 5px;

	font-size: 14px;
	font-weight: 400;
	color: #999999;
}

.form_booking_submit:hover{
	color:#f16e1f;
	background:#FFF;
	transition:0.3s;
}

.form_booking_submit{
	display: block;
    background-color: #f16e1f;
    border: 1px solid #f16e1f;
    border-radius: 10px;
    color: #fff;
	cursor: pointer;
    padding: 0 30px;
    line-height: 40px;
    font-weight: 500;
    transition: .2s;
    text-align: center;
    max-width: 100%;
    width: 300px;
    text-decoration: none;
    margin: 30px auto 50px;
	text-transform:uppercase;
	
}





.slots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 20px 0;
  gap: 20px;
}

.slots-wrapper {
  overflow: hidden;
  width: 100%;
}

.slots {
  display: flex;
  gap:10px;
      /* justify-content: center; */
  transition: transform 0.3s ease-in-out;
}

.slot div:first-child{
	font-weight: 700;
	margin-bottom:2px;
}

.slot.active,
.slot:hover{
	    background: #3049a1;
    color: #fff;
    transition: 0.3s;
}

.slot {
  	padding: 20px 15px;
    border-radius: 10px;
    min-width: calc((100% / 7) - 10px);
    width: calc((100% / 7) - 10px);
    text-align: center;
    background: #f3f4f9;
    color: #000;
    text-decoration: none;
}

.slot a {
  color: black;
  text-decoration: none;
  display: block;
}

.slot.active a,
.slot:hover a{
	color:#FFF;
}

.arrow {
    border: none;
    min-width: 36px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 10px;
    background: #3049a1;
    position: relative;
    top: unset;
    transform: unset;
    border-radius: 5px;
    background-position: center;
    background-size: 20px;
    background-repeat: no-repeat;
}

.arrow.prev{
	background-image:url(../img/book/left-arrow.png);
}

.arrow.next{
	background-image:url(../img/book/right-arrow.png);
}




/* modals */

.modal.hidden,
.modal-overlay.hidden {
	display: none;
}

.modal {
	position: relative;

	/* background: linear-gradient(135deg, #8b9dc3 0%, #6b7db3 30%, #5a6ba3 100%); */
	background-color: #6b7db3;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	max-width: 420px;
	width: 90%;
	padding: 24px;

	display: flex;
	flex-direction: column;
	align-items: center;

	z-index: 999;

	animation: slideIn 0.3s ease-out 0s 1;
}

.modal-close {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;

	padding: 5px;
	border-radius: 5px;

	font-size: 24px;
	color: #fff;

	transition: all 0.2s ease-out;
}

.modal-close:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.modal-button {
	display: block;
	padding: 0 30px;
	line-height: 40px;
  	text-align: center;
  	text-decoration: none;
  	color: #FFF;
  	background: #f16e1f;
  	border: 1px solid #f16e1f;
  	border-radius: 10px;
  	text-transform: uppercase;
	cursor: pointer;
}

.modal-button:hover {
	color: #f16e1f;
  	background: #FFF;
  	transition: 0.3s;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 998;

	display: flex;
	justify-content: center;
	align-items: center;

	background: rgba(0, 0, 0, 0.5);

	animation: fadeIn 0.3s ease-out 0s 1;
}







.form-submit-success .modal-icon {
	width: 64px;
	height: 64px;

	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 16px;
	margin-bottom: 40px;
 
	color: #fff;
	font-size: 32px;
}

.form-submit-success .modal-title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center
}

.form-submit-success .modal-subtitle {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 32px;
	line-height: 1.4;
	text-align: center;
}


.form-submit-success .modal-info-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	backdrop-filter: blur(10px);

	width: 100%;
}

.form-submit-success .doc-container {
	display: flex;
	gap: 10px;

	margin-bottom: 20px;
}

.form-submit-success .doc-container .doc-img {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
}


.form-submit-success .doc-container .doc-img img {
	width: 100%;
	height: 150px;
	border-radius: 4px;
	object-fit: contain;
	/* margin-top: -15px; */
}

.form-submit-success .doc-container .doc-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
}

.form-submit-success .doc-container .doc-info .doc-name {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	line-height: 150%;
}

.form-submit-success .doc-container .doc-info .doc-post,
.form-submit-success .doc-container .doc-info .doc-exp {
	font-size: 16px;
	opacity: 0.9;
	color: #fff;
}

.form-submit-success .date-time-container {
	background: rgba(255, 255, 255, 0.1);
	padding: 12px;
	border-radius: 8px;

	width: 100%;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-submit-success .date-time-container .date-time-label {
	font-size: 14px;
	text-transform: uppercase;
	opacity: 0.8;
	color: #fff;
}

.form-submit-success .date-time-container .date-time-value {
	font-size: 16px;
	color: #fff;
	font-weight: 600;
}





.form-submit-error .modal-icon {
	width: 64px;
	height: 64px;

	border-radius: 50%;
	background-color: rgba(231, 76, 60, 0.2);
	color: #e74c3c;
	font-size: 32px;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 16px;
	margin-bottom: 40px;

	animation: shake 0.3s ease-out 0.15s 1;
}

.form-submit-error .modal-title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center
}

.form-submit-error .modal-subtitle {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 32px;
	line-height: 1.4;
	text-align: center;
}

.form-submit-error .modal-info-container {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	backdrop-filter: blur(10px);

	width: 100%;
}

.form-submit-error .modal-info-container p,
.form-submit-error .modal-info-container ul {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	line-height: 1.4;
}

.form-submit-error .modal-info-container p {
	margin-bottom: 5px;
}

.form-submit-error .modal-info-container ul li {
	padding-left: 16px;
	position: relative;
}

.form-submit-error .modal-info-container ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #e67e22;
	font-weight: bold;
}

.form-submit-error .modal-info-container ul .phone {
	text-decoration: none;
	color: #fff;
	opacity: 0.9;
	font-weight: 700;
}







@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-50px) scale(0.9);
	}

	to {
		opacity: 1;
		tranform: translateY(0px) scale(1);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes shake {
	0% {
		transform: translateX(0);
	} 

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}

	100% {
		transform: translateX(0);
	}
}



	


@media screen and (max-width:930px){
	.block_section:not(.booking){
		padding:20px;
	}

	.block_section form .form-columns {
		flex-direction: column;
		gap: 0px;
	}

	.block_section form .form-column {
		width: 100%;
	}

	.block_section form .form-columns.birthday-gender .form-column.left,
	.block_section form .form-columns.birthday-gender .form-column.right {
		width: 100%;
	}
	
	.block_section form .form-row.comment-textfield {
		width: 100%;
		margin-top: 25px;
	}

	.block_section .time_title span{
		margin-left:60px;
		top: 30px;
    	left: unset;
	}

	.block_section .time_title{
		flex-wrap: wrap;    align-items: flex-start;
	}
	
	.slot {
		min-width: calc((100% / 4) - 10px);
		width: calc((100% / 4) - 10px);
			padding: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;  
	}

	.block_section .section_data{
		gap:10px;
	}

	.block_section .section_data .photo_doc{
			width: 140px;
	}

	.slots-container{
		gap:10px;
	}

	.grey_bg .title_section{
		margin-bottom:20px;
	}

	.block_section .times_row{
		gap:10px;
		row-gap:20px;
		        justify-content: center;
	}
}

@media screen and (max-width: 760px){
	.block_section .section_data {
		flex-direction: column;
		align-items: center;
	}

	.block_section .section_data .doc_info {
		max-width: max-content;
	}
}

@media screen and (max-width: 690px){
	.modal {
		margin-top: 40px;
	}

	.modal .modal-icon {
		margin-top: 0px;
		margin-bottom: 24px;
	}

	.modal .modal-subtitle {
		margin-bottom: 24px;
	}

	.form-submit-success .doc-container .doc-img img {
		height: 130px;
		min-width: 90px;
		width: unset;
		object-position: bottom;
	}

	

	.form-submit-success .doc-container .doc-info {
		gap: 8px;
	}

	.form-submit-success .doc-container .doc-info .doc-name {
		line-height: 125%;
		font-size: 16px;
	}

	.form-submit-success .doc-container .doc-info .doc-post, 
	.form-submit-success .doc-container .doc-info .doc-exp {
		font-size: 14px;
	}

	.form-submit-success .modal-info-container .date-time-container .date-time-label {
		line-height: 125%;
	}

	.form-submit-success .modal-info-container .date-time-container .date-time-value {
		line-height: 125%;
		font-size: 14px;
	}

	.form-submit-success .modal-info-container .date-time-container .separator {
		display: none;
	}


	.form-submit-error .modal-info-container p,
	.form-submit-error .modal-info-container ul {
		font-size: 14px;
	}
}

@media screen and (max-width:630px){
	.slot {
		min-width: calc((100% / 2) - 10px);
		width: calc((100% / 2) - 10px);
			padding: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;  
	}
}