/* 
    Google FONTS 
    ==============================================
    Standards for text weights:
        Thin            100     
        Extra Light     200
        Light           300
        Regular         400
        Medium          500
        Semi-Bold       600
        Bold            700
        Black           900    

    DEFINED BREAKPOINTS IN BS4 :root { var.... }
    ==============================================
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;

*/

/* 
    Google font 'Yantramanav' 
    comes in: Thin (100 - unreadable), Light(300), Regular(400), Medium(500), Bold(700), Black(900)
*/
@import url('https://fonts.googleapis.com/css?family=Yantramanav:300,400,500,700,900&display=swap');
/*
    Google Font MONTSERRAT
    Used for HiU Logo and possible future emphasised headers
    comes in: 300,400,600,700,900
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:600,700&display=swap');

* {
    box-sizing: border-box;
  }

:root {
    --hiu-pink: #E71B6A;
    --hiu-pink-dark: #c52977;
    --hiu-pink-dark-70: rgba(197, 41, 119, .7);
    --hiu-blue-light: #70BCE7;
    --hiu-reviewer: #70BCE7;
    --hiu-blue-dark: #1d3be6;
    --hiu-violet: #8e37c4;
    --hiu-author: #8e37c4;
    --hiu-body-width: 1200px;
    --hiu-content-width: 1000px;
    --hiu-footer-background: #c52977;
    --hiu-warning: #FFC107;
    --hiu-bg-grey: #F3F3F4; /* dashboard grey */
    /* responsive breakpoints */
    --hiu-breakpoint-xs: 0;
    --hiu-breakpoint-sm: 576px;
    --hiu-breakpoint-md: 768px;
    --hiu-breakpoint-lg: 992px;
    --hiu-breakpoint-xl: 1200px;
}

html{
    scroll-behavior: smooth;
}  

body{
    padding: 0;
    margin: 0;
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Yantramanav', sans-serif;
    font-size: 12pt;
    color: #333;
    min-height: 100vh;
    max-width: var(--hiu-body-width);
}
    body.dark-theme {
        background-color: #F3F3F4;
    }

img {
    max-width: 100%;
    display: block;
}

/* remove text-decoration for all anchor links */
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
} 

/* PRINT MEDIA */
@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

/* 
    USER logged on but no avatar yet - display initials instead
*/

#no-avatar-placeholder {
    /*border: 2px solid var(--hiu-pink-dark-70);*/
    background-color: var(--hiu-pink-dark-70);
    border-radius: 50%;
    color: #666;
    display: table;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
    #no-avatar-placeholder span {
        display:table-cell;
        vertical-align:middle;
        height:40px;
        width:400px;
        text-align:center;
        padding: 0;
        color: white;
        text-transform: uppercase;
        font-weight: 700;
        transform: scaleX(1.3);
        padding-top: 3px;
    }


/* 
    MASTER GRID LAYOUT
    Part of the _HiULayout layout page
*/
#masterGrid {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    grid-template-rows: max-content max-content auto max-content;
    grid-template-areas:"nav nav nav" 
                        "banner banner banner" 
                        ". content ." 
                        "footer footer footer";
}
    #masterNavigation {grid-area: nav;}
    #masterBanner {grid-area: banner;}
    #masterContent {
        grid-area: content;
        margin-top: 1em;
    }
    #masterFooter {
        grid-area: footer;
        margin-top: 2rem;
    }
    @media screen and (max-width: 768px) {
        #masterGrid {grid-template-columns: 2rem 1fr 2rem;}
    }

    @media screen and (max-width: 576px) {
        #masterGrid {grid-template-columns: 1rem 1fr 1rem;}
    }


/* 
    BUSY animation which can be shown in the center of the screen
    Usage:
            <img class="hiu-busy" src="/App_Assets/images/logo/HiU-Busy.svg">

    Turn off in script after 1 second delay:
            $('.hiu-busy').delay(1000).fadeOut();
*/
img.hiu-busy{
    position: fixed;
    width:150px;
    height: 150px;
    left:50%;
    top:50%;
    transform: translate(-75px,-75px);
}

/*
    HEADER FONT DEFINITIONS
*/
h1{font-size: 2.0em;font-weight: 700;}
h2{font-size: 1.1em;font-weight: 200;}
h3{font-size: 1.0em;font-weight: 600;}
h4{font-size: 0.9em;font-weight: 400;}
h5{font-size: 0.8em;font-weight: 200;}
h6{font-size: 0.6em;font-weight: 200;}

/*
    ==========================================
    GLOBAL CLASSES
    ==========================================
*/
/* 
    Simple generic hover effects
*/
.grow-5 { transition: all 200ms ease-in-out;}
.grow-5:hover {transform: scale(1.05);}
.grow-10 { transition: all 200ms ease-in-out;}
.grow-10:hover {transform: scale(1.1);}
.grow-20 { transition: all 200ms ease-in-out;}
.grow-20:hover {transform: scale(1.2);}
.hover-shadow:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.32), 0 6px 12px rgba(0, 0, 0, 0.32);
}
.sticky-top-0 { position: sticky; top: 0;}
.sticky-top-50px { position: sticky; top: 50px;}

