/**
 *
 * Apply your custom CSS here
 *
*/

tr td {
    vertical-align: middle;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.loader-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -25px;
    font-size: 60px;
    text-align: center;
    width: 250px;
    color: rgba(0, 142, 211, .60);
}

    .loader-3 .loader-message {
        margin-top: 10px;
        font-size: 14px;
        color: rgb(13, 121, 189);
        font-weight: bold;
    }

.navbar-btn {
    margin-right: 7px;
    -moz-min-width: 90px;
    -ms-min-width: 90px;
    -o-min-width: 90px;
    -webkit-min-width: 90px;
    min-width: 90px;
}

.required-field-marker {
    font-size: 4pt;
    margin-right: 5px;
    vertical-align: top;
}

.info-field-marker {
    float: right;
    font-size: 12px;
    background-color: white;
    width: 10px;
    padding: 3px 3px;
    margin-top: -23px;
    margin-right: -14px;
}

.select2-container {
    width: 98%;
}

.form-group {
    margin-bottom: 7px;
}

    .form-group .icheckbox_flat-blue,
    .form-group .iradio_flat-blue {
        margin-top: 6px;
        margin-left: 15px;
        min-width: 20px;
    }

        .form-group .icheckbox_flat-blue.disabled {
            margin-left: 12px;
        }

        .form-group .icheckbox_flat-blue.disabled {
            margin-left: 12px;
        }

/* make add-ons same width */
.input-group-addon,
.input-group-btn {
    width: 37px;
}

/*disabled input should look like a label*/
.form-control-static {
    background-color: transparent;
    border-color: transparent;
    cursor: default;
}

/* reset for for controls in tables */
table td .form-control {
    height: auto;
    margin: auto 0;
    vertical-align: middle;
}

/*hover tgable rows should have pointer*/
.table-hover > tbody > tr:hover {
    background-color: #ecf3fa;
    cursor: pointer;
}

tr > td > .form-control {
    padding: 0;
    padding: 4px 4px;
    width: 100%;
    cursor: inherit;
}

/*icons in tables*/
tr > td > *[class*="fa-"] {
    font-size: 17px;
}

.panel-address-results .panel-body {
    height: calc(100vh - 598px);
    overflow-y: auto;
}

/* Panel Tweaks*/
.panel-body h4 {
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-bottom: 6px;
    color: rgb(44, 62, 80);
    border-bottom: #EAEAEA solid 1px;
}

.panel .panel-heading.clone-heading {
    padding-bottom: 0;
    margin-bottom: 14px;
}

.form-control.address-line1 {
}

.form-control.address-line2,
.form-control.address-line3,
.form-control.address-town,
.form-control.address-postcode {
    border-top: none;
    margin-top: -1px;
}

.form-control.address-town {
    width: 66%;
}

.form-control.address-postcode {
    width: 33%;
}

.input-decimal,
.input-number,
.input-date,
.input-datetime,
.input-time,
.form-control.colorpicker.colorpicker-element {
    width: 25%;
    -moz-min-width: 150px;
    -ms-min-width: 150px;
    -o-min-width: 150px;
    -webkit-min-width: 150px;
    min-width: 150px;
}

.air-change-rate-table .input-decimal,
.air-change-rate-table .input-number {
    min-width: 80px;
}

.air-change-rate-table .table-headings > div {
    padding: 6px 26px 0;
}

.members-table thead tr th {
    text-transform: uppercase;
    color: #111;
    font-weight: 400;
    background-color: #f6f6f6;
}

    .members-table thead tr th:after {
        display: none;
    }

.table-hover.members-table tbody tr:hover {
    background-color: #f8f8f8;
}

.members-table tbody tr td {
    padding: 10px;
}

    .members-table tbody tr td .name {
        display: block;
        font-size: 14px;
        color: #2c2e2f;
        font-weight: 700;
    }

        .members-table tbody tr td .name + span {
            font-size: 12px;
            color: #9d9d9d;
        }

    .members-table tbody tr td .email {
        color: #9d9d9d;
        cursor: default;
    }

        .members-table tbody tr td .email:hover {
            color: #848484;
        }

    .members-table tbody tr td.user-cb {
        width: 1%;
    }

    .members-table tbody tr td.user-image {
        width: 1%;
    }

