/******************** GENERAL ADJUSTMENTS ********************/                                                               
body, html {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
	overflow-x: hidden;
}

/* disable body scroll */
.aeqmodalopendisablescroll {  
    overflow: hidden;
    overscroll-behavior: none; 
}  

@supports (-webkit-touch-callout: none) {
    .aeqmodalopendisablescroll {
        overflow: visible;
        height: auto;
    }
} 

/* all elements */
* {                 
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}

/* font family */
h1, h2, h3, h4, h5, h6, p, a, label, input, textarea, button {
	font-family: 'Montserrat', sans-serif;
}

/* link */ 
a, a:hover {
	text-decoration: none;
}

/* background image */
.background {
	background-size: cover;
	background-position: 50% 50%;
} 

/* fill-parent */ 
.fill-parent {
	width: 100%;
	height: 100%; 
} 

/* aeq user data */
#ThisAeqUserData {
    display: none;
}

/* form val failed */ 
.aeqformvalfailed {
    border: 1px solid red !important;
} 







 
/******************** PAGE LOADER ********************/
#PageLoader {       
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9999999999;
    background-color: #70757f;
    opacity: 1;
    pointer-events: auto;
    transition: 500ms;
}

#PageLoader.deactivate {
    opacity: 0;
    pointer-events: none;
}

/* dvh */
@supports (height: 100dvh) {
    #PageLoader { height: 100dvh; }
}  

/* loader */
#PageLoader img {
    display: block;
    height: 50px;
    position: relative;
    top: calc(50% - 35px);
}








/******************** IN APP ALERTS ********************/ 
#AequusAlerts {                               
    width: 250px;
    height: auto;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999999;
}

/* notif */
#AequusAlerts .aeq-alert {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 15px 0px 15px 65px;
    position: relative;
    top: 30px;
    opacity: 0;
    background-color: rgb(200,200,200);   
    border-radius: 20px; 
}

/* notif icon */
#AequusAlerts .aeq-alert .aeq-alert-icon {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px; 
    border-right: 1px solid white; 
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#AequusAlerts .aeq-alert .aeq-alert-icon img { 
    width: 20px;
    height: auto;
    position: absolute;
    top: calc(50% - 13px);
    left: 15px;
}

/* notif body */
#AequusAlerts .aeq-alert p {
    padding-right: 20px;  
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: white; 
}


 





/******************** PRELOADER ********************/ 
#Preloader {
	display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999999;
    opacity: 0.85;
	background-color: rgba(252,252,252);
}

/* loader */
#Preloader img {
	display: block;
	height: 250px;
	position: relative;
	top: calc(50% - 125px);
    left: 35px;    
}






 
 
/******************** NAVIGATION ********************/   
#Navigation {                                             
	width: 70px;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
    z-index: 999999;
	background-color: #7F838B;   
}

/* user logged in vs not logged in */
#Navigation .userloginstatus { display: none; }
#Navigation .userloginstatus.active { display: block; }

/* element containers */
#Navigation .navelcontainer {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
}

/* not logged in nav */
#NavUserNotLoggedIn {
    top: 12px;
    text-align: center;
}

#NavUserNotLoggedIn img {
    width: 40px;
    height: auto;
    margin-top: 20px;
    padding: 7px;
    opacity: 0.3;
    cursor: pointer;
    transition: 1s;
}

#NavUserNotLoggedIn h2 {
    width: 100px;
    height: 60px;
    margin-top: 50px;
    padding-top: 21px;
    position: relative;
    right: 15px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 20px;
    color: white;
    transform: rotate(90deg);
    transition: 1s;
}

#NavUserNotLoggedIn h2.two {
    margin-top: 45px;
    padding-top: 22px;
    background-color: rgba(0,0,0,0.2);
    border: none;
}

#NavUserNotLoggedIn h2:hover {
    opacity: 0.3;
}

/* post button (logged in nav) */
#Navigation #NavPost {
    width: 60px;
    height: 80px;
    padding: 15px;
    position: absolute;
    top: 5px;
    left: 5px;
    object-fit: contain;
    cursor: pointer;
    background-color: rgba(0,0,0,0.2); 
    border-radius: 20px;
    transition: 1s;
}

#Navigation #NavPost:hover {
    opacity: 0.3; 
}

/* top elements (logged in nav) */
#NavTopElements {
	top: 100px;
	text-align: center; 
}

#NavTopElements img {
	width: 40px;
	height: auto;
	margin-top: 20px;
	padding: 7px;
	opacity: 0.3;
	cursor: pointer;
	transition: 1s;
}

#NavTopElements img:hover {
	opacity: 1;
}

/* indicator */ 
.navindicatorouter {
    width: auto;
    height: auto;
    position: relative;
}

.navindicatorouter .navindicator {
    display: none;
    width: 4px;
    height: 4px;
    position: absolute;
    top: calc(50% + 4px);
    left: calc(50% - 2px);
    background-color: white; 
    border-radius: 100%; 
}

#NavChatIndicator {
    top: calc(50% + 5.5px);
}

.navindicatorouter .navindicator.active {
    display: block;
}

/* bottom elements */
#NavBottomElements {
	bottom: 0px;
}

#NavBottomElements img {
	display: block;
	width: auto;
	height: 25px;
}

#NavBottomElements #NavLogo { 
	position: relative;
	left: -35px;
	bottom: 80px;
	transform: rotate(90deg);
}

#NavBottomElements #NavMenu { 
	margin-bottom: 25px;
	cursor: pointer;
	transition: 1s;
}

#NavBottomElements #NavMenu:hover {
	opacity: 0.3;
}








/******************** POST CREATION MODAL ********************/   
#PostCreationModal {                                    
    display: none;             
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99998;
    opacity: 0;
    background-color: rgba(0,0,0,0.9);
    transition: 1s;
}

/* backdrop */
#PostCreationModalBackdrop {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    touch-action: none;
}

/* inner */
#PostCreationModalInner {
    width: 400px;
    height: calc(100vh - 100px);
    padding: 0px 50px 45px;
    position: absolute; 
    top: 50px; 
    left: -400px; 
    z-index: 2;
    overflow: hidden; 
    background-color: #70757f; 
    border-radius: 20px; 
    transition: 400ms; 
}

#PostCreationModalInner.active {
    left: 120px;
}

/* dvh */
@supports (height: 100dvh) {
    #PostCreationModal { height: 100dvh; }
    #PostCreationModalBackdrop { height: 100dvh; }
    #PostCreationModalInner { height: calc(100dvh - 100px); }  
}

/* header - container */
#PostCreationModalInner #PostCreationModalHeader {
    width: calc(100% - 100px);
    height: auto;
    padding: 40px 0px 40px;
    position: absolute;
    top: 0px;
    left: 50px;
    z-index: 3;
    background-color: #70757f;
}

/* header - h1 */
#PostCreationModalInner #PostCreationModalHeader h1 {
    padding-bottom: 5px;
    font-size: 25px;
    font-weight: 900;
    color: white;
    border-bottom: 1px solid white;
}

/* header - submit button */
#PostCreationModalInner #PostCreationModalHeader #SubmitPostCreationForm {
    width: 80px;
    height: 25px;
    padding-top: 4.5px;
    position: absolute;
    top: 41px; 
    right: 35px;
    cursor: pointer; 
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: black;
    border: 1px solid black; 
    border-radius: 15px;
    transition: 1s;
}

#PostCreationModalInner #PostCreationModalHeader #SubmitPostCreationForm:hover {
    opacity: 0.2;
}

/* header - close */
#PostCreationModalInner #ClosePostCreationModal {
    width: 25px;
    height: 25px;
    padding: 7px;
    position: absolute;
    top: 41px;
    right: 0px; 
    cursor: pointer;
    background-color: white;
    border-radius: 100%;
    transition: 500ms; 
}

#PostCreationModalInner #ClosePostCreationModal:hover {
    opacity: 0.5;
    transform: rotate(360deg);
}

/* scroll container */
#PostCreationModalInnerScroll {
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior: contain;  
}

/* form */
#PostCreationForm {
    width: 100%;
    height: auto;
    padding-bottom: 100px;
}

/* input headers */
#PostCreationModalInner h2 {
    margin-top: 70px;
    font-size: 20px;
    font-weight: 400;
    color: black;
}

#PostCreationModalInner h2.pcid-h2-first {
    margin-top: 155px;
}

#PostCreationModalInner h2 strong {
    font-weight: 900;
}

#PostCreationModalInner h2 span {
    padding-right: 10px;
    color:  rgba(0,0,0,0.2);
}

#PostCreationModalInner h3 {
    margin-top: 4px;
    margin-bottom: 35px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 300;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* upload image area */
#PostCreationModalInner #create-post-image-display {
    width: 100%;
    height: auto;
    margin-top: -5px;
}

#PostCreationModalInner .pcid-el {
    display: inline-block;
    width: 33.33333%;
    height: 100px;
    float: left;
    vertical-align: top;
    border: 3px solid #70757f;
    border-radius: 15px;
}

/* upload image area - file upload */
#PostCreationModalInner #create-post-file-upload {
    background-color: rgba(255,255,255,0.15);
    transition: 1s;
}
 
#PostCreationModalInner #create-post-file-upload label {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 31px;
    cursor: pointer;
    text-align: center;
    font-size: 12px; 
    font-weight: bold;
    color: white;
    border-radius: 15px;
}

