/* Start:/local/templates/time/assets/css/personal.css?175440579264669*/
.getMoreBlock {
    margin-top: 20px;
}
.howItWorksNone {
    display: none;
    padding-left: 6px;
    padding-right: 6px;
}
.howItWorksNone {
    width: 100%;
    height: auto;
}
.howItWorksNoneTwin {
    display: none;
    padding-left: 6px;
    padding-right: 6px;
}
.howItWorksNoneTwin .swiper-slide{
    background: #000000;
}
#black {
    background: #000000;
}
.swiperWhiteBlock {
    height: 155px;
    width: 80%;
    background: #FFFFFF;
    margin: 23px auto 0;
}
.howItWorksNoneTwin .swiper-pagination .swiper-pagination-bullet{
    background-color: #ffffff;
}

.firstPage {
    margin: 0 auto;
}
.howItWorksNone h4{
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
    padding-top: 5px;
    padding-left: 20px;
}
.howItWorksNone h3{
    padding-top: 10px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    line-height: 14px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}
.howItWorksNoneTwin h3 {
    padding-top: 21px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    line-height: 14px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}
.howItWorksNoneTwin p{
    padding-top: 10px;
    font-size: 12px;
    width: 58%;
    margin: 0 auto;
    font-weight: 300;
    line-height: 14px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}
.swiper-pagination-bullet-active {
    background-color: #000000; /* Set your desired color */
}
.howItWorksNone p{
    padding-top: 10px;
    font-size: 12px;
    width: 58%;
    margin: 0 auto;
    font-weight: 300;
    line-height: 14px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}
.howItWorksNone button {
    font-size: 12px;
    font-family: "Roboto", sans-serif!important;
    color: #FFFFFF;
    padding: 3px 10px;
    font-weight: 400;
    line-height: 14px;
    background: #000000;
    margin: 0 auto;
    display: flex;
    margin-top: 11px;
}

.getMoreBtn {
    position: relative;
    display: flex;
    justify-content: center;
}
.getMoreBtn button {
    position: absolute;
    top: -146px;
    background: #fff;
    padding: 6px 28px;
    font-weight: 400;
    font-size: 30px;
    line-height: 150%;
    text-decoration: underline;
    cursor: pointer;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}

.getMoreUnderText {
    max-width: 1120px;
    margin: 0 auto;
    width: 95%;
    padding-top: 88px;
    text-align: center;
}

.getMoreUnderText h3 {
    text-align: center;
    font-family: "Roboto", sans-serif!important;
    font-size: 20px;
    line-height: 150%;
    font-weight: 400;
}

.getMoreUnderText span {
    font-family: "Roboto", sans-serif!important;
    font-size: 20px;
    line-height: 150%;
    font-weight: 700;
    color: #000000;
}
.blackBackground {
    margin-top: 172px;
}
.percentage {
    position: relative;
}
.percentageImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.benefitsContent {


}
.benefitsText {

}
.benefitsContentText h3 {
    padding-bottom: 35px;
}
.benefitsText h3 {
    font-weight: 600;
    font-size: 36px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}
