.page-fade {
    opacity: 1;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

.page-fade:hover {
    opacity: 0.5;
}

.blur2 {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

.pageloading {
    position: fixed;
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    align-items: center;
    text-align: center;
    color: #fff;
}

.page-overlay {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
    height: 100%;
}
.loadr {
    margin: 0 auto;
    font-size: 10px;
    position: relative;
    display: inline-block;
    text-indent: -9999em;
    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
    border-left: 0.4em rgba(255, 255, 255, 0.9) solid;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.loadr,
.loadr:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.pulse-loading-animation {
    width: 600px;
    display: block;
    margin: 20px auto 0 auto;
    padding: 0;
    color: #E3E3E3;
}

.pulse-loading-animation svg {
    width: 99%;
    height: 99%;
    margin: 0 auto 0 auto;
}

.pulse-loading-animation #pulsar {
    stroke-dasharray: 281;
    -webkit-animation: dash 2.5s infinite linear forwards;
    animation: dash 2.5s infinite linear forwards;
}


/*Animation*/

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 814;
    }
    to {
        stroke-dashoffset: -814;
    }
}
@keyframes dash {
    from {
        stroke-dashoffset: 814;
    }
    to {
        stroke-dashoffset: -814;
    }
}

/* The Overlay (background) */

.help-overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0;
    position: fixed;
    /* Stay in place */
    ;
    z-index: 1001;
    /* Sit on top */
    ;
    left: 0;
    top: 0;
    background-color: rgb(255, 255, 255);
    /* Black w/opacity */
    overflow: hidden;
    /* Disable horizontal scroll */
    ;
    transition: 0.5s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.help-overlay>* {
    flex: 0 0 auto;
}

.help-overlay>.help-overlay-container {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
}

.help-overlay>.help-overlay-container>* {
    flex: 0 0 auto;
    overflow: hidden;
}

.help-overlay>.help-overlay-container>.content {
    flex: 1 1 auto;
    overflow-y: scroll;
}


/* Position the content inside the overlay */

.help-overlay-container {
    position: relative;
    width: 100%;
    /* 100% width */
    /* text-align: center; Centered text/links */
    vertical-align: top;
}

.help-overlay-content {
    position: relative;
    width: 100%;
    /* 100% width */
    /* text-align: center; Centered text/links */
    vertical-align: top;
}

.help-overlay-titlebar {
    display: block;
    width: 100%;
    background-color: #F4F4F4;
    border-bottom: 1px #DBDBDB solid;
}

.help-overlay-titlebar i {
    color: gray;
}

.helpboxtitlespan {
    padding: 7px 0 0 12px;
}

.help-overlay-close a {
    padding: 3px 8px 3px 8px;
    text-decoration: none;
    font-size: 28px;
    font-weight: lighter;
    line-height: 100%;
    color: #818181;
    display: block;
    /* Display block instead of inline */
    transition: 0.3s;
    /* Transition effects on hover (color) */
}


/* When you mouse over the navigation links, change their color */

.help-overlay-close a:hover,
.help-overlay-close a:focus {
    color: #FFFFFF;
    background-color: #FF0000;
}

.help-overlay-footer {
    display: block;
    width: 100%;
    background-color: #F4F4F4;
    padding: 5px;
    border-top: 1px #DBDBDB solid;
    font-size: 14px;
}

/* Dialog style */
.rex-dialog-container {
    font-family: Roboto, sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    background-color: rgba(0, 0, 0, 0.80);
    -moz-transition: background-color .2s linear, opacity .2s ease;
    transition: background-color .2s linear, opacity .2s ease;
    will-change: background-color, visibility, opacity;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999999;
}

.rex-dialog-container .rex-dialog-wrapper {
    position: absolute;
    min-width: 320px;
    max-width: 90%;
    max-height: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #ffffff;
    outline: none;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
}

.rex-dialog-container .rex-dialog-content {
    padding: 10px;
    text-align: center;
}

.rex-dialog-container .rex-dialog-confirm-icon {
    font-size: 5em;
    display: block;
    color: dodgerblue;
}

.rex-dialog-container .rex-dialog-warning-icon {
    font-size: 5em;
    display: block;
    color: orange;
}

.rex-dialog-container .rex-dialog-alert-icon {
    font-size: 5em;
    display: block;
    color: red;
}

.rex-dialog-container .rex-dialog-info-icon {
    font-size: 5em;
    display: block;
    color: dodgerblue;
}

.rex-dialog-container .rex-dialog-success-icon {
    font-size: 5em;
    display: block;
    color: green;
}

.rex-dialog-container .rex-dialog-error-icon {
    font-size: 5em;
    display: block;
    color: red;
}

.rex-dialog-container .rex-dialog-title {
    font-size: 2em;
    font-family: 'Open Sans Light', 'Open Sans', sans-serif;
}

