/* NB STYLE ORDER: LVHA link, visited, hover, active... HOVER FOCUS ACTIVE */
/* NB OUTLINE: NONE FOR TEXT INPUTS! */


/* Auto: hides scrollbar in Opera, Chromium */
/* ::-webkit-scrollbar {
    display: none;
} */

/* Auto: firefox: applies this style to all elements in Firefox */
*{
    scrollbar-width: none; 
} 
.show-scrollbar-firefox{
    scrollbar-width: auto; 
}

/* Opera, Chromium: class to allow JS to toggle the scrollbars */
.hide-scrollbar::-webkit-scrollbar {
    display: none; 
}

/* !IOS SAFARI WARNING! ADDING THIS CLASS TO DOCUMENT.BODY KILLS SCROLL ABILITY ALTOGETHER */
.hide-scrollbar-ios-safari{
    overflow: hidden;
    /* IOS SAFARI SOFT KEYBOARD RE-ENABLES SCROLLING: IT'S A BUG
            https://thesassway.com/how-to-turn-off-scroll-chaining-in-ios-safari/ 
    */
    /* background-color: tan; */
    /* overscroll-behavior: none;  */
    /* position: fixed; */
    /* top: 0; */
    /* bottom: 0;/ */
    /* height: 100vh;  */
} 

/* IOS SAFARI: PREVENT OUTLINE ON TEXT INPUTS 
input{
    -webkit-appearance: none;
} */


/* html{ */
    /* WILL THIS FIX IOS SOFT KEYBOARD ENABLING SCROLL? */
    /* overscroll-behavior: none; */
/* } */
/*STOP SAFARI FROM ZOOMING ON INPUT SELECT*/
/* 
    Use the user-scalable property: Add the following meta tag to the head section of your HTML document: 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
*/

input, textarea, select, button {
    /* 
    If you want to prevent Safari from zooming in slightly when selecting input elements, 
    you can try adding the following CSS rule to your webpage: 
    */
    /* font-size: 16px; */
    -webkit-text-size-adjust: 100%;
    /* 
        The touch-action property specifies how touch interactions should be handled. 
        Setting it to manipulation can help prevent Safari from triggering the zooming behavior. 
    */
    touch-action: manipulation;
  }

:root{
    --transparent: rgba(0, 0, 0, 0);
    --honeydewglass: rgba(240, 255, 240, .7);
    --honeydewthickglass: rgba(240, 255, 240, .95);
    --deeppink: rgb(255, 20, 147);
    --honeydewfaint: rgb(250, 255, 250);
    --honeydewpale: rgb(247, 255, 247);
    --honeydew: rgb(240, 255, 240);
    --honeydewsmudge: rgb(233,247,233);
    --honeydewshade: rgb(216,230,216);
    --honeydewdark: rgb(168, 179, 168);
    --honeydewtext: rgb(120,128,120);
    --tomatopale: rgb(255, 125, 102);
    --tomatoglass: rgba(255, 99, 71, .7);
    --tomato: rgb(255, 99, 71);
    --tomatoshade: rgb(204,80,57);
    --panel_height: 50px; 
    --panel_border: 1px solid var(--honeydewshade, gray);
    --button_border: 1px solid var(--honeydewdark, gray);
    --input_border_focus: 2px solid var(--tomato);        
    --input_border_focus: 2px solid var(--tomato);        
    --input_border_blur: 2px solid var(--honeydewshade, gray);
    /* --pmc_font: bold 16px Arial, sans-serif; */

    --chat-bubble: 14px 'Arial', sans-serif;
    --chat-bubble-time: 10px 'Arial', sans-serif;
    --chat-bubble-user-name: 10px 'Arial', sans-serif;
    /* OUTSIDE OF CHAT BUBBLES */
    --chat-bubble-name: bold italic 12px 'Arial', sans-serif;
    --chat-bubble-date: bold italic 12px 'Arial', sans-serif;
    
    --arial10: bold 10px 'Arial', sans-serif;
    --arial13: bold 13px 'Arial', sans-serif;
    --arial14: bold 14px 'Arial', sans-serif;
    --arial15: bold 15px 'Arial', sans-serif;
    --arial16: bold 16px 'Arial', sans-serif;
    --arial18: bold 18px 'Arial', sans-serif;
    --arial19: bold 19px 'Arial', sans-serif;
    --arial20: bold 20px 'Arial', sans-serif;
    --arial22: bold 22px 'Arial', sans-serif;     
    --arial24: bold 24px 'Arial', sans-serif;     
    --arial27: bold 27px 'Arial', sans-serif;     
    --arial32: bold 32px 'Arial', sans-serif;     
    --arial34: bold 34px 'Arial', sans-serif;
    --arial36: bold 36px 'Arial', sans-serif;
    --arial38: bold 38px 'Arial', sans-serif;
    --arial40: bold 40px 'Arial', sans-serif;
    --button_bgcolor: var(--honeydew);
    --button_color: var(--tomato);

    --sizeMenuButton: 36px;   
    /* --menuFont: bold 16px 'Arial', sans-serif; */
    --placeholderFont: bold 14px 'Arial', sans-serif;
    /* --btn1-clr1: var(--tomato); */
    /* --btn1-clr2: var(--honeydewtext); */
}
::placeholder{
    /* color: tomato; */
    color: var(--honeydewdark, gray);
    /* opacity: 1; */
    padding: 0px; 
    /* padding-left: 3px;  */
    /* padding-left: -3px; RECOMMENDED FOR CROSS-BROWSWER CONSISTENCY */
    font: var(--placeholderFont);
    /* font-style: italic; */
}

::selection{
    background-color: var(--honeydewshade, gray);
}

body{
    /*get rid of default window margins by setting body margin to 0*/
    margin: 0;
    overflow-x: hidden;
    /* overscroll-behavior: none; */
    /* overscroll-behavior-y: auto; */
    /* background-color: gray; */
    /* background-color: black; */
}

/* html{
    border: 0px;
    background-color: whitesmoke;
} */

/* 
input[type=text]{ TAKES OVER PLACEHOLDER TEXT WHEN FOCUS ON INPUT IS LOST
    outline: none; 
    padding: 1px; RECOMMENDED FOR CROSS-BROWSER CONSISTENCY
    padding-left: 3px; 
    font: var(--arial16);
    color: var(--tomato);
}
input[type=text]:focus{ ALSO TAKES OVER PLACEHOLDER TEXT
    outline: none; 
    padding: 1px; RECOMMENDED. SEE ABOVE
    padding-left: 3px; 
    color: lime;
    border: 5px solid lime;
} */

