@import 'form.scss';
@import 'general.scss';
@import 'icons.scss';
@import 'print.scss';

//  LOGIN
.bg-login {
    background: url(../img/bg-login.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;

    .ctn-login,
    .ctn-login .row {
        height: 100vh;
    }
}

//  ADMIN AREA
.admin-area,
.web-area {
    //  HEADER
    header {
        background-color: #FFF;
        height: 96px;

        .user-nav {
            display: flex;
            align-items: center;

            .btn-cart {
                font-size: 30px;
            }

            .user-profile {
                font-size: 15px;
                display: inline;

                .dropdown-toggle {
                    &:after {
                        display: none;
                    }
                }

                .dropdown-menu {
                    margin-top: 10px;
                }
            }

            .user-logout {
                font-size: 13px;
                text-decoration: underline;
            }

            .dropdown {
                display: inline-block;
            }
        }

        &.scrolled {
            height: 66px;
            -webkit-box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);
            -moz-box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);
            box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);
            position: fixed;
            top: 0;
            z-index: 1;
            width: 100%;

            .logo {
                img {
                    height: 35px;
                }
            }
        }
    }

    //  TITULO DE PAGINA
    .page-title {
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 95px;
        width: 100%;

        background: rgba($cp-r, $cp-g, $cp-b, 1);
        background: -moz-linear-gradient(-45deg, rgba($cp-r, $cp-g, $cp-b, 1) 0%, rgba($cd-r, $cd-g, $cd-b, 1) 100%);
        background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba($cp-r, $cp-g, $cp-b, 1)), color-stop(100%, rgba($cd-r, $cd-g, $cd-b, 1)));
        background: -webkit-linear-gradient(-45deg, rgba($cp-r, $cp-g, $cp-b, 1) 0%, rgba($cd-r, $cd-g, $cd-b, 1) 100%);
        background: -o-linear-gradient(-45deg, rgba($cp-r, $cp-g, $cp-b, 1) 0%, rgba($cd-r, $cd-g, $cd-b, 1) 100%);
        background: -ms-linear-gradient(-45deg, rgba($cp-r, $cp-g, $cp-b, 1) 0%, rgba($cd-r, $cd-g, $cd-b, 1) 100%);
        background: linear-gradient(135deg, rgba($cp-r, $cp-g, $cp-b, 1) 0%, rgba($cd-r, $cd-g, $cd-b, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$color-primary, endColorstr=$color-deg, GradientType=1 );

        .title {
            h2 {
                color: #FFF;
                font-size: 28px;
                line-height: 1;

                .title-registro {
                    color: #FFF;
                }
            }
        }

        .options {
            color: #FFF;
            font-size: 20px;

            .btn {
                float: right;
            }
        }
    }

    //  MAIN CONTENT
    main {
        .section-head {
            height: 70px;

            .section-botones {
                .wrapper-botones {
                    float: right;
                }
            }

            .section-subtitulo {
                font-size: 14px;
                color: $color-default;
                font-weight: $font-light;
            }
        }

        //  EVENTOS
        &.eventos {
            padding: 40px 0;

            &.web {
                background-color: #F8F8F8;
            }
        }

        &.eventos-form {
            //  CONFIGURACION DE COMPRAS
            .conf-compras {
                .row-info {
                    margin-top: 30px;
                }

                .conf-campos,
                .conf-listado {
                    margin: 0;
                    padding: 0;

                    .fields {
                        height: 200px;
                    }

                    span {
                        font-size: 14px;
                    }
                }

                .conf-btn {
                    margin: 0;
                    padding: 85px 0;

                    .btn {
                        height: 27px;
                        width: 27px;
                        margin-bottom: 5px;
                    }
                }

                .tab-form {
                    padding: 10px 15px;
                    border-bottom: 1px solid #dee2e6;
                    border-left: 1px solid #dee2e6;
                    border-right: 1px solid #dee2e6;
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background-color: #f8fafc;

                    .row-info {
                        margin-top: 0;
                    }
                }
            }

            .lista-boletas {
                .table-data {
                    height: 500px;

                    .table-boletas {
                        td,
                        th {
                            font-size: 14px;
                        }
                    }
                }

                h5 {
                    font-size: 18px;
                    font-weight: $font-bold;
                    margin: 35px auto 0;
                    text-align: center;
                }

                .lbl-total {
                    display: table;
                    margin: 0 auto;
                }
            }

            #pills-faq {
                .fr-box {
                    &.fr-basic {
                        .fr-wrapper {
                            height: 300px;
                        }
                    }
                }
            }
        }

        &.eventos-area {
            margin-top: 40px;
            margin-bottom: 40px;

            .section-content {
                .section-menu {
                    .btn-app {
                        margin: 0 0 20px 0;
                    }
                }

                .section-main {
                    background-color: #FFF;
                    min-height: 860px;
                    padding-left: 25px;
                    padding-right: 25px;
                    padding-top: 10px;
                    padding-bottom: 20px;
                    -webkit-box-shadow: 0px 2px 5px 2px rgba(238, 238, 238, 1);
                    -moz-box-shadow: 0px 2px 5px 2px rgba(238, 238, 238, 1);
                    box-shadow: 0px 2px 5px 2px rgba(238, 238, 238, 1);

                    .col-chart {
                        padding: 0 5px;

                        .chart_small {
                            max-height: 210px !important;
                            width: 100% !important;
                        }

                        .chart_dona {
                            height: 190px !important;
                            width: 75% !important;
                            margin: auto;
                            display: block;
                        }

                        .tiempo-wrapper {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: center;
                            padding: 5px 0 0 0;

                            .tiempo-entrega {
                                flex: 0 0 50%;
                                margin: 0;
                                padding: 15px 5px;
                                width: 50%;

                                .label,
                                .lbl-min,
                                .lbl-seg {
                                    font-size: 12px;
                                    text-align: center;
                                }
                                .tiempo {
                                    font-size: 37px;
                                    font-weight: $font-bold;
                                    line-height: 30px;
                                    text-align: center;
                                }
                                .lbl-min {
                                    display: block;
                                    float: left;
                                    margin-left: 30px;
                                }
                                .lbl-seg {
                                    display: block;
                                    float: right;
                                    margin-right: 30px;
                                }
                            }
                        }

                        .card-header {
                            .total-boletas {
                                float: right;

                                .label {
                                    font-size: 15px;
                                    font-weight: $font-regular;
                                }

                                .numero-boletas {
                                    span {
                                        font-size: 22px;
                                        font-weight: $font-bold;
                                        line-height: 22px;

                                        &.green {
                                            color: #228C00;
                                        }
                                    }
                                }
                            }
                        }

                        .tiempo-evento {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .label {
                                font-size: 18px;
                                font-weight: $font-regular;
                                text-align: center;
                            }

                            .valores {
                                span {
                                    font-size: 37px;
                                    font-weight: $font-bold;
                                    color: $color-primary;
                                    display: inline-block;
                                    width: 75px;
                                    text-align: center;
                                }
                            }

                            .labels {
                                span {
                                    font-size: 12px;
                                    font-weight: $font-regular;
                                    display: inline-block;
                                    width: 75px;
                                    text-align: center;
                                }
                            }
                        }
                    }

                    .table-data {
                        &.full-height {
                            height: 700px;

                            &.no-footer {
                                height: 775px;
                            }
                        }
                    }

                    .col-right {
                        padding-right: 5px;
                    }

                    .generar-password {
                        height: 25px;

                        a {
                            float: right;
                            font-size: 13px;
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        &.maestros {
            margin: 40px 0;
        }
    }
}

//  FOOTER
footer {
    background-color: #FFF;
    border-top: 1px solid #F0F0F0;
    height: 166px;
    margin: 0;
    padding: 0;

    .copyright {
        img {
            display: block;
            margin: 0 auto 10px;
            max-width: 100%;
            width: auto;
            height: auto;
            max-height: 29px;
        }
        p {
            font-size: 11px;
            font-weight: $font-light;
            margin: 0;
            text-align: center;
        }
    }

    .footer-menu {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;

        li {
            padding: 0 15px;
        }
    }
}

//  FILTRO TOP
.search-top {
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 117px;
    width: 100%;

}

//  LABEL TOTAL
.lbl-total {
    font-size: 40px;
    font-weight: $font-bold;
}

//  TABLE
.table-data {
    .list-group-item {
        position: relative;

        .list-group-opt {
            height: 100%;
            padding: 0 10px;
            position: absolute;
            right: 0;
            top: 0;
            visibility: hidden;

            a {
                color: #FFF;

                i {
                    color: #FFF;
                    margin-top: 25%;
                    padding: 0 5px;

                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }

        &:hover {
            .list-group-opt {
                background-color: rgba(27, 119, 248, 1);
                visibility: visible;
            }
        }
    }

    &.event-dates {
        height: 200px;

        .table {
            td {
                padding: 5px 0;
            }
        }
    }
}

//  LOADING
#loading {
    height: 100%;
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1051;
    // background: rgba(255, 255, 255, 0.33);
    background: rgba(0, 0, 0, 0.82);


    .bokeh {
        border: 0.01em solid rgba(150, 150, 150, 0.1);
        border-radius: 50%;
        font-size: 100px;
        height: 1em;
        list-style: outside none none;
        margin: 0 auto;
        position: relative;
        top: 35%;
        width: 1em;
        z-index: 2147483647;

        li {
            border-radius: 50%;
            height: 0.2em;
            position: absolute;
            width: 0.2em;

            &:nth-child(1) {
                animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa;
                background: $color-default none repeat scroll 0 0;
                left: 50%;
                margin: 0 0 0 -0.1em;
                top: 0;
                transform-origin: 50% 250% 0;
            }
            &:nth-child(2) {
                animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa;
                background: $color-primary none repeat scroll 0 0;
                margin: -0.1em 0 0;
                right: 0;
                top: 50%;
                transform-origin: -150% 50% 0;
            }
            &:nth-child(3) {
                animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa;
                background: $color-deg none repeat scroll 0 0;
                bottom: 0;
                left: 50%;
                margin: 0 0 0 -0.1em;
                transform-origin: 50% -150% 0;
            }
            &:nth-child(4) {
                animation: 1.72s linear 0s normal none infinite running rota, 5.25s ease-in-out 0s alternate none infinite running opa;
                background: $color-secondary none repeat scroll 0 0;
                margin: -0.1em 0 0;
                top: 50%;
                transform-origin: 250% 50% 0;
            }
        }
    }
    @keyframes opa {
        12% {
            opacity: 0.8;
        }
        19.5% {
            opacity: 0.88;
        }
        37.2% {
            opacity: 0.64;
        }
        40.5% {
            opacity: 0.52;
        }
        52.7% {
            opacity: 0.69;
        }
        60.2% {
            opacity: 0.6;
        }
        66.6% {
            opacity: 0.52;
        }
        70% {
            opacity: 0.63;
        }
        79.9% {
            opacity: 0.6;
        }
        84.2% {
            opacity: 0.75;
        }
        91% {
            opacity: 0.87;
        }
    }
    @keyframes rota {
        100% {
            transform: rotate(360deg);
        }
    }
}

//
.dataTables_paginate {
    padding: 20px;
    float: right;

    .paginate_button {
        margin: 0 10px;
        cursor: pointer;

        &.disabled,
        &.current {
            cursor: not-allowed;
        }
    }

    span {
        .paginate_button {
            margin: 0 5px;
            background-color: $color-primary;
            color: #FFF;
            text-align: center;
            padding: 5px 10px;
            border-radius: 50%;
            min-width: 30px;
            display: inline-block;
            font-size: 12px;

            &.current {
                background-color: $color-secondary;
            }
        }
    }
}
.dataTables_length,
.dataTables_filter {
    display: inline-block;

    label {
        padding: 10px;
    }
}
.dataTables_filter {
    float: right;
}
div.dataTables_wrapper div.dataTables_length select {
    min-width: 65px;
}
.dataTables_info {
    display: inline-block;
    padding: 20px;
}

//  ETC
.btn-destroy,
.btn-edit-modal {
    margin: 0 5px;
}

.alert {
    color: $color-default;
    font-weight: 300;
}

@media (min-width: 768px) {
    main {
        &.eventos-area {
            .section-content {
                .section-menu {
                    -ms-flex: 0 0 250px;
                    flex: 0 0 250px;
                    max-width: 250px;
                }
                .section-main {
                    -ms-flex: 0 0 calc(100% - 250px);
                    flex: 0 0 calc(100% - 250px);
                    max-width: calc(100% - 250px);
                }
            }
        }
    }
}
@media (min-width: 1300px) {
    .container {
        max-width: 1250px;
    }
}

@media (max-width: 1199px) {
    .card {
        &.card-event-detail.confirm {
            .card-header {
                .media {
                    .media-body {
                        h5 {
                            font-size: 22px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .footer-menu {
        flex-wrap: wrap;

        li {
            flex: 0 50%;
            margin-bottom: 20px;
        }
    }

    .card {
        &.card-event-detail {
            .card-header {
                font-size: 16px;
            }

            .card-body {
                figure {
                    .card-detail-img {
                        max-width: 100%;
                    }
                }
            }

            &.confirm {
                .card-header {
                    .media {
                        .media-body {
                            font-size: 12px;

                            h5 {
                                font-size: 16px;
                            }
                        }
                    }
                }

                .card-body {
                    .wrapper-link-login {
                        font-size: 18px;

                        span {
                            font-size: 16px;
                        }
                    }
                }

                .card-resumen {
                    .card-body {
                        h5 {
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        &.card-resumen {
            table {
                thead {
                    th {
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .modal {
        &#modalBuy {
            .modal-header {
                .modal-title {
                    font-size: 18px;
                }
            }

            .modal-footer {
                flex-direction: column-reverse;

                .wrapper-btn {
                    margin-bottom: 10px;
                }
            }
        }
    }

    #time-buy {
        left: calc(50% - 30px);

        span:nth-child(1) {
            display: none;
        }
    }
}
@media (max-width: 767px) {
    .admin-area,
    .web-area {
        header {
            height: unset;
            padding: 10px 0 0;

            &.scrolled {
                height: unset;
            }
        }

        .page-title {
            .title {
                h2 {
                    text-align: center;
                    font-size: 24px;
                }
            }

            .options {
                font-size: 18px;
                text-align: center;

                .btn {
                    float: unset;
                }
            }
        }
    }

    .card {
        &.card-event-detail {
            .card-body {
                .events-row {
                    .actions {
                        text-align: center;
                    }
                }
            }

            &.confirm {
                .card-footer {
                    flex-direction: column-reverse;

                    div {
                        text-align: center;

                        &:nth-child(2) {
                            margin-bottom: 10px;

                            span {
                                display: block;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }

    .modal {
        &#modalBuy {
            .modal-header {
                .modal-title {
                    font-size: 18px;
                }
            }
        }
    }
}
@media (max-width: 575px) {
    .admin-area,
    .web-area {
        header {
            -webkit-box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);
            -moz-box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);
            box-shadow: 0px 0px 5px 0px rgba(200,200,200,1);

            .logo {
                img {
                    height: 35px;
                }
            }
        }
    }

    .footer-menu {
        li {
            a {
                font-size: 12px;
            }
        }
    }

    .card {
        &.card-event-detail {
            &.confirm {
                .card-body {
                    .wrapper-link-login {
                        span {
                            display: block;
                            text-align: center;
                            margin-bottom: 0;
                        }
                    }
                }

                .card-resumen {
                    .card-body {
                        .form-control {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }

    .ticket-print-wrapper {
        .form-control {
            font-size: 16px;
            margin-bottom: 5px;
        }
    }

    #time-buy {
        top: 60px;
        background-color: #FFF;
        border: 1px solid #FFF;
        border-radius: 5px;
        padding: 5px;
        left: calc(50% - 40px);
    }
}