@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: Nunito;
    src: url(/_templates/default/fonts/Nunito-VariableFont_wght.ttf);
}
@font-face {
    font-family: Poppins;
    src: url(/_templates/default/fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: Password;
    src: url(/_templates/default/fonts/KodeMono-VariableFont_wght.ttf);
}
:root {
    --body-font-size: 14px;
    --body-background-colour: #fff;
    --body-background-colour-over: #fefefe;
    --main-page-background-colour: #f1f2f4;
    --main-page-topbar-background-colour: #38414a;
    --main-page-topbar-background-colour-senders: #609211;
    --main-page-topbar-background-colour-recievers: #316faf;
    --main-page-topbar-background-colour-senders-subtitle: #8bab58;
    --main-page-topbar-background-colour-recievers-subtitle: #6a99c9;
    
    --main-page-section-background-colour-senders: #edf5e0;
    --main-page-section-background-colour-recievers: #e0eaf5;
    --main-page-section-background-colour: #fff;
    --item-colour-light: #a6aaae;
    --item-colour-light-hover: #f7f7f7;
    --item-colour-dark: #008378;
    --menu-item-icon-border: #b7eeea; /* 00b9ad */
    --menu-item-icon-inner: #008378;
    --menu-shadow: #d4d5d5;
    --sub-menu-item-icon-inner: #0ae2d4;
    --left-menu-width: 240px;
    --left-menu-colapsed-width: 60px;
    --left-menu-colapsed-width-toggle: 240px;
    --left-menu-button-width: 180px;
    --left-menu-button-height: 60px;
    --options-menu-button-height: 40px;
    --options-menu-button-icon-side: 25px;
    --top-bar-height: 70px;
    --ct-font-sans-serif: "Nunito", sans-serif;
    --ct-font-display-serif: "Poppins", sans-serif;
    --top-bar-text-size: 0.95rem;
    --top-bar-text-weight: 400;
    --top-bar-text-highlight-weight: 800;
    --top-bar-icon-height: 25px;
    --main-menu-icon-size: 24px;
    --main-menu-thumbnail-size: 34px;
    --sub-main-menu-icon-size: 24px;
    --input-text-size: 1.1rem;
    --indicator-colour-okay: #cbfae1;
    --indicator-colour-okay-dark: #299d5f;
    --indicator-colour-error: #fbc8c8;
    --indicator-colour-error-dark: #e41b5d;
    
        --indicator-colour-back: #4f83d2;
    --indicator-colour-back-text: #fff;
    
    --buttonsCancelFill: #f0afb5;
    --buttonsCancelFillHover: #e49aa1;
    --buttonsCancelBorder: #c02634;
    --buttonsCancelText: #fff;
    --buttonsSaveFill: #93a4c9;
    --buttonsSaveFillHover: #7889ae;
    --buttonsSaveBorder: #394e7e;
    --buttonsSaveText: #fff;
    --table-row-height: 30px;
    --table-image-size: 26px;
    --table-icon-size: 16px;
    --table-footer-icon-size: 20px;
    --table-title-colour: #008378;
    --table-title-text-colour: #fff;
    --table-row-hover: #b7eeea;
    --button-icon-size: 24px;
    --button-text-size: 0.95rem;
    --flag-colour-purple: #cbb6e5;
    --flag-colour-purple-dark: #7a59a3;
    --flag-colour-green: #cbfae1;
    --flag-colour-green-dark: #299d5f;
    --flag-colour-grey: #bdc0c0;
    --flag-colour-grey-text: #000;
    --flag-colour-admin: #953060;
    --flag-colour-admin-text: #fff;
    --flag-colour-information: #233662;
    --flag-colour-information-text: #fff;
    --flag-colour-primary: #36c8bc;
    --flag-colour-primary-text: #000;
    --flag-colour-red: #d82222;
    --flag-colour-red-text: #fff;
    --flag-colour-green-text: #fff;
    
    --backgroundImage: url("/_graphics/background.jpg");
}
html {
    font-size: var(--body-font-size);
}
.body {
    margin: 0;
    font-family: var(--ct-font-sans-serif);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}
.wholePageFrame {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    background-image: var(--backgroundImage);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.wholePageFrame {}
.wholePageOverlay {
    background-color: #212020;
    display: none;
    opacity: 0.7;
    position: absolute;
    left: var(--left-menu-width);
    top: 0px;
    min-height: 100%;
    width: calc(100% - var(--left-menu-width));
    z-index: 2;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
}
.wholePageEditorOverlay {
    background-color: #212020;
    display: none;
    opacity: 0.8;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 10;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
}
.wholePageEditorOverlayFrame {
    display: none;
    opacity: 1;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 11;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    align-items: center;
    justify-content: center;
}
.wholePageLoginOverlay {
    background-color: #58b19d;
    display: flex;
    opacity: 0.7;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 10;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
}
.wholePageLoginOverlayFrame {
    display: flex;
    opacity: 1;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 11;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    align-items: center;
    justify-content: center;
}
.loginFrameInner {
    background-color: var(--main-page-background-colour);
    margin: 0;
    border-radius: 3px;
    display: flex;
    z-index: 12;
    flex-direction: column;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));
}
.loginLogo {
    display: flex;
    height: 30px;
}
.loginLogo img {
    display: flex;
    height: 30px;
}
.loginControlsErrorMessage {
    background-color: #FFB8BA;
    color: #B41B1E;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: #B41B1E;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.loginControlsMessage {
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    font-family: var(--ct-font-sans-serif);
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 1px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    margin-bottom:10px;
}
.loginControlsTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    background-color: var(--main-page-topbar-background-colour);
    color: var(--item-colour-ligh-hovert);
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
}
.loginControlsTextField {
    margin-bottom: 10px;
    min-width: 300px;
    display: fex;
    flex-direction: column;
}
.loginControlsTextField input[type=text] {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.loginControlsTextField input[type=password] {
    font-family: Password;
    letter-spacing: 0.3rem;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.loginControlsFieldTitle {
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    font-family: var(--ct-font-sans-serif);
    margin-left: 20px;
}
.loginControls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 30px;
    margin-bottom: 10px;
}
.loginControlsButton {
    display: flex;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    margin-right: 10px;
    background-color: var(--buttonsSaveFill);
    border-color: var(--buttonsSaveBorder);
    color: var(--buttonsSaveText);
}
.loginControlsButton:hover {
    background-color: var(--buttonsSaveFillHover);
}
.loginOptionsFrame {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.loginOptionsFrameHalf {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.loginOptionsFrameDivider {
    width: 10px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: var(--item-colour-dark);
    margin-bottom: 10px;
}
.loginControlsExternalAuthButton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    border-radius: 15px;
    background-color: white;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border: #000 1px solid;
    margin-right: 20px;
    margin-left: 10px;
    cursor: pointer;
}
.loginControlsExternalAuthButton:hover {
    background-color: #DCDADB;
}
.loginControlsExternalAuthButtonLogo {
    display: flex;
    align-items: center;
}
.loginControlsExternalAuthButtonLogo img {
    width: 30px;
    height: 30px;
}
.loginControlsExternalAuthButtonText {
    display: flex;
    align-items: center;
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    font-family: var(--ct-font-sans-serif);
    margin-left: 10px;
}
.loginControlsExternalAuthFrame {
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
}
.mainPageFrame {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
}
.mainPageLeftMenuFrame {
    position: absolute;
    left: 0px;
    top: 0px;
    width: var(--left-menu-width);
    min-width: var(--left-menu-width);
    height: 100%;
    display: flex;
    background-color: var(--body-background-colour);
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    flex-direction: column;
}
.mainPageMasterFrame {
    position: absolute;
    left: calc(var(--left-menu-width) * -1);
    top: 0px;
    min-height: 100%;
    width: 100%;
    display: flex;
    background-color: var(--main-page-background-colour);
    flex-direction: column;
}
.mainPageTopBar {
    height: var(--top-bar-height);
    background-color: var(--main-page-topbar-background-colour);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--item-colour-light-hover);
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
}
.mainPageContentFrame {
    flex-direction: column;
}
.mainPageSubMenu {
    display: none;
    min-width: 100px;
    height: auto;
    background-color: var(--body-background-colour);
    align-items: center;
    justify-content: center;
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    position: absolute;
    left: 260px;
    top: var(--top-bar-height);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    flex-direction: column;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.1));
    z-index: 1;
}
.mainPageSiteMenu {
    display: none;
    min-width: 100px;
    height: auto;
    background-color: var(--body-background-colour);
    justify-content: center;
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    position: absolute;
    right: 240px;
    top: var(--top-bar-height);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    flex-direction: column;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.1));
        z-index: 2;
}
.menuLeftLogo {
    height: var(--top-bar-height);
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.menuLeftLogoInner {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 40px;
    width: 140px;
    cursor:pointer;
}
.menuTopLogo {
    height: var(--top-bar-height);
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menuTopLogoInner {
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 40px;
    width: 140px;
    cursor: pointer;
}
.menuLeftMenuToggle {
    height: var(--top-bar-height);
    width: 40px;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    display: none;
}
.menuLeftMenuToggleInner {
    height: var(--top-bar-icon-height);
    width: 30px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.menuLeftMenuViewToggle {
    height: var(--top-bar-height);
    width: 40px;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    display: none;
}
.menuLeftMenuViewToggleInner {
    height: var(--top-bar-icon-height);
    width: 30px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light));
    transform: translateX(-10000px);
}
.mainPageSubMenuToggleInner {
    display: flex;
    height: var(--top-bar-height);
    align-items: center;
    margin-left: 30px;
}
.mainPageSubMenuToggleInnerText {
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    color: var(--item-colour-light-hover);
    margin-right: 10px;
}
.mainPageSubMenuToggleInnerIcon {
    height: 8px;
    width: 8px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light));
    transform: translateX(-10000px);
}
.mainPageSubMenuToggleInner:hover {
    cursor: pointer;
}
.mainPageLeftMenuItemFrame {
    width: 100%;
    height: var(--left-menu-button-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainPageLeftMenuItemFrame:hover {
    margin-left: 4px;
    backgroup-color: var(--body-background-colour-over);
    cursor: pointer;
}
.mainPageLeftMenuItemFrame:hover div {
    display: flex;
}
.mainPageLeftMenuItemFrameActive div {
    display: flex;
}
.mainPageLeftMenuItemFrameActive {
    margin-left: 4px;
}
.mainPageLeftMenuItemInner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--left-menu-button-width);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
}
.mainPageLeftMenuItemInner:hover {
    background-color: var(--item-colour-light-hover);
}
.mainPageLeftMenuItemIcon {
    border-radius: 6px;
    border-color: var(--menu-item-icon-border);
    border-style: solid;
    border-width: 2px;
    display: flex;
    height: calc(var(--main-menu-icon-size) + 8px);
    width: calc(var(--main-menu-icon-size) + 8px);
    align-items: center;
    justify-content: center;
}
.mainPageLeftMenuItemIcon Img {
    height: var(--main-menu-icon-size);
    width: var(--main-menu-icon-size);
    display: block;
    filter: drop-shadow(10000px 0px 0 var(--menu-item-icon-inner));
    transform: translateX(-10000px);
}
.mainPageLeftMenuItemText {
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    color: var(--text-colour-menu-one);
    margin-left: 10px;
}
.mainPageLeftMenuItemIndicator {
    height: calc(var(--left-menu-button-height) - 16px);
    width: 8px;
    display: none;
}
.mainPageLeftSubMenuItemFrame {
    width: 100%;
    height: calc(var(--left-menu-button-height) - 20px);
    display: none;
    align-items: center;
    justify-content: center;
}
.mainPageLeftSubMenuItemFrame:hover {
    margin-left: 4px;
    backgroup-color: var(--body-background-colour-over);
    cursor: pointer;
}
.mainPageLeftSubMenuItemFrame:hover div {
    display: flex;
}
.mainPageLeftSubMenuItemInner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(var(--left-menu-button-width) - 20px);
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 20px;
    padding-right: 6px;
    padding-left: 6px;
}
.mainPageLeftSubMenuItemInner:hover {
    background-color: var(--item-colour-light-hover);
}

