@font-face {
    font-family: MyFontNormal;
    src: url(../fonts/Almarai-Regular.ttf);
}

@font-face {
    font-family: MyFontBold;
    src: url(../fonts/Almarai-Bold.ttf);
}

body {
    direction: rtl;
    padding: 0px;
    margin: 0px;
    font-family: MyFontNormal, Arial;
}

.MainContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    min-height: 100%;
    background: #f5fafc;
}

.TopMenu {
    background-color: white;
    height: 95px;
    /*border-bottom: 1.5px solid rgb(35,36,77);*/
}

.OrgLogo, .OrgName, .OrgNameText {
    margin-top: 15px;
    float: right;
}

.OrgLogo {
    max-height: 65px;
    max-width: 25%;
    margin-right: 5px;
}

.OrgName, .OrgNameText {
    margin-top: 25px;
    max-height: 60px;
    max-width: 50%;
    margin-right: 15px;
}

.OrgNameText {
    font-size: 22pt;
}

.TitleContainer {
    float: right;
}

.MenuBar {
    float: left;
    height: 35px;
    margin-top: 20px;
    margin-left: 15px;
    text-align: left;
    min-width: 40%;
}

.MenuBarButton {
    float: left;
    width: 25%;
    min-height: 35px;
    color: gray;
    text-align: center;
    cursor: pointer;
    padding: 7.5px 0px;
    border-radius: 50px;
    transition: all 0.1s ease-in-out;
    font-size: 10pt;
}

    .MenuBarButton:hover {
        color: #213869;
        text-decoration: none;
    }

.MenuBarButton i {
    font-size: 11pt;
}

.SelectedmenuBarButton {
    color: white;
    background-color: #213869;
    text-decoration: none;
}

    .SelectedmenuBarButton:hover {
        color: white;
        background-color: #213869;
        text-decoration: none;
    }

.Footer {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    width: 100%;
    font-size: 8pt;
    padding: 10px;
    font-weight: bold;
    background-color: #213869;
    color: white;
    z-index: 10000;
}

.CopyRightsDiv {
    text-align: right;
}

.PoweredByDiv {
    text-align: left;
}

    .PoweredByDiv a {
        color: rgb(255, 255, 255);
        text-decoration: none;
        font-size: 9pt;
    }

.PageContentsContainer {
    padding: 15px;
    margin-bottom: 50px;
    overflow-y: scroll;
}

    .PageContentsContainer::-webkit-scrollbar {
        width: 5px;
    }

/* Track */
    .PageContentsContainer::-webkit-scrollbar-track {
        background: white;
    }

/* Handle */
    .PageContentsContainer::-webkit-scrollbar-thumb {
        background: rgb(33 56 105 / 0.25);
        border-radius: 25px;
    }

    /* Handle on hover */
        .PageContentsContainer::-webkit-scrollbar-thumb:hover {
            background: rgb(33 56 105 / 0.75);
        }

.MessageContainer {
    padding-left: 45px;
}

.TitleDiv {
    margin-top: 45px;
    font-size: 18pt;
    line-height: 30pt;
    color: rgba(0,0,0,0.75);
    font-weight: bold;
    padding-left: 65px;
}

.SubTitleDiv {
    margin-top: 20px;
    font-size: 12pt;
    line-height: 24pt;
    color: rgba(0,0,0,0.5);
}

.LoginAreaDiv {
    background-color: white;
    -webkit-box-shadow: 0px 0px 15px -1px rgba(153, 153, 153,0.25);
    -moz-box-shadow: 0px 0px 15px -1px rgba(153, 153, 153,0.25);
    box-shadow: 0px 0px 15px -1px rgba(153, 153, 153,0.25);
    border-radius: 5px;
    margin-top: 25px;
    padding: 35px;
}

.LoginAreaTitleDiv {
    padding: 0px 0px 25px 0px;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    border-bottom: 0.5px solid #ddd;
}

.LoginAreaEntryField {
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
    margin-top: 15px;
    padding: 10px;
}

.LoginAreaCommandsArea {
    padding: 15px 0px 0px 0px;
    text-align: center;
}

.LoginLink {
    color: blue;
    cursor:pointer;
    margin-top: 15px;
}

    .LoginLink:hover {
        color: darkblue;
    }

.LoginButton {
    background-color: #213869;
    color: white;
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 3px;
}

    .LoginButton:hover {
        background-color: #2c4986;
    }

.LoginLinkButton {
    display: inline-block;
    background-color: #213869;
    color: white;
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 3px;
}

    .LoginLinkButton:hover, .LoginLinkButton:focus, .LoginLinkButton:active {
        background-color: #2c4986;
        color: white;
        text-decoration: none;
    }

.LoginBackLinkButton {
    display: inline-block;
    background-color: #666921;
    color: white;
    padding: 10px;
    border: none;
    width: 100%;
    border-radius: 3px;
}

    .LoginBackLinkButton:hover, .LoginBackLinkButton:focus, .LoginBackLinkButton:active {
        background-color: #888d27;
        color: white;
        text-decoration: none;
    }

.RegistrationAreaCommandsArea {
    padding: 0px;
    margin-top: 15px;
}

.RegistrationButton {
    background-color: #21694f;
    color: white;
    padding: 10px;
    border: none;
    width: 150px;
    float: right;
    border-radius: 3px;
    width: 47.875%;
    margin: 0px;
    margin-right: 1.5%;
}

    .RegistrationButton:hover {
        background-color: #287b5d;
    }

.GoldButton {
    background-color: rgb(200, 176, 0);
}

    .GoldButton:hover {
        background-color: rgb(191, 164, 3);
    }

.MessageLabel {
    float: right;
}

@media(max-width:700px) {

    .MenuBar {
        width: 100%;
        display: block;
        float: unset;
        padding-top: 25px;
        margin-left: 0px;
    }

    .TitleContainer {
        margin-bottom: 15px;
        text-align: center;
    }

    .OrgLogo, .OrgName {
        margin-top: 15px;
        float: unset;
    }

    .TopMenu {
        height: 180px;
    }

    .TitleDiv {
        margin-top: 20px;
        font-size: 15pt;
        line-height: 28pt;
        padding-left: 0px;
    }

    .SubTitleDiv {
        margin-top: 15px;
        font-size: 12pt;
        line-height: 24pt;
        padding-left: 0px;
        text-align: justify;
    }

    .LoginAreaDivContainer {
        padding: 0px;
    }

    .LoginAreaDiv {
        margin-top: 15px;
        padding: 25px 20px;
    }

    .RegistrationAreaCommandsArea {
        margin-top: 10px;
    }

    .RegistrationButton {
        width: 100%;
        margin-top: 10px;
        margin-right: 0px;
    }
}