/*#region Core-Css ************************************/

:root {
    --font-family: 'Book Antiqua','Times New Roman', Times, serif;
    --font-size: 16px;
    --font-color: #3B3B3B; /*#000000;*/
    --font-color2: rgba(33,33,33,1);
    --footer-bgcolor: #fcefec;
    --body-font: normal 16px/1.5 'Book Antiqua','Times New Roman', Times, serif;
    --body-bgcolor: #F4E9DC; /*transparent*/
    --body2-bgcolor: #E4DBCF; /*transparent*/
    --body3-bgcolor: #F4E9DC; /*transparent*/
    --body-editor-bgcolor: #FFFFFF;
    --header-bgcolor: transparent;
    --accent-color-main: #7A5B87;
    --accent-color-dark: rgba(231,97,13,1);
    --accent-color-medium: #008FC5;
    --accent-color-light: rgba(231,97,13,0.2);
    --accent-color-superlight: rgba(231,97,13,0.1);
    --sticky-color: #fcefec;
    --link-font: normal 16px 'Book Antiqua','Times New Roman', Times, serif;
    --link-color: #0064AA;
    --menu-bgcolor: transparent !important;
    --menu-color: #3B3B3B !important;
    --smallmenu-bgcolor: #FFFFFF !important;
    --smallmenu-color: #3B3B3B !important;
    --smallmenu-font: 15px 'Book Antiqua','Times New Roman', Times, serif;
    --section-name-font: normal 50px/1.5 'Book Antiqua','Times New Roman', Times, serif;
    --section-text-font: normal 22px/1.5 'Book Antiqua','Times New Roman', Times, serif;
    --section-link-font: normal 22px/1.5 'Book Antiqua','Times New Roman', Times, serif;
}

/*   font: style variant weight size/line-height family */

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font: var(--body-font),serif;
    font-display: swap;
    color: var(--font-color), #000000;
    background-color: var(--body-bgcolor); /* This will also be footer bg color */
}


#cFormMain {
    min-height: 100%;
    /*position: relative;*/
}

/*Editor body*/
#body {
    background-color: var(--body-editor-bgcolor);
}

hr {
    width: 100%;
    padding: 0;
    border-spacing: 0px;
    vertical-align: top;
}

h1 {
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: var(--font-color2), #000000;
    line-height: 1.4em;
    text-align: center;
}

td {
    vertical-align: top;
}

html, form, body, td, p {
    margin: 0 0 0 0;
    overflow-x: hidden;
}

/* a:link, a:visited, a:hover, a:active */
a, a:visited, a:hover {
    color: var(--link-color);
    font: var(--link-font)
}

    a, a:visited {
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }

ul {
    list-style-type: disc;
}

    ul li {
        list-style-type: disc;
    }

ol {
    list-style-type: decimal;
}

    ol li {
        list-style-type: decimal;
    }
/*#endregion Core-Css ************************/

/*#region Master-Layout **********************/

/* The main container for the page. */
/* Media dependent minimum height and hidden horizontal overflow.*/
div.Container, .Container {
    margin: 0;
    left: 0;
    min-height: 80vh;
    max-width: 100% !important;
    background-color: transparent; /* Set main contaner background here, if bg images is not used. */
}

div.MainContent, .MainContent {
    padding: 0;
    margin: 0;
}

.clear {
    clear: both;
    overflow: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
}

/*#endregion Master-Layout **********************/

/*#region Menu-UserInfo *************************/

div.MenuUserInfoTable, .MenuUserInfoIconDiv {
    display: none; /* Hidden menu user info */
    /* Comment below for hidden menu user info */
    /*float: right;
    margin-right: 8px;
    margin-top: 6px;
    height: 20px;
    z-index: 10000;
    cursor: pointer;*/
}

.MenuUserInfoIconDiv {
}

.MenuUserInfoImage {
    height: 20px;
    width: 20px;
}

div.CheckoutIconTable {
    display: none; /* Hidden checkout icon */
    /* Comment below for hidden checkout icon 
    height: 20px;
    position: fixed;
    right: 40px;
    top: 22px;
    z-index: 850;*/
}

.CheckoutIconDiv {
}

.ItemsInCartText {
    color: #505050;
    font-weight: bold;
}

.CheckoutIconLink, .CheckoutIconLink:visited, .CheckoutIconLink:hover, .CheckoutIconLink:active {
    background-color: white;
    padding-right: 3px;
    border-radius: 20px;
    padding-left: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 2px;
    font-size: 13px;
}

    .CheckoutIconLink:hover {
        background-color: #DDDDDD;
        text-decoration: none;
    }

#showInfo {
    width: 150px;
    min-height: 80px;
    font-family: verdana,arial,sans-serif;
    color: #7a6c56;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px #7a6c56 solid;
    position: relative;
    left: -50px;
    z-index: 999;
    padding: 8px 8px 8px 10px;
    margin: 10px;
}

.MenuUserInfoLink, .MenuUserInfoLink:visited {
    color: #7a6c56;
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: left;
}

    .MenuUserInfoLink:hover, .MenuUserInfoLink:active {
        color: #7a6c56;
        font-family: verdana,arial,sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
        display: flex;
        align-items: center;
        justify-content: left;
    }