.mainPageLeftSubMenuItemInnerCurrent {
    background-color: var(--menu-item-icon-border);
}

.mainPageLeftSubMenuItemIcon {
    border-radius: 50%;
    display: flex;
    height: calc(var(--main-menu-icon-size) + 2px);
    width: calc(var(--main-menu-icon-size) + 2px);
    align-items: center;
    justify-content: center;
}
.mainPageLeftSubMenuItemIcon Img {
    height: var(--sub-main-menu-icon-size);
    width: var(--sub-main-menu-icon-size);
    display: block;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-dark));
    transform: translateX(-10000px);
}
.mainPageLeftSubMenuItemText {
    font-size: calc(var(--top-bar-text-size) - 2px);
    font-weight: calc(var(--top-bar-text-weight) - 100);
    color: var(--text-colour-menu-one);
    margin-left: 10px;
}
.mainPageLeftSubMenuItemIndicator {
    height: calc(var(--left-menu-button-height) - 30px);
    width: 8px;
    display: none;
}
.siteLogoFrame {
    width: 100%;
    height: calc(var(--top-bar-height) + 20px);
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.siteLogoInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    justify-content: center;
}
.siteLogoInner img {
    height: calc(var(--top-bar-height) - 20px);
    max-width: var(--left-menu-width);
    border-radius: 5px;
}
.siteLogoText {
    max-width: var(--left-menu-width);
    color: var(--item-colour-dark);
}
.pageTopBarLogo {
    height: calc(var(--top-bar-height) -20px);
    max-width: var(--left-menu-width);
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.pageTopBarLogo img {
    height: calc(100% - 20px);
    max-width: var(--left-menu-width);
    display: flex;
    border-radius: 5px;
}
.mainPageTopBarLeft {
    display: flex;
}
.mainPageTopBarRight {
    display: flex;
    flex-direction: row-reverse;
    margin-right: 30px;
}
.pageTopBarLogoText {
    max-height: calc(100% - 20px);
    max-width: calc(var(--left-menu-width) - 20px);
    display: none;
    align-items: center;
    justify-content: flex-end;
    margin-right: -10px;
    text-align: end;
    margin-left: 20px;
}
.mainPageLeftMenuToggleMobile {
    height: var(--top-bar-height);
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--main-page-topbar-background-colour);
}
.mainPageLeftMenuToggleMobile:hover {
    cursor: pointer;
}
.mainPageOptionsMenuToggleMobile {
    height: var(--top-bar-height);
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--main-page-topbar-background-colour);
}
.mainPageOptionsMenuToggleMobile:hover {
    cursor: pointer;
}
.mainPageOptionsMenuToggleMobileInner {
    color: var(--item-colour-light);
}
.mainPageAccountMenuToggleMobile {
    height: var(--top-bar-height);
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--main-page-topbar-background-colour);
}
.mainPageAccountMenuToggleMobile:hover {
    cursor: pointer;
}
.mainPageAccountMenuToggleMobileInner {
    color: var(--item-colour-light-hover);
}
.mainPageSiteMenuToggleMobile {
    height: var(--top-bar-height);
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--main-page-topbar-background-colour);
}
.mainPageSiteMenuToggleMobile:hover {
    cursor: pointer;
}
.mainPageSiteMenuToggleMobileInner {
    color: var(--item-colour-light-hover);
}
.mainLeftPageMenuFrame {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
}
.mainPageSubMenuItemFrame {
    height: var(--options-menu-button-height);
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    width:100%;
    background-color: var(--body-background-colour);
}
.mainPageSubMenuItemFrame :hover {
    background-color: var(--item-colour-light-hover);
    cursor: pointer;
}
.mainPageSubMenuItemDivider {
    padding-left: 10px;
    border-color: var(--menu-item-icon-border);
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    width: 100%;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.mainPageSubMenuItemInner {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    padding-left:10px;
}

.mainPageSubMenuItemInner:hover {
     background-color: var(--item-colour-light-hover);
}
.mainPageSubMenuItemIcon {
    margin-left: 10px;
}
.mainPageSubMenuItemIcon img {
    height: var(--options-menu-button-icon-side);
    width: var(--options-menu-button-icon-side);
    display: block;
    filter: drop-shadow(10000px 0px 0 var(--sub-menu-item-icon-inner));
    transform: translateX(-10000px);
}

.mainPageSubMenuSiteIcon {
    margin-left: 10px;
}
.mainPageSubMenuSiteIcon img {
    height: var(--options-menu-button-icon-side);
    width: var(--options-menu-button-icon-side);
    display: block;
}

.mainPageFullScreenToggle {
    height: var(--top-bar-height);
    display: flex;
    width: var(--top-bar-icon-height);
    align-items: center;
}
.mainPageFullScreenToggleInner {}
.mainPageFullScreenToggleIcon {
    height: var(--top-bar-icon-height);
    width: var(--top-bar-icon-height);
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light-hover));
    transform: translateX(-10000px);
    cursor: pointer;
}
.mainPageFullScreenToggleIcon:hover {
    cursor: pointer;
}
.userAccountMenuFrame {
    display: flex;
    align-items: center;
    padding-right: 20px;
    margin-left: 20px;
}
.userAccountMenuFrame:hover {
    cursor: pointer;
}
.userAccountMenuInner {
    display: flex;
}
.userAccountMenuInner:hover {}
.userAccountMenuThumbnail {
    height: var(--main-menu-thumbnail-size);
    width: var(--main-menu-thumbnail-size);
    border-radius: 50%;
}
.userAccountMenuThumbnail img {
    height: var(--main-menu-thumbnail-size);
    width: var(--main-menu-thumbnail-size);
    border-radius: 50%;
}
.userAccountMenuText {
    margin-left: 10px;
    margin-right: 10px;
    max-width: 120px;
    max-height: calc(var(--top-bar-height) -20px);
}
.mainPageAccountMenu {
    display: none;
    min-width: 100px;
    height: auto;
    background-color: var(--body-background-colour);
    align-items: center;
    justify-content: center;
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    position: absolute;
    right: 40px;
    top: var(--top-bar-height);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    flex-direction: column;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.2));
}
.mainPageAccountMenuItemFrame {
    width: var(--options-menu-button-width);
    height: var(--options-menu-button-height);
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor:pointer;
}
.mainPageAccountMenuItemFrame :hover {
    background-color: var(--item-colour-light-hover);
    cursor: pointer;
}
.mainPageAccountMenuItemInner {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}
.mainPageAccountMenuItemIcon {
    margin-left: 10px;
}
.mainPageAccountMenuItemIcon img {
    height: var(--options-menu-button-icon-side);
    width: var(--options-menu-button-icon-side);
    display: block;
    filter: drop-shadow(10000px 0px 0 var(--sub-menu-item-icon-inner));
    transform: translateX(-10000px);
}