/* input:focus{
    outline: 2px solid gray;
    transition: outline .1s ease-in;
} */

/* input[type=text]:hover{
    outline: none; 
    border: 2px solid tomato;
    top: 100px;
    border-style: solid solid solid solid;
    z-index: 3;
} */

#background{
    /* position: absolute;  */
    background-color: white;
    background-color: rgba(255,111,111,.2);
    user-select: none; 
    /* top: -8px; */
    /* right: -8px; */
}

.radio_button_with_text{
    display: flex;
    justify-content: start;
    align-items: center;
}

.card_width_300_text_input{
    width: 60%;
    height: 26px;
    padding-left: 10px;
    /* margin-right: 17px; */
    font: var(--arial15);
    outline-offset: -2px;
    outline: 2px solid rgb(222,222,222);
    border-radius: 13px;
    border: none; 
} 
/* user-select: none; !USERS HAVE TO BE ABLE TO USE THE TEXT INPUT!*/ 


.check_button{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.check_button_40{
    border-radius: 18px;
    min-width: 36px;
    min-height: 36px;
}

.check_button_unclicked{
    background-color: rgb(220,220,220);
    z-index: 1;
}
.check_button_unclicked:hover{
    background-color: var(--honeydewsmudge);
    outline-offset: -2px;
    outline: 4px solid var(--tomato);
    z-index: 2;
}

.check_button_clicked{
    /* outline-offset: -6px; */
    position: relative;
    right: 4px;
    background-color: rgb(120,120,120);
    /* background-color: greenyellow;   */
    min-width: 28px;
    min-height: 28px;
    border-radius: 14px;
    /* right: 30px;   */
    /* outline: 4px solid var(--honeydewshade); */
    /* outline: 4px solid blueviolet; */
    /* outline: 6px solid rgb(220,220,220); */
    z-index: 1;
}
/* .check_button_clicked:hover{ */
    /* outline-offset: -2px; */
    /* background-color: var(--honeydew); */
    /* background-color: rgba(0, 0, 0, 0); */
    /* background-color: greenyellow; */
    /* outline: 4px solid var(--tomato); */
    /* z-index: 2; */
/* } */

.check_button_40_dot{
    border-radius: 9px;
    width: 18px;
    height: 18px;
    background-color: var(--tomato);
}

/* .check_button_40_dot:hover{
    background-color: black;
    transition: 5s ease-out;
} */

.page-row{
    display: flex;
    width: calc(83.33vw);
    minHeight: 50px;
    user-select: none;
}

#cn1{
/* SCRAPER/IFRAME/POPUP CONTAINER  */
    /* position: absolute; */
    position: fixed;
    /* display: flex; */
    display: none;
    opacity: 0; 
    flex-direction: row; 
    flex-wrap: nowrap;   
    align-items: center; 
    justify-content: center;
    /* overflow-y: hidden; */

    border: 8px solid black; /* var(--honeydew); */
    /* border: 8px solid pink; */
    background-color: rgba(0,0,0,.7); 
    /* background-color: white;  */
    /* top: 66px;  */
    /* top: 8px;  */
    /* height: 792px; */
    /* scrollbar 300, tagbar 80, spacer 20 */
    left: 0px;
    right: 0px;
    /* top: 50px; */
    /* padding-left: 8px; */
    /* padding-right: 8px; */
    z-index: 2;
    /* object-fit: contain;  */
    transition: opacity .6s linear; 
    /* overflow: none; */
    user-select: none; 
}
#cn1_btn_save{
    position: absolute;
    top: 8px;
    right: 8px;
}
#cn1_btn_next{
    position: absolute;
    top: 28px;
    right: 8px;
}
#cn1_btn_prev{
    position: absolute;
    top: 48px;
    right: 8px;
}

#cn1_if1{ 
    background-color: none; 
    /* color: pink;  */
    display: flex;
    /* display: none; */
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between; 
    align-items: center; 
    /* left: 20px; */
    /* right: 20px;  */
    /* top: 2px;  */
    /* bottom: 0px; */
    outline: none; 
    margin: none; 
    border: solid 3px var(--tomato);
    /* border: 20px solid rgba(0,0,0,.5); */

    /* height: 500px;  */
    /* width: 90%; */
    /* padding-left: 8px; */
    /* padding-right: 8px; */
    user-select: none; 
    overflow: hidden; /* NB CONTENT OF IFRAME HAS IT'S OWN WINDOW & SCROLLBARS */
    transition: all .6s ease-out;
}

#content{

    /* position: fixed; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;


    /* top of window: margin-top: -8px; bottom of site header: -8 + 50 = 42px*/
    /* margin-top: 0px; */
    padding: 8px;
    top: 50px;
    /* height: calc('window.innerHeight' + 'px'); */
    /* overflow: auto; */
    /* background-color: rgba(255, 0, 255, .5); */
    /* z-index: 5; */

    /* justify-content: center; */
    /* position: absolute; */
    /* display: flex; */
    /* position: relative; */
    /* display: flex; */
    /* top: 50px; */
    /* left: 0px; */
    /* overflow-x: hidden; */
    /* overflow-y: scroll; */
    /* outline: 8px solid blueviolet; */
    /* outline-offset: -8px; */
    /* margin: 0px; */
    /* border: 0px; */
    
/* 
    #tags_editor_container


    position: fixed;
    flex-direction: column; 
    align-items: center; 
    flex-wrap: nowrap;   
    justify-content: center;    

    overflow-y: scroll;
    top: 50px; 
    left: 0px;
    right: 0px;

    background-color: rgba(0,0,0,.8); 

    transition: opacity .6s linear; 
    user-select: none;  */

}
.control_scroll_left, .control_scroll_right, .scroll_label{
    /* display: inline-block; */
    position: absolute;
    /* background-color: white; */
    /* opacity: 0.3; */
    /* top: 0; */
    /* height: 240px;  */
    /* height: 120px;  */
    height: 130px; 
    width: 90px; 
    /* width: 120px;  */
    display: flex;
    justify-content: center;
    align-items: center; 
    user-select: none; 
    z-index: 1;

}
.control_scroll_left{
    left: 11px;
    /* left: -4px; */
    border-top-right-radius: 27px;
    border-bottom-right-radius: 27px;
    /* clip-path: path('M0,0 h70 Q90 0, 90 20 v200 Q90 240, 70 240 h-70 Z'); */
}
.control_scroll_right{
    right: 11px;
    /* right: -4px; */
    border-top-left-radius: 27px;
    border-bottom-left-radius: 27px;
    /* clip-path: path('M90,240 h-70 Q0 240, 0 220 v-200 Q0 0, 20 0 h70 Z'); */
}
.control_scroll_left:hover{
    /* outline-offset: -4px; */
    /* background-color: greenyellow; */
    background-color: var(--honeydewglass);
    transition: background-color .1s ease-in;
    border: 4px var(--tomato);
    border-style: solid solid solid none;
    /* outline: 4px solid var(--tomato); */    
}
.control_scroll_right:hover{
    /* background-color: greenyellow; */
    background-color: var(--honeydewglass);
    transition: background-color .1s ease-in;
    border: 4px var(--tomato);
    border-style: solid none solid solid;
    /* outline-offset: -4px; */
    /* outline: 4px solid var(--tomato); */    
}

