/*#region core css ************************************/

body {
    font-family: verdana,arial,sans-serif;
    color: #000000;
    font-size: 16px;
    /*font-size: calc(1em + 1vw);*/
    font-weight: normal;
    line-height: 1.5; /* VaryBySite */
    margin: 0;
    padding: 0;
    background: #ffffff;
}

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

h1 {
    font-size: 20px;
    padding-left: 60px;
    color: #0E824D;
    font-family: calibri;
}

td {
    vertical-align: top;
}

html, form, body, td, li, p {
    margin: 0 0 0 0;
    overflow-x: hidden;
}
/*#endregion core css*/

/*#region media css ************************************/
@media screen and (min-width: 1251px) {

    .MenuSmallScreen {
        display: none;
    }

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

    .MainPanel {
        background-color: #FFFFFF;
        max-width: 1100px;
        left: 500px;
        padding-left: 500px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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


    #ImageList, .ImageList {
        width: 500px;
    }

    #ItemsList, .ItemsList {
        width: 500px;
    }

    .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;
    }

    /**** SiteView only ****/
    .cMainContentPlaceHolder_cSiteMenu_cSiteMenu_2 {
        padding-left: 500px;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }
}

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

    .MenuSmallScreen {
        display: none;
    }

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

    .MainPanel {
        background-color: #FFFFFF;
        max-width: 1000px;
        left: 200px;
        padding-left: 200px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 500px;
    }

    #ItemsList, .ItemsList {
        width: 500px;
    }

    .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;
    }

    /**** SiteView only ****/
    .cMainContentPlaceHolder_cSiteMenu_cSiteMenu_2 {
        padding-left: 200px;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }
}

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

    .MenuSmallScreen {
        display: none;
    }

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

    .MainPanel {
        background-color: #FFFFFF;
        max-width: 800px;
        left: 200px;
        padding-left: 200px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 400px;
    }

    #ItemsList, .ItemsList {
        width: 400px;
    }

    .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;
    }

    /**** SiteView only ****/
    .cMainContentPlaceHolder_cSiteMenu_cSiteMenu_2 {
        padding-left: 200px;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }
}

@media screen and (min-width: 601px) and (max-width: 800px) {

    .MenuSmallScreen {
        display: none;
    }

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

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

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 400px;
    }

    #ItemsList, .ItemsList {
        width: 400px;
    }

    .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;
    }

    /**** SiteView only ****/
    .cMainContentPlaceHolder_cSiteMenu_cSiteMenu_2 {
        padding-left: 50px;
    }

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }
}

@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 {
        background-color: #FFFFFF;
        max-width: 600px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 400px;
    }

    #ItemsList, .ItemsList {
        width: 400px;
    }

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

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

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

    .TextUserInfo {
        display: none;
    }

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

    .InputLogin {
        width: 270px;
    }

    .ButtonLogin {
        width: 277px;
    }

    .DisabledButtonLogin {
        width: 277px;
    }
}

@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 {
        background-color: #FFFFFF;
        max-width: 450px;
        z-index: -1;
    }

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

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

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 340px;
    }

    #ItemsList, .ItemsList {
        width: 340px;
    }

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

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

    .TextUserInfo {
        display: none;
    }

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

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }
}

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

    .SmallListGridView {
        width: 300px;
    }

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

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        background-color: #FFFFFF;
        max-width: 359px;
        padding: 0;
        padding-top: 10px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 300px;
    }

    #ItemsList, .ItemsList {
        width: 300px;
    }

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

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

    .TextUserInfo {
        display: none;
    }

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

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }
}

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

    .SmallListGridView {
        width: 250px;
    }

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

    .MenuWideScreen {
        display: none;
    }

    .MainPanel {
        background-color: #FFFFFF;
        max-width: 250px;
        padding: 0;
        padding-top: 10px;
        z-index: -1;
    }

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

    body {
        overflow-x: hidden !important;
    }

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

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

    #ImageList, .ImageList {
        width: 250px;
    }

    #ItemsList, .ItemsList {
        width: 250px;
    }

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

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

    .TextUserInfo {
        display: none;
    }

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

    .InputLogin {
        width: 80%;
    }

    .ButtonLogin {
        width: 83%;
    }

    .DisabledButtonLogin {
        width: 83%;
    }
}