.mainPageAccountMenuItemAvatar {
    margin-left: 10px;
}
.mainPageAccountMenuItemAvatar img {
    height: var(--options-menu-button-icon-side);
    width: var(--options-menu-button-icon-side);
    display: block;
    border-radius:50%;
}

.mainPageAccountMenuItemText {
    margin-left: 10px;
}
.mainPageSiteSelectionMenuToggleInner {
    display: flex;
    height: var(--top-bar-height);
    align-items: center;
    margin-left: 30px;
}
.mainPageSiteSelectionMenuToggleInnerText {
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    color: var(--item-colour-light-hover);
    margin-right: 10px;
}
.mainPageSiteSelectionMenuToggleInnerIcon {
    height: 8px;
    width: 8px;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light));
    transform: translateX(-10000px);
}
.mainPageSiteSelectionMenuToggleInner:hover {
    cursor: pointer;
}
.mainPageSubMenuItemText {
    margin-left: 10px;
}
.mainPageSubMenuItemTextHighlighted {
    font-weight: var(--top-bar-text-highlight-weight);
}
.menuColourOneText {
    color: var(--item-colour-dark);
}
.menuColourTwoText {
    color: var(--item-colour-dark);
}
.menuColourThreeText {
    color: var(--item-colour-dark);
}
.menuColourFourText {
    color: var(--item-colour-dark);
}
.mainPageControlsSection {
    width: 100%;
    height: auto;
    min-height: 30px;
    display: flex;
    padding-left: 5px;
    padding-right: 5px;
}
.mainControlsSectionInner {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
   justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-right: 10px;
    padding-right: 16px;
    padding-left:10px;
}

.mainControlsSectionInnerRight {
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: flex-end;
    align-items: center;
}

.mainControlsSectionInnerLeft {
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
}

.mainControlsSectionInnerRefreshIcon {
    height: 30px;
    width: 30px;
    border-radius: 4px;
    background-color: #5c8dd8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mainControlsSectionInnerRefreshIcon:hover {
    background-color: #527cbd;
}
.mainControlsSectionInnerRefreshIcon img {
    height: 22px;
    width: 22px;
    border-radius: 2px;
}

.mainControlsSectionInnerAccountIcon {
    height: 30px;
    width: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.mainControlsSectionInnerAccountIcon img {
    height: 22px;
    width: 22px;
    border-radius: 2px;
}

.mainControlsSectionInnerAccountIcon div {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--menu-item-icon-border);
    background-color: var(--menu-item-icon-inner);
    color:var(--item-colour-light-hover);
    border-width: 1px;
    display:flex;
        align-items: center;
    justify-content: center;
    
}

.mainPageContentSection {
    width: 100%;
    height: auto;
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
}
.mainContentSectionInner {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
    align-items: flex-start;
}

.wrap {
    flex-wrap: wrap;
}

.left {
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}

.mainPageContentSectionQuarterHalfFrame {
    width: 100%;
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-between;
    margin-top: 16px;
}
.mainPageContentSectionQuarter {
    height: 120px;
    width: calc(50% - 20px);
    border-radius: 2px;
    background-color: var(--main-page-section-background-colour);
    margin-bottom: 10px;
}

.mainPageContentSectionQuarterRowValue img {
    height:20px;
    width:20px;
}

.mainContentSectionInner:nth-of-type(1) .mainPageContentSectionQuarterHalfFrame:nth-of-type(1) .mainPageContentSectionQuarter:nth-of-type(2) {
    margin-right: 15px;
}
.mainContentSectionInner:nth-of-type(1) .mainPageContentSectionQuarterHalfFrame:nth-of-type(2) .mainPageContentSectionQuarter:nth-of-type(1) {
    margin-left: 15px;
}
.mainPageContentSectionQuarterInnerFrame {
    width: 100%;
    height: 100%;
    display: flex;
}
.mainPageContentSectionQuarterIcon {
    width: 80px;
    height: 100px;
    display: flex;
    padding: 10px;
    align-items: center;
}
.mainPageContentSectionQuarterIcon img {
    width: 60px;
    height: 60px;
}
.mainPageContentSectionQuarterTextFrame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    margin-right:10px;
}
.mainPageContentSectionQuarterTextValue {
    font-family: var(--ct-font-display-serif);
    font-size: 1.2rem;
    font-weight: 900;
}
.mainPageContentSectionQuarterTextTitle {
    font-size: 1rem;
}
.mainPageContentSectionThirdFrame,.mainPageContentSectionHalfFrame {
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-around;
    margin-top: 10px;
}