#PostCreationModalInner #create-post-file-upload:hover {
    background-color: black;
}

/* upload image area - images */
#PostCreationModalInner #create-post-image-display img {
    object-fit: cover;       
}

/* upload image area - clear float */
#PostCreationModalInner #pcid-clear-float {
    width: 100%;
    height: 1px;
    clear: both;
}

/* text area */
#PostCreationModalInner textarea {
    width: 100%;
    height: 100px;
    padding: 10px;  
    resize: none;
    background-color: transparent;
    font-size: 12px;
    font-weight: 300;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    outline: none;
    transition: 1s;
}

#PostCreationModalInner textarea:focus {
    border: 1px solid white;
}

/* sellable inputs */    
#PostCreationModalInner #PostCreationModalSellable {
    display: none;
}

#PostCreationModalInner #PostCreationModalSellableInputs {
    display: none;
}

#PostCreationModalInner #PostCreationModalSellable.active,
#PostCreationModalInner #PostCreationModalSellableInputs.active {
    display: block;
}

/* sellable input outer */
#PostCreationModalInner #PostCreationModalSellable .wc-input-outer { 
    display: inline-block; 
    width: 100%;
    height: auto;
    position: relative;
    float: left;
}

#PostCreationModalInner #PostCreationModalSellable .wc-input-outer.col-1-2 { 
    width: calc(50% - 5px); 
}

#PostCreationModalInner #PostCreationModalSellable .wc-input-outer.full {
    display: block;
    width: 100%;
    float: none;
}

/* sellable btns */
#PostCreationModalInner #PostCreationModalSellable .pcm-sellable-btn {
    width: 100%;
    height: 35px;
    padding-top: 9px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid white;
    border-radius: 17.5px;
    color: white;
    transition: 1s;
}

#PostCreationModalInner #PostCreationModalSellable .pcm-sellable-btn.active {
    background-color: white;
    color: black;
}

#PostCreationModalInner #PostCreationModalSellable .pcm-sellable-btn:not(.active):hover {
    opacity: 0.3;
}

/* sellable label */
#PostCreationModalInner #PostCreationModalSellable label {
    display: block;
    width: 100%;
    padding-bottom: 5px;
    padding-left: 2px;
    text-align: left;
    font-size: 10px; 
    font-weight: 400;  
    color: rgba(0,0,0,0.5);
}

/* sellable input */
#PostCreationModalInner #PostCreationModalSellable input {
    width: 100%;
    height: 35px; 
    padding-left: 10px;  
    background-color: transparent;
    font-size: 12px;   
    font-weight: 300;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 17.5px;
    transition: 1s;
} 

#PostCreationModalInner #PostCreationModalSellable input:focus {
    outline: none;
    border: 1px solid white;
}

/* sellable important notice */
#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice {
    padding: 10px 0px 10px;
    border-top: 1px solid rgba(255,255,255,0.2); 
    border-bottom: 1px solid rgba(255,255,255,0.2); 
}

#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice p {
    font-size: 12px;
    font-weight: 300;
    color: white;
}

#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice p strong {
    padding-right: 5px; 
    font-weight: bold;  
}

#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice p.first {
    margin-bottom: 10px;
} 

/* sellable margins */
#PostCreationModalInner #PostCreationModalSellable .wc-mar-bottom { margin-bottom: 28px; }
#PostCreationModalInner #PostCreationModalSellable .wc-mar-right { margin-right: 10px; }  

/* sellable clear float */
#PostCreationModalInner #PostCreationModalSellable .pcm-product-clear-float {
    width: 100%;
    height: 1px;
    clear: both;
}
 







/******************** POST MODAL *********************/                                                                                                                           
#PostModal {                                                         
	display: none;                                                                                                                                                                                                                                
	width: calc(100% - 70px);
	height: 100vh; 
    position: fixed;
    top: 0px;
    left: 70px;
    z-index: 999;
	overflow: hidden;
    opacity: 0; 
    background-color: rgb(112,117,127);   
    transition: 750ms;
}

/* dvh */
@supports (height: 100dvh) {
    #PostModal { height: 100dvh; }
}

/* layout */
#PostModal .layout { 
    height: 100%;
    position: absolute;
    top: 0px;
}

/* close post */
#PostModal #PostModalClosePostOuter {
    width: calc(100% - 460px);
    height: 60px;
    position: absolute;
    top: 0px;
    left: 30px;
    z-index: 3;
    background-color: rgb(112,117,127);   
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalClosePost {
    width: 40px;
    height: 40px;
    padding-top: 12px;
    position: absolute;
    top: 10px;
    left: calc(50% - 20px);
    cursor: pointer;
    background-color: white;  
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    border-radius: 100%;
    color: black;
    transition: 1s;   
}

#PostModal #PostModalClosePost:hover {
    opacity: 0.5;
}

/* images */    
#PostModal #PostModalImages {
    width: calc(100% - 400px);
    left: 0px;
    overflow-y: scroll; 
    border-right: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalImages #PostModalImagesInner {
    width: 100%;
    height: auto;
    padding: 30px;
    position: relative;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img {
    width: 100%;
    height: auto;
    margin: 30px 0px 30px; 
    position: relative;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img.pmi0 {
    margin-top: 60px;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* magnify */
#PostModal #PostModalImages #PostModalImagesInner .pmi-img .pmi-magnify {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 20px);
    z-index: 2;
    opacity: 0;
    cursor: pointer;
    background-color: rgba(0,0,0,0.5);
    border-radius: 100%;
    transition: 500ms;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img .pmi-magnify img {
    display: block;
    width: auto;
    height: 12px;
    position: relative;
    top: 14px;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img .pmi-magnify:hover {
    background-color: black;
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img:hover .pmi-magnify {
    opacity: 1;
}

/* scroll to see more */ 
#PostModal #PostModalScrollIndicator {
    width: 140px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 270px);   
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.5);
    border-radius: 20px;
    transition: 500ms; 
}

#PostModal #PostModalScrollIndicator img {
    display: inline-block;
    width: auto;
    height: 10px;
    position: absolute;
    top: 15px;
    left: 20px;
}

#PostModal #PostModalScrollIndicator span {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    word-spacing: 1px;
}

#PostModal #PostModalScrollIndicator.active {
    opacity: 1;
}

/* post info */
#PostModal #PostModalPostInfo { 
    width: 400px;
    right: 0px; 
    padding: 30px;
}

/* post opening */
#PostModal #PostModalPostInfo #PostOpening {
    width: 100%;  
    height: auto; 
    position: relative;
}

/* post profile */ 
#PostModal #PostModalPostInfo #PostProfile {
    width: 100%;
    height: 70px;
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostProfile:hover {
    opacity: 0.5;
}

#PostModal #PostModalPostInfo #PostProfile .profile-el {
    display: inline-block;
    height: 100%;
    float: left;
    vertical-align: top;
}

#PostModal #PostModalPostInfo #PostProfile img {
    width: 70px;
    object-fit: cover;
    border-radius: 100%;
}

#PostModal #PostModalPostInfo #PostProfile img.placeholder {
    padding: 17px;
    background-color: rgba(255,255,255,0.2);
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName {
    width: calc(100% - 70px);
    padding-top: 9px;
    padding-left: 30px;  
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName h1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: bold;
    color: white;  
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName h2 {
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);  
}

/* post description */
#PostModal #PostModalPostInfo #PostDescription {
    width: 100%;
    margin-top: 30px;
    padding-top: 30px; 
    font-size: 15px;
    font-weight: 300; 
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* post stats */ 
#PostModal #PostModalPostInfo #PostStats {
    width: 100%;
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative; 
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalPostInfo #PostStats p {
    word-spacing: 2px;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}

#PostModal #PostModalPostInfo #PostStats p span.likes {
    cursor: pointer; 
    transition: 1s; 
}

#PostModal #PostModalPostInfo #PostStats p span.likes:hover {
    opacity: 0.5;
}

#PostModal #PostModalPostInfo #PostStats p span.divider {
    padding: 0px 15px;
    position: relative;
    bottom: 1px;
}

#PostModal #PostModalPostInfo #PostStats p span strong {
    color: white;
}

