@import "../helpers/colors.scss";

.content-wrapper {
    // padding: 10% 2%;
    padding-top: 92px;
    width: 100%;
    background-color: #f7f7f7;

    .floatingCart {
        display: none;
    }

    main {
        .main-top-bar {
            max-height: 70px;
            border-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            background-color: #276462;
            border: 1px solid #ededed;
            box-shadow: 0px 3px 6px #0000000d;
            height: 70px;
            line-height: 70px;
            overflow: hidden;

            .bar-content-wrapper {
                // background: url(../../../img/pathBg.svg);
                // background-size: contain;
                // background-position: center center;
                // background-repeat: no-repeat;
                // width: 100%;
                // text-align: center;
                // margin: 0 auto;

                a {
                    &:hover {
                        text-decoration: none;
                    }
                    .text-btn-wrapper {
                        height: 40px;
                        margin: 15px;
                        border: 1px solid #fff;
                        border-radius: 8px;
                        h3 {
                            padding-left: 46px;
                            line-height: 40px;
                            font-family: "IstokWebBold", sans-serif;
                            font-weight: 700;
                            color: #fff;
                            text-align: center;
                            font-size: 2rem;
                            position: relative;
                            top: 0;
                            left: 50%;
                            width: fit-content;
                            position: relative;
                            @include hor-center();
                            &::before {
                                content: " ";
                                background: url(../../../img/icons/docAdd.svg);
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center center;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                @include ver-center();
                                height: 30px;
                                width: 34px;
                            }
                        }
                    }
                }
            }
        }
    }

    // #clientNum {
    //   @include inputOrder(100%);
    // }

    section {
        &.ordini {
            .loader {
                margin: 0 auto;
                border: 8px solid $lightGray;
                /* Light grey */
                border-top: 8px solid $green;
                /* Blue */
                border-radius: 50%;
                width: 60px;
                height: 60px;
                animation: spin 1.5s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
            ul {
                &.pagination {
                    display: none;
                }
            }
            .orderTableTitle {
                h6 {
                    color: $black;
                    @include boldFont();
                    font-size: 2rem;
                }
            }

            .singleOrder {
                border-bottom: 1px solid #676767;
                min-height: 50px;
                p {
                    &.euroBonus {
                        background: $green;
                        text-align: center;
                        color: #fff;
                        @include boldFont();
                        font-size: 2.1rem;
                        @include borderRadius(20px);
                        line-height: 30px;
                        margin: 0.75rem 0;
                        width: 80%;
                        &.red {
                            background: red;
                        }
                    }
                }
            }

            .ordersTable {
                height: 80px;

                h6 {
                    color: $black;
                    font-size: 2rem;
                    line-height: 40px;
                    position: relative;
                    @include ver-center();
                }

                .toggleable {
                    // text-align: right;
                    // line-height: 40px;
                    position: relative;

                    a {
                        background: $green;
                        border-radius: 20px;
                        @include boldFont();
                        text-transform: uppercase;
                        padding: 10px 25px;
                        position: absolute;
                        // margin-right: 60px;
                        border-color: $green;
                        // margin-bottom: 5px;
                        // margin-top: 5px;
                        @include abs-center();
                        &::after {
                            content: " ";
                            height: 30px;
                            position: absolute;
                            background: $darkGray;
                            width: 2px;
                            right: -30px;
                            top: 50%;
                            @include ver-center();
                        }

                        &:hover {
                            background: $hoverGreen;
                        }
                    }

                    i {
                        margin: 0;
                        padding: 0;
                        cursor: pointer;
                        &.ci {
                            &.ci-arrowDown {
                                position: relative;

                                &::before {
                                    transform: rotate(-90deg);
                                    content: " ";
                                    background: url(../../../img/icons/arrowDown.svg)
                                        no-repeat center center;
                                    width: 30px;
                                    height: 30px;
                                    position: absolute;
                                    right: 15px;
                                    transition: 0.5s;
                                    top: calc(50% + 1rem);
                                }
                                &[aria-expanded="true"] {
                                    &::before {
                                        transform: rotate(-0deg);
                                    }
                                }
                            }
                        }
                    }
                    img {
                        cursor: pointer;
                        position: absolute;
                        @include ver-center();
                        transition: 0.5s;
                        right: 15%;
                        &[aria-expanded="true"] {
                            transform: translate(0%, -50%) rotate(90deg);
                            -moz-transform: translate(0%, -50%) rotate(90deg);
                            -webkit-transform: translate(0%, -50%) rotate(90deg);
                        }
                    }
                }
            }

            .card.card-body {
                border: none;

                .productDesc {
                    margin-bottom: 25px;
                    color: $black;

                    h4 {
                        @include boldFont();
                        font-size: 1.6rem;
                        text-transform: uppercase;
                    }

                    h6 {
                        font-size: 1.4rem;
                    }
                    .list-group-item {
                        border: unset;
                        &.active {
                            background-color: $green !important;
                        }
                    }
                }

                .rightBox {
                    background: #ededed;
                    padding: 10px 0 5px 0;

                    .col-sm-6 {
                        padding: 1% 5%;
                    }

                    table {
                        width: 100%;

                        thead {
                            th {
                                padding: 15px 0;
                                text-align: center;
                                background: #fff;
                            }
                        }

                        tr {
                            text-align: left;
                        }

                        td {
                            width: 50%;
                            padding: 15px 0;
                            color: $black;

                            .bold {
                                font-weight: bold;
                                font-size: 1.6rem;
                            }

                            p {
                                font-size: 1.4rem;
                            }
                        }

                        &.firstTable {
                            position: relative;

                            &::after {
                                content: " ";
                                position: absolute;
                                height: 100%;
                                width: 1px;
                                background: #fff;
                                right: -10%;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }

        &.ordini-flow {
            // .container-card {
            //   width: 75%
            // }

            .sw-theme-dots {
                .toolbar > .btn {
                    background: $green;
                    border-radius: 20px;
                    font-size: 1.3rem;
                    @include boldFont();
                    text-transform: uppercase;
                    padding: 10px 60px;
                    margin-right: 20px;
                }
            }

            .sw > .nav .nav-link {
                padding: 0.5rem 2rem;
            }

            .tab-pane {
                h4 {
                    color: $green;
                    @include boldFont();
                    font-size: 2rem;
                    margin-top: 2rem;
                    display: inline;
                    text-transform: uppercase;
                    line-height: 5rem;

                    &.light {
                        color: $black;
                        @include regularFont();
                    }
                }

                .b2 {
                    border-color: $black;
                }

                a {
                    color: $black;
                    margin-left: 25px;
                    text-decoration: underline;

                    // &:hover {}
                }

                input[type="radio"].productSelection {
                    display: none;
                }

                &#step-2 {
                    .flowSection {
                        .tab-pane {
                            h4 {
                                display: block;
                            }
                        }

                        .col-sm-4 {
                            margin-bottom: 25px;
                        }

                        .checkBoxWrapper {
                            .custom-checkbox {
                                margin-top: 0;
                            }
                        }
                    }

                    .selection-wrapper {
                        border: 3px solid $lightGray;
                        width: 75%;
                        text-align: center;
                        border-radius: 25px;
                        cursor: pointer;
                        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

                        &.active {
                            border-color: $green;
                        }

                        h4 {
                            // line-height: 1rem;
                            color: $black;
                        }

                        p {
                            color: #5c5c5c;
                            font-size: 1.6rem;
                            @include boldFont();
                        }

                        input[type="radio"] {
                            visibility: hidden;
                            // opacity: 0;
                        }

                        // input[type="radio"] {
                        //     &:checked {
                        //          height: 100px;
                        //     }
                        // }
                    }
                }

                &#step-3 {
                    .row {
                        padding: 5% 0;
                    }

                    .selection-wrapper {
                        border: 3px solid $lightGray;
                        width: 95%;
                        text-align: center;
                        border-radius: 25px;
                        cursor: pointer;
                        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
                        padding: 5%;

                        &.active,
                        &:hover {
                            border-color: $green;
                        }

                        h4 {
                            color: $black;
                            line-height: 1.5;
                        }
                    }
                }

                &#step-4 {
                    #additionalProductInfo2 {
                        display: none;
                    }

                    .selection-wrapper {
                        border: 3px solid $lightGray;
                        width: 95%;
                        text-align: center;
                        border-radius: 25px;
                        cursor: pointer;
                        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
                        padding: 5%;

                        &.active,
                        &:hover {
                            border-color: $green;
                        }

                        h4 {
                            color: $black;
                            line-height: 1.5;
                        }
                    }

                    .addSectionWrapper {
                        border: 3px solid $lightGray;
                        width: 95%;
                        text-align: center;
                        border-radius: 25px;
                        cursor: pointer;
                        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
                        padding: 5%;
                        margin: 20px 0;

                        &.active {
                            border-color: $green;
                        }

                        p {
                            font-size: 1.6rem;
                            color: #2b2b2b;
                            margin-bottom: 0;
                        }
                    }
                }

                &#step-5,
                &#step-6 {
                    p {
                        color: $green;
                        font-size: 2.6rem;
                        min-height: 200px;
                    }
                }

                &#step-5 {
                    padding: 0 5%;

                    label {
                        font-size: 1.5rem;
                        margin-bottom: 0;

                        span {
                            color: $green;
                            font-size: 2rem;
                        }
                    }

                    input {
                        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
                        border-radius: 20px;
                        color: #5c5c5c;
                        font-family: "IstokWebBold", sans-serif;
                        font-weight: 700;
                        border: 1px solid #ededed;
                        margin-bottom: 20px;

                        &:focus {
                            outline: none;
                        }
                    }

                    .img-wrapper {
                        width: 100%;

                        img {
                            width: 100%;
                        }
                    }

                    .graph {
                        width: 100%;

                        img {
                            width: 100%;
                        }
                    }

                    // #moduloForm {

                    .cChecks {
                        label {
                            border: 3px solid #ededed;
                            width: 95%;
                            text-align: center;
                            border-radius: 25px;
                            cursor: pointer;
                            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
                            // padding: 5%;

                            h4 {
                                font-size: 1rem;
                            }

                            &.active {
                                border-color: $green;
                            }
                        }

                        .col-lg-3 {
                            margin-bottom: 10px;
                        }

                        input[type="radio"] {
                            position: relative;
                            box-shadow: none;
                            opacity: 0;
                            // opacity: 0;
                            // &::before {
                            //   content: "◉";
                            //   font-size: 2rem;
                            //   color: #276462;
                            //   position: absolute;
                            //   top: -6px;
                            //   left: -3px;
                            //   width: 10px;
                            //   height: 10px;
                            // }
                        }
                    }

                    ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;

                        li {
                            a {
                                margin-left: 0;
                                position: relative;

                                i {
                                    position: absolute;
                                    left: 10px;
                                    font-size: 2rem;
                                    color: $green;
                                }
                            }

                            label {
                                min-width: 250px;
                            }
                        }
                    }
                    // }

                    table {
                        &.inputTable {
                            tr {
                                td {
                                    font-size: 1.4rem;
                                    border-top: none;

                                    input {
                                        margin-bottom: 0;
                                        width: 150px;
                                    }

                                    span {
                                        color: #276462;
                                        font-size: 2rem;
                                    }
                                }
                            }
                        }
                    }

                    .cWidth {
                        .selection-wrapper {
                            padding: 5px;
                            border: 3px solid #ededed;
                            border-radius: 20px;
                            margin-bottom: 20px;

                            &.active {
                                border: 3px solid $green;
                            }
                        }
                    }

                    .imgCheckBox {
                        margin-left: 0;

                        img {
                            width: 100%;
                        }
                    }

                    input[name="form"] {
                        opacity: 0;
                        width: 100%;
                        height: 100%;
                    }
                    input[type="radio"]:checked + label {
                        border-color: #276462;
                    }
                }

                &#step-7 {
                    .showMobile {
                        display: none;
                    }
                    #note {
                        @include borderRadius(20px);
                        border: 1px solid #ededed;
                        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
                        font-size: 1.6rem;
                        font-family: "IstokWebBold", sans-serif;
                        font-weight: 700;
                        padding: 5px 10px;
                    }
                    label {
                        color: #2b2b2b;
                        font-size: 1.2rem;
                    }
                    div {
                        &.d-inline-flex {
                            margin-top: 35px;
                            div {
                                display: inline;
                            }
                        }
                    }

                    h3 {
                        color: $black;
                        @include boldFont;
                        font-size: 2rem;
                    }

                    ul {
                        padding-left: 0;
                        margin-top: 35px;

                        li {
                            display: inline;

                            a {
                                border-radius: 25px;
                                background: $green;
                                color: #fff;
                                padding: 5px 20px;
                                font-size: 2.6rem;
                                margin-left: 0;
                                text-decoration: none;
                            }

                            &:nth-child(2) {
                                position: relative;
                                margin-top: 20px;
                                display: block;

                                input[type="checkbox"] {
                                    box-shadow: none;
                                    border-radius: 6px;
                                    border: 3px solid #ededed;
                                    width: 15px;
                                    height: 15px;
                                }

                                label {
                                    font-size: 1.5rem;
                                    color: #676767;
                                    display: inline;
                                    margin-left: 15px;

                                    span {
                                        color: $green;
                                        font-size: 1.6rem;
                                        @include boldFont();
                                    }
                                }
                            }
                        }
                    }

                    div {
                        &.d-inline-flex {
                            input {
                                border-radius: 20px;
                                border: 1px solid #ededed;
                                box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
                                font-size: 1.6rem;
                                @include boldFont();
                                padding: 5px 10px;

                                &:focus {
                                    outline: none;
                                }
                            }

                            button {
                                background: $green;
                                border-radius: 20px;
                                font-size: 1.3rem;
                                font-family: "IstokWebBold", sans-serif;
                                font-weight: 700;
                                text-transform: uppercase;
                                padding: 10px 30px;
                                margin-left: 20px;
                                border: 1px solid $green;
                                color: #fff;
                            }
                        }
                    }
                }
            }

            .flowSection {
                padding: 25px 0;
                border-bottom: 1px solid #ededed;

                label {
                    color: $black;
                    font-size: 1.2rem;
                    &.error {
                        color: red;
                    }
                }
                .custom-checkbox {
                    margin-top: 3rem;
                    .custom-control-label {
                        &::before {
                            left: auto;
                        }
                        &::before,
                        &::after {
                            right: -2.5rem;
                            left: unset;
                            width: 2rem;
                            height: 2rem;
                            top: 0;
                        }
                    }
                    .custom-control-input:checked ~ .custom-control-label {
                        &::before {
                            border-color: $green;
                            background-color: $green;
                        }
                    }
                }

                input:not([type="checkbox"]),
                select {
                    @include inputOrder(100%, 39px);
                }

                .checkBox {
                    top: 75%;
                    position: absolute;
                    right: 25%;
                }

                input[type="checkbox"] {
                    border: none;
                    box-shadow: none;
                    border-radius: 6px;
                    border: 3px solid $lightGray;
                    width: 10%;
                    float: right;
                }

                .checkBoxLabel {
                    position: absolute;
                    top: 30%;
                    right: 17%;
                }

                a {
                    line-height: 8rem;
                    @include boldFont();
                    font-size: 1.6rem;
                    color: $black;
                    position: relative;
                    text-decoration: none;

                    &:hover {
                        text-decoration: none;
                    }

                    i {
                        height: 30px;
                        width: 30px;

                        &.ci-arrowDown {
                            &::after {
                                content: " ";
                                background: url(../../../img/icons/arrowDown.svg)
                                    no-repeat center center;
                                width: 30px;
                                height: 30px;
                                position: absolute;
                                top: 0;
                                right: -40px;
                            }
                        }
                    }
                }
            }

            .miniCart {
                .container-card {
                    padding: 0;
                    @include borderRadius(20px);
                    h5 {
                        margin: 25px;
                        font-size: 1.6rem;
                    }

                    .cart {
                        margin: 0 auto;

                        table {
                            width: 100%;
                            margin: 1rem 0;

                            tr {
                                line-height: 2;

                                td {
                                    text-transform: uppercase;
                                    font-size: 1.3rem;
                                    min-width: 80px;
                                    @include boldFont();
                                }
                            }
                        }

                        .col-sm-6 {
                            height: 35px;
                            padding: 0;
                        }

                        p,
                        span {
                            text-transform: uppercase;
                            font-size: 1.3rem;
                            @include boldFont();
                        }
                    }
                }

                .priceBox {
                    background: #6caaa8;
                    border-bottom-left-radius: 20px;
                    -moz-border-bottom-left-radius: 20px;
                    -webkit-border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    -moz-border-bottom-right-radius: 20px;
                    -webkit-border-bottom-right-radius: 20px;
                    &.do-red {
                        background: #a91111bd;
                    }
                    h5,
                    span {
                        color: #fff;
                        font-size: 2rem;
                        @include regularFont();
                        margin: 25px 0;
                    }
                }

                .miniCartInfo {
                    display: none;
                    padding: 0 5% 5%;

                    .top-bar {
                        border-bottom-left-radius: 20px;
                        border-bottom-right-radius: 20px;

                        background: #a3cbc9;

                        a {
                            width: 100%;
                            font-size: 1.6rem;
                            padding: 15px 0;
                            margin: 0;
                            text-align: center;
                            color: #fff;
                            background-color: transparent;
                            border-color: transparent;
                            &:hover {
                                background-color: transparent;
                                border-color: transparent;
                            }
                        }
                    }

                    ul {
                        margin-top: 50px;
                        padding: 0;

                        li {
                            list-style-type: none;
                            border: 3px solid $green;
                            border-radius: 20px;
                            padding: 10px 0;
                            margin-bottom: 20px;

                            &:hover {
                                background: $green;
                            }

                            &:hover a {
                                color: #fff !important;
                                text-decoration: none;
                            }

                            a {
                                color: $green;
                                font-size: 1.5rem;
                                @include boldFont();
                            }
                        }
                    }
                }
            }
        }
    }
}

