/* POP UP DISPLAYS *
/* All display popups is having a z-index of 10 */
/* DISPLAY LARGE */
#display-large,
#display-large-2,
.other-screen {
    width: 100%;
    height: 100vh;
    max-width: 1600px;
    max-height: 100%;
    display: block;
    position: fixed;
    top: 0;
    background-color: var(--primary-color3);
    overflow-y: auto;
    overflow-x: auto;
    /* Change to hidden as needed */
    justify-items: center;
    justify-content: center;
    scrollbar-width: none;
    /* padding: 1rem; */
}

/* Small Side Screen Styling */
.other-screen-small {
    width: 350px;
    height: 40vh;
    background-color: var(--primary-color2);
    position: fixed;
    /* top: 0; */
    bottom: 0;
    right: 0;
    display: grid;
    border-top-left-radius: 10px;
    overflow: hidden;
}

.other-screen-close-btn-small {
    grid-column: 1/2;
    grid-row: 1/2;
    color: var(--primary-color);
    border: none;
    background-color: var(--secondary-color1);
    /* background-color: green; */
    width: fit-content;
    height: fit-content;
    z-index: 1;
    font-size: 1.1em;
    padding: var(--base-padding);
    border-bottom-right-radius: 10px;
}

.other-screen-items-holder-small {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color2);
}

/**************************************************************
*** STYLING THE BACKGROUND OF EVERY POPUP PAGE WITH CONTENT ***
**************************************************************/
.pop-content-page-holder {
    background-color: var(--primary-color);
    min-height: 100vh;
}

.pop-content-page-title {
    margin-top: 0;
    padding-top: var(--large-padding);
}

.fit-content-pop-page-holder {
    background-color: var(--primary-color);
    max-width: 80%;
    width: fit-content;
    height: fit-content;
    align-self: center;
    justify-self: center;
    border: 1px solid var(--accent3-color);
    box-shadow: 0 0 10px var(--accent1-color);
    border-radius: 15px;
    overflow: hidden;
    display: grid;
    justify-content: center;
}


#display-large {
    z-index: 9;
}

#display-large-2 {
    z-index: 10;
}

.display-large-2 {
    z-index: 10;
}

.other-screen-small {
    z-index: 10;
}

#close-large-display,
#close-large-display-2,
.other-screen .other-screen-close-btn {
    position: fixed;
    /* background: none; */
    color: var(--accent1-color);
    background-color: var(--primary-color2);
    font-size: 1.8em;
    border: none;
    padding: .5rem;
    margin: .5rem;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    right: 2rem;
    z-index: 3;
}

#display-large-item-holder,
#display-large-item-holder-2,
.other-screen .other-screen-items-holder {
    width: 100%;
    height: 99.95vh;
    overflow: auto;
    scrollbar-width: none;
    align-content: center;
    overflow-y: auto;
    max-height: 8;
}

#display-large {
    z-index: 10;
}

#display-large-2 {
    z-index: 10;
}

/* large popup view for message report and others styling */
.popScreenHolder {
    display: grid;
    max-width: 60%;
    width: fit-content;
    height: fit-content;
    max-height: 80vh;
    padding: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
    /* align-content: center; */
    align-self: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--secondary-color1);
    box-shadow: 0 0 10px var(--poor-white);
    border-radius: 15px;
    transition: transform .5s;

    animation-name: zoom-in;
    animation-duration: 0.5s;
}

.popScreenHolder h2 {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    color: var(--accent1-color);
    text-align: center;
    margin: 0;
    padding: 0;
}

.popParagraph {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0;
    width: 100%;
    text-align: center;
    overflow: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin: 0 auto;
    padding: 1rem;
    font-size: 1em;
    /* color: var(--paragraph-color-on-white); */
}

.popParagraph2 {
    align-self: self-start;
    text-align: center;
}

#report-action-btn {
    grid-column: 1/2;
    /* grid-row: 3/4; */
    margin: 0 auto;
}


/* UPLOAD SCREEN */
.upload-screen {
    display: block;
    z-index: 10;
}

#upload-main-holder {
    width: 100%;
    height: 100%;
    display: block;
    align-content: center;
    justify-items: center;
}

#upload-items-holder,
.popUpForm-holder {
    width: fit-content;
    height: fit-content;
    background-color: var(--primary-color);
    border-radius: 15px;
    padding: 2rem;
    margin: 0 auto;
    box-shadow: 0 0 10px var(--accent1-color);
}

#upload-items-holder fieldset,
.popUpForm-holder fieldset {
    padding: 2rem;
    border-radius: 15px;
}

#upload-items-holder fieldset legend,
.popUpForm legend {
    font-size: 1.4em;
    font-family: var(--heading-font);
    color: var(--secondary-color2);
    text-align: center;
    text-transform: uppercase;
}

#upload-items-holder input,
#upload-items-holder textarea {
    font-family: var(--paragraph-font);
    background-color: var(--primary-color1);
    color: var(--primary-color2);
    display: block;
    border-radius: 10px;
    border: none;
    text-transform: capitalize;
    min-width: fit-content;
    width: 100%;
}

#upload-items-holder input:focus,
#upload-items-holder textarea:focus {
    outline: dotted 1px var(--secondary-color2);
    background-color: var(--primary-color);
}

