/* Set width on the form input elements since they're 100% wide by default */
html, body {
    height: 100%;
    margin: 0;
}

body {
    font-size: 16px;
}

#root {
    height: inherit;
    display: grid;
    width: 100%;
}

    #root > div {
        height: 100%;
    }

a {
    color: #02a9e1;
}

input,
select,
textarea {
    max-width: 280px;
}

.questionP{
    font-weight: bold;
}
.answerP{
    font-weight: normal;
}

.tooltip-inner {
    max-width: 400px;
    white-space: pre-wrap;
    text-align: left;
}

.GlossaryTerm {
    cursor: help;
    font-weight: bold;
}

.pageHeader {
    height: 87px;
    background-color: #f5f5f5;
    margin-bottom: 30px;
    padding-left: 30px;
    vertical-align: central;
}

    .pageHeader.row {
        margin-left: -22px;
    }

    .pageHeader h2 {
        margin-top: 0.83em;
        margin-bottom: 0.83em;
    }

.btn {
    border-radius: 0px;
}

.btn-primary {
    color: #FFFFFF !important;
    background-color: #EF6B00;
    border-color: #EF6B00;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        color: #FFFFFF !important;
        background-color: #EF6B00 !important;
        border-color: #EF6B00 !important;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
        background-color: #EF6B00;
        border-color: #EF6B00;
    }

    .btn-primary .badge {
        color: #EF6B00;
        background-color: #FFFFFF;
    }

.form-control {
    border-radius: 0px;
}

.fill-form input, .fill-form textarea, .fill-form select {
    max-width: unset;
}

span.error {
    color: red;
    font-weight: bold;
    display: block;
}

/*Margin stuff*/
.mlr-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.glossary-nav {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: block;
}

    .glossary-nav a {
        text-align: center;
        cursor: default;
        font-size: 25px;
        float: left;
        width: 3.8%;
        text-decoration: none;
        color: gray;
    }

        .glossary-nav a.active {
            cursor: pointer;
            color: #FF6B00;
        }



.glossary-term {
    display: block;
    margin-bottom: 15px;
}

    .glossary-term div.glossary-title {
        display: block;
        font-weight: bold;
        font-size: 18px;
    }

.breadcrumb li.active > a {
    color: #777;
    cursor: default;
}

    .breadcrumb li.active > a:hover, .breadcrumb li.active > a:focus {
        text-decoration: none;
        cursor: default;
    }

.glossaryItem {
    cursor: help;
}

textarea.questionInput, input.questionInput, select.questionInput {
    max-width: none;
}


