/* a, a:visited, a:active, a:link {
    color: #333333;
    text-decoration-line: underline;
}

a:hover {
    color: rgb(90, 90, 90)
} */


/* Desktop */
@media screen and (min-width: 575.98px){
    .mobile-only { display: none !important }
    
}

/* mobile */
@media screen and (max-width: 575.98px){
    .desktop-only { display: none !important }
    .wrapper { margin-left: 0px !important }
    .content-container { margin-left: 1rem !important; margin-right: 1rem !important }
    .breadcrumb-print {display: none !important}

}


/* flexbox */

.flex-container{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: 0;
    margin: 0;
    list-style: none;
}


/* Printing */
#print-only {display:none}
@media print {
    html {color: black !important}
    #print-only {display:block}
    .print-hide {display:none}
    .admin-header {display:none}
    .admin-content-wrapper{display:none}
    .wrapper {margin-left: 0px !important; padding: 1rem;}
    .content-container{margin:0px !important}
    .link-box {margin: 0px !important}
    .breadcrumb1 {margin:0px !important}
    .hero-text{
        margin:0px !important;
        font-size:2rem !important;
        text-align:left !important;
        font-weight:bolder !important;
        color:rgba(80,80,80,1)!important;}
}

/* App layout for app.blade.php */

.wrapper {
    margin-left: 330px;
    margin-right: 0px;
    padding-top: 70px;
    z-index: 1;
}

#content {
    position: relative;
    margin-bottom:  10px;
    border: 0;
    color:rgb(90, 90, 90)
}

