:root {
    --primary: #5567ff;
    --primary-content: #ffffff;
    --primary-dark: #1321ab;
    --primary-light: #8895ff;
    --secondary: #ffb455;
    --secondary-content: #552f00;
    --secondary-dark: #ff9d22;
    --secondary-light: #ffca88;
    --background: #f0f0f0;
    --foreground: #fbfbfb;
    --border: #dfdfdf;
    --copy: #262626;
    --copy-light: #666666;
    --copy-lighter: #8c8c8c;
    --success: #55ff55;
    --warning: #ffff55;
    --error: #ff5555;
    --success-content: #005500;
    --warning-content: #555500;
    --error-content: #550000;
}

.dark-theme {
    --primary: #5567ff;
    --primary-content: #ffffff;
    --primary-dark: #2239ff;
    --primary-light: #8895ff;
    --secondary: #ff55bc;
    --secondary-content: #550033;
    --secondary-dark: #ff22a8;
    --secondary-light: #ff88d0;
    --background: #111222;
    --foreground: #191c34;
    --border: #292e56;
    --copy: #fafafd;
    --copy-light: #cbcee6;
    --copy-lighter: #878dc5;
    --success: #55ff55;
    --warning: #ffff55;
    --error: #ff5555;
    --success-content: #005500;
    --warning-content: #555500;
    --error-content: #550000;
}

[dir] body {
    background-color: var(--foreground)!important;
}

[dir] .form-group .mb-24pt,
.pt-32pt,
.accordion__item {
    background-color: var(--foreground)!important;
    border-color: var(--border);
}

[dir] .border-bottom-2 {
    border-color: var(--border)!important
}

[dir] .border-top-2 {
    border-color: var(--border)!important;
}

.text-muted {
    color: var(--copy)!important;
}

a {
    color: var(--copy-light)!important;
}

.breadcrumb-item,
.breadcrumb-item .active {
    color: var(--copy-light)!important;
}

.card-header,
[dir] .list-group-item {
    background-color: var(--foreground)!important;
    border-color: var(--border)!important;
}

[dir="ltr"].custom-select,
[dir] .form-control,
.input-group-text {
    background-color: var(--foreground)!important;
    color: var(--copy) !important;
}

.accordion__item,
[dir] .accordion__menu-link:not(:last-child) {
    border-color: var(--border)!important;
    background-color: var(--foreground)!important;
}

label,
.form-label {
    color: var(--copy)!important;
}

.form-control-lg,
.card {
    background-color: var(--foreground)!important;
}

.bg-bg-light {
    background-color: var(--foreground) !important;
}

.bg-fg-light {
    background-color: var(--foreground) !important;
}

.text-color-light {
    color: var(--copy)
}

.text-color-light-light {
    color: var(--copy-light)
}

.text-color-light-lighter {
    color: var(--copy-lighter)
}

.page-section {
    background-color: var(--foreground) !important;
}

#default-navbar {
    background-color: var(--primary);
}

.page-item span {
    color: var(--copy)
}


/* .nav-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
} */

.nav-link {
    /* background-color: var(--primary-light)!important; */
    color: var(--primary-content) !important;
    border-radius: 0.5rem!important;
    width: 60px;
    height: 50px !important;
}

.gap-10 {
    gap: 5%;
}

.font-24 {
    font-size: 24pt !important;
}

.card-body,
.ps,
#keyword_search {
    background-color: var(--foreground)!important;
    color: var(--copy-light);
    border-color: var(--border) !important;
}

.sidebar-menu-button {
    color: var(--copy-light)!important;
}

.material-icons {
    color: var(--copy-light);
}

#submit_search {
    color: var(--copy-light)!important;
}

.bg-primary {
    background-color: var(--primary-light)!important;
}

.js-image {
    border-color: var(--border);
}

.ml-2,
.text-uppercase {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif!important;
    color: var(--copy-light)!important;
}

.mdk-drawer-layout__content {
    background-color: var(--foreground)!important;
}

.page-separator__text {
    background-color: var(--foreground)!important;
    color: var(--copy-light);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif!important;
}

.bg-primary img {
    background-color: var(--primary)!important;
}

.dropdown-toggle .material-icons {
    color: var(--primary-content) !important;
}