/* Wiggle effect (stops on hover) */
@keyframes wiggle {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    85% { transform: rotate(5deg); }
    95% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.wiggle {
    display: inline-block;
    animation: wiggle 2.5s infinite;
}
.wiggle:hover {
    animation: none;
}
/* fadeout effect */
@keyframes fadeout {
    0% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; display: none; }
}
.fadeout-1s {
    display: inline-block;
    opacity: 1;
    animation: fadeout 1s forwards;
    animation-delay: 1s;
}
.fadeout-3s {
    display: inline-block;
    opacity: 1;
    animation: fadeout 1s forwards;
    animation-delay: 3s;
}
.fadeout-5s {
    display: inline-block;
    opacity: 1;
    animation: fadeout 1s forwards;
    animation-delay: 5s;
}

/*
    Generic overflowing text truncate
*/
.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-word-wrap {
    white-space: normal;
    overflow-wrap: break-word;
}
/*
    Generic scrollbar
    <div class="hiu-scrollbar"> ...  </div>
    <div class="hiu-scrollbar hiu-scrollbar-pink"> ...  </div>
    <div class="hiu-scrollbar hiu-scrollbar-light"> ...  </div>
    <div class="hiu-scrollbar hiu-scrollbar-dark"> ...  </div>
*/
/* scrollbar width */
.hiu-scrollbar {
    overflow-y: auto;
}
    .hiu-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    /* Track */
    .hiu-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
        background-clip: content-box; /* THIS IS IMPORTANT */
    }
    /* Handle */
    .hiu-scrollbar::-webkit-scrollbar-thumb {
        background: #555;
        /*border-radius: 0 5px 5px 0;*/
        border-radius: 3px;
    }
    /* Handle on hover */
    .hiu-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    /*
        ALTERNATIVE COLORS
    */
    /* color alternative PINK: hiu-scrollbar hiu-scrollbar-pink */
    .hiu-scrollbar-pink::-webkit-scrollbar-thumb {
        background: var(--hiu-pink-dark);
    }
    /* color alternative LIGHT: hiu-scrollbar hiu-scrollbar-light */
    .hiu-scrollbar-light::-webkit-scrollbar-thumb {
        background: #e8e8e8;
    }
    /* color alternative DARK: hiu-scrollbar hiu-scrollbar-dark */
    .hiu-scrollbar-dark::-webkit-scrollbar-thumb {
        background: #383838;
    }
    /*
        ALTERNATIVE WIDTHS
    */
    .hiu-scrollbar-wide::-webkit-scrollbar {
        width: 16px;
    }
    .hiu-scrollbar-wide::-webkit-scrollbar-thumb {
        background-color: ##f1f1f1;
        border-right: 6px solid #ccc;
        border-radius: 0;
    }


/* 
    BACKGROUND STRIPES
*/
.bg-stripes{
    background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                #eee 10px,
                #eee 20px);
}
.bg-stripes-light{
    background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                #f8f8f8 10px,
                #f8f8f8 20px);
}