@media screen and (max-width:768px) {
    .members-table tbody tr td.user-image {
        display: none;
    }
}

.members-table tbody tr td.user-image img {
    width: 100%;
    min-width: 42px;
    height: auto !important;
}

.members-table tbody tr td.user-id {
    color: #9d9d9d;
    white-space: nowrap;
    width: 15%;
}

.members-table tbody tr td.action-links {
    width: 20%;
    white-space: nowrap;
}

@media screen and (max-width:768px) {
    .members-table tbody tr td.action-links {
        width: 25%;
    }
}

.members-table tbody tr td.action-links a {
    display: block;
    font-size: 11px;
}

    .members-table tbody tr td.action-links a:hover {
        zoom: 1;
        -webkit-opacity: .8;
        -moz-opacity: .8;
        opacity: .8;
        -ms-filter: alpha(Opacity=80);
        filter: alpha(opacity=80);
    }

    .members-table tbody tr td.action-links a.edit {
        color: #8dc63f;
    }

    .members-table tbody tr td.action-links a.delete {
        color: #cc3f44;
    }

    .members-table tbody tr td.action-links a + a {
        margin-top: 5px;
    }

.members-table-actions {
    position: relative;
    margin-top: 5px;
}

@media screen and (max-width:768px) {
    .members-table-actions {
        text-align: center;
        margin-bottom: 20px;
    }
}

.members-table-actions .selected-items, .members-table-actions .selected-actions {
    display: inline-block;
}

    .members-table-actions .selected-items span {
        font-weight: 700;
        color: #2c2e2f;
    }

    .members-table-actions .selected-items + .selected-actions {
        margin-left: 30px;
    }

    .members-table-actions .selected-actions .edit {
        color: #8dc63f;
    }

    .members-table-actions .selected-actions .delete {
        color: #cc3f44;
    }

.member-form-add-header .user-img, .member-form-add-header .user-name {
    display: inline-block;
    vertical-align: middle;
}

@media screen and (max-width:768px) {
    .member-form-add-header .user-img {
        margin-top: 20px;
    }
}

.member-form-add-header .user-name {
    padding-left: 20px;
}

    .member-form-add-header .user-name a {
        display: block;
        font-size: 23px;
    }

    .member-form-add-header .user-name span {
        display: block;
        color: #9d9d9d;
    }

.member-form-add-header + .member-form-inputs {
    margin-top: 20px;
}

.member-form-inputs .row:before {
    display: block;
    margin: 0 15px;
    height: 1px;
    background: #eaeaea;
    margin-bottom: 20px;
}

.member-form-inputs .row + .row {
    margin-top: 20px;
}

.member-form-inputs .control-label {
    font-size: 14px;
    line-height: 30px;
}


/*** TODO ** this is temporary */
.validation-summary-errors {
    background-color: #cc3f44;
    border-color: #cc3f44;
    color: #ffffff;
    padding: 10px 10px 5px 0;
    margin-bottom: 15px;
}

    .validation-summary-errors ul {
        list-style-type: disc;
        margin: 0;
    }

        .validation-summary-errors ul li {
            margin-bottom: 5px;
        }

.policy-widget {
    border: solid 1px #eee;
}

    .policy-widget.xe-widget.xe-counter-block {
        margin-bottom: 2px;
    }

    .policy-widget.xe-widget.xe-counter-block,
    .xe-widget.xe-counter-block .xe-upper,
    .xe-widget.xe-counter-block .xe-upper .xe-icon i {
        color: #4c5c6b;
    }

        .policy-widget.xe-widget.xe-counter-block.policy-widget .xe-upper .xe-icon {
            padding: 0;
            font-size: 10px;
        }

            .policy-widget.xe-widget.xe-counter-block.policy-widget .xe-upper .xe-icon i {
                font-size: 25px;
            }

        .policy-widget.xe-widget.xe-counter-block.policy-widget .xe-upper .xe-label {
            padding: 0;
        }

            .policy-widget.xe-widget.xe-counter-block.policy-widget .xe-upper .xe-label h3 {
                border: none;
                font-size: 13px;
                margin: 0 0 3px 0;
            }

        .policy-widget.xe-widget.xe-counter-block.policy-widget .xe-lower {
            padding: 0 10px 10px 10px;
        }

        .policy-widget.xe-widget.xe-counter-block .xe-lower .badge {
            display: inline;
            padding: 1px 6px;
            color: #4c5c6b;
            border-radius: 0;
        }

