.body-groups {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

#groups-header {
    flex-shrink: 0;
    z-index: 1000;

    @media (max-width: 999.99px) {
        height: 57px;
    }

    @media (min-width: 1000px) and (max-width: 1199px) {
        height: 50px;
    }

    @media (min-width: 1200px) and (max-width: 1399px) {
        height: 55px;
    }

    @media (min-width: 1400px) {
        height: 65px;
    }

    .navbar {
        height: 100%;

        @media (max-width: 767.98px) {
            height: 57px;
            width: 100%;
            position: fixed;
            background-color: #F5F5F5;
        }

        .container {

            .navbar-collapse {

                @media (max-width: 999.99px) {
                    position: absolute;
                    width: 100%;
                    top: 57px;
                    left: 0px;
                }

                .navbar-nav {

                    @media (max-width: 999.99px) {
                        position: relative;
                        width: 95%;
                    }

                    @media (min-width: 1000px) {
                        position: absolute;
                    }

                    @media (min-width: 1000px) and (max-width: 1199px) {
                        right: 10px;
                    }

                    @media (min-width: 1200px) and (max-width: 1399px) {
                        right: 15px;
                    }

                    @media (min-width: 1400px) {
                        right: 25px;
                    }

                    .nav-link {
                        color: #5E1E0D;

                        @media (max-width: 999px) {
                            font-size: 1rem !important;
                        }

                        @media (min-width: 1000px) and (max-width: 1199px) {
                            font-size: 0.92rem !important;
                        }

                        @media (min-width: 1200px) and (max-width: 1399px) {
                            font-size: 1.15rem !important;
                        }

                        @media (min-width: 1400px) {
                            font-size: 1.4rem !important;
                        }

                        i {

                            @media (min-width: 1000px) and (max-width: 1199px) {
                                &:before {
                                    font-size: 1.4rem;
                                }
                            }

                            @media (min-width: 1200px) and (max-width: 1399px) {
                                &:before {
                                    font-size: 1.7rem;
                                }
                            }

                            @media (min-width: 1400px) {
                                &:before {
                                    font-size: 1.9rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#groups-main {
    display: flex;
    flex-grow: 1;
    position: relative;

    @media (max-width: 999.99px) {
        height: auto;
    }

    #groups-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;

        #row-groups-title {

            @media (max-width: 999.99px) {
                position: fixed;
                width: 100%;
                top: 0;
                right: 0;
                margin: 0;
                height: 57px;
                z-index: 1050;
                pointer-events: none;
            }

            .col {
                display: flex;
                justify-content: center;
                align-items: center;
                padding-bottom: 5px;

                @media (max-width: 767.98px) {
                    width: 100%;
                    position: relative;
                    padding: 0;

                    &:before {
                        position: absolute;
                        content: '';
                        height: 100%;
                        width: 60%;
                        max-width: 325px;
                        background-color: #FECE02;
                        z-index: 5;
                    }
                }

                @media (min-width: 767.99px) and (max-width: 999.99px) {
                    width: 100%;
                    position: relative;
                    padding: 0;

                    &:before {
                        position: absolute;
                        content: '';
                        height: 100%;
                        width: 55%;
                        max-width: 345px;
                        background-color: #FECE02;
                        z-index: 5;
                    }
                }

                span {
                    color: #5E1E0D;
                    display: inline-block;
                    text-align: center;
                    font-weight: bold;

                    @media (max-width: 767.98px) {
                        font-size: 1.2rem;
                        margin: 0;
                        z-index: 6;
                    }

                    @media (min-width: 767.99px) and (max-width: 999px) {
                        font-size: 1.5rem;
                        margin: 0;
                        z-index: 6;
                    }

                    @media (min-width: 1000px) and (max-width: 1199px) {
                        font-size: 1.6rem;
                    }

                    @media (min-width: 1200px) and (max-width: 1399px) {
                        font-size: 1.8rem;
                    }

                    @media (min-width: 1400px) {
                        font-size: 2.5rem;
                    }

                    &::first-letter {
                        font-family: 'Monplesir script';
                        font-weight: normal;
                    }
                }
            }
        }

        #mob-groups-form {

            .col {
                display: flex;
                justify-content: center;

                .mob-groups-box-form {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 90%;
                    border: 1px solid #5E1E0D;
                    z-index: 100;
                    background-color: #F5F5F5;
                    border-radius: 20px;

                    @media (max-width: 767.98px) {
                        padding: 10px;
                    }

                    @media (min-width: 767.99px) and (max-width: 999px) {
                        padding: 25px 25px 20px 25px;
                    }

                    p {
                        text-align: center;
                        margin: 0;
                    }

                    button {
                        background-color: #5E1E0D;
                        color: #fff;
                        width: 65%;
                        padding: 5px;
                        border-radius: 30px;
                        border: 0;
                        margin-top: 10px;
                        font-weight: bold;

                        &:active {
                            box-shadow: 5px 7px 10px 2px rgba(0,0,0,.4);
                        }

                        @media (max-width: 767.98px) {
                            width: 90%;
                            font-size: 1.1rem;
                        }

                        @media (min-width: 767.99px) and (max-width: 999.99px) {
                            font-size: 1.3rem;
                        }
                    }
                }
            }
        }

        #row-groups-switch-buttons {

            #col-buttons-tabs {
                display: flex;
                justify-content: space-between;
                z-index: 2;

                @media (max-width: 999.99px) {
                    padding-top: 10px;
                    padding-bottom: 15px;
                    padding-left: 25px;
                    padding-right: 25px;
                }

                @media (min-width: 1000px) and (max-width: 1199px) {
                    padding-top: 20px;
                    padding-bottom: 25px;
                }

                @media (min-width: 1200px) and (max-width: 1399px) {
                    padding-top: 20px;
                    padding-bottom: 25px;
                }

                @media (min-width: 1400px) {
                    padding-top: 20px;
                    padding-bottom: 25px;
                }

                .nav {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    border: none;

                    .nav-item {
                        width: 45%;
                        padding-left: 0;
                        padding-right: 0;

                        button {
                            width: 100%;
                            padding: 5px 5px 5px 25px;
                            border: 0;
                            font-weight: bold;
                            font-style: italic;
                            text-align: start;
                            background-color: transparent;
                            color: #F5F5F5;
                            border-radius: 43px;
                            background: linear-gradient(90deg, #A5A19E 0%, #F0F4F4 100%);
                            box-shadow: 8px 4px 4px rgba(0, 0, 0, 0.25);

                            &.active {
                                background: linear-gradient(to right, rgba(227, 236, 237, 1) 0%, 38.550421595573425%, rgba(122, 175, 177, 1) 77.10084319114685%, 88.55042159557343%, rgba(88, 155, 159, 1) 100%);
                                color: #5E1E0D;
                                box-shadow: none;
                            }
                        }

                        @media (max-width: 999.99px) {

                        }

                       @media (max-width: 767.98px) {
                            font-size: 0.9rem;
                        }

                        @media (min-width: 767.99px) and (max-width: 999.99px) {
                            font-size: 1.1rem;
                        }

                        @media (min-width: 1000px) and (max-width: 1199px) {
                            font-size: 1.1rem;
                        }

                        @media (min-width: 1200px) and (max-width: 1399px) {
                            font-size: 1.2rem;
                        }

                        @media (min-width: 1400px) {
                            font-size: 1.3rem;
                        }
                    }
                }
            }
        }

        #groups-content {
            z-index: 150;
            position: relative;
            display: flex;
            height: 100%;

            .tab-content {
                height: 100%;

                .tab-pane {
                    height: 100%;

                    .groups-carousel {
                        z-index: 150;
                        position: relative;
                        height: 100%;

                        .carousel-inner {
                            position: relative;
                            height: 100%;

                            .carousel-indicators {
                                transform: translateY(50%);
                            }

                            .carousel-item {
                                position: relative;
                                display: flex;
                                flex-direction: column;
                                height: 100%;

                                &.fullscreen {
                                    z-index: 100000 !important;
                                }

                                .item-header {
                                    justify-content: space-between;
                                    z-index: 100;
                                    width: 100%;
                                    position: relative;
                                    display: flex;

                                    @media (max-width: 999.99px) {
                                        flex-direction: column;
                                    }

                                    @media (min-width: 1000px) and (max-width: 1199px) {
                                        padding: 10px 30px 10px 30px;
                                    }

                                    @media (min-width: 1200px) and (max-width: 1399px) {
                                        padding: 10px 30px 10px 30px;
                                    }

                                    @media (min-width: 1400px) {
                                        padding: 10px 30px 10px 30px;
                                    }

                                    span {
                                        font-weight: bold;
                                        position: relative;
                                        color: #F5F5F5;

                                        @media (max-width: 999.99px) {
                                            font-size: 0.9rem;
                                            text-align: center;
                                        }

                                        @media (max-width: 767.98px) {
                                            font-size: 0.9rem;
                                        }

                                        @media (min-width: 767.99px) and (max-width: 999.99px) {
                                            font-size: 1.1rem;
                                        }

                                        @media (min-width: 1000px) and (max-width: 1199px) {
                                            font-size: 1.1rem;
                                        }

                                        @media (min-width: 1200px) and (max-width: 1399px) {
                                            font-size: 1.2rem;
                                        }

                                        @media (min-width: 1400px) {
                                            font-size: 1.3rem;
                                        }

                                        &:first-of-type {

                                            @media (max-width: 999.99px) {
                                                color: #5E1E0D;
                                                white-space: nowrap;
                                            }
                                        }

                                        &:nth-of-type(2) {
                                            @media (max-width: 999.99px) {
                                                margin-top: 10px;
                                                padding-bottom: 5px;
                                            }
                                        }
                                    }
                                }

                                .item-body {
                                    position: relative;
                                    border: 1px solid #5E1E0D;
                                    border-radius: 43px;
                                    z-index: 100;
                                    box-sizing: border-box;
                                    background-color: #F5F5F5;
                                    display: flex;
                                    flex-direction: column;
                                    overflow: hidden;
                                    height: 100%;

                                    @media (max-width: 999.99px) {
                                        margin-top: 15px;
                                    }

                                    @media (min-width: 1000px) and (max-width: 1199px) {
                                        margin-top: 25px;
                                    }

                                    @media (min-width: 1200px) and (max-width: 1399px) {
                                        margin-top: 25px;
                                    }

                                    @media (min-width: 1400px) {
                                        margin-top: 25px;
                                    }

                                    &.fullscreen {
                                        width: 100%;
                                        position: fixed;
                                        left: 0;
                                        margin-top: 0;

                                        @media (max-width: 999.99px) {
                                            top: 57px;
                                            height: calc(100% - 57px);
                                        }

                                        @media (min-width: 1000px) and (max-width: 1199px) {
                                            top: 50px;
                                            height: calc(100% - 50px);
                                        }

                                        @media (min-width: 1200px) and (max-width: 1399px) {
                                            top: 55px;
                                            height: calc(100% - 55px);
                                        }

                                        @media (min-width: 1400px) {
                                            top: 65px;
                                            height: calc(100% - 65px);
                                        }
                                    }

                                    .item-tools {
                                        position: relative;
                                        width: 100%;



                                        button {
                                            border: 0;
                                            width: 25px;
                                            z-index: 1;
                                            background: transparent;
                                            cursor: pointer;
                                            position: relative;
                                            float: inline-end;

                                            @media (max-width: 999.99px) {
                                                right: 25px;
                                            }

                                            @media (min-width: 1000px) {
                                                right: 25px;
                                            }

                                            i {
                                                position: relative;
                                                color: #5E1E0D;
                                                pointer-events: none;
                                                position: relative;
                                                z-index: 1;
                                            }
                                        }
                                    }

                                    .item-description {
                                        overflow-y: auto;
                                        overflow-anchor: none;
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        height: calc(100% - 25px - 25px);

                                        @media (max-width: 999.99px) {
                                            width: calc(100% - 15px - 5px);
                                            right: 5px;

                                            &::-webkit-scrollbar {
                                                width: 5px;
                                                background-color: transparent;
                                            }

                                            /* Add a thumb */
                                            &::-webkit-scrollbar-thumb {
                                                border-radius: 30px;
                                                background: #5E1E0D;
                                            }
                                        }

                                        @media (min-width: 1000px) {
                                            width: calc(100% - 25px - 5px);
                                            right: 5px;
                                        }

                                        p {
                                            margin: 0;
                                            padding-right: 5px;
                                        }
                                    }
                                }
                            }
                        }

                        .carousel-indicators .active {
                            background-color: #5E1E0D;
                        }
                    }
                }
            }
        }
    }
}

#groups-other {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;

    #item-header-color {
        width: 100%;
        background-color: #5E1E0D;
        position: absolute;

        @media (max-width: 469px) {
            top: 271px;
            height: 30px;
        }

        @media (min-width: 470px) and (max-width: 513px) {
            top: 251px;
            height: 30px;
        }

        @media (min-width: 514px) and (max-width: 767.98px) {
            top: 231px;
            height: 30px;
        }

        @media (min-width: 767.99px) and (max-width: 999.99px) {
            top: 272px;
            height: 35px;
        }

        @media (min-width: 1000px) and (max-width: 1199px) {
            top: 182px;
            height: 46px;
        }

        @media (min-width: 1200px) and (max-width: 1399px) {
            top: 193px;
            height: 49px;
        }

        @media (min-width: 1400px) {
            top: 225px;
            height: 51px;
        }
    }

    .container {
        position: relative;
        height: 100%;

        @media (max-width: 999px) {
            display: none;
        }

        #top-right {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #FECE02;
            z-index: 5;
            border-bottom-left-radius: 43px;

            @media (min-width: 1000px) and (max-width: 1199px) {
                width: 214px;
                height: 181px;
            }

            @media (min-width: 1200px) and (max-width: 1399px) {
                width: 255px;
                height: 193px;
            }

            @media (min-width: 1400px) {
                width: 300px;
                height: 225px;
            }

            &:after {
                position: absolute;
                content: '';
                height: 100%;
                width: 100vw;
                background-color: #FECE02;
                z-index: 150;
                border-bottom-left-radius: 43px;
            }
        }
    }
}

