@font-face {
    font-family: 'NEOrangeBold';
    src: url('../fonts/NE Orange-Bold.otf');
}

@font-face {
    font-family: 'NEOrange';
    src: url('../fonts/NE Orange-Reg.otf');
}

@font-face {
    font-family: 'AvenirNextRegular';
    src: url('../fonts/AvenirNext-Regular.ttf');
}

/* Helper classes */

:root {
    --smas-green: #3aaa35;
    --smas-green-20: rgb(58 170 53 / 0.20);
    --smas-green-40: rgb(58 170 53 / 0.40);
    --smas-green-60: rgb(58 170 53 / 0.60);
    --smas-green-80: rgb(58 170 53 / 0.60);
    --smas-white: #FFF;
    --smas-orange: #ed4f33;
    --smas-orange-20: rgb(237 79 51 / 0.20);
    --smas-orange-40: rgb(237 79 51 / 0.40);
    --smas-orange-60: rgb(237 79 51 / 0.60);
    --smas-orange-80: rgb(237 79 51 / 0.80);
    --smas-yellow: #fecc16;
    --smas-yellow-20: rgb(254 204 22 / 0.10);
    --smas-yellow-40: rgb(254 204 22 / 0.40);
    --smas-yellow-60: rgb(254 204 22 / 0.60);
    --smas-yellow-80: rgb(254 204 22 / 0.80);
    --smas-black: #2b2a29;
    --smas-grey: #e7eaec;
    --smas-dark-green: #064c51;
    --smas-font: 'NEOrangeBold', sans-serif;
    --smas-sub-font: 'AvenirNextRegular', sans-serif;
}

.no-select {
    pointer-events: none !important;
    cursor: auto !important;
}

.m-0 {
    margin: 0 !important;
}

.nav-header {
    background-color: var(--smas-black);
    color:var(--smas-white);
}

/* Flex classes */

.inline-block{
    display:inline-block !important;
}

.flex-expand {
    flex-grow: 1;
}

.d-flex {
    display: flex;
}

.d-flex-md {
    display: block;
}

.flex-valign {
    align-items: center;
}

.flex-col {
    flex-direction: column;
}

@media (min-width: 768px) {
    .d-flex-md {
        display: flex;
    }
}

/* Background Classes */

.bg-white {
    background-color: white;
}

.infoboxes {
    font-weight: 500;
    padding: 3px 6px;
    margin-right: 5px;
    display: inline-block;
    color: #666;
    background-color: #ddece9;
    border-bottom: 2px solid #019390;
}

/* DASHBOARD CLASSES*/

.sub-font{
    font-family: var(--smas-sub-font);
}

.text-orange {
    color: var(--smas-orange);
}

.text-white {
    color: var(--smas-white);
}

.text-smas-lightgreen {
    color: var(--smas-green);
}

.MDNavBar {
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--smas-black);
    color: var(--smas-green-60);
    margin: 5px 0 5px 0;
    cursor: pointer;
    border-radius:1em;
}

    .MDNavBar.active {
        color: var(--smas-green) !important;
        font-weight: 600;
    }

    .MDNavBar:hover {
        color: var(--smas-green);
    }

.MDAddNavBar {
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--smas-black);
    color: var(--smas-orange-60);
    margin: 5px 0 5px 0;
    cursor: pointer;
    border-radius: 1em;
}

    .MDAddNavBar.active {
        color: var(--smas-orange) !important;
        font-weight: 600;
        padding-right: 10px;
    }

    .MDAddNavBar:hover {
        color: var(--smas-orange);
    }

.halfsize-left {
    width: calc(50% - 2px);
    margin-right: 2px !important;
}

.halfsize-right {
    width: calc(50% - 2px);
    margin-left: 2px !important;
}

.RecTabs {
    width: calc(20% - 4px);
    margin-left:2px;
    margin-right:2px;
    float: left;
    white-space:nowrap;
    overflow:hidden;
    padding:10px;
    cursor: pointer;
}

.RecTabs .active{
    color:var(--smas-black);
    font-weight:600;
}