.mainPageContentSectionThirdFrame {
    width: 32%;
}

.mainPageContentSectionHalfFrame {
    width: 49%;
}
.mainPageContentSectionFillFrame {
    flex-grow: 1;
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-around;
    margin-top: 10px;
}
.mainPageContentSectionFill {
    min-height: 120px;
    width: 100%;
    border-radius: 2px;
    background-color: var(--main-page-section-background-colour);
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 10px;
}
.mainPageContentSectionThird {
    min-height: 120px;
    width: 100%;
    border-radius: 2px;
    background-color: var(--main-page-section-background-colour);
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}
.mainPageContentSectionThirdInnerFrame {
    width: 100%;
    height: 100%;
    display: flex;
}
.mainPageContentSectionFullFrame {
    width: 100%;
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-around;
    margin-top: 10px;
}
.mainPageContentSectionFull {

    width: 100%;
    border-radius: 2px;
    background-color: var(--main-page-section-background-colour);
    margin-bottom: 10px;

    display: flex;
    flex-direction: column;
}
.mainPageContentSectionFullInnerFrame {
    width: 100%;
    height: 100%;
    display: flex;
}
.mainPageContentTitleFrame {
    height: 30px;
    display: flex;
    margin-bottom: 20px;
    margin-right: 10px;
}
.mainPageContentTitleInner {
    width: 100%;
    height: 20px;
    border-radius: 2px;
    background-color: var(--main-page-topbar-background-colour);
    margin-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: var(--item-colour-light-hover);
}

.mainPageContentTitleInnerSenders {
    width: 100%;
    height: 20px;
    border-radius: 2px;
    background-color: var(--main-page-topbar-background-colour-senders-subtitle);
    margin-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: var(--item-colour-light-hover);
}

.mainPageContentTitleInnerRecievers {
    width: 100%;
    height: 20px;
    border-radius: 2px;
    background-color: var(--main-page-topbar-background-colour-recievers-subtitle);
    margin-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: var(--item-colour-light-hover);
}

.mainPageContentThirdRow {
    width: 100%;
    display: flex;
}
.mainPageContentSectionThirdRowInner , .mainPageContentSectionThirdRowInnerJustified{
    width: 100%;
    min-height: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: flex;
    font-size: 0.85rem;
    justify-content: space-between;
    align-items: center;
}

.mainPageContentSectionThirdRowInnerJustified{
    justify-content: flex-start; 
    
}

.mainPageContentSectionThirdRowSchedulerRow {
    margin-left:10px;
    margin-right:10px;
}

.mainPageContentSectionThirdRowSchedulerRowIcon, .mainPageContentSectionThirdRowSchedulerRowIconTitle {
    width:24px;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 6px;
}
.mainPageContentSectionThirdRowSchedulerRowIconTitle  {
    font-weight: 700;
}
.mainPageContentSectionThirdRowSchedulerRowIcon img {
    height:16px;
    width:16px;
    cursor: pointer;
}

.mainPageContentSectionLeft {
    display: flex;
    align-content: flex-start;
}

.mainPageContentSectionRight {
    display: flex;
    align-content: flex-end;
}
.mainPageContentSectionThirdRowItem {
    margin-left:10px;
    display: flex;
    align-items: center;
}

.mainPageContentSectionThirdRowAvatar, .mainPageContentSectionThirdRowAvatarTitle {
    width:30px;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 6px;
}
.mainPageContentSectionThirdRowAvatarTitle  {
    font-weight: 700;
}
.mainPageContentSectionThirdRowAvatar img {
    height:28px;
    width:28px;
    border-radius: 50%;
}

.mainPageContentSectionThirdRowSchedulerRowTimeTitle,.mainPageContentSectionThirdRowSchedulerRowTime {
    width:40px;
    margin-left:16px;
        display: flex;
    justify-content: center;
    align-items: center;
}
.mainPageContentSectionThirdRowSchedulerRowTime {
    cursor: pointer;
}

.mainPageContentSectionThirdRowSchedulerRowTimeTitle {
    font-weight: 700;
}


.mainPageContentSectionThirdRowSchedulerRowActive, .mainPageContentSectionThirdRowSchedulerRowActiveTitle {
        width:40px;
    margin-left:16px;
        display: flex;
    justify-content: center;
    align-items: center;
}

.mainPageContentSectionThirdRowSchedulerRowActive {
    cursor: pointer;
}

.mainPageContentSectionThirdRowSchedulerRowActive img{
       height:20px;
    width:20px;
    cursor: pointer;
}

.mainPageContentSectionThirdRowSchedulerRowActiveTitle { 
    font-weight: 700;
}


.mainPageContentSectionThirdRowDelete, .mainPageContentSectionThirdRowDeleteTitle, .mainPageContentSectionThirdRowFunctionIcon  {
        width:40px;
    margin-left:16px;
        display: flex;
    justify-content: center;
    align-items: center;
}

.mainPageContentSectionThirdRowDelete, .mainPageContentSectionThirdRowFunctionIcon  {
    cursor: pointer;
}

.mainPageContentSectionThirdRowDelete img, .mainPageContentSectionThirdRowFunctionIcon img {
       height:20px;
    width:20px;
    cursor: pointer;
}

.mainPageContentSectionThirdRowDeleteTitle { 
    font-weight: 700;
}

.mainPageContentSectionThirdRowSchedulerRowIdent {
    width:26px;
    height:16px;
     display: flex;
            align-items: center;
    justify-content: center;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:3px;
    padding-right:3px;
}

.mainPageContentSectionThirdRowSchedulerRowIdent span {
    border-radius: 50%;
    background-color: var( --item-colour-dark);
    color:var( --item-colour-light-hover);
    width:16px;
    height:16px;
    display: flex;
        align-items: center;
    justify-content: center;
    font-weight: 600;
}

.mainPageContentSectionThirdRowTextbox {
    margin-right: 20px;
    font-weight: 650;
    color: var(--item-colour-dark);
    margin-left: 20px;
    height: 20px;
    line-height: 20px;
    text-wrap: wrap;
    width: 100%;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left:10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-color:var(--menu-item-icon-border);
    border-width: 1px;
    border-style:solid;
    height: auto;
    overflow: hidden;
}

.mainPageContentSectionThirdRowFunctionTab {
    margin-right: 20px;
    font-weight: 650;
    margin-left: 20px;
    height: 16px;
    line-height: 16px;
    text-wrap: wrap;
    border-radius: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left:10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    color:var(--buttonsSaveText);
    background-color:var(--buttonsSaveBorder);
    border-width: 1px;
    border-style:solid;
    height: auto;
    overflow: hidden;
    cursor: pointer;
}

.mainPageContentSectionThirdRowFunctionTab:hover {
    background-color:var(--buttonsSaveFillHover);
    color: var(--buttonsSaveText);
}
    
.mainPageContentSectionThirdRowIcon  {
    display: block;
    margin-right: 10px;
    margin-left: 0px;
    height: 20px;
    line-height: 20px;
    width:20px;
    height:20px;
    
}

.mainPageContentSectionThirdRowIcon  img {
     height:20px;
    width:20px;
}


