/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.focusCard-list{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
  list-style:none;
  width:100%;
}

.focusCard{
  display:block;
  position:relative;
  border-radius:4px;
  cursor:pointer;
  z-index:11;
}


.focusCard::before{
  content: "";
  position:absolute;
  left:-7px;
  top:-7px;
  width: 35%;
  height: 35%;
  border-radius:5px;
  border-left:var(--6px) solid #4caf50;
  border-top:var(--6px) solid #4caf50;
  z-index:-1;
}

.focusCard::after{
  content: "";
  position:absolute;
  right: -7px;
  bottom: -7px;
  width: 35%;
  height: 35%;
  border-radius:5px;
  border-right:var(--6px) solid #4caf50;
  border-bottom:var(--6px) solid #4caf50;
  z-index:-1;
}


.focusCard:hover:before, .focusCard:hover:after{
  border:none;
}

.focusCard:hover{
/*  box-shadow: 7px 6px 20px 7px rgba(0,0,0,0.27); */
/*  box-shadow: 7px 7px 20px 10px #e0e0e0; */
  box-shadow: 3px 3px 6px 8px #f1f1f1;
}

.iconElement-wrapper, .textElement-wrapper{ /* дополнение к card; задаёт ширину и отступ */
  width:var(--285px);
  height:var(--285px);
  margin:var(--25px);
}

.showcaseElement-wrapper{
  padding:var(--30px);
  width:var(--360px);
}

.iconElement-image-wrapper{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
}

.iconElement-text-wrapper{
  display:block;
  text-align:center;
  font-size:22px;
}

.iconElement-text-wrapper, .textElement-content{
  padding:0 var(--20px);
}

.iconElement-text, .textElement-text{
  display:inline-block;
  text-align: center;
  color:var(--blackColor);
  text-decoration:none;
  font-family:Ubuntu-Regular;
  font-size:22px;
}

.iconElement-content{
  width:100%;
  height:100%;
  display:block;
}

.textElement-content{
  width:100%;
  height:100%;
  display:flex;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */	
  justify-content:center;
  align-items:center;
  text-decoration:none;
}

