/*   General controls*/
.DButtonsSize {
    font-weight: bold;
    width: 50%;
    /*border: 2px solid rgb(13, 27, 59);*/
    /*border: none;*/
    border-radius: 21px;
    transition-duration: 0.4s;
    /*margin-right: 10px;
    margin-left: 10px;*/
}

.PDFButtonsSize {
    font-weight: bold;
    width: 30%;
    /*border: 2px solid rgb(13, 27, 59);*/
    /*border: none;*/
    border-radius: 21px;
    transition-duration: 0.4s;
    /*margin-right: 10px;
    margin-left: 10px;*/
}

.mb-10, .my-10 {
    margin-bottom: 6rem !important
}

.red-color {
    color: red!important;
}



/*   page styles    */
/*   -----------    */



/*   Default    */
/*   -------    */
@media only screen and (min-width: 992px) {
    /* TABLET LANDSCAPE / DESKTOP */
    /*.defaultUpPnl #btnCollagesS, .defaultUpPnl #btnStudentsS, .defaultUpPnl #btnOrganizationS, .defaultUpPnl #btnInstructionsS {
        display: none;
    }*/

    .defaultUpPnl .DPageButtons {
        width: 48%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* TABLETS PORTRAIT */
    /*.defaultUpPnl #btnCollagesS, .defaultUpPnl #btnStudentsS, .defaultUpPnl #btnOrganizationS, .defaultUpPnl #btnInstructionsS {
        display: none;
    }*/

    .defaultUpPnl .DPageButtons {
        width: 48%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* SMARTPHONES LANDSCAPE */
    /*.defaultUpPnl #btnCollages, .defaultUpPnl #btnStudents, .defaultUpPnl #btnOrganization, .defaultUpPnl #btnInstructions {
        display: none;
    }*/

    /*.defaultUpPnl #btnCollagesS, .defaultUpPnl #btnStudentsS, .defaultUpPnl #btnOrganizationS, .defaultUpPnl #btnInstructionsS {
        display: normal;
    }*/

    .defaultUpPnl .DPageButtons {
        width: 80%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    /* SMARTPHONES PORTRAIT */
    /*.defaultUpPnl #btnCollages, .defaultUpPnl #btnStudents, .defaultUpPnl #btnOrganization, .defaultUpPnl #btnInstructions {
        display: none;
    }

    .defaultUpPnl #btnCollagesS, .defaultUpPnl #btnStudentsS, .defaultUpPnl #btnOrganizationS, .defaultUpPnl #btnInstructionsS {
        display: normal;
    }*/

    .defaultUpPnl .DPageButtons {
        width: 90%;
    }

    .defaultUpPnl .DButtonsSize {
        font-size: 0.9rem;
    }
}




/*   Steps   */
/*   -----   */
.rounded-btn {
    font-weight: bold;
    width: 25%;
    height: 40px;
    border-radius: 21px;
    transition-duration: 0.4s;
}

.notes-div {
    margin-right: 40px;
    width: 93%;
    color: black;
    /*text-align: right;*/
    font-size: medium;
    font-weight: 600;
    text-align: justify;
    text-justify: inter-word;
}

.notes-img {
    float: right;
}





/*   Login    */
/*   -----    */
.btnLogin {
    font-size: 13pt;
    font-weight: bold;
    width: 35%;
    background-color: rgb(8, 183, 64);
    color: black;
    /*border: 2px solid rgb(13, 27, 59);*/
    border: none;
    border-radius: 21px;
    transition-duration: 0.4s;
}

    .btnLogin:hover {
        font-size: 13pt;
        font-weight: bold;
        background-color: rgb(9, 135, 62);
        color: white;
        border-radius: 21px;
        transition-duration: 0.4s;
    }

.btnForget {
    font-size: 13pt;
    font-weight: bold;
    width: 60%;
    background-color: transparent;
    color: black;
    border: none;
}

    .btnForget:hover {
        font-size: 13pt;
        font-weight: bold;
        background-color: #ff9800;
        color: white;
        transition-duration: 0.4s;
        border-radius: 21px;
    }

.img {
    width: 120px;
    margin: auto;
    margin-top: -110px;
    image-rendering: optimizeQuality;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    /*margin-top: -50px;*/
}


/*-----txts-----*/




.userInput input[type=text], .passInput input[type=password] {
    padding-right: 40px;
}

.userInput, .passInput {
    position: relative;
}

#first, #second {
    position: absolute;
    right: 0;
    top: 23px;
    margin-right: 10px;
    font-size: 18px;
    color: orange;
}

.userInput input[type=text]:focus + #first, .passInput input[type=password]:focus + #second {
    color: limegreen;
}

.login-txt {
    text-align: center;
    direction: ltr;
}

.pass-txt {
    text-align: center;
    direction: ltr;
}

.btn-inline-small-container {
    width: 80%;
    text-align: center;
    white-space: nowrap;
}



@media (min-width: 100px) {
    .loginUpPnl .text-box {
        padding: 1.75rem 2rem 0.875rem 2rem;
    }

    .btn-inline-small-container {
        width: 100%;
        white-space: nowrap;
    }

    .loginUpPnl .text-box {
        padding: 1.75rem 2rem 0.875rem 2rem;
    }

    .loginUpPnl #loginImg {
        width: 30%;
        margin-top: -105px;
        image-rendering: optimizeQuality;
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
    }
}