#groups-footer {
    display: flex;
    flex-shrink: 0;
    position: relative;

    @media (max-width: 999.99px) {
        height: 100px;

        &:before {
            position: absolute;
            content: '';
            height: calc(100% + 30px);
            width: 100%;
            top: -30px;
            background: linear-gradient(to bottom, rgba(234, 239, 239, 1) 0%, 29.588013887405396%, rgba(170, 201, 203, 1) 59.17602777481079%, 79.5880138874054%, rgba(119, 172, 175, 1) 100%);
        }
    }

    .container {
        flex: 1;
        position: relative;

        #groups-bottom {
            position: relative;
            height: 100%;

            @media (min-width: 1000px) and (max-width: 1199px) {
                padding-top: 15px;
                padding-bottom: 15px;
            }

            @media (min-width: 1200px) and (max-width: 1399px) {
                padding-top: 25px;
                padding-bottom: 25px;
            }

            @media (min-width: 1400px) {
                padding-top: 25px;
                padding-bottom: 25px;
            }

            .groups-box-form {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 60%;
                border: 1px solid #5E1E0D;
                z-index: 100;
                background-color: #F5F5F5;

                @media (max-width: 999.99px) {
                    display: none;
                }

                @media (min-width: 1000px) and (max-width: 1199px) {
                    padding-top: 15px;
                    padding-bottom: 15px;
                    border-radius: 30px;
                }

                @media (min-width: 1200px) and (max-width: 1399px) {
                    padding-top: 20px;
                    padding-bottom: 15px;
                    border-radius: 30px;
                    width: 50%;
                }

                @media (min-width: 1400px) {
                    padding-top: 20px;
                    padding-bottom: 15px;
                    border-radius: 30px;
                    width: 50%;
                }

                p {
                    text-align: center;
                    margin: 0;
                }

                button {
                    background-color: #5E1E0D;
                    color: #fff;
                    width: 65%;
                    padding: 5px;
                    border-radius: 30px;
                    border: 0;
                    margin-top: 10px;
                    font-weight: bold;

                    &:active {
                        box-shadow: 5px 7px 10px 2px rgba(0,0,0,.4);
                    }

                    @media (min-width: 1000px) and (max-width: 1199px) {
                        font-size: 1.2rem;
                    }

                    @media (min-width: 1200px) and (max-width: 1399px) {
                        font-size: 1.3rem;
                    }

                    @media (min-width: 1400px) {
                        font-size: 1.4rem;
                    }
                }
            }

            /* carousel-buttons */

            .carousel-button {
                position: absolute;
                z-index: 10;
                transform: translateY(-50%);
                top: 50%;

                svg {
                    width: 50px;
                    height: auto;
                    margin: 0 2rem;
                    cursor: pointer;
                    overflow: visible;

                    polygon, path {
                        transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
                        fill: #5E1E0D;
                    }

                    &.clicked {

                        polygon, path {
                            transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
                            fill: #F5F5F5;
                        }

                        .arrow {
                            animation: arrow-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
                        }

                        .arrow-fixed {
                            animation: arrow-fixed-anim 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
                        }
                    }
                }
            }

            .carousel-button[id="custom-carousel-prev"] {

                @media (max-width: 999.99px) {
                    left: 15%;
                }

                @media (min-width: 1000px) and (max-width: 1199px) {
                    left: 5%;
                }

                @media (min-width: 1200px) and (max-width: 1399px) {
                    left: 10%;
                }

                @media (min-width: 1400px) {
                    left: 10%;
                }

            }

            .carousel-button[id="custom-carousel-next"] {

                @media (max-width: 999.99px) {
                    right: 15%;
                }

                @media (min-width: 1000px) and (max-width: 1199px) {
                    right: 5%;
                }

                @media (min-width: 1200px) and (max-width: 1399px) {
                    right: 10%;
                }

                @media (min-width: 1400px) {
                    right: 10%;
                }
            }

            /* end carousel buttons */
        }

        #left-element {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 136%;
            background-color: #FECE02;
            z-index: 5;
            border-top-right-radius: 43px;

            @media (max-width: 999.99px) {
                display: none;
            }

            @media (min-width: 1000px) and (max-width: 1199px) {
                width: 213px;
            }

            @media (min-width: 1200px) and (max-width: 1399px) {
                width: 310px;
            }

            @media (min-width: 1400px) {
                width: 355px;
            }

            &:after {
                position: absolute;
                content: '';
                height: 100%;
                width: 50vw;
                left: -50vw;
                background-color: #FECE02;
                z-index: 150;
            }
        }

        #right-element {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 126%;
            z-index: 5;

            @media (max-width: 999.99px) {
                display: none;
            }

            &:after {
                position: absolute;
                content: '';
                height: 100%;
                width: 100vw;
                background: linear-gradient(to bottom, rgba(234, 239, 239, 1) 0%, 29.588013887405396%, rgba(170, 201, 203, 1) 59.17602777481079%, 79.5880138874054%, rgba(119, 172, 175, 1) 100%);
                z-index: 150;
                border-top-left-radius: 43px;
            }
        }
    }
}

