/*
 * This file is a template file, processed by /ThemeController/ThemeColorCSS.
 *
 * It has a less-like syntax but is not processed by Less.
 * You can use the variables:
 *      - #EE0E15
 *
 * You can use the functions:
 *      - #F99C9F
 *      - #5E0508
 *
 * Everything else should be valid CSS.
 *
 * BE SURE TO SET THE "BUILD ACTION" OF THIS FILE TO "CONTENT" OTHERWISE THE FILE WON'T GET UPLOADED.
 * DO NOT GENERATE A .CSS FILE FROM THIS .LESS FILE OR YOU WILL GET ERRORS IN ENVIRONMENTS USING CDNS.
 */

.am-top-header {
    background-color: #EE0E15;
}

.am-left-sidebar .sidebar-elements > li.active > a {
    border-left-color: #EE0E15;
}

.lwm-tile .lwm-tile-heading {
    background-color: #EE0E15;
}

.lwm-alert-help {
    background: #FDE4E5;
    border-color: #EE0E15;
    color: #EE0E15;
}

.nav-tabs.nav-justified > li > a {
    border-top-color: #F99C9F;
    border-right-color: #F99C9F;
    border-bottom-color: #F99C9F;
    background-color: #FCCCCE;
}

.nav-tabs.nav-justified > li.active > a, .nav-tabs.nav-justified > li.active > a:focus {
    color: #EE0E15;
    background-color: #ffffff;
    border-top-color: #F99C9F;
    border-right-color: #F99C9F;
}

.nav-tabs.nav-justified > li.active > a, .nav-tabs.nav-justified > li.active > a:focus {
    color: #EE0E15;
}

.nav-tabs > li a:hover {
    color: #EE0E15;
}


.lwm-heading {
    border-bottom-color: #EE0E15;
}

[data-snippet-component="Themes_ThemesView_ThemeSelector"] [data-snippet-control="theme-button"].active .thumbnail {
    border-color: #EE0E15;
}

.lwm-heading[data-lwm-heading-type="LearningTopic"] h1, .lwm-heading[data-lwm-heading-type="Content"] h1, .lwm-heading[data-lwm-heading-type="LearningTopicCourse"] h1, .lwm-heading[data-lwm-heading-type="Group"] h1, .lwm-heading[data-lwm-heading-type="GroupQuestion"] h1, .lwm-heading[data-lwm-heading-type="UserProfile"] h1 {
    color: #EE0E15;
}

.lwm-heading[data-lwm-heading-type="LearningTopic"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="Content"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="LearningTopicCourse"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="Group"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="GroupQuestion"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="UserProfile"] .lwm-row-contains-table {
    border-top-color: #EE0E15;
    border-bottom-color: #EE0E15;
}

.lwm-alert-help .glyphicon-move {
    background-color: #EE0E15;
}

a {
    color: #EE0E15;
}

a:hover, a:focus {
    color: #AB0A0F;
}

.btn-default {
    border-color: #F99C9F;
}

.btn-default:hover, .btn-default:focus {
    background-color: #FEEEEE !important;
    border-color: #F99C9F;
}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    border-color: #F66C70;
}

.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
    border-color: #F66C70;
}

.btn-primary {
    background-color: #EE0E15;
    border-color: #EE0E15;
}

.btn-primary:hover {
    background-color: #F2232A;
    border-color: #F2232A;
}

.btn-primary:focus {
    background-color: #EE0E15;
    border-color: #EE0E15;
}

.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-color: #DB0D13;
    border-color: #DB0D13;
}

.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: #DB0D13;
    border-color: #DB0D13;
}

.btn-link {
    color: #EE0E15;
}

.btn-link:hover, .btn-link:focus {
    color: #AB0A0F;
}

.lwm-heading-description {
    color: #EE0E15;
}

.lwm-course-group-heading {
    border-bottom-color: #F99C9F !important;
    background-color: #EE0E15;
}

.lwm-quiz-group-heading {
    border-bottom-color: #F99C9F !important;
    background-color: #EE0E15;
}

.lwm-panel-open-close {
    background-color: #EE0E15;
}

[data-snippet-component="HtmlBuilder"] [data-block-type="text"] [data-snippet-control="block-bar"], [data-snippet-component="HtmlBuilder"] [data-block-type="image"] [data-snippet-control="block-bar"], [data-snippet-component="HtmlBuilder"] [data-block-type="image-fixed-size"] [data-snippet-control="block-bar"], [data-snippet-component="HtmlBuilder"] [data-block-type="quiz-pass-or-fail"] [data-snippet-control="block-bar"], [data-snippet-component="HtmlBuilder"] [data-block-type="quiz-pass-requirements"] [data-snippet-control="block-bar"], [data-snippet-component="HtmlBuilder"] [data-block-type="quiz-results"] [data-snippet-control="block-bar"] {
    background-color: #EE0E15;
}

.modal-header {
    border-bottom-color: #EE0E15;
}

