/* Johan 2025-02-07 Css file added. */
/* This file shall be manually synced between the Web, Mobile and WebAssembly projects. (Until we find a way to reuse the same file.) */

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* General variables */
:root {
    /* https://essitybrandworld.essity.com/visual-identity/colors */
    --essity-magenta: rgb(245, 0, 130); /* Essity Magenta color */
    --essity-dark-blue: rgb(0, 0, 80); /* Essity Dark Blue color */
    --essity-grey: rgb(136, 139, 141); /* Essity Grey color */
    --essity-grey-60: rgba(136, 139, 141, 0.6); /* Essity Grey color 60% */
    --essity-grey-20: rgba(136, 139, 141, 0.2); /* Essity Grey color 20% */
    --essity-grey-10: rgba(136, 139, 141, 0.1); /* Essity Grey color 10% Not really an Essity shade. */
    --essity-complementary-cyan: rgb(0, 153, 255); /* Essity Complementary Cyan color */
    --essity-complementary-cyan-60: rgb(0, 153, 255, 0.6); /* Essity Complementary Cyan color 60% */
    --essity-complementary-cyan-20: rgb(0, 153, 255, 0.2); /* Essity Complementary Cyan color 20% */
    --essity-complementary-green: rgb(0, 154, 68); /* Essity Complementary Green color */
    --essity-complementary-green-60: rgb(0, 154, 68, 0.6); /* Essity Complementary Green color 60% */
    --essity-complementary-green-20: rgb(0, 154, 68, 0.2); /* Essity Complementary Green color 20% */
    --essity-complementary-orange: rgb(255, 130, 0); /* Essity Complementary Orange color */
    --essity-complementary-orange-60: rgb(255, 130, 0, 0.6); /* Essity Complementary Orange color 60% */
    --essity-complementary-orange-20: rgb(255, 130, 0, 0.2); /* Essity Complementary Orange color 20% */

    font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; /*'Helvetica Neue', Helvetica, Arial, sans-serif; */ /* Fonts to use in order of priority. */
    font-size: 0.9rem;
}

.colorEssityMagenta {
    color: var(--essity-magenta);
}

.colorEssityDarkBlue {
    color: var(--essity-dark-blue);
}

.colorEssityComplimentaryCyan {
    color: var(--essity-complementary-cyan) !important;
}

.colorEssityComplimentaryGreen {
    color: var(--essity-complementary-green) !important;
}

.colorEssityComplimentaryOrange {
    color: var(--essity-complementary-orange) !important;
}

.colorEssityComplimentaryGrey60 {
    color: var(--essity-grey-60);
}

.colorEssityComplimentaryGrey20 {
    color: var(--essity-grey-20);
}

.colorLightOrange {
    color: #ffae42 !important;
}

.colorNiceGreen {
    color: #00cc44 !important;
}

.colorRed {
    color: #ff0000 !important;
}

.colorGold {
    color: gold;
}

.colorYellow {
    color: #ffd43b;
}

.H50PX {
    height: 50px !important;
}

.H60PX {
    height: 60px !important;
}

.H80PX {
    height: 80px !important;
}

.h-20 {
    height: 20%;
}

.h-33 {
    height: calc( 100% / 3);
}

.h-50 {
    height: 50%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.vh-5 {
    height: 5vh;
}

.vh-10 {
    height: 10vh;
}

.vh-20 {
    height: 20vh;
}

.vh-25 {
    height: 20vh;
}

.vh-30 {
    height: 30vh;
}

.vh-35 {
    height: 35vh;
}

.vh-40 {
    height: 40vh;
}

.vh-45 {
    height: 45vh;
}

.vh-50 {
    height: 50vh;
}

.vh-65 {
    height: 65vh;
}

.vh-95 {
    height: 95vh;
}