/* Hide the legacy content div */
#content {
    display: none;
}

.mobile-only {
    display: none;
}

/***********************
 Page Header
***********************/
#industry-select {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    border: 1px solid #dedede75;
    color: #fff;
    font-size: 1.3rem;
    line-height: 16px !important;
    padding: 10px 50px 10px 15px !important;
}

#industry-select option {
    background-color: #343a40!important;
}


/***********************
 Top Nav
***********************/
#courses-nav {
    background: #f7f7f7;
    border-bottom: 1px solid #eaeaea;
}

#courses-nav a.nav-link {
    color: #555 !important;
    font-size: 1em;
    margin: 0 3px 2px 0;
    xtransition: border 0.1s ease;
}

#courses-nav a.product-type-filter.active,
#courses-nav a.product-type-filter:hover {
    background: transparent !important;
    border-bottom: 2px solid #007bff;
    border-radius: 0 !important;
    margin-bottom: 0;
}

#clear-filters i {
    font-size: 12px;
}

#toggle-filters {
    margin-bottom: 1px;
}

.toggle-view {
    cursor: pointer;
}

/***********************
 Aside
***********************/
#courses-sidebar {
    background: #fff;
    /*border-right: 1px solid #eaeaea;*/
    min-width: 22rem;
    max-width: 22rem;
    transition: all 0.3s ease;
}

#courses-sidebar.close-aside {
    margin-left: -22rem;
}

/* Add some padding to the bottom so it will scroll above the fixed Done button */
#courses-sidebar-filters {
    padding-bottom: 200px;
}

#courses-sidebar-filters .nav a,
#courses-sidebar-filters .nav a:hover,
#courses-sidebar-filters .nav a:visited {
    color: #444;
    text-decoration: none;
}

/* Stretch the link across to the arrow so it toggles the collapse instead of checking the box */
#courses-sidebar-filters .checkbox-link {
    display: inline-block;
    width: 92%;
}

#courses-sidebar-filters .nav-item {
    border-bottom: 1px solid #dadada;
    font-size: 18px;
    font-weight: 600;
    margin: 0 2%;
    width: 96%;
}

#courses-sidebar-filters .nav-link:hover {
    background: #ddd;
}

#courses-sidebar-filters .nav-arrow {
    float: right;
    font-size: 0.7rem;
    margin: 6px 8px 0 0;
    transition: transform 150ms, color 150ms, -webkit-transform 150ms;
}

#courses-sidebar-filters .open .nav-arrow {
    transform: rotate(-90deg);
}

/* This extra custom class is just because using the .collapse class directly causes a flicker */
#courses-sidebar-filters .collapse-link {
    background: #ffffff;
    font-size: 1rem;
    font-weight: 400;
}

#courses-sidebar-filters .collapse-list {
    font-size: 1rem;
    font-weight: 400;
}

#courses-sidebar-filters .collapse-list ul {
    list-style: none;
}

#clear-search {
    bottom: 28px;
    cursor: pointer;
    left: 280px;
    position: relative;
}

/***********************
 Main
***********************/
#courses-main {
    padding: 20px;
    transition: all 0.3s;
}

/***********************
 Custom Checkbox
***********************/
.checkbox-custom {
    cursor: pointer;
    width: 100%;
}

.checkbox-custom-input {
    opacity: 0;
    position: absolute;
}

.checkbox-custom-control {
    background-color: inherit;
    border: 2px solid #666;
    color: #014da9;
    display: inline-block;
    height: 20px;
    position: relative;
    transform: scale(0.75);
    vertical-align: middle;
    width: 20px;
}

.checkbox-custom-input:checked+.checkbox-custom-control {
    border-color: #014da9;
}

.checkbox-custom-input:checked+.checkbox-custom-control:after {
    content: "";
    display: block;
    height: 10px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 10px;
}

.checkbox-custom-input:checked+.checkbox-custom-control:after {
    background-color: #014da9;
}

.partial:after {
    height: 6px !important;
    left: 5px !important;
    top: 5px !important;
    width: 6px !important;
    transition: all 150ms, color 150ms, -webkit-transform 150ms;
}


/***********************
 Multi Select
***********************/
.select-wrapper {
    margin: auto;
    max-width: 600px;
    width: calc(100% - 40px);
}

.multi-select__select {
    align-items: center;
    /*background: #f9f9f8;*/
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);*/
    box-sizing: border-box;
    /*color: #363b3e;*/
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    justify-content: left;
    /*min-height: 44px;*/
    min-height: calc(1.5em + .75rem + 2px); /* Match the bootstrap input sizes */
    padding: 5px 10px;
    position: relative;
    transition: 0.2s;
    width: 100%;
}