/* post stats - likes modal */     
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal {
    width: 100%;
    height: 170px;
    position: absolute;
    bottom: -190px;
    z-index: 3;
    opacity: 0;  
    pointer-events: none;
    background-color: #c8c8c8;
    border-radius: 20px;
    transition: 500ms;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal.active {
    bottom: -170px;
    opacity: 1;
    pointer-events: auto; 
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal #PostStatsLikesModalInner {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal #PostStatsLikesModalInnerElements {
    width: 100%;
    height: 100%;
    padding: 30px 20px 50px; 
    overflow: scroll; 
}

/* post stats - likes modal - close */    
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal h2 {
    width: 30px;
    height: 30px;
    padding-top: 7.5px;
    position: absolute;
    top: -15px;
    left: calc(50% - 15px);
    z-index: 2;
    cursor: pointer;
    background-color: black;
    text-align: center;
    font-size: 12px;
    border: 1px solid black;
    border-radius: 100%;
    color: #c8c8c8;
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal h2:hover {
    background-color: #c8c8c8;  
    color: black;
}

/* post stats - likes modal - anchor */    
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a {
    display: inline-block;
    width: calc(33.333333% - 13.3333333px);
    height: auto;
    margin-bottom: 20px;
    padding: 30px 10px 30px;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    border: 1px solid rgb(100,100,100);
    border-radius: 20px;
    color: rgb(100,100,100);
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a:nth-child(3n + 1),
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a:nth-child(3n + 2) {
    margin-right: 20px;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a:hover {
    opacity: 0.3;
}

/* post stats - likes modal - clear float */    
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal #PostStatsLikesModalClearFloat {
    width: 100%;
    height: 1px;
    clear: both;
}   

/* post controls */
#PostModal #PostModalPostInfo #PostControls {
    width: 100%;
    height: 80px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalPostInfo #PostControls img {
    width: auto;
    height: 20px;
    position: absolute;
    top: 30px;
    opacity: 0.3;
    cursor: pointer;
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostControls img:hover,
#PostModal #PostModalPostInfo #PostControls img.active {
    opacity: 1;
}

#PostModal #PostModalPostInfo #PostControls img.like {
    left: 1px;
}

#PostModal #PostModalPostInfo #PostControls img.comment {
    left: calc(50% - 11px);
}

#PostModal #PostModalPostInfo #PostControls img.save {
    right: 1px;   
}

/* comment form */          
#PostModal #PostCommentForm {
    display: none;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: -60px;
    z-index: 2;
    opacity: 0;
    background-color: rgb(112,117,127);   
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: 500ms;
}

#PostCommentForm h2 {
    width: 40px;
    height: 40px;
    padding-top: 12px;
    position: absolute;
    top: 10px;
    left: 0px;
    z-index: 2;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    color: black;
    transition: 1s;
}

#PostModal #PostCommentForm img {
    width: 20px;
    height: 20px;
    padding: 2px;
    position: absolute;
    top: 20px;
    right: 9px;
    z-index: 2;
    cursor: pointer;
    background-color: rgb(112,117,127);   
    transition: 1s;
}

#PostCommentForm h2:hover,
#PostCommentForm img:hover {
    opacity: 0.3;
}

#PostModal #PostCommentForm input {
    width: calc(100% - 50px);
    height: 40px; 
    padding-left: 10px;  
    padding-right: 35px;
    position: absolute;
    top: 10px;
    right: 0px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 300;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    transition: 1s;
}

#PostModal #PostCommentForm input::placeholder {
    color: white;
}

#PostModal #PostCommentForm input:focus {
    outline: none;
    border: 1px solid white;
}

/* comments layout and outer */
#PostModal #PostModalPostInfo .comment-layout {
    width: 100%;
    height: auto;
}

#PostModal #PostModalPostInfo #PostCommentsOuter { 
    overflow-y: scroll;      
    overflow-x: hidden;
}

/* inner comment */   
#PostModal #PostModalPostInfo #PostComments .comment {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalPostInfo #PostComments .comment .main, 
#PostModal #PostModalPostInfo #PostComments .comment .reply {
    margin-top: 30px;
    position: relative;
}

/* comment profile img */
#PostModal #PostModalPostInfo #PostComments .comment img.comment-profile-img {
    display: inline-block;
    width: 40px;
    height: 40px;
    opacity: 0.5;
    vertical-align: top;
    object-fit: cover;
    border-radius: 100%;
}

#PostModal #PostModalPostInfo #PostComments .comment img.comment-profile-img.placeholder {
    padding: 10px;
    background-color: rgba(255,255,255,0.2);
}

/* comment content */
#PostModal #PostModalPostInfo #PostComments .comment .content {
    display: inline-block;
    width: calc(100% - 60px);
    height: auto;
    margin-left: 10px;
    vertical-align: top;
}

#PostModal #PostModalPostInfo #PostComments .comment .content h1 {
    margin-top: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
    font-size: 12px;
    font-weight: bold;
    color: black; 
}

#PostModal #PostModalPostInfo #PostComments .comment .content h1 a {
    color: black;
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostComments .comment .content h1 a:hover {
    opacity: 0.3;
}
 
#PostModal #PostModalPostInfo #PostComments .comment .content h1 span.dot {
    padding: 0px 5px;
    font-weight: 400;
}

#PostModal #PostModalPostInfo #PostComments .comment .content p {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
}

/* comment controls */
#PostModal #PostModalPostInfo #PostComments .comment .content .controls img {
    display: inline-block;
    width: auto;
    height: 15px;
    margin-top: 15px;
    margin-right: 20px;
    opacity: 0.2;
    cursor: pointer;
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostComments .comment .content .controls img.l.active, 
#PostModal #PostModalPostInfo #PostComments .comment .content .controls img:hover {
    opacity: 1;
}

#PostModal #PostModalPostInfo #PostComments .comment .content .controls p {
    display: inline-block;
    position: relative;
    bottom: 4px;
    right: 15px;
    opacity: 0.3;
    font-size: 10px;
    font-weight: 500;
    color: white;
}

/* reply connector and @ */
#PostModal #PostModalPostInfo #PostComments .comment .reply-connector {
    width: 1px;
    position: absolute;
    left: 20px;  
    background-color: rgba(255,255,255,0.1); 
}
 
#PostModal #PostModalPostInfo #PostComments .comment .reply p span {
    padding-right: 5px;
    opacity: 0.4;
}

/* no comment header */
#PostModal #PostModalPostInfo #PostComments #NoCommentsHeader {
    width: 100%;
    height: auto;
    margin-top: 100px;
    opacity: 0.5;
    text-align: center;
    word-spacing: 2px;
    line-height: 1.3;
    font-size: 18px;
    color: black;
}
  
/* post modal sellable area */                  
#PostModal #PostModalPostInfo #PostSellable {
    display: none;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModal #PostModalPostInfo #PostSellable.active {
    display: block;
}

#PostModal #PostModalPostInfo #PostSellable h4 {
    display: inline-block;
    width: calc(50% - 10px);
    height: 40px;
    margin-top: 20px;
    padding-top: 9px;
    float: left;
    text-align: center;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid white;
    color: white;
}

#PostModal #PostModalPostInfo #PostSellable h4.checkout {
    margin-left: 20px;
    cursor: pointer;
    background-color: white;
    color: rgb(112,117,127);
    transition: 1s;
}

#PostModal #PostModalPostInfo #PostSellable h4.checkout:hover {
    background-color: black; 
    border: 1px solid black;  
    color: white;
}

#PostModal #PostModalPostInfo #PostSellable h4.soldout {
    pointer-events: none;
}








/******************** POST MODAL CHECKOUT *********************/        
#PostModalCheckout {     
    width: 400px;
    height: 100%;
    padding: 0px 30px;
    position: fixed;
    top: 0px;
    right: -400px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    background-color: rgb(112,117,127);   
    transition: 400ms;
}

#PostModalCheckout.active {
    right: 0px;
    opacity: 1; 
    pointer-events: auto;
}

/* checkout header */
#PostModalCheckout #PostModalCheckoutHeader {
    width: 100%;
    height: 60px;
    position: relative;
    background-color: rgb(112,117,127);   
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#PostModalCheckout #PostModalCheckoutHeader img {
    width: 40px;
    height: 40px;
    padding: 13px;
    padding-left: 14px;
    position: absolute;
    top: 10px;  
    left: calc(50% - 20px);
    object-fit: cover;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 100%;
    transition: 1s; 
}

#PostModalCheckout #PostModalCheckoutHeader img:hover {
    opacity: 0.5;
}

/* checkout inner */
#PostModalCheckout #PostModalCheckoutInner {
    width: 100%;
    height: calc(100% - 60px);
    padding-bottom: 100px;
    overflow-y: scroll;
    text-align: left;
}

/* checkout inner prod overview */
#PostModalCheckout #PostModalCheckoutInner h1 {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 900;
    color: white;
    line-height: 1;
}

#PostModalCheckout #PostModalCheckoutInner h1.more-mar-top {
    margin-top: 30px;
}

#PostModalCheckout #PostModalCheckoutInner h2 {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}

/* prod overview & summary cols */
#PostModalCheckout #PostModalCheckoutInner .pmci-col {
    width: calc(33.3333333333% - 7px);
    height: auto;
    margin-top: 30px;
    float: left;
    text-align: center;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os {
    width: calc(50% - 5px) !important;
    margin-top: 0px !important;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.mar-right {
    margin-right: 10.5px;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.mar-right {
    margin-right: 10px !important;
}

/* prod overview col text */
#PostModalCheckout #PostModalCheckoutInner .pmci-col h3 {
    font-size: 10px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);   
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col h4 {
    width: 100%;
    height: 40px;
    margin-top: 5px;
    padding-top: 12px;
    background-color: rgba(255,255,255,0.15);
    font-size: 13px;
    font-weight: bold;
    border-radius: 10px;
    color: white;
}

/* post prod overview headers */  
#PostModalCheckout #PostModalCheckoutInner h5 {
    margin-top: 60px;
    line-height: 1; 
    font-size: 20px;
    font-weight: 900;
    color: black;
}

#PostModalCheckout #PostModalCheckoutInner p {
    margin-top: 5px;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 300;
    color: black;
}

/* input outer */
#PostModalCheckout #PostModalCheckoutInner .wc-input-outer { 
    display: inline-block; 
    width: 100%;
    height: auto;
    position: relative;
    float: left;
}