.RecTabsPASHidden {
    width: 80%;
    float: left;
    margin: 0;
    cursor: pointer;
}

.GreenBlock {
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--smas-black);
    color: var(--smas-black) !important;
    margin: 5px 0 5px 0;
    border-radius: 1em;
}

.GreenBlock > h4 {
    color: var(--smas-green);
}


.OrangeBlock {
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--smas-black);
    color: var(--smas-black) !important;
    margin: 5px 0 5px 0;
    border-radius: 1em;
}
.OrangeBlock > h4{
    color:var(--smas-yellow);
}

.RedBlock {
    padding: 10px 20px 10px 20px;
    border:1px solid var(--smas-black);
    color: var(--smas-black) !important;
    margin: 5px 0 5px 0;
    border-radius:1em;
}

.RedBlock > h4 {
    color: var(--smas-orange);
}


.GreyBlock {
    padding: 10px 20px 10px 20px;
    border: 1px solid rgba(91, 91, 91, 1);
    color: rgba(91, 91, 91, 1);
    margin: 5px 0 5px 0;
}

.yourWorksafeJourney {
    position: relative;
    z-index: 1;
    padding-inline-start: 0px;
}

    .yourWorksafeJourney li {
        list-style: none;
        float: left;
        width: calc(20% - 4px);
        margin-left: 2px;
        margin-right: 2px;
        position: relative;
        text-align: center;
        font-size: 1.05em;
        padding: 10px 0px 10px 0px;
    }

        .yourWorksafeJourney li:hover {
            font-weight: 600;
            cursor: pointer;
        }

.progress-bar {
    background-color: var(--smas-grey) !important;
    padding: 5px 4px 5px 4px;
    font-size: 1.05em;
    height: 37px;
    line-height: 160%;
    color: #014a4c;
    margin: 0px 1px 0px 1px;
    overflow: hidden;
    border: 0;
}

    .progress-bar.progress-bar-smas {
        border-top: 6px solid var(--smas-green);
        font-weight: 600;
        color: var(--smas-black);
    }

.progress-bar-success {
    background-color: var(--smas-grey) !important;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 4px solid var(--smas-green) !important;
    color: var(--smas-green) !important;
}

.progress-bar-failed {
    background-color: var(--smas-grey) !important;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 4px solid var(--smas-orange) !important;
    color: var(--smas-orange) !important;
}


.incomTimeline {
    position: relative;
    z-index: 1;
}


.locked {
    color: #aaa !important;
    border-top: 4px solid #aaa !important;
}

.GreenBox {
    color: var(--smas-black);
    font-weight: 600;
    border-radius:1em;
    border:1px solid var(--smas-black);
}

    .GreenBox:hover {
        color:var(--smas-green);
    }

    .GreenBox:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f00c";
        font-size: 2em;
        color: var(--smas-green) !important;
    }

    .GreenBox:hover:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f06e";
        font-size: 2em;
        color: var(--smas-green) !important;
    }

    .GreenBox:after {
        font-weight: 400;
        content: "View your Assessment";
    }

.OrangeBox {
    color: var(--smas-black);
    font-weight: 600;
    border-radius: 1em;
    border: 1px solid var(--smas-black);
}

    .OrangeBox:hover {
        color: var(--smas-orange);
    }

    .OrangeBox:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f071";
        font-size: 2em;
        color: var(--smas-orange) !important;
    }

    .OrangeBox:hover:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        content: "\f071";
        font-size: 2em;
        color: var(--smas-orange) !important;
    }


.dashMenu {
    min-height: 590px;
}


@media (min-width:1200px) {
    #dashMenuArea {
        padding-right: 4px;
    }

    #dashActionArea {
        padding-left: 4px;
    }
}

@media (max-width: 1200px) {

    .title-action {
        text-align: center;
        padding-top: 5px;
    }

    .imgs {
        padding: 10px;
    }

    #expClient {
        margin-right: 15px;
    }

    .dashMenu {
        min-height: 100%;
    }

    #ActionZone_btnExportPASDocs {
        float: right;
        margin-right: 15px;
    }
}

