#raffle-header-container {
    z-index: 99;
    height: 6rem;
    background-color: #075C1C;
}

#raffle-main-container {

    width: 90%;

    & #raffle-main-infos {

        & #raffle-infos-presentation {

            & #raffle-presentation-image {
                width: 170px;
                height: 170px;
            }

        }

        & #raffle-infos-details {

            & #raffle-details-price {
                width: 100%;
                background-color: #2E71B7;
            }

            & #raffle-others-details {

                & #raffle-medias {

                    & a {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 .5rem;
                    }

                }
                
            }

        }

    }

    & #raffle-main-rules {

        background-color: #EEE;

        & div {
            min-height: 5.5rem;
            max-height: 9.6rem;
        }

    }

    & #raffle-main-prizes {

        background-color: #EEE;

        & .raffle-prize {

            width: 14rem;
            background-color: #C6E2FF;

        }

    }

    & #raffle-main-progress {

        height: 10%;

        & #raffle-progress-bar {

            background-color: #BBB;

            & .progress-bar {
                background-color: cornflowerblue;
            }

        }

    }

    & #raffle-main-filter {

        background-color: #EEE;

        & #raffle-filter-buttons {

            & .raffle-button-status {

                & span {
                    padding-top: 1px;
                }
    
            }

        }
        
    }

    & #raffle-search-modal {

        & .modal-content {

            width: 100%;

            & .modal-body {

                overflow-x: hidden;
                padding: .5rem .8rem !important;
    
                & #raffle-search-input {
        
                    & .form-group {

                        height: fit-content;
                        position: relative;
                
                        & div:first-child {
                            position: absolute;
                            z-index: 6;
                            height: 100%;
                            width: 2.4rem;
                            color: #AAA;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                
                        & input {
                            padding-left: 2.2rem;
                
                        }
                
                    }
        
                }
        
                & #raffle-search-results {
    
                    margin: .5rem;
                    padding: .5rem;
        
                    .bg-reserved {
                        background-color: #eafaff;
                    }
            
                    .bg-paid {
                        background-color: #ebffeb;
                    }
            
                    .bg-expired {
                        background-color: #ffecec;
                    }
    
                    & h4 {
                        margin-bottom: .5rem !important;
                    }
    
                    & p:not(.raffle-alert-area) {
                        margin-bottom: .5rem !important;
                    }
    
                    & .numbers-list {
                        height: fit-content;
                        max-height: 6rem;
                    }
        
                }
    
            }

        }

    }

    & #raffle-main-numbers {

        & #raffle-numbers-visible {

            & h3 {
                margin-bottom: 1.5rem !important;
            }

            & .raffle-number {
                width: 4rem;
            }

            & div[data-selected="true"] {
                border: .1rem solid #F6AE2D;
                background-color: #F6AE2D;
                color: #091D30;
                font-weight: 500;
            }
    
            & div[data-status="reserved"] {
                pointer-events: none !important;
            }
    
            & div[data-status="paid"] {
                pointer-events: none !important;
            }

        }

        & #raffle-numbers-random {

            & h3 {
                margin-bottom: .5rem;
            }

            & .raffle-random-accumulator {

                display: flex;
                justify-content: center;
                align-items: center;
                margin: .5rem;
                padding: .3rem;
                width: 3.7rem;
                background-color: #CCC;
                color: #091D30;
                cursor: pointer;
                transition: background-color .6s ease;

                & i {
                    padding-right: .3rem;
                    padding-top: 1px;
                }

                & h5 {
                    user-select: none !important;
                }

            }

            & .raffle-random-accumulator:active {
                background-color: #999;
            }

            & #raffle-random-result {

                & #raffle-random-subtract {
                    cursor: pointer;
                }
    
                & #raffle-random-addition {
                    cursor: pointer;
                }

                & #raffle-random-summation {
                    width: 10rem;
                    background-color: #EEE;
                }

            }

        }

    }

    & #raffle-main-summary {

        height: 8rem;
        background-color: #075C1C;
        transform: translateY(100%);
        transition: all .5s;

        & #raffle-summary-value {
            font-weight: 500;
        }

    }

    & #raffle-main-summary.is-active {
        transform: none;
        transition: all .5s;
    }

    & #raffle-main-winners {

        background-color: #C3F1C3;

        & #raffle-list-infos {
            background-color: lightgreen;
        }

    }

    & #raffle-complete-order {

        & .modal-content {

            width: 100%;
            
            & .modal-body {

                padding: .5rem .8rem !important;

                & #raffle-complete-infos {
        
                    & #raffle-complete-numbers {
                        height: fit-content;
                        max-height: 3.8rem;
                        width: 95%;
                    }
        
                }
        
                & #raffle-complete-form {

                    width: 95%;

                    & form {

                        & .form-group {

                            height: 4.8rem;

                            & .d-flex {

                                height: fit-content;
                                position: relative;
                        
                                & div:first-child {
                                    position: absolute;
                                    z-index: 6;
                                    height: 100%;
                                    width: 2.4rem;
                                    color: #AAA;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                        
                                & input {
                                    padding-left: 2.2rem;
                        
                                }

                            }
                    
                        }

                    }
        
                }

            }

        }

    }

    & .raffle-alert-area {
        color: #f81717;
    }

    & .number-selected {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4rem;
        height: 1.7rem;
        margin: 0 .3rem .3rem 0;
        border-radius: .2rem;
        background-color: #F6AE2D;
        color: #091D30;
        font-weight: 500 !important;
    }

}

