body{
    user-select:none;
}

.show {
    visibility: visible;
}

.hide {
    visibility: hidden;
}

.clickable{
    cursor:pointer;
}

.loadinganimation {
    background-image: url('../images/loadingsquares.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

estimateboard {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    position: relative;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--dynamicvh, 1vh) * 100);
}

banner {
    height: 2rem;
    display: flex;
    width: 100%;
    background-color: #fffffe;
    align-items: center;
    border-bottom: 1px solid #ccc;
    z-index: 9999;
}



.sitelogo {
    background-image: url('../images/candyjar.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 1rem;
    width: 1rem;
    display: grid;
    align-items: center;
    cursor: pointer;
    flex-shrink: 2;
}

.sitetitle {
    color: #444;
    cursor:pointer;
}

.infoarea {
    flex-grow: 4;
    text-align: right;
    display: grid;
    grid-template-columns: .7rem auto .7rem;
    justify-content: right;
    position: relative;
    padding-right: .2rem;
}

.tokenimage {
    height: .7rem;
    width: .7rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.tokenfacilitator {
    background-image: url('../images/filledcrown.svg');
}

.tokenspectator {
    background-image: url('../images/operaglasses.svg');
}

.tokenestimatoron {
    background-image: url('../images/checked.svg');
}

.tokenestimatoroff {
    background-image: url('../images/check.svg');
}

.tokenleftover {
    background-image: url('../images/emptycrown.svg');
}

.tokenname {
    flex-shrink: 1;
    text-align: left;
    font-size: .7rem;
    padding: 0 .2rem 0 .2rem;
}

.participantactionstrigger {
    height: .8rem;
    width: .8rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/threesquares.svg');
    cursor: pointer;
    margin-left: 0rem;
}

.participantactionscontainer {
    display: none;
    position: absolute;
    right: .1rem;
    top: 2.1rem;
    background-color: #fff;
    border-radius: .1rem;
    border: 1px solid var(--whatever);
    padding: .2rem 0 .2rem 0;
}

menubanner {
    display: none;
}

#AllowCustomName_Container{
    width:60%;
}

.customnameentrycontainer {
    /*display: grid;
    justify-content: right;*/
    /*background-color: red;*/
    position:relative;
}

.customnameentryinputcontainer {
    
    /*background-color: blue;*/
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--alsoran);
    width: 100%;
    /*border-radius:.2rem;*/
}

.customnameentry{
    border:0;
    border:none;
    outline:none;
    font-size:.8rem;
    width:100%;
}

.customnamesubmit {
    /*position: absolute;*/
    /*right: 0px;*/
    /*margin:auto;
    font-size: 1.2rem;
    height: 2rem;
    width: 9rem;
    border-radius: 1rem;
    border: .2rem solid #222;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
    place-items: center;*/
    /*margin: 0 .5rem 0 .5rem;*/
    /*background-color: var(--whatdoyouwant);
    color: #fff;*/
    margin:auto !important;
}

    .customnamesubmit.hidebutton {
        visibility:hidden !important;
    }

/*    .customnamesubmit:hover {
        background-color: var(--whatdoyouwant);
        color: #fff;
    }*/


.menusitelogo {
    display:none;
}

.menusitetitle {
    display:none;
}

    .participantactionscontainer banner {
        /*visibility: hidden;*/
        display: none;
    }

.participantactionitem {
    /*font-size: .5rem;*/
    display: grid;
    grid-template-columns: .9rem auto;
    padding: .3rem .2rem .3rem .2rem;
    cursor: pointer;
    font-size: .6rem;
    line-height: .6rem;
}

    .participantactionitem:hover {
        background-color: var(--lookatme);
    }

.participantactionitemheader {
    font-size: .5rem;
    display: grid;
    grid-template-columns: auto;
    padding: .3rem .2rem .3rem .2rem;
    cursor: pointer;
    font-size: .7rem;
    border-top: 1px solid var(--whatever);
    font-weight: bold;
}

.facilitatorrequestimage {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/filledcrown.svg');
    align-items: center;
}

.facilitatorrequesttext {
    padding: 0 .2rem 0 .2rem;
}

.spectatorrequestimage {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/operaglasses.svg');
}

.spectatorrequesttext {
    padding: 0 .2rem 0 .2rem;
}

.estimatorrequestimage {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/checked.svg');
}

.estimatorrequesttext {
    padding: 0 .2rem 0 .2rem;
}

#CopyEstimatorLink {
    /*margin-top: .1rem;*/
    padding-top: .2rem;
}

