@font-face {
    font-family: 'SLAVE ONLY DREAMS TO BE KING';
    src: url('/fonts/SLAVE ONLY DREAMS TO BE KING.TTF') format('truetype');
    src: url('/fonts/SLAVE ONLY DREAMS TO BE KING.TTF?#iefix') format('truetype'),url('/fonts/SLAVE ONLY DREAMS TO BE KING.TTF') format('ttf'),url('/fonts/SLAVE ONLY DREAMS TO BE KING.TTF') format('ttf'),url('/fonts/SLAVE ONLY DREAMS TO BE KING.TTF') format('truetype'),
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NotoSans-Bold';
    src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
    src: url('/fonts/NotoSans-Bold.ttf?#iefix') format('truetype'),url('/fonts/NotoSans-Bold.ttf') format('ttf'),url('/fonts/NotoSans-Bold.ttf') format('ttf'),url('/fonts/NotoSans-Bold.ttf') format('truetype'),
}

@font-face {
    font-family: 'NotoSans-Regular';
    src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
    src: url('/fonts/NotoSans-Regular.ttf?#iefix') format('truetype'),url('/fonts/NotoSans-Regular.ttf') format('ttf'),url('/fonts/NotoSans-Regular.ttf') format('ttf'),url('/fonts/NotoSans-Regular.ttf') format('truetype'),
}

@font-face {
    font-family: 'Lollipoptron';
    src: url('/fonts/Lollipoptron.ttf') format('truetype');
    src: url('/fonts/Lollipoptron.ttf?#iefix') format('truetype'),url('/fonts/Lollipoptron.ttf') format('ttf'),url('/fonts/Lollipoptron.ttf') format('ttf'),url('/fonts/Lollipoptron.ttf') format('truetype'),
}
.z{
    z-index:3;
}
a{
    text-decoration:none;
}
textarea{
    resize:none;
}
#newEventCtrl {
    box-sizing: border-box;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    top: 45px;
    right: 0;
    z-index: 10;
    background: #333;
    padding: 10px;
}
#newEventCtrl .event-contact-actions {
    gap: 6px;
}
#newEventCtrl .event-contact-actions span,
#newEventCtrl .event-contact-actions small {
    flex-basis: 100%;
}
#newEventCtrl #eventSaveStatus {
    flex-basis: 100%;
    font-size: 12px;
}
#newEventCtrl #eventSaveStatus.event-save-error {
    color: #ff8a80;
}
.event-invite-heading {
    font-size: 14px;
    margin: 10px 0 6px;
}
.venue-event-window {
    position: fixed;
    inset: 5vh 5vw;
    z-index: 101;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 14px;
    background: #333;
    border: 1px solid #b20ab2;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
.venue-event-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.venue-event-window-header h2 {
    margin: 0;
    font-size: 16px;
}
.venue-event-window-header button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.venue-event-card {
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #b20ab2;
    border-radius: 6px;
}
.venue-event-card h3 {
    margin: 0;
    font-size: 14px;
}
.calendar-day-events {
    display: grid;
    gap: 8px;
    padding: 10px;
    font-size: 13px;
}
.calendar-day-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.calendar-day-events-header h3 {
    margin: 0;
    font-size: 14px;
}
.calendar-day-events-header button {
    font-size: 16px;
    padding: 2px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}
.calendar-event-card {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid #b20ab2;
    border-radius: 6px;
}
.calendar-event-title {
    font-weight: bold;
}
.calendar-event-edit {
    justify-self: start;
    padding: 3px 8px;
    font-size: 12px;
}
#cancelUserEventButton {
    justify-self: start;
    padding: 3px 8px;
    font-size: 12px;
    border-color: #c62828;
}
.calendar-event-meta {
    font-size: 12px;
    opacity: 0.8;
}
.calendar-event-description {
    white-space: pre-wrap;
}
.calendar-invite-summary {
    margin-top: 5px;
    font-size: 12px;
}
.calendar-invite-toggle {
    justify-self: start;
    padding: 3px 8px;
    font-size: 12px;
}
.calendar-invite-details {
    display: grid;
    gap: 4px;
    padding-top: 4px;
}
.calendar-invite-details[hidden] {
    display: none;
}
.calendar-invitee-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid #555;
}
.calendar-invitee-status {
    text-transform: capitalize;
}
.event-invite-card {
    display: grid;
    gap: 4px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b20ab2;
    border-radius: 6px;
    font-size: 13px;
}
.event-invite-title {
    font-weight: bold;
    font-size: 14px;
}
.event-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.event-invite-actions button {
    font-size: 12px;
    padding: 4px 12px;
}
.event-contact-dialog {
    box-sizing: border-box;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #b20ab2;
    border-radius: 16px;
    background: #333;
    color: inherit;
}
.event-contact-dialog::backdrop {
    background: rgba(0, 0, 0, .65);
}
.event-contact-dialog input[type=search] {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
}
.event-contact-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 12px 0;
}
.event-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #555;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.event-contact-row input[type=checkbox] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: #b20ab2;
}
.event-contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.event-contact-actions button {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 32px;
    border: 1px solid #b20ab2;
    border-radius: 8px;
    background: #333;
    color: inherit;
    cursor: pointer;
}
.event-contact-actions button:disabled {
    opacity: .5;
    cursor: default;
}
input[type=range].slider {
    width: 100%;
    margin: -0.05px 0;
    background-color: transparent;
    -webkit-appearance: none;
}

    input[type=range].slider:focus {
        outline: none;
    }

    input[type=range].slider::-webkit-slider-runnable-track {
        background: #0b87d6;
        border: 0;
        width: 100%;
        height: 2.1px;
        cursor: pointer;
    }

    input[type=range].slider::-webkit-slider-thumb {
        margin-top: 0.05px;
        width: 25px;
        height: 2px;
        background: #403e51;
        border: 0px solid rgba(0, 0, 0, 0);
        border: 0;
        cursor: pointer;
        -webkit-appearance: none;
    }

    input[type=range].slider:focus::-webkit-slider-runnable-track {
        background: #0c96ee;
    }

    input[type=range].slider::-moz-range-track {
        background: #0b87d6;
        border: 0;
        width: 100%;
        height: 2.1px;
        cursor: pointer;
    }

    input[type=range].slider::-moz-range-thumb {
        width: 25px;
        height: 2px;
        background: #403e51;
        border: 0px solid rgba(0, 0, 0, 0);
        border: 0;
        cursor: pointer;
    }

    input[type=range].slider::-ms-track {
        background: transparent;
        border-color: transparent;
        border-width: 0.75px 0;
        color: transparent;
        width: 100%;
        height: 2.1px;
        cursor: pointer;
    }

    input[type=range].slider::-ms-fill-lower {
        background: #0a78be;
        border: 0;
    }

    input[type=range].slider::-ms-fill-upper {
        background: #0b87d6;
        border: 0;
    }

    input[type=range].slider::-ms-thumb {
        width: 25px;
        height: 2px;
        background: #403e51;
        border: 0px solid rgba(0, 0, 0, 0);
        border: 0;
        cursor: pointer;
        margin-top: 0px;
        /*Needed to keep the Edge thumb centred*/
    }

    input[type=range].slider:focus::-ms-fill-lower {
        background: #0b87d6;
    }

    input[type=range].slider:focus::-ms-fill-upper {
        background: #0c96ee;
    }
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range].slider {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

:root {
    --tune: #ae28d7;
    --transptune: rgba(174,40,215,.5);
    --tunegradient: #5327d6;
    --primary: #1c1e22;
    --transparentPrimary:rgba(28,30,24,0.75);
    --primarylighter: #22262b;
    --primarylightert: rgba(28,30,34,.5);
    --c1: #8B5897;
    --c2: #6667AB;
    --c3: #D3806F;
    --c4: #b18F6A;
    --c5: #D3507A;
    --c6: #DF8887;
    --c7: #E4455E;
    --c8: #EDC373;
    --c9: #86A1A9;
    --c10: #2A2A35;
    --c11: #c69d81;
    --lollypoptrun: 'Lollipoptron';
    --notosans: 'NotoSans-Regular';
    --notosansb: 'NotoSans-Bold';
    --shadow-color: 220deg 4% 25%;
    --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36), 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
    --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34), 2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34), 4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34), 7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34), 11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34), 17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34), 25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}
