*{
    padding: 0;
    margin: 0;
    font-family: cr;
    direction: rtl;
}

/*
    white: #F4F4F4
    orange: #FF7315
    brown: #3A3535
    black: #232020
    black2: #4D4D4D
*/

/* grammerly users */
grammarly-desktop-integration{
    display: none;
}

/* fonts */
@font-face{
    font-family: cr;
    src: url(fonts/Cairo-Regular.ttf);
}
@font-face{
    font-family: cbo;
    src: url(fonts/Cairo-Bold.ttf);
}
@font-face{
    font-family: cbl;
    src: url(fonts/Cairo-Black.ttf);
}
@font-face{
    font-family: csb;
    src: url(fonts/Cairo-SemiBold.ttf);
}
@font-face{
    font-family: cli;
    src: url(fonts/Cairo-Light.ttf);
}
@font-face{
    font-family: cel;
    src: url(fonts/Cairo-ExtraLight.ttf);
}
@font-face{
    font-family: coco;
    src: url(fonts/Coconut.ttf);
}
@font-face{
    font-family: dalek;
    src: url(fonts/DalekPinpointBold.ttf);
}

/* animation */
@keyframes shake{
    0%, 100%{
        transform: rotateZ(0deg);
    }
    50%{
        transform: rotateZ(-25deg) scale(1.2);
        color: rgba(205, 92, 92, 1);
    }
    25%, 75%{
        transform: rotateZ(25deg);
    }
}
@keyframes shake2{
    0%, 100%{
        position: relative;
        left: 0;
    }
    50%{
        left: 2px;
        color: rgba(205, 92, 92, 1);
    }
    25%, 75%{
        left: -2px;
    }
}
@keyframes rotate{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
@keyframes move{
    0%{
        left: 120%;
    }
    100%{
        left: -20%;
    }
}

/* head */
.main-holder{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #F9f9f9;
}
.logo-div{
    display: flex;
    background-color: #F4F4F4;
    padding: .5em;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
}
.logo{
    width: 7em;
}

/* input */
.input-div{
    display: flex;
    flex-direction: column;
    margin-bottom: .2em;
    flex: 1;
}
.input-label{
    font-size: .9em;
    color: #444444;
    padding: .2em 0;
    line-height: 1.5em;
    font-family: cbo;
}
.red-star{
    color: rgba(205, 92, 92, 1);
    font-size: 1.5em;
    line-height: 0;
    vertical-align: baseline;
    padding: 0 .2em;
}
.input-btn-holder{
    display: flex;
    flex-direction: row;
}
.input{
    flex: 1;
    padding: .75em .5em;
    font-size: .9em;
    border: 1px solid #e5e5e5;
    background-color: #ffffff;
}
.input::placeholder{
    color: #a9a9a9;
    transition: color .25s;
}
.input:focus::placeholder{
    color: #cccccc;
}
.input:focus{
    outline: 1px solid rgba(36, 52, 75, 0.5);
}
.input-err{
    font-family: csb;
    color: rgba(205, 92, 92, 1);
    padding: 0 1em;
    line-height: 1em;
}
.input option:disabled{
    color: #bbbbbb;
}
.input-select-all-label-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(255, 215, 0, .5);
}
.input-select-all-input{
    margin: .5em;
}
.input-select-all-label{
    flex: 1;
    font-size: .7em;
    font-weight: bold;
    padding: .1em .5em;
}
.button-input-select-btn-div{
    border: 1px solid #e5e5e5;
    background-color: red;
    display: flex;
    flex-direction: row;
}
.button-input-select-btn{
    background-color: #e5e5e5;
    border: 0 solid transparent;
    padding: 0 .5em;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    cursor: pointer;
    transition: background .25s;
}
.button-input-select-btn:hover{
    background-color: #f0f0f0;
}
.button-input-select-btn:active{
    background-color: #e5e5e5;
}
.button-input-select-btn-icon{
    font-size: 1.1em;
    padding: 0 .25em;
    color: #444444;
}
.button-input-select-btn-txt{
    font-family: csb;
    font-size: 1.1em;
    padding: 0 .25em;
    color: #444444;
}
.multiple-select-list option{
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    padding: 0 .5em;
    border-right: 0 solid transparent;
    transition: background .25s, padding .25s, border .25s;
}
.multiple-select-list option:hover, .multiple-select-list option:checked{
    background-color: #f0f0f0;
    padding: 0 .75em;
    border-bottom: 1px solid #ffffff;
    border-right: 5px solid rgba(255, 215, 0, 1);
}

