/* Change some root colors and settings of the document */

:root {
    --cassiopeia-color-primary: #005ba6;
  /* --cassiopeia-color-hover: green; */
  /* --cassiopeia-color-link: blue; */

/*
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
*/
    
/*
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
*/

    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #ffffff;
}

a:not([class]), a.pathway {
  text-decoration: none;
}

a:not([class]):hover, a.pathway:hover {
  text-decoration: underline;
}

.site-description {
    opacity: 0.7;
}

.breadcrumb {
  background-color: transparent;
}

.container-sidebar-right {
  padding-left: 2rem;
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */

.header {

}

/* Smaller banner */
.container-banner .banner-overlay {
    height: 40vh;
}


/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

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

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

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
    /* don't truncate long dropdown menu items */
    width: max-content;
}

/* dropdown menu icons */
.metismenu.mod-menu .mm-collapse .metismenu-item a img {
    height: 100%;
    max-width: 100%;
    padding-right: 0.5rem;
    padding-top: 0.3rem;
}


/* 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: 10px 4px 18px -3px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 10px 4px 18px -3px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 10px 4px 18px -3px rgba(0, 0, 0, 0.35);
}

/* 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;
}


/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

.h1, h1 {
 font-size: calc(1.1rem + 1.0vw);
}
@media (min-width:1200px) {
 .h1, h1 {
  font-size:1.875rem;
 }
}

.h2, h2 {
 font-size:calc(1.0rem + .9vw);
}
@media (min-width:1200px) {
 .h2, h2 {
  font-size:1.5rem;
 }
}

.h3, h3 {
 font-size: calc(1.0rem + .38vw);
}
@media (min-width:1200px) {
 .h3, h3 {
  font-size:1.286rem;
 }
}

.h4, h4 {
 font-size:calc(0.9rem + .25vw)
}
@media (min-width:1200px) {
 .h4, h4 {
  font-size:1.111rem;
 }
}

.h5,
h5 {
 font-size:1.07rem
}


/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

/*
.btn-primary {
    background: rgba(119, 9, 121, 1);
}

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}
*/

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

/*
.item-image {
    border: 2px solid #ff0000;
}
*/

header .fas, header .far {
    opacity:0.7;
}

.tip-info {
  background-image: url(../images/idea.svg);
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  padding-left: 1.8rem;
  background-position: left center;
}

/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}

/* or you color all icons with this special statement*/
/*
.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}*/

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */

.footer {
    background: var(--gray-800);
    background: linear-gradient(90deg, var(--gray-800) 0%, var(--gray-600) 35%, var(--gray-700) 100%);
}

.footer .grid-child {
  flex-wrap: wrap;
}

.footer .mod-footer {
    flex-basis: 100%;
    text-align: center;
    border-top: solid 1px rgba(255,255,255,0.2);
    padding-top: 0.5rem;
}

.footer .svg-button {
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    /* while color */
    filter: invert(97%) sepia(3%) saturate(11%) hue-rotate(37deg) brightness(102%) contrast(105%);"
}

.footer .svg-button:hover {
    /* orange #f8bb19 color */
    filter: invert(82%) sepia(11%) saturate(7292%) hue-rotate(348deg) brightness(106%) contrast(94%);"
}

.flex-entire-row {
    flex-basis: 100%;
}

/* Make the top menu on the same row as logo, not below it */
@media (min-width: 768px) {
    .container-nav {
      /*margin-top: -50px;*/
      /*position: fixed;
      top: 20px;
      */
    }
    
    /*
    .container-header nav {
      margin-top: 0px;
    }
    */
    
    /* Justify the top menu to the right */
    /*
    .navbar {
      margin-left: auto;
      order: 2;
      margin-right: 20px !important;
    }
    */
}


blockquote.cite {
  margin: 1rem 1rem;
  padding: 0.5rem 0.5rem;
  font-style: italic;
}
blockquote.cite:before {
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    content:"\f10d";
    font-size: 1rem;
    color: #888;
    color: rgba(0,0,0,0.2);
    line-height: 0.1em;
    margin-right: 0.5rem;
    vertical-align: baseline;
    font-style: italic;
}
blockquote.cite:after {
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    content:"\f10e";
    font-size: 1rem;
    color: #888;
    color: rgba(0,0,0,0.2);
    line-height: 0.1em;
    margin-left: 0.5rem;
    /*vertical-align: -1.7rem;*/
    font-style: italic;
}

td {
  padding: 8px 10px;
}

/* List with checkmarks icons */
.list-accept li::marker {
    font-family:Font Awesome\ 6 Free;
    content: '\f058\00a0';
    font-weight:900;
    color: rgba(var(--success-rgb), 0.8);
}

/* List with checkmarks icons */
.list-tick li::marker {
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    content:"\f00c\00a0";    
    color: rgba(var(--success-rgb), 1);
}

/* List with info icons */
.list-information li::marker {
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    content:"\f05a\00a0";    
    color: rgba(var(--info-rgb), 0.8);

    /*content: url('../images/info_icon_blue.svg');*/
}

/* List with latest articles (not in footer) */
.moduletable ul.mod-articleslatest {
    padding-left:0.5rem;
}
.moduletable .mod-articleslatest li::marker {
    font-family:Font Awesome\ 6 Free;
    font-weight:900;
    content:"\f15c\00a0";    
    color: rgba(0,0,0, 0.2);
}


/* Info box */
.info {
    /* taken from template's .text-info class */
    --text-opacity: 1;
    color: rgba(var(--info-rgb),var(--text-opacity)) !important;
    border: 1px solid rgba(var(--info-rgb), 0.2);
    background: rgba(var(--info-rgb), 0.02);
    padding: 0.5rem;
    margin: 1rem;
}
.info .icon {
    background-image: url(../images/info_icon_blue.svg);
}

.info .icon {
    float: left;
    background-repeat: no-repeat;
    background-size: 1.0rem 1.0rem;
    background-position: 0 0;
    width: 1.0rem;
    height: 1.0rem;
    margin-top: 0.2rem;
    margin-right: 1rem;
}

/* List of articles in category, hide table borders */
.com-content-category .table > :not(:first-child) {
  border-top: inherit;
}

.com-content-category .table tbody, .com-content-category .table td, .com-content-category .table tfoot, .com-content-category .table th, .com-content-category .table thead, .com-content-category .table tr{
    border: none;
}

/* contact form */
legend {
  font-size: 1.0rem;
}

.well {
  min-height: 20px;
  max-width: 50rem;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* GDPR cookie pop up */
div#cookiesck_options {
    position: absolute;
    opacity: 0.7;
    width: 20px;
    height: 20px;  
}