body {
        background-color: #f8f9fa;
        background-color: #ffffff;
    }
    
    .login {
        width: 50%;
        margin: 100px auto;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label {
        font-family: 'Droid Arabic Kufi', Arial, serif;
    }
    
    .login input {
        margin-bottom: 10px;
    }
    
    .login .btn {
        background-color: #1089ff;
        font-weight: 700;
    }
    
    .topdiv {
        margin-top: 80px;
    }
    
    .subjtitle {
        background-color: #ffffff;
    }
    
    .subjtitle i {
        padding: 0 20px;
    }
    
    .img-circle {
        border-radius: 50%;
        width: 50%;
    }
    
    .top-section {
        padding: 5px 0 0;
    }
    
    .site-section {
        padding: 5em 0 0;
    }
    
    .nav-link.active {
        color: rgb(0, 0, 0);
        background-color: #f5f6f7;
        border-color: #dee2e6 #dee2e6 #fff;
    }
    
    .tblheader {
        line-height: 1.2;
        color: #000000;
        background-color: #f5f6f7;
    }
    /*Quiz app*/
    
    .quiz-app {
        margin: 20px auto;
        /*width: 800px;*/
        background-color: #f8f8f8;
        padding: 15px;
        direction: rtl;
        text-align: right;
    }
    
    .quiz-app .quiz-info {
        display: flex;
        background-color: #fff;
        padding: 20px;
    }
    
    .quiz-app .quiz-info .category {
        flex: 1;
    }
    
    .quiz-app .quiz-info .count {
        flex: 1;
        text-align: left;
    }
    
    .quiz-control {
        font-family: Arial, 'Droid Arabic Kufi', serif;
        margin: 10px;
        text-align: left;
    }
    
    .quiz-control .btn {
        font-family: 'Droid Arabic Kufi', Arial, serif;
        letter-spacing: 0rem;
        font-size: 16px;
    }
    
    .quiz-app .quiz-area {
        background-color: #fff;
        padding: 20px;
        margin-top: 15px;
    }
    
    .quiz-app .quiz-area h2 {
        margin: 0;
    }
    
    .quiz-app .answer-area {
        background-color: #fff;
        padding: 0 20px 20px;
        position: relative;
        /* width: 50%;*/
    }
    
    .quiz-app .answer-area .answer {
        background-color: #f9f9f9;
        padding: 10px;
    }
    
    .quiz-app .answer-area .answer:not(:last-child) {
        border-bottom: 1px solid #dfdfdf;
    }
    
    .quiz-app .answer-area .answer input[type="Radio"]:checked+label {
        color: #0075ff;
    }
    
    .quiz-app .answer-area .answer label {
        cursor: pointer;
        font-weight: bold;
        color: #777;
        font-size: 16px;
        margin-left: 5px;
        position: relative;
        top: -2px;
        margin-right: 5px;
    }
    
    .quiz-app .answer-area .quiz-img {
        position: absolute;
        left: 0;
        top: 1px;
        /*background-color: #777;
    width: 50%; */
        /* float: left; */
        height: 100%;
        /* border: 1px solid;*/
    }
    
    .quiz-app .answer-area .quiz-img img {
        left: 5px;
        width: 50%;
        height: 100%;
        float: left;
    }
    
    .quiz-area .bullets {
        position: relative;
        background-color: #0075ff;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: block;
        margin-left: 20px;
        padding: 20px;
        float: right;
        font-size: 16PX;
        font-weight: BOLD;
        color: #fff;
    }
    
    .quiz-area .bullets p {
        position: absolute;
        top: 10px;
        right: 17px;
        margin: 0 auto;
    }
    
    .active-quiz {
        background-color: #f9f9f9;
        direction: rtl;
        text-align: right;
    }
    
    .active-quiz h3 {
        font-family: 'Droid Arabic Kufi', Arial, serif;
        background-color: #fff;
        padding: 10px;
    }
    
    .active-quiz p {
        padding-right: 60px;
    }
    
    .active-quiz .item-content {
        padding-right: 20px;
        background-color: #f9f9f9;
    }
    
    .active-quiz .item-content li {
        /* margin-top: 10px;*/
        list-style: none;
        padding: 10px 5px;
        cursor: pointer;
    }
    
    .active-quiz .item-content li:not(:last-child) {
        border-bottom: 1px solid #dfdfdf;
    }
    
    .item-bullets {
        position: relative;
        background-color: #fff;
        border: 7px solid #aeafb0;
        width: 15px;
        height: 15px;
        top: 10px;
        border-radius: 50%;
        display: block;
        /* margin-left: 20px; */
        margin: 0px 13px;
        padding: 10px;
        float: right;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }
    
    .container {
        direction: rtl;
    }
    
    #message {
        color: #b90808;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        /* font-style: oblique; */
        /* font-weight: 600; */
        font-size: 18px;
    }
    
    .side-option {
        padding: 5px;
        margin-top: 16px;
        background-color: #f9f9f9;
    }
    
    .side-optopn-title {
        font-size: 1.1rem;
        text-align: center;
        margin: 10px;
        padding: 10px;
        border-bottom: 2px solid #ffff;
        background-color: #fff;
        font-family: 'Droid Arabic Kufi', Arial, serif;
    }
    
    .side-optopn-body li {
        border-bottom: 1px solid #ffff;
        list-style: none;
        margin-left: 10px;
        padding: 10px;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        text-align: right;
    }
    
    .item-bullets-left {
        float: left;
        position: relative;
        display: block;
        top: -51px;
        left: 10px;
    }
    
    .smal-icon {
        /*position: absolute;*/
        border: 1px solid #f9f9f9;
        border-radius: 50%;
        background-color: #e2e0e0;
        width: 10px;
        height: 10px;
        margin-top: 2px;
        left: -1px;
        list-style: none;
        -webkit-box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 0 17px 8px rgba(0, 0, 0, 0.2);
        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .userimg {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 3px solid #e6e6e6;
        -webkit-box-shadow: -2px 11px 17px 0px rgba(0, 0, 0, 0.5);
        box-shadow: -2px 11px 17px 0px rgba(0, 0, 0, 0.5);
        -o-box-shadow: -2px 11px 17px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: -2px 11px 17px 0px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: -2px 11px 17px 0px rgba(0, 0, 0, 0.5);
    }
    
    .userimgdiv {
        text-align: center;
        padding: 10px;
        margin-top: 15px;
    }
    
    .fa-laptop {
        float: right;
        margin-top: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }
    
    #loginMsg {
        color: #b90808;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        /* font-style: oblique; */
        /* font-weight: 600; */
        font-size: 18px;
    }
    
    .listitem {
        /*width: 30%;*/
        color: #fff;
        display: block;
        position: relative;
        height: 115px;
        border-radius: 4%;
        margin: 10px;
    }
    
    .listitem i {
        font-size: 60px;
        float: left;
        padding: 10px;
    }
    
    .listitem a {
        padding-right: 10px;
        font-size: 23px;
        cursor: pointer;
        text-decoration: none;
        color: #ffffff;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        display: block;
    }
    
    .notifications {
        background-color: #fd4b01;
    }
    
    .exam {
        background-color: #dd01fd;
    }
    
    .result {
        background-color: #8bc34a;
    }
    
    .faq {
        background-color: #10c2ff;
    }
    
    .attend {
        background-color: #4aabc3;
    }
    
    .users {
        background-color: #1cd61c;
    }
    
    .d-block {
        direction: ltr;
    }
    
    .logininsidebox {
        /* margin-top: 68px; */
        border-top: 3px solid #dedbdb;
        padding: 10px;
        margin: 10px;
        text-align: right;
    }
    
    .btncontainer {
        text-align: left;
    }
    
    .loginclose {
        position: absolute;
        right: 18px;
        top: 0px;
        color: #000;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .loginclose:hover,
    .loginclose:focus {
        color: red;
        cursor: pointer;
    }
    
    .imgcontainer {
        text-align: center;
        margin: 10px 0 12px 0;
        position: relative;
        height: 30px;
    }
    
    .imgcontainer h3 {
        margin-top: -60px;
        padding: 66px;
    }
    
    img.avatar {
        width: 20%;
        /* border-radius: 50%; 
        float: left; */
        position: absolute;
        top: -55px;
        left: 5px;
    }
    
    .loginitem {
        width: 100%;
        line-height: 2.5rem;
        padding: 5px 12px;
        border-radius: 9px;
    }
    
    .logout {
        display: block;
        padding: 6px 15px;
        margin: 0px;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        font-size: 1rem;
        color: #337ab7;
        text-align: right;
    }
    
    .spannerno {
        padding: 2px 82px 2px;
        font-size: 1.1rem;
        position: relative;
    }
    
    #spanerNo {
        width: 60px;
        padding: 7px;
        font-size: 1.1rem;
        position: absolute;
        left: 445px;
        top: 10px;
    }
    
    .studentsPhoneNoLabel {
        right: 15px;
        position: absolute;
    }
    
    .phoneboxtitle {
        padding-top: 10px;
    }
    
    .section-about {
        margin-top: 30px;
        padding-bottom: 33px;
    }
    
    .adminlog {
        margin: 10px;
    }
    
    .adminuseritem {
        padding-right: 20px;
        width: 100%;
        height: 50px;
        margin-right: 20px;
    }
    
    .adminbtn {
        /*position: absolute;*/
        left: -5px;
        font-size: 1.2rem;
    }
    
    .btncontainer {
        text-align: left;
        left: -17px;
    }
    
    .loginimg {
        border-left: solid #e00ed0 4px;
    }
    
    .inputitem {
        padding-right: 20px;
        width: 100%;
        height: 50px;
        margin-right: 20px;
    }
    
    .inputitem-select {
        padding-right: 20px;
        cursor: pointer;
        margin-right: 20px;
    }
    
    .inputitem-label {
        cursor: pointer;
    }
    
    .inputitem-list {
        height: 40px;
        padding: 7px;
    }
    
    .notioption {
        border: 1px solid;
        margin-right: 33px;
        /* width: 100%;*/
        margin-bottom: 10px;
        padding: 10px;
        margin-right: 34px;
        margin-left: -5px;
        background-color: #fff;
    }
    
    .notibutton {
        text-align: end;
        left: -15px;
    }
    
    .notiform {
        width: 100%;
    }
    
    .imgcontainer h2 {
        color: #FFBE00;
        font-size: 25px;
        margin: 5px;
        ;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        text-align: center;
        border-bottom: 2px solid #e0dbdb;
        padding-bottom: 7px;
    }
    
    .msgBtn {
        background-color: #f1f1f1;
        width: 100%;
        text-align: center;
        font-size: 2rem;
        padding-bottom: 10px;
    }
    
    .dialogTitle {
        font-family: 'Droid Arabic Kufi', Arial, serif;
        direction: rtl;
        width: 100%;
    }
    
    .username {
        font-family: 'Droid Arabic Kufi', Arial, serif;
        padding: 15px 5px;
        color: #0072ff;
    }
    
    .newbutton {
        /*float: left;*/
        border: solid 3px #fffdfd;
        height: 140px;
        margin-top: 10px;
        text-align: center;
    }
    
    .countrysearch {
        /*float: right;*/
        border: solid 3px #fffdfd;
        height: 140px;
        margin-top: 10px;
        margin-right: 10px;
        position: absolute;
        left: 30px;
    }
    
    .searchfaq {
        width: 100%;
        padding: 5px 10px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    .resulttable {
        width: 100%;
    }
    
    .control-btn a {
        color: #ffffff;
    }
    
    .resultkeyword {
        font-weight: 600;
    }
    
    .noresult {
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }
    
    .searchresult {
        padding-left: 10px;
    }
    
    .answercol {
        width: 50%;
    }
    
    .resultback {
        /* margin-right: 30px; */
        float: left;
    }
    
    .resultcontent {
        width: 100%;
    }
    
    .control-btn {
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        position: absolute;
        /*    top: 15px;*/
        left: -405px;
        margin-top: -5px;
    }
    
    .faqcontainer {
        padding: 15px;
        position: relative;
        overflow: hidden;
    }
    
    .faqcontainer:hover .control-btn {
        left: 100px;
    }
    
    .faqcontainer:hover {
        background-color: #EEE;
    }
    
    .table .thead-dark th {
        color: #020202;
        background-color: #ffffff;
        border-color: #1089ff;
    }
    
    .dirrtl {
        direction: rtl;
        text-align: right;
    }
    
    .edititem {
        width: 100%;
        border: 1px solid #c3c1c1;
        border-radius: 2%;
        line-height: 2.5rem;
        padding-right: 15px;
    }
    
    .boxbtn {
        background-color: #f1f1f1;
        width: 100%;
        text-align: center;
        padding: 11px;
    }
    
    .boxtitle {
        text-align: center;
        padding-top: 15px;
        border-radius: 3%;
        border-bottom: 2px solid #f1f1f1;
        background-color: #e6e4e4;
    }
    
    #efaanswer {
        height: 195px;
    }
    
    .modal {
        display: none;
        position: fixed;
        z-index: 3000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        padding-top: 60px;
    }
    
    .faqsearch {
        /* float: right; */
        border: solid 3px #fffdfd;
        height: 140px;
        /* margin-top: 10px; */
        /* margin-right: 10px; */
        /* position: absolute; */
        /* left: 30px; */
        margin-bottom: 20px;
    }
    
    .faqansertd {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 500px;
    }
    
    .squar {
        width: 50px;
        height: 50px;
        background-color: black;
    }
    
    .examlistitem {
        display: block;
        position: relative;
        border-radius: 4%;
        margin: 10px;
    }
    
    .examlistitem ul li a {
        padding-right: 10px;
        font-size: 23px;
        cursor: pointer;
        text-decoration: none;
        color: #fd4b01;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        display: block;
    }
    
    .examlistitem ul li a:before {
        content: "";
        display: inline-block;
        width: 17px;
        height: 19px;
        margin-left: 6px;
        margin-top: 7px;
        background-color: royalblue;
    }
    
    .examlistitemmanag {
        display: block;
        position: relative;
        border-radius: 4%;
        margin: 10px;
    }
    
    .examlistitemmanag ul li a {
        padding-right: 10px;
        font-size: 19px;
        cursor: pointer;
        text-decoration: none;
        color: #fd4b01;
        font-family: 'Droid Arabic Kufi', Arial, serif;
        display: block;
    }
    
    .examlistitemmanag ul li a:before {
        content: "";
        display: inline-block;
        width: 17px;
        height: 15px;
        margin-left: 6px;
        margin-top: 3px;
        background-color: royalblue;
    }
    
    .schoolList {
        display: block;
        right: 100px;
        top: 8px;
        border: 1px solid #c9ccce;
        padding: 9px;
        margin-top: 10px;
        width: 72%;
        font-size: 18px;
        padding: 12px 20px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    /*Quiz */
    
    .questionvaluecheck {
        font-size: 1.2rem;
        position: absolute;
        top: 45px;
        left: 1px;
        width: 13%;
        text-align: center;
    }
    
    .studentcheckboxlist {
        border: 2px solid #ccc;
        width: 100%;
        height: 300px;
        overflow-y: scroll;
        padding-right: 20px;
        padding-top: 20px;
        font-size: 1.3rem;
    }
    
    .answer:hover {
        background-color: #1089ff;
        color: #f9f9f9;
        padding-right: 0px;
        /* width: 100%; */
    }
    
    .answer label {
        cursor: pointer;
        width: 90%;
    }
    
    .wagdiimg {
        width: 60%;
        float: right;
    }
    
    .form-group {
        margin-bottom: 0.4rem;
    }
    
    .header-top>.container {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .social-i {
        font-size: 2.1rem;
    }
    
    .aboutuslist {
        margin: 10px;
        padding: 10px;
    }