/* textarea */
.textarea{
    resize: vertical;
    min-height: 200px;
    padding: .75em .5em;
    font-size: .9em;
    border: 1px solid #e5e5e5;
}
.textarea::placeholder{
    color: #a9a9a9;
    transition: color .25s;
}
.textarea:focus::placeholder{
    color: #cccccc;
}
.textarea:focus{
    outline: 1px solid rgba(36, 52, 75, 0.5);
}

/* button */
.btns-div{
    display: flex;
}
.button-div, .button-gray-div{
    display: inline-flex;
    margin: .1em;
}
.button, .button-gray, .button:disabled{
    padding: .3em .5em;
    cursor: pointer;
    background-color: rgba(36, 52, 75, 1);
    border: 0 solid transparent;
    outline: none;
    color: #fdfdfd;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 3px;
    text-decoration: none;
}
.button:disabled{
    background-color: #f0f0f0;
    color: #bbbbbb;
    cursor: default;
}
.button-gray{
    background-color: rgba(36, 52, 75, .1);
    color: #444444;
}
.button-gray:active{
    background-color: #dddddd;
    color: #444444;
}
.button:active{background-color: rgba(63, 91, 131, 1);}
.button-gray:active{background-color: #DEDEDE;}
.button-icon, .button-gray-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 .2em;
    font-size: 16px;
}
.button-txt, .button-gray-txt, .button-link-txt{
    padding: 0 .2em;
    font-size: 14px;
}
.button-link-txt{
    font-size: .9em;
}

/* table */
.table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e5e5;
    margin-bottom: .2em;
}
.table-tr{
    transition: background .25s;
}
.table-tr:hover{
    background-color: rgba(36, 52, 75, 0.05);
}
.table-th{
    padding: .25em;
    background-color: #fdfdfd;
    color: #999999;
    text-align: center;
    font-family: cbo;
    border-bottom: 1px solid #e5e5e5;
    font-size: .9em;
}
.table-td, .table-td-center, .table-td-border, .table-td-center-border{
    padding: .3em 1em;
    color: #444444;
    font-size: .9em;
}
.table-td-border, .table-td-center-border{
    border-bottom: 1px solid #e5e5e5;
}
.table-td-center, .table-td-center-border{
    text-align: center;
}
.table-btn, .table-btn-red{
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(68, 68, 68, .5);
    cursor: pointer;
    text-decoration: none;
    transition: color .25s;
}
.table-btn:hover{
    color: #444444;
}
.table-btn-red{
    color: rgba(222, 42, 27, 0.5);
}
.table-btn-red:hover{
    color: rgba(222, 42, 27, 1.0);
}
.table-div{
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s;
}
.table-span-gray, .table-span-red, .table-span-orange, .table-span-green{
    font-size: .7em;
    font-family: csb;
    padding: 0 .3em;
    background-color: #f0f0f0;
    color: #444444;  
    border-radius: 3px;
}
.table-span-red{
    background-color: rgba(222, 42, 27, 1);
    color: #fdfdfd;
}
.table-span-orange{
    background-color: rgba(255, 215, 0, 1);
}
.table-span-green{
    background-color: rgba(34, 139, 34, 1);
    color: #fdfdfd;
}
.table-hidden-div{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-bottom: 1px solid #e5e5e5;
    transition: max-height .25s linear, opacity .5s linear;
}
.table-hidden-btn{
    color: #a9a9a9;
    cursor: pointer;
    transition: color .25s, transform .25s;
}
.table-hidden-btn:hover{
    color: #444444;
}
.table-hidden-table{
    margin: 1em;
    border: 1px solid #e5e5e5;
    border-collapse: collapse;
    width: calc(100% - 2em);
}
.table-hidden-th{
    border-bottom: 1px solid #e5e5e5;
    font-size: .9em;
    font-family: csb;
    width: 25%;
    padding: .5em;
}
.table-hidden-td{
    border-bottom: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    font-size: .9em;
    color: #444444;
    padding: .5em;
}
.table-icon-gray{
    color: #a9a9a9;
}
.table-icon-red{
    color: red;
}
.table-icon-green{
    color: lightseagreen;
}
.table-hidden-button{
    font-size: .75em;
    padding: 0 1em;
    cursor: pointer;
}