.benefitsContentText {
    margin-top: 169px;
}
.benefitDes:first-of-type{
    margin-top: 0;
}
.benefitDes {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.benefitsContentText .benefitDes:first-of-type {
    margin-top: 0;
}
.benefitDes2 {
    display: flex;
    gap: 289px;
}
.benefitDes3 {
    display: flex;
    gap: 290px;
}
.benefitDesColors {
    display: flex;
    gap: 102px;
}
.benefitDes img {
    width: 24px;
    height: 24px;

}
div .benefitDesFirst{
    margin-top: 0;
}
.benefitColors {
    display: flex;
    justify-content: flex-end;
    gap: 84px;
}
.benefitColorDes {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40px;
    margin-right: -1px;
}
.benefitColors h4 {
    display: flex;
    justify-content: center;
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}




















.benefitsContentText p{
    font-weight: 400;
    font-size: 14px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
    width: 713px;
}
.benefitsColors {
    margin-top: 196px;
    display: flex;
    gap: 102px;
}
.silverCircle p{
    margin-top: 10px;
}
.silverRectangle {
    margin-left: 8px;
}

.silverRectangle div {
    margin-top: 14px;
}
.silverRectangle div img {
    width: 24px;
    height: 24px;
}
.howItWorks {
    width: 100%;
    background: #EFEFEF;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    margin-top: 139px;
    padding-bottom: 40px;
}

.howItWorksTitle {
    width: 50vw;
    margin: 0 auto;
    padding-top: 74px;
}
.howItWorksTitle h3 {
    font-weight: 600;
    font-size: 36px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}
.howItWorksContent {
    margin-top: 56px ;
    justify-content: center;
    display: flex;
    gap: 45px;
}

.howItWorksContent div h4{
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    margin-bottom: 26px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
    max-width: 260px;
}

.howItWorksContent div p {
    width: 189px;
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
    font-family: "Roboto", sans-serif!important;
}

.howItWorksBtnSide {
    display: flex;
    justify-content: center;
    gap: 49px;
}

.howItWorksBtn button {
    padding: 6px 28px;
    background: #000;
    font-weight: 400;
    font-size: 30px;
    line-height: 150%;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-family: "Roboto", sans-serif!important;
}
.howItWorksImg {
    display: flex;
    margin-top: 116px;
    gap: 49px;
}
.giftTitle {
    display: flex;
    justify-content: center;
    margin-top: 101px;
}

.giftTitle h3 {
    font-weight: 600;
    font-size: 37px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}
.giftContent {
    width: 100%;
    height: auto;
    background: #000;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    margin-top: 49px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4% 0;
}

.giftDescription {
    padding-top: 132px;
    display: flex;
    flex-wrap: wrap;

}
.giftDescriptionBottom {
    padding-top: 27px;
    display: flex;
    flex-wrap: wrap;
    max-width: 75%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

.giftInfoBlock {
    display: flex;
    margin: 0 auto;
    align-items: stretch;
    gap: 34px;
    flex-wrap: wrap;
    justify-content: center;
}

.giftInfoBlocks {
    width: 462px;
    height: 162px;
    background: #fff;
    border-radius: 11px;
}

.giftInfoBlocksTitle {
    padding-top: 16px;
    padding-left: 27px;
}
.giftInfoBlocksTitle h4 {
    font-weight: 600;
    font-size: 24px;
    line-height: 160%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}
.giftInfoBlocksDes {
    padding-left: 27px;
}
.giftInfoBlocksDes p {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 20px;
    max-width: 411px;
}
.giftInfoBlocksBottom {
    width: 462px;
    padding-bottom: 10px;
    background: #fff;
    border-radius: 11px;
}

.giftBtn {
    display: flex;
    justify-content: center;
    margin-top: 75px;

}
.giftBtn button {
    padding: 6px 28px;
    text-decoration: underline;
    cursor: pointer;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif!important;
    background: #fff;
    font-weight: 400;
    font-size: 30px;
    line-height: 150%;
    text-align: center;


}

/*This is the css for frame7 in figma*/

.leftSideMenu {
    margin-top: 20px;
}

.memberBalance {
    width: 293px;
    padding: 15px 18px;
    background: #010101;
}

.memberTitle h4{
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    text-align: center;
    padding-top: 12px;
    font-family: "Roboto", sans-serif!important;
}

.balance {
    padding: 17px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balanceTitle h4 {
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    color: #fff;
    font-family: "Roboto", sans-serif!important;
}

.balanceCount p {
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    color: #fff;
    font-family: "Roboto", sans-serif!important;
}

.balanceDescription {
    margin-top: 6px;
    margin-left: 18px;
}

.balanceDescription p {
    font-weight: 200;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    font-family: "Roboto", sans-serif!important;
}

.leftSideMenuBottom {
    margin-top: 33px;
}
.leftSideMenuBottom > div:nth-child(odd) {
    background: #D9D9D9; /* Gray background for odd items */
    width: 293px;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.leftSideMenuBottom > div:nth-child(even) {
    background: #fff; /* White background for even items */
    width: 293px;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}


.menuWhite img{
    width: 20px;
    height: 20px;
    object-fit: contain;

}
.vectorForMenu {
    width: 6px;
}

.menuGrey img{

    width: 20px;
    height: 20px;
    object-fit: contain;

}
.menuGreyDes {
    display: flex;
    align-items: center;
    margin-left: 15px;
    gap: 15px;
}

.menuGrey h4 {
    width: 210px;
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}

.menuWhite h4 {
    color: #000000;
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    width: 210px;
}

.menuGrey h3 {
    width: 210px;
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    text-decoration: underline;
    font-family: "Roboto", sans-serif!important;
}

.mainContent {
    display: flex;
    justify-content: center;
    gap: 94px;
}

.bonus {
    width: 812px;
    height: 198px;
    background: #000;
    margin-top: 113px;
}

.bonusTitle {
    padding-top: 31px;
    padding-left: 38px;
}

.bonusTitle h4 {
    font-weight: 500;
    font-size: 25px;
    line-height: 150%;
    color: #fff;
    font-family: "Roboto", sans-serif!important;
}

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

.accumulatedBonus h3{
    font-weight: 300;
    font-size: 18px;
    line-height: 150%;
    color: #fff;
    font-family: "Roboto", sans-serif!important;
}
.numberCount {
    border: 1px solid #D9D9D9;
    width: 100%;
    height: 18px;
    border-radius: 13px;
}

.bonusNumber h3 {
    font-weight: 300;
    font-size: 18px;
    line-height: 150%;
    color: #848484;
    font-family: "Roboto", sans-serif!important;
}


.benefitsTitle {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}
.swiper {
    width: 745px;
    height: 288px;
}

.swiper-slide {
    font-size: 18px;
    background: #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif!important;
}

.swiper-slide img {
    display: block;
    width: 180px;
    height: 144px;
    object-fit: cover;
}

.next img {
    object-fit: contain;
}
.prev img{
    object-fit: contain;
}

.topGrey {
    width: 179px;
    height: 144px;
    background: #D9D9D9;
}
.bottomWhite {
    width: 181px;
    height: 144px;
    background: #F0F0F0;
}

.salesPercentage h3 {
    margin-left: 14px;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
}
.salesPercentage p {
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    margin-left: 18px;
    font-family: "Roboto", sans-serif!important;
}

.greyLine {
    margin-top: 28px;
}

.rightMainImg {
    margin-top: 40px;
    position: relative;
}

.rightImgBtn {
    position: relative;
    display: flex;
    justify-content: center;
}

.rightImgBtn a {
    position: absolute;
    cursor: pointer;
    background: #fff;
    padding: 0 20px;
    font-weight: 400;
    font-size: 30px;
    line-height: 150%;
    text-align: center;
    top: -75px;
    font-family: "Roboto", sans-serif!important;
    color: #000000;


}

.bottomBlock {
    margin-top: 32px;
    width: 812px;
    height: 394px;
    background: #F1F1F1;
}
.bottomBlockTitle {
    padding-top: 34px;
    padding-left: 26px;
}
.bottomBlockTitle h3 {
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}

.bottomBlockContent {
    margin-top: 46px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 62px;


}

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



.bottomBlockBtn {
    display: flex;
    justify-content: center;
    margin-top: 52px;
}
.bottomBlockBtn button {
    background: #000000;
    padding: 11px 45px;
    text-align: center;
    font-weight: 400;
    font-size: 35px;
    line-height: 150%;
    color: #fff;
    cursor: pointer;
    font-family: "Roboto", sans-serif!important;
    text-decoration: underline;


}

.moreBtn {
    display: flex;
    justify-content: flex-end;

}
.moreBtn img {
    object-fit: contain;
}
.moreBtn button a {
    font-weight: 300;
    font-size: 14px;
    color: #3A3A3A;
}
.bottomBlock p {
    text-align: center;
    color: #676767;
}

.moreBtn button {
    margin-right: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    color: #3A3A3A;
    font-size: 14px;
    font-family: "Roboto", sans-serif!important;
    width: 73px;
    height: 22px;
    border-radius: 16px;
    background: #EBEBEB;
    cursor: pointer;

}

.numberCount {
    width: 100%;
    height: 18px;
    border: 1px solid #D9D9D9;
    border-radius: 13px;
    overflow: hidden;
    position: relative;
}
.bonusNumber p span{
    font-weight: 300;
    font-size: 18px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #848484;
}


.liquid-block {
    width: 0%;
    height: 100%;
    background-color: #D9D9D9;
    transition: width 1s ease;
    overflow: hidden;
}



#price {
    display: none;
}


/*This is the css for frame12 in figma*/
table {
    width: 100%;
    border-spacing: 0 17px;
    border-collapse: separate;
}

td, th {
    padding: 18px 10px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    font-family: "Roboto", sans-serif !important;
}
td:first-child, th:first-child {
    color: #000000;
}
td {
    color: #000000;
}

th {
    color: #767676;
    width: 14%;
}

td button {
    cursor: pointer;
}

.btnAdd button {
    font-weight: 300;
    font-size: 24px;
    line-height: 50px;
    color: #7A7A7A;
    cursor: pointer;
}
.product-images{
    display: block;
    width: max-content;
}
.product-images img,.product-images .btnAdd{
    display: inline-block;
}

.greyOne {
    background: #F4F4F4;
}
.ordersAndPoints {
    margin-top: 93px;
    display: flex;
    align-items: center;
    gap: 393px;
}

.ordersTitle h3 {
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #000;
}
.ordersTitleNone {
    display: none;
}
.ordersTitleNone h3 {
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #000;
}

.ordersBtn {
    width: 106px;
    height: 32px;
    background: #727272;
    cursor: pointer;
    text-align: center;
}

.ordersBtn button {
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    line-height: 32px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    text-decoration: underline;
}


.points {
    max-width: 100%;
    background: #000;
    margin-top: 25px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.pointsTitle h3 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 25px;
    line-height: 180%;
    color: #fff;
}

.underBtn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 79px;
    width: 100%;
}

.underBtn div {
    cursor: pointer;
    padding: 0 37px;
    height: 25px;
    background: #A5A5A5;
    text-align: center;
    display: flex;
    justify-content: center;
}
.underBtn div button {
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.grLine {
    margin-top: 18px;
    max-width: 98%;
}
.productContent {
    display: flex;
    align-items: center;
}

.productContent div h4 {
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #767676;

}

.productsDescription {
    width: 813px;
    height: 89px;
    background: #F4F4F4;
    margin-top: 17px;
}

.watches {
    display: flex;
    align-items: center;
    padding-top: 23px;
    margin-left: 10px;
}

.plus h4{
    font-weight: 300;
    font-size: 24px;
    color: #7A7A7A;
    font-family: "Roboto", sans-serif!important;
    margin-left: 13px;
    cursor: pointer;
}

.productDetails {
    display: flex;
    align-items: center;
    margin-left: 71px;
    gap: 50px;
}

.productDetails div h4 {
    font-weight: 500;
    font-size: 12px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}


.productContainer {
    margin-left: 78px;
}

.orderContainer {
    margin-left: 84px;
}

.numberContainer {
    margin-left: 33px;
}

.totalContainer {
    margin-left: 58px;
}

.bonusContainer {
    margin-left: 63px;
}

.validContainer {
    margin-left: 38px;
}
.viewContainer {
    margin-left: 35px;
}

.bigVector {
    margin-left: 30px;
    cursor: pointer;
}
.productContentNone {
    display: none;
}


/*This is the css for frame15 in figma*/

.orderDetails {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.infoForProducts {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderDetailsTitle h3 {
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}

.orderInfo p {
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
}

.bigLine {
    margin-top: 21px;
}
.nameOfProduct h3 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
}
.productInformation {
    display: flex;
}

.detailsOfProduct {
    margin-left: 49px;
    width: calc(100% - 212px);
}
.detailsTitle h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 180%;
    color: #000000;
}
.infoForProductsName h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}
.detailsTitle {
    margin-top: 38px;
}
.accountTitleNone {
    display: none;
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}

.infoForProductsPrice p {
    font-family: "Roboto", sans-serif!important;
    font-weight: 700;
    font-size: 15px;
    color: #434343;
    text-align: end;
}

.infoForUser {
    margin-top: 38px;
}

.priceOfProduct {
    margin-top: 76px;
}

.productImg {
    margin-top: 59px;
}
.bigLineSecond {
    margin-top: 38px;
}
.totalPrice {
    display: flex;
    justify-content: space-between;
    margin-top: 23px;
    align-items: center;
}
.totalPriceDelivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.totalTitle h4{
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    line-height: 150%;
    color: #434343;
}

.totalPriceNumber h4{
    font-family: "Roboto", sans-serif!important;
    font-weight: 700;
    font-size: 15px;
    line-height: 150%;
    color: #434343;
}

.bigLineThird {
    margin-top: 13px;
}
.addressTitle {
    margin-top: 30px;
    margin-left: 6px;
}
.addressTitle h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    color: #000000;
}

.addressInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 6px;
    margin-bottom: 10px;
}