#account_box {
    font-size: 30px!important;
}

.dropdown-menu {
    background-color: var(--foreground)!important;
}

.card-body,
.flex {
    color: var(--copy-light)!important;
    font-weight: 400!important;
    font-size: 16px;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif!important;
}

#course-title {
    color: var(--copy)!important;
    font-size: 16px;
    font-weight: 550;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif!important;
}

.dropdown-header {
    color: var(--copy);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif!important;
}

.dropdown-toggle,
.navbar-toggler .material-icons,
.d-lg-block {
    color: var(--primary-content) !important;
}

.nav-link {
    font-size: 26px!important;
}

.bg-white img {
    background-color: var(--foreground)!important;
}

.skillzone {
    color: var(--copy-light);
}

.js-mdk-drawer-layout {
    background-color: var(--foreground)!important;
}

[dir] .card,
[dir] .card-nav .tab-content {
    background-color: var(--foreground)!important;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.mb-0,
.text-70 {
    color: var(--copy)!important;
    font-size: 14px;
}

.popover-body {
    background-color: var(--foreground)!important;
}

.search_bar {
    height: 50px;
    width: 500px;
    background: var(--primary-light);
    margin-right: 500px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    color: var(--primary-content);
}

#search_icon {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 30px;
    color: var(--primary-content)!important;
}

#search_input {
    background-color: var(--primary-light);
    opacity: 90%;
    border: none;
    color: var(--primary-content);
    font-size: 25px;
    width: 425px;
    border-radius: 0.5rem;
}

#search_input:focus {
    background-color: var(--primary-light);
    border: none!important;
    color: var(--primary-content);
    font-size: 25px;
    width: 425px;
    border-radius: 0.5rem;
    outline: none;
}

#search_input::placeholder {
    color: var(--primary-content)
}

#search_input:focus::placeholder {
    color: transparent;
}

.dropdown-item {
    color: var(--copy)!important;
}

.text-black-50 {
    color: var(--copy-light)
}

.fa-solid {
    font-size: 36px;
    color: var(--primary-content);
}

[dir] .form-control {
    border: 1px solid var(--border);
}

#tags,
#enteredTags {
    border-radius: 0.5rem !important;
    border: 1px solid var(--border) !important;
    background-color: var(--foreground) !important;
    width: 100%;
    height: 50px;
    display: inline-block;
    font-size: 20px;
    margin-bottom: 20px !important;
}

#enteredTags div {
    margin-top: 5px;
    margin-left: 5px;
    color: var(--copy-light);
    border-radius: 0.5rem;
    padding: 5px;
    font: 10px;
    background-color: var(--foreground);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}

.input-group-text {
    border: 1px solid var(--border)!important;
}

#keyword_search {
    border-radius: 0.5rem !important;
    border: 1px solid var(--border) !important;
    background-color: var(--foreground) !important;
    width: 80%;
    height: 50px;
    display: inline-block;
    font-size: 15px;
    margin-bottom: 20px !important;
    margin-left: 20px;
}

.keyword {
    display: flex;
    color: var(--copy);
    background-color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 15px;
    text-align: center;
    width: fit-content;
    padding: 5px;
    margin-left: 20px;
    margin-bottom: 10px;
}

.feather_icon {
    color: white;
    height: 35px;
    width: 35px;
    font-weight: bold;
}

.feather_icon_copy {
    color: var(--copy)!important;
    height: 35px;
    width: 35px;
    font-weight: bold;
}

#lightmodeicon {
    cursor: pointer;
}

.dropdown-toggle {
    padding-left: 8px!important;
    padding-right: 8px!important;
}

.nav .navbar-nav .flex-nowrap .d-flex.mr-16pt {
    margin-left: none!important
}


/* test */

.navbar {
    min-height: 75px !important;
    display: flex;
    justify-content: space-around;
}

.navbar .material-icons,
#account_box {
    font-size: 40px!important;
}

.mdk-drawer-layout .container,
.mdk-drawer-layout .container-fluid,
.mdk-drawer-layout .container-lg,
.mdk-drawer-layout .container-md,
.mdk-drawer-layout .container-sm,
.mdk-drawer-layout .container-xl {
    max-width: 1200px !important;
}