[contenteditable] {
    outline: 0px solid transparent;
}
[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-placeholder);
}
.AudioBackground {
    background-image: url(/imgs/audio.png);
    background-size: contain;
}
/*
    Font awsome additional styles.
*/
.fa-bars {
    font-size: 32pt;
}

    .fa-bars:hover {
        cursor: pointer;
        color: var(--c1);
    }

.fasa {
    font-size: 14pt;
}

    .fasa:hover {
        cursor: pointer;
        color: var(--c11);
    }

.btn-fasa {
    text-decoration: none;
    font-size: 14pt;
    background-color: transparent;
    border: none;
    color: #fff;
}

    .btn-fasa:hover {
        cursor: pointer;
        color: var(--c11);
    }

.btn-fasa-small {
    text-decoration: none;
    font-size: 12pt;
    background-color: transparent;
    border: none;
    color: #fff;
}

    .btn-fasa-small:hover {
        cursor: pointer;
        color: var(--c11);
    }
/*
    End of font awsome
*/
html {
    height: 100%;
    width: 100%
}

body {
    margin: 0;
    padding: 0;
    background: var(--primary);
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 20px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    position: relative
}
.popup-bg{
    background: var(--transparentPrimary);
}
ul {
    list-style: none
}

canvas {
    outline: none;
    -webkit-tap-highlight-color: rgba(255,255,255,0)
}

a {
    color: var(--c1); /*#e3e1dd;*/
}

button {
    border: none;
    font-family: NotoSans-Regular;
    font-size: 14pt;
}

    button:hover {
        color: white;
        background-color: var(--c4);
        cursor: pointer;
    }
/* Callout */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -moz-user-focus: ignore;
    -ms-user-select: none;
    user-select: none;
}
.content-right {
    margin-left: auto !important;
    margin-right: 25px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.content-left {
    margin-left: 25px !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

div.callout {
    width: 400px;
    float: left;
}

div.callout-right {
    background-color: #444;
    background-image: -moz-linear-gradient(top, #444, #444);
    color: #ccc;
    padding: 10px;
    border-radius: 15px 15px 5px 15px;
    box-shadow: 0px 0px 20px #999;
    border: 1px solid #333;
    text-shadow: 0 0 1px #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

div.callout-left {
    background-color: #444;
    background-image: -moz-linear-gradient(top, #444, #444);
    position: static;
    color: #ccc;
    padding: 10px;
    border-radius: 15px 15px 15px 5px;
    box-shadow: 0px 0px 20px #999;
    border: 1px solid #333;
    text-shadow: 0 0 1px #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.callout::before {
    content: "";
    width: 0px;
    height: 0px;
    border: 0.8em solid transparent;
    position: absolute;
}

.callout.top::before {
    left: 45%;
    bottom: -20px;
    border-top: 10px solid #444;
}

.callout.bottom::before {
    left: 45%;
    top: -20px;
    border-bottom: 10px solid #444;
}

.callout.left::before {
    right: -20px;
    top: 40%;
    border-left: 10px solid #444;
}

.callout.right::before {
    left: -20px;
    top: 40%;
    border-right: 10px solid #444;
}

.callout.top-left::before {
    left: 7px;
    bottom: -20px;
    border-top: 10px solid #444;
}

.callout.top-right::before {
    right: 7px;
    bottom: -20px;
    border-top: 10px solid #444;
}

.flush-right {
    right: 0;
}

.flush-top {
    top: 0;
}

.flush-top-10 {
    top: 10px;
}

.flush-right-30 {
    right: 32px;
}
/* End Callout*/
.flush-left {
    left: 0;
}

#Logo {
    font-family:'Slave only dreams to be king';
    font-weight: normal;
}

#Globe > canvas {
    position: absolute
}

#blogtoolbar {
    min-height: 40px;
    justify-content: flex-start;
}

    #blogtoolbar > div {
        margin: 10px;
    }

#blogOptions {
    min-height: 40px;
}

#tools {
    justify-content: space-between;
}

.modal-bg {
    position: fixed;
    margin: 0;
    background-color: rgba(0,0,0,.75);
    z-index: 2;
}

.Avatar {
    border-radius: 30px 10px;
    border: 1px solid #fff;
    width: 100%;
}

.btbar {
    min-height: 40px;
    justify-content: flex-start;
}

    .btbar > div {
        margin: 10px;
    }

.boptions {
    min-height: 10px;
}

.tools {
    justify-content: space-between;
}

.clr-1 {
    background-color: var(--c1);
}

.fclr-1 {
    color: var(--c1);
}

.clr-2 {
    background-color: var(--c2);
}

.fclr-2 {
    color: var(--c2);
}

.clr-3 {
    background-color: var(--c3);
}

.fclr-3 {
    color: var(--c3);
}

.clr-4 {
    background-color: var(--c4);
}

.fclr-4 {
    color: var(--c4);
}

.clr-5 {
    background-color: var(--c5);
}

.fclr-5 {
    color: var(--c5);
}

.clr-6 {
    background-color: var(--c6);
}

.fclr-6 {
    color: var(--c6);
}

.clr-7 {
    background-color: var(--c7);
}

.fclr-7 {
    color: var(--c7);
}

.clr-8 {
    background-color: var(--c8);
}

.fclr-8 {
    color: var(--c8);
}

.clr-9 {
    background-color: var(--c9);
}

.fclr-9 {
    color: var(--c9);
}

.clr-10 {
    background-color: var(--c10);
}

.fclr-10 {
    color: var(--c10);
}

.clr-11 {
    background-color: var(--c11);
}
.fclr-11 {
    color: var(--c11);
}
.clr-prime{
    background-color:var(--primary);
}
.fclr-prime {
    color: var(--primary);
}
.ctune {
    background-color: var(--tune);
}
.ftune {
    color: var(--tune) !important;
}
.ftune-btn{
    color:var(--tune) !important;
    font-size:16pt !important;
}
.ftune-btn:hover{
    color:var(--c4);
    cursor:pointer;
}
.height-20 {
    height: 20px;
}
.height-25{
    height:25px;
}
.height-30 {
    height: 30px;
}

.height-40 {
    height: 40px;
}

.height-50 {
    height: 50px;
}

.height-90 {
    height: 90px;
}

.height-100 {
    height: 100px;
}

.height-inherit {
    height: inherit;
}

.height-200 {
    height: 200px;
}

.height-300 {
    height: 300px;
}

.autoheight-400 {
    height: 100px;
}

.width-20 {
    width: 20px;
}
.width-25{
    width:25px;
}
.width-30 {
    width: 30px;
}

.width-50 {
    width: 50px;
}

.width-150 {
    width: 150px;
}

.width-400 {
    width: 400px;
}

.centerItem {
    margin: auto;
}
/*
    blog editor
*/
.InnerPostBorder {
    border: 1px solid #CFCFCF;
    border-radius: 10px 10px;
}

.InnerButtonRadius {
    border-radius: 0 0 10px 10px;
}

.cmtEditorMinHeight {
    min-height: 150px;
}

.talign-right {
    text-align: right;
}

.c-pos-relative {
    position: relative;
}

.c-pos-absolute {
    position: absolute;
}

.btncollection {
    width: 200px;
    background-color: var(--primary);
    border: 1px solid #cfcfcf;
    z-index: 2;
}

.menuCollection {
    border: 1px solid #cfcfcf;
}

.menuCollectionBtn {
    background-color: var(--c4);
}

    .menuCollectionBtn:hover {
        cursor: pointer;
        background-color: var(--c10);
    }
/*
    end blog editor
*/
.frame {
    width: 100%;
}

.PostBorder {
    border: 2px solid #CFCFCF;
}