/* .image:blur{
    transform: scale(.4);
    transition: transform 1s ease-in; 
} */

/* stop scroll / stop scrolling / freeze */
.disable_scroll{
    height: 100%;
    overflow: hidden;

    /* IOS NEEDS MORE TO KILL SCROLLING WHEN SOFT KEYBOARD OPEN... */
    /* position: fixed;  */
    /* min-height: 100vh; */
    /* min-height: -webkit-fill-available; */
}
.flex_row{
    /*  */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* font: var(--arial32); */
}
.hover_button{
    position: absolute;
    /* position: static; */
    /* border: 5px solid var(--tomato); */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center; 

    min-width: 70px;
    min-height: 30px;
    z-index: 1;
    /* opacity: 1; */
    /* clip-path: path('M10,0 h30 Q50,0 50,10 v10 Q50,30 40,30 h-30 Q0,30 0,20 v-10 Q0,0 10,0'); */
    /* clip-path: path('M20,0 h20 Q60,0 60,15 Q60,30 40,30 h-20 Q0,30 0,15 Q0,0 20,0'); */
    /* clip-path: path('M15,0 h30 Q60,0 60,15 Q60,30 45,30 h-30 Q0,30 0,15 Q0,0 15,0'); */
    /* clip-path: path('M15,0 h30 C65,0 65,30 45,30 h-30 C-5,30 -5,0 15,0'); */
    /* clip-path: path('M20,0 h30 C70,0 70,30 50,30 h-30 C0,30 0,0 20,0'); */

    color: var(--honeydewtext);
    background-color: var(--tomato);
    font: var(--arial16);
    /* transition: all 0.2s ease-out;  */
    user-select: none; 
}
.hover_button_directions{
    min-width: 40px;
    min-height: 40px;
    border-radius: 20px;
    font: var(--arial32);
}
/* .hover_button:hover{
    background-color: blueviolet;
    outline-offset: 2px;
    border-radius: 15px;
    outline: 20px solid honeydew;
} */

.image{
    /* / */
    /* padding: 18px;  */
    /* outline-offset: -16px;  */

    /* height: 300px;  */
    height: 150px;
    /* width: 100%; */

    /* object-fit: contain; */
    border-radius: 17px;
    /* opacity: 1.0; */
    user-select: none; 
    /* transition: all .3s; */
    /* outline-offset: 2px; */
}
#fullsize_image{
    object-fit: cover;
    user-select: none;
}
/* .image:hover{
    transform: scale(1.01);
    transition: all .2s ease-out;
    outline: 2px solid var(--honeydew);
} */ 

.fullsize_tag{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center; 
    color: black;
    font: var(--arial16);
    /* z-index: 1; */
    background-color: white;
    height: 26px;
    border-radius: 13px;
    user-select: none; 
    padding-left: 13px;
    padding-right: 13px;
    margin-left: 13px;
    margin-right: 13px;
}
.fullsize_tag:hover{
        background-color: rgb(222,222,222);
}

.fullsize_tags_row{
    /* height: 50px;  */
    height: 62px; /* //top 16 (b/c of bezel corner radius) + 30 ('Saved' button) + 16*/

    /* backdrop-filter: blur(9px); */
    /* backdrop-filter: brightness(110%); */
    display: flex;
    flex: 100%;
    flex-direction: row; 
    flex-wrap: nowrap;   
    align-items: center; 
    overflow-y: hidden;
    /* overflow-x: hidden; */
    user-select: none;
    scrollbar-width: none; /* firefox oval shape is destroyed without this */
}

/* .image:focus{
    outline: 2px solid var(--honeydew);
} */

#image_editor_container{
    position: fixed;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;   

    /* flex-direction: row;  */
    /* flex-wrap: nowrap;    */

    overflow-x: hidden;
    overflow-y: scroll;
        
    top: 50px; 
    left: 0px;
    right: 0px;
    z-index: 2;

    background-color: rgba(0,0,0,.8); 
    /* border: 8px solid rgba(0,0,0,.9);  */
    /* border-top: 3px solid gray; */
    /* border: 8px solid var(--honeydewsmudge); */
    /* border: 8px solid var(--honeydewglass); */
    border: 8px solid white;
    /* border: 8px solid gray; */
    /* border-radius: 30px; */
    /* border: 8px solid black; */
    /* border-top: 24px solid var(--honeydew); */
    transition: opacity .6s linear; 
    user-select: none; 

    /* scroll-behaviour: smooth or auto. See mozilla @scroll-behaviour.  */
}
/* _container.style.display = 'none';
_container.style.opacity = 0; */

#image_menu_container{

    /* display: flex; */
    position: absolute; 
    /* flex-direction: column; */
    /* align-items: center; */
    justify-content: center;
    /* background-color: blueviolet; */
    /* opacity: 0; */
    width: 100%;
    height: 400px;
    outline-offset: -2px;
    outline: 2px solid blueviolet;
    /* background-color: white; */
}

#image_editor_image{
    position: absolute;
    /* top: 0px;  */
    user-select: none; 
}
.icon-underlay{
    height: 44px;
    width: 44px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px;
    user-select: none;
}
.icon-underlay:hover{
    background-color: gainsboro;
}

