@import url('/static/main/css/header.css');
@import url('/static/main/css/index.css');
@import url('/static/main/css/about.css');
@import url('/static/main/css/schedule.css');
@import url('/static/main/css/contacts.css');
@import url('/static/main/css/browser_update.css');
@import url('/static/news/css/news.css');
@import url('/static/news/css/news_detail.css');
@import url('/static/main/css/groups.css');
@import url('/static/privacy_policy/css/legal.css');


@font-face {
    font-family: 'PlayfairDisplay';
    src: url('/static/main/font/PlayfairDisplay.ttf') format('truetype');
}

@font-face {
    font-family: 'Monplesir script';
    src: url('/static/main/font/Monplesir_script.ttf') format('truetype');
}

html {
    overflow-y: hidden;
}

html, body {
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #F5F5F5 !important;
    font-family: 'PlayfairDisplay' !important;

    /* Scrollbar */

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

    /* Add a thumb */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #4e9599;
    }

    /* end Scrollbar */

    @media (max-width: 999px) {
        /* Scrollbar */

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

        /* Add a thumb */
        ::-webkit-scrollbar-thumb {
            border-radius: 0px;
            background: transparent;
        }

        /* end Scrollbar */
    }
}

header {
    position: relative;

}

main {
    position: relative;

}

p {
    color: #4F4E4E;

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

   @media (min-width: 767.99px) and (max-width: 999px) {
        font-size: 14px;
    }

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

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

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




.alert {
    display: none;
    justify-content: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background-color: #ECE7E4 !important;
    border: 2px solid #4e9599 !important;

    @media (max-width: 767.98px) {
        left: 30%;
    }

    p {
        margin: 0;
        color: #4e9599;
        font-size: 13px;

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

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



@media (min-width: 1000px) {
    .desktop-none {
        display: none !important;
    }
}

@media (max-width: 999.99px) {
    .mobile-none {
        display: none !important;
    }
}


.modal {
    .modal-dialog {

        .modal-content {
            background-color: #ECE7E4 !important;
            font-family: 'PlayfairDisplay';
            border: 3px solid #4e9599;
            border-radius: 43px;

            .modal-header {

                h5 {
                    color: #4e9599;

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

                .circle-button {
                    position: relative;
                    width: 1.5rem;
                    height: 1.5rem;
                    background-color: #4e9599;
                    border: none;
                    border-radius: 50%;
                    cursor: pointer;

                    &:active {
                        opacity: 0.5;
                    }

                    &::before, &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 60%;
                        height: 2px;
                        background-color: #ece4d8;
                        transform: translate(-50%, -50%) rotate(45deg);
                    }

                    &::after {
                        transform: translate(-50%, -50%) rotate(-45deg);
                    }
                }
            }

            .modal-body {

                img {
                    width: 100%;
                    max-height: 626px;
                }
            }

            .modal-footer {
                button {
                    background-color: #4e9599;
                    border: 0;
                    color: #ece4d8;
                    border-radius: 43px;
                    cursor: pointer;
                }
            }
        }
    }
}

#feedback_modal {

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

        form {

            .modal-content {

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

                    label[for="InputName"], label[for="InputContact"] {
                        color: #4e9599;

                        &::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: #4e9599;
                            box-shadow: 0 0 0 0.2rem rgba(78, 149, 153, 0.5);
                        }
                    }

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

                        span {
                            font-size: 1.5rem;

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

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

                    .form-floating {

                        textarea {
                            border-radius: 43px;
                            height: 200px;
                            overflow: hidden;
                            resize: none;
                            padding: 20px 30px 20px 30px;


                            &.form-control:invalid, &.form-control.is-invalid {
                                padding-right: calc(1.5em + .75rem);
                                background-position: top calc(1em + .1875rem) right calc(1em + .1875rem);
                            }

                            &:focus {
                                outline: none;
                                border-color: #4e9599;
                                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: #4e9599;
                                box-shadow: 0 0 0 0.2rem rgba(78, 149, 153, 0.5);
                            }

                            &:checked {
                                background-color: #4e9599;
                                border-color: #4e9599;
                            }
                        }

                        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;
                        }
                    }
                }
            }
        }
    }
}