.copyestimatorlinkimage {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/toclipboard.svg');
}

.copyestimatorlinktext {
    padding: 0 .2rem 0 .2rem;
}

.copyfacilitatorlinkimage {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/toclipboardfilled.svg');
}

.copyfacilitatorlinktext {
    padding: 0 .2rem 0 .2rem;
}

.reportanissuecontainer {
    border-top: 1px solid var(--whatever);
}

.reportanissue {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/reportanissue.svg');
}

.reportanissuetext {
    padding: 0 .2rem 0 .2rem;
}

.pacshow {
    display: block;
}

.pachide {
    display: none;
}

.scalesitem {
    font-size: .5rem;
    display: grid;
    grid-template-columns: .9rem auto;
    padding: .3rem .2rem .3rem .2rem;
    font-size: .7rem;
}

.selectedscale {
    margin-right: 2px;
    border: .3rem solid #fff;
    background-color: var(--intense);
}

.scaleactionable {
    cursor: pointer;
}

    .scaleactionable:hover {
        background-color: var(--lookatme);
    }


.contactitems {
    position: relative;
    border-top: 1px solid var(--whatever);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
/*    background-color: #444;*/
    padding: .3rem .2rem .1rem 1.1rem;
}

a.contactitem{
    background-color:#fff;
    width:1rem;
    height:1rem;
    align-items:center;
    margin-right:.1rem;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}

a.contactitem.facebook{
    background-image:url('../images/Facebook.svg');
}

    a.contactitem.twitter {
        background-image: url('../images/twitter.svg');
    }

    a.contactitem.linkedin {
        background-image: url('../images/Linkedin.svg');
    }

    a.contactitem.kofi {
        background-image: url('../images/kofiicon.svg');
    }

board {
    display: grid;
    align-items: center;
    place-items: center;
}

.juststarted {
    display: grid;
    align-items: center;
    width: 50vw;
}

.emptyresults{
    display:grid;
    align-items:center;
    padding:1rem 25vw 0rem 25vw;
    font-size:70%;
}


#UpdatesChangingContainer {
    width: 100%;
    display: grid;
    align-items: center;
    padding-top: .3rem;
}

    #UpdatesChangingContainer div {
        width: 100%;
        text-align: center;
        /*background-color: var(--whatever);*/
        font-size: .7rem;
        color: var(--alsoran);
        /*border-radius: .5rem;*/
    }

actions {
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    z-index: 1111;
}


.actiongrouup {
    display: grid;
    align-content: center;
    grid-template-columns: auto auto auto;
    cursor: pointer;
}

action1 {
    display: grid;
    justify-content: left;
    height: 2rem;
    position: relative;
    padding: 0 .5rem 0 .5rem;
    /*grid-template-columns: 1rem auto auto;*/
}

action2 {
    display: grid;
    justify-content: left;
    height: 2rem;
    position: relative;
    padding: 0 .5rem 0 .5rem;
    grid-template-rows: 0 1fr 1fr;
}

action3 {
    display: grid;
    justify-content: right;
    height: 2rem;
    position: relative;
    padding: 0 .5rem 0 .5rem;
}

.actionimage {
    width: 1rem;
    height: 1rem;
}

#action1image {
    background-image: url('../images/img_295694.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: .7rem;
    height: 1rem;
    position: relative;
    height: 1rem;
    transform: rotate(180deg);
    margin-right: .2rem;
    transition: all .5s;
}

    #action1image.deflate {
        transform: rotate(0deg);
    }

#action1text1 {
    padding-right: .2rem;
    /*min-width: 2ch;*/
    text-align: right;
    /*width:auto;*/
}

.actiontext {
    font-size: 1rem;
}

.actiontextsmall {
    font-size: .6rem;
    width: 100%;
    text-align: center;
}

.groupcontainer {
    display: grid;
    grid-gap: .5rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 12rem);
}

.estimationboard {
    position: relative;
}

.bigquestion {
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    padding: 0 2rem 2rem 2rem;
}

.rolebutton {
    font-size: 1.5rem;
    height: 3rem;
    width: 12rem;
    border-radius: 1.5rem;
    border: .2rem solid #222;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
    place-items: center;
    margin: 0 .5rem 0 .5rem;
}

    .rolebutton:hover {
        background-color: var(--whatdoyouwant);
        color: #fff;
    }

.menucontainer {
    position: absolute;
    height: 0px;
    z-index: 900;
    bottom: 0px;
}

