@font-face {
	font-family: 'ProcreateSignature';
	src: local("ProcreateSignature-Regular"), local("ProcreateSignature-Regular"), url("fonts/ProcreateSignature.otf") format('opentype');
	font-style: normal;
}



body {
            font-family: 'Roboto', sans-serif;
            /*background: #fafafa;*/
            margin: 0;
            padding: 0;
            color: #222;
        }

        h1, h2, h3 {
            margin-top: 0;
            margin-top: 0;
        }

        a {
            color: #005bbb;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        /* Breadcrumb */
        .breadcrumb {
            font-size: 14px;
            margin-bottom: 15px;
            color: #555;
        }
        .breadcrumb a {
            color: #005bbb;
            font-weight: bold;
        }
        .breadcrumb span {
            color: #ae0c0c;
        }

        /* Course Cards */
        .course-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            /*padding: 20px;*/
            /*justify-content: center;*/
        }

        .course-card {
            width: 400px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s ease;
            /*height: -webkit-fill-available;*/
        }

        .course-card:hover {
            transform: scale(1.02);
        }

       .course-banner {
            width: 100%;
            height: 200px;
        }

        .course-content {
            padding: 15px;
        }

        .course-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 6px;
        }

        .course-meta {
            font-size: 14px;
            color: #555;
        }

        /* Module list */
        .module-list { 
        }

        .module-list ul {
            list-style: none;
            padding-left: 0;
            list-style: none;
            padding: 20px;
            background: papayawhip;
            width: fit-content;
            border-radius: 4px;
            margin:0;
        }

        .module-list li {
            color:#000;
            padding:10px;
            width:400px;
            padding-left: 25px;
  
        }
          .module-list li a {
            color:#000;
        }

         .module-list li:hover {
            background-color:#ddd;
            border-radius:5px;
         }

         .module-list a:hover {
            text-decoration:none;
         }

        .completed-module {
            color: #555;
        }

        .tick {
            color: green;
            font-weight: bold;
            margin-left: 5px;
            float:right;
        }

        /* Layout for lessons */
        .layout {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 400px;
            /*background: #f0f0f0;*/
            padding: 15px;
            height: calc(100vh - 170px);
            overflow-y: auto;
            position: sticky;
            top: 0px;
            border-radius: 4px;
        }

        .sidebar ul {
            list-style: none;
            padding-left: 0;
            list-style: none;
            padding-left: 0;
            list-style-type: none;
            list-style-position: outside;
            padding-left: 0;
            margin-left: 20px;
            color: #005bbb;
        }

        .sidebar li {
           /* margin-bottom: 20px;*/
            padding:10px;
        }

        .sidebar li:hover {
            background-color:#eee;
            /*border-radius:5px*/
        }

        .sidebar a {
            text-decoration:none;
        }

        .sidebar a.active {

            /*background: #ddd;
            padding: 6px 8px;
            border-radius: 4px;*/
            display: block;
            background: aliceblue;
            border-left: 4px solid #ae0c0c;
            padding: 10px;
            color:#000;
        }

        .content {
            flex: 1;
            background: #fff;
            padding: 20px;
            /*border-radius: 6px;*/
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            min-height: 300px;
        }

        /* Progress bar */
        .progress-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 20px;
            height: 18px;
            margin-bottom: 20px;
            overflow: hidden;
            display:none;
        }

        .progress-bar {
            height: 100%;
            background: #005bbb;
            width: 0%;
        }

        /* Navigation */
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            /*margin-top: 30px;*/
        }

        .nav-buttons a {
            padding: 10px 18px;
            background: #005bbb;
            background: #ae0c0c;
            color: #fff !important;
            border-radius: 4px;
        }

        .nav-buttons a:hover {
            background: #004999;
            background: #000;
            text-decoration:none;
        }

        .nav-buttons .disabled {
            background: #ccc;
            pointer-events: none;
        }

        button {
            background: #005bbb;
            background: #ae0c0c;
            color: #fff;
            border: none;
            padding: 8px 14px;
            border-radius: 4px;
            cursor: pointer;
            /*font-weight: bold;*/
            font-size:16px
        }

    button:hover {
        background: #004999;
    }

   .course-complete-badge::after {
        font-family: material design icons;
        content: "\F012C";
        position: absolute;
        right: 8px;
        background: #28a745;
        color: white;
        padding: 6px 6px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 50%;
        /* margin-top: 10px; */
        top: 10px;
    }

.course-card {
    position: relative;
}