[dir="ltr"] .container,
[dir="ltr"] .container-fluid,
[dir="ltr"] .container-lg,
[dir="ltr"] .container-md,
[dir="ltr"] .container-sm,
[dir="ltr"] .container-xl,
[dir="rtl"] .container,
[dir="rtl"] .container-fluid,
[dir="rtl"] .container-lg,
[dir="rtl"] .container-md,
[dir="rtl"] .container-sm,
[dir="rtl"] .container-xl {
    /* padding-right: 12px;
    padding-left: 12px;
    margin-right: 10%;
    margin-left: 10%; */
}

.color-copy {
    color: var(--copy) !important;
}

.color-copy-light {
    color: var(--copy-light)!important;
}

[dir] .table td,
[dir] .table th {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border)!important;
}

[dir] .table thead th {
    border-bottom: 2px solid var(--border)!important;
}

[dir] .icon-holder--dark {
    background: var(--foreground) !important;
    border: 1px solid var(--copy)!important;
}

.above_title_box {
    display: flex;
    justify-content: space-between;
}

.separation_box {
    display: flex
}

.new {
    height: 30px;
    width: 60px;
    z-index: 100;
    top: 3%;
    left: 75%;
    position: absolute;
    background-color: var(--error);
    color: var(--primary-content);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 500;
    text-align: center;
    border-radius: 0.25rem;
    padding: 5px 1px;
}

.free {
    height: 30px;
    z-index: 100;
    top: 3%;
    position: absolute;
    background-color: var(--primary);
    color: var(--primary-content);
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-weight: 500;
    text-align: center;
    border-radius: 0.25rem;
    padding: 1% 2%;
}


.card-text {
    height: 90px !important;
}

.left-column-box {
    align-items: baseline;
    display: flex;
}

.right-column-box {
    align-items: baseline;
    display: flex;
    right: 0;
}

.bottom-row {
    position: absolute;
    bottom: 1%;
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 90%;
}

.cart {
    color: var(--copy);
    width: 20px;
    stroke-width: 8%;
}

.cool-button {
    height: 50px;
    background: transparent;
    color: var(--primary-content)!important;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    margin-left: 5%!important;
    margin-right: 5%!important;
    margin-top: 10%!important;
    font-size: large;
    border: none;
}

.cool-button-border {
    border: 1px solid;
    border-radius: 0.25rem!important;
    background: transparent;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    color: var(--primary-content)!important;
    text-align: center;
}

h1,
p {
    color: var(--primary-content)!important;
}

#agree-to-terms {
    text-align: left!important;
    color: var(--primary-content)
}

#agree-to-terms a {
    text-align: left!important;
    color: var(--primary-content);
}

.font-24pt {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    font-size: 24pt !important;
}

[dir] body {
    background-color: var(--foreground)!important;
}

[dir] .navbar-submenu,
[dir] .navbar-submenu span {
    background-color: var(--foreground)!important;
    color: var(--copy)!important;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
}

.course-bought-box {
    width: 75px;
    height: 25px;
    border-radius: 0.25rem;
    text-align: center;
    background-color: var(--primary);
    color: var(--primary-content);
}

.myfeather {
    color: black;
    width: 30px;
}

.myfeather-edit-course {
    color: var(--copy);
    box-shadow: inset;
}

.edit_course {
    top: -50%;
    left: 85%;
    position: absolute;
    z-index: 209;
}

.thumbmail-container {
    object-fit: contain;
    height: 70%;
}

.thumbmail-image {
    object-fit: contain;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.thumbmail-image:hover {
    opacity: 70%;
    cursor: pointer
}

.trailer-container {
    object-fit: contain;
    height: 70%;
}

.trailer-video {
    object-fit: contain;
    height: 100%;
    width: 100%;
    background-color: transparent;
}

.bg-primary {
    background-color: var(--primary)!important;
}


/* Hide scrollbar for Chrome, Safari, Edge */

::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for Firefox */

html {
    scrollbar-width: none;
}

body {
    -ms-overflow-style: none;
}

.tooltip {
    display: none !important;
}

.category {
    display: flex;
    align-items: center;
}

.category .feather_icon {
    color: var(--copy)!important;
}