//
// The MIT License (MIT)
//
// Copyright (c) 2013 Thomas Park
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//
$bootstrap-sass-asset-helper: false !default;
// Flatly 3.3.7
// Variables
// --------------------------------------------------

/* stylelint-disable color-hex-length */


/**
 * Default preset file.
 *
 * Use this space to customise variables, create mixins and override SCSS.
 */

div#learningcontent {
    position: relative;
    background-color: transparent;
}
//Add space on top for Fordson block slider button
.pt-3 {
    padding-top: 3rem!important;
}

#region-main {
    border: 1px solid $border-color;
    padding: 1rem;
    background-color: $card-bg;
}

.pagelayout-mydashboard #region-main {
    border: 0 !important;
    background-color: $card-bg;
    padding: 1rem;
    margin-top: 0;
}

// Remove extra padding at top of page
/*#page-header .pb-3 {
    padding-bottom: 1rem!important;
}
#page-header .card-body {
    padding: 1rem 1rem 0 1rem;
}
.course-content li#section-0 .content {
    margin-top: 0;
}
.editing .course-content li#section-0 .content {
    margin-top: 2rem; 
}
*/

@if $perceptionpreset == 1 {
	.headerbkg {
	    height: $headerimagepadding;
	    width: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 0;
	}
	.withimage , .default, .customimage {
	    -webkit-mask-image: linear-gradient(to top,transparent 0%,rgba(255, 255, 255, 0.9) 70%);
    	mask-image: linear-gradient(to top,transparent 0%,rgba(255, 255, 255, 0.9) 70%);
	}
	@if $showheadergradient == 1 {
		.headerbkg {
		    height: $headerimagepadding;
		    width: 100%;
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    z-index: 0;
		}
		// No image with this layout.  Instead use a gradient.
		.withimage , .default, .customimage {
		    background: linear-gradient(to bottom, darken($body-bg, 25%) 0%, $body-bg 100%)!important;
		}
	}

	div#blockslider {
	    //top: 7px;
	}

	div#page.container-fluid {
	    padding: 0!important;
	}

	div#learningcontent {
	    position: relative;
	    margin: $gutterwidth;
	    box-shadow: 0px 0px 25px -5px rgba($black,.6);
	}

	header#page-header {
		padding: 1rem 0 0 0;
	    margin-bottom: 0;
	    border: 0;
	    border-bottom: 1px solid $gray-500;
	    background-color: $headerbackgroundcolor;
	    box-shadow: inset 0px -8px 10px -5px rgba($primary, 0.3);
	}

	[data-region="drawer-toggle"] .btn {
		background-color: $perception-base;
	}

	.page-context-header .page-header-headings h1 {
    	//color: $card-bg;
	}

	header#page-header .card {
		background-color: transparent;
		//background: linear-gradient(to bottom, rgba($black, 0.9) 5%, rgba($black,0.0) 100%)!important;
	}

	header#page-header img.userpicture {
    	border: 1px solid $gray-300;
	}
	@media screen and (min-width: 576px) {
	    #region-main-box {
	        padding: 0 1rem 1rem 1rem;
	    }
	}

	#region-main {
	    border: 0;
	}

	#page-wrapper #page #page-content {
	    border-color: $card-bg $gray-400 $gray-400 $gray-400;
	    background-color: $card-bg;

	}

	#page-content.pb-3 {
    	padding-bottom: 0 !important;
	}

	#page-login-index #page-wrapper #page #page-content {
	    border: 0;
	    border-radius: 0;
	    background-color: transparent;
	}

	.row {
        margin-right: 0; 
        margin-left: 0;
    }

    .col-12 {
        padding-right: 0;
        padding-left: 0;
    }

    #page-wrapper {
        padding-bottom: 0;
    }

	#page-header .pb-3 {
		padding: 0!important;
	}
	
	.progress {
		margin-bottom: 1rem;
	}

	.m-b-1.activity-navigation {
    	margin-bottom: 0rem!important;
	}

	@media screen and (max-width: 576px) {
	    div#learningcontent {
		    margin: 0;
		}
	}