.post-video-attachment {
    margin: 12px 0;
    max-width: 100%;
}
.post-media-attachment {
    display: grid;
    grid-template-columns: repeat(12, minmax(auto, 1fr));
    width: 100%;
    border: 1px solid rgb(139, 7, 171);
    border-radius: 20px;
    overflow: hidden;
    /* Keeps the audio visualizer canvas (z-index:-1) above a parent's background, such as a chat bubble. */
    isolation: isolate;
}
.post-media-attachment canvas {
    max-width: 100%;
}
.post-media-attachment .ifc > div:has(> audio[id^="ap_"]) {
    position: relative;
}
.post-media-attachment .ifc > div:has(> audio[id^="ap_"]) > div:has(> canvas) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80% !important;
    pointer-events: none;
}
.post-media-attachment .ifc > div:has(> audio[id^="ap_"]) canvas {
    display: block;
    width: 100% !important;
}
.post-media-attachment .ifc > div:has(> audio[id^="ap_"]) > div[data-aid] {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    overflow-wrap: anywhere;
}
.post-media-attachment .ifc > div:has(> audio[id^="ap_"]) > div:last-child {
    margin-left: 80% !important;
    align-items: center;
}
.post-media-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.post-media-progress-item {
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--transptune);
    border-radius: 8px;
    color: lightslategray;
    overflow-wrap: anywhere;
}
.post-media-progress-item progress {
    width: 100%;
    accent-color: var(--tune);
}
.post-media-upload-item {
    min-width: 0;
}
.post-media-remove {
    margin: 0 0 6px 6px;
}
.post-media-player {
    grid-column: span 12;
    display: flex;
    justify-content: center;
    padding: 8px;
}
.post-media-player img,
.post-media-player video {
    display: block;
    max-width: 100%;
    max-height: 70vh;
}
.post-media-player audio {
    width: 100%;
}
.post-media-title {
    grid-column: span 9;
    font-size: 12pt;
    padding: 0 10px;
    overflow-wrap: anywhere;
}
.post-media-kind {
    grid-column: span 3;
    font-size: 10pt;
    color: lightslategray;
    text-align: right;
    padding: 0 10px;
}

.video-attach {
    padding: 8px 12px;
    border-top: 1px solid var(--transptune);
    font-size: 10pt;
}
.video-attach-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.video-attach-icon {
    color: var(--tune);
    font-size: 22px;
}
.video-attach-file {
    flex: 1 1 auto;
    min-width: 0;
    color: lightslategray;
    font-size: 10pt;
}
.video-attach-file::file-selector-button {
    margin-right: 8px;
    padding: 5px 12px;
    border: 1px solid var(--tune);
    border-radius: 14px;
    background: transparent;
    color: whitesmoke;
    cursor: pointer;
}
.video-attach-file::file-selector-button:hover {
    background-color: var(--transptune);
}
.dm-video-attach-file {
    flex: 1 1 auto;
    min-width: 0;
    color: lightslategray;
    font-size: 8pt;
}

    .dm-video-attach-file::file-selector-button {
        margin-right: 8px;
        padding: 5px 12px;
        border: 1px solid var(--tune);
        border-radius: 14px;
        background: transparent;
        color: whitesmoke;
        cursor: pointer;
    }

        .dm_video-attach-file::file-selector-button:hover {
            background-color: var(--transptune);
        }
.video-attach-btn {
    padding: 5px 16px;
    border: none;
    border-radius: 14px;
    background-color: #b20ab2;
    color: whitesmoke;
    cursor: pointer;
}
.video-attach-btn:hover:not(:disabled) {
    background-color: rgb(4, 81, 134);
}
.video-attach-btn-secondary {
    background: transparent;
    border: 1px solid lightslategray;
    color: lightslategray;
}
.dm-video-attach-btn {
    padding: 5px 16px;
    border: none;
    border-radius: 14px;
    background-color: #b20ab2;
    color: whitesmoke;
    cursor: pointer;
    font-size:8pt !important;
}

    .dm-video-attach-btn:hover:not(:disabled) {
        background-color: rgb(4, 81, 134);
    }

.dm-video-attach-btn-secondary {
    background: transparent;
    border: 1px solid lightslategray;
    color: lightslategray;
}
.video-attach-btn:disabled,
.video-attach-file:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.video-attach-rights {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: whitesmoke;
}
.video-attach-rights input {
    accent-color: var(--tune);
}
.dm-video-attach-rights {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: whitesmoke;
    font-size:8pt !important;
}

    .dm-video-attach-rights input {
        accent-color: var(--tune);
    }
.wave-header {
    position: relative;
    height: 130px;
    overflow: hidden;
}
.wave-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10, 0, 16, 0.75) 0%, rgba(10, 0, 16, 0.35) 45%, rgba(10, 0, 16, 0) 75%);
}
.wave-title {
    position: absolute;
    z-index: 2;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 70%;
    margin: 0;
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    color: #ffeaff;
    text-shadow: 0 0 8px rgba(178, 10, 178, 0.9), 0 0 22px rgba(178, 10, 178, 0.6);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wave-header .wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.wave-header #vname {
    position: relative;
    height: 100%;
}
/* The smoke renderer is opaque black; screen blending lets the waves show through it. */
.wave-header #vname canvas {
    mix-blend-mode: screen;
}
.video-attach-hint {
    margin: 4px 0 0 0;
    color: lightslategray;
    font-size: 9pt;
}
.dm-video-attach-hint {
    margin: 4px 0 0 0;
    color: lightslategray;
    font-size: 7pt;
}
.video-attach-progress {
    width: 100%;
    height: 8px;
    margin-top: 8px;
    accent-color: var(--tune);
}
.video-attach-status {
    margin-top: 4px;
    min-height: 1em;
    color: lightslategray;
}

.post-video-attachment video {
    display: block;
    width: 100%;
    max-width: 560px;
    max-height: 70vh;
    background-color: #000;
}

.beditor {
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 4px;
    background-color: #000;
    padding:10px;
}
.deditor {
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 4px;
    background-color: #000;
    z-index:2;
}
.ceditor {
    height: 30px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    background-color: transparent;
    border: #fff 1px solid;
}
.editContainer {
    border-radius: 10px 10px 0 0;
    background-color: #000;
}
.deditor {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding:10px;
}

    .deditor:active {
        min-height: 50px;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #000;
        border: none;
    }

.feditor {
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--c10);
}

.geditor {
    height: 50px;
    max-height: 100px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    background-color: #000;
    border: #fff 1px solid;
}

.btmBorder-tun {
    border-bottom: 2px solid var(--tune);
}

.topBorder {
    border-top: 1px solid #CFCFCF;
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    padding: 15px;
    border-radius: 20px 20px 0 0;
    background-color: var(--tune)
}
.Border-Top{
    border-top:1px solid rgb(139, 7, 171);
    border-bottom:none;
    border-left:none;
    border-right:none;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:25px;
    font-size:14pt;
}
.centerBorder {
    border-top: 1px solid #CFCFCF !important;
    border-left: 1px solid #CFCFCF !important;
    border-right: 1px solid #CFCFCF !important;
    padding: 15px;
}

.bottomBorder {
    border-top: 1px solid #CFCFCF;
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    padding: 15px;
}
.bottomRoundedCorners {
    border-radius: 0 0 20px 20px;
}
.abottomBorder {
    border-top: none;
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    padding: 15px;
    border-radius: 0 0 20px 20px;
}

.pwidth {
    width: 100%
}

.pwidth70 {
    width: 70%;
}

.pwidth75 {
    width: 75%;
}

.pwidth80 {
    width: 80%;
}

.pwidth90 {
    width: 90%;
}

.pwidth92 {
    width: 92%;
}

.pwidth20 {
    width: 30%;
}

.pwidth25 {
    width: 25%;
}

.pwidth20 {
    width: 20%;
}

.pheight {
    height: 100%
}

.pheight33 {
    height: 33%;
}

.fixed-width-300 {
    width: 300px;
}

.fixed-width-400 {
    width: 400px;
}

.fixed-height-30 {
    height: 30px;
}

.fixed-height-50 {
    height: 50px;
}

.static-height-300px {
    height: 300px;
}

.static-height-400px {
    height: 400px;
}

.static-height-500px {
    height: 500px;
}

.static-height-600px {
    height: 600px;
}

.inline-block {
    display: inline-block;
}
.grid{
    display:grid;
}
.general-grid {
    grid-template-columns: repeat(12,minmax(auto,1fr));
}

.general-auto-grid {
    grid-template-columns: repeat(12,minmax(auto,1fr))
}

.general-grid-14 {
    grid-template-columns: repeat(14,minmax(auto,1fr));
}

.general-grid-16 {
    display: grid;
    grid-template-columns: repeat(16,minmax(auto,1fr));
}