.landmark-address-detail-container {
}

.xe-widget.xe-progress-counter.landmark-address-detail {
    margin-top: 10px;
    margin-bottom: 0;
}

    .xe-widget.xe-progress-counter.landmark-address-detail .xe-upper .xe-icon i {
        background-color: #68b828;
        font-size: 22px;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .xe-widget.xe-progress-counter.landmark-address-detail .xe-lower {
        padding: 18px;
    }

    .xe-widget.xe-progress-counter.landmark-address-detail .badge {
        padding: 5px 10px;
    }

        .xe-widget.xe-progress-counter.landmark-address-detail .badge:last-child {
            margin: 15px 15px 0 0;
        }

/*this needs to be more specific*/
.xe-widget.xe-progress-counter .xe-lower strong {
    font-size: 13px;
}

.pointer {
    cursor: pointer;
    cursor: hand;
}

.login-page {
    background: url(../../Content/Images/abstract-office.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*this is the crop preview */
/*.img-container {
	width: 768px;
	height: 500px;
}*/

.member-photo.dropzone {
}

    .member-photo.dropzone .dz-default.dz-message {
        width: 450px;
        height: 450px;
        background-image: url("/assets/images/user-dropzone.png");
        -webkit-background-size: 225px 225px;
        -moz-background-size: 225px 225px;
        background-size: 225px 225px;
        margin-left: -137px;
        margin-top: -102.5px;
    }

.changed-char {
    background-color: #C86464;
    color: #FFFFFF;
}

.notes-env .notes-list .list-of-notes li a .note-footer {
    font-size: 80%;
}

.notes-env .notes-list .list-of-notes li a span {
    margin-bottom: 5px;
}

.notes-env .notes-list .list-of-notes li a .note-footer .note-user {
    display: inline;
}

.notes-env .notes-list .list-of-notes li.current a {
    text-decoration: none;
    background-color: rgb(255, 254, 227);
}

    .notes-env .notes-list .list-of-notes li.current a strong {
        text-decoration: none;
        background-color: rgb(247, 255, 153);
    }

.notes-env .notes-list .write-pad textarea {
    font-weight: bold;
}

.drop-down-logout {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    display: block;
    padding: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    background-color: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    outline: none;
}

.capscan-address-search {
    float: right;
    margin-top: -27px;
}

@keyframes indicator-bar {
    from {
        top: 180px;
        opacity: 0;
    }
}

/*@keyframes eer-rating-bar {
	from {
		margin-top: -100px;
	}

	to {
		margin-left: 0;
		opacity: 1;
	}
}*/

.rating-container {
    min-height: 220px;
    margin-right: 5px;
    margin-bottom: 30px;
}

    .rating-container .main-heading {
        background-color: rgb(0, 142, 211);
        color: #fff;
        padding: 5px;
        font-size: 115%;
    }

    .rating-container .sub-heading {
        padding: 5px;
        text-align: center;
        font-weight: bold;
    }

    .rating-container .info-heading {
        padding: 5px;
        font-size: 80%;
        color: #000;
        font-style: italic;
    }

    .rating-container .rating-bar,
    .rating-container .indicator-bar {
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
        padding: 0 10px;
    }

    .rating-container .rating-bar {
    }

    .rating-container .rating-range {
        color: #000;
        font-size: 15px;
    }

    .rating-container .rating-letter {
        font-size: 200%;
        font-weight: bold;
        color: #fff;
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }

    .rating-container .a-bar,
    .rating-container .a-bar-e {
        background-color: #007F3D;
        width: 40%;

      .rating-range {
        color: #fff;
      }
    }

    .rating-container .a-bar-e {
        background-color: #CCDAEC;
    }

    .rating-container .b-bar,
    .rating-container .b-bar-e {
        width: 50%;
        background-color: #2C9F29;

        .rating-range {
          color: #fff;
        }
    }

    .rating-container .b-bar-e {
        background-color: #A3B7D8;
    }

    .rating-container .c-bar,
    .rating-container .c-bar-e {
        width: 60%;
        background-color: #9DCB3C;
    }

    .rating-container .c-bar-e {
        background-color: #89A2C9;
    }

    .rating-container .d-bar,
    .rating-container .d-bar-e {
        width: 70%;
        background-color: #FFF200;
    }

    .rating-container .d-bar-e {
        background-color: #7390B9;
    }

    .rating-container .e-bar,
    .rating-container .e-bar-e {
        width: 80%;
        background-color: #F7AF1D;
    }

    .rating-container .e-bar-e {
        background-color: #C7C0BF;
    }

    .rating-container .f-bar,
    .rating-container .f-bar-e {
        width: 90%;
        background-color: #ED6823;
    }

    .rating-container .f-bar-e {
        background-color: #BAAFAF;
    }

    .rating-container .g-bar,
    .rating-container .g-bar-e {
        width: 100%;
        background-color: #E31D23;
        margin-bottom: 0;
    }

    .rating-container .g-bar-e {
        background-color: #ADA2A2;
    }

    .rating-circle {
        padding: 24px;
        border-radius: 100%;
        font-weight: bold;
        font-size: 24px;
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        width: 24px;
        height: 24px;
        align-items: center;
    }

    .efficiency-container {
        padding: 24px;
        border: 1px solid #808080;

        > .row:first-child {
          font-size: 14px;
          border: 2px solid #000;
          border-bottom: 0;

          > .sub-heading:nth-last-child(-n+2) {
            border-left: 2px solid #000;
          }
        }

        > .row:nth-child(2) {
          border: 2px solid #000;

          > .col-md-8 {
            padding: 10px 10px 10px 0;
          }
        }
    }

    .rating-division {
        height: 363px;
        border-left: 2px solid #000;
        padding: 10px 15px;
    }

    /* Set width of EPC rating above a certain resolution */
    @media screen and (min-width: 1395px) {
        .rating-width {
            width: 550px;
        }
    }
    /*******************************
	Indicators
********************************/
    .indicator-bar,
    .indicator-bar-static {
        position: relative;
        height: 44px;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        width: 100%;
        animation: indicator-bar;
        align-items: center;
        animation-duration: 4s;
        animation-timing-function: ease;
        padding: 0 !important;
        padding-left: 5px !important;
    }

    .indicator-bar-static {
        animation: none;
    }

        .indicator-bar .rating-letter,
        .indicator-bar-static .rating-letter {
            font-weight: bold;
            color: #fff;
            text-align: center;
            font-size: 90%;
            padding-top: 1px;
        }

        .indicator-bar:after,
        .indicator-bar:before,
        .indicator-bar-static:after,
        .indicator-bar-static:before {
            right: 100%;
            top: 0;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

    .indicator-bar-a,
    .ee-rating-a {
        background-color: #007F3D !important;
    }

        .indicator-bar-a:before {
            border-right-color: #007F3D;
            border-width: 22px;
        }

    .indicator-bar-b,
    .ee-rating-b {
        background-color: #2C9F29 !important;
    }

        .indicator-bar-b:before {
            border-right-color: #2C9F29;
            border-width: 22px;
        }

    .indicator-bar-c,
    .ee-rating-c {
        background-color: #9DCB3C !important;
        color: #000;
    }

        .indicator-bar-c:before {
            border-right-color: #9DCB3C;
            border-width: 22px;
        }

    .indicator-bar-d,
    .ee-rating-d {
        background-color: #FFF200 !important;
        color: #000;
    }

        .indicator-bar-d:before {
            border-right-color: #FFF200;
            border-width: 22px;
        }

    .indicator-bar-e,
    .ee-rating-e {
        background-color: #F7AF1D !important;
        color: #000;
    }

        .indicator-bar-e:before {
            border-right-color: #F7AF1D;
            border-width: 22px;
        }

    .indicator-bar-f,
    .ee-rating-f {
        background-color: #ED6823 !important;
        color: #000;
    }

        .indicator-bar-f:before {
            border-right-color: #ED6823;
            border-width: 22px;
        }

    .indicator-bar-g,
    .ee-rating-g {
        background-color: #E31D23 !important;
        color: #000;
    }

        .indicator-bar-g:before {
            border-right-color: #E31D23;
            border-width: 22px;
        }

    .indicator-bar-a-i,
    .ei-rating-a {
        background-color: #CCDAEC !important;
        color: #000;
    }

        .indicator-bar-a-i:before {
            border-right-color: #CCDAEC;
            border-width: 22px;
        }

    .indicator-bar-b-i,
    .ei-rating-b {
        background-color: #A3B7D8 !important;
        color: #000;
    }

        .indicator-bar-b-i:before {
            border-right-color: #A3B7D8;
            border-width: 22px;
        }

    .indicator-bar-c-i,
    .ei-rating-c {
        background-color: #89A2C9 !important;
        color: #000;
    }

        .indicator-bar-c-i:before {
            border-right-color: #89A2C9;
            border-width: 22px;
        }

    .indicator-bar-d-i,
    .ei-rating-d {
        background-color: #7390B9 !important;
        color: #000;
    }

        .indicator-bar-d-i:before {
            border-right-color: #7390B9;
            border-width: 22px;
        }

    .indicator-bar-e-i,
    .ei-rating-e {
        background-color: #C7C0BF !important;
        color: #000;
    }

        .indicator-bar-e-i:before {
            border-right-color: #C7C0BF;
            border-width: 22px;
        }

    .indicator-bar-f-i,
    .ei-rating-f {
        background-color: #BAAFAF !important;
        color: #000;
    }

        .indicator-bar-f-i:before {
            border-right-color: #BAAFAF;
            border-width: 22px;
        }

    .indicator-bar-g-i,
    .ei-rating-a {
        background-color: #ADA2A2 !important;
        color: #000;
    }

        .indicator-bar-g-i:before {
            border-right-color: #ADA2A2;
            border-width: 22px;
        }

    #selected-measures .list-group-item.active,
    #deselected-measures .list-group-item.active {
        z-index: 2;
        color: #2c2e2f;
        background-color: #ffdddd;
        border-color: #ADA2A2;
    }

    #deselected-measures .list-group-item.active {
        background-color: #e2ffde;
    }

    .measures-list .list-group .list-group-item {
        padding: 10px 10px;
        margin-bottom: 4px;
    }

        .measures-list .list-group .list-group-item .popover {
            width: 400px;
        }

        .measures-list .list-group .list-group-item:hover {
            background-color: #f3f3f3;
        }

    .measures-list .list-group-item-heading {
        margin-top: 0;
    }

    .measure-reason {
        padding: 3px 0;
    }

    .measure-target {
        min-height: 75px;
    }

    .popover-content h4 {
        margin-top: 20px;
    }

    .with-pointer {
        cursor: pointer;
    }

    .epc-summary-row {
    }

        .epc-summary-row .xe-widget.xe-counter-block {
            margin-bottom: 3px;
        }

            .epc-summary-row .xe-widget.xe-counter-block .xe-upper .xe-label,
            .epc-summary-row .xe-widget.xe-counter-block .xe-upper .xe-icon {
                padding: 3px;
            }

    .epc-section-errors,
    .epc-section-warnings {
        min-height: 50px;
        padding: 0 10px;
    }

        .epc-section-errors ul,
        .epc-section-warnings ul {
            margin: 0;
            padding: 10px;
            list-style-type: disc;
        }

        .epc-section-errors li,
        .epc-section-warnings li {
            margin-bottom: 10px;
            color: #4a4a4a;
        }

    .list-group-epc-section .list-group-item {
        min-height: 40px;
        position: relative;
    }

    .list-group-epc-section .popover {
        min-width: 320px;
    }

    .list-group-epc-section .popover-content {
        min-width: 320px;
    }

    .list-group-epc-section .popover-title {
        background-color: #cc3f44;
        color: #fff;
    }

    .list-group-epc-section .popover:has(.epc-section-warnings) .popover-title {
        background-color: #ffa200;
        color: #fff;
    }

    .list-group-epc-section .badge {
        font-size: 12px;
    }

    .select2-container-disabled .select2-chosen {
        background-color: #f4f4f4;
    }

    .assessment-status-lodged {
        background-color: #68b828;
    }

    .assessment-status-failed {
        background-color: #cc3f44;
    }

    .assessment-status-new {
        background-color: #7c38bc;
    }

    .dataTable-complete-date-status-green {
        background-color: #68b828;
    }

    .dataTable-complete-date-status-amber {
        background-color: #FFBF00;
    }

    .dataTable-complete-date-status-red {
        background-color: #FF0000;
    }

    .dataTable-complete-date-status-black {
        background-color: #000000;
        color: #FFFFFF;
    }

    .dataTable-complete-date-status-green,
    .dataTable-complete-date-status-amber,
    .dataTable-complete-date-status-red,
    .dataTable-complete-date-status-black {
        font-size: 90%;
        padding: 5px;
    }

    .assessment-status-submitted-not-lodged,
    .assessment-status-submitted-failed-lodgement,
    .assessment-status-failed-lodgement,
    .assessment-status-removed,
    .assessment-status-notforissue,
    .assessment-status-submitted,
    .assessment-status-onhold,
    .assessment-status-completed,
    .assessment-status-in-progress {
        background-color: #777;
    }

    .assessment-status-lodged,
    .assessment-status-failed,
    .assessment-status-new,
    .assessment-status-submitted-not-lodged,
    .assessment-status-submitted-failed-lodgement,
    .assessment-status-failed-lodgement,
    .assessment-status-removed,
    .assessment-status-notforissue,
    .assessment-status-submitted,
    .assessment-status-onhold,
    .assessment-status-completed,
    .assessment-status-in-progress {
        font-size: 90%;
        padding: 5px;
    }


    /*Carousel*/
    #DemoCarousel {
        border: 1px solid #ccc;
    }

        #DemoCarousel .item {
            background: #fffdef;
            text-align: center;
            padding-left: 50px;
            padding-right: 50px;
            padding-bottom: 30px;
            min-height: 80px !important;
        }

        #DemoCarousel h3 {
            margin: 0;
            color: black;
            padding-top: 20px;
            font-size: 20px;
        }

        #DemoCarousel .carousel-caption {
            left: 20%;
            right: 20%;
            padding-bottom: 30px;
        }

        #DemoCarousel .carousel-indicators {
            bottom: 0 !important;
        }

    .carousel-control {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 10%;
        opacity: 0.9;
        filter: alpha(opacity=90);
        font-size: 12px;
        color: #005f94;
        text-align: center;
        text-shadow: none;
    }

        .carousel-control.left {
            background-image: none;
        }

        .carousel-control.right {
            left: auto;
            right: 0;
            background-image: none;
        }

        .carousel-control:hover,
        .carousel-control:focus {
            outline: 0;
            color: #005f94;
            text-decoration: none;
            opacity: 1;
            filter: alpha(opacity=100);
        }

        .carousel-control .icon-prev,
        .carousel-control .icon-next,
        .carousel-control .glyphicon-chevron-left,
        .carousel-control .glyphicon-chevron-right {
            position: absolute;
            top: 50%;
            z-index: 5;
            display: inline-block;
            font-size: 15px;
        }

        .carousel-control .icon-prev,
        .carousel-control .glyphicon-chevron-left {
            left: 50%;
            margin-left: -10px;
        }

        .carousel-control .icon-next,
        .carousel-control .glyphicon-chevron-right {
            right: 50%;
            margin-right: -10px;
        }

        .carousel-control .icon-prev,
        .carousel-control .icon-next {
            width: 20px;
            height: 20px;
            margin-top: -10px;
            font-family: serif;
        }

            .carousel-control .icon-prev:before {
                content: '\2039';
            }

            .carousel-control .icon-next:before {
                content: '\203a';
            }

    .carousel-indicators {
        position: absolute;
        bottom: 10px;
        left: 50%;
        z-index: 15;
        width: 60%;
        margin-left: -30%;
        padding-left: 0;
        list-style: none;
        text-align: center;
    }

        .carousel-indicators li {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin: 1px;
            text-indent: -999px;
            border-radius: 10px;
            cursor: pointer;
            background-color: #c2ddee;
            border: none;
        }

        .carousel-indicators .active {
            width: 6px;
            height: 6px;
            margin: 1px;
            background-color: #173863;
        }

    .carousel-caption {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 20px;
        z-index: 10;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #ffffff;
        text-align: center;
    }

        .carousel-caption .btn {
            text-shadow: none;
        }

    .top10 {
        margin-top: 10px;
    }

    /* Recommendations list */

    .recommendations-label{
        font-size: 14px;
        padding-left: 5px;
    }

    .reccommendation-list-item:hover {
        background: #eee;
        transition: ease-in-out 0.1s;
    }