.mainPageContentSectionThirdRowSubject {
    display: flex;
    margin-right: 10px;
    font-weight: 650;
    color: var(--item-colour-dark);
    margin-left: 20px;
    height: 20px;
    line-height: 20px;
    max-height: 20px;
    text-wrap: nowrap;
}
.mainPageContentSectionThirdRowValue {
    display: flex;
    margin-right: 20px;
    height: 20px;
    line-height: 20px;
    max-height: 20px;
    text-wrap: nowrap;
    justify-content: flex-end;
}
.mainControlSectionInnerStatusIndicator {
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-width: 1px;
    border-style: solid;
    font-size: 0.8rem;
    font-weight: 700;
}
.mainControlSectionInnerTextFlag {
    height: 16px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding-left: 6px;
    padding-right: 6px;
    border-width: 1px;
    border-style: solid;
    font-size: 0.75rem;
    font-weight: 600;
}

.mainControlSectionInnerStatusIndicatorBack {
    background-color: var(--indicator-colour-back);
    border-color: var(--indicator-colour-back);
    color: var(--indicator-colour-back-text);
}

.mainControlSectionInnerStatusIndicatorOkay {
    background-color: var(--indicator-colour-okay);
    border-color: var(--indicator-colour-okay-dark);
    color: var(--indicator-colour-okay-dark);
}
.mainControlSectionInnerStatusIndicatorError {
    background-color: var(--indicator-colour-error);
    border-color: var(--indicator-colour-error-dark);
    color: var(--indicator-colour-error-dark);
}
.mainControlSectionInnerFlagPurple, .mainControlSectionInnerFlagPurple:hover {
    background-color: var(--flag-colour-purple);
    border-color: var(--flag-colour-purple-dark);
    color: var(--flag-colour-purple-dark);
}
.mainControlSectionInnerFlagGreen, .mainControlSectionInnerFlagGreen:hover {
    background-color: var(--flag-colour-green);
    border-color: var(--flag-colour-green-dark);
    color: var(--flag-colour-green-dark);
}
.contentEditable {
    cursor: pointer;
    position: relative;
    min-width: 30px;
}
.contentEditable div {}
.contentEditable:hover .contentEditableOverlay {
    display: flex;
    margin: 0;
}

.contentEditable div {}
.contentEditable:hover .contentEditableOverlayFunctions {
    display: flex;
    margin: 0;
}
.contentEditableOverlay {
    display: none;
    position: absolute;
    background-color: rgba(128, 128, 128, 0.1);
    /*dim the background*/
    top: -2px;
    left: -30px;
    width: calc(100% + 30px);
    height: 100%;
    color: black;
    text-align: center;
    padding-left: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
}
.contentEditableOverlay img {
    height: 20px;
    width: 20px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}


.contentEditableOverlayFunctions {
    display: none;
    position: absolute;
    background-color: rgba(128, 128, 128, 0.1);
    /*dim the background*/
    top: -2px;
    left: -60px;
    width: calc(100% + 60px);
    height: 100%;
    color: black;
    text-align: center;
    padding-left: 0px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
}
.contentEditableOverlayFunctions img {
    height: 20px;
    width: 20px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}



.mainPageContentSectionThirdRowValue span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
    /* width: 240px; */
    display: flex;
    justify-content: flex-end;
    text-wrap: wrap;
    max-height: 24px;
    height: 24px;
    text-align: right;
}
}

.contentEditable span:empty::before {
    color:red;
    content: "<< Click to add >>";
    
}




.editorFrameInner {
    background-color: var(--main-page-background-colour);
    margin: 0;
    border-radius: 3px;
    display: none;
    z-index: 12;
    flex-direction: column;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));
}
.editorControls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px;
    margin-bottom: 10px;
}
.editorControlsTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    background-color: var(--main-page-topbar-background-colour);
    color: var(--item-colour-light-hover);
    font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
}
.editorControlsButton {
    display: flex;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    margin-right: 10px;
}
.editorControlsButtonCancel {
    background-color: var(--buttonsCancelFill);
    border-color: var(--buttonsCancelBorder);
    color: var(--buttonsCancelText);
}
.editorControlsButtonCancel:hover {
    background-color: var(--buttonsCancelFillHover);
}
.editorControlsButtonSave {
    background-color: var(--buttonsSaveFill);
    border-color: var(--buttonsSaveBorder);
    color: var(--buttonsSaveText);
}
.editorControlsButtonSave:hover {
    background-color: var(--buttonsSaveFillHover);
}
.editorControlsTextField {
    margin-bottom: 10px;
    min-width: 300px;
    display: none;
    flex-direction: column;
}
.editorControlsTextField span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
}
.editorControlsTextField input[type=text] {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}

.editorControlsTextField  .editorControlsCheckBoxControls {
    display:flex;
    margin-left: 20px;  
    align-items: center;
}

.editorControlsTextField input[type=checkbox] {
    width:16px;
    height:16px;
    margin-left:10px;
}

.editorControlsTextboxField {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 50px);
    height:100px;
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
    word-wrap: break-word;
    word-break: break-all;

}
.editorControlsTextField select {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.editorControlsTextField input[type=number] {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.editorControlsTextField input[type=password] {
    font-family: Password;
    letter-spacing: 0.3rem;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.editorControlsTextField input[type=date] {
    letter-spacing: 0.3rem;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.editorControlsTextField input[type=time] {
    letter-spacing: 0.3rem;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    border-radius: 4px;
    width: calc(100% - 60px);
    font-size: var(--input-text-size);
    font-weight: var(--top-bar-text-weight);
    border-style: solid;
    border-color: var(--item-colour-dark);
    border-width: 1px;
    color: var(--item-colour-dark);
    outline: none;
    margin-bottom: 10px;
}
.editorValueTextInner {
    display: none;
}
.editorValueDateInner {
    display: none;
}
.editorValuePasswordInner {
    display: none;
}
.editorControlsErrorMessage {
    background-color: #FFB8BA;
    color: #B41B1E;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: #B41B1E;
    display: none;
    flex-direction: column;
}


.editorValueSelectorFrame {
    width:100%;
    height: 100%;
}

.editorValueSelectorInner {
    display:flex;
        justify-content: space-around;
    align-items: center;
}

.editorValueSelectorInner img {
    height:40px;
    cursor: pointer;
}

.editorValueBitValueLabel {
 font-weight: var(--top-bar-text-highlight-weight);   
}

.editorValueSelectorSwitch {
    
}

/* Table view */
.mainPageContentColumnTitleRow {
    font-weight: 650;
    font-size: 0.85rem;
    color: var(--item-colour-dark);
    height: var(--table-row-height);
    display: flex;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 6px;
    padding-right: 6px;
    align-items: center;
    justify-content: space-around;
}
.mainPageContentColumnFooterRow {
    font-weight: 650;
    font-size: 0.85rem;
    display: flex;
    margin-left: 16px;
    margin-right: 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    background-color: var(--item-colour-dark);
    color: var(--item-colour-light-hover);
}
.mainPageContentColumnContentRow {
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    height: var(--table-row-height);
    font-size: 0.85rem;
    padding-left: 6px;
    padding-right: 6px;
    align-items: center;
    justify-content: space-around;
}
.mainPageContentColumnGroup {
    display: flex;
    justify-content: space-around;
}

.mainPageContentColumnGroup div {
    margin-left:10px;
}

.mainPageContentColumnTitleElement {
    display: flex;
    margin-left: 6px;
    overflow: hidden;
    text-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}
.mainPageContentColumnElement {
    display: flex;
    margin-left: 6px;
    overflow: hidden;
    text-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}
.mainPageContentColumnElementImage img {
    height: var(--table-image-size);
    width: var(--table-image-size);
    border-radius: 50%;
}
.mainPageContentColumnElementImage {
    min-width: var(--table-image-size);
}
.mainPageContentColumnElementIcon {
    min-width: var(--table-icon-size);
}
.mainPageContentColumnElementIcon img {
    height: var(--table-icon-size);
    width: var(--table-icon-size);
}
.mainPageContentColumnWidth80 {
    width: 80px;
}
.mainPageContentColumnWidth100 {
    width: 100px;
}
.mainPageContentColumnWidth120 {
    width: 120px;
}
.mainPageContentColumnWidth180 {
    width: 180px;
}
.mainPageContentColumnWidth240 {
    width: 240px;
}
.mainPageContentColumnWidth280 {
    width: 320px;
}
.altRow {
    background-color: var(--main-page-background-colour);
}
.mainPageContentColumnPriorityLow {
    display: flex;
}

.mainPageContentColumnSortAvailable {
    cursor: pointer;
}

.mainPageContentColumnSortAsc {
}
.mainPageContentColumnSortDesc::after {
    border-style: solid;
	border-width: 0.20em 0.20em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
    margin-left:5px;
}

.mainPageContentColumnSortDesc {

}

.mainPageContentColumnSortAsc::after {
    border-style: solid;
	border-width: 0.20em 0.20em 0 0;
	content: '';
	display: inline-block;
	height: 0.35em;
	left: 0.15em;
	position: relative;
	top: 0;
	transform: rotate(135deg);
	vertical-align: top;
	width: 0.35em;
    margin-left:5px;
}

.mainPageContentColumnContentRow:hover {
    cursor: pointer;
    background-color: var(--table-row-hover);
}
.mainPageContentColumnFooterLeftControls {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    border-radius: 2px;
}
.mainPageContentColumnFooterRightControls {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    border-radius: 2px;
}
.mainPageContentColumnFooterContentElement {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}
.mainPageContentColumnFooterContentElement input[type=search] {
    border: 0;
    outline: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 0.85rem;
    font-family: var(--ct-font-display-serif);
}
.mainPageContentColumnFooterContentElement select {
    border: 0;
    outline: none;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 0.85rem;
    font-family: var(--ct-font-display-serif);
}
.mainPageContentColumnFooterContentElement img {
    height: var(--table-footer-icon-size);
    width: var(--table-footer-icon-size);
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light));
    transform: translateX(-10000px);
}
.mainPageContentColumnFooterContentElementIcon {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
}
.mainPageContentColumnFooterContentElementIcon:hover img {
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light-hover));
}
.mainPageContentUserPhotoFrame {
    display: flex;
    margin-right: 20px;
    margin-bottom: 10px;
}
.mainPageContentUserPhotoInner {
    display: flex;
    flex-direction: column;
    background-color: var(--main-page-section-background-colour);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
}
}
.mainPageContentUserPhotoImage {
    margin-left: 10px;
    margin-right: 10px;
}
.mainPageContentUserPhotoImage img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 3px;
}

