:root {
    --dark-purple: #1B1534;
    --medium-purple: #4D217A;
    --se-purple: #641E8C;
}

.to-green-500 {
    --tw-gradient-to: #641E8C !important;
}

.from-green-400 {
    --tw-gradient-from: #641E8C !important;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to, rgba(52, 211, 153, 0));
}

.hover\:from-pink-500:hover {
    --tw-gradient-from: #641E8C !important;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

/*Seats*/

.seats {
    text-align: center;
    padding-bottom: 40px;
}

.container--mid {
    max-width: 580px;
}

.container {
    margin: 0 auto;
    max-width: 1120px;
}

.seats__types .seat svg {
    width: 23px;
    flex-shrink: 0;
}

.seats__types .seat {
    -o-box-align: center;
    align-items: center;
    cursor: default;
    display: -ms-flexbox;
    display: box;
    display: flex;
    margin: 10px 0;
    width: 100%;
}

.seats__types .seat span {
    padding-left: 6px;
}

.selAsientos {
    /*background-color: aliceblue;*/
}

.icon-table {
    -o-box-align: center;
    align-items: center;
    cursor: default;
    display: -ms-flexbox;
    display: box;
    display: flex;
    margin: 10px 0;
    width: 30%;
}

.icon-seat {
    -o-box-align: center;
    align-items: center;
    cursor: default;
    display: -ms-flexbox;
    display: box;
    display: flex;
    margin: 10px 0;
    width: 6%;
}

.loader {
    position: absolute;
    width: 300px;
    height: 200px;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
}

    .loader::before, .loader::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        animation: rotate 1s ease-in infinite;
    }

    .loader::after {
        width: 20px;
        height: 20px;
        background-color: #641E8C;
        animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite;
    }

@keyframes moveY {
    0%, 100% {
        top: 10%
    }

    45%, 55% {
        top: 59%
    }

    60% {
        top: 40%
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -100%) rotate(0deg) scale(1, 1)
    }

    25% {
        transform: translate(-50%, 0%) rotate(180deg) scale(1, 1)
    }

    45%, 55% {
        transform: translate(-50%, 100%) rotate(180deg) scale(3, 0.5)
    }

    60% {
        transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)
    }

    75% {
        transform: translate(-50%, 0%) rotate(270deg) scale(1, 1)
    }

    100% {
        transform: translate(-50%, -100%) rotate(360deg) scale(1, 1)
    }
}