/*#region core css*/

body {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin: 0;
    background: #FFFFFF;
}

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

h1 {
    font-size: 22px;
    color: #0E824D;
    font-family: Garamond,'Times New Roman', Times, serif;
    font-style: italic;
}

    h1.Welcome {
        font-size: calc(0.6em +1vw);
        color: #0E824D;
        font-family: Garamond,'Times New Roman', Times, serif;
        font-style: italic;
    }

td {
    vertical-align: top;
}

    td.Middle {
        vertical-align: middle;
    }

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

input {
    font-size: 14px;
    height: 19px;
    margin: 1px 1px 1px 3px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

    input[type='checkbox'] {
        margin: 3px;
        border: unset;
        height: unset;
    }

    input[type='radio'] {
        font-size: 14px;
        height: unset;
        margin: 1px 5px 1px 3px;
        border: none;
    }


    input[type="date"] {
        font-style: italic;
        font-family: verdana,arial,sans-serif;
        font-size: 14px;
        font-style: italic;
        color: #aaaaaa;
        height: 24px;
        min-height: 24px;
        margin: 1px 1px 1px 3px;
        width: 142px;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
    }

        input[type="date"][value^="20"] {
            font-style: normal;
            font-size: 14px;
            color: black;
        }

/*#endregion core css*/

/*#region Page Panels **********************/
div.TopContainer {
    margin: 0;
    padding: 0;
    left: 0px;
    width: 100%;
    height: 28px;
    background: #FFFFFF;
}

div.SubTopContainer {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
}

div.Header {
    width: 100%;
    /*height: 32px;*/
    min-height: 32px;
    background-color: #505050;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    /*text-align: center;*/
    vertical-align: middle;
    float: right;
    margin: 0;
    overflow-x: hidden;
}

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

    div.Header p {
        padding: 0.5em;
        font: 1.0em;
        font-weight: bold;
    }

div.Container {
    z-index: 100;
    position: absolute;
    padding: 0 0 .5em 0;
    padding: 0;
    left: 0px;
    background-color: #ffffff;
}

div.SubHeader {
    width: 100%;
    height: 25px;
    background-color: #FFFFFF;
    color: #505050;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    float: right;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /*align-content: center;*/
}

div.Maincontent {
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
}

/**Media dependent also*/
.MainPanel, MainPanelItemList {
    background-color: #ffffff;
}

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

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

    div.Footer a {
        font-size: 12px;
        font-weight: bold;
    }

.WelcomeArea {
    text-align: center;
    padding-bottom: 15px;
    padding-left: 5px;
}

.WelcomeTextArea {
    float: left;
    width: 50%;
}

.WelcomeLogoArea {
    float: left;
    width: 50%;
}

div.DividerPanel {
    background-color: #FFFFFF;
    position: relative;
    float: right;
    width: 10px;
    z-index: -1;
}

span.CreateSpan {
    align-content: end;
}

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

td.ExpandArea, .ExpandArea {
    background-color: #daefd8;
    color: #0E824D;
    border: 1px solid #6A9B85;
    font-weight: bold;
    border-radius: 20px;
    padding: 6px;
    margin: 0;
    width: 70%;
    text-align: center;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.Expanded {
    background-color: #6A9B85 !important;
    color: #FFFFFF !important;
}

.ExpandArrow {
    cursor: pointer;
    font-size: 15px;
}


.SmallerExpandArrow {
    font-size: 13px;
}

.ExpandText {
    cursor: pointer;
}

.RemoveSpan {
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-radius: 6px;
    padding: 2px;
    margin: 2px;
}

td.SendList {
    height: auto;
    overflow-x: visible;
}

.SiteTextArea {
    padding-left: 3px;
    float: right;
}

.InviteMailArea {
    border: 1px solid #cccccc;
    border-radius: 6px;
}

.SendListArea {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    margin: 2px 1px 2px 3px;
    text-decoration: none;
    vertical-align: top;
}

.SmallExpandArea {
    background-color: #daefd8;
    color: #0E824D;
    border: 1px solid #6A9B85;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
    padding: 3px;
    width: 30%;
    margin: 0;
    text-align: center;
}

.ExpandButtonArea {
    background-color: #daefd8;
    color: #0E824D;
    border: 1px solid #6A9B85;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    margin: 0;
    text-align: center;
}

td.ExpandLine {
    vertical-align: middle;
    color: #6A9B85;
    width: 15%;
}

td.ExpandLineEnd {
    vertical-align: middle;
    color: #6A9B85;
    width: 3%;
    margin-left: -3%;
    padding-right: 5%;
}

td.ExpandSeparator {
    height: 1px;
}

hr.ExpandLine {
    width: 98%;
    padding: 0;
    border-spacing: 0;
    border-top: 1px solid #6A9B85;
    vertical-align: text-bottom;
}

hr.ExpandLineLeft {
    margin-right: -2%;
}

hr.ExpandLineRight {
    margin-left: -2%;
}

.SidePanel {
    background-color: #daefd8;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

/* Tags*/

.TagListArea {
    float: left;
    width: 100%;
}

.ItemTagArea {
    float: left;
    width: 100%;
}

.TagEditArea {
    width: 100%;
}
/*#endregion Page panels*/

/*#region Login and Error pages ***********************************************************/
div.LoginContainer {
    position: absolute;
    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: #0E824D;
    text-decoration: none;
    margin: 1px 1px 1px 3px;
}

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

.InputLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 22px;
    min-height: 22px;
    margin: 1px 1px 1px 3px;
    width: 270px;
    border-color: #aaaaaa;
}

.ButtonLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #6A9B85;
    width: 277px;
    margin: 3px 1px 1px 3px;
    height: 30px;
    min-height: 26px;
    border-color: #505050;
}

.DisabledButtonLogin {
    font-family: verdana,arial,sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #6A9B85;
    width: 277px;
    margin: 3px 1px 1px 3px;
    height: 30px;
    min-height: 26px;
    opacity: 30;
}

td.LoginTextColumn {
    width: 70%;
    max-width: 270px;
}

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: #0E824D;
    text-decoration: none;
    margin: 1px 1px 1px 3px;
}
/*#endregion Login and Error pages*/

/*#region Search **************************************************************/

.DivSearch {
    display: block;
}

.ButtonClear {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 3px;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 16px;
    vertical-align: middle;
    margin-left: 2px;
    border: none;
    background-color: transparent;
    vertical-align: bottom;
    cursor: pointer;
}

.ClearSearchButton {
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    height: 15px;
    vertical-align: text-top;
    left: -10px;
    margin-right: -10px;
}

.ButtonSearch, .ButtonSearch:Visited, .ButtonSearch:Hover {
    font-family: verdana,arial,sans-serif;
    background-color: #daefd8;
    border: 1px solid #cccccc;
    border-radius: 4px;
    border-left: none;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    /*    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);*/
    /* border-radius: 6px; */
    padding: 5px;
    padding-left: 5px;
    padding-top: 6px;
    font-size: 13px;
    font-weight: normal;
    height: 20px;
    min-height: 16px;
    margin: 1px -15% 1px 3px;
    width: 30px;
}

.ButtonSearchToggle, .ButtonSearchToggle:Visited, .ButtonSearchToggle:Hover {
    margin: 10px 10px 1px 10px;
    vertical-align: middle;
}

.ButtonSearchClose, .ButtonSearchClose:Visited, .ButtonSearchClose:Hover {
    margin: 3px 1px 1px 10px;
    text-indent: 15px;
}

.DropdownSearch {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 26px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    padding: 2px;
    margin: 7px 1px 5px 3px;
    min-width: 145px;
    max-width: 95%;
    width: 175px;
}

.TextBoxSearch {
    font-family: verdana,arial,sans-serif;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
    border-radius: 4px;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    padding: 2px;
    font-size: 14px;
    font-weight: normal;
    height: 23px;
    min-height: 16px;
    margin: 1px 1px 1px 3px;
    min-width: 140px;
    max-width: 95%;
    width: 170px;
    margin-right: -9px;
}

    .TextBoxSearch::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-style: italic;
        font-size: 13px;
    }

.TextBoxDate {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    vertical-align: top;
    height: 15px;
    min-height: 15px;
    margin: 1px 1px 1px 3px;
    width: 100px;
}

    .TextBoxDate::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-style: italic;
    }

.SearchLinkArea {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15%;
}

.SearhToggle {
    vertical-align: text-top;
    margin-top: -1px;
    margin-left: 0px;
    height: 20px;
    width: 20px;
    cursor: pointer;
    font-weight: bold;
    color: #6A9B85;
}

.SearchIcon {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    margin: 2px;
    padding-bottom: 2px;
}

.CloseSearhToggle {
    vertical-align: text-top;
    margin-left: 2px;
    height: 16px;
    width: 16px;
    cursor: pointer;
    font-weight: bold;
    color: #6A9B85;
}

span.SearchTypeArea, div.SearchTypeArea {
    position: relative;
    float: left;
    margin: 5px 5px 5px 5px;
}

.SearchTypeText {
    color: #505050;
    font-size: 13px;
    text-decoration: none;
    text-anchor: middle;
}