.mainPageContentUserGroupFrame {
    display: flex;
    margin-right: 20px;
    margin-bottom: 10px;
}
.mainPageContentUserGroupInner {
    display: flex;
    flex-direction: column;
    background-color: var(--main-page-section-background-colour);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
}
}
.mainPageContentUserGroupImage {
    margin-left: 10px;
    margin-right: 10px;
}
.mainPageContentUserGroupImage img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 3px;
}


.mainPageContentDevicePhotoImage {
    margin-left: 10px;
    margin-right: 10px;
}
.mainPageContentDevicePhotoImage img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 3px;
}
/* here and below */
.mainPageContentCommandButtonFrame {
    cursor: pointer;
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-between;
    width: calc(50% - 20px);
    border-radius: 2px;
    background-color: var(--main-page-section-background-colour);
    margin-bottom: 10px;
}
.mainPageContentCommandButtonInner {
    display: flex;
    flex-direction: row;
    background-color: var(--main-page-section-background-colour);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    align-items: center;
}

.mainContentSectionInner:nth-of-type(1) .mainPageContentSectionQuarterHalfFrame:nth-of-type(1) .mainPageContentCommandButtonFrame:nth-of-type(2) {
    margin-right: 15px;
}
.mainContentSectionInner:nth-of-type(1) .mainPageContentSectionQuarterHalfFrame:nth-of-type(2) .mainPageContentCommandButtonFrame:nth-of-type(1) {
    margin-left: 15px;
}

.mainPageContentCommandButtonInner img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 3px;
}

.mainPageContentCommandButtonInner span {
    font-family: var(--ct-font-display-serif);
    font-size: 1.2rem;
    font-weight: 900;
    width:120px;
    margin-left:10px;
}
.mainPageContentFunctionButton {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--item-colour-dark);
    display: flex;
    color: var(--item-colour-light-hover);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--button-text-size);
    align-items: center;
    justify-content: center;
    margin-top:10px;
}
.mainPageContentFunctionButton img {
    height: var(--button-icon-size);
    width: var(--button-icon-size);
    margin-right: 10px;
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light-hover));
    transform: translateX(-10000px);
}
.mainPageContentFunctionButton:hover {
    color: var(--item-colour-light-hover);
}
.mainPageContentFunctionButton:hover img {
    filter: drop-shadow(10000px 0px 0 var(--item-colour-light-hover));
    color: var(--item-colour-light-hover);
}

.mainPageContentSectionThirdRowFlagElement {
    background-color: var(--table-title-colour);
    color:var(--item-colour-light-hover);
    margin-left:10px;
    border-radius:5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.flagElementFaded {
    background-color: var(--flag-colour-grey);
    color: var( --flag-colour-grey-text);
}
.flagElementInformation {
    background-color: var(--flag-colour-information);
    color: var(--flag-colour-information-text);
}
.flagElementAdmin {
    background-color: var(--flag-colour-admin);
    color: var(--flag-colour-admin-text);
}
.flagElementPrimary {
    background-color: var(--flag-colour-primary);
    color: var(--flag-colour-primary-text);
}


.mainPageContentSectionThirdRowFlagElementText {
    padding-left:20px;
    padding-right:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    height:20px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}

.mainPageContentSectionThirdRowFlagElementControl {
    width:20px;
    height:20px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    align-items: center;
    font-weight: 800;
    cursor:pointer;
}

.controlRed {
    background-color: var(--flag-colour-red);
    color: var(--flag-colour-red-text);
}

.controlGreen {
    background-color: var(--flag-colour-green);
    color: var(--flag-colour-green-text);
}

.mainPageContentSectionThirdRowInnerJustified select, .mainPageContentSectionThirdRowInner select {
    font-size:14px;
    height:20px;
    max-width:200px;
    margin-left:10px;
    border-radius:4px;
}

.mainPageContentThirdRowInner select {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
    margin-top: 30px;
    margin-right: 10px;

}

.mainPageContentSectionThirdRowInnerJustified input[type="checkbox"]  {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 2rem;
  padding: 0.1rem;
  border: 1px solid var(--table-title-text-colour) ;
  border-radius: 6px;
    height:20px;
    width:20px;
    cursor: pointer;
}

 .mainPageContentSectionThirdRowInner input[type="checkbox"]  {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 2rem;
  padding: 0.1rem;
  border: 1px solid var(--main-page-topbar-background-colour) ;
  border-radius: 6px;
  height:16px;
  width:16px;
  cursor: pointer;
}
    
 .mainPageContentSectionThirdRowInnerJustified input[type="checkbox"]::before,  {
  content: "";
  width: 16px;
  height: 16px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  transform: scale(0);
  background-color:var(--table-title-text-colour);
}

 .mainPageContentSectionThirdRowInner input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  transform: scale(0);
  background-color:var(--main-page-topbar-background-colour);

}

 .mainPageContentSectionThirdRowInnerJustified input[type="checkbox"]:checked::before,  .mainPageContentSectionThirdRowInner input[type="checkbox"]:checked::before {
  transform: scale(1);
}


 .mainPageContentSectionThirdRowInnerJustified input[type="checkbox"]:hover,  .mainPageContentSectionThirdRowInner input[type="checkbox"]:hover {
  color: black;
}

