:root {
    /*--main-color: #005b51 ;*/
    --main-color: #2e4771;
    --second-color: #71bec9;
    --third-color: #6a2929;
}

@font-face {
    font-family: 'Cairo';
    src: url('../../fonts/Cairo/Cairo-Regular.ttf') format('truetype');
}

body {
    font-family: Cairo;
}

.MOE-Login-body {
    background: #D9D9D9 url(../../Images/smebank_Background.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

.ProjectName {
    color: var(--main-color) !important;
}

.login-logo {
    font-size: 18px !important;
}

    .login-logo img {
        max-height: 40px;
        vertical-align: middle !important;
    }

.MOE-Main-Color {
    color: var(--main-color) !important;
}

.MOE-btn {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #ffffff;
}

.MOE-btn-2 {
    background-color: var(--second-color) !important;
    border-color: var(--second-color) !important;
    color: #ffffff !important;
}

.MOE-btn:hover, .MOE-btn:active {
    color: var(--second-color) !important;
}

.MOE-btn-2:hover, .MOE-btn-2:active {
    color: var(--second-color) !important;
}

.item .alert {
    background-color: var(--main-color) !important;
}

    .item .alert::after {
        border-color: transparent var(--main-color) transparent transparent !important;
    }

.bad input[required=required], .bad input.optional, .bad select, .bad textarea {
    border: 1px solid var(--main-color) !important;
    box-shadow: 0 0 4px -2px var(--main-color) !important;
}

a {
    color: var(--main-color) !important;
}

    a:hover {
        color: var(--second-color) !important;
    }




/*.messagenow {
    background-color: var(--main-color) !important;
}*/















/*#ChatBody {
    background-color: #fff !important;
    /*background-color:var(--second-color) !important;
}*/
/*.conversation{
    transition : all 0.5s ;
    background-color:var(--main-color) !important;
    color:var(--second-color) !important;
}*/
/*.conversation:hover,
.conversation.active{
     background-color:var(--second-color) !important;
     color:var(--main-color) !important;
}*/
/*.First-message-background{
    background-color:var(--main-color) !important;
}
.First-message-background::after{
    border-color: transparent var(--main-color) transparent transparent !important;
}*/
/*.Second-message-background{
    background-color:var(--third-color) !important;
}
.Second-message-background::after {
    border-color: transparent var(--third-color) transparent transparent !important;
}*/
/*.time{
    color:var(--main-color) !important;
}*/
.Client-Chat-header {
    background-color: var(--main-color) !important;
    color: var(--second-color) !important;
}

.EvaluateImageactive {
    background-color: var(--main-color) !important;
}

/*.ChatBody-item > .Body{
    overflow-y:auto !important;
        border-bottom: var(--main-color) 1px solid;
}*/
/*.ChatBody-item > .footer{
    border-top: 1px solid #ffffff00 !important;
}*/

.Admin-design > header {
    background-color: var(--main-color) !important;
}

.Admin-design > .container > aside {
    background-color: var(--main-color) !important;
}

aside > ul > li > a,
aside > ul > li {
    color: white !important;
    background-color: var(--second-color) !important;
}

    aside > ul > li.active {
        border-right: 5px solid #ffffff;
        color: #ffffff;
    }

    aside > ul > li:hover, aside > ul > li > button:hover {
        color: var(--second-color) !important;
    }

.Admin-design > header > ul > li > button {
    background-color: var(--second-color) !important;
    border-color: var(--second-color) !important;
    color: #ffffff !important;
}

.Admin-nav > li {
    background: var(--second-color) !important;
    color: #ffffff !important;
}

    .Admin-nav > li > a {
        background-color: var(--second-color) !important;
        color: #ffffff !important;
    }

    .Admin-nav > li:first-child > a:after {
        border-top-color: var(--second-color) !important;
        border-left-color: var(--second-color) !important;
    }

    .Admin-nav > li:last-child > a:before {
        border-right-color: var(--main-color) !important;
        border-bottom-color: var(--main-color) !important;
    }

    .Admin-nav > li:last-child > a:after {
        border-top-color: var(--main-color) !important;
        border-left-color: var(--main-color) !important;
    }

    .Admin-nav > li:last-child > a {
        background-color: var(--main-color) !important;
        color: #ffffff !important;
    }

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: var(--second-color) !important;
    color: #ffffff !important;
}

    .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
        border-top-color: var(--second-color) !important;
    }

input[type="text"]:active, input[type="password"]:active, input[type="email"]:active, input[type="number"]:active, input[type="select"]:active, input[type="submit"]:active, input[type="search"]:active, select:active, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="select"]:focus, input[type="submit"]:focus, input[type="search"]:focus, select:focus {
    border-color: var(--main-color) !important;
    box-shadow: 0 0 4px var(--main-color);
}


.dataTable > tbody > tr > td {
    color: var(--second-color);
    vertical-align: middle !important
}

.Informations label, .Selecttoshow, .Informations {
    color: var(--main-color);
}

.my-hr {
    border-top: 3px solid var(--main-color);
    box-shadow: 2px 5px 6px #73879c;
}

a {
    cursor: pointer !important
}

thead tr th {
    text-align: center !important;
}

.nav-title2 a {
    color: var(--second-color) !important;
}

    .nav-title2 a:hover {
        color: var(--second-color) !important;
    }

table td {
    vertical-align: middle !important;
}


.wilcome-pages > .row > div {
    min-height: 200px;
}

    .wilcome-pages > .row > div > .Button {
        height: inherit;
        padding: 5px;
        border-radius: 10px 70px;
        min-height: 200px;
    }

        .wilcome-pages > .row > div > .Button > a {
            color: white !important;
        }

            .wilcome-pages > .row > div > .Button > a:hover,
            .wilcome-pages > .row > div > .Button > a:active {
                color: var(--second-color) !important;
            }

aside > ul > li > a {
    width: 80%;
}

.CustomeHeader > th {
    background-color: #ffffff !important;
    color: var(--main-color) !important;
}

.NormalHeader > th {
    background-color: var(--second-color) !important;
    color: #ffffff;
    cursor: pointer;
}

.ProjectGreen {
    color: var(--main-color) !important;
}