.do-draft {
    background: #f970624d !important;
    .row {
        p,
        strong {
            font-size: 16px;
        }
    }
    .do-delete-product {
        float: right;
    }
    #doDraftsAccordion {
        .card {
            background: transparent;
            .do-collapse {
                width: 100%;
                padding: 0;
                background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTYgOSI+DQogIDxwYXRoIGlkPSJQb2x5Z29uXzYiIGRhdGEtbmFtZT0iUG9seWdvbiA2IiBkPSJNOCwwbDgsOUgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYgOSkgcm90YXRlKDE4MCkiIGZpbGw9IiM2Y2FhYTgiLz4NCjwvc3ZnPg0K)
                    no-repeat 98% 50%;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                &:hover {
                    text-decoration: none;
                }
                .do-order-info {
                    div,
                    strong {
                        font-size: 2rem;
                        color: $black;
                        text-align: left;
                    }
                }
            }
        }

        .do-complete,
        .do-delete,
        .do-delete-product {
            cursor: pointer;
            color: #222;
            font-size: 18px;
            form {
                button {
                    background: transparent;
                    border: unset;
                    font-size: 18px;
                }
            }
        }
    }
}
@media (max-width: 1120px) {
    .content-wrapper main .main-top-bar .bar-content-wrapper a h3::before {
        left: 25%;
    }
}