.bg-hiu-gradient {
    background: linear-gradient(180deg, #6bc1eb 6%, #e7308c 100%);
}
.bg-hiu-gradient-135deg {
    background: linear-gradient(135deg, #6bc1eb 6%, #e7308c 100%);
}
.bg-hiu-gradient-225deg {
    background: linear-gradient(225deg, #6bc1eb 6%, #e7308c 100%);
}

/*
    CURSOR
*/
.cursor-default{ cursor: default;}
.cursor-hand{ cursor: pointer;}

.hiu-hidden { display: none; }


/* 
    BLOCKQUOTE
    Usage:
        <blockquote cite="Albert Einstein">
            God does not play dice with the universe.
        </blockquote>

    Without a citation:
        <blockquote>
            God does not play dice with the universe.
        </blockquote>

    Grey box version with attribute box:
        <blockquote box-grey cite="Albert Einstein">
            God does not play dice with the universe.
        </blockquote>

    HiU pink box version with attribute box:
        <blockquote box-hiu cite="Albert Einstein">
            God does not play dice with the universe.
        </blockquote>

*/
blockquote{
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: #666;
    border-width: 2px 0;
    border-style: solid;
    border-color: #eee;
    padding: 1.0em 0 .7em;
    margin: 1.5em 0;
    position: relative;
    text-align: center;
}
        blockquote[box-grey]{
            background-color: #eee;
            border-radius: .3em;
        }
        blockquote[box-hiu]{
            background-color: var(--hiu-footer-background);
            border-radius: .3em;
            color: #eee;
        }
        blockquote:before {
            content: ' ';
            background: url('/App_Assets/images/left-quote-wide-light.svg') center center no-repeat;
            background-size: 30px;
            background-position-x: 50%;
            background-position-y: 0;
            top: -8px;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height:30px;
            position: absolute;  
            z-index: 1;
        }
        /* 
            __with_font_no_svg___blockquote:before {
                content: '\201C';
                position: absolute;
                top: -10px;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                width: 3rem;
                height: auto;
                max-height: 2rem;
                font: 4em/1.08em 'Sanchez', sans-serif;
                color: #bbb;
                text-align: center;
                border: 1px solid green;
                padding:0;
                margin:0;
            }
        */
        blockquote[box-grey]:before {background-color: transparent;}
        blockquote[box-hiu]:before {
            background: url('/App_Assets/images/left-quote-wide.svg') center center no-repeat;
            background-size: 30px;
            background-position-x: 50%;
            background-position-y: 0;
            background-color: transparent;
            top: -7px;
            color:#333;
        }

        /* cite attribute empty? or not available */
        blockquote[cite='']:after, blockquote:not([cite]):after {
            content: '';
        }
        blockquote:after {
            content: "\2013 \2003" attr(cite);
            display: block;
            text-align: right;
            font-size: 0.6em;
            font-style: italic;
            line-height: 2em;
            color: #E71B6A;
        }
        blockquote[box-grey]:after {
            margin-right: 1em;
        }
        blockquote[box-hiu]:after {
            margin-right: 1em;
        }
        @media screen and (max-width: 768px) {
            blockquote{font-size: 1.5em;}
        }
        @media screen and (max-width: 576px) {
            blockquote{font-size: 1.2em;}
            blockquote:before {
                background-size: 25px;
                top: -7px;
                height:25px;
            }            
            blockquote[box-hiu]:before {
                background-size: 25px;
                top: -6px;
            }
        }

/* 
    ROUND BUTTONS with BS4
 */
 .btn-circle.btn-sm { 
    width: 30px; 
    height: 30px; 
    padding: 6px 0px; 
    border-radius: 15px; 
    font-size: 8px; 
    text-align: center; 
} 
.btn-circle.btn-md { 
    width: 50px; 
    height: 50px; 
    padding: 7px 10px; 
    border-radius: 25px; 
    font-size: 10px; 
    text-align: center; 
} 
.btn-circle.btn-xl { 
    width: 70px; 
    height: 70px; 
    padding: 10px 16px; 
    border-radius: 35px; 
    font-size: 12px; 
    text-align: center; 
} 

.HiU-Pink{color: var(--hiu-pink);}
.HiU-Pink-Dark{color: var(--hiu-pink-dark);}

.bg-HiU-Pink{
    background-color: #E71B6A;
}

.HiU-BG-DarkGrey
{
    background-color: #444;
}

/* 
    Allows us to apply color to material icons
    Sample: <i class="material-icons Hi-U">face</i>
 */
.material-icons.Hi-U { color: #E71B6A; }

/* 
    Creates a shade of the Hi-U logo as background on the right side of the
    element with only 1% opacity.
    Sample: <div class="HiU-GradientBackground HiU-LogoShade">My content</div>

    Make sure the container has the following: 
                                                overflow:hidden;
                                                position: relative; 
 */
.HiU-LogoShade::after {
    content: "";
    background: url('/App_Assets/images/logo/logo-white.svg') right bottom no-repeat;
    opacity: .07;
    background-size: auto 800px;
    background-position-x: 100%;
    background-position-y: 20%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none;   /* important to avoid no clickable areas */
}
.HiU-LogoShade-200px::after {
    content: "";
    background: url('/App_Assets/images/logo/logo-white.svg') right bottom no-repeat;
    opacity: .09;
    background-size: auto 200px;
    background-position-x: 100%;
    background-position-y: 20%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none;   /* important to avoid no clickable areas */
}
.HiU-LogoShade-15::after {
    content: "";
    background: url('/App_Assets/images/logo/logo-white.svg') right bottom no-repeat;
    opacity: .15;
    background-size: auto 800px;
    background-position-x: 100%;
    background-position-y: 20%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none; /* important to avoid no clickable areas */
}
.HiU-LogoShade-20::after {
    content: "";
    background: url('/App_Assets/images/logo/logo-white.svg') right bottom no-repeat;
    opacity: .20;
    background-size: auto 800px;
    background-position-x: 100%;
    background-position-y: 20%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: none; /* important to avoid no clickable areas */
}
/* on small media show logo shade in different size */
@media screen and (max-width: 768px) {
    .HiU-LogoShade::after{
        background-size: auto 300px;
    }
}

/* 
    Creates the HiU gradient background for the element.
    You can also use the HiU-LogoShade to add the logo shade as well.
    Sample: <div class="HiU-GradientBackground HiU-LogoShade">My content</div>
 */
.HiU-GradientBackground {
    position: relative;
    background: url('/App_Assets/images/container_bg.png') left top repeat-x;
    background-size: 10% 100%;
    height: 100%;
}


/* HiU-Dark button */
.btn-HiU-Dark{
    display: inline-flex;
    vertical-align: middle;
    color:#343A40;background-color:transparent;background-image:none;border-color:#343A40}
    .btn-HiU-Dark:hover{color:white;background-color:#343A40;border-color:#343A40}
    .btn-HiU-Dark:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(52, 58, 64, .5)}
    .btn-HiU-Dark.disabled,.btn-outline-primary:disabled{color:#343A40;background-color:transparent}
    .btn-HiU-Dark:not(:disabled):not(.disabled):active,.btn-HiU-Dark:not(:disabled):not(.disabled).active,.show>.btn-HiU-Dark.dropdown-toggle{color:#fff;background-color:#343A40;border-color:#343A40}
    .btn-HiU-Dark:not(:disabled):not(.disabled):active:focus,.btn-HiU-Dark:not(:disabled):not(.disabled).active:focus,.show>.btn-HiU-Dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52, 58, 64, .5)}

/* HiU-Light button */
.btn-HiU-Light{
    display: inline-flex;
    vertical-align: middle;
    color:rgb(113, 120, 128);background-color:transparent;background-image:none;border-color:rgb(181, 183, 185)}
    .btn-HiU-Light:hover{color:#666;background-color:rgb(196, 196, 196);border-color:rgb(196, 196, 196)}
    .btn-HiU-Light:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(52, 58, 64, .1)}
    .btn-HiU-Light.disabled,.btn-outline-primary:disabled{color:#343A40;background-color:transparent}
    .btn-HiU-Light:not(:disabled):not(.disabled):active,.btn-HiU-Light:not(:disabled):not(.disabled).active,.show>.btn-HiU-Light.dropdown-toggle{color:#fff;background-color:rgb(196, 196, 196);border-color:rgb(196, 196, 196)}
    .btn-HiU-Light:not(:disabled):not(.disabled):active:focus,.btn-HiU-Light:not(:disabled):not(.disabled).active:focus,.show>.btn-HiU-Light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52, 58, 64, .4)}

/* HiU-White button */
.btn-HiU-White{
    display: inline-flex;
    vertical-align: middle;
    color:#eee;background-color:transparent;background-image:none;border-color:white}
    .btn-HiU-White:hover{color:#666;background-color:white;border-color:white}
    .btn-HiU-White:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(52, 58, 64, .1)}
    .btn-HiU-White.disabled,.btn-outline-primary:disabled{color:#343A40;background-color:transparent}
    .btn-HiU-White:not(:disabled):not(.disabled):active,.btn-HiU-White:not(:disabled):not(.disabled).active,.show>.btn-HiU-White.dropdown-toggle{color:#fff;background-color:rgb(196, 196, 196);border-color:rgb(196, 196, 196)}
    .btn-HiU-White:not(:disabled):not(.disabled):active:focus,.btn-HiU-White:not(:disabled):not(.disabled).active:focus,.show>.btn-HiU-White.dropdown-toggle:focus{box-shadow:0 0 0 .2rem white}

.HiU-AlignMaterialIcon{
    display: inline-flex;
    vertical-align: middle;
}

.HiU-AllCenter{
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
}
.HiU-AllCenterRow{
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
}
.HiU-AllCenterColumn{
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    justify-content: center;
}

.HiU-Logo .HiU-Title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 27px;
    color: var(--hiu-pink);
    margin: 0;
    margin-top: 5px;
    padding: 0;
    line-height: 1.8rem;
}
    /* extra displayed for non-production environment */
    .HiU-Logo .HiU-Title .entity-schema {
        position: absolute;
        margin-left: 5px;
        font-size: .65em;
        color: white;
        background-color: var(--hiu-pink-dark-70);
        /* wiggle all the time but fade out after 10s to 50% */
        animation: wiggle 2.5s infinite, entity-schema-fadeout 1s ease-in 10s forwards;
    }
    /* fadeout-to-xx effect */
    @keyframes entity-schema-fadeout {
        0% { opacity: 1; }
        70% { opacity: .5; }
        100% { opacity: .5; background-color: #00AAB6;}
    }

    .HiU-Logo .HiU-Slogan{
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 9px;
        color: var(--hiu-pink);
        margin: 0;
        margin-left: 2px;
        padding: 0;
        line-height:1rem;
        letter-spacing: .1em;
    }
        /* extra displayed for non-production environment */
        .HiU-Logo .HiU-Slogan.non-production:after {
            position: absolute;
            content: 'SANDBOX ENV.';
            color: #00AAB6;
            margin-left: 5px;
            animation: fadeout 1s forwards;
            animation-delay: 5s;
        }
        .HiU-Logo .app-schema{
        position: absolute;
        transform: rotate(-90deg);
        font-size: 1rem;
        font-weight: 400;
        color: rgba(12, 18, 71, 0.4);
        left:-15px;
        top:25px;
    }

/*
    Hi-U! VAULT
*/
.HiU-Vault-Logo .HiU-Title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 27px;
    color: var(--hiu-blue-light);
    margin: 0;
    margin-top: 5px;
    padding: 0;
    line-height: 1.8rem;
}
    .HiU-Vault-Logo .HiU-Slogan {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 9px;
        color: var(--hiu-blue-light);
        margin: 0;
        margin-left: 2px;
        padding: 0;
        line-height: 1rem;
        letter-spacing: .1em;
    }
    .HiU-Vault-Logo .app-schema{
        position: absolute;
        transform: rotate(-90deg);
        font-size: 1rem;
        font-weight: 700;
        color: rgba(12, 18, 71, 0.2);
        left:-17px;
        top:25px;
    }


#MainNavBar{
    /*background-color: rgba(255, 255, 255, 0.9);*/    /* If not set to white it's transparent and shows the content during scrolling */
    padding:0;
    padding-right: .5rem;
    padding-left: .5rem;
}
        #MainNavBar .nav-item a{
            font-weight: 600;
        }
        /* remove blue border from navigation hamburger if focused */
        #MainNavBar .navbar-toggler:focus, #MainNavBar .navbar-toggler:active {
            outline: none;
            box-shadow: none;
        }
        #MainNavBar .nav-item[active] a{
            border-top: 2px solid #E71B6A;
        }
        #MainNavBar .nav-item a:active{
            color:#E71B6A;
        }
        /* picture of logged in user */
        #MainNavBar .nav-item a img{
            -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
            filter: grayscale(100%);
            opacity: 0.8;
            border-radius: 50%;
        }
        #MainNavBar #LoginButton{
            width: 90px;
        }
        #MainNavBar #LoginButton:focus{
            color: inherit;
        }
        #MainNavBar #LoginButton{
            width: 90px;
        }
        #MainNavBar #BecomeAuthorButton .material-icons{
            font-size: 1.5em;
            margin-right: .1rem;
        }