#PostModalCheckout #PostModalCheckoutInner .wc-input-outer.col-1-2 { 
    width: calc(50% - 5px); 
}

#PostModalCheckout #PostModalCheckoutInner .wc-input-outer.col-1-3 {
    width: calc(33.3333333% - 6.66666666667px);
}

#PostModalCheckout #PostModalCheckoutInner .wc-input-outer.full {
    display: block;
    width: 100%;
    float: none;
}

/* input label */
#PostModalCheckout #PostModalCheckoutInner label {
    display: block;
    width: 100%;
    padding-bottom: 5px;
    padding-left: 2px;
    text-align: left;
    font-size: 10px;
    font-weight: 400;  
    color: rgba(0,0,0,0.5);
}

/* sellable input */
#PostModalCheckout #PostModalCheckoutInner input {
    width: 100%;
    height: 35px; 
    padding-left: 10px;  
    background-color: transparent;
    font-size: 12px;
    font-weight: 300;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 17.5px;
    transition: 1s;
} 

#PostModalCheckout #PostModalCheckoutInner input:focus {
    outline: none;
    border: 1px solid white;
}

/* sellable margins */
#PostModalCheckout #PostModalCheckoutInner .wc-mar-bottom { margin-bottom: 30px; }
#PostModalCheckout #PostModalCheckoutInner .wc-mar-right { margin-right: 10px; }  

/* order summary */  
#PostModalCheckout #PostModalCheckoutInner .pmci-os-p.os-prod {
    margin-bottom: 0px !important;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-os-p strong {
    padding-right: 10px;
    font-weight: bold;
}

/* order summary - qty adjust */
#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span {
    display: inline-block;
    vertical-align: top;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span.val {
    padding: 0px 40px;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span.qtyadjust {
    width: 20px;
    height: 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100%;
    transition: 1s;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span.qtyadjust.plus {
    padding-top: 1px;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span.qtyadjust:hover {
    opacity: 0.2;
}

/* stripe card fields */    
#PostModalCheckout #PostModalCheckoutInner #pmci-card-element {
    height: 35px; 
    margin-bottom: 35px;       
    padding: 10px; 
    border: 1px solid rgba(255,255,255,0.3); 
    border-radius: 17.5px; 
}

/* pay now btn */
#PostModalCheckout #PostModalCheckoutInner .pmci-bi-paynow {
    height: 35px;
    padding-top: 9px;
    cursor: pointer;
    background-color: white !important;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    border-radius: 17.5px;
    color: rgb(112,117,127);
    transition: 1s;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-bi-paynow:hover {
    opacity: 0.3;
}

#PostModalCheckout #PostModalCheckoutInner .pmci-bi-paynow .pmci-bi-divider {
    padding: 0px 10px;
    position: relative;
    top: -1px;
    font-weight: 300;
}

/* pmci divider */
#PostModalCheckout #PostModalCheckoutInner .pmci-divider {
    width: 100%;
    height: 1px;
    margin-top: 60px;  
    background-color: rgba(255,255,255,0.1);
}

/* pmci clear float */
#PostModalCheckout #PostModalCheckoutInner .pmci-clear-float {
    width: 100%;
    height: 1px;
    clear: both;
}

/* confirmation window */ 
#PostModalCheckout #PostModalCheckoutConfirmation {
    width: 100%;
    height: calc(100% - 60px);
    padding: 30px;
    padding-bottom: 100px;
    position: absolute;
    top: 60px;
    right: -400px; 
    z-index: 2;
    opacity: 0;
    overflow-y: scroll;
    pointer-events: none;
    background-color: rgb(112,117,127);   
    text-align: left;
    transition: 400ms;
}

#PostModalCheckout #PostModalCheckoutConfirmation.active {
    right: 0px;
    opacity: 1; 
    pointer-events: auto;
}

/* conf window text */
#PostModalCheckout #PostModalCheckoutConfirmation h1 {  
    line-height: 1; 
    font-size: 20px;
    font-weight: 900;
    color: white;
}

#PostModalCheckout #PostModalCheckoutConfirmation h2 {
    margin-top: 15px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}

#PostModalCheckout #PostModalCheckoutConfirmation h2 strong {
    padding-right: 5px;
    font-weight: 700;
}

/* conf window dividers */
#PostModalCheckout #PostModalCheckoutConfirmation .pmcc-divider {
    width: 100%;
    height: 1px;
    margin: 60px auto 60px;
    background-color: rgba(255,255,255,0.1);
}

/* conf window btns */
#PostModalCheckout #PostModalCheckoutConfirmation a {
    width: calc(50% - 5px);
    height: 35px;
    padding-top: 9px;
    float: left;
    cursor: pointer;
    background-color: black;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    outline: none;
    border: 1px solid black;
    border-radius: 17.5px;
    color: rgb(112,117,127);
    transition: 1s;
}

#PostModalCheckout #PostModalCheckoutConfirmation a.two {
    margin-left: 10px; 
    background-color: transparent !important; 
    color: black;
}

#PostModalCheckout #PostModalCheckoutConfirmation a:hover {
    opacity: 0.3;
}








/******************** MESSAGE MODAL ********************/   
#MessageModal {                                                                                  
    display: none;             
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99998; 
    opacity: 0;
    background-color: rgba(0,0,0,0.9);
    transition: 1s;
}

/* backdrop */
#MessageModalBackdrop {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    touch-action: none;
}

/* inner */
#MessageModalInner {
    width: 400px;
    height: calc(100vh - 100px);
    padding: 0px 50px 45px;
    position: absolute; 
    top: 50px; 
    left: -400px; 
    z-index: 2;
    overflow: hidden; 
    background-color: #70757f; 
    border-radius: 20px; 
    transition: 400ms; 
}

#MessageModalInner.active {
    left: 120px;
}

/* dvh */
@supports (height: 100dvh) {
    #MessageModal { height: 100dvh; }
    #MessageModalBackdrop { height: 100dvh; }
    #MessageModalInner { height: calc(100dvh - 100px); }  
}

/* header - container */
#MessageModalInner #MessageModalHeader {
    width: calc(100% - 100px);
    height: auto;
    padding: 40px 0px 40px;
    position: absolute;
    top: 0px;
    left: 50px;
    z-index: 3;
    background-color: #70757f;
}

/* header - h1 */
#MessageModalInner #MessageModalHeader h1 {
    padding-bottom: 5px;
    font-size: 25px;
    font-weight: 900;
    color: white;
    border-bottom: 1px solid white;
}

/* header - close */
#MessageModalInner #CloseMessageModal {
    width: 25px;
    height: 25px;
    padding: 7px;
    position: absolute;
    top: 41px;
    right: 0px;
    cursor: pointer;
    background-color: white;
    border-radius: 100%;
    transition: 500ms; 
}

#MessageModalInner #CloseMessageModal:hover {
    opacity: 0.5;
    transform: rotate(360deg);
}

/* scroll container */
#MessageModalInnerScroll {
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior: contain;  
}

/* inner content */
#MessageModalInnerContent {
    width: 100%;
    height: auto;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative; 
}

/* msg thread outer */ 
#MessageModalInnerContent .message-thread-outer {
    width: 100%;
    height: 60px;
    margin-top: 50px;
    position: relative;
    cursor: pointer;
    transition: 1s;
}

#MessageModalInnerContent .message-thread-outer:hover {
    opacity: 0.5;
}

/* msg outer thread deleted */
#MessageModalInnerContent .message-thread-outer.msgisdeleted {
    position: absolute;
    top: 0px;
    opacity: 0;   
    pointer-events: none;  

}

/* msg thread outer - img */
#MessageModalInnerContent .message-thread-outer img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 100%;
}

#MessageModalInnerContent .message-thread-outer img.placeholder {
    padding: 18px;  
    background-color: rgba(255,255,255,0.1);
}

/* msg thread outer - content */
#MessageModalInnerContent .message-thread-outer .mto-content {
    width: calc(100% - 80px);
    height: 60px;
    padding-top: 7px;
    position: absolute;
    top: 0px;
    left: 80px;
}

#MessageModalInnerContent .message-thread-outer .mto-content h1 {
    width: 100%;
    height: auto;
    padding-right: 100px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    font-size: 13px;
    font-weight: bold;
    color: black;
}

#MessageModalInnerContent .message-thread-outer .mto-content h1 .mto-user {
    padding-left: 10px;
}

#MessageModalInnerContent .message-thread-outer .mto-content h1 .mto-date {
    position: absolute;
    bottom: 1px;
    right: 10px;
    font-size: 10px;
    font-weight: 300; 
    color: rgb(60,60,60);
}

#MessageModalInnerContent .message-thread-outer .mto-content p {
    margin-top: 7px;
    padding-top: 7px;
    padding-right: 40px;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 300;
    color: rgb(60,60,60);
    border-top: 1px solid rgba(255,255,255,0.1);
}

#MessageModalInnerContent .message-thread-outer .mto-content .mto-indicator {
    width: 8px;
    height: 8px;
    opacity: 0.1; 
    background-color: white;
    border-radius: 100%;
    position: absolute;
    right: 10px;
    bottom: 11px;

}

#MessageModalInnerContent .message-thread-outer .mto-content .mto-indicator.active {
    opacity: 1;
}

