.itemHeader {
    text-align: center;
}

.itemInputSearch {
    display: inline-block;
    position: relative;
    width: 30%;
    padding: 0.5%;
    margin: 1%;
    border: solid 2px #34abeb;
    text-align: center;
    border-radius: 10px;
}

.itemInputNew {
    display: inline-block;
    position: relative;
    width: 95%;
    padding: 1%;
    margin: 1%;
    border: solid 2px #34abeb;
    border-radius: 10px;
}

::placeholder {
    color: burlywood
}

.itemInput {
    display: inline-block;
    position: relative;
    width: 95%;
    padding: 1%;
    margin: 1%;
    margin-top: 0;
    margin-bottom: 3%;
    border: solid 2px darkorange;
    border-radius: 10px;
}

.itemInputButton {
    display: inline-block;
    position: relative;
    width: 95%;
    padding: 3%;
    margin: 1%;
    margin-top: 0;
    margin-bottom: 3%;
    border: solid 2px darkorange;
    border-radius: 10px;
    background: darkorange;
    text-align: center;
}

.itemSelect {
    display: inline-block;
    position: relative;
    width: 95%;
    padding: 3%;
    margin: 1%;
    margin-top: 0;
    margin-bottom: 3%;
    border: solid 2px darkorange;
    border-radius: 10px;
}

/*.itemButton {
    display: inline-block;
    position: relative;
    max-width: 30px;
    padding: 1%;
    margin: 1%;
}*/

.itemTitle {
    font-size: small;
    font-weight: bold;
    margin-left: 1%;
}

.itemValue {
    font-size: small;
    padding-top: 10px;
}

    .itemValue a, .itemValue a:visited, .itemValue a:link {
        /*    display: inline-block;
    position: relative;
    width: 95%;
    margin: 1%;
    border: none;
    color: darkorange;
    font-size: larger;
    font-weight: bolder;
    text-decoration: none;*/
    }

.itemHidden {
    visibility: hidden;
    display: none;
}

.formItemDivider {
    width: 100%;
    border-bottom: solid 1px darkorange;
    padding-top: 8px;
}

.sortIcon {
    width: 30px;
    padding-left: 10px;
}
/* The Modal (background) */
.modalBig {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 95%;
    height: 95%;
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);*/ /* Fallback color */
    background-color: transparent;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    max-width: 900px;
    height: 90%;
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);*/ /* Fallback color */
    background-color: #dee2e6; /* Black w/ opacity */
}

.modalAdminBig {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 90%;
    height: 90%;
    background-color: white; /* Black w/ opacity */
    padding: 2%;
    border: 1px solid #565656;
    border-radius: 20px;
    overflow: auto;
}

.modalAdmin {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 98%;
    max-width: 900px;
    height: 90%;
    background-color: white; /* Black w/ opacity */
    border: 2px solid #565656;
    border-radius: 20px;
    overflow:auto;
}

.modalEnquiry {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    padding-top: 10px;
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 600px;
    height: 750px;
    overflow: auto;
    background-color: white;
    border: 2px solid #565656;
    border-radius: 20px;
}

/* Modal Content */
.modal-content {
    background-color: #e3e3e3;
    /*margin: auto;*/
    /* padding: 20px; */
    border: 2px solid #565656;
    border-radius: 20px;
    width: 99%;
/*    box-shadow: 0 5px 10px rgb(0 0 0 / 30%);*/
}
.modal-content-big {
    /*background-color: #e3e3e3;*/
    /*margin: auto;*/
    /* padding: 20px; */
    
    border-radius: 20px;
    width: 99%;
    /*    box-shadow: 0 5px 10px rgb(0 0 0 / 30%);*/
}

.modalMedium {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 600px;
    height: 750px;
    overflow: auto;
    background-color: #2f5d7a;
    border-radius: 20px;
}
.modalSmall {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 50%;
    transform: translate(-50%);
    top: 10px;
    width: 600px;
    height: 550px;
    overflow: auto;
    background-color: #2f5d7a;
    border-radius: 20px;
}

/* Confirmation Message modal - START*/

/* modal confirm button*/
.modal-confirm {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    text-align: center;
    z-index: 1; /* Sit on top */
    /*left: 0;*/
    top: 10px;
    width: 95%;
    /*height: 100%;*/ /* Full height */
    overflow: auto; /* Enable scroll if needed */

    padding-top: 50px;
}

/* Modal Content/Box */
.modal-content-confirm {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 350px;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #2f5d7a;
    border-radius: 20px;
}
/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Confirmation Message modal - END*/





/* The Close Button */
.close {
    color: #f8f9fa;
    float: right;
    font-size: 47px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }



