.allFaqIndex{
    background: $backHome;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border-radius: 10px;
    padding: 1rem;
    margin: auto;
    margin-top: 1rem;
    h1{
        font-size: 2rem;
        font-weight: 500;
        color: $text1;
        text-align: center;
        margin-bottom: 1rem;
    }
    .alert{
        background: rgba(255, 0, 0, 0.15);
        color: #790000;
        padding: 1rem;
        border-radius: 0.3rem;
        font-size: 0.9rem;
        font-weight: 300;
        letter-spacing: 0.3px;
        margin: 1rem 0;
    }
    .success{
        background: rgba(0, 255, 0, 0.1);
        color: green;
        padding: 1rem;
        border-radius: 0.3rem;
        font-size: 0.9rem;
        font-weight: 300;
        letter-spacing: 0.3px;
        margin: 1rem 0;
    }
    .questions{
        .questionIndex{
            margin-bottom: 1rem;
            .title{
                background: $backHome2;
                padding: 1rem;
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                grid-gap: .5rem;
                border-radius: 5px;
                cursor: pointer;
                position: relative;
                z-index: 2;
                box-shadow: 0 10px 5px rgba(0,0,0,.02);
                h3{
                    font-size: 1rem;
                    font-weight: 500;
                    color: $text1;
                }
                i{
                    display: grid;
                    align-items: center;
                    svg{
                        width: 1rem;
                        height: 1rem;
                        fill: $text1;
                    }
                }
            }
            .description{
                background: $backHome2;
                padding: 1rem;
                border-radius: 5px;
                margin-top: -5px;
                transition: all .3s ease-in-out;
                position: relative;
                z-index: 1;
                display: none;
                p{
                    font-size: .85rem;
                    font-weight: 300;
                    color: $text1;
                }
            }
            .slide-fade-enter-active,.slide-fade-leave-active {
                transition: all .3s ease-in-out;
            }
            .slide-fade-enter,.slide-fade-leave-to{
                transform: translateY(-30px);
            }
        }
        h5{
            text-align: center;
            font-size: .8rem;
            font-weight: 300;
            color: $text1;
            opacity: .7;
            padding-top: 1rem;
        }
    }
    .ticketButtons{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(1px ,auto));
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        grid-gap: 1rem;
        button,h4{
            cursor: pointer;
            padding: .3rem 1rem;
            background: $green;
            font-size: .85rem;
            font-weight: 300;
            color: white;
            border-radius: 5px;
        }
        h4{
            background: red;
        }
    }
    .tickets{
        display: none;
        h3{
            font-size: 2rem;
            font-weight: 500;
            color: $text1;
            text-align: center;
            margin-bottom: 1rem;
        }
        .items{
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(30rem , 1fr));
            grid-gap: 1rem;
            margin-bottom: 1rem;
        }
        .item{
            label{
                color: $text1;
                font-weight: 500;
                font-size: .9rem;
                margin-bottom: .5rem;
                display: grid;
            }
            select,input{
                background: $backHome;
                border: 1px solid $border1;
                padding: .5rem;
                color: $text1;
                border-radius: .3rem;
                font-size: .9rem;
                width: 100%;
                font-weight: 300;
                transition: all .3s ease-in-out;
                &:focus{
                    box-shadow: 0 3px 8px 0 rgba(0,0,0,.1);
                    border: 1px solid $blue;
                }
            }
            textarea{
                border: 1px solid $border1;
                padding: 0.4rem .5rem;
                color: $text1;
                border-radius: .3rem;
                font-size: .7rem;
                width: 100%;
                height: 15rem;
                transition: all .3s ease-in-out;
                background: $backHome;
                resize: vertical;
                outline: transparent;
                &:focus{
                    box-shadow: 0 3px 8px 0 rgba(0,0,0,.1);
                    border: 1px solid $blue;
                }
            }
        }
        @media screen and (max-width: 800px) {
            .items{
                display: block;
            }
        }
    }
}