.mainPageContentSectionThirdRowInnerJustified span {
    margin-left:10px;
}

.mainPageContentSectionThirdRowInnerJustifiedButton {
    margin-left:10px;
    display:flex;
    min-width:100px;
    height:20px;
    border-radius: 6px;
    border: 1px solid var( --table-title-text-colour) ;
    background-color:  var(--buttonsSaveFill) ;
    color:#fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mainPageContentSectionThirdRowInnerJustifiedInner  {
    background-color: var(--main-page-topbar-background-colour);
    color: var( --table-title-text-colour);
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left:10px;
    margin-top:30px;
    margin-right:10px;
    width:100%;   
}

.mainPageContentSectionThumbnailItemFrame {
    width:120px;
    display: flex;
    flex-wrap: wrap;
    margin-left:10px;
    margin-top:10px;
    background-color: var(--body-background-colour);
}

.mainPageContentSectionThumbnailItemInner {
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    display: flex;
    flex-direction: column;
}

.mainPageContentSectionThumbnailItemImage img  {
    width:100px;
    height:100px;
    border-radius: 10px;
}

.mainPageContentSectionThumbnailItemControlsFrame {
    width:100%;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.hover:hover {
    cursor:pointer;
}

.mainPageContentSectionThumbnailItemControl img {
    width:20px;
    height:20px;
}


.editorControlsImageFrame, .editorControlsAudioFrame {
    display: flex;
    align-items: center;

}

.editorControlsImageImage,.editorControlsAudioImage {
    display: flex;
    width:120px;
    margin-left: 10px;
    flex-direction: column;
    align-content: flex-start;

}



.editorControlsImageImage img, .editorControlsAudioImage img{
    border-radius: 10px;
    width:100px;
    height:100px;
}

.editorControlsImageDetails, .editorControlsAudioDetails {
    flex-direction: column;
    min-width:300px;
}
.editorControlsImageDetails input[type=text], .editorControlsAudioDetails input[type=text] {
    margin-left:0px;
    margin-top:10px;
}
.editorControlsImageTitle, .editorControlsAudioTitle {
    display: flex;
}

.editorAudioControlsFunctionsFrame {
     width:80px;
     align-items: center;
    justify-content: center;
      display: flex;
    margin-left:10px;
}

.editorAudioControlsFunctionButton {
    width:30px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--item-colour-dark);
    display: flex;
    color: var(--item-colour-light-hover);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--button-text-size);
    align-items: center;
    justify-content: center;
    margin-left:10px;
     height:22px;
}

.editorAudioControlsFunctionButton img {
     width:22px;
    height:22px;
}


.editorControlsFunctionButton {
    width:80px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--item-colour-dark);
    display: flex;
    color: var(--item-colour-light-hover);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--button-text-size);
    align-items: center;
    justify-content: center;
     margin-top:10px;
}

.editorControlsFunctionButton:hover, .editorAudioControlsFunctionButton:hover {
    color: var(--item-colour-light-hover);
}

.mainPageContentTitle {
    display: flex;
    flex-direction: row;
    background-color: var(--main-page-topbar-background-colour);
     color: var(--item-colour-light-hover);
     font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    width: 100%;
    margin-right: 10px;
    margin-top: 10px;
}

.mainPageContentTitleSenders {
    display: flex;
    flex-direction: row;
    background-color: var(--main-page-topbar-background-colour-senders);
     color: var(--item-colour-light-hover);
     font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    width: 100%;
    margin-right: 10px;
    margin-top: 10px;
}

.mainPageContentTitleRecievers {
    display: flex;
    flex-direction: row;
    background-color: var(--main-page-topbar-background-colour-recievers);
     color: var(--item-colour-light-hover);
     font-size: var(--top-bar-text-size);
    font-weight: var(--top-bar-text-weight);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    width: 100%;
    margin-right: 10px;
    margin-top: 10px;
}

.mainPageContentButtonImageFrame {
    display: flex;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-top:10px;
}
.mainPageContentButtonImageInner {
    display: flex;
    flex-direction: column;
    background-color: var(--main-page-section-background-colour);
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: center;
    cursor: pointer;
    align-items: center;
        width: 160px;
    height:160px;
}

.mainPageContentButtonImage {
    margin-left: 10px;
    margin-right: 10px;
    
}
.mainPageContentButtonImage img {
    width: 100px;
    height: 100px;
    border-radius: 3px;
    cursor: pointer;
}


.mainPageContentButtonAudioFrame {
    display: flex;
    margin-bottom: 10px;
    margin-top:10px;

}
.mainPageContentButtonAudioInner {
    display: flex;
    flex-direction: column;
     justify-content: center;
    background-color: var(--main-page-section-background-colour);
    width: 160px;
    height:160px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    padding-top:10px;
}
.mainPageContentButtonAudioTextRow {
     width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:10px;
}

.mainPageContentButtonAudioImage {
    margin-left: 10px;
    margin-right: 10px;
    
}
.mainPageContentButtonAudioImage img {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    cursor: pointer;
}

.mainPageContentTitleInnerRow {
    font-weight: var(--top-bar-text-highlight-weight);
}


.mainPageContentLogSummary {
    margin-left:10px;
    margin-right:10px;
    display:flex;
}
.mainPageContentLogIcon {
    display:flex;
    margin-right: 20px;
    justify-content: center;
    align-items: center;
}
.mainPageContentLogIcon div {
    display:flex;
}
.mainPageContentLogIcon div img {
    height:50px;
    width: 50px;
}
.mainPageContentLogSummaryInner{
    display:flex;
    justify-content: space-between;
    width: 100%;
    margin-right: 10px;
}
.mainPageContentSummaryBlock {
    display:flex;
        flex-direction: column;

}
.mainPageContentSummaryRow {
    display:flex;
}
.mainPageContentSummaryRowTitle {
    margin-right: 10px;
    font-weight: var(--top-bar-text-highlight-weight);
}
.mainPageContentSummaryRowText {
    
}

.mainPageContentLogSummaryData {
    margin-left:10px;
    margin-right:10px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--item-colour-light);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width:100%;
    word-wrap: break-word;
    overflow: hidden;
}




.mainPageErrorSection {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
}
.mainPageErrorSectionInner {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
    align-items: flex-start;
}
.mainPageErrorSectionFullFrame {
    width: 100%;
    display: flex;
    height: auto;
    overflow: hidden;
    justify-content: space-around;
    margin-top: 10px;
}
.mainPageErrorSectionFull {
    width: 100%;
    border-radius: 2px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-right:10px;
    display: flex;
    flex-direction: column;
}
.mainPageErrorTitleInner {
     margin-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    background-color: var( --indicator-colour-error);
    color:var(--buttonsCancelBorder);
    border-color:var(--buttonsCancelBorder);
    border-width:1px;
    border-style:solid;
    font-weight: var(--top-bar-text-highlight-weight);
    font-size:var(--top-bar-text-size);
    border-radius:5px;
}
.mainPageContentTitleFrame {
    display: flex;
    margin-bottom: 20px;
    margin-right: 10px;
    
}

.mainPageContentSectionShadeSenders {
    background-color: var( --main-page-section-background-colour-senders);
}
.mainPageContentSectionShadeRecievers {
    background-color: var( --main-page-section-background-colour-recievers);
}

@charset "utf-8";
/* Fonts */
@font-face {
    font-family: Nunito;
    src: url(/_templates/default/fonts/Nunito-VariableFont_wght.ttf);
}