.multi-select__options {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    color: #363b3e;
    display: none;
    left: 0;
    max-height: 221px;
    overflow-y: scroll;
    position: absolute;
    /*top: 50px;*/
    top: -1px;
    width: 100%;
    z-index: 5;
}

.multi-select__select--opened .multi-select__options {
    display: block;
}

.multi-select__option {
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    box-sizing: border-box;
    /*height: 44px;*/
    line-height: 25px;
    padding: 10px;
}

.multi-select__current--option {
    background: #fafafa;
}

.multi-select__option--disabled {
    color: #e4e4e4;
}

.multi-select__option--selected {
    color: #e4e4e4;
    cursor: initial;
    pointer-events: none;
}

.multi-select__option--hidden {
    display: none;
}

.multi-select__selected-label {
    /*align-items: 'center';*/
    background: #5e6264;
    border-radius: 4px;
    color: #fff;
    cursor: initial;
    /*display: inline-block;*/
    display: inline-flex;
    /*justify-content: 'center';*/
    margin: 5px 10px 5px 0;
    padding: 3px 7px;
}

.multi-select__selected-label:last-of-type {
    margin-right: 0;
}

.multi-select__selected-label i {
    cursor: pointer;
    display: inline-block;
    margin-left: 7px;
    margin-top: 3px;
}

.multi-select__selected-label img {
    cursor: pointer;
    display: inline-block;
    height: 18px;
    margin-left: 7px;
    width: 14px;
}

.multi-select__selected-label i:hover {
    color: #e4e4e4;
}

.multi-select__autocomplete {
    background: #f9f9f8;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-right: none;
    border-top: none;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    padding: 10px;
    width: 100%;
}

.multi-select__placeholder--hidden {
    display: none;
}

/************************************************
 Mobile - Below 992px
************************************************/
@media screen and (max-width: 992px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    /* On mobile, the sidebar starts out hidden (negative margin) */
    #courses-sidebar {
        height: 100%;
        min-width: 22rem;
        margin-left: -22rem; /* Desktop is the opposite */
        max-width: 22rem;
        overflow: scroll;
        position: fixed !important;
        top: 71px;
        z-index: 100;
    }

    .promo #courses-sidebar {
        top: 135px;
    }

    .notice #courses-sidebar {
        top: 115px;
    }

    #courses-sidebar .nav-item .product-type-filter {
        font-size: 0.8rem;
        font-weight: 400;
        padding: 0.25rem 0.40rem;
    }

    /* Scrollbar */
    #courses-wrapper ::-webkit-scrollbar {
        width: 5px;
    }

    #courses-wrapper ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #courses-wrapper ::-webkit-scrollbar-thumb {
        background: #ccc;
    }

    #courses-wrapper ::-webkit-scrollbar-thumb:hover {
        background: #777;
    }

    #courses-sidebar.close-aside {
        margin-left: 0; /* Desktop is the opposite */
    }

    #courses-sidebar .checkbox-link {
        width: 90%;
    }

    #done {
        background: #fff;
        bottom: 0;
        min-width: 22rem;
        max-width: 22rem;
        padding: 1rem;
        position: fixed;
        z-index: 2;
    }

    #overlay {
        background: #00000054;
        height: 1000%;
        position: absolute;
        top: 56px;
        width: 100%;
        z-index: 99;
    }
}


/* Tweak the legacy product cards */
#courses-main .cards.feature-image .card {
    margin: 0 0.7%;
    border: none;
}

.cards.feature-image .card {
    max-width: 18% !important;
    min-height: 500px !important;
    min-width: 210px !important;
    width: 18% !important;
}

@media screen and (max-width: 750px) {
    /* Override the cards from the old css for /training */
    .cards.feature-image .card {
        /*min-height: 0 !important;*/
    }

    .cards.feature-image .card .top {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .cards.feature-image .card .bottom {
        width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
    }
}

@media screen and (max-width: 1565px) {
    .cards.feature-image .card {
        max-width: 30% !important;
        min-height: 450px !important;
        width: 30% !important;
    }
}

@media screen and (max-width: 1100px) {
    .cards.feature-image .card {
        max-width: 48% !important;
        min-height: 470px !important;
        width: 48% !important;
    }
}

@media screen and (max-width: 520px) {
    .cards.feature-image .card {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/***********************
    Wishlists
***********************/
.wishlist-icon {
    color: white;
    font-size: 25px;
    left: 5px;
    position: absolute;
    top: 5px;
    z-index: 1000;
}

.wishlist-popover .list-group-item {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.wishlist-popover .popover-body {
    padding: 0;
}

.wishlist-popover .popover-header {
    display: none;
}

.wishlist-popover .popover-item {
    cursor: pointer;
}