.MenuUserLogoutLink, .MenuUserLogoutLink:visited {
    color: #7a6c56;
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

    .MenuUserLogoutLink:hover, .MenuUserLogoutLink:active {
        color: #7a6c56;
        font-family: verdana,arial,sans-serif;
        font-size: 14px;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 4px 10px;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
    }

/*#endregion Menu-UserInfo ***********/

/*#region Top-Panel **********************/

/* Layout background image/color, Logo Icon image, Site title, Site sub title */
div.TopContainer {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 700;
    float: left;
    margin: 0;
    padding: 0;
    left: 0px;
    background: #FFFFFF;
    text-align: left;
    border-bottom: 1px solid #FFFFFF;
}

div.TopContainerText {
    padding-top: 2%;
    text-align: left;
    height: 70px;
    background-image: url('/siteview/common/resources/images/sites/s1-bygastine/bygastine/logo.jpg');
    background-position: left; /*left position the image*/
    background-repeat: no-repeat; /*Do not repeat the image*/
    background-size: 120px; /*Resize the background image to cover the entire container*/
}

.TopContainerHomeSpan {
    z-index: 800;
    /*    max-height: 60px;
    line-height: 1.2;*/
}

.TopContainerSubText {
    font-weight: normal;
    font-family: verdana,arial,sans-serif;
    letter-spacing: 0.05em;
    color: #7a6c56;
    text-decoration: none;
    text-wrap: none;
}

/* If Subtitle is used - this is used. Media dependent font-size */
.TopContainerHomeLinkText {
    margin-left: 110px;
    /*    font-weight: bold;
    font-style: italic;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;*/
    color: var(--font-color2);
    text-decoration: none;
}

.TopContainerHomeLink, .TopContainerHomeLink:visited, .TopContainerHomeLink:hover {
    font-size: 40px; /* If Subtitle is used - remove this font-size */
    font-weight: bold;
    font-style: italic;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    /* font-family: 'Script MT', 'Palatino Linotype', Candara, Verdana;*/
    text-decoration: none;
}

    .TopContainerHomeLink, .TopContainerHomeLink:visited {
        color: transparent;
    }

        .TopContainerHomeLink:hover {
            color: transparent;
        }

.TopAreaDiv {
    width: 75vw;
    left: 20vw;
    right: 5vw;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 100px;
    justify-content: flex-end;
}

.TopIconDiv {
    margin: 5px;
}

.TopIconImg {
    height: 29px;
}

/*#endregion Top-Panel **********************/

/*#region Header ********************/
div.Header {
    width: 50%; /*For right side of logo placement, otherwize 100% */
    height: 70px;
    background-color: var(--header-bgcolor);
    /*    border-top: 0.5px solid #DDDDDD;*/
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    float: right;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    z-index: 1;
    margin-top: 1em; /* 25px to compensate for hidden menuuserinfo */
    /*    padding-bottom: 3%;*/ /* removed to enable full size image  on top*/
}

    div.Header h2 {
        padding: 0;
        margin: 0;
    }
/*#endregion Header ********************/

/*#region Wide-Menu **************************/

.MenuWideScreen {
    z-index: 2;
}

.dropdown {
    display: flex;
    flex-direction: column;
    z-index: 800;
}

.LinkNameSpan {
    display: inline-flex;
    min-width: 95%;
}

.ArrowSpan {
    display: inline-flex;
}

    .ArrowSpan::before {
        content: " ▶";
    }

.NoArrowSpan {
    display: inline-flex;
}

/* a:link, a:visited, a:hover, a:active */
.dropdown-content, .dropdown-content:link, .dropdown-content:visited, .dropdown-content:hover, .dropdown-content:active {
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: #f9f9f9;
    line-height: 1.9;
    justify-content: space-between;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    padding: 6px 10px;
    /*    top: 40px;*/
    left: 10px;
    z-index: 900;
}

.dropdown-content-show {
    display: none;
}

.dropdown2-content, .dropdown2-content:link, .dropdown2-content:visited, .dropdown2-content:hover, .dropdown2-content:active {
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: #f9f9f9;
    line-height: 1.9;
    justify-content: space-between;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    padding: 6px 10px;
    /*    top: 40px;*/
    left: 40px;
    z-index: 900;
    margin-top: -4px;
    border-top: 1px solid #E8CAC3;
    border-right: 1px solid #E8CAC3;
    border-bottom: 1px solid #E8CAC3;
    border-left: 1px solid #E8CAC3;
}

.Menu {
    position: fixed;
    background-color: var(--menu-bgcolor);
    color: var(--font-color2);
    display: flex;
    flex-direction: row;
    text-align: center;
    vertical-align: text-top;
    width: 65%;
    right: 1%;
    left: 35%;
    /*    line-height: 40px;*/
    margin: auto;
    padding-top: 2%;
    padding-bottom: 0;
    /*    padding-left: 5%;
    padding-right: 5%;*/
    z-index: 800;
    flex-wrap: wrap;
    justify-content: center;
}

.MenuItem {
    display: inline-block;
    position: relative;
    background-color: var(--menu-bgcolor);
    color: var(--menu-color);
    font-size: 20px;
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    /*    min-width: 100px;*/
    text-transform: uppercase;
}

    .MenuItem:hover .dropdown-content {
        display: flex;
        flex-direction: column;
    }

    .MenuItem:active .dropdown-content {
        display: flex;
        flex-direction: column;
    }

    .MenuItem:hover a {
        color: var(--link-color) !important;
        background-color: var(--menu-bgcolor);
        font-size: 20px;
        font-weight: bold;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        text-decoration-line: none;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .MenuItem a {
        display: inline-block;
        color: var(--menu-color);
        font-size: 20px;
        font-weight: bold;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        padding-left: 8px;
        padding-right: 8px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

.MenuSub {
    background-color: transparent !important;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    color: #6d6d6d;
    text-align: center;
    vertical-align: text-top;
    height: 28px;
    left: 80%;
    width: 40px;
    margin-top: -28px;
    z-index: 1;
    cursor: pointer;
}

.MenuSubHover {
    border: 1px solid #E8CAC3;
}

.MenuSub:hover .dropdown2-content {
    display: flex;
    flex-direction: column;
}

.MenuSubItem {
    display: inline-block;
    position: relative;
    background-color: var(--menu-bgcolor) !important;
    color: #6d6d6d !important; /*** VaryBySite **/
    font-size: 20px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 100px;
}

    .MenuSubItem:hover .dropdown2-content {
        display: flex;
        flex-direction: column;
    }

    .MenuSubItem:active .dropdown2-content {
        display: flex;
        flex-direction: column;
    }

    .MenuSubItem:hover a {
        color: var(--link-color) !important;
        background-color: var(--menu-bgcolor) !important;
        font-size: 20px;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        text-decoration-line: none;
        letter-spacing: 0.03em;
    }

    .MenuSubItem a {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        color: #6d6d6d !important;
        font-size: 20px;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        padding-left: 8px;
        padding-right: 8px;
        letter-spacing: 0.03em;
    }

.Selected {
    background-color: var(--menu-bgcolor) !important;
    color: var(--menu-color) !important;
    font-weight: bold;
    border-bottom: 4px solid var(--link-color);
}

    .Selected:hover {
        background-color: var(--menu-bgcolor) !important;
        color: var(--menu-color) !important;
        text-decoration: underline;
        font-weight: bold;
    }

        .Selected:hover a {
            background-color: var(--menu-bgcolor) !important;
            color: var(--menu-color) !important;
            text-decoration: underline;
            font-weight: bold;
            text-decoration-line: none;
        }

    .Selected a {
        color: var(--link-color) !important;
        background-color: var(--menu-bgcolor) !important;
    }

    .Selected:hover .dropdown-content {
        display: flex;
        flex-direction: column;
    }

/*#endregion Wide-Menu ***************************/

/*#region Small-Menu ***************/

.MenuSmallScreen {
    /*    float: right;
    padding-top: 5%;*/
    position: fixed;
    right: 0;
    top: 0;
    z-index: 800;
    background-color: transparent;
    /*    border-bottom: 1px solid var(--body2-bgcolor);*/
}
/*Media dependent*/

.IconButtons {
    z-index: 800;
    position: relative;
}

.IconButton {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 22px;
    margin-right: 2px;
    display: block;
    background-color: transparent;
    border-radius: 6px;
    border: 1px solid var(--body-bgcolor);
    width: 45px;
    height: 25px;
    /*    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

.IconButtonClose {
    padding: 6px 12px 6px 12px;
    margin-top: 22px;
    margin-right: 2px;
    background-color: transparent;
    border-radius: 6px;
    width: 21px;
    height: 20px;
    border: 1px solid var(--body-bgcolor);
    /*    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

#MenuSmallDevice {
    background-color: var(--menu-bgcolor);
}

/* The sticky class is added to the small menu with JS when it reaches its scroll position */
.sticky {
    /* background-color: var(--sticky-color);
    position: fixed;
    top: 0;
    z-index: 600;
    width: 100vw;
    height: 72px;
    border-bottom: 1px solid var(--sticky-color);
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

    /*Add some top padding to the page content to prevent sudden quick movement */
    .sticky + .MainPanel { /*
        padding-top: calc(3.5em + 4vw); */
    }

.SmallMenu {
    position: fixed;
    top: 75px;
    background-color: var(--smallmenu-bgcolor) !important;
    display: block;
    z-index: 800;
    flex-direction: column;
    color: var(--smallmenu-color);
    text-align: center;
    right: 0;
    width: 100%;
    line-height: 40px;
    margin: 0;
    padding: 0;
    padding-top: 1%;
    padding-bottom: 1%;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    /*position: absolute;
    top: 75px;
    flex-direction: column;
    text-align: left;
    line-height: 40px;
    margin: 0;
    padding: 0;
    left: 0;
    padding-left: 40%;
    padding-bottom: 5px;*/
}

.SmallMenuItem {
    width: 100%;
    display: inline-block;
    color: #6d6d6d !important;
    font: var(--smallmenu-font),serif;
    height: 40px;
    border-spacing: 10px 0px;
    letter-spacing: 0.05em;
}

.SmallMenuItemLink {
    width: 100%;
    color: #6d6d6d !important;
    font: var(--smallmenu-font),serif;
    background-color: var(--menu-bgcolor) !important;
    height: 40px;
    border-spacing: 10px 0px;
    text-transform: uppercase;
}

    .SmallMenuItemLink:hover {
        width: 100%;
        color: var(--link-color) !important;
        background-color: var(--menu-bgcolor) !important;
        text-decoration: none;
        height: 40px;
        font: var(--smallmenu-font),serif;
        border-spacing: 10px 0px;
        text-transform: uppercase;
    }


.MenuToggle, .MenuToggle:visited {
    color: #6d6d6d !important;
    padding: 4px;
    font: var(--smallmenu-font),serif;
    vertical-align: top;
    padding-left: 20px;
}

    .MenuToggle:hover {
        color: var(--link-color) !important;
        text-decoration: none;
        padding: 4px;
        font: var(--smallmenu-font),serif;
        vertical-align: top;
        padding-left: 20px;
    }

.SmallLevelMenu {
    display: block;
    flex-direction: column;
    color: #6d6d6d;
    text-align: center;
    height: 100%;
    line-height: 40px;
    margin: 0;
    padding: 0;
}

.SmallLevelMenuItem {
    width: 100%;
    background-color: var(--menu-bgcolor) !important;
    color: #6d6d6d !important;
    height: 40px;
    font: var(--smallmenu-font),serif;
    letter-spacing: 0.05em;
}

.SmallLevelMenuItemLink {
    background-color: var(--menu-bgcolor) !important;
    color: #6d6d6d !important;
    height: 40px;
    font: var(--smallmenu-font),serif;
}

    .SmallLevelMenuItemLink:hover {
        color: var(--link-color) !important;
        background-color: var(--menu-bgcolor) !important;
        text-decoration: none;
        height: 40px;
        font: var(--smallmenu-font),serif;
        text-decoration-line: none;
    }

.SmallSiteSubSubMenu {
    max-height: 80vh;
    overflow-y: scroll;
}

.SmallSelected {
    display: inline-block;
    width: 100%;
    color: var(--link-color) !important;
    font-weight: bold;
    border-spacing: 10px 0px;
    height: 40px;
    font: var(--smallmenu-font),serif;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.SmallSelectedLink {
    color: var(--link-color) !important;
    font-weight: bold;
    border-spacing: 10px 0px;
    height: 40px;
    font: var(--smallmenu-font),serif;
}

    .SmallSelectedLink:hover {
        color: #6d6d6d !important;
        font-weight: bold;
        height: 40px;
        border-spacing: 10px 0px;
        font: var(--smallmenu-font),serif;
    }


.SmallLevelSelected {
    width: 100%;
    color: var(--link-color) !important;
    font-weight: bold;
    height: 40px;
    border-spacing: 10px 0px;
    font: var(--smallmenu-font),serif;
    margin: 0;
    padding: 0;
}

.SmallLevelSelectedLink {
    color: var(--link-color) !important;
    font-weight: bold;
    height: 40px;
    border-spacing: 10px 0px;
    font: var(--smallmenu-font),serif;
}

    .SmallLevelSelectedLink:hover {
        color: #6d6d6d !important;
        font-weight: bold;
        height: 40px;
        border-spacing: 10px 0px;
        font: var(--smallmenu-font),serif;
        font-weight: bold;
    }

/*#endregion Small-Menu *********************/

/*#region Main-Panel-View **********************/

/* The main div for page main content. */
/* Media dependent on max-width, left and left margin etc. */
.MainPanel {
    background: var(--body-bgcolor);
    overflow: hidden;
    min-height: 90vh;
    margin: auto;
    /*    padding-left: 5%;
    padding-right: 5%;*/
    width: 100%; /*If logo and menu are next to each other */
}

/* Background area */
.SiteViewBgImageArea {
    pointer-events: none;
    background-color: transparent;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -2;
    object-fit: cover;
}

/*  Main content area  */
table.MainPanelTable, div.MainPanelTable {
    width: 100%;
    /*    margin-top: 2px;
    padding-top: 5px;*/
}

.AboutArea {
    width: 95%;
    margin: auto;
}

/*#endregion Main-Panel-View **********************/

/*#region Main-Panel-FullScreenView  ************/

.ContainerView {
    background-color: transparent;
    min-height: 1400px;
    z-index: 1;
}

.MainContentView {
    background-color: transparent;
    padding-top: 30px;
    z-index: 1;
}

/* Media dependent also */
.MainPanelFullScreen {
    background-color: #FFFFFF;
    z-index: 1;
    max-width: 1000px;
}

/*#endregion Main-Panel-FullScreenView  ************/

/*#region Footer **********************/
div.Footer, .Footer {
    border-top: 1px solid #DDDDDD;
    bottom: 0;
    /*    position: relative;*/
    font-family: var(--font-family), serif;
    font-size: var(--font-size);
    color: var(--font-color), #000000;
    background-color: var(--body2-bgcolor);
    padding: 10px;
    padding-left: 10%;
    left: 0px;
    width: 100%;
    height: 10vh;
    /*    max-width: 900px;*/
    margin: auto;
    text-align: left;
    margin-top: 15px;
}

    div.Footer p, .Footer p {
        font-size: 16px;
    }

.FooterLink, .FooterLink:visited {
    font: var(--link-font);
    color: var(--link-color);
    font-style: normal;
    font-size: 16px;
}

    .FooterLink:hover, .FooterLink:active {
        font: var(--link-font);
        color: var(--link-color);
        font-style: normal;
        font-size: 16px;
    }

.FooterSmallText {
}


#cAboutLink {
    display: none;
}
/*#endregion Footer **********************/

/*#region Custom-Links ************************/

.Link, .Link:visited, .Link:hover {
    color: #7a6c56;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: bold;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

    .Link, .Link:visited {
        text-decoration: none;
    }

        .Link:hover {
            text-decoration: underline;
        }

.ButtonEdit, .ButtonEdit:visited, .ButtonEdit:hover {
    font-family: verdana,arial,sans-serif;
    Font-Size: 14px;
    Font-Weight: Bold;
    margin: 0px 1px 0px 3px;
    color: #7a6c56;
}

    .ButtonEdit, .ButtonEdit:visited {
        text-decoration: none;
    }

        .ButtonEdit:Hover {
            text-decoration: underline;
        }

.InvisibleLink, .InvisibleLink:visited {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
    font-size: 15px;
    text-decoration: none;
    z-index: 1000;
    position: relative;
}

    .InvisibleLink:hover, .InvisibleLink:active {
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        color: #7a6c56;
        font-size: 15px;
        text-decoration: none;
        z-index: 1000;
        position: relative;
    }

.AdminLink, .AdminLink:visited, .AdminLink:hover, .AdminLink:active {
    font-family: var(--font-family);
    font-size: 12px;
    color: #7a6c56;
    font-style: normal;
    background-color: #ffffff;
    text-decoration: underline;
    position: fixed;
    left: 80%;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    bottom: 10px;
    padding: 1px 8px 1px 8px;
    text-align: center;
    z-index: 10000;
}

.LinkViewMoreLess, .LinkViewMoreLess:visited {
    color: #7a6c56;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 18px;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
}

    .LinkViewMoreLess:hover, .LinkViewMoreLess:active {
        color: #7a6c56;
        font-family: Garamond,'Times New Roman', Times, serif;
        font-size: 18px;
        border-radius: 20px;
        background-color: #DDDDDD;
        padding: 2px 8px 2px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
    }


.AdminNewLinkSpan {
    margin-bottom: 5px;
    margin-left: -1px;
    position: absolute;
}

.AdminNewLink, .AdminNewLink:visited, .AdminNewLink:hover, .AdminNewLink:active {
    color: #7a6c56;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 16px;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    text-indent: 0px;
}

    .AdminNewLink:hover, .AdminNewLink:active {
        background-color: #DDDDDD;
    }

.SmallViewLink, .SmallViewLink:visited {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-wrap: none;
}

    .SmallViewLink:hover, .SmallViewLink:active {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 15px;
        font-weight: bold;
        text-decoration: underline;
        text-wrap: none;
    }


.InternalLink, .InternalLink:visited {
    color: #7a6c56;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 16px;
    text-decoration: underline;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

    .InternalLink:hover, .InternalLink:active {
        color: #7a6c56;
        font-family: Garamond,'Times New Roman', Times, serif;
        font-size: 16px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

.ExternalLink, .ExternalLink:visited {
    color: #61A6D3;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 16px;
    text-decoration: underline;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

    .ExternalLink:hover, .ExternalLink:active {
        color: #61A6D3;
        font-family: Garamond,'Times New Roman', Times, serif;
        font-size: 16px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

/*#endregion Custom-Links ********************/

/*#region Custom-Lists *******************/

.Tag {
    color: #E8CAC3;
    Font-Size: 12px;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.ListHeader, .ListHeader:visited, .ListHeader:hover, .ListHeader:active {
    border-color: #007733;
    border-bottom: solid 1px #007733;
    color: #0E824D;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    height: 19px;
    text-align: left;
}

    .ListHeader:hover, .ListHeader:active {
        background-color: #DDDDDD;
    }

.ListHeaderLink, .ListHeaderLink:visited {
    color: #0E824D;
    font-weight: bold;
    text-decoration: none;
}

    .ListHeaderLink:hover, .ListHeaderLink:active {
        color: #0E824D;
        font-weight: bold;
        text-decoration: underline;
    }

.ListItem {
    background-color: #FFFFFF;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    border-top: solid 1px #7a6c56;
    color: #505050;
    font-size: 16px;
    font-weight: normal;
    height: 22px;
    border-bottom: 1px solid #d4c8b6;
}

    .ListItem:hover {
        background-color: #FFFFFF;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        border-top: solid 1px #7a6c56;
        color: #505050;
        font-size: 16px;
        font-weight: normal;
        height: 22px;
        border-bottom: 1px solid #d4c8b6;
    }

.ListItemLink, .ListItemLink:visited, .ListItemLink:hover, .ListItemLink:active {
    color: #0E824D;
    font-weight: bold;
}

.ListEditItem {
    background-color: #ecfaeb;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
}

.ListAlternateItem {
    background-color: #ffffff;
    font-family: verdana,arial,sans-serif;
    border-top: solid 1px #7a6c56;
    color: #505050;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    height: 22px;
    border-bottom: 1px solid #daefd8;
}

    .ListAlternateItem:Hover {
        background-color: #daefd8;
        border-top: solid 1px #7a6c56;
    }

.MarkedListItem {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 16px;
    font-weight: bold;
    border-bottom-width: thin;
}

.ListNewItem {
    background-color: #DDDDDD;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    border-top-color: #007733;
    border-top-width: 1px;
    border-top-style: ridge;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}

.ListNewEditItem {
    vertical-align: middle;
    background-color: #DDDDDD;
    border-top-color: #007733;
    border-top-width: 1px;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}

.DynamicListItem {
    background-color: Transparent;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}

/*#endregion Custom-Lists ***********/

/*#region Custom-View-Styles ******************************/

.ViewItem {
    border-bottom: 1px solid #EEEEEE
}

.ViewHeading {
    font-size: calc(1.8em + 1vw);
    font-weight: normal;
    font-display: swap;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: var(--font-color2), #000000;
    line-height: 1.8em;
    text-align: center;
    padding-top: 3rem;
}

.ViewHeading2 {
    font-size: calc(0.8em + 1vw);
    font-weight: bold;
    font-display: swap;
    font-family: var(--font-family), serif;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    text-align: center;
}

.ViewHeading2Area {
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}

.ViewSubHeading {
    font-size: 18px;
    font-weight: bold;
    font-family: var(--font-family), serif;
    color: var(--font-color2), #000000;
}

.ViewCursive {
    font-size: 18px;
    font-family: var(--font-family), serif;
    font-style: italic;
    color: #6d6d6d;
}

.ViewText {
    font-size: 18px;
    font-family: var(--font-family), serif;
    font-display: swap;
    color: var(--font-color2), #505050;
    word-wrap: break-word;
    text-align: left;
    max-width: 800px;
    margin: auto;
}

.ViewTextMessage {
    font-size: 18px;
    font-family: var(--font-family), serif;
    color: #6d6d6d;
    word-wrap: break-word;
    padding-left: 5px;
}

.ViewSmallText {
    font-size: 13px;
    font-family: var(--font-family), serif;
    color: #6d6d6d;
}

.ViewSmallCursive {
    font-size: 15px;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-style: italic;
    color: #7a6c56;
}

.ViewListHeading {
    font-size: 20px;
    font-weight: bold;
    font-family: Garamond,'Times New Roman', Times, serif;
    color: #7a6c56;
}

.ViewHeaderLink, .ViewHeaderLink:visited {
    color: #6d6d6d;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

    .ViewHeaderLink:hover, .ViewHeaderLink:active {
        color: #6d6d6d;
        font-size: 20px;
        font-weight: bold;
        text-decoration: underline;
    }

.ViewListHeaderLink, .ViewListHeaderLink:visited, .ViewListHeaderLink:active {
    color: #505050;
    font-family: var(--font-family), serif;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}

    .ViewListHeaderLink:hover {
        color: #505050;
        font-family: var(--font-family), serif;
        font-size: 19px;
        font-weight: bold;
        text-decoration: none;
    }

.ViewLink, .ViewLink:visited, .ViewLink:active {
    color: #7a6c56;
    font-family: var(--font-family), serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

    .ViewLink:hover {
        color: #7a6c56;
        font-family: var(--font-family), serif;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
    }

.ViewMoreLessLink, .ViewMoreLessLink:visited {
    color: #7a6c56;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    text-decoration: none;
}

    .ViewMoreLessLink:hover, .ViewMoreLessLink:active {
        color: #7a6c56;
        font-family: Garamond,'Times New Roman', Times, serif;
        font-size: 16px;
        font-weight: normal;
        vertical-align: middle;
        text-decoration: none;
    }

.ViewInternalLinkBig, .ViewInternalLinkBig:visited {
    color: #ffffff;
    font-family: 'open sans',sans-serif;
    letter-spacing: 0.05em;
    font-size: calc(0.8em + 1vw);
    border-radius: 20px;
    background-color: #36699E;
    padding: 15px 8px 15px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
    width: 50%;
}

    .ViewInternalLinkBig:hover, .ViewInternalLinkBig:active {
        color: #ffffff;
        font-family: 'open sans',sans-serif;
        letter-spacing: 0.05em;
        font-size: calc(0.8em + 1vw);
        border-radius: 20px;
        background-color: #0C305C;
        padding: 15px 8px 15px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 10px;
        width: 50%;
    }

.ViewWritingHeader {
    border: none;
    color: #111;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 26px;
    -webkit-font-smoothing: antialiased;
}

.ViewWritingSubHeader {
    border: none;
    color: #111;
    font-style: italic;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 19px;
    -webkit-font-smoothing: antialiased;
}

.ViewWritingText {
    border: none;
    color: #111;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    white-space: pre-wrap;
}

/*#endregion Custom-View-Styles  ***********/

/*#region PageSections-and-FilterArea  ******************/

/* Main div Page Section and content div id */
#cSitePageViewDiv {
}

div.SitePageViewDiv {
    /* width: 500px;  Set width for section and content area here */
    max-width: 100%;
}

/* Main div Page Section class */
div.SitePageSections {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

div.cSitePageSectionsLast {
    /*  margin-bottom: 30px;  Remove for no margin between differents sections */
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Generated class on last section */
.cSitePageSectionsLast {
    /* margin-bottom: 15px; Remove for no margin between differents sections */
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Main div Content list - All FilterAreas */
.ViewContentFilterArea {
    max-width: 100%;
    /*    margin-top: 4em; 
    margin-bottom: 4em; remove to have full-size image on top */
    /*    max-width: 95%;*/
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.ViewContentFilterArea_ImageLeft {
    width: 100vw;
    background: var(--body2-bgcolor);
}

.ViewContentFilterArea_ImageRight {
    width: 100vw;
    background: var(--body3-bgcolor);
}

.ImageList { /* All image collections*/
    width: 500px; /* Set same width as SitePageViewDiv here */
    max-width: 100%;
    margin: auto;
}

.ItemsList { /* All filter lists*/
    width: 500px; /* Set same width as SitePageViewDiv here */
    max-width: 100%;
    margin: auto;
}

table.PagingButtons {
    margin-bottom: 15px; /* Margin botton same as .cSitePageSectionsLast*/
}

.PreviousButton {
    width: 50%;
    text-align: right;
}

.NextButton {
    width: 50%;
    text-align: left;
}

/*#endregion PageSections-and-FilterArea **************************/

/*#region FilterView-Lists ******************************/

/*All text td:s on BlogList, BlogCommentList & FilterList*/
.ViewTexts {
    /*Full-width-Images: Set Padding-Left:10% and text-indent: 10px on small screens < 600px */
    padding-right: 5px;
}
/* Common for BlogList, BlogCommentList & FilterFileList list */
.ViewImageMarginRow {
    /*Full-width-Images: Set Left:-5% on small screens < 600px and position:relative */
}

/* Common for BlogList, BlogCommentsList, FilterFileList & FilterList images*/
.ItemFilterViewImage {
    border-bottom: 2px solid transparent;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    /*Full-width-Images: Remove max-width and set width: 105vw on small screens < 600px */
    width: 100%;
    display: block; /* Set to align to center */
}

/*#endregion FilterView-Lists ************************/

/*#region ItemFilterListView *****************/

/* Main table id */
#cFilterList {
}

.ShowDiv {
    max-width: 95vw;
    margin-top: 5px;
}

#cShowText {
}

.CreateInfoSpan {
    margin-top: 5px;
    text-align: right;
    padding-right: 10px;
}

td.ViewItemFilterListMargin {
    max-width: 95%;
}

/*Generated class */
.ViewContentHeadingFilterList {
    font-size: calc(1em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

.ItemFilterListViewImage { /* FilterList Image */
    border-bottom: 2px solid transparent;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    vertical-align: middle;
    display: block; /* Set to align center */
}

.ItemFilterListViewIcon {
    max-width: 95%;
    width: auto; /* To not show as full-width-image*/
    display: inline-block; /* Don't align center */
}

/*#endregion ItemFilterListView ******/

/*#region ItemFilterFileListView **********/
/* Main div id */
#cFilterFileList {
    width: 100%;
}

#cFilterFileTextList {
    width: 100%;
    max-width: 700px;
}

.FilterFileList {
    /* border-top: 1px solid #dddddd; */
}

/* Generated class */
.ViewContentHeadingFilterFileList {
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

.ItemFilterFileListViewImage {
}

/*#endregion ItemFilterFileListView ******/

/*#region ItemFilterBlogListView ********/

/* Main div id */
#cBlogList {
}

.BlogList {
    margin: auto;
    margin-top: 10px;
    width: 100%;
    max-width: 1200px;
    background-color: transparent;
}


.ViewBlogListItems {
    min-width: 125px;
    width: 100%; /*default width*/
    vertical-align: top;
    text-align: center;
    float: left;
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
}

table.ViewBlogItemMargin {
    margin: auto;
    width: 100%;
    max-width: 800px;
    background-color: transparent;
    margin-bottom: 15px;
}

tr.ViewBlogItemImageMarginRow {
}

.ViewBlogHeader {
}

.ViewBlogHeading {
    font-size: calc(1em + 1vw);
    font-weight: bold;
    font-display: swap;
    font-family: 'Book Antiqua', 'Times New Roman', Times, serif;
    color: var(--font-color2), #000000;
    /*    line-height: 1.8em;*/
    text-align: center;
    /*    margin-bottom: 5px;
    margin-top: 5px;*/
}

.ViewBlogInfo {
    display: none;
    font-size: 14px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
}

.ViewBlogDate {
    color: #505050;
}

.ViewBlogAuthor {
    color: #505050;
}

.ViewBlogOwner {
    font-style: italic;
}

.AdminNewLinkSpanBlog {
    margin: auto;
    width: 95%;
    max-width: 800px;
    text-indent: 2.75%;
    padding-bottom: 1%;
    margin-top: -3%;
}

.AdminNewLinkBlogg {
    color: #505050;
    background-color: #ffffff;
}

/* Generated class */
.ViewContentHeadingFilterBlogList {
    font-size: calc(1em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: var(--font-color2);
}

.ItemFilterBlogListViewImage {
    width: 80%;
    margin: auto;
    height: unset;
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
}

.ViewBlogCustomEndRow {
}

.ViewBlogCustomEndDiv {
    color: #505050;
    text-align: center;
    padding: 3px;
    font-size: 30px;
}

.HeadingBlogExpander {
    cursor: pointer;
}

.BlogTextExpander {
    cursor: pointer;
}

.Expanded { /*used with ViewBlogListItems*/
    z-index: 500;
    /*box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

.BlogItemsRow {
    width: 100%;
}

.BlogItemRowInfo {
    width: 80%;
}

.BlogItemRowText {
    width: 80%;
    padding: 5%;
}

/* .ViewBlogCustomEndDiv::before {
        content: "*";
    }*/
/* Widgets */
/*If using Expander, set height and iveflow hidden on large screens to avoid jumping widgets:*/
.ViewBlogListItems_3Widgets {
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
    /* box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

    .ViewBlogListItems_3Widgets .ViewBlogHeading {
        font-size: calc(1.2em + 0.5vw);
    }

.ViewBlogListItems_2Widgets {
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
    /*    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
}

.ItemFilterBlogListViewImage_ {
    width: 100%;
    object-fit: contain;
    border: 1px solid transparent;
    margin: auto;
    min-width: 300px;
    min-height: 300px;
    max-width: 500px;
    max-height: 500px;
}


.ItemFilterBlogListViewImage_2Widgets {
    width: 80%;
    border: 1px solid white;
    border-radius: 100%;
    margin: auto;
    height: unset;
}

.ItemFilterBlogListViewImage_3Widgets {
    width: 80%;
    border: 1px solid white;
    border-radius: 100%;
    margin: auto;
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    max-height: 200px;
}

/*#endregion ItemFilterBlogListView ******/

/*#region ItemFilterBlogCommentsListView ************/

/* Main div id */
#cBlogCommentList {
}

.BlogCommentList {
}

table.ViewBlogCommentItemMargin {
    border-spacing: 0;
    margin-bottom: 15px;
    padding-top: 5px;
}

/* Generated class  */
.ViewContentHeadingFilterBlogCommentsList {
    font-size: calc(1em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

.ItemFilterBlogCommentsListViewImage {
}

/*#endregion ItemFilterBlogCommentsListView **************/

/*#region ItemFilterSectionListView **********/

/* Main div id */
#cItemsSectionList {
    min-height: 350px;
    margin-top: 1%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    /*    border-top: 1px solid #DDDDDD;*/
}

/* Media dependent width */
.ViewSectionItems {
    min-width: 125px;
    /* height: 350px;*/
    vertical-align: top;
    /*    padding: 5px;*/
    text-align: left;
    /*    float: left;*/
    /*margin-right: 0px;*/ /*To put sections direct to each other*/
    /*margin-left: -4px;*/ /*To put sections direct to each other*/
    /* margin-right: 4px; */ /*Default margin*/
    /*  margin-left: 4px;*/ /*Default margin*/
}

.ViewSectionItems_ImageLeft {
    /* max-height: 350px;*/
    /*    background: var(--body-bgcolor);*/
}

.ViewSectionItems_ImageRight {
    /* max-height: 350px;*/
    /*    background: var(--body-bgcolor);*/
}

.ViewSectionImageArea {
    margin-top: 10px;
    /*    height: 100px;*/
    /*    display: none;*/
}

.ViewSectionItems_ImageLeft .ViewSectionImageArea {
    float: left;
    width: 50%;
}

.ViewSectionItems_ImageRight .ViewSectionImageArea {
    float: right;
    width: 50%;
}

.ViewSectionImage {
    width: 100%;
    margin: auto;
    object-fit: contain;
    max-height: 60vh;
    /*    border-radius: 6px;*/
    /*    display: none;*/
}

.ViewSectionNameArea {
    margin-bottom: 5px;
    /* min-height: 50px; */
}

.ViewSectionItems_ .ViewSectionNameArea, .ViewSectionItems_ .ViewSectionTextArea {
    width: 90%;
    margin: auto;
    max-width: 1000px;
}

.ViewSectionItems_ImageRight .ViewSectionNameArea {
    width: 90%;
    margin: auto;
    margin-bottom: 5px;
    padding-top: 5em;
    text-align: center;
}

.ViewSectionItems_ImageLeft .ViewSectionNameArea {
    width: 90%;
    margin: auto;
    margin-bottom: 5px;
    padding-top: 7em;
    padding: 5%;
    text-align: center;
}

.ViewSectionName {
    font: var(--section-name-font);
    font-weight: normal;
    color: var(--font-color), #3B3B3B;
}

.ViewSectionTextArea {
    min-height: 100px;
}

.ViewSectionItems_ImageLeft .ViewSectionTextArea {
    width: 90%;
    margin: auto;
    margin-bottom: 5px;
    /*    margin-top: 5em;*/
    text-align: center;
    padding-inline-start: 5%;
}

.ViewSectionItems_ImageRight .ViewSectionTextArea {
    width: 90%;
    margin: auto;
    margin-bottom: 5px;
    /*    margin-top: 5em;*/
    text-align: center;
    padding-inline-start: 5%;
}

.ViewSectionText {
    font: var(--section-text-font);
    font-weight: normal;
    color: var(--font-color), #3B3B3B;
}

.ViewSectionLinkArea {
    min-height: 50px;
    text-align: center;
    width: 90%;
    margin: auto;
    padding-bottom: 1em;
    padding-top: 1em;
}

.ViewSectionLink, .ViewSectionLink:hover, .ViewSectionLink:visited, .ViewSectionLink:active {
    /*    font: var(--section-link-font);
    font-weight: bold;
    color: var(--font-color2);*/
    color: #ffffff;
    letter-spacing: 0.03em;
    font-size: 20px;
    border-radius: 30px;
    background-color: var(--accent-color-main);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    width: 120px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

    .ViewSectionLink:hover {
        background-color: var(--accent-color-main);
        opacity: 0.8;
        /*      font: var(--section-link-font);
        font-weight: bold;
        background-color: transparent;
        color: var(--font-color2);*/
    }


.ViewSectionOverlayLink, .ViewSectionOverlayLink:hover, .ViewSectionOverlayLink:visited, .ViewSectionOverlayLink:active {
    text-decoration: none;
    font: var(--body-font);
    font-weight: normal;
    color: var(--font-color2), #000000;
}

    .ViewSectionOverlayLink:hover {
        background-color: transparent;
        font: var(--body-font);
        font-weight: normal;
        color: var(--font-color2), #000000;
    }

.AdminNewLinkSpanSectionList {
}

/*#endregion ItemFilterSectionListView ***********/

/*#region ItemFilterImageSectionListView **********/

/* Main div id */
#cItemsImageSectionList {
    /*padding-bottom: 0; */ /* To compensate for section image height .*/
}

.ItemsImageSectionList {
    min-height: 350px;
    padding-top: 40px;
    margin-bottom: 60px;
    max-width: 90%;
    margin: auto;
    width: 90%;
}

/* Media dependent width and height */
.ViewImageSectionItems {
    min-width: 125px;
    width: 100%; /*default width*/
    vertical-align: top;
    text-align: center;
    float: left;
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
    /* box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%); */
    /* margin-right: 0px;*/ /*To put sections direct to each other*/
    /* margin-left: -4px;*/ /*To put sections direct to each other*/
    /* margin-right: 4px; */ /*Default margin*/
    /* margin-left: 4px;*/ /*Default margin*/
}

.ViewImageSectionImageArea {
    margin-top: 15px;
    /*    background: var(--body2-bgcolor);*/
    /*    border-radius:6px;*/
    /*    height: 100%; */ /* image section image height .*/
}

.ViewImageSectionImage {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    /*    border-radius:6px;*/
}

.ViewImageSectionNameArea {
    /*    margin-bottom: 5%;*/
    margin-top: 5%;
    min-height: 50px;
    max-height: 50px;
    text-align: center;
}

.ViewImageSectionName {
    font-size: 25px;
    font-weight: bold;
    font-family: var(--font-family);
    letter-spacing: 0.05em;
    color: var(--font-color2);
    word-break: break-word;
}

.ViewImageSectionTextArea {
    min-height: 70px;
    max-height: 70px;
    height: 70px;
    max-width: 500px;
    text-overflow: ellipsis;
    text-align: center;
    margin: auto;
    padding: 5% 10% 5% 10%;
}

.ViewImageSectionText {
    font-size: 18px;
    font-weight: normal;
    font-family: var(--font-family);
    letter-spacing: 0.05em;
    color: var(--font-color2);
    text-overflow: ellipsis;
}

.ViewImageSectionLinkArea {
    max-height: 50px;
    padding: 5px;
    margin-bottom: 15px;
    text-align: left;
}

.ViewImageSectionLink, .ViewImageSectionLink:visited, .ViewImageSectionLink:hover, .ViewImageSectionLink:active {
    font-family: var(--font-family);
    font-weight: normal;
    color: var(--font-color2);
    letter-spacing: 0.05em;
    font-size: 18px;
    border-radius: 30px;
    background-color: var(--accent-color-medium);
    padding: 4px 8px 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    width: 120px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

    .ViewImageSectionLink:hover {
        background-color: transparent;
        border: 1px solid var(--accent-color-medium);
        color: var(--accent-color-medium);
    }

.ViewImageSectionOverlayLink, .ViewImageSectionOverlayLink:hover, .ViewImageSectionOverlayLink:visited, .ViewImageSectionOverlayLink:active {
    text-decoration: none;
}

    .ViewImageSectionOverlayLink:hover {
        background-color: rgb(8 8 8 / 20%);
    }


/* Widgets */
.ViewImageSectionItems_3Widgets {
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.ViewImageSectionItems_2Widgets {
    margin-bottom: 5px;
    margin-top: 10px;
    border-radius: 20px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

/*#endregion ItemFilterImageSectionListView ***********/

/*#region ItemFilterSlideView */

/* Main div id. */
#ImageSliderList, .ImageSliderList {
    /* padding-bottom: calc(20vh + 200px); /* To compensate for slider image height .*/
}

.mySlides {
    /*    display: none;
    border-bottom: 2px solid transparent;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 100%;
    display: block;*/
    display: none;
    width: 100vw;
    object-fit: cover;
    height: 100vh;
    min-height: 300px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    top: 0;
    filter: brightness(80%);
}

.slider-overlay {
    position: absolute;
    top: 30vh; /*test*/
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 95%;
}

.slider-overlay-name {
    padding-top: 50vh;
    font-size: calc(2em + 0.5vw);
    font-family: var(--body-font);
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 2;
}

.slider-overlay-text {
    font-size: calc(1em + 0.5vw);
    font-weight: bold;
    font-family: var(--body-font);
    color: #FFFFFF;
}

.OverLayMain, h1.OverLayMain {
    font-size: calc(4em + 0.5vw);
    font-weight: bold;
    font-style: italic;
    font-family: var(--body-font);
    color: #FFFFFF;
    margin-block-end: 0;
    margin-block-start: 0;
}

.OverLayText, h2.OverLayText {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: var(--body-font);
    color: #FFFFFF;
}

.AdminNewLinkSpanSlider {
    position: absolute;
}
/*#endregion ItemFilterSlideView */

/*#region ItemFilterFileCollectionView */

/*Main div id*/
#cImageList {
}

.ImageCollecionList {
    width: 500px;
}

/* Generated class */
.ViewContentHeadingFilterFileCollection {
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}
/*#endregion ItemFilterFileCollectionView */

/*#region ItemFilterFileCollectionView2 */

/*Main div id*/
#cImageList2 {
}

.ImageCollecionList2 {
    max-width: 500px;
}

/* Generated class */
.ViewContentHeadingFilterFileCollection2 {
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}
/*#endregion ItemFilterFileCollectionView2 */

/*#region ItemFilterProductListView ***************/

/* Main div id */
#cItemsProductList {
}

.ProductListPageHeader { /*Used in ProductListHeader layout section*/
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'open sans',sans-serif;
    letter-spacing: 0.08em;
    color: #0C305C;
}

.ProductListText { /*Used in ProductListText layout section*/
}

.ProductListFooter { /*Used in ProductListFooter layout section*/
}

/* Generated class */
.ViewContentHeadingFilterProductList {
    font-size: calc(1.3em + 1vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

.ViewFilterProductListBgImageArea {
    pointer-events: none;
    background-color: #C6E2F7 !important;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
}

.ViewProductItems {
    float: left;
    background-color: #FFFFFF;
    min-height: 435px;
    z-index: 20;
    margin-right: 5px;
    margin-bottom: 15px;
    margin-top: 0px;
}

.ViewProductListTextArea {
}

.ViewProductImageArea { /* container */
    position: relative;
    width: 100%;
}

.ViewProductImageOverlay {
    position: absolute;
    background: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    color: #C089B8;
    width: 50%;
    transition: .5s ease;
    font-size: 15px;
    padding: 5px;
    padding-left: 1%;
    text-align: left;
    word-break: break-word;
    bottom: 0;
    left: 0;
}

.ViewProductImage {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

/* width is media dependent */
.ViewProductListImage {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.ViewProductDateArea {
    padding-left: 1%;
    text-align: right;
    padding-right: 1%;
    height: 50px;
    background-color: #FFFFFF;
    font-family: poppins-semibold,poppins,sans-serif;
    font-size: 14px;
    color: #384E51;
}

.ViewProductNameArea {
    padding-left: 2%;
    height: 50px;
    background-color: #FFFFFF;
    font-family: poppins-semibold,poppins,sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #384E51;
    padding-bottom: 10px;
    vertical-align: middle;
}

.ViewProductPriceArea {
    padding-left: 2%;
    min-height: 50px;
    background-color: #FFFFFF;
    font-family: poppins-semibold,poppins,sans-serif;
    font-size: 15px;
}

.ViewProductPriceText {
    font-family: poppins-semibold,poppins,sans-serif;
    font-size: 18px;
    color: #36B5CD;
    line-height: 30px;
}

.ViewProductPublicIdLinkArea {
    padding-left: 1%;
    background-color: #FFFFFF;
    font-family: poppins-semibold,poppins,sans-serif;
    font-size: 16px;
    color: #384E51;
    height: 50px;
    text-align: center;
}

.ViewProductPublicIdLink, .ViewProductPublicIdLink:visited {
    color: #ffffff;
    font-family: 'open sans',sans-serif;
    letter-spacing: 0.05em;
    font-size: calc(0.8em + 0.5vw);
    background-color: #36B5CD;
    padding: 8px 10px 8px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
}

    .ViewProductPublicIdLink:hover, .ViewProductPublicIdLink:active {
        color: #ffffff;
        font-family: 'open sans',sans-serif;
        letter-spacing: 0.05em;
        font-size: calc(0.8em + 0.5vw);
        background-color: #36B5CD;
        padding: 8px 10px 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 10px;
    }

.AdminNewLinkSpanProductList {
    position: absolute;
    margin-top: 20px;
}

/*#endregion ItemFilterProductListView ***********/

/*#region ItemFilterProductView  ************/

/* Main div */
.ViewProductItem {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.ProductPageHeader { /*Used in ProductHeader layout section*/
}

.ViewProductTextArea {
    text-align: left;
    padding-top: 5px;
}

.PlayAllDivForm {
    height: 0;
    visibility: hidden;
}

.ProductHeaderDiv {
    margin-top: 5%;
    margin-bottom: 3%;
    padding: 10px;
    left: 50px;
    background-color: #01B1AF;
    font-size: 30px;
    font-weight: bold;
    font-family: 'open sans',sans-serif;
    text-align: center;
    color: #FFFFFF;
    box-shadow: 5px 10px 8px #888888;
}

.ProductInfoDiv {
    float: left;
    letter-spacing: 0.1em;
    line-height: 2em;
}

.ProductLabelPrice {
    color: #2B6CA3;
    font-weight: normal;
    font-family: open sans,sans-serif;
    font-size: calc(1em + 0.5vw);
    padding-right: 5px;
}

.ProductPrice {
    color: #3D9BE9;
    font-weight: bold;
    font-family: open sans,sans-serif;
    font-size: calc(1em + 0.5vw);
    letter-spacing: 0.02em;
}

.ProductLabelNames {
    color: #2B6CA3;
    font-weight: normal;
    font-family: open sans,sans-serif;
    font-size: calc(0.8em + 0.5vw);
    padding-right: 5px;
}

.ProductNames {
    color: #2B6CA3;
    font-weight: bold;
    font-family: open sans,sans-serif;
    font-size: calc(0.8em + 0.5vw);
}

.ProductImageDiv {
    float: left;
    margin-bottom: 20px;
    margin-left: 5px;
}

.ProductImageText {
    font-family: 'open sans',sans-serif;
    font-weight: lighter;
    color: #505050;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-style: italic;
    line-height: normal;
}

.ProductTextArea {
    display: inline-block;
    line-height: 1.4;
}

.ProductHeaderText {
    font-size: 22px;
    font-weight: normal;
    font-family: 'open sans',sans-serif;
    color: #505050;
    word-wrap: break-word;
    text-align: left;
}

.ProductText { /*Used in ProductText layout section*/
    font-size: 18px;
    font-family: Tahoma,'open sans',sans-serif;
    color: #505050;
    word-wrap: break-word;
}

.ProductTextBold {
    font-size: 18px;
    font-weight: bold;
    font-family: Tahoma,'open sans',sans-serif;
    color: #505050;
    word-wrap: break-word;
}

.ProductTextItalic {
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    font-family: helvetica-w01-light,helvetica-w02-light,sans-serif;
    color: #505050;
    word-wrap: break-word;
}

.ProductLinkDiv {
    text-align: right;
}

.ProductFooter {
    font-family: 'open sans',sans-serif;
    color: #8ea9bb;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding-bottom: 50px;
}

.ProductLink, .ProductLink:visited {
    color: #ffffff;
    font-family: 'open sans',sans-serif;
    letter-spacing: 0.05em;
    font-size: 30px;
    background-color: #36699E;
    padding: 2px 10px 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
}

    .ProductLink:hover, .ProductLink:active {
        color: #ffffff;
        font-family: 'open sans',sans-serif;
        letter-spacing: 0.05em;
        font-size: 30px;
        background-color: #0C305C;
        padding: 2px 10px 2px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
    }

/*#endregion ItemFilterProductView ******************/

/*#region ItemFilterView ************/

/**main div id */
#cViewFilterItem {
}

.ViewFilterItem {
    text-align: center;
    z-index: 30;
}

.ViewFilterItemBgImageArea {
}

.ViewFilterItemBgImage {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 90%;
    left: 0;
    top: 102px;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
}

.ViewFilterItemImageArea {
    padding-top: 30px;
}

.ViewTextArea {
    text-align: left;
    max-width: 800px;
    margin: auto;
}

/*#endregion ItemFilterView*/

/*#region Image-Collection *******************/

.container { /* Note: different form main Container class*/
    position: relative;
    width: 100%;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4); /* Black see-through */
    font-family: verdana,arial,sans-serif;
    color: #f1f1f1;
    width: 29%;
    transition: .5s ease;
    font-size: 9px;
    padding: 0px;
    padding-left: 1%;
    text-align: left;
    bottom: 10px;
    left: 70%;
}

/* When you mouse over the container, fade in the overlay title */
/*.container:hover .overlay {
    opacity: 1;
}*/

.ItemFilterFileViewImageClick { /*Used in Image Collection1 & 2*/
    border-bottom: 2px solid transparent;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    padding: 3px 0 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.ItemFilterFileViewFullImage { /*Used in Image Collection1 & 2*/
    border-bottom: 2px solid white;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-top: 10px;
    height: auto;
}

/*#endregion Image-Collection *************/

/*#region ImageCollection-FullScreen-View *********/
.ContainerFullScreen {
    position: relative;
    width: 100%;
}

div.closeDiv {
    padding-top: 5px;
}

.FullScreenClose {
    padding-left: 5px;
    cursor: pointer;
}

table.PrevNextButtonsArea {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
}

.SuperLink, .SuperLink:visited, .SuperLink:hover .SuperLink:active {
    font-size: calc(0.7em + 1vw);
    font-weight: bold;
    margin-left: 2%;
}

    .SuperLink:hover {
        font-size: calc(0.7em + 1vw);
        color: #BCA469;
        font-weight: bold;
        text-decoration: underline;
        margin-left: 2%;
    }

.CloseLink, .CloseLink:visited, .CloseLink:hover .CloseLink:active {
    font-size: 18px;
    font-weight: bold;
    margin-left: 2%;
}

    .CloseLink:hover {
        font-size: 18px;
        color: #BCA469;
        font-weight: bold;
        text-decoration: underline;
        margin-left: 2%;
    }

table.ViewFullImageMargin {
    margin-top: 5px;
}

.ItemFileViewFullImage {
    margin-left: auto;
    margin-right: auto;
    max-width: 98%;
    text-align: center;
}

.ItemFileViewFullFile {
    width: 98vw;
    height: 96vh;
    margin: auto;
}

/*#endregion ImageCollection-FullScreen-View *****/

/*#region Reactions-and-Comments **************/
.Reactions {
    display: inline-block;
    vertical-align: middle;
}

.ReactionsView {
    display: inline-block;
    vertical-align: middle;
    word-wrap: break-word;
    margin-bottom: 5px;
    margin-top: 5px;
}

.ReactionsEdit {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

.ReactionsAdd {
    display: inline-block;
    vertical-align: top;
}

.ReactionImage {
    vertical-align: middle;
    display: inline-block;
    padding-bottom: 2px;
    width: 16px;
    height: 14px;
}

.ReactionSmallImage {
    vertical-align: middle;
    display: inline-block;
    height: 16px;
}

.CommentAddCancelLink, .CommentAddCancelLink:visited, .CommentAddCancelLink:active {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    display: inline-block;
    text-decoration: none;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 8px 8px;
    text-align: center;
}

    .CommentAddCancelLink:hover {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        display: inline-block;
        text-decoration: none;
        border-radius: 20px;
        background-color: #DDDDDD;
        padding: 8px 8px;
        text-align: center;
    }

.ReactionSmallImageLink, .ReactionSmallImageLink:visited, .ReactionSmallImageLink:active {
    vertical-align: middle;
    display: inline-block;
    height: 16px;
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    text-decoration: none;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 8px 8px;
    text-align: center;
}

    .ReactionSmallImageLink:hover {
        vertical-align: middle;
        display: inline-block;
        height: 16px;
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        text-decoration: none;
        border-radius: 20px;
        background-color: #DDDDDD;
        padding: 8px 8px;
        text-align: center;
    }

.ReactionSmallerImage {
    vertical-align: middle;
    display: inline-block;
    height: 14px;
}

.ReactionSmallerImageClick {
    vertical-align: middle;
    display: inline-block;
    height: 13px;
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-size: 13px;
    margin: -1px;
    text-decoration: none;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 6px 3px 6px;
    text-align: center;
    cursor: pointer;
}

.ReactionSmallImage {
    vertical-align: middle;
    display: inline-block;
    height: 16px;
}

.ReactionViewImage {
    vertical-align: middle;
    display: inline-block;
    height: 18px;
    width: 20px;
    padding: 2px;
    text-decoration: none;
}

.ReactionViewText {
    display: inline-block;
    white-space: pre-wrap;
    padding-right: 4px;
    font-size: 12px;
    color: #505050;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    text-decoration: none;
}

.ReactionViewLink, .ReactionViewLink:link, .ReactionViewLink:visited {
    text-decoration: none;
    vertical-align: middle;
    color: #7a6c56;
    font-size: 13px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    margin: -1px;
    margin-bottom: 0;
    display: inline-block;
    padding: 2px 6px;
    text-align: center;
    border-radius: 20px;
    background-color: #FFFFFF;
}

    .ReactionViewLink:hover, .ReactionViewLink:active {
        text-decoration: none;
        vertical-align: middle;
        color: #7a6c56;
        font-size: 13px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        text-decoration: none;
        margin: -1px;
        margin-bottom: 0;
        display: inline-block;
        padding: 2px 6px;
        border-radius: 20px;
        background-color: #FFFFFF;
    }

.ReactionLink, .ReactionLink:link, .ReactionLink:visited {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-size: 13px;
    margin: -1px;
    display: inline-block;
    text-decoration: none;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 6px;
    text-align: center;
}

    .ReactionLink:hover, .ReactionLink:active {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 13px;
        margin: -1px;
        display: inline-block;
        text-decoration: none;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 2px 6px;
        text-align: center;
    }

span.ReactionLinkSpan, span.ReactionViewLinkSpan {
    margin-right: 5px;
}

.CommentLink, .CommentLink:visited {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    display: inline-block;
    text-decoration: none;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 5px 5px;
    text-align: left;
    margin: 5px;
    vertical-align: middle;
}

    .CommentLink:hover, .CommentLink:active {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        display: inline-block;
        text-decoration: none;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 5px 5px;
        text-align: left;
        margin: 5px;
        vertical-align: middle;
    }

.ReactionCreateDate {
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    color: #505050;
    font-weight: normal;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
}

.ReactionText {
    display: inline-block;
    vertical-align: middle;
    white-space: pre-wrap;
    padding-right: 5px;
    font-size: 13px;
    color: #505050;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    text-decoration: none;
}

.ReactionCreatedByUser {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    color: #7a6c56;
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
}

.ReactionButton {
    font-family: verdana,arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #E8CAC3;
    width: 40px;
    margin: 3px 1px 1px 3px;
    height: 30px;
    min-height: 26px;
}

.ReactionInput {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    vertical-align: middle;
    display: inline-block;
    border: none;
    word-wrap: break-word;
    resize: vertical;
    max-height: 100px;
    min-height: 18px;
}

.CommentEditInput {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    vertical-align: middle;
    display: inline-block;
    word-wrap: break-word;
    border: 1px solid #6d6d6d;
    width: 90%;
    resize: vertical;
    max-height: 100px;
    min-height: 18px;
    padding-top: 5px;
}

.CommentInput {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    vertical-align: middle;
    display: inline-block;
    word-wrap: break-word;
    border: 1px solid #6d6d6d;
    width: 70%;
    resize: vertical;
    max-height: 100px;
    min-height: 18px;
    padding-top: 5px;
}

    .CommentInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 14px;
        font-style: italic;
        margin: 1px 1px 1px 3px;
        padding-left: 2px;
    }

div.popup {
    position: relative;
    display: inline-block;
}

#cReactionListDiv, div.cReactionListDiv {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    font-family: verdana,arial,sans-serif;
    color: #7a6c56;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    border-radius: 6px;
    position: relative;
    left: 0;
    z-index: 998;
    padding: 4px 4px 2px 4px;
}

#cCommentListDiv, div.cCommentListDiv {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    font-family: verdana,arial,sans-serif;
    color: #7a6c56;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    border-radius: 6px;
    position: relative;
    left: 0;
    z-index: 999;
    padding: 4px 4px 2px 4px;
}

/* The popup  */
.popup .popupReaction {
    visibility: hidden;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    border: 1px #7a6c56 solid;
    padding: 4px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 30%;
    margin-left: -80px;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none; /*firefox*/
}

/* The popup */
.popup .popupComment {
    visibility: hidden;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    border: 1px #7a6c56 solid;
    padding: 4px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 30%;
    margin-left: -80px;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE and Edge */
}

/* The popup  fullsize*/
.popup .popupCommentFullSize {
    visibility: hidden;
    background-color: #fff;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    border: 1px #7a6c56 solid;
    padding: 4px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 30%;
    margin-left: -80px;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE and Edge */
}

/* Popup arrow */
.popup .popupReaction::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 1px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.popup .popupComment::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 1px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*#endregion Reactions-and-Comments  ***************/

/*#region Custom-Scrollbar  ***********/

/*::-webkit-scrollbar {
    height: 90%;
    width: 2px;
    color: transparent;
    border-radius: 20px;
}

    ::-webkit-scrollbar:hover {
        height: 90%;
        width: 2px;
        color: #FFFFFF;
        border-radius: 20px;
    }*/

/* Track */
/*::-webkit-scrollbar-track {
    height: 90%;
    box-shadow: inset 0 0 2px #FFFFFF;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}*/

/* Handle */
/*::-webkit-scrollbar-thumb {
    height: 90%;
    background: #FFFFFF;
    width: 5px;
    border-radius: 20px;
}*/

/* Handle on hover */
/*::-webkit-scrollbar-thumb:hover {
        height: 90%;
        background: #FFFFFF;
        width: 5px;
        border-radius: 20px;
    }*/

/*#endregion Custom-Scrollbar  ***********/

/*#region Modal-Loaders-Files **************/

.loader {
    left: 30%;
    top: 30%;
    border-radius: 50%;
    border-top: 14px solid transparent;
    border-right: 14px solid var(--accent-color-medium);
    border-bottom: 14px solid var(--accent-color-medium);
    border-left: 14px solid var(--accent-color-medium);
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
}

.fileloader {
    left: 30%;
    top: 30%;
    border-radius: 50%;
    border-top: 14px solid transparent;
    border-right: 14px solid var(--accent-color-medium);
    border-bottom: 14px solid var(--accent-color-medium);
    border-left: 14px solid var(--accent-color-medium);
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.fileDownload {
    left: 30%;
    top: 50%;
    border-radius: 6px;
    background-color: #daefd8;
    border-right: 1px solid var(--accent-color-medium);
    border-top: 1px solid var(--accent-color-medium);
    border-bottom: 1px solid var(--accent-color-medium);
    border-left: 1px solid var(--accent-color-medium);
    padding: 5px;
    text-indent: 5px;
    width: 140px;
    height: 25px;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    text-align: center;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #FFFFFF;
    border-radius: 20px;
    width: 80%;
    min-height: 100px;
}

    .modal-content p {
        font-size: 18px;
        font-family: 'Book Antiqua', 'Times New Roman', Times, serif;
        color: #6d6d6d;
        word-wrap: break-word;
        padding: 10px;
    }

/*#endregion Modal-Loaders-Files ****************/

/*#region FileInputs ***************************************/

/* Only for editing in view page, not used at the moment. Maybe not needed anymore*/
div.FileInputs {
    position: relative;
}

div.VisibleFile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    Font-Size: 14px;
    Font-Weight: Bold;
    color: #0E824D;
    text-decoration: none;
}

input.file {
    position: relative;
    text-align: right;
    opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

/*#endregion FileInputs ********************/

/*#region Account-and-Login-Pages ***********************/

div.LoginContainer {
    position: absolute;
    line-height: 1.5;
    top: 35%;
    left: 35%;
    margin-top: -100px;
    margin-left: -100px;
    max-width: 350px;
    max-height: 650px;
    max-width: 90% !important;
    overflow-x: hidden !important;
}

div.LoginFooter {
    background-color: transparent;
}

/* Used on logout page */
.HeadingLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--accent-color-medium);
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

td.LoginColumn {
    padding: 3px;
    min-height: 22px;
}

td.LoginTextColumn {
    width: 70%;
}

#cSupportInfo {
    background-color: #f7f3f3;
    border-radius: 5px;
    border: 1px #FFFFFF solid;
    position: relative;
    padding: 5px;
    max-width: 280px;
    width: 80%;
    min-width: 220px;
}

.Bullet {
    color: #7a6c56;
}

td.HeadingLogoArea {
    vertical-align: middle;
    height: 60px;
}

.HeadingLoginLogo {
    font-size: 25px;
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    letter-spacing: 0.05em;
    color: var(--accent-color-medium);
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.SubHeadingLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #505050;
    text-decoration: none;
    margin: 1px 1px 1px 3px;
}

.LoginLink, .LoginLink:visited {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: underline;
    margin: 1px 1px 1px 0px;
}

    .LoginLink:hover, .LoginLink:active {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: var(--link-color);
        font-weight: normal;
        margin: 1px 1px 1px 0px;
        text-decoration: underline;
    }

.ConditionsLink, .ConditionsLink:visited {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: underline;
    margin: 1px 1px 1px 0px;
}

    .ConditionsLink:hover, .ConditionsLink:active {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: var(--link-color);
        font-weight: normal;
        margin: 1px 1px 1px 0px;
        text-decoration: underline;
    }


.LoginIndentLink, .LoginIndentLink:visited {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: underline;
    margin: 1px 1px 1px 3px;
}

    .LoginIndentLink:hover, .LoginIndentLink:active {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: var(--link-color);
        font-weight: normal;
        margin: 1px 1px 1px 3px;
        text-decoration: underline;
    }

#showLoginInfo {
    display: inline-block;
    line-height: 1.2;
    max-width: 280px;
    padding: 3px;
}

.MessageLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #505050;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.ErrorLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #d01010;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.ValidatorLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    color: #d01010;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.TextLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #505050;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.LoginCheckBox {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #505050;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

.InputLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: normal;
    height: 24px;
    min-height: 20px;
    margin: 1px 1px 1px 3px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

    .InputLogin::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-family: verdana,arial,sans-serif;
        font-size: 13px;
        font-style: italic;
        margin: 1px 1px 1px 3px;
        padding-left: 2px;
    }

.ButtonLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border: 1px solid var(--accent-color-medium);
    border-radius: 20px;
    background-color: var(--accent-color-medium);
    margin: 3px 1px 1px 3px;
    height: 32px;
    min-height: 26px;
}

.DisabledButtonLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    border: 1px solid var(--accent-color-medium);
    border-radius: 20px;
    background-color: var(--accent-color-medium);
    margin: 3px 1px 1px 3px;
    height: 32px;
    min-height: 26px;
    opacity: 0.6;
}

div.ConfirmContainer {
    position: absolute;
    top: 30%;
    left: 35%;
    margin-top: -100px;
    margin-left: -100px;
    max-width: 350px;
    width: 90% !important;
    overflow-x: hidden !important;
    margin-bottom: 20px;
}

.HeadingConfirm {
    font-family: verdana,arial,sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #505050;
    text-decoration: none;
    margin: 1px 1px 1px 3px;
}

.HeadingAbout {
    font-family: verdana,arial,sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #505050;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

#cSiteConditions {
    max-width: 100%;
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px #7a6c56 solid;
    position: relative;
    padding: 10px;
}

td.SubmitStatus {
    max-width: 270px;
    background-color: #e6fae4;
    border-radius: 5px;
    border: 1px #FFFFFF solid;
    padding: 10px;
}

td.SubmitError {
    padding: 3px;
}

/*#endregion Account-and-Login-Pages ********/

/*#region Generated-Classes **************/

/* ViewContentFilterArea_[ContentId]_[position] */
/* ViewSectionItems_[ItemId]*/
/* ViewFilterItemBgImageArea_[ItemId]*/

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

    .ViewImageSectionItems {
        margin-bottom: 5px;
        margin-top: 15px;
        border-radius: 20px;
        background-color: var(--body2-bgcolor);
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .ViewImageSectionImage {
        max-height: unset;
    }

    .ViewImageSectionName {
        font-size: 22px;
    }

    .ViewImageSectionText {
        font-size: 18px;
    }

    .ViewImageSectionLink, .ViewImageSectionLink:visited, .ViewImageSectionLink:hover,
    .ViewImageSectionLink:active {
        font-size: 22px;
        width: 150px;
    }
}
/******* Request and User forms ********/

.RequestViewCreateArea {
    max-width: 600px;
    width: 95%;
}

/* Main request div */
.RequestCreateDiv {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
/* Main user create div */
.UserCreateDiv {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.RequestShowDiv {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Main request confirmation div */
.ConfirmationDiv {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
    font-weight: bold;
    font-family: var(--font-family), serif;
    color: #6A9B85;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
    margin-top: 25px;
}

.ProductPurchaseButtonArea {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.Label {
    font-family: var(--font-family), serif;
    color: #3a3a3a;
    font-size: 1.2em;
    margin: 1px 1px 1px 1px;
    text-decoration: none;
    vertical-align: top;
}

.FormText {
    font-family: var(--font-family), serif;
    color: #6d6d6d;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.05em;
    margin: 1px 1px 1px 1px;
    text-decoration: none;
    vertical-align: top;
}

.TextBoxMultiLine {
    font-family: var(--font-family), serif;
    color: #3a3a3a;
    font-size: 16px;
    resize: vertical;
}

.InputForm {
    font-size: 15px;
    font-weight: normal;
    height: 20px;
    min-height: 20px;
    margin: 1px 1px 1px 1px;
    width: 80%;
}

    .InputForm::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-size: 13px;
        font-style: italic;
        margin: 1px 1px 1px 1px;
        padding-left: 2px;
    }

.EditForm {
    width: 80%;
}

/******* End Request and User forms ********/


.ActionLabel {
    color: #ffffff;
    letter-spacing: 0.03em;
    font-size: 20px;
    border-radius: 30px;
    background-color: var(--accent-color-main);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    width: 200px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/*#endregion Generated-Classes ***/
/*#region Media-Css ************************************/
/* Wide screens */
@media screen and (min-width: 1351px) {

    .MenuSmallScreen {
        display: none;
    }

    .MenuWideScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MainPanel {
        max-width: 1300px;
        margin: auto;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 1600px;
        left: 200px;
        /*        padding-left: 200px;*/
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        min-height: 800px;
        min-width: 100%
    }

    div.TopContainerText {
        margin-left: 50px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 300px;
        width: 400px;
    }

    .popup .popupCommentFullSize {
        height: 600px;
        width: 500px;
    }

    .popup .popupReaction {
        height: 300px;
        width: 200px;
    }

    .TextUserInfo {
        font-family: verdana,arial,sans-serif;
        color: #7a6c56;
        font-size: 14px;
        font-weight: bold;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }

    /*Products and sections*/
    .ProductInfoDiv {
        width: 55%;
    }

    .ProductHeaderDiv {
        width: 50%;
    }

    .ProductImageDiv {
        width: 44%;
    }

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        margin: 1%;
        width: 48%;
    }


    /* Top Icons */
    .TopAreaDiv {
        top: 126px;
    }

    /*Widgets*/
    .ViewImageSectionItems_2Widgets {
        margin: 1%;
        width: 48%;
    }

    .ViewImageSectionItems_3Widgets {
        margin: 1%;
        width: 30%;
    }

    .ViewBlogListItems_2Widgets {
        margin: 1%;
        width: 48%;
        /*If using Expander, set:*/
        /* height: 550px;
        overflow-y: hidden;*/
    }

    .ViewBlogListItems_3Widgets {
        margin: 1%;
        width: 30%;
        height: 500px;
        overflow-y: hidden;
    }

    .ViewProductItems {
        width: 30%;
        border-right: 10px solid #C6E2F7;
        margin-left: 10px;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1350px) {

    .MenuSmallScreen {
        display: none;
    }

    .MenuWideScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MainPanel {
        max-width: 1000px;
        margin: auto;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 1250px;
        left: 100px;
        /*        padding-left: 100px;*/
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        min-height: 800px;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 50px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 300px;
        width: 400px;
    }

    .popup .popupReaction {
        height: 300px;
        width: 300px;
    }

    .popup .popupCommentFullSize {
        height: 500px;
        width: 500px;
    }

    .TextUserInfo {
        font-family: verdana,arial,sans-serif;
        color: #7a6c56;
        font-size: 14px;
        font-weight: bold;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }

    /*Products and sections*/
    .ProductInfoDiv {
        width: 55%;
    }

    .ProductHeaderDiv {
        width: 50%;
    }

    .ProductImageDiv {
        width: 44%;
    }

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        margin: 1%;
        width: 48%;
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 110px;
    }

    /*Widgets*/
    .ViewImageSectionItems_2Widgets {
        margin: 1%;
        width: 48%;
    }

    .ViewImageSectionItems_3Widgets {
        margin: 1%;
        width: 30%;
    }

    .ViewBlogListItems_2Widgets {
        margin: 1%;
        width: 48%;
        /*If using Expander, set:*/
        /*height: 550px;
        overflow-y: hidden;*/
    }

    .ViewBlogListItems_3Widgets {
        margin: 1%;
        width: 30%;
        /*If using Expander, set:*/
        /*height: 500px;
        overflow-y: hidden;*/
    }

    .ViewProductItems {
        border-right: 10px solid #C6E2F7;
        width: 45%;
        margin-left: 10px;
    }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {

    .MenuSmallScreen {
        display: none;
    }

    .MenuWideScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MainPanel {
        max-width: 800px;
        margin: auto;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 1000px;
        left: 50px;
        /*        padding-left: 50px;*/
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        min-height: 600px;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 240px;
        width: 300px;
    }

    .popup .popupReaction {
        height: 240px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 400px;
        width: 400px;
    }

    .TextUserInfo {
        font-family: verdana,arial,sans-serif;
        color: #7a6c56;
        font-size: 14px;
        font-weight: bold;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }

    /*Products and sections*/
    .ProductInfoDiv {
        width: 55%;
    }

    .ProductHeaderDiv {
        width: 50%;
    }

    .ProductImageDiv {
        width: 44%;
    }

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        margin: 1%;
        width: 48%;
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 100px;
    }

    /*Widgets*/
    .ViewImageSectionItems_2Widgets {
        margin: 1%;
        width: 48%;
    }

    .ViewImageSectionItems_3Widgets {
        margin: 1%;
        width: 30%;
    }

    .ViewBlogListItems_2Widgets {
        margin: 1%;
        width: 48%;
        /*If using Expander, set:*/
        /* height: 550px;
        overflow-y: hidden; */
    }

    .ViewBlogListItems_3Widgets {
        margin: 1%;
        width: 30%;
        /*If using Expander, set:*/
        /* height: 600px;
        overflow: hidden;*/
    }

    .ViewProductItems {
        border-right: 10px solid #C6E2F7;
        width: 45%;
        margin-left: 10px;
    }
}
/* Small screens */
@media screen and (min-width: 601px) and (max-width: 800px) {

    .MenuSmallScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        max-width: 800px;
        z-index: -1;
        margin: auto;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 800px;
        left: 50px;
        /*        padding-left: 50px;*/
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        min-height: 600px;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 240px;
        width: 300px;
    }

    .popup .popupReaction {
        height: 240px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 400px;
        width: 400px;
    }

    .TextUserInfo {
        font-family: verdana,arial,sans-serif;
        color: #7a6c56;
        font-size: 14px;
        font-weight: bold;
    }

    div.Header {
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }

    /*Products and sections*/
    .ProductInfoDiv {
        width: 55%;
    }

    .ProductHeaderDiv {
        width: 50%;
    }

    .ProductImageDiv {
        width: 44%;
    }

    .ViewProductItem {
        margin-top: -40px;
    }

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        width: 100%;
    }

    /*Widgets*/

    .ViewSectionItems_ImageLeft .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewSectionItems_ImageRight .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewImageSectionItems_2Widgets {
        width: 100%;
    }

    .ViewImageSectionItems_3Widgets {
        width: 100%;
    }

    .ViewBlogListItems_2Widgets {
        width: 100%;
    }

    .ViewBlogListItems_3Widgets {
        width: 100%;
    }

    .ViewProductItems {
        border-right: 10px solid #C6E2F7;
        width: 45%;
        margin-left: 10px;
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 126px;
    }
}

@media screen and (min-width: 451px) and (max-width: 600px) {

    .SmallListGridView {
        width: 440px;
    }

    .MenuSmallScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        max-width: 600px;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 600px;
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
        padding-top: 3%;
        margin-bottom: -1%;
        height: 72px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 220px;
        width: 300px;
    }

    .popup .popupReaction {
        height: 220px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 300px;
        width: 300px;
    }

    .TextUserInfo {
        display: none;
    }

    div.Header {
    }

    .cMainContentPlaceHolder_cSiteMenu_cSiteMenuSmallDevice_2 {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden !important;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }

    /*Products and sections*/
    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        width: 100%;
    }

    .ViewProductItem {
        margin-top: -40px;
    }

    .ViewProductItems {
        border-right: 5px solid #C6E2F7;
        width: 45%;
        margin-left: 10px;
    }

    .ItemFilterViewImage {
        height: auto;
    }

    .mySlides {
        /*        height: auto;
        margin-left: -35%;
        width: 800px;*/
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 123px;
    }

    /*Widgets*/

    .ViewSectionItems_ImageLeft .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewSectionItems_ImageRight .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewImageSectionItems_2Widgets {
        width: 100%;
    }

    .ViewImageSectionItems_3Widgets {
        width: 100%;
    }

    .ViewBlogListItems_2Widgets {
        width: 100%;
    }

    .ViewBlogListItems_3Widgets {
        width: 100%;
    }

    .ItemFilterBlogListViewImage_2Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_3Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_ {
        width: 100%;
        margin: auto;
        height: unset;
    }
}

@media screen and (min-width: 360px) and (max-width: 450px) {

    .SmallListGridView {
        width: 350px;
    }

    .MenuSmallScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        max-width: 450px;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 450px;
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
        padding-top: 3%;
        margin-bottom: -1%;
        height: 72px;
    }

    .TopContainerHomeLinkText {
    }

    .TopContainerSubText {
        font-size: 14px;
    }

    .popup .popupComment {
        height: 150px;
        width: 255px;
    }

    .popup .popupReaction {
        height: 150px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 200px;
        width: 200px;
    }

    .TextUserInfo {
        display: none;
    }

    div.Header {
    }

    .cMainContentPlaceHolder_cSiteMenu_cSiteMenuSmallDevice_2 {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden !important;
    }

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }

    /*Products and sections*/

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        width: 100%;
    }

    .ViewProductItems {
        width: 100%;
    }

    .ViewProductItem {
        margin-top: -40px;
    }

    .ItemFilterViewImage {
        height: auto;
    }

    .mySlides {
        /*        height: auto;
        margin-left: -35%;
        width: 700px;*/
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 120px;
    }

    /*Widgets*/

    .ViewSectionItems_ImageLeft .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewSectionItems_ImageRight .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewImageSectionItems_2Widgets {
        width: 100%;
    }

    .ViewImageSectionItems_3Widgets {
        width: 100%;
    }

    .ViewBlogListItems_2Widgets {
        width: 100%;
    }

    .ViewBlogListItems_3Widgets {
        width: 100%;
    }

    .ItemFilterBlogListViewImage_2Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_3Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_ {
        width: 100%;
        margin: auto;
        height: unset;
    }
}

@media screen and (min-width: 290px) and (max-width: 359px) {

    .SmallListGridView {
        width: 290px;
    }

    .MenuSmallScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        max-width: 359px;
        padding-top: 10px;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 359px;
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
        padding-top: 3%;
        margin-bottom: -1%;
        height: 72px;
    }

    .TopContainerHomeLinkText {
        margin-left: 110px;
        font-size: 35px;
    }

    .TopContainerSubText {
        font-size: 11px;
    }

    .popup .popupComment {
        height: 130px;
        width: 225px;
    }

    .popup .popupReaction {
        height: 130px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 200px;
        width: 200px;
    }

    .TextUserInfo {
        display: none;
    }

    div.Header {
    }

    .cMainContentPlaceHolder_cSiteMenu_cSiteMenuSmallDevice_2 {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden !important;
    }

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }

    /*Products and sections*/
    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        width: 100%;
    }

    .ViewProductItems {
        width: 100%;
    }

    .ViewProductItem {
        margin-top: -40px;
    }

    .ItemFilterViewImage {
        height: auto;
    }

    .mySlides {
        /*        height: auto;
        margin-left: -40%;
        width: 600px;*/
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 115px;
    }

    /*Widgets*/

    .ViewSectionItems_ImageLeft .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewSectionItems_ImageRight .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewImageSectionItems_2Widgets {
        width: 100%;
    }

    .ViewImageSectionItems_3Widgets {
        width: 100%;
    }

    .ViewBlogListItems_2Widgets {
        width: 100%;
    }

    .ViewBlogListItems_3Widgets {
        width: 100%;
    }

    .ItemFilterBlogListViewImage_2Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_3Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_ {
        width: 100%;
        margin: auto;
        height: unset;
    }
}

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

    .SmallListGridView {
        width: 250px;
    }

    .MenuSmallScreen {
        display: inline;
        margin: auto;
        text-align: center;
    }

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        max-width: 100%;
        padding-top: 10px;
        z-index: -1;
    }

    .MainPanelFullScreen {
        background-color: #FFFFFF;
        max-width: 289px;
        z-index: -1;
    }

    body {
        overflow-x: hidden !important;
    }

    div.Container, table.Container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    div.TopContainerText {
        margin-left: 0px;
        padding-top: 3%;
        margin-bottom: -1%;
        height: 72px;
    }

    .TopContainerHomeLinkText {
        margin-left: 110px;
        font-size: 35px;
    }

    .TopContainerSubText {
        font-size: 10px;
    }

    .popup .popupComment {
        height: 130px;
        width: 200px;
    }

    .popup .popupReaction {
        height: 130px;
        width: 200px;
    }

    .popup .popupCommentFullSize {
        height: 200px;
        width: 200px;
    }

    .TextUserInfo {
        display: none;
    }

    div.Header {
    }

    .cMainContentPlaceHolder_cSiteMenu_cSiteMenuSmallDevice_2 {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden !important;
    }

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }

    /*Products and sections*/

    .ViewSectionItems {
        width: 100%;
    }

    .ViewImageSectionItems {
        width: 100%;
    }

    .ViewProductItems {
        width: 100%;
    }

    .ViewProductItem {
        margin-top: -40px;
    }

    .ItemFilterViewImage {
        height: auto;
    }

    .mySlides {
        /*        height: auto;
        margin-left: -50%;
        width: 600px;*/
    }

    /* Top Icons */
    .TopAreaDiv {
        top: 115px;
    }

    /*Widgets*/
    .ViewSectionItems_ImageLeft .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewSectionItems_ImageRight .ViewSectionImageArea {
        width: 100%;
        float: none;
        height: auto;
    }

    .ViewImageSectionItems_2Widgets {
        width: 100%;
    }

    .ViewImageSectionItems_3Widgets {
        width: 100%;
    }

    .ViewBlogListItems_2Widgets {
        width: 100%;
    }

    .ViewBlogListItems_3Widgets {
        width: 100%;
    }

    .ItemFilterBlogListViewImage_2Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }

    .ItemFilterBlogListViewImage_3Widgets {
        width: 80%;
        border: 1px solid white;
        border-radius: 100%;
        margin: auto;
        height: unset;
    }
}

/* Overrides */
.MainPanel {
    max-width: unset;
}
/*#endregion Media-Css ******************/