.general-grid-24 {
    display: grid;
    grid-template-columns: repeat(24,minmax(auto,1fr));
}
.grid-rows{
    grid-template-rows:repeat(12,minmax(auto,1fr));
}
.grid-rows-14 {
    grid-template-rows: repeat(14,minmax(auto,1fr));
}
.grid-rows-16 {
    grid-template-rows: repeat(16,minmax(auto,1fr));
}
.grid-rows-18 {
    grid-template-rows: repeat(18,minmax(auto,1fr));
}
.flex-width-1fr {
    flex-basis: 10%;
}

.flex-width-1-5fr {
    flex-basis: 15%;
}

.flex-width-2fr {
    flex-basis: 20%;
}

.flex-width-2-5fr {
    flex-basis: 25%;
}

.flex-width-3fr {
    flex-basis: 30%;
}

.flex-width-3-5fr {
    flex-basis: 35%;
}

.flex-width-4fr {
    flex-basis: 40%;
}

.flex-width-4-5fr {
    flex-basis: 45%;
}

.flex-width-5fr {
    flex-basis: 50%;
}

.flex-width-5-5fr {
    flex-basis: 55%;
}

.flex-width-6fr {
    flex-basis: 60%;
}

.flex-width-6-5fr {
    flex-basis: 65%;
}

.flex-width-7fr {
    flex-basis: 70%;
}

.flex-width-7-5fr {
    flex-basis: 75%;
}

.flex-width-8fr {
    flex-basis: 80%;
}

.flex-width-8-5fr {
    flex-basis: 85%;
}

.flex-width-9fr {
    flex-basis: 90%;
}

.flex-width-9-5fr {
    flex-basis: 95%;
}

.flex-width-10fr {
    flex-basis: 100%;
}

.general-flex-grid {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
}

.gfend {
    display: flex !important;
    align-items: self-end;
}

.gfmiddle {
    display: flex !important;
    align-items: center;
}

.static-span-1 {
    grid-column: span 1
}

.static-span-2 {
    grid-column: span 2
}

.static-span-3 {
    grid-column: span 3
}

.static-span-4 {
    grid-column: span 4
}

.static-span-5 {
    grid-column: span 5
}

.static-span-6 {
    grid-column: span 6
}

.static-span-7 {
    grid-column: span 7
}

.static-span-8 {
    grid-column: span 8
}

.static-span-9 {
    grid-column: span 9
}

.static-span-10 {
    grid-column: span 10
}

.static-span-11 {
    grid-column: span 11
}

.static-span-12 {
    grid-column: span 12
}

.static-span-13 {
    grid-column: span 13;
}

.static-span-14 {
    grid-column: span 14;
}
.static-span-24 {
    grid-column: span 24;
}
.static-rowspan-1 {
    grid-row: span 2;
}

.static-rowspan-2 {
    grid-row: span 2;
}

.static-rowspan-3 {
    grid-row: span 3;
}

.static-rowspan-4 {
    grid-row: span 4;
}

.static-rowspan-5 {
    grid-row: span 5;
}

.static-rowspan-6 {
    grid-row: span 6;
}

.static-rowspan-7 {
    grid-row: span 7;
}

.dyna-span-1 {
    grid-column: span 1
}

.dyna-span-2 {
    grid-column: span 2
}

.dyna-span-3 {
    grid-column: span 3
}

.dyna-span-4 {
    grid-column: span 4
}

.dyna-span-5 {
    grid-column: span 5
}

.dyna-span-6 {
    grid-column: span 6
}

.dyna-span-7 {
    grid-column: span 7
}

.dyna-span-8 {
    grid-column: span 8
}

.dyna-span-9 {
    grid-column: span 9
}

.dyna-span-10 {
    grid-column: span 10
}

.dyna-span-11 {
    grid-column: span 11
}

.dyna-span-12 {
    grid-column: span 12
}
.dynamic-span-1 {
    grid-column: span 1;
}
.dynamic-span-3{
    grid-column:span 3
}
.dynamic-span-4{
    grid-column:span 4;
}
.dynamic-span-6{
    grid-column:span 6;
}
.dynamic-span-8 {
    grid-column: span 8;
}
.row-span-1 {
    grid-row: span 1
}

.row-span-2 {
    grid-row: span 2
}

.row-span-3 {
    grid-row: span 3
}

.row-span-4 {
    grid-row: span 4;
}

.row-span-5 {
    grid-row: span 5;
}

.row-span-6 {
    grid-row: span 6;
}

.row-span-7 {
    grid-row: span 7;
}