.cityInfo h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}

.addressNumber h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 700;
    font-size: 15px;
    color: #434343;
    text-align: end;
}
.paymentTitle {
    margin-top: 6px;
    margin-left: 6px;
}
.paymentTitle h4{
    font-family: "Roboto", sans-serif!important;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    color: #000000;
}

.cardType {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 6px;
    margin-bottom: 26px;
}


.bankName h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}

.shopInfo {
    display: flex;
    gap: 12px;
    margin-left: 6px;
    align-items: center;
}
.cardImg img{
    max-width: 23px;
}
.shopName h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}

/*This is the css for frame6 in figma*/

.accountTitle {
    margin-top: 15px;
}
input[type="radio"] {
    accent-color: #000000;
}
.accountTitle h4 {
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}

.personalInfo {
    margin-top: 77px;
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    font-family: "Roboto", sans-serif!important;
    color: #000000;
}

.personalInfoSection {
    margin-top: 19px;
}

.topSide {
    display: flex;
    gap: 28px;
}
.personalInfoSection input {
    width: 100%;
    height: 44px;
    background: #F0F0F0;
    border: none;
    padding-left: 17px;
}
.personalInfoSection input[type=radio]{
    width: 13px;
}

.personalInfoSection input::-webkit-input-placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
}
.bottomSide {
    display: flex;
    gap: 28px;
    margin-top: 15px;
}

.inputForCheckBox {
    display: flex;
    align-items: center;
    gap: 30px;
}

.male {
    display: flex;
    gap: 5px;
    align-items: center;
}
.female {
    display: flex;
    gap: 5px;
    align-items: center;
}
.inputForEmail ,.inputForDate,.inputForName,.inputForName,.inputForCheckBox{
    width: calc(50% - 14px);
    display: flex;
    align-items: center;
}
.personalInfo h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}
.male h4{
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}
.female h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
}
.importDateTitle {
    margin-top: 24px;
}
.importDateTitle h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}

.importDateSection form {
    margin-top: 13px;
    display: flex;
    gap: 14px;
}
.importDate2Section form {
    margin-top: 13px;
    display: flex;
    gap: 14px;
}

.editContainer {
    display: flex;
    align-items: center;
}
.inputForNameSmall ,.inputForEvent, .inputForDateSmall,.field-wrap{
    width: 30%;
    margin: 0;
}
.import-date-container input, .importDate2Section input{
    width: 100%;
    height: 44px;
    background: #F0F0F0;
    border: none;
    padding-left: 17px;
}

.import-date-container input::-webkit-input-placeholder,.importDate2Section input::-webkit-input-placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
}

.plusSpan {
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 50px;
}
.editIcon {
    cursor: pointer;
}
.trashIcon {
    cursor: pointer;
}
.plusSpan button {
    color: #7E7E7E;
    font-size: 21px;
    cursor: pointer;
}
.profileAddress h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}
.grLineNone {
    display: none;
}
.product-images img {
    width: 62px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    background-color: #ffffff;
}

.firstAddress p {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 15px;
    color: #434343;
    margin-top: 4px;
}

.passwordTitle h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}

.passwordSection {
    margin-top: 31px;
}
.passwordTop {
    display: flex;
    gap: 28px;

}

.passwordSection input {
    width: 100%;
    height: 44px;
    background: #F0F0F0;
    border: none;
    padding-left: 17px;
}

.passwordSection input::-webkit-input-placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
}
.passwordNew, .passwordNewSecond, .passwordBottom{
    width: calc(50% - 14px);
    position: relative;
}
.password-show {
    position: absolute;
    bottom: 10px;
    right: 20px;
    cursor: pointer;
}
.passwordBottom {
    display: flex;
    align-items: center;
    gap: 284px;
    margin-top: 32px;
}

.contactTitle {
    margin-top: 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.contactTitle h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    font-family: "Roboto", sans-serif!important;
}

#PERSONAL_PHONE {
    width: 100%;
    height: 44px;
    background: #F0F0F0;
    border: none;
    padding-left: 17px;
}

.phoneContact input::-webkit-input-placeholder {
    color: #9E9E9E;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
}

.appsLogos {
    display: flex;
    gap: 22px;
    margin-top: 18px;
    margin-left: 46px;
}

.appsLogos div button {
    cursor: pointer;
    color: #000000;
}

