/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
:root {
  --cassiopeia-color-primary: #0000cd;
  --cassiopeia-color-link: #034F84;
  --cassiopeia-color-hover: #9cd0f1;

  --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;
  --navy:navy;
  --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;
  --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: #efefef;
}
/** 
site wide 
https://magazine.joomla.org/all-issues/september/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation
**/
main{
  border:solid thin grey !important;
  border-radius:8px;
  padding:4px;
}
.container-header {
  background-color: #efefef;
  background-image: none;
}

.container-header .mod-menu {
  color: #0088cc;
}
.container-header .navbar-toggler {
  color: #0088cc;
  border: 1px solid #0088cc;
}
img.clsMyBanner{
  border:solid medium #efefef;
  border-radius: 8px;
}
/* lost password or chnage profile option */
div.mdlLoginScreen{
  background-color: transparent;
}
div.mdlLoginScreen ul.mod-login__options {
    visibility: hidden !important;
    display: none !important;
}
div.mdlSiteSearch{
  background-color: transparent;
}

div.mdlSiteSearch input.inputbox{
  border:solid thin grey !important;
  width:100% !important;
  margin-top:5px;
  
}
/** LHS sidebar **/
div.sidebar-left{
  background-color:transparent !important;
  border:solid thin red;
  width:100%;
}
div.mdlCourseNotes h3,
div.mdlRecentCourseNotes h3 {
  font-size:16px;
  padding:0px !important;
  margin:0px 0px 5px 0px;
}
div.mdlCourseNotes,
div.mdlRecentCourseNotes{
  padding-left:5px;
}
div.mdlCourseNotes ul li,
div.mdlRecentCourseNotes ul li{
  line-height:14px !important;
  display: block !important;
}
/**
https://love2dev.com/blog/customize-bulleted-list/ 
https://www.w3schools.com/charsets/ref_emoji.asp
https://emojiguide.org/file-folder
**/
div.mdlCourseNotes ul li:before,
div.mdlRecentCourseNotes ul li:before {
/* content: '\1f4c2'; * open folder **/
  margin-right:2px;
  padding-right: 0px;
}
div.mdlCourseNotes ul li:before {
  content: '\1f4c1'; /** closed folder **/
}

div.mdlCourseNotes h4,
div.mdlRecentCourseNotes h4{
  font-size:16px;
  margin:0px 0px 5px 0px;
}
div.mdlCourseNotes h3,
div.mdlCourseNotes h4,
div.mdlRecentCourseNotes h3,
div.mdlRecentCourseNotes  h4{
  color:darkblue !important;
  font-weight:bold;
  margin-bottom: 8px !important;
}

div.mdlRecentCourseNotes h3,
div.mdlRecentCourseNotes  h4{
  color:darkgreen !important;
}
    
div.mdlCourseNotes ul li,
div.mdlRecentCourseNotes ul li{
/*  border:solid thin red !important;
  padding:0px !important;*/
}
div.mdlCourseNotes a,
div.mdlRecentCourseNotes  a{
  color:navy !important;
  font-weight:bold;
  font-size:14px;


}
div.mdlRecentCourseNotes  a{
    display: inline-block;
    width:95% !important;    
}
div.mdlCourseNotes ul li,
div.mdlRecentCourseNotes ul li {
  width:99%;
}
div.mdlRecentCourseNotes  ul li ul li a ,
div.mdlCourseNotes ul li ul li a {
  width:99%;
}
div.mdlRecentCourseNotes ul li a{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.mdlRecentCourseNotes ul li a{
  color: darkgreen  !important;
}

/** phpEmbed **/
div.embed-container{
  height:1000px !important;
  padding-bottom: 20px !important;
}

div.mdlClsNavigate,
div.mdlClsNavigate div.card-body,
div.mdlClsNavigate div p{
  background-color: transparent;
  margin:2px;
  padding:2px;
}
div.com-content-category__children h3{
font-size:20px;
}
div.com-content-category__children h3{
font-size:16px;
}
div.com-content-category__children h3.item-title::before{
  content: '\1f4c1'; /** closed folder **/
  color:blue;
}

div.cat-children h3
{
 color:transparent;
}