.row-span-8 {
    grid-row: span 8;
}
.row-span-9{
    grid-row:span 9;
}
.row-span-10 {
    grid-row: span 10;
}
.row-span-11 {
    grid-row: span 11;
}
.row-span-12 {
    grid-row: span 12;
}
.row-span-13 {
    grid-row: span 13;
}
.row-span-14{
    grid-row:span 14;
}
.gallery_shadow {
    box-shadow: rgba(255, 255, 255, 0.2) 0px 12px 28px 0px, rgba(255, 255, 255, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
}
.margin-Bottom-10 {
    margin-bottom: 10px
}

.margin-Bottom-15 {
    margin-bottom: 15px
}

.margin-top-less-10 {
    margin-top: -10px;
}

.margin-top-less-15 {
    margin-top: -15px;
}

.margin-top-10 {
    margin-top: 10px
}

.margin-top-15 {
    margin-top: 15px
}

.margin-top-75 {
    margin-top: 75px;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-top-less-10 {
    margin-top: -10px;
}

.margin-right-10 {
    margin-right: 10px
}

.margin-left-auto {
    margin-left: auto;
}

.column-gap-5 {
    column-gap: 5px
}

.column-gap-10 {
    column-gap: 10px
}

.column-gap-15 {
    column-gap: 15px
}

.column-gap-20 {
    column-gap: 20px;
}

.row-gap-5 {
    row-gap: 5px;
}

.row-gap-10 {
    row-gap: 10px
}

.row-gap-12 {
    row-gap: 12px
}

.row-gap-14 {
    row-gap: 14px
}

.row-gap-15 {
    row-gap: 15px
}

.row-gap-30 {
    row-gap: 30px;
}

.rows-20to3 {
    grid-template-rows: 20fr 3fr;
}

.rows-5to15 {
    grid-template-rows: 5fr 15fr;
}

.row-span-2 {
    grid-row: span 2;
}

.grid-border {
    border: 1px solid #fff;
}

.TopLeft-50 {
    top: 50px;
    left: 50px;
}

.TopRight-50 {
    top: 50px;
    right: 50px;
}

.BottomLeft-30 {
    Bottom: 30px;
    left: 15px
}

.BottomLeft-0 {
    Bottom: 0;
    left: 0
}

.ddvlst {
    width: 500px;
    position: absolute;
    padding: 15px;
    border-radius: 10px 10px;
    border: #fa2de9 solid 2px;
    color: #fa2de9
}

.msgBg {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px 10px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12,minmax(auto,1fr));
    z-index: 5;
}

.innerMsg {
    background-color: rgba(0,0,0,1);
    border-radius: 10px 10px;
    padding: 15px;
    font-size: 14pt;
    font-family: 'NotoSans-Regular';
}

.dropBox {
    background-color: var(--c10);
    border-radius: 10px 10px;
    padding: 15px;
    font-size: 12pt;
    font-family: 'NotoSans-Regular';
}

.dropBoxTr {
    background-color: transparent;
    border-radius: 10px 10px;
    padding: 15px;
    font-size: 12pt;
    font-family: 'NotoSans-Regular';
}

.MapLayer {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    right: 25px;
    top: 25px;
    border-radius: 10px 10px;
    display: grid;
    grid-template-columns: repeat(12,minmax(auto,1fr));
}

    .MapLayer > div {
        grid-column: span 12;
        position: relative
    }

        .MapLayer > div > span {
            color: #dc143c;
            padding: 15px;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 14pt
        }

            .MapLayer > div > span:hover {
                cursor: pointer;
                color: #f0f
            }

.vidDisplay {
    display: none;
    position: absolute;
    top: 0;
    left: 0
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.pos-static {
    position: static;
}

.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.pos-fixed {
    position: fixed;
}

.mainRelative {
    position: relative;
    z-index: 0
}

.mainFixed {
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 0;
}

.subAbsolute {
    position: absolute;
    z-index: 1
}

.margin-15 {
    margin: 15px;
}

.subFixed {
    position: fixed;
    z-index: 0
}

.card-width {
    width: 30%;
}

.card-radius {
    border-radius: 15px 15px;
}

.overflowy-auto {
    overflow-y: auto
}

.overflowx-hidden {
    overflow-x: hidden
}

.packgroundColor {
    background-color: var(--tune);
}

.pad-10 {
    padding: 10px;
}

.pad-15 {
    padding: 15px;
}
.pad-tb-5 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
}
.pad-tb-15 {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
}
.pad-lr-25 {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 25px;
    padding-right: 25px;
}
.pad-lr-15 {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.pad-lr-10 {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.default-column-height {
    height: 200px
}

.calendar-border {
    border: #424141 1px solid !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-vertical-top {
    vertical-align: top;
}

.midify {
    transform: translate(50%, 50%);
}
.box-shadow{
    box-shadow:var(--shadow-elevation-low);
}
.box-shadow-med{
    box-shadow:var(--shadow-elevation-medium);
}
.box-shadow-high{
    box-shadow:var(--shadow-elevation-high);
}
.calendar {
    display: flex;
    flex-flow: column;
}

    .calendar > .calHeadContainer {
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-template-areas: "title title title title title title title" "prev cd cd cd cd cd next";
        align-items: stretch;
        border: none
    }

        .calendar > .calHeadContainer > .title {
            grid-area: title;
            text-align: center;
            padding: 5px;
            border: none
        }
.TitleColor {
    background-color: rgba(11,135,214,100);
}
.TitleColor2 {
    background-color: #b20ab2;
}

#send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 5px 8px;
    padding: 4px 14px;
    border-radius: 16px;
    background-color: var(--primary);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
#send::after {
    content: "Post";
    font-family: var(--notosansb), Arial, sans-serif;
    font-size: 11pt;
}
#send:hover {
    background-color: rgb(4, 81, 134);
    color: #fff;
}

        .calendar > .calHeadContainer > .calDate {
            grid-area: cd;
            text-align: center;
            padding: 15px;
            border: none
        }

    .calendar > .tunCalendar {
        display: flex;
        flex-direction: column
    }

        .calendar > .tunCalendar > .calWeekHeader {
            display: grid;
            grid-template-columns: repeat(7,1fr)
        }

            .calendar > .tunCalendar > .calWeekHeader > div {
                padding: 10px;
                text-align: center;
                vertical-align: middle;
                border: none
            }

        .calendar > .tunCalendar > .calDays {
            display: grid;
            grid-template-columns: repeat(7,1fr)
        }

            .calendar > .tunCalendar > .calDays > div {
                padding: 10px
            }

            .calendar > .tunCalendar > .calDays > .EventDay {
                padding: 10px;
                background-color: #e3e1dd;
                color: #1c1e22
            }

                .calendar > .tunCalendar > .calDays > .EventDay:hover {
                    padding: 10px;
                    border: 1px solid #e3e1dd;
                    background-color: rgba(227,225,221,.5)
                }
.currentCalendarDate{
    background-color:#b20ab2 !important;
    color:#333;
}

.WHeader {
    background-color: var(--tune)
}

.bg-gradient {
    background-image: linear-gradient(to bottom right,var(--c1),var(--c7));
}

.bg-gradientbtn {
    background-color: var(--c4);
    border-radius: 5px 5px;
    padding: 15px;
    font-size: 14pt;
    font-family: NotoSans-Bold;
    border: none;
    color: white;
}

    .bg-gradientbtn:hover {
        background-color: var(--c1);
        cursor: pointer;
    }

.current-bg-gradientbtn {
    background-color: var(--c1);
    border-radius: 5px 5px;
    padding: 15px;
    font-size: 14pt;
    font-family: NotoSans-Bold;
    border: none;
    color: white;
}

    .current-bg-gradientbtn:hover {
        background-color: var(--c4);
        cursor: pointer;
    }

.font-verdana {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.font-helvetica {
    font-family: Arial, Helvetica, sans-serif;
    word-wrap: anywhere;
}

.no-borders {
    border: none;
}

.min-height-100 {
    min-height: 100px;
}

.min-height-300 {
    min-height: 300px;
}

.blended {
    color: lightslategrey;
}

.align-right {
    text-align: right
}

.align-center {
    text-align: center
}
.align-justify{
    text-align:justify;
}
.justify-absolute-right {
    right: 0;
    bottom: 0
}

.OutOfMonth {
    background-color: var(--primarylightert)
}

.prev, .next {
    top: 50%;
    padding: 16px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    transition: .6s ease;
    background-color: #b20ab2 !important;
}

.next {
    grid-area: next;
    text-align: right;
    padding: 15px;
    cursor: pointer;
    background-color:transparent;
}

.prev {
    grid-area: prev;
    text-align: left;
    padding: 15px;
    cursor: pointer;
    background-color: transparent;
}

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,.8)
    }

.ctrlHeight {
    height: 50px
}

.valign-top {
    vertical-align: top
}

.valign-center {
    vertical-align: middle !important;
}

.full-vh-align {
    transform: translate(50%,25%);
}

.valign-bottom {
    vertical-align: bottom
}

.valign-basline {
    vertical-align: text-bottom
}

.txt-align-center {
    text-align: center
}

.txt-italic {
    font-style: italic;
}

.divBtn {
    transition: .6s ease;
    color: #fff
}

    .divBtn:hover {
        color: var(--tune);
        cursor: pointer
    }

.divTBtn {
    transition: .6s ease;
    color: #fff
}

    .divTBtn:hover {
        cursor: pointer
    }

.THeader {
    font-family: var(--lollypoptrun);
    font-size: 12pt;
    text-align: center;
    margin-bottom: 12px
}

.TSubHeader {
    font-family: var(--lollypoptrun);
    font-size: 18pt;
    text-align: center
}
.bg-black{
    background-color:black;
}
.bg-darkgrey{
    background-color:#333;
}
.blend-multi {
    mix-blend-mode: multiply;
}
.blend-over {
    mix-blend-mode: overlay;
}
.blend-diff {
    mix-blend-mode: difference;
}
.blend-lumi {
    mix-blend-mode: luminosity;
}
.blend-hue {
    mix-blend-mode: hue;
}
.blend-clr {
    mix-blend-mode: color;
}
.font-9 {
    font-size: 9pt;
}
.font-10{
    font-size:10pt;
}
.font-12 {
    font-size: 12pt
}

.font-14 {
    font-size: 14pt
}

.font-16 {
    font-size: 16pt
}
.font-24{
    font-size:24pt;
}
.dfont-14 {
    font-size: 14pt;
}

.dfont-12 {
    font-size: 12pt;
}
.lineheight-28 {
    line-height: 28px !important;
}

.word-spacing-2 {
    word-spacing: 2px;
}

.dfont-14 {
    font-size: 14pt
}

.dfont-16 {
    font-size: 16pt
}

.font-18 {
    font-size: 18pt
}

.font-24 {
    font-size: 24pt
}

.font-32 {
    font-size: 32pt !important
}

.font-36 {
    font-size: 36pt !important
}

.notosans {
    font-family: var(--notosans)
}

.notosansb {
    font-family: var(--notosansb)
}
.dnotosansb {
    font-family: var(--notosansb)
}
.card-shadow {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
}

.card-noshadow {
    box-shadow: none;
}

.InputStd {
    height: 25pt
}

.errorI {
    border: 1px solid var(--tune)
}

.callToAction {
    border-radius: 4px 4px;
    background-color: var(--tunegradient);
    font-family: var(--notosansb);
    font-size: 16pt;
    vertical-align: middle;
    padding: 10px
}

    .callToAction:hover {
        background-color: var(--tune);
        cursor: pointer
    }

.reset {
    color: var(--tunegradient);
    border-radius: 4px 4px;
    background-color: transparent;
    border: var(--tunegradient) 2px solid;
    font-family: var(--notosansb);
    font-size: 16pt;
    vertical-align: middle;
    padding: 10px
}

    .reset:hover {
        color: var(--tune);
        border: var(--tune) 2px solid;
        cursor: pointer
    }

