:root {
    --primary-color: #008fcf;
    --header-color: #03036b;
    --header-font-color: white;
    --modal-header-color: #3d3d5a;
    --modal-header-font-color: white;
    --header-footer-color: #3d3d5a;
    --header-footer-font-color: white;
    --body-bg-color: rgb(241, 241, 241);
    --btn-color: #03036b;
    --btn-hover-color: #0d00b2;
    --btn-font-color: white;
    --btn-hover-font-color: white;
    --icons-color: #03036b;
}
.close
{
    opacity:unset!important;
    color:white;
}
body {
    background-color: var(--body-bg-color);
}
.menustyle img {
    background-color: var(--icons-color);
}

.cover-photo {
    transition: all .5s ease-in-out;
}
.form-signin .btn-login {
    background: var(--btn-color);
    color: var(--btn-font-color);
}
    .form-signin .btn-login:hover {
        background: var(--btn-hover-color);
        color: var(--btn-hover-font-color);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }
.form-signin h2.form-signin-heading {
    background: var(--header-color);
    color: var(--header-font-color);
}
.form-group {
    border-radius: 5px;
}
.login-wrap {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.MainPage {
    color: var(--icons-color);
}

a.logo span {
    color: var(--header-font-color);
    transition: color 1s ease-in-out;
}
a.logo span:hover
{
    color:white;
}
.cover-photo {
    background-color: var(--icons-color);
    max-width: 40px !important;
    padding: 0px !important;
    margin: 8px;
}
.icon {
    background-color: var(--icons-color);
    padding: 0px !important;
    max-width:40px; 
}
    .cover-photo:hover { 
        border-radius: 5px;
        box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--icons-color); 
        margin: 10px;
    }
.modal-header a
{
    color:white;
}
.ResponsiveTable th
{
    padding-right:15px!important;
}
body {
    color: #171727;
    font-family: Cairo !important;
}
@media print{
    body{
        font-size:12px !important;
    }
    h2 {
        font-size:22px !important;
    }
    h3 {
        font-size: 18px !important;
    }
    h4 {
        font-size: 14px !important;
    }
    h5 {
        font-size: 12px !important;
    }
    h6 {
        font-size: 9px !important;
    }
    .firstDiv h4 {
        font-size: 14px !important;
    }
    .firstDiv h3 {
        font-size: 15px !important;
    }
        td{
        padding:2px !important;
    }
    .panel {
        box-shadow:none!important;
    }
}
.header {
    border-bottom: solid;
    /*background-image: url('../img/smoke.png');
    background-repeat: no-repeat;*/
    background-color: var(--header-footer-color);
    color: var(--header-footer-font-color);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-color: var(--header-footer-color);
    border: none;
}
.direction {
    border-radius: 0px 0px 7px 7px;
}
.footer {
    border-top: solid;
    /*background-image: url('../img/smoke.png');
    background-repeat: no-repeat;*/
    color: var(--header-footer-font-color);
    background-color: var(--header-footer-color);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.bio-graph-heading {
    /*background-image: url(../img/smoke2.png);
    background-repeat: no-repeat;*/
    background-color: var(--header-color);
    color: var(--header-font-color);
}
.panel {
    border-radius: 7px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    margin:7px;
    margin-bottom:15px;
}

.bio-graph-heading, .modal-content, .modal-header {
    border-radius: 7px 7px 0px 0px !important;
}

::selection {
    background: #d5eaf3;
    color: #fff;
}

::-moz-selection {
    background: #c7dbe4;
    color: #fff;
}

/*login page*/


.form-signin {
    background: #fff;
}

    .form-signin p {
        color: #b6b6b6;
    }

    .form-signin a {
        color: #0f0f68
    }

        .form-signin a:hover {
            color: #b6b6b6;
        }

.btn-success {
    background-color: var(--btn-color);
    border-color: var(--btn-hover-color);
    color: var(--btn-font-color);
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
        background-color: var(--btn-hover-color);
        border-color: var(--btn-color);
        color: var(--btn-hover-font-color);
        box-shadow: 0 4px 8px rgba(0,0,0,.2);
    }

a {
    color: #171727;
}

.login-body {
    background-color: #f1f2f7;
}

.modal-header {
    background: var(--modal-header-color);
    color: var(--modal-header-font-color);
}

a:hover {
    color: gray;
}

/*panel*/
.panel {
    /*border: 1px solid;
    border-color: #03036b;*/
}

.panel-heading {
    border-color: var(--header-color);
}

.panel-title {
    color: #2A3542;
}