/* Member Wizard Breadcrumb */
.memberwizardbreadcrumb {
    display: inline-block;
    text-align: center;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border-radius: 5px;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    /*counter-reset: flag;*/
    /*background: linear-gradient(#689976, #ACDACC);*/
    background: linear-gradient(rgb(13, 121, 189), rgb(13, 121, 189));
    font-family: 'Merriweather Sans', arial, verdana;
}

        .memberwizardbreadcrumb a {
            text-decoration: none;
            outline: none;
            display: block;
            float: left;
            font-size: 12px;
            line-height: 36px;
            color: white;
            padding: 0 10px 0 40px;
            position: relative;
        }
            /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
            .memberwizardbreadcrumb a:first-child {
                padding-left: 46px;
                border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
            }

                .memberwizardbreadcrumb a:first-child:before {
                    left: 14px;
                }

            .memberwizardbreadcrumb a:last-child {
                border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
                padding-right: 20px;
            }

            /*adding the arrows for the memberwizardbreadcrumbs using rotated pseudo elements*/
            .memberwizardbreadcrumb a:after {
                content: '';
                position: absolute;
                top: 0;
                right: -18px; /*half of square's length*/
                width: 36px;
                height: 36px;
                /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
                transform: scale(0.707) rotate(45deg);
                /*we need to prevent the arrows from getting buried under the next link*/
                z-index: 1;
                /*background: #666;
	background: linear-gradient(135deg, #666, #333);*/
                box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
                /*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
                border-radius: 0 5px 0 50px;
            }
            /*we dont need an arrow after the last link*/
            .memberwizardbreadcrumb a:last-child:after {
                content: none;
            }
            /*we will use the :before element to show numbers*/
            .memberwizardbreadcrumb a:before {
                /*content: counter(flag);*/
                /*counter-increment: flag;*/
                border-radius: 100%;
                width: 20px;
                height: 20px;
                line-height: 20px;
                margin: 8px 0;
                position: absolute;
                top: 0;
                left: 30px;
                background: #444;
                background: linear-gradient(#444, #222);
                font-weight: bold;
            }

    .flat a, .flat a:after {
        background: white;
        color: black;
        transition: all 0.5s;
    }

        .flat a:before {
            background: white;
            box-shadow: 0 0 0 1px #ccc;
        }

        .flat a:hover, .flat a.active,
        .flat a:hover:after, .flat a.active:after {
            /*background: #9EEB62;*/
            background: rgb(13, 121, 189);
            color: white;
        }


    /* Mobile menu icons white */
    .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a {
        color: #ffffff;
    }

    /* Display Twitter feed over content */
    @media screen and (max-width: 550px) {
        #chat,
        #chat.fixed {
            position: absolute !important;
        }

        .page-container #chat {
            left: 0 !important;
            width: 100% !important;
        }

        .chat-open .page-container {
            left: 0 !important;
        }
    }


    /* Table styles */
    .dataTables_wrapper {
        width: 100%;
        overflow-x: auto;
    }

        .dataTables_wrapper table.dataTable thead > tr > th {
            min-width: 90px;
        }

    .table > thead > tr > td:after, .table > thead > tr > th:after {
        background-color: transparent;
    }

    tr.selected {
        background-color: rgba(0, 0, 0, 0.03);
    }

    tr.selected {
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* Fix content displaying out of view on mobile devices */
    @media screen and (max-width: 768px) {
        .sidebar-menu.collapsed + .main-content footer.main-footer.sticky {
            left: 0px !important;
        }

        .form-group {
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .visible-xs {
            display: block !important;
        }
    }
    /*This will be moved - validation warnings - the margin left should not be needed, as it will be in a column*/
    span.field-validation-warning {
        display: block;
        margin-left: 34%;
        margin-bottom: 3px;
        margin-top: 3px;
        color: #ffa200;
    }
    /* HELPERS / Media Query Specfics. */
    .flex-end {
        display: flex;
        justify-content: flex-end;
    }

    .padding-right-2 {
        padding-right: 2px !important;
    }

    .flex {
        display: flex;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

/* Hide @ 4k Resolution*/
@media (min-width: 3840px) {
    .hidden-xl {
        display: none !important;
    }
}

/* Edge-case resolution in-between mobile + tablet view */
@media (max-width: 768px) {
    .sidebar-footer,
    .epc-section-carousel-wrapper {
        display: none !important;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}