.lwm-heading[data-lwm-heading-type="LearningTopic"] h2, .lwm-heading[data-lwm-heading-type="Content"] h2, .lwm-heading[data-lwm-heading-type="LearningTopicCourse"] h2, .lwm-heading[data-lwm-heading-type="Group"] h2, .lwm-heading[data-lwm-heading-type="GroupQuestion"] h2, .lwm-heading[data-lwm-heading-type="UserProfile"] h2 {
    color: #EE0E15;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #E00D14;
}

/* NOTE we need to be specific in coloring .progress-bar otherwise we'll override progress-bar-success etc. and there isn't a css way to avoid it other than being specific. */
.lwm-rank-percentage.progress .progress-bar {
    background-color: #EE0E15;
}

.lwm-achievement-percentage.progress .progress-bar {
    background-color: #EE0E15;
}

.lwm-achievement-completed {
    background-color: #FDE4E5;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    border-color: #EE0E15;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #E00D14;
}

.lwm-language-selector.open .dropdown-menu li > ul > li > a:hover, .lwm-language-selector.open .dropdown-menu li > ul > li > a:focus {
    background-color: #EE0E15;
}

.lwm-billing-body .stripe-button-el {
    background-color: #EE0E15 !important;
}

.lwm-billing-body .stripe-button-el span {
    background-color: #EE0E15 !important;
}

.lwm-subscription-choices .btn-default {
    background-color: #EE0E15;
    border-color: #EE0E15;
}

.lwm-subscription-choices [data-snippet-control="subscription-item"].active {
    background-color: #FCCCCE !important;
    color: #EE0E15 !important;
}

.lwm-subscription-choices [data-snippet-control="subscription-item"].active .lwm-subscription-cost {
    color: #EE0E15 !important;
}

.lwm-subscription-choices .btn-default .lwm-subscription-cost {
    color: #EE0E15;
}

.lwm-subscription-choices .btn-default:hover {
    color: #EE0E15 !important;
}

.lwm-subscription-choices .btn-default .lwm-subscription-select {
    color: #EE0E15;
}

.lwm-subscription-choices .btn-default:hover {
    color: #EE0E15 !important;
}

.lwm-subscription-choices .btn-default:hover .lwm-subscription-name {
    color: #EE0E15;
}

.lwm-subscription-choices .btn-default:hover .lwm-subscription-cost {
    background-color: #EE0E15;
}

.lwm-subscription-choices .btn-default:hover .lwm-subscription-select {
    background-color: #EE0E15;
}

[data-lwm-tile-type="Group"] .lwm-group-content-time {
    color: #EE0E15;
}

.navbar-brand, .lwm-logo-topbar {
    background-image: url('/Theme/Logo/d312f752-ef09-49c1-a76a-4a5fbb1bfc78') !important;
}

.lwm-logo-sidebar, .am-logo {
    background-image: url('/Theme/Logo/d312f752-ef09-49c1-a76a-4a5fbb1bfc78') !important;
}

/* We will use either the default #3a4d55 color for headers/icons or white depending on which will go best with #EE0E15.
   See ThemeController for how we work this out.  Basicly we are trying to decide if we can use the gray for backgrounds that LWM likes in its default colours, or if we have to use
   a variation of the theme colour to keep things visible.
*/
.lwm-heading .lwm-heading-image-with-fallback {
    background-color: #3a4d55;
}

.lwm-heading[data-lwm-heading-type="LearningTopic"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="Content"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="LearningTopicCourse"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="Group"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="GroupQuestion"] .lwm-row-contains-table, .lwm-heading[data-lwm-heading-type="UserProfile"] .lwm-row-contains-table {
    background-color: #3a4d55;
}

.modal-header .modal-icon {
    background-color: #3a4d55;
}

.toolbar-button-group .dropdown-toggle {
    background-color: #FDE4E5 !important;
}

.dropdown-menu > li > a:hover {
    background-color: #EE0E15 !important;
}

.modal-body .nav-tabs li a {
    border-top-color: #F99C9F;
    border-right-color: #F99C9F;
    border-bottom-color: #F99C9F;
    background-color: #FCCCCE;
}

.modal-body .nav-tabs li.active a, .modal-body .nav-tabs li.active a:focus {
    color: #EE0E15;
    background-color: #ffffff;
    border-top-color: #F99C9F;
    border-right-color: #F99C9F;
}

[data-snippet-control="UploadFromUrlOnSelect"].active {
    border-color: #EE0E15;
}

.modal-body .tab-content {
    border-top-color: #F99C9F;
}

.dashboard-header {
    border-bottom-color: #EE0E15;
}

[data-snippet-component="Themes_ThemesView_ThemeSelector"] [data-snippet-control="theme-button"].sub-theme.active {
    background-color: #FCCCCE;
    border-color: #EE0E15;
}

[data-snippet-component="Themes_ThemesView_ThemeSelector"] [data-snippet-control="base-theme-button"].active .thumbnail {
    border-color: #EE0E15;
}

#menu-json-view-modal .sub-theme.active {
    background-color: #FCCCCE;
    border-color: #EE0E15;
}

.lwm-course-progress .progress {
    background-color: #F99C9F;
}