@media (max-width: 992px) {

    .title-action {
        text-align: center;
        padding-top: 5px;
    }

    .imgs {
        padding: 10px;
        float: none;
    }

    .profileexport {
        float: none !important;
    }

    .oaimagespad {
        float: none !important;
    }

    #expClient {
        margin-right: 15px;
    }

    #ActionZone_btnExportPASDocs {
        float: none;
        margin-right: 0px;
    }

    .halfsize-left {
        width: 100% !important;
        margin-right: 0px !important;
    }

    .halfsize-right {
        width: 100% !important;
        margin-left: 0px !important;
    }
}

/* NEW CLASSES - 2019 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--smas-font);
    font-style:normal;
    
}

.text-smas {
    color: var(--smas-green) !important;
}

.text-warning {
    color: var(--smas-orange);
}

.form-control.required {
    border: 1px solid var(--smas-orange) !important;
}

.checkbox.required input[type=checkbox] + label::before {
    border: 1px solid var(--smas-orange);
}

.checkbox.required label {
    color: var(--smas-orange);
}

.sweet-alert {
    border-radius: 20px !important;
}

/** TOOLTIP BROUGHT IN FROM v4 */

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

    .tooltip.show {
        opacity: 0.9;
    }

    .tooltip .arrow {
        position: absolute;
        display: block;
        width: 0.8rem;
        height: 0.4rem;
    }

        .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
        bottom: 0;
    }

        .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
            top: 0;
            border-width: 0.4rem 0.4rem 0;
            border-top-color: #000;
        }

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
        left: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            right: 0;
            border-width: 0.4rem 0.4rem 0.4rem 0;
            border-right-color: #000;
        }

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
        top: 0;
    }

        .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            bottom: 0;
            border-width: 0 0.4rem 0.4rem;
            border-bottom-color: #000;
        }

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
        right: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
            left: 0;
            border-width: 0.4rem 0 0.4rem 0.4rem;
            border-left-color: #000;
        }

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.25rem;
}



/*0000000000000000000000*/

/*
 *
 *   SMAS - Additional classes for SMAS
 *   version 1
 *
*/

.checkbox input[type=checkbox] + label::before {
    border: 1px solid #777;
}

.btn{
    font-size: 16px !important;
    text-transform:uppercase !important;
}

.btn-smas-orange{
    background-color:var(--smas-orange);
    color:var(--smas-white) !important;
}
    .btn-smas-orange.outline {
        border: 1px solid var(--smas-orange);
        color: var(--smas-black) !important;
        background-color: var(--smas-white);
    }

.btn-smas-green{
    background-color:var(--smas-green);
    color:var(--smas-white) !important;
}
    .btn-smas-green.outline {
        border: 1px solid var(--smas-green);
        color: var(--smas-black) !important;
        background-color: var(--smas-white);
    }

.btn-smas-black{
    background-color:var(--smas-black);
    color:var(--smas-white) !important;
}

    .btn-smas-black.outline {
        border: 1px solid var(--smas-black);
        color: var(--smas-black) !important;
        background-color: var(--smas-white);
    }

.btn-smas-yellow {
    background-color: var(--smas-yellow);
    color: var(--smas-white) !important;
}
    .btn-smas-yellow.outline {
        border: 1px solid var(--smas-yellow);
        color: var(--smas-black) !important;
        background-color: var(--smas-white);
    }


.panel-smas {
    border-color: var(--smas-black);
}
    .panel-smas > .panel-heading {
        border-bottom: 1px solid var(--smas-black);
    }

    .panel-smas > .panel-footer {
        background-color: rgba(0,0,0,0);
        border-top: 1px solid var(--smas-black);
    }


.panel-success{
    border-color: var(--smas-green) !important;
}

.form-control:focus, .form-control:active
.single-line:focus {
    border-color: var(--smas-green) !important;
}

.search-choice {
    background: #99D2D8 !important;
    color: #000 !important;
    border: 0 !important;
}

