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

#content {
    .euroBonusProfile {
        .storeInfo {
            margin: 30px 0;

            ul {
                text-align: center;

                li {
                    text-align: center;
                    margin-right: 35px;

                    a {
                        color: $green;
                        font-size: 1.5rem;
                        text-transform: uppercase;
                        border: 1px solid $green;
                        @include borderRadius(20px);
                        line-height: 80px;
                        padding: 5px 15px;

                        &:hover {
                            background: #e0e0e0;
                        }
                    }
                }
            }
        }

        .filter {
            // margin-left: 25%;
            position: relative;

            form {
                float: right;
                h4 {
                    color: $green;
                    @include boldFont();
                    font-size: 2rem;
                    margin-left: 15px;
                }
                &::before {
                    content: " ";
                    position: absolute;
                    width: 1px;
                    height: 40px;
                    background: $gray;
                    top: 25%;
                    // left: 0;
                }
                .sliderWrapper {
                    margin: 0 5px;
                    line-height: 90px;

                    h5 {
                        color: $green;
                        font-size: 2rem;
                        @include boldFont();
                        display: inline;
                        margin: 0 25px;
                    }

                    #bonusSlider {
                        .slider-handle {
                            background: $green;
                        }

                        .slider-track {
                            box-shadow: none;
                        }

                        .slider-selection {
                            background: #e0e0e0;
                            box-shadow: none;
                        }

                        .bs-tooltip-auto[x-placement^="top"] .arrow::before,
                        .bs-tooltip-top .arrow::before {
                            top: -1px;
                        }
                    }
                }

                button {
                    @include borderRadius(20px);
                    border: 1px solid $green;
                    background: $green;
                    color: #fff;
                    @include boldFont();
                    font-size: 1.3rem;
                    padding: 5px 10px;

                    &:hover {
                        background: $gray;
                        border-color: $gray;
                    }
                }
            }
        }

        .editableWrapper {
            display: none;
            border: 2px dashed #6f0000;
            background-color: #fef4f4;
            height: 80px;

            ul {
                // line-height: 80px;
                margin: 0 auto;
                // width: 55%;
                position: relative;
                @include abs-center();
                text-align: center;
            }

            h2 {
                color: #6f0000;
                @include boldFont();
                margin-bottom: 0;
            }

            a {
                background: #e53535;
                @include borderRadius(20px);
                color: #fff;
                @include boldFont();
                font-size: 1.3rem;
                padding: 5px 15px;
            }
        }

        table.mainTable {
            tr {
                td {
                    &.date {
                        width: 100%;
                    }
                    &.hidden {
                        display: none;
                    }
                }
                th {
                    &:nth-child(1) {
                        column-span: 2;
                    }
                }
            }

            tr.collapse {
                &:hover {
                    background-color: transparent;
                }

                td {
                    &::after {
                        width: 0;
                    }
                }
            }

            margin-top: 50px;

            &.editable {
                tr {
                    th {
                        &:nth-child(1) {
                            padding-left: 5%;
                        }
                    }
                    &.checked {
                        td {
                            background-color: rgba(229, 53, 53, 0.05);
                        }
                    }
                    td.hidden {
                        display: table-cell;
                    }
                }
            }

            tr th {
                border-top: none;
                border-bottom: 1px solid $gray;
                @include boldFont();
                font-size: 2rem;
                color: $black;
                padding-left: 0;
            }

            tr {
                td {
                    &.hidden {
                        text-align: center;

                        input {
                            height: 40px;
                            width: 40px;
                        }
                    }
                }
            }

            tr td {
                padding: 20px 0;
                border-top: none;
                border-bottom: 1px solid $gray;
                vertical-align: middle;
                font-size: 1.4rem;
                color: $black;
                position: relative;
                &::before {
                    @include ver-center();
                }
                &:nth-child(1) {
                    width: 5%;
                }

                &:nth-child(2) {
                    color: $black;
                    font-size: 1.8rem;

                    width: 15%;
                    position: relative;
                }

                &:nth-child(3) {
                    width: 15%;
                    font-size: 1.8rem;
                }

                &:nth-child(4) {
                    width: 30%;
                    font-size: 1.8rem;

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

                &:nth-child(5) {
                    width: 10%;
                    font-size: 1.8rem;

                    a {
                        margin: 0 10px;

                        i {
                            &::before {
                                width: 30px;
                                height: 30px;
                                top: -5px;
                            }
                        }
                    }
                }

                &:nth-child(6) {
                    width: 15%;
                    font-size: 1.8rem;

                    p {
                        display: inline-block;
                        margin: 0;
                        font-size: 1.6rem;

                        background: $green;
                        color: #fff;
                        @include borderRadius(30px);
                        padding: 5px 0;
                        min-width: 115px;
                        text-align: center;
                    }
                }

                &:nth-child(7) {
                    text-align: center;
                    font-size: 1.8rem;

                    width: 5%;

                    a {
                        i {
                            &::before {
                                left: -10px;
                                top: -10px;
                            }

                            &.rotate {
                                &::before {
                                    transform: rotate(90deg);
                                    transition: ease 300ms;
                                }
                            }
                        }
                    }

                    &::before {
                        content: " ";
                        position: absolute;
                        width: 1px;
                        height: 40px;
                        background: $gray;
                        top: 50%;
                        left: 0;
                        @include ver-center();
                    }
                }
            }

            .smallTables {
                background: #ededed;
                padding: 15px;

                ul {
                    list-style: none;

                    li {
                        color: $black;

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

                        p {
                            font-size: 1.4rem;
                            margin-bottom: 2.5rem;
                        }
                    }

                    @include ver-center();
                    position: relative;
                }

                table {
                    width: 100%;

                    tr {
                        &:hover {
                            background-color: transparent;
                        }

                        td,
                        th {
                            border-bottom: none;
                            text-align: left;
                            padding-left: 50px;
                        }

                        td {
                            &:nth-child(1) {
                                width: 50%;
                            }

                            &:nth-child(2) {
                                width: 50%;
                            }

                            p {
                                font-size: 1.4rem;
                                color: $black;
                            }

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

                    thead {
                        background: #fff;
                    }

                    &.leftTable {
                        position: relative;

                        &::after {
                            content: " ";
                            position: absolute;
                            width: 2px;
                            height: 100%;
                            background: #fff;
                            top: 0;
                            right: -15px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1440px) {
    #content {
        .euroBonusProfile {
            .storeInfo {
                ul {
                    li {
                        margin-right: 0;
                        a {
                            font-size: 1rem;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    #content {
        .slider.slider-horizontal {
            width: 185px;
        }
        .euroBonusProfile {
            .filter {
                form {
                    h4 {
                        margin-top: -35px;
                    }
                }
                &::before {
                    width: 0;
                }
            }

            .editableWrapper {
                ul {
                    margin: 10px auto;
                    width: 100%;
                    text-align: center;
                    line-height: 1;
                    li {
                        h2 {
                            margin-bottom: 15px;
                        }
                    }
                }
            }
            table {
                &.mainTable {
                    tr {
                        th {
                            font-size: 1.6rem;
                        }
                        td {
                            &.hidden {
                                input {
                                    width: 25px;
                                    height: 25px;
                                }
                            }
                            &:nth-child(2),
                            &:nth-child(3),
                            &:nth-child(4),
                            &:nth-child(5),
                            &:nth-child(6) p {
                                font-size: 1.8rem;
                            }
                        }
                    }
                }
            }
        }
        .storeInfo {
            .col-md-4 {
                &.custom-col {
                    flex: 0 0 40%;
                    max-width: 40%;
                    padding: 0;
                }
            }
            .col-md-1 {
                &.custom-col {
                    flex: 0 0 50%;
                    max-width: 50%;
                }
            }
            .col-md-6 {
                &.custom-col {
                    flex: 0 0 100%;
                    max-width: 100%;
                    ul {
                        li {
                            margin-right: 35px;
                        }
                    }
                }
            }
        }
    }
}