.headerDisplay {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

    .headerDisplay.logo {
        padding-left: 50px;
        width: 80%;
    }

    .headerDisplay.user {
        padding-right: 50px;
        width: 20%;
        min-width: 255px;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .headerDisplay .CovenantHeader {
        border-left: 2px solid gray;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 50px;
        margin-left: 30px;
    }

.userDisplay {
    vertical-align: middle;
}

body {
    background-color: #f5f5f5;
}

.fullscreenHeader .headerDisplay img, .fullscreenHeader .headerDisplay h2 {
    display: inline;
    margin-right: 30px;
    vertical-align: middle;
    line-height: 0;
}

#main-full {
    display: flex;
    flex-direction: column;
    height: 100%;
}



    #main-full .container-fluid {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

.fullscreenHeader {
    display: flex;
    background-color: #FFFFFF;
    border-bottom: #9e9e9e 1px solid;
    color: #000;
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 0px;
    justify-content: space-between;
}

.headerDisplay a {
    color: #EF6B00;
}

    .headerDisplay a:hover, .headerDisplay a:focus {
        color: #c65900;
    }

.flex-exercise-area {
    width: 100%;
    display: flex;
    height: 100%;
}

.flex-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.exercise-header {
    min-height: 20%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 21px;
    padding-bottom: 15px;
}


.exercise-container {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.exercise-question {
    background-color: white;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    padding: 30px;
}

.exercise-questionLabel {
    height: 20%;
    font-size: 20px;
}

.exercise-formField {
    width: 100%;
    display: flex;
    justify-content: center;
}

.exercise-container .glyphicon {
    color: #9e9e9e;
    font-size: 100px;
}

    .exercise-container .glyphicon:hover {
        color: #FF6B00;
    }


.exercise-container a.disabled .glyphicon {
    color: #d8d8d8 !important;
}

    .exercise-container a.disabled .glyphicon:hover {
        color: #d8d8d8 !important;
    }

.exercise-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.exercise-saving {
    width: 100%;
    text-align: right;
}

.exercise-exit {
    padding-top: 10px;
    position: absolute;
    left: 97%;
    font-size: 22px;
}

    .exercise-exit a {
        color: #9e9e9e;
    }

        .exercise-exit a:hover {
            color: #FF6B00;
        }

.imageLogo {
    width: 175px;
}

.exercise-formField .form-control {
    height: 45px;
    font-size: 20px;
    padding-bottom: 4px;
}

.exercise-formField textarea.form-control {
    min-height: 100px;
}

.exercise-formField input[type=text].form-control {
    max-width: 75%;
}

.adminCourseList {
    width: 250px;
}

    .adminCourseList li {
        cursor: pointer;
    }

        .adminCourseList li:hover {
            background-color: gray;
        }

        .adminCourseList li.active {
            background-color: black;
            color: white;
        }

input[type="range"] {
    max-width: 100%;
}

.helpItem .glyphicon {
    font-size: 15px;
}

.helpItem {
    color: #9e9e9e;
    cursor: help;
}

    .helpItem:hover {
        color: #FF6B00;
        text-decoration: none;
    }

        .helpItem:hover span {
            color: #FF6B00
        }

.RoleTimeChart {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.bubbleList {
    display: block;
    max-width: 80%;
    text-align: center;
}

    .bubbleList .bubbleItem {
        color: white;
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 15px;
        padding: 12px;
        background-color: #EF6B00;
        border-radius: 30px;
    }

    .bubbleList .glyphicon {
        cursor: pointer;
        font-size: 10px;
        color: black;
    }

        .bubbleList .glyphicon:hover {
            font-size: 12px;
            color: white;
        }


.longList {
    display: block;
    max-width: 80%;
    text-align: center;
}


.longItem {
    padding-bottom: 15px;
    text-align: left;
}

.longList .longItem .bottomBorder {
    margin-top: 15px;
    border-bottom: 2px solid #EF6B00;
    width: 30%;
    left: 34%;
    position: relative;
}

.longList .longItem:nth-last-of-type(1) .bottomBorder {
    display: none;
}

.longList .longItem .glyphicon {
    font-size: 15px;
}

.longList input[type="text"].form-control {
    display: inline;
    margin-right: 15px;
    max-width: 600px;
}




.expenseRevenueTable {
    min-width: 80%;
}

.PESTDisplay {
    min-width: 80%;
}

.PESTTable {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

    .PESTTable .PESTHeader {
        padding: 8px;
        background-color: #EF6B00;
        color: white;
        font-weight: bolder;
    }

.RespObjTable th:last-child {
    width: 60%;
}

.RespObjTable input, .RespObjActTable input {
    max-width: 100% !important;
}

.RespObjActTable th:nth-child(2) {
    width: 25%;
}

.RespObjActTable th:nth-child(3) {
    width: 40%;
}

.RespObjObjective {
    margin-bottom: 5px;
}

.exercise-nav-menu {
    display: none;
    border-right: 1px solid #9e9e9e;
    background-color: #eaeaea;
}

    .exercise-nav-menu.full {
        display: block;
        width: 20%;
        min-width: 317.3px;
    }

.flex-exercise-area.menu-closed {
    width: 100%;
    margin-left: 55px;
}

.flex-container.exercise-main-view {
    width: 100%;
}

.exercise-menu-open.menu-closed {
    display: block;
}

.exercise-menu-open {
    display: none;
    padding-top: 10px;
    position: absolute;
    left: 1%;
    font-size: 22px;
}

    .exercise-menu-open a {
        color: #9e9e9e;
    }

        .exercise-menu-open a:hover {
            color: #FF6B00;
        }

    .exercise-menu-open.menu-closed {
        display: block;
    }

.exercise-menu-close.menu-closed {
    display: none;
}

.exercise-menu-close {
    display: block;
    /* padding-top: 10px; */
    /* position: relative; */
    /* left: 90%; */
    font-size: 22px;
    /* width: 25px; */
    display: flex;
    width: 100%;
    /* margin-top: 5px; */
    justify-content: space-between;
    padding: 8px;
    align-items: center;
}

    .exercise-menu-close a {
        color: #FF6B00;
    }

        .exercise-menu-close a:hover {
            color: #9e9e9e;
        }

.exercise-nav-menu-content ul {
    list-style-type: none;
    width: 100%;
    padding-left: 0px;
    cursor: pointer;
    margin-top: 10%;
}

    .exercise-nav-menu-content ul li {
        padding: 15px;
        margin-right: 5px;
        margin-left: 5px;
        background-color: #f5f5f5;
        border: 1px solid #e1e1e1
    }

        .exercise-nav-menu-content ul li:hover {
            background-color: #FFDABF;
        }

        .exercise-nav-menu-content ul li.disabled {
            background-color: #c6c6c6;
            cursor: default;
        }

        .exercise-nav-menu-content ul li.selected, .exercise-nav-menu-content ul li.active {
            background-color: #FF6B00;
            color: white;
        }

    .exercise-nav-menu-content ul hr {
        border-color: gray;
        width: 50%;
    }

.content-pane {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    margin-top:50px;
    /* justify-content: center; */
    flex-direction: column;
}

.content-container {
    display: flex;
    min-width: 340px;
    max-width: 80%;
}

    .content-container.content-column {
        flex-direction: column;
    }

.courses-pane {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

    .courses-pane .courses-content {
        display: flex;
        flex: 1;
        height: 100%;
        width: 50%;
        flex-wrap: wrap;
    }

.courses-content .courses-panel {
    width: 48%;
    background-color: white;
    border-radius: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 15px;
    box-shadow: 5px 5px 6px #888888;
    border: 1px solid #d8d8d8;
    align-self: baseline;
    min-height: 450px;
    max-height: 600px;
    overflow-y: auto;
}

.courses-panel .panel-header {
    width: 100%;
    font-size: 25px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

    .courses-panel .panel-header a {
        color: #6e6e6e;
    }

.courses-panel.middle {
    max-height: none;
    width: 60%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    align-self: flex-start;
    background-color: inherit;
    border: none;
    box-shadow: none;
    margin-top: 0px;
    padding-top: 0px;
    min-width: 300px;
}


.courses-content .courses-panel-button {
    width: 48%;
    padding: 9px;
    height: 433px;
    overflow-y: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

    .courses-content .courses-panel-button a {
        color: white;
    }

    .courses-content .courses-panel-button:nth-of-type(3n) {
        align-items: flex-start;
    }

    .courses-content .courses-panel-button:nth-of-type(2n) {
        justify-content: flex-start;
    }

    .courses-content .courses-panel-button:nth-of-type(4n) {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .courses-content .courses-panel-button .panel-background {
        width: 500px;
        height: 300px;
        background-color: #00aae1;
        color: white;
        box-shadow: 5px 5px 6px #888888;
        border: 1px solid #0091c0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.courses-panel-button .panel-header {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 27px;
}

.courses-panel-button .panel-divide {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
}

    .courses-panel-button .panel-divide img {
        width: 110px;
        height: 88px;
    }

    .courses-panel-button .panel-divide hr {
        margin-left: 0px;
        margin-right: 0px;
        width: 80px;
        border-top: 2px solid #fff;
    }

.courses-panel-button .panel-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.courses-content.middle {
    justify-content: center;
    margin-top: 50px;
}

.ExerciseDisplay {
    display: block;
    width: 70%;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    margin-top: 15px;
    background-color: white;
    min-height: 50px;
    min-width: 300px;
}

    .ExerciseDisplay a {
        color: black;
    }

    .ExerciseDisplay .ExerciseHeader {
        display: flex;
        justify-content: space-between;
    }

        .ExerciseDisplay .ExerciseHeader .Title {
            font-weight: 400;
            padding: 13px;
        }

    .ExerciseDisplay .ExerciserRightHeader {
        display: flex;
        flex-direction: row;
    }

        .ExerciseDisplay .ExerciserRightHeader .SuggestionGlyph {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ExerciseDisplay .ExerciserRightHeader > div {
            padding: 13px;
        }

    .ExerciseDisplay .ExerciseHeader .Status {
        border-right: 1px solid #b7b7b7;
        background-color: #e0e0e0;
    }

    .ExerciseDisplay .glyphicon-hourglass {
        color: #ef7e00;
    }

    .ExerciseDisplay .glyphicon-remove {
        color: #ff3e00;
    }

    .ExerciseDisplay .glyphicon-ok {
        color: #469f00;
    }

    .ExerciseDisplay .glyphicon-lock {
        color: #7a7a7a;
    }

    .ExerciseDisplay .ExerciseHeader .Expander {
        border-left: 1px solid #b7b7b7;
        background-color: #FF6B00;
        cursor: pointer;
        color: white;
    }

        .ExerciseDisplay .ExerciseHeader .Expander:hover {
            background-color: #ff7f23;
        }

    .ExerciseDisplay .ExerciseBody {
        display: block;
        border-top: 1px solid #b7b7b7;
        padding: 15px;
        text-align: right;
    }

    .ExerciseDisplay .CompleteText {
        font-size: 14px;
    }

    .ExerciseDisplay .QuestionRow {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

        .ExerciseDisplay .QuestionRow .QuestionCol {
            display: flex;
            flex-direction: row;
            color: #959595;
        }

            .ExerciseDisplay .QuestionRow .QuestionCol .Symbol {
                margin-right: 8px;
            }

.ProgressBar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

    .ProgressBar .Percent {
        font-size: 13px;
    }

    .ProgressBar .Border {
        width: 70px;
        border: 1px solid gray;
        height: 12px;
        border-radius: 15px;
    }

    .ProgressBar .Bar {
        background-color: green;
        height: 100%;
        border-radius: 15px;
    }

    .ProgressBar.White {
        color: white;
    }

        .ProgressBar.White .Border {
            border-color: white;
            width: 140px;
        }

        .ProgressBar.White .Bar {
            background-color: white !important;
        }


.ExerciseContainer {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.ExerciseView {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

    .ExerciseView .Navigation {
        display: flex;
        width: 20%;
        justify-content: center;
        align-items: center;
    }

        .ExerciseView .Navigation .glyphicon {
            color: #9e9e9e;
            font-size: 100px;
            cursor: default;
        }

            .ExerciseView .Navigation .glyphicon:hover {
                color: #FF6B00;
            }

    .ExerciseView .ExerciseQuestion {
        display: flex;
        flex-direction: column;
        width: 60%;
        min-width: 400px;
        min-height: 40%;
        align-items: center;
    }

        .ExerciseView .ExerciseQuestion > .Header {
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .ExerciseView .ql-editor {
        overflow-y: visible !important;
    }

    .ExerciseView .ExerciseQuestion > .Header > .ql-editor {
        min-height: 70px;
    }

    .ExerciseView .ExerciseQuestion > .Body {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
        width: 90%;
        min-height: 300px;
    }

        .ExerciseView .ExerciseQuestion > .Body:after {
            content: '';
            min-height: inherit;
            font-size: 0;
        }

    .ExerciseView .ExerciseQuestion .Body .Box {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .ExerciseView .ExerciseQuestion .Body .Box > .Header {
            font-size: 18px;
        }

        .ExerciseView .ExerciseQuestion .Body .Box > .Saving {
            display: flex;
            justify-content: space-between;
        }

        .ExerciseView .ExerciseQuestion .Body .Box > .Input {
            width: 100%;
            display: flex;
            justify-content: center;
        }

.input-group {
    max-width: 300px;
}

.ExerciseView .ExerciseQuestion .Body .Box > .Input .form-control {
    height: 45px;
    font-size: 20px;
    padding-bottom: 4px;
}

.ExerciseView .ExerciseQuestion .Body .Box > .Input textarea.form-control {
    min-height: 100px;
}

.ExerciseView .ExerciseQuestion .Body .Box > .Input input[type=text].form-control {
    max-width: 400px;
}

.NextSteps {
    /* height: 390px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.NextSteps .Reminder{
    display: flex;
    flex-flow: row;
    align-items: center;
}

    .NextSteps .btn .glyphicon {
        top: 3px;
    }

    .NextSteps .Related {
        display: flex;
        margin-top: 30px;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

        .NextSteps .Related .Header {
            margin-bottom: 10px;
            font-size: 20px;
        }

        .NextSteps .Related .Exercises {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            flex: 1;
            width: 100%;
        }

            .NextSteps .Related .Exercises .RelatedBox {
                display: flex;
                flex-direction: column;
                height: 250px;
                align-content: center;
                width: 30%;
                text-align: center;
                background-color: #00aae1;
                padding: 10px;
                border: 1px solid #0091c0;
                color: white;
                cursor: default;
                border-top: 4px solid #FF6B00;
                box-shadow: 5px 5px 6px #888888;
            }

                .NextSteps .Related .Exercises .RelatedBox:hover {
                    background-color: #00779e;
                }

                .NextSteps .Related .Exercises .RelatedBox .Cornerstone {
                    font-weight: 500;
                    text-transform: uppercase;
                    font-size: 18px;
                }

                .NextSteps .Related .Exercises .RelatedBox .Divider {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                }

                .NextSteps .Related .Exercises .RelatedBox .ContinueTo {
                    display: flex;
                    flex: 1;
                    align-items: flex-end;
                    justify-content: center;
                    padding-bottom: 27px;
                }

                .NextSteps .Related .Exercises .RelatedBox .Divider img {
                    width: 40px;
                    height: 31px;
                }

                .NextSteps .Related .Exercises .RelatedBox .Divider hr {
                    margin-left: 0px;
                    margin-right: 0px;
                    width: 80px;
                    border-top: 2px solid #fff;
                }

.ModuleProgress {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    .ModuleProgress .Header {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .quiz .ModuleBar{
        flex:none;
    }

.ModuleBar {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    justify-content: center;
}

    .ModuleBar .ProgressBar .Border {
        width: 300px;
        height: 20px;
    }

    .ModuleBar .ProgressBar .Percent {
        font-size: 18px;
        margin-bottom: 5px;
    }

.react-autosuggest__suggestions-container {
    display: none;
    border: 1px solid #aaa;
    background-color: #fff;
    font-weight: 300;
    font-size: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
    max-height: calc(100% - 52px);
    overflow-y: auto;
    width: 30%;
}

    .react-autosuggest__suggestions-container.react-autosuggest__suggestions-container--open {
        display: block;
    }

.react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.react-autosuggest__suggestion {
    cursor: pointer;
    padding: 10px 20px;
}

    .react-autosuggest__suggestion:hover {
        background-color: #cfcfcf;
    }

/*Financials*/
.FinancialContainer {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .FinancialContainer .FinancialYears {
        max-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;
    }

    .FinancialContainer .FinancialContent {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: flex-start;
        width: 80%
    }

    .FinancialContainer .ExerciseBox {
        width: 700px;
        height: 500px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 1px 1px 5px #888;
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }


.date-picker-box {
    width: 150px;
}

.FinManContainer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    width: 80%;
    min-height: 500px;
    justify-content: center;
}

    .FinManContainer .SelectArea {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .FinManContainer select {
        margin-top: 5px;
        width: 70%;
        min-width: 100px
    }

    .FinManContainer .SelectArea ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: 70%;
        min-width: 100px
    }

        .FinManContainer .SelectArea ul li {
            font-size: 18px;
            margin-top: 7.5px;
            padding: 7.5px;
            width: 100%;
            text-align: right;
            background-color: #e2e2e2;
            border-color: #878787;
            box-shadow: 1px 1px 5px #888;
            z-index: 999;
        }



            .FinManContainer .SelectArea ul li:hover {
                background-color: #ebebeb;
                cursor: default;
            }

            .FinManContainer .SelectArea ul li.active {
                color: white;
                background-color: #FF6B00;
            }

    .FinManContainer .ContentArea {
        width: 75%;
        max-width: 1000px;
        display: flex;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 1px 1px 5px #888;
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .FinManContainer .ProductContainer {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
    }

        .FinManContainer .ProductContainer .ProductContent {
            display: flex;
            flex: 1 1 auto;
            justify-content: center;
            flex-direction: column;
        }

        .FinManContainer .ProductContainer .MarketContent {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            flex-direction: column;
            width: 100%;
        }

.ProductPage {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.ProductSave {
    height: 50px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1;
}

.FinManContainer .ProductContainer .ProductNavigation {
    display: flex;
    height: 100px;
    justify-content: center;
}

    .FinManContainer .ProductContainer .ProductNavigation > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%
    }

.MarketingList {
    margin-bottom: 15px;
    width: 70%;
    display: flex;
    flex-direction: column;
}

.MarketingItem {
    display: flex;
    justify-content: space-between;
}

.MarketingDescription {
    width: 60%;
    text-align: center;
}

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

.MarketingMonths {
    margin-top: 15px;
    margin-bottom: 15px;
}

.MonthSelectors {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

table.Wrap{
    table-layout: fixed;
}

table.Wrap td{
    word-wrap: break-word;
}

.TaskList {
    display: table;
    width: 100%;
    margin-top: 15px;
}

    .TaskList .Header {
        display: table-row;
    }

        .TaskList .Header > div {
            display: table-cell;
            font-weight: bold;
            border-bottom: 1px solid #c6c6c6;
            border-right: 1px solid #c6c6c6;
            text-align: center;
        }

            .TaskList .Header > div:last-of-type {
                border-right: none;
            }

    .TaskList .Body {
        display: table-row;
    }

        .TaskList .Body > div {
            display: table-cell;
            border-bottom: 1px solid #c6c6c6;
            border-right: 1px solid #c6c6c6;
            text-align: center;
            vertical-align: middle;
            padding: 5px;
        }

            .TaskList .Body > div:last-of-type {
                border-right: none;
            }

.FinancialTracker {
    display: flex;
    flex: 1;
    margin: 30px;
    width: 75%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888;
    padding: 30px;
    flex-direction: column;
}

    .FinancialTracker .Selectors {
        display: flex;
        height: 80px;
        flex-direction: row;
        justify-content: space-between;
    }

        .FinancialTracker .Selectors .Areas {
            text-align: left;
        }

        .FinancialTracker .Selectors .Sections {
            text-align: right;
        }

    .FinancialTracker .TrackerSelectors {
        margin-bottom: 15px;
    }

    .FinancialTracker .TrackerSelector {
        display: inline-block;
    }

    .FinancialTracker .TrackerCharts {
        display: flex;
        flex-direction: row;
    }

    .FinancialTracker .PieBody {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /*.FinancialTracker .PieBody > div {
            display: flex;
            width: 80%;
            flex-direction: column;
        }*/

    .FinancialTracker .TrackerBody {
        width: 80%;
    }

.TableWrap {
    display: flex;
    flex: 1 1 auto;
    font-size: 10px;
    overflow-x: scroll;
}

.FinancialIncome {
    display: flex;
    margin: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888;
    padding: 30px;
    flex-direction: column;
    height: 100%;
}

    .FinancialIncome .Selectors {
        display: flex;
        height: 80px;
        flex-direction: row;
        justify-content: space-between;
    }

        .FinancialIncome .Selectors .Years {
            text-align: left;
        }

        .FinancialIncome .Selectors .Sections {
            text-align: right;
        }

.IncomeBody {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}

.IncomeTableHeader {
    font-weight: bolder;
}

.IncomeBody tfoot {
    font-weight: bold;
}

[class^="glyph-"] .glyphicon, [class*=" glyph-"] .glyphicon {
    color: #FF6B00;
    cursor: pointer;
}

    [class^="glyph-"] .glyphicon:hover, [class*=" glyph-"] .glyphicon:hover {
        color: #9e9e9e;
    }

.glyph-small .glyphicon {
    font-size: 13px;
}

.glyph-medium .glyphicon {
    font-size: 17px;
}

.flex-center {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    display: flex;
}

.YearSelect {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 800px;
}

    .YearSelect .NotCurrentYear {
        color: #676767;
        font-size: 14px;
        align-items: center;
    }

    .YearSelect .CurrentYear {
        display: flex;
        justify-content: space-between;
        width: 300px;
        font-weight: bold;
        align-items: center;
    }

        .YearSelect .CurrentYear .Selector {
            display: flex;
            align-items: center;
        }

            .YearSelect .CurrentYear .Selector .Options {
                margin-left: 5px;
            }

                .YearSelect .CurrentYear .Selector .Options .glyphicon {
                    font-size: 15px;
                    color: #FF6B00;
                }

                    .YearSelect .CurrentYear .Selector .Options .glyphicon:hover {
                        color: #9e9e9e;
                    }

    .YearSelect .Nav .glyphicon {
        color: #9e9e9e;
        font-size: 25px;
        cursor: pointer;
    }

        .YearSelect .Nav .glyphicon:hover {
            color: #FF6B00;
        }

.PieChartLabel .glyphicon {
    font-size: 15px;
    color: #FF6B00;
    cursor: pointer;
}

    .PieChartLabel .glyphicon:hover {
        color: #9e9e9e;
    }

.PieTip .tooltip-inner {
    background-color: #eaeaea;
    color: #333
}

    .PieTip .tooltip-inner ul {
        padding: 0px;
        list-style: none;
        margin: 0px;
    }

.PieTip .tooltip-arrow {
    border-left-color: #eaeaea;
}

.PieTip .LegendSquare {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 2px;
}

.ModulePlay {
    display: inline-block;
}

    .ModulePlay .glyphicon {
        font-size: 13px;
    }

.MediaModalBody {
    display: flex;
    flex: 1;
    justify-content: center;
}

.ModuleProgress .ModulePlay {
    margin-top: 5px;
}

    .ModuleProgress .ModulePlay a {
        color: #333;
    }

.WidgetSettings {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    margin: 5px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    padding: 15px;
}

.PSMixWidget{
    height:606px;
}

.WidgetSettings .Header {
    height: 40px;
    width: 100%;
    text-align: center;
}

    .WidgetSettings .Body {
        display: flex;
        flex: 1;
        width: 100%;
        justify-content: center;
        margin-top: 5px;
    }

    .WidgetSettings .Shared {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .WidgetSettings .Shared > div {
            margin-top: 5px;
        }

.MediaPlayer {
    width: 500px;
    background-color: black;
    padding: 2px;
    border-radius: 3px;
}

    .MediaPlayer.fill {
        width: 90%;
    }

    .MediaPlayer .Header {
        color: white;
        font-size: 20px !important;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
    }

        .MediaPlayer .Header .Title {
            display: flex;
            align-items: center;
        }

            .MediaPlayer .Header .Title > img {
                width: 38px;
                margin-top: -3px;
            }

        .MediaPlayer .Header .Favorite {
            display: flex;
            align-items: center;
            font-size: 20px !important;
        }

            .MediaPlayer .Header .Favorite .glyphicon {
                color: #FF6B00;
                font-size: 20px !important;
            }

.WidgetContainer {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 606px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    padding: 15px;
    padding-top: 10px;
    margin: 3px;
    flex: 1 1 auto;
}

    .WidgetContainer > .WidgetBody {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
    }

    .WidgetContainer .glyphicon {
        color: #FF6B00;
        font-size: 15px;
        cursor: pointer;
    }

        .WidgetContainer .glyphicon:hover {
            color: #9e9e9e;
        }

    .WidgetContainer .WidgetLoading {
        display: flex;
        flex: 1;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .WidgetContainer .WidgetOptions {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5px;
    }

        .WidgetContainer .WidgetOptions .glyphicon {
            color: #9e9e9e;
            font-size: 15px;
            cursor: pointer;
        }

            .WidgetContainer .WidgetOptions .glyphicon:hover {
                color: #FF6B00;
            }

.row.WidgetRow {
    margin: 0px;
}

.col-md-6.WidgetCol {
    padding: 0px;
    margin: 0px;
}

.Widget{
    height: 250px;
    border: solid #FF6B0044 1px;
    padding: 15px;
    border-radius: 10px;
    background-color: white;
    margin: 10px
}

.Widget >  div > img{
    width: 200px;
}

a.OrangeLink {
    color: #FF6B00 !important;
}
    a.OrangeLink:hover, a.OrangeLink:focus {
        color: #b74d00 !important;
    }

.ShadowBox {
    background-color: white;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    padding: 15px;
}

.RelationshipsContainer {
    display: flex;
    margin: 15px;
    flex: 1 1 auto;
    flex-direction: column;
}

    .RelationshipsContainer .RelationshipExport {
        display: flex;
        justify-content: flex-end;
        padding: 15px;
        padding-top: 4px;
    }

.RelationshipTasks ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.RelationshipTasks .glyphicon {
    font-size: 16px;
    margin-left: 5px;
    color: #FF6B00;
}

    .RelationshipTasks .glyphicon:hover {
        color: #888888;
    }

li.TaskCompleted {
    text-decoration: line-through;
}

.DashboardSettings {
    display: flex;
    height: 37px;
    justify-content: space-between;
    align-items: center;
    width: 99%;
    font-size: 25px;
}

    .DashboardSettings .glyphicon {
        color: #FF6B00;
    }

        .DashboardSettings .glyphicon:hover {
            color: #9e9e9e;
        }

.WidgetSettingsModal .WidgetItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}

.LoginArea {
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

    .LoginArea .LoginForm {
        text-align: right;
    }

    .quiz {
        background-image: url("Images/quiz_bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        justify-content: center;
        height: 100%;
    }

    .SE{
        background-image: url("Images/Sales_EffectivenessBG.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        justify-content: center;
        height: 100%;
    }
    .OA{
        background-image: url("Images/Opportunity _nalyzerBG.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        justify-content: center;
        height: 100%;
    }
    
#Animation_div > .Section{
    display: flex;
    flex-direction: column;
}
.Section>#personalInfo{
    width: 290px;
    align-self: center;
}

.border_div{
    border: solid;
    border-width: 1px;
    padding: 10px;
}

.OpportunityAnalyzer {
    display: flex;
    margin: 5px;
    flex-direction: column;
    align-items: center;
}

    .OpportunityAnalyzer > div {
        width: 800px;
    }

    .OpportunityAnalyzer > .ProgressSection {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

        .OpportunityAnalyzer > .ProgressSection > div {
            width: 33%;
        }

            .OpportunityAnalyzer > .ProgressSection > div:last-of-type {
                text-align: right;
            }

        .OpportunityAnalyzer > .ProgressSection > .Heading {
            text-align: center;
        }

    .OpportunityAnalyzer  .Section .Report {
        height: 99%;
        min-width: 500px;
    }

        .OpportunityAnalyzer  .Section .Save {
            display: flex;
            justify-content: space-between;
        }

        
    .OpportunityAnalyzer .QuestionRows textarea {
        width: 100%;
        height: 75px;
        max-width: 100%;
    }

    .OpportunityAnalyzer .QuestionRows .glyphicon{
        color: #FF6B00;
        font-size: 15px;
        cursor: pointer;
    }

div.OAGlyph {
    display: inline;
    margin-left: 5px;
}

.OAGlyph .glyphicon {
    color: #FF6B00;
}

    .OAGlyph .glyphicon:hover {
        color: #9e9e9e;
    }

.OpportunityAnalyzer .RevenueTable th {
    font-size: 15px
}

.OpportunityAnalyzer .RevenueTable .input-group {
    width: 120px;
}

.OpportunityAnalyzer .RevenueTable td {
    text-align: center;
}

.OpportunityAnalyzer .ProgressSection a {
    color: #FF6B00;
    text-decoration: none;
}

    .OpportunityAnalyzer .ProgressSection a:hover {
        color: #9e9e9e;
    }

nav.sidebar.navbar {
    border-radius: 0px;
    background-color: #fff;
    border-color: #fff;
    border-right-color: #808080;
    color: #000;
}

.primaryBTN{
    background-color: #FF6B00;
    color: white;
    padding: 5px;
    margin-bottom: 10px;
    border: #FF6B00;
}

a.dropdown-toggle {
    text-decoration: none;
}

li.dropdown {
    display: inline;
}


h4.SalesHeader {
    font-size: 14px;
    font-weight: bold;
}

span.SalesLabel {
    font-size: 12px;
}

.RegistrationPage {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
}

.PaymentForm input{
    border-radius: 50px !important;
}
.PaymentForm select{
    border-radius: 50px !important;
}

input.full{
    max-width: 100% !important;
}

.RegistrationForm {
    display: flex;
    width: 50%;
    min-height: 400px;
    min-width: 700px;
    justify-content: center;
    align-items: center;
}

    .RegistrationForm > form {
        width: 100%;
    }

    .RegistrationForm .full input {
        max-width: 95% !important;
    }

    .RegistrationForm input{
        border-radius: 50px;
    }

.radius{
    border-radius: 50px !important;
}

.DarkBlueBG {
    background-color: #001c4e !important;
    color: white;
}

.LightBlueBG {
    background-color: #0086af !important;
    color: white;
}

.MarketingCalendarContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

    .MarketingCalendarContainer .MarketingCalendar {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 80%;
        min-width: 600px;
    }

.MarketingCalendar .NavRow {
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: space-between;
}

.MarketingCalendar .CalendarBody {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    align-items: stretch;
}

.CalendarBody .Calendar {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

    .CalendarBody .Calendar .CalendarRow > div {
        background-color: rgba(0,188,218,0.26);
    }

    .CalendarBody .Calendar .CalendarRow {
        display: flex;
        flex: 1 1 auto;
        align-items: stretch;
    }

        .CalendarBody .Calendar .CalendarRow > div {
            width: 20%;
            min-height: 100px;
            display: flex;
            align-items: stretch;
            justify-content: center;
            border: 1px solid black;
        }

.CalendarBody .Double {
    flex-direction: column;
    justify-content: flex-start !important;
}

    .CalendarBody .Double > div {
        flex: 1 1 auto;
        width: 100%;
    }

.CalendarBody .DarkBlueBG, .CalendarBody .LightBlueBG {
    font-weight: bold;
    align-items: center !important;
    padding: 10px;
}

.CalendarBody .Double > .MonthHeader {
    flex: none;
    text-align: center;
    border-bottom: 1px solid black;
    padding: 3px;
}

.CalendarBody .CalendarRow .Editor > textarea {
    max-width: 100%;
    min-height: 98px;
    width: 100%;
    background-color: transparent;
}

.CalendarBody .CalendarRow .DaysList {
    margin: 5px;
}

    .CalendarBody .CalendarRow .DaysList li {
        margin-bottom: 3px;
    }

    .CalendarBody .CalendarRow .DaysList input {
        display: inline;
        background-color: transparent;
        width: 40%;
        border: 1px gray solid;
    }

ul.noStyle {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.popoverTrigger {
    cursor: pointer;
}

    .popoverTrigger.White {
        color: white;
    }

.FinancialVideo {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 600px;
}

    .FinancialVideo .FinancialVideoNav {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        width: 90%;
    }

.full-pane {
    display: flex;
    flex: 1 1 auto;
    margin: 5px;
    padding: 5px;
    flex-direction: column;
}

.full-pane-nav {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.full-pane-content {
    flex: 1 1 auto;
    padding-left: 15px;
    padding-right: 15px;
}

li.inline-form select {
    display: inline;
    margin-left: 5px;
}


.adminFAQItem {
    display: flex;
    flex-direction: column;
    min-width: 500px;
    margin-bottom: 15px;
}

    .adminFAQItem .Buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 5px;
        padding: 5px;
    }

        .adminFAQItem .Buttons .SortButtons {
            display: flex;
            flex-direction: column;
            height: 35px;
        }

            .adminFAQItem .Buttons .SortButtons .glyphicon {
                height: 50%;
                color: #FF6B00;
            }

                .adminFAQItem .Buttons .SortButtons .glyphicon:hover {
                    color: #d8d8d8;
                }

    .adminFAQItem textarea, .adminFAQItem .ItemBody {
        width: 100%;
        max-width: 100%;
    }

.FAQRow {
    display: flex;
    flex-direction: column;
    width: 700px;
    margin-top: 15px;
}


    .FAQRow .FAQQuestion {
        display: flex;
        align-items: center;
    }

        .FAQRow .FAQQuestion .glyphicon {
            margin: 5px;
            font-size: 30px;
            color: #FF6B00;
        }

            .FAQRow .FAQQuestion .glyphicon:hover {
                color: #d8d8d8;
            }

        .FAQRow .FAQQuestion h3 {
            margin: 0;
            margin-top: 5px;
            margin-bottom: 5px;
        }

    .FAQRow .FAQAnswer {
        display: none;
        padding: 15px;
        font-style: italic;
    }

        .FAQRow .FAQAnswer.visible {
            display: block;
        }

.CoachingMenu {
    display: none;
    font-size: 10px;
}

    .CoachingMenu.visible {
        display: inline-block;
        width: 210px;
    }

.MessageThreadModal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    .MessageThreadModal .MessageThreadDraft {
        display: flex;
        flex: 1 1 auto;
        margin-top: 15px;
    }

        .MessageThreadModal .MessageThreadDraft .Text {
            width: 80%
        }

            .MessageThreadModal .MessageThreadDraft .Text > textarea {
                width: 100%;
                max-width: 100%;
            }

        .MessageThreadModal .MessageThreadDraft .Send {
            display: flex;
            flex: 1 1 auto;
            justify-content: center;
            align-items: center;
        }

            .MessageThreadModal .MessageThreadDraft .Send > button {
                width: 100%;
                height: 100%;
            }

    .MessageThreadModal .MessageThreadRow {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 15px;
    }

        .MessageThreadModal .MessageThreadRow.Coach {
            justify-content: flex-start;
        }

    .MessageThreadModal .MessageThreadItem {
        width: 80%;
        padding: 5px;
        border-radius: 8px;
        border: 1px solid rgba(175,175,175,1);
        background-color: rgba(175,175,175,.25);
        margin-right: 5px;
    }

        .MessageThreadModal .MessageThreadItem.Coach {
            border: 1px solid rgba(255,144,0,1);
            background-color: rgba(255,144,0,0.24);
        }

        .MessageThreadModal .MessageThreadItem .Header {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            font-style: italic;
        }

        .MessageThreadModal .MessageThreadItem .Body {
            padding: 5px;
            font-size: 14px;
        }

    .MessageThreadModal .MessageThreadList {
        max-height: 400px;
        overflow: auto;
    }

.NotificationPop {
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 350px;
    z-index: 999999;
}

    .NotificationPop > .popover-content {
        padding: 0px;
    }


.AJAXHelperTray {
    margin-right: 10px;
    position: relative;
}

    .AJAXHelperTray .glyphicon {
        font-size: 18px;
        color: #EF6B00;
        font-size: 20px;
        cursor: pointer;
    }

.AJAXToolTipContainer {
    position: absolute;
    color: black;
}

#DASHBOARD_MAIN {
    z-index: 1070;
}

.AJAXToolTipContainer .bottom, .AJAXToolTipContainer .top {
    left: -129px;
}

.AJAXToolTipContainer .left {
    left: -276px;
}

.AJAXToolTipContainer .popover {
    width: 276px;
}

.NotificationTray {
    margin-right: 10px;
    position: relative;
}


    .NotificationTray .UnreadCount {
        position: absolute;
        bottom: 0px;
        right: 0px;
        background-color: white;
        border-radius: 89px;
        font-size: 8px;
        padding: 1px 3px 1px 3px;
        border: 1px solid black;
        cursor: pointer;
    }

    .NotificationTray .glyphicon {
        font-size: 18px;
        color: white;
        text-shadow: -2px 0 #EF6B00, 0 2px #EF6B00, 2px 0 #EF6B00, 0 -2px #EF6B00;
        cursor: pointer;
    }

    .NotificationTray.unread .glyphicon {
        text-shadow: none;
        color: #EF6B00;
        font-size: 20px;
    }

.NotificationRows {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: auto;
    height: 300px;
}

    .NotificationRows .NotificationRow {
        padding: 10px;
        background-color: rgba(255,144,0,0.05);
        border-bottom: 1px solid rgba(255,144,0,0.6);
    }

        .NotificationRows .NotificationRow:hover {
            background-color: rgba(255,144,0,0.15);
        }

        .NotificationRows .NotificationRow .Subject {
            font-size: 12px;
        }

        .NotificationRows .NotificationRow .Body {
            font-size: 11px;
        }

        .NotificationRows .NotificationRow .Date {
            font-size: 8px;
            text-align: right;
        }


.ActiveThreadRows {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

    .ActiveThreadRows .ActiveThreadRow {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
    }

        .ActiveThreadRows .ActiveThreadRow.body {
            font-size: 13px;
            padding: 15px 5px 15px 5px;
            background: #fbfbfb;
            border-top: 1px solid #d8d8d8;
        }

            .ActiveThreadRows .ActiveThreadRow.body:hover {
                background: rgba(239,107,0,0.05);
            }

        .ActiveThreadRows .ActiveThreadRow > div {
            width: 20%;
            padding-left: 5px;
        }

            .ActiveThreadRows .ActiveThreadRow > div > .header {
                display: none;
            }

        .ActiveThreadRows .ActiveThreadRow .Message > div {
            margin: 0px !important;
        }

.SuggestionRows {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 15px;
}

    .SuggestionRows .SuggestionRow {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        justify-content: center;
    }

        .SuggestionRows .SuggestionRow.body {
            font-size: 13px;
            padding: 15px 5px 15px 5px;
            background: #fbfbfb;
            border-top: 1px solid #d8d8d8;
        }

            .SuggestionRows .SuggestionRow.body.completed {
                background: #cccccc;
            }



            .SuggestionRows .SuggestionRow.body:hover {
                background: rgba(239,107,0,0.05);
            }

            .SuggestionRows .SuggestionRow.body.completed:hover {
                background: #cccccc;
            }

        .SuggestionRows .SuggestionRow > div {
            width: 20%;
            padding-left: 5px;
        }

            .SuggestionRows .SuggestionRow > div > .header {
                display: none;
            }

        .SuggestionRows .SuggestionRow .Message > div {
            margin: 0px !important;
        }

.CategoryList {
    display: flex;
    flex: 1 1 auto;
    margin: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .CategoryList li {
        margin-bottom: 5px;
    }


.react-select {
    width: 80%;
    display: inline-block;
}

.ExerciseSelect .Parent {
    display: flex;
    align-items: center;
    margin-top: 5px;
    min-height: 35px;
    font-size: 14px;
}

.ExerciseSelect > .Parent {
    justify-content: space-between;
}

.ExerciseSelect .Rank {
    display: flex;
    flex-direction: column;
}

    .ExerciseSelect .Rank > .glyphicon:first-of-type {
        margin-bottom: 3px;
    }

.ExerciseSelect .Parent > div {
    margin-right: 0px;
    padding: 3px 3px 0px 3px;
}

.ExerciseSelect .Child {
    margin-left: 10px;
}

.PathDisplays {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.focused .PathTitle{
    background: #FF6B00 !important;
    color: white;
}

.focused .PathTitle a{
    color: inherit;
}

    .PathDisplays .Displays {
        display: flex;
        flex-wrap: wrap;
        padding-left: 25px;
        max-width: 80%;
    }

    .PathDisplays .PathDisplay {
        width: 350px;
        display: flex;
        flex-direction: column;
        background-color: white;
        min-height: 500px;
        margin-right: 25px;
        margin-top: 25px;
        padding: 0px !important;
    }

.PathDisplay .PathTitle {
    padding: 5px;
    height: 8%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .PathDisplay .PathTitle h4:hover {
        text-decoration: underline;
    }

.PathDisplay .PathDescription {
    padding: 15px;
    font-size: 14px;
    flex: 1 1 auto;
    font-style: italic;
}

.PathDisplay .PathImage {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .PathDisplay .PathImage > img {
        height: 180px;
    }

.WorkCalendarContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

    .WorkCalendarContent .Heading {
        display: flex;
        justify-content: space-between;
    }

    .WorkCalendarContent .Navigation {
        display: flex;
        justify-content: space-between;
    }

    .WorkCalendarContent .Body {
        display: flex;
        flex: 1 1 auto;
    }

        .WorkCalendarContent .Body > div {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
        }

.flex-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.MediaSquare {
    width: 230px;
    border: 1px solid #e7f5ff;
    flex-direction: column;
    cursor: pointer;
    max-width: 30%;
}

    .MediaSquare .MediaTitle {
        font-size: 15px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .MediaSquare .glyphicon {
        color: white;
        font-size: 20px;
    }

    .MediaSquare a {
        color: #343434;
    }

    .MediaSquare .MediaIcon > img {
        width: 100%;
    }


.FinancialVideoList {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .FinancialVideoList .FinancialVideoRow {
        display: flex;
        justify-content: space-around;
        margin-bottom: 8px;
        width: 100%;
        align-items: center;
    }

        .FinancialVideoList .FinancialVideoRow .MediaSquare {
            margin: 10px;
        }


.LoginBody {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    background-color: #fff;
}

    .LoginBody > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33%;
        border-radius: 5px;
        flex-direction: column;
    }

    .LoginBody .LoginForm {
        justify-content: flex-start;
        padding-top: 60px;
    }

    .LoginBody .ErrorArea {
        height: 125px;
    }


    .LoginBody .LeftImage {
        background-image: url("Images/Login/Left.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .LoginBody .RightImage {
        background-image: url("Images/Login/Right.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

.Terms {
    display: flex;
    justify-content: center;
    margin: 15px;
    flex: 1 1 auto;
}

    .Terms .TermsBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 75%;
    }

        .Terms .TermsBox .Title {
            font-size: 27px;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .Terms .TermsBox .AcceptArea {
            margin-top: 25px;
            display: flex;
            justify-content: flex-end;
            font-size: 18px;
            font-weight: bold;
            width: 100%;
            padding-right: 15px;
        }

            .Terms .TermsBox .AcceptArea > div {
                display: flex;
                justify-content: flex-end;
                flex-direction: column;
                align-items: flex-end;
            }

.SubscriptionPage {
    display: flex;
    justify-content: center;
    margin: 15px;
    flex: 1 1 auto;
}

    .SubscriptionPage .Management {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .SubscriptionPage .Management > .Body {
            display: flex;
            flex-direction: column;
        }

            .SubscriptionPage .Management > .Body > .Actions {
                display: flex;
                justify-content: space-between;
                margin-top: 15px;
            }

    .SubscriptionPage .Payment {
        display: flex;
        flex-direction: column;
        width: 75%;
    }

        .SubscriptionPage .Payment.Processing {
            justify-content: center;
            align-items: center;
            white-space: nowrap;
        }

            .SubscriptionPage .Payment.Processing .ConfirmPane {
                min-width: 300px;
            }

    .SubscriptionPage .PaymentTable select {
        display: inline;
    }

    .SubscriptionPage .PaymentTable label {
        display: block;
    }

    .SubscriptionPage .ProductBoxes {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
        justify-content: space-around;
    }

        .SubscriptionPage .ProductBoxes .ProductBox {
            background-color: white;
            border-radius: 5px;
            box-shadow: 1px 1px 5px #FF6B00;
            padding: 15px;
            display: flex;
            flex-direction: column;
            /* justify-content: space-between; */
            align-items: center;
            /* width: 40%; */
            margin: 25px;
            width: 300px;
            min-height: 300px;
            /* text-align: center; */
        }

            .SubscriptionPage .ProductBoxes .ProductBox .ProductName {
                min-height: 50px;
                font-size: 20px;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .SubscriptionPage .ProductBoxes .ProductBox .ProductDescription {
                font-style: italic;
                font-size: 16px;
                text-align: center;
                min-height: 140px;
            }

            .SubscriptionPage .ProductBoxes .ProductBox .ProductPrice {
                display: flex;
                flex: 1 1 auto;
                align-items: flex-end;
                margin-bottom: 15px;
                font-size: 21px;
            }

    .SubscriptionPage .ConfirmPurchase {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
    }

.ErrorList li {
    color: darkred;
    font-size: 14px;
}

.ExerciseSelect2 {
    font-size: 11px;
}

.PremiumProducts .Product {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.PremiumProducts .Product .title{
    color: #EF6B00;
}

.PremiumProducts .Product .desc{
    overflow: hidden;
    height: 160px;
}

.Product a{
    text-decoration: none;
}

.Product a:hover{
    text-decoration: none;
}

    .PremiumProducts .Product .outline{
        padding: 5px;
        border: 1pt solid;
        border-color: #d1d1d1;
        border-radius: 15px;
        text-align: left;
    }

        .PremiumProducts .Product .outline > div{
            margin: 15px 10px;
        }

        .PremiumProducts .Product .outline > div.link{
            cursor: pointer;
        }

        .PremiumProducts .Product .outline .img img{
            width: 100%;
            border-radius: 10px;
        }
        
        .PremiumProducts .Product .outline .DownloadBtn>small{
            display: flex;
            justify-content: space-between;
            opacity: 0.4;
        }

.LandingPage > form{
    display: flex;
    flex-flow: column;
}

    .LandingPage input.full{
        max-width: inherit;
    }

.textStrike{
    text-decoration: line-through;
}

.Facilitator{
    margin-top: 50px;
    display: flex;
    flex-flow: column;
    width: 500px;
    padding: 10px;
    background: white;
}
    .Facilitator>div{
        display: flex;
        align-items: center;
    }
    .Facilitator img{
        border-radius: 150px !important;
        width: 150px !important;
        height: 150px !important;
    }
    .Facilitator h4{
        margin: 10px 20px !important;
    }
    .Facilitator p{
        margin: 20px 10px 0 10px !important;
    }

.ProductLanding .Header{
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-bottom: 10px;
}

.ProductLanding .SubHeadline{
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-bottom: 10px;
}

#LandingPageReview .modal-lg{
    width: 90vw;
}

.ProductLanding .bgImage {
    /* background-image: url("https://covenantgroup.azureedge.net/Image for COG Sign Up Course Landing Pages.png"); */
    height: 80vh;
    display: flex;
    flex-flow: column;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    color: white;
    justify-content: center;
    padding-bottom: 110px;
    position: relative;
}

.ProductLanding .ScheduleContainer {
    margin: 20px auto;
    display: flex;
    flex-flow: column;
}

.ProductLanding .ScheduleContainer {
    border: #ccc 0.2px solid;
    border-radius: 2px;
    color: #666;
}

.ProductLanding .ScheduleContainer .ScheduleHeader {
    border: #ccc 0.2px solid;
    border-radius: 2px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
} 

.ProductLanding .ScheduleContainer .ScheduleHeader .Name{
    padding: 7px;
}

.ProductLanding .ScheduleContainer .ScheduleHeader .Expander{
    background-color: #ff6b00;
    cursor: pointer;
    color: #fff;
    padding: 7px;
    border-radius: 2px;
}
.ProductLanding .ScheduleContainer .ScheduleBody > div {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    padding: 10px;
}

.Product .Payment h2 .glyphicon-ok {
    padding: 20px;
    color: green;
    border: 1px solid green;
    border-radius: 50%;
}

.Product .success{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.ProductLanding .ScheduleContainer .ScheduleBody > div a {
    color: unset;
}

.ScheduleContainer .ScheduleBody .glyphicon-ok {
    color: #469f00;
}

.ScheduleContainer .ScheduleBody .glyphicon-hourglass {
    color: #ef7e00;
}

.Below{
    position: absolute;
    bottom: 30px;
    width: 100%;
}
.Below div{
    display: flex;
    flex-flow: column;
    align-items: center;
}
.ProductLanding .bgImage h2, .ProductLanding .bgImage h3{
    font-family: 'Raleway', sans-serif !important;
}

button.Enroll{
    padding: 10px 30px;
    font-size: 20px;
    border-radius: 10px;
}

.ProductLanding .Description{
    display: flex;
    flex-flow: column;
    padding: 20px;
}

.primary{
    color:#EF6B00;
}

    .ProductLanding .Description .Media{
        display: flex;
        flex-flow: column;
        justify-content: center;
        float: right;
        width: 500px;
        margin: 20px;
        align-items: center;
    }

    .ProductLanding .Description img{
        float: right;
        width: 500px;
    }

    .ProductLanding .Tagline{
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .ProductLanding .Purchase{
        padding-left: 20px;
        padding-bottom: 50px;
    }

    .ProductLanding .Purchase button{
        margin-right: 20px;
        margin-bottom: 20px;
    }

.AdminResources{
    display: flex;
    flex-flow: column;
}
td.wide{
    width: 80%;
}
.AdminResources > form{
    display: flex;
    flex-flow: column;
}

.AdminResources .form-group{
    margin: 5px;
}

.ResourceLanding{
    padding: 30px 70px;
}

.ResourceLanding .text h2{
    color: #EF6B00;
}

    .ResourceLanding .text{
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
    }

    .ResourceLanding .image p{
        padding-bottom: 10px;
    }

    .ResourceLanding .image img{
        padding-bottom: 10px;
        max-height: 450px;
    }

.form-group{
    margin-bottom: 10px;
}

.ExerciseSelector2 {
    width: 600px;
    position: absolute;
    z-index: 9999;
    max-height: 400px;
    overflow: auto;
}

li.PasswordReqFulfilled {
    color: #018e00;
}

li.PasswordReqUnfulfilled {
    color: #d80000;
}

.BusinessPlanRow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15px;
    min-width: 500px;
}

    .BusinessPlanRow .PlanName {
        font-weight: bold;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

.BusinessPlanEditor {
    min-height: 740px;
    width: 90%;
    min-width: 600px;
}

    .BusinessPlanEditor > .Header {
        display: flex;
        justify-content: space-between;
    }


.PlanEntryList {
    margin-top: 15px;
    display: flex;
    flex: 1 auto;
    flex-direction: column;
}

    .PlanEntryList .PlanEntryRow {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }

        .PlanEntryList .PlanEntryRow .Ordering {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .PlanEntryList .PlanEntryRow .Name, .PlanEntryList .PlanEntryRow .Actions {
            display: flex;
            justify-content: center;
            align-items: center;
        }


.BusinessPlanSelector {
    min-width: 500px;
    width: 70%;
}

.AvailablePlans {
}

    .AvailablePlans .PlanEntryRow {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
    }

        .AvailablePlans .PlanEntryRow.ShadowBox:hover {
            box-shadow: 1px 1px 5px #7c3400;
        }

        .AvailablePlans .PlanEntryRow .Description {
            font-style: italic;
            font-size: 0.8em;
        }

        .AvailablePlans .PlanEntryRow .Header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .AvailablePlans .PlanEntryRow .Header .Name {
                padding-left: 3px;
            }


            .AvailablePlans .PlanEntryRow .Header > div {
                display: flex;
                align-items: center;
            }


@media screen and (max-width: 1280px) {
    .recharts-cartesian-axis-ticks .recharts-cartesian-axis-tick:nth-child(2n+1) {
        display: none;
    }

    .exercise-nav-menu.full {
        position: absolute;
        z-index: 99999;
        height: 100%;
    }

    .flex-exercise-area {
        position: relative;
    }

        .flex-exercise-area.menu-closed {
            position: inherit;
        }

    .flex-container.exercise-main-view.menu-open {
        margin-left: 55px;
    }

    .FinancialContent {
        width: 100% !important;
    }
}


@media screen and (max-width:1050px) {


    .ActiveThreadRows {
        align-items: center;
    }

        .ActiveThreadRows .ActiveThreadRow {
            justify-content: center;
            flex-direction: column;
            width: 60%;
            min-width: 400px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 1px 1px 5px #888888;
            padding: 15px;
            margin-top: 15px;
        }

            .ActiveThreadRows .ActiveThreadRow > div {
                padding: 15px;
                text-align: center;
                width: 100%;
            }

                .ActiveThreadRows .ActiveThreadRow > div > .header {
                    display: block;
                }

            .ActiveThreadRows .ActiveThreadRow.header {
                display: none;
            }

    .SuggestionRows {
        align-items: center;
    }

        .SuggestionRows .SuggestionRow {
            justify-content: center;
            flex-direction: column;
            width: 60%;
            min-width: 400px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 1px 1px 5px #888888;
            padding: 15px;
            margin-top: 15px;
        }

            .SuggestionRows .SuggestionRow > div {
                padding: 15px;
                text-align: center;
                width: 100%;
            }

                .SuggestionRows .SuggestionRow > div > .header {
                    display: block;
                }

            .SuggestionRows .SuggestionRow.header {
                display: none;
            }

    .courses-pane .courses-content {
        justify-content: center;
        align-content: flex-start;
    }

    .courses-content .courses-panel-button {
        height: auto;
        min-width: 300px;
        justify-content: flex-start;
        align-items: flex-start;
    }

        .courses-content .courses-panel-button .panel-background {
            width: 350px;
            height: 300px;
        }

    .courses-panel-button .panel-header {
        font-size: 20px;
    }

    .headerDisplay .CovenantHeader {
        border-left: none;
        padding-left: 0px;
        margin-left: 0px;
    }

        .headerDisplay .CovenantHeader h2 {
            font-size: 20px;
        }

    .headerDisplay.logo {
        padding-left: 0px;
    }

    .headerDisplay.logo {
        padding-left: 0px;
    }

        .headerDisplay.logo img {
            width: 125px;
        }
}

.Video_Container{
    width:100%;
    margin:10px;
    display: flex;
    flex-flow: column;
    padding: 10px;
    align-items: center;
}

.Video_Container > .Video_Row{
    margin: 40px 5px 5px 5px;
}

.Video_Container > .Video_Row > .Video{
    text-align: center;
}

.Video_Container > .Video_Row > .Video > td > p{
    color: #00aae1;
}

.Video_Container > .Video_Row > .Video > td > a{
    text-decoration: none;
    color: black;
}
.Video_Container > .Video_Row > .Video > td > a :hover{
    text-decoration: none;
    color: #00aae1;
}
.Video_Container > .Video_Row > .Video > td> a >img{
    width: 70%;
}

@media screen and (max-width:996px) {
    .headerDisplay.user {
        font-size: 22px;
        min-width: 90px;
    }

    .headerDisplay .UserEmail {
        display: none;
    }

    .form-group>.radialChart{
        width: 100%;
    }
    #OAReport div{
        width: 100%;
    }

    #Animation_div{
        width: 100%;
    }

    .OpportunityAnalyzer div {
        width: 90%;
    }

    .RegistrationForm {
        min-width: 90%;
    }

    .RegistrationPage {
        width: 100%
    }

    .RegistrationForm input {
        width: 90%;
    }
}

@media screen and (max-width:776px) {
    .courses-pane .courses-content {
        justify-content: center;
        align-items: center;
    }

    .courses-content .courses-panel-button {
        height: 350px;
        justify-content: center;
        align-items: center;
    }

    .glossary-nav {
        display: none;
    }

    .ExerciseView {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .ExerciseBody {
        order: 0;
    }

    .ExerciseQuestion {
        width: 90% !important;
        margin-top: 47px;
    }

    .ExerciseView .Navigation.Back {
        order: 1;
        justify-content: flex-start;
    }

    .ExerciseView .Navigation.Forward {
        order: 2;
        justify-content: flex-end;
    }
}

@media screen and (max-width:650px) {
    .LoginBody .LoginForm {
        width: 100%;
    }

    .LoginBody .LeftImage {
        display: none;
    }

    .LoginBody .RightImage {
        display: none;
    }

    .LoginBody {
        background-color: inherit;
    }
}

@media screen and (max-width:450px) {
    .headerDisplay h2 {
        font-size: 20px;
        border-left: none;
    }
}

@media print {
    a[href]:after {
      content: none !important;
    }
    .topROA{
        display: block !important;
    }
  }

.SubscriptionGroupRow {
    margin: 10px;
}

    .SubscriptionGroupRow > div {
        margin-bottom: 5px;
    }

    .example-enter{
        opacity:0.01;
    }
    .example-enter.example-enter-active{
        opacity: 1;
        transition: opacity 300ms ease-in;
    }
    .example-leave{
        opacity:1;
    }
    .example-leave.example-leave-active{
        opacity: 0.01;
        transition: opacity 300ms ease-in;
    }

.fade-enter {
    opacity: 0;
}
    
.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease-in-out 0.3s;
}
    
.fade-leave {
    position: absolute;
    opacity: 1;
}
    
.fade-leave.fade-leave-active {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.fade-appear {
    opacity: 0;
}
    
.fade-appear.fade-appear-active {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

.path{
    background-image: url("Images/BFP_Plan.png");
    width: 75%;
}

#contactUs div{
    margin-bottom: 10px;
}

.contactUs{
    padding : 50px;
    display: flex;
    flex-flow: column;
    background-image: url("Images/Contact_Us.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
}

#Campaign a .glyphicon{
    color: #EF6B00;
}

#Campaign a{
    text-decoration: none;
    color: inherit;
}
#Campaign a:hover{
    text-decoration: none;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
}

div.marginTop{
    margin-top: 5px;
}