/* General */
.color-primary {
    background-color: #490F75;
    border-color: #490F75;
    color: #fff;
}

.color-primary-alt {
    background-color:#1b0048;
    border-color: #1b0048;
}

.bg-secondary {
    background-color: #6c757d!important;
}
.btn-primary {
    background-color: #490F75 !important;
    border-color: #490F75 !important;
}

.bg-primary {
    background-color: #490F75 !important;
    border-color: #490F75 !important;

}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active    {
    background-color: #7B45A4 !important;
    border-color: #7B45A4 !important;
}

.btn-secondary {
    color: #fff!important;
    background-color: #6c757d!important;
    border-color: #6c757d!important;
}

.btn-menu{
    background-color: #7B45A4 !important;
    border-color: #7B45A4 !important;
}

#CourseDelete {
    margin: 0;
}



/* Side Bar  */

.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    margin-left: -300px;
    width: 275px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 999;
    overflow: scroll;
    overflow-x: hidden;
    transition: all 0.3s;
    z-index: 9999;
    background-color: #fff;
}

/* adjust sidebar side for desktop */
@media (min-width: 992px){
    #sidebar {
        margin-left: 0px;
        width: 25%px;
    }
}

#sidebar.active {
    margin-left: 0px;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* removes button for desktop */
@media (min-width: 992px){
    #sidebarOpen {
        display: none;
    }
    #navbar {
        height: 50px;
    }
}

#overlay {
    display: none;
    position: fixed;
    /* full screen */
    width: 100%;
    height: 100%;
    /* transparent black */
    background: rgba(0, 0, 0, 0.3);
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 1;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
/* removes overlay on desktop*/
@media (min-width: 992px){
    #overlay {
        display: none;
    } 
} 

#nav-menu {
    position: relative;
    top: 75px;
    left: 20px;
}

.menu-btn {
    right: 30px;
    text-align: left;
    font-size: 17px;
}

.menu-btn:hover {
    background-color: #F5F5F5;
}

.menu-btn:focus-within {
    background-color: #490F75;
    color: #fff;
}

.parent-btn {
    width:275px;
}

.child-btn {
    width: 250px;
} 

/* Hero Image */
@media (min-width: 992px) {
    #hero {
        position: relative;
        left: 275px;
        width: calc(100% - 275px);
        z-index:9997
    }
}

.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */


  /* Set a specific height */
  height: 30%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}


/* Nav bar */
#navbar {
    overflow: hidden;
    z-index: 9997;
}

@media (min-width: 992px) {
    #navbar {
        height: 60px;
        position:relative;
        left: 275px;
        width: calc(100% - 275px);
    }
}

#sidebarOpen {
    padding: 10px 16px;
}

#logout {
    padding: 10px 16px;
    position: relative;
    float: right;
    right:0px;
}

#top-title {
    position: relative;
    left: 64px;
    text-align: left;
    width: calc(100% - 108px)
}
@media (min-width: 768px) {
    #top-title {
        text-align: center;
    }
}

@media (min-width: 992px) {
    #top-title {
        font-size: 40px;
        padding-top: 5px;
    }
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
}




/* content Wrapper */
#content {
    width: 100%;
}

@media (min-width: 992px) {
    #content {
        position: relative;
        left: 275px;
        width: calc(100% - 275px);
    }
}



/* homepage*/
.homepage-item {
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 992px) {
    .homepage-item {
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px    }
}

img.thumbnail {
  border: 3px solid #490F75;
}


/* My Story (student accounts) */

/* My Plan (educational designs)*/
/* All courses */






/* The section affects the couselists. Rows with no ID will show up on mobile. Rows with the 'tablet id' will show up on tablets and desktops. Rows with the "desktop" id will only show up on desktops. */

.tablet {
    display: none;
}

.desktop {
    display:none;
}

@media (min-width: 576px) {
    .tablet {
        display: table-cell;
    }
}

@media(min-width:770px){
    .desktop{
        display: table-cell;
    }
}


/* card titles */


/* format the application page */
.cke_reset {
    width: 330px !important;
}

@media (min-width: 768px) {
    .cke_reset {
        width: 700px !important;
    }
}

@media (min-width: 992px) {
    .cke_reset {
        width: 835px !important;
    }
}