@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200;300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Generic */
body{
    font-family: 'Heebo', sans-serif;
    min-height: 100vh;
    background-color: #f7f7f7;
}
p, h1, h2, h3, h4, h5, h6{
    color: inherit;
    color: #303030;
}
a{
    text-decoration: none;
    color: #f39c12;
    transition-duration: 0.2s;
}
a:hover{
    color: #e67e22;
    transition-duration: 0.2s;
}
hr{
    color: #ccc;
}
img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.border, .border-bottom{
    border-color: #ededed !important;
}
.video-player, .plyr--video{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.cursor-grab{
    cursor: grab;
}
btn:focus, a:focus
{
outline: none;
}
.navbar-toggler:focus
{
outline: none !important;
box-shadow: none;
}


/* Colors */
.red{
    background-color: #ffacac;
    color: #841212;
}
.green{
    background-color: #d3ffd1;
    color: #12844f;
}
.blue{
    background-color: #d4f2ff;
    color: #005a96;
}
.gray{
    background-color: #dbdbdb;
    color: #818181;
}
.lighter{
    color: #777777;
}
.white-text{
    color: #fff !important;
}
.inherit-text{
    color: inherit !important;
}
.black-text{
    color: #333 !important;
}
.inherit-text{
    color: inherit !important;
}
.bg-main{
    background-color: #c6b6a1 !important;
}
.bg-light{
    background-color: #f7f7f7;
}
.bg-white{
background-color: #ffffff !important;
}
.bg-light-on-hover{
    transition-duration: 0.15s;
}
.bg-light-on-hover:hover{
    background-color: #f7f7f7;
}
.alternateListBackground > li:nth-child(even){
    background-color: #fbfbfb;
}
.alternatingBackground > .alternate:nth-child(odd){
    background-color: #fbfbfb;
}
.bg-main .container h1{
color: #ffffff;
}


/* Sizing */
.bold{
    font-weight: bold !important;
}
.fat{
    font-weight: 500 !important;
}
.thinner{
    font-weight: 400 !important;
}
.bigger{
    font-size: 2.4rem;
}
.smaller{
    font-size: 1.1rem !important;
}
.w-128px{
    width: 128px !important;
}
.w-100p{
    width: 100% !important;
}
.w-90p{
    width: 90% !important;
}
.w-80p{
    width: 80% !important;
}
.w-60p{
    width: 60% !important;
}
.w-40p{
    width: 40% !important;
}

/* Spacing */
.spacer-s{
    margin: 8px 0;
}
.spacer{
    margin: 16px 0;
}
.spacer-l{
    margin: 32px 0;
}

.btn-round {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    font-size: 1.5em;
    flex-shrink: 0;
}
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {

    background-color: #fff !important;
}
.btn-main{
    background-color: #a1c6b6;
    color: #ffffff;
}
.btn.red:hover, .btn.green:hover, .btn.blue:hover, .btn-main:hover{
    background-color: #7f9f91;
    color: #fff !important;
}
.borderless{
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
}
.shadow{
    box-shadow: 0 0 .5rem rgba(0,0,0,.15) !important;
}
.progress.progress-sm {
    height: 6px;
}
.table>:not(caption)>*>*{
    transition-duration: 0.3s;
    box-shadow: none !important;
}
table{
    overflow: hidden;
}
tr{
    transition-duration: 0.3s;
}
td{
    background-color: inherit !important;
}
tbody tr:hover{
    transform: scale(1.02);
    z-index: 9999;
}
.list-group-item.active{
    color: #ffffff;
    background-color: #c6b6a1;
    border: none;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    box-shadow: 0 0 4px #efefef;
}

/* Navbar */

.navbar{
/* height: 75px; */
    background-color: #c6b6a1 !important;
    margin-bottom: 16px;
    padding: 12px;
}
.navbar #logo{
    height: 60px;
    /* width: auto; */
}
.navbar img{
    margin: 0 2%;
}

.avatar{
    height: 42px;
    object-fit: cover;
}

.profilepicture {
    border-radius: 50px;
    height: 50px;
    width: 50px;
    margin-right: 10px;
}
.account {
    color: var(--primary);
    border: none;
    text-decoration: none;
    transition-duration: none !important;
    display: flex;
    align-items: center;
    /* margin-right: 32px; */
}
.nav-link{
    font-weight: 500;
    color: #ffffff;
}

/* Sidebar */
.sidebar{
    /*
    position: sticky;
    top: 32px;
    */
    display: flex;
    height: fit-content;
}

/* Course items */
.course-list-item{
    transition-duration: 0.3s;
    transition: all 0.2s;
}
.course-list-item:hover{
    transform: scale(1.05);
}
.course-list-item .card{
    border: none !important;
}

/* Cards */
.card-header{
    background-color: #ffffff;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Footer */
footer{
    margin-top: 16px;
    position: relative;
    margin-bottom: 0;
    background-color: #f7f7f7 !important;
}
footer p{
    margin: 0;
}


@media screen and (min-width: 992px) {
    .navbar{
        min-height: 75px;
        background-color: #c6b6a1 !important;
        margin-bottom: 4px;
        padding: 12px;
    }
}