#raffle-footer-container {

    height: 8rem;
    background-color: #091D30;
    color: #FBFBFB;

    & h3 {
        color: #8AAED4;
    }

}


/* M E D I A S */

@media (max-width: 575px) {
    
    #raffle-main-container {

        max-width: 24rem;
        padding-top: 7rem !important;
    
        & #raffle-main-infos {

            margin-top: 1.5rem;
    
            & #raffle-infos-details {

                width: 100%;
                padding: 1rem;
                border-radius: .3rem;
                background-color: #EEE;

                & hr {
                    width: 75%;
                    margin-top: .5rem;
                    margin-bottom: .7rem;
                }

                & #raffle-details-price {
                    margin-top: .5rem;
                }

                & #raffle-others-details {

                    width: 83%;

                    & #raffle-medias {

                        & .d-flex {
                            width: 100%;
                        }

                        & a {
                            width: 7.5rem;
                            height: 1.6rem;
                            padding-top: 2px;
                        }

                        & i {
                            padding-bottom: 3px;
                        }
    
                    }
                    
                }
    
            }
    
        }
    
        & #raffle-main-filter {

            & #raffle-filter-buttons {

                & .raffle-button-status {
                    width: 7.5rem;
                }

            }
    
        }
    
        & #raffle-search-numbers {
            width: 13rem;
        }
    
        & #raffle-search-modal {

            & .modal-content {
                max-width: 26rem;
            }

        }
    
        & #raffle-main-numbers {
    
            & #raffle-numbers-random {
    
                & .raffle-random-accumulator {

                    & i {
                        padding-top: .2rem;
                    }
    
                }
    
            }
    
        }

        & #raffle-main-summary {
    
            & #raffle-summary-value {
                margin-bottom: 1rem;
            }
    
        }
    
        & #raffle-main-winners {

            & #raffle-list-infos {
                width: 16rem;
            }

        }
    
        & #raffle-complete-order {

            & .modal-content {

                max-width: 26rem;

                & .modal-body {

                    & #raffle-complete-form {
    
                        & form {
                            width: 90%;
                            max-width: 18rem;
                        }
            
                    }
    
                }

            }
    
        }
    
    }

}

@media (min-width: 576px) {
    
    #raffle-main-container {

        max-width: 26rem;
        padding-top: 8rem !important;
    
        & #raffle-main-infos {

            margin-top: 1.5rem;
    
            & #raffle-infos-details {

                width: 100%;
                padding: 1rem;
                border-radius: .3rem;
                background-color: #EEE;

                & hr {
                    width: 75%;
                    margin-top: .5rem;
                    margin-bottom: .7rem;
                }

                & #raffle-details-price {
                    margin-top: .5rem;
                }

                & #raffle-others-details {

                    width: 75%;

                    & #raffle-medias {

                        & .d-flex {
                            width: 100%;
                        }

                        & a {
                            width: 7.5rem;
                            height: 1.6rem;
                            padding-top: 1px;
                        }

                        & i {
                            padding-top: 1px;
                        }

                    }

                }
    
            }
    
        }
    
        & #raffle-main-filter {

            & #raffle-filter-buttons {

                & .raffle-button-status {
                    width: 8rem;
                }

            }
    
        }
    
        & #raffle-search-numbers {

            width: 14rem;

            & i {
                padding-top: .1rem;
            }

        }
    
        & #raffle-search-modal {

            & .modal-content {
                max-width: 26rem;
            }

        }
    
        & #raffle-main-summary {
    
            & #raffle-summary-value {
                margin-bottom: 1rem;
            }
    
        }
    
        & #raffle-main-winners {
    
            & #raffle-list-infos {
                width: 16rem;
            }

        }
    
        & #raffle-complete-order {

            & .modal-content {

                max-width: 28rem;

                & .modal-body {

                    & #raffle-complete-form {
    
                        & form {
                            width: 75%;
                        }
            
                    }
    
                }

            }
    
        }
    
    }
    
    #raffle-footer-container {

        & #footer-links {
            width: 20rem;
        }
    
    }

}

@media (min-width: 768px) {
    
    #raffle-main-container {

        max-width: 46rem;
    
        & #raffle-main-infos {

            padding-top: 1.5rem;
            padding-bottom: 0;
            background-color: #EEE;
    
            & #raffle-infos-details {

                width: fit-content;
                padding-top: 0;

                & hr {
                    width: 100%;
                    margin-top: .7rem;
                    margin-bottom: .9rem;
                }

                & #raffle-details-price {
                    margin-top: 0
                }

                & #raffle-others-details {

                    width: 100%;

                    & #raffle-medias {

                        & .d-flex {
                            width: fit-content;
                        }

                    }

                }

            }
    
        }
    
        & #raffle-search-numbers {

            width: 14rem;

            & i {
                padding-top: 0;
            }

        }
    
        & #raffle-search-modal {

            & .modal-dialog {  
                max-width: none !important;
                width: 27rem;
            }

        }
    
        & #raffle-main-summary {
    
            & #raffle-summary-value {
                padding: 0 3rem 0 0;
                margin-bottom: 0;
            }

        }
    
        & #raffle-main-winners {

            & #raffle-list-infos {
                width: 19rem;
            }

        }
    
    }
    
    #raffle-footer-container {

        & #footer-links {
            width: 20rem;
        }
    
    }
    
}