/* search form of the table */
.table-filter-holder{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(222, 42, 27, 1);
}
.table-big-title{
    flex: 1;
    font-size: 2em;
    line-height: 1em;
    padding: .5em;
    color: #ffffff;
}
.table-search-filter-div{
    display: flex;
    flex-direction: row;
    padding: .5em;
}
.table-search-filter-input-holder{
    display: flex;
    flex-direction: row;
}
.table-search-filter-select[lang=en], .table-search-filter-select[lang=ar]{
    padding: .2em .5em;
    border: 0 solid transparent;
    outline: none;
    border-right: 1px solid #e5e5e5;
}
.table-search-filter-select[lang=ar]{
    border-right-width: 0;
    border-left: 1px solid #e5e5e5;
    border-radius: 1px solid #e5e5e5;
}
.table-search-filter-select-opt{
    color: #444444;
    padding: 1em;
}
.table-search-filter-input{
    padding: .2em .5em;
    border: 0 solid transparent;
    outline: none;
    color: #444444;
}
.table-search-filter-input::placeholder{
    color: #a9a9a9;
    transition: opacity .25s;
}
.table-search-filter-input:focus::placeholder{
    opacity: .6;
}
.table-search-filter-btn{
    padding: .2em .75em;
    border: 0 solid transparent;
    background-color: #f5f5f5;
    color: #999999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: color .25s, background .25s;
}
.table-search-filter-btn:hover{
    background-color: #f0f0f0;
    color: #444444;
}
.table-search-filter-btn:active{
    background-color: #dddddd;
    color: #222222;
}
.table-search-filter-back-btn{
    color: #f0f0f0;
    text-decoration: none;
    font-family: csb;
    text-transform: uppercase;
}

/* general note */
.g-note, .g-note-err{
    padding: 1em;
    text-align: center;
    background-color: #fdfdfd;
    color: #444444;
    border: 1px solid rgba(68, 68, 68, .1);
    margin-bottom: .5em;
    flex: 1;
}
.g-note-err{
    background-color: rgba(205, 92, 92, .05);
    color: rgba(205, 92, 92, 1);
    border-color: rgba(205, 92, 92, .4);
}

/* side note */
.side-note-div{
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    border: 1px solid #e5e5e5;
    margin-bottom: .5em;
}
.side-note-head{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5em;
}
.side-note-icon{
    padding: .5em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #24344B;
}
.side-note-title{
    font-size: .9em;
    color: #24344B;
    font-family: cbo;
}
.side-note-des{
    color: #24344B;
    font-size: .8em;
    padding: .75em 1em;
    line-height: 1.2em;
}
.side-note-des b{
    font-weight: normal;
    font-family: cbo;
    font-size: .9em;
    line-height: 1.2em;
}

