/*
 *  This file can be used to set variables and supply global styling.  View specific 
 *  styling should be located the view's corresponding scss file.
 */
$enable-font-awesome: dynamic(true);

.impersonating-user--panel {
    left:50%!important;
    bottom:initial!important;
    right:initial!important;
    top:0!important;
    transform: translateX(-50%);
}

/**
    Styles for NpoSecurity Overrides
 */
.npoa-security--debugMode--hidden {
    position:relative!important;
    &:after {
        content: "HIDDEN";
        color: red;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px dotted red;
        background: rgba(255,0,0,0.5);
        text-align: center;
        padding-top: 6px;
    }
    &.npoa-security--debugMode--hidden--override {
        display:none;
    }
}
.npoa-security--debugMode--disabled:not(.npoa-security--debugMode--disabled--override) {
    position:relative!important;
    &:after {
        content: "DISABLED";
        color: red;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px dotted red;
        background: rgba(255,0,0,0.5);
        text-align: center;
        padding-top: 6px;
    }
}

.npoa-debug--component-name {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    color: #FFFFFF;
    padding: 2px;
    background: rgba(255,0,0,.5);
    pointer-events: none;
    z-index: 9999;
}
body.npoa-debug--show-component-names {
    .npoa-debug--component-wrap {
        border: 1px dashed rgba(255,0,0,.5)!important;
        box-sizing: border-box!important;
    }
    .npoa-debug--component-name {
        display: block;
    }
}