/*------------------------------------------------------ Edo Graphics Large ----------------------------------------------------------*/


/*--------------- Landing Page Design ------------------*/


.landingBanner {
    background-color: #23324c;
    height: 85px;
}
.footerHomePage {
    background-color: #23324c;
    height: 40px;
    color: white;
    bottom: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 7px;
    font-size: 20px;
}

.landingLogoDiv {
    position: relative;
    margin-top: -50px;
    text-align: center;
}

.landingLogo {
    Max-width: 400px;
    background-color: white;
    padding: 10px;
}




/*--------------- App header Design ------------------*/


.headerBackground {
    background-color: #273c49; /* Bright tourquese*/
    /*  background-color: #EDF4F5; Light Gray*/
    /*  background-color:  #FFE9C9; Bleached almonds*/

    height: 70px;
}

.logo {
    max-width: 300px;
    height: 60px;
    margin-top: 5px;
}

.logoutButton {
    margin-top: 5px;
    font-size: 65px;
    color: orange;
    filter: brightness(80%);
    margin-right: 35px;
}

.scanHeader {
    font-size: 60px;
    margin-top: 5px
}


/*------------------------ App Design ------------------*/

.card {
    margin-top: 2em;
    border-radius: 1em;
    text-align: center;
    min-height: 220px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

    .card img {
        width: 65%;
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .card .card-title {
        font-weight: 700;
        font-size: 1.5em;
    }


.DHicons {
    width: 105px;
    height: 105px;
    margin-top: 15px
}
.DHiconsSmall {
    width: 25px;
    height: 25px;
}


.dhOrangeBackground {
    background-color: #f4a230;
}

.dhOrangeFont {
    color: #f4a230;
}

.dhDarkBlueBackground {
    background-color: #23324c;
}

.dhDarkBlueFont {
    color: #23324c;
}



.aContainer {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    margin: 0 10px;
    margin-bottom: 10px;
    border-radius: 20%;
    padding: 5px;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
}

.aContainerClear {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    margin: 0 10px;
    border-radius: 20%;
    padding: 5px;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
}

.aContainerEnter {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    margin: 0 10px;
    border-radius: 20%;
    padding: 5px;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
}

.aContainer .padStyle {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(0deg, #fff, #ddd);
    border-radius: 50%;
    line-height: calc(100px - 12px);
    font-size: 50px;
    text-decoration: none;
    color: #262626;
    transition: .5s;
}


.aContainer .padStyleSelect {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    line-height: calc(60px - 12px);
    font-size: 24px;
    text-decoration: none;
    color: #262626;
    transition: .5s;
}

.aContainer .padStyleClear {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    line-height: calc(60px - 12px);
    font-size: 24px;
    text-decoration: none;
    color: #262626;
    transition: .5s;
}


#reader, #readerCopy {
    left: 105px;
}

.searchField {
    margin-top:10px;
}


.labelLeft {
    border-radius: 25px 0px 0px 25px;
    background-color: #2f5d7a;
    font-size: 18px;
    font-weight: bolder;
    letter-spacing: 0.1em;
    color: #f29822;
    padding: 12px;
    outline: none;
    border: none;
    
}

.labelRight {
    border-radius: 0px 25px 25px 0px;
    background-color: #2f5d7a;
    font-size: 18px;
    font-weight: bolder;
    letter-spacing: 0.1em;
    color: #f29822;
    padding: 12px;
    outline: none;
    border: none;
}



.textRoundRight {
    border-radius: 0px 25px 25px 0px;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #61677C;
    padding: 12px;
    outline: none;
    border: none;
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}

.textRoundLeft {
    border-radius: 25px 0px 0px 25px;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #61677C;
    padding: 12px;
    outline: none;
    border: none;
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}


.my-custom-scrollbar {
    position: relative;
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

.dhTable {
    background: #2f5d7a;
    color: orange;
    font-weight: bolder;
}


.modalTitle {
    color: orange;
    font-size: 24px;
    font-weight: bold;
}

/*------------------------------------------------------ Edo Graphics Small ----------------------------------------------------------*/
@media (max-width: 767px) {
    /*--------------- Landing Page Design ------------------*/




    .landingLogo {
        Max-width: 300px;
        background-color: white;
        padding: 10px;
    }




    /*--------------- App header Design ------------------*/



    .logo {
        margin-top: 5px;
        height: 60px;
        max-width: 300px;
    }



    .my-custom-scrollbar {
        position: relative;
     
        max-width: 700px;
        overflow: auto;
    }

    .table-wrapper-scroll-y {
        display: block;
    }


    


}



@media (max-width: 400px) {

    /* The Modal (background) */
    .modalPhoto {
        display: none; /* Hidden by default */
        position: absolute; /* Stay in place */
        z-index: 1; /* Sit on top */
        top: 10px;
        width: 100%;
        height: 90%;
        overflow: auto; /* Enable scroll if needed */
        /*background-color: rgb(0,0,0);*/ /* Fallback color */
        background-color: #dee2e6; /* Black w/ opacity */
    }

    .logo {
        max-width: 130px;
        height: 40px;
        margin-top: 13px;
    }



    #reader, #readerCopy {
        left: 0px;
    }
}





/* The Close Button end */

/* Loading GIF start */
.se-pre-con {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 94%;
    z-index: 9999;
    background: url(../gif/DH_Loading.gif) center no-repeat;
    background-color: white;
    /*opacity: 0.9;*/
    background-position-y: 15%;
    margin-top: 0px;
    z-index: 1000;
}
.se-pre-con-100 {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 9999;
    background: url(../gif/DH_Loading.gif) center no-repeat;
    background-color: white;
    /*opacity: 0.9;*/
    background-position-y: 15%;
    margin-top: 0px;
    z-index: 1000;
}
.se-pre-con-semi-transp {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 94%;
    z-index: 9999;
    background: url(../gif/DH_Loading.gif) center no-repeat;
    background-color: rgba(255,255,255,0.8);
    /*opacity: 0.9;*/
    background-position-y: 15%;
    margin-top: 0px;
    z-index: 1000;
}
/* Loading GIF end */







/*--------------------- form test -----------------------*/


.formBlock {
    display: block;
    width: 99%;
    height: auto;
    padding: 32px;
    background-color: #EBECF0;
    border-radius: 13px;
    box-shadow: 3px 3px 5px #BABECC, -5px -5px 10px #FFF;
} 

.field{
    display: grid;
    gap: 24px;
    margin-bottom: 32px;


}

.input-group {
    width: 100%;
    height: auto;
}


.inputLabel {
    display: block;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #2f5d7a;
    text-shadow: 1px 1px 0 #FFF;
    margin-bottom: 8px;
}

.formInput {
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #61677C;
    text-shadow: 1px 1px 0 #FFF;
    padding: 12px;
    border-radius: 25px;
    outline: none;
    border: none;
 
    box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
    transition: all 0.2s ease-in-out;
}

.formInputSmall {
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #61677C;
    text-shadow: 1px 1px 0 #FFF;
    padding: 9px;
    border-radius: 25px;
    outline: none;
    border: none;
    box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
    transition: all 0.2s ease-in-out;
}


formInput:focus {
    box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}




.dhTouchButton {
    background-color: transparent;
    color: #61677C;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-shadow: 1px 1px 0 #FFF;
    padding: 8px 20px;
    border: 0;
    border-radius: 30px;
    box-shadow: 3px 3px 5px #BABECC, -4px -4px 10px #FFF;
    outline: 0;
    color: #2f5d7a;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.dhTouchButtonDisabled {
    background-color: transparent;
    color: #61677C;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-shadow: 1px 1px 0 #FFF;
    padding: 8px 20px;
    border: 0;
    border-radius: 30px;
    box-shadow: 3px 3px 5px #BABECC, -4px -4px 10px #FFF;
    outline: 0;
    color: #c7d2d9;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.dhTouchButtonSave {
    background-color: transparent;
    color: #61677C;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-shadow: 1px 1px 0 #FFF;
    padding: 8px 20px;
    border: 0;
    border-radius: 30px;
    box-shadow: 3px 3px 5px #BABECC, -4px -4px 10px #FFF;
    outline: 0;
    color: ##97dd97;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

input[type=checkbox].formInput{
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #61677C;
    text-shadow: 1px 1px 0 #FFF;
    padding: 12px;
    border-radius: 25px;
    outline: none;
    border: none;
    box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
    transition: all 0.2s ease-in-out;
}





    .dhTouchButton:hover {
        box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
    }

    .dhTouchButton:active {
        box-shadow: inset 2px 2px 3px #BABECC, inset -2px -2px 3px #FFF;
    }


/*------------------------------------------------------ Error Message Start ----------------------------------------------------------*/
.alert-warning{
    position:absolute;
    right:2%;
    top:2%
}
/*------------------------------------------------------ Error Message End ----------------------------------------------------------*/


/* MODAL FORMS START */

.modal {
    padding: 1%;
    width: 98%;
    background-color: transparent
}

.modal-content {
    background-color: white;
    border: 1px solid #888;
    width: 100%;
    height: 100%;
    padding: 1%
}

.outdiv {
    width: 100%;
    height: 95%;
}
/* The Close Button */
.close {
    color: orange;
}

    .close:hover,
    .close:focus {
        color: orangered;
    }

/* MODAL FORMS END */