@media (min-width: 768px) {
    .btn-inline-small-container {
        /*width: 20%;*/ /*  change it to 70% to make row to column start from here*/
        width: 40%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .loginUpPnl .text-box {
        padding: 1.75rem 6rem 0.875rem 6rem;
    }

    .loginUpPnl #loginImg {
        width: 30%;
        margin-top: -105px;
        image-rendering: optimizeQuality;
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
    }
}

@media (min-width: 992px) {
    .btn-inline-small-container {
        width: 40%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .loginUpPnl .text-box {
        padding: 1.75rem 12rem 0.875rem 12rem;
    }

    .loginUpPnl #loginImg {
        width: 30%;
        margin-top: -110px;
        image-rendering: optimizeQuality;
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
    }
}

@media (min-width: 1200px) {
    .btn-inline-small-container {
        width: 40%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 2%;
    }

    .loginUpPnl .text-box {
        padding: 1.75rem 9rem 0.875rem 9rem;
    }

    .loginUpPnl #loginImg {
        width: 35%;
        margin-top: -110px;
        image-rendering: optimizeQuality;
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
    }
}







/*   BotCheck    */
/*   --------    */
.jCaptchaUpPnl #captImg {
    width: 60%;
    height: 150%;
    margin-top: -5px;
    image-rendering: optimizeQuality;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
}

.capt-div {
    height: 94px !important;
    width: 70%;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
}

.capt-div-txt {
    height: 94px !important;
    width: 70%;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
}

.btnNewChallenge {
    /*background-color: rgb(161, 172, 192);*/
    color: black;
    cursor: pointer;
    border: 1px solid rgb(255, 44, 44);
    border-radius: 4px;
    font-weight: 600;
    transition-duration: 0.4s;
    background: rgb(255, 44, 44) url('../Images/NewChal.png') no-repeat center;
    /*display: block;*/
    height: 50px;
    padding: 6px 12px;
    font-size: 11pt;
    margin-top: 30px;
    float: left;
    display: inline-block;
    width: 24% !important;
}

    .btnNewChallenge:hover {
        /*background-color: #153169;*/
        color: white;
        background: rgb(170, 0, 0) url('../Images/NewChal.png') no-repeat center;
        border: 1px solid rgb(255, 44, 44);
        /*background-image: url('../Images/Octicons-searchHovered.png');*/
        /*background-image: linear-gradient(#214193, #153169, #214193);*/
    }

    .btnNewChallenge:disabled {
        /*background-color: #f44336;*/
        color: black;
        opacity: 0.4;
    }

    .btnNewChallenge:focus, .btnNewChallenge:active {
        border: 1px solid rgb(255, 44, 44);
        box-shadow: 0 0 10px 0 red;
        transition: .3s;
        color: black;
        background: white url('../Images/NewChalHovered.png') no-repeat center;
    }

.btnVerify {
    color: black;
    cursor: pointer;
    border: 1px solid #09C646;
    border-radius: 4px;
    max-height: 53px;
    font-weight: 600;
    transition-duration: 0.4s;
    display: inline-block;
    height: 50px;
    /*padding: 6px 12px;*/
    padding: 0px;
    font-size: 11pt;
    color: white;
    text-align: center;
    line-height: 1.42857143;
    margin-top: 20px;
    float: left;
    width: 24% !important;
}

    .btnVerify:hover {
        color: white;
        border: 1px solid #09873E;
    }

    .btnVerify:disabled {
        color: black;
        opacity: 0.4;
    }

    .btnVerify:focus, .btnVerify:active {
        border: 1px solid rgb(44, 255, 44);
        box-shadow: 0 0 10px 0 red;
        transition: .3s;
        color: black;
    }