#upload-items-holder textarea {
    font-size: .9em;
    height: 5rem;
    scrollbar-width: none;
    text-transform: none;
}

#film-description-character-counter {
    font-size: .8em;
    border-radius: 10px;
}

#upload-items-holder label {
    font-size: 1.2em;
    font-family: var(--paragraph-font);
    color: var(--secondary-color2);
}

#upload-items-holder .upload-input-desc {
    outline: none;
    color: black;
    width: 100%;
    padding: .5rem;
}

#upload-items-holder #profileFileInput {
    background-color: var(--primary-color1);
}

#upload-validator-msg {
    font-size: .8em;
    color: rgb(245, 109, 109)
}

/********************************/
/** SIDE POPUP DISPLAY STYLING **/
/********************************/
.side-screen {
    background-color: var(--secondary-color-no-trans);
    width: 400px;
    height: 550px;
    display: grid;
    position: fixed;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 10;
    border-top-left-radius: 10px;
}

.side-screen-close-btn {
    background-color: var(--primary-color2);
    color: var(--primary-color);
    font-size: 1.4em;
    border: none;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    position: relative;
    right: 0;
    top: 0;
    margin: .2rem;
    grid-row: 1/2;
    grid-column: 1/2;
    z-index: 1;
}

.side-screen-items-holder {
    width: 100%;
    height: 100%;
    align-content: center;
    align-items: center;
    background-color: var(--primary-color2);
    grid-row: 1/2;
    grid-column: 1/2;
    border-top-left-radius: 10px;
    overflow: hidden;
}


/*******************************
*** START INFO-POPUP-STYLING ***
*******************************/
.informPopUpMainFrame {
    position: fixed;
    width: fit-content;
    height: fit-content;
    padding: var(--base-padding);
    height: fit-content;
    display: grid;
    grid-template-columns: auto 1fr;
    z-index: 5;
    transition: all 0.5s;
    justify-self: center;
    transform: translate(-50%);
    left: 50%;
    overflow: hidden;
    column-gap: var(--base-padding);
}

.informPopUpMainFrame>* {
    grid-row: 1/2;
}

.informPopUpMainFrame .informPopUpCloseBtn {
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    border-radius: 100%;
    background: var(--primary-color3);
    box-shadow: 2px 1px 2px;
    color: var(--accent1-color);
}

.informPopUpMainFrame .informPopUpScreen {
    width: 300px;
    height: fit-content;
    scrollbar-width: thin;
    max-height: 150px;
    overflow: auto;
    display: block;
    justify-self: center;
    align-self: center;
    background-color: var(--primary-color3);
    color: var(--accent1-color);
    box-shadow: 0 2px 5px;
    font-size: 1em;
    font-family: var(--paragraph-font);
    padding: var(--large-padding);
    border-radius: 1px 15px 1px 15px;
    transition: all 0.5s;
    margin: 0;
}


/************************************
********* STYLING ANIMATIONS ********
************************************/
/* Zoom Content In */
@keyframes zoom-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Zoom Content Out */
@keyframes zoom-out {
    100% {
        transform: scale(0);
    }

    0% {
        transform: scale(1);
    }
}


/* MEDIA QUARRY - SMALL-TAB AND LARGE-PHONE SCREEN */
@media screen and (max-width: 890px) {

    /*PopUp Screen Styling*/
    .popScreenHolder {
        max-width: 85%;
        /* width: 95%; */
    }

    .popParagraph {
        font-size: 1.15em;
    }

    .fit-content-pop-page-holder {
        width: 80%;
    }
}

/* MEDIA QUARRY - SMALL-PHONE SCREEN */
@media screen and (max-width: 489px) {

    /**************************************************************
    *** STYLING THE BACKGROUND OF EVERY POPUP PAGE WITH CONTENT ***
    **************************************************************/
    .fit-content-pop-page-holder {
        width: 90%;
    }

    /* PopUp Screen Styling*/
    .popScreenHolder {
        width: 98%;
    }

    #close-large-display,
    #close-large-display-2,
    .other-screen .other-screen-close-btn {
        font-size: 1.4em;
        padding: .5rem;
        margin: .5rem;
        width: 35px;
        height: 35px;
        left: 0;
        text-align: center;
    }

    /********************************/
    /** SIDE POPUP DISPLAY STYLING **/
    /********************************/
    .side-screen {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .side-screen-close-btn {
        width: 35px;
        height: 35px;
    }

    .side-screen-items-holder {
        border-radius: 0;
    }

    /*******************************
    *** START INFO-POPUP-STYLING ***
    *******************************/
    .informPopUpMainFrame .informPopUpScreen {
        width: fit-content;
    }
}

/* MEDIA QUARRY - MINI PHONE SCREEN */
@media screen and (max-width: 359px) {

    /* UPLOAD SCREEN */
    #upload-items-holder,
    .popUpForm-holder {
        padding: 1rem;
    }

    #upload-items-holder fieldset,
    .popUpForm-holder fieldset {
        padding: 1rem;
    }

    #upload-items-holder .upload-input-desc,
    .popUpForm label input {
        font-size: 1em;
    }

    /* #upload-btn {
        margin: 1rem auto 0 auto;
        padding: 1rem;
    } */
}