/* note */
.note-div, .note-div-err, .note-div-warning, .note-div-complete{
    flex: 1;
    text-align: center;
    background-color: #fdfdfd;
    border: 1px solid #e5e5e5;
    padding: 1em;
    margin: .2em 0;
    font-size: .9em;
    color: #444444;
}
.note-div-err{
    background-color: rgba(205, 92, 92, .05);
    border-color: rgba(205, 92, 92, .4);
    color: rgba(205, 92, 92, 1);
}
.note-div-warning{
    background-color: rgba(255, 215, 0, 1);
    border-color: rgba(255, 215, 0, .4);
    color: #fdfdfd;
}
.note-div-complete{
    background-color: rgba(132, 225, 132, .1);
    border-color: rgba(50, 205, 50, .4);
    color: #444444;
}
.note-info-line, .note-info-line-correct{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .25em .25em;
    color: rgba(222, 42, 27, 1);
    background-color: rgba(222, 42, 27, .05);
}
.note-info-line-correct{
    color: rgba(34, 139, 34, 1);
    background-color: rgba(34, 139, 34, .05);
}
.note-info-line-icon{
    padding: 0 .25em;
    font-size: .9em;
}
.note-info-line-txt{
    padding: 0 .25em;
    font-size: .7em;
    flex: 1;
}

/* static info */
.static-info-div, .static-info-div-border{
    display: flex;
    flex-direction: column;
    padding: .5em .2em;
    margin: .2em;
}
.static-info-div-border{
    border-bottom: 1px solid #e5e5e5;
}
.static-info-title{
    color: #222222;
    font-size: 1.2em;
    font-family: csb;
    line-height: 1em;
}
.static-info-des{
    color: #a9a9a9;
    font-size: .8em;
    line-height: 1em;
}
.static-info-value{
    color: rgba(205, 92, 92, 1);
    font-size: 1.2em;
    padding: 0 .5em;
    line-height: 1.5em;
    font-family: csb;
}

