.site-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    font-family: Calibri;
    scrollbar-width: thin;
    scrollbar-color: #afcff2 rgb(221, 216, 216, 0.20);
}
.site-wrap-ios-pad {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    bottom: 15px;
    overflow: hidden;
    font-family: Calibri;
    scrollbar-width: thin;
    scrollbar-color: #afcff2 rgb(221, 216, 216, 0.20);
}
.site-wrap-ios-phone {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    bottom:0;
    overflow: hidden;
    font-family: Calibri;
    scrollbar-width: thin;
    scrollbar-color: #afcff2 rgb(221, 216, 216, 0.20);
}
.div-liner{
    position:absolute;
    top:10px;
    bottom:10px;
    left:10px;
    right:10px;
}
.div-label{
    position:absolute;
    top:-2px;
    left:4px;
    height:20px;
    min-width:100px;
    font-size:12px;
    padding-left:8px;
    padding-right:8px;
    padding-top:2px;
    color:white;
    background-color:#4B91F7;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    box-shadow:4px 4px 4px #0d0d0d8c;
}
.div-label-tab-wrapper {
    position: absolute;
    top: -2px;
    left: 4px;
    right:4px;
    height: 20px;
    margin:0;
    padding:0;
}
.div-label-tab-active {
    position: relative;
    display:inline-block;
    margin-left:4px;
    margin-top:0;
    height: 20px;
    min-width: 100px;
    font-size: 12px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    color: white;
    background-color: #4B91F7;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 4px 4px 4px #0d0d0d8c;
    cursor:pointer;
}
.div-label-tab-inactive {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    margin-top: 0;
    height: 20px;
    min-width: 100px;
    font-size: 12px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    color: white;
    background-color: #2e538a;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 1px 1px 1px #0d0d0d8c;
    cursor: pointer;
}
.bool-toggle-wrapper {
    position: relative;
    display: inline-block;
    top: 5px;
    min-height: 25px;
    min-width: 52px;
    max-height: 25px;
    max-width: 52px;
    padding: 0;
    margin: 0;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    border-radius:12px;
    background-color:rgb(177,177,196);
    cursor:pointer;
}
.bool-toggle-switch-on {
    position: absolute;
    width: 21px;
    height: 19px;
    left: 27px;
    top: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: #54dd63;
    border-radius: 10px;
}
.bool-toggle-switch-off {
    position: absolute;
    width: 21px;
    height: 19px;
    left: 2px;
    top: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.bool-toggle-label-on {
    position: absolute;
    left: 4px;
    width: 10px;
    top: 0;
    height: 20px;
}
.bool-toggle-label-off {
    position: absolute;
    left: 25px;
    width: 10px;
    top: 0;
    height: 20px;
}
.alt-signon-button-wrapper{
    position:absolute;
    top:220px;
    right:100px;
    height:35px;
    width:185px;
}
.alt-signon-button {
    background-color:transparent;
    border: 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat,sans-serif;
    font-size: .9em;
    margin: 5px;
    padding: 10px 15px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    position: relative;
    float: right;
    min-height: 35px;
    max-height: 35px;
    min-width: 35px;
    max-width: 35px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-size: 35px 35px;
}
.apple{
    background-image:url('images/apple-logo.png');
}
.google{
    background-image:url('images/google-logo.png');
}
.facebook{
    background-image:url('images/facebook-logo.png');
}
.windows{
    background-image:url('images/windows-logo.png');
}
.green{
    background-color:#5ac10b;
}
.red {
    background-color: #f13a3a;
}
.yellow {
    background-color: #efec35;
}
.blue {
    background-color: #4B91F7;
}
.brick-grey {
    background-color: #CDC7C7;
}
.rounded{
    border-radius:4px;
}
.shadowed {
    box-shadow: 4px 4px 4px #0d0d0d8c;
}
.div-selected{
    box-shadow:8px 8px 8px #00000069;
}
.li-selected{
    background-color:aqua;
}
.site-background {
    position: absolute;
    background-image: url('images/WhiteWashedBrickwall.jpg');
    background-repeat: repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.site-background-ios {
    position: absolute;
    background-image: url('images/WhiteWashedBrickwall.jpg');
    background-repeat: repeat;
    top: -47pt;
    left: 0;
    right: 0;
    height: 110%;
    overflow: hidden;
}
.grey-out{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#00000069;
}
.animated-loader {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 400px;
    height: 300px;
    transform: translate(-200px, 0);
    background-image:url(images/bricks.gif);
    background-repeat:no-repeat;
    background-size:contain;
    border-radius: 64px 64px;
    box-shadow:16px 16px 16px #000000;
    opacity:.8;
}
.site-logo {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1.0;
    top: 30px;
    left: 50%;
    width: 289px;
    height: 205px;
    transform: translate(-144px, -102px);
    background-image: url('images/logoSimplified2.png');
    animation-name: none;
    animation-fill-mode: unset;
}

.content-window-wrap {
    position: absolute;
    top: 60px;
    left: 50%;
    bottom: 50px;
    background-size: contain;
    opacity: 1.0;
    background-image: url('images/Glass_Smoke.png');
    border: 2px solid #beb9b9;
    border-radius: 8px 8px 8px;
    max-width: 970px;
    min-width: 970px;
    transform: translate(-485px, 0);
}
/*.site-logo {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1.0;
    width: 450px;
    height: 319px;
    transform: translate(-550px, 0);
    top: -120px;
    left: 50%;
    background-image: url('images/logoSimplified.png');*/
    /*    opacity: 0.0;
    top: 25%;
    left: 50%;
    width: 450px;
    height: 319px;
    transform: translate(-225px, -159.5px);
    background-image: url('images/logoInverted.png');
    animation-name: logo-melt1, logo-melt2, logo-melt3;
    animation-delay: 1s, 1s, 2s;
    animation-duration: 1s;
    animation-iteration-count: initial;
    animation-fill-mode: forwards;*/
/*}

@keyframes logo-melt1 {
    to {
        opacity: 1.0;
        top: 25%;
        left: 50%;
        width: 450px;
        height: 319px;
        transform: translate(-225px, -159.5px);
        background-image: url('images/logoInverted.png');
    }
}
@keyframes logo-melt2 {
    to {
        opacity: 1.0;
        top: 25%;
        left: 50%;
        width: 450px;
        height: 319px;
        transform: translate(-225px, -159.5px);
        background-image: url('images/logoInverted.png');
    }
}
@keyframes logo-melt3 {
    to {
        opacity: 1.0;
        width: 450px;
        height: 319px;
        transform: translate(0, 0);
        top: -120px;
        left: -75px;
        background-image: url('images/logoSimplified.png');
    }
}

.content-window-wrap {
    position: absolute;
    top: 115px;
    left: 50%;
    bottom: 50px;
    background-size: contain;
    opacity: 1.0;
    background-image: url('images/Glass_Smoke.png');
    border: 2px solid #beb9b9;
    border-radius: 8px 8px 8px;
    max-width: 970px;
    min-width: 970px;
    transform: translate(-485px, 0);
}

@keyframes content-entrance1 {
    to {
        opacity: 0,0;
        background-image: none;
        border: none;
    }
}
@keyframes content-entrance2 {
    to {
        opacity: 1.0;
        background-image: url('images/Glass_Smoke.png');
        border: 2px solid #beb9b9;
        border-radius: 8px 8px 8px;
    }
}*/
.thumb-menu-wrapper{
    position:absolute;
    background-color:white;
    border-top:solid 1px #C0C0C0;
    bottom:0;
    left:0;
    right:0;
    height:50px;
    padding:0;
    margin:0;
}
.thumb-menu-inner-center{
    position:absolute;
    padding:0;
    margin:0;
    top:0;
    bottom:0;
    left:50%;
}
.thumb-menu-item {
    position: relative;
    display: inline-block;
    background-color: white;
    border-right: solid 1px rgb(221, 216, 216);
    min-height: 50px;
    max-height: 50px;
    min-width: 50px;
    max-width: 50px;
    color: dimgrey;
    margin-right: 2px;
    text-align: center;
    font-size: 28px;
    cursor: pointer;
}
.thumb-menu-item-selected {
    position: relative;
    display: inline-block;
    /*background-color:lavender;*/
    border-right: solid 1px rgb(221, 216, 216);
    min-height: 50px;
    max-height: 50px;
    min-width: 50px;
    max-width: 50px;
    color: #4B91F7;
    margin-right: 2px;
    text-align: center;
    font-size: 28px;
}
.thumb-menu-label {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 10px;
    font-size: 8px;
    text-align: center;
    color: dimgrey;
}
.thumb-menu-label-selected {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 10px;
    font-size: 8px;
    text-align: center;
    color: #4B91F7;
}
.thumb-menu-alert {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 15px;
    width: 15px;
    background-image: url('images/Alert.png');
    background-repeat: no-repeat;
    background-size: contain;
    animation: flashOpacity 4s infinite;
}
@keyframes flashOpacity {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}
.small-pop {
    position: fixed;
    background-color: white;
    top: -500px;
    left: 50%;
    width: 300px;
    height: 400px;
    transform: translate(-150px, 0);
    border-radius: 16px;
    box-shadow: 1px 1px 1px #12101091;
    opacity: 0.0;
    animation-name: small-pop-entrance1, small-pop-entrance2;
    animation-duration: 1s;
    animation-delay: 0s, 1s;
    animation-iteration-count: initial;
    animation-fill-mode: forwards;
}

@keyframes small-pop-entrance1 {
    to {
        opacity: 0,0;
    }

    to {
        opacity: 1.0;
        top: 15%;
    }
}

@keyframes small-pop-entrance2 {
    to {
        box-shadow: 32px 32px 32px #12101091;
    }
}

.button-10 {
    display: inline-block;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    border-radius: 6px;
    border: none;
    color: #fff;
    background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
    background-origin: border-box;
    box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-10:focus {
    box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
    outline: 0;
}

.button-70 {
    background-image: linear-gradient(#0dccea, #0d70ea);
    border: 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat,sans-serif;
    font-size: .9em;
    margin: 5px;
    padding: 10px 15px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.clean-input {
    border-top: 1px solid #00000069;
    border-left: 1px solid #00000069;
    box-shadow: 2px 2px 2px #0d0d0d8c;
    margin-bottom: 10px;
    border-radius: 4px;
}
.clean-input:focus {
    box-shadow: 8px 8px 8px #0d0d0d8c;
    
}

.full-text{
    position: relative;
    min-width: 94%;
    max-width: 94%;
    height: 30px;
}

.half-text{
    position: relative;
    min-width: 46%;
    max-width: 46%;
    height: 30px;
    margin-right:9px;
}

.message-pop-over {
    position: absolute;
    color: black;
    text-align: center;
    left: 5px;
    right: 5px;
    bottom: 80px;
    height: 50px;
    border-radius: 8px;
    animation-name: show-and-hide;
    animation-duration: 5s;
    animation-iteration-count: initial;
    animation-fill-mode: forwards;
}

@keyframes show-and-hide {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.content-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.social-control-bar {
    position: relative;
    width: 100%;
    height: 50px;
    border-top: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    background-color: #E1E1E1;
}
.social-post {
    position: relative;
    text-align: center;
    border-bottom: 2px solid #c0c0c0;
    margin-bottom:10px;
    margin-left:30px;
    margin-right:30px;
    height:fit-content;
    padding:10px;
}
.social-post-head {
    position: relative;
    left: 50%;
    max-width: 400px;
    min-width: 400px;
    min-height: 50px;
    max-height: 50px;
    margin-bottom:5px;
    transform: translate(-200px, 0);
}
.social-post-inner {
    position: relative;
    max-width: 400px;
    min-width: 400px;
    left: 50%;
    transform: translate(-200px, 0);
    padding: 10px;
    margin-bottom:15px;
    background-color: #FFFFFF90;
}
.post-response {
    position: relative;
    text-align: center;
    border-bottom: 2px solid #c0c0c0;
    margin-bottom: 24px;
    padding: 10px;
    background-color: #62606010;
/*    margin-left: 30px;
    margin-right: 30px;*/
}
.establishment-profile-image {
    position: absolute;
    height: 35%;
    width: 50%;
    top: 0;
    right: 0;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
}

.establishment-profile-blurb {
    top: 0;
    left: 0;
    right: 5px;
    height: 35%;
    width: 50%;
    overflow: auto;
    background-color: #ffffffcf;
    border-radius: 8px;
}
.establishment-profile-menu-wrapper{
    position:absolute;
    top:310px;
    left:0;
    right:0;
    bottom:0;
}
.establishment-profile-secondary-wrapper
{

}
.establishment-profile-tabs {
    position: relative;
    top: 1%;
}
.social-container{
    position:absolute;
    top:250px;
    bottom:0px;
    width:100%;
}
.menu-crumb-wrapper {
    position: relative;
    min-height: 25px;
    min-width: 250px;
}
.menu-crumb-item{
    cursor:pointer;
    background-color:#466add;
    padding-right:6px;
    padding-left:6px;
    margin-right:4px;
    margin-top:4px;
    border-radius:20px;
    color:white;
    font-size:larger;
}
.hamburger-button {
    position: absolute;
    top: 8px;
    right: 5px;
    width: 45px;
    height: 45px;
    background-image: url('images/hamburger.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.hamburger-menu {
    position: absolute;
    background-color: white;
    border: solid 1px #808080;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    top: 55px;
    bottom: 25px;
    right: 5px;
    width: 300px;
}


.menu-list {
    background-color:white;
    cursor:pointer;
}
.menu-list:hover {
    background-color:cornflowerblue;
}
.menu-list-item-lg {
    font-size:22px;
    margin-right:10px;
}

.top-right-controls{
    position:absolute;
    top:0;
    right:0;
}
.admin-content{
    position:absolute;
    top:75px;
    bottom:5px;
    right:5px;
    left:5px;
    background-color:#ffffffe5;
    border-radius:8px;
    overflow:auto;
}
.tile-control-box {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 170px;
}
.tileable-box {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
}
.tile-item{
    display:inline-block;
    max-width:100px;
    max-height:100px;
    min-height:100px;
    min-width:100px;
    margin:10px;
    background-repeat:no-repeat;
    background-size:contain;
}
.tile-item-preview-wrap {
    position:absolute;
    width: 400px;
    height: 430px;
    border-radius:8px;
}
.tile-item-preview {
    position:absolute;
    top:30px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}
.tile-list{
    display:inline-block;
    margin:0;
    min-width:300px;
    max-width:300px;
    border-bottom:solid 1px #C0C0C0;
}
/*Admin Pages*/
.admin-allowed{
    visibility:visible;
}
.admin-back {
    background-color: rgb(221, 216, 216, 0.20);
}
.admin-back-opaque {
    background-color: rgb(221, 216, 216);
}
.admin-establishment-profile-image {
    position: absolute;
    height: 260px;
    width: 475px;
    top: 0;
    right: 0;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.admin-establishment-profile-blurb {
    position: absolute;
    top: 0;
    left: 0;
    right: 5px;
    height: 400px;
    width: 50%;
    overflow: auto;
    background-color: #ffffffcf;
}

/*AdminMenu*/
.admin-menu-wrap{
    position: absolute;
    top: 15px;
    left: 0;
    right:0;
    bottom:0;
    padding: 4px;
    margin: 0;
    overflow-y: auto;
    overflow-x:hidden;
    scrollbar-width: thin;
}
.admin-menu-left {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 5px;
}
.admin-menu-right {
    position: absolute;
    top: 25px;
    right: 60px;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #12101091;
}
.admin-menu-right-full {
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #12101091;
}
.admin-menu-item-basic{
    position:relative;
    min-height:40px;
    max-height:40px;
    right:5px;
    background-color:#C0C0C0;
    border:1px solid #12101091;
    margin-bottom:8px;
    cursor:pointer;
}
.admin-menu-item-selected{
    background-color:#9099e4;
}
.admin-menu-type-label{
    position:absolute;
    left:5px;
    top:1px;
    height:15px;
    width:200px;
    font-size:12px;
    font-style:italic;
}
.admin-menu-label {
    position: absolute;
    left: 5px;
    bottom: 4px;
    height: 20px;
    width: 250px;
    font-size: 18px;
}
.admin-menu-control-container{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:140px;
}
.admin-menu-sub-wrap{
    position: absolute;
    top: 15px;
    right: 0;
    width: 465px;
    padding: 0;
    margin: 0;
}
.admin-menu-sub-section{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}
.admin-menu-left-edit-wrap{
    position: absolute;
    top: 25px;
    left: 0;
    width: 465px;
    padding: 4px;
    margin: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.admin-menu-right-edit-wrap{
    position: absolute;
    top: 25px;
    right: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}
.admin-edit-liner{
    position:absolute;
    top:10px;
    left:20px;
    right:10px;
    bottom:10px;
    
}
.admin-selection-list-box {
    position: absolute;
    background-color:white;
    left:0;
    top:30px;
    bottom:0;
    right:0;
    border: 1px solid #12101091;
    overflow: auto;
}

.admin-sub-section-control-box{
    position:absolute;
    top:0;
    right:0;
    height:25px;
    width:75px;
    padding:0;
    margin:0;
}
.admin-sub-section-control-button {
    position: relative;
    padding: 0;
    float: right;
    min-height: 25px;
    min-width: 25px;
    max-height: 25px;
    max-width: 25px;
    font-size:22px;
    cursor:pointer;
}
.admin-sub-section-central-control-box {
    position: absolute;
    top: 5px;
    right:5px;
    height: 45px;
    width: 150px;
    padding: 0;
    margin: 0;
}
.admin-sub-section-central-control-button {
    position: relative;
    padding: 0;
    margin:2px;
    float: right;
    min-height: 45px;
    min-width: 45px;
    max-height: 45px;
    max-width: 45px;
    font-size: 30px;
    cursor: pointer;
    text-align:center;
    margin-left:0;
    margin-bottom:10px;
}
.admin-campaign-item{
    position:relative;
    min-height:60px;
    max-height:60px;
    min-width:100%;
    max-width:100%;
    margin-bottom:5px;
    font-size:18px;
    border-bottom:1px solid #C0C0C0;
    background-color:transparent;
    cursor:pointer;
}
.admin-campaign-item:hover {
    background-color: #afcff2;
}
.admin-campaign-section{
    position:absolute;
    width:50%;
    height:50px;
    margin:0;
    padding:0;
}
.admin-campaign-button {
    position: absolute;
    top: 5px;
    max-width: 50px;
    text-align: left;
    font-size: 22px;
}
.admin-campaign-button-location{
    right:5px;
}
.admin-campaign-button-people {
    right: 60px;
}
.menu-image {
   position: relative;
   display: inline-block;
   min-width: 425px;
   max-width: 425px;
   min-height: 215px;
   max-height: 215px;
   margin: 2px;
   padding: 0;
   background: rgb(177,177,196);
   background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
   border-radius: 8px;
   background-repeat: no-repeat;
   background-size: contain;
}
.menu-thumb-detail {
    position: relative;
    display: inline-block;
    min-width: 425px;
    max-width: 425px;
    min-height: 100px;
    max-height: 100px;
    margin: 2px;
    padding: 0;
    background: rgb(177,177,196);
    background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.menu-thumb-label {
    position: relative;
    display: inline-block;
    min-width: 425px;
    max-width: 425px;
    min-height: 100px;
    max-height: 100px;
    margin-left: 25px;
    padding: 0;
    background: rgb(177,177,196);
    background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.menu-square-thumb-label {
    position: relative;
    display: inline-block;
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    max-height: 100px;
    margin: 2px;
    margin-left:50px;
    padding: 0;
    background-color:transparent;
    background-size:contain;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.menu-article {
    position: relative;
    display: inline-block;
    min-width: 96%;
    max-width: 96%;
    margin: 2px;
    padding: 0;
    /*background-color: #beb9b9a1;*/
    background: rgb(177,177,196);
    background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
}
.menu-article-expanded {
    position: relative;
    display: inline-block;
    min-width: 96%;
    max-width: 96%;
    margin: 2px;
    padding: 0;
    background: rgb(177,177,196);
    background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
}

.menu-article-admin {
    position: relative;
    display: inline-block;
    min-width: 50%;
    max-width: 50%;
    min-height: 300px;
    margin: 2px;
    padding: 0;
    background: rgb(177,177,196);
    background: radial-gradient(circle, rgba(177,177,196,1) 0%, rgba(221,216,216,1) 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.scale-down {
    scale: 0.8;
}
.child-menu-image{
    background-image:url(images/ImageMenu.png)
}
.child-menu-thumb-label {
    background-image: url(images/ThumbLabelMenu.png)
}
.child-menu-uber-thumb-label {
    background-image: url(images/UberThumbLabelMenu.png)
}
.child-menu-thumb-detail {
    background-image: url(images/ThumbDetailMenu.png)
}
.child-menu-square-thumb-label {
    background-image: url(images/SquareThumbAndLabelMenu.png)
}
.child-menu-uber-square-thumb-label {
    background-image: url(images/UberSquareThumbAndLabelMenu.png)
}
.child-menu-square-thumb-detail {
    background-image: url(images/SquareThumbAndDetailMenu.png)
}
.child-menu-article {
    background-image: url(images/ArticleMenu.png)
}
.label-55 {
    font-size: 55px;
    top: 0;
}
.label-50 {
    font-size: 50px;
    top: 4px;
}

.label-44 {
    font-size: 44px;
    top: 6px;
}

.label-32 {
    font-size: 32px;
    top: 22px;
}

.label-28 {
    font-size: 28px;
    top: 24px;
}
.label-22 {
    font-size: 22px;
    top: 24px;
}
.menu-thumb-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color:transparent;
}
.menu-thumb-detail-head {
    position: absolute;
    top: 0;
    right: 0;
    left: 105px;
    height: 35px;
}
.menu-thumb-detail-message {
    position: absolute;
    top: 35px;
    right: 0;
    left: 105px;
    height: 65px;
}
.menu-thumb-label-head {
    position: absolute;
    right: 0;
    left: 110px;
    height: 65px;
    
}
.menu-square-thumb-detail-head {
    position: absolute;
    bottom: 18px;
    right: 0;
    left: 0;
    height: 24px;
    text-align: center;
    font-size: 18px;
    background-color:#fcfafae2;
}

.menu-square-thumb-detail-message {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 20px;
    text-align: center;
    font-size: 14px;
    background-color: #dddff8ba;
}

.menu-square-thumb-label-head {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 25px;
    text-align: center;
    font-size: 18px;
    color:white;
    background-color: #121010;
}

.menu-thumb-image-lg {
    position: relative;
    display:inline-block;
    top: 0;
    left: 0;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

.menu-article-head {
    position: relative;
    display: inline-block;
    top: -40px;
    left: 10px;
    padding: 0;
    font-size: 32px;
    min-height:75px;
    max-height:75px;
    margin-bottom: 0;
}
.menu-article-body {
    position: relative;
    display: inline-block;
    background-color: white;
    color: black;
    left: 0;
    min-width:100%;
    margin-top: 0;
    min-height: 75px;
    max-height: 75px;
    padding: 10px;
}
.menu-article-body-expanded {
    position: relative;
    display: inline-block;
    background-color: white;
    color: black;
    left: 0;
    min-width: 100%;
    margin-top: 0;
    min-height: 100px;
    padding: 10px;
}
.see-more-link{
    font-style:italic;
    color:#949191;
}
.menu-edit-controls {
    position: relative;
    display: inline-block;
    font-size: 22px;
    top: 0;
    min-width: 45px;
    max-width: 45px;
    min-height: 45px;
    max-height: 45px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
}
.menu-edit-button {
    position: relative;
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: solid 1px rgb(177,177,196);
    float: right;
    top: 0;
    right: 2px;
    min-height: 100%;
    max-height: 100%;
    min-width: 34px;
    max-width: 34px;
    padding: 0;
    margin-left: 4px;
    color: #3946d8;
    font-size: 23px;
    cursor: pointer;
}
.hover-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.0;
}
.hover-control:hover{
    opacity:1.0;
    background-color:#00000008;
}
.seriously-selected{
    position:relative;
    display:inline-block;
    top:-15px;
    min-height:150px;
    max-height:150px;
    min-width:125px;
    max-width:125px;
    background-image:url(images/left-orange-arrow.gif);
    background-repeat:no-repeat;
    background-size:50px;
    background-position-y:25px;
}

#myMap {
    position:absolute;
    top:75px;
    right:0;
    left:0;
    bottom:150px;
}

#mapControl {
    position: absolute;
    background-color: deepskyblue;
    bottom: 0;
    left:0;
    right: 0;
    height:150px;
}

.uber-logo{
    background-image:url(images/Uber.png);
}

/*Profile Section*/
.profile-container {
    position: absolute;
    top: 35px;
    bottom: 5px;
    width: 500px;
    left: 50%;
    transform: translate(-250px, 0);
    overflow: auto;
}
.profile-bio {
    position:relative;
    min-width: 95%;
    max-width: 95%;
    min-height: 300px;
    max-height: 300px;
    background-color: #FFFFFF;
    overflow: auto;
    color: black;
    text-align: center;
}
/*Profile Section*/

        table {
            width: 100%;
            border-collapse: collapse;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        th,
        td {
            padding: 15px;
            color: #fff;
        }
        
        th {
            text-align: left;
        }
        
        thead {
            th
        
        {
            background-color: #55608f;
        }
        
        }

        tbody {
            tr
        
        {
            &:hover
        
        {
            background-color: #C0C0C0;
        }
        
        }
        
        tr {
            background-color: #807E7F;
        }
        
        td {
            position: relative;
            &:hover
        
        {
            &:before
        
        {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -9999px;
            bottom: -9999px;
            background-color: rgba(255,255,255,0.2);
            z-index: -1;
        }
        
        }
        }
        }

/*Admin User Group Page*/
.fifty-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 49.9%;
    border-bottom: solid 1px #000000;
}

.fifty-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 49.9%;
    border-top: solid 1px #000000;
}
.fifty-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    padding: 25px;
    border-right: solid 1px #C0C0C0;
}
.fifty-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    padding: 25px;
    border-left: solid 1px #C0C0C0;
}
.selection-label {
    position: absolute;
    top: 0;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 30px;
}

.select-box{
    position:absolute;
    top:30px;
    right:5px;
    bottom:5px;
    border:solid 1px #000000;
    overflow-y:auto;
}
.chooser-button {
    position:absolute;
    top:50%;
    left:50%;
    width:60px;
    height:50px;
    font-size:26px;
}

.qr-confirm-bubble{
    position:absolute;
    display:none;
    top:25px;
    left:25px;
    bottom:25px;
    right:25px;
    background-color:#27a319;
    border-radius:8px;
    box-shadow:4px 4px 4px #C0C0C0;
}
.qr-confirm-message {
    position: relative;
    top: 10px;
    left: 5px;
    min-width: 98%;
    max-width: 98%;
    height: 30px;
    font-size: 24px;
    color: black;
    text-align: center;
}
.qr-negative-message{
    position:absolute;
    display:none;
    bottom:0;
    right:0;
    left:0;
    height:25px;
    background-color:#b14747;
}
.qr-scan-button {
    position: absolute;
    bottom: 10px;
    width: 200px;
    height: 200px;
    left: 50%;
    background-image: url('images/StartQRScan.png');
    background-repeat: no-repeat;
    transform: translate(-100px, 0);
}
.qr-confirm-button {
    position: relative;
    top: 50px;
    left: 5px;
    right: 5px;
    height: 30px;
}
.qr-gift-bubble {
    position: absolute;
    top: 25px;
    left: 25px;
    bottom: 25px;
    right: 25px;
    background-color: #27a319;
    border-radius: 8px;
    box-shadow: 4px 4px 4px #C0C0C0;
}
.qr-gift-message {
    position: relative;
    top: 10px;
    left: 5px;
    min-width: 98%;
    max-width: 98%;
    height: 30px;
    font-size: 24px;
    color: black;
    text-align: center;
}
.gold-coin {
    position: absolute;
    background-image: url('images/GoldPointsCoin.png');
    bottom: 5px;
    right: 5px;
    width: 80px;
    height: 80px;
    padding-top: 20px;
    text-align: center;
    font-size: 26px;
    color: darkblue;
    border-radius: 40px;
}

.pay-with-crypto-pop {
    position: absolute;
    top: 25px;
    left: 25px;
    bottom: 25px;
    right: 25px;
    background-color: #27a319;
    border-radius: 8px;
    box-shadow: 4px 4px 4px #C0C0C0;
}
.pay-with-crypto-detail {
    position: absolute;
    top: 33px;
    left: 5px;
    right:5px;
    height: 50px;
    font-size: 24px;
    color: black;
    text-align: center;
}
.pay-with-crypto-tip {
    position: absolute;
    top: 100px;
    left: 5px;
    right: 5px;
    height: 120px;
    font-size: 24px;
    color: black;
    text-align: center;
}
.pay-with-crypto-tip-button{
    position:relative;
    display:inline-block;
    margin-right:15px;
    margin-top:15px;
    min-height:30px;
    min-width:60px;
    background-color:rgba(255, 255, 255, 0.2);
    border-radius:8px;
    color:white;
    cursor:pointer;
}
.pay-with-crypto-tip-button:hover{
    box-shadow:4px 4px 4px white;
}

/*the following is an experiment to get the tiles looking better*/
.tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 15px;
}

.tile {
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

    .tile:hover {
        transform: translateY(-3px);
    }

    .tile img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Square tile fixed ratio */
    .tile.square {
        aspect-ratio: 1 / 1;
    }

    /* Double width tile spans two columns */
    .tile.double {
        display: flex;
        flex-direction: row;
        grid-column: span 2;
        min-height: 100%;
    }

        /* Double tile - common image */
        .tile.double img {
            width: 50%;
            object-fit: cover;
            height: 100%;
        }

        /* Double tile - centered text style */
        .tile.double.centered-text .text {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 10px;
        }

        /* Double tile - header + body text */
        .tile.double.text-block .text {
            width: 50%;
            padding: 10px;
        }

        .tile.double.text-block h4 {
            margin: 0 0 5px;
            font-size: 1em;
            font-weight: bold;
        }

        .tile.double.text-block p {
            margin: 0;
            font-size: 0.9em;
            line-height: 1.3em;
        }
.square-content {
    position: relative;
    width: 100%;
    height: 100%;
}
.tile-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: black;
    background-color: #FFFFFFAA;
    font-size: 0.9em;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}
.tile.full.auto-height {
    grid-column: 1 / -1;
    display: block; /* or flex/column depending on layout */
    padding: 0;
}

/* Inner content container */
.full-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.overlay-text {
    padding: 15px;
    color: #333;
}

    .overlay-text h2 {
        margin-top: 0;
    }

    .overlay-text p {
        margin-bottom: 0;
    }


    .share-menu-image{
        background-image:url('images/share.png');
    }

.share-pop {
    position: absolute;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    top: 150px;
    left: 25px;
    right: 25px;
    bottom: 10px;
    border-radius: 8px 8px 8px;
    background-color: white;
    box-shadow: 8px 8px 8px #12101091;
    text-align: center;
    font-size: 26px;
}



.share-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.share-btn {
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 16px;
    padding: 15px 20px;
    width: 100px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.1s ease;
}

    .share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(0,0,0,0.15);
    }

    .share-btn i {
        font-size: 2rem;
        color: #007bff;
    }

    .share-btn span {
        font-size: 0.85rem;
        color: #333;
    }
    .share-btn.selected {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }

        .share-btn.selected i {
            color: #0056b3;
        }

        .share-btn.selected span {
            font-weight: bold;
            color: #0056b3;
        }