.regborder {
    height: 10pt;
    background-color: var(--tunegradient);
    color: #fff;
    font-family: var(--notosansb);
    font-size: 16pt;
    text-align: center;
    vertical-align: middle;
    padding: 15px
}

.margin-bottom-15 {
    margin-bottom: 30pt
}

.current {
    background-color: rgba(255,140,0,.787);
    border: none;
    color: var(--tunegradient);
    text-align: center;
    font-size: 12pt;
    font-family: var(--notosansb);
    padding: 15px
}

.dormant {
    background-color: var(--tunegradient);
    border: none;
    color: #fff;
    text-align: center;
    font-size: 12pt;
    font-family: var(--notosansb);
    padding: 15px
}

    .dormant:hover {
        background-color: var(--tune);
        color: #fff;
        cursor: pointer
    }

.hidden {
    display: none
}

.nonrendered {
    visibility: hidden;
}

.TemporaryClr {
    background-color: #ff7f50
}

.Menue_Item {
    background-color: var(--primary);
    border: 1px solid black;
}

    .Menue_Item:hover {
        background-color: var(--tune);
        cursor: pointer;
    }
    .apspan{
        grid-column:span 10;
    }
    .topArea{
        grid-column:top;
    }
    .bottomArea{
        grid-column:bottom;
    }
    .playerArea{
        grid-area:player;
    }
    .audioList{
        grid-area:audio;
    }