/* images shower */
.images-shower-div{
    display: flex;
    flex-direction: column;
    position: relative;
}
.images-shower-img-div{
    border: 1px solid #e5e5e5;
    display: flex;
    flex: 1;
    justify-content: center;
}
.images-shower-img{
    width: 100%;
    height: 100vh;
}          
.images-shower-btns{
    padding: .25em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.images-shower-btn{
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    margin: 0 .25em;
    cursor: pointer;
    color: #222222;
    opacity: .2;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
    transition: opacity .25s;
}
.images-shower-btn::before{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.images-shower-btn:hover{
    opacity: .6;
}
.images-shower-small-imgs-div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid #e5e5e5;
}
.images-shower-small-img-div, .images-shower-small-img-div-active{
    width: calc(10% - 4px);
    height: 6em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #e5e5e5;
    cursor: pointer;
    opacity: .6;
    transition: opacity .25s, border .25s;
}
.images-shower-small-img-div:hover{
    opacity: 1;
    border-bottom-color: #a9a9a9;
}
.images-shower-small-img-div-active{
    cursor: default;
    border-color: rgba(205, 92, 92, 1);
    opacity: 1;
}
.images-shower-small-img-img{
    width: 100%;
}

/* files uploader */
.files-uploader-div{
    flex: 1;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5em 1em;
    color: #444444;
    margin-bottom: .2em;
    cursor: pointer;
    transition: background .25s;
}
.files-uploader-div:active{
    background-color: #f0f0f0;
}
.files-uploader-icon{
    font-size: 2em;
}
.files-uploader-txt{
    font-family: csb;
    font-size: .9em;
    line-height: 1.2em;
}
.files-uploader-file-holder{
    display: flex;
    flex-direction: row;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    color: #444444;
}
.files-uploader-file-holder-icon{
    font-size: .8em;
    padding: 1em;
    background-color: #f0f0f0;
}
.files-uploader-file-holder-txt{
    padding: 0 1em;
    flex: 1;
    align-self: center;
}
.files-uploader-file-holder-del-btn{
    font-size: .8em;
    color: #ffffff;
    padding: 1em;
    background-color: rgba(205, 92, 92, 1);
    cursor: pointer;
}

/* options */
.opts-div{
    display: flex;
    flex-direction: column;
    margin-bottom: .2em;
}
.opts-inputs-div{
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
}
.opt-input-div{
    padding: .2em .25em;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f5f5f5;
    transition: background .25s;
}
.opt-input-div:hover{
    background-color: #f5f5f5;
}
.opts-input{
    margin: .2em 1em;
    align-self: center;
}
.opts-label{
    margin: 0 .5em;
    color: #444444;
    flex: 1;
    cursor: pointer;
    padding: .25em 0;
}
.opts-label-title{
    font-size: .9em;
    font-family: csb;
    line-height: 1em;
}
.opts-label-des{
    font-size: .8em;
    color: #a9a9a9;
    line-height: 1em;
}

/* span colors */
.span-color, .span-color-red, .span-color-green, .span-color-yellow{
    font-size: .8em;
    font-family: csb;
    border-radius: 5px;
    padding: 0 .5em;
    margin: 0 .1em;
    display: inline-block;
    line-height: 1.6em;
    color: #444444;
    background-color: #e5e5e5;
}
.span-color-red{
    color: #fdfdfd;
    background-color: rgba(222, 42, 27, 1);
}
.span-color-green{
    color: #fdfdfd;
    background-color: rgba(34, 139, 34, 1);
}
.span-color-yellow{
    background-color: rgba(255, 215, 0, 1);
}

/* big image */
.big-img-holder{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, .2);
    position: fixed;
    z-index: 2;
    top: 0;
    height: 100vh;
    width: 100vw;
}
.big-img-viewer{
    display: flex;
    justify-content: center;
    height: 90vh;
    width: 90vw;
    overflow: auto;
}
.big-pdf-viewer{
    display: flex;
}
.big-pdf-iframe{
    width: 100vw;
    height: 100vh;
    border: none;
}
.big-img-img{
    margin: 1em;
    transition: height .25s;
}
.big-img-control{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 1em;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .2);
    transition: background .25s;
}
.big-img-control:hover{
    background-color: rgba(0, 0, 0, .6);
}
.big-img-control-left{
    flex: 1;
}
.big-img-btn{
    font-size: 1.2em;
    color: #fdfdfd;
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s;
}
.big-img-btn:hover{
    background-color: rgba(253, 253, 253, .4);
}