#ParticipantList_Container {
    background-color: #f9f9f9;
    max-height: calc(calc(var(--dynamicvh, 1vh) * 94) - 4rem);
    min-height: 12rem;
    width: 12rem;
    position: absolute;
    padding: 1rem .5rem 2rem .5rem;
    left: .2rem;
    border-radius: .1rem;
    border:1px solid var(--whatever);
}

.participantlistitems::-webkit-scrollbar {
    width: 8px;
}

.participantlistitems::-webkit-scrollbar-track {
    background: var(--whatever);
}

.participantlistitems::-webkit-scrollbar-thumb {
    background-color: var(--alsoran);
    border-radius: 4px;
    border: 0px solid #fff;
}

.participantlistitems {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--alsoran) var(--whatever);
    position: absolute;
    bottom: 1rem;
    top: 2rem;
    width: 11.48rem;
}

.participantlistheader {
    font-size: 1.2rem;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 2rem;
    width: 100%;
    display: grid;
    text-align: center;
    align-items: center;
    place-items: center;
}

    .participantlistheader .thumbtack {
        background-image: url('../images/thumbtack.svg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        position: absolute;
        right: .2rem;
        top: .2rem;
        transition: all .3s;
    }

    .participantlistheader .thumbtack.on{
        transform:rotate(-90deg);
    }

    #ParticipantListFooter{
        position:absolute;
        bottom:1px;
        font-size:.7rem;
        color:var(--whatever);
        left:1px;
        right:1px;
        height:.9rem;
        line-height:.9rem;
        text-align:center;
        align-items:center;
    }

    .participantllistitem {
        display: grid;
        grid-template-columns: 1rem 1fr 1rem;
        padding: 0 .2rem .1rem 0;
    }

        /*.participantllistitem img {
            width: 1rem;
            height: 1rem;
            background-repeat: no-repeat;
            background-size: contain;
        }*/

.participantlistupdatingcontainer{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:grid;
    align-items:center;
}

    .participantlistupdatingcontainer div{
        width:100%;
        text-align:center;
    }

    .yellowpointer {
        position: absolute;
        width: 2rem;
        height: 2rem;
        bottom: -2rem;
        background-image: url('../images/yellowpointer.svg');
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

.facimagey {
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    /*    width: 1rem;
    height: 1rem;*/
    background-image: url('../images/filledcrown.svg');
    /*background-size: contain;
    background-repeat: no-repeat;*/
}

.facimagen {
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    /*    width: 1rem;
    height: 1rem;*/
    background-image: url('../images/emptycrown.svg');
    /*background-size: contain;*/
    cursor: pointer;
}

.specimage {
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    /*    width: 1rem;
    height: 1rem;*/
    background-image: url('../images/operaglasses.svg');
    /*background-size: contain;*/
    align-content: center;
}

.estimage {
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    /*    width: 1rem;
    height: 1rem;*/
    background-image: url('../images/check.svg');
    /*background-size: contain;*/
    align-content: center;
}

.estimagechecked {
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    /*    width: 1rem;
    height: 1rem;*/
    background-image: url('../images/checked.svg');
/*    background-size: contain;*/
    align-content: center;
}

.participantlistname {
}

.leftflapout {
    left: 0rem;
    bottom: 2.1rem;
    animation: slideoutdown .2s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    z-index: 998;
}

.leftflapin {
    display: block;
    left: 0rem;
    bottom: 2.1rem;
    animation: slideinup .2s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    z-index: 1000;
}

.multiboxelipsis {
    background-image: url('/threesquares.svg');
    background-color: unset;
    background-repeat: no-repeat;
    background-size: contain;
}

.startestimate {
    background-image: url('../images/play.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.stopestimate {
    background-image: url('../images/stop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#TokenNameSelectionContainer {
    margin: 2rem .5rem .5rem .5rem;
}

    #TokenNameSelectionContainer .tokennamescontainer {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }

    #TokenNameSelectionContainer .tokenname {
        border: .1rem solid #fff;
        background-color: #fff;
        width: 100%;
        font-size: .7rem;
        text-align: center;
        height: 1rem;
        outline: none;
        border-radius: .5rem;
        padding: 0;
        transition: all .5s
    }

        #TokenNameSelectionContainer .tokenname:hover {
            border-color: var(--alsoran);
            background-color: var(--whatdoyouwant);
            color: #fff;
        }

    #TokenNameSelectionContainer .pending {
        border: .1rem solid var(--whatever);
        background-color: var(--mildlyintrigued);
        width: 100%;
        font-size: .7rem;
        text-align: center;
        height: 1rem;
        outline: none;
        border-radius: .5rem;
        color: #000;
        transition: all .5s;
    }

    #TokenNameSelectionContainer .tokenname:disabled {
        border-color: #fff;
        background-color: #fff;
        width: 100%;
        color: var(--whatever);
        transition: all .5s;
        text-decoration: line-through;
    }

    #TokenNameSelectionContainer .randomtokenname {
        border: .1rem solid var(--alsoran);
        background-color: var(--alsoran);
        width: 100%;
        font-size: .7rem;
        text-align: center;
        height: 1rem;
        outline: none;
        border-radius: .5rem;
        color: #fff;
        transition: all .5s;
    }

        #TokenNameSelectionContainer .randomtokenname:hover {
            border-color: var(--alsoran);
            background-color: var(--whatdoyouwant);
            color: #fff;
        }



