/*****************************************************************************************************************/
/****************************************** BELLEROPHON VERIFICATION MAIN STYLE *********************************/
/***************************************************************************************************************/


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    font-family: "Poppins Regular";
}
body{
    width: 100%;
    
}


/*************** HEADER *****************/
header{
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.7rem;
    padding: 0 2vw;
    background: white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .1);
    z-index: 2;
}
#header_name{
    display: flex;
}
#header_name>p:nth-child(1){
    font-family: "Poppins Medium";
}
#header_name>p:nth-child(2){
    font-family: "Poppins Light";
    opacity: 0.7;
    margin-left: .7rem;
}
#homepage_button{
    width: 5rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0%, -50%);
    cursor: pointer;
    transition: .2s;
}
#homepage_button:hover{
    background: rgba(0, 0, 0, .1);
}
#homepage_button>img{
    width: 45%;
    height: 45%;
    object-fit: contain;
}

/***************** MAIN ********************/
main{
    width: 100%;
    height: calc(100vh - 5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #f9fafb;
    background: rgb(249,250,251);
    background: radial-gradient(circle, rgba(249,250,251,1) 53%, rgba(240,240,240,1) 100%);
    overflow: hidden;
    padding: 4vh 0 7vh 0;
    z-index: 1;
}
main::-webkit-scrollbar{
    width: 5px;
    background: white;
}
main::-webkit-scrollbar-thumb{
    background: black;
}
#verification_container{
    width: 60%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: center;
    position: relative;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    border-radius: 1rem;
    padding: 2vh 2vw;
}
#verification_container_logo{
    width: 7rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0%;
    /* transform: translate(-50%, -70%); */
    background: white;
    /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
    border-radius: .5rem;
}
#verification_container_logo>img:nth-child(1){
    width: 80%;
    height: 80%;
    object-fit: contain;
}
#verification_container_logo>img:nth-child(2){
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}
#verification_title{
    font-size: 2.5rem;
    margin:2vh 0 3vh 0;
}
#verfification_inputs_container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}
.inputs_box{
    width: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 1rem 0;
}
.inputs_box>img:nth-child(1){
    width: 3rem;
    height: 2.5rem;
    object-fit: contain;
}
.inputs_box>input{
    width: 100%;
    border-radius: .4rem;
    margin-left: 1rem;
    font-size: 1.5rem;
    padding: .7rem 1rem;
    background: rgb(245, 245, 245);
    border: none;
}
.inputs_box>img:nth-child(3){
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%) rotate(30deg);

    display: none;
}
.extra_message_text_for_weight{
    font-size: 1.2rem;
}
#search_report_button{
    width: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    font-size: 1.7rem;
    background: rgb(33,184,245);
    border-radius: 3rem;
    color: white;
    font-family: "Poppins Medium";
    cursor: pointer;
    transition: .2s;
}
#search_report_button>p{
    text-shadow: 1px 1px #0c8eb6;
}
#search_report_button:hover{
    opacity: 0.7;
}

#error_message_box{
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1.4rem;
    padding: 1rem;
}






/****************** MEDIAS CONTAINER ************/
#all_medias_container{
    width: 90%;
    max-height: 35vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    padding: 5rem 2rem 2rem 2rem;
    margin-top: 4vh;
    background: rgb(245, 245, 245);
    border-radius: .5rem;
}
.medias_box{
    width: 10vw;
    height: 10vw;
    min-width: 80px;
    min-height: 80px;
    max-width: 150px;
    max-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 1rem;
    border-radius: .4rem;
    cursor: pointer;
    padding: .5rem;
}
#report_image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
#report_video{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}
#video_sign_overlay{
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    padding: 10% 10%;
}
#video_sign_overlay>img{
    width: 3vw;
    height: 3vw;
    max-width: 3.7rem;
    max-height: 3.7rem;
    min-width: 2rem;
    min-height: 2rem;
    object-fit: contain;
    opacity: .7;
}
.medias_box_icon{
    width: 50%;
    height: 50%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: .7;
}
#report_pdf{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.report_media_ios{
    width: 10vw;
    height: 10vw;
    min-width: 80px;
    min-height: 80px;
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
#download_zip_button{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2.5%;
    left: 1%;
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: .5rem;
    cursor: pointer;
    z-index: 5;
    padding: .5rem 1rem;
    font-size: 1.4rem;
    opacity: .5;
    pointer-events: none;
    background: rgb(33,184,245);
    color: white;
    text-shadow: 1px 1px #0c8eb6;
    transition: .2s;
}
#download_zip_button>img{
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    margin-right: .5rem;
}
#download_zip_button:hover{
    opacity: .8;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 1px 2px -1px, rgba(0, 0, 0, 0.3) 0px 1px 1px -1px;
}
.media_loader{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    background: rgba(0, 0, 0, .7);
    color: white;
    font-size: 1.25rem;
    opacity: 0;
    pointer-events: none;
    border-radius: .5rem;
}
.media_loader>span{
    width: 3rem;
    height: 3rem;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    /* animation: spinner 1s linear infinite;  */
}

#zip_loader{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
}
#zip_loader>span{
    width: 4rem;
    height: 4rem;
    border: 4px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



#date_text{
    position: absolute;
    bottom: 2%;
    left: 2%;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

#goto_batch_btn{
    position: absolute;
    top: 1.5%;
    right: 1%;
    font-size: 1.25rem;  
    background: white;
    padding: .5rem 1rem;
    border-radius: .5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