/* pagination */
.pagination-holder{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.pagination-btn, .pagination-btn-active{
    font-size: .9em;
    text-decoration: none;
    width: 4ch;
    height: 4ch;
    margin: .1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a9a9a9;
    border: 1px solid #e5e5e5;
    transition: color .25s, border .25s;
}
.pagination-btn-active{
    border-color: rgba(205, 92, 92, 1);
    color: rgba(205, 92, 92, 1);
    cursor: default;
}
.pagination-btn:hover{
    border-color: #a9a9a9;
    color: #444444;
}

/* popup */
.popup-holder{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
}
.popup-div{
    width: 30%;
    min-width: 360px;
    background-color: #fdfdfd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 15px 0 rgba(68, 68, 68, .2), 0 40px 40px 0 rgba(68, 68, 68, .4);
}
.popup-head{
    display: flex;
    flex-direction: column;
}
.popup-title{
    flex: 1;
    font-size: .9em;
    font-family: csb;
    background-color: #f0f0f0;
    color: #444444;
    padding: .2em .5em;
}
.popup-body{
    padding: .5em;
    display: flex;
    flex-direction: column;
}
.popup-input{
    border: 1px solid #e5e5e5;
    padding: .2em .5em;
    font-size: 1em;
    outline: none;
}
.popup-input:focus{
    outline: 1px solid rgba(205, 92, 92, .6);
}
.popup-footer{
    padding: 0 .5em .5em .5em;
    display: flex;
    flex-direction: row;
}
.popup-btn, .popup-btn-cancel{
    margin: .1em;
    padding: .1em .5em;
    font-size: .8em;
    color: #fdfdfd;
    background-color: rgba(205, 92, 92, 1);
    border: 0 solid transparent;
    cursor: pointer;
    border-radius: 3px;
}
.popup-btn-cancel{
    background-color: #dddddd;
    color: #444444;
}

/* iframes */
.iframe-cp{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    margin-bottom: .2em;
}
.iframe-btn{
    padding: .5em .75em;
    cursor: pointer;
    font-size: 1em;
    color: #444444;
    transition: background-color .25s;
}
.iframe-btn:hover{
    background-color: #e5e5e5;
}

.iframe{
    border: 1px solid #e5e5e5;
}

/* pagination */
.page-a, .page-a-active{
    text-decoration: none;
    font-size: .9em;
    margin: .1em;
    background-color: #fdfdfd;
    width: 3ch;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #a9a9a9;
    border: 1px solid #e5e5e5;
    transition: border .25s, color .25s, background .25s;
}
.page-a:hover{
    border-color: #444444;
    color: #444444;
    background-color: #f5f5f5;
}
.page-a-active{
    border-color: rgba(222, 42, 27, 1);
    color: rgba(222, 42, 27, 1);
    background-color: rgba(222, 42, 27, .05);
    cursor: default;
}

/* loading */
.loading-div{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(36, 52, 75, .2);
    height: 100vh;
    width: 100vw;
}
.loading-circle{
    width: 2em;
    height: 2em;
    border: 7px solid #FFD700;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate 2s infinite linear;
}

/* head title */
.head-title-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(244, 245, 246, 1);
    margin: .5em 0;
}
.head-title-title{
    font-size: 1.4em;
    color: #444444;
    font-family: csb;
    flex: 1;
    padding: .2em .5em;
}
.head-title-btns-holder{
    padding: .3em;
}
.head-title-btn, .head-title-btn-gray{
    color: rgba(36, 52, 75, 1);
    padding: .2em .75em;
    background-color: rgba(255, 215, 0, 1);
    text-decoration: none;
    font-family: csb;
    cursor: pointer;
    margin: 0 .2em;
    transition: box-shadow .25s, color .25s;
}
.head-title-btn-gray{
    color: #a9a9a9;
    background-color: transparent;
}
.head-title-btn:hover{
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
}
.head-title-btn-gray:hover{
    color: #444444;
}

/* request notification */
.request-notification{
    flex: 1;
    background-color: rgba(34, 139, 34, .1);
    border: 1px solid rgba(34, 139, 34, .4);
    padding: .5em;
    margin-bottom: .2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.request-notification:before{
    content: "";
    background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(255, 255, 255, .6), rgba(0, 0, 0, 0));
    height: 200%;
    width: 50px;
    transform: rotateZ(45deg);
    position: absolute;
    left: -20%;
    top: -50%;
    animation: move 1s infinite  ease-in-out;
}
.request-notification-txt{
    font-size: 1.1em;
    font-family: csb;
    padding: 0 .5em;
    color: rgba(34, 139, 34, 1);
}
.request-notification-icon{
    font-size: 1.2em;
    padding: 0 .5em;
    color: rgba(34, 139, 34, 1);
}

/* footer */
.footer-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .2em;
}
.copy-rights{
    font-size: .7em;
    color: #a9a9a9;
    text-align: center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
    .logo-div{
        justify-content: center;
        padding: 1.5em;
    }
    .logo{
        width: 26em;
    }
    .head-title-title{
        font-size: 2.4em;
    }
    .head-title-btn{
        font-size: 1.8em;
    }
    .footer-div{
        padding: 1.5em;
    }
    .copy-rights{
        font-size: .8em;
    }
}