.app-main-title, .app-main-titlebar {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8b2554', endColorstr='#fff47f7f', GradientType=1)
}

body {
    background-color: #D7DBDF
}

.app-main {
    font-family: helvetica;
    font-size: 14px;
    padding: 5px
}

.fileupload, .reg-file-label {
    font-family: Roboto,Tahoma
}

.app-main.headerHeight {
    height: 10px
}

.app-main-header {
    font-size: 16px;
    padding: 5px;
    color: #8b2554;
    background-color: #eee
}

.app-main-head1 {
    font-size: 15px;
    font-weight: 700;
    padding: 5px;
    color: #fff;
    width: 100%
}

.app-main-logo, .app-main-titlebar {
    padding: 4px;
    position: fixed;
    z-index: 9001
}

.app-main-logo {
    background-color: #fff;
    top: 0;
    height: 75px;
    width: 100%
}

.app-main-titlebar {
    top: 75px;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #8b2554;
    background-color: #8b2554;
    background-image: -webkit-linear-gradient(right,#8b2554 0,#f47f7f 100%);
    background-image: -o-linear-gradient(right,#8b2554 0,#f47f7f 100%);
    background-image: linear-gradient(to left,#8b2554 0,#f47f7f 100%);
    background-repeat: repeat-x
}

.app-main-titlebarExt, .app-main-titlebarExt1 {
    background-image: linear-gradient(to right, #51548B, #307db5);
    padding: 5px;
    height: 45px;
    color: #fff;
    top: 75px;
    width: 100%;
    z-index: 9001;
    position: fixed
}

.app-main-titlebarExt1 {
    line-height: 50px;
    vertical-align: middle
}

.app-main-footer {
    background-color: #fff;
    padding: 4px;
    position: fixed;
    bottom: 0;
    z-index: 9001;
    height: 35px;
    width: 100%;
    color: gray;
    text-align: center;
    font-size: 10pt;
    vertical-align: middle;
    border-top: 1px solid gray
}

.app-main-bottomborder {
    border-bottom: 1px solid #d3d3d3
}

.app-main-centerborder {
    border-left: 1px solid #d3d3d3
}

.app-main-centerborderright {
    border-right: 1px solid #d3d3d3
}

.app-main-topborder {
    border-top: 1px solid #d3d3d3;
    vertical-align: middle
}

.panel-khda-Transparent > .panel-heading + .panel-collapse > .panel-body, .panel-khda > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #cfdbe2
}

.req {
    color: red;
    text-wrap: none
}

.toolbarText {
    color: #fff;
    font-size: 14px
}

.navbtn {
    color: #8b2554;
    font-size: 14px
}

.app-main-title {
    top: 75px;
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 9001;
    background-color: #8b2554;
    background-image: -webkit-linear-gradient(right,#8b2554 0,#f47f7f 100%);
    background-image: -o-linear-gradient(right,#8b2554 0,#f47f7f 100%);
    background-image: linear-gradient(to left,#8b2554 0,#f47f7f 100%);
    background-repeat: repeat-x
}

.centerProg {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 40000;
    transform: translate(-50%,-50%)
}

.fileupload {
    padding-bottom: 5px;
    margin: 3px 5px 4px
}

.file-label label {
    word-wrap: break-word
}

.file-single-label label {
    word-wrap: break-word;
    font-size: 10pt;
    font-weight: 400
}

.none {
    display: none !important
}

.divider {
    padding-bottom: 10px
}

.fileInfo {
    padding-top: 15px
}

.fileInfoSingle {
    padding-top: 0
}

.center {
    margin: auto;
    width: 60%;
    padding: 10px
}

.custom-chips, .custom-chips-single {
    border-radius: 16px;
    background-color: #eee;
    color: #000;
    box-sizing: border-box;
    padding: 5px;
    font-size: 13px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px
}

.header-card, .panel-khda > .panel-heading, .text-khda {
    color: #8b2554
}

.titletext {
    display: block;
    margin: auto;
    align-self: center;
    width: 200px;
    overflow: hidden
}

.navleft {
    float: left;
    display: block;
    margin: 0 auto
}

.navright {
    float: right;
    display: inline-block;
    margin: 0 auto
}

.odd {
    background-color: #eee
}

.even {
    background-color: #ecf9f9
}

.sample-show-hide {
    transition: all linear .5s
}

    .sample-show-hide.ng-hide {
        opacity: 0
    }

.overlaySpinner {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10000;
    text-align: center;
    vertical-align: middle
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url(../Video/giphy.gif) no-repeat;
    background-size: cover;
    transition: 1s opacity
}

.panel-khda {
    border-color: #cfdbe2
}

    .panel-khda > .panel-heading {
        background-color: #E6E6E6;
        border-color: #8b2554
    }

        .panel-khda > .panel-heading .badge {
            color: #8b2554;
            background-color: #fff
        }

    .panel-khda > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #cfdbe2;
        background: rgba(139,37,84,.15)
    }

.panel-khda-Transparent {
    border-color: #cfdbe2;
    background: rgba(255,255,255,.1)
}

    .panel-khda-Transparent > .panel-heading {
        color: #fff;
        background-color: #8b2554;
        border-color: #8b2554
    }

        .panel-khda-Transparent > .panel-heading .badge {
            color: #8b2554
        }

    .panel-khda-Transparent > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #cfdbe2;
        background: rgba(139,37,84,.1)
    }

.text-lgKHDA {
    font-size: 28px
}

.label-khda {
    background-color: #8b2554
}

    .label-khda[href]:focus, .label-khda[href]:hover {
        background-color: #8b2553
    }

.btn-khda {
    color: #fff;
    background-color: #8b2554;
    border-color: #8b2554;

}

.btn-khda1 {
    color: #8b2554;
    background-color: #fff;
    border: 1px solid #8b2554;
    width: 90px;
    border-radius:50px;
}

.btn-khda2 {
    color: #fff;
    background-color: #8b2554;
    border: 1px solid #8b2554;
    width: 90px;
    border-radius: 50px;
}

.table-header {
    color: #fff;
    background-image: linear-gradient(to right, #52548d, #317cb5);
    font-size:11px
}

.table-filter {
    background-color:white;
    height:35px;
    font-size: 11px;
    padding:5px;
    
}

.table-rows {
    background-color: white;
    height: 90px;
    font-size: 11px;
    padding: 2px;
    border-top:1px solid gray;
}

.table-rows2 {
    background-color: white;
    min-height: 50px;
    font-size: 12px;
    padding: 2px;
    border-top: 1px solid gray;
}

    .btn-khda.focus, .btn-khda:focus, .btn-khda:hover {
        color: #fff;
        background-color: #8b2554;
        border-color: #d6d6d6
    }

    .btn-khda.active, .btn-khda.active.focus, .btn-khda.active:focus, .btn-khda.active:hover, .btn-khda:active, .btn-khda:active.focus, .btn-khda:active:focus, .btn-khda:active:hover, .open > .dropdown-toggle.btn-khda, .open > .dropdown-toggle.btn-khda.focus, .open > .dropdown-toggle.btn-khda:focus, .open > .dropdown-toggle.btn-khda:hover {
        color: #333;
        background-color: #f5f5f5;
        border-color: #d6d6d6
    }

    .btn-khda.active, .btn-khda:active, .open > .dropdown-toggle.btn-khda {
        background-image: none
    }

    .btn-khda.disabled, .btn-khda.disabled.active, .btn-khda.disabled.focus, .btn-khda.disabled:active, .btn-khda.disabled:focus, .btn-khda.disabled:hover, .btn-khda[disabled], .btn-khda[disabled].active, .btn-khda[disabled].focus, .btn-khda[disabled]:active, .btn-khda[disabled]:focus, .btn-khda[disabled]:hover, fieldset[disabled] .btn-khda, fieldset[disabled] .btn-khda.active, fieldset[disabled] .btn-khda.focus, fieldset[disabled] .btn-khda:active, fieldset[disabled] .btn-khda:focus, fieldset[disabled] .btn-khda:hover {
        background-color: #79435c;
        border-color: #eaeaea
    }

    .btn-khda .badge {
        color: #fff;
        background-color: #333
    }

ul.filter-content {
    float: left;
    max-height: 273px;
    overflow: auto;
    position: relative
}

.filter-icons > li > .fa {
    font-size: 20px;
    line-height: 41px
}

.filter-icons > li > .mdi-maps-local-offer {
    font-size: 20px
}

.filter-icons a.demo-icon.icon-dp-logo {
    font-size: 21px
}

.filter-icons > li > a {
    color: #595959 !important;
    display: block;
    transition: all .5s linear;
    line-height: 39px
}

.content-info {
    display: inline-block;
    float: left;
    vertical-align: top;
    width: 80%
}

.TrackRow, .switchkhda span, .title-text {
    vertical-align: middle
}

.TrackRow {
    min-height: 30px;
    margin-top: 10px
}

.TrackDialogRow {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.bg-khda {
    background-color: #8b2554 !important
}

.card .card-heading-khda {
    padding: 10px
}

    .card .card-heading-khda > .card-title {
        margin: 0;
        font-size: 16px
    }

    .card .card-heading-khda > .card-icon {
        float: right;
        color: rgba(255,255,255,.87);
        font-size: 20px
    }

switchkhda .form-control {
    padding-top: 7px;
    margin-bottom: 0
}

.switchkhda * {
    cursor: pointer
}

.switchkhda input {
    opacity: 0;
    position: absolute;
    z-index: -1
}

.switchkhda span {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 100px;
    transition: all .5s;
    box-shadow: 1px 2px 3px rgba(0,0,0,.1) inset
}

    .switchkhda span:after {
        content: "";
        position: absolute;
        background-color: #fff;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        border: 1px solid #ddd;
        border-radius: 400px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.1);
        -webkit-transition: all .2s
    }

.switchkhda.switch-lg span {
    width: 50px;
    height: 25px
}

    .switchkhda.switch-lg span:after {
        height: 23px;
        width: 23px
    }

.switchkhda.switch-sm span {
    width: 30px;
    height: 15px
}

    .switchkhda.switch-sm span:after {
        height: 13px;
        width: 13px
    }

.switchkhda input:checked + span {
    background-color: #8b2554;
    border-color: #8b2554;
    transition: all .5s
}

    .switchkhda input:checked + span:after {
        left: 50%;
        transition: all .2s
    }

.app-main-header-reg {
    font-size: 16px;
    padding: 5px;
    color: #8b2554;
    background-color: #eee;
    height: 30px
}

    .app-main-header-reg h4 {
        font-size: 15pt;
        margin-top: 0;
        font-weight: 400
    }

.button {
    background-color: #8b2554 !important;
    color: #fff !important
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
    .fileupload {
        padding-top: 0
    }

    .file-upload-title {
        padding-bottom: 50px
    }
}

.allZero {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important
}

.reg-center-border-top {
    width: 0;
    padding: 0;
    margin: 0;
    height: 355px
}

.reg-approval-center-border-top {
    width: 0;
    padding: 0;
    margin: 0;
    height: 210px
}

.reg-center-border-center-collapsed {
    width: 0;
    padding: 0;
    margin: 0;
    height: 295px
}

.reg-center-border-center-expanded {
    width: 0;
    padding: 0;
    margin: 0;
    height: 490px
}

.reg-center-border-center-expanded-school {
    width: 0;
    padding: 0;
    margin: 0;
    height: 380px
}

.reg-appr-center-border-center-expanded-school {
    width: 0;
    padding: 0;
    margin: 0;
    height: 330px
}

.reg-center-border-bottom {
    width: 0;
    padding: 0;
    margin: 0;
    height: 60px
}

.reg-file-input-container-rtl {
    padding-top: 5px;
    position: relative;
    left: 8px
}

.reg-file-input-container {
    padding-top: 5px;
    position: relative;
    left: -8px
}

.approve-file-input-container-rtl {
    padding-top: 5px;
    position: relative;
    left: 1px
}

.approve-file-input-container {
    padding-top: 5px;
    position: relative;
    left: 5px
}

.reg-reference-large, .reg-reference-small {
    padding-top: 10px;
    font-weight: 500;
    margin: 0 auto;
    text-align: center
}

.reg-arabic-name-container {
    direction: rtl
}

.user-form .md-input, .user-form md-select {
    color: #8b2554 !important
}

.reg-arabic-name-container md-input-container.md-input-focused label:not(.md-no-float), .reg-arabic-name-container md-input-container.md-input-has-placeholder label:not(.md-no-float), .reg-arabic-name-container md-input-container.md-input-has-value label:not(.md-no-float) {
    -webkit-transform: translate3d(0,6px,0) scale(.75);
    transform: translate3d(0,6px,0) scale(.75);
    right: -130px;
    position: relative
}

.reg-reference-large {
    font-size: 1.5em
}

.reg-reference-small {
    font-size: 1.2em
}

.space10 {
    padding-right: 10px
}

.space10left {
    padding-left: 10px
}

.reg-success {
    margin: 0 auto;
    width: 100%;
    padding-top: 15px;
    font-size: 1em;
    text-align: center
}

.reg-success-msg {
    padding-top: 10px;
    font-size: 1em
}

.padding0 {
    padding: 0
}

.dialog-actions {
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    background: #eee
}

.terms-conditions-container {
    height: 100%;
    width: 100%;
    max-height: 800px
}

    .terms-conditions-container h2 {
        font-weight: 300;
        font-size: 16pt;
        margin-top: 10px
    }

    .terms-conditions-container p {
        color: #636466 !important;
        margin: 0 0 10px;
        font-size: 14px;
        word-spacing: 1px;
        line-height: 25px
    }

.reg-checkbox-container {
    display: block;
    margin-top: 0;
    margin-bottom: 5px
}

    .reg-checkbox-container md-checkbox {
        display: inline-block;
        padding-left: 0;
        padding-right: 0;
        min-height: 10px
    }

    .reg-checkbox-container span {
        position: relative;
        top: 6px;
        left: 0
    }

.button-link {
    padding: 0;
    margin: 0;
    background: 0 0 !important;
    color: #5d9cec !important;
    display: inline
}

.reg-visit-home-button {
    background: #fff !important;
    color: #3f51b5 !important;
    padding: 0;
    margin: 0
}

.reg-file-label {
    color: #777;
    font-size: 10.5pt !important;
    padding-top: 20px;
    padding-left: 3px
}

.disabled-form-control {
    color: #8b2554 !important;
    font-size: 100% !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.md-table-pagination .buttons .label, .md-table-pagination .limit-select .label, .md-table-pagination .page-select .label {
    color: rgba(0,0,0,.54);
    font-size: 100%
}

md-toolbar.md-table-toolbar .md-toolbar-tools md-icon {
    color: rgba(255,255,255,1)
}

.md-table-filtercolumn md-icon.md-sort-icon {
    position: relative;
    top: -24px;
    left: 90px
}

.md-table-filtercolumn input {
    max-width: 95px
}

.info-message {
    color: #b5b5b5;
    font-size: 9pt;
    font-style: italic
}

.reg-help-message-icon {
    max-width: 30px;
    min-width: 30px;
    margin: 0 auto;
    padding-top: 10px;
    color: #8b2554
}

@media (max-width:992px) {
    .reg-button-panel-small {
        text-align: center !important
    }
}

.reg-appr-none-text {
    padding-left: 5px;
    padding-right: 5px
}

.title-text {
    padding-left: 20px !important;
    padding-top: 4px;
    font-family: Tahoma;
    font-size: 12pt
}

.lang-switch-link {
    color: #fff !important;
    font-size: 15px;
    text-decoration: none !important
}

    .lang-switch-link img {
        height: 30px
    }

    .lang-switch-link #arlink {
        padding-left: 5px;
        font-family: Tahoma;
        font-size: 10pt
    }

    .lang-switch-link #enlink {
        padding-left: 5px;
        font-family: Tahoma;
        font-size: 12pt
    }

.progress-bar-khda {
    background-color: #8b2554;
}

.errorMsg {
    font-size: 12px;
    color: rgb(221, 44, 0);
}

.error {
    transition: 1s linear all;
}