/* Structure */
body{position: relative; font: 18px/100% 'Roboto'; font-weight: 400; height: 100%; min-width: 340px; background: #fff; color: #000;}
#container{min-height: 100%; padding-bottom: 160px; position: relative; max-width: 1180px; margin: 0 auto;}
header{height: 94px; display: flex; padding-top: 18px; align-items: flex-end; margin-bottom: 45px;}
main{min-height: 300px; padding-bottom: 45px;}
footer{height: 160px; padding: 36px 0 56px 0; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #eee;
display: flex; justify-content: space-between;}
#overlay{background: #333; opacity: 0.7; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%;
display: none;}
.inner{max-width: 1600px; margin: 0 auto;}

/* Buttons */
.button{font-weight: 500; height: 35px; border-radius: 18px; border: 1px solid #00d8ae; display: flex; align-items: center;
padding: 0 32px; cursor: pointer; justify-content: center; transition: all 0.5s ease; font-size: 18px; line-height: 100%;}
.button:hover{background: #00d8ae;}
.button.black{background: #000; border-color: #000; color: #fff;}
.button.black:hover{color: #00d8ae;}
.button.big{height: 52px; padding: 0 82px; border-radius: 26px;}
.button.green{}
.button.grey{}
.button.green-text{}
.button.forward{}
.button.back{}
.button.login{}

.tab-buttons{margin-bottom: 20px; display: flex; gap: 15px; height: 41px;}
.tab-buttons > *{border-radius: 10px; background: #eee; display: flex; align-items: center; color: #414141; cursor: pointer;
padding: 0 20px; font-weight: 500;}
.tab-buttons > *.active{color: #000; background: #00d8ae;}

.tumbler{width: 27px; height: 61px; position: relative; background: url(../images/select.svg); cursor: pointer;}
.tumbler::after{width: 27px; height: 27px; border-radius: 14px; box-shadow: 0px 0px 8.4px 0px #00000040; display: block;
content: ''; background: #00d8ae; transition: all 0.4s ease}
.tumbler.bottom::after{margin-top: 34px;}




/* Header */
header #logo{width: 180px;}
header #logo img{display: block; max-width: 100%;}
header > nav{margin-left: 105px;}
header > nav ul.main-menu{display: flex; gap: 50px;}
header > nav ul.main-menu a{display: inline-flex; background: url(../images/point.svg) left center no-repeat; background-size: contain;
padding-left: 26px; transition: all 0.5s ease;}
header > nav ul.main-menu a:hover{color: #00d8ae;}
header div.right{margin-left: auto; display: flex; flex-direction: column; gap: 17px; align-items: flex-end;}
header div.right div.language span{text-transform: uppercase; color: #888; cursor: pointer;}
header div.right div.language span.active{color: #000;}
header div.right div.user-section{position: relative; padding: 0 0 10px 0; margin-bottom: -10px;}
header div.right div.user-section div.user-name{min-height: 34px; display: inline-flex; align-items: center; padding-left: 44px;
background: url(../images/profile.svg) left center no-repeat; background-size: contain; z-index: 1; position: relative;}
header div.right div.user-section nav{position: absolute; padding: 20px; border-radius: 20px; box-shadow: 1px 0px 20.6px 4px #0000001a;
width: 290px; top: 40px; right: 0; display: none; background: #fff;}
header div.right div.user-section:hover nav{display: flex; flex-direction: column; align-items: flex-start; z-index: 10;}
header div.right div.user-section nav > *{padding-left: 20px; background-position: left top 1px; background-repeat: no-repeat;
background-size: 15px 15px; transition: all 0.5s ease;}
header div.right div.user-section nav span.bonuses{background-image: url(../images/star.svg); font-size: 14px; margin-bottom: 15px;
padding-bottom: 15px; border-bottom: 1px solid #eee;}
header div.right div.user-section nav a.info{background-image: url(../images/edit.svg); margin-bottom: 18px;}
header div.right div.user-section nav a.rents{background-image: url(../images/menu.svg);}
header div.right div.user-section nav a:hover{color: #00d8ae;}
header div.right div.user-section nav span.logout{border-top: 1px solid #eee; padding-top: 15px; margin-top: 15px;
color: #414141; background-image: url(../images/sign-out.svg); background-position: bottom 2px left; cursor: pointer;}

/*
#mobile-menu-button{background: url(../images/menu.svg) center no-repeat; width: 40px; height: 40px; cursor: pointer;
margin: 0 20px 0 0}
#mobile-menu{background: #bbb; width: 250px; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: none;
padding: 40px 20px 20px 20px;}
#mobile-menu li{margin-bottom: 7px;}
span.mobile-menu-close{width: 15px; height: 15px; position: absolute; right: 15px; top: 15px; cursor: pointer;
background: url(../images/close.svg) center no-repeat; background-size: contain;}
*/

/* Main */
main h1{font: 24px/100% 'Uncage'; font-weight: 600; margin-bottom: 30px; text-transform: uppercase;}
main > section{margin-bottom: 30px; display: flex; position: relative; width: 100%;}

/* Current rent */
section.current-rent{padding: 30px 30px 30px 56px; background: #f5f5f5; border-radius: 20px; align-items: flex-end;}
section.current-rent > div.title{position: absolute; top: 40px; left: 428px;}
section.current-rent > div.title div{font: 24px/100% 'Uncage'; font-weight: 600; margin-bottom: 10px; text-transform: uppercase;}
section.current-rent > div.title span.status{background: #00d8ae; border-radius: 13px; height: 26px; padding: 3px 15px;
font-weight: 700; font-size: 16px;}
section.current-rent > a.go-to-rent{position: absolute; right: 30px; top: 40px; color: #414141; padding-right: 26px;
background: url(../images/arrow-right.svg) no-repeat right center;}
section.current-rent div.photo{background: url(../images/point.svg) center no-repeat; background-size: contain;
display: flex; flex-direction: column; align-items: flex-start; width: 32opx;}
section.current-rent div.photo img{max-width: 100%;}
section.current-rent div.photo span{background: #fff; border-radius: 14px; height: 28px; padding: 3px 10px; display: flex;
align-items: center; margin-bottom: 8px;}
section.current-rent div.area{padding: 20px; background: #fff; border-radius: 20px; height: 168px; display: flex; flex-direction: column;
box-shadow: 1px 0px 20.6px 4px #0000001a; width: 346px; gap: 20px; align-items: flex-start;}
section.current-rent div.area.first{margin: 0 30px 0 52px; justify-content: space-between;}
section.current-rent div.area div.title{padding-left: 35px; background-position: left center; background-repeat: no-repeat;
background-size: 25px 25px; height: 25px; display: flex; align-items: center;}
section.current-rent div.area div.title.calendar{background-image: url(../images/calendar.svg);}
section.current-rent div.area div.title.wallet{background-image: url(../images/wallet.svg);}
section.current-rent div.area div.title.wallet span{margin-left: 5px; color: #d80000;}
section.current-rent div.area div.period{font-weight: 700; font-size: 24px;}
section.current-rent div.area div.tarrif{color: #414141;}
section.current-rent div.area div.price{font-weight: 700; font-size: 32px; margin-top: -4px;}

/* Breadcrums */
div.breadcrumbs{color: #414141; margin-bottom: 30px;}
div.breadcrumbs a{color: #414141; padding-right: 25px; background: url(../images/arrow-right-grey.svg) right center no-repeat;
margin-right: 6px;}

/* Products */
section.bikes-list{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
section.bikes-list > div{box-shadow: 0px 0px 21px 0px #0000001A; height: 570px; border-radius: 20px; background: #fff;
padding: 30px; display: flex; flex-direction: column;}
section.bikes-list a.image{margin-bottom: 15px;}
section.bikes-list a.image img{display: block; max-width: 100%;}
section.bikes-list a.name{font-weight: 500; line-height: 120%;}
section.bikes-list div.bottom{margin-top: auto;}
section.bikes-list div.term{border-bottom: 1px solid #00d8ae; margin-bottom: 15px; padding-bottom: 7px;}
section.bikes-list div.options{margin-bottom: 15px; display: flex; gap: 20px;}
section.bikes-list div.options div.prices{display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 3px;}
section.bikes-list div.options div.prices span:nth-child(2n){text-align: right;}
section.bikes-list div.buttons{display: flex; flex-direction: column; gap: 10px;}

/* Product page */
main > div.product-columns{display: flex; justify-content: space-between; align-items: flex-start;}
main > div.product-columns > div.image{width: 49%;}
main > div.product-columns > div.data{width: 49%;}
main > div.product-columns > div.image{background: #f5f5f5; border-radius: 25px; padding: 30px;}
main > div.product-columns > div.image div.swiper{margin-bottom: 20px;}
main > div.product-columns > div.image div.swiper-slide img{margin: 0 auto; display: block;}
div.product-gallery-controls{position: relative;}
div.product-gallery-controls > div{width: 30px; height: 30px; cursor: pointer; position: absolute; background-position: center;
background-repeat: no-repeat; z-index: 10; opacity: 0;}
div.product-gallery-prev{background-image: url(../images/chevron-left.svg); left: 0;}
div.product-gallery-next{background-image: url(../images/chevron-right.svg); right: 0;}
div.product-gallery-pagination{display: flex; justify-content: center; gap: 15px;}
div.product-gallery-pagination > span{background: #fff; opacity: 1; margin: 0 !important; width: 12px; height: 12px;}
div.product-gallery-pagination > span.active{background: #00d8ae;}

main > div.product-columns > div.data h1{margin-bottom: 2px;}
main > div.product-columns > div.data h2{font: 18px/100% 'Roboto'; font-weight: 500; margin-bottom: 10px;}
main > div.product-columns > div.data div.period{display: flex; align-items: center; gap: 20px; margin-bottom: 15px;}
main > div.product-columns > div.data div.period > span{color: #414141;}
main > div.product-columns > div.data div.period div.tab-buttons{margin: 0;}
main > div.product-columns > div.data div.price{font: 32px/100% 'Roboto'; font-weight: 700; margin-bottom: 20px;}
main > div.product-columns > div.data .button.big{margin-bottom: 27px;}
main > div.product-columns > div.data div.properties{background: #f5f5f5; border-radius: 15px; padding: 30px;}
main > div.product-columns > div.data div.properties > div:first-child{font: 18px/100% 'Uncage'; font-weight: 500;
margin-bottom: 20px; text-transform: uppercase;}
main > div.product-columns > div.data div.properties ul{display:  flex; flex-direction: column; gap: 16px;}
main > div.product-columns > div.data div.properties li{display: flex;}
main > div.product-columns > div.data div.properties li span:last-child{text-align: right;}
main > div.product-columns > div.data div.properties li span.dots{flex-grow: 1; margin: 0 5px; border-bottom: 2px dotted #00d8ae;}


/* Forms */


/* Footer */
footer div.socials{padding-left: 30px; background: url(../images/illustration-bottom.svg) left top no-repeat;}
footer div.socials > div{margin-bottom: 8px;}
footer div.socials a{display: inline-flex; background-position: center; background-repeat: no-repeat; margin-right: 10px;
background-size: contain; width: 32px; height: 32px;}
footer div.socials a.messenger-max{background-image: url(../images/social-max.svg);}
footer div.socials a.messenger-telegram{background-image: url(../images/social-telegram.svg);}
footer div.socials a.messenger-vk{background-image: url(../images/social-vk.svg);}
footer div.links{display: flex; gap: 65px;}