#join-the-beta-button{
    height: 34px;
    // width: 158px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    // position: relative;
    // right: 12px;
    // margin-left: 8px;
    margin-right: 12px;
    margin-left: 4px;
    background: linear-gradient(135deg, springgreen, rgb(130,30,160));
    font: var(--arial18);
    color: white;
}
#join-the-beta-button:hover{
    background: linear-gradient(135deg, rgb(130,30,160), springgreen);
    // background: rgb(130, 30, 160);
    // outline: 2px solid springgreen;
    // outline-offset: -2px;
    // color: black;
    // box-shadow: 0px 0px 16px -4px springgreen;
}

#login-button{
    height: 34px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    // position: relative;
    // right: 
    margin: 4px;
    background: white;
    font: var(--arial18);
    color: black;
}
#login-button:hover{
    background-color: gainsboro;
}

#mc1_mr1:hover #mc1_mr1_inp:not(:focus){
    border: 2px solid var(--honeydewdark);
}

#mc1{
    transition: opacity 0.23s ease-in; 
}

#mc1_mr1:hover, 
#mc1_mr2:hover{
    color: var(--honeydewtext);
    background-color: var(--honeydewsmudge);
}

#mc1_mr1:hover #mc1_mr1_btn:hover,
#mc1_mr2:hover #mc1_mr2_btn:hover{
    color: var(--tomato);
}

#mc1_mr1_btn{
    font-size: 32px;
    right: 18px;
    transform: rotate(270deg); 
}

#mc1_mr1_btn:hover{
    color: var(--tomato);
    transform: scale(1.2) rotate(270deg);
    transition: all .2s ease-in-out;
}
#mc1_mr2_btn{
    font-size: 32px;
    right: 16px; 
    top: 5px; 
    transform: rotate(180deg);
}
#mc1_mr2_btn:hover{
    color: var(--tomato);
    transform: scale(1.2) rotate(180deg);
    transition: all .2s ease-in-out;
}
#mc1_mr1_inp{
    position: absolute;
    box-sizing: border-box;
    outline: none;
    height: 30px;
    width: 200px; 
    left: 88px;
    border: 3px solid var(--honeydewshade);
    background-color: var(--honeydewpale);
    /* TEXT COLOR HANDLED BY input{} ABOVE */
}

#mc1_mr1_inp:focus{
    border: 3px solid var(--tomato);
    font: var(--placeholderFont);
}

.menu{
    /* HOOK USED FOR CLICK DETECTION */
    user-select: none; 
    transition: all .3s ease-out;
}

/* big btn */
/* const saveBtn = menu.addDiv({parent: row, height: '26px', width: '70px', borderRadius: '13px', display: 'flex', justifyContent: 'center', alignItems: 'center'}); */
.menu_btn_big{
    height: 26px;
    /* this button always has text, so allow width to be determined by popupClosure */
    width: 70px;
    border-radius: 13px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_btn_big:hover{
    background-color: rgb(222,222,222);
}
.menu_btn_back{
    height: 22px;
    width: 22px;
    border-radius: 6px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: 17px;
}
.menu_btn_back:hover{
    background-color: rgb(222,222,222);
}
.menu_btn_hamburger{
    height: 25px;
    /* this button always has text, so allow width to be determined by popupClosure */
    width: 28px;
    border-radius: 6px;
    background-color: white;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transition: none;
    right: 17px;
}
.menu_btn_hamburger:hover{
    color: rgb(55%,55%,55%);
    /* background-color: rgb(222,222,222); */
}
/* older - note camelCase! */
.menuContainer{
    position: fixed;
    display: block;
    box-sizing: border-box;
    width: 350px;
    right: 0px; 
    top: 50px; 
    user-select: none;
    z-index: -1; 
    opacity: 0;
    /* background-color: var(--honeydewglass); */
    border: 1px var(--honeydewshade);
    border-style: none none solid solid;
}
.menuButton{
    display: flex;
    position: absolute;
    height: var(--sizeMenuButton);
    width: var(--sizeMenuButton);
    box-sizing: border-box;
    user-select: none;
    z-index: 1;
    color: var(--honeydewshade);
    font: var(--arial40);
    align-items: center;
    justify-content: center;
}
.menuButton:hover{
    transform: scale(1.2);
    transition: scale .2s ease-in-out;
}


.menuRow {
    display: flex;
    position: relative;
    height: 40px; 
    background-color: var(--honeydew);
    justify-content: space-between; 
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    font: var(--arial16);
    color: var(--honeydewdark);
}

.menuRow:hover{
    background-color: var(--honeydewshade);
}

.notify_row{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    user-select: none;

    background-color: white;
    /* background-color: rgba(0,0,0,.25); */
    color: black;   
    /* color: yellow; */
    height: 34px;
    font: var(--arial20);    
}

/* .notify_row:hover{
    background-color: rgb(220,220,220);
} */



#pan1{
    /* position: fixed;  */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
    background-color: honeydew;
    border: var(--panel_border);
    border-style: none none solid none;    
    height: var(--panel_height); 
    padding-left: 8px;
    padding-right: 8px;
    /* left: 0px; */
    /* right: 0px;  */
    /* top: 0px;  */
    /* bottom: 0px; */
    z-index: 2;
    user-select: none;
}

#pan1_btn1{
    font-size: 45px;
    right: 16px;
    user-select: none;
    z-index: 2;
    transition: all .2s ease-in-out; 
    color: var(--tomato);
}

/* #pan1_spacer{
    height: var(--panel_height);
} */

#panel_add:hover{
    transform: scale(1.2);
    transition: transform .2s ease-in;
}

#popup_container{
/* underlying container is used for positioning only; flexbox     */
    /* display: flex; */
    /* position: absolute; */
    position: fixed;
    z-index: 10;
    /* width: 1px;
    height: 1px; */
    /* opacity: 0;     */
    /* transition: all .6s ease-out; */
    /* border-radius: 27px; */
    /* justify-content: center; */
    /* align-items: center; */
    user-select: none;
}
.popup_row{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 50px; */
    height: 34px;
    user-select: none;    
}
.popup_text{
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px; 
    font: var(--arial16);
}