.SearchLink {
    color: #0E824D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

    .SearchLink:Hover {
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
    }

    .SearchLink:Visited {
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
    }

    .SearchLink:active {
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
    }

.SearchEventsClick {
    cursor: pointer;
}

.SearchEventsImage {
    vertical-align: text-bottom;
    height: 16px;
}

.SearchFilterDiv {
    display: flex;
    flex-direction: column;
    width: 98%;
    background-color: #daefd8;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: auto;
    margin-right: 10px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.SearchFilterHeader {
    width: 90%;
    border-bottom: 2px solid #6A9B85;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    padding: 5px;
    margin: auto;
    vertical-align: middle;
}

.ChooseDatePeriodDiv {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.SearchDistributedDiv {
    padding-bottom: 3px;
}

.piechart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.piechart2 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

/*#endregion Search*/
/*#region Menu */
.IconButton {
    padding-top: 0px;
    padding-bottom: 4px;
}

.IconButtonClose {
    padding-top: 0px;
    padding-left: 6px;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 4px;
}

div.SubMenuHeader {
    width: 100%;
    height: 25px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #505050;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    float: right;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.MenuTop {
    background-color: #505050 !important;
    color: #ffffff !important;
    height: 31px;
    text-align: center;
    /*vertical-align: middle;*/
    line-height: 31px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 1px;
    font-size: 15px;
    font-weight: bold;
    /*padding-left:250px;*/
    /*z-index: 999; IE8 FIX for asp:Menu */
}

.MenuItem {
    width: 100%;
    font-family: 'century gothic', verana, arial, sans;
    background-color: #505050 !important;
    color: #ffffff !important;
    font-size: 15px;
    letter-spacing: normal;
    font-weight: bold;
    height: 30px;
    border-spacing: 5px 0px;
}

    .MenuItem:hover {
        font-family: 'century gothic', verana, arial, sans;
        background-color: #505050 !important;
        color: #ffffff;
        font-weight: bold;
    }

        .MenuItem:hover a {
            font-family: 'century gothic', verana, arial, sans;
            background-color: #505050 !important;
            text-decoration-line: underline;
            color: #ffffff;
            font-weight: bold;
        }

    .MenuItem a {
        font-family: 'century gothic', verana, arial, sans;
        background-color: #505050 !important;
        color: #ffffff;
        font-weight: bold;
    }

.SmallDeviceMenuTop {
    width: 100%;
    height: 25px;
    background-color: #505050 !important;
    color: #ffffff !important;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 1px;
    font-size: 15px;
    font-weight: bold;
    /*padding-left:250px;*/
    /*z-index: 999; IE8 FIX for asp:Menu */
}

.SmallDeviceMenuItem {
    background-color: #505050 !important;
    font-family: 'century gothic', verana, arial, sans;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: bold;
    height: 25px;
    border-top: 1px solid #daefd8;
    border-spacing: 5px 0px;
    width: 100%;
}

    .SmallDeviceMenuItem:hover {
        background-color: #505050 !important;
        font-family: 'century gothic', verana, arial, sans;
        color: #ffffff;
        font-weight: bold;
    }

        .SmallDeviceMenuItem:hover a {
            background-color: #505050 !important;
            font-family: 'century gothic', verana, arial, sans;
            text-decoration-line: underline;
            color: #ffffff;
            font-weight: bold;
        }

    .SmallDeviceMenuItem a {
        background-color: #505050 !important;
        font-family: 'century gothic', verana, arial, sans;
        color: #ffffff;
        font-weight: bold;
    }

.SubMenuTop {
    background-color: #ffffff !important;
    color: #505050 !important;
    text-align: center;
    vertical-align: middle;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: normal;
    /*z-index: 999;*/ /* IE8 FIX for asp:Menu */
}

.SubMenuItem {
    background-color: #ffffff !important;
    color: #505050 !important;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    width: 100%;
}

    .SubMenuItem:hover {
        background-color: #ffffff !important;
        color: #505050 !important;
        font-weight: bold;
    }

        .SubMenuItem:hover a {
            background-color: #ffffff !important;
            color: #505050 !important;
            text-decoration-line: underline;
            font-weight: bold;
        }

    .SubMenuItem a {
        background-color: #ffffff !important;
        color: #505050 !important;
        font-weight: bold;
    }

.Selected {
    background-color: #ffffff !important;
    color: #505050 !important;
    text-decoration: none;
}

    .Selected:hover {
        background-color: #ffffff !important;
        color: #505050 !important;
        text-decoration: none;
    }

        .Selected:hover a {
            background-color: #ffffff !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
        }

    .Selected a {
        background-color: #ffffff !important;
        text-decoration-line: none;
        color: #505050 !important;
        text-decoration: none;
    }

        .Selected a.StaticSelectedStyle::after {
            background-color: #ffffff !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
        }

        .Selected a.StaticSelectedStyle:link, .selected a.StaticSelectedStyle:visited {
            background-color: #ffffff !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
        }

/*#endregion menu*/

/*#region Site Menu */
.SiteMenuAllScreen {
    margin: auto;
    margin-top: 3px;
    padding-top: 3px;
    text-align: left;
    border-top: 2px solid #6A9B85;
}

.SiteMenuItem {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    background-color: #FFFFFF !important;
    color: #007733 !important;
    font-size: 14px;
    height: 30px;
    border-spacing: 5px 0px;
}

    .SiteMenuItem:hover {
        font-family: verdana,arial,sans-serif;
        background-color: #FFFFFF !important;
        color: #007733 !important;
    }

        .SiteMenuItem:hover a {
            font-family: verdana,arial,sans-serif;
            background-color: #FFFFFF !important;
            text-decoration-line: underline;
            color: #007733 !important;
        }

    .SiteMenuItem a {
        font-family: verdana,arial,sans-serif;
        background-color: #FFFFFF !important;
        color: #007733 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

.SiteMenuSelected {
    background-color: #ffffff !important;
    color: #505050 !important;
    text-decoration: none;
    font-weight: bold;
}

    .SiteMenuSelected:hover {
        background-color: #FFFFFF !important;
        color: #505050 !important;
        text-decoration: none;
        font-weight: bold;
    }

        .SiteMenuSelected:hover a {
            background-color: #FFFFFF !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
            font-weight: bold;
        }

    .SiteMenuSelected a {
        background-color: #ffffff !important;
        text-decoration-line: none;
        color: #505050 !important;
        text-decoration: none;
        font-weight: bold;
    }

        .SiteMenuSelected a.StaticSelectedStyle::after {
            background-color: #ffffff !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
            font-weight: bold;
        }

        .SiteMenuSelected a.StaticSelectedStyle:link, .selected a.StaticSelectedStyle:visited {
            background-color: #ffffff !important;
            text-decoration-line: none;
            color: #505050 !important;
            text-decoration: none;
            font-weight: bold;
        }

/*#endregion Site Menu */

/*#region Control Panels*****************************************/
table.MainPanelTable, div.MainPanelTable, main.MainPanelTable {
    width: 98%;
    max-width: 98vw;
    padding-left: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 10px;
    margin-bottom: 15px;
}

div.NavigationPanel {
    margin-bottom: 10px;
    padding-bottom: 5px;
    width: 98%;
    padding-left: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

div.NavigationPanelNormal {
    width: 98%;
    padding-left: 6px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.DataList {
    padding-bottom: 30px;
    width: 98%;
    padding-left: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.ContentDataList {
    padding-bottom: 10px;
    width: 98%;
    padding-left: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

div.HeadingSitePageContentNameDiv {
    /*    text-indent: 3px;*/
    margin-bottom: 3px;
}

div.HeadingSitePageContentDiv {
}

.ContentListItem {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #eff6ee;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%)
}

.PublishedListItem {
    border: 1px solid #bcd6f5;
    border-radius: 10px;
    background-color: #fafafa;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%)
}

div.SitePanel {
    color: #505050;
    font-size: 17px;
    font-weight: bold;
    width: 98%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2px;
}

td.PanelMainContent, .PanelMainContent {
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    vertical-align: top;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 5px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

td.PanelHistory, .PanelHistory {
    background-color: #f4f4f4;
}

.AddContentPanel {
    background-color: #eff6ee !important;
}

td.PanelMainContentPadding, .PanelMainContentPadding {
    padding: 5px;
}

div.PanelMainContentPadding {
    line-height: 1.4;
    margin: 2px;
}

td.PanelPreviewContent {
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    vertical-align: top;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 0;
    margin: 0;
    /*    padding-left: 5px;*/
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

td.PanelMainContentEdit, div.PanelMainContentEdit {
    background-color: #ecfaeb;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    vertical-align: top;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 5px;
}

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

td.PanelSecondaryContent {
    background-color: #ffffff;
    width: 50%;
    vertical-align: top;
    margin: 10px;
}

td.PanelMainContentWide {
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    width: 70%;
    vertical-align: top;
    margin: 10px;
}

td.PanelSecondaryContentNarrow {
    background-color: #ffffff;
    width: 30%;
    vertical-align: top;
    margin: 10px;
}

td.PanelEditMainContent {
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    width: 50%;
    vertical-align: top;
    margin: 10px;
}

td.PanelEditMainContentWide {
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    width: 70%;
    vertical-align: top;
    margin: 10px;
}

td.PanelFull {
    background-color: #FFFFFF;
    vertical-align: top;
}

td.PanelEditFull {
    background-color: #F5F5DC;
    vertical-align: top;
}

.SiteShortCut {
    word-break: keep-all;
    flex-wrap: nowrap;
    padding-left: 5px;
    min-width: fit-content;
    float: left;
}

.GoToSiteShortCut {
    margin-left: 5px;
}

.GoToSiteLink {
}

.ShortCutArea {
    margin-left: 5px;
}

.ShortCut {
    display: contents;
    float: left;
    padding: 2px;
    padding-top: 4px;
    min-width: 130px;
    width: 98%;
    margin: auto;
    margin-top: 4px;
}

.SiteMenuAdminHeader {
    float: left;
    width: 30%;
    margin-top: 4px;
}

.SiteMenuAdminContent {
    float: left;
}

.ContentChangeArea {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}

/*#endregion Control Panels */

/*#region Page and Content Headings **********************************************/
tr.PageHeading, .PageHeading {
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    padding: 4px;
}

.SmallPageHeading, .SmallPageHeading {
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
    padding: 4px;
}

.PageSmallIndentHeading {
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
    margin-left: 15px;
    padding: 4px;
}

tr.PageHeadingLarge, .PageHeadingLarge {
    font-size: 18px;
    font-weight: bold;
    margin: 5px;
    padding: 4px;
}

tr.MainContentHeading {
    border-color: #007733;
    border-style: solid;
    background-color: #daefd8;
    color: #007733;
    font-size: 16px;
    font-weight: bold;
}

td.MainContentHeadingTD {
    border-top-color: #007733;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #007733;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    vertical-align: middle;
    height: 20px;
    color: #ffffff;
}

tr.MainContentHeadingEdit {
    border-color: darksalmon;
    background-color: peachpuff; /*#F5F5DC;*/
    color: #0E824D;
    border-style: solid;
    font-size: 16px;
    font-weight: bold;
}

td.MainContentHeadingEditTD {
    border-top-color: darksalmon;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: darksalmon;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    vertical-align: middle;
    height: 20px;
    color: #ffffff;
}

tr.Grid {
    border-bottom-style: solid;
    border-bottom-color: #505050;
    padding-top: 2px;
}

td.showHideTD {
    width: 20%;
}

/*#endregion Tablerows, tabledata*************************************/

/*#region Links and Buttons *******************************/
/* a:link, a:visited, a:hover, a:active */
a {
    font-family: verdana,arial,sans-serif;
    color: #0E824D;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}

    a:visited {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
    }

    a:hover {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
    }


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

    .Link:visited {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
    }

    .Link:hover {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
    }

.LinkNoUnderline {
    text-decoration: none;
}

    .LinkNoUnderline:visited {
        text-decoration: none;
    }

    .LinkNoUnderline:hover {
        text-decoration: none;
    }

.StrongLink {
    font-family: verdana,arial,sans-serif;
    color: #0E824D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

    .StrongLink:visited {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }

    .StrongLink:hover {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
    }

.StrongLinkDisabled {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.SemiLargeLink {
    font-family: verdana,arial,sans-serif;
    color: #0E824D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    margin: 2px;
}

    .SemiLargeLink:visited {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }

    .SemiLargeLink:hover {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
    }

.LargeLink {
    font-family: verdana,arial,sans-serif;
    color: #0E824D;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    margin: 2px;
}

    .LargeLink:visited {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
    }

    .LargeLink:hover {
        font-family: verdana,arial,sans-serif;
        color: #0E824D;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
    }

.InactiveLink {
    font-family: verdana,arial,sans-serif;
    color: #666666;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}

    .InactiveLink:visited {
        font-family: verdana,arial,sans-serif;
        color: #666666;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
    }

    .InactiveLink:hover {
        font-family: verdana,arial,sans-serif;
        color: #666666;
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
    }

.NavigationNoLink, .NavigationNoLink:visited, .NavigationNoLink:hover {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}


.ExternalLink {
    font-family: verdana,arial,sans-serif;
    color: #0075FF;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}

    .ExternalLink:visited {
        font-family: verdana,arial,sans-serif;
        color: #0075FF;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
    }

    .ExternalLink:hover {
        font-family: verdana,arial,sans-serif;
        color: #7e558f;
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
    }

.LargeExternalLink, .LargeExternalLink:visited, .LargeExternalLink:hover {
    color: #3474c1;
    Font-Size: 13px;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 8px;
    margin-right: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    word-break: break-all;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .LargeExternalLink:hover {
        background-color: #DDDDDD;
    }

    .LargeExternalLink::after {
        content: " »";
    }

.EditLink {
    color: #6A9B85;
    Font-Size: 13px;
    border-radius: 20px;
    background-color: #EEEEEE;
    padding: 2px 8px;
    margin-bottom: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
}

    .EditLink:visited {
        color: #6A9B85;
        Font-Size: 13px;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 2px 8px;
        margin-bottom: 3px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
    }

    .EditLink:hover {
        color: #6A9B85;
        Font-Size: 13px;
        border-radius: 20px;
        background-color: #EEEEEE;
        padding: 2px 8px;
        margin-bottom: 3px;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
    }

.ButtonLink, .ButtonLink:visited, .ButtonLink:hover {
    color: #0E824D;
    border-radius: 20px;
    border: 1px solid #0E824D;
    padding: 2px 9px;
    width: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    vertical-align: top;
    margin-bottom: 5px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .ButtonLink:hover {
        background-color: #DDDDDD;
    }

.ButtonEditLink, .ButtonEditLink:visited, .ButtonEditLink:hover {
    color: #0E824D;
    border-radius: 20px;
    border: 1px solid #0E824D;
    padding: 3px 9px;
    font-Size: 13px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    vertical-align: top;
    margin-bottom: 5px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

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

.ButtonAlignUnset, .ButtonAlignUnset:visited, .ButtonAlignUnset:hover {
    vertical-align: unset;
}

.ButtonLinkToggle, .ButtonLinkToggle:visited, .ButtonLinkToggle:hover {
    color: #0E824D;
    border-radius: 20px;
    border: 1px solid #0E824D;
    padding: 3px 9px;
    width: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    vertical-align: top;
}

    .ButtonLinkToggle:hover {
        background-color: #DDDDDD;
    }

.SmallButtonLink, .SmallButtonLink:visited, .SmallButtonLink:hover {
    color: #0E824D;
    font-size: 13px;
    border-radius: 20px;
    border: 1px solid #0E824D;
    padding: 1px 6px 2px 6px;
    width: 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    margin-top: -1px;
    margin-bottom: 2px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .SmallButtonLink:hover {
        background-color: #DDDDDD;
    }

.MinusMargin, .MinusMargin:visited, .MinusMargin:hover {
    padding: 2px 7px 1px 3px;
    height: 17px;
}

.MediumButtonLink, .MediumButtonLink:visited, .MediumButtonLink:hover {
    color: #0E824D;
    background-color: #FFFFFF;
    font-size: 13px;
    border-radius: 20px;
    border: 1px solid #0E824D;
    padding: 1px 7px 1px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 3px;
    min-width: 60px;
    height: 16px;
}

    .MediumButtonLink:hover {
        background-color: #DDDDDD;
    }


/**a:hover MUST come after a:link and a:visited
   a:active MUST come after a:hover*/

.ButtonSave, .ButtonSave:Visited, .ButtonSave:Hover {
    font-family: verdana,arial,sans-serif;
    font-Size: 13px;
    font-weight: bold;
    margin: 3px 0px 5px 3px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #0E824D;
    border-radius: 20px;
    background-color: #0E824D;
    padding: 2px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .ButtonSave:Hover {
        background-color: #06693c;
    }

.ButtonEdit, .ButtonEdit:Visited, .ButtonEdit:Hover {
    font-family: verdana,arial,sans-serif;
    font-Size: 13px;
    font-weight: bold;
    margin: 3px 0px 5px 3px;
    color: #0E824D;
    text-decoration: none;
    border: 1px solid #6A9B85;
    border-radius: 20px;
    background-color: #ffffff;
    padding: 3px 10px 3px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .ButtonEdit:Hover {
        background-color: #EEEEEE;
    }

.DisabledButtonEdit, .DisabledButtonEdit:Visited, .DisabledButtonEdit:Hover {
    font-family: verdana,arial,sans-serif;
    font-Size: 14px;
    font-weight: bold;
    margin: 3px 0px 5px 3px;
    color: #505050;
    text-decoration: none;
}

.SpanSearch2 {
    display: flex;
    justify-content: space-evenly;
}

.ButtonSearch2, .ButtonSearch2:Visited, .ButtonSearch2:Hover {
    font-family: verdana, arial, sans-serif;
    width: 50%;
    font-Size: 14px;
    font-weight: bold;
    margin: 10px 20px 3px 20px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #0E824D;
    border-radius: 20px;
    background-color: #0E824D;
    padding: 3px 40px 3px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.ButtonPublish:Hover {
    background-color: #174276;
}

.ButtonEditPublish, .ButtonEditPublish:Visited, .ButtonEditPublish:Hover {
    font-family: verdana,arial,sans-serif;
    font-Size: 13px;
    font-weight: bold;
    margin: 3px 0px 5px 3px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #999999;
    border-radius: 20px;
    background-color: #3474c1;
    padding: 3px 10px 3px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .ButtonEditPublish:Hover {
        background-color: #174276;
    }

.ButtonEditSpan {
    font-size: 12px;
}

.ButtonHeader {
    Font-Size: 14px;
    Font-Weight: Bold;
    color: #0E824D;
    text-decoration: none;
}

    .ButtonHeader:Hover {
        Font-Size: 14px;
        Font-Weight: Bold;
        color: #0E824D;
        text-decoration: underline;
    }

    .ButtonHeader:Visited {
        Font-Size: 14px;
        Font-Weight: Bold;
        color: #0E824D;
        text-decoration: none;
    }

.ButtonSaveMarked {
    Font-Size: 16px;
    Font-Weight: Bold;
    color: #0E824D;
    text-decoration: none;
}

    .ButtonSaveMarked:Hover {
        Font-Size: 16px;
        Font-Weight: Bold;
        color: #0E824D;
        text-decoration: underline;
    }

    .ButtonSaveMarked:Visited {
        Font-Size: 16px;
        Font-Weight: Bold;
        color: #0E824D;
        text-decoration: none;
    }

.SymbolButton {
    font-size: 16px;
}

.SitePageSectionItemButton, .SitePageSectionItemButton:Visited, .SitePageSectionItemButton:Hover {
    display: inline-block;
    font-family: verdana,arial,sans-serif;
    font-Size: 13px;
    font-weight: bold;
    color: #0E824D;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 5px 10px 5px 10px;
    margin-bottom: 2px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .SitePageSectionItemButton:Hover {
        background-color: #EEEEEE;
    }

.ContentListItemButton, .ContentListItemButton:Visited, .ContentListItemButton:Hover {
    display: inline-block;
    font-family: verdana,arial,sans-serif;
    font-Size: 13px;
    font-weight: bold;
    color: #0E824D;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #eff6ee;
    padding: 5px 10px 5px 10px;
    margin-bottom: 2px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%)
}

    .ContentListItemButton:Hover {
        background-color: #EEEEEE;
    }

.SettingsIcon {
    width: 12px;
    height: 12px;
    margin-bottom: -1px;
    padding-left: 1px;
    padding-right: 1px;
}

.SearchFilterOptions {
    display: flex;
    flex-wrap: wrap;
    margin-bottom:2px;
}

.FilterOption {
    color: #3474c1;
    Font-Size: 13px;
    border-radius: 20px;
    background-color: #f6f3f3;
    padding: 2px 8px;
    margin: 2px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
}

/*#endregion Links and Buttons *************/

/*#region Headings and Texts ***********************************************************/
.Heading {
    font-family: verdana,arial,sans-serif;
    color: #DDDDDD;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.LabelEditHeading {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: middle;
}

.Label {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: top;
}

.LabelExtraMargin {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-weight: bold;
    margin: 1px 1px 1px 5px;
    text-decoration: none;
    vertical-align: top;
}

.LabelField {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: top;
}

.LabelEdit {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 16px;
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: middle;
}

td.LabelText, .LabelText {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: top;
}

.LabelTextNoMargin {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-weight: normal;
    margin: 1px 0px 1px 0px;
    text-decoration: none;
    vertical-align: top;
}

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

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

.LabelDraft {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-style: italic;
    margin: 1px 1px 1px 3px;
    padding-left: 3px;
    text-decoration: none;
}

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

.LabelHeading {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-weight: bold;
    margin: 0px 1px 0px 3px;
    Font-Size: 16px;
    Font-Weight: Bold;
    text-decoration: none;
}

.Tag {
    color: #007733;
    Font-Size: 13px;
    border-radius: 20px;
    background-color: #f6f3f3;
    padding: 2px 8px;
    margin: 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.Text {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
}

.TextItemShow {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    white-space: pre-line;
}

.SmallStrongText {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 12px;
    font-weight: bold;
}

.SmallText {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 12px;
}

.GreyText {
    font-family: verdana,arial,sans-serif;
    color: #999999;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
}

.ErrorText {
    font-family: verdana,arial,sans-serif;
    color: Red;
    font-size: 14px;
    font-weight: normal;
}

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

/*#endregion Headings and Texts ************************************/

/*#region Lists and Tables***********************************************/

ul {
    list-style-type: disc;
}

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

ol {
    list-style-type: decimal;
}

    ol li {
        list-style-type: decimal;
    }


.ShowHeader {
    width: 98%;
    border-bottom: 2px solid #6A9B85;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    height: 19px;
    text-align: left;
    padding-top: 4px;
}

.ExtraHeader {
    padding-bottom: 6px;
    margin: 1px;
}

.ShowEditHeader {
    width: 98%;
    border-bottom: 2px solid #6A9B85;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    height: 19px;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
}

.ShowItem {
    width: 98%;
    background-color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    height: 22px;
    margin-bottom: 10px;
}

.ShowHistory {
    background-color: #f4f4f4;
}

.ItemFilterList {
    margin-top: 5px;
}

.ListHeader {
    width: 98%;
    border-color: #6A9B85;
    border-bottom: 1px solid #daefd8;
    border-top: 1px solid #6A9B85;
    color: #0E824D;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    height: 19px;
    text-align: left;
}

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

    .ListHeader:hover {
        border-bottom: solid 1px #6A9B85;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        height: 19px;
        text-align: left;
    }

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

.ListHeaderEdit {
    width: 98%;
    background-color: #daefd8;
    border-color: #007733;
    border-top: solid 1px #007733;
    color: #505050;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    height: 19px;
    text-align: left;
}

    .ListHeaderEdit:Hover {
        background-color: #daefd8;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        height: 19px;
        text-align: left;
    }

    .ListHeaderEdit:Visited {
        background-color: #daefd8;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        height: 19px;
        text-align: left;
    }

    .ListHeaderEdit:active {
        background-color: #daefd8;
        color: #0E824D;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        height: 19px;
        text-align: left;
    }

.ListShowMore {
}

    .ListShowMore:hover {
    }


.ListShowMoreArea {
    background-color: #ecfaeb;
    border: 1px solid #daefd8;
    border-radius: 6px;
    margin-bottom: 10px;
    width: 98%;
}

.AreaShowMore {
    width: 98%;
    margin-left: 0;
    background-color: #ecfaeb;
    border: 1px solid #daefd8;
    border-radius: 6px;
}

    .AreaShowMore:hover {
    }

.AreaShowMoreMain {
    float: left;
    width: 60%;
}

.AreaShowMoreSecondary {
    float: left;
}

.AreaShowMoreFooter {
    width: 99%;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    display: table;
    background-color: #FFFFFF;
    border: 1px solid #6A9B85;
    border-radius: 6px;
}

.ListItem {
    width: 98%;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    height: 22px;
    /*    border-bottom: 1px solid #daefd8;*/
    /*    border-top: 1px solid #daefd8;*/
}

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

.ListItemFull {
    width: 98%;
    background-color: #FFFFFF;
    border: 2px solid #daefd8;
    border-radius: 6px;
}

    .ListItemFull:hover {
        width: 98%;
        background-color: #ecfaeb;
        border: 2px solid #daefd8;
        border-radius: 6px;
    }

.ListItemFullExpanded {
    width: 98%;
    background-color: #ecfaeb;
    border: 2px solid #daefd8;
    border-radius: 6px;
}

.ListItemDiv {
    background-color: #FFFFFF;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
}

    .ListItemDiv:hover {
        background-color: #ecfaeb;
    }

.ListItemDivExpanded {
    background-color: #ecfaeb;
    border: 2px solid #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 {
    width: 100%;
    background-color: #ecfaeb;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
    padding: 5px;
    margin: -5px;
}

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

.EditListInsideEditItem {
    width: 98%;
    border: 1px solid #6A9B85;
    border-radius: 10px;
    background-color: #ecfaeb;
    padding: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 1%;
    margin-right: 1%;
    /*    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%)*/
}

.ListEditColumnMargin {
    padding-top: 5px;
    /*    padding-left: 1%;*/
}

.ListAlternateItem {
    background-color: #ffffff;
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    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: 14px;
    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: 14px;
    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: 14px;
    font-weight: normal;
    vertical-align: middle;
}

.ListItemExpandButton {
    font-weight: bold;
    text-decoration: none;
}

    .ListItemExpandButton:Hover {
        font-weight: bold;
        text-decoration: none;
    }

    .ListItemExpandButton:Visited {
        font-weight: bold;
        text-decoration: none;
    }

    .ListItemExpandButton:active {
        font-weight: bold;
        text-decoration: none;
    }

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

.HeaderDate {
    font-size: 12px;
}

td.PreviousButton {
    width: 50%;
    text-align: right;
    padding-bottom: 30px;
}

td.NextButton {
    width: 50%;
    text-align: left;
    padding-bottom: 30px;
}

.SitePageSectionItem {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 5px 10px 10px 10px;
    margin-bottom: 10px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.MinusWidth {
    width: 99%;
    margin: auto;
}

/* #region List Columns */
td.ListNarrowColumnChoose {
    width: 12%;
    text-align: match-parent;
    vertical-align: middle;
}

td.ListSuperNarrowColumn {
    width: 7%;
    max-width: 60px;
    text-align: left;
    vertical-align: middle;
}

td.ListSuperNarrowChooseColumnRight {
    width: 5%;
    text-align: right;
    vertical-align: middle;
}

td.ListNarrowChooseColumnRight {
    text-align: right;
    vertical-align: top;
}

td.ListDateColumn {
    width: 13%;
    max-width: 80px;
    text-align: left;
    vertical-align: middle;
}

td.ListDateNarrowColumn {
    width: 10%;
    max-width: 80px;
    text-align: left;
    vertical-align: middle;
}

td.ListNarrowColumn {
    width: 10%;
    text-align: left;
    vertical-align: middle;
}

td.ListSmallerColumn {
    width: 13%;
    text-align: left;
    max-width: 80px;
    vertical-align: middle;
}

td.ListHalfWideColumn {
    text-overflow: ellipsis;
    width: 15%;
    text-align: left;
    max-width: 70px;
    vertical-align: middle;
}

td.ListDoubleNarrowColumn {
    width: 20%;
    text-align: left;
    max-width: 50px;
    vertical-align: middle;
}

td.ListColumn {
    width: 25%;
    max-width: 80px;
    text-align: left;
    vertical-align: middle;
}

td.ListColumnTop {
    width: 25%;
    text-align: left;
    vertical-align: top;
}

td.ListWideColumn {
    width: 30%;
    max-width: 80px;
    text-align: left;
    vertical-align: middle;
}

td.ListChooseColumnRight {
    width: 20%;
    text-align: right;
    vertical-align: middle;
}

td.ListWideChooseColumn, ListWideChooseColumn {
    width: 30%;
    max-width: 80px;
    text-align: right;
    vertical-align: middle;
}

td.ListQuadColumn {
    width: 40%;
    max-width: 80px;
    text-align: left;
    vertical-align: middle;
}

td.ListTripleColumn {
    width: 75%;
    text-align: left;
    vertical-align: middle;
}

td.ListTripleHWColumn {
    width: 45%;
    text-align: left;
    vertical-align: middle;
    max-width: 100px;
    overflow-x: hidden;
}

td.ListDoubleColumn {
    width: 50%;
    text-align: left;
    vertical-align: middle;
}

td.LisDoubleWideColumn {
    width: 60%;
    text-align: left;
    vertical-align: middle;
}

td.ListWiderColumn {
    width: 80%;
    text-align: left;
    vertical-align: middle;
}

td.ListFullColumn {
    width: 100%;
    text-align: left;
    vertical-align: middle;
}

td.ListWidestColumn {
    width: 90%;
    text-align: left;
    vertical-align: middle;
}

td.ListEditColumn {
    width: 23%;
    text-align: left;
    vertical-align: middle;
}

td.ListEditWideColumn {
    /*    width: 75%;*/
    text-align: left;
    vertical-align: middle;
}

td.ListEditButtonColumn {
    width: 23%;
    text-align: left;
}

td.ListEditFullColumn {
    width: 98%;
    text-align: left;
    vertical-align: middle;
}

td.ListButtonColumn {
    width: 25%;
    text-align: left;
    vertical-align: middle;
}

td.ListButtonRightColumn {
    width: 25%;
    text-align: right;
    vertical-align: middle;
}

.ListSiteMenuItem {
    height: 20px;
}

/* #endregion List Columns */
/*#endregion Lists and Tables */

/*#region Controls: TextBoxes, CheckBoxes, FileInputs etc.  ***********************/
/*** FILE***/
iframe.IframeStyle {
    max-width: 600px;
    max-height: 600px;
    border: 0;
}

div.FileInputs {
    position: relative;
    cursor: pointer;
}

div.VisibleFile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    font-family: verdana,arial,sans-serif;
    Font-Size: 13px;
    font-weight: bold;
    margin: 0px 0px 0px 3px;
    color: #0E824D;
    text-decoration: none;
    border: 1px solid #0E824D;
    border-radius: 20px;
    background-color: #FFFFFF;
    padding: 2px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

div.VisibleFileAutoCreate {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    font-family: verdana,arial,sans-serif;
    Font-Size: 13px;
    font-weight: bold;
    margin: 0px 0px 0px 3px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #0E824D;
    border-radius: 20px;
    background-color: #0E824D;
    padding: 4px 8px 4px 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

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

tr.ShowLatestItemFileRow, .ShowLatestItemFileRow {
    background-color: #ffffff;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    padding: 3px;
}

.ShowFilesSpan {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 16px;
    min-height: 16px;
    margin: 3px 1px 1px 3px;
    vertical-align: top;
}

.DeleteFileCheck {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 16px;
    min-height: 16px;
    margin: 3px 1px 1px 3px;
    vertical-align: top;
}

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

.ItemFileViewFullFile {
    max-width: 98vw;
    max-height: 96vh;
    margin: auto;
    text-align: center;
}

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

/*** END FILE***/
.CheckBox {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    min-height: 19px;
    margin: 3px 1px 1px 3px;
    vertical-align: middle;
    border: unset;
}

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

.TextBoxMedium, .TextBoxValueEditable {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 150px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxMediumCursive {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    color: #505050;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 150px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxMediumSmall {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 120px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxSmall, {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 80px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxAttributeEditable {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 60px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxNarrow {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 16px;
    min-height: 16px;
    margin: 1px 1px 1px 3px;
    width: 20%
}

.TextBoxHalfWide {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 40%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxWide {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 22px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 80%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.TextBoxMultiLine {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    resize: vertical;
    width: 98%;
}

.SmallTextArea {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 38px;
    min-height: 38px;
    margin: 1px 1px 1px 3px;
    width: 80%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    resize: vertical;
}

.DivBoxEmail {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
    border: 1px solid #505050;
    border-radius: 5px;
    width: 80%;
    min-height: 200px;
    resize: vertical;
}

.DivEditableEmail {
    border: none;
    min-height: 200px;
    height: 100%;
    /*    resize: vertical;*/
}

.Dropdown {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: 1px 1px 1px 3px;
    width: 41%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownSmall {
    font-family: verdana,arial,sans-serif;
    font-size: 13px;
    margin: 0px 5px 0px 5px;
    width: 42%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownHalfWide {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: -1px 1px 1px 3px; /* minus top margin to compensate label vertical top*/
    width: 42%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownWide {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: -1px 1px 1px 3px; /* minus top margin to compensate label vertical top*/
    width: 82%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownSemiWide {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: -1px 1px 1px 3px; /* minus top margin to compensate label vertical top*/
    width: 62%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownMediumFixed {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    vertical-align: middle;
    margin: 1px 1px 1px 3px;
    width: 155px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownFixed {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: 1px 1px 1px 3px;
    width: 145px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.VerticalMiddle {
    vertical-align: middle;
}

select:disabled {
    font-family: verdana,arial,sans-serif;
    /*    font-size: 14px;*/
    background-color: transparent;
    border: none;
    color: #505050;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.SelectLabel {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    margin: 1px 1px 1px 3px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 2px;
    text-decoration: none;
    vertical-align: top;
}

/*#endregion*/

/*#region Calendar  **************************/
.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible;
    display: block;
}

    .ajax__calendar iframe {
        left: 0px !important;
        top: 0px !important;
    }

.ajax__calendar_body {
    height: 100px;
    width: 80px;
    position: relative;
    overflow: hidden;
    margin: auto;
}

/*#endregion Calendar ****************************/

/*#region Category Section*/

.SearchCategoryAttributeDiv {
    display: flex;
    padding-top: 6px;
    padding-bottom: 6px;
    flex-direction: column;
}

.SearchCategoryAttributeValueDiv {
    float: left;
}

.CategoryAttributeGroupHeadingDiv {
    width: 70%;
    border: 2px solid #6A9B85;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 5px;
    margin: auto;
    vertical-align: middle;
}

.CategoryAttributeDiv {
    display: flex;
    padding-top: 6px;
    padding-bottom: 6px;
}

.CategoryAttributeTextAreaDiv {
    display: flex;
    flex-direction: column;
}

.CategoryAttributeLabelDiv {
    float: left;
    min-width: 23%;
}

.CategoryAttributeValueDiv {
    float: right;
}

.CategoryAttributeSmallTextAreaValueDiv {
    float: left;
}

.CategoryAttributeTextAreaValueDiv {
    float: left;
}

.CategoryAttributeCheckBoxLabelDiv {
    float: left;
    width: 96%;
}

.CategoryAttributeViewDiv {
    display: flex;
    flex-grow: 1;
    margin-bottom: 10px;
}

.CategoryAttributeViewLabelDiv {
    float: left;
    min-width: 30%;
}

.CategoryAttributeViewValueDiv {
    float: right;
    font-weight: bold;
}

.CategoryAttributeViewLabelRadioDiv {
    float: left;
    min-width: 30%;
    padding-top: 3px;
}

input[type='checkbox']:disabled {
    opacity: 0;
}

    input[type='checkbox']:disabled + label {
        font-weight: bold;
    }

.SmallTextAreaCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 38px;
    min-height: 38px;
    margin: 1px 1px 1px 3px;
    width: 96%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    resize: vertical;
}

.TextAreaCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 100px;
    min-height: 100px;
    margin: 1px 1px 1px 3px;
    width: 96%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    resize: vertical;
}

.TextBoxCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    min-height: 19px;
    margin: 1px 1px 1px 3px;
    width: 96%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.SearchDropdownCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 13px;
    height: 24px;
    margin: -1px 1px 1px 3px; /* minus top margin to compensate label vertical top*/
    min-width: 155px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.DropdownCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    height: 24px;
    margin: -1px 1px 1px 3px; /* minus top margin to compensate label vertical top*/
    /*    width: 100%;*/
    min-width: 155px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.RadioButtonCategory {
}

.LabelCategoryView {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 15px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: top;
}

.LabelCategoryViewEdit {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    height: 16px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: middle;
}

.LabelCategory {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 1px 1px 1px 3px;
}

.LabelLegendEdit {
    font-family: verdana,arial,sans-serif;
    color: #505050;
    font-size: 14px;
    /*   height: 16px;*/
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: middle;
    padding-bottom: 4px;
    cursor: pointer;
}

.HeadingLegendEdit {
    display: inline-block;
    font-family: verdana, arial, sans-serif;
    font-Size: 14px;
    font-weight: bold;
    color: #0E824D;
    min-width: 70%;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background-color: #eff6ee;
    padding: 5px 10px 5px 10px;
    margin-bottom: 2px;
    margin-left: 3px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    /*    font-family: verdana,arial,sans-serif;
    color: #0E824D;
    font-size: 15px;
    font-weight: bold;
    margin: 1px 1px 1px 3px;
    text-decoration: none;
    vertical-align: middle;
    padding-bottom: 4px;*/
    cursor: pointer;
}

.CheckBoxCategory {
    font-size: 14px;
    font-weight: normal;
    min-height: 20px;
    line-height: 1.8;
}

.CheckBoxCategoryView {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
}

.Fieldset {
    font-size: 15px;
    font-weight: normal;
    min-height: 20px;
    margin: 1px 1px 1px 1px;
    /*    width: 77%;*/
    border: 1px solid #aaaaaa;
    border-radius: 4px;
}

.FieldsetView {
    font-size: 15px;
    font-weight: normal;
    margin: 1px 1px 1px 1px;
}
/*#endregion Category Section*/

/*#region HTML Editor  **************************/
.EditDescriptionArea {
    border: 1px solid #CCCCCC;
    padding: 1px;
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ShowDescriptionArea {
    padding: 1px;
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.cAreaDiv {
    width: 100%;
    height: 252px;
    min-height: 252px;
    background-color: #FFFFFF;
    padding-bottom: 2px;
    overflow: hidden;
}

.cAreaDivFullSize {
    width: 100%;
    height: 252px;
    min-height: 252px;
    background-color: #FFFFFF;
    padding-bottom: 2px;
    overflow: hidden;
}

.cAreaDivFullScreen { /* Width is media dependent */
    position: fixed; /* Stay in place */
    z-index: 800; /* Sit on top, but under modal */
    top: 83px;
    height: 90vh; /* Almost Full height */
    min-height: 90vh;
    overflow-x: hidden;
    overflow-y: hidden;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #ffffff;
}

.TextBox {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 170px;
    min-height: 170px;
    width: 99%;
    margin: 1px 1px 1px 3px;
    padding-left: 1px;
    padding-top: 1px;
    text-decoration: none;
    border: none;
    resize: none;
    overflow-x: hidden;
    overflow-y: scroll;
    resize: none;
}

.TextBoxEditable {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 170px;
    min-height: 170px;
    width: 99%;
    margin: 1px 1px 1px 3px;
    padding-left: 1px;
    padding-top: 1px;
    text-decoration: none;
    border: none;
    resize: none;
}

.TextBoxFullScreen {
    font-family: verdana,arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 89vh; /* Almost Full height */
    min-height: 89vh;
    max-width: 1200px;
    width: 98%;
    margin: 3px 1px 1px 3px;
    padding-left: 1px;
    padding-top: 1px;
    text-decoration: none;
    border: none;
    resize: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

.cCommentArea {
    width: 100%;
    height: 170px;
    flex-grow: 1;
    padding-left: 1px;
    padding-top: 1px;
    overflow-x: hidden;
    overflow-y: scroll;
    resize: none;
}

.cCommentAreaFullScreen {
    width: 100%;
    height: 90vh; /* Almost Full height */
    min-height: 90vh;
    flex-grow: 1;
    padding-left: 1px;
    padding-top: 1px;
    resize: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

.HtmlBar {
    background-color: #daefd8;
    width: 100%;
    height: 80px;
}

.HtmlBarFullScreen { /*Width is media dependent**/
    background-color: #daefd8;
    z-index: 800;
    height: 80px;
    position: fixed;
    top: 3px;
    border-top: 2px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.HtmlHeadingDiv {
    background-color: #daefd8;
    vertical-align: middle;
    width: 60%;
    float: left;
    height: 40px;
}

.HtmlSHowHeadingDiv {
    vertical-align: middle;
    height: 20px;
    margin-top: 10px;
}

.HtmlSHowLabelDiv {
    margin: 1px 1px 1px 3px;
}


.HtmlNavToolbar {
    float: right;
    height: 40px;
    margin-right: 2px;
}

.HtmlToolbar {
    float: left;
    height: 40px;
    margin-left: 2px;
}

.HtmlToolbarBasic {
    display: inline-flex;
}

/*** HTML Toolbar buttons */
.Arrow, .Arrow:visited {
    color: #007733;
    Font-Size: 16px;
    min-width: 20px;
    min-height: 25px;
    height: 26px;
    padding: 4px 8px 2px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}

    .Arrow:hover {
        color: #007733;
        Font-Size: 16px;
        min-width: 20px;
        min-height: 25px;
        height: 25px;
        padding: 4px 8px 1px 8px;
        margin: 2px 1px 2px 1px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;
        background-color: #CCCCCC;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
    }

.ToolListButton, .ToolListButton:visited, .ToolListButton:hover {
    color: #007733;
    font-size: 12px;
    border-radius: 5px;
    height: 25px;
    min-height: 25px;
    min-width: 20px;
    background-color: #fbf7f7;
    padding: 7px 8px 0px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.Bold, .Bold:visited, .Bold:hover {
    font-weight: bold;
}

.Cursive, .Cursive:visited, .Cursive:hover {
    font-style: italic;
    font-weight: normal;
}

.Underline, .Underline:visited, .Underline:hover {
    text-decoration: underline;
}

.StrikeThrough, .StrikeThrough:visited, .StrikeThrough:hover {
    text-decoration: line-through;
}

.StrikeThroughLink, .StrikeThroughLink:visited, .StrikeThroughLink:hover {
    text-decoration: line-through;
    color: #007733;
    font-weight: bold;
    min-width: 20px;
    font-size: 12px;
    height: 26px;
    min-height: 25px;
    border-radius: 5px;
    background-color: #fbf7f7;
    padding: 6px 8px 0px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.External, .External:visited, .External:hover {
    text-decoration: underline;
    text-decoration-color: #0075FF;
    text-decoration-style: double;
    font-weight: bold;
    font-size: 12px;
    min-width: 20px;
    min-height: 25px;
    height: 26px;
    border-radius: 5px;
    background-color: #fbf7f7;
    padding: 6px 8px 0px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.Internal, .Internal:visited, .Internal:hover {
    text-decoration: none;
    color: #007733;
    min-width: 20px;
    font-size: 12px;
    height: 26px;
    min-height: 25px;
    border-radius: 5px;
    background-color: #fbf7f7;
    padding: 6px 8px 0px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.HtmlToggleButton, .HtmlToggleButton:visited, .HtmlToggleButton:hover {
    color: #007733;
    font-size: 16px;
    border-radius: 5px;
    height: 26px;
    min-height: 25px;
    min-width: 20px;
    background-color: #fbf7f7;
    padding: 4px 8px 2px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.HtmlFullScreenToggleButton, .HtmlFullScreenToggleButton:visited, .HtmlFullScreenToggleButton:hover {
    color: #007733;
    font-size: 17px;
    border-radius: 5px;
    height: 26px;
    min-height: 25px;
    min-width: 20px;
    background-color: #fbf7f7;
    padding: 2px 8px 4px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.HtmlToolBarButton, .HtmlToolBarButton:visited, .HtmlToolBarButton:hover {
    color: #007733;
    font-Size: 16px;
    min-width: 20px;
    min-height: 25px;
    height: 26px;
    border-radius: 5px;
    background-color: #fbf7f7;
    padding: 4px 8px 2px 8px;
    margin: 2px 1px 2px 1px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

/*** End HTML Toolbar buttons */

/*#endregion HTML Editor ****************************/

/*#region Site Editor *************************/

.SiteTextsTextArea {
    width: 96%;
    height: 30vh;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
    resize: vertical;
    overflow-y: scroll;
}

.SiteTextsDivArea {
    width: 96%;
    max-width: 90vw;
    background-color: #fafefa;
    word-wrap: break-word;
    overflow-y: hidden;
    resize: vertical;
    padding: 5px;
}

.SiteTextsHTMLArea {
    width: 96%;
    height: 50vh;
    width: 96%;
    max-width: 90vw;
    background-color: #fafefa;
    word-wrap: break-word;
    white-space: pre-line;
    resize: vertical;
    padding: 5px;
}

.SiteCssTextArea {
    width: 96%;
    height: 50vh;
    width: 96%;
    max-width: 90vw;
    background-color: #fafefa;
    word-wrap: break-word;
    white-space: pre-line;
    resize: vertical;
    padding: 5px;
}

.SiteCssDivArea {
    display: none;
    width: 0px;
    max-width: 0vw;
    height: 0px;
    overflow: hidden;
}

/*#endregion SiteEditor*/

/* #region Create Site Page Content */

.ContentCreateArea {
    width: 99%;
    max-width: 99%;
    overflow-x: hidden;
}

.HelpAreaItemListViews {
    line-height: 1.5;
}

    .HelpAreaItemListViews p {
        padding: 2px;
    }

        .HelpAreaItemListViews p::before {
            content: " • ";
        }

.ItemListViewPanel {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    padding: 3px;
    width: 100%;
}

.ItemListViewTextPanel {
    background: #FFFFFF;
    padding: 2%;
    float: left;
    width: 35%;
    text-align: left;
    vertical-align: top;
}

.ItemListViewImagePanel {
    background: #FFFFFF;
    float: right;
    width: 60%;
    max-width: 440px;
    text-align: right;
    vertical-align: top;
}

.ItemListViewTemplateImage {
    width: 100%;
    max-width: 400px;
}

.ImageEditListImage {
    width: 100px;
    max-height: 70px;
    object-fit: cover;
    cursor: pointer;
}

.SiteImage {
    width: 100%;
    object-fit: contain;
}
/* #endregion Create Site Page Content */

/* #region Request */

.RequestViewCreateArea {
    padding: 6px;
    margin-bottom: 30px;
}

.ChooseRequestUserDiv {
    line-height: 2;
    margin-bottom: 5px;
}

.RequestUserCreateDiv {
    width: 96%;
    background-color: #ecfaeb;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    vertical-align: top;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 5px;
    padding-left: 5px;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

.RequestItemCreateDiv {
}

.ShowRequestEditHeader {
    width: 96%;
}

.ChooseUserOrCreateDiv {
    margin-bottom: 5px;
}

.ProductLink, .ProductLink:visited {
    color: #ffffff;
    height: 30px;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #0E824D;
    border-radius: 30px;
    background-color: #0E824D;
    padding: 2px 8px 2px 8px;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    width: 70%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    cursor: pointer;
    box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
}

    .ProductLink:hover, .ProductLink:active {
        color: #ffffff;
        height: 30px;
        font-family: verdana,arial,sans-serif;
        font-weight: bold;
        font-size: 16px;
        border: 1px solid #0E824D;
        border-radius: 30px;
        background-color: #06693c;
        letter-spacing: 0.05em;
        padding: 2px 8px 2px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
        width: 70%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

.DisabledProductLink, .DisabledProductLink:visited, .DisabledProductLink:hover, .DisabledProductLink:active {
    color: #ffffff;
    height: 30px;
    font-family: verdana,arial,sans-serif;
    font-weight: bold;
    letter-spacing: 0.05em;
    font-size: 16px;
    border-radius: 30px;
    border: 1px solid #0E824D;
    background-color: #0E824D;
    padding: 2px 8px 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
    width: 70%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    opacity: 0.6;
    cursor: not-allowed;
}

.ProductPurchaseButtonArea {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 20px;
}

.InputForm {
    font-family: verdana,arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 20px;
    min-height: 20px;
    margin: 1px 1px 1px 3px;
    width: 50%;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}
/* #endregion Request*/

/* #region Help-and-Info*/
.HelpInfoSection {
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px #3474c1 solid;
    position: absolute;
    padding: 5px;
    max-width: 280px;
    z-index: 800;
    line-height: 1.5;
    margin-right: 5%;
}

.HelpText {
    color: #3474c1;
}

.HelpCloseLink, .HelpCloseLink:visited, .HelpCloseLink:hover {
    color: #3474c1;
    border-radius: 20px;
    border: 1px solid #CCCCCC;
    background-color: #ffffff;
    padding: 1px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: normal;
    cursor: pointer;
}

    .HelpCloseLink:hover {
        background-color: #DDDDDD;
    }

.HelpLink, .HelpLink:visited, .HelpLink:hover {
    color: #3474c1;
    border-radius: 20px;
    border: 1px solid #CCCCCC;
    background-color: #ffffff;
    padding: 2px 4px;
    width: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
    margin-bottom: 4px;
}

    .HelpLink:hover {
        background-color: #DDDDDD;
    }


/*#endregion  Help-and-Info */

/* #region Site-Fonts-and-Colors*/
.CustomUploadImage {
    height: auto;
    max-width: 98%;
}

.TopPanelColorBox {
    width: 98%;
    font-weight: bold;
    height: 90px;
    text-align: center;
    padding-top: 20px;
}

.SmallTopPanelColorBoxes {
    text-align: center;
    display: flex;
    width: 200px;
}

.SmallTopPanelColorBox {
    width: 70px;
    font-weight: bold;
    height: 60px;
    padding: 5px;
    /*border-radius: 6px;*/
}

td.ChooseImageColumn {
    width: 50%;
    vertical-align: middle;
}

.ColorBoxes {
    display: flex;
}

.ColorBox {
    width: 100px;
    font-weight: bold;
    height: 40px;
    border: 1px solid #505050;
    border-radius: 6px;
    text-align: center;
    padding-top: 20px;
}

.ColorLighBlue {
    background-color: #C6E2F7;
}

.ColorLighGreen {
    background-color: #daefd8;
}

.ColorLighPink {
    background-color: #EEDEEC;
}

/* #endregion Site-Fonts-and-Colors*/

/*#region modal and loader ***********************************************************/
.loader {
    left: 30%;
    top: 30%;
    border-radius: 50%;
    border-top: 14px solid transparent;
    border-right: 14px solid #6A9B85;
    border-bottom: 14px solid #6A9B85;
    border-left: 14px solid #6A9B85;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: fixed; /* Stay in place */
    z-index: 1500; /* Sit on top */
}

.fileloader {
    left: 30%;
    top: 30%;
    border-radius: 50%;
    border-top: 14px solid transparent;
    border-right: 14px solid #6A9B85;
    border-bottom: 14px solid #6A9B85;
    border-left: 14px solid #6A9B85;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: fixed; /* Stay in place */
    z-index: 1500; /* Sit on top */
}

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

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

.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 ***********************************************************/

/*#region media css*/

@media screen and (min-width: 1700px) {

    /***Site page*/
    .SitePagePreviewArea {
        margin-top: 40px;
        max-width: 550px;
        width: 25vw;
        position: absolute;
        top: 80px;
        left: 1240px;
        padding-left: 0;
        padding-top: 20px;
        z-index: 0;
    }

    .MenuSmallScreen {
        display: none;
    }

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

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        margin-right: 20px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #FFFFFF;
    }

    .MainPanel {
        width: 75%;
        max-width: 800px;
        left: 400px;
        padding-left: 400px;
        padding-right: 20px;
        padding-top: 10px;
        z-index: -1;
        /*        border-top: 34px solid #505050;*/
    }

    .MainPanelItemList {
        max-width: 1000px;
        padding-bottom: 5%;
    }

    .SidePanels {
        position: relative;
        display: flex;
        flex-direction: column;
        float: left;
    }

    .SidePanel {
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        float: left;
        left: 70px;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        margin-top: 0px;
        margin-bottom: 20px;
        padding: 5px;
        top: 20px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        float: left;
        left: 70px;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        padding: 5px;
        top: 10px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        height: 120px;
        width: 200px;
    }

    .WelcomeArea {
        padding-top: 25px;
    }

    div.NavigationPanel {
        margin-top: 70px;
        margin-bottom: 2px;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 450px;
    }

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

    /**** Admin only ****/

    .SearchPanel {
        margin: 5px 0px 5px 5px;
    }

    .MenuTop {
        padding-left: 70px;
    }

    .SubMenuTop {
        padding-left: 120px;
    }

    .SmallDeviceMenuTop {
        padding-left: 100px;
    }

    div.LeftHeaderPanel {
        position: relative;
        float: left;
        left: 100px;
        width: 250px;
        overflow: hidden;
        margin: 10px;
        padding: 5px;
    }

    .IconButtonLogo {
        padding-top: 5px;
        padding-left: 100px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 10%;
        max-width: 1200px;
        width: 85%;
    }

    .HtmlToolbarMore {
        display: inline-flex;
    }

    .Arrow {
        display: none;
    }

    div.SitePanel {
        flex-direction: column;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1699px) {

    /***Site page*/
    .SitePagePreviewArea {
        margin-top: 40px;
        max-width: 550px;
        width: 25vw;
        position: absolute;
        top: 80px;
        left: 1180px;
        padding-left: 0;
        padding-right: 10px;
        padding-top: 20px;
        z-index: 0;
    }

    .MenuSmallScreen {
        display: none;
    }

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

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        margin-right: 20px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #FFFFFF;
    }

    .MainPanel {
        width: 75%;
        max-width: 800px;
        left: 350px;
        padding-left: 350px;
        padding-right: 20px;
        padding-top: 10px;
        z-index: -1;
        /*        border-top: 34px solid #505050;*/
    }

    .MainPanelItemList {
        max-width: 1000px;
    }

    .SidePanels {
        position: relative;
        display: flex;
        flex-direction: column;
        float: left;
    }

    .SidePanel {
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        left: 20px;
        float: left;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        margin-top: 0px;
        margin-bottom: 20px;
        padding: 5px;
        top: 20px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        float: left;
        left: 20px;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        padding: 5px;
        top: 10px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        height: 120px;
        width: 200px;
    }

    .WelcomeArea {
        padding-top: 25px;
    }

    div.NavigationPanel {
        margin-top: 70px;
        margin-bottom: 2px;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 450px;
    }

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

    .SearchPanel {
        margin: 5px 0px 5px 5px;
    }

    .MenuTop {
        padding-left: 20px;
    }

    .SubMenuTop {
        padding-left: 70px;
    }

    .SmallDeviceMenuTop {
        padding-left: 50px;
    }

    div.LeftHeaderPanel {
        position: relative;
        float: left;
        left: 50px;
        width: 250px;
        overflow: hidden;
        margin: 10px;
        padding: 5px;
    }

    .IconButtonLogo {
        padding-top: 5px;
        padding-left: 50px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 10%;
        max-width: 1200px;
        width: 85%;
    }

    .HtmlToolbarMore {
        display: inline-flex;
    }

    .Arrow {
        display: none;
    }

    div.SitePanel {
        flex-direction: column;
    }
}

@media screen and (min-width: 1401px) and (max-width: 1599px) {

    /***Site page*/
    .SitePagePreviewArea {
        margin-top: 40px;
        max-width: 550px;
        min-width: 400px;
        width: 27vw;
        position: absolute;
        top: 80px;
        left: 980px;
        padding-left: 0;
        padding-top: 20px;
        z-index: 0;
    }
}

@media screen and (min-width: 861px) and (max-width: 1599px) {

    .MenuSmallScreen {
        display: none;
    }

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

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        margin-right: 20px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #FFFFFF;
    }

    .MainPanel {
        max-width: 600px;
        left: 350px;
        padding-left: 350px;
        padding-right: 20px;
        padding-top: 10px;
        z-index: -1;
        top: 10px;
    }

    .MainPanelItemList {
        max-width: 900px;
    }

    .SidePanels {
        position: relative;
        display: flex;
        flex-direction: column;
        float: left;
    }

    .SidePanel {
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        left: 20px;
        float: left;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        margin-top: 0px;
        margin-bottom: 20px;
        padding: 5px;
        top: 20px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        float: left;
        left: 20px;
        width: 280px;
        max-width: 280px;
        overflow: hidden;
        margin: 10px;
        padding: 5px;
        top: 10px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        height: 120px;
        width: 200px;
    }

    .WelcomeArea {
        padding-top: 25px;
    }

    div.NavigationPanel {
        margin-top: 70px;
        margin-bottom: 2px;
    }

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 400px;
    }

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

    .SearchPanel {
        margin: 5px 0px 5px 5px;
    }

    .IconButtonLogo {
        padding-top: 5px;
        padding-left: 50px;
    }

    .MenuTop {
        padding-left: 20px;
    }

    .SubMenuTop {
        padding-left: 70px;
    }

    .SmallDeviceMenuTop {
        padding-left: 50px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 4%;
        max-width: 1000px;
        width: 90%;
    }

    .HtmlToolbarMore {
        display: inline-flex;
    }

    .Arrow {
        display: none;
    }

    div.SitePanel {
        flex-direction: column;
    }
}

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

    .MenuSmallScreen {
        display: none;
    }

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

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        margin-right: 20px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #FFFFFF;
    }

    .MainPanel {
        max-width: 600px;
        padding: 0;
        margin: 0px 50px 50px 50px;
        z-index: -1;
    }

    .MainPanelItemListSearch {
        margin-top: 5%;
        padding-top: 10px;
    }

    .SidePanel {
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        top: 20px;
        max-width: 580px;
        overflow: hidden;
        padding: 5px;
        margin: 0px 50px 10px 50px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border: 1px solid #6A9B85;
        border-radius: 20px;
        position: relative;
        top: 20px;
        max-width: 580px;
        overflow: hidden;
        padding: 5px;
        margin: 0px 50px 10px 50px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        height: 120px;
        width: 200px;
    }

    .WelcomeArea {
        padding-top: 25px;
    }

    div.NavigationPanel {
        margin-top: 25px;
        margin-bottom: 2px;
    }

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 400px;
    }

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

    .SearchPanel {
        margin: 5px 0px 5px 5px;
    }

    .IconButtonLogo {
        padding-top: 4px;
        padding-left: 30px;
    }

    .MenuTop {
        /*        width: 100%;
        padding: 0;
        overflow-x: hidden;*/
        padding-left: 5px;
    }

    .SubMenuTop {
        width: 100%;
        padding: 0px;
        margin: 0;
        overflow-x: hidden;
    }

    .SmallDeviceMenuTop {
        padding-left: 50px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 5px;
        max-width: 800px;
        width: 95%;
    }

    .HtmlToolbarMore {
        display: none;
    }

    .Arrow {
        display: block;
    }
}

/**Small screens*/
@media screen and (min-width: 451px) and (max-width: 600px) {

    .SmallListGridView {
        width: 440px;
    }

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

    .MenuWideScreen {
        display: none;
    }

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        padding-top: 6px;
        margin-right: 2px;
        height: 25px;
        border-spacing: 10px 5px;
        vertical-align: middle;
        background: #505050;
    }

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

    .MainPanelItemListSearch {
        margin-top: 5%;
        padding-top: 10px;
    }

    .SidePanel {
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 600px;
        overflow-x: hidden;
        padding: 5px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 600px;
        overflow-x: hidden;
        padding: 5px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        width: 150px;
        height: 90px;
    }

    .WelcomeArea {
        padding-top: 0;
    }

    div.NavigationPanel {
        display: none;
        margin-top: 0px;
        margin-bottom: 2px;
    }

    div.TopContainer {
        display: none;
    }

    div.SubTopContainer {
        display: none;
    }

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 400px;
    }

    .TextUserInfo {
        display: none;
    }

    td.PanelMainContent {
        width: 450px;
    }

    td.PanelEditMainContentWide {
        width: 450px;
    }

    td.PanelEditMainContent {
        width: 450px;
    }

    td.PanelMainContentWide {
        width: 450px;
    }

    .IconButtonLogo {
        padding-top: 4px;
        padding-left: 30px;
    }

    .MenuTop {
        width: 100%;
        padding: 0;
        overflow-x: hidden;
    }

    .SubMenuTop {
        width: 100%;
        padding: 0px;
        margin: 0;
        overflow-x: hidden;
    }

    .SmallDeviceMenuTop {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 3px;
        max-width: 600px;
        width: 96%;
    }

    .HtmlToolbarMore {
        display: none;
    }

    .Arrow {
        display: block;
    }

    td.ListHalfWideColumn, td.ListSmallerColumn {
        max-width: 60px;
    }

    .ShortCut {
        display: none;
    }
}

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

    .SmallListGridView {
        width: 350px;
    }

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

    .MenuWideScreen {
        display: none;
    }

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        margin-right: 2px;
        padding-top: 6px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #505050;
    }

    table.MainPanelTable, div.MainPanelTable, main.MainPanelTable {
        max-width: 100%;
    }

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

    .MainPanelItemListSearch {
        margin-top: 5%;
        padding-top: 10px;
    }

    .SidePanel {
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 450px;
        overflow-x: hidden;
        padding: 5px;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 450px;
        overflow-x: hidden;
        padding: 5px;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        width: 133px;
        height: 80px;
    }

    .WelcomeArea {
        padding-top: 0;
    }

    div.NavigationPanel {
        display: none;
        margin-top: 0px;
        margin-bottom: 2px;
    }

    div.TopContainer {
        display: none;
    }

    div.SubTopContainer {
        display: none;
    }

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 350px;
    }

    .TextUserInfo {
        display: none;
    }

    .IconButtonLogo {
        padding-top: 4px;
        padding-left: 30px;
    }

    .MenuTop {
        width: 100%;
        padding: 0;
        overflow-x: hidden;
    }

    .SubMenuTop {
        width: 100%;
        padding: 0px;
        margin: 0;
        overflow-x: hidden;
    }

    .SmallDeviceMenuTop {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    td.PanelMainContent {
        width: 350px;
    }

    td.PanelEditMainContentWide {
        width: 350px;
    }

    td.PanelEditMainContent {
        width: 350px;
    }

    td.PanelMainContentWide {
        width: 350px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 3px;
        max-width: 430px;
        width: 96%;
    }

    .HtmlToolbarMore {
        display: none;
    }

    .Arrow {
        display: block;
    }

    td.ListHalfWideColumn, td.ListSmallerColumn, td.ListColumn, td.ListSuperNarrowColumn {
        max-width: 40px;
    }

    .ListHeaderLink, .ListHeaderLink:Visited, .ListHeaderLink:Hover {
        font-size: 13px;
    }

    .ShortCut {
        display: none;
    }

    .ButtonText {
        display: none;
    }
}

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

    .SmallListGridView {
        width: 300px;
    }

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

    .MenuWideScreen {
        display: none;
    }

    table.MenuUserInfoTable, div.MenuUserInfoTable {
        float: right;
        padding-top: 6px;
        margin-right: 2px;
        height: 20px;
        border-spacing: 10px 2px;
        vertical-align: middle;
        background: #505050;
    }

    table.MainPanelTable, div.MainPanelTable, main.MainPanelTable {
        max-width: 300px;
    }

    .MainPanel {
        max-width: 300px;
        padding: 5px;
        z-index: -1;
    }

    .MainPanelItemListSearch {
        margin-top: 5%;
        padding-top: 10px;
    }

    .SidePanel {
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 354px;
        padding: 5px;
        overflow-x: hidden;
    }

    .ShortcutPanel {
        background-color: #FFFFFF;
        border-bottom: 1px solid #6A9B85;
        position: relative;
        max-width: 354px;
        padding: 5px;
        overflow-x: hidden;
        box-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 11%), 0 0.1875rem 0.4375rem rgb(0 0 0 / 13%);
    }

    .WelcomeLogo {
        width: 133px;
        height: 80px;
    }

    .WelcomeArea {
        padding-top: 0;
    }

    div.NavigationPanel {
        display: none;
        margin-top: 0px;
        margin-bottom: 2px;
    }

    div.TopContainer {
        display: none;
    }

    div.SubTopContainer {
        display: none;
    }

    body {
        overflow-x: hidden !important;
    }

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

    #ImageList, .ImageList {
        width: 98%;
    }

    #ItemsList {
        width: 300px;
    }

    .TextUserInfo {
        display: none;
    }

    .IconButtonLogo {
        padding-top: 4px;
    }

    .MenuTop {
        width: 100%;
        padding: 0;
        overflow-x: hidden;
    }

    .SubMenuTop {
        width: 100%;
        padding: 0px;
        margin: 0;
        overflow: hidden;
    }

    .SmallDeviceMenuTop {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    td.PanelMainContent {
        width: 300px;
    }

    td.PanelEditMainContentWide {
        width: 300px;
    }

    td.PanelEditMainContent {
        width: 300px;
    }

    td.PanelMainContentWide {
        width: 300px;
    }

    .cAreaDivFullScreen, .HtmlBarFullScreen { /* Width is media dependent */
        left: 3px;
        max-width: 359px;
        width: 95%;
    }

    .HtmlToolbarMore {
        display: none;
    }

    .Arrow {
        display: block;
    }

    td.ListHalfWideColumn, td.ListSmallerColumn, td.ListColumn, td.ListSuperNarrowColumn {
        max-width: 40px;
    }

    .ListHeaderLink, .ListHeaderLink:Visited, .ListHeaderLink:Hover {
        font-size: 12px;
    }

    .ShortCut {
        display: none;
    }

    .ButtonText {
        display: none;
    }
}

/* #endregion media css */