.showcaseElement-content{
  width:100%;
  display:block;
  text-decoration:none;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.page-list{
  display:flex;
/*  justify-content:flex-start; */
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
  list-style:none;
  width:100%;
}

.page, .pageForm{
  position: relative; /* Добавляем позиционирование, чтобы псевдоэлемент наложился на главный элемент */
  box-shadow: 3px 3px 9px 3px rgba(0, 0, 0, 0.04);
  border-radius:4px;
  cursor: pointer;
  color:black;
  background-color:white;
}

.page::after, .pageForm::after{
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  height:calc(100% + 4px);
  width:calc(100% + 4px);
  background: linear-gradient(130deg, rgba(216,245,224,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
/*  background: linear-gradient(to right, #d8f5e0, #ffffff); */
  border-radius:4px;
  z-index:-1;
}

.page:hover, .pageForm:hover{
  box-shadow: 8px 8px 20px 3px rgba(0,0,0,0.07);
}

.paymentDetails-page-wrapper{
 width:100%;
 margin-top:40px;
 padding:35px 25px;
}

.paymentDetails-page-wrapper:first-child{
 margin-top:0px;
}


.paymentDetails-element-wrapper{
  margin-top:20px;
}

.paymentDetails-header, .partnerBanks-header{
  display:inline-block;
  line-height: 1.4;
  text-align: left;
  color:var(--blackColor);
  text-decoration:none;
  font-size:24px;
  font-family:Ubuntu-Regular;
}

.paymentDetails-text{
  display:inline-block;
  line-height: 1.4;
  text-align: left;
  color:var(--blackColor);
  text-decoration:none;
  font-size:20px;
}

.copyButton{
  width:25px;
  height:25px;
}

.partnerBanks-page-wrapper{
  margin:20px;
  padding:35px;
}


.companyElement-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-direction:column;
}


.companyElement-info-wrapper{
  display:block;
  width:100%;
}

.companyElement-image-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  height:220px;
  width:100%;
}

.companyElement-image{
  max-width:100%;
}


.companyElement-button-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.companyElement-button{
  padding: var(--15px) var(--105px);
  font-size: var(--16px);
  font-family: Ubuntu-Regular;
}

.showcaseElement-button{
  width:100%;
  padding: var(--15px) 0;
  font-size: var(--16px);
  font-family: Ubuntu-Regular;
}


.infoElement-wrapper{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.medal{

}

.medal-image{
  border-radius:50%;
/*  box-shadow: 8px 8px 25px 0px rgba(0,0,0,0.16); */
  box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.16);
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.photo-list{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
  list-style:none;
  width:100%;
}

.photo{
  border-radius:var(--defaultBorderRadius); /* нужно для скругление тени */
  width:295px;
  margin:10px;
}

.photo:hover{
  box-shadow: 6px 6px 4.5px 0px #e0e0e0;
}

.noShadow, .noShadow:hover{
  box-shadow: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.navigation-list-wrapper{
  position:relative;
  margin:0 auto;
  width:100%;	
}

.navigation-content{
  display:none;
  opacity: 0;
  transition: all 0.5s ease;
  width:100%;
}

.navigation-list{
  position:relative;
  display:flex;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */	
  justify-content:space-between;
  align-items:center;
  list-style:none;
}

.navigation-list:after{ /* grey line */
  position:absolute;
  content:'';
  top:100%;
  width:100%;
  height:1.5px;
  background-color:var(--greyColorLines);
  z-index:4;
}

.navigation-wrapper, .navigation-wrapper-100px{
  display:flex;
  justify-content:center;
  align-items:center;
  line-height: 1.4;
  color:var(--blackColor);
  text-decoration:none;
  font-size:24px;
  font-family:Ubuntu-Light;
  padding:15px 40px;
}


.navigation{
  cursor:pointer;
}

.activeNavigation{
 font-family: Ubuntu-Regular;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.item-list{

  width:100%;
}

.item{
  position:relative;
  display:block;
  width:100%;
  margin-top:1px;
}

.item::after{
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--greyColorLines);
  width: 100%;
  height: 1px;
  cursor: auto;
}

.static{
  position:relative;
  display:block;
  width:100%;
  margin-top:1px;

}

.static:last-child::after{
  display:none;
}


.staticContent-wrapper{
  display:block;
  padding: var(--25px) var(--10px);
}




.dynamicContent-wrapper{
  display:block;
}

.dynamicContent-tab-wrapper{
  display:flex;
/*  flex-direction: column; */
  justify-content:space-between; 
  align-items:flex-start;
  cursor:pointer;
  padding: 16px 10px;
}

.dynamicContent-tab-button{
  margin-top:7px; 
}

.dynamicContent-data-wrapper{
  display:none;
  padding:0 25px 25px 25px;
/*  padding:10px 15px 0 15px; */
}

.dynamicContent-data-title, .staticContent-data-title{
  display:inline-block;
  line-height: 1.4;
  text-align: left;
  color:var(--blackColor);
  text-decoration:none;
  font-size:24px;
  font-family:Ubuntu-Regular;
}

.districtCenters-title{
  display:inline-block;
  line-height: 1.4;
  text-align: left;
  color:var(--blackColor);
  text-decoration:none;
  font-size:30px;
  font-family:Ubuntu-Regular;
  margin-top:45px;
}


.filter-title{
  display:inline-block;
  line-height: 1.4;
  text-align: left;
  color:var(--blackColor);
  text-decoration:none;
  font-size:24px;
  font-family:Ubuntu-Light;

}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.company-list-wrapper, .companyPerformance-list-wrapper{
  max-width:1130px;
}

.householdNonHouseholdConsumers-list-wrapper{
  max-width:885px;
}

.districtServiceCenters-list-wrapper{
  max-width:450px;
}

.regularInfo-list-wrapper{
  max-width:800px;
}

.electronicDocumentManagment-list-wrapper{
 max-width:800px;
}

.payment-list-wrapper{
 max-width:700px;
}

.greenTariff-list-wrapper{
  max-width:600px;
}

.companyAwards-list-wrapper{
 max-width:500px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.aboutUs-list, .supplyElectricalEnergy-list, .supplyGus-list, .infoForShareAndStakeHolders-list, .population-list, .contacts-list, .business-list, .information-list, .mediaCenter-list, .gallery-list{ /* дополнение к card-list-element */
  margin-top:25px;
}

.vacancies-list{
/*  margin-top:20px; */
}


.supplyGus-list-element{
  margin:25px;
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.pagination-list{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */
  list-style:none;
  width:100%;
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
/*  text-decoration:underline; */
/*  text-underline-offset:var(--4px); */
/*  text-decoration-thickness: 3px; */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.dot-list{
  list-style-type:disc;
}

.m4el{
  margin:var(--15px);
}



.dynamicSize{
  width:auto;
  height:auto;
  margin:0;
}




/* ############## */

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width: 769px){ /* (если страницу открыли на устройстве с дисплеем, ширина которого находиться в диапазоне от 0px до 769px, то должны выполниться указанные правила) */
 .focusCard:hover{
   box-shadow: none;
 }


 .focusCard::before, .focusCard:hover:before{
   border-radius:3px;
   border-left:3.5px solid #4caf50;
   border-top:3.5px solid #4caf50;
 }

 .focusCard::after, .focusCard:hover:after{
   border-radius:3px;
   border-right:3.5px solid #4caf50;
   border-bottom:3.5px solid #4caf50;
 }

 .partnerBanks-page-wrapper{
   margin:15px;
   padding:30px;
 }


 .paymentDetails-page-wrapper{
   width:95%;
   margin-top:20px;
   padding:30px 20px;
 }

 .paymentDetails-element-wrapper{
   margin-top:15px;
 }

 .paymentDetails-header, .partnerBanks-header{
   font-size:14px;
 }

 .paymentDetails-text{
   font-size:12px;
   line-height: 1.5;
 }

 .copyButton{
   width:13px;
   height:13px;
 }


 .showcaseElement-wrapper{
   padding:var(--25px);
   width:320px;
 }


 .iconElement-wrapper, .textElement-wrapper{ /* дополнение к card; задаёт ширину и отступ */
   width:155px;
   height:155px;
   margin:15px;
 }

 .iconElement-text-wrapper, .textElement-content{
   padding:0 var(--5px);
 }

 .iconElement-text, .textElement-text{
   font-size:16px;
 }

 .pageForm{
   box-shadow: none;
 }

 .pageForm::after{
   display:none;
 }

 .pageForm:hover{
   box-shadow: none;
 }

 .householdNonHouseholdConsumers-list-wrapper, .regularInfo-list-wrapper{
   width:100%;
 }

 .payment-list-wrapper{
   width:95%;
 }

 .electronicDocumentManagment-list-wrapper{
   width:90%;
 }


 .greenTariff-list-wrapper{
   width:80%;
 }

 .companyAwards-list-wrapper{
   width:70%;
 }

 .districtServiceCenters-list-wrapper{
   width:60%;
 }

 .navigation-list{
   display:flex;
   flex-wrap:wrap; /* следующие элементы которым не хватает ширины родительского блока(этого) перенесутся на следующую строку */	
   justify-content:space-between;
   align-items:center;
   width:100%;
/*   background-color:red; */
 }

 .navigation-wrapper{ /* titles in nav list*/
/*   font-size:var(--21px); = 18px */
/*    font-size:13px; */
   font-size:16px;
   padding:10px 15px;
/*  padding:15px 40px; */
/*   background-color:grey; */
 }

 .navigation-wrapper-100px{ /* titles in nav list*/
   font-size:16px;
   width:110px;
   text-align:center;
   padding:10px 0px;
   cursor:pointer;
 }



 .staticContent-wrapper{
   padding: var(--15px) var(--10px);
 }

 .dynamicContent-tab-wrapper {
   padding: var(--15px) var(--10px);
 }

 .dynamicContent-data-wrapper {
   display: none;
   padding: 0 var(--15px) var(--20px) var(--15px);
 }

 .dynamicContent-data-title, .staticContent-data-title, .filter-title{
   font-size:var(--21px); /* = 18px */
/*   background-color:tomato; */
 }

 .districtCenters-title:first-child{
 }

 .districtCenters-title{
  font-size:22px;
  margin-top:30px;
 }



 .photo{
   width:175px;
   margin:5px;
 }

 .photo:hover{
   box-shadow: none;
 }


}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ############## */