/* message thread inner modal */
#MessageModalThread {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 400px;
    z-index: 5;
    background-color: white;
    transition: 500ms;
}

#MessageModalThread.active {
    left: 0px;
}

/* message thread inner modal - header */
#MessageModalThread #MessageModalThreadHeader {
    width: calc(100% - 100px);
    height: 85px;
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 2;
    border-bottom: 1px solid rgb(225,225,225);
}

/* message thread inner modal - header - user info */
#MessageModalThread #MessageModalThreadHeader #MessageModalThreadUser {
    width: 50%;
    height: 65px;
    position: absolute;
    top: 0px;
    left: 25%;  
    z-index: 1;
    cursor: pointer;
    text-align: center;
    transition: 1s;
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadUser:hover {
    opacity: 0.3; 
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadUser img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100%;  
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadUser img.placeholder {
    padding: 15px;   
    background-color: rgba(0,0,0,0.1);
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadUser h1 {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
    font-size: 8px;
    font-weight: 400;
    color: rgb(200,200,200);
}

/* message thread inner modal - header - btns */
#MessageModalThread #MessageModalThreadHeader .mmth-btn {
    width: 30px;
    height: 30px;
    padding: 10px;
    position: absolute;
    top: 10px;
    z-index: 2;
    object-fit: contain;
    cursor: pointer;
    border: 1px solid rgb(225,225,225);
    border-radius: 100%;
    transition: 500ms;
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadClose {
    left: 0px;
}

#MessageModalThread #MessageModalThreadHeader #MessageModalThreadDelete {
    padding: 0px; 
    right: 0px;
}

#MessageModalThread #MessageModalThreadHeader .mmth-btn:hover {
    opacity: 0.3; 
    transform: rotate(360deg);
}

/* message thread - inner message container */
#MessageModalThread #MessageModalThreadInner {
    width: calc(100% - 100px);
    height: calc(100% - 215px);
    padding-top: 40px;
    position: absolute;
    top: 105px;
    left: 50px;
    z-index: 1;
    overflow-y: scroll;
    overflow-x: hidden;   
}

#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages {
    width: 100%;
    height: auto;
    padding-bottom: 150px;
}

/* message thread - inner message text */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-clearfloat {
    width: 100%;
    height: 1px;
    clear: both;
}

/* message thread - inner message text - date */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-date {
    width: 100%;
    height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-date p {
    font-size: 8px;
    color: rgb(200,200,200);
}

/* message thread - inner message text - message */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg p {
    padding: 13px 20px;
    word-spacing: 1px;
    line-height: 1.5;
    font-size: 13px;
    border-radius: 20px;
}

/* message thread - inner message text - message - this user */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg.thisuser {
    padding-left: 50px;
}

#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg.thisuser p {
    float: right;
    background-color: rgba(0,0,0,0.5);
    border-top-right-radius: 0px;
    color: white;
}

/* message thread - inner message text - message - other user */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg.otheruser {
    padding-right: 50px;
}

#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg.otheruser p {
    float: left;
    background-color: rgba(0,0,0,0.1);
    border-top-left-radius: 0px;
    color: rgb(100,100,100);
}

/* message thread - input */
#MessageModalThread #MessageModalThreadInput {
    width: calc(100% - 100px); 
    height: 40px;
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 2;
}

#MessageModalThread #MessageModalThreadInput input {
    width: calc(100% - 50px);
    height: 40px;
    padding-left: 15px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 20px;
    outline: none;
    transition: 1s;
}

#MessageModalThread #MessageModalThreadInput input:focus {
    border: 1px solid black;
}

/* message thread - input - submit button */
#MessageModalThread #MessageModalThreadInput #MessageModalThreadSubmitInput {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
    border-radius: 100%;
    transition: 500ms;
}

#MessageModalThread #MessageModalThreadInput #MessageModalThreadSubmitInput:hover {
    background-color: rgba(0,0,0,0.5);
    transform: rotate(360deg);
}

#MessageModalThread #MessageModalThreadInput #MessageModalThreadSubmitInput img {
    display: block;
    width: auto;
    height: 14px;
    position: relative;
    top: 13px;
    left: 1.5px;
}








/******************** NOTIFICATION MODAL ********************/   
#NotificationModal {                                   
    display: none;             
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99998; 
    opacity: 0;
    background-color: rgba(0,0,0,0.9);
    transition: 1s;
}

/* backdrop */
#NotificationModalBackdrop {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    touch-action: none;
}  

/* inner */
#NotificationModalInner {
    width: 400px;
    height: calc(100vh - 100px);
    padding: 0px 50px 45px;
    position: absolute; 
    top: 50px; 
    left: -400px; 
    z-index: 2;
    overflow: hidden; 
    background-color: #70757f; 
    border-radius: 20px; 
    transition: 400ms; 
}

#NotificationModalInner.active {
    left: 120px;
}

/* dvh */
@supports (height: 100dvh) {
    #NotificationModal { height: 100dvh; }
    #NotificationModalBackdrop { height: 100dvh; }
    #NotificationModalInner { height: calc(100dvh - 100px); }  
}
  
/* header - container */
#NotificationModalInner #NotificationModalHeader {
    width: calc(100% - 100px);
    height: auto;
    padding: 40px 0px 40px;
    position: absolute;
    top: 0px;
    left: 50px;
    z-index: 3;
    background-color: #70757f;
}

/* header - h1 */
#NotificationModalInner #NotificationModalHeader h1 {
    padding-bottom: 5px;
    font-size: 25px;
    font-weight: 900;
    color: white;
    border-bottom: 1px solid white;
}

/* header - close */
#NotificationModalInner #CloseNotificationModal {
    width: 25px;
    height: 25px;
    padding: 7px;
    position: absolute;
    top: 41px;
    right: 0px;
    cursor: pointer;
    background-color: white;
    border-radius: 100%;
    transition: 500ms; 
}

#NotificationModalInner #CloseNotificationModal:hover {
    opacity: 0.5;
    transform: rotate(360deg);
}

/* scroll container */
#NotificationModalInnerScroll {
    width: 100%;
    height: 100%;
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior: contain;    
}

/* inner content */
#NotificationModalInnerContent {
    width: 100%;
    height: auto;
    padding-top: 120px;
    padding-bottom: 120px;
}

/* inner notif */
#NotificationModalInnerContent .notifmodal-notif {
    width: 100%;
    height: auto;
    margin-top: 50px;
}

/* notif icon */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    float: left;
    background-color: rgba(255,255,255,0.1);
    border-radius: 100%;
}

#NotificationModalInnerContent .notifmodal-notif img {
    display: block;
    height: 15px;
    position: relative;
    top: 17.5px;
    opacity: 0.3;
}

#NotificationModalInnerContent .notifmodal-notif img.active {
    opacity: 1;
}

/* notif body */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body {
    display: inline-block;
    width: calc(100% - 70px);
    height: auto;
    padding-top: 1px;
    float: right;
}

/* notif h1 */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body h1 {
    padding-left: 10px;
    position: relative;
    font-size: 13px;
    font-weight: bold;
    color: black;
}

/* notif delete */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body h1 span {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: white;
    transition: 1s;
}

#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body h1 span:hover {
    opacity: 0.3;
}

/* notif p */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body p {
    margin-top: 7px;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: rgb(60,60,60);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* notif p link */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body p a {
    cursor: pointer;
    text-decoration: underline;
    color: rgb(60,60,60);
    transition: 1s;
}

#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body p a:hover {
    opacity: 0.3;
}

/* notif clear float */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-clearfloat {
    width: 100%;
    height: 1px;
    clear: both;
}








/******************** HAMBURGER MENU ********************/ 
#HamburgerMenu {                                                              
    display: none; 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
    top: 0px;
    left: 0px;
    z-index: 99998; 
    opacity: 0; 
    background-color: black;
    transition: 1s;
}

#HamburgerMenu.active {
    opacity: 1;
}

/* backdrop */
#HamburgerMenu #HamburgerMenuBackdrop {  
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    touch-action: none;
}

/* ham col */
#HamburgerMenu .aequus-hm-inner {
    width: calc(50% - 35px);
    height: 100vh;
    position: absolute;
    top: 0px;
    z-index: 2;
}

/* dvh */
@supports (height: 100dvh) { 
    #HamburgerMenu { height: 100dvh; } 
    #HamburgerMenu #HamburgerMenuBackdrop { height: 100dvh; } 
    #HamburgerMenu .aequus-hm-inner { height: 100dvh; } 
}

/* img col */
#HamburgerMenu .aequus-hm-inner.img {
    left: 70px;
    background-image: url("../../Assets/Images/bg_login.png");          
}

/* ham links col */
#HamburgerMenu .aequus-hm-inner.links {
    right: 0px; 
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior: contain;    
}

/* ham links col - inner */
#HamburgerMenu #HamburgerMenuLinksInner {
    width: 500px;
    height: auto;
    padding: 100px 0px 200px;
    position: relative;
}

/* ham links col - header */
#HamburgerMenu .aequus-hm-inner.links h2 {
    width: 500px;
    margin-bottom: 60px;
    padding-bottom: 5px;
    padding-left: 45px;   
    position: relative;
    opacity: 0;
    cursor: pointer;
    line-height: 1;
    font-size: 35px;
    font-weight: 900;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    color: white;
    transform: translate(0px, 30px);
    transition: 500ms;
}