/* MainFooter */
#MainFooter{
    position: relative;
    background-color: var(--hiu-footer-background);
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: hidden;
}
    #MainFooter::after {
        content: "";
        background: url('/App_Assets/images/logo/logo-white.svg') center center no-repeat;
        opacity: .3;
        width: 90px;
        /*transform-origin: 50% 50%;*/
        transform: rotate(-20deg) scale(2.2); /* have to use scale or the image will be cut off due to rotating */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        margin: 0 auto;
        pointer-events: none;   /* important to avoid no clickable areas */
    }
    #MainFooter a{
        text-decoration: none;
        color: white;
        font-size: .9em;
        z-index: 2; /* need to bring all links forward since the logo is above */
    }
    #MainFooter label{
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        margin-bottom: 0px;
    }
    #MainFooter p{
        color: white;
        font-size: 0.7rem;
        margin-bottom: 0;
    }
    @media screen and (max-width: 576px) {
        /* on small media move logo rather to the right side */
        #MainFooter::after{
            right: -190px;
            z-index: 1;
            transform: rotate(-20deg) scale(3);   /* have to use scale or the image will be cut off due to rotating */
            /* margin-left: 180px; */
        }
        /* enlarge footer links */
        #MainFooter label{
            font-size: 1.5em;
        }
        #MainFooter a{
            font-size: 1.2em;
        }
    }