.smas-list li.smas-warning-element {
  border-left: 6px solid var(--smas-yellow);
}
.smas-list li.smas-danger-element {
    border-left: 6px solid var(--smas-orange);
}
.smas-list li.smas-info-element {
  border-left: 6px solid #1c84c6;
}
.smas-list li.smas-success-element {
    border-left: 6px solid var(--smas-green);
}
.smas-list li.smas-standard-element{
    border-left:6px solid rgba(1, 74, 76, 1);
}


.logo-element{
  background-color: #FAFAFA !important;
}

.smas-list {
  list-style: none;
  margin: 0;
}
.smas-list li {
  background: #FFF;
  border: 1px solid var(--smas-black);
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 2px;
}
.smas-list li.warning-element {
  border-left: 3px solid var(--smas-yellow);
}
.smas-list li.danger-element {
  border-left: 3px solid var(--smas-orange);
}
.smas-list li.info-element {
  border-left: 3px solid #1c84c6;
}
    .smas-list li.success-element {
        border-left: 3px solid var(--smas-green);
    }

.navbar-default {
    background-color: #2b2a29 !important;
}

.nav > li.active {
    border-color: #eb5e31 !important;
}

.nav-header {
    background-color: #2b2a29 !important;
    color:#FFF;
}


.memberheaderinline{
    display:inline;
}

/* OVERRIDE Bootstrap Styles to remove Radius */
body {
    background-color: var(--smas-black) !important;
    color: var(--smas-black) !important;
    font-family: var(--smas-sub-font) !important;
    font-size:14px !important;
}

.logo-element {
    background-color: #2b2a29 !important;
}
.label {
    border-radius: 0px !important;
}
.btn {
    border-radius: 2em !important;
}
.form-control {
    border: 0px !important;
    border: 1px solid #2b2a29 !important;
    border-radius: 0.2em !important;
    margin-top:0.5em !important;
    margin-bottom:0.5em !important;
}
.panel {
    border-radius: 1em!important;
}

.panel-title{
    border-radius-top-left:1em !important;
    border-radius-top-right:1em !important;
}

.panel-footer {
    border-radius-top-left:1em !important;
    border-radius-top-right:1em !important;
}

.ibox-title {
    border-radius-top-left: 1em !important;
    border-radius-top-right: 1em !important;
}

.ibox-footer {
    border-radius-top-left: 1em !important;
    border-radius-top-right: 1em !important;
}

.input-group-addon {
    border: 0px !important;
    border-bottom: 1px solid #2b2a29 !important;
}

.alert {
    border-radius: 0px !important;
}

.alert-smas {
    background-color: #D7E8E7;
    border: 1px solid rgba(1, 74, 76, 0.30);
}

.top-navigation .nav > li.active > a {
    color: #014a4c !important;
}

a.label, .label-info {
    background-color: rgba(1, 74, 76, 1) !important;
    font-size: 1em;
    display: inline-block;
}

.triangle{
    background-color:grey;
    color: white;
    padding: 5px 20px 5px 10px;
    text-decoration: none;
    font-family: Arial;
    position:relative
}

.triangle:after{
    background:lightgrey;
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-width: 0px 0px 13px 13px;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}

.triangle:hover{
   background: lightgrey;
   color: white;
}

.GrpRel {
    height: 0px;
    background: white;
    position: relative;
    left: 5px;
    top: -10px;
}

.GrpRel:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 40px solid #1c84c6;
    border-right: 40px solid white;
    width: 0;
}

.RegRel {
    height: 0px;
    background: white;
    position: relative;
    left: 5px;
    top: -10px;
}

.RegRel:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 40px solid rgb(39, 184, 209);
    border-right: 40px solid white;
    width: 0;
}

.note-editor .note-editable {
    min-height: 300px;
}

.note-editor.fullscreen {
    z-index: 9999 !important;
}

a {
   outline: 0 !important;
}

.dropzone {
    min-height: 160px !important;
}

.fa-spin-fast {
    animation: fa-spin 0.5s infinite linear; /* Faster spin: 0.5 seconds per rotation */
}

img.product-logo {
    
}

img.product-logo.masked {
    filter: grayscale(1) brightness(0.8);
}