.rex-dialog-container .rex-dialog-text {
    font-size: 12px;
    display: block;
    margin-top: 10px;
    color: #555;
}

.rex-dialog-container .rex-dialog-footer {
    border-top: 1px #DDDDDD solid;
}

.rex-dialog-container .rex-dialog-loading {
    min-width: 150px;
}

.rex-dialog-container .rex-dialog-loadingtext {
    text-align: center;
    color: white;
    font-size: 18px;
}


.rex-dialog-ok-button {
    height: 3em;
    line-height: 3em;
    text-align: center;
    border-radius: 0 0 5px 5px;
    color: #000000;
    background: #EEEEEE;
    font-size: 16px;
    cursor: pointer;
}

.rex-dialog-sure-button {
    float: left;
    height: 3em;
    width: 50%;
    line-height: 3em;
    text-align: center;
    background: #EEEEEE;
    font-size: 16px;
    cursor: pointer;
    color: #1C86EE;
    border-radius: 0 0 5px 0;
    position: relative;
}

.rex-dialog-cancel-button {
    float: left;
    height: 3em;
    width: 50%;
    line-height: 3em;
    text-align: center;
    background: #EEEEEE;
    border-right: 1px #DDDDDD solid;
    font-size: 16px;
    cursor: pointer;
    color: #000000;
    border-radius: 0 0 0 5px;
}

.rex-dialog-cancel-button:hover {
    background: cornflowerblue;
    color: #ffffff;
}

.rex-dialog-sure-button:hover {
    background: cornflowerblue;
    color: #ffffff;
}

.rex-dialog-ok-button:hover {
    background: cornflowerblue;
    color: #ffffff;
}


.dashboard-container {
    background: #F5F7FA;
    padding-top: 15px;
    padding-bottom: 20px;
}

.dashboard-box-row {
    background: white;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    /* border-radius: 10px; */
    border-radius: 0.25rem;
}

.dashboard-awards:hover .badge {
    background-color: white;
    border: 1px solid red;
    color: red;
}

.dashboard-box-row .badge {
    background-color: red;
    font-size: 10px;
    position: absolute;
    padding: 1px 2px 1px 2px;
    right: 2px;
    border-radius: 25px;
    height: 15px;
    width: 15px;
    line-height: 13px;
    text-align: center;
    color: white;
}

.dashboard-user-welcome {
    text-decoration: none;
}

.dashboard-user-welcome h1 {
    font-size: 1.2rem;
    display: inline-block;
    margin: 0;
}

.dashboard-user-welcome h4 {
    font-size: 14px;
    display: inline-block;
    color: gray;
    margin: 0;
}

.dashboard-user-welcome h5 {
    font-size: 13px;
    display: block;
    margin: 0;
    color: #555;

}


.dashboard-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    background-color: transparent;
}

.dashboard-table td,
.dashboard-table th {
    border: 1px solid #fcfcfc;
    padding: 8px;
    text-align: left;
}

.dashboard-table td {
    color: #555;
}

/* .dashboard-table tr:nth-child(even){background-color: #fcfcfc;} */

.dashboard-table tr:hover,
.dashboard-table tr:hover td {
    background-color: azure;
}

.dashboard-table th {
    text-align: left;
    /* background-color: #04AA6D; */
    background-color: #fcfcfc;
    font-weight: normal;
    color: cadetblue;
    background-color: yellow;
    background-color: gold;
    background-color: whitesmoke;
    color: black;
    color: #444;
    font-weight: 600;
    /* color: white; */
}





.http-status-message-content {
    text-align: center;
    padding: 10px;
}

.http-status-message-title {
    margin: 0;
    padding: 0;
    font-size: 6rem;
    text-align: center;
    padding: 10px 10px 0 10px;
    color: #ED642E;
    line-height: 80%;
}

.http-status-message-subtitle {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    text-align: center;
    color: #ED642E;
    margin-top: 5px;
}



.http-status-message-body {
    text-align: center;
    padding: 20px;
}

.http-status-message-body span {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    display: block;
}

.http-status-message-body span a {
    color: #576ADE;
}

.small-spinner {
    display: inline-block;
    border: 1px solid #f57fee;
    border-top: 1px solid #ffffff;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    animation: spinkf 2s linear infinite;
  }
  
  @keyframes spinkf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }










/* CK editor */
/*
 .ck .ck-reset .ck-editor .ck-rounded-corners {
    min-height: 500px !important;
    border: 2px dotted olive !important;
    background-color: yellow !important;
 }
 .ck-editor__editable {
    min-height: 500px !important;
    border: 2px dotted green !important;
    background-color: yellow !important;
 }

.ck-editor__editable_inline {
   min-height: 500px !important;
   border: 2px dotted blue;
   background-color: yellow !important;
}

:host ::ng-deep .ck-editor__editable_inline {
   min-height: 500px !important;
   border: 2px dotted red !important;
   background-color: yellow !important;
}
*/