#HamburgerMenu .aequus-hm-inner.links h2:hover {
    opacity: 0.3 !important;
}

/* ham links col - header num */
#HamburgerMenu .aequus-hm-inner.links h2 i {
    position: absolute;
    bottom: 7.5px;
    left: 0px;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.2);
}

/* ham links col - header letter span */
#HamburgerMenu .aequus-hm-inner.links h2 span {
    opacity: 0;
    transform: translate(0px, 10px);
    transition: 500ms; 
}

/* ham links col - header + span active classes */
#HamburgerMenu .aequus-hm-inner.links h2.active,
#HamburgerMenu .aequus-hm-inner.links h2 span.active {
    opacity: 1;
    transform: translate(0px, 0px);
}

/* ham link content col */
#HamburgerMenu .aequus-hm-inner.links-content {
    right: 0px;
    z-index: 3;
    opacity: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
    overscroll-behavior: contain;    
    pointer-events: none;
    background-color: black;
    transition: 500ms; 
}

#HamburgerMenu .aequus-hm-inner.links-content.active {
    opacity: 1;
    pointer-events: auto;  
}

/* ham link content col - inner */
#HamburgerMenu #HamburgerMenuLinksInfo {
    width: 500px;
    height: auto;
    padding: 100px 0px 200px; 
}

/* ham link content col - text */
#HamburgerMenu #HamburgerMenuLinksInfo h1 {
    padding-bottom: 5px;
    padding-left: 45px; 
    position: relative;
    line-height: 1;
    font-size: 35px;
    font-weight: 900; 
    border-bottom: 1px dashed rgba(255,255,255,0.2);   
    color: white;
}

#HamburgerMenu #HamburgerMenuLinksInfo h1 i {
    position: absolute;
    bottom: 7.5px;
    left: 0px;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,0.2);  
}

#HamburgerMenu #HamburgerMenuLinksInfo h2 {
    margin-top: 60px;
    padding-left: 45px;
    font-size: 18px;
    font-weight: bold;
    color: rgb(150,150,150);
}

#HamburgerMenu #HamburgerMenuLinksInfo p {
    margin-top: 10px;
    padding-left: 45px; 
    line-height: 1.3;
    font-size: 15px;
    font-weight: 300;
    color: rgb(150,150,150);
}

/* ham link content col - video elements */
#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el {
    display: inline-block; 
    width: calc(50% - 10px);
    height: 165px;
    margin-top: 50px;
    float: left; 
    cursor: pointer; 
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el:nth-child(2n) {
    margin-right: 20px;
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el:hover {
    opacity: 0.5 !important;
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el .ham-video-el-play {
    width: 100%;
    height: 130px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 20px;
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el .ham-video-el-play img { 
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
    top: calc(50% - 25px); 
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el h3 {
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    font-size: 15px;
    color: white; 
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el-clear-float {
    width: 100%;
    height: 1px;
    clear: both;
}
 
/* ham link content col - animation el */
#HamburgerMenu #HamburgerMenuLinksInfo .hmli-el {
    opacity: 0; 
    transform: translate(0px, 30px);
    transition: 500ms;
}

#HamburgerMenu #HamburgerMenuLinksInfo .hmli-el.active {
    opacity: 1;
    transform: translate(0px, 0px);
}

/* close ham menu + link content */
#HamburgerMenu .hammenuclosebtn {
    width: 50px;
    height: 90px;
    padding-top: 25px;
    position: absolute;
    right: calc(50% - 35px);
    z-index: 4;
    cursor: pointer;
    background-color: rgb(200,200,200); 
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    color: black;
    transition: 1s;     
}

/* close ham menu + link content - hover */
#HamburgerMenu .hammenuclosebtn:hover {
    background-color: black;
    color: white;
}

/* close ham menu */
#HamburgerMenu #HamburgerMenuClose {
    top: 0px;
}

/* close link content */ 
#HamburgerMenu #HamburgerMenuLinksInfoClose { 
    top: 100px;
    opacity: 0;
    pointer-events: none;
}

#HamburgerMenu #HamburgerMenuLinksInfoClose.active {
    opacity: 1;
    pointer-events: auto;
}

/* hide how to by default */
#HamburgerMenu #HamburgerMenuLinksInnerHowTo {
    display: none;
}  








/********************************************************************************/   
/******************** MOBILE ********************/    
/********************************************************************************/  
  


 



 
/******************** PAGE LOADER ********************/

/********* 550px *********/ 
@media (max-width: 550px) {   
#PageLoader img {
    height: 30px;
    top: calc(50% - 25px);
}
}








/******************** PRELOADER ********************/ 

/********* 550px *********/ 
@media (max-width: 550px) {   
/* loader */
#Preloader img {
    height: 200px;  
    top: calc(50% - 100px);  
    left: 20px;     
}
} 


 





/******************** NAVIGATION ********************/   
     
/********* maxheight **********/
@media (max-height: 700px) and (min-width: 551px) {
#NavBottomElements #NavLogo {
    display: none;
}
}

/********* maxheight **********/
@media (max-height: 500px) and (max-width: 550px) {
#NavBottomElements #NavLogo {
    display: none;
}
}

/********* 550px *********/ 
@media (max-width: 550px) {   
#Navigation {                              
    width: 40px; 
}

/* not logged in nav */
#NavUserNotLoggedIn img {
    width: 20px; 
    margin-top: 25px; 
    padding: 1px; 
}

#NavUserNotLoggedIn h2 {
    width: 70px; 
    height: 30px; 
    padding-top: 7.5px;  
    font-size: 10px; 
    border-radius: 12px; 
}

#NavUserNotLoggedIn h2.two {
    margin-top: 50px; 
    padding-top: 8.5px; 
}

/* post button (logged in nav) */
#Navigation #NavPost {
    width: 34px; 
    height: 44px; 
    padding: 7px; 
    top: 3px; 
    left: 3px; 
    border-radius: 10px; 
}

/* top elements (logged in nav) */
#NavTopElements {
    top: 65px;  
}

#NavTopElements img {
    width: 20px; 
    padding: 1px; 
}

/* indicator */    
.navindicatorouter .navindicator {
    width: 3px;
    height: 3px;
    top: calc(50% + 5px);
    left: calc(50% - 1.5px);
}

#NavChatIndicator {
    top: calc(50% + 6px); 
}

/* bottom elements */
#NavBottomElements img {
    height: 18px; 
}

#NavBottomElements #NavLogo { 
    left: -30px; 
    bottom: 65px; 
}
}








/******************** POST CREATION MODAL ********************/   
  
/********* 700px *********/ 
@media (max-width: 700px) {   
#PostCreationModalInner.active {
    left: calc(50% - 165px);
}
}

/********* 550px *********/ 
@media (max-width: 550px) {   
/* inner */
#PostCreationModalInner {
    width: 300px; 
    height: calc(100vh - 50px); 
    padding: 0px 25px 25px; 
    top: 25px; 
    left: -300px; 
}

#PostCreationModalInner.active {
    left: calc(50% - 130px); 
}

/* dvh */
@supports (height: 100dvh) {  
    #PostCreationModalInner { height: calc(100dvh - 50px); }  
}

/* header - container */
#PostCreationModalInner #PostCreationModalHeader {
    width: calc(100% - 50px); 
    padding: 25px 0px 25px; 
    left: 25px; 
}

/* header - h1 */
#PostCreationModalInner #PostCreationModalHeader h1 {
    padding-bottom: 3px; 
    font-size: 20px; 
}

/* header - submit button */
#PostCreationModalInner #PostCreationModalHeader #SubmitPostCreationForm {
    width: 70px; 
    padding-top: 5px; 
    top: 21px;  
    font-size: 11px; 
}

/* header - close */
#PostCreationModalInner #ClosePostCreationModal {
    top: 21px; 
}

/* form */
#PostCreationForm {
    padding-bottom: 80px; 
}

/* input headers */
#PostCreationModalInner h2 {
    margin-top: 55px; 
    font-size: 17px; 
}

#PostCreationModalInner h2.pcid-h2-first {
    margin-top: 110px; 
}

#PostCreationModalInner h2 span {
    padding-right: 7px; 
}

#PostCreationModalInner h3 {
    margin-bottom: 25px; 
    font-size: 10px; 
}

/* upload image area */
#PostCreationModalInner #create-post-image-display { 
    margin-top: -3px; 
}

#PostCreationModalInner .pcid-el {
    height: 90px; 
}

/* upload image area - file upload */ 
#PostCreationModalInner #create-post-file-upload label {
    padding-top: 30px; 
    font-size: 10px; 
}

/* text area */
#PostCreationModalInner textarea {
    height: 90px; 
    font-size: 10px; 
}

/* sellable btns */
#PostCreationModalInner #PostCreationModalSellable .pcm-sellable-btn {
    padding-top: 10px;
    font-size: 11px;
}

/* sellable label */
#PostCreationModalInner #PostCreationModalSellable label {
    font-size: 9px; 
}

/* sellable input */
#PostCreationModalInner #PostCreationModalSellable input {
    font-size: 11px; 
} 

/* sellable important notice */
#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice {
    padding: 7px 0px 7px;
}

#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice p {
    font-size: 11px;
}