//Special styling for select dashboard blocks
	/*#page-my-index section#region-main section.block_myoverview {
	    border: 1px solid $gray-300 !important;
	    background-color: $gray-100;
	}*/
    .block_myoverview h5, .block_timeline h5 {
        border-bottom: 3px solid;
    }

	@media screen and (min-width: 576px) {
		.course-content .section-summary .summarytext {
		    margin: 20px 5px 2px 5px;
		}

		.course-content ul.topics li.section .content, .course-content ul.weeks li.section .content {
		    margin: 1rem;
		    padding: 1.25rem;
		}
		.course-content ul.topics li.section, .course-content ul.weeks li.section {
		    margin-top: 1rem;
		    margin-bottom: 3rem;
		    padding-bottom: 0;
		}
	}

@media screen and (min-width: 576px) {
            /* Breadcrumbs */
        ul.breadcrumb {
            display: inline-block;
            overflow: hidden;
            margin:0px;
            padding:0px;
            background: none;
        }
        ul.breadcrumb a {
            color: $breadcrumb-text-color;
        }
        ul.breadcrumb li {
            text-decoration: none;
            outline: none;
            display: block;
            float: left;
            font-size: 14px;
            line-height: 36px;
            color: $breadcrumb-text-color;
            padding: 0 15px 0 30px;
            background-color: $breadcrumb-bg;
            position: relative;
        }
        ul.breadcrumb li:first-child {
            padding-left: 25px;
            border-radius: 5px 0 0 5px;
        }
        ul.breadcrumb li:first-child:before {
            left: 14px;
        }
        ul.breadcrumb li:last-child {
            border-radius: 0 5px 5px 0;
            padding-right: 20px;
        }
        /*hover/active styles*/
        ul.breadcrumb li.active, .breadcrumb li:hover {
            background-color: $breadcrumb-bg-hover;
        }
        ul.breadcrumb li.active:after, .breadcrumb li:hover:after {
            background-color: $breadcrumb-bg-hover;
        }
        ul.breadcrumb li:after {
            content: '';
            position: absolute;
            top: 0; 
            right: -18px;
            width: 36px; 
            height: 36px;
            transform: scale(0.707) rotate(45deg);
            z-index: 1;
            background-color: $breadcrumb-bg;
            box-shadow:
            2px -2px 0 2px $breadcrumbdash, 
            3px -3px 0 2px $breadcrumbdash;
            border-radius: 0 5px 0 50px;
        }
        li.breadcrumb-item.dimmed_text_fhs {
            background-color: $breadcrumbdimmed;
        }
        li.breadcrumb-item.dimmed_text_fhs:hover {
            background-color: $breadcrumb-bg-hover;
        }
        li.breadcrumb-item.dimmed_text_fhs:after {
            content: '';
            position: absolute;
            top: 0; 
            right: -18px;
            width: 36px; 
            height: 36px;
            transform: scale(0.707) rotate(45deg);
            z-index: 1;
            background-color: $breadcrumbdimmed;
            box-shadow:
            2px -2px 0 2px $breadcrumbdash, 
            3px -3px 0 2px $breadcrumbdash;
            border-radius: 0 5px 0 50px;
        }
        li.breadcrumb-item.dimmed_text_fhs:hover:after {
            background-color: $breadcrumb-bg-hover;
        }
        ul.breadcrumb li:last-child:after {
            content: none;
        }
        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding: 0;
            content: "";
        }
        .dir-rtl ul.breadcrumb li:after{
            transform: scale(.707) rotate(315deg);
            box-shadow: -3px -3px 0 1px $card-bg, -2px -3px 0 2px $card-bg;
        }
        .breadcrumb-item+.breadcrumb-item::before {
		    padding: 0 .75rem;
		}
    }

	@media screen and (max-width: 576px) {
	    .breadcrumb {
	        background-color:transparent;
	    }
	    li.breadcrumb-item a, li.breadcrumb-item {
	    	color: $primary;
	    }
	}
}