﻿@font-face {
    font-family: 'Roboto Light';
    src: url('../fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Light.woff2') format('woff2'), url('../fonts/roboto/Roboto-Light.woff') format('woff'), url('../fonts/roboto/Roboto-Light.ttf') format('truetype'), url('../fonts/roboto/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Regular.woff2') format('woff2'), url('../fonts/roboto/Roboto-Regular.woff') format('woff'), url('../fonts/roboto/Roboto-Regular.ttf') format('truetype'), url('../fonts/roboto/Roboto-Regular.svg#Robot-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Medium';
    src: url('../fonts/roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Medium.woff2') format('woff2'), url('../fonts/roboto/Roboto-Medium.woff') format('woff'), url('../fonts/roboto/Roboto-Medium.ttf') format('truetype'), url('../fonts/roboto/Roboto-Medium.svg#Robot-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('../fonts/roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('../fonts/roboto/Roboto-Bold.woff') format('woff'), url('../fonts/roboto/Roboto-Bold.ttf') format('truetype'), url('../fonts/roboto/Roboto-Bold.svg#Robot-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Arabic';
    src: url('fonts/droidarabic/DroidArabicKufi.eot?#iefix') format('embedded-opentype'), url('fonts/droidarabic/DroidArabicKufi.woff') format('woff'), url('fonts/droidarabic/DroidArabicKufi.ttf') format('truetype'), url('fonts/droidarabic/DroidArabicKufi.svg#DroidArabicKufi') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
    background-image: url('../../images/menu-background.svg');
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Roboto', sans-serif;
    -webkit-animation: background-animation 25s ease-in-out infinite;
    animation: background-animation 2s ease-in-out infinite;
    min-height: 100vh;
}


@-webkit-keyframes background-animation {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }

    100% {
        background-position: top;
    }
}

@keyframes background-animation {
    0% {
        background-position: top;
    }

    50% {
        background-position: bottom;
    }

    100% {
        background-position: top;
    }
}


ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.removepad {
    padding-left: 0px;
    padding-right: 0px;
}

.margin-0 {
    margin: 0px;
}

.padding-0 {
    padding: 0px;
}

.margin-auto {
    margin: auto 0;
}

.margin-auto-arround {
    margin: auto;
}

.min-height-100 {
    min-height: 100vh;
}

img {
    max-width: 100%;
    display: inline-block;
}

.bg-white {
    background: #fff;
}

.text {
}



.scribes-container {
}

.scribes-left {
    width: 100%;
    padding: 20px 30px;
}

    .scribes-left .headeing-here {
        padding-bottom: 30px;
    }

        .scribes-left .headeing-here h2 {
            font-size: 30px;
            color: #333232;
        }

html[dir="rtl"] .scribes-left .headeing-here h2 {
    text-align: right;
}

.scribes-left .headeing-here .text {
    color: #9d9b9b;
    font-size: 15px;
    font-weight: 500;
    margin-top: 3px;
}

html[dir="rtl"] .scribes-left .headeing-here .text {
    text-align: right;
}

.scribes-left .form-here {
}

    .scribes-left .form-here .input-here {
        padding-bottom: 25px;
    }

        .scribes-left .form-here .input-here label {
            color: #666666;
            font-size: 16px;
            display: block;
            margin-bottom: 5px;
        }

html[dir="rtl"] .scribes-left .form-here .input-here label {
    text-align: right;
}

.scribes-left .form-here .input-here input {
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #e3e2e5;
    background: none;
    padding: 0px 12px;
    height: 48px;
    border-radius: 4px;
}

html[dir="rtl"] .scribes-left .form-here .input-here input {
    text-align: right;
}

.scribes-left .form-here .input-here input:focus {
    border: 1px solid #c29617;
    border-radius: 2px;
    box-shadow: 0 0 0 0.3rem rgba(194, 150, 23, 0.35);
}

.scribes-left .form-here .input-here button {
    background: #c29617;
    font-size: 18px;
    color: #fff;
    display: inline-block;
    outline: none;
    height: 44px;
    padding: 0px 30px;
    border: none;
    border-radius: 4px;
}

.scribes-left .form-here .input-here button,
.scribes-left .form-here .input-here input[type="submit"] {
    background: #c29617;
    font-size: 18px;
    color: #fff;
    display: inline-block;
    outline: none;
    height: 44px;
    padding: 0px 30px;
    border: none;
    border-radius: 4px;
    width: auto
}

html[dir="rtl"] .scribes-left .form-here .input-here button,
html[dir="rtl"] .scribes-left .form-here .input-here input[type="submit"] {
    float: right;
}

.scribes-right {
    text-align: center;
    max-width: 850px;
    padding: 20px 0px;
}

    .scribes-right .content-here {
        padding-bottom: 70px;
    }

        .scribes-right .content-here img {
            max-width: 200px;
            display: inline-block;
        }

        .scribes-right .content-here .text {
            margin: 0;
            font-size: 18px;
            color: #FFFFFF;
            font-weight: 400;
            line-height: 35px;
            margin-top: 40px;
        }

.screenSlider-wrapper {
    background: url('../../images/main-screen.png')no-repeat center -27px;
    width: 714px;
    height: 486px;
    margin: 0 auto;
    position: relative;
}

    .screenSlider-wrapper .screen-slides {
        margin: 0 auto;
    }

        .screenSlider-wrapper .screen-slides img {
            display: inline-block;
            max-width: 100%;
            width: auto;
            height: 349px;
            animation: slideshow 5s linear 0s infinite;
            position: absolute;
            left: 108px;
            top: 26px;
        }

            .screenSlider-wrapper .screen-slides img:nth-child(2) {
                z-index: 6;
                animation-delay: 6s;
            }

            .screenSlider-wrapper .screen-slides img:nth-child(3) {
                z-index: 5;
                animation-delay: 8s;
            }

            .screenSlider-wrapper .screen-slides img:nth-child(4) {
                z-index: 4;
                animation-delay: 10s;
            }

            .screenSlider-wrapper .screen-slides img:nth-child(5) {
                z-index: 3;
                animation-delay: 12s;
            }


@keyframes slideshow {
    25% {
        opacity: 1;
    }

    33.33% {
        opacity: 0;
    }

    91.66% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.show-logo-tab {
    text-align: center;
    padding-bottom: 20px;
    display: none;
}

    .show-logo-tab img {
        max-width: 200px;
        display: inline-block;
    }

.custom-popup {
    background-color: #fff !important;
    border: 0px !important;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 55px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 55px rgba(0, 0, 0, 0.2);
    color: #383838 !important;
    margin: 0 auto;
    max-width: 280px;
    position: fixed;
    text-align: center;
    top: 22%;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0;
}

    .custom-popup button.close {
        cursor: pointer;
        font-weight: 400;
        opacity: 1;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
        outline: none !important;
    }

        .custom-popup button.close span {
            color: rgba(0,0,0,0.3);
            opacity: 1;
            padding: 3px 10px;
            font-size: 22px;
            text-shadow: none;
        }

        .custom-popup button.close:hover span {
            color: rgba(0,0,0,0.7);
        }

    .custom-popup img {
        max-width: 100px;
    }

.alert-custom-bg {
    background: #faa72d;
    border-radius: 5px 5px 0px 0px;
}

    .alert-custom-bg img {
        padding: 30px 0px;
    }

    .custom-popup .popup-text {
        margin: 0;
        color: #bababa;
        font-family: 'Roboto Medium';
        font-size: 18px;
        padding: 20px 0px;
        line-height: 30px;
        display: inline-block;
        width: 100%;
    }

    .custom-popup.alert-danger .alert-bg {
        background: #ff264f;
    }

    .custom-popup.alert-warning .alert-bg {
        background: #faa72d;
    }

    .custom-popup.alert-info .alert-bg {
        background: #1480d5;
    }

/* -----------------------------------------------------
 Login New Pages
----------------------------------------------------- */


.scribes-left .form-here .input-here.pd-0 {
    padding-bottom: 0px;
}

.scribes-left .form-here .forget-page {
    margin: 3px 0 7px 0;
    float: left;
    width: 100%;
}

    .scribes-left .form-here .forget-page a {
        text-decoration: none;
        color: #458fd8 !important;
        float: right;
        font-size: 12px;
    }

    .scribes-left .form-here .forget-page span {
        font-size: 12px;
        display: inline-block;
        float: right;
        margin: 0 2px 0 0;
    }


@media(max-width:1400px) {
    .scribes-right .content-here .text {
        font-size: 16px;
        line-height: 24px;
        margin-top: 10px;
    }

    .scribes-right .content-here {
        padding-bottom: 20px;
    }

    .screenSlider-wrapper {
        height: 405px;
    }
}

@media(max-width:1199px) {
    .scribes-left .headeing-here h2 {
        font-size: 25px;
    }

    .scribes-left .headeing-here .text {
        font-size: 13px;
    }

    .screenSlider-wrapper {
        width: 660px;
    }

        .screenSlider-wrapper .screen-slides img {
            left: 82px;
        }

    .scribes-right .content-here .text {
        padding: 10px;
    }
}


@media(max-width:991px) {
    .d-none991 {
        display: none !important;
    }

    .manageWidth {
        width: 100% !important;
        max-width: 500px !important;
        margin: auto;
        padding: 30px 0px !important;
    }

    .show-logo-tab {
        display: block;
    }

    .scribes-left .headeing-here {
        text-align: center;
    }

    body {
        min-height: 100vh;
        padding: 30px 15px;
    }

    .manageWidth {
        max-height: 600px !important;
    }

    .min-height-100 {
        min-height: 0vh;
    }

    .show-logo-tab img {
        max-width: 150px;
    }

    .scribes-left .headeing-here h2 {
        font-size: 23px;
    }

    .scribes-left .headeing-here .text {
        color: #9d9b9b;
        font-size: 12px;
    }

    .custom-popup {
        border-radius: 0px;
        max-width: 300px;
        top: 1%;
    }

    .alert-custom-bg {
        border-radius: 0px;
        float: left;
        height: 70px;
        width: 70px;
    }

        .alert-custom-bg img {
            max-width: 100%;
            padding: 0px;
        }

        .custom-popup .popup-text {
            border-radius: 0px;
            color: #000;
            font-size: 14px;
            font-weight: 400;
            float: left;
            line-height: 20px;
            padding: 15px 10px 0 10px;
            text-align: left;
            width: calc(100% - 105px);
        }

    html[dir="rtl"] .custom-popup {
        float: right;
    }

    html[dir="rtl"] .alert-custom-bg {
        float: right;
    }

        html[dir="rtl"] .custom-popup .popup-text {
            float: right;
            text-align: right;
        }

        html[dir="rtl"] .custom-popup button.close {
            right: inherit;
            left: 0;
        }
}


@media(max-width:767px) {
}
