@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-ExtraBold.eot');
    src: url('../fonts/subset-Tajawal-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-ExtraBold.woff2') format('woff2'), url('../fonts/subset-Tajawal-ExtraBold.woff') format('woff'), url('../fonts/subset-Tajawal-ExtraBold.ttf') format('truetype'), url('../fonts/subset-Tajawal-ExtraBold.svg#Tajawal-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-Light.eot');
    src: url('../fonts/subset-Tajawal-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-Light.woff2') format('woff2'), url('../fonts/subset-Tajawal-Light.woff') format('woff'), url('../fonts/subset-Tajawal-Light.ttf') format('truetype'), url('../fonts/subset-Tajawal-Light.svg#Tajawal-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-Regular.eot');
    src: url('../fonts/subset-Tajawal-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-Regular.woff2') format('woff2'), url('../fonts/subset-Tajawal-Regular.woff') format('woff'), url('../fonts/subset-Tajawal-Regular.ttf') format('truetype'), url('../fonts/subset-Tajawal-Regular.svg#Tajawal-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-Medium.eot');
    src: url('../fonts/subset-Tajawal-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-Medium.woff2') format('woff2'), url('../fonts/subset-Tajawal-Medium.woff') format('woff'), url('../fonts/subset-Tajawal-Medium.ttf') format('truetype'), url('../fonts/subset-Tajawal-Medium.svg#Tajawal-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-Bold.eot');
    src: url('../fonts/subset-Tajawal-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-Bold.woff2') format('woff2'), url('../fonts/subset-Tajawal-Bold.woff') format('woff'), url('../fonts/subset-Tajawal-Bold.ttf') format('truetype'), url('../fonts/subset-Tajawal-Bold.svg#Tajawal-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-ExtraLight.eot');
    src: url('../fonts/subset-Tajawal-ExtraLight.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-ExtraLight.woff2') format('woff2'), url('../fonts/subset-Tajawal-ExtraLight.woff') format('woff'), url('../fonts/subset-Tajawal-ExtraLight.ttf') format('truetype'), url('../fonts/subset-Tajawal-ExtraLight.svg#Tajawal-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/subset-Tajawal-Black.eot');
    src: url('../fonts/subset-Tajawal-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/subset-Tajawal-Black.woff2') format('woff2'), url('../fonts/subset-Tajawal-Black.woff') format('woff'), url('../fonts/subset-Tajawal-Black.ttf') format('truetype'), url('../fonts/subset-Tajawal-Black.svg#Tajawal-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: Tajawal,'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: #ff0000d6;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #fff !important;
    z-index: 100000000000;
    text-align: center;
    padding: 10px;
    direction: ltr;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
.valid.modified:not([type="checkbox"]) {
    outline:none !important;
    border: 1px solid #26b050;
}
.kotobeeUploadWidget{
    display:none;
}
.note-editing-area{
    background-color:#fff;
}
.loading {
    width: 100%;
    min-height: 200px;
    background-image: url('../media/misc/loading4.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

    .loading h1 {
        text-align: center;
        vertical-align: central;
        margin-top: 50px;
    }

.loading2 {
    width: 100%;
    min-height: 200px;
    background-image: url('../media/misc/loading75.gif');
    background-position: center center;
    background-repeat: no-repeat;
}

    .loading2 h1 {
        text-align: center;
        vertical-align: central;
        margin-top: 50px;
    }
.btn-green {
    background-color: #42940b;
    border-color: #377b09;
    color: #fff;
}
.btn-green:hover {
    background-color: #42940b;
    border-color: #377b09;
    color: #fff;
}
.btn-dual{

}
    .btn-dual .text-normal{
        display:inline;
    }
    .btn-dual .text-hover {
        display: none;
    }


    .btn-dual:hover .text-normal {
        display: none;
    }

    .btn-dual:hover .text-hover {
        display: inline;
    }

.DropZone {
    background-color: lightblue;
    width: 60px;
    height: 20px;
    display: inline;
}

.DragComp {
    margin: 10px
    /*        background-color: red;*/
    /*        width: 60px;*/
}


.DropZone {
    background-color: lightblue;
    width: 60px;
    height: 20px;
    display: inline;
}

.DragComp {
    margin: 10px
    /*        background-color: red;*/
    /*        width: 60px;*/
}


.questionItem {
    border: 4px solid #F3F6F9;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

    .questionItem .form-control {
        border-color: #16174f;
        background-color: #F3F6F9;
    }

    .questionItem input[type="radio"]:checked + label {
        font-weight: bold;
        color: #16174f;
    }

    .questionItem input[type="checkbox"]:checked + label {
        font-weight: bold;
        color: #16174f;
    }

    .questionItem .DropZone {
        background-color: #F3F6F9;
        min-width: 100px;
        height: 35px;
        display: inline;
        border: none;
        border-bottom: 2px dashed #000;
        margin-left: 10px;
        margin-right: 10px;
        padding: initial;
        width: initial;
    }

    .questionItem .DragComp {
        min-width: 100px;
        font-size: 15px;
        margin: 1px;
        background-color: #ffa800a6;
        color: #000;
        cursor: pointer;
        border-radius: 0.42rem;
        text-align: center;
        /*        background-color: red;*/
        /*        width: 60px;*/
    }

    .questionItem .itemsContainer {
        background-color: #F3F6F9;
        border-radius: 0.42rem;
        border: 1px solid #16174f;
        padding: 10px;
        min-height: 50px;
    }

        .questionItem .itemsContainer .DragComp {
            background-color: #fbc357;
            color: #0b0b27;
            font-weight:bold;
            text-align: initial;
        }

.dragItem {
    cursor: move !important;
    padding: 5px;
}

.dragContainer {
    border: none;
    background-color: #f3f6f9;
    border-radius: 5px;
    min-height: 100px !important;
}

    .dragContainer .dragItem {
        margin: 10px;
    }

.dropContainer {
    margin-left: 10px;
    margin-right: 20px;
    min-height: 40px !important;
    min-width: 200px !important;
    padding: 3px !important;
    border-radius: 5px;
    border-color: #16174f;
    background-color: #d1d3e0;
}

    .dropContainer .dragItem {
        background-color: #ffda00;
    }

.matchingTextItem {
    font-size: 16px;
}
.loginContainer {
    background-color: #F3F6F9;
    width: -webkit-fill-available;
    height: -webkit-fill-available !important;
    position: absolute;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}


.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.chatIframe {
    width: 100%;
    height: 527px;
    border: 0px none #fff;
}

.TibbahTable{
    width:100%;

}
    .TibbahTable thead {
        text-align: center;
        text-align: center;
        background-color: #171850;
        color: #fff;
        font-size: 17px;
    }
    .TibbahTable .subtitle {
        text-align: center;
        background-color: #9fa1ae;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }
        .TibbahTable .subtitle td {
            padding: 4px;
        }
    .TibbahTable tr {
        border-radius:5px;
    }
        .TibbahTable tr td {
            border-bottom: 1px solid #16174f;
            padding: 5px;
            font-size: 14px;
        }
        .TibbahTable tr td.bg-success {
            background-color: #38d200 !important;
            color: #000;
            font-weight: bolder;
        }
        .TibbahTable tr td.courseName {
            border-bottom: 1px solid #16174f;
            padding: 5px;
            font-size: 14px;
            font-weight:bolder;
            color:#16174f
        }
            .TibbahTable tr td.Degree {
                border-bottom: 1px solid #16174f;
                padding: 5px;
                font-size: 18px;
                font-weight: bolder;

            }
            .TibbahTable tr td.fullmark {
               
                font-weight: bold;
            }






            /*NC Uploader*/
.actual-btn{
    display:none;
}


.file-chosen {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    float: right;
    font-weight:bold;
}
.fakeBtn {
    font-size: 0.925rem;
    border-radius: 0.42rem;
    color: #FFFFFF;
    float:right;
}
.submitFile {
    float: right;
    display:none;
}
            

.ExamHeader {
    position: fixed;
    background-color: #FFF4DE;
    width: 100%;
    margin: 0px;
    left: 0;
    padding: 10px;
    z-index: 10000;
    top: 0;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
}












.question {
    /* border: 2px solid #fff;
    border-radius: 5px;
    background-color: #fff;*/
    /*margin: 5px;
    padding: 5px;*/
}

    
    .question h1 {
        font-size: 20px;
        text-align: start;
        color: #d72b2b;
    }

        .question h1 span {
            font-size: 14px;
            text-align: start;
            color: #d72b2b;
        }

            .question h1 span::before {
                content: "(";
            }

            .question h1 span::after {
                content: ")";
            }

    .question h2 {
        font-size: 18px;
        text-align: right;
        color: #333;
    }

    .question .answers {
        border-radius: 5px;
        background-color: #eceef7;
        margin: 10px;
        padding: 20px;
    }

        .question .answers .matcher {
            border-radius: 5px;
            background-color: #fff;
            margin: 5px;
            padding: 10px;
            text-align: start;
        }

            .question .answers .matcher span {
                font-weight: bold;
                color: #16174f;
            }

                .question .answers .matcher span::after {
                    content: ")";
                    font-weight: bold;
                    color: #16174f;
                }

            .question .answers .matcher.matcher-right .form-control {
                width: 40px;
                right: -30px;
                margin-top: -10px;
                position: absolute;
                text-align: center;
                background-color: #16174f;
                color: #fff;
                font-weight: bold;
                text-transform: uppercase;
            }
            /* Chrome, Safari, Edge, Opera */
            .question .answers .matcher.matcher-right input::-webkit-outer-spin-button,
            .question .answers .matcher.matcher-right input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Firefox */
            .question .answers .matcher.matcher-right input[type=number] {
                -moz-appearance: textfield;
            }


        .question .answers .choicer {
            border-radius: 5px;
            background-color: #fff;
            margin: 5px;
            padding: 10px;
            text-align: start;
        }

            .question .answers .choicer span {
                font-weight: bold;
                color: #16174f;
            }

                .question .answers .choicer span::after {
                    content: ")";
                    font-weight: bold;
                    color: #16174f;
                }

    .question .completer {
        width: 40px;
        text-align: center;
        background-color: #16174f;
        color: #fff;
        font-weight: bold;
        text-transform: uppercase;
        display: inline;
    }

    

.QuestionHeading1 {
    font-size: 30px;
    text-align: start;
    color: #d72b2b;
    font-weight: bold;
    /*margin-left: 20px;
    margin-right: 20px;*/
}

.QuestionHeading2 {
    font-size: 25px;
    text-align: start;
    color: #16174f;
    /*margin-left: 30px;
    margin-right: 30px;*/
}


.ExamToolBar {
    text-align: center;
    background-color: #F3F6F9;
    border-radius: 0.42rem;
    padding: 10px;
    border: 1px solid #EBEDF3;
}

.QuestionSmallItem {
    border-radius: 0.42rem;
    padding: 5px;
    border: 1px solid #B5B5C3;
    width: 200px;
    display: inline-block;
    text-align: center;
}