.price-form {
&__img {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background-position: left center;
background-size: cover;
background-repeat: no-repeat;
@include respond(md) {
display: none;
}
}
&__wrap {
background-color: #fff;
box-shadow: 0px 3px 65px 0px rgba(0, 0, 0, 0.13);
margin-top: -90px;
z-index: 2;
position: relative;
}
&__form {
padding: 75px 93px 85px 0;
@include respond(md) {
padding: 40px;
}
@include respond(xs) {
padding: 30px 15px;
}
}
&__field {
margin-bottom: 17px;
label {
font-size: 15px;
font-weight: 700;
color: var(--color-black);
margin-bottom: 7px;
}
input, select {
font-size: 15px;
font-weight: 500;
color: #727272;
height: 63px;
background-color: var(--color-white);
box-shadow: 0px 3px 43px 0px rgba(0, 0, 0, 0.05);
margin-bottom: 0;
}
}
&__tab-wrap,
&__content-label {
label {
font-size: 15px;
font-weight: 700;
color: var(--color-black);
margin-bottom: 7px;
}
}
&__tab {
border: 0;
height: 63px;
width: 100%;
background-color: #fff;
box-shadow: 0px 3px 65px 0px rgba(0, 0, 0, 0.13);
li {
width: 50%;
.nav-link {
text-align: center;
border: 0;
width: 100%;
height: 100%;
padding: 0;
color: var(--color-black);
font-size: 17px;
font-weight: 700;
@include border-radius(0);
background-color: var(--color-white);
&.active {
background-color: var(--color-primary);
color: var(--color-white);
}
}
}
}
&__tab-content {
display: flex;
align-items: center;
justify-content: center;
height: 63px;
width: 100%;
background-color: #fff;
box-shadow: 0px 3px 65px 0px rgba(0, 0, 0, 0.13);
li {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
a {
color: var(--color-white);
background-color: #000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
clip-path: polygon(0 0, calc(100% - 27px) 0%, 100% 100%, 0% 100%);
}
&.price {
font-size: 35px;
font-weight: 700;
color: var(--color-black);
}
}
}
&__shape {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&__shape-color {
&::before {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 100%;
background-color: var(--color-primary);
content: "";
clip-path: polygon(100% 0, 0 0, 100% 100%);
z-index: 3;
}
}
}