.responsive-50 {
    .form-check {
        padding-left: 0;
    }
}

@media (max-width: 1024px) {
    .content-wrapper section.ordini-flow .flowSection label {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        section.ordini-flow .miniCart .container-card {
            display: none;
        }

        main {
            .main-top-bar {
                .bar-content-wrapper {
                    background-size: cover;
                    background-position: left;
                    background-repeat: no-repeat;

                    a {
                        h3 {
                            &::before {
                                left: 20%;
                            }
                        }
                    }
                }
            }
        }

        .floatingCart {
            border-radius: 20px;
            display: block;
            position: fixed;
            bottom: 10%;
            width: 88%;
            z-index: 99;

            .cartInfo,
            .total {
                padding: 20px;
            }

            .cartInfo {
                max-height: 160px;
                background: #ededed;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                color: $black;
                overflow-y: scroll;

                h4 {
                    text-transform: uppercase;
                    font-size: 1.4rem;
                    @include boldFont();
                    color: $green;
                    margin-bottom: 15px;
                }

                h5 {
                    font-size: 1.2rem;
                    @include boldFont();
                }
            }

            .total {
                background: #6caaa8;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                color: #fff;
                font-size: 2rem;
                span {
                    font-size: 2rem;
                }

                h5 {
                    text-transform: uppercase;
                    font-size: 2rem;
                }

                h5 {
                    font-size: 2rem;
                    @include boldFont();
                }
            }
        }

        section {
            &.ordini {
                .ordersTable {
                    h6 {
                        font-size: 1.5rem;
                    }

                    .toggleable {
                        i.ci.ci-arrowDown::before {
                            // top: unset;
                            bottom: 100%;
                        }
                    }
                }
            }

            &.ordini-flow {
                .tab-pane {
                    &#step-2 {
                        .selection-wrapper {
                            width: 100%;
                        }
                    }

                    &#step-3,
                    &#step-4 {
                        .col-sm-3 {
                            &.largeTablet {
                                flex: 0 0 50%;
                                max-width: 50%;
                            }
                        }
                    }

                    &#step-7 {
                        .hideMobile {
                            display: none;
                        }

                        .showMobile {
                            display: block;
                            padding-bottom: 35px;
                            margin-left: 0;

                            .rightCol {
                                float: right;
                                margin-bottom: 125px;

                                div {
                                    &.d-inline-flex {
                                        .input-group {
                                            width: 50%;
                                        }
                                    }
                                }
                            }

                            .leftCol {
                                float: left;

                                ul {
                                    li {
                                        display: block;
                                        margin-bottom: 30px;
                                        margin-left: 0;

                                        input {
                                            position: relative;
                                        }

                                        label {
                                            position: absolute;
                                        }
                                    }
                                }
                            }

                            table {
                                width: 100%;
                                margin-top: 30px;
                                border-top: 1px solid #676767;

                                tr {
                                    line-height: 2;

                                    th {
                                        font-size: 1.4rem;
                                        @include boldFont();
                                        color: $green;
                                        padding-top: 50px;
                                    }

                                    td {
                                        @include boldFont();
                                        font-size: 1.2rem;

                                        &.left {
                                            text-align: left;
                                            padding-left: 15px;
                                        }

                                        &.right {
                                            text-align: right;
                                        }

                                        a {
                                            color: $green;
                                            background-color: transparent;
                                            border-color: transparent;
                                            &:focus,
                                            &:hover {
                                                background-color: transparent;
                                                border-color: transparent;
                                            }
                                        }
                                    }

                                    &.total {
                                        td {
                                            font-size: 2.6rem;
                                            color: $green;
                                            span {
                                                font-size: 2.6rem;
                                            }

                                            strike {
                                                font-size: 1.5rem;
                                            }
                                        }
                                    }
                                }
                            }

                            .btns {
                                margin-top: 20px;
                                div {
                                    margin-bottom: 10px;
                                }
                                a {
                                    display: block;
                                    text-align: center;
                                    margin-left: 0;
                                    width: 100%;
                                    border: 3px solid $green;
                                    color: $green;
                                    text-decoration: none;
                                    border-radius: 20px;
                                    padding: 7px 20%;
                                    font-size: 1.3rem;
                                    @include boldFont();
                                }
                            }
                        }
                    }
                }

                .flowSection {
                    label {
                        min-height: 45px;
                    }
                    .custom-checkbox {
                        margin-top: 6rem;
                    }

                    input[type="checkbox"] {
                        width: 15%;
                    }

                    .checkBox {
                        right: 15%;
                    }

                    .checkBoxLabel {
                        top: 26%;
                        right: 30%;
                    }
                }
            }
        }
    }

    .do-draft {
        #doDraftsAccordion {
            .card {
                .do-collapse {
                    .do-order-info {
                        div,
                        strong {
                            font-size: 1.7rem;
                        }
                    }
                }
            }
        }
    }
}