/* for carousel-button */
@keyframes arrow-anim {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    5% {
        transform: translateX(-0.1rem);
    }
    100% {
        transform: translateX(1rem);
        opacity: 0;
    }
}

@keyframes arrow-fixed-anim {
    5% {
        opacity: 0;
    }
    20% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}
/* end keyframes */



#groups-modal {

    @media (max-width: 767.98px) {
        z-index: 1200;
    }

    .modal-dialog {
        max-width: 700px;

        form {
            .modal-content {

                .modal-body {
                    padding: 0 40px 0 40px;

                    label[for="InputName"], label[for="InputContact"] {
                        color: #5E1E0D;

                        &::first-letter {
                            font-family: 'Monplesir script';
                        }
                    }

                    label[for="InputName"] {
                        padding: 0 0 0 10px;
                        font-size: 1.8rem;

                        @media (max-width: 767.98px) {
                            text-align: center;
                        }

                    }

                    label[for="InputContact"] {
                        font-size: 1.1rem;
                        line-height: 1;
                        text-align: center;

                        small {
                            font-size: 11px;
                        }

                    }

                    input[id="InputName"], input[id="InputContact"] {
                        border-radius: 43px;
                        height: 50px;

                        &:focus {
                            outline: none;
                            border-color: #5E1E0D;
                            box-shadow: 0 0 0 0.2rem rgba(78, 149, 153, 0.5);
                        }
                    }

                    #write-group {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 50px;
                        background-color: #FECE02;
                        border-radius: 43px;

                        span {
                            font-size: 1.5rem;

                            @media (max-width: 767.98px) {
                                font-size: 1rem;
                            }

                            &::first-letter {
                                font-family: 'Monplesir script';
                            }
                        }
                    }

                    .select-col {
                        position: relative;

                        &:after {
                            content: '▼';
                            position: absolute;
                            color: #5E1E0D;
                            top: 50%;
                            right: 30px;
                            transform: translateY(-50%);
                            pointer-events: none;
                        }

                        .form-select {
                            border-radius: 43px;
                            background-image: none;

                            @media (max-width: 767.98px) {
                                font-size: 1rem;
                            }

                            &:focus {
                                outline: none;
                                border-color: #5E1E0D;
                                box-shadow: 0 0 0 0.2rem rgba(78, 149, 153, 0.5);
                            }
                        }
                    }

                    .form-check {

                        input {
                            width: 25px;
                            height: 25px;

                            &:focus {
                                outline: none;
                                border-color: #5E1E0D;
                                box-shadow: 0 0 0 0.2rem rgba(78, 149, 153, 0.5);
                            }

                            &:checked {
                                background-color: #5E1E0D;
                                border-color: #5E1E0D;
                            }
                        }

                        label {
                            font-size: 11px;
                            color: inherit;
                            padding: 7px 0 0 10px;
                        }
                    }

                }

                .modal-footer {
                    button {
                        width: 60%;
                        font-size: 1.2rem;

                        @media (min-width: 1400px) {
                            font-size: 1.3rem;
                        }
                    }
                }
            }
        }
    }
}