/* 
    EXCEPTION ERROR CARD
    
        <div id="exception-card">
          <div id="exception-background"></div>
          <div id="exception-title">ERROR</div>
          <div id="exception-content">
            <h1>Short description of error</h1>
            <h2>Detailed description of error</h2>
            </div>
        </div>

*/
#exception-card
{
    font-family: 'Montserrat', sans-serif;
    border: 2px solid rgb(235, 112, 112);
    border-radius: .5rem;
    padding: .5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
    #exception-card #exception-background{
        position: relative;
    }
    #exception-card #exception-background::after{
        content: "";
        position: absolute;    
        background: url('/App_Assets/images/exclamation.svg') center center no-repeat;
        opacity: .1;
        transform: rotate(-20deg) scale(2.5);   /* have to use scale or the image will be cut off due to rotating */
        width: 125px;
        height:125px;
        top: -80px;
        left: calc(100% - 230px);
        bottom: 0;
        right: 0;
        z-index:-1;
    }
    #exception-card #exception-title{
        float: right;
        font-weight: 900;
        font-size: 3rem;
        color: rgb(235, 112, 112);
        letter-spacing: .5rem;
        line-height: 3rem;
        z-index:-1;
    }
    #exception-card #exception-content ul {
        list-style-type: none;
        list-style-position: outside;
        margin: 0;
        padding: 0;
        padding-left: .5em;
    }
        #exception-card #exception-content ul li {
            margin-bottom: 1rem;
        }
    #exception-card #exception-content h1 {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1rem;
        line-height: 1.2rem;
    }
    #exception-card #exception-content h2{
        font-weight: 500;
    }


/* Our default for range sliders */
.HiU-Slider{
    -webkit-appearance: none;
    width: 100%;
    height: 1px;
    border-radius: 5px;  
    background: white;
    outline: none;
    opacity: 0.9;
    -webkit-transition: width .2s, height .2s;
    transition: width .2s, height .2s;
}
        .HiU-Slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%; 
            background: white;
            cursor: pointer;
            -webkit-transition: width .2s, height .2s;
            transition: width .2s, height .2s;
        }
    
        .HiU-Slider::-moz-range-thumb {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: white;
            cursor: pointer;
            -webkit-transition: width .2s, height .2s;
            transition: width .2s, height .2s;
        }

        .HiU-Slider:hover {
            opacity: 1; /* Fully shown on mouse-over */
        }

        .HiU-Slider::-webkit-slider-thumb:hover {
            width:20px;
            height:20px;
        }
        .HiU-Slider::-moz-range-thumb:hover {
            width:20px;
            height:20px;
        }

  /* 
    Underlines the text with the SVG which looks like a yellow marker pen
    Use:    <span class='HiU-UnderlineMarker'>My underlined text</span>
            or
            <strong class='HiU-UnderlineMarker'>My underlined text</strong>
  */
  .HiU-UnderlineMarker {
    position: relative;
  }
    .HiU-UnderlineMarker::after {
        content: '';
        position: absolute;
        bottom: -0.125rem;
        left: -0.5rem;
        right: -0.5rem;
        height: 0.75rem;
        /* 
        // Position the line behind the text so that
        // it is still easily readable
        */
        z-index: -1;
        /* The SVG is added as an SVG background image */
        background-image: url('/App_Assets/images/underline.svg');
        background-repeat: no-repeat;
        /* 
        // This allows the SVG to flex in size to fit
        // any length of word. If the word is short,
        // the SVG will be stretched vertically, if it
        // is long, the SVG will be stretched horizontally.
        // The jagged nature of this particular SVG works
        // with this transforming.
        */
        background-size: cover;
    }
  
  
/* 
    NAVBAR LOGIN modal popup screen
*/
#MainNavBar #loginModal {
    z-index: 9999; 
}
    #MainNavBar #loginModal .modal-title{
        font-size: 1.2rem;
        font-weight: normal;
        color: #333;
    }
    #MainNavBar #loginModal .modal-body{
        margin-top: 1em;
    }
    #MainNavBar #loginModal .login-field{
        color: #333 !important;
        font-size: 1.0rem;
        margin-bottom: 1.2em;
    } 
    #MainNavBar #loginModal #loginButton{
        padding-left: 4em;
        padding-right: 4em;
    }
    /* Action buttons in the login popup */
    #MainNavBar #loginModal .login-actions{
        width: 100%;
        display:flex;
        justify-content: space-between;
        align-items: center;
    }
    #MainNavBar #loginModal .login-actions a{
        font-size: .8rem;
        font-weight: normal;
        text-decoration: none;
        color: #111;
    }