#PostCreationModalInner #PostCreationModalSellable .pcm-product-importantnotice p.first {
    margin-bottom: 7px;
} 

/* sellable margins */
#PostCreationModalInner #PostCreationModalSellable .wc-mar-bottom { 
    margin-bottom: 25px; 
} 
}  




  



/******************** POST MODAL *********************/                                                                                                                           
                                             
/********* 1200px *********/ 
@media (max-width: 1200px) {   
/* close post */
#PostModal #PostModalClosePostOuter {
    width: calc(100% - 340px); 
    left: 20px; 
}

/* images */ 
#PostModal #PostModalImages { 
    width: calc(100% - 300px); 
} 

#PostModal #PostModalImages #PostModalImagesInner { 
    padding: 20px; 
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img {
    margin: 20px 0px 20px;   
}

/* scroll to see more */ 
#PostModal #PostModalScrollIndicator {
    left: calc(50% - 220px); 
}

/* post info */
#PostModal #PostModalPostInfo { 
    width: 300px;  
    padding: 20px;  
}
 
/* post profile */ 
#PostModal #PostModalPostInfo #PostProfile {
    height: 60px;  
}

#PostModal #PostModalPostInfo #PostProfile img {
    width: 60px;  
}

#PostModal #PostModalPostInfo #PostProfile img.placeholder {
    padding: 15px;  
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName {
    width: calc(100% - 60px);
    padding-top: 10px;  
    padding-left: 20px;  
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName h1 {
    font-size: 17px;  
}

#PostModal #PostModalPostInfo #PostProfile #PostProfileName h2 {
    margin-top: 4px;  
    font-size: 11px;  
}

/* post description */
#PostModal #PostModalPostInfo #PostDescription {
    margin-top: 20px;  
    padding-top: 20px;   
    font-size: 13px;  
}

/* post stats */
#PostModal #PostModalPostInfo #PostStats {
    margin-top: 20px;  
    padding-top: 20px;  
    padding-bottom: 20px;  
}

#PostModal #PostModalPostInfo #PostStats p {
    font-size: 11px;  
}

#PostModal #PostModalPostInfo #PostStats p span.divider {
    padding: 0px 10px;  
}

/* post stats - likes modal */       
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal {
    height: 130px;
    bottom: -150px;
    border-radius: 15px;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal.active {
    bottom: -130px;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal #PostStatsLikesModalInnerElements {
    padding: 27.5px 15px 27.5px; 
}

/* post stats - likes modal - close */    
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal h2 {
    width: 25px;
    height: 25px;
    padding-top: 6px;
    top: -12.5px;
    left: calc(50% - 12.5px);
    font-size: 11px;
}

/* post stats - likes modal - anchor */    
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a {
    width: calc(33.333333% - 5px);
    margin-bottom: 7.5px;
    padding: 22px 7.5px 22px;
    font-size: 9px;
    border-radius: 15px;
}

#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a:nth-child(3n + 1),
#PostModal #PostModalPostInfo #PostStats #PostStatsLikesModal a:nth-child(3n + 2) {
    margin-right: 7.5px;
}        

/* post controls */
#PostModal #PostModalPostInfo #PostControls {
    height: 58px;  
}

#PostModal #PostModalPostInfo #PostControls img {
    height: 18px;  
    top: 20px;  
}

#PostModal #PostModalPostInfo #PostControls img.comment {
    left: calc(50% - 9px);  
}

/* comment form */ 
#PostCommentForm h2 {          
    padding-top: 12.5px;
    font-size: 11px;
}

#PostModal #PostCommentForm input {
    font-size: 11px;  
}

/* inner comment */
#PostModal #PostModalPostInfo #PostComments .comment {
    padding-bottom: 16px;  
}

#PostModal #PostModalPostInfo #PostComments .comment .main, 
#PostModal #PostModalPostInfo #PostComments .comment .reply {
    margin-top: 20px;  
}

/* comment profile img */
#PostModal #PostModalPostInfo #PostComments .comment img.comment-profile-img {
    width: 35px;  
    height: 35px;  
}

#PostModal #PostModalPostInfo #PostComments .comment img.comment-profile-img.placeholder {
    padding: 9px;  
}

/* comment content */
#PostModal #PostModalPostInfo #PostComments .comment .content {
    width: calc(100% - 55px);  
}

#PostModal #PostModalPostInfo #PostComments .comment .content h1 {
    font-size: 11px;  
}
 
#PostModal #PostModalPostInfo #PostComments .comment .content h1 span.dot {
    padding: 0px 3px;  
}

#PostModal #PostModalPostInfo #PostComments .comment .content p {
    margin-top: 4px;  
    font-size: 10px;  
}

/* comment controls */
#PostModal #PostModalPostInfo #PostComments .comment .content .controls img {
    height: 13px;  
}

#PostModal #PostModalPostInfo #PostComments .comment .content .controls p {
    bottom: 3.5px;  
    right: 14px;  
    font-size: 9px;  
}

/* reply connector and @ */
#PostModal #PostModalPostInfo #PostComments .comment .reply-connector {
    left: 17px;    
}
 
#PostModal #PostModalPostInfo #PostComments .comment .reply p span {
    padding-right: 4px;  
}

/* no comment header */
#PostModal #PostModalPostInfo #PostComments #NoCommentsHeader {
    margin-top: 80px;  
    font-size: 15px;  
}

/* sellable */        
#PostModal #PostModalPostInfo #PostSellable {
    height: 75px;
}

#PostModal #PostModalPostInfo #PostSellable h4 {
    height: 35px;
    font-size: 12px;     
}    
}

/********* 900px *********/   
@media (max-width: 900px) {   
#PostModal {    
    padding-bottom: 300px; 
    overflow-y: scroll; 
    scroll-behavior: smooth; 
    -webkit-overflow-scrolling: touch;              
}

/* layout */
#PostModal .layout { 
    position: relative; 
}

/* close post */
#PostModal #PostModalClosePostOuter {
    width: calc(100% - 40px); 
    position: relative; 
    left: 0px; 
}

/* images */ 
#PostModal #PostModalImages { 
    width: calc(100% - 40px);
    height: auto; 
    overflow-y: none;   
    border-right: none; 
} 

#PostModal #PostModalImages #PostModalImagesInner { 
    padding: 0px; 
    top: 0px !important;  
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img.pmi0 {
    margin-top: 20px;  
}

/* magnify */
#PostModal #PostModalImages #PostModalImagesInner .pmi-img .pmi-magnify {
    width: 30px;  
    height: 30px; 
    left: calc(50% - 15px); 
}

#PostModal #PostModalImages #PostModalImagesInner .pmi-img .pmi-magnify img {
    height: 10px; 
    top: 10px;  
}

/* scroll to see more */ 
#PostModal #PostModalScrollIndicator {
    display: none !important;   
}

/* post info */
#PostModal #PostModalPostInfo { 
    height: auto !important; 
    margin-top: 20px; 
    border-right: 1px solid rgb(255,255,255,0.1); 
    border-left: 1px solid rgb(255,255,255,0.1); 
}

/* comments layout and outer */    
#PostModal #PostModalPostInfo #PostCommentsOuter { 
    height: auto !important; 
    overflow-y: none; 
}
}

/********* 550px *********/ 
@media (max-width: 550px) {   
#PostModal {    
    width: calc(100% - 40px); 
    left: 40px; 
}

/* post info */
#PostModal #PostModalPostInfo { 
    margin-top: 0px; 
    border: none !important; 
}
}  








/******************** POST MODAL CHECKOUT *********************/           
 
/********* 1200px *********/ 
@media (max-width: 1200px) {   
#PostModalCheckout {
    width: 300px;  
    padding: 0px 15px;  
    right: -300px;  
}

/* checkout inner prod overview */
#PostModalCheckout #PostModalCheckoutInner h1 {
    font-size: 15px;  
}

#PostModalCheckout #PostModalCheckoutInner h2 {
    font-size: 11px;  
}

/* prod overview col text */
#PostModalCheckout #PostModalCheckoutInner .pmci-col h3 {
    font-size: 9px;  
}

#PostModalCheckout #PostModalCheckoutInner .pmci-col h4 {
    padding-top: 13px;   
    font-size: 12px;    
}

/* post prod overview headers */  
#PostModalCheckout #PostModalCheckoutInner h5 {
    font-size: 15px;  
}

#PostModalCheckout #PostModalCheckoutInner p {
    font-size: 11px;  
}

/* input label */
#PostModalCheckout #PostModalCheckoutInner label {
    font-size: 9px;  
}

/* sellable input */
#PostModalCheckout #PostModalCheckoutInner input {
    font-size: 11px;  
} 

/* order summary */  
#PostModalCheckout #PostModalCheckoutInner .pmci-os-p strong {
    padding-right: 5px;  
}

/* order summary - qty adjust */
#PostModalCheckout #PostModalCheckoutInner .pmci-col.pmci-col-os.pmci-os-qty h4 span.val {
    padding: 0px 25px;  
}

/* pmci divider */
#PostModalCheckout #PostModalCheckoutInner .pmci-divider {
    margin-top: 50px;    
}

/* confirmation window */ 
#PostModalCheckout #PostModalCheckoutConfirmation {
    padding: 15px;     
    right: -300px;   
}

/* conf window text */
#PostModalCheckout #PostModalCheckoutConfirmation h1 {  
    font-size: 15px;  
}