#radio_tags{
    position: relative;
    left: 7px;
}
#saveButton{
    position: absolute;
    /* border: 5px solid var(--tomato); */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center; 

    width: 70px;
    height: 30px;
    z-index: 1;
    opacity: 0;
    /* clip-path: path('M10,0 h30 Q50,0 50,10 v10 Q50,30 40,30 h-30 Q0,30 0,20 v-10 Q0,0 10,0'); */
    /* clip-path: path('M20,0 h20 Q60,0 60,15 Q60,30 40,30 h-20 Q0,30 0,15 Q0,0 20,0'); */
    /* clip-path: path('M15,0 h30 Q60,0 60,15 Q60,30 45,30 h-30 Q0,30 0,15 Q0,0 15,0'); */
    /* clip-path: path('M15,0 h30 C65,0 65,30 45,30 h-30 C-5,30 -5,0 15,0'); */
    /* clip-path: path('M20,0 h30 C70,0 70,30 50,30 h-30 C0,30 0,0 20,0'); */

    /* color: var(--honeydewtext); */
    /* color: var(--tomato); */
    font: var(--arial16);
    user-select: none; 
}

.scroll {
    white-space:nowrap;
    overflow-x:auto;
}
.scroll_label{
    position: absolute;
    color: var(--tomato, red); 
    font: 60px Arial, sans-serif;
    font-weight: bold; /*normal, lighter, bold, or a number eg ~900=bold*/
    opacity: 0; 
    user-select: none; 
}

.scroll_label:hover{
    opacity: 1;
    transition: opacity .1s ease-in;
}

#site{
    display: flex;
    box-sizing: border-box;
    justify-content: left; 
    /* justify-content: center; */
    align-items: center;
    /* font-size: 20px; */
    width: 300px;
    left: 8px;
    /* border: 1px solid rgb(216, 230, 216); */
    /* border-style: none solid none solid; */
    width: 50px;
    height: 50px;
    font: var(--arial32);
    color: var(--tomato, red);
    user-select: none;
}

#site-header-container{
    width: 100vw;
    height: 50px;
    position: fixed;
    // position: absolute;
    background-color: white;
    // border-radius: 25px;
    // opacity: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 2;
    box-shadow: 0px 0px 16px -4px gray;
 }

/* #site_menu_button{
    font: var(--arial38);
    color: black;
    z-index: 3;
    transition: all .2s ease-out;
    user-select: none;
}
#site_menu_button:hover{
    color: rgb(55%,55%,55%);
} */

#site_hamburger{
    font: var(--arial38);
    color: black;
    z-index: 3;
    transition: all .2s ease-out;
    user-select: none;
}
#site_hamburger:hover{
    /* pointer-events: none; */
    color: rgb(55%,55%,55%);
    /* color: lime; */
}

.white_to_gray{
    /* background-color: white; */
    color: black;
}
.white_to_gray:hover{
    /* background-color: rgb(222,222,222); */
    color: rgb(111,111,111);
}



.site_menu_row{
    /* const rowObj = {class: 'wall_menu_row_v1', position: 'fixed', top: rowTop + 'px', right: '16px', width: '300px', backgroundColor: bgColor, borderRadius: '27px', outline: 'solid 3px rgba(0,0,0,.025)'}; */
    position: fixed; 
    right: 16px;
    width: 300px; 
}
.site_menu_text_input{
    font: var(--arial16);
    box-sizing: border-box;
    border: none; 
    /* width: 60%; */
    /* height: 26px; */
    /* border-radius: 13px; */
    /* padding-left: 13px; */
    /* margin-right: 17px; */
    /* outline-offset: -2px; */
    /* outline: 2px solid rgb(222,222,222); */
    /* user-select: none; !USERS HAVE TO BE ABLE TO USE THE TEXT INPUT!*/ 
}

.spacer{
    /* background-color: beige; */
    height: 20px;
    /* transform: translate(0px, 60px); */
}

/* #sticky{
    min-width : 3px;
    height: 40px;
    background-color: gray;
    z-index: 3;
} */

.tag, .message{
    /* position: absolute;; */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: center; 

    /* background-color: rgb(220,220,220); */
    /* border-radius: 15px; */
    /* flex: 160px; */
    /* min-width: 160px; */
    min-height: 38px;
    /* min-height: 50px; */
    /* border-radius: 15px; */
    /* outline: 1px solid black; */
    /* background-color: white; */
    /* background-color: black; */
    /* background-color: rgba(0,0,0,0); */
    color: black;
    /* border: 1px solid black; */
    /* border: 1px solid rgb(170,170,170); */
    border: 1px solid rgb(230,230,230);
    border-style: none solid none solid;
    /* color: white; */
    /* background-color: var(--tomato); */
    /* color: var(--honeydew); */
    opacity: 1;
    font: var(--arial16);
    z-index: 1;
    user-select: none; 
    /* clip-path: path('M10,0 h30 Q50,0 50,10 v10 Q50,30 40,30 h-30 Q0,30 0,20 v-10 Q0,0 10,0'); */
    /* clip-path: path('M20,0 h20 Q60,0 60,15 Q60,30 40,30 h-20 Q0,30 0,15 Q0,0 20,0'); */
    /* clip-path: path('M15,0 h30 Q60,0 60,15 Q60,30 45,30 h-30 Q0,30 0,15 Q0,0 15,0'); */
    /* clip-path: path('M15,0 h30 C65,0 65,30 45,30 h-30 C-5,30 -5,0 15,0'); */
    /* clip-path: path('M20,0 h30 C70,0 70,30 50,30 h-30 C0,30 0,0 20,0'); */
}



.tag_highlight{
    /* setAttributes(hi, {class: 'tag_hover', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '38px', paddingSides: '20px', zIndex: 3}); */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    height: 38px;
}
.tag_highlight:hover{
    background-color: var(--honeydew);
    outline: 4px solid var(--tomato);
    outline-offset: -4px;
    border-radius: 19px;    
}
.tag_checked{
    color: var(--tomato);
    /* background-color: var(--honeydewsmudge); */
    /* border-radius: 15px; */
}

.tags_container{
    display: flex;
    flex: 100%;
    flex-direction: row; 
    flex-wrap: nowrap;   
    align-items: center; 
    overflow-y: hidden;
    scrollbar-width: none; /* firefox oval shape is destroyed without this */
    height: 50px;
    /* min-height: 50px; */
    /* max-height: 50px; */
    z-index: 2;
    color: black;
    background-color: white;
    border: 1px rgb(220,220,220);
    border-style : solid none solid none;
    user-select: none;
}

