GRAYBYTE

Back Back Up Advanced Editor

.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;
        }
    }
}