/* 
    Hi-U Checkbox
    Scalable styled checkbox which can be stacked horizontally or vertically
    and will align perfectly.

    .) Sample with larger text for all content:
            <label class="HiU-Checkbox" style="font-size: 2em;">
                My Checkbox
                <input type="checkbox" checked>
                <span class="checkmark"></span>
            </label>    

    .) Sample with large text and framed (note additional class Large-Framed):
            <label class="HiU-Checkbox Large-Framed">
                My Checkbox
                <input type="checkbox" checked>
                <span class="checkmark"></span>
            </label>    

    .) Alternative checkmark color (sample for all checkboxes with class 'is-moderator''):

        .HiU-Checkbox.is-moderator input:checked ~ .checkmark {
            background-color: var(--hiu-violet);
        }
*/
.HiU-Checkbox {
    display: block;
    position: relative;
    padding-left: 1.7em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
        /* Hide the browser's default checkbox */
        .HiU-Checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        /* Create a custom checkbox */
        .HiU-Checkbox .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 1.25em;
            width: 1.25em;
            background-color: #eee;
        }
        /* On mouse-over, add a grey background color */
        .HiU-Checkbox:hover input ~ .checkmark {
            background-color: #ccc;
        }
        /* When the checkbox is checked, add a blue background */
        .HiU-Checkbox input:checked ~ .checkmark {
        /* background-color: #2196F3; */
            background-color: var(--hiu-pink);
        }
        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        /* Show the checkmark when checked */
        .HiU-Checkbox input:checked ~ .checkmark:after {
            display: block;
        }
        /* Style the checkmark/indicator */
        .HiU-Checkbox .checkmark:after {
            left: .5em;
            top: .2em;
            width: .3em;
            height: .7em;
            border: solid white;
            border-width: 0 .12em .12em 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        /* Additional .HiU-Checkbox styles */
        /* class="HiU-Checkbox Large-Framed" */
        .HiU-Checkbox.Large-Framed {
            border: 1px solid darkgray;
            border-radius: 0 .5em .5em 0;
            padding: .5em;
            text-align: center;
        }
        .HiU-Checkbox.Large-Framed .checkmark {
            font-size: 2em;
        }



/*
    RadioButtons
    Scalable styled radio-buttons which can be stacked horizontally or vertically
    and will align perfectly.
    Sample:
            <label class="HiU-RadioButton" style="font-size: 2em;">Three
              <input type="radio" name="radio2">
              <span class="checkmark"></span>
            </label>
*/
.HiU-RadioButton {
    display: block;
    position: relative;
    padding-left: 1.7em;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.2em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
        /* Hide the browser's default radio button */
        .HiU-RadioButton input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        }
        /* Create a custom radio button */
        .HiU-RadioButton .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.2em;
        width: 1.2em;
        background-color: #eee;
        border-radius: 50%;
        }
        /* On mouse-over, add a grey background color */
        .HiU-RadioButton:hover input ~ .checkmark {
        background-color: #ccc;
        }
        /* When the radio button is checked, add a blue background */
        .HiU-RadioButton input:checked ~ .checkmark {
        /* background-color: #2196F3; */
        background-color: var(--hiu-pink);
        }
        /* Create the indicator (the dot/circle - hidden when not checked) */
        .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        }
        /* Show the indicator (dot/circle) when checked */
        .HiU-RadioButton input:checked ~ .checkmark:after {
        display: block;
        }
        /* Style the indicator (dot/circle) */
        .HiU-RadioButton .checkmark:after {
        /* top: .385em; */
        /* left: .402em; */
        top: 30%;   /* 50% - 20% of circle) */
        left: 30%;  /* 50% - 20% of circle) */
        width: 40%;
        height: 40%;
        border-radius: 50%;
        background: white;
        }

/* 
    Background shapes
*/    
.hiu-background-container {
    position: fixed;
    z-index: -2;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    max-width: var(--hiu-body-width);
    margin: 0 auto;
}
    .hiu-background-logo-1 {
        position: absolute;
        width: 40vh;
        height: 40vh;
        background: url('/App_Assets/images/logo/logo-o-grey.svg') center center no-repeat;
        background-size: 100% 100%;
        opacity: .02;
        transform: rotate(20deg);
        bottom: 15vh;
        left: 0;
    }
    .hiu-background-logo-2 {
        position: absolute;
        width: 20vh;
        height: 20vh;
        background: url('/App_Assets/images/logo/logo-o-grey.svg') center center no-repeat;
        background-size: 100% 100%;
        transform: rotate(-10deg);
        opacity: .03;
        top: 20%;
        right: 7%;
    }
    .hiu-background-logo-3 {
        position: absolute;
        width: 22vh;
        height: 22vh;
        background: url('/App_Assets/images/logo/logo-o-grey.svg') center center no-repeat;
        background-size: 100% 100%;
        opacity: .03;
        transform: rotate(-20deg);
        bottom: 7vh;
        right: 2vh;
        z-index: -1;
    }