.saveBtn {
    width: auto;
    height: 32px;
    background: #727272;
    text-align: center;
    margin-top: 19px;
    cursor: pointer;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saveBtn button{
    color: #fff;
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.saveBtn2Same {
    width: auto;
    height: 32px;
    padding: 0 20px;
    background: #727272;
    text-align: center;
    margin-top: 19px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saveBtn2Same button{
    color: #fff;
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.saveBtn1Same {
    width: auto;
    height: 32px;
    padding: 2px 20px;
    background: #727272;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saveBtn1Same button{
    color: #fff;
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}
.saveBtnSame {
    width: auto;
    height: 32px;
    background: #727272;
    text-align: center;
    margin-top: 19px;
    cursor: pointer;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saveBtnSame button{
    color: #fff;
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}

/*This is the css for frame11 in figma*/

.silverMemberTitle {
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 37px;
    line-height: 180%;
    color: #000;
    margin-top: 24px;
}

.benefitsTop {
    gap: 14px;
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(auto);

}

.bonusIcons {
    min-width: 165px;
    max-width: 230px;
    min-height: 191px;
    max-height: 191px;
    background: #F2F2F2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blockForIcon {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}


.blockForIconDes {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 13px;
}

.blockForIconDes p {
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    color: #000;
    font-family: "Roboto", sans-serif!important;
    padding: 0 5px;
}


.blockFor2Icon {
    display: flex;
    justify-content: center;
    margin-top: 23px;
    min-height: 23px;
    min-width: 23px;
    max-width: 80px;
    width: 100%;
}

.benefitsBottom {
    margin-top: 15px;
}

.bonusIconsBottom {
    display: flex;
    justify-content: center;
    padding-top: 17px;
}

.bonusIconsBottomSmall {
    display: flex;
    justify-content: center;
    padding-top: 23px;
}

.benefitsBottom {
    display: flex;
    gap: 14px;
}

.blockForIcon2Des {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 18px;
}

.blockForIcon2Des p {
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}

.galaxyTitle {
    margin-top: 43px;
}
.galaxyTitle h4 {
    font-weight: 500;
    font-size: 37px;
    line-height: 180%;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}

.moreBonus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(auto);
    gap: 12px;
    margin-top: 22px;
}

.moreBonusImg {
    padding-top: 14px;
    display: flex;
    justify-content: center;
    height: 108px;
}

.moreBonusDes {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.moreBonusDes p {
    font-weight: 700;
    font-size: 15px;
    color: #000;
    font-family: "Roboto", sans-serif!important;

}

.moreBonusDes h3 {
    font-weight: 300;
    font-size: 15px;
    line-height: 17px;
    color: #000;
    font-family: "Roboto", sans-serif!important;
}

.galaxyTitleGrey {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.galaxyTitleGrey h4 {
    font-weight: 500;
    font-size: 37px;
    line-height: 180%;
    color: #7A7A7A;
    font-family: "Roboto", sans-serif!important;
}

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



.moreBonusDesGrey {
    margin-top: 7px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.moreBonusDesGrey p {
    font-weight: 700;
    font-size: 15px;
    color: #7A7A7A;
    font-family: "Roboto", sans-serif!important;
}

.moreBonusDesGrey h3 {
    font-weight: 300;
    font-size: 15px;
    line-height: 18px;
    color: #7A7A7A;
    font-family: "Roboto", sans-serif!important;
}

.moreBonusImgGate {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

.moreBonusDesGreyGate {
    display: flex;
    justify-content: center;
    padding-top: 13px;

}

.moreBonusDesGreyGate p {
    font-weight: 700;
    font-size: 15px;
    color: #7A7A7A;
    font-family: "Roboto", sans-serif!important;
}

.friendsTitle {
    margin: 0 auto;
    max-width: 449px;
    text-align: center;
    margin-top: 54px;
}

.friendsTitle h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 500;
    font-size: 37px;
    line-height: 150%;
    text-align: center;
    color: #000000;
}

.linkBtn {
    margin-top: 33px;
    display: flex;
    justify-content: center;
}

.linkBtn div {
    width: 480px;
    height: 61px;
    background: #E9E9E9;
    border-radius: 39px;
    font-family: "Roboto", sans-serif!important;
    cursor: text;
}
.linkBtn div p {
    color: #070707;
    font-weight: 200;
    font-size: 25px;
    line-height: 59px;
    display: flex;
    justify-content: center;

}


.shareBtn {
    margin-top: 23px;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 31px;
    cursor: pointer;
}

.shareBtn button {
    font-family: "Roboto", sans-serif!important;
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    color: #5F5F5F;
    cursor: pointer;
}
.stepsInvite {
    margin-top: 56px;
    margin-left: 180px;
}

.stepFirst {
    display: flex;
    align-items: center;
    gap: 21px;
}
.benefitFlex {
    display: flex;
    justify-content: center;

}

.numberCircle {
    width: 42px;
    height: 42px;
    border-radius: 360px;
    background: #D9D9D9;
    text-align: center;
}

.numberCircle h4 {
    font-family: "Roboto", sans-serif!important;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
}

.numberDes p {
    font-family: "Roboto", sans-serif!important;
    font-weight: 300;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
}

.stepSecond {
    display: flex;
    align-items: center;
    gap: 21px;
    margin-top: 23px;
}
.stepThird {
    display: flex;
    gap: 21px;
    margin-top: 23px;
}





@media (min-width: 1280px) and (max-width: 1918px) {
    .howItWorksTitle {
        width: 66vw;
    }
    .benefitFlex {
        display: flex;
        justify-content: center;
    }
    .getMoreBtn button {
        left: unset;
        right: unset;
    }
    .benefitsContentText {
        margin-left: 0px;
    }
    .benefitsText {

    }
    .benefitsContent {
        gap: 180px;
        justify-content: center;
    }
    /*This is media for frame7*/
    .rightImgBtn button {
        padding: 0 19px ;
    }
    .mainContent {
        justify-content: center;
    }
    .leftSideMenu {
        margin-left: unset;
    }
    .rightImgBtn {
        width: 193px;
        height: 42px;
        font-size: 30px;
        top: 0px;
        left: 308px;
    }
    .orderDetails {
        margin-top: 15px;
    }
    .howItWorksContent {
        gap: 50px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    td:first-child, th:first-child {
        width: 160px;
    }
    .product-images img {
        width: 50px;
        height: 50px;
    }
    .howItWorksContent div h4{
        font-size: 20px;
    }
    .benefitColors {
        width: 100%;
        gap: 84px;
    }
    .getMoreBtn button {
        left: unset;
        right: unset;
        top: -100px;
    }
    .percentageImg {
        width: 100%;
    }
    .percentageImg img {
        width: 50%;
        margin: 0 auto;
    }
    .benefitsContentText {
        margin-left: 5px;
    }
    .benefitFlex {
        justify-content: center;
    }
    .howItWorksTitle {
        margin-left: 35px;
    }
    .howItWorksContent {
        gap: 40px;
        justify-content: center;
        width: 95%;
        margin: 56px auto 0;
    }
    .howItWorksBtnSide {
        gap: 14px;
    }
    .howItWorksImg {
        gap: 17px;
    }
    .benefitsContentText p {
        width: 688px;
    }
        /*This is media for frame7*/
    .mainContent {
        justify-content: center;
        width: 98%;
        gap: 20px;
    }
    .rightImgBtn button {
        padding: 16px 20px;
        font-size: 20px;
        top: -52px;
        line-height: 1px;
    }
    .bottomBlockBtn {
        margin-top: 40px;
    }
    .moreBtn {
        right: 77px;
    }
    .bottomBlockBtn button {
        font-size: 20px;
        line-height: 20px;
    }
    .greyLine {
        display: none;
    }
    .bonus {
        width: 565px;
        height: 250px;
    }
    .accumulatedBonus h3 {
        font-size: 14px;
    }
    .swiper {
        width: 544px;
        height: 211px;
    }
    .salesPercentage p {
        font-size: 14px;
    }
    .rightMainImg {
        width: 564px;
    }
    .bottomBlock {
        width: 564px;
    }
    .topGrey {
        width: 128px;
        height: 114px;
    }
    .bottomWhite {
        width: 130px;
    }
    .bonusContent {
        gap: 165px;
    }
    /*This is media for frame12*/
    td {
        padding: 7px;
    }
    .ordersAndPoints {
        gap: 130px;
    }
    .grLine {
        width: 98%;
    }
    .productsDescription {
        width: 580px;
    }
    .productDetails {
        gap: 14px;
        margin-left: 16px;
    }
    .productContainer {
        margin-left: 19px;
    }

    .orderContainer {
        margin-left: 36px;
    }

    .numberContainer {
        margin-left: 26px;
    }

    .totalContainer {
        margin-left: 30px;
    }

    .bonusContainer {
        margin-left: 28px;
    }

    .validContainer {
        margin-left: 12px;
    }
    .viewContainer {
        margin-left: 7px;
    }

    .bigVector {
        margin-left: 30px;
    }
    .moreBonusDesGrey p {
        text-align: center;
    }
    /*This is media for frame15*/
    .orderDetails {
        margin-top: 30px;
    }
    .orderDetailsTitle h3 {
        font-size: 24px;
    }
    .detailsOfProduct {
      width: auto;
    }
    .totalTitle h4 {
        margin-left: 10px;
    }
    /*This is media for frame6*/
    .appsLogos {
        margin-left: unset;
    }
    .leftSideMenu {
        margin-left: 5px;
    }
    .topSide .inputForDate ,.topSide .inputForName ,.topSide .inputForName {
        width: calc(50% - 14px);
    }
    .inputForNameSmall input {
        width: 178px;
    }

    .inputForDateSmall input {
        width: 163px;
    }
    .saveBtn {
        margin-left: 455px;
    }
    .pointsTitle h3 {
        font-size: 20px;
    }
    /*This is media for frame11*/
    .bonusIcons {
        width:100%;
    }
    .benefitsTop {
        gap: 5px;
    }
    .blockForIconDes p {
        font-size: 14px;
    }
    .galaxyTitle h4 {
        font-size: 25px;
    }
    .galaxyTitleGrey h4 {
        font-size: 25px;
    }
    .moreBonusDesGrey h3 {
        font-size: 12px;
    }
    .moreBonus {
        gap: 5px;
    }
    .benefitsBottom {
        gap: 5px;
    }
    .underBtn {
        margin-top: 40px;
    }
        /*This is media for frame13*/
    .stepsInvite {
        margin-left: 49px;
    }
    .bottomBlockContent {
        gap: 47px;
    }
    .bottomBlock p {
        width: 152px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    td:first-child, th:first-child {
        width: 85px;
    }
    .underBtn div {
        padding: 0 30px;
    }
    div .howItWorksNone ,div .howItWorksNoneTwin{
        display: block;
    }
    div .howItWorksContent, div .giftContent{
        display: none;
    }
    .getMoreUnderText span {
        font-size: 12px;
    }
    .getMoreBtn button {
        padding: 0px 23px;
        top: -70px;
        font-size: 15px;
        line-height: 30px;
    }
     div .howItWorksNone .swiper-slide{
         background-color: unset;
     }
    .bonusTitle {
        padding-top: 12px;
        padding-left: 22px;
    }
    .benefitDes {
        gap: 80px;
        align-items: center;
    }

    .howItWorksImg {
        gap: 60px;
    }
    .howItWorksBtnSide {
        gap: 60px;
    }
    .benefitsContentText {
        margin-left: 5px;
        margin-top: 40px;
    }
    .benefitFlex {
        justify-content: center;
        gap: 4px;
    }
    .howItWorksTitle {
        margin: 0 auto;
        padding-top: 20px;
        text-align: center;
    }
    .howItWorksContent {
        margin-top: 15px;
        gap: 53px;
    }
    .giftInfoBlocks {
        width: 275px;
        height: 97px;
    }
    .giftInfoBlock {
        gap: 21px;
    }
    .giftDescriptionBottom {
        padding-top: 16px;
    }
    .getMoreImg {
        width: 90%;
        margin: 0 auto;
    }
    .getMoreUnderText {
        padding-top: 20px;
        max-width: 530px;
        height: unset;

    }
    .giftInfoBlocksTitle h4 {
        font-size: 12px;
    }
    .giftInfoBlocksTitle {
        padding-top: 0px;
        padding-left: 12px;
    }
    .giftInfoBlocksDes p {
        font-size: 12px;
    }
    .giftInfoBlocksDes {
        padding-top: 4px;
        padding-left: 12px;
    }
    .giftInfoBlocksBottom {
        width: 275px;
        height: 141px;
    }
    .giftTitle {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .giftTitle h3 {
        font-size: 24px;
    }
    .giftBtn button {
        font-size: 12px;
        padding: 0 28px;
        line-height: 30px;
    }
    .giftBtn {
        margin-top: 30px;
    }
    .giftContent {
        width: 760px;
        height: 416px;
        margin: 0 auto;
    }
    .giftDescription {
        padding-top: 77px;
    }
    .howItWorksContent div h4 {
        font-size: 18px;
    }
    .howItWorksContent div p {
        font-size: 12px;
        max-width: 124px;
    }
    .howItWorksBtn button {
        font-size: 12px;
        line-height: unset;
    }
    .howItWorksTitle h3 {
        font-size: 24px;
    }
    .benefitsText h3 {
        font-size: 24px;
    }
    .benefitsText {

    }
    .benefitsContentText p {
        font-size: 14px;
        width: 380px;
    }
    .getMoreUnderText h3 {
        font-size: 12px;
    }
    .blackBackground {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .blackBackground > img {
        height: 246px;
    }
    .howItWorks {
        width: calc(100% - 40px);
        margin: 20px auto 0;
    }
    .howItWorksImg div img {
        width: 110px;
        height: 50px;
    }

    .silverRectangle div img {
        width: 20px;
        height: 20px;
    }

    /*This is media for frame7*/
    .mainContent {
        justify-content: center;
        gap: 20px;
        padding: 0 10px;
    }

    .leftSideMenu {
        margin-left: unset;
    }
    .bonus {
        width: 437px;
        height: 170px;
        margin: 0 auto;
        margin-top: 50px;
    }
    .bonusTitle h4 {
        font-size: 12px;
    }
    .accumulatedBonus h3 {
        font-size: 12px;
    }
    .bonusNumber p span {
        font-size: 12px;
    }

    .numberCount {
        height: 19px;
    }
    .rightMainImg {
        width: 437px;
        margin: 0 auto;
        margin-top: 17px;
    }
    .bottomBlock {
        width: 437px;
        margin: 0 auto;
        margin-top: 17px;
        height: 320px;
    }
    .swiper {
        height: 168px;
        width: 362px;
    }
    .topGrey {
        width: 84px;
        height: 84px;
    }
    .bottomWhite {
        width: 85px;
        height: 84px;
    }
    .salesPercentage p {
        font-size: 10px;
        margin-left: 3px;
        line-height: unset;
    }
    .greyLine {
        display: none;
    }
    .salesPercentage h3 {
        font-size: 16px;
        margin-left: 5px;
    }
    .bottomBlockTitle h3 {
        font-size: 20px;
    }
    .benefitsTitle  {
        font-size: 12px;
    }
    .bottomBlockImg {
        display: flex;
        justify-content: center;
        margin-left: unset;
    }
    .bottomBlockImg img {
        width: 32px;
    }
    .bottomBlockContent {
        gap: 40px;
    }
    .leftSideMenu {
        margin-top: 30px;
    }
    .leftSideMenu ,.memberBalance ,.leftSideMenuBottom > div{
        max-width: 250px;
    }
    .bottomBlock p {
        font-size: 12px;
    }
    .bottomBlockBtn {
        margin-top: 20px;
    }
    .bottomBlockBtn button {
        font-size: 12px;
        line-height: 1px;
        padding: 11px 28px;
    }
    .rightImgBtn button {
        line-height: unset;
        font-size: 14px;
        top: -41px;
    }
    .greyLine {
        width: 435px;
    }
    /*This is media for frame12*/
    .underBtn {
        margin-top: 20px;
    }
    td {
        padding: 4px;
        text-align: center;
        white-space: nowrap;
    }
    .watches {
        margin-left: unset;
    }
    .ordersAndPoints {
        gap: 112px;
        margin-top: 20px;
    }
    .ordersTitle h3 {
        font-size: 26px;
    }
    .pointsTitle h3 {
        font-size: 16px;
    }
    .productsDescription {
        width: 449px;
    }
    .productDetails {
        gap: 10px;
        margin-left: 12px;
    }
    .productContainer {
        margin-left: 54px;
    }

    .orderContainer {
        margin-left: 51px;
    }

    .numberContainer {
        margin-left: 19px;
    }

    .totalContainer {
        margin-left: 30px;
    }

    .bonusContainer {
        margin-left: 28px;
    }

    .validContainer {
        margin-left: 12px;
    }
    .viewContainer {
        margin-left: 7px;
    }

    .bigVector {
        margin-left: 1px;
    }
    .watch {
        width: 35px;
    }
    /*This is media for frame15*/
    .orderDetails {
        margin-top: 31px;
    }
    .bigLine {
        margin-top: unset;
    }
    .detailsOfProduct {
        width: 100%;
        margin-left: 6px;
    }
    div.productImg {
        max-width: 120px;
        max-height: 120px;
    }
    .totalPrice {
        gap: 0;
    }
    .addressInfo {
        gap: 0;
    }
    .cityInfo {
        width: 500px;
    }
    .orderDetailsTitle h3 {
        font-size: 18px;
    }
    .orderInfo p {
        font-size: 14px;
    }
    /*This is media for frame6*/
    .pointsTitle h3 {
        font-size: 15px;
    }
    .accountTitle {
        margin-left: 0;
        margin-top: 30px;
    }
    .accountTitle h4 {
        font-size: 30px;
    }

    /*This is media for frame11*/
    .bonusIcons {
        min-width: 135px;
        max-width: 210px;
        min-height: 120px;
        max-height: 200px;
    }
    .silverMemberTitle{
        font-size: 20px;
    }
    .benefitsTop,.moreBonus {
        gap: 13px;
        flex-wrap: wrap;
        grid-template-columns: repeat(3, 1fr);
    }
    .blockForIconDes p {
        font-size: 14px;
    }
    .galaxyTitle h4 {
        font-size: 25px;
    }
    .galaxyTitleGrey h4 {
        font-size: 22px;
    }
    .moreBonusDesGrey h3 {
        font-size: 12px;
    }
    .moreBonusDesGrey p {
        text-align: center;
    }
    .moreBonus {
        gap: 6px;
        flex-wrap: wrap;
    }
    .benefitsBottom {
        gap: 13px;
        flex-wrap: wrap;
    }
    /*This is media for frame13*/
    .linkBtn button {
        width: 448px;
    }
    .stepsInvite {
        margin-left: 11px;
    }
    .numberDes p {
        font-size: 22px;
    }
    .rightSide {
        width: 58%;
    }
    .productContent{
        max-width: 98%;
    }
    .productContent th {
        font-size: 11px;
    }
    .personalInfo {
        margin-top: 16px;
    }
    .points {
        margin-top: 30px;
    }
    .appsLogosItem img{
        width: 32px;
        height: 32px;
    }
    .phone-hint, .password-hint{
        font-size: 14px;
    }
}
@media (min-width: 320px) and (max-width: 767px) {
    .phone-hint, .password-hint{
        font-size: 12px;
    }
    .orderDetailsTitle h3 {
        font-size: 16px;
    }
    .orderInfo p {
        font-size: 12px;
    }
    .howItWorksNone h4{
        padding: 0;
    }
    .swiperWhiteBlock p ,.swiperWhiteBlock{
       width: 85%;
    }
    .howItWorksNoneTwin {
        display: block;
    }
    .howItWorks {
        padding-bottom: 15px;
    }
    .howItWorksNone {
        display: block;
    }
    .getMoreBtn button {
        top: -31px;
        line-height: 1px;
        font-size: 12px;
        padding: 8px 12px;
    }
    .benefitDes img {
        width: 15px;
        height: 15px;
    }
    .getMoreUnderText h3 {
        font-size: 12px;
        line-height: 15px;
        text-align: center;
        max-width: 227px;
    }
    .getMoreUnderText {
        padding: 20px 10px 10px;
        display: flex;
        justify-content: center;
    }
    .getMoreUnderText span {
        font-size: 12px;
        line-height: 15px;
    }
    .blackBackground {
        width: 96%;
        margin: 0 auto;
        margin-top: 40px;
    }
    .benefitColorDes img {
        width: 20px;
        height: 20px;
    }
    .benefitDes {
        gap: 0px;
    }
    .benefitColorDes h4 {
       display: none;
    }
    .getMoreBlock {
        margin-top: 20px;
    }
    .benefitsContentText {
        margin-left: 0;
        margin-top: 0px;
    }
    .benefitsText h3 {
        font-weight: 600;
        font-size: 8px;
    }
    .benefitsContentText p {
        width: 233px;
        font-size: 12px;
        min-height: 21px;
        padding-right: 15px;
    }
    .benefitColors {
        gap: 5px;
    }
    .benefitColorDes{
        max-width: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        align-items: flex-start;
        margin-bottom: 14px;
    }
    .getMoreImg {
        width: 96%;
        margin: 0 auto;
    }
    .benefitDesColors {
        gap: 10px;
    }
    .benefitsContentText h3 {
        padding-bottom: 0px;
        font-size: 14px;
    }

    .benefitFlex {
        gap: 1px;
        justify-content: center;
    }
    .benefitsColors {
        gap: 13px;
        margin-top: 20px;
    }
    .benefitsText {
        padding-top: 8px;
    }
    .silverRectangle div img {
        width: 12px;
        height: 12px;
    }
    .silverCircle img {
        width: 20px;
        height: 20px;
    }
    .silverCircle p {
        font-size: 12px;
    }
    .howItWorks {
        width: calc(100% - 24px);
        height: auto;
        margin: 19px auto 0;
    }
    .howItWorksTitle h3 {
        font-size: 14px;
    }
    .howItWorksTitle {
        width: 90vw;
        padding-top: 20px;
        text-align: center;
    }
    .howItWorksContent div h4 {
        font-size: 6px;
        line-height: 1px;
        margin-bottom: 0px;
    }
    .howItWorksContent div p {
        font-size: 4px;
        max-width: 40px;
    }
    .howItWorksContent {
        gap: 21px;
    }
    .howItWorksContent {
        margin-top: 0px;
    }
    .howItWorksBtn button {
        font-size: 6px;
        line-height: 1px;
    }
    .howItWorksImg {
        gap: 14px;
    }
    .howItWorksBtnSide {
        gap: 14px;
    }
    .giftTitle h3 {
        font-size: 16px;
        margin: 0 19px;
    }
    .giftContent {
        display: none;
    }
    .swiper-slide {
        background: #EFEFEF;
    }
    .giftTitle {
        margin-top: 10px;
    }
    .giftContent {
        margin-top: 10px;
    }
    .giftInfoBlocks {
        width: 115px;
        height: 97px;
    }
    .giftInfoBlocksTitle h4 {
        font-size: 8px;
        line-height: 30px;
    }
    .giftInfoBlocksDes p {
        font-size: 4px;
    }
    .giftInfoBlocksTitle {
        padding-top: 0px;
        padding-left: 8px;
    }
    .giftInfoBlocksDes {
        padding-left: 8px;
    }
    .giftInfoBlocksBottom {
        width: 115px;
        height: 110px;
    }
    .giftDescriptionBottom {
        padding-top: 10px;
    }
    .giftBtn {
        width: 49px;
        height: 15px;
        margin-top: 15px;
    }
    .giftBtn button {
        font-size: 6px;
    }
    .giftContent {
        width: 272px;
        height: 267px;
        margin: 0 auto;
    }
    .giftDescription {
        padding-top: 15px;
    }
    /*This is media for frame7*/
    .leftSideMenuBottom > div:nth-child(odd) {
        width: 100%;
        padding-left: 10px;
        gap: 0;
    }
    div.rightSide {
        width: 95%;
        max-width: 100%;
    }
    div.productImg{
        max-width: 80px;
        max-height: 80px;
    }
    .menuGreyDes {
        margin-left: 0;
    }
    .menuGreyDes img {
        width: 20px;
        height: 20px;
    }

    .leftSideMenuBottom > div:nth-child(even) {
        width: 100%;
        padding-left: 10px;
        gap: 0;
    }
    .menuGrey h4 {
        font-size: 12px;
        width: 127px;
        line-height: 9px;
    }
    .menuWhite h4 {
        font-size: 12px;
        width: 127px;
        line-height: 9px;
    }
    .bottomBlockBtn {
        display: none;
    }
    .leftSideMenu {
        margin-left: 0px;
        display: flex;
        flex-wrap: wrap;
        width: 96%;
        flex-direction: column;
    }

    .mainContent {
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .bonus {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        margin-top: unset;
    }
    .bonusTitle h4 {
        font-size: 16px;
        line-height: 14px;
        padding-top: 9px;
    }
    .bonusTitle {
        padding-top: 0;
        padding-left: 6px;
    }
    .accumulatedBonus h3 {
        font-size: 12px;
        line-height: 150%;
    }
    .bonusNumber p span {
        font-size: 12px;
        line-height: 10px;
    }
    .bonusNumber {
        margin-bottom: 0px;
    }
    .bonusContent {
        gap: 47px;
        margin-left: unset;
        align-items: center;
    }
    .numberCount {
        width: 100%;
        height: 8px;
        margin: 0 auto;
    }
    .moreBonusImg {
        height: 40px;
    }
    .rightMainImg {
        width: 100%;
        margin: 0 auto;
        margin-top: 17px;
    }
    .bottomBlock {
        width: 100%;
        margin: 0 auto;
        margin-top: 17px;
        height: 180px;
    }
    .swiper {
        height: 81px;
        width: 100%;
    }
    .topGrey {
        width: 100%;
        height: 41px;
    }
    .bottomWhite {
        width: 100%;
    }
    .salesPercentage p {
        font-size: 12px;
        line-height: 7px;
        margin-left: 0px;
    }
    .salesPercentage h3 {
        font-size: 12px;
        line-height: 23px;
        margin-left: 0px;
    }
    .menuGrey h3 {
        width: 127px;
        font-size: 12px;
    }
    .bottomBlockTitle h3 {
        font-size: 16px;
        text-align: center;
    }
    .bottomBlockTitle {
        padding-top: 0px;
        padding-left: 0px;
    }
    .benefitsTitle  {
        font-size: 6px;
        margin-top: 10px;
    }
    .benefitsTitle h2 {
        font-size: 16px;
    }
    .bottomBlockImg {
        display: flex;
        justify-content: center;
        margin-left: unset;
    }
    .bottomBlockImg img {
        width: 23px;
    }
    .bottomBlockContent {
        gap: 0px;
        margin-top: 0px;
        justify-content: center;
        margin-left: unset;
    }
    .bottomBlock p {
        font-size: 12px;
        margin-left: 0px;
    }
    .bottomBlockBtn {
        margin-top: 7px;
        display: block;
    }
    .bottomBlockBtn button {
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 auto;
        padding: 0px 6px;
        line-height: unset;
    }
    body .timeClubImg {
        width: 100%;
        order: 1;
        max-width: 100%;
    }
    .timeClubImg img{
        max-height: 260px;
        width: 100%;
        object-fit: cover;
    }
    .memberBalance {
        padding-top: 10px;
        width: 100%;
        margin-top: 10px;
        order: 3;
    }
    .menuGrey {
        width: 132px;
        gap: 3px;
    }
    .menuWhite {
        width: 132px;
        gap: 3px;
    }
    .prev img {
        width: 7px;
    }
    .next img {
        width: 7px;
    }
    .memberTitle h4 {
        font-size: 16px;
        padding-top: 9px;
    }
    .balanceTitle h4 {
        font-size: 14px;
    }
    .balanceCount p {
        font-size: 14px;
    }
    .balanceDescription p {
        font-size: 14px;
    }
    .balanceLine {
        margin:0  auto;
        width: 100%;
    }
    balanceLine img{
        width: 100%;
    }
    .balance {
        gap: 30px;
        margin-left: 0;
    }
    .leftSideMenuBottom {
        margin-top: 16px;
        order: 2;
        width: 100%;
    }
    .greyLine {
        display: none;
    }
    .rightImgBtn button {
        height: 16px;
        line-height: 1px;
        top: -30px;
        padding: 10px 10px;
        font-size: 12px;
    }
    /*This is media for frame15*/
    .orderDetailsTitle h3 {
        font-size: 18px;
    }
    .orderInfo p {
        font-size: 14px;
    }
    .orderDetails {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
    }
    .detailsTitle h3 {
        font-size: 16px;
    }
    .infoForProductsName h4 {
        font-size: 12px;
    }
    .infoForProductsPrice p {
        font-size: 12px;
    }
    .bigLine {
        width: 100%;
    }
    .bigLineSecond {
        width: 100%;
    }
    .bigLineThird {
        width: 100%;
    }
    .detailsOfProduct {
        width: 80%;
        margin-left: 0;
    }
    .totalPriceNumber {
        font-size: 12px;
    }
    .totalPriceNumber h4 {
        font-size: 12px;
    }
    .addressTitle h4 {
        font-size: 12px;
    }
    .cityInfo h4 {
        font-size: 12px;
    }
    .addressNumber h4 {
        font-size: 12px;
    }
    .paymentTitle h4 {
        font-size: 12px;
    }
    .bankName h4 {
        font-size: 12px;
    }
    .shopName h4 {
        font-size: 12px;
    }
    /*This is media for frame13*/
    .friendsTitle h4 {
        font-size: 23px;
    }
    .stepsInvite {
        margin-left: unset;
    }
    .numberDes p {
        font-size: 15px;
    }
    .numberCircle h4 {
        font-size: 15px;
    }
    /*This is media for frame6*/
    .pointsTitle {
        padding-top: unset;
        padding-left: 0;
    }
    .accountTitle h4 {
        font-size: 16px;
        text-align: center;
        display: none;
    }
    .accountTitleNone {
        display: block;
    }
    .personalInfo {
        margin-top: unset;
    }
    .accountTitleNone h4{
        font-size: 16px;
        text-align: center;
        display: block;
        font-weight: 500;
        line-height: 150%;
        color: #000000;
        font-family: "Roboto", sans-serif!important;
    }
    .accountTitle {
        margin-top: unset;
    }
    .points {
        width: 100%;
        height:auto;
        margin-top: unset;
        padding: 20px 10px;
        max-width: 100%;
    }
    .pointsTitle h3 {
        font-size: 16px;
        line-height: unset;
    }
    .personalInfoSection input {
        width: 100%;
    }
    .topSide ,.bottomSide{
        gap: 15px;
        flex-direction: column;
    }
    .inputForEmail, .inputForDate, .inputForName, .inputForName, .inputForCheckBox{
        width: 100%;
    }
    .bottomSide input {
        width: 100%;
    }
    .passwordSection input {
        width: 100%;
    }
    .passwordBottom {
        gap: 10px;
    }
    .importDateSection input {
        width: 100%;
    }
    .importDate2Section input {
        width: 100%;
    }
    .phoneContact input {
        width: 80%;
    }
    .trashIcon img {
        width: 40px;
    }
    .female,.male {
        gap: 8px;
    }
    .appsLogos {
        margin-left: unset;
    }
    /*This is media for frame11*/
    .silverMemberTitle {
        font-size: 16px;
    }
    .blockForIconDes p {
        font-size: 12px;
        line-height: 18px;
    }
    .blockForIcon2Des p {
        font-size: 12px;
        line-height: 11px;
    }
    .bonusIcons {
        min-width: 144px;
        max-width: 260px;
        min-height: 120px;
        max-height: 200px;
        padding: 10px 0;
    }
    .blockForIconDes{
        margin: 0;
    }
    .benefitsTop ,.moreBonus{
        grid-template-columns: repeat(2, 1fr);
        flex-wrap: wrap;
        width: calc(100% - 10px);
        margin: 0 auto;
    }
    .blockForIcon {
        padding-top: unset;
    }
    .benefitsTop img{
        width: 70px;
    }
    .blockFor2Icon {
        margin-top: unset;
    }
    .benefitsBottom img {
        width: 20%;
    }
    .benefitsBottom {
        flex-wrap: wrap;
    }
    .bonusIconsBottomSmall {
        padding-top: unset;
    }
    .galaxyTitle h4 {
        font-size: 16px;
    }
    .galaxyTitleGrey h4 {
        font-size: 16px;
    }
    .moreBonus img{
        width: 20%;
    }
    .moreBonus p {
        font-size: 12px;
    }
    .moreBonus h3 {
        font-size: 12px;
        line-height: 5px;
    }
    .moreBonus {
        flex-wrap: wrap;
    }
    /*This is media for frame12*/
    .rightPlace {
        width: 96%;
    }
    .productContent table {
        display: none;
    }
    .ordersAndPoints {
        display: none;
    }
    .ordersTitleNone {
        display: block;
    }
    .ordersTitleNone h3 {
        font-size: 16px;
        text-align: center;
    }
    .underBtn {
        justify-content: center;
        gap: 5px;
        margin-top: unset;
    }
    .productContentNone {
        display: block;
        width: calc(100% - 50px);
        margin: 0 auto;
    }
    .productContentNoneDes {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .productContentNoneDes h3 {
        font-size: 12px;
    }
    .productContentNoneDes p {
        font-size: 12px;
        text-align: end;
    }
    .productContent {
        justify-content: center;
    }
    .productContent div h4 {
        line-height: 30px;
        width: 159px;
    }
    .grLineNone {
        display: block;
    }
    .productContent {
        display: block;
    }

}

@media (min-width: 1921px) {
    .getMoreBlock img {
        width: 100%;
    }
    .percentage img {
        width: 100%;
    }
    .getMoreBtn button {
        left: unset;
        right: unset;
    }
    .orderDetails {
        margin-top: 90px;
    }
    .howItWorksTitle {
        width: 35vw;
    }
}
@media (max-width: 1600px) {
    .giftDescriptionBottom{
        max-width: 100%;
    }
}
@media (max-width: 1023px) {
    .mainContent .rightPlace{
        max-width: 95%;
    }
    .points {
        padding: 18px 12px;
    }
    .howItWorksContent .howItWorksBtn a {
        font-size: 20px;
        line-height: 150%;
    }
    .personalInfoSection input,
    .import-date-container input,
    .importDate2Section input,
    .import-date-container input,
    .importDate2Section input,
    .passwordSection input,
    .phoneContact input[type=text]{
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .inputForNameSmall, .inputForEvent, .inputForDateSmall, .field-wrap,.passwordNew, .passwordNewSecond, .passwordBottom,.phoneContact input[type=text]{
        width: 100%;
        gap: 14px;
    }
    .field-wrap{
        margin: 0!important;
    }
    .importDateSection form,.importDate2Section form,.passwordTop{
        flex-direction: column;
        gap: 15px;
    }
    .passwordBottom{
        margin-top: 14px;
    }
    .editContainer{
        flex-direction:row-reverse;
    }
    .balanceLine img{
        width: 100%;
    }
    .appsLogos{
        gap: 30px;
        margin: 15px auto;
        flex-wrap: wrap;
        justify-content: center;
        width: 90%;
    }
    .appsLogosItem img{
        width: 100%;
        max-width: 32px;
    }
    .contactTitle ,.passwordSection, .importDateTitle{
        margin-top: 10px;
    }
    .underBtn div button,.underBtn div button a {
        font-size: 14px;
        width: auto;
    }
    .underBtn{
        padding-top: 14px;
        flex-wrap: wrap;
        gap: 14px;
    }
    .pagination{
        width: 100%;
        margin: 24px auto!important;
    }
    body .pagination__itemss{
        margin: 0;
    }
    .leftSideMenu .menu-item a h4{
        font-size: 14px;
        font-weight: 700;
    }
    .timeClubImg {
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }
}
.howItWorksContent-first-block .howItWorksBtn{
    margin-top: 85px;
}
.underBtn a.active{
    color: #f6901b;
}
.rightPlace{
    max-width: 830px;
}
.leftSideMenu .menu-item a h4{
    color: #464646;
    font: 700 16px/1.75 Montserrat, sans-serif;
}
.leftSideMenu .menu-item a:hover,.leftSideMenu .menu-item a.active h4{
    color: #f6901b;
    transition: all .4s ease;
}
.rightSide,.rightPlace{
    max-width: 830px;
    width: 100%;
}
.rightSide >.jq-selectbox__dropdown{
    z-index: 2;
}
.timeClubImg {
    max-width: 293px;
    width: 100%;
    margin-bottom: 15px;
}
/* End */


/* Start:/local/templates/time/components/bitrix/news.list/benefits_all_list/style.css?1754405793517*/
.benefitDes p{
	cursor: pointer;
}
.benefitDes p[data-title]:hover {
	position: relative;
}
.benefitDes p[data-title]:hover:before {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 11;
	content: attr(data-title);
	margin-top: 0.5em;
	padding: 0.5em;
	width: auto;    /* change it */
	overflow: hidden;
	word-wrap: break-word;
	font-size: inherit;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
	box-sizing: border-box;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
/* End */


/* Start:/local/templates/time/components/bitrix/news.list/benefits_principles/style.css?17544057931158*/
.howItWorksContent-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}
.howItWorksContent-second-block img{
    max-width: 248px;
    height: 165px;
}
.howItWorksBtn a{
    padding: 15px 28px;
    background: #000;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    max-width: 201px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.howItWorksNone{
    display: none;
}
.howItWorksNone .firstPage{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}
.howItWorksNone .firstPage a{
    font-size: 14px;
    text-decoration: underline;
}
@media (max-width: 1279px) {
    .howItWorksBtn a{
        font-size: 14px;
        padding: 10px 15px;
    }
}
@media (max-width: 768px) {
    .howItWorksNone{
        display: block;
    }
    .howItWorksContent{
        display: none;
    }
    .howItWorksNone p{
        width: 95%;
    }
    .howItWorksNone .swiper-slide{
        background-color: unset!important;
    }
}
/* End */


/* Start:/local/templates/time/components/bitrix/news.list/personal_second_banner/style.css?1754405793403*/
.banner-bottom-title h2{
    text-align: center;
    font-weight: 600;
    font-size: 36px;
    line-height: 150%;
    color: #000;
    font-family: "Roboto", sans-serif;
    padding-top: 5%;
}
@media (max-width: 1023px) {
    .banner-bottom-title h2 {
        font-size: 24px;
    }
}
@media (max-width: 767px) {
    .banner-bottom-title h2 {
        padding-top: 30px;
        font-size: 18px;
    }
}
/* End */


/* Start:/local/templates/time/components/bitrix/news.list/personal_dropdown/style.css?17544057934233*/
.engraving-page-faq-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 50px 0;
}
.engraving-page-faq-title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.engraving-page-faq-title h3{
    font-size: 28px;
    font-weight: bold;
    line-height: 150%;
    margin: 0;
    padding: 0;
    color: #27251F;
}
.engraving-page-faq-top-block{
    display: flex;
    width: 100%;
}
.engraving-page-faq-top-block img{
    object-fit: cover;
    max-height: 470px;
    width: 100%;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

/* при работе с float */

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
.characteristics__list {
    max-width: 95%;
    margin: 5% auto;
    list-style: none;
}
.characteristics__item-description ul{
    list-style: inside;
}
.characteristics__item {
    margin-bottom: 15px;
}
.characteristics__title {
    position: relative;
    width: 100%;
    padding: 12px 15px;
    background-color: transparent;
    text-align: left;
    border-top:1px solid #000000;
    font-size: 18px;
    color: #000000;
    cursor: pointer;
    font-weight: bold;
}

.characteristics__title:after {
    content: '';
    position: absolute;
    right: 15px;
    bottom: 50%;
    width: 17px;
    height: 17px;
    border: 1px solid;
    border-color: transparent #27251F #27251F transparent;
    transform: rotate(45deg);
    transition: all ease .4s;
}

.characteristics__title.active:after {
    border-color: #27251F transparent transparent #27251F;
    transform: rotate(225deg);
    transition: all ease .4s;
}

.characteristics__title:after {
    border-color: transparent #27251F #27251F transparent;
}

.characteristics__title.active:after {
    border-color: #27251F transparent transparent #27251F;
}

.characteristics__description {
    margin-top: -2px;
    border-bottom:1px solid #27251F;
    font-size: 16px;
    color: #27251F;
    height: 0;
    overflow: hidden;
    transition: height .4s ease-in-out;
}

.characteristics__title:hover + .characteristics__description {
    border-color: #000000;
}

.characteristics__title:focus {
    outline:none;
}

.characteristics__title:hover,
.characteristics__title:focus {
    border-color: #000000;
}

.characteristics__title:hover:after,
.characteristics__title:focus:after {
    border-color: transparent #000000 #000000 transparent;
}

.characteristics__description.active {
    height: auto;
}

.characteristics__item-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #27251F;
}

.characteristics__item-description {
    padding: 15px 0;
}

.characteristics__item-description p {
    margin: 0 15px;
}

.characteristics__item-description:first-child {
    padding-top: 30px;
}

.characteristics__item-description:last-child {
    padding-bottom: 30px;
}
@media (max-width: 1279px) {
    .engraving-page-faq-container{
        gap: 30px;
        margin: 30px 0;
    }
    .engraving-page-faq-top-block img{
        object-fit: cover;
        max-height: 400px;
        width: 100%;
    }
}
@media (max-width: 1023px) {
    .engraving-page-faq-container{
        gap: 20px;
        margin: 20px 0;
    }
    .engraving-page-faq-top-block img{
        object-fit: cover;
        max-height: 360px;
    }
}
@media (max-width: 767px) {
    .engraving-page-faq-title h3{
        font-size: 24px;
    }
    .engraving-page-faq-top-block img{
        object-fit: cover;
        max-height: 306px;
        width: 100%;
    }
    .characteristics__title{
        font-size: 14px;
        padding: 10px 15px 10px 0;
    }
    .characteristics__item-description{
        font-size: 12px;
    }
    .characteristics__item-description:first-child {
        padding: 10px 0 10px 10px;
    }
    .characteristics__title:after {
        right: 5px;
        width: 12px;
        height: 12px;
    }
    .characteristics__list {
        margin: 30px auto;
    }
}


/* End */


/* Start:/local/templates/time/components/bitrix/news.list/accumulation_first_gift/style.css?1754405793150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */
/* /local/templates/time/assets/css/personal.css?175440579264669 */
/* /local/templates/time/components/bitrix/news.list/benefits_all_list/style.css?1754405793517 */
/* /local/templates/time/components/bitrix/news.list/benefits_principles/style.css?17544057931158 */
/* /local/templates/time/components/bitrix/news.list/personal_second_banner/style.css?1754405793403 */
/* /local/templates/time/components/bitrix/news.list/personal_dropdown/style.css?17544057934233 */
/* /local/templates/time/components/bitrix/news.list/accumulation_first_gift/style.css?1754405793150 */