#goto_normal_btn{
    position: absolute;
    top: 1.5%;
    left: 1%;
    font-size: 1.25rem;  
    background: white;
    padding: .5rem 1rem;
    border-radius: .5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    cursor: pointer;
    text-decoration: none;
    color: black;
}


#extra_message_text{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-top: 2rem;
}
#extra_message_text>p{
    margin-right: 1rem;
    font-size: 1.2rem;
}
#extra_message_text>a{
    text-decoration: none;
}

/******************************* SUCCESS ANIMATION ******************************/
#success_anime_box{
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 3rem;
    left: 10%;
    /* background: red; */
    pointer-events: none;
    z-index: 5;
}
.success_anime_img{
    width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
    position: absolute;
}

/****************************** MEDIA VIEWER OVERLAY *************************/

#media_viewer_overlay{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .9);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}
#close_overlay_button{
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}
#close_overlay_button>img{
    width: 30%;
    height: 30%;
    object-fit: contain;
}
#overlay_media_container{
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.overlay_media{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}



/* ****** CHRISTMAS ******** */
#christmas_three_box{
    width: 7rem;
    height: 7rem;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(2%, -100%);

    display: none;
}
#christmas_three_box>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#christmas_bells_box{
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -40%) rotate(30deg);

    display: none;
}
#christmas_bells_box>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/****************************************************************************************************/
/**************************************** CHRISTMAS ************************************************/
#christmas_icon_box01{
    width: 6rem;
    height: 6rem;
    position: absolute;
    top: 0;
    left: 1rem;

    display: none;
}
#christmas_icon_box01>img{
    width: 100%;
    height: 100%;
    object-fit: contain;

    display: none;
}






/********************************************************************************************************/
/************************************************ BATCH PROCESS ****************************************/
#batch_process_main{
    padding: 0;
    align-items: flex-start;
}
#batch_process_container{
    width: 100%;
    height: calc(100% - 5rem);
    padding: 5rem 0 3rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-y: auto;
}
#batch_process_container::-webkit-scrollbar{
    width: 5px;
    background: white;
}
#batch_process_container::-webkit-scrollbar-thumb{
    background: black;
}
.batch_process_innerbox{
    width: 80%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    background: white;
    margin: 2vh 0;
    font-size: 1.4rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
.batch_process_innerbox>p{
    width: 100%;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}
.batch_process_innerbox>pre{
    background: rgb(238, 238, 238);
    padding: 2rem 2rem .5rem 2rem;
    border-radius: .7rem;
}
.batch_process_innerbox>textarea{
    width: 80%;
    max-width: 95%;
    min-height: 15vh;
    padding: 1rem;
}
#send_batch_button_container{
    width: 100%;
    display: flex;
}
#send_batch_button{
    font-size: 1.5rem;
    padding: .5rem 1.5rem;
    border-radius: .4rem;
    background: rgb(33,184,245);
    color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    cursor: pointer;
}
#send_batch_button>p{
    text-shadow: 1px 1px #0c8eb6;
}
#send_batch_button:hover{
    background: rgb(63, 198, 252);
}
#all_batch_reports_container{
    width: 70%;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    background: rgb(243, 243, 243);
    border-radius: .7rem;
    overflow-y: auto;
}
#all_batch_reports_container::-webkit-scrollbar{
    width: 5px;
    background: white;
}
#all_batch_reports_container::-webkit-scrollbar-thumb{
    background: black;
}
#text_user_msg{
    font-size: 1.3rem;
}
.batch_report{
    width: 100%;
    display: flex;
    font-size: 1.4rem;
    padding: .7rem 1.5rem;
    opacity: .4;
    pointer-events: none;
}
.batch_report>p{
    width: 30%;
    margin-right: 2rem;
}
.batch_report>a{
    text-decoration: none;
}
.batch_report:nth-child(odd){
    background: rgb(228, 228, 228);
}
.batch_report:hover{
    background: rgb(214, 214, 214);
}
.batch_report_download_button{
    display: flex;
    justify-content: center;
    background: rgb(33,184,245);
    color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    cursor: pointer;
    padding: 0 .5rem;
}
.batch_report_download_button>p{
    text-shadow: 1px 1px #0c8eb6;
}
.batch_report_download_button:hover{
    background: rgb(63, 198, 252);
}
.report_batch_loader_box{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.report_batch_loader{
    width: 2rem;
    height: 2rem;
    border: 2px solid #000000;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spinner 1s linear infinite; 
}




/************************************************************************************/
/******************************** RESPONSIVE ***************************************/

@media only screen and (max-width: 800px) {

    #verification_container {
        width: 85%;
    }
    #goto_batch_btn{
        display: none;
    }

}


/* Portrait orientation */
@media (orientation: portrait) {
    main{
        flex-direction: column;
        background: white;
        padding: 2vh 0;
        align-items: flex-start;
        overflow-x: hidden;
        /* overflow-y: auto; */
    }
    #batch_process_main{
        background: rgb(249,250,251);
        background: radial-gradient(circle, rgba(249,250,251,1) 53%, rgba(240,240,240,1) 100%);
    }
    #verification_container{
        width: 100%;
        min-height: 90%;
        border-radius: initial;
        background: transparent;
        box-shadow: none;
        padding: 2vh 2vw;
    }
    #verification_container_logo{
        display: none;
    }
    #all_medias_container {
        width: 97%;
        max-height: initial;
    }
    #goto_batch_btn{
        display: none;
    }
    #date_text{
        width: 100%;
        position: relative;
        padding-left: 1rem;
        padding-top: 4vh;
    }
}