/* 
    Hi-U! responsive collapsing tables
    Usage:
    
    <table HiU-CollapsingTable class="table table-sm table-striped table-borderless w-auto">
    ...
    </table
*/
table[HiU-CollapsingTable] {
    /* border: 1px solid #ccc; */
    /* border-collapse: collapse; */
    margin: 0;
    padding: 0;
    /* table-layout: auto; */ /* fixed sets a static size which doesn't work for long text */
    width: 100%;
    margin-top: 1rem;
}

    table[HiU-CollapsingTable] tr {
        /* background-color: #f8f8f8; */
        /* border: 1px solid #ddd; */ /* makes border full and collapsed */
        padding: .35em;
    }

    /* This below makes sure the titles are never being wrapped */
    table[HiU-CollapsingTable] th {
        white-space: nowrap;
    }

    table[HiU-CollapsingTable] th, table[HiU-CollapsingTable] td {
        padding: .625em;
        text-align: left;
    }

@media screen and (max-width: 576px) {

    table[HiU-CollapsingTable] {
        border: none;
    }

        table[HiU-CollapsingTable] thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table[HiU-CollapsingTable] tr {
            border-bottom: none; /* 3px solid #ddd; */
            border-radius: 1em;
            display: block;
        }

            table[HiU-CollapsingTable] tr:nth-child(even) {
                background-color: rgba(0, 0, 0, .1);
            }

            table[HiU-CollapsingTable] tr:nth-child(odd) {
                background-color: rgba(0, 0, 0, .05);
            }
        /* Create a margin at the bottom for each block (no margin for last) */
        table[HiU-CollapsingTable] tr {
            margin-bottom: 1.5em;
        }
            /* no margin for last item */
            table[HiU-CollapsingTable] tr:last-child {
                margin-bottom: 1em;
            }

        table[HiU-CollapsingTable] td {
            border-bottom: none; /* 1px solid #ddd; */
            display: block;
            text-align: left;
            padding-top: .3em;
            padding-bottom: .3em;
        }
            /* Make first column content bigger and bolder with line underneath  */
            table[HiU-CollapsingTable] td:first-child {
                font-size: 1.1em;
                text-transform: uppercase;
                font-weight: bold;
                border-bottom: 2px solid rgba(197, 41, 119, .5);
                margin-bottom: .6em;
                /* border-bottom: 2px solid rgba(0, 0, 0, .1);; */
            }


            /* This becomes the title on the left when collapsed */
            table[HiU-CollapsingTable] td::before {
                content: attr(data-label);
                font-weight: bold;
                text-transform: uppercase;
                color: #E71B6A;
                float: left;
                margin-right: 1rem;
            }
            /* make sure first field has a line break and title has same font-size */
            table[HiU-CollapsingTable] td:first-child::before {
                font-size: .8em;
                font-weight: lighter;
                width: 100%;
            }
}

/* 
    Collapsing input labels
    Url: https://w3bits.com/labs/css-floating-labels/

    Sample use:

    <div class="floating-label-wrap">
        <input type="email" class="floating-label-field" id="field-2" placeholder="Email">
        <label for="field-2" class="floating-label">Email</label>
    </div>

*/

.floating-label-field,
.floating-label-wrap {
    position: relative;
}

    /* Making the label break the flow */
    .floating-label {
        position: absolute;
        top: 0;
        left: 0;
        user-select: none;
        z-index: 150;
    }

    /* Hide the browser-specific focus styles */
    .floating-label-field {
        color: rgba(44, 62, 80, .75);
        border-width: 0;
        z-index: 200;
    }
        .floating-label-field:focus {
            outline: 0;
            box-shadow: 0;
        }

        .floating-label-field::placeholder {
            color: rgba(44, 62, 80, .5);
        }

    /* Make the label and field look identical on every browser */
    .floating-label,
    .floating-label-field {
        font: inherit;
        line-height: 1;
        display: block;
        width: 100%;
    }

    /* FRAMED STYLE */
    .floating-label-field {
        padding: 0.6em; /* gap for the floating label on top */
        transition: border-color .25s ease-in-out;
        color: #333; /* input text color */
        border: 1px solid rgba(0, 0, 0, .4); /* FRAME COLOR */
        border-radius: 5px;
        background-color: transparent;
    }

        .floating-label-field + .floating-label {
            position: absolute;
            top: .8em;
            left: .25em;
            display: inline-block;
            width: auto;
            margin: 0;
            padding-left: .5em; /* padding when placeholder is shown to center text */
            transition: transform .25s, opacity .25s, padding .25s ease-in-out;
            transform-origin: 0 0;
            color: #aaa; /* placeholder color */
            font-weight: 400; /* placeholder bolder */
        }

        .floating-label-field:focus,
        .floating-label-field:not(:placeholder-shown) {
            border-color: rgba(0, 0, 0, .4);
        }

            .floating-label-field:focus + .floating-label,
            .floating-label-field:not(:placeholder-shown) + .floating-label {
                z-index: 250;
                padding: 0.55em;
                transform: translate(0, -1.5em) scale(.9);
                color: #c52977; /* collapsed label color */
                font-weight: 700;
                text-transform: uppercase;
                line-height: 0;
                background-color: white; /* collapsed label block color */
            }

        /* Common Styles */
        /* Identical inputs on all browsers */
        .floating-label-field:not(textarea) {
            max-height: 4em;
        }

        .floating-label-field::placeholder {
            color: transparent;
        }
        /* Validation is-valid and is-invalid */
        .floating-label-field.is-invalid
        {
            border-color: red;
            border-width: 3px;
        }
        .floating-label-field.is-valid
        {
            border-color: green;
            border-width: 2px;
        }
        /* readonly input field */
        .floating-label-field[readonly] {
            background-color: #f8f8f8;
            border: 1px solid rgba(0, 0, 0, .2);
            padding: .3em;
        }
            .floating-label-field[readonly]:not(:placeholder-shown) + .floating-label {
                /*
                background-color: transparent;
                padding: .25em;
*/
                z-index: 1;
                top: .5em;
                /* if right aligned of top label is required

                left: unset;
                right: .5em;
                */
                color: #666;
                font-weight: 200;
                background-color: #f8f8f8;
                border: 1px solid rgba(0, 0, 0, .2);
                border-radius: 5px;
            }