.fl {
    float: left;
}

.fr {
    float: right;
}

@media (max-width: 1440px) {
    .content-wrapper {
        section {
            &.ordini {
                .ordersTable .toggleable img {
                    right: 5%;
                }
            }
            &.ordini-flow {
                .tab-pane {
                    &#step-5 {
                        table {
                            &.inputTable {
                                tr {
                                    td {
                                        input {
                                            width: 100px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .flowSection {
                    .checkBox {
                        top: 75%;
                        position: absolute;
                        right: 20%;
                    }

                    .checkBoxLabel {
                        position: absolute;
                        top: 30%;
                        right: 20%;
                    }
                }
            }
        }
    }
}

@media (max-width: 1300px) {
    .content-wrapper {
        main {
            .main-top-bar {
                .bar-content-wrapper {
                    a {
                        h3 {
                            &::before {
                                left: 30%;
                            }
                        }
                    }
                }
            }
        }
    }

    .content-wrapper main section.analyitics .companyTable.uploadCompany h5,
    .content-wrapper main section.analyitics .companyTable.uploadPerson h5 {
        font-size: 1rem;
    }
}
@media (max-width: 1220px) {
    .content-wrapper {
        section {
            &.ordini {
                .ordersTable .toggleable img {
                    right: 0%;
                }
            }
        }
    }
}
@media (max-width: 1120px) {
    .responsive-100 {
        max-width: 100%;
        flex: 0 0 100%;

        // label {
        //   display: block;
        //   width: 30%;
        // }
    }

    .responsive-50 {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .content-wrapper {
        main {
            .main-top-bar {
                .bar-content-wrapper {
                    a {
                        h3 {
                            &::before {
                                left: 25%;
                            }
                        }
                    }
                }
            }
        }

        section {
            &.ordini-flow {
                .tab-pane {
                    &#step-5 {
                        label {
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    .content-wrapper section.ordini .ordersTable .toggleable {
        a::after {
            right: -15px;
        }
        img {
            right: 5%;
        }
    }
}
@media (max-width: 768px) {
    .content-wrapper section.ordini .ordersTable .toggleable a::after {
        width: 0;
    }
    .content-wrapper {
        main {
            .main-top-bar {
                .bar-content-wrapper {
                    a {
                        h3 {
                            &::before {
                                left: 20%;
                            }
                        }
                    }
                }
            }
        }

        section {
            &.ordini-flow {
                .tab-pane {
                    &#step-5 {
                        table {
                            &.inputTable {
                                tr {
                                    td {
                                        input {
                                            width: 100%;
                                        }
                                    }
                                }
                            }
                        }

                        // #moduloForm {
                        ul {
                            li {
                                input {
                                    width: 100%;
                                    height: 30px;
                                }
                            }
                        }

                        .cChecks {
                            label {
                                h4 {
                                    font-size: 2rem;
                                }
                            }
                        }
                        // }
                    }
                }

                .flowSection {
                    .checkBox {
                        right: 15%;

                        .checkBoxLabel {
                            right: 30%;
                        }
                    }
                }
            }
        }
    }
}