.displayLst {
    visibility: visible;
    height:inherit;
}
.tooltip {
    position: relative;
    /*border-bottom:1px dotted var(--primary);*/
}

    .tooltip .tooltiptxt {
        visibility: hidden;
        width: 120px;
        background-color: var(--c4);
        color: var(--primary);
        text-align: center;
        font-family: var(--notosans);
        font-size: 9pt;
        border-radius: 4px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .tooltip:hover .tooltiptxt {
        visibility: visible;
    }
    .tool-Btn{
        background-color:transparent;
        color:ghostwhite;
        padding:10px;
        border-radius:10px;
    }
    /*Front page*/
.full-Size {
    height: 100%;
    width: 100%;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

.full-height {
    height: 100%;
}

.max-size {
    max-width: 400px;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.pos-fix {
    position: fixed;
}

.flex {
    display: flex;
}

.flex-r {
    flex-direction: row;
}

.flex-c {
    flex-direction: column;
}
.flex-top{
    align-items:flex-start;
}
.flex-middle{
    align-items:center;
}
.flex-bottom{
    align-items:flex-end;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.full-width {
    width: 100%;
}

.imgs {
    width: 100%;
    height: 100%;
}
.padding-left-0{
    padding-left:0;
}
.padding-left-5{
    padding-left:5px;
}
.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}
.padding-25{
    padding:25px;
}
.padding-45 {
    padding: 45px;
}
.background-image {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.logo1 {
    font-family: 'Slave only dreams to be king';
    font-size: 5rem;
    color: #b20ab2;
}

.logo2 {
    font-family: 'Slave only dreams to be king';
    font-size: 5rem;
    color: rgba(11,135,214,100);
}
.logoTxt {
    font-family: 'Slave only dreams to be king';
    font-size: 3rem;
    color: var(--c4);
}
.margin-1 {
    margin-left: auto;
    margin-right: auto;
}

.center-node {
    margin: auto;
}

.hidden {
    position: absolute;
    visibility: hidden;
}
.hide-cat {
    display: none !important;
}
.rcorners {
    border: rgba(255,255,255,.33) .5rem solid;
    border-radius: 50px 50px;
}

.material-icons {
    color: rgba(255,255,255,.33);
}

    .material-icons:hover {
        color: rgba(255,255,255,1);
        cursor: pointer;
    }
    .override-mi-14{
        font-size:14pt !important;
    }
    .override-mi-9{
        font-size:9pt !important;
    }
.logo {
    font-family: 'SLAVE ONLY DREAMS TO BE KING';
    font-size: 54pt;
    color: rgb(4, 81, 134);
}

.sub {
    margin-top:5px;
    font-family: 'Roboto';
    font-size: 1rem;
    color: white;
    text-align:center;
}

.userAccount:hover {
    cursor: pointer;
}
.marbtm-0{
    margin-bottom:0;
    text-align:center;
}
.margintp-60{
    margin-top:60px;
}
.marginAuto {
    margin: auto;
}
.logoU {
    color:rgb(139, 7, 171);
}
.registerBox {
    background-color: rgb(139,7,171);
    color: white;
    height: 60px;
}
.loginBox {
    background-color: rgb(4, 81, 134);
    color: white;
    height: 60px;
}
.inputBox {
    padding: 10px;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    font-size: 1rem;
}
.accountLBtn {
    background-color: rgb(4, 81, 134);
    border: 1px solid rgb(4, 81, 134);
    color: white;
    height: 60px;
}
.accountRBtn {
    background-color: rgb(139,7,171);
    border: 1px solid rgb(139,7,171);
    color: white;
    height: 60px;
}
.accountTxt {
    color: white;
    font-size: 8pt;
}
.accountLMsg {
    color: rgb(4, 81, 134);
    font-size:10pt;
}
.accountRMsg {
    color: rgb(139,7,171);
    font-size: 10pt;
}
.registerWarning {
    background-color: rgb(139,7,171);
    color:white;
    font-family:Roboto;
    font-size:0.75rem;
    padding-top:5px;
    padding-right:0;
    padding-left:5px;
    padding-bottom:5px;
}
    /*End Front page*/
.PostBorder {
    border: 1px solid rgb(139,7,171);
    border-radius:20px;
}
/*.BottomBorder {
    border-left: 1px solid rgb(139,7,171);
    border-right: 1px solid rgb(139,7,171);
    border-bottom: 1px solid rgb(139,7,171);
    border-top: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius:20px;
}*/
.BtmPostBorder {
    border-bottom: 1px solid rgb(139,7,171);
}
.sendBtnContainer{
    display:flex;
    flex-direction:row;
}
.sendBtn {
    width: auto;
    min-height: 30px;
    box-sizing: border-box;
    padding: 4px 14px;
    margin: 5px 8px 0 8px;
    border-radius: 16px;
    color: whitesmoke;
    font-size: 11pt;
    justify-content: center;
    align-items: center;
    background-color: #b20ab2;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
    .sendBtn:hover {
        cursor: pointer;
        background-color: rgb(4, 81, 134);
    }
.postDropDown {
    position: absolute;
    top: 25px;
    right: 5px;
}

    .postDropDown > div {
        background-color: black;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 20px;
        width: 100px;
        color: rgb(128, 126, 126);
        border: 1px solid rgb(128, 126, 126);
    }

        .postDropDown > div:hover {
            cursor: pointer;
            background-color: rgb(139,7,171);
            color: whitesmoke;
        }
.word_management{
    overflow-wrap:break-word;
    hyphens:manual;
}
.profile_card {
    position: absolute;
    height: 200px;
    width: 200px;
    box-shadow: var(--shadow-elevation-medium);
    border-radius:30px;
    z-index:2;
}
    .profile_card > .Heading {
        background-color: #b20ab2;
        height: 20%;
    }
    .profile_card > .Content {
        background-color: #333333;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
        border-top-left-radius:10px;
        border-top-right-radius:30px;
        height:80%;
    }
    .profile_card > .Icons {
        background-color: #b20ab2;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        height: 20%;
    }
.dim-85 {
    opacity: 0.85;
}
.dim-80 {
    opacity: 0.8;
}
.dim-75{
    opacity:0.75;
}
.dim-70 {
    opacity: 0.7;
}
.dim-65 {
    opacity: 0.65
}
.dim-60 {
    opacity: 0.6;
}
.dim-55 {
    opacity: 0.55;
}
.dim-50 {
    opacity: 0.5;
}
.dim-45 {
    opacity: 0.45;
}
.dim-40 {
    opacity: 0.4;
}
.menuFix{
    position:fixed;
    width:100px;
}
.eventCalendarFunc{
    background-color:#333;
}
.autodrop {
    width: 100%;
    padding: 13px;
    border: 1px solid #b20ab2;
    border-radius: 6px;
    margin: 5px;
    background-color: #333;
}
    .autodrop:hover {
        width: 100%;
        padding: 13px;
        border: 1px solid #fff;
        border-radius: 6px;
        margin: 5px;
        background-color: #b20ab2;
        color: #333;
        cursor:pointer;
    }
.autodropsel {
    width: 100%;
    padding: 13px;
    border: 1px solid #fff;
    border-radius: 6px;
    margin: 5px;
    background-color: #b20ab2;
    color:#333;
}
.com:hover{
    cursor:pointer;
    background-color:#b18F6A;
}
.bradius-5-20{
    border-radius:5px 20px 5px 20px;
}
.bradius-10-top{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.bradius
.button{}
.button:hover {
    cursor: pointer;
    background-color:var(--c4);
}
@media only screen and (max-width:600px) {
    .acontainer {
        grid-template-areas:
            "top top top top top top top top top top top top"
            "player player player player player player player player player player player player"
            "audio audio audio audio audio audio audio audio audio audio audio audio"
            "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    }
    .toggleLst {
        visibility: hidden;
        height: 0;
    }
    .displayLst {
        visibility: visible;
        height: inherit;
    }
    .audioLst-item {
        grid-column: span 12;
    }
    .userMenu {
        display: none !important;
    }
    .hide-cat{
        display:none !important;
    }
    .apspan {
        grid-column: span 21;
    }
    .dynamic-span-4 {
        grid-column: span 1;
    }

    .dynamic-span-6 {
        grid-column: span 11;
    }
    .dynamic-span-1 {
        grid-column: span 0;
    }

    .dynamic-span-3 {
        grid-column: span 1;
    }

    .dynamic-span-8 {
        grid-column: span 12;
    }
    .THeader {
        font-size: 14pt
    }

    .TSubHeader {
        font-size: 12pt
    }

    .dfont-14 {
        font-size: 10pt
    }

    .dfont-16 {
        font-size: 12pt
    }

    .current {
        font-size: 10pt
    }

    .dormant {
        font-size: 10pt
    }

    .callToAction {
        font-size: 12pt
    }

    .dyna-span-1 {
        grid-column: span 1
    }

    .dyna-span-2 {
        grid-column: span 2
    }

    .dyna-span-3 {
        grid-column: span 3
    }

    .dyna-span-4 {
        grid-column: span 6
    }

    .dyna-span-5 {
        grid-column: span 5
    }

    .dyna-span-6 {
        grid-column: span 6
    }

    .dyna-span-7 {
        grid-column: span 7
    }

    .dyna-span-8 {
        grid-column: span 8
    }

    .dyna-span-9 {
        grid-column: span 9
    }

    .dyna-span-10 {
        grid-column: span 10
    }

    .dyna-span-11 {
        grid-column: span 11
    }

    .dyna-span-12 {
        grid-column: span 12
    }

    .ddvlst {
        width: 300px
    }

    .autoheight-400 {
        height: 100px;
    }
    .dnotosansb {
        font-family: var(--notosans)
    }
    .dfont-14{
        font-size:10pt;
    }
    .dfont-12{
        font-size:8pt;
    }
}

@media only screen and (min-width:600px) and (max-width:767px) {
    .acontainer {
        grid-template-areas:
            "top top top top top top top top top top top top"
            "player player player player player player player player player player player player"
            "audio audio audio audio audio audio audio audio audio audio audio audio"
            "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    }
    .toggleLst {
        visibility: hidden;
        height: 0;
    }
    .displayLst {
        visibility: visible;
        height: inherit;
    }
    .audioLst-item {
        grid-column: span 6;
    }
    .userMenu {
        display:none !important;
    }
    .hide-cat {
        display: none !important;
    }
    .apspan {
        grid-column: span 21;
    }
    .dynamic-span-4 {
        grid-column: span 2;
    }

    .dynamic-span-6 {
        grid-column: span 10;
    }
    .dynamic-span-1 {
        grid-column: span 0;
    }

    .dynamic-span-3 {
        grid-column: span 2
    }

    .dynamic-span-8 {
        grid-column: span 12;
    }
    .THeader {
        font-size: 14pt
    }

    .TSubHeader {
        font-size: 12pt
    }

    .dfont-14 {
        font-size: 10pt
    }

    .dfont-16 {
        font-size: 10pt
    }

    .current {
        font-size: 10pt
    }

    .dormant {
        font-size: 12pt
    }

    .callToAction {
        font-size: 12pt
    }

    .dyna-span-1 {
        grid-column: span 1
    }

    .dyna-span-2 {
        grid-column: span 2
    }

    .dyna-span-3 {
        grid-column: span 3
    }

    .dyna-span-4 {
        grid-column: span 6
    }

    .dyna-span-5 {
        grid-column: span 5
    }

    .dyna-span-6 {
        grid-column: span 6
    }

    .dyna-span-7 {
        grid-column: span 7
    }

    .dyna-span-8 {
        grid-column: span 8
    }

    .dyna-span-9 {
        grid-column: span 9
    }

    .dyna-span-10 {
        grid-column: span 10
    }

    .dyna-span-11 {
        grid-column: span 11
    }

    .dyna-span-12 {
        grid-column: span 12
    }

    .ddvlst {
        width: 300px
    }

    .autoheight-400 {
        height: 200px;
    }
    .dnotosansb {
        font-family: var(--notosans)
    }
    .dfont-14 {
        font-size: 10pt;
    }

    .dfont-12 {
        font-size: 8pt;
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .acontainer {
        grid-template-areas:
            "top top top top top top top top top top top top"
            "player player player player player player player player player player player player"
            "audio audio audio audio audio audio audio audio audio audio audio audio"
            "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    }
    .toggleLst {
        visibility: hidden;
        height: 0;
    }
    .displayLst {
        visibility: hidden;
        height: 0;
    }
    .audioLst-item {
        grid-column: span 4;
    }
    .userMenu {
        display: none !important;
    }
    .hide-cat {
        display: none !important;
    }
    .apspan {
        grid-column: span 21;
    }
    .dynamic-span-1 {
        grid-column: span 1;
    }

    .dynamic-span-3 {
        grid-column: span 2
    }
    .dynamic-span-4 {
        grid-column: span 2;
    }

    .dynamic-span-6 {
        grid-column: span 10;
    }

    .dynamic-span-8 {
        grid-column: span 10;
    }
    .THeader {
        font-size: 16pt
    }

    .TSubHeader {
        font-size: 14pt
    }

    .dfont-14 {
        font-size: 12pt
    }

    .dfont-16 {
        font-size: 14pt
    }

    .current {
        font-size: 11pt
    }

    .dormant {
        font-size: 11pt
    }

    .callToAction {
        font-size: 14pt
    }

    .dyna-span-1 {
        grid-column: span 1
    }

    .dyna-span-2 {
        grid-column: span 2
    }

    .dyna-span-3 {
        grid-column: span 3
    }

    .dyna-span-4 {
        grid-column: span 4
    }

    .dyna-span-5 {
        grid-column: span 5
    }

    .dyna-span-6 {
        grid-column: span 6
    }

    .dyna-span-7 {
        grid-column: span 7
    }

    .dyna-span-8 {
        grid-column: span 8
    }

    .dyna-span-9 {
        grid-column: span 9
    }

    .dyna-span-10 {
        grid-column: span 10
    }

    .dyna-span-11 {
        grid-column: span 11
    }

    .dyna-span-12 {
        grid-column: span 12
    }

    .ddvlst {
        width: 400px
    }

    .autoheight-400 {
        height: 300px;
    }
    .dnotosansb {
        font-family: var(--notosans)
    }
    .dfont-14 {
        font-size: 12pt;
    }

    .dfont-12 {
        font-size: 10pt;
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .acontainer {
        grid-template-areas:
            "top top top top top top top top top top top top"
            "audio audio audio audio audio audio audio audio audio audio player player"
            "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    }
    .toggleLst {
        visibility: visible;
    }
    .displayLst {
        visibility: hidden;
        height: 0;
    }
    .audioLst-item {
        grid-column: span 3;
    }
    .userMenu {
        display: none !important;
    }
    .hide-cat {
        display: none !important;
    }
    .apspan {
        grid-column: span 21;
    }
    .dynamic-span-1 {
        grid-column: span 1;
    }

    .dynamic-span-3 {
        grid-column: span 2
    }

    .dynamic-span-4 {
        grid-column: span 3;
    }

    .dynamic-span-6 {
        grid-column: span 8;
    }

    .dynamic-span-8 {
        grid-column: span 10;
    }

    .THeader {
        font-size: 18pt
    }

    .TSubHeader {
        font-size: 16pt
    }

    .dfont-14 {
        font-size: 12pt
    }

    .dfont-16 {
        font-size: 14pt
    }

    .current {
        font-size: 12pt
    }

    .dormant {
        font-size: 12pt
    }

    .callToAction {
        font-size: 16pt
    }

    .dyna-span-1 {
        grid-column: span 1
    }

    .dyna-span-2 {
        grid-column: span 2
    }

    .dyna-span-3 {
        grid-column: span 3
    }

    .dyna-span-4 {
        grid-column: span 4
    }

    .dyna-span-5 {
        grid-column: span 5
    }

    .dyna-span-6 {
        grid-column: span 6
    }

    .dyna-span-7 {
        grid-column: span 7
    }

    .dyna-span-8 {
        grid-column: span 8
    }

    .dyna-span-9 {
        grid-column: span 9
    }

    .dyna-span-10 {
        grid-column: span 10
    }

    .dyna-span-11 {
        grid-column: span 11
    }

    .dyna-span-12 {
        grid-column: span 12
    }

    .ddvlst {
        width: 450px
    }

    .autoheight-400 {
        height: 400px;
    }

    .dnotosansb {
        font-family: var(--notosansb)
    }

    .dfont-14 {
        font-size: 12pt;
    }

    .dfont-12 {
        font-size: 10pt;
    }
}

@media only screen and (min-width:1200px) {
    .acontainer {
        grid-template-areas:
            "top top top top top top top top top top top top"
            "audio audio audio audio audio audio audio audio audio audio player player"
            "bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom";
    }
    .toggleLst {
        visibility: visible;
    }
    .displayLst {
        visibility: hidden;
        height: 0;
    }
    .audioLst-item {
        grid-column: span 3;
    }
    .hamburger{
        display:none !important;
    }
    .apspan {
        grid-column: span 10;
    }
    .dynamic-span-1 {
        grid-column: span 1;
    }

    .dynamic-span-3 {
        grid-column: span 3
    }
    .dynamic-span-4 {
        grid-column: span 4;
    }

    .dynamic-span-6 {
        grid-column: span 6;
    }

    .dynamic-span-8 {
        grid-column: span 8;
    }
    .THeader {
        font-size: 24pt
    }

    .TSubHeader {
        font-size: 18pt
    }

    .dfont-14 {
        font-size: 14pt
    }

    .dfont-16 {
        font-size: 16pt
    }

    .current {
        font-size: 12pt
    }

    .dormant {
        font-size: 12pt
    }

    .callToAction {
        font-size: 16pt
    }

    .dyna-span-1 {
        grid-column: span 1
    }

    .dyna-span-2 {
        grid-column: span 2
    }

    .dyna-span-3 {
        grid-column: span 3
    }

    .dyna-span-4 {
        grid-column: span 4
    }

    .dyna-span-5 {
        grid-column: span 5
    }

    .dyna-span-6 {
        grid-column: span 6
    }

    .dyna-span-7 {
        grid-column: span 7
    }

    .dyna-span-8 {
        grid-column: span 8
    }

    .dyna-span-9 {
        grid-column: span 9
    }

    .dyna-span-10 {
        grid-column: span 10
    }

    .dyna-span-11 {
        grid-column: span 11
    }

    .dyna-span-12 {
        grid-column: span 12
    }
    .ddvlst {
        width: 500px
    }

    .autoheight-400 {
        height: 400px;
    }
    .dnotosansb {
        font-family: var(--notosansb)
    }
    .dfont-14 {
        font-size: 14pt;
    }

    .dfont-12 {
        font-size: 12pt;
    }
}

.copilot-credit {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    text-align: center;
}

.copilot-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.copilot-credit a:focus-visible {
    outline: 2px solid #0b87d6;
    outline-offset: 2px;
}

.header-logo {
    position: absolute;
    top: 12px;
    left: clamp(12px, 5vw, 70px);
    width: clamp(80px, 15vw, 106px);
    height: auto;
    z-index: 1;
}

.header-audio-visualizer {
    width: max(1px, calc(100% - clamp(12px, 5vw, 70px) - clamp(80px, 15vw, 106px) - 16px));
    max-width: 1600px;
}

.header-logo .logo1 {
    fill: #b20ab2;
}

.header-logo .logo2 {
    fill: #0b87d6;
}

.header-logo .logoTxt {
    fill: var(--c4);
}

.post-author {
    position: relative;
    min-width: 44px;
}

.post-author-avatar {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.post-author-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.post-author-avatar:focus-visible {
    outline: 2px solid #0b87d6;
    outline-offset: 2px;
}

.post-author > .profile_card {
    top: 44px;
    left: 0;
    height: auto;
}

.post-author-name {
    background: #b20ab2;
    border-radius: 10px 10px 0 0;
    overflow-wrap: anywhere;
}

.post-author > .profile_card > .Content {
    height: auto;
    min-height: 120px;
    border-radius: 0;
}

.post-author > .profile_card > .Icons {
    min-height: 32px;
}

.app-section-controls {
    display: none;
}

@media (max-width: 1023px) {
    body.app-sections-page {
        height: auto;
        min-height: 100%;
    }

    #header {
        position: sticky;
        top: 0;
        z-index: 20;
        box-sizing: border-box;
        background: var(--primary);
    }

    #header #smoke {
        min-width: 0;
        overflow: hidden;
    }

    .app-section-host {
        box-sizing: border-box;
    }

    .app-section-controls {
        display: flex;
        gap: 4px;
        margin-bottom: 8px;
    }

    .app-section-controls button {
        flex: 1;
        min-width: 0;
        padding: 8px 4px;
        border: 1px solid #b20ab2;
        border-radius: 4px;
        background: var(--primary);
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .app-section-controls button[aria-current="true"] {
        background: #b20ab2;
    }

    .app-section-controls button:focus-visible,
    .app-section-viewport:focus-visible {
        outline: 2px solid #0b87d6;
        outline-offset: -2px;
    }

    .app-section-viewport {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .app-section-grid {
        --app-side-width: min(340px, var(--app-viewport-width));
        --app-main-width: calc(var(--app-viewport-width) - 48px);
        width: max-content;
        grid-template-columns: repeat(3, calc(var(--app-side-width) / 3)) 48px repeat(6, calc(var(--app-main-width) / 6)) repeat(3, calc(var(--app-side-width) / 3));
        align-items: start;
    }

    .app-section-grid > * {
        min-width: 0;
    }

    .app-main-panel .word_management,
    .app-main-panel .word_management * {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .app-main-panel .word_management .general-grid,
    .app-main-panel .word_management .post-media-attachment,
    .app-main-panel .word_management div[style*="grid-template-columns"] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .app-main-panel .word_management img,
    .app-main-panel .word_management video {
        height: auto !important;
    }

    .app-main-panel .word_management iframe.ifr {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .app-section-grid > .app-info-panel,
    .app-section-grid > .app-navigation,
    .app-section-grid > .app-contacts-panel {
        scroll-snap-align: start;
    }

    .app-section-grid > .app-navigation .menuFix {
        position: fixed;
        z-index: 2;
    }

    .general-grid-14 > .static-span-1:empty {
        display: none;
    }

    .app-navigation .menuFix {
        width: 40px;
    }

    .app-navigation .menuFix > div > span:not(.material-icons) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px !important;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .editContainer > #tools {
        display: none;
    }

    #send {
        min-width: 0;
        margin: 5px 2px;
        padding: 4px;
        font-size: 18px;
    }

    #send::after {
        display: none;
    }

    .home-landing-content {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        height: calc(100% - 24px);
        box-sizing: border-box;
    }

    .home-landing-content .center-node {
        width: 100%;
        max-width: 400px;
        max-height: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        padding: 14px;
        border-radius: 12px;
        background: rgba(28, 30, 34, .92);
    }

    .home-landing-content .logoTxt {
        font-size: clamp(1.7rem, 8vw, 2.5rem);
    }

    .home-landing-content .margintp-60 {
        margin-top: 18px;
    }
}