#tags_container{
    display: flex;
    flex: 100%;
    flex-direction: row; 
    flex-wrap: nowrap;   
    align-items: center; 
    overflow-y: hidden;
    scrollbar-width: none; /* firefox oval shape is destroyed without this */
    height: 50px;
    border: 1px rgb(220,220,220);
    border-style : solid none solid none;
    z-index: 2;
    user-select: none; 
}
/* #tags_container:hover{
    background-color: var(--honeydew);
    outline-offset: -2px;
    outline: 4px solid var(--tomato);
} */
#tags_editor_container{
    /* position: absolute; */
    /* position: relative; */
    display: flex;
    /* flex: 88%; */
    width: 88%;
    /* display: none; */
    flex-direction: row; 
    /* flex-direction: column;  */
    /* flex-wrap: nowrap;    */
    flex-wrap: wrap;   
    align-items: center; 
    /* object-fit: contain; */
    /* justify-content: center;     */
    justify-content: space-between;
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
    /* overflow: hidden; */
    scrollbar-width: none; /* firefox oval shape is destroyed without this */
    /* scroll-margin-inline-start: 0;  */
    /* width: 80%; */
    /* width: 88%; */
    /* left: 30%; */
    /* right: 0px; */
    /* min-height: 100px; */
    /* height: 100px; */
    height: 150px;
    border-radius: 15px;
    /* padding-left: 50px; */
    
    /* height: 200px; */
    /* bottom: 16px; */
    /* border-bottom: 16px solid yellowgreen; */
    /* margin-bottom: 16px solid cyan; */
    /* outline-offset: -3px; */
    /* outline: 3px solid red;  */

    /* right: 0px; */
    z-index: 2;
    /* background-color:  var(--honeydewthickglass); */
    background-color: white;
    /* background-color: beige; */
    /* opacity: .9; */
    /* background-color: black; */
    /* border: 5px solid gray; */
    /* outline: 3px solid white; */
    /* outline: 3px solid black; */
    /* outline-offset: -3px; */
    /* outline: 3px solid var(--tomato); */
    /* border-top: 24px solid var(--honeydew); */
    /* transition: opacity .6s linear;  */
    user-select: none; 
}
#tags_editor_header{
    display: flex;
    align-items: center;
    position: relative;
    left: 14px;
    /* background-color: aqua; */
            /* padding-left: 25px; */
    /* padding-right: 25px; */
    /* justify-content: flex-start; */
    /* left: 30px; */
    /* min-width: 100%; */
    /* min-width: 120px; */
    height: 50px;
    color: black;
    font: var(--arial22);
}
#tags_editor_header_container{
    /*  for radio button and text 'image tags'*/
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    /* width: 160px; */
    /* background-color: chartreuse; */
}
#tags_editor_text_input{
    display: flex;
    align-items: center;
    position: relative;
    right: 7px;
    /* position: absolute; */
    /* position: top 2px; */
    width: calc(50% - 25px);
    /* top: 0px; */
    /* left: 0px; */
    /* right: 50%; */
    /* width: 75%; */
    /* flex: 1; */
    height: 36px;
    border-radius: 18px;
    padding-left: 18px; /*needed to get text input offset*/
    border: none; /* text inputs create this; need to disable */
    /* border-right-style: 1px solid black; */

    /* opacity: 1; */
    /* background-color: white; */
    color: rgb(120,120,120);
    background-color: rgb(225,225,225);
    /* background-color: azure; */
    /* background-color: yellow; */
    /* user-select: none; */
    
    font: var(--arial16);
    z-index: 2;
}
#tags_editor_text_input:hover, #tags_editor_text_input:focus{
    background-color: var(--honeydew);
    /* font: var(--arial16); */
    color: var(--tomato);
    outline-offset: -2px;
    z-index: 3;
    outline: 4px solid var(--tomato);
}
/* #tags_editor_text_input:hover{
} */

#tags_editor_text_input::placeholder{
    font: var(--arial16);
    color: rgb(120,120,120);

    /* padding: '15px';
    font: var(--arial22);
    color: black;  */
    /* color: var(--honeydewdark); */
    /* color: var(--honeydew); */
    /* background-color: var(--tomato); */
    /* background-color: rgba(0,0,0,0); */

    /* user-select: none; */
}

.test_gradient{
    /* background: linear-gradient(-45deg, #60efff 0%, #0061ff 100% ); */
    /* background: linear-gradient(to bottom, lime, aqua); */
    /* transform: translate3d(0px, 20px, 0) scale(0.95); */
    /* background-color: black; */
    filter: blur(3px);
    /* opacity: var(0.7); */
    /* transition: opacity 0.3s; */
}

#text_input_ghost{
    display:flex;
    align-items: center;
    position: absolute;
    top: 12px;
    /* left: calc(50% + 16px); */
    height: 22px;
    right: calc(6% + 24px);
    font: var(--arial16);
    /* padding-left: 6px; */
    /* padding-right: 6px; */
    color: rgba(0,0,0,.25);
    /* color: white; */
    /* background-color: black; */
    /* border-radius: 11px; */
    /* outline: 1px solid rgba(0,0,0,0.3); */
    /* color: rgb(220,220,220); */
    /* background-color: rgb(120,120,120); */
    /* color: var(--honeydew); */
    /* background-color: var(--honeydewdark); */
    z-index: 3;
    user-select: none;
}

.wall_container{
    /* background-color: aqua; */
    width: calc(100%);
    /* height: 326 + 34 + bottom margin of 8 = 368*/
    /* height: 368px; */
    /* 166 + 34 + 8 = 208px */
    /* height: 208px; */
    height: 200px;
    margin-bottom: 8px;
    box-sizing: border-box;
    z-index: 1;/*when deleting a wall, javascript reduces zIndex to 0, ensuring moving walls slide over the top*/
    user-select: none;
    /* margin: 60px; */
    transition: all .3s;
}


#wall_editor_container{
 
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;


    /* justify-content: center;     */
    /* width: calc(80% - 56px); */
    /* padding-left: calc(10% + 20px); */
    /* padding-right: calc(10% + 20px);  */
    width: calc(100% - 22px);
    /* max-width: 600px; */
    padding-left: 22px;
    padding-right: 22px; 
    /* header 50 + border 1 & wall 300 + top & bottom padding 20 + 20 => 391 */
    /* height: 391px;  */
    height: 378px;
    z-index: 1; 
    background-color: rgba(0, 0, 0, .75);
    /* background-color: rgba(0,0,0,.7); */
    /* outline: 1px solid var(--honeydew); */
    /* opacity: .5; */
    border-radius: 27px;
    transition: opacity .6s ease-out;

    box-sizing: border-box;
    user-select: none;
}

.wall_editor_heading{
    /* background-color: yellow; */
    background-color: var(--tomato);
    color: var(--honeydew);
    border-radius: 15px;
    height: 45px;
    width: 240px;
    font: var(--arial22);
    user-select: none;
}