.content-container{
    margin-left: 4rem;
    margin-right: 3rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.content-container h5 {font-weight: bold}

/* First used on training/hub/placements/1 */
.notice-box{
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0rem;
    border-radius: 1rem;
    color: white;
    font-weight: 500;
    font-size: 1.1rem;
    box-shadow: 4px 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.notice-box i {
    padding: 7px;
    margin-top: -10rem;
    border-radius: 50px;
    color: white;
}

.notice-info, .notice-info i{
    background-color: #228be6;
}

.notice-danger, .notice-danger i {
    background-color: #ff6b6b;
}

 /* For messages to appear in the header */
.flash-message {
    margin-top: 2rem;
    animation: flash-message 1s forwards;
}

@keyframes flash-message {
    0%      {opacity: 0;}
    100%    {opacity: 1; display: none;}
}

/* Pagination */

.page-item.active .page-link {
    z-index: 1;
    color: rgb(68,68,68);
    background-color: #e9ecef;
    border-color: #dfe0e0;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: rgb(68, 68, 68);
    background-color: #fff;
    border: 1px solid #dee2e6;
}





/* sidebar specific */

.sidebar {
    position: fixed;
    width: 350px;
    height: 100vh;
    padding-top: 15px;
    border: 0px solid #333;
    -webkit-box-shadow: 5px 0px 10px -4px #888 ;
    box-shadow: 5px 0px 10px -4px #888;
    z-index: 20;
    background-color: white;
}

.sidebar-logo-text {
    font-weight: bolder;
    font-size: 2.6em;
    color:#333333;
    margin-top: 49px;
    margin-left: -45px;
}

.sidebar-logo { max-height: 100px; }
.sidebar a, .sidebar a:visited, .sidebar a:link { color:#333333; text-decoration: none }
.sidebar a:hover { color: #666666; text-decoration: none}
.sidebar-wrapper { min-height: 100%; display: grid; grid-template-rows: 1fr auto }
.sidebar ul { list-style: none }
.sidebar li { margin-bottom: 15px; padding-bottom: 10px; font-size: 1.3em }
.sidebar-icon { height: 32px; margin-top: .05rem; margin-right: 10px }
.sidebar-hr { margin-top: -12px; border-top: 1px solid rgba(0,0,0,.05) }

.sidebar-footer {
    grid-row-start: 2;
    grid-row-end: 3;
    padding: 20px;
    margin-right: 10px;
}

/* sidebar end */

.breadcrumb1 { margin-left:2px; border-radius:.25rem; color: #333333 }
.breadcrumb1 a, .breadcrumb1 a:visited, .breadcrumb1 a:link { color:#888; text-decoration: none }
.breadcrumb1 a:hover { color: #333333; text-decoration: none }
.breadcrumb-print { text-align:right; margin-right: 0px }

/* Admin Section */

.admin-header {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color:#333333;
    background: white;
    margin-top: 0px;
    padding-bottom: 1.0rem;
    padding-top: 1.0rem;
    border-top: 4px solid #cc2f49;
    box-shadow: 0px 2px 4px 0 hsla(0, 0%, 0%, 0.2);
    z-index: 10;
}

.admin-header a, .admin-header a:visited, .admin-header a:link { color: rgb(90, 90, 90); font-weight: bold; text-decoration: none }
.admin-header a:hover { color: rgb(60, 60, 60); font-weight: bold; text-decoration: none }
.admin-header h4 { font-size: 1.5em; color:#333333 }
.admin-header h5 { display: inline }

 /* Users section */

#admin-table a, #admin-table a:visited, #admin-table a:link { color:rgb(68, 68, 68) }

/* gradebook */

.admin-content-wrapper{
    border-top: 4px solid #cc2f49;
    background-color: white;
    margin-bottom: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.gradebook-search { border: 0 }
.gradebook-result { background-color: white; box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.2) }
.gradebook-result-admin{
    border-top: 4px solid #cc2f49;
    background-color: white;
    box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.2);
    color: #333;
}

/* Courses */

.fade-in { animation: fade-in 1s forwards }

@keyframes fade-in {
    0%      {opacity: 0;}
    100%    {opacity: 1;}
}


/* Training */

.card { box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.2) }
.card-grade {
    margin-top: -50px;
    background-color: #cc2f49;
    color: white;
    margin-left:0px;
    margin-right:0px;   
    padding: 15px;
}

.card-trophy {
    height: 76px;
    width: 76px;
    margin-top: -80px;
    margin-bottom: 0px;
    position: absolute;
    padding: 10px;
    border-bottom: 3px rgb(155, 124, 25) solid;
    border-right: 1px  rgb(187, 150, 30) solid;
    border-left: 1px  rgb(187, 150, 30) solid;
    border-top: 1px rgb(187, 150, 30) solid;
    border-radius: 50%;
    background-color: #FFE079;
}

/* Quizzes */
.quiz-card { margin-bottom: 2rem; border: none }
.quiz-card > .card-body > .form-check { margin-bottom: .5rem }
.quiz-card-header { background-color: #cc2f49; color: white }
.quiz-highlight { border-radius: .25em }
.quiz-img { border-radius: .25em; margin-bottom: 1rem; max-height: 400px; box-shadow: 0px 4px 4px 0 hsla(0, 0%, 0%, 0.25);}

/* Content Pages */

.content-ul { list-style-type: none }
.content-ul strong { text-shadow: 2px 1px rgba(0,0,0,.5) }
.content-ul li { margin-bottom: 0px; margin-left: -1rem; padding-right: 1rem }
.content-ul li a {color: white; text-shadow: 2px 1px rgba(0,0,0,.5)}
.content-hero-img { border-radius: 5px; margin-top: 1rem; margin-bottom: 2rem; box-shadow: 0px 4px 4px 0 hsla(0, 0%, 0%, 0.25);}


/* Table of content boxes for main content pages */
.toc-container{
    border-radius: 5px;
    padding-top: 3rem;
    padding-bottom: 2rem;
    box-shadow: 0px 4px 4px 0 hsla(0, 0%, 0%, 0.25);
    margin-bottom: 2rem;
    color: white;
}
    
.toc-col{
    background: rgba(204, 47, 73, 0.8);
    border-radius: 5px;
    padding-top: 2rem;
    padding-bottom:1rem;
    box-shadow: 0px 4px 4px 0 hsla(0, 0%, 0%, 0.25);
}

.toc-col hr { border-color: white; margin-right: 2rem; box-shadow: 2px 1px rgba(0,0,0,.5) }

@media screen and (max-width: 825px){
    .toc-container{display: none;}
}

@media screen and (min-width: 825px){
    .toc-mobile {display:none}
}

.toc-mobile {margin-bottom: 2rem; padding-top: 1rem; padding-bottom: 2rem; background: rgba(204, 47, 73, 1); box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.2) }
.toc-mobile hr { border-color: white; margin-right: 2rem; margin-left: -1rem; box-shadow: 2px 1px rgba(0,0,0,.5) }
.toc-mobile h3 { color:white; margin-left: -1rem; text-shadow: 2px 1px rgba(0,0,0,.5) }

/* end of table of content boxes */


.file-box{
    margin-bottom:2rem;
    background-color: #e9ecef;
    padding: .75rem;
    border-radius:.5rem;
    color:rgb(90, 90, 90);
}
.file-box > ul > li {margin-bottom: 5px;}
.file-box > .row > .col-md { padding-top: .25rem; padding-bottom: .25rem}

.link-box {
    /* for course content links at the course landing pages */
    border-radius: .5rem;
    background: rgb(255, 255, 255);
    padding: 1rem;
    box-shadow: 0px 4px 4px 0 hsla(0, 0%, 0%, 0.25);
    margin-top: 1rem;
    margin-bottom: 2rem;

}

.doc-icon { height: 26px; margin-top:-3px; margin-right: .5rem }

.anchor-tag { position:absolute; top:-100px }
.anchor-tag-container { position: relative }

.hero-img-box{ margin-bottom: -4rem }
    @media screen and (max-width: 575.98px){
        .hero-img-box{ margin-bottom: -2rem !important;}
    }

.hero-text{ text-align:left; font-weight:bolder; color:rgba(80,80,80,1); }
    @media screen and (max-width: 575.98px){
        .hero-text{ text-align: left; font-size: 1.75rem;}
    }

.training-photo-thumb-box {
    background: white; 
    border: 5px solid white; 
    border-radius: 5px; 
    box-shadow: 0px 3px 3px 0 hsla(0, 0%, 0%, 0.5)}

.figure-right { float:right; max-width: 50%; margin-left: 1rem }
.figure-left { float:left; max-width: 50%; margin-Right: 1rem }
.figure-center { text-align: center }
.figure-left img, .figure-right img, .figure-center img { box-shadow: 0px 4px 6px 0 hsla(0, 0%, 0%, 0.5) }

.course-progress { margin-top: 1rem; margin-bottom: 1rem }

.course-button {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
}

.course-button-link:link, .course-button-link:hover, .course-button-link:visited, .course-button-link:active {
    text-decoration: none;
}

.notfoundbox {
    color:rgb(90, 90, 90); 
}

.notfoundbox a {
    text-decoration: underline;
    color: rgb(90,90,90);
}