/*
    LOADING / SAVING
    used in alert global_SavingConfirmation
*/
.save_loading {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: save_loading_keyframe;
    transform-origin: 50% 50%;
}
@keyframes save_loading_keyframe {
    100% {
        transform: rotate(-360deg) translate(0,0);
    }
}

/*
    AutoComplete
    Since floating-label is potentially in z-index 200 we set autocomplete to 300
*/
.ui-autocomplete {
    z-index: 300 !important;
}

/*
    TOOLTIP
*/
/* Tooltip */
.tooltip > .tooltip-inner {
    background-color: #73AD21; 
    color: #FFFFFF; 
    border: 1px solid green; 
    padding: 15px;
    font-size: 20px;
}
/* Tooltip on top */
.tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}
/* Tooltip on bottom */
.tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}
/* Tooltip on left */
.tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}
/* Tooltip on right */
.tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}

/*
    TIPPED size option 'huge'
*/
.tpd-size-huge .tpd-content,
.tpd-size-huge .tpd-title {
    padding: 15px;
    font-size: 15px;
    line-height: 20px;
}
    .tpd-size-huge .tpd-background { border-radius: 10px; }
    .tpd-size-huge .tpd-stem {
        width: 24px;
        height: 12px;
        margin-left: 8px; /* space from the side */
        margin-top: 2px; /* space between stem and target */
    }
    .tpd-size-huge.tpd-no-radius .tpd-stem { margin-left: 10px; }
    .tpd-size-huge .tpd-close { margin: 11px 5px 11px 5px; }
    .tpd-size-huge .tpd-close-icon { font-size: 32px; }
    .tpd-size-huge .tpd-spinner {
        width: 66px;
        height: 50px;
    }
    .tpd-size-huge .tpd-spinner-spin { margin: 14px 0 0 22px; }
    .tpd-size-huge .tpd-spinner-spin,
    .tpd-size-huge .tpd-spinner-spin:after {
        width: 22px;
        height: 22px;
    }

/* TIPPED NOTES skin (yellow color palette) */
    .tpd-skin-notes .tpd-content,
    .tpd-skin-notes .tpd-title,
    .tpd-skin-notes .tpd-close {
        color: #333;
    }
    .tpd-skin-notes .tpd-background-content {
        background-color: #fff;
    }
    .tpd-skin-notes .tpd-background {
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.3);
    }
    .tpd-skin-notes .tpd-background-title {
        background-color: #FBFBC5;
    }
    .tpd-skin-notes .tpd-background-content {
        background-color: #FAFAB2;
    }
    .tpd-skin-notes .tpd-title-wrapper {
        border-bottom: 1px solid #c0c0c0;
    }
    .tpd-skin-notes .tpd-background-shadow {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    }
    /* fallback for no/disabled shadow */
    .tpd-skin-notes.tpd-no-shadow .tpd-background {
        border-color: rgba(100, 100, 100, 0.3);
    }
    .tpd-skin-notes .tpd-spinner-spin {
        border-color: rgba(51, 51, 51, 0.2);
        border-left-color: #333;
    }
    .tpd-skin-notes a {
        color: #808080;
    }
    .tpd-skin-notes a:hover {
        color: #6c6c6c;
    }

/*
    HIU-DEBUG attribute
*/
*[hiu-debug] {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    border: 2px solid rgba(212, 66, 66, 0.815);
    border-radius: .4em;
    padding: .2em 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 .5em;
    animation: debug-ripple 1s forwards
}

@keyframes debug-ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(2);
        transform: scale(1)
    }
}

/*
    table-responsive make alternate rows in light pink
*/
.table-striped > tbody > tr:nth-child(2n+1) > td, 
.table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #F9E9F1;
}

/*
    Ordered list with grey backgrounds

        <ol class="code w-50">
            <li>@ first MX record changes</li>
            <li>@ second MX record changes</li>
            <li>@ third MX record changes with <span class="highlighted">highlighted</span> code</li>
        </ol>

*/
ol.code{
    display: block;
    font-family: monospace;
    font-size: .9rem;
    border-radius: .3rem;
    padding-left: 3rem;
    background-color: #eee;
    margin:0;
    overflow: hidden;
    /* custom counter */
    list-style: none;
    counter-reset: hiu-counter;
    position: relative;
}
    ol.code li{ 
        counter-increment: hiu-counter;
        padding-left: .5rem;
        color: #333;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #f9f9f9;
        background: #f3f3f3;
        margin:0;
    }
    ol.code li::before {
        position: absolute;
        content: counter(hiu-counter) ". ";
        color: #aaa;
        font-weight: bold;
        left: 1.5rem;
    }
    ol.code li:first-child{ padding-top: .5rem;}
    ol.code li:last-child{ padding-bottom: .5rem;}
    ol.code li .highlighted{ 
        color:crimson;
        font-weight: bold;
    }