/*#endregion media css ***/

/*#region Page Panels *************************************************/
div.TopContainer {
    margin: 0;
    padding: 0;
    left: 0px;
    width: 100%;
    height: calc(3.5em + 4vw);
    background: #ffffff;
    background-image: url("../../Images/Sites/gunnarosara/WeddingHeader3.png");
    background-position: top; /*Center the image*/
    background-repeat: no-repeat; /*Do not repeat the image*/
    background-size: cover; /*Resize the background image to cover the entire container*/
}

div.TopContainerText {
    text-align: left;
    width: 100%;
}

.TopContainerHomeLink, .TopContainerHomeLink:hover, .TopContainerHomeLink:visited {
    font-size: calc(1.5em + 1.2vw);
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-style: italic;
    font-stretch: wider;
    color: #BCA469;
    text-decoration: none;
}

    .TopContainerHomeLink:hover {
        font-size: calc(1.5em + 1.2vw);
        font-weight: bold;
        font-style: italic;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        color: #BCA469;
        text-decoration: none;
    }

    .TopContainerHomeLink:visited {
        font-size: calc(1.5em + 1.2vw);
        font-weight: bold;
        font-style: italic;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        color: #BCA469;
        text-decoration: none;
    }

div.Container {
    z-index: -1;
    margin: 0;
    left: 0px;
    background-color: #ffffff;
}