#EstimateResults_Container {
    /*width: 90vw;*/
    max-width: 90vw;
}

#AdjustEstimate {
    color: var(--alsoran);
    font-size: .7rem;
    padding: .2rem 2rem .2rem 2rem;
    width: 100%;
    text-align: center;
}

#disconnected{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:9999;
    display:none;

    color:#fff;
    font-size:1rem;
    background-color:rgba(55,55,55,.9);
}

    #disconnected > div {
        position:absolute;

        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width: 15rem;
        height: 2.2rem;
        line-height:1.1rem;
        
    }

    #disconnected button {
        float:right;
        font-size:.8rem;
        font-weight:bold;
        cursor:pointer;
    }
    
    #disconnected button:hover{
        /*background-color:#ddd;*/
    }

    #disconnecttime{
        position:absolute;
        bottom:2px;
        right:2px;
        font-size:.3rem;
        color:#ccc;
    }

.thethreedots {
    width:1rem;
    height:auto;
}

.threedots-dotone {
    animation: dotsapoppin 1s;
    animation-delay: 1ms;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.threedots-dottwo {
    animation: dotsapoppin 1s;
    animation-delay: 333ms;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.threedots-dotthree {
    animation: dotsapoppin 1s;
    animation-delay: 666ms;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes dotsapoppin {
    0%, 100% {
        transform: translateY(0);
    }


    10% {
        transform: translateY(-.25rem);
    }

    20% {
        transform-origin: top;
        transform: translateY(-.05rem) scaleY(-1rem);
    }

    80% {
        transform: translateY(.05rem);
    }
}

@media screen and (orientation:portrait) {
    banner {
        height: 3rem;
        border-top: 1px solid #ccc;
        z-index: 100;
    }

  
    .sitelogo {
        height: 2rem;
        width: 2rem;
    }

    .sitetitle {
        visibility: hidden;
        display: none;
    }

    .infoarea {
        grid-template-columns: 1.2rem auto 1.2rem;
        padding-right: .4rem;
        text-wrap: none;
    }

    .tokenimage {
        height: 1.2rem;
        width: 1.2rem;
    }

    .tokenname {
        font-size: 1.2rem;
        padding: 0 .2rem 0 .4rem;
        text-wrap: none;
    }

    .participantactionstrigger {
        height: 1.4rem;
        width: 1.4rem;
        background-position: center;
        background-size: 1.2rem;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23444' d='M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z'/%3E%3C/svg%3E");
        cursor: pointer;
        margin-left:.2rem;
    }

    .participantactionscontainer {
        top: 0rem;
        position:fixed;
        right: 0rem;
        /*top: 0rem;*/
        bottom: 0rem;
        background-color: #fff;
        border-radius: 0rem;
        /*border: 1px solid var(--whatever);*/
        border:0;
        /*border-left:2px solid #222;*/
        padding: 0;
        width:75%;
        z-index:199;
        /*background-color:var(--whatever);*/

        /*display:grid;*/
        grid-template-rows: auto auto 1fr 2rem;
        /*overflow-y:scroll;*/
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .pacshow{
        display:grid;
    }

    .participantactionscontainer::--webkit-scrollbar {
        display:none;
    }

        .participantactionscontainer::before {
            width: 100px;
            background-color: var(--whatever);
            content: '';
            position: absolute;
            right: 100%;
            top: 0px;
            bottom: 0px;
            width: 200%;
            opacity: .9;
            text-align: right;
            padding-right: .75rem;
            padding-top: .5rem;
            font-size: 1rem;
            font-weight: bold;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z'/%3E%3C/svg%3E");
            /*background-position: top right;*/
            background-size: 1.5rem;
            background-repeat: no-repeat;
            background-position-x: calc(100% - .5rem);
            background-position-y: .75rem;
        }

    menubanner {
        height: 3rem;
        display: flex;
        width: 100%;
        background-color: #fffffe;
        align-items: center;
        border-bottom: 1px solid #ccc;
        z-index: 9999;
    }



    .menusitelogo {
        background-image: url('../images/candyjar.svg');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 2rem;
        width: 2rem;
        display: grid;
        align-items: center;
        cursor: pointer;
        flex-shrink: 2;
    }

    .menusitetitle {
        color: #444;
        cursor: pointer;
        display:block;
    }

    .participantactionitemheader{
        font-size:1rem;

    }
    .participantactionitem {
        font-size: 1.2rem;
        line-height: 1.2rem;
        grid-template-columns: 1.4rem auto;

    }


    .dynamicmenuarea {
        /*background-color:aquamarine;*/
        /*padding-bottom:3rem;*/
        position:relative;
    }

    .dynamicmenuareascales {
        position: absolute;
        top: 1.4rem;
        bottom: 1rem;
        overflow-y: scroll;
        /*background-color:aquamarine;*/
        padding-bottom: 3rem;
        /*height:50%;*/
        /*height:10vh;*/
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .dynamicmenuareascales::--webkit-scrollbar {
            display: none;
        }


    .scalesitem {
        display: grid;
        grid-template-columns: 1.4rem auto;
        padding: .3rem .2rem .3rem .2rem;
        font-size: 1.2rem;
    }

    .selectedscale {
        border:.4rem solid #fff
    }

    .contactitems {
        bottom:.4rem;
        position: relative;
        border-top: 1px solid var(--whatever);
        display: grid;
        grid-template-columns: repeat(4,1fr);
        align-items: center;
        width:100%; 
        padding: .5rem .2rem .1rem 1.4rem;
        background-color:#ffffff;
    }

    /*.contactitems {
        position: absolute;
        border-top: 1px solid var(--whatever);
        display: grid;
        grid-template-columns: repeat(4,1fr);
        align-items: center;*/
        /*    background-color: #444;*/
        /*padding: .3rem .2rem .1rem 1.1rem;
    }*/

    a.contactitem{
        width:1.4rem;
        height:1.4rem;
    }
    actions {
        grid-template-columns: 1fr auto 1fr;
        height: 3rem;
        border-bottom: 1px solid #ccc;
        z-index:99;
    }

    action1 .actiongrouup {
        display: grid;
        align-content: center;
        grid-template-rows: auto 1.5rem .6rem;
        grid-template-columns: unset;
        cursor: pointer;
        height: 3rem;
    }

    action3 .actiongrouup {
        display: grid;
        align-content: center;
        grid-template-rows: auto auto 0rem;
        grid-template-columns: unset;
        cursor: pointer;
        height: 3rem;
    }

    action1 {
        justify-content: center;
        height: 3rem;
    }

    action2 {
        height: 3rem;
        position: relative;
        padding: 0 .5rem 0 .5rem;
        grid-template-rows: .4rem 1.5rem .6rem;
    }

    action3 {
        justify-content: center;
        height: 3rem;
    }

    .actionimage {
        width: 100%;
        height: 1.5rem;
    }

    action1 .actiongrouup {
        grid-template-rows: 1.5rem .6rem;
        grid-template-columns: 1rem auto;
    }

    #action1image {
        grid-row: span 2;
        height: 2.1rem;
    }

    #action1text1 {
        font-size: 1.5rem;
        text-align: center;
    }

    #action1text2 {
        font-size: .6rem;
        width: 100%;
        text-align: center;
    }


    #action2text1 {
        font-size: 1.5rem;
    }

    #action3image {
        align-content: center;
    }

    #action3text1 {
        font-size: .6rem;
        width: 100%;
        text-align: center;
    }

    #ParticipantList_Container {
        max-height: calc(calc(var(--dynamicvh, 1vh) * 95) - 6rem);
        min-height: 12rem;
    }

    .leftflapin {
        bottom: 3.1rem;
    }

    #TokenNameSelectionContainer .tokennamescontainer {
        grid-template-columns: repeat(3,1fr);
    }

    .thethreedots {
        width: 1.6rem;
        height: auto;
        margin: 0 auto;
    }

    .infoarea{
        grid-template-columns: 1.2rem auto 1.6rem;
    }
}