@font-face {
    font-family: 'Flama';
    font-weight: normal;
    src: url('/Styles/fonts/Flama-Book2.woff2') format('woff2');
}

@font-face {
    font-family: 'Flama';
    font-weight: bold;
    src: url('/Styles/fonts/Flama-Bold2.woff2') format('woff2');
}

@font-face {
    font-family: 'Flama';
    font-weight: 900;
    src: url('/Styles/fonts/Flama-Black2.woff2') format('woff2');
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #daeadb;
    font-size: 13px;
    padding: 0;
    margin: 0;
    font-family: 'Flama','Raleway', 'Open Sans',sans-serif, Arial
}

html, body {
    height: 100%;
}

.clear {
    clear: both
}

:root {
    --darkgreen: #1a4048;
    --darkgreenhover: #275759;
    --midgreen: #275759;
    --lightgreen: #d3ffa2;
    --green2: #55838d;
}

.greenPositive {
    background: #c7e0c8;
}

a {
    color: var(--darkgreen);
}

    a:hover {
        color: var(--darkgreenhover);
        )
    }

/* HEADER */
div#header_wrapper {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2)
}

div#topHeader {
    width: 90%;
    margin: auto;
    background: none;
    border: none;
    box-shadow: none;
}

    div#topHeader img.headerLogo {
        max-height: 50px
    }

#topHeader .right.menu {
    font-size: 18px;
}

#loginSignup {
    margin-right: 10px
}

#menuSidebarIcon {
    display: none
}

/* LOGIN */
#userLogged #headeruser_dd {
    color: var(--darkgreen);
    font-weight: 600
}

#userLogged .item {
    padding-right: 0
}

div.userAccessType {
    padding: 20px;
    margin-bottom: 20px;
    border: dotted 1px #dcdcdc;
    background: #f0f0f0
}

div.accessError {
    color: #9F3A38
}

    div.accessError > label, div.accessError .ui.sub.header {
        color: #9F3A38 !important
    }

    div.accessError input, div.questionErrored select, div.questionErrored textarea {
        background: #FFF6F6 !important;
        border: solid 1px #E0B4B4 !important;
        color: #9F3A38 !important
    }

.errorMessage {
    color: #9F3A38;
    line-height: 30px
}

/* BODY */
div.bodyWrapper {
    width: 90%;
    margin: auto;
    border: none;
}

div.confirmationStep {
    text-align: center;
    padding: 50px
}

/* GRID SELECTION */
tr.selectedRow {
    background: #C6E6FF
}

/* FOOTER */
/*footer{width:100%; height: 50px; margin-top:50px; text-align:center}*/

footer {
    width: 100%;
    bottom: 0;
    position: fixed;
    background: var(--darkgreen);
    color: #fff;
    text-align: center;
    padding: 10px;
}

    footer .row:before {
        content: "";
        display: inline-block;
        /*background: url(https://cph.greenclosetcreativesites.com/wp-content/uploads/2023/01/footer-logo-icon.png);*/
        width: 40px;
        height: 45px;
        position: relative;
        left: 0;
        /* top: 20px; */
        background-size: 40px;
    }

    footer .wrapper {
        max-width: 1200px;
        margin: auto;
        text-align: left;
    }

#copyright {
    line-height: 33px;
}

    #copyright a {
        color: #fff;
        margin: 0 3px;
    }

/* LOADER */
#appLoadingForm {
    display: none
}

#appLoading {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none
}

    #appLoading .ui.inverted.dimmer {
        background-color: rgba(255, 255, 255, 0.7)
    }

#appLoading2 {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none
}

    #appLoading2 .ui.inverted.dimmer {
        background-color: rgba(255, 255, 255, 0.7)
    }





#no-freeze-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.1s linear;
    opacity: 0;
    height: 100vh;
    transform: scale(10);
    z-index: -1;
    /* background: rgba(255, 255, 255, 0.8); */
}

.no-freeze-spinner #no-freeze-spinner {
    z-index: 9999;
    opacity: 0.5;
    transform: scale(1);
}

#no-freeze-spinner > div > div {
    animation-play-state: paused;
    border: 4px solid #0160c1;
    border-radius: 50%;
    animation: rotate 1s infinite linear;
    border-left-color: rgba(200, 200, 200, 0.4);
    width: 100%;
    height: 100%;
}