div.Header {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border-bottom: 0.5px solid #DDDDDD;
    border-top: 0.5px solid #DDDDDD;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    float: right;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

    div.Header h2 {
        padding: 0;
        margin: 0;
    }

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

table.MainPanelTable {
    width: 100%;
    padding-left: 2px;
    margin-left: 2px;
    margin-top: 2px;
}


div.Footer {
    font-family: Calibri;
    font-size: 12px;
    color: #BCA469;
    font-style: italic;
    background-color: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

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

.FooterLink, .FooterLink:hover, .FooterLink:visited, .FooterLink:active {
    font-family: Calibri;
    font-size: 14px;
    color: #BCA469;
    font-style: italic;
}

    .FooterLink:hover {
        font-family: Calibri;
        font-size: 14px;
        color: #BCA469;
        font-style: italic;
    }

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

/*#endregion Page panels*/

/* #region Menu ***********************************************************/

.Menu {
    background-color: #FFFFFF !important;
    color: #6d6d6d;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.MenuItem {
    width: 100%;
    background-color: #FFFFFF !important;
    color: #6d6d6d !important; /*** VaryBySite **/
    font-size: 16px;
    height: 40px;
    border-spacing: 10px 0px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
    font-stretch: wider;
}

    .MenuItem:hover {
        width: 100%;
        background-color: #FFFFFF !important;
        color: #E8CAC3 !important; /*** VaryBySite **/
        font-size: 16px;
        height: 40px;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
        font-stretch: wider;
    }

        .MenuItem:hover a {
            width: 100%;
            color: #E8CAC3 !important; /*** VaryBySite **/
            font-size: 16px;
            height: 40px;
            border-spacing: 10px 0px;
            font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
            text-decoration-line: none;
            font-stretch: wider;
        }

    .MenuItem a {
        color: #6d6d6d !important; /*** VaryBySite **/
        font-size: 16px;
        height: 40px;
        border-spacing: 10px 0px;
        font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
        font-stretch: wider;
    }

.LevelMenuItem {
    width: 100%;
    background-color: #FFFFFF !important;
    color: #6d6d6d !important; /*** VaryBySite **/
    height: 40px;
    font-size: 12px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif; /*** VaryBySite **/
    font-stretch: wider;
}

    .LevelMenuItem:hover {
        color: #E8CAC3;
    }

        .LevelMenuItem:hover a {
            color: #E8CAC3;
            text-decoration-line: none;
        }

    .LevelMenuItem a {
        color: #6d6d6d;
    }

.Selected {
    width: 100%;
    background-color: #E8CAC3 !important;
    color: #6d6d6d !important;
}

    .Selected:hover {
        background-color: #E8CAC3 !important;
        color: #6d6d6d !important;
    }

        .Selected:hover a {
            background-color: #E8CAC3 !important;
            color: #6d6d6d !important;
            text-decoration-line: none;
        }

    .Selected a {
        color: #6d6d6d !important;
        background-color: #E8CAC3 !important;
    }


.Level2 {
    background-color: #fff;
}

.IconButtons {
}

.IconButton {
    padding-top: 3px;
}

.IconButtonClose {
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
}

/*#endregion menu*/

/*#region Menu user info ******************************************************/

table.MenuUserInfoTable, div.MenuUserInfoTable {
    float: right;
    margin-right: 5px;
    margin-top: 5px;
    height: 12px;
    /* border-spacing: 10px 2px;*/
}

#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, .MenuUserInfoLink:active {
    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 {
        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, .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;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

    .MenuUserLogoutLink:hover {
        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 user info*/

/* #region Login ***********************************************************/

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

.HeadingLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #505050;
    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;
}

/* VaryBySite */
.HeadingLoginLogo {
    font-size: 22px;
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-style: italic;
    color: #BCA469; 
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

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

.LoginLink, .LoginLink:visited, .LoginLink:active {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #7a6c56;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 0px;
}

    .LoginLink:hover {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: #7a6c56;
        font-weight: normal;
        margin: 1px 1px 1px 0px;
        text-decoration: underline;
    }

.ConditionsLink, .ConditionsLink:visited, .ConditionsLink:active {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #7a6c56;
    font-weight: normal;
    text-decoration: underline;
    margin: 1px 1px 1px 0px;
}

    .ConditionsLink:hover {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: #7a6c56;
        font-weight: normal;
        margin: 1px 1px 1px 0px;
        text-decoration: underline;
    }

.LoginIndentLink, .LoginIndentLink:visited, .LoginIndentLink:active {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    color: #7a6c56;
    font-weight: normal;
    text-decoration: none;
    margin: 1px 1px 1px 3px;
}

    .LoginIndentLink:hover {
        font-family: verdana,arial,sans-serif;
        font-size: 15px;
        color: #7a6c56;
        font-weight: normal;
        margin: 1px 1px 1px 3px;
        text-decoration: underline;
    }

#showLoginInfo {
    display: inline-block;
    line-height: 1.2; /* VaryBySite */
    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: 20px;
    min-height: 20px;
    margin: 1px 1px 1px 3px;
}

    .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;
    background-color: #E7BBB5; /* VaryBySite */
    margin: 3px 1px 1px 3px;
    height: 30px;
    min-height: 26px;
}

.DisabledButtonLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #E8CAC3;
    margin: 3px 1px 1px 3px;
    height: 30px;
    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 Login*/

/* #region Default Links ****************************************/
a {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-size: 18px;
    font-weight: normal;
    text-decoration: none;
}

    a:visited {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 18px;
        font-weight: normal;
        text-decoration: none;
    }

    a:hover {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 18px;
        font-weight: normal;
        text-decoration: underline;
    }

.Link {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
}

    .Link:visited {
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        color: #7a6c56;
        font-size: 13px;
        font-weight: normal;
        text-decoration: none;
    }

    .Link:hover {
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        color: #7a6c56;
        font-size: 13px;
        font-weight: normal;
        text-decoration: underline;
    }

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

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

    .ButtonEdit:Visited {
        font-family: verdana,arial,sans-serif;
        Font-Size: 14px;
        Font-Weight: Bold;
        margin: 0px 1px 0px 3px;
        color: #7a6c56;
        text-decoration: none;
    }
/* #endregion Links*/

/* #region FileInputs***************************************/
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 Default Lists ***********************************************/

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

.ListHeader {
    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 {
        background-color: #DDDDDD;
        border-bottom: solid 1px #007733;
        color: #0E824D;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        height: 19px;
        text-align: left;
    }

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

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

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

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

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

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

.ListItem {
    background-color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 16px;
    font-weight: normal;
    height: 22px;
    border-bottom: 1px solid #daefd8;
}

    .ListItem:Hover {
        background-color: #daefd8;
    }

.ListItemLink {
    color: #0E824D;
    font-weight: bold;
}

    .ListItemLink:Hover {
        color: #0E824D;
        font-weight: bold;
    }

    .ListItemLink:Visited {
        color: #0E824D;
        font-weight: bold;
    }

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


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

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

    .ListAlternateItem:Hover {
        background-color: #daefd8;
    }

.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: 14px;
    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  Default Lists*/

/* #region View Styles ***********************************************************/


table.ViewBlogItemMargin {
    margin-left: -3px;
    margin-bottom: 15px;
}

.ViewItemMargin {
    margin-left: -3px;
}

table.ViewBlogCommentItemMargin {
    margin-left: -3px;
}

table.ViewItemFilterListMargin {
    margin-left: -3px;
}

.InvisibleLink, .InvisibleLink:visited, .InvisibleLink:active {
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #FFFFFF;
    font-size: 15px;
    text-decoration: none;
}

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

.AdminLink, .AdminLink:hover, .AdminLink:visited, .AdminLink:active {
    font-family: Calibri;
    font-size: 12px;
    color: #7a6c56;
    font-style: normal;
    background-color: #ffffff;
    border-radius: 10px;
    border-color: #ffffff;
    position: fixed;
    left: 80%;
    bottom: 25px;
    width: 40px;
    padding: 0px 8px 0px 8px;
    text-align: center;
}

    .AdminLink:hover {
        font-family: Calibri;
        font-size: 12px;
        color: #7a6c56;
        font-style: normal;
        background-color: #ffffff;
        border-radius: 10px;
        border-color: #ffffff;
        background-color: #ffffff;
        position: fixed;
        left: 80%;
        bottom: 25px;
        width: 40px;
        padding: 0px 8px 0px 8px;
        text-align: center;
    }

.ViewItem {
    margin-left: -3px;
    border-bottom: 1px solid #EEEEEE
}

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

.ViewSubHeading {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

.ViewCursive {
    font-size: 18px;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-style: italic;
    color: #6d6d6d;
}

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

.ViewTextMessage {
    font-size: 18px;
    font-family: 'Book Antiqua', 'Times New Roman', Times, serif;
    color: #6d6d6d;
    word-wrap: break-word;
    padding-left: 5px;
}

.ViewSmallText {
    font-size: 13px;
    font-family: 'Book Antiqua','Times New Roman', Times, 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: 'Book Antiqua','Times New Roman', Times, serif;
    color: #7a6c56;
}

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

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

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

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

.ViewLink, .ViewLink:visited, .ViewLink:active {
    color: #7a6c56;
    font-family: 'Book Antiqua','Times New Roman', Times, serif;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
}

    .ViewLink:hover {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 16px;
        font-weight: normal;
        text-decoration: underline;
    }

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

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

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

    .LinkViewMoreLess:hover {
        color: #7a6c56;
        font-family: 'Book Antiqua','Times New Roman', Times, serif;
        font-size: 18px;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 0px 8px 2px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
    }
/*#endregion View Styles*/

/* #region Image Collection view ***********************************************************/

.container {
    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;
}*/

.ItemFilterFileViewImage {
    border-bottom: 2px solid white;
    max-width: 100%;
    height: auto;
    padding: 3px 0 0 0;
    display: inline-block;
    vertical-align: middle;
}

.ItemFilterFileViewImageClick {
    border-bottom: 2px solid white;
    max-width: 100%;
    height: auto;
    padding: 3px 0 0 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.container {
    position: relative;
    width: 100%;
}

/** Full size **/
.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;
}

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

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

.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%;
    }

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

.ItemFileViewFullImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 98%;
}

/** End Full screen view **/


.ItemFilterFileViewFullImage {
    border-bottom: 2px solid white;
    max-width: 100%;
    padding-top: 10px;
    height: auto;
}

.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;
    height: 20px;
}

.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: 20px;
    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;
    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;
        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 */
}


/* Width */

::-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;
    }


/* 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 Image Collection view ***********************************************************/

/* #region modal ***********************************************************/
.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 ***********************************************************/