.header_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 26px 20px 24px;
    max-width: 1490px;
    margin: 0 auto;
}

.bg_green_blue_first_container{
    overflow: hidden;
}
.bg_green_blue_second_container{
    overflow: hidden;
}

.bg_green_blue_filter_first {
    position: absolute;
    top: 6%;
    left: -8%;
    z-index: -2;
    transform: rotate(-10.712deg); 
    fill: var(--Main-gradient, linear-gradient(260deg, #00F499 45.44%, #11B7EF 103.88%));
    filter: blur(30px);
}

.bg_green_blue_filter_second {
    position: absolute;
    bottom: 8%;
    right: 9%;
    z-index: -2;
    transform: rotate(-10.712deg); 
    fill: var(--Main-gradient, linear-gradient(260deg, #00F499 45.44%, #11B7EF 103.88%));
    filter: blur(30px);
}


.nav__logo_and_portal_button_container{
	display: flex;
    align-items: center;
    gap: 32px;
}

.phone-area_and_enter-area_container{
	display: flex;
	gap: 36px;
	align-items: center;
}

.enter-area button.header__exit-button.high,
.enter-area button.header__login-button.high

{

	font-size: 18px;
	font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}



.portal_button a {
    color: var(--Main, #2D2A26);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.phone-area a{
    color: var(--Main, #2D2A26);

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 4px;
}

.phone-area a > svg {
    transform: translateY(1.6px);
}

.animated-icon1, .animated-icon2, .animated-icon3 {
    width: 30px;
    height: 10px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-icon2 span {
   background: #000;
}

.animated-icon2 span:nth-child(1) {
    top: 0px;
}

.animated-icon2.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
    top: 6px;
}

.animated-icon2.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}

.animated-icon2 span:nth-child(4) {
    top: 12px;
}

div.menu-col.d-flex.scrollable{
    position: absolute;
}


.row_container{
    max-width: 1490px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}


.username-container{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
    justify-content: space-between;
}

.username-block{
    display: flex;
    align-items: center;
    gap: 16px;
}

.usergroup-block{
   
    font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
    font-weight: 500;
    line-height: 140%;

}

.useredit-block a{
    display: flex;
    gap: 8px;
	align-items: center;
    color: var(--Main, #2D2A26);

    font-size: clamp(1rem, 0.792rem + 0.28vw, 1.125rem);
    font-weight: 400;
    line-height: normal;
}

.useredit-block a svg {
    min-width: 24px;
}

.usereditbanner-block .form-group_button--default-community {
	margin-top: 20px;
}

.usereditbanner-block{
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: url(/upload/gotov_img.png) -201% -12px / 130% no-repeat, linear-gradient(89deg, #D1F3FF 0%, #F278C1 100%);								
    padding: 80px 64px;
    z-index: 2;
    margin-bottom: 50px;
    margin-top: 32px;
}

.usereditbanner-block p{
    /* H1 */
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
	position: relative;
	z-index: 2;
}

.usereditbanner-block p a{
    color:white;
}

.usereditbanner-block img {
    position: absolute; /* Устанавливает абсолютное позиционирование */
    top: -7vh;
    left: 60%;
    z-index: 0; /* Устанавливает более низкий уровень z-index, чтобы изображение было под текстом и ссылкой */
    min-width: 1566px;
    min-height: 388px;
    object-fit: contain;
 }

.edit-volunteerform {
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* Убирает подчеркивание ссылки */
    flex-direction: column;
  }
  
  .edit-volunteerform svg {
    vertical-align: middle; /* Выравнивание SVG по вертикали с текстом */
  }






  .fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px 10px 10px 10px;
    right: 24px;
    top: 25px;
}



.fancybox-close-small {
    background: 0 0;
    border: 0;
    border-radius: 0;
    color: #ccc;
    cursor: pointer;
    opacity: .8;
    padding: 8px;
    position: absolute;
    right: -12px;
    top: -44px;
    z-index: 401;
    color: black !important;
}


.fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 10px 10px 10px 10px;
    right: 24px;
    top: 40px;
}


.fancybox-content {
    /* background: #fff;
    display: inline-block;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch; */
    padding: 40px 32px 32px 32px;
    /* vertical-align: middle;
    position: relative;
    text-align: left;
    vertical-align: middle;
    border-radius: 16px; */
}



.popup-title{
	text-align: center;
    margin-bottom: 27px;
    font-size: 32px;
    font-weight: 500;
}






footer{
    position: relative;
    bottom: 0;
    width: 100%;
    background: var(--Main, #2D2A26);
    /*margin-top: 50px;*/
}


div.footer-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 39px;
    max-width: 1490px;
    margin: 0 auto;
}

.bottom-nav_content {
    gap: clamp(1.25rem, -4.271rem + 7.36vw, 4.563rem);
}

.bottom-nav_content a {
    color: #FFF;
    font-size: clamp(1rem, 0.792rem + 0.28vw, 1.125rem);
    font-style: normal;
    font-weight: 500;
}

.copyright-wrap_container{
    /* padding: 0 39px; */
}

.copyright-wrap_container div.copyright-wrap{
    color: var(--Style, #FFF);
    text-align: right;

    /* button */
    font-size: clamp(1rem, 0.792rem + 0.28vw, 1.125rem);
    font-style: normal;
    font-weight: 500;
	flex-direction: column;
}

.artis p a{
    color: var(--Style, #FFF);

    /* button */
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

.artis p a:hover{
    text-decoration: underline;
}

@media (max-height: 700px){
    .popup-cancel-visit.fancybox-content{
        vertical-align: top;
    }
}



@media (max-width: 1296px){


    div.footer-row {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }
    
    .copyright-wrap_container div.copyright-wrap {
        display: flex;
        justify-content: space-between;
    }
}

@media (max-width: 1096px){
    .usereditbanner-block img {
        top: 9vh;
        left: 0%;
    }
}



@media (max-width: 978px){

    .username-container{
        margin: 16px 0;
    }

    .useredit-block a.edit span{
        display: none;
    }

    .navbar-toggler {
        display: block;
        z-index: 100;
    }

    .bottom-nav_content {
        align-items: flex-start;
        flex-direction: column;
    }

    div.footer-row {
        flex-direction: row;
        align-items: center;
		flex-wrap: wrap;
    }

    .copyright-wrap_container div.copyright-wrap {
        flex-direction: column;
    }
}

@media (max-width: 874px){
    .phone-area {
        display: none;
    }
	.phone-mobile {display: block; flex: 1 0 100%;}
	.phone-mobile > a {color: #fff;  gap: 4px; display: flex;} 
}

@media (max-width: 720px){
    div.footer-row {
        flex-direction: column;
        align-items: center;
		
        /* gap: 20px; */
    }
    
    .bottom-nav_content {
        align-items: center;
        text-align: center;
        /* flex-direction: column; */
    }

    .copyright-wrap_container div.copyright-wrap {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }

    .copyright-wrap .copyright-text{
        text-align: left;
    }
    
    .artis{
        text-align: right;
    }

    .username-container{
        flex-direction: column;
        align-items: flex-start;
    }

    

}

@media (min-width: 669px){
    .enter-area button.header__exit-button.low{
        display: none;
    }

    .enter-area button.header__login-button.low{
        display: none;
    }
}

@media (max-width: 668px){
    .enter-area button.header__exit-button.high{
        display: none;
    }


    .enter-area button.header__login-button.high{
        display: none;
    }

    .enter-area{
        height: 32px;
    }
}

@media (min-width: 557px){
    button.navbar-toggler.second-button{
        display: none;
    }

    div.menu-col.d-flex.scrollable{
       display: none;
    }
}

@media (max-width: 556px){

    .portal_button{
        display: none;
    }

    .menu-col.d-flex.scrollable{
        width: 100%;
        left: 0;
    }

    .header_auth.d-flex.align-items-center{
        display: none;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100vh;
        padding: 40px;
        background: var(--Main, #2D2A26); 
        margin-top: 43px;
    }

    .main-menu.d-flex > .nav__list.nav__list--header li{
        margin-bottom: 24px;
    }

    .usereditbanner-block {
        padding: 53px 40px;
		background: url(/upload/gotov_img.png) 19% 15% / cover no-repeat, linear-gradient(89deg, #D1F3FF 0%, #F278C1 100%);
    }
	.usereditbanner-block .last_form {    display: block;}
	.usereditbanner-block .form-group .btn--save { padding: 16px 12px;}
	.usereditbanner-block .empty-label {line-height: 1;    margin-bottom: 0px;}
	
	
    .usereditbanner-block img {
        top: 4vh;
        left: -88%;
    }

    .usereditbanner-block p{
        font-size: 20px;
    }

    .profile-card_name{
        font-size: 14px;
    }

    .change_profile_and_community_container{

    }

    .usergroup-block{
        /* H2 */
        color: rgb(154, 154, 154);
        font-size: 12px;
    }

    .fancybox-slide--html .fancybox-close-small{
        top: 10px;
        right: 10px;
    }

}

@media (max-width: 485px){

    .bottom-nav_content a{
        font-size: 14px;
    }

    .copyright-wrap_container div.copyright-wrap {
        flex-direction: column;
        align-items: center;
    }

    .copyright-wrap .copyright-text{
        text-align: center;
        font-size: 14px;
    }

    .artis{
        text-align: center;
        font-size: 14px;
    }

    .artis p a{
        font-size: 14px;
    }
}


.report-name {display: inline-flex; align-items: center; gap: 3px;}

.active-names .report-name img {transform: rotate(-180deg);}

.show-additional-list span {cursor: pointer;}
.show-additional-list span:hover {text-decoration: underline;}
.result--green {color: green;}
.payment-row {display: flex;gap: 20px; flex-wrap: wrap;}
.payment-column {
	padding: 24px;
	flex: 0 0 48%;
	border-radius: 16px;
	background-color: rgba(245, 245, 245, 1);
}

.payment-column h3 {font-size: 14px; font-weight: 600; margin-bottom: 14px;}
.payment-form button {height: 42px; font-size: 14px; flex: 0 0 165px;}
    
    
.payment-form .result--green {color: green;flex: 1 0 100%;}
    
 table.table.report-table tbody tr .payment-column th, table.table.report-table tbody tr .payment-column td  {padding: 0 10px 5px 0; font-size: 12px;}
.payment-form .form-control {padding: 12px 24px; height: 42px;}
   
.payment-column .payment-form {
	display: flex;
	column-gap: 16px;
	flex-wrap: wrap;
    align-items: center;
}

.payment-column .form-group {flex: 1 0 30%;  margin-bottom: 24px;}

.control-label, table.table.report-table tbody tr .history-list th {font-size: 12px; margin-bottom: 8px;}

.form-group--share-message	{
	border-radius: 16px;
	padding: 18px;
	backdrop-filter: blur(30px);
	background: rgba(255, 255, 255, 0.4);
	border: 2px solid #fff;
	padding-left: 58px;
}


@media (min-width: 1231px) {
    .d-flex--flex-end {  align-items: flex-end;}
}

.form-group--share-message:before {
	background: url(./img/e-mark.svg) center center no-repeat;
	width: 24px;
	height: 24px;
	display: block;
	content: "";
	top:18px; 
	left:18px;
	position: absolute;
}

.share-active .form-group--datetimeinput, .share-active .form-group--ufContactsVisitAdress {
	position: unset;
}


@media (max-width: 767px) {
	.payment-column .payment-form {
		display: block;
		margin-bottom: 24px;
	}
	.referal-wrapper {position: relative; white-space: nowrap;}
	.form-group .share-wrapper {position: unset}
	.form-group--share-message .share-menu {left: 0;right: 0;}        
	.payment-form button {width:  100%;}
	.payment-row { flex-direction: column;}
	.payment-column, .export-excel { width: calc(100vw - 100px);}
	.share-wrapper .share-btn {margin-top: 0;}
}


.toggle-head {cursor: pointer; display: inline-flex; align-items: center; gap: 3px;}
.toggle-head img {margin-top: 3px;}
.toggle-head.closed img {transform: rotate(-180deg);}

.report-table .final { font-weight: 600;}
.show-additional-list span img {margin-top: 3px;}
.show-additional-list:not(.closed) span img	{transform: rotate(-180deg);}
	
.banner	#date-filtr-report {display: flex; gap: 24px; width: 100%; flex-wrap: wrap;}
.banner	#date-filtr-report .form-group {flex: 1 0; margin-bottom: 0;}
.banner #date-filtr-report .form-group > .form-control {height: 100%; background: #fff url(./img/calendar-date.svg) 94% center no-repeat;}
.banner.finished-visit-report {background: #E2DCFC; padding: 40px 39px;}
.banner.finished-visit-report .banner-title {font-size: 24px;}
.date-filtr-message {
	order: 3;
    width: 100%;
    flex: 1 0 auto;
	font-weight: 500;
    font-size: 24px;
}
.have-finished_visits .banner-action_slogan {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.active-volounteer.have-finished_visits {margin-bottom:0;}
	.banner.finished-visit-report {margin-top:0;}
	.banner.finished-visit-report {padding: 49px 32px;}
	.have-finished_visits .banner-action_slogan, .banner.finished-visit-report .banner-title, .date-filtr-message {font-size: 16px;}
	.banner-container {flex-direction: column;}
	
}

@media (max-width: 556px) {
	.banner #date-filtr-report {flex-direction: row; gap: 8px;}
	.banner.active-volounteer, .banner.finished-visit-report {padding: 22px 16px;}
	.banner #date-filtr-report .form-group > .form-control {padding: 11px; font-size: 12px; background-size: 32px 16px;background-position: right center;}
	#date-filtr-report .btn-default { padding: 12px; font-size: 12px; height: 40px; }
	.date-filtr.high, .date-filtr.high .date { width: 100%;}
	.popup-cancel-visit { padding: 40px 18px 32px 20px;}
	.form-group--share-message { padding-left: 35px;}
	.form-group--share-message:before { width: 20px;height: 20px; left: 8px; background-size: cover;}  
	body .referal-block-title {font-size: 24px;}
}

.banner.active-volounteer.have-finished_visits {
	background: url(./img/letters.png) bottom right no-repeat, linear-gradient(45.00deg, rgb(216, 255, 243) 0%, rgb(17, 183, 239) 100%);
}

.labelinput-multiple {font-size: 16px; font-weight: 500; margin-bottom: 16px; display: block;}
.form-group--upload-multiple .upload-dropzone { border: 2px dashed rgb(85, 85, 85); border: 2px dashed #EBEBEB;}
.upload-label label#ufVisitReportFile-error {bottom: -35px;}
.btn-update > img {max-width: 17px;}
.action-btns {display: inline-flex; gap: 8px; position: relative; align-items: center;}
.action-btns .resultmessage.result--green {    
	position: absolute;
    white-space: nowrap;
    bottom: 8px;
    left: 0;
} 

.delete-payment > img {transform: rotate(45deg);}

.referal-block-title {font-weight: 500; text-transform: uppercase;font-size: 28px;    margin-bottom: 18px;}
.referal-block p { margin-bottom: 8px; }