#no-freeze-spinner > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 2000px rgba(255, 255, 255, 0.8);
    width: 80px;
    height: 80px;
    padding: 5px;
    background: rgba(0,0,0,0.2);
}

.no-freeze-spinner #no-freeze-spinner div div {
    animation-play-state: running;
}

@keyframes loadicons {
    0% {
        transform: scale(0) translate3d(0, 0, 0);
    }

    11% {
        transform: scale(1.2) translate3d(0, 0, 0);
    }

    22% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    33% {
        transform: scale(0) translate3d(0, 0, 0);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

.no-freeze-spinner #no-freeze-spinner i {
    font-size: 34px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    color: #0160c1;
    width: 34px;
    height: 34px;
    line-height: 1;
    transform: scale(0) translate3d(0, 0, 0);
}

    .no-freeze-spinner #no-freeze-spinner i:nth-of-type(1) {
        animation: loadicons 3s infinite ease-in-out;
    }

    .no-freeze-spinner #no-freeze-spinner i:nth-of-type(2) {
        animation: loadicons 3s 1s infinite ease-in-out;
    }

    .no-freeze-spinner #no-freeze-spinner i:nth-of-type(3) {
        animation: loadicons 3s 2s infinite ease-in-out;
    }

/* OVERWRITES */
.ui.button {
    border-radius: 10px;
}

.ui.primary.buttons .button, .ui.primary.button {
    background: var(--darkgreen) !important;
}

    .ui.primary.buttons .button:hover, .ui.primary.button:hover {
        background: var(--darkgreenhover) !important;
    }

.ui.secondary.menu .active.item {
    background: var(--darkgreen);
}

/*******************/
/* FORM VALIDATION */
/*******************/
div.formVal {
    min-width: 280px;
    background: #fff6f6;
    color: #9f3a38;
    padding: 10px;
    font-weight: bold;
    border: solid 1px #e0b4b4;
    border-radius: 3px;
    line-height: normal;
    font-size: 12px;
    text-align: left;
    position: absolute;
    cursor: pointer
}

.valError {
    background: #fff6f6 !important;
    border: solid 1px #e0b4b4 !important;
    color: #9f3a38 !important;
    -webkit-transition: background-color 1000ms;
    -moz-transition: background-color 1000ms;
    -o-transition: background-color 1000ms;
    transition: background-color 1000ms;
}

.valOk {
    background: #bcf2b0;
    -webkit-transition: background-color 1000ms;
    -moz-transition: background-color 1000ms;
    -o-transition: background-color 1000ms;
    transition: background-color 1000ms;
}

/*******************/
/* TOOLTIP */
/*******************/
.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: 60px;
    }

        .tooltip .tooltiptext::after {
            content: " ";
            position: absolute;
            top: 100%; /* At the bottom of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.tooltiptext.large {
    width: 500px;
    margin-left: -250px;
}

.tooltiptext.xlarge {
    width: 700px;
    margin-left: -350px;
}

.tooltiptext.xxlarge {
    width: 900px;
    margin-left: -450px;
}


.errorMessage .wrong-user-password .underneath {
    color: black;
}

.errorMessage .wrong-user-password li b {
    color: #9F3A38;
}

.errorMessage .wrong-user-password > span {
    font-size: 16px;
}

.errorMessage ul {
    margin-left: -20px
}

/* Dashboard */
div.left-menu ul {
    list-style:none;
    padding:0;
    margin:0;
}

div.left-menu ul.menu li {
    text-indent:10px;
    line-height:40px;
    cursor:pointer;
    border-radius:5px;
}

    div.left-menu ul.menu li i {
        color: var(--darkgreen);
        text-indent: 0;
        vertical-align: middle;
        margin-right: 5px;
    }
    div.left-menu ul.menu li.active {
        color: white;
        background: var(--darkgreen);
    }

        div.left-menu ul.menu li.active i {
            color: white;
        }

    div.left-menu ul.menu li:hover {
        color:black;
        background: #d3ffa2;
    }
    div.left-menu ul.menu li:hover i {
        color: black;
    }