/* =================================================================================== */
/* STYLES FOR EXTRA LARGE SCREENS (E.G., VERY HIGH-RESOLUTION SCREENS, LARGE DESKTOPS) */
/* =================================================================================== */

@media (min-width: 1200px) 
{
    #data-table tbody tr td.dt-body-left {
        padding-left: 0px !important;
    }
    
    .my-inner-inner-div {
        width: 75%;
    }
    
    .bd-placeholder-img {
    	font-size: 1.125rem;
    	text-anchor: middle;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    }
    
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
    
    .b-example-divider {
    	width: 100%;
    	height: 3rem;
    	background-color: rgba(0, 0, 0, .1);
    	border: solid rgba(0, 0, 0, .15);
    	border-width: 1px 0;
    	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }
    
    .b-example-vr {
    	flex-shrink: 0;
    	width: 1.5rem;
    	height: 100vh;
    }
    
    .bi {
    	vertical-align: -.125em;
    	fill: currentColor;
    }
    
    .bi2 {
    	vertical-align: -.125em;
    	fill: #ff0000;
    }
    
    .nav-scroller {
    	position: relative;
    	z-index: 2;
    	height: 2.75rem;
    	overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    	display: flex;
    	flex-wrap: nowrap;
    	padding-bottom: 1rem;
    	margin-top: -1px;
    	overflow-x: auto;
    	text-align: center;
    	white-space: nowrap;
    	-webkit-overflow-scrolling: touch;
    }
    
    .btn-bd-primary {
    	--bd-violet-bg: #712cf9;
    	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    	--bs-btn-font-weight: 600;
    	--bs-btn-color: var(--bs-white);
    	--bs-btn-bg: var(--bd-violet-bg);
    	--bs-btn-border-color: var(--bd-violet-bg);
    	--bs-btn-hover-color: var(--bs-white);
    	--bs-btn-hover-bg: #6528e0;
    	--bs-btn-hover-border-color: #6528e0;
    	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    	--bs-btn-active-color: var(--bs-btn-hover-color);
    	--bs-btn-active-bg: #5a23c8;
    	--bs-btn-active-border-color: #5a23c8;
    }
    
    .bd-mode-toggle {
    	z-index: 1500;
    }
    
    .bd-mode-toggle .dropdown-menu .active .bi {
    	display: block !important;
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    body.ce-page .btn-primary,
    body.add-page .btn-primary {
        --bs-btn-bg: #5C8FD2;
        --bs-btn-border-color: #5C8FD2;
        --bs-btn-hover-bg: #3d7ac8;
        --bs-btn-hover-border-color: #3d7ac8;
        --bs-btn-active-bg: #3d7ac8;
        --bs-btn-active-border-color: #3d7ac8;
    }
    
    .bookmark-off {
        --bs-btn-color: #696969 !important; 
        --bs-btn-bg: #FFF !important; 
        --bs-btn-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-hover-color: #FFF !important; 
        --bs-btn-hover-bg: #5C8FD2 !important; 
        --bs-btn-hover-border-color: #5C8FD2 !important; 
        
        --bs-btn-active-color: #FFF !important; 
        --bs-btn-active-bg: #5C8FD2 !important; 
        --bs-btn-active-border-color: #5C8FD2 !important;
    }
    
    .bookmark-on {
        --bs-btn-color: #fff !important; 
        --bs-btn-bg: #5C8FD2 !important; 
        --bs-btn-border-color: #5C8FD2 !important; 
        
        --bs-btn-hover-color: #fff !important; 
        --bs-btn-hover-bg: #555 !important; 
        --bs-btn-hover-border-color: #555 !important; 
        
        --bs-btn-active-color: #fff !important; 
        --bs-btn-active-bg: #555 !important; 
        --bs-btn-active-border-color: #555 !important;
    }
    
    .background-grey {
        background-color: rgb(248, 249, 250) !important;
    }
    
    table.dataTable tr.dt-hasChild td.dt-control:before,
    table.dataTable td.dt-control:before {
        background-color: gray !important;
    }
    
    table#data-table {
        width: 98% !important;
    }
    
    table#data-table a {
        color: #5C8FD2;
    }
    
    table#data-table thead tr th:first-of-type {
        width: 5px !important;
    }
    
    div.dataTables_filter {
        margin-bottom: 20px;
    }
    
    div.dataTables_filter label input {
        margin-left: 10px !important;
        color: #696969 !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        outline-color: rgb(105, 105, 105) !important;
        outline-style: none !important;
        outline-width: 0px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: 200px !important;
        background-color: rgb(255, 255, 255) !important;
    }
    
    div.dataTables_filter label input:focus,
    div.dataTables_filter label input:hover,
    .with-text {
        
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }
    
    div.dataTables_paginate {
        margin-top: 8px;
    }
    
    input[type="search"]::-webkit-search-cancel-button {
        margin-right: -1px;
    }
    
    td:not([class]) {
        background-color: #F8F9FA !important;
    }
    
    div#card1,
    div#card2,
    div#card3 {
        cursor: pointer;   
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    img.card-img-top {
        opacity: 0.9;
    }
    
    .cls-1 {
        fill: #699f4c;
        fill-rule: evenodd;
    }
    
    .about-icon {
        width: 100px;
        transition: transform 0.3s ease-in-out;
        filter: drop-shadow(1px 2px 4px #6C9AD6);
    }
    
    .about-icon:hover {
        transform: translateY(-5px); 
    }
    
    .freece {
        filter: drop-shadow(2px 4px 2px #6C9AD6);
    }
    
    .author-email-link {
        color: black;
        font-weight: unset;
        text-decoration: none;
    }
    .author-email-link:hover {
        color: black;
        font-weight: unset;
        text-decoration: underline;
    }
    
    table.search-table td.course-name a,
    body.bookmarks-page table.dataTable td.bm-course-name a {
        font-weight: 500;
    }
}


/* =================================================================================== */
/* STYLES FOR LARGE SCREENS (E.G., desktops, laptops, larger tablets)                  */
/* =================================================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) 
{
    #data-table tbody tr td.dt-body-left {
        padding-left: 0px !important;
    }
    
    .col-8 {
        width: 85%;
    }
    
    .bd-placeholder-img {
    	font-size: 1.125rem;
    	text-anchor: middle;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    }
    
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}

    .b-example-divider {
    	width: 100%;
    	height: 3rem;
    	background-color: rgba(0, 0, 0, .1);
    	border: solid rgba(0, 0, 0, .15);
    	border-width: 1px 0;
    	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }
    
    .b-example-vr {
    	flex-shrink: 0;
    	width: 1.5rem;
    	height: 100vh;
    }
    
    p.card-text {
        font-size: 15px;
    }
    
    div.card-footer small.text-body-secondary {
        font-size: 12px;
    }
    
    .bi {
    	vertical-align: -.125em;
    	fill: currentColor;
    }
    
    .bi2 {
    	vertical-align: -.125em;
    	fill: #ff0000;
    }
    
    .nav-scroller {
    	position: relative;
    	z-index: 2;
    	height: 2.75rem;
    	overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    	display: flex;
    	flex-wrap: nowrap;
    	padding-bottom: 1rem;
    	margin-top: -1px;
    	overflow-x: auto;
    	text-align: center;
    	white-space: nowrap;
    	-webkit-overflow-scrolling: touch;
    }
    
    .btn-bd-primary {
    	--bd-violet-bg: #712cf9;
    	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    	--bs-btn-font-weight: 600;
    	--bs-btn-color: var(--bs-white);
    	--bs-btn-bg: var(--bd-violet-bg);
    	--bs-btn-border-color: var(--bd-violet-bg);
    	--bs-btn-hover-color: var(--bs-white);
    	--bs-btn-hover-bg: #6528e0;
    	--bs-btn-hover-border-color: #6528e0;
    	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    	--bs-btn-active-color: var(--bs-btn-hover-color);
    	--bs-btn-active-bg: #5a23c8;
    	--bs-btn-active-border-color: #5a23c8;
    }
    
    .bd-mode-toggle {
    	z-index: 1500;
    }
    
    .bd-mode-toggle .dropdown-menu .active .bi {
    	display: block !important;
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    body.ce-page .btn-primary,
    body.add-page .btn-primary {
        --bs-btn-bg: #5C8FD2;
        --bs-btn-border-color: #5C8FD2;
        --bs-btn-hover-bg: #3d7ac8;
        --bs-btn-hover-border-color: #3d7ac8;
        --bs-btn-active-bg: #3d7ac8;
        --bs-btn-active-border-color: #3d7ac8;
    }
    
    .bookmark-off {
        --bs-btn-color: #696969 !important; 
        --bs-btn-bg: #FFF !important; 
        --bs-btn-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-hover-color: #696969 !important; 
        --bs-btn-hover-bg: #FFF !important; 
        --bs-btn-hover-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-active-color: #696969 !important; 
        --bs-btn-active-bg: #FFF !important; 
        --bs-btn-active-border-color: rgb(222, 226, 230) !important;
    }
    
    .bookmark-on {
        --bs-btn-color: #fff !important; 
        --bs-btn-bg: #555 !important; 
        --bs-btn-border-color: #555 !important; 
        
        --bs-btn-hover-color: #fff !important; 
        --bs-btn-hover-bg: #555 !important; 
        --bs-btn-hover-border-color: #555 !important; 
        
        --bs-btn-active-color: #fff !important; 
        --bs-btn-active-bg: #555 !important; 
        --bs-btn-active-border-color: #555 !important;
    }
    
    .background-grey {
        background-color: rgb(248, 249, 250) !important;
    }
    
    table.dataTable tr.dt-hasChild td.dt-control:before,
    table.dataTable td.dt-control:before {
        background-color: gray !important;
    }
    
    table#data-table {
        width: 98% !important;
    }
    
    table#data-table a {
        color: #5C8FD2;
    }
    
    table#data-table thead tr th:first-of-type {
        width: 5px !important;
    }
    
    div.dataTables_filter {
        margin-bottom: 20px;
    }
    
    div.dataTables_filter label input {
        margin-left: 10px !important;
        color: #696969 !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        outline-color: rgb(105, 105, 105) !important;
        outline-style: none !important;
        outline-width: 0px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: 200px !important;
        background-color: rgb(255, 255, 255) !important;
    }
    
    div.dataTables_filter label input:focus,
    div.dataTables_filter label input:hover,
    .with-text {
        
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }
    
    div.dataTables_paginate {
        margin-top: 8px;
    }
    
    input[type="search"]::-webkit-search-cancel-button {
        margin-right: -1px;
    }
    
    td:not([class]) {
        background-color: #F8F9FA !important;
    }
    
    div#card1,
    div#card2,
    div#card3 {
        cursor: pointer;   
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    img.card-img-top {
        opacity: 0.9;
    }
    
    .cls-1 {
        fill: #699f4c;
        fill-rule: evenodd;
    }
    
    .about-icon {
        width: 100px;
        transition: transform 0.3s ease-in-out;
        filter: drop-shadow(1px 2px 4px #6C9AD6);
    }
    
    .about-icon:hover {
        transform: translateY(-5px); 
    }
    
    .freece {
        filter: drop-shadow(2px 4px 2px #6C9AD6);
    }
    
    .author-email-link {
        color: black;
        font-weight: unset;
        text-decoration: none;
    }
    .author-email-link:hover {
        color: black;
        font-weight: unset;
        text-decoration: underline;
    }
    
    table.search-table td.course-name a,
    body.bookmarks-page table.dataTable td.bm-course-name a {
        font-weight: 500;
    }
}

/* =================================================================================== */
/* STYLES FOR MEDIUM SCREENS                                                           */
/* =================================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) 
{
    #data-table tbody tr td.dt-body-left {
        padding-left: 0px !important;
    }
    
    .col-8 {
        width: 85%;
    }
    
    div.mine {
        flex-wrap: wrap;
    }
    
    div.mine div.col {
        width: 50%;
    }
    
    div.my-a,
    div.my-b,
    div.my-c {
        justify-content: center;
        display: flex;
    }
    
    div.card {
        width: 20vw;
    }
    
    h5.card-title {
        font-size: 0.95rem;
    }
    p.card-text {
        /* font-size: 14px; */
        display: none;
    }
    
    .card-footer {
        display: none;
    }
    
    div.card-footer small.text-body-secondary {
        font-size: .7em;
    }
    
    img.couch {
        display: none;
    }
    
    div.my-sidebar-column {
        width: 240px !important;
    }
    
    .bd-placeholder-img {
    	font-size: 1.125rem;
    	text-anchor: middle;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    }
    
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}

    .b-example-divider {
    	width: 100%;
    	height: 3rem;
    	background-color: rgba(0, 0, 0, .1);
    	border: solid rgba(0, 0, 0, .15);
    	border-width: 1px 0;
    	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }
    
    .b-example-vr {
    	flex-shrink: 0;
    	width: 1.5rem;
    	height: 100vh;
    }
    
    .bi {
    	vertical-align: -.125em;
    	fill: currentColor;
    }
    
    .bi2 {
    	vertical-align: -.125em;
    	fill: #ff0000;
    }
    
    .nav-scroller {
    	position: relative;
    	z-index: 2;
    	height: 2.75rem;
    	overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    	display: flex;
    	flex-wrap: nowrap;
    	padding-bottom: 1rem;
    	margin-top: -1px;
    	overflow-x: auto;
    	text-align: center;
    	white-space: nowrap;
    	-webkit-overflow-scrolling: touch;
    }
    
    .btn-bd-primary {
    	--bd-violet-bg: #712cf9;
    	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    	--bs-btn-font-weight: 600;
    	--bs-btn-color: var(--bs-white);
    	--bs-btn-bg: var(--bd-violet-bg);
    	--bs-btn-border-color: var(--bd-violet-bg);
    	--bs-btn-hover-color: var(--bs-white);
    	--bs-btn-hover-bg: #6528e0;
    	--bs-btn-hover-border-color: #6528e0;
    	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    	--bs-btn-active-color: var(--bs-btn-hover-color);
    	--bs-btn-active-bg: #5a23c8;
    	--bs-btn-active-border-color: #5a23c8;
    }
    
    .bd-mode-toggle {
    	z-index: 1500;
    }
    
    .bd-mode-toggle .dropdown-menu .active .bi {
    	display: block !important;
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    body.ce-page .btn-primary,
    body.add-page .btn-primary {
        --bs-btn-bg: #5C8FD2;
        --bs-btn-border-color: #5C8FD2;
        --bs-btn-hover-bg: #3d7ac8;
        --bs-btn-hover-border-color: #3d7ac8;
        --bs-btn-active-bg: #3d7ac8;
        --bs-btn-active-border-color: #3d7ac8;
    }
    
    .bookmark-off {
        --bs-btn-color: #696969 !important; 
        --bs-btn-bg: #FFF !important; 
        --bs-btn-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-hover-color: #696969 !important; 
        --bs-btn-hover-bg: #FFF !important; 
        --bs-btn-hover-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-active-color: #696969 !important; 
        --bs-btn-active-bg: #FFF !important; 
        --bs-btn-active-border-color: rgb(222, 226, 230) !important;
    }
    
    .bookmark-on {
        --bs-btn-color: #fff !important; 
        --bs-btn-bg: #555 !important; 
        --bs-btn-border-color: #555 !important; 
        
        --bs-btn-hover-color: #fff !important; 
        --bs-btn-hover-bg: #555 !important; 
        --bs-btn-hover-border-color: #555 !important; 
        
        --bs-btn-active-color: #fff !important; 
        --bs-btn-active-bg: #555 !important; 
        --bs-btn-active-border-color: #555 !important;
    }
    
    .background-grey {
        background-color: rgb(248, 249, 250) !important;
    }
    
    table.dataTable tr.dt-hasChild td.dt-control:before,
    table.dataTable td.dt-control:before {
        background-color: gray !important;
    }
    
    table#data-table {
        width: 98% !important;
    }
    
    table#data-table a {
        color: #5C8FD2;
    }
    
    table#data-table thead tr th:first-of-type {
        width: 5px !important;
    }
    
    div.dataTables_filter {
        margin-bottom: 20px;
    }
    
    div.dataTables_filter label input {
        margin-left: 10px !important;
        color: #696969 !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        outline-color: rgb(105, 105, 105) !important;
        outline-style: none !important;
        outline-width: 0px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: 200px !important;
        background-color: rgb(255, 255, 255) !important;
    }
    
    div.dataTables_filter label input:focus,
    div.dataTables_filter label input:hover,
    .with-text {
        
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }
    
    div.dataTables_paginate {
        margin-top: 8px;
    }
    
    input[type="search"]::-webkit-search-cancel-button {
        margin-right: -1px;
    }
    
    td:not([class]) {
        background-color: #F8F9FA !important;
    }
    
    div#card1,
    div#card2,
    div#card3 {
        cursor: pointer;   
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    img.card-img-top {
        opacity: 0.9;
    }
    
    .cls-1 {
        fill: #699f4c;
        fill-rule: evenodd;
    }
    
    .about-icon {
        width: 100px;
        transition: transform 0.3s ease-in-out;
        filter: drop-shadow(1px 2px 4px #6C9AD6);
        
    }
    
    .about-icon:hover {
        transform: translateY(-5px);  
    }
    
    .freece {
        filter: drop-shadow(2px 4px 2px #6C9AD6);
    }
    
    .author-email-link {
        color: black;
        font-weight: unset;
        text-decoration: none;
    }
    .author-email-link:hover {
        color: black;
        font-weight: unset;
        text-decoration: underline;
    }
    
    table.search-table td.course-name a,
    body.bookmarks-page table.dataTable td.bm-course-name a {
        font-weight: 500;
    }
}

/* =================================================================================== */
/* STYLES FOR SMALL SCREENS (E.G., MOBILE DEVICES, SMALLER TABLETS)                    */
/* =================================================================================== */

@media (min-width: 576px) and (max-width: 767.98px) 
{
    #data-table tbody tr td.dt-body-left {
        padding-left: 0px !important;
    }
    
    div.my-a {
        justify-content: center;
        display: flex;
    }
    
    div.my-outer-div {
        overflow-y: scroll;
        flex-direction: column;
        justify-content: unset !important;
    }
    
    div.my-inner-div {
        flex-direction: unset;
    }
    
    div.my-inner-inner-div {
        width: 60%;
    }
    
    div.my-sidebar-column {
        width: 240px !important;
    }
    
    .card-footer {
        display: none;
    }

    .bd-placeholder-img {
    	font-size: 1.125rem;
    	text-anchor: middle;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    }
    
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}

    .b-example-divider {
    	width: 100%;
    	height: 3rem;
    	background-color: rgba(0, 0, 0, .1);
    	border: solid rgba(0, 0, 0, .15);
    	border-width: 1px 0;
    	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }
    
    .b-example-vr {
    	flex-shrink: 0;
    	width: 1.5rem;
    	height: 100vh;
    }
    
    .bi {
    	vertical-align: -.125em;
    	fill: currentColor;
    }
    
    .bi2 {
    	vertical-align: -.125em;
    	fill: #ff0000;
    }
    
    .nav-scroller {
    	position: relative;
    	z-index: 2;
    	height: 2.75rem;
    	overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    	display: flex;
    	flex-wrap: nowrap;
    	padding-bottom: 1rem;
    	margin-top: -1px;
    	overflow-x: auto;
    	text-align: center;
    	white-space: nowrap;
    	-webkit-overflow-scrolling: touch;
    }
    
    .btn-bd-primary {
    	--bd-violet-bg: #712cf9;
    	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    	--bs-btn-font-weight: 600;
    	--bs-btn-color: var(--bs-white);
    	--bs-btn-bg: var(--bd-violet-bg);
    	--bs-btn-border-color: var(--bd-violet-bg);
    	--bs-btn-hover-color: var(--bs-white);
    	--bs-btn-hover-bg: #6528e0;
    	--bs-btn-hover-border-color: #6528e0;
    	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    	--bs-btn-active-color: var(--bs-btn-hover-color);
    	--bs-btn-active-bg: #5a23c8;
    	--bs-btn-active-border-color: #5a23c8;
    }
    
    .bd-mode-toggle {
    	z-index: 1500;
    }
    
    .bd-mode-toggle .dropdown-menu .active .bi {
    	display: block !important;
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    body.ce-page .btn-primary,
    body.add-page .btn-primary {
        --bs-btn-bg: #5C8FD2;
        --bs-btn-border-color: #5C8FD2;
        --bs-btn-hover-bg: #3d7ac8;
        --bs-btn-hover-border-color: #3d7ac8;
        --bs-btn-active-bg: #3d7ac8;
        --bs-btn-active-border-color: #3d7ac8;
    }
    
    .bookmark-off {
        --bs-btn-color: #696969 !important; 
        --bs-btn-bg: #FFF !important; 
        --bs-btn-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-hover-color: #696969 !important; 
        --bs-btn-hover-bg: #FFF !important; 
        --bs-btn-hover-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-active-color: #696969 !important; 
        --bs-btn-active-bg: #FFF !important; 
        --bs-btn-active-border-color: rgb(222, 226, 230) !important;
    }
    
    .bookmark-on {
        --bs-btn-color: #fff !important; 
        --bs-btn-bg: #555 !important; 
        --bs-btn-border-color: #555 !important; 
        
        --bs-btn-hover-color: #fff !important; 
        --bs-btn-hover-bg: #555 !important; 
        --bs-btn-hover-border-color: #555 !important; 
        
        --bs-btn-active-color: #fff !important; 
        --bs-btn-active-bg: #555 !important; 
        --bs-btn-active-border-color: #555 !important;
    }
    
    .background-grey {
        background-color: rgb(248, 249, 250) !important;
    }
    
    table.dataTable tr.dt-hasChild td.dt-control:before,
    table.dataTable td.dt-control:before {
        background-color: gray !important;
    }
    
    table#data-table {
        width: 98% !important;
    }
    
    table#data-table a {
        color: #5C8FD2;
    }
    
    table#data-table thead tr th:first-of-type {
        width: 5px !important;
    }
    
    div.dataTables_filter {
        margin-bottom: 20px;
    }
    
    div.dataTables_filter label input {
        margin-left: 10px !important;
        color: #696969 !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        outline-color: rgb(105, 105, 105) !important;
        outline-style: none !important;
        outline-width: 0px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: 200px !important;
        background-color: rgb(255, 255, 255) !important;
    }
    
    div.dataTables_filter label input:focus,
    div.dataTables_filter label input:hover,
    .with-text {
        
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }
    
    div.dataTables_paginate {
        margin-top: 8px;
    }
    
    input[type="search"]::-webkit-search-cancel-button {
        margin-right: -1px;
    }
    
    td:not([class]) {
        background-color: #F8F9FA !important;
    }
    
    div#card1,
    div#card2,
    div#card3 {
        cursor: pointer;   
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    img.card-img-top {
        opacity: 0.9;
    }
    
    .cls-1 {
        fill: #699f4c;
        fill-rule: evenodd;
    }
    
    .about-icon {
        width: 100px;
        transition: transform 0.3s ease-in-out;
        filter: drop-shadow(1px 2px 4px #6C9AD6);
        
    }
    
    .about-icon:hover {
        transform: translateY(-5px);  
    }
    
    .freece {
        filter: drop-shadow(2px 4px 2px #6C9AD6);
    }
    
    .author-email-link {
        color: black;
        font-weight: unset;
        text-decoration: none;
    }
    .author-email-link:hover {
        color: black;
        font-weight: unset;
        text-decoration: underline;
    }
    
    table.search-table td.course-name a,
    body.bookmarks-page table.dataTable td.bm-course-name a {
        font-weight: 500;
    }
}

/* =================================================================================== */
/* STYLES FOR EXTRA SMALL SCREENS (E.G., MOBILE DEVICES)                               */
/* =================================================================================== */

@media (max-width: 575.98px) 
{
    #data-table tbody tr td.dt-body-left {
        padding-left: 0px !important;
    }
    
    .my-table-holder {
        width: 75% !important;
    }
    
    div#card3 {
        display: none;
    }
    
    div.my-a {
        justify-content: center;
        display: flex;
    }
    
    body.index-page main {
        height: 100vh !important;
        justify-content: center !important;
    }
    
    div.my-outer-div {
        overflow-y: scroll;
        flex-direction: column;
        justify-content: unset !important;
    }
    body.ce-page div.my-outer-div {
        overflow-y: unset;
        flex-direction: inherit;
        justify-content: center !important;
    }
    body.index-page div.my-outer-div {
        overflow-y: unset;
    }
    
    div.my-inner-div {
        flex-direction: unset;
    }
    body.ce-page div.my-inner-div {
        height: 100vh;
    }
    
    body.ce-page div.my-inner-inner-div {
        width: 85%;
    }
    
    div.my-presenter-div {
        display: none;
    }
    
    div.my-url-div {
        display: none;
    }
     
    div.my-sidebar-column {
        display: none !important;
    }
    div.b-example-divider {
        display: none !important;
    }
    
    p.card-text,
    div.card-footer {
        display: none !important;
    }
    
    body.index-page div.my-inner-inner-div {
        width: 55%;
    }

    .bd-placeholder-img {
    	font-size: 1.125rem;
    	text-anchor: middle;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	user-select: none;
    }
    
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}

    .b-example-divider {
    	width: 100%;
    	height: 3rem;
    	background-color: rgba(0, 0, 0, .1);
    	border: solid rgba(0, 0, 0, .15);
    	border-width: 1px 0;
    	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }
    
    .b-example-vr {
    	flex-shrink: 0;
    	width: 1.5rem;
    	height: 100vh;
    }
    
    .bi {
    	vertical-align: -.125em;
    	fill: currentColor;
    }
    
    .bi2 {
    	vertical-align: -.125em;
    	fill: #ff0000;
    }
    
    .nav-scroller {
    	position: relative;
    	z-index: 2;
    	height: 2.75rem;
    	overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    	display: flex;
    	flex-wrap: nowrap;
    	padding-bottom: 1rem;
    	margin-top: -1px;
    	overflow-x: auto;
    	text-align: center;
    	white-space: nowrap;
    	-webkit-overflow-scrolling: touch;
    }
    
    .btn-bd-primary {
    	--bd-violet-bg: #712cf9;
    	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    	--bs-btn-font-weight: 600;
    	--bs-btn-color: var(--bs-white);
    	--bs-btn-bg: var(--bd-violet-bg);
    	--bs-btn-border-color: var(--bd-violet-bg);
    	--bs-btn-hover-color: var(--bs-white);
    	--bs-btn-hover-bg: #6528e0;
    	--bs-btn-hover-border-color: #6528e0;
    	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    	--bs-btn-active-color: var(--bs-btn-hover-color);
    	--bs-btn-active-bg: #5a23c8;
    	--bs-btn-active-border-color: #5a23c8;
    }
    
    .bd-mode-toggle {
    	z-index: 1500;
    }
    
    .bd-mode-toggle .dropdown-menu .active .bi {
    	display: block !important;
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    body.ce-page .btn-primary,
    body.add-page .btn-primary {
        --bs-btn-bg: #5C8FD2;
        --bs-btn-border-color: #5C8FD2;
        --bs-btn-hover-bg: #3d7ac8;
        --bs-btn-hover-border-color: #3d7ac8;
        --bs-btn-active-bg: #3d7ac8;
        --bs-btn-active-border-color: #3d7ac8;
    }
    
    .bookmark-off {
        --bs-btn-color: #696969 !important; 
        --bs-btn-bg: #FFF !important; 
        --bs-btn-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-hover-color: #696969 !important; 
        --bs-btn-hover-bg: #FFF !important; 
        --bs-btn-hover-border-color: rgb(222, 226, 230) !important; 
        
        --bs-btn-active-color: #696969 !important; 
        --bs-btn-active-bg: #FFF !important; 
        --bs-btn-active-border-color: rgb(222, 226, 230) !important;
    }
    
    .bookmark-on {
        --bs-btn-color: #fff !important; 
        --bs-btn-bg: #555 !important; 
        --bs-btn-border-color: #555 !important; 
        
        --bs-btn-hover-color: #fff !important; 
        --bs-btn-hover-bg: #555 !important; 
        --bs-btn-hover-border-color: #555 !important; 
        
        --bs-btn-active-color: #fff !important; 
        --bs-btn-active-bg: #555 !important; 
        --bs-btn-active-border-color: #555 !important;
    }
    
    .background-grey {
        background-color: rgb(248, 249, 250) !important;
    }
    
    table.dataTable tr.dt-hasChild td.dt-control:before,
    table.dataTable td.dt-control:before {
        background-color: gray !important;
    }
    
    table#data-table {
        width: 98% !important;
    }
    
    table#data-table a {
        color: #5C8FD2;
    }
    
    table#data-table thead tr th:first-of-type {
        width: 5px !important;
    }
    
    div.dataTables_filter {
        margin-bottom: 20px;
    }
    
    div.dataTables_filter label input {
        margin-left: 10px !important;
        color: #696969 !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        outline-color: rgb(105, 105, 105) !important;
        outline-style: none !important;
        outline-width: 0px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        width: 200px !important;
        background-color: rgb(255, 255, 255) !important;
    }
    
    div.dataTables_filter label input:focus,
    div.dataTables_filter label input:hover,
    .with-text {
        
        border-color: #86b7fe !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }
    
    div.dataTables_paginate {
        margin-top: 8px;
    }
    
    input[type="search"]::-webkit-search-cancel-button {
        margin-right: -1px;
    }
    
    td:not([class]) {
        background-color: #F8F9FA !important;
    }
    
    div#card1,
    div#card2,
    div#card3 {
        cursor: pointer;   
    }
    
    ul.nav li a.active {
        background-color: #4a7dc0 !important;
    }
    
    img.card-img-top {
        opacity: 0.9;
    }
    
    .cls-1 {
        fill: #699f4c;
        fill-rule: evenodd;
    }
    
    .about-icon {
        width: 100px;
        transition: transform 0.3s ease-in-out;
        filter: drop-shadow(1px 2px 4px #6C9AD6);
    }
    
    .about-icon:hover {
        transform: translateY(-5px); 
    }
    
    .freece {
        filter: drop-shadow(2px 4px 2px #6C9AD6);
    }
    
    .author-email-link {
        color: black;
        font-weight: unset;
        text-decoration: none;
    }
    .author-email-link:hover {
        color: black;
        font-weight: unset;
        text-decoration: underline;
    }
    
    table.search-table td.course-name a,
    body.bookmarks-page table.dataTable td.bm-course-name a {
        font-weight: 500;
    }
}