/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */
/* Change some root colors and settings of the document */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap');

:root {



    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;

    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #ffffff;
}


/* Use the importeed font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */

body {
    font-family: 'Tajawal', sans-serif;
}

.metismenu.mod-menu .mm-collapse {
    background: #CC912A;
}


/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

ْ/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
    background: #e1e9f5;
}

/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

element.style {
}
@media (min-width: 992px)
.container-header .metismenu>li.level-1.active>a, .container-header .metismenu>li.level-1.active>button, .container-header .metismenu>li.level-1>a:hover, .container-header .metismenu>li.level-1>button:hover {
    text-decoration: none;
}
.metismenu.mod-menu .metismenu-item.active>a, .metismenu.mod-menu .metismenu-item.active>button, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item>button:hover {
    text-decoration: underline;
}
.container-header .mod-list li.active>a {
    text-decoration: none;
}
.metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button, .metismenu.mod-menu .metismenu-item>span {
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mod-list li.active>a {
    text-decoration: underline;
}
.container-header .mod-menu>li>a, .container-header .mod-menu>li>span {
    color: currentColor;
    position: relative;
    text-decoration: none;
}
.mod-list li a {
    text-decoration: none;
}
a:not([class]) {
    text-decoration: underline;
}
a {
    color: var(--cassiopeia-color-link);
}
a {
    text-decoration: underline;
}
*, :after, :before {
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
.metismenu.mod-menu .metismenu-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.0rem;
    line-height: 1.5;
    padding: 0.5em 1em;
}

.h2, h2 {
    font-size: 1.3rem;
}

img {
    height: auto;
    max-width: 80%;
}