.module-style {
    padding: 10px;
    background: #ab0000;
    background: #000;
    
    color: #fff;
    font-weight:normal;
    border-radius:5px;
}


.info {
    margin-bottom: 10px;line-height: 1.6;padding: 10px 20px;background: aliceblue;border-left: 4px solid cornflowerblue;
    text-align:justify;
}

.note {
    margin-bottom: 10px;line-height: 1.6;padding: 20px;background: aliceblue; border-radius:8px;border-left: 4px solid cornflowerblue;
    text-align:justify;
}

.course-completed {
    background-color:#ae0c0c;
    padding:20px;
    color:#fff;
}

.back-arrow::before {
    font-family: Material Design Icons;
    font-size:20pt;
    content:"\F19B1";
    color:#000;
    vertical-align:-4px;
}


.forward-arrow::after {
    font-family: Material Design Icons;
    font-size:20pt;
    content:"\F19B0";
    color:#000;
    vertical-align:-4px;
}




ul.note-list li {
    position: relative;
    padding-left: 2.5rem;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
}

ul.note-list li::before {
    font-family: material design icons;
    font-size: 24px;
    content: "\F09ED";
    position: absolute;
    left: 0;
    top: 10px;
}
  

.container {
    display: flex;
    gap: 1rem; 
}

.col {
  /*flex: 1; */
}

.left {
  /* optional styling */
}

.right {
  /* optional styling */
}

.page-container {
    width: 80%;
    margin: 0 auto;
}


.container-grid {
    /*display: grid;*/
    grid-template-columns: minmax(0, 2fr) 35%; /*35rem; Main column 75%, aside 25% */
    gap: 16px;
    max-width: 1600px;
    margin: 2rem auto;
    /*padding: 0 1rem;*/
    margin-top:10px;
    margin-bottom:0;
}

.left-column {
    padding:20px;
}

.right-column {
    padding:0 20px;
    padding-bottom:50px;

}


input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #555;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid #3b64ad;;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


label {
  vertical-align: 10px;
  cursor: pointer;
  margin-left: 15px;
}

.back-courses {
    color:#000;float:right;margin-right:10px;
}

.hero-top {
    width: 100%; display: block;
}
.omcth-crest-hero {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 250px;
    height: auto;
    top: 10px;
}

.icon-item {
    color:#fff;
    display:inline-block;
    width:28px;

}
.topbar { 
}

.icon-bar-modules {
    display:none;
}

.topbar-toggle {
   display: none;
}

.topbar-menu {
    display: none;
    background: #fff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
    border-bottom: 1px solid #eee;

      display: block !important;
        position: static;
        box-shadow: none;
        background: #fff;
        color: #000;
        padding: 20px;
}

.topbar-menu .open {
    display:none;
}


.answer-label {
    display:flex; 
    align-items:flex-start; 
    gap:8px;
    margin-bottom:10px;
}

.answer-checkbox {
    margin-top:2px !important;
    flex: 0 0 18px;
}
.question-label {
    display:flex; 
    align-items:flex-start;
    flex:0 0 20px;
    font-weight:bold;
}






  @media only screen and (max-width: 665px) {
    .topbar {
   
        color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
   
    }
    .topbar-menu {
     display: none !important;
    background: #f0f0f0;
    color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 20px;
    border-bottom: 1px solid #eee;
    }
    .topbar-toggle {

 background: #ae0c0c;
    color: #fff;
    border: none;
    padding: 14px 18px;
    font-size: 20px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display:block;
    border-radius:0px;
            display: flex;
        align-items: center;
        gap:10px;


       
    }

    .layout {
       display:block
    }
.topbar-menu.open {
    display: block !important;
}

.sidebar {
    width:100%;
    padding:0;
    height:auto;
    border-radius:0px;
}

.container {
    flex-flow:column;
    gap:0;
}

.page-container {
    width:100% !important;
    margin:0;
}



.module-list ul {
   width:auto;
}

.module-list li {
  width:auto;
}

.content {
    box-shadow:none;
}

.breadcrumb {
    display:none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.breadcrumb a {
    font-weight:normal;
}
.breadcrumb span {
    color:#000;
}

.module-content {
    margin:10px;
}
.back-courses {

    margin-top:0;

}

.course-container {
    justify-content:center;
 
}

.left-column {
    padding:15px;
}

.container-grid {
    margin:0px;
}

.hero-top {
    display:none !important;
}

.omcth-crest-hero {
    left:20%;
    
}

.info {
    text-align:left;
}

.icon-bar-modules {
    display:flex;background-color:#ae0c0c;
}



}