.wall_editor_buttons{
    
    height: 30px;
    color: rgb(120,120,120);
    background-color: rgb(220,220,220);
    border-radius: 15px;
    height: 30px;
    width: 80px;
    font: var(--arial16);
}
.wall_editor_buttons:hover{
    color: var(--honeydew);
    background-color: var(--tomato);
    outline: 3px solid var(--honeydew);
    outline-offset: -2px;
}


.wall_editor_row{
    /*  */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* width: 100%; */
    /* max-width: 600px; */
    width: calc(88% + 40px);
    height: 50px;
    border-radius: 15px;
    /* padding-left: calc(80% + 20px); */
    /* padding-right: calc(80% + 20px); */
    user-select: none;    
}

.wall_editor_text{
    color: black;
    background-color: white;
    font: var(--arial16);
}

.wall_editor_text_input{
    /*  */
    width: calc(50% - 18px);
    height: 34px;
    color: rgb(120,120,120);
    background-color: rgb(225,225,225);
    border-radius: 17px;
    border: none; 
    padding-left: 17px;
    font: var(--arial16);
    /* outline: 0px; */
    user-select: none;
}

.wall_editor_text_input:hover, .wall_editor_text_input:focus{
    /*  */
    /* color: var(--honeydewdark); */
    color: var(--tomato);
    background-color: var(--honeydew);
    /* border-bottom-left-radius: 0px; */
    /* border-bottom-right-radius: 0px; */
    /* height: 72px; */
    /* font: var(--arial16); */
    /* outline: 4px solid var(--honeydewdark); */
    outline: 4px solid var(--tomato);
    outline-offset: -2px;
    z-index: 2;
}
.wall_editor_text_input::placeholder{
    font: var(--arial16);
    color: rgb(120,120,120);
}



.wall_header{

/* .tagbar{ */
    /* display: flex; */
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    /* justify-content: flex-start; */
    /* align-items: center; */
    position: relative;
    height: 34px; 
    /* height: 34px;  */
    /* width: 100%; */
    /* padding-left: 8px; */
    /* padding-right: 8px; */

    background-color:black;
    /* background-color: teal; */
    /* opacity: 1; */
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    /* border-top-left-radius: 27px;
    border-top-right-radius: 27px; */
    
    box-sizing: border-box;
    user-select: none; 
}
   
.wall-image-container{
    /* SINGLE IMAGE - BACKING CONTAINER */
    /* position: flex; */
    /* top: 0px; */
    /* justify-content: center; */
    /* align-items: center; */
    /* background-color: black; */
    /* background-color: tan; */
    /* border-radius: 10px; */

    /* 230805 change height & padding */
    /* height: 326px; */
    /* height: 166px; */
    height: 100%;
    padding-top: 8px;
    /* margin-bottom: 8px; */
    /* padding-left: 8px; */
    /* padding-right: 8px; */
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    margin-right: 2px;

    box-sizing: border-box;
    user-select: none; 

    /* IOS REFLOW BUG NEEDS THIS: */
    transform: translate3d(0,0,0);
}

.wall_images_container{
/* .wall{ */
    /* ALL IMAGES IN A WALL - BACKING CONTAINER  */
    /* / */
    /* position: relative; */
    display: flex;
    flex-direction: row;     /**column, column-reverse, row, row-reverse */
    flex-wrap: nowrap;     /*wrap*/ 
    /*align-items: Y-axis: center, flex-start, flex-end, stretch (default), baseline (for text) */
    align-items: top; 
    /* align-items: center;  */

    object-fit: contain; 
    /*object-fit: scale-down; /*fill, none, contain, cover, scale-down*/
    /* box-sizing: border-box; */
    /* gap: 20px; */

    /* 230805 change padding */
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    padding-left: 4px;
    padding-right: 4px;

    width: 100%;
    /* height: 326px; */
    height: 166px;

    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    
    background-color: black; 
    /* background-color: pink;  */
    /* outline: 1px solid blueviolet; */
    /* outline-offset: 2px; */
    overflow-y: hidden;
    
    box-sizing: border-box;
    user-select: none; 
    /* transition: all .3s; */
    transform: translate3d(0,0,0);
}


.wall_menu_button{
    font: var(--arial24);
    color: white;
    transform: rotate(90deg); 
}
/* .wall_menu_button_dark{
    color: rgb(80%,80%,80%);
} */
.wall_menu_button:hover{
    /* color: var(--tomato); */
    color: rgb(80%,80%,80%);
    /* color: rgb(111,111,222); */

}
.wall_menu_button_backing{
    /* BACK & SAVE BUTTONS */
    /* const backingB = _menu.addDiv({parent: rowBS, backgroundColor: 'tan', position: 'relative', left: '20%'}); */
    /* const radioOutline = '2px solid rgb(188,188,188)'; */
    /* const radioBase = p.closure.addDiv({parent: p.parent, backgroundColor: 'white', minHeight: '26px', minWidth: '26px', borderRadius: '13px', position: 'absolute', left: '17px', outline: radioOutline, outlineOffset: '-2px', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}); */
    /* position: relative; */
    /* top: 6px; */
    /* height: 26px; */
    /* width: 26px; */
    /* border-radius: 13px; */
    /* padding-left: 13px; */
    /* padding-right: 13px; */
    /* outline: 2px solid rgb(188,188,188); */
    /* outline-offset: -2px; */
    /* user-select: none; */
    /* display: flex; */
    /* align-items: center; */

    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    justify-content: center;
    align-items: center;
    /* border-radius: 17px; */
    /* border-bottom-left-radius: 17px; */
    /* border-bottom-right-radius: 17px; */
    /* background-color: black; */
    /* background-color: white; */
    /* color: white; */
    /* color: rgb(111,111,111); */
    color: black;
    font: var(--arial19);
    height: 34px;
    /* padding-left: 17px; */
    user-select: none;
}
.wall_menu_button_backing:hover{
    background-color: rgb(222,222,222);
}
/* #wall_menu_container{ */
.wall_menu_container{

    /* // _container = _pum.create(_menuParent, {position: 'relative', top: '11px', backgroundColor: 'black', width: 'calc(100% - 44px)', borderRadius: '15px'}); */

    position: relative;
    top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    outline: 2px solid white;
    outline-offset: -2px;
    /* background-color: rgb(40,40,40); */
    /* background-color: white; */
    color: white;
    /* color: greenyellow; */
    /* color: black; */
    /* background-color: black; */
    /* background-color: red; */

    /* justify-content: center;     */
    /* width: calc(80% - 56px); */
    /* padding-left: calc(10% + 20px); */
    /* padding-right: calc(10% + 20px);  */
    width: calc(100% - 44px);
    /* max-width: 600px; */
    padding-left: 22px;
    padding-right: 22px; 
    margin-bottom: 11px;
    /* header 50 + border 1 & wall 300 + top & bottom padding 20 + 20 => 391 */
    /* height: 391px;  */
    /* 230805 TRYING SMALLER WALLS */
    /* height: 378px; */
    /* 166 + 52 = 218 */
    height: 218px;
    z-index: 1; 
    

    /* background-color: rgba(0,0,0,.75); */
    /* outline: 1px solid var(--honeydew); */
    /* opacity: .5; */
    /* border-radius: 27px; */
    border-radius: 15px;
    transition: opacity .6s ease-out;

    box-sizing: border-box;
    user-select: none;
}