#PostModalCheckout #PostModalCheckoutConfirmation h2 {
    font-size: 11px;  
}

/* conf window dividers */
#PostModalCheckout #PostModalCheckoutConfirmation .pmcc-divider {
    margin: 50px auto 50px;  
}

/* conf window btns */
#PostModalCheckout #PostModalCheckoutConfirmation a {
    padding-top: 10px;  
    font-size: 11px;  
}
}

/********* 900px *********/ 
@media (max-width: 900px) {   
#PostModalCheckout {                                                                                                                                                                                                                     
    width: calc(100% - 70px);   
    padding: 0px 0px;   
    right: -100%;   
}

/* checkout inner */
#PostModalCheckout #PostModalCheckoutInner {
    width: 400px;   
}

/* confirmation window */ 
#PostModalCheckout #PostModalCheckoutConfirmation {
    width: 400px;   
    padding: 30px 0px 0px;   
    right: -100%;   
}

#PostModalCheckout #PostModalCheckoutConfirmation.active {
    right: calc(50% - 200px);   
}
} 

/********* 550px *********/ 
@media (max-width: 550px) {   
#PostModalCheckout {                                                                                                                                                                                                                     
    width: calc(100% - 40px);   
}

/* checkout inner */
#PostModalCheckout #PostModalCheckoutInner {
    width: 300px;   
}

/* confirmation window */ 
#PostModalCheckout #PostModalCheckoutConfirmation {
    width: 300px;   
}

#PostModalCheckout #PostModalCheckoutConfirmation.active {
    right: calc(50% - 150px);   
}
}







 
/******************** MESSAGE MODAL ********************/       
     
/********* 700px *********/ 
@media (max-width: 700px) {   
#MessageModalInner.active {
    left: calc(50% - 165px);  
}
}

/********* 550px *********/  
@media (max-width: 550px) {    
/* inner */
#MessageModalInner {
    width: 300px;  
    height: calc(100vh - 50px);  
    padding: 0px 25px 25px;  
    top: 25px;  
    left: -300px;   
}

#MessageModalInner.active {
    left: calc(50% - 130px);  
}

/* dvh */
@supports (height: 100dvh) {
    #MessageModalInner { height: calc(100dvh - 50px); }    
}

/* header - container */
#MessageModalInner #MessageModalHeader {
    width: calc(100% - 50px);  
    padding: 25px 0px 25px;  
    left: 25px;    
}

/* header - h1 */
#MessageModalInner #MessageModalHeader h1 {
    padding-bottom: 3px;  
    font-size: 20px;   
}

/* header - close */
#MessageModalInner #CloseMessageModal {
    top: 21px;    
}

/* inner content */
#MessageModalInnerContent {
    padding-top: 80px;    
    padding-bottom: 80px;    
}

/* msg thread outer */ 
#MessageModalInnerContent .message-thread-outer {
    margin-top: 40px;    
}

/* msg thread outer - content */
#MessageModalInnerContent .message-thread-outer .mto-content {
    width: calc(100% - 70px);  
    padding-top: 9.5px;    
    left: 70px;  
}

#MessageModalInnerContent .message-thread-outer .mto-content h1 {
    padding-right: 75px;     
    font-size: 12px;  
}

#MessageModalInnerContent .message-thread-outer .mto-content h1 .mto-date {
    font-size: 9px;   
}

#MessageModalInnerContent .message-thread-outer .mto-content p {
    margin-top: 6px;  
    padding-top: 6px;  
    padding-right: 30px;  
    font-size: 11px;  
}

#MessageModalInnerContent .message-thread-outer .mto-content .mto-indicator {
    width: 7px;  
    height: 7px;  
    bottom: 14.5px;   
} 

/* message thread inner modal */
#MessageModalThread {
    left: 300px;   
}

/* message thread inner modal - header */
#MessageModalThread #MessageModalThreadHeader {
    width: calc(100% - 50px);    
    left: 25px;  
}

/* message thread - inner message container */
#MessageModalThread #MessageModalThreadInner {
    width: calc(100% - 50px);  
    height: calc(100% - 205px);     
    left: 25px;  
}

/* message thread - inner message text - message */
#MessageModalThread #MessageModalThreadInner #MessageModalThreadInnerMessages .mmtim-msg p {
    line-height: 1.4;  
    font-size: 11px;  
} 

/* message thread - input */
#MessageModalThread #MessageModalThreadInput {
    width: calc(100% - 50px);  
    bottom: 50px;    
    left: 25px;   
}

#MessageModalThread #MessageModalThreadInput input {
    font-size: 11px;  
} 
}








/******************** NOTIFICATION MODAL ********************/       

/********* 700px *********/ 
@media (max-width: 700px) {   
#NotificationModalInner.active {
    left: calc(50% - 165px);  
}
}

/********* 550px *********/ 
@media (max-width: 550px) {       
/* inner */
#NotificationModalInner {
    width: 300px;  
    height: calc(100vh - 50px);  
    padding: 0px 25px 25px;  
    top: 25px;  
    left: -300px;  
}

#NotificationModalInner.active {
    left: calc(50% - 130px);  
}

/* dvh */
@supports (height: 100dvh) {
    #NotificationModalInner { height: calc(100dvh - 50px); }  
}

/* header - container */
#NotificationModalInner #NotificationModalHeader {
    width: calc(100% - 50px);  
    padding: 25px 0px 25px;  
    left: 25px;   
}

/* header - h1 */
#NotificationModalInner #NotificationModalHeader h1 {
    padding-bottom: 3px;  
    font-size: 20px;  
}

/* header - close */
#NotificationModalInner #CloseNotificationModal {
    top: 21px;  
}

/* inner content */
#NotificationModalInnerContent {
    padding-top: 80px;  
    padding-bottom: 80px;  
}

/* inner notif */
#NotificationModalInnerContent .notifmodal-notif {
    margin-top: 40px;  
} 

/* notif body */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body {
    width: calc(100% - 60px);    
    padding-top: 5.5px;   
}

/* notif h1 */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body h1 {
    font-size: 11px;  
}

/* notif p */
#NotificationModalInnerContent .notifmodal-notif .notifmodal-notif-body p {
    margin-top: 6px;  
    padding-top: 6px;  
    font-size: 10px;  
}
}
 







/******************** HAMBURGER MENU ********************/ 
 
/********* 1225px *********/ 
@media (max-width: 1225px) {     
/* ham col */
#HamburgerMenu .aequus-hm-inner {
    width: calc(70% - 35px);  
}

/* img col */
#HamburgerMenu .aequus-hm-inner.img {
    width: calc(30% - 35px) !important;  
}

/* ham links col - inner */
#HamburgerMenu #HamburgerMenuLinksInner {
    width: 300px;  
}

/* ham links col - header */
#HamburgerMenu .aequus-hm-inner.links h2 {
    width: 300px;  
    margin-bottom: 50px;  
    padding-left: 30px;  
    font-size: 25px;  
}

/* ham links col - header num */
#HamburgerMenu .aequus-hm-inner.links h2 i {
    bottom: 7px;   
    font-size: 10px;   
}

/* ham link content col - inner */
#HamburgerMenu #HamburgerMenuLinksInfo {
    width: 300px;  
}

/* ham link content col - text */
#HamburgerMenu #HamburgerMenuLinksInfo h1 {
    padding-left: 30px;  
    font-size: 25px;  
}

#HamburgerMenu #HamburgerMenuLinksInfo h1 i {
    bottom: 7px;   
    font-size: 10px;   
}

#HamburgerMenu #HamburgerMenuLinksInfo h2 {
    margin-top: 50px;  
    padding-left: 30px;  
    padding-right: 30px;  
    font-size: 15px;  
}

#HamburgerMenu #HamburgerMenuLinksInfo p {
    padding-left: 30px;   
    padding-right: 30px;  
    font-size: 12px;  
}

/* ham link content col - video elements */
#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el {
    width: calc(50% - 5px);  
    height: 155px;  
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el:nth-child(2n) {
    margin-right: 10px;  
}

#HamburgerMenu #HamburgerMenuLinksInfo .ham-video-el h3 {
    font-size: 12px;  
}

/* close ham menu + link content */
#HamburgerMenu .hammenuclosebtn {
    right: calc(70% - 35px);  
}
}

/********* 550px *********/ 
@media (max-width: 550px) {       
/* ham col */
#HamburgerMenu .aequus-hm-inner {
    width: calc(100% - 40px);
}

/* img col */
#HamburgerMenu .aequus-hm-inner.img {
    display: none; 
}

/* ham links col - inner */
#HamburgerMenu #HamburgerMenuLinksInner {
    padding: 90px 0px 200px;
}

/* ham link content col - inner */
#HamburgerMenu #HamburgerMenuLinksInfo {
    padding: 90px 0px 200px; 
}

/* close ham menu + link content */
#HamburgerMenu .hammenuclosebtn {
    width: 30px;
    height: 30px;
    padding-top: 7.5px;
    top: 10px !important;
    font-size: 13px;
    border-radius: 100%; 
}

/* close ham menu */
#HamburgerMenu #HamburgerMenuClose {
    right: calc(50% + 100px);
}

/* close link content */ 
#HamburgerMenu #HamburgerMenuLinksInfoClose { 
    right: calc(50% + 60px);
}
}