header,
footer{
    background-color: #e2e1e1;
    height:70px;
    font-family: Roboto;
}

.full-height{
    height: 100vh
}

.logo{
    position:fixed;
    width:120px;
    height:120px;
    z-index: 5;
    border-radius: 20px;
    top:10px;
}

h1, h3{
    font-weight: 900;
    padding-top:40px;
    text-align: center;
    font-family: Noto Serif Hebrew;
    font-size: larger;
}

p{
    font-family: Noto Serif Hebrew;
    font-size: larger;
    
}

.main, .selected{
    padding:20px;
    text-align:justify;
    direction:rtl;
}

.selected p::first-letter{
    font-size: 1.5em;
    color:#494646;
    font-weight: bolder;
    padding-left: 50px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-lg-4,
.col-lg-6,
.col-8{
    background-color: #e2e1e1;
    /* height:100vh; */
}

.text-area{
    background-color: #fff;
    border-radius:20px;
}

button{
    position: fixed;
    font-family: Roboto;
    
}

/* greys over the page when revealing the input box */

.block-out{
    display:none;
    background-color: rgba(128, 128, 128, 0.6);
    height:120vh;
    width:100%;
    position: fixed;
    top:-100px;
    z-index: 8;
}


.input-area{
    height:240px;
    width:450px;
    background-color: #fff;
    position: relative;
    border-radius: 20px;
    padding:20px;
    top:50vh;
    font-family: Roboto;
}

.input-box{
    width:400px;
    height:50px;
    border:none;
    border-radius: 20px;
    background-color: #727070;
    position: relative;
    top:100px;
}

.input-box:focus{
    background-color: #e2e1e1;
    border: #e2e1e1;
}

.send-btn{
    top:115px;
    left:220px;
    position: relative;
}

#submit-btn,
#submit-btn-mob{
    z-index: 5;
}

#submit-btn-mob{
    position: relative;
}

#clear-btn,
#clear-btn-mob{
    opacity:0;
}

#copy-btn,
#copy-btn-mob{
    display: none;
}

#print-btn,
#copy-btn{
    top:160px;
}

#copy-btn{
    left:100px;
}

#copy-btn-mob{
    left:400px;
}

.shaded-border{
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
}

.copright{
    text-align: center;
    margin-top:10px
}

.nishmas-box{
    text-align: center;
    margin-top:10px;
    background-color: #494646;
    color:#fff;
    border-radius: 20px;
    height:20px;
}

/* button to remove sheimos */

#sheimos{
    display:none;
    position: fixed;
}

.sheimos{
    top:300px;
    position: relative;
}

.sheimos-btn{
    background-color: #e2dada;
    border:solid 0.5px #5a6268
}

.sheimos-return-btn{
    background-color: #5a6268;
}

.sheimos-btn,
.sheimos-return-btn{
    height:30px;
    width:80px;
    border-radius: 20px;
    cursor: pointer;
}


.sheimos-toggle{
    left:5px;
}

.sheimos-return-toggle{
    left:55px;
}

.sheimos-toggle,
.sheimos-return-toggle{
    position: relative;
    top:4px;
    height:20px;
    width:20px;
    border-radius: 50%;
    background-color: #fff;
}

/* print button in mobile */

@media screen and (max-width: 943px){
    #print-btn{
        top:25px;
    }

    .logo{
        width:80px;
        height:80px;
        left:20px;
        top:20px;
    }

    .input-area{
        top:30vh;
    }

}

.close-submit{
    position: relative;
    top:20vh;
    left:350px;
    height:20px;
    width:20px;
    font-size: 2rem;
    color:#fff;
    font-weight: bolder;
    cursor: pointer;
}


.close-submit:hover{
    color:black;
}



@media print{
    #print-btn,
    #submit-btn,
    #clear-btn,
    #submit-btn-mob,
    #clear-btn-mob,
    #sheimos,
    #copy-btn,
    #copy-btn-mob,
    .logo{
       display:none !important;
    }

    .shadow{box-shadow:white !important;}
}


/* mobile sizing */

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

    header{
        height:100px;
    }

    h1, h3{
        padding-top:30px;
        font-size:large;
    }
    

    #print-btn{
        top:23px;
        right:60px;
    }

    .logo{
        width:70px;
        height:70px;
        left:10px;
        top:10px;
        position: relative;
    }

    .main, .selected{
        padding:15px;
        font-size:0.8rem;
    }

    #submit-btn-mob,
    #clear-btn-mob{
        left:20px
    }

    #clear-btn-mob{
        left:150px
    }

    #copy-btn-mob{
        left:250px;
    }

    .input-area{
        height:220px;
        width:280px;
        left:40px;
    }

    .input-box{
        width:250px;
        height:40px;
        border:none;
        border-radius: 20px;
        background-color: #727070;
        position: relative;
        top:100px;
    }

    .send-btn{
        left:50px;
    }
}