.capImg {
    width: 100%;
    height: 100%;
    -webkit-box-shadow: -1px 4px 26px 11px rgba(57, 47, 110, 0.75);
    -moz-box-shadow: -1px 4px 26px 11px rgba(57, 47, 110, 0.75);
    box-shadow: -1px 4px 26px 11px rgba(57, 47, 110, 0.75);
    border: 1px solid #392F6E;
}

.cap-img-container .normal-label {
    padding-right: 14px;
    line-height: 1.5rem;
    font-family: DroidKufi;
    font-weight: 800;
}

.cap-img-container {
    width: 80%;
    text-align: right;
    padding-right: 0 !important;
    padding-left: 0 !important;
    white-space: nowrap;
}

.txt-box-container {
    width: 80%;
    text-align: right;
    padding-right: 0 !important;
    padding-left: 0 !important;
    white-space: nowrap;
}


@media (min-width: 100px) {
    .cap-img-container {
        width: 80%;
        white-space: nowrap;
    }

    .txt-box-container {
        width: 90%;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .cap-img-container {
        width: 50%;
        white-space: nowrap;
    }

    .txt-box-container {
        width: 70%;
        white-space: nowrap;
    }
}

@media (min-width: 992px) {
    .cap-img-container {
        width: 50%;
        white-space: nowrap;
    }

    .txt-box-container {
        width: 50%;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .cap-img-container {
        width: 50%;
        white-space: nowrap;
    }

    .txt-box-container {
        width: 50%;
        white-space: nowrap;
    }
}





/*   StudentAcChk    */
/*   --------    */
.ac-chk-btns {
    color: black;
    cursor: pointer;
    border: 1px solid #09C646;
    border-radius: 30px;
    max-height: 53px;
    font-weight: 600;
    transition-duration: 0.4s;
    display: inline-block;
    height: 50px;
    /*padding: 6px 12px;*/
    padding: 0px;
    color: white;
    text-align: center;
    margin-top: 20px;
    width: 70%;

    font-size: 0.975rem;
    /*font-weight: 900;*/
    line-height: 2rem;
    font-family: DroidKufi;
    font-weight: 500;
    /*padding-bottom: 5px;*/
}

.row-then-col {
    display: inline-block;
    width: 90%;
}

@media (min-width: 100px) {
    .row-then-col {
        display: block;
        width: 90%!important;
        margin-left: auto;
        margin-right: auto;
    }

    .ac-chk-btns {
        width: 100%;
    }

    .btns-parent {
        white-space: normal;
    }
}

@media (min-width: 768px) {
    .row-then-col {
        display: inline-block;
        width: 50% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .ac-chk-btns {
        width: 70%;
    }

    .btns-parent {
        white-space: nowrap;
    }
}

@media (min-width: 992px) {
    .row-then-col {
        display: inline-block;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .ac-chk-btns {
        width: 70%;
    }

    .btns-parent {
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .row-then-col {
        display: inline-block;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .ac-chk-btns {
        width: 70%;
    }

    .btns-parent {
        white-space: nowrap;
    }
}





/*     Student make account     */
/*     --------------------     */
.group-title {
    text-align: right;
    width: 90%;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.title-font {
    font-family: DroidKufi;
}

.data-txt-box-container {
    width: 80%;
    text-align: right;
    /*padding-right: 0 !important;
    padding-left: 0 !important;*/
    white-space: nowrap;
}

.dll-width {
    width: 100%;
}

.lbl-state {
    width: 100%!important;
}

.btn-inline-container {
    width: 80%;
    text-align: center;
    white-space: nowrap;
}

.rounded-btn-2 {
    font-weight: bold;
    width: 100%;
    height: 40px;
    border-radius: 21px;
    transition-duration: 0.4s;
}

.rounded-btn-3 {
    font-weight: bold;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    transition-duration: 0.4s;
}

#chkStAgreeDiv {
    width: 90%;
    padding-right: 5%;
}

#chkStAgreeDiv .custom-control .custom-control-label {
    white-space: normal !important;
    text-align:justify;
}





/*     custom checkboxes     */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    /*background-color: red;*/
}



.custom-control-label::before {
    /*color: #fff;*/                           /*bootstrap's checkbox check mark*/
    /*background-color: #caca4c;*/
    height: 1.5rem;
    width: 1.5rem;
    right: -2.5rem;
    top: 0.20rem;
}

.custom-control-label {
    /*color: #ff6a00;*/
    /*background-color: #caca4c;*/
    /*font-size: 1rem;*/
    top: 0;
    font-size: 0.975rem;
    line-height: 1.5rem;
    font-family: DroidKufi;
    font-weight: 500;
}

    .custom-control-label::after {
        /*color: #fff;*/                  /*bootstrap's checkbox label*/
        /*background-color: #caca4c;*/
        height: 1.5rem;
        width: 1.5rem;
        right: -2.5rem;
        top: 0.20rem;
    }




@media (min-width: 100px) {
    .data-txt-box-container {
        width: 90%;
        white-space: nowrap;
    }

    .btn-inline-container {
        width: 90%;
        white-space: nowrap;
    }

    #chkWoundedDiv .custom-checkbox {
        padding-top: 2rem;
    }
}

@media (min-width: 768px) {
    .data-txt-box-container {
        /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
        width: 70%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .btn-inline-container {
        /*width: 20%;*/ /*  change it to 70% to make row to column start from here*/
        width: 70%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (min-width: 992px) {
    .data-txt-box-container {
        width: 40%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .dll-width {
        width: 100%!important;
    }

    .btn-inline-container {
        width: 20%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (min-width: 1200px) {
    .data-txt-box-container {
        width: 40%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .dll-width {
        width: 100%!important;
    }

    .btn-inline-container {
        width: 25%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 2%;
    }
}





/*    Student Application     */
/*    -------------------     */
#ap-lbl {
    white-space: normal !important;
    text-align: justify;
}

.choices {
    font-family: DroidKufi;
}




/*   StudentMainPg    */
/*   ------------    */
@media only screen and (min-width: 992px) {

    .StudMainPgUpPnl .DColPageButtons {
        width: 48%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .StudMainPgUpPnl .DColPageButtons {
        width: 48%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .StudMainPgUpPnl .DColPageButtons {
        width: 80%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {

    .StudMainPgUpPnl .DColPageButtons {
        width: 90%;
    }

    .StudMainPgUpPnl .DColButtonsSize {
        font-size: 0.9rem;
    }
}






/*    StApplication      */
/*    -------------------     */
.four-btns-inline-container {
    width: 80%;
    text-align: center;
    white-space: nowrap;
}

.choices-univ-container, .choices-coldep-container {
   /* width: 80%;*/
    text-align: right;
    /*padding-right: 0 !important;
    padding-left: 0 !important;*/
    white-space: nowrap;
    /*border: 1px solid blue !important;*/
}

.chsBtn-container {
    /*border: 1px solid yellow !important;*/
}



    @media (min-width: 100px) {
        .choices-univ-container {
            /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
            width: 99%;
            white-space: nowrap;
            margin-left: 1%;
            margin-right: 0.05%;
            /*display: inline;*/
        }

        .choices-coldep-container {
            /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
            width: 99%;
            white-space: nowrap;
            margin-left: 0.05%;
            margin-right: 0.05%;
            /*display: inline;*/
        }

        .chsBtn-container {
            width: 10%;
            white-space: nowrap;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            /*display: inline;*/
        }

        .four-btn-inline-container {
            /*width: 20%;*/ /*  change it to 70% to make row to column start from here*/
            width: 70%;
            white-space: nowrap;
            margin-left: 4%;
            margin-right: 4%;
        }

        .ch-div {
            text-align: center !important;
        }

        
    }

    @media (min-width: 768px) {
        .choices-univ-container {
            /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
            width: 99%;
            white-space: nowrap;
            margin-left: 1%;
            margin-right: 0.05%;
            /*display: inline;*/
        }

        .choices-coldep-container {
            /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
            width: 99%;
            white-space: nowrap;
            margin-left: 0.05%;
            margin-right: 0.05%;
            /*display: inline;*/
        }

        .chsBtn-container {
            width: 6.5%;
            white-space: nowrap;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            /*display: inline;*/
        }

        .four-btn-inline-container {
            /*width: 20%;*/ /*  change it to 70% to make row to column start from here*/
            width: 70%;
            white-space: nowrap;
            margin-left: 4%;
            margin-right: 4%;
        }

        .ch-div {
            text-align: center !important;
        }
    }

    @media (min-width: 992px) {
        .choices-univ-container {
            width: 27%;
            white-space: nowrap;
            margin-left: 1%;
            margin-right: 0.05%;
            display: inline-block;
        }

        .choices-coldep-container {
            width: 55%;
            white-space: nowrap;
            margin-left: 0.5%;
            margin-right: 1%;
            display: inline-block;
        }

        .chsBtn-container {
            width: 4.5%;
            white-space: nowrap;
            margin-right: 0.5%;
            display: inline-block;
            /*border: 1px solid green;*/
        }

        .four-btn-inline-container {
            width: 20%;
            white-space: nowrap;
            margin-left: 2%;
            margin-right: 2%;
        }

        .ch-div {
            text-align: center !important;
        }
    }

    @media (min-width: 1200px) {
        .choices-univ-container {
            width: 27%;
            white-space: nowrap;
            margin-left: 1%;
            margin-right: 0.05%;
            display: inline-block;
            /*border: 1px solid red;*/
        }

        .choices-coldep-container {
            width: 55%;
            white-space: nowrap;
            margin-left: 0.5%;
            margin-right: 1%;
            display: inline-block;
            /*border: 1px solid blue;*/
        }

        .chsBtn-container {
            width: 5%;
            white-space: nowrap;
            margin-right: 0.5%;
            display: inline-block;
            /*border: 1px solid green;*/
        }

        .four-btn-inline-container {
            width: 20%;
            white-space: nowrap;
            margin-left: 2%;
            margin-right: 2%;
        }

        .ch-div {
            text-align: center!important;
        }
    }
    /*   StudentUpdate      */
    /*   ---------------    */
    .btn-in-line {
    color: black;
    cursor: pointer;
    border: 1px solid #09C646;
    border-radius: 4px;
    max-height: 53px;
    font-weight: 600;
    transition-duration: 0.4s;
    display: inline-block;
    height: 50px;
    /*padding: 6px 12px;*/
    padding: 0px;
    font-size: 11pt;
    color: white;
    text-align: center;
    line-height: 1.42857143;
    margin-top: 7px;
    float: left;
    width: 18% !important;
}




/*   CollegeMainPage    */
/*   ---------------    */
@media only screen and (min-width: 992px) {
    .ColMainPgUpPnl .DColPageButtons {
        width: 48%;
    }
}

    @media only screen and (min-width: 768px) and (max-width: 991px) {

        .ColMainPgUpPnl .DColPageButtons {
            width: 48%;
        }
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {

        .ColMainPgUpPnl .DColPageButtons {
            width: 80%;
        }
    }

    @media only screen and (min-width: 320px) and (max-width: 479px) {

        .ColMainPgUpPnl .DColPageButtons {
            width: 90%;
        }

        .ColMainPgUpPnl .DColButtonsSize {
            font-size: 0.9rem;
        }
    }




/*   Student test   */
/*   ------------   */
.manual-size-lbl {
    width: 50%;
    height: 54px;
    display: block;
    color: purple;
    font-size: 1.130rem;
    font-weight: 900;
}

.inline-txt-box-container {
    width: 80%;
    text-align: right;
    white-space: nowrap;
}

.StTestUpdPnl .notes-img {
    margin-top: 4px;
}




@media (min-width: 100px) {
    .inline-txt-box-container {
        width: 90%;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .inline-txt-box-container {
        /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
        width: 70%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (min-width: 992px) {
    .inline-txt-box-container {
        width: 50%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (min-width: 1200px) {
    .inline-txt-box-container {
        width: 50%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}










    /*   DirectorateMainPage    */
    /*   -------------------    */
    .DirMPgMenuHolder {
        direction: rtl !important;
        color: white;
        font-family: Arial;
        font-size: 14pt;
        font-weight: normal;
        font-style: normal;
        border: 1px solid rgb(168, 190, 255);
        padding: 40px;
        -webkit-box-shadow: -1px 4px 26px 11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -1px 4px 26px 11px rgba(0, 0, 0, 0.75);
        box-shadow: -1px 4px 26px 11px rgba(0, 0, 0, 0.75);
        border: 1px solid rgb(168, 190, 255);
        width: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        min-height: 300px;
    }

    .DirMPgMenuDiv {
        width: 98% !important;
        position: relative;
        vertical-align: middle;
        text-align: center;
        /*border: 1px solid rgb(168, 190, 255);*/
        min-height: 480px;
    }



/*   Dir View    */
/*   -----------    */

.DirViewUpdPnl #grdDiv {
    margin-top: 5%;
    max-height: 700px;
    overflow-x: hidden;
    font-size: 11pt;
    font-weight: 600;
}


@media (min-width: 100px) {
    
}

@media (min-width: 768px) {
    
}

@media (min-width: 992px) {
    
}

@media (min-width: 1200px) {
    
}




/*   Dir Approval    */
/*   -----------    */
.DirApprovalUpPnl #chkApprove .custom-control .custom-control-label {
    white-space: normal !important;
    text-align: justify;
}




@media (min-width: 100px) {
    .DirApprovalUpPnl .data-txt-box-container {
        width: 90%;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .DirApprovalUpPnl .data-txt-box-container {
        /*width: 40%;*/ /*  change it to 70% to make row to column start from here*/
        width: 70%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }
}

@media (min-width: 992px) {
    .DirApprovalUpPnl .data-txt-box-container {
        width: 60%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .DirApprovalUpPnl .btn-inline-container:first-child {
        width: 40%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 2%;
    }

    .DirApprovalUpPnl .btn-inline-container {
        width: 15%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 4%;
    }
}

@media (min-width: 1200px) {
    .DirApprovalUpPnl .data-txt-box-container {
        width: 60%;
        white-space: nowrap;
        margin-left: 4%;
        margin-right: 4%;
    }

    .DirApprovalUpPnl .btn-inline-container:first-child {
        width: 40%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 2%;
    }

    .DirApprovalUpPnl .btn-inline-container {
        width: 15%;
        white-space: nowrap;
        margin-left: 2%;
        margin-right: 4%;
    }
}






    /*   OrganApprove    */
    /*   ------------    */
    .dt-head-center {
        text-align: center !important;
    }

    thead, th {
        text-align: center;
    }

    .table thead,
    .table th {
        text-align: center;
    }

    #GridView1 thead,
    #GridView1 th {
        text-align: center;
    }





/*   OrganApprove    */
/*   ------------    */
.custom-file-input ~ .custom-file-label::after {
    content: "بحث عن ملف" !important;
    font-family: DroidKufi;
    font-weight: 800;
    font-size: 1rem;
    background-color: #FFC107;
    padding: 12px 10px !important;
    height: 50px;
}



.custom-file-input {
    margin: 14px 10px !important;

}



@media (min-width: 100px) {
    .fUploadLbl {
        margin-right: -5px;
        margin-bottom: -15px;
    }

    .custom-file-input ~ .custom-file-label {
        font-family: DroidKufi;
        font-weight: 800;
        font-size: 1rem;
        padding: 12px 10px !important;
        height: 50px;
    }

    .custom-file {
        width: 90%;
    }
}

@media (min-width: 768px) {
    .fUploadLbl {
        margin-right: -5px;
        margin-bottom: -15px;
    }

    .custom-file-input ~ .custom-file-label {
        font-family: DroidKufi;
        font-weight: 800;
        font-size: 1rem;
        padding: 12px 10px !important;
        height: 50px;
    }

    .custom-file {
        width: 70%;
    }
}

@media (min-width: 992px) {
    .fUploadLbl {
        margin-right: -80px;
        margin-bottom: -15px;
    }

    .custom-file-input ~ .custom-file-label {
        font-family: DroidKufi;
        font-weight: 800;
        font-size: 1rem;
        padding: 12px 10px !important;
        height: 50px;
    }

    .custom-file {
        width: 60%;
    }
}

@media (min-width: 1200px) {
    .fUploadLbl {
        margin-right: -50px;
        margin-bottom: -15px;
    }

    .custom-file-input ~ .custom-file-label {
        font-family: DroidKufi;
        font-weight: 800;
        font-size: 1rem;
        padding: 12px 10px !important;
        height: 50px;
    }

    .custom-file {
        width: 50%;
    }
}

.DroidKufiFont {
    font-family: DroidKufi;
    font-size: 16pt;
}

@font-face {
    font-family: 'DroidKufi';
    src: url('../webfonts/DroidKufi/DroidKufi-Regular.eot');
    src: local('درويد كوفي'), local('DroidKufi'), url('../webfonts/DroidKufi/DroidKufi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}