/* const container = _subMenuEditTitle.create(content.container(), {width: 'calc(100%)', minHeight: '68px', backgroundColor: 'red', position: 'absolute', zIndex: 1, top: _top - 35 + 'px', left: '0px'}); */
.wall_menu_edit_title_container{
    /* background-color: red; */
    background-color: none;
    /* display: flex; */
    /* flex-direction: row; */
    /* justify-content: space-between; */
    position: absolute;
    /* width: calc(100% - 50px); */
    /* left: 25px; */
    width: 400px;
    /* left: 25px; */
    z-index: 1; /*nb! this needs to be above the menu header covering the title adn menuButton*/
}

.wall_menu_row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; 
    height: 34px;
    width: 100%;
    font: var(--arial19);
}
.wall_menu_row:hover{
    background-color: rgb(88,88,88);
    border-radius: 3px;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
    /* width: calc(100% + 44px); */
}
.wall_menu_row_v1, .wall_menu_row_v2{
    /* v2 is the same, but has no hover */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    /* background-color: black; */
    background-color: white;
    /* color: white; */
    /* color: rgb(111,111,111); */
    color: black;
    font: var(--arial20);
    /* font: var(--arial16); */
    height: 34px;
    padding-left: 17px;
    
    box-sizing: border-box;
    
}

.wall_menu_row_v2{
    /* color: red; */
    /* font: var(--arial32); */
    justify-content: center;

    /* font: var(--arial20); */
} 

.wall_menu_row_v1:hover{
    background-color: rgb(220,220,220);
}
.wall_menu_row_v3, .wall_menu_row_v4{
    /* v4 is for cards with text inputs. Eg card_share_wall at user name & email*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    /* background-color: black; */
    /* background-color: lime; */
    background-color: white;
    /* color: white; */
    /* color: rgb(111,111,111); */
    color: black;

    font: var(--arial16);
    height: 34px;
    padding-left: 51px;
    user-select: none;
}
.wall_menu_row_v3:hover, .wall_menu_row_v4:hover{
    background-color: rgb(220,220,220);
}
.wall_menu_row_v4{
    padding-left: 20px;
    padding-right: 20px;
}

.wall_menu_row_buttons{
    /* for centered BIG buttons */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-items: start;
    /* background-color: black; */
    /* border-top: solid 1px rgb(222,222,222); */
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    /* color: white; */
    /* color: rgb(111,111,111); */
    background-color: white;
    color: black;
    height: 41px;
    font: var(--arial19);
    user-select: none;
}
.wall_menu_row_buttons:hover{
    background-color: rgb(222,222,222);
}
/* .wall_menu_row_v2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    background-color: black;
    background-color: white;
    color: white;
    color: black;
    font: var(--arial19);
    height: 34px;
    width: 100%;
    border-radius: 17px;
    padding-left: 16px;
} */

.wall_menu_spacer{

    height: 34px;
    /* width: 100%; */
    /* border: 1px solid gray; */
}
.wall_menu_text_input, .wall_menu_edit_title_text_input{
    /* position: relative; */
    /* left: 50px; */
    /* right: 0px; */
    width: calc(100% - 150px);
    width: 260px;
    /* height: 30px; */
    height: 28px;

    /* color: rgb(111,111,111); */
    color: black;

    /* background-color: rgb(111,111,111); */
    /* background-color: rgb(222,222,222); */
    /* background-color: rgb(244,244,244); */
    background-color: white;
    border-radius: 15px;
    border: none; 
    padding-left: 15px;
    margin-right: 2px;
    font: var(--arial15);
    outline: 2px solid rgb(222,222,222);
    outline-offset: -2px;
    user-select: none;
}

/* .wall_menu_edit_title_text_input:hover, .wall_menu_edit_title_text_input:focus{ */
    /* color: rgb(111,111,111); */
    /* background-color: rgb(222,222,222); */
    /* outline: 4px solid rgb(111,111,111); */
    /* outline-offset: -4px; */
/* } */

.wall_menu_text_input::placeholder, 
.wall_menu_edit_title_text_input::placeholder, 
.site_menu_text_input::placeholder,
.card_width_300_text_input::placeholder{
    font: var(--arial15);
    color: rgb(111,111,111);
}
.wall_menu_text_input:hover{
    background-color: rgb(244,244,244);
    /* color: black; */
}
.wall_title{
/* .tagbar_heading{ */
    /* font-family: 'Arial', sans-serif;  */
    /* font-size: 20px;  */
    position: relative;
    font: var(--arial22);
    color: white;
    padding-left: 20px;
    /* top: 10px; */
    /* color: black; */
    /* color: var(--honeydewsmudge); */
    /* color: tomato; */
    /* font-weight: bold; */
    user-select: none;
}
    

.white_and_black{
    color: white;
    background-color: black;
    /* outline: 1px solid yellow; */
    /* outline-offset: -1px; */
    /* border-bottom: 3px solid gray; */
}

/* #text_input_ghost:hover{
    color: var(--honeydew);
    background-color: var(--tomato);
    
} */

/* .invisible_scrollbar::-webkit-scrollbar {
    display: none;
} */
/* ::-webkit-scrollbar {
    display: none;
} */

.ticker-wrap {
    overflow: hidden;
    position: relative;
}

.ticker {
    display: flex;
    position: absolute;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

.ticker__item {
    padding: 0 30px;
}

@keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}