@font-face {
    font-family: Poppins;
    src: url(/_templates/default/fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: Password;
    src: url(/_templates/default/fonts/KodeMono-VariableFont_wght.ttf);
}

/* Variables */
:root {
    --body-font-size: 14px;
    --body-background-colour: #fff;
    --body-background-colour-over: #fefefe;
    --main-page-background-colour: #f1f2f4;
    --main-page-topbar-background-colour: #38414a;
    --main-page-topbar-background-colour-senders: #609211;
    --main-page-topbar-background-colour-recievers: #316faf;
    --main-page-topbar-background-colour-senders-subtitle: #8bab58;
    --main-page-topbar-background-colour-recievers-subtitle: #6a99c9;
    --main-page-section-background-colour-senders: #edf5e0;
    --main-page-section-background-colour-recievers: #e0eaf5;
    --main-page-section-background-colour: #fff;
    --item-colour-light: #a6aaae;
    --item-colour-light-hover: #f7f7f7;
    --item-colour-dark: #008378;
    --menu-item-icon-border: #b7eeea;
    --menu-item-icon-inner: #008378;
    --menu-shadow: #d4d5d5;
    --sub-menu-item-icon-inner: #0ae2d4;
    --left-menu-width: 240px;
    --left-menu-colapsed-width: 60px;
    --left-menu-colapsed-width-toggle: 240px;
    --left-menu-button-width: 180px;
    --left-menu-button-height: 60px;
    --options-menu-button-height: 40px;
    --options-menu-button-width: 180px;
    --options-menu-button-icon-side: 25px;
    --top-bar-height: 70px;
    --ct-font-sans-serif: "Nunito", sans-serif;
    --ct-font-display-serif: "Poppins", sans-serif;
    --top-bar-text-size: 0.95rem;
    --top-bar-text-weight: 400;
    --top-bar-text-highlight-weight: 800;
    --top-bar-icon-height: 25px;
    --main-menu-icon-size: 24px;
    --main-menu-thumbnail-size: 34px;
    --sub-main-menu-icon-size: 24px;
    --input-text-size: 1.1rem;
    --indicator-colour-okay: #cbfae1;
    --indicator-colour-okay-dark: #299d5f;
    --indicator-colour-error: #fbc8c8;
    --indicator-colour-error-dark: #e41b5d;
    --indicator-colour-back: #4f83d2;
    --indicator-colour-back-text: #fff;
    --buttonsCancelFill: #f0afb5;
    --buttonsCancelFillHover: #e49aa1;
    --buttonsCancelBorder: #c02634;
    --buttonsCancelText: #fff;
    --buttonsSaveFill: #93a4c9;
    --buttonsSaveFillHover: #7889ae;
    --buttonsSaveBorder: #394e7e;
    --buttonsSaveText: #fff;
    --table-row-height: 30px;
    --table-image-size: 26px;
    --table-icon-size: 16px;
    --table-footer-icon-size: 20px;
    --table-title-colour: #008378;
    --table-title-text-colour: #fff;
    --table-row-hover: #b7eeea;
    --button-icon-size: 24px;
    --button-text-size: 0.95rem;
    --flag-colour-purple: #cbb6e5;
    --flag-colour-purple-dark: #7a59a3;
    --flag-colour-green: #cbfae1;
    --flag-colour-green-dark: #299d5f;
    --flag-colour-grey: #bdc0c0;
    --flag-colour-grey-text: #000;
    --flag-colour-admin: #953060;
    --flag-colour-admin-text: #fff;
    --flag-colour-information: #233662;
    --flag-colour-information-text: #fff;
    --flag-colour-primary: #36c8bc;
    --flag-colour-primary-text: #000;
    --flag-colour-red: #d82222;
    --flag-colour-red-text: #fff;
    --flag-colour-green-text: #fff;
    --backgroundImage: url("/_graphics/background.jpg");
}

/* Base layout and menu structure */
html {
    font-size: var(--body-font-size);
}

body {
    margin: 0;
    font-family: var(--ct-font-sans-serif);
    background: var(--body-background-colour);
    overflow-x: hidden;
}

.wholePageFrame {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    background-image: var(--backgroundImage);
    background-size: cover;
    background-repeat: no-repeat;
}

.wholePageOverlay {
    background-color: #212020;
    display: none;
    opacity: 0.7;
    position: absolute;
    left: var(--left-menu-width);
    top: 0px;
    min-height: 100%;
    width: calc(100% - var(--left-menu-width));
    z-index: 2;
    transition: all .1s ease;
}

.wholePageOverlay-menuActive {
    display: flex;
}

.wholePageEditorOverlay {
    background-color: #212020;
    display: none;
    opacity: 0.8;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 10;
    transition: all .1s ease;
}

.wholePageEditorOverlayFrame {
    display: none;
    opacity: 1;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 11;
    transition: all .1s ease;
    align-items: center;
    justify-content: center;
}

.wholePageLoginOverlay {
    background-color: #58b19d;
    display: flex;
    opacity: 0.7;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 10;
    transition: all .1s ease;
}

.wholePageLoginOverlayFrame {
    display: flex;
    opacity: 1;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    z-index: 11;
    transition: all .1s ease;
    align-items: center;
    justify-content: center;
}

/* Menu structure and state classes */
.mainPageFrame {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
}

.mainPageLeftMenuFrame {
    position: absolute;
    left: 0px;
    top: 0px;
    width: var(--left-menu-width);
    min-width: var(--left-menu-width);
    height: 100%;
    display: flex;
    background-color: var(--body-background-colour);
    transition: all .1s ease;
    flex-direction: column;
}

.mainPageLeftMenuFrame-menuActive {
    display: flex;
    z-index: 4;
}

.menuTopLogo-menuActive {
    display: none;
}

.leftMenuColapsed {
    width: var(--left-menu-colapsed-width);
    min-width: var(--left-menu-colapsed-width);
}

.siteLogoFrameColapsed {
    padding-left: 0px;
}

.menuItemsColapsed {
    justify-content: center;
    margin-left: 0px;
}

.optionsMenuColapsedLeftMenu {
    left: 260px;
}

.hide {
    display: none;
}

/* All other menu, submenu, account menu, site menu, and content classes from your backup core.css */
/* ... (all your original core.css rules here) ... */

/* Icon classes (from icons.css) */
.iconQuickCallLogoLight {
    background-image: url(/_graphics/QuickCall6LogoTextLight.png);
}

.iconQuickCallLogoDark {
    background-image: url(/_graphics/QuickCall6LogoTextDark.png);
}

.iconMenu {
    background-image: url(/_graphics/iconsMenu.png);
}

.iconChevronDown {
    background-image: url(/_graphics/iconChevronDown.png);
}

.iconDevices {
    background-image: url(/_graphics/iconDevices.png);
}

.iconSites {
    background-image: url(/_graphics/iconSites.png);
}

.iconUserAccounts {
    background-image: url(/_graphics/iconUserAccounts.png);
}

.iconUserButtons {
    background-image: url(/_graphics/iconUserButtons.png);
}

.iconUserGroups {
    background-image: url(/_graphics/iconUserGroups.png);
}

.iconUserSettings {
    background-image: url(/_graphics/iconUserSettings.png);
}

.iconUserReporting {
    background-image: url(/_graphics/iconUserReporting.png);
}

.iconButtonIcons {
    background-image: url(/_graphics/iconButtonIcons.png);
}

.iconButtonAudio {
    background-image: url(/_graphics/iconButtonAudio.png);
}

.iconUserImageLibrary {
    background-image: url(/_graphics/iconImageLibrary.png);
}

.iconAudioLibrary {
    background-image: url(/_graphics/iconAudioLibrary.png);
}

.iconFullscreen {
    background-image: url("/_graphics/iconFullscreen.png");
}

.iconExitFullscreen {
    background-image: url("/_graphics/iconExitFullscreen.png");
}

/* All other core.css content remains unchanged and included below this line */
/* ... (continue with your full core.css content as shown in your file) ... */