/* Minification failed. Returning unminified contents.
(38,20): run-time error CSS1039: Token not allowed after unary operator: '-text'
(173,143): run-time error CSS1039: Token not allowed after unary operator: '-border'
(173,198): run-time error CSS1039: Token not allowed after unary operator: '-area'
(221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(222,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(223,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(224,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(226,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(227,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(228,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(230,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(231,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(233,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(234,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(235,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(236,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(237,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(238,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(239,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(240,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(243,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(244,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(245,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(247,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(248,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(250,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(251,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(252,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(254,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(255,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(262,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(289,74): run-time error CSS1039: Token not allowed after unary operator: '-text'
(290,308): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(291,194): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(319,122): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(319,205): run-time error CSS1039: Token not allowed after unary operator: '-text'
(343,161): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(348,60): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(355,191): run-time error CSS1039: Token not allowed after unary operator: '-text'
(357,37): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(358,38): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(382,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(384,61): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(398,74): run-time error CSS1046: Expect comma, found '0'
(398,78): run-time error CSS1046: Expect comma, found '/'
(398,102): run-time error CSS1046: Expect comma, found '0'
(398,106): run-time error CSS1046: Expect comma, found '/'
(422,28): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(428,35): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(442,28): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(480,45): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(515,71): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(537,158): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(538,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(546,87): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(548,104): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(550,76): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(550,94): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(553,62): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(553,101): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(563,78): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(563,118): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(564,70): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(580,96): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(600,88): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(601,64): run-time error CSS1039: Token not allowed after unary operator: '-text'
(605,103): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(613,87): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(642,113): run-time error CSS1039: Token not allowed after unary operator: '-context'
(642,139): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(671,31): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(672,33): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(673,29): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(674,35): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(712,32): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(713,56): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(716,34): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(717,58): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(725,26): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(756,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(800,167): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(819,1): run-time error CSS1019: Unexpected token, found '@import'
(819,9): run-time error CSS1019: Unexpected token, found ''https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700''
(881,36): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(885,46): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(893,57): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(900,33): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(928,52): run-time error CSS1039: Token not allowed after unary operator: '-grey-fill'
(1062,62): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(1128,40): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1251,272): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1292,43): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1293,51): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1363,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(1364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(1397,60): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1406,66): run-time error CSS1039: Token not allowed after unary operator: '-tableful-red'
(1450,50): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1451,62): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(1491,181): run-time error CSS1038: Expected hex color, found '#0000'
(1530,14): run-time error CSS1030: Expected identifier, found '.'
(1530,70): run-time error CSS1031: Expected selector, found ')'
(1530,70): run-time error CSS1025: Expected comma or open brace, found ')'
(1539,90): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1555,114): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(1701,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(1702,5): run-time error CSS1035: Expected colon, found '{'
(1733,99): run-time error CSS1034: Expected closing parenthesis, found ','
(1733,99): run-time error CSS1042: Expected function, found ','
(1733,107): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(1738,112): run-time error CSS1038: Expected hex color, found '#0000'
(1882,18): run-time error CSS1039: Token not allowed after unary operator: '-tableful-yellow'
(1887,18): run-time error CSS1039: Token not allowed after unary operator: '-tableful-yellow-dark'
(1911,72): run-time error CSS1039: Token not allowed after unary operator: '-background'
(1933,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1934,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2042,28): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(2061,23): run-time error CSS1046: Expect comma, found '0'
(2061,27): run-time error CSS1046: Expect comma, found '/'
(2091,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2092,8): run-time error CSS1035: Expected colon, found '{'
(2126,101): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(2141,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2142,7): run-time error CSS1035: Expected colon, found '{'
(2193,75): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2194,75): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(2197,131): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(2226,51): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2226,309): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(2227,57): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2267,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2268,7): run-time error CSS1035: Expected colon, found '{'
(2323,93): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2357,72): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2357,97): run-time error CSS1039: Token not allowed after unary operator: '-background'
(2369,25): run-time error CSS1030: Expected identifier, found '.'
(2369,44): run-time error CSS1031: Expected selector, found ')'
(2369,44): run-time error CSS1025: Expected comma or open brace, found ')'
(2460,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2461,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2545,98): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(2576,42): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2579,22): run-time error CSS1039: Token not allowed after unary operator: '-grey-fill'
(2585,22): run-time error CSS1039: Token not allowed after unary operator: '-yellow-fill'
(2604,22): run-time error CSS1039: Token not allowed after unary operator: '-tableful-pink'
(2613,22): run-time error CSS1039: Token not allowed after unary operator: '-tableful-orange'
(2622,22): run-time error CSS1039: Token not allowed after unary operator: '-tableful-green'
(2631,22): run-time error CSS1039: Token not allowed after unary operator: '-tableful-red'
(2655,22): run-time error CSS1039: Token not allowed after unary operator: '-pending-color'
(2661,22): run-time error CSS1039: Token not allowed after unary operator: '-canceled-color'
(2667,22): run-time error CSS1039: Token not allowed after unary operator: '-refunded-color'
(2692,35): run-time error CSS1039: Token not allowed after unary operator: '-context'
(2708,55): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2743,63): run-time error CSS1046: Expect comma, found '0'
(2743,67): run-time error CSS1046: Expect comma, found '/'
(2743,91): run-time error CSS1046: Expect comma, found '0'
(2743,95): run-time error CSS1046: Expect comma, found '/'
(2810,235): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(2998,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3001,38): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3010,17): run-time error CSS1039: Token not allowed after unary operator: '-warning-color'
(3067,32): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3094,54): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3120,94): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3178,50): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(3277,28): run-time error CSS1030: Expected identifier, found '.'
(3277,38): run-time error CSS1031: Expected selector, found ')'
(3277,38): run-time error CSS1025: Expected comma or open brace, found ')'
(3299,87): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(3447,17): run-time error CSS1039: Token not allowed after unary operator: '-tableful-red'
(3541,41): run-time error CSS1030: Expected identifier, found '.'
(3541,54): run-time error CSS1031: Expected selector, found ')'
(3541,54): run-time error CSS1025: Expected comma or open brace, found ')'
(3591,92): run-time error CSS1046: Expect comma, found '0'
(3591,96): run-time error CSS1046: Expect comma, found '/'
(3591,120): run-time error CSS1046: Expect comma, found '0'
(3591,124): run-time error CSS1046: Expect comma, found '/'
(3788,114): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3788,181): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3839,37): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3840,37): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3842,37): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(3844,41): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3844,146): run-time error CSS1039: Token not allowed after unary operator: '-background'
(4206,28): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(4207,28): run-time error CSS1039: Token not allowed after unary operator: '-background'
(4208,38): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(4213,38): run-time error CSS1039: Token not allowed after unary operator: '-highlight-color'
(4220,46): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4240,54): run-time error CSS1039: Token not allowed after unary operator: '-background'
(4557,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4558,10): run-time error CSS1035: Expected colon, found '{'
(4561,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4562,10): run-time error CSS1035: Expected colon, found '{'
 */
/*
 * Ogma UI framework
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */


/* user agent reset */

* {
    padding:0;
    margin:0;
    box-sizing:border-box; 
    outline:none; 
    border:none;
    -webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
}


*{/* box-shadow:0 0 0 1px red!important;*/}
*{box-sizing:border-box;margin:0;padding:0}

li{list-style:none;}
a{color:inherit;}

/* ----- */

html{-webkit-tap-highlight-color:rgba(0,0,0,0); background:#f3f3f3}
html,body{margin:0;padding:0;box-sizing:border-box;position:relative;cursor:default;height:100%}
body{
    font-family:'Roboto Condensed';
    /* -webkit-user-select:none; */
    display:flex;
    font-size:var(--text);
}

body.k-desktop.lock_scroll{margin-right: 8px}
body.lock_scroll {overflow:hidden;}

/*html.k-safari, html.k-mobile {position:fixed}*/


/* layout */

app{width:100%;display:flex;flex-direction:column;position:relative;align-items:center;margin:auto;background:#fff;box-shadow:0  5px 15px  1px rgba(0,0,0, 0.05);background:#fff;flex-shrink:0; min-height:calc(100vh - 60px); }


@media (max-width: 600px) {
    app{min-height:calc(100svh - 60px);}

 }
.content{position:relative;margin:0 auto;width:100%;/*height:100%;*/ display:flex;flex-direction:column;background:#f3f3f3;} /* temporary*/

content{width:100%;display:none; flex-shrink:0}
content.selected{display:flex;overflow:hidden}
content > wrap{position:relative;display:flex;flex:1;flex-direction:column;width:100%;overflow:hidden; }
content[view="map"], content[view="map"] wrap{overflow: hidden; position: relative; flex:1}
/*content > wrap[auto] {flex-shrink: 0; flex-grow: 0;}*/
content > wrap[auto] { flex: 0 0 auto; }

    content > group {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 15px;
        width: 250px;
    }

        content > group span {
            padding: 5px 10px;
        }

        wrap[fix] {
            justify-content: center;
            align-items: center
        }

.container{position:relative;margin:0 auto;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.container .reset_info { position: relative; display: flex; flex: 1; flex-direction: column; overflow: hidden; height: 100%; width: 100%; }

/* ----- */

#refresh-box {
    position: fixed;
    padding: 5px;
    padding-bottom:15px;
    background-color: black;
    height: 200px;
    width: 100%;
    background: linear-gradient(0deg, black 20%, #727272);
    color: white;
    z-index: 1000;
    top: -200px;
    align-content: end;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    border-radius: 0 0 20px 20px;
    opacity: .9;
}

.refresh-text {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinning-refresh-icon {
    animation: spin 2s linear infinite;
}

/*windows*/

/*.ovrl_wnd_cont .overlay{height:100%;width:100%;left:0;right:0;position:fixed;opacity:0;flex-direction:row; align-items:flex-start; visibility:hidden; -webkit-user-select:none;user-select:none; display: flex;  overflow: auto;      background-color: rgba(0, 0, 0, 0.4); box-sizing:border-box;    -webkit-overflow-scrolling: touch;}
.ovrl_wnd_cont .overlay.open{opacity:1;visibility:visible;z-index:9998;}
.ovrl_wnd_cont .overlay .back_layer{width:100%;height:100%;position:fixed;background-color:rgba(0, 0, 0, 0.4);}


.ovrl_wnd_cont .overlay .modal_wrap{margin:auto;positionn:relative;overflow:hidden;  justify-content:center; display: flex; flex-direction: column; padding:10px; max-width:100%;}

.ovrl_wnd_cont .overlay .modal_wrap > header{width:100%;height:60px;min-height:60px;user-select:none;-webkit-user-select: none;cursor:default;position:relative;z-index:1;}
.ovrl_wnd_cont .overlay .modal_wrap > header p{background:#fff;height:60px;text-align:center;box-sizing: border-box;margin:0;padding:0 60px;line-height:60px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;font-weight: 700;}
.ovrl_wnd_cont .overlay .modal_wrap > header span{height:30px;width:30px;position:absolute;right:15px;top:15px;cursor:pointer;backgr   und-image:url(/Content/images/imgres.svg);background-repeat:no-repeat;background-position:-90px -326px;}
.ovrl_wnd_cont .overlay .modal_wrap > header span:active{transform:translateY(1px);-webkit-transform:translateY(1px)}
.ovrl_wnd_cont .overlay .modal_wrap > div{display:flex;flex-direction:column;max-height:100%;overflow:hidden; background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 10px 30px -10px rgba(0,0,0,.2);min-height:100vh }*/

.ovrl_wnd_cont .overlay { position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100%; display: flex; flex-direction: column; background: rgba(0,0,0, 0.4) ; visibility: hidden; }
.ovrl_wnd_cont .overlay.open {visibility:visible; overflow: auto;}
.ovrl_wnd_cont .overlay .modal_wrap {
    position: relative;
    width: calc(100vw - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    display: flex;
}
.ovrl_wnd_cont .overlay .modal_wrap > div {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: fit-content;
    max-height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.ovrl_wnd_cont .overlay .modal_wrap > .modal_container > * {
    width: inherit;
}

.close-container > * {
    height: auto;
}
/*.ovrl_wnd_cont .overlay .modal_wrap > div*/
.window_cont { width: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; overflow: hidden; height: inherit;}
 

.ovrl_wnd_cont .overlay .modal_wrap > div .window_cont > div { display: flex; flex-direction: column; position: relative; border-radius: var(--border); background: #fff; width: 100%; padding: var(--area) 0; flex-shrink: 0; }

.ovrl_wnd_cont .overlay .modal_wrap > div .window_cont form{width:100%; height: inherit;}
.ie11 .ovrl_wnd_cont .overlay .modal_wrap{overflow:hidden;}


.ovrl_wnd_cont .overlay .modal_wrap .button.close_window {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    background: black;
    z-index: 10001;
    box-shadow: 0 0 4px 1px white;
}
 

/* ----- */
/*.ovrl_wnd_cont .overlay.open .modal_wrap{animation:upcome.2s backwards;}*/

/* message_box */

.message_box{min-width:350px;max-width: 500px;box-sizing:border-box;background:#fff; margin:auto; border-radius: 15px}
.message_box .message_container{max-width: 100%;white-space:normal;font-size:16px;padding:30px;word-wrap:break-word;justify-content: end;}
.message_box .message_container div {margin-top: 20px;}
.message_box footer{display:block;height:80px;margin:0 20px;box-shadow:0 -1px 0 0 rgba(0,0,0,.1);}
.message_box footer .button{margin:20px 10px 0 0;float:right;height:40px;line-height:40px;min-width:80px;}
.message_box action{padding:20px; justify-content: end;}
/* ----- */


@keyframes overlay_anim {from{opacity:0;}}
@keyframes window_anim {from{opacity:0;transform:translateY(-20px)}}

/*.window_cont{position:relative;display:-ms-flexbox;-ms-flex-direction:column;display:flex;flex-direction:column;max-height:100%;*width:100%;overflow:hidden;background:#fff;-ms-flex-negative:1; -ms-flex: 1 0 auto; }*/



/*
 * Ogma UI framework // Controls
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */


:root {
    --input-color: rgba(136, 136, 136, 0.1);
    --elevation: 0 0 50px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,.05);
    --outline: rgba(0,0,0,.1);
    --fab: 30px;
    --text: 13px;
    --tip: #424242;
    --context: #fff;
    --over-color: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);
    --press-color: linear-gradient(to top, rgba(0,0,0,.07) 0%,rgba(0,0,0,.07) 100%);
    --tableful-pink: #FF99B4;
    --tableful-red: #DC143C;
    --tableful-green: #90EE90;
    --tableful-orange: #FFCC80;
    --tableful-yellow: rgba(255, 238, 113);
    --tableful-yellow-dark: #bfa800;
    --tableful-yellow-faded: rgba(255, 238, 113, .78);
    --tableful-magenta: #CC016B;
    --tableful-purple: #9b59b6;
    --highlight-color: var(--tableful-magenta);
    --accent-color: #ff5722;
    --warning-color: var(--tableful-red);
    --status-active: var(--tableful-green);
    --status-pending: var(--tableful-orange);
    --status-available: var(--tableful-pink);
    --status-refunded: var(--tableful-purple);
    --yellow-fill: var(--tableful-yellow);
    --grey-fill: #e1e1e1;
    --border-color: #e4e4e4;
    --pending-color: #F57C00;
    --canceled-color: #4A90E2;
    --refunded-color: #9b59b6;
    --main-color: #000;
    --background: #fff;
    --padding: 10px 20px;
    --shadow: rgba(0,0,0, 0.07);
    --large_padding: 10px 80px;
}


@media (min-resolution: 192dpi) {
    :root {
        --text:14px;
    }
}


/* icon */

@font-face{font-family:icon;src:url(/Content/Font/icomoon.ttf);}
icon{width:30px;height:30px;display:flex;-moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig";font-feature-settings: "liga", "dlig";font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility;font-family:icon;display:flex;display: -ms-flexbox;display: -webkit-flex;align-items:center; -ms-flex-align:center;justify-content:center; -ms-flex-pack:center;font-size:30px;font-weight:400;font-style:normal;user-select:none; /* cursor: default; */ text-transform:lowercase;position:relative;z-index:9;overflow:hidden;text-decoration:none;}
icon[medium]{width: 40px; height:40px;}
icon[micro]{
    width: 20px;
    min-width: 20px;
    height: 24px;
    min-height: 24px;
    font-size: 24px;
}
detail media thumb wrap > icon {position: absolute;width: 100%;height: 100%;margin: auto; }

icon[data-icon-size="small"]{font-size:22px}

/* ----- */


/* input */

input::-ms-clear,input::-ms-reveal{display:none;}
input, button{outline:none;font-family:'Roboto Condensed';font-size:var(--text);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;border:none;color:inherit;}
input[type=text], input[type=password], input[type=url],.k-widget .k-input{float:left;display:flex;height:30px;line-height:30px;padding:0 7px;background:transparent;transition:none;-webkit-transition:none;flex:1;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 0 0 1px var(--outline);color:inherit;}
input[type=checkbox]{border-radius:2px;height:16px;width:16px;margin:0;background-position:0px -160px;background-color:#fff;float:left;padding:0;box-sizing:border-box;box-shadow:0 0 0 1px var(--outline), inset 0 2px 0 0 rgba(0,0,0,.07);position:relative;}
input[type=checkbox]:checked{background-position:-16px -160px;}
input[type=checkbox]:active{transform:translateY(1px);-webkit-transform:translateY(1px)}


input:focus,
textarea:focus,
.input_cont input:focus ~ i,
.input_cont .k-state-focused ~ i,
.Tokenize ul.Focused
{background:none;}

input.input-validation-error,
input.input-validation-error ~ i,
textarea.input-validation-error

{box-shadow:0 0 0 2px rgba(240, 80, 80, 0.3);}


input:disabled,
textarea:disabled,
.input_cont input:disabled ~ i
{ opacity:.7 }

input[disabled] ~ box,
input[disabled] ~ text
{opacity:.5;cursor:default}

textarea{ min-height:100px; resize:none;height:100px;display:block;  -webkit-appearance: none; box-shadow:0 0 0 1px var(--outline);color:inherit;padding:20px;font-family:'Roboto Condensed';font-size:var(--text);overflow:auto !important; flex:1;    /*background:var(--input-color);*/}
textarea[compact]{height:30px; resize:vertical;}

textarea[note]{ resize:vertical;height:120px;background: #FFECB3; line-height:20px;color: #3E2723;}

/*input:focus,
.Tokenize ul.TokensContainer.Focused,
.input_cont input:focus ~ i,
.k-state-focused .k-input{box-shadow:0 0 0 1px var(--outline), 0 0 0 4px rgba(0,0,0,0.05);background:none;}

input.input-validation-error,input.input-validation-error ~ i, .k-widget.input-validation-error .k-input, .k-widget.k-multiselect.k-header.input-validation-error, textarea.input-validation-error, .input-validation-error[validator_placeholder]{box-shadow:0 0 0 2px rgba(240, 80, 80, 0.3);}
input[type=text]:disabled, input[type=password]:disabled, .k-widget.k-header .k-state-disabled .k-input,.k-widget.k-multiselect.k-header.k-state-disabled{box-shadow:0 0 0 1px var(--outline), inset 0 -3px 0 0 rgba(255,255,255,.3);background:rgba(0,0,0,.02);color:#696969;user-select:none;-webkit-user-select:none;}

input[disabled] ~ box,
input[disabled] ~ text
{opacity:.5;cursor:default}*/



/* ----- */


/* data_read */

.data_read{padding:7px 0;user-select:text;min-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;flex:1;box-shadow:0 1px 0 0 var(--outline);color:rgba(0,0,0,.5);cursor:text;} 
.data_read.multiline{white-space:normal;}
.data_read:empty{cursor:default;pointer-events:none;}
.data_read:empty::after{content:"No Data";}

.data_tip{padding:7px;float:left;box-shadow:0 0 0 1px var(--outline);background:#ffeda5;user-select:all;min-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:normal;float:left;flex:1;background:red}

/* ----- */


/* button */

.button{height:30px;text-align:center;border-radius:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 15px;user-select:none;font-weight:700;font-size:var(--text);white-space:nowrap;position:relative;background:transparent;/*flex-shrink: 0;*/ overflow:hidden;line-height:30px;text-decoration: none;}

.button:hover{background-image:var(--over-color)}
.button:active{background-image:var(--press-color)}

.button:active text,
.button:active icon{transform:translateY(1px)}

.button text{width:100%;min-width: fit-content;overflow:hidden;text-overflow:ellipsis;}
.button icon{margin:0 0 0 -10px}
.button icon.small{ height: 20px; width: 20px; }
.button text ~ icon{margin:0 -10px 0 0}
.button.mini icon, .button.extra icon{margin:auto;}

.button[medium]{width:50px; height: 50px ; padding: 0}
.button[medium] icon[medium]{margin: auto}

.button.short { height: 20px; line-height: 20px; }
.button.mini{min-width:40px;width:40px;min-height:40px;height:40px;max-height:40px;max-width:40px;padding-left:0;padding-right:0;}
.button.accent,
.button.outline{box-shadow:inset 0 0 0 1.5px;}

.button.extra{padding:0;height:100%;width:100%;border-radius:0}

.button.fab{width:60px;height:60px;padding:0;border-radius:60px;}
.button.fab icon{margin:auto;}

.primary{background-color:var(--main-color);color:#fff}
.button.accent:hover,
.button.accent:active{box-shadow:none;background-color:var(--main-color);color:#fff}

.button.large{min-height:40px;height:40px;padding:0 30px;font-size: larger;}

.button[disabled]{opacity:.5;cursor:default;pointer-events:none}
 button::-moz-focus-inner{border:none;}

.button.adaptive icon{display:none;margin:auto;}
.button.right{margin-left: auto}
.button.left{margin-right: auto}
.button.middle{margin: 0 auto}
.button.min-content { width: min-content; }
header .button { min-width: fit-content; }
.viewbox-button-right .button[white],
.viewbox-button-left .button[white] {    box-shadow: 0 5px 5px 0px rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 10%); background: #fff}

/* Custom */

.viewAllBtn, .expandBtn {
    background-color: black;
    color: white;
}

.expandBtn {
    margin: 15px;
    width: fit-content;
}

.k-mobile .expandBtn {
    margin: 15px auto;
}

.highlight,
.highlight-hover:hover,
.highlight-active:active,
.button.highlight,
.button.highlight-hover:hover,
.button.highlight-active:active {
    background-color: var(--highlight-color);
    color: #fff
}

.highlight:focus,
.highlight:focus-visible {
    box-shadow: 0 0 20px 6px var(--highlight-color);
    outline: none;
}

*:focus-visible {
    box-shadow: 0 0 12px 6px rgba(204, 1, 107, .5);
}

a:focus-visible {
    border-radius: 30px;
    background: rgba(204, 1, 107, .4);
}
[increment]:focus,
[decrement]:focus {
    background-color: var(--highlight-color);
    color: white;
}

a {
    cursor: pointer;
}

/* Custom */

@media(max-width:600px)
{
 .button.adaptive icon{display:flex}
 .button.adaptive text{display:none}
 .button.adaptive{min-width:40px;width:40px;min-height:40px;height:40px;padding-left:0;padding-right:0;}

}

/* ----- */

/* adaptive elements */

/*.mobile{display:none}

@media(max-width:700px)
{
.mobile{display:flex}
.desk{display:none}
}*/

/* ----- */

[classic] box { display: flex; position: relative; flex-shrink: 0; box-shadow: inset 0 0 0 2px; transition:.125s; }

[classic] box { height: 18px; width: 18px; /*border-radius: 3px;*/ }

[classic] check { transform: scale(0); height: 18px; width: 18px; transition: .125s; background: url(/Content/style/data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgPHBhdGggIGQ9Ik0xMy45OTEsNy40NTZMOC40LDEzLDUuMDEsOS42MzcsNi40NzQsOC4xODMsOC40LDEwLjA5MywxMi41MjYsNloiLz4KPC9zdmc+); }

[classic] input:checked ~ box { color: var(--main-color); box-shadow: inset 0 0 0 10px; }

[classic] input:checked ~ box check { transform: none; }

[classic] separator + box { margin-left: 10px; }

[classic] box + separator { margin-left: 20px; }


 [classic] input {display: none}

[classic] {display: flex;align-items: center; min-height: 30px; white-space: nowrap;position: relative;/* overflow: hidden; */cursor: pointer;}


[classic] text {
    padding: 0 10px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
}


[classic]:active { transform: translateY(1px) }


/* [checkbox] */

[checkbox]{display:flex;align-items:center;justify-content:center;min-height:30px;white-space:nowrap;margin:3px;position:relative;overflow:hidden}
[checkbox]:active{transform:translateY(1px)}
[checkbox] input{display:none;}
[checkbox] box{height:20px;width:36px;display:flex;position:relative;border-radius:10px;flex-shrink:0;cursor:pointer;box-shadow:inset 0 0 0 2px;}
[checkbox] text { margin-left: 10px; cursor: pointer; padding: 0 10px; white-space: nowrap; width: 100%; overflow: hidden; position: relative; text-overflow: ellipsis; }
[checkbox] check{height:12px;width:12px;box-shadow:inset 0 0 0 7px;top:4px;left:4px;transition:.25s;background:white;border-radius:20px;position:absolute;}
[checkbox] input:checked ~ box{box-shadow:inset 0 0 0 20px;color:var(--main-color);}
[checkbox] input:checked ~ box check{transform:translateX(16px);box-shadow:inset 0 0 0 0px;}

[checkbox][simple] text:after{content:"No"}
[checkbox][simple] input:checked ~ text:after{content:"Yes"}

[checkbox][minimal] box{height:2px;width:28px;}
[checkbox][minimal] check{height:16px;width:16px;display:flex;top:-7px;box-shadow:inset 0 0 0 2px;left:0}
[checkbox][minimal] input:checked ~ box {}
[checkbox][minimal] input:checked ~ box check{transform:translateX(12px);box-shadow:inset 0 0 0 10px}
 
/* ----- */


/* radio */

[radio]{display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:30px;white-space:nowrap;margin:3px;position:relative;overflow:hidden}
[radio]:active{transform:translateY(1px)}
[radio] input{display:none;}
[radio] box{display:flex;position:relative;border-radius:10px;flex-shrink:0;box-shadow:inset 0 0 0 2px;}
[radio] box{height:18px;width:18px;}
[radio] text{margin-left:10px;}
[radio] check{height:8px;width:8px;transition:.25s;background:white;border-radius:20px;position:absolute;top:5px;left:5px;transform:scale(0);background:var(--main-color)}
[radio] input:checked ~ box{color:var(--main-color);}
[radio] input:checked ~ box check {transform:scale(1)}

/* ----- */


/* option_bar */

.option_bar{display:flex;height:30px;line-height:30px;box-shadow:inset 0 0 0 1px var(--outline);position:relative;overflow:hidden;}
.option_bar label{display:flex;flex:1;}
.option_bar label:not(:last-child):after{content:'';display:flex;height:30px;width:1px;background:var(--outline);z-index: 1;}
.option_bar label:active text{padding-top:1px;}
.option_bar label:hover text{background-image:linear-gradient(to top, var(--outline) 0%,var(--outline) 100%);}
.option_bar label text{flex:1 100%;width:100%;text-align:center;cursor:pointer;}
.option_bar label input{display:none}
.option_bar label input:checked ~ text{background-color:var(--main-color);box-shadow:0 0 0 1px var(--main-color);color:#fff;}

/* ----- */


/* input_cont */

.input_cont{flex:1;-ms-flex:1;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;position:relative;}
.input_cont.large{flex:1 100%}
.input_cont input[type=text],.input_cont input[type=password],.input_cont textarea, .input_cont .data_read{box-shadow:none;background:transparent;position:relative;z-index:99;margin:0}
.input_cont i{position:absolute;height:100%;width:100%;background-color:var(--input-color);box-shadow:0 0 0 1px var(--outline);left:0;top:0;pointer-events:none}
.input_cont .data_read ~ i{background:none;box-shadow:0 1px 0 0 var(--outline);}
.input_cont .btn_sprt{height:20px;margin:0 5px;}
.input_cont .button{z-index:3;border-radius:0}
.input_cont .button.mini{margin:-5px;}
.input_cont actions{display:flex;}
.input_cont > span{position:relative;z-index:1;padding-left:7px;line-height:30px;cursor:text}
.input_cont input:-webkit-autofill ~ i{background-color:rgb(250, 255, 189);}

/* ----- */


/* input_wrap */

.input_wrap{position:relative;display:flex;overflow:hidden;min-height:50px;border-radius:25px;align-items:center;overflow:hidden;z-index:1;width:100%;}
.input_wrap input{border:none;height:50px;width:100%;padding:0 20px;background:none;min-width:0; box-shadow:none}
.input_wrap:not(:first-child){margin-top:10px}
.input_wrap i{position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1;background:var(--input-color);border-radius:25px;pointer-events:none;}
.input_wrap .input-validation-error ~ i{box-shadow:inset 0 0 0 2px rgba(240, 80, 80, 0.3);}
.input_wrap input:-webkit-autofill{box-shadow:inset 0 0 0 50px #ffeeba ; transition: background-color 5000s ease-in-out 0s;   }
.input_wrap input:-webkit-autofill ~ i{background:#ffeeba}
.input_wrap .button.submit{margin-right:10px;}
/*Arman->*/
item[tax] .input_wrap {
    min-height: 40px;
    margin: 0 0 0 10px;
    width: 150px;
}
/*<-Arman*/


/* ----- */


/* tokenize */

.TokenizeMeasure, .Tokenize ul.TokensContainer li.TokenSearch input{margin:0 10px;}
.Tokenize{position:relative;display:flex;display:-ms-flexbox;box-shadow:0 0 0 1px var(--outline);background:#fff;flex:1; -ms-flex:1}
.Tokenize ul{list-style:none;padding:0;margin:0;font-size:var(--text);}
.Tokenize ul li{white-space:nowrap;}
.Tokenize ul li span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:170px}
.Tokenize ul.TokensContainer{box-sizing:border-box;cursor:text;padding:3px;overflow-y:auto;flex-wrap:wrap; -ms-flex-wrap:wrap;display:flex;display:-ms-flexbox;flex: 1; -ms-flex:1;}
.Tokenize ul.TokensContainer li.Token{transition:.125s;-webkit-transition:.125s;background-color:var(--main-color);color:#fff;overflow:hidden;max-width:100%;text-overflow:ellipsis;display:flex;align-items:center;box-sizing:border-box;display:-ms-flexbox; -ms-flex-align:center;padding:0 5px 0 15px}
.Tokenize ul.TokensContainer li.Token.PendingDelete{opacity:0.5;}
.Tokenize ul.TokensContainer li.Token,.Tokenize ul.TokensContainer li.TokenSearch{margin:2px;float:left;border-radius:30px;}
.Tokenize ul.TokensContainer li.TokenSearch{flex:1;min-width:100px;padding:0 3px;}
.Tokenize ul.TokensContainer li.TokenSearch input{margin:0;background-color:transparent;line-height:30px;outline:none;width:100%;box-shadow:none;}
.Tokenize ul.TokensContainer li.Placeholder{color:#ddd;position:absolute;line-height:20px;padding:5px 0 0 5px;display:none;}
.Tokenize ul.Dropdown{box-sizing:border-box;display:none;max-height:180px;width:200px;padding:0;margin:-10px 0 0 0;background-color:white;overflow-y:auto;box-shadow:0 5px 10px -3px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05);box-sizing:border-box;border-radius:2px;z-index:10020;position:absolute;left:10px;top:100%;}
.Tokenize ul.Dropdown li{padding:0 10px;overflow:hidden;cursor:pointer;box-sizing:border-box;height:30px;line-height:30px;text-overflow:ellipsis;font-weight:400;}
.Tokenize ul.Dropdown li.Hover{color:white;text-decoration:none;background-color:var(--main-color);}


.Tokenize li.Token icon:active{transform:translateY(1px);}
.Tokenize li.Token icon{cursor:pointer;}
.Tokenize .button.white{order:2; -ms-flex-order:2;margin:5px;}

.disabled.Tokenize ul.TokensContainer{cursor:default;background:rgba(0,0,0,.02);}
.disabled.Tokenize ul.TokensContainer li.Token{padding:0 5px}
.disabled.Tokenize ul.TokensContainer li.Token a.Close{display:none;}

/* ----- */


/* context_menu */

/*.context_menu{max-width:100vw;max-height:100vh;visibility:hidden;opacity:0;transform:translateY(-5px);transition-property:transform, opacity, visibility;transition-duration:.2s,.125s,.125s;position:fixed;z-index:9999;cursor:default;top:0;display:flex;}
.context_wrap{max-height:inherit;max-width:inherit;width:100%;overflow:hidden;display:flex;flex-direction:column;position:relative;padding:10px;}
.context_container{overflow-y:auto;overflow-x:hidden;width:100%;display:flex;background:#fff;box-shadow:var(--elevation);-webkit-overflow-scrolling: touch;  }
.context_menu.open{transform:none;visibility:visible;opacity:1;}
.context_menu .close_window{display:none;}*/

.context_menu{ transition-delay:.125s;  max-width:calc(100vw - 20px);max-height:calc(100% - 20px);visibility:hidden;opacity:0;/*transition-property:transform, opacity, visibility;transition-duration:.2s,.125s,.125s;*/position:fixed;z-index:999;cursor:default;top:0;/*left:0;*/display:flex; z-index: 10000;}



.context_menu.open{visibility:visible;opacity:1;transition-delay:0s; }
.context_wrap{max-height:inherit;max-width:inherit;width:100%;overflow:hidden;display:flex;flex-direction:column;position:relative;padding:10px;}

.context_container{overflow-y:auto;overflow-y:overlay;overflow-x:hidden;width:100%;display:flex;background:var(--context);box-shadow:var(--elevation);-webkit-overflow-scrolling: touch; transform:translateY(-10px); opacity:0; transition:.125s;  }
.open .context_container{transform:translateY(0); opacity:1;}

.context_wrap footer{background:#fff;display:flex;padding:15px;box-shadow:0 5px 12px -2px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05);position:relative;z-index:100;}





/*list template*/

.list_menu ul {overflow:auto;min-width:220px;margin:0;padding:10px 0;box-sizing:border-box;max-width:260px; font-weight:initial}
.list_menu li {font-weight:400;color:#000;line-height:40px;position:relative;white-space:nowrap;overflow:hidden;box-sizing:border-box;text-align:left;text-overflow:ellipsis;width:100%;cursor:pointer; user-select: none; }
.list_menu li.selected{background:rgba(0,0,0,0.1)}
.list_menu li a{display:flex;display: -ms-flexbox;align-items:center; -ms-flex-align:center;padding:0 10px;width:100%;text-decoration:none;}
.list_menu li icon{margin-right:10px;}
.list_menu li:hover{background:#efefef;}
.list_menu ul li a:active{transform:translateY(1px); }
.list_menu li[separator]{height:1px;box-shadow:0 1px 0 0 rgba(0,0,0, .1);margin:10px 0}
.list_menu li a text{flex:1;min-width:0;overflow:hidden;position:relative;text-overflow:ellipsis; }
.list_menu li.mobile{display:none}

/* ----- */


/* fab */

.fab_container{position:absolute;z-index:7;}

.fab_container.left{left:var(--fab);}
.fab_container.right{right:var(--fab);}
.fab_container.top{top:var(--fab);}
.fab_container.bottom{bottom:var(--fab);}

/* ----- */


/* separator */

separator{box-shadow:inset 0 0 0 1px;}
separator[vertical]{height:30px;min-width:1px;width:1px;margin:0 10px;opacity:.15;position:relative;z-index:2;display:flex;}
separator[horizontal]{min-height:1px;height:1px;margin:20px 10px 0;opacity:.1;position:relative;z-index:2;display:flex;}

/* ----- */


/* btn_sprt */

.btn_sprt{box-shadow:inset 1px 0 0 0px;opacity:.15;height:30px;min-width:1px;width:1px;margin:0 10px;position:relative;z-index:2;}
.button .btn_sprt{height:20px;margin:0 15px;}

/* ----- */


/* material ink effect */

.material_ink{height:100%;width:100%;position:absolute;left:0;top:0;pointer-events:none;}
.material_ink circle{animation:ink_anim .95s;animation-timing-function:ease-out;opacity:0;}

.primary circle, .accent circle{fill:#fff;}

@keyframes ink_anim{from{transform:scale(0);opacity:.7}to{opacity:0}}

/* ----- */


/* loader */


.spinner{position:relative;width:100%;height:60px;display:flex;align-items:center;justify-content:center;padding:0 10px}
.spinner > div{background:var(--outline);width: 30%; min-width: 300px; height:10px; border-radius: 20px; position:relative;overflow:hidden;}
.spinner > div > div{position:absolute;background:var(--main-color);height:100%;width:100%;animation:loader 4s infinite;}

.preloader{height:100%;width:100%;z-index:99999;position:absolute;top:0;left:0;background-color:rgba(255,255,255, 0.65);display:flex;align-items:center;justify-content:center;}
.preloader > div{background:var(--outline);width:150px;height:2px;position:relative;overflow:hidden;}
.preloader > div > div{position:absolute;background:var(--main-color);height:100%;width:100%;animation:loader .95s infinite;}
@keyframes loader{from{transform:translateX(-100%)} 50%{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* ----- */


/* tooltip */

.tooltip{background:var(--tip);color:#fff;top:0;left:0;position:fixed;border-radius:30px;pointer-events:none;padding:6px 15px;z-index:10000;transition-property:opacity,visibility;transition-duration:.125s;}
.tooltip{visibility:hidden;opacity:0;transition-delay:0s;}
.tooltip.open{transition-delay:.3s; visibility:visible; opacity:1;}

.tooltip.error{ background:rgba(240,80,80,1);}


/* ----- */


/* tip */

.tip{position:absolute;background:whitesmoke;z-index:9999;padding:6px 15px;border-radius:30px;color:#fff;opacity:0;visibility:hidden;transform:translateY(-5px);transition-duration:.125s;transition-property:transform,visibility,opacity;cursor:default;pointer-events:none ;margin:5px;}
.tip.open{opacity:1;visibility:visible;transform:translateY(0);animation:tip_anim .2s}
.tip.error{ background:rgba(240,80,80,1);}

@keyframes tip_anim{from{transform:translateY(-5px);opacity:0}}

/* ----- */


/* toast */

.toast_container{position:fixed;bottom:0;display:flex;flex-direction:column;justify-content:center;width:100%;align-items:center;z-index:9999;overflow:hidden;margin:20px 0;pointer-events:none}
.toast_container > div{min-height:30px;background:rgba(0,0,0,.8);color:#fff;display:flex;align-items:center;border-radius:30px;margin:0px 0 10px 0;padding:6px 15px;animation:toast_anim .2s forwards}

.toast_container > div.toast_close{animation:toast_gone .2s both}
@keyframes toast_anim{from{transform:translateY(20px);opacity:0}}
@keyframes toast_gone{to{transform:translateY(-10px);opacity:0}}

.toast_container div[group="error"] {
    background-color: var(--warning-color);
}
/* ----- */


/* toast notifications  */

.toast_cont{position:fixed;width:100%;bottom: 0;box-sizing: border-box;z-index:98;padding-left:200px;left:0;}
.toast{background-color:#3c3c3c;color:#fff; position:relative;overflow:hidden; padding:0 20px; height:50px; line-height:50px; border-radius:7px; overflow:hidden; margin:5px;  animation:notification 5s; animation-timing-function:ease-in-out; animation-fill-mode:both;}
.toast_action { font-weight: bold; position:absolute;right:20px; text-transform:uppercase }
.toast_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100%;float:left;}
.toast_text a{display:block; color:#fff; font-weight:400;}
@keyframes notification {from{opacity:0; transform: translateY(20px)} 10%{transform: translateY(0px)} 20%{opacity:1; } 80% {opacity:1; transform: translateY(0px)} 90%{} to{opacity:0; transform: translateY(20px);}}

/* ----- */


/* scrollbars */

/*.desktop ::-webkit-scrollbar-track{background-color:rgba(0,0,0,0);}
.desktop ::-webkit-scrollbar{width:16px;height:16px;background-color:rgba(0,0,0,0);}

.desktop ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0);background-clip:padding-box;height:40px;width:40px;transition-duration:.25s}
.desktop ::-webkit-scrollbar-thumb:vertical{border-left:12px solid transparent;}
.desktop ::-webkit-scrollbar-thumb:horizontal{border-top:12px solid transparent;}

:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);}

.desktop ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.3);}
.desktop ::-webkit-scrollbar-thumb:vertical:hover{border-left:5px solid transparent;}
.desktop ::-webkit-scrollbar-thumb:horizontal:hover{border-top:5px solid transparent;}

.desktop ::-webkit-scrollbar-button{height:0;width:0;background:transparent}*/



/* ----- */

@media (max-width: 700px) {
    .desk { display: none; }
}


/*error_message*/
.error_message { display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 300px; margin: auto; text-align: center; color: var(--warning-color); }
.error_message b { margin: 20px 0 10px; }
.error_message .button { margin: 20px 0; }

#frmRegister .error_message {
    margin-top: 20px;
}

.input_wrap:focus-within {
    border: 1px solid black;
}

/* Sun Editor */

.sun-editor li {
    list-style: unset;
}

/* Sun Editor */
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700';

body.hideScroll{overflow: hidden}

:focus { outline: none }
img { outline: none }

img.schedulePage-hostLogo {
    border-radius: 50%;
    object-fit: cover;
    height: 50px;
    width: 50px;
    margin-right: 15px;
    background-image: radial-gradient(circle, #ffffff 0%, rgba(0, 0, 0, 0.5) 100%);
}

icon[large] { width: 90px; height: 90px; font-size: 90px; }
icon[middle] { width: 70px; height: 70px;  }
icon[middle] svg { width: 100%; height:100%;  }
icon[apple]{width:65px;height:65px}

icon[light]{    opacity: .15;}

icon[medium]{font-size: 24px}


contact card{display:flex;align-items:center}
contact card[flex="wrap"]{flex-wrap: wrap}
contact card icon[middle]{margin-right:5px}
contact card[float]{margin-left: -10px; align-items: initial; height:80px}
contact card[float]:active{transform:translateY(1px)}

contact .card_wrapper{display: flex; align-items: center; flex-wrap: wrap} 
contact .card_wrapper card[float]{max-width: 150px}
contact .card_wrapper card[float]:last-child{margin-top: 15px}


.k-icon { /*background-color:rgba(0,255,0,.2);*/height: 30px; width: 30px; display:flex; flex-shrink:0; text-decoration:none}
.k-icon:after{ content: "" ; width:30px;height:30px; min-width:30px; display:flex;-moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; font-family: icon; display: flex;  display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; font-size: 30px; font-weight: 400; font-style: normal; user-select: none; /* cursor: default; */ text-transform: lowercase; position: relative; z-index: 9; overflow:hidden; }
.k-select .k-i-calendar:after, .k-i-arrow-e:after, .k-i-arrow-w:after, .k-i-arrow-s:after, .k-i-clock { content: "option" }
.k-i-close:after { content: 'close'; font-size: 20px }

.k-i-arrow-60-left:after{content:"left"}
.k-i-arrow-60-right:after{content:"right"}


.k-widget .k-input { box-shadow: none; }
.k-widget.k-multiselect .k-input{opacity:0.5}

.k-picker-wrap { display: flex; overflow: hidden; width: 100%; }

.pointer{cursor:pointer}
.mobile{display:none;}


/*  */


[space]{margin-top:20px;}
[top]{top:60px;left:0; right:0;background:#fff;top:0;}
[sticky]{position: -webkit-sticky; position:sticky;background:#fff;left:0;right:0;z-index:99;top:0}
[top]{top:60px;}
[outset]{box-shadow:0 1px 0 0 var(--shadow)}
/* navigator */

navigator { width: 100%; display: flex;align-items: center; z-index: 99; user-select: none; box-sizing: border-box;min-height:60px;height:60px; }
navigator[shadow]{box-shadow: 0 0 0 1px var(--shadow)}

navigator[static] item{width:120px;flex:none;}
navigator[static] item wrap{justify-content: center; align-items: center; height:45px;min-width:45px;border-radius:50px;}
navigator[static] item wrap icon{margin-left:10px}

navigator[footer]{position: -webkit-sticky; position: sticky; bottom:0;  left:0; right:0;box-shadow:none;}
/*navigator[header]{position: -webkit-sticky; position: sticky; left:0; right:0;background:#fff;top:0; }*/
navigator[header][top]{tbox-shadow:inset 0 0 0 1px var(--shadow);}
navigator[footer] wrap{
    background:#fff;
}
navigator > wrap { display: flex; align-items: center; width: 100%;height:60px;min-height:60px; gap: 10px; padding: 0 20px; }
navigator.explorePage-resourceNav > wrap { overflow-x: hidden; overflow-y: hidden; justify-content: space-between; gap: 2px;}
navigator.explorePage-resourceNav action.explorePage-resourceNav-actions {
    border-left: 1px solid var(--shadow);
}

@media (max-width: 550px) {
    navigator.explorePage-resourceNav > wrap {
        padding: 0 10px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
}

@media (min-width: 700px) {
    navigator.explorePage-resourceNav > wrap {
        justify-content: unset;
        gap: 10px;
    }
}

navigator item { display: flex; justify-content: center; }

navigator item wrap { display: flex; position: relative; cursor: pointer; overflow: hidden; opacity: .3; }
navigator.explorePage-resourceNav item wrap { flex-direction: column; }
navigator item wrap text { display: flex; font-weight: 700; line-height: 30px; cursor: pointer; white-space: nowrap; padding: 15px 20px; }
navigator.explorePage-resourceNav item wrap text {
    line-height: 12px;
}

navigator item:active wrap text, navigator item:active wrap icon, navigator item:active badge[float]  { transform: translateY(1px) }
navigator item:hover wrap { background-color: var(--grey-fill); }

navigator item.selected wrap { opacity: .9 }

navigator[adaptive] item { flex: 1 }
navigator[adaptive][other] item{flex: none; min-width:60px}
navigator[adaptive] item wrap {
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 100%;
    min-width: 45px;
    border-radius: 50px;
    padding: 2px 15px 4px;
}
navigator[adaptive] item wrap text { display: none; padding: 0; }
navigator[static] item wrap text{padding: 0 15px 0 5px; }

navigator[adaptive] item.selected wrap, navigator[static] item.selected wrap { background-color: #f1f1f1; }
/*navigator[footer] item.selected badge[float]{box-shadow: 0 0 0 2px #e7e7e7;}*/

navigator[pages~="profile"] iscroll .button { top: 10px; }


navigator item badge[float]{
    position: absolute;
    top: 5px;
    right: -3px;
    background: #f94c49;
    color: white;
    font-size: 10px;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0 2px white;
    cursor: pointer;
}
navigator[footer] item badge[float] {
    top: 0;
    right: 0;
    left: unset;
    position: absolute;
    transform: translate(40%, 0);
    border-radius: 50px;
}

@media only screen and (max-width: 525px) {
    navigator[footer] item badge[float] {
        transform: translate(0, 0);
    }
}
@media only screen and (max-width: 650px) {
    navigator[footer] > wrap {
        gap: 5px;
    }

    navigator[footer][adaptive] item wrap {
        padding: 0 5px;
    }
}
navigator item[switcher="notifications"] {
    position: relative
}
navigator item badge[float][empty]{display: none}


[backdrop] { background: #fff; }

/*@supports (-webkit-backdrop-filter: blur(15px)) {

    [backdrop] { -webkit-backdrop-filter: blur(15px); background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255, .07) 100%); }
}

@supports (backdrop-filter: blur(15px)) {

    [backdrop] {backdrop-filter: blur(15px);background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255, .07) 100%);}
}
*/



/* login */
login { display: flex; flex-direction: column; height: inherit; margin: auto; justify-content: center; align-items: center; flex-shrink: 0;}
.login_cont { width: 100%; /*max-width: 360px;*/ background:#fff; display: -ms-flexbox; -ms-flex-direction: column; display: flex; flex-direction: column; /*max-height: 100%;*/ overflow: hidden; -ms-flex-negative: 1; /*height: 100%;*/ flex: 1; -ms-flex: 1 1 auto;padding:50px;border-radius:30px; scrollbar-width: thin; }
.login_cont h2 { margin-bottom: 10px; font-weight: 400; }
.login_cont logo svg { margin-bottom: 30px; }

logo { display: flex; flex-direction: column; justify-content: center }

logo[medium] {
    height: 70px;
    width: 70px;
    min-width: 70px;
    border-radius: 10%;
}
logo svg { fill: #000; }

logo.tableful-logo {
    margin-bottom: 20px;
}

logo.tableful-logo img {
    width: 100%;
}

.show-hide-passwords {
    position: relative;
    right: 5px;
    color: white;
    background: black;
    border-radius: 50%;
    cursor: pointer;
}

#frmRegister .show-hide-passwords {
    right: 10px;
}

.show-hide-passwords.show {
    color: black;
    background: white;
    border: black solid 2px;
}

.btn_forgot {
    padding: 0 5px;
}

a[logo]:active logo { transform: translateY(1px); }

info { margin-bottom: 30px; display: flex; flex-direction: column; }
info p { font-size: 15px; opacity: .5 }
info p.confirm-email-warning { margin-top: 10px; color: var(--warning-color); opacity: 1; display: none; }

.input_wrap select { -webkit-appearance: none; appearance: none; -moz-appearance: none; background: none; box-shadow: none; height: 50px; width: 100%; padding-left: 20px; outline: none; border: none; font-family: roboto condensed; color: #000}
.input_wrap .k-select { width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; }
.input_wrap .k-picker-wrap { padding: 0 15px; min-width: 240px; }

.button_cont  { margin-bottom: 30px; display: flex; flex-direction: column; align-items: flex-start }
.button_cont .button { margin-bottom: 10px; }
.button_cont .button:last-child { margin: 0 }

.button_cont[data-space="top"]{margin: 30px 0 0 0; margin-left: auto}

#frmRegister .button_cont[data-space="top"] {width: 100%;}

#frmLogin .button_cont .button {
    width: 100%;
}

#frmLogin .button_cont .button text {
    width: 175px;
}

#btnRegister {
    width: 100%;
    font-size: larger;
    height: 40px;
}

.fb .fb_iframe_widget { position: absolute; width: 100%; height: 100%; opacity: 0; }

.google .g-signin2 { position: absolute; width: 100%; height: 100%; opacity: 0; }
.google .abcRioButtonLightBlue { background: #4285f4 }

.button.google { background-color: #4285f4; color: #fff; }
.button.fb { background-color: #4267b2; color: #fff; }
.button[pay]{margin-left: 5px}
.button[pay] icon ~ text{margin-left: 5px; font-size: 14px}

.button[applepay]{margin-right: 5px; width: 105px; }
.button[applepay] svg ~ svg {display: none}
.button[underline]{text-decoration: underline}

@media screen and (max-width:460px) {
    action[payment] .btn_sprt {
        margin: 0 0 0 5px
    }
}




.button[paypal] {background: #ffc439; width: 116px;     min-height: 40px;height: 40px;padding: 0 30px;}
.button[size-width="mini"]{min-width: 100px}
.button[size-width="fit-content"]{min-width: fit-content;}

/* ----- */

/* view */
view[detail] { width: 100%; padding: 10px 20px;min-height:100vh }
view[pay]{padding:10px 25px 20px;min-height:initial}
view[reserve]{min-height:initial;padding:0 25px 20px;}
desc { font-weight: 400; display: flex; flex-direction: column;flex-shrink:0 }
desc[medium] { max-width: 1500px; }
desc[ticket]{ padding: 0 20px; }
desc p { overflow: hidden; white-space:pre-line; width: 100%; margin: 4px 0; }

desc[event]{box-shadow: 0 0 0 1px var(--outline); border-radius: 12px; padding: 15px; margin: 0 20px 20px; max-width: 700px}
desc[event] action{padding: 0}
desc[event] p{display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden; max-height: 90px; opacity: 1}
desc[event].expand p{    -webkit-line-clamp: unset; max-height:100%}

desc[event] p ul{display: list-item; margin-left: 15px;}
desc[event] p ul li{list-style: initial}

desc[org-description],
desc[event-description], 
desc[ticket-description], 
desc[drinks]
{
    width: 100%;
}
desc[org-description] action,
desc[event-description] action, 
desc[ticket-description] action, 
desc[drinks] action
{
    padding: 0;
}
desc[org-description] > p,
desc[event-description] > p,
desc[ticket-description] > p,
desc[drinks] > p {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 300px;
    opacity: 1;
    height: 100%;
    transition: all .5s ease-in-out;
}
desc[org-description].expand > p,
desc[event-description].expand > p, 
desc[ticket-description].expand > p, 
desc[drinks].expand > p
{
    -webkit-line-clamp: unset;
    max-height: 5000px;
}

@media screen and (max-width:600px) {
    view[pay]{padding:10px 20px 80px;}
    view[pay] toolbar[right], toolbar[paybuttons]{padding:0}
    toolbar[paybuttons]  action {flex-direction: column; width:100%}
    toolbar[paybuttons] action .button{width: 100%; margin:0 0 7px 0}
    toolbar[paybuttons] action separator{width:100%; height:1px; margin: 5px 5px 10px}
    toolbar[paybuttons] .button[pay] icon{margin:0}
    toolbar[paybuttons] .button[pay] text{width:auto}
    toolbar[paybuttons] .button[paypal] svg{max-width:55px}
    toolbar[paybuttons] .button.apple svg{max-width:50px}


    navigator item wrap text{padding: clamp(10px, 2.3vw, 15px)}
}

.list-style-none,
privacy wrap[data-page="intro"] div[data-type="list"].list-style-none {
    list-style: none;
}

/*

[data-length] {
    flex-shrink: 0;
    max-width: 100%;
}


[data-length='200'] {
    width: 200px;
}

*/



/* followers*/

followers { width: 100%; height: 100%; display: flex; flex-direction: column; }

followers > wrap { width: 100%; height: 100%; padding: 10px 0; }
followers header { font-weight: bold; font-size: 15px }

item[friends] { width: 80px; padding: 5px; display: flex; display: -ms-flexbox; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; position: relative; float: left; }
item[friends] wrap { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center;; }
item[friends] avatar { width: 60px; height: 60px; min-width: 60px; }
item[friends] text { padding: 5px; float: left; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; }
item[friends] text p { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center }



separator[detail] { margin: 10px 0; }
/* switch_cont */

/*.modal_wrap .login_cont{max-width:100%;width:100%}*/

wrap[fix] scroller{width:100%}
.form_fields .media_container{position:relative;overflow:hidden;width:100%;height:100%;display:flex;flex-direction:column;}
.form_fields .media_list {display:grid;grid-template-columns: repeat(5, 1fr);gap:2px;flex-wrap:wrap;flex:1;overflow:hidden;}
.form_fields .media_list > div {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,.1);
    margin: 1px;
}
.form_fields .media_list > div wrap{height:0;padding-bottom:100%;display:block;width:100%;position:relative;background-size:cover;background-position:center center;}
.form_fields .media_list > div wrap action{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:absolute;}
.form_fields .media_list > div:active wrap{transform:translateY(1px)}

.form_fields .media_list > div wrap .button{position:absolute}
.form_fields .media_list > div wrap .button .k-upload{position:absolute; width:100%; height:100%; /*background:red;*/ top:0; left:0; margin:0; cursor:pointer;z-index:99; /*opacity:0;*/ }
.form_fields .media_list > div wrap .button .k-upload input{position:absolute; width:100%; height:100%; /*background:green;*/ top:0;margin:0; left:0;cursor:pointer;opacity: 0; }


/* ----- */


/* srch_cont */

srch { width: 100%; flex: 1; display: flex; align-items: center; position: relative; padding:0 15px 0 10px; min-height: 50px; height: 50px; z-index: 99; color: #000; overflow: hidden; border-radius: 25px; box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.09), 0 0 0 1px var(--shadow); margin: 0 5px; }
srch input[type=text] { box-shadow: none; background-color: transparent; transform: scale(1); width: 100%; -ms-flex: 1; min-width: 0; height: 100%; position: relative; z-index: 99;  flex: 1 }
srch i { position: absolute; left: 0; right: 0; bottom: 0; color: #000; width: 100%; height: 100%; padding-left: 10px; display: flex; display: -ms-flexbox; -ms-flex-align: center; align-items: center; font-family: initial; border-radius: 25px; }

srch .hidden { display: none; animation: hidden_appear_anim .125s; }
srch .hidden:last-of-type { animation-duration: .25s; }


.srch icon[decoration]{order: -1}



/**/
toolbar { display: flex; align-items: center; position: relative; width: 100%; padding: 0 15px; min-height: 60px; user-select: none; z-index: 9; box-sizing: border-box; flex-shrink: 0 }
toolbar[location-map] {
    flex-wrap: wrap;
    justify-content: center;
}

.location-address-container {
    margin-top: 20px;
}

.location-address-container > h2:not(:first-child) {
    margin: 4px 0;
}

.location-event-name, .location-host-name, .location-address {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    text-align: center;
}

toolbar wrap { width: 100%; display: flex; flex-direction: column; margin: auto; align-items: center; }
toolbar text[title] { padding: 0 15px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; flex: 1; }
toolbar text[title] b { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }
toolbar[space-side="5"]{padding: 0 5px}
/*toolbar[adaptive] { box-shadow: 0 0 0 1px var(--shadow); }*/
/*toolbar[outset] { box-shadow: inset 0 1px 0 0 var(--shadow) }*/

toolbar[shadow]{box-shadow:0 0 0 1px var(--shadow)}
toolbar[border="top"]{box-shadow: 0 -1px 0 0 var(--shadow)}
toolbar logo { margin-right: 10px;}
toolbar[center]{justify-content:center}

toolbar[map] + .selected{display:none;}

toolbar[map].grid + .selected[switch_cont]{display:flex;}

toolbar[header]{position:-webkit-sticky; position:sticky;top:0;background:#fff;z-index:999}

chat textarea { height: auto; background: none; box-shadow: none; }

.chatDetail {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.chatDetail.hostName icon {
    font-size: 32px;
    padding-left: 2px;
}

title{padding:10px 20px 0;display:flex;align-items:center;font-size:20px;}

/* panel */

/*panel { display: flex; align-items: center; overflow: hidden; width: 100%; flex-shrink: 0; box-shadow: 0 -1px 0 0 var(--shadow); padding: 10px; }*/


/* list */

#scheduleScroll {
    mask-image: linear-gradient(to right, #000 85%, rgba(0, 0, 0, 0) 100%);
    overflow: scroll;
}

.detailedEventsDateBadge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    white-space: normal;
    color: white;
}

.loading-overlay {
    width: 100%;
    height: 100%;
    border-radius: 7%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle, #ffffff 0%, rgba(0, 0, 0, 0.5) 100%);
    animation: smoothPulse 2s infinite ease-in-out;
}

#allEventList .loading-overlay,
#allVenueList .loading-overlay
{
    border-radius: 5px;
}

@keyframes smoothPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.explorePageLoadingSign {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 1fr;
    width: 100%;
    padding: 20px;
}

list {
    position: relative;
    z-index: 0;
    padding: 20px; /*height: 100%; overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch;*/
    flex-shrink: 0;
    overflow: hidden
}

list[scroll_off] { overflow: initial; height: auto; }
list[scroll_off] > wrap { padding-bottom: 0 }

list > wrap { width: 100%; position: relative; }
list[group] { padding: 0 20px }
list[no_space] { padding: 0 }
list[group][gap] .group > wrap{padding: 20px}
list[group][gap] .group header {box-shadow: 0 0 0 1px var(--shadow);padding:0 10px}
list[group][gap] .group header > div text{padding-left:10px}
list[group] .group > wrap { padding: 20px 0; animation: upcome .225s; }

list .group { display: flex; flex-direction: column; /*overflow:hidden;*/ /*box-shadow: inset 0 -1px 0 0 var(--shadow)*/ }

list[horizontal] item { display: flex; display: -ms-flexbox; flex-shrink: 0; float: left; width: 100%; }
list[horizontal] item[notes]{padding:1px;margin:5px 0}

list[horizontal] item[unread]{ box-shadow: inset -5px 0 0 0 var(--tableful-red);}
list[horizontal] item[read]{opacity:0.7}

list#notificationList item {
    border-radius: 17px;
}
list#notificationList item[read] {
    opacity: 1;
}
list#notificationList item > wrap {
    border-radius: 16px;
}

list item detail{ flex-direction: row; min-height: auto; width: 100%; align-items: center; padding: 15px 0; display: flex; overflow: hidden; height: 100%; }
list item detail[start]{align-items: flex-start}
list item detail[horizontal] > wrap { box-shadow: none;width:auto }
list item detail[horizontal] text[small]{width:70px}
list item detail[horizontal] text[main]{width:95px}
list item > wrap{display:flex;background:none; align-items: center; width: 100%; position: relative; overflow: hidden; height: 100%; }

list item[radius] >  wrap{border-radius: 12px}


list item text[large] { flex: 1; }
list item text[large] > div { display: flex; align-items: center; }
list item text[large] > div p { margin-right: 35px; }
list item text:not([multiple]) p, list item text b, list item { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }

list item wrap text { padding: 0 0 5px; float: left; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; }
list#Commissions item wrap text {
    white-space: normal;
    font-size: 16px;
}
list item actions { display: flex; }

/*list item wrap text span{display:block;}*/
/*list item text p{opacity:0.5}*/
list item wrap date { font-size: 14px; font-weight: 700; display: flex; font-family: Roboto; width: 30px; height: 30px; align-items: center; justify-content: center; margin: 5px; border-radius: 30px; flex-shrink: 0 }
list item wrap date[medium]{font-size:18px;} 

item[chat] wrap { box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.05); }
item[chat] text[large] { padding: 5px 5px 5px 10px }

item[detail] { padding: 5px 0; cursor:pointer; border-radius: 14px; }
item[detail] > wrap { box-shadow: 0 0 0 1px var(--shadow); border-radius: 16px; }
item[detail]:hover > wrap { box-shadow: 0px 0px 1px 2px var(--highlight-color); /*border-radius: 50px;*/ }
item[detail][notes] .notification-notes { white-space: break-spaces; }
item[detail] wrap text { width: auto; padding: 0; }
item[detail] detail { padding: 15px }
 wrap[adaptive]{flex-direction:column;}

detail div[data-type="schedule"]
{
    display: flex; 
    width: 100%;
    height: 100%;
}
detail div[data-type="schedule"] .venue-event-tile-date
{
    display: flex;
    align-items: flex-end;
    padding-left: 5px;
    justify-content: space-between;
    font-family: monospace;
}
list[template="large"] item[detail], list[template="common"] item[detail] {padding: 2px }

item[data] { padding: 5px; /*display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;*/ cursor:pointer; box-sizing: border-box; position: relative; float: left; width: auto }

item[data][space-none]{padding: 1px}
item[data] > wrap { width: 100%; position: relative; display: block; border-radius: 15px; overflow: hidden; box-shadow: 0 0 0 1px rgba(136, 136, 136, 0.3) }
item[data] > wrap[space-all]{padding: 10px}
item[data] > wrap[height="fit"]{height:100%}
item[data] > wrap[flex]{display: flex; flex-direction: column}
item[data] wrap > div { height: 290px; width: 100% }
item[data] wrap > div[height="fit"]{height:100%}
item[data] picture { width: 100%; height: 130px; display: block; overflow: hidden; position: relative; }
item[data] picture img { width: 100%; height: 100%; display: block; overflow: hidden; /*transform:translateY(-80px) */ object-fit: cover }
item[data] detail { padding: 15px; display: flex; flex-direction: column; }
item[data] detail[space-side="small"]{padding-left:5px; padding-right:5px}
item[data] h3 { font-size: inherit; position: relative; margin-top: 5px; width: 100% }

/*item[data] text {white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; padding: 0 0 2px; position: relative; }*/
item[data] text[multiple] { white-space:pre-wrap; padding:0;}
item[data] text[multiple][light]{opacity: .7}
item[data] mask { position: absolute; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: radial-gradient(ellipse at top right, #00000070 25%, #0000 70%); color: #fff; padding: 10px; }
item[data] mask stuck {
    justify-content: flex-end;
    display: flex;
}

item[detail] detail text.deal-detail,
#VenueEvents .item .venue-event-tile-description,
#ScheduleEvents .item .scheduledEventItem-notes,
#allEventList .item .scheduledEventItem-notes,
#allVenueList .item .scheduledEventItem-notes,
#Tickets .item text[multiple],
#TicketsHistory .item text[multiple],
#bookmarkedvenues .item text[multiple],
#bookmarkedEvents .item text[multiple] {
    overflow: auto;
    -webkit-line-clamp: unset;
    max-height: 46px;
    scrollbar-width: thin;
    /* flex: 1; */
}

dot {
    padding: 0 10px;
    font-weight: 700
}
dot::after {content: "\00b7";}
wrap[group]{display:flex;align-items:center}
wrap[group] text{width:auto}


.k-desktop content[switch_cont="requestmessage"] {
        padding: 0 20px;
}

.k-desktop content[switch_cont="requestmessage"] > #messages-container {
        box-shadow: none;
}

navigator:is(.messageNavigationItem, #requestMessages, #tableMessages):has(~ content > .messagebox-open > .chatList.hide-data) {
    display: none;
}

content[switch_cont="promoter"] title {padding:25px 25px 0;}
title[small] {font-size: 14px;}

list[bullet] {box-shadow: inset 0px -1px 0 0 rgba(0, 0, 0, 0.05);}
list[bullet] item{padding: 5px;}
list[bullet] item wrap {box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--shadow);border-radius: 15px;}
list[bullet] item detail{font-size: 18px; padding: 20px;}
list[bullet] item wrap text { padding: 0; width: auto; }
list[bullet] item wrap text[right]{margin-left:auto}


list item wrap text[red]{color:#ff575d}
list item wrap text[green]{color:#55c873}
text[code] {letter-spacing: 4px;text-transform: uppercase;}


list[promo] item text[large] {flex: auto;font-size: 24px;text-align: right;width: auto;overflow: visible;}



list[promo] {}
list[promo] item > wrap {flex-direction: column;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--shadow);border-radius: 15px;}
list[promo] item {padding: 5px;}
detail[header]{padding: 20px;box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);}
detail[header] text {flex: auto;}

.scroll-list-mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: max-content;
    background: linear-gradient(to right, #000 70%, rgba(0, 0, 0, 0) 100%);
    background: white;
}

/*infobar*/

infobar {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 13px;
}
infobar > wrap{padding:20px;width: 100%; flex-shrink:0}
infobar space{display:flex;margin:0 0 50px;}
infobar row{display:flex;align-items:flex-start;width: 100%;overflow: hidden;}
infobar row line{display:flex;align-items:center;min-height:30px;}
infobar row line[titles]{width:150px;flex-grow: 1;}
infobar row line[info]{max-width:600px;/* width: calc(100% - 150px); */}
infobar row line[info] text{white-space:pre-line;text-align: right;}
infobar row line[titles] text{opacity:0.5;white-space:nowrap;width: auto;}
infobar row line[titles] span{height:1px;opacity:0.5;margin:0 10px;flex-grow:1;background-image:url(/Content/style/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCA0IDEiPiAgPHJlY3QgeD0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjwvc3ZnPg==);}

.dark infobar row line[titles] span {background-image: url(/Content/style/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCA0IDEiPiAgPHJlY3QgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)}
infobar row table tr td[info]{padding-right:30px;}


group[data-type="url"]{display:flex; flex-direction:column;  }


group[data-type="url"] .form_fields .data_label {margin-top: 5px}

list[bullet].urls{padding:15px}


[data-position="relative"]{position: relative}
[data-position="right"]{margin-left: auto}

.promo_message{ color: #ff575d; display:flex; align-items: center;  fill: #ff575d ; padding: 0 0 10px 15px; height: 20px; align-items: center; }
.promo_message icon{width: 20px; height: 20px; font-size: 20px}
.promo_message text{ font-weight: 600; margin-left:5px}


/*navigator item badge[data-position-right="small"]{left: auto; right: 10px}*/
[data-position="center"]{margin: auto}

/* marquee*/

text[marquee] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
text[marquee].start { display: flex }

text[marquee] span { position: relative; white-space: nowrap; padding-right: 20px; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
text[marquee].start span { animation-name: marquee; }
text[light] { opacity: .5; }

[data-type="ellipsis"]{ white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}


[data-space-top="15"], list[data-space-top="15"]
{padding-top: 15px}


group[adaptive]{display:flex;flex-direction:column;padding-left:10px;overflow:hidden;height:inherit;}
group[adaptive][right]{margin-left:auto}
group[adaptive] wrap{padding:2px 0}
group[adaptive] wrap[space="top_bottom"]{margin: 5px 0}
grouping[flex]{display: flex; align-items: center; gap: 5px; }
grouping[flex] text[flex="1"]{flex: 1}

@media (max-width: 500px ) {
    grouping[flex] {
        flex-direction: column-reverse;
        align-items: start;
    }

    grouping[flex] text[flex="1"] {
        flex-grow: 0;
        flex-basis: auto;
    }
}

item[detail] wrap grouping[flex] text{ margin: 0 5px 0 0}
grouping[length="fit"]{width: 100%}
grouping badge[right]{margin-left: auto}
group[adaptive] text[space-right]{ margin: 0 5px 0 0}

[data-type="schedule"] group[adaptive] {
    gap: 5px;
    width: 100%;
}

.venue-event-tile-date {
    font-size: 12px;
}

.btnSchedule {
    padding: 0 12px;
    margin: 0 2px;
    gap: 8px;
    justify-content: space-between;
    margin: 0 2px 0 0;
    min-width: 100px;
}

#VenueEvents item.item .btnSchedule {
    padding: 0 0 0 8px;
    gap: 2px;
}

.venue-event-tile-date .btnSchedule icon {
    width: 35px;
    margin: 0;
}

.explore-events-schedule-item {
    margin: 0 2px 0 0;
    width: auto;
}

.explore-events-startEnd {
    font-family: monospace;
    font-size: 16px;
    margin-top: auto;
}

@media (max-width: 600px) {
    #tableList .grouping[flex] {
        flex-direction: column-reverse;
        align-items: end;
    }
    #tableList .k-item group[adaptive] wrap {
        align-self: flex-end;
        text-align: end;
    }
}

@keyframes marquee {
	to { transform: translateX(-100%) }
}


text[small] { font-size: 12px; }
text[medium] { font-size: 16px; }
text[large] { font-size: 20px; }
/* ---- */

/* section */

section { position: relative; z-index: 0; /*height: 100%; overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch;*/ /*flex: 1;*/ display:flex;flex-direction:column;  }
/*section:after { content: ""; height: 25%; width: 100%; display: flex; flex-shrink: 0 }*/
section > wrap { width: 100%; overflow: hidden; display: flex; flex-direction: column;flex-shrink:0 }
section header { font-size: 21px; font-weight: bold; padding: 15px 20px 5px; display:flex; align-items: end; }





item[essential] { width: 250px; padding: 5px; display: flex; display: -ms-flexbox; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; position: relative; float: left; min-height: 130px; cursor: pointer; }
item[essential] wrap { width: 100%; position: relative; display: block; overflow: initial }
item[essential] cover { width: 100%; height: 225px; display: flex; position: relative; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0,0,0, 0.1); overflow: hidden }
item[essential] cover img { display: block; max-width: 100%; width:100%; height:100%; object-fit: cover }
item[essential] cover[no_img] { box-shadow: 0 0 0 1.5px; }
item[essential] cover[no_img] date { color: #000; background: none; }
item[essential] cover[no_img]  mask{display: none}

item[essential] cover[no_img] date badge{color: #000}
item[essential][data-item="request"] cover[no_img] date badge[private]{color: #fff}

item[essential] cover mask[linear]{background: linear-gradient(to top, rgb(0, 0, 0) 0, rgb(0, 0, 0, 0) 50%)}

item[essential] cover[no_img] group badge[backdrop]{background: rgba(0,0,0, .85); color: #fff; box-shadow: 0 0 0 1.5px} 
item[essential] date { position: absolute; height: 100%; width: 100%; margin: auto; display: flex; flex-direction: column; justify-content: end; align-items: end; color: #fff;  border-radius: 20px; }
item[essential] date[multiple] { padding: 15px }
item[essential] mask{position:absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(ellipse, #0000 0%, #00000060 80%)}
item[essential] mask::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Cover the full width */
    height: 100%; /* Cover the full height */
    background-image: linear-gradient(to top, #00000065 50%, transparent 100%);
    pointer-events: none; /* Allows clicks to pass through */
}
item[essential] mask::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Cover the full width */
    height: 100%; /* Cover the full height */
    background-image: linear-gradient(to bottom left, #00000050 25%, transparent 50%);
    pointer-events: none; /* Allows clicks to pass through */
}

item[essential] .chatItem cover[no_img] mask {
    background: none;
}
item[essential] .chatItem cover[no_img] ~ .loading-overlay {
    display: none;
}

item[essential] mask[other]{background: #000; opacity:0.1}
item[essential] date h1 { font-size: 35px; font-weight: 600 }
item[essential] date h1[flex]{display:flex; flex:1}
item[essential] date text[medium]{margin-top:-5px}
item[essential] date span {
    display: flex;
    flex: 1;
    justify-content: end;
}
item[essential] date icon[small] { position: absolute; top: 5px; right: 10px; font-size: 20px }

item[essential] date .button.float { position: absolute; top: 20px; left: 10px; }

item[essential] date .badges-top-left { 
    position: absolute; 
    display: flex;
    flex-direction: column;
    top: 20px; 
    left: 10px; 
    gap: 4px;
}
item[essential] date .badges-top-left .button.float {
    position: relative;
    display: flex;
    width: fit-content;
    top:unset;
    left:unset;
    gap: 0px;
}

item[essential] date .button.btnSchedule { 
    color: white;
    background-color: black;
    opacity: .75;
}

item[essential] date .button.btnSchedule icon { 
    margin: 0;
}

.highlight-hover-yellow:hover,
.button.standard.highlight-hover-yellow:hover,
item[essential] date .button.float.white:hover, 
item[essential] cover[no_img] date .button.float.white:hover, 
item[essential] date .button.btnSchedule:hover
{
    background-color: #ffd773;
    color: black;
}

item[essential] cover[no_img] date .button.float.white{background: #000; color: #fff }

item[essential] .button.orgType{ background: white; color: black; }

item[essential] .button.extra { border-radius: 20px; }

item[essential] detail {
    display: flex;
    flex-direction: column;
    margin: 5px 0 10px;
    align-self: baseline;
    padding: 5px;
    border-radius: 10px;
}

.chatItem .chat-info {
    flex-direction: row;
    gap: 8px;
}
.chatItem .chat-info .orgLogo {
    height: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px white;
}

.chatItem .chat-info > group > span {
    align-items: center;
    justify-content: unset;
}

.chatItem .chat-info > group > span:hover {
    transform: scale(1.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20%;
}

.chatItem .chat-info > group > span[data-button="open-org"] > icon:nth-of-type(1) { /* fix for wrong size of star icon */
    font-size: 28px;
    padding-left: 1px;
}
.chatItem .chat-info > group > span:hover > icon:nth-last-of-type(1) {
    transform: scale(1.3);
}

item[essential] .tile-datetime { 
    position: absolute;
    top: 10px;
    right: 10px;
    flex-direction: column;
    text-align: right;
    margin: 6px;
}
item[essential] .tile-datetime h1 { 
    display: inline-block;
    margin-left: 6px;
}
item[essential] detail text.table-detail { font-weight: bold; opacity: 1;}

item[essential] detail span[data-button="open-org"] > *,
item[essential] detail .orgName
{
     color: var(--tableful-yellow);
}
item[essential] cover[no_img] detail span[data-button="open-org"] > *,
item[essential] cover[no_img] detail .orgName
{
     color: var(--tableful-yellow-dark);
}

item[essential]  detail text ~ text{opacity:0.6}
item[essential] text p { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }


item[essential] .button.cancelRequest.primary.white{background: #fff; color: #000}
item[essential] cover[no_img] .button.cancelRequest.primary.white{background: #000; color: #fff}

list[data-list="chat"] item[essential]{width:100%}
list[data-list="chat"] item[essential] cover{height: 210px}

[data-list="requset"]{overflow: hidden}


 text[multiple] { margin: 5px; float: left; overflow: hidden; word-break: break-word; white-space: pre-wrap; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; position: relative; }


item[essential] text[title]{ font-weight: 600;}
item[essential] text[multiple]{margin:0; -webkit-line-clamp: 1;}
item[essential] text[multiple="2"]{margin:0; -webkit-line-clamp: 2;}


item[essential] wrap.requestChat cover{height: 250px; background: var(--background)}
item[essential][data-item="request"]{width: auto}

item[essential][data-item="request"]{border-radius: 40px}



[data-weight="600"]{font-weight: 600}

text[multiple="3"]{ -webkit-line-clamp: 3;}
text[multiple="2"]{ -webkit-line-clamp: 2;}
text[wrap="normal"]{white-space: normal; margin: 0}

section[all] { padding: 20px }

wrapper { display: flex; display: -ms-flexbox; flex-shrink: 0; float: left; }
wrapper[fill] { padding:  10px 15px; }
wrapper[fill][space-top="none"]{padding: 0 20px 10px}
navigator wrap wrapper { gap: 10px }
.dark
{
  color:#fff;
--over-color:linear-gradient(to top, rgba(255,255,255,.08) 0%,rgba(255,255,255,.1) 100%);
--press-color:linear-gradient(to top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.15) 100%);

}

/* HomePage - Featured Carousel Styles */
.featured-carousel-canva-container {
    position: relative;
    margin: 0 auto;
    aspect-ratio: 1.91;
}

.homepage-section-featured {
    margin-bottom: 10px;
    display: none;
}

.featured-carousel-container {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 25vh;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.featured-carousel {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.featured-carousel-item {
    min-width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
}

.featured-carousel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: white;
}

.featured-carousel-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}

.featured-carousel-subtitle {
    font-size: 16px;
    margin-bottom: 12px;
}

.featured-carousel-controls {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    align-items: center;
}

.carousel-control {
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    margin: 0 5px;
}

.carousel-control:hover {
    background: rgba(255,255,255,0.5);
}

.carousel-indicators {
    display: flex;
    margin: 0 10px;
}

.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    margin: 0 4px;
    cursor: pointer;
}

.carousel-indicator.active {
    background: white;
}

.featured-carousel-cta {
    display: inline-block;
    padding: 8px 16px;
    /* background-color: var(--accent-color, #ff5722); */
    background-color: var(--highlight-color);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.featured-carousel-pause-icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: scale(2.5);
    border-radius: 50%;
    color: white;
    box-shadow: 0 0 0 1px black, 0 0 0 2px white;
    background: rgb(0 0 0 / 30%);
}

.featured-carousel-container.paused .featured-carousel-pause-icon {
    display: block;
}


@media (max-width: 420px) {
    .featured-carousel-container.option-canva {
        height: unset;
        max-height: unset;
        min-height: unset;
    }
    .featured-carousel-canva-container {
        height: max-content;
        width: 100%;
    }
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* END: HomePage - Featured Carousel Styles */

.homepage-subtitle { display: flex; font-size: 15px; }
.homepage-title { text-wrap: nowrap; }
.homepage-section-rsvp br { display: none; }
@media screen and (max-width:450px) {
    item[essential] { width: 180px; }
    item[essential] cover { height: 180px; }
    section wrap header { padding-top: 5px; }
    .homepage-section-rsvp .homepage-title { font-size: 5.5vw; }
    .homepage-section-rsvp .homepage-subtitle { font-size: 3vw; }
    .homepage-section-rsvp br { display: block; }
}

@media screen and (max-width:700px) {
    item[essential] {width: 200px}
    item[essential] cover { height: 220px }
    item[essential] date h1 { font-size: 31px; }
    .homepage-section item[essential] date { font-size: 90%; }
    .homepage-section item[essential] date[multiple] { padding: 15px 5px; }
}
badge[data-position="absolute"] { position: absolute; top: 20px; right: 20px; background: #fff;color: #000;  }

badge.button[data-position="absolute"][left] { right: unset; left: 20px;  }
content[switch_cont="landing"] badge.venue-type {
    display: none;
}
badge[data-position="absolute"] text { padding : 0}

/* ----- */

item[picture] { padding: 0 5px; display: flex; float: left; flex-shrink: 0; width: 230px }
item[picture] wrap { width: 100%; overflow: hidden; border-radius: 15px; box-shadow: 0 0 0 1px var(--shadow); height: 150px }
item[picture] wrap a{    display: flex; flex-direction: column;position: relative;height: 100%; overflow: hidden}
item[picture] img {max-width: 100%;height: 100%; object-fit: cover; /* object-position: center bottom */}
item[picture] cover{display:flex; background:#000;position:relative;color:#fff}
item[picture] cover[height="fit"]{height: 100%}
item[picture] cover img{opacity:0.7}
item[picture] cover action {position:absolute;top:0;bottom:0;left:0;right:0;}
item[picture] cover action .button{margin:auto;}
item[picture]:hover cover img{opacity:0.5}



[switch_cont] { /*display:none;*/ width: 100%; float: left; box-sizing: border-box; flex: 1; flex-shrink:0;overflow:hidden }
.selected[switch_cont] { display: flex;animation: upcome .225s; flex-direction: column; }

@keyframes upcome {
	from { opacity: 0; transform: translateY(10px) }
}


/* scroller */

scroller { display: flex;flex-direction: column; z-index: 1; position: relative ;overflow:hidden;}
/*scroller:after { content: ""; height: 25%; width: 100%; display: flex; flex-shrink: 0; }*/
/*scroller[no_after]:after { display: none; }*/
/*scroller[other] { overflow-x: hidden; }*/

/*scroller, container{ overscroll-behavior: contain;}
#iframe_holder{ overscroll-behavior: contain;  }*/
scroller[center]{height:100%;}


/* avatar */

avatar { width: 40px; height: 40px; min-width: 40px; display: flex; justify-content: center; align-items: center }
avatar > wrap { overflow: hidden; border-radius: 10%; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; background-repeat: no-repeat; background-position: center; }
avatar > div { overflow: hidden; border-radius: 50%; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; background: #d0d0d0; background-repeat: no-repeat; background-position: center; }
avatar img { display: block; height: auto; max-width: 100%; /*max-height:100%;*/ margin: auto; }

/*avatar[large]{width:90px;height:90px;min-height:90px}*/
avatar[color] > wrap { background: #000 }

avatar[large] { width: 100px; height: 100px; min-height: 100px; /*margin-bottom: 10px;*/ }


/* profile */

profile { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; padding: 15px 0 30px; margin: auto; width: 100%; gap: 5px }
profile separator[horizontal] { width: 100%; margin: 10px 0 }
profile h2 { font-size: 20px; margin: 10px 0 }

/* kendo inputs */

.k-widget { position: relative; float: left; }

.field_group { padding: 5px; display: flex; flex-wrap: wrap; align-items: flex-start; }
.field_group .form_fields { padding: 0 }
.form_fields .input_wrap { margin: 5px; }
.form_fields { box-sizing: border-box; display: block; position: relative; padding: 5px; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; flex: 1; }

.form_fields.large{flex:2}

.form_fields.medium .input_wrap  .k-datepicker .k-picker-wrap {min-width:170px}
.form_fields.small .input_wrap {min-width: 120px}

.form_fields .data_label { cursor: default; flex: 1 100%; font-weight: 700; margin: 0 15px 5px; }
.form_fields .section_title { display: flex; align-items: center; padding: 0 5px; opacity: .5; }
.form_fields .form_separator { height: 1px; box-shadow: inset 0 -1px var(--outline); flex: 1; margin: 15px 5px; }
.form_field > .k-widget { overflow: hidden; width: 100%; background: var(--input-color); border-radius: 25px; padding: 10px; }

.form { padding: 20px; width: 100%; }
.form .form_fields textarea { border-radius: 5px; margin: 0 5px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.09), 0 0 0 1px var(--shadow);/* background:#f1f1f1; */ padding: 10px }
.form .k-widget.input-validation-error { box-shadow: 0 0 0 2px rgba(240, 80, 80, 0.3); }

.minimal-emails-label { margin: 10px 0 0 10px; }

.field_group .form_fields[data-length="500"]{max-width: 300px; min-width: 500px}
.field_group .form_fields[data-length="150"]{max-width: 150px; min-width: 150px}

.form .k-widget.k-state-disabled { opacity: .7 }

buttons { display: flex; flex-direction: column; margin-bottom: 5px; }
buttons .button { margin-top: 5px }
.k-widget .k-clear-value { cursor: pointer; }
.k-widget .k-clear-value:active::after { transform: translateY(1px) }

.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap { display: flex; overflow: hidden; padding: 0 10px; width: 100%; }


.k-widget .k-input text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/*multiselect*/

.k-multiselect { position: relative; width: 100%; }


.k-multiselect .k-button { background-color: var(--main-color); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-weight: 400; position: relative; float: left; height: 30px; display: flex; align-items: center; padding-left: 10px; box-shadow: -1px -1px 0 var(--outline-dark); margin: 3px; box-shadow: none; border-radius: 30px; padding: 0 5px 0 15px; }
.k-multiselect .k-button:hover { background-image: var(--over-color); }
.k-multiselect .k-button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.k-multiselect .k-button .k-select { position: relative; flex-shrink: 0 }
.k-widget.k-multiselect .k-i-close { cursor: pointer; right: 0 }
.k-widget.k-multiselect .k-multiselect-wrap ul { }
.k-multiselect-wrap.k-floatwrap { padding: 10px; display: flex; flex-wrap: wrap; }

.k-multiselect.k-state-disabled .k-button { padding: 0 10px; pointer-events: none }
.k-multiselect.k-state-disabled .k-button .k-select { display: none }



.k-widget.k-header .k-select:active { padding-top: 2px; }
.k-popup.k-list-container { padding: 0; border: 0; box-sizing: border-box; background: #fff }
.k-popup .k-list { min-height: 30px; -ms-overflow-style: -ms-autohiding-scrollbar; overflow: overlay; height:100%; max-height: 250px; padding: 10px}
.k-popup .k-list .k-item { line-height: 30px; height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; padding: 0 10px; color: #000; list-style: none; border-radius: 5px }

.k-list .k-item .icon { margin: 0 0 0 -10px; display: block; float: left; }
.k-input .icon { margin: 0 0 0 -5px; display: block; float: left; }

.k-list-optionlabel.k-state-focused, .k-popup .k-list .k-item.k-state-focused { background: rgba(0, 0, 0, 0.1); }
.k-popup .k-list .k-item.k-state-selected { font-weight: 700; }

.k-popup .k-list .k-item:hover, .k-list-optionlabel:hover { background: #000; color: #fff; }
/*.k-popup .k-list .k-item:active, .k-list-optionlabel:active { line-height: 31px }*/

.k-popup .k-list .k-item:active, .k-list-optionlabel:active  text{transform: translateY(1px)}
.k-list-optionlabel { height: 30px; line-height: 30px; padding: 0 10px; font-weight: 700; cursor: pointer; background: rgba(0, 0, 0, 0.05); display: block; position: relative; margin: 5px; }

.k-list-filter, .k-header-item { height: 30px; display: block; position: relative; margin: 5px; }

.k-header-item .button { width: 100%; }

.k-tabstrip-wrapper { height: 100%; }
.k-widget.k-numerictextbox { overflow: visible; }
.k-widget.k-numerictextbox .k-input { padding: 0 7px }


.k-popup { box-shadow: 0 5px 12px -2px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05); }

@keyframes hidden_appear_anim {
	from { opacity: 0; transform: translateX(20px) }
}



/* viewv */
chat {
    position: absolute;
    display: -ms-flexbox;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    -ms-flex-direction: column;
    display: flex;
    flex-direction: column;
    overflow: auto;
    -ms-flex-negative: 1;
    -webkit-overflow-scrolling: touch;
}
chat view { overflow: auto; overflow: overlay; display: flex; height: 100%; flex-direction: column; z-index: 1; justify-content: flex-end; }
chat view wrap { width: 100%; display: flex; flex-direction: column; position: relative }
chat view wrap > div { height: 100%; display: flex; flex-direction: column; padding-bottom: 20px; flex-shrink: 0; }
chat view wrap day { height: 60px; min-height: 60px; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 16px; }


/*.button.large{padding: 0 50px; height: 40px; } */
.button[chat]{margin: 35px 0 0 5px}

/* message */
#messageNav item[switcher] {
    position: relative;
}

#messageNav badge.redPoint,
#requestMessages badge.redPoint,
#tableMessages badge.redPoint
{
    position: relative;
    top: 10px;
    right: 15px;
    left: unset;
    margin-right: -15px;
}

.unreadMessages.hasUnread {
    margin-right: 5px;
}

message{display: flex; padding: 10px 0;}
message thumb[data-ratio="1:1"][data-height="30"]{height: 30px} 

message group > wrap{display: flex;align-items: flex-start;}
message group > wrap{flex-direction: column;}
message > group > wrap msg{display: flex;padding: 10px; margin:0 10px 5px; background: var(--over-color);}

message > group > wrap msg .text{white-space: pre-line; word-break: break-all}

message[incoming] group > wrap{justify-content: flex-start;}
message[incoming] group > wrap msg{border-radius:2px 15px 15px 2px; }

message[incoming] group > wrap msg:last-of-type{border-radius: 2px 15px 15px 15px}

message .message-line-subdata {
    display: flex;
    margin: 0 10px;
    margin-right: 6px;
}

message[incoming] .message-line-subdata {
    flex-direction: row-reverse;
}

message .message-line-subdata info {
    margin: 0;
    display: unset;
    flex-direction: unset;
    font-weight: 700;
}

#messages-container.messages-requests message .message-line-subdata thumb,
message[outgoing] .message-line-subdata thumb{
    display: none;
}

message[outgoing]{justify-content: flex-end;}
message[outgoing] > group > wrap{align-items: flex-end;max-width: 280px;}
message[outgoing] > group > wrap chat[logo]{order:2}
message[outgoing] msg{border-radius:15px 2px 2px 15px; background:var(--main-color); color:var(--background)}
message[outgoing] group > wrap > msg:last-of-type{border-radius: 15px 2px 15px 15px;}
message[outgoing] group > wrap msg:first-child{border-radius: 15px 15px 2px 15px }

chat[wrapper] toolbar textarea{max-height: 50px;min-height: 50px; resize: none;box-shadow: none; background: none;}

chat wrap time{display: flex; opacity:0.8}

#messages-container {
    height: calc(100vh - 180px);
}

#messages-container:has(.chatList.hide-data) {
    height: calc(100dvh - 60px);
}

.chatMessagesContainer .chat-group {
    position: relative;
/*    min-height: calc(100vh - 475px);*/
}

.chatMessagesContainer panel logo img.requestLogo {
    height: 0;
    padding-bottom: 100%;
    display: block;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center center;
}

.chatMessages-panel {
    display: flex;
    max-width: 90%;
    margin-right: auto;
    gap: 2px;
    padding: 10px;
    align-items: center;
}
@media (max-width: 600px) {
    .chatMessages-panel {
        padding: 0;
    }
}

.chatItem .chat-top {
    width: 100%;
    margin: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    top: 0px;
    left: 0;
    padding: 15px;
}
.chatItem .chat-top group {
    margin-left: auto;
}
.chatItem .chat-top .chat-badges {
    margin: 0;
}
.chatItem detail text[title] {
    font-size: 16px;
    backdrop-filter: blur(10px);
    width: fit-content;
    padding: 0px 6px;
    border-radius: 6px;
}
.chatItem group .button {
    margin: 2px;
}

.chatItem .chat-actions {
    display: flex;
    width: 100%;
    justify-content: end;
    align-items: center;
}
item[essential] .chatItem group text,
.chatItem group text {
    float: none;
    opacity: 1;
}

/*chat typing*/
.chat-typing {display:flex;align-items: flex-end;padding: 0 10px;flex:1}
.chat-typing .text{font-style: italic;font-size: 12px; opacity: 0.7}
.typing {align-items: center;display: flex;height: 17px;margin: 5px 5px 0;}
.typing .dot {animation: mercuryTypingAnimation 1.5s infinite ease-in-out;background-color: rgba(186 177 202 /40%); border-radius: 50%;height: 4px; width: 4px; margin-right: 2px;align-items: center;display: flex;}
.typing .dot:nth-child(1) {
  animation-delay: 200ms;
}
.typing .dot:nth-child(2) {
  animation-delay: 300ms;
}
.typing .dot:nth-child(3) {
  animation-delay: 400ms;
}
.typing .dot:last-child {
  margin-right: 0;
}

@keyframes mercuryTypingAnimation {
  0% {
    transform: translateY(0px);
    background-color:#bab1ca ;
  }
  28% {
    transform: translateY(-5px);
    background-color:#9286ab;
  }
  44% {
    transform: translateY(0px);
    background-color: #c4b8dc;
  }
}


/* status */

status { width: 5px; height: 5px; border-radius: 50%; background-color: #78cc00; margin: 0 5px; }


labels { display: flex; align-items: center; width: 100%; overflow: hidden; position: relative; z-index: 9; flex-wrap: wrap; padding: 10px 0; }
labels > span:not(.clear-format), labels group span { font-weight: 400; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; text-align: center; margin: 5px 2px; padding: 0 15px; float: left; box-shadow: inset 0 0 0 1.5px; border-radius: 20px; white-space: nowrap; line-height: 30px; color: inherit; }
labels span a { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
labels .accent { box-shadow: inset 0 0 0 40px; }
labels .accent b { color: #fff; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }


labels[eventpreferences]{padding-top: 0}
labels[tableinfo]{padding-bottom: 0}

labels[single] {
    width: fit-content;
    max-width: 100%;
    flex-wrap: inherit;
    -webkit-mask-image: linear-gradient(to right,#000 70%,rgba(0,0,0,0) 100%);
}

.home-list-tile-badges {
    display: flex;
    align-items: center;
    overflow: auto;
    width: 100%;
    scrollbar-width: none;
    padding: 0 5px;
    gap: 2px;
    flex-shrink: 0;
}

.home-list-tile-badges badge {
    background-color: #00000040;
    margin: 0 .5px;
    backdrop-filter: blur(10px);
}

@media (max-width: 700px) {
    .home-list-tile-badges badge {
        font-size: 90%;
    }
}

item[essential] cover[no_img] date .home-list-tile-badges badge {
    background-color: #ffffff40;
}

labels.detailed-venue-labels {
    width: fit-content;
    min-width: 100%;
    overflow: auto;
    scrollbar-width: none;
}

html.k-mobile labels.detailed-venue-labels {
    -webkit-mask-image: none;
    scrollbar-width: auto;
}

labels[single] span { flex-shrink: 0 }

labels[space-side="10"]{padding: 10px 5px}
labels[event] .button{margin:0 5px 5px 0}

labels action[btn]{padding: 10px 0}
action[btn] {flex-wrap: wrap;gap: 5px; overflow: hidden;width: 100%; padding: 15px 20px 10px}

action[data-type="navigator"]{width: 100%; padding: 10px 15px; box-shadow: inset 0 -1px 0 0 var(--shadow)}

group[reserve] labels > span {
    overflow: auto;
    white-space: normal;
}

/* tickets */

.ticket-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
}

.ticket-qr {
    margin: 0 auto;
    display: block;
    width: 150px;
}

/* tickets */

/* badge */
bg_group{display:flex;align-items:center}

group[flex]{display:flex;align-items: center; }
group[flex] badge{margin: 0 2px}

badge { white-space: nowrap; border-radius: 15px; padding: 5px 10px; z-index: 2; position: relative; text-align: center; box-shadow: inset 0 0 0 1.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
badge[filled] { box-shadow: none; color: #fff; background: #000 }
badge[filled][accent] { background: var(--main-color) }

badge[filled][accent][grey] { 
    background: var(--grey-fill);
    color: black;
}

badge[filled][accent]
{
    background: var(--yellow-fill);
    color: black;
}

[data-label="TableStatus"] {
    display: flex;
    align-items: center;
    height: 29px;
}

.tableStatus {
    cursor: help;
}

badge[filled][pink],
badge[filled].tableStatus-available,
[data-label="TableStatus"].tableStatus-available,
.tableStatus-available
{
    background: var(--tableful-pink);
    color: black;
}

badge[filled][orange],
badge[filled].tableStatus-pending,
[data-label="TableStatus"].tableStatus-pending,
.tableStatus-pending
{
    background: var(--tableful-orange);
    color: black;
}

badge[filled][green],
badge[filled].tableStatus-active,
[data-label="TableStatus"].tableStatus-active,
.tableStatus-active
{
    background: var(--tableful-green);
    color: black;
}

badge[filled][red],
badge[filled].tableStatus-closed,
[data-label="TableStatus"].tableStatus-closed,
.tableStatus-closed
{
    background: var(--tableful-red);
    color: white;
}

badge[private][filled],
item[essential] cover[no_img] date badge[private][filled] {
    background: #6ba64a;
    color: #fff
}

badge[error][filled],
item[essential] cover[no_img] date badge[error][filled] {
    background: #ff6347;
    color: #fff
}

badge[blue][filled],
item[essential] cover[no_img] date badge[blue][filled] {
    background: #4e87de;
    color: #fff
}

badge[pending][filled],
item[essential] cover[no_img] date badge[pending][filled] {
    background: var(--pending-color);
    color: #fff;
}

badge[canceled][filled],
item[essential] cover[no_img] date badge[canceled][filled] {
    background: var(--canceled-color);
    color: #fff;
}

badge[refunded][filled],
item[essential] cover[no_img] date badge[refunded][filled] {
    background: var(--refunded-color);
    color: #fff;
}

item[essential] cover[no_img] date

badge[private] {
    color: #6ba64a
}
badge[error]{color:#ff6347}
badge[blue]{color:#4e87de}


badge[medium]{max-width: 70px}
badge[flex="2"]{flex:2}
badge[data-width="medium"]{min-width: 80px}
@supports (backdrop-filter: blur(10px)) {


    badge[backdrop] {
        backdrop-filter: blur(10px);
        --context: rgba(255,255,255,.95);
    }
}

badge[backdrop]{ background: var(--context); color: #000; box-shadow: none }




/*----*/

/* empty page */

.empty > div { margin: 50px; text-align: center; display: flex; align-items: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; }
.empty h2 { font-weight: 400; font-size: 18px; margin-top: 20px; }
.empty p { font-weight: 400; opacity: .5; font-size: 18px; }

/* ----- */
.address{display: flex;align-items: flex-start;}
.address .button_address{height: auto; min-height: 30px; display: flex; align-items: center; border-radius: 15px; padding: 0px 7px; margin-top: 5px; position: relative; overflow: hidden;}
.address .button_address:hover{background-image: var(--over-color); cursor: pointer;}
.address .button_address:active{transform: translateY(1px);}
.address .button_address text {
    white-space: normal;
    line-height: 1.2;
    text-align: left;
}

/*map*/
map { width: 100%; position: relative; /*height: 100%;*/ display: flex; flex: 1; overflow:hidden; /*min-height: calc(100vh - 260px)*/ flex:1; min-height: 290px }
map wrap { width: 100%; height: 100%; position: relative; }

/*#mapContainer{height:calc(100vh - 200px)}*/

#mapView h3{cursor:pointer; padding-right: 20px}
.gm-ui-hover-effect{top: 2px !important; right: 3px !important}

a[href^="http://maps.google.com/maps"],
a[href^="https://maps.google.com/maps"],
a[href^="https://www.google.com/maps"] { display: none !important; }
/* .gmnoprint:not(.gm-bundled-control) { display: none; } */
.gm-bundled-control .gmnoprint { display: block; }
.gm-style-cc { display: none; }

.poi-info-window.gm-style .address {
    display: flex;
    flex-direction: column;
    padding: 0;
}

div[locations]{display: flex; flex-direction: column ; min-width: 165px;padding: 2px 5px 5px 2px;}
div[locations] > text{box-shadow: 0 0 0 1px rgba(0,0,0, 0.5); border-radius: 25px; margin: 3px; padding: 7px 15px; font-weight: 500; transition: .125s; text-align: center;}
div[locations] > text:hover{background: #000; color: #fff; cursor: pointer}
div[locations] > text:active, .gm-ui-hover-effect:active{transform:translateY(1px)}
div[locations] > action{justify-content: center}
.gm-style .gm-style-iw-c{box-shadow: 0 50px 110px -20px rgb(0 0 0 / 30%), 0 0 0 1px rgb(0 0 0 / 5%); border-radius: 15px }

.marker_address {
    font-weight: bold;
    margin: 10px auto;
    width: fit-content;
    max-width: 240px;
    white-space: normal;
    text-align: center;
}

/**/
iscroll { position: relative; width: 100%; display: flex; flex-shrink:0; overflow: hidden}
iscroll[top] { margin-top: 20px; }
iscroll:hover .button.position{opacity:1;    transform: translateX(0) translateY(-50%); }


#eventScroll wrapper,
#venueScroll wrapper {
    padding: 0;
}
/* profiles */

profiles { width: 100%; height: 100%; padding: 20px; }
profile action { width: 100%; justify-content: flex-end; }
profile action .button { margin: 0 5px; }
profiles view { display: flex; flex-direction: column; width: 100%; }

profile #myQrSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}
profile #myQrSection #myQr {
    display: flex;
    width: 150px;
    max-height: 0;
    box-sizing: content-box;
    padding: 0px;
    align-items: center; 
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.2);
    border-radius: 10px;
    opacity: 0;
    transition: all 1s ease; /* Smooth transition for height */
}
profile #myQrSection.open #myQr {
    max-height: 150px;
    padding: 10px;
    opacity: 1;
    margin-bottom: 10px;
}
profile #myQrSection #myQr img {
    width: inherit;
    height: inherit;
    max-height: inherit;
}
profile #myQrSection #myQrBtn {
    width: min-content;
}
profile #myQrSection #myQrBtn .myQr-hideText {
    display: none;
}
profile #myQrSection.open #myQrBtn .myQr-hideText {
    display: unset;
}

view > group { display: flex; flex-direction: column; }
.group header { position: -webkit-sticky; position: sticky; cursor: pointer; height: 60px; line-height: 60px; padding: 0 10px; width: 100%; z-index: 10; font-weight: 700; top: 0; background: #ffffff; box-shadow: inset 0 -1px 0 0 var(--shadow) }
.group header > div { display: flex; align-items: center; min-height:60px;}
.group header > div .button { margin-left: auto }
.group header > div text { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }

#Tickets .group header > div text,
#TicketsHistory .group header > div text {
    overflow: unset;
    white-space: normal;
    line-height: 1.5;
}

.chat-group {
    padding: 15px;
    height: 100%;
    overflow: auto;
}

[view="grid"] list .group > wrap { transition: .5s; display: none; }
[view="grid"] list .group > wrap.close { display: none; animation: upcome .225s; }
item[timeline] { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); border-radius: 5px; width: 100%; display: flex; flex-direction: column; padding: 10px; margin: 5px 0; }

/* block */

block { display: flex; align-items: center; flex-direction: column; padding-top: 20px; }
block name { text-align: center; font-size: 17px; font-weight: bold; display: flex; align-items: center }

/* actions */
actions { display: flex; align-items: center; justify-content: center}
actions .button { margin: 5px }

text[address] { opacity: 0.5 }

.uploader { position: relative; margin: 0 auto; position: relative; text-align: center; flex: 1; -ms-flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.uploader > wrap { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; width: 100%; height: 100%; }
.upload_controls { position: relative; /* padding: 5px; */ float: left; z-index: 5; transition: transform,opacity .2s; }

.uploader.active .avatar { display: none; }
.uploader:hover > wrap { background: rgba(0,0,0, 0.5) }
.uploader:hover .upload_controls { opacity: 1 }
.uploader .upload_controls { opacity: 0 }

avatar .button .k-upload { position: absolute; width: 100%; height: 100%; /* background: red; */ top: 0; left: 0; margin: 0; cursor: pointer; z-index: 99; /* opacity: 0; */ }
avatar .button .k-upload input { position: absolute; width: 100%; height: 100%; /* background: green; */ top: 0; margin: 0; left: 0; cursor: pointer; opacity: 0; }

avatar .uploader .button.extra { position: absolute; background: rgba(0,0,0,.4); opacity: 0; transition: transform,opacity .2s; color: #fff; z-index:9 }
avatar .uploader.active .avatar, avatar .uploader.active .k-upload { display: none }
avatar .uploader.active .imageContainer { display: flex; }
avatar .uploader:hover .button.extra { opacity: 1; background: #000 }
avatar .uploader.active:hover .button.extra { opacity: 1; background: rgba(0,0,0,.4) }
.k-mobile avatar .uploader.active .button.extra { opacity: 1; background: rgba(0,0,0,.4); }
.k-mobile avatar .uploader .button.extra { opacity: 1; background: #000; }

.imageContainer { position: relative; display: flex; align-items: center; overflow: hidden; width: 100%; display: none; }
.imageContainer > div { height: 0; padding-bottom: 100%; display: block; width: 100%; position: relative; background-size: cover; background-position: center center; }

.context_menu .header.hide{margin-right:5px;}
.context_menu .header.hide .button{color: #fff;background: #2c2c2c;}

 [responsive][mobile]{min-height:100%;justify-content:center}




/*   app{min-height:calc(100vh - 60px)}*/

/* desk */

 [data-height="calc-medium"]{max-height: calc(100vh  -  180px)}
 [data-height="calc-small"]{max-height: calc(100vh  -  120px)}
 [data-width="fit"]{width: 100%}
 [data-width="auto"]{width: auto}
 .button[data-button="chat"] icon{margin: 0; min-width: 20px; }
 .button[data-button="chat"] msg{content: "" ; position: relative; top: -0.5px; left: -12px; background: red; width: 8px; height: 8px; border-radius:15px; z-index: 9; }
 
.list_view_container{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;position:relative;flex: 1;}
.list_view_scroller{ z-index: 0; overflow: auto; display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    max-width: 100%;}  /* temporary comment*/
.list_view_scroller wrap{width:100%;position:relative; display: grid;}

[data-list="requset"] .list_view_scroller > wrap {
    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 44px), 1fr));
    grid-auto-rows: 1fr;
    gap: 20px;
}




navigator[adaptive][other] item[data-minwidth="medium"]{min-width: 150px}

@media screen and (min-width:1000px) {
    /* app{min-height:calc(100vh - 120px)}*/
    /* map { min-height: calc(100vh - 200px); }
    #mapContainer{height: calc(100vh - 260px)}*/
    /*#mapView{height: calc(100vh - 370px)}*/
    
    [data-height="calc-small"]{max-height: calc(100vh  -  180px)}
	navigator[adaptive] item { flex: none; }
    action[data-status="mobile"]{display: none}
	navigator.explorePage-resourceNav[adaptive] item wrap icon { margin-left: 0; }
	profile { max-width: 450px; }
	/*toolbar logo*/ .desk { display: flex; }
    .header.hide{display:none;}
    .modal_wrap privacy{max-width:1000px}
    .modal_wrap privacy[data-page="intro"]{max-width:705px}
    [responsive]{max-width:700px}
    .login_cont[responsive]{max-width:400px}
     [responsive][mobile]{min-height:inherit;justify-content:inherit}
}

@media screen and (max-width:1000px) {
    navigator[adaptive][other] item[data-minwidth="medium"] {min-width: 40px;}
    group[data-space-mobile="small"]{padding: 0 50px 10px}

    navigator item badge[float] {
        left: 54%;
        right: unset;
    }
}

@media screen and (max-width:600px) {
    navigator[adaptive][other] item, navigator[adaptive][other] item[data-minwidth="medium"] {min-width: 40px;}
    navigator[adaptive][other] item wrap{min-width: 40px; height: 40px}


    detail div[data-type="schedule"]{flex-direction: column}

    detail div[data-type="schedule"] .button.btnSchedule{  max-width: min-content; }
}
/* @media screen and (max-width:460px) {
map { min-height: calc(100vh - 140px); }
}*/

@media screen and (min-width: 525px) {
    navigator.explorePage-resourceNav[adaptive] item {
        min-width: 65px;
    }
    navigator.explorePage-resourceNav[adaptive] item wrap text  {
        display: flex;
        font-size: 70%;
    }
}
@media screen and (min-width: 525px) {
    navigator[adaptive][footer] item wrap text {
        display: flex;
    }
}

@media screen and (min-width: 605px) {
    navigator.explorePage-resourceNav[adaptive] item  {
        min-width: 75px;
    }
    navigator.explorePage-resourceNav[adaptive] item wrap text  {
        font-size: 80%;
    }
}

@media screen and (min-width: 800px) {
    navigator.explorePage-resourceNav[adaptive] item  {
        width: 100px;
    }
    navigator[adaptive] item wrap text {
        display: flex;
    }
}

@media screen and (min-width: 850px) {
    navigator.explorePage-resourceNav[adaptive] item  {
        width: 110px;
    }
    navigator.explorePage-resourceNav[adaptive] item wrap text {
        font-size: unset;
    }
}

@media screen and (max-width:1000px){
    div[quantity] .button.large{width: 100%}
}

/*div[quantity][data-position="fixed"]{     display: flex; align-items: center;flex-wrap: wrap;gap: 15px; box-shadow: inset 0 1px 0 0 var(--border-color); z-index: 9999;  animation: upcome .225s; transition: .225s; position: fixed;  background: #fff }
*/
div[quantity] count {overflow:hidden;
      display:flex;
    flex-shrink: 0;
    --button-radius: 0;
    --input-radius: 0px;
    height: 40px;
    box-shadow: inset 0 0 0 1px var(--outline);
    border-radius: 9px;
    position: relative;
    overflow: hidden;
}

.event-ended-text,
div[quantity] .event-ended-text {
    font-weight: bold;
    color: var(--warning-color);
    justify-content: center;
    gap: 5px;
    margin: 0 60px;
    width: fit-content;
    max-width: unset;
    justify-self: center;
}

@media (max-width: 540px ) {
    .event-ended-text,
    div[quantity] .event-ended-text {
        margin: 0 10px;
        font-size: 16px;
    }
}


/* kendo */

.k-widget { position: relative; float: left; }
.k-widget.k-header, .k-widget.k-numerictextbox { min-height: 30px; border-radius: 30px; width: 100%; }

/* calendar picker */

.k-widget.k-calendar { width: 300px; padding: 10px; float: left; overflow: hidden; text-align: center; background: #fff; }
.k-widget.k-calendar .k-header { display: flex; margin-bottom: 10px; }
.k-calendar .k-header .k-nav-prev, .k-calendar .k-header .k-nav-next { width: 40px; flex-shrink: 0; }
.k-calendar .k-header .k-icon { margin: 5px; }
/*.k-upload-button{overflow:hidden;position:relative}
.k-upload-button input{position:absolute;top:0;right:0;z-index:1;margin:0;padding:0;opacity:0;cursor:pointer;width:150px;height:150px;}*/
.k-calendar th { height: 40px; padding: 0; text-align: center; font-weight: 700; text-transform: uppercase; margin: 0; /* color: #fff; */ border: none; /* background: #3c3c3c; */ }
.k-calendar td { padding: 0; width: 40px; height: 40px; box-shadow: inset 0px 1px 0 0px rgba(0,0,0,.1), inset 1px 0px 0 0 rgba(0,0,0,.1); }


.k-calendar .k-content .k-link { font-weight: 700; }
.k-calendar .k-content .k-other-month .k-link { font-weight: 400; opacity: .3; }
.k-calendar .k-content { float: left; border-spacing: 0; border-width: 0; margin: 0; table-layout: fixed; text-align: center; outline: 0; width: 100%; height: 260px; box-sizing: border-box; background: none; }
.k-calendar .k-link.k-nav-fast { width: 100%; }
.k-widget.k-calendar .k-footer { height: 40px; /* background: #efefef; */ float: left; width: 100%; margin-top: 10px; }
.k-calendar .k-link { display: flex; align-items: center; justify-content: center; min-height: 40px; font-weight: 700; }
.k-calendar .k-link:active { transform: translateY(1px) }
.k-calendar .k-link:hover { background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,.05) 100%); }
.k-calendar .k-content .k-state-selected { background-color: #3c3c3c }
.k-calendar .k-content .k-state-selected .k-link { color: #fff }


.k-calendar tbody { box-shadow: inset 0px -1px 0 0px rgba(0,0,0,.1), inset -1px 0px 0 0 rgba(0,0,0,.1); background: #fff; }
.k-link { text-decoration: none; }

/* ----- */
.org-description-container,
.event-description-container,
.ticket-description-container,
.drinks-container {
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px var(--outline);
    border-radius: 12px;
    margin-top: 20px;
    max-width: 800px
}

.org-description-container options,
.event-description-container options,
.ticket-description-container options,
.drinks-container options {
    box-shadow: none;
}

.org-description-container header,
.event-description-container header,
.ticket-description-container header,
.drinks-container header {
    font-weight: 700;
}

.org-description-container action,
.event-description-container action,
.ticket-description-container action,
.drinks-container action {
    padding: 10px
}

options { display: flex; box-shadow: 0 -1px 0 0 var(--outline); padding: 15px;  min-height: 100px; }

options .org-description,
options .event-description,
options .ticket-description,
options .drinks {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: unset;
}

.org-description-container.expand options .org-description,
.event-description-container.expand options .event-description,
.ticket-description-container.expand options .ticket-description,
.drinks-container.expand options .drinks {
    -webkit-line-clamp: unset;
}


gap{display: flex; height: 100px; width: 100% ;}

div[quantity]{background: #fff; padding:  20px; z-index: 9 ; box-shadow:inset 0 1px 0 0 var(--border-color); 
    /* max-width: calc(100% - 76px); */
}
[data-sticky]{position: sticky; }
[data-sticky-top]{top: 0}
[data-sticky-bottom]{bottom: 0}
[data-bottom="60"]{bottom: 60px}
div[quantity] div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    max-width: calc(100% - 70px);
    font-size: large;
}



div[quantity] count .button{height: 40px; width: 40px; padding:0; border-radius: 0}

div[quantity] count input { width: 40px;  height:40px; flex: initial;  padding:0px; box-shadow: none; text-align: center; font-weight: 700; height: 40px; box-shadow: 0 0 0 1px #e4e4e4; background: rgba(136, 136, 136, 0.1) }

div[quantity] count input:focus{background: none}

div[quantity] .button.primary text[data-prop="ReservationPrice"] {
    font-size: clamp(10px, 4.2vw, 28px);
    white-space: pre-wrap;
    line-height: normal;
}

@media (max-width: 480px) {
    div[quantity] .button.primary {
        padding: 0 14px;
    }
}


content.selected[data-overflow="inherit"]{overflow: inherit}
content.selected[data-overflow="inherit"] > wrap{overflow: inherit}
content.selected[data-overflow="inherit"] > wrap > view{overflow: inherit}


count .button icon{margin:auto}
count separator[vertical] { margin: 0; }
/*count input[type=text] {box-shadow: inset 1px 0 0 0 rgba(0,0,0, 0.1), inset -1px 0 0 0 rgba(0,0,0, 0.1);margin:0 20px;text-align:center;}
*/
action { display: flex; align-items: center; padding: 10px 0;  }
@media only screen and (min-width: 700px) {
    navigator.explorePage-resourceNav action { margin-left: auto; }
}

action[reference]{gap: 5px}
action[button="newStyle"] .button{height: auto; white-space: initial; line-height: 1.3; padding: 5px 24px 5px 15px; text-align: initial; border-radius: 20px }
action[button="newStyle"] .button text{white-space: pre-line}
action[flex="wrap"]{flex-wrap: wrap}
action timer { margin-left: auto }
action[center] { margin: 0 auto; }
action[right] { margin-left: auto; }
action[shadow="top"]{box-shadow: 0 -1px 0 0 var(--shadow)}
action[right][map]{padding-right:15px}
action[right] .button.space {margin: 0 5px }

action[right] .button.right{margin-left:auto}

action[left]{margin:0 15px}
action[length="fit"]{width: 100%}

.table-action-btn icon {
    min-height: 30px;
    min-width: 30px;
    font-size: 30px;
}

.table-action-btn.view-event icon {
    font-size: 23px;
}

.button.fit {
    width: 100%
}

icon[color="green"]{color: #02a91e}
icon[space-right="10"]{margin-right: 10px}
icon[left="5"]{margin-left: -5px}
separator[horizontal][small]{margin: 5px 0}
separator[vertical][small]{height: 20px; margin:0 5px}
separator[vertical][stretch]{height: 100%; margin:0 15px}
text[right="5"]{margin-right:  5px}
timer { font-weight: bold; font-size: 15px; }

.org-name-container, .event-name-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

#checkout-orgName, #checkout-eventName {
    text-decoration: underline;
}

.event-name-container {
    margin: 0 0 4px;
}
.event-name-container icon {
    margin: 0 6px 0px 4px;
}

.event-date-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.event-date-container icon {
    margin: 0 6px 0 4px;
}

.event-date-container h4 {
    font-family: monospace;
}

amount { display: flex; flex-direction: column }
amount item { display: flex; align-items: center; padding: 5px 0; }
amount item[tax] span, item[total] b { margin-left: auto; }
amount item[tax] span { font-size: 25px; }
amount item[total] b { font-size: 30px }
amount item[total] { font-weight: bold; font-size: 15px; }

amount.checkout-amounts div.checkout-fees {
    max-height: 0;
    opacity: 0;
    transition: all ease 0.5s;
    overflow: hidden;
}

amount.checkout-amounts div.checkout-fees.open {
    max-height: 500px;
    opacity: 1;
}

amount .checkout-fees item[tax] span { font-size: 20px; }

agreement { display: flex; align-items:center;flex-wrap:wrap; margin-bottom:20px }
agreement a { text-decoration: underline; font-weight: bold; }

toolbar[right] .button, toolbar[right] term { margin-left: auto }
toolbar[hide-space]{padding: 0}

success { display: flex; width: 100%; height: 100%; padding-top: 20px; }

item[complex] { padding: 20px; position: relative; border-radius: 20px; box-shadow: 0 0 0 2px; overflow: hidden; float: left; margin: 5px; width: auto }
item[complex] info { margin: 20px 0; display: flex; flex-direction: column; }
item[complex] info[no_space]{margin:0}
item[complex] text { margin: 5px 0; float: left; }
item[complex] tablenumber { font-size: 24px; }
item[complex] info[space_small]{margin:10px 0 0}

item[complex] span:has(text.eventname),
item[complex] span:has(text.orgname),
item[complex] span:has(text.orgTableName),
item[complex] span:has(text.address)
{
    cursor: pointer;
    width: fit-content;
}
item[complex] text.eventname,
item[complex] text.orgname,
item[complex] text.orgTableName,
item[complex] text.address
{
    text-decoration: underline;
}
item[complex] text.eventname:active, item[complex] text.orgname:active{transform: translateY(1px)}
item[complex] text.orgname {margin-bottom:0 }

item[complex] badge[float]{ position: absolute; right: 20px}

item[complex][data-item="order"]{padding: 15px  15px 0}

.input_wrap.inputs { box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.09), 0 0 0 1px var(--shadow); }
.input_wrap.inputs i { background: none; }
.input_wrap.inputs .button { margin-right: 10px; }


item[complex] .input_wrap i { background: none; }
text[venuename], text[user] { font-size: 15px; }
text[titles] { margin: 5px 0; float: left; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex-shrink: 0; }


/*empty*/
empty {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 40px);
}
empty wrap { margin: 50px auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; -ms-flex-direction: column; }
empty h2 { font-weight: 400; font-size: 18px; margin-top: 5px; }
empty p { font-weight: 400; opacity: .5; font-size: 18px; }
empty icon {
    margin: 0 auto;
}

empty text { padding: 20px 0; opacity: 0.6; font-size: 14px; }
empty[space-left="5"] text{margin-left: 5px}
/**/

/*filter_result*/
result { display: flex; align-items: center; }
result .button { margin: 5px }

.filter_result { width: 100%; overflow: auto; display: none; }

.filter_result.filtered { display: flex; }
.filter_result.filtered .filter_result_wrap { max-width: 100%; display: flex; min-height: 60px; align-items: center; z-index: 1; position: relative; float: left }
.filter_result.filtered .filter_result_wrap > div { display: flex; padding: 15px 0; float: left; -ms-flex: 0 0 auto; }

.filter_result.filtered .filter_result_wrap > .scroller{overflow: overlay;scroll-snap-type: x mandatory;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;}
.filter_result_wrap .scroller .button{flex-shrink:0}
/*.filter_result_wrap .scroller::-webkit-scrollbar{ display: none }*/















/**/



.filter_result .filtered_item {min-height: 30px;line-height: 30px; display: flex;}

.filter_result .filtered_item label { float: left; padding: 0 5px 0 10px; opacity: .6; white-space: nowrap; }
.filter_result .filtered_item span { height: 30px; line-height: 30px; display: flex; white-space: nowrap; margin: 0 5px; float: left; padding: 0 0 0 15px; background: #424242; color: #fff; position: relative; border-radius: 50px; }
.filter_result .filtered_item span icon { cursor: pointer; margin-right: 5px; font-size: 20px; }
.filter_result .filtered_item icon:active { transform: translateY(1px); }

.light .filter_result .filtered_item span { background: #fff; color: #000; }

input[type=checkbox]:active { transform: translateY(1px); }

result { display: flex; align-items: center; }
result wrap .button { margin: 5px; }

/*heading*/

.heading { display: none; }

/*preferences */

preferences { display: flex; align-items: center; flex-direction: column; }
preferences labels { justify-content: center ;padding:10px}
preferences text { font-weight: bold; font-size: 16px}


/*Tatul*/

/*.payment, .success, payment, error {position: absolute; z-index: 100; width: 100%; height: 100%; background-color: #fff;top:0;bottom:0;left:0;right:0; }*/

space{display:flex;margin:0 0 10px}
space[medium]{margin:0 0 20px}
space[middle]{height:20px; margin: 0}
space[small]{height: 15px ;margin: 0}

div[success]{width:100%;display:flex;flex-direction:column}
div[reserv]{width:100%;display:flex;flex-direction:column}

iscroll img { -webkit-user-drag: none; }



.success { z-index: 102; }
error { z-index: 103; }
input[pattern]:valid ~ .hidden { display: flex; }

.srch input[pattern]:valid ~  icon[decoration]{width:0px}

icon[decoration]{transition: .125s}

[view="grid"] > wrap item[essential]{width: auto}

[view="grid"] list > wrap[gap]{padding: 10px}


/* Custom */
.event-basics .eventBasics-eventName,
.event-basics .eventBasics-tableName {
    font-size: 130%;
    margin: 18px 0px 8px;
    display: inline-block;
}
.event-basics .eventBasics-eventDate {
    font-size: 110%;
    display: flex;
    gap: 15px;
    align-items: center;
}
.event-basics .eventBasics-eventDate span {
    white-space: initial;
    line-height: initial;
    padding: 5px 10px;
    text-align: initial;
}
.event-basics .eventBasics-eventDate hr{
    width: 20px;
    border: 1px solid;
}

.eventDate-fromTo {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    font-weight: bold;
    border-bottom: 1px solid black;
}

.bookingWindowText {
    flex-grow: 1;
    font-weight: 800;
    color: var(--tableful-red);
    opacity: 0.65;
}

.tooltip .bookingWindowText {
    color: white;
}

.successPage-ticketList info icon.star,
.reservationUpcomingPage-ticketList info icon.star,
.reservationHistoryPage-ticketList info icon.star {
    font-size: 30px;
    position: relative;
    top: 2px;
}

/* Custom */

@supports(display:grid) {
    [view="grid"] list > wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); grid-auto-rows: 1fr; gap: 10px }
    [view="grid"]  > wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 1fr; padding: 20px }
    [view="grid"] list#Tickets > wrap { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    [view="grid"] list#Tickets > wrap:has(item.item:only-child) {
        display: flex;
        justify-content: center;
        justify-self: center;
    }
    [view="grid"] list#Tickets > wrap:has(item.item:only-child) {
        width: 500px;
        max-width: fit-content;
    }

    [view="grid"] list .group > wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; }
    [view="grid"] list[template='common'] .group > wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-auto-rows: 1fr; }
    [view="grid"][data-list="chat"]  > wrap { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  }
    [view="grid"] list[data-list="order"] .group > wrap {grid-auto-rows:auto}
}

@media  (max-width: 600px){ 

    [view="grid"] list[template="common"] .group > wrap {grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 10px}
    .button[chat]{margin: 15px 0 0 5px}
}

#btnRequest {
    position: sticky;
    bottom: -20px;
    z-index: 100;
    height: 50px;
    width: 100%;
    opacity: 0.9;
}


/*filter*/

.cart_view .filter_container.static { transform: translateX(-100%); position: absolute; }
.cart_view .filter_container.static + .container { padding-left: 0px }


/*filter_container*/
.filter_container { max-width: 550px; width: 550px; background: #fff; transition: transform.2s; display: -ms-flexbox; -ms-flex-negative: 1; display: flex; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 100; will-change: transform; }
.filter_content { width: 100%; position: relative; overflow: auto; overflow-x: hidden; padding: 0 15px }
.filter_container.advanced { flex: 1; -ms-flex: 1 1 auto; }

.filter_block { box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1);  }
.filter_block.footer { padding:15px;background:rgba(255,255,255,.03);display: flex; margin-left:auto; min-height: 60px; height: 60px; width:100%; justify-content: flex-end; }

.filter_block .ch_cont { color: #fff; }
.filter_block .title { display: flex; align-items: center; padding: 15px }
.filter_block .title span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 24px; font-weight: 300; }
.filter_block .title icon { margin-right: 10px; }

.filter_block .title .button { display: none }
.filter_block .options_input { float: left; }
.filter_block .options_input .k-widget.k-header .k-select { display: none; }

.filter_block .button.reset { height: 60px; width: 100%; color: #fff; font-weight: 300; font-size: 16px; text-align: left; padding: 0 20px;   }
.filter_block .button.reset:hover { box-shadow: none; background: rgba(255,255,255,.05) }

.filter_block .data_cell { float: left; width: 100%; display: block; padding: 10px }
.filter_block .data_cell .options { float: left; }

.filter_block .data_cell .k-datepicker{ width: 120px; margin: 3px; background: #eaeaea }
.filter_block .data_cell .k-timepicker { width:100px; margin:3px;background: #eaeaea  }
.filter_block .data_cell .k-numerictextbox { width: 80px; margin: 3px; background: #eaeaea }

.filter_block input::-moz-placeholder { /* Firefox 4 - 18 */ color: #000; }
.filter_block input::-webkit-input-placeholder { /* Chrome */ color: #000; }
.filter_block input::-ms-input-placeholder { /* IE 10+ */ color: #000; }
.filter_block input::-moz-placeholder { /* Firefox 19+ */ color: #000; }

/**/

html:not(.k-mobile) div.window_cont:has(.contact-form) {
    height: auto;
}

html:not(.k-mobile) .contact-form {
    width: 700px;
}

contact{position: relative; display:flex;flex-direction:column;border-radius:30px; width: 100%;flex-shrink:0;
    /*overflow: hidden;*//*padding:50px 70px;max-width:700px*/}  
contact h1 { text-transform: lowercase; white-space: nowrap; font-size: calc(2.5em + 1vw) ;font-weight: 300; opacity: .2; height: 60px; line-height: 40px;  }

contact p {max-width:450px;font-size:18px; margin:20px 0}
contact detail {margin: 5px 0}
contact a{ user-select: text; line-height: 1.5; }

/*filter options*/

.options label input { display: none }
.options label span .icon { margin: 0 10px 0 -30px; }
.options label input:checked ~ span { background: #3c3c3c; color: #fff; }

.options label:active { transform: translateY(1px) }
.options label { max-width: 100%; cursor: pointer; margin: 3px; float: left; }
.options label > span { max-width:350px; padding: 0 15px; height: 30px; line-height: 30px; display: flex; align-items: center; float: left; background: #eaeaea; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /*max-width: 100%; */ border-radius: 30px; }
.options label > span text{overflow: hidden; text-overflow: ellipsis; max-width:100%}


.options li { box-shadow: inset 0 -1px 0 0 rgba(0,0,0, .1); height: 40px; display: flex; display: -ms-flexbox; align-items: center; -ms-flex-align: center; padding: 10px; }


@media (max-width: 480px) { 
    .options label > span { max-width:300px; }
}
@media (max-width: 400px) { 
    .options label > span { max-width:290px; }
}
/* policy */


policy{display:flex;margin:10px 0; }
policy a:active{transform:translateY(1px)}

profile policy{text-align: center}

login policy{margin:20px 0 0 15px }
/*float {z-index:99; bottom: 120px; right: 60px; background:#fff; box-shadow: 0 10px 10px -5px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.03); cursor:pointer; width: 60px; min-width: 60px; height: 60px; position:fixed; display: flex; align-items: center; justify-content: center; border-radius: 50px; }*/
float:active{transform: translateY(1px);}
/* */

.button.position { position: absolute; background: #fff;   box-shadow: 0 5px 5px 0px rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 10%); top: 50%;  z-index: 9; opacity: 0; transition: .125s; transition-property: transform, opacity; }
.position.left{left:20px; transform:  translateX(10px) translateY(-50%)}
.position.right{right:20px; transform: translateX(10px) translateY(-50%) ; }

.button.position.right[data-right="65"]{right:65px; transition: .25s;}
iscroll:hover .button[scrolltovideo] {
    transform: inherit;
}

.button[scrolltovideo] {
    right: 20px;
    top: 20px;
}

policy text a b:active{transform: translateY(1px)}


temp {display: flex;justify-content: flex-end; padding: 10px 5px 0}
temp .button icon{margin:0}


[data-elevation="3"]{box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)}


[data-gap="5"]{gap: 5px}
[data-gap="10"]{gap: 10px}
[data-gap="20"]{gap: 20px}
[data-row-gap="5"]{ row-gap: 5px}
[data-display="flex"] {display: flex}
[data-flex-grow="1"] {flex-grow: 1;}
[data-flex-wrap="wrap"] {flex-wrap: wrap;}
[data-direction="column"]{flex-direction: column}
[data-direction="row"]{flex-direction: row}

[data-wrap="wrap"]{flex-wrap: wrap}
[data-align="center"]{align-items: center}
[data-justify="center"]{justify-content: center}
[data-justify="space-between"]{justify-content: space-between;}
[data-decoration="none"]{text-decoration: none}

text[link]:active {transform:translateY(1px)}

[data-decoration="underline"]{text-decoration: underline}

[data-white-space="normal"]{white-space: normal}

[data-space="none"],
action[data-space="none"],
group[other] span[data-space="none"] {
    padding: 0;
}

[data-space="20"]{padding: 20px}


[data-space-top="0"],
action[data-space-top="0"]
{padding-top: 0px}
[data-space-left='5'] {padding-left:5px;}
[data-space-left='10'] {padding-left:10px;}
[data-space="10"]{padding: 10px}
[data-space="15"]{padding: 15px}
[data-space="20"]{padding: 20px}

[data-space-bottom='5'] {padding-bottom:5px;}
[data-space-bottom='10'] {padding-bottom:10px;}
[data-space-bottom='20'] {padding-bottom:20px;}

[data-space-vertical='0']
{
    padding-top: 0px;
    padding-bottom: 0px;
}

[data-space-vertical='10'],
detail[data-space-vertical='10']
{padding-top:10px; padding-bottom: 10px;}


[data-space-horizontal='0'],
action[data-space-horizontal='0'],
wrapper[data-space-horizontal='0']
{padding-left: 0px; padding-right: 0px;}
[data-space-horizontal='5'] {padding-left: 5px; padding-right: 5px;}
[data-space-horizontal='10'] {padding-left: 10px; padding-right: 10px;}


text[data-margin-top="10"],
[data-margin-top="10"]
{margin-top: 10px}
[data-margin="0 auto"]{margin: 0 auto;}
[data-margin="10"]{margin: 10px}
[data-margin="20"]{margin: 20px}
[data-margin-top="20"]{margin-top: 20px}
[data-margin-bottom="100"]{margin-bottom: 100px}
[data-margin-bottom="20"]{margin-bottom: 20px}
[data-margin-bottom="5"]{margin-bottom: 5px}
[data-margin-left="-15"]{margin-left: -15px}
[data-margin-left="-5"]{margin-left: -5px}

[data-cursor="pointer"]{cursor: pointer}
[data-cursor="text"]{cursor: text}


[data-text-align="center"] {
    text-align: center;
}

[data-text-align="right"] {
    text-align: right;
}

[data-text-align="left"] {
    text-align: left;
}

[data-text-align="center"] {
    text-align: center;
}


[data-align="center"] {
    align-items: center;
}

[data-align="end"] {
    align-items: flex-end;
}

[data-align="start"] {
    align-items: flex-start;
}

[data-align="baseline"] {
    align-items: baseline;
}

[data-align="stretch"] {
    align-items: stretch;
}

[data-justify="center"] {
    justify-content: center;
}

[data-justify="end"] {
    justify-content: flex-end;
}

[data-justify="start"] {
    justify-content: flex-start;
}


[data-position="center"] {
    margin: auto;
}

[data-position="right"] {
    margin-left: auto;
}

[data-position="left"] {
    margin-right: auto;
}

[data-position="bottom"] {
    margin-top: auto;
}

[data-position="absolute"] {
    position: absolute;
}

[data-user-select="text"] {
    -webkit-user-select: text;
    user-select: text;
}

[data-user-select="none"] {
    -webkit-user-select: none;
    user-select: none;
}

.font-weight-bold {
    font-weight: bold;
}

.font-color-black {
    color: black;
}

separator[horizontal][data-space="none"]{margin: 0}




view { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden;box-shadow: 0 0 0 1px var(--border-color);flex-direction: column; z-index: 1;background: var(--background); }  
view[data-vertical] { flex-direction: row; }

view[data-size="small"] { max-width: 360px;}
view[data-size="medium"] { max-width: 500px;}

view.hide-data{visibility: hidden; width:0; transition: .255s; opacity: 0; display: none}
view.show-data{visibility: visible; width:100%; transition: .255s; opacity: 1; display: flex}


@media (max-width: 480px) {
    .button.position.right[data-right="65"]{right:20px; opacity:1; transform: translateX(10px) translateY(-50%); z-index: 9999999 }
    .button.position.right[data-visible="hidden"], .button.position.left[data-visible="hidden"] {display: none}

}

/*temporary*/

.filter_block .data_cell .k-widget.k-slider { padding: 0; min-width: 230px; }
.filter_block .data_cell .btn_sprt{float:left}


badge[data-type="badge"]{ pointer-events: none; box-shadow: none; border-radius: 15px; padding: 5px 10px; height: auto; line-height: normal}

/*.filter_block .data_cell .k-widget {
    width: 100%;
}*/

/* slider */


.k-slider.k-widget { display: block; margin: 0 5px 10px; width: 100%; background: none; box-shadow: none; overflow: visible; }
.k-slider-wrap{	height: 100%;	width: 100%;}
.k-slider .k-slider-items{height: 15px;float:left;clear:both;margin:20px 0;}



.k-slider .k-tick:nth-child(2n+1):before{content:'';position:absolute;height: 10px;width:1px;box-shadow:inset 0 0 0 2px;left:50%;opacity:.3;}
.k-slider .k-tick.k-tick-large:before{height: 15px;}



.k-slider .k-first.k-tick:before{left:0}
.k-slider .k-last.k-tick:before{left:auto;right:0}
.k-slider .k-tick{	float: left;	height: 100%;	text-align: center;}
.k-slider .k-label{	position: absolute;	white-space: nowrap;}
.k-slider .k-label{		line-height: 1;   transform:translateX(-50%);    bottom:-25px}
.k-slider .k-first .k-label{	}
.k-slider .k-last .k-label{}
.k-slider .k-label{/* color:#fff */}
.k-slider .k-tick{list-style:none;position: relative;}
.k-slider-track{    background:var(--outline);position: absolute;}
.k-slider-selection{background:var(--main-color);position: absolute;} 

.k-slider-tooltip{  background:var(--tip);color:#fff;top:0;left:0;position:absolute;border-radius:30px;pointer-events:none;padding:6px 15px; z-index:99999}

.k-slider .k-draghandle{background:var(--main-color);opacity: 1;height: 12px;top: -5px;width: 12px;border-radius:10px;box-shadow: 0 0 0 3px var(--background);position: absolute;overflow:hidden;color:transparent;}
.k-slider .k-draghandle:active,.k-slider .k-draghandle.k-state-selected {/* box-shadow:0 0 0 4px rgba(0,0,0,.2); */}

.k-slider .k-slider-track,.k-slider .k-slider-selection{height: 2px;	left: 0;top: 0;}

thumb{position: relative; width: 100%; height: 0; display: flex; overflow: hidden;}
thumb wrap{position: absolute; width: 100%; height: 100%; overflow: hidden;}
thumb wrap picture{position: absolute; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; }
thumb[ratio="16:9"]{padding-bottom: 56.25%}
thumb[rounded]{border-radius: 7px}


item[data] thumb wrap picture {height: 100%}
/*   */

wrap[data-wrap="pre-line"]{white-space: pre-line}

/* intro page */


privacy wrap[data-page="intro"] {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    scrollbar-width: thin;
}
privacy[data-page="intro"] {
    transition: transform 1.5s ease; /* Smooth growth */
} 
privacy[data-page="intro"].first {
    transform: scale(1) !important; /* Expand to full size */
} 
privacy wrap[data-page="intro"] div[data-type="detail"]{display: flex; flex-direction: column; padding: 35px 35px 20px 35px }
privacy wrap[data-page="intro"] div[data-type="list"] {padding:0 20px; display: flex; flex-direction: column; gap: 7px}
privacy wrap[data-page="intro"] div[data-type="list"] text{display: list-item;}
privacy wrap[data-page="intro"]  div[data-type="detail"] text[data-size="large"]{font-size: 24px; font-weight: 600}
privacy wrap[data-page="intro"]  div[data-type="detail"] text[data-size="medium"]{font-size: 16px; }
privacy wrap[data-page="intro"]  div[data-type="detail"] text[data-size="middle"]{font-size: 18px; font-weight: 600}

privacy wrap[data-page="intro"] div[data-type="detail"] .table-deal-status text[data-size="medium"] {
    display: flex;
    align-items: center;
    gap: 4px;
}

privacy wrap[data-page="intro"] action {
    padding: 20px 20px 0 35px;
    gap: 10px;
    justify-content: center;
}

privacy wrap[data-page="intro"] h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

privacy wrap[data-page="intro"] h4 {
    font-size: 22px;
    font-weight: bold;
}

privacy wrap[data-page="intro"] a {
    color: black;
}

#yt-player-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    transition: height 0.5s linear;
}

#yt-player-container.large {
    height: calc(100vh - 270px);
    max-height: 1060px;
}

.k-mobile #yt-player-container.large {
    height: calc(100vh - 355px);
}

@media screen and (max-height: 500px) {
    .k-mobile #yt-player-container.small,
    .k-mobile #yt-player-container.large {
        height: 54vh;
    }

    #expand-video {
        display: none;
    }
}

@media (max-height: 700px) {
    #expand-video {
        display: none;
    }
}


#youtube-player {
    height: 100%;
    width: 100%;
}

#yt-player-container .ytp-impression-link {
    display: none;
}

#video-actions {
    display: flex;
    justify-content: center;
}

#video-actions .video-action {
    margin: 10px;
    width: fit-content;
}

#video-actions #expand-video.video-action  {
    width: 126px;
}

#video-actions .video-action icon {
    margin: 0;
}

@media only screen and (max-width: 450px) {
    #video-actions .video-action {
        margin: 10px 2px;
    }
}

button.intro-signin {
    margin: 0 auto;
    width: 126px;
}

.find-on-tableful a {
    font-weight: bold;
    color: black;
}

[data-page="intro"] .table-status {
    padding: 4px 8px;
    border-radius: 50px;
    height: fit-content;
    min-width: 72px;
    text-align: center;
}

.ovrl_wnd_cont .overlay .modal_wrap > div.modal_container {
    height: 100%;
    display: flex;
    align-self: center;
}

.modal_wrap .modal_container .close-container {
    height: inherit;
    max-height: 97vh;
    width: auto;
    position: relative;
    overflow-y: auto;
    scrollbar-width: thin;
}

privacy wrap[data-page="intro"] .close-button {
    position: absolute;
    top: 30px;
    right: 30px;
    color: white;
    background: black;
    border-radius: 50%;
    cursor: pointer;
}

#player-custom-thumbnail-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: white;
}

#player-custom-thumbnail {
    position: absolute;
    display: none;
    height: auto;
    width: inherit;
    cursor: pointer;
    top: 50%; /* Centers the image vertically */
    left: 50%; /* Centers the image horizontally */
    transform: translate(-50%, -50%); /* Align the center of the image with the center of the div */
    justify-content: center;
    background: black;

    transition: height 1s linear, width 1s linear;
}

#yt-player-container.large #player-custom-thumbnail {
    height: 100%;
    width: auto;
}

#player-custom-thumbnail-playBtn {
    display: none;
    color: #ffffff8a;
    font-size: 200px;
    height: 100%;
    width: auto;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#player-custom-thumbnail-animatedLogo-container {
    height: 100%;
    width: 100%;
    background: white;
    z-index: 1;
    position: relative;
}

#player-custom-thumbnail-animatedLogo {
    height: 100%;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 10;
}


/* intro page */

privacy back {
    background: rgba(204,0,107,1);
    width: 100%;
    display: flex;
    color: #fff;
    padding: 15px 20px 30px;
    justify-content: center;
    border-radius: 20px
}
privacy back item{display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%}
privacy back item > text{font-size: 24px}
privacy back item box{width: 80%}
privacy back item box .input_wrap .button.white{background: #fff; color: #000; height: 45px; min-height: 45px; padding: 0 20px}
privacy back item box .input_wrap {box-shadow: inset 0 0 0 1.5px white; min-height: 45px}
privacy back item box .input_wrap input{height: 45px}
box .input_wrap input::placeholder{color: #fff; opacity: 0.5}

privacy back item box  .input_wrap input:-webkit-autofill{ transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #fff;  box-shadow: none}

item[detail] media{width:50px;flex-shrink:0;}
item[detail] media[medium]{width: 140px}
item[detail] media[radius] thumb{border-radius: 7px}
item[detail] media thumb, item[complex] media thumb, item[data-type="chat"] media thumb { position: relative; width: 100%; height: 0; display: flex; overflow: hidden; border-radius: 3px; /* color: #fff; */ cursor: pointer; }
item[detail] thumb wrap, item[complex] media thumb wrap  { position: absolute; width: 100%; height: 100%; overflow: hidden; }
item[detail] thumb wrap picture,  item[complex] thumb wrap picture  { position: absolute; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; }

item[complex] media{width:70px;flex-shrink:0;display:flex}

.event-deals-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.deals-sort {
    position: relative;
    display: flex;
    align-items: center;
}

/* Dropdown button */
.deals-sort button {
    margin: 0 24px 0 6px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
}

/* Dropdown menu */
.deals-sort-options {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

/* Dropdown links */
.deals-sort-options > text {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.deals-sort-options > text:nth-of-type(1) {
    border-radius: 5px 5px 0 0;
}
.deals-sort-options > text:nth-last-of-type(1) {
    border-radius: 0 0 5px 5px;
}

/* Show the dropdown content when hovering over the dropdown button */
.deals-sort:hover .deals-sort-options, 
.deals-sort .deals-sort-options.expand {
    display: block;
    cursor: pointer;
    top: 30px;
    right: 20px;
}

/* Change the color of links on hover */
.deals-sort-options text:hover {
    background-color: #ddd;
}

#tableList item.item detail media,
#VenueEvents item.item detail media {
    display: flex;
    align-self: center;
}

item[data-type="chat"] media{width:50px; flex-shrink:0}
item[data-type="chat"][essential] {display: flex; position: relative; overflow: inherit; width: 100%;}

item[data-item="request"] > wrap{box-shadow: none; height: 100%}
item.selected[data-item="request"][data-type="chat"] > wrap,
item.selected[data-item="table"][data-type="chat"] > wrap 
{
    border:none; 
    border-radius: 20px;
}
item.selected[data-item="request"][data-type="chat"][essential] cover,
item.selected[data-item="table"][data-type="chat"][essential] cover {
    box-shadow: unset;
}
item.selected[data-item="request"][data-type="chat"] wrap cover{box-shadow: none}

item[essential][data-type="chat"].selected mask{background: rgba(255, 255, 255, 0.2)}

item[data-type="chat"]:first-child > wrap{box-shadow:  none }


item thumb[ratio='1:1'] { padding-bottom: 100%; }
item thumb[ratio='4:3'] { padding-bottom: 70%;}

item[data-type="chat"] wrap {
    border-radius: 20px;
}

item[data-type="chat"]:hover > wrap {
    background-image: var(--over-color);
    background-color: var(--background);
    box-shadow: 0px 0px 5px 3px var(--highlight-color);
}


item.selected[data-type="chat"] > wrap {
    box-shadow: 0px 0px 0px 4px var(--highlight-color);
}

textarea[data-border="none"]{box-shadow: none}
textarea[data-textarea="chat"]{height: 100%; min-height: 100%; padding: 0; line-height: 1.2; padding: 0 5px}


[data-border=""]{ box-shadow: 0 0 0 1px var(--border-color)}
[data-border="none"]{box-shadow: none}

[data-min-height="100vh"]{min-height: 100vh}
[data-min-height="app-content-inner-wrap"] {
    min-height: calc(100vh - 140px);
}

[data-height="20"], separator[vertical][data-height="20"]{height: 20px}
[data-height="50"]{height: 50px}
[data-height="60"]{height: 60px}
[data-height="70"]{height: 70px}
[data-height="30"]{height: 30px}

[data-height="fit"]{height: 100%}

[data-type="status"]:after{content: ""; width:4px; height: 4px; background: red; border-radius: 50px; position: absolute; right: 0}

[data-index="9"]{z-index: 9}

[data-background="main-background"]{background: var(--background)}

item[tax]{flex-wrap:nowrap}
item[tax] .input_wrap{min-width:220px;margin: 0 10px 0 0;}


item[tax] .input_wrap[promo]  input{padding-right: 5px}
amount item[tax] span[promotext]{overflow: hidden; text-overflow: ellipsis; white-space: nowrap}

item[tax][promo]{flex-wrap: wrap}

item.checkout-feesTotal span {
    font-size: 25px;
}
.checkout-fees-dropdown-btn {
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.checkout-fees-dropdown-btn.open {
    transform: rotateX(180deg);
}

thumb[data-ratio] {height: initial;}
thumb[data-ratio][data-height="30"]{height: 30px}
[data-ratio="1:1"]{aspect-ratio:1/1} 

[data-shrink="no"]{flex-shrink: 0}
[data-radius="10"]{border-radius: 10px}

[data-radius="50"]{border-radius: 50px}

[data-length='60'] { width: 60px; }
[data-length='40'] { width: 40px; }
[data-length='30'] { width: 30px; }
[data-length="fit"]{width: 100%}

[data-elevation="2"]{box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1)}
[data-scroll]{    overflow: auto;
    overflow: overlay;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;}



[data-length='autofit'] { flex: 1; }
[data-type="active"]:active{transform: translateY(1px);}

.modal_wrap privacy { 
    height: inherit;
    width: 100%; 
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    border-radius:30px;
}
privacy wrap{ height: auto; width: 100%; display: flex; flex-direction: column; background:#fff; border-radius: 30px; padding: 40px 50px; overflow-y: auto; scrollbar-width: thin;}
privacy[data-page="service"] wrap text, 
privacy[data-page="policy"] wrap text ,
privacy[data-page="terms"] wrap text {
    font-size:25px; opacity:0.5;padding:10px 0;font-weight:300;
}
privacy wrap text[large]{font-size:40px;  opacity:0.5; padding-bottom: 15px}
privacy wrap a {color:#004cc1;}
privacy wrap p{font-size:15px}
privacy ul { font-size: 15px; }
privacy wrap > ul { margin-top: 10px }
privacy ul > li { margin-left: 15px; }
privacy li { list-style: initial; }


group[data-type="order"]{display: flex;margin: 0 20px 10px; color: #fff; width: auto}
group[data-type="order"] > div{display: flex; align-items: center; padding:7px 15px ;  background: #8b76c9; border-radius: 15px; font-size: 14px; font-weight: bold; }
group[data-type="order"] > div span{margin-right: 7px}
group[data-type="order"] > div a:active{transform: translateY(1px)}


action[data-type="table-order"]  group{ margin:0}

/* Promotions */

.connectStripeAccount-group {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 500px;
    margin: 0 20px;
    align-items: center;
    text-align: center;
}

/* Promotions */

/* SunEditor */
.no-border .sun-editor {
    border: none;
}

.no-border .sun-editor .se-toolbar {
    outline: none;
}

.no-border .sun-editor .se-resizing-bar {
    display: none;
}

#suneditor_Notes div.se-wrapper {
    overflow: auto;
}

.sun-editor-editable hr.on {
    border-color: #c7c7c7;
    -webkit-box-shadow: 0 0 0 .1rem #c7c7c7;
    box-shadow: 0 0 0 .1rem #c7c7c7;
}

/* SunEditor end */

badge.tableStatus {
    height: 27px;
    display: flex;
    align-items: center;
    max-width: min-content;
}
badge.tableStatus icon {
    display: inline;
}

.ticket-info-btn {
    display: flex;
    margin: 2px 0;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 50px;
}

@media (max-width: 1000px) {
    .mobile { display: flex; }
    .desk{display:none}
    .srch .button.mini,   .srch .button.adaptive{min-width:30px; min-height: 30px; height: 30px; width: 30px; padding: 0}
    .srch {padding:0 10px}
    .srch  .button.adaptive icon,    .srch  .button.adaptive text{display: none}
    .srch input[pattern]:valid ~ .button.adaptive icon{display: flex}
    .srch .button.responsive{padding: 0 5px }
    .srch .btn_sprt {margin: 0 5px}
    .srch .button icon{font-size: 24px}
    .srch input[pattern]:valid ~ .hidden.desk{display:none}
     toolbar logo {margin-right: 5px}

/*list item[detail][horizontal] wrap{border-radius:5px;}
list item detail[horizontal]{flex-direction:column;align-items:flex-start; padding:15px}
list item detail[horizontal] wrap{align-items:flex-start;}
list item detail[horizontal] .btn_sprt{box-shadow:inset 0 0 1px 0 ;height:1px;width:100%;margin:10px 0}
list item detail[horizontal] text[large]{opacity:0.6}*/
}

.button icon[side-space="medium"]{margin:0 10px 0 0}
.button icon[side-space="small"]{margin:0 5px 0 0}
icon[data-width="medium"]{width:45px}

@media (hover: none) and (pointer: coarse) {
    /* CSS rules for touch-screen devices */
    .expandBtn.short {
        height: 30px;
    }
}

/* ----- */
[responsive]{width:100%; background:#fff;padding:50px;margin:auto }
.login_cont[responsive] {
    height: 100%;
    max-height: fit-content;
    width: 100%;
    max-width: 600px;
    overflow: auto;
}

#register {
    max-width: 600px;
}

view[vertical]{flex-direction:row;}
view[horizontal]{flex-direction:column;}

view[single] player{min-height:360px;min-width:640px; }
view[hide]{display:none}


[data-desk="hide"]{display: none}
[data-mobile="hide"]{display: flex}
/**/
view[vertical] { justify-content: center; align-items: center; margin: auto; width: 100%; display: flex; overflow: hidden; max-width: 500px;  }
view[player] { align-items: center; justify-content: center; padding-bottom: 56.25%; position: relative; width: 100%; height: 0; display: flex; overflow: hidden; border-radius: 5px;cursor: pointer; }
view[player] player { position: absolute; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; top: 0; bottom: 0; }
/*player{position:relative; overflow:hidden; background:rgb(25, 25, 25); display:flex; align-items:center; font-size: var(--text);  }*/
/*player iframe{min-height:360px;}*/
.viewbox-content a {width: 100%; height: 100%}
.viewbox-content a > iframe{ display: block; min-width: 600px; height: 600px; border-radius: 5px}
.viewbox-content .viewbox-image{border-radius: 5px}


view[data-overflow="inherit"]{overflow: inherit}

@media (max-width: 635px){
    .viewbox-content a > iframe {min-width: 400px; height: 400px}
}
@media (max-width: 450px){
    .viewbox-content a > iframe {min-width: 320px; height:320px}
}
@media (max-width: 400px) {
    [responsive] {
        padding: 30px;
    }
}
@media (max-width: 375px){
    .viewbox-content a > iframe {min-width: 310px; height:310px}
}

iscroll::-webkit-scrollbar {
    display: none;
}

group[length="fit"]{display: flex; width: 100%}

group[other] span{white-space: initial;line-height: initial;padding: 6px 15px; text-align: initial;}
group[flex="wrap"]{flex-wrap: wrap}


@media (min-width: 700px) {
    group[cursor="select"] span:hover, labels[cursor="select"] span:hover, labels[cursor="select"] span:hover b, desc[cursor="select"] p:hover, .address[address] > text:hover{cursor: text}
    labels[cursor="select"] span[data-label="TableStatus"]:hover {
        cursor: help;
    }
    group[cursor="select"] span, group[cursor="select"] span > *,  labels[cursor="select"] span, labels[cursor="select"] span > *,  .address[address] > text{user-select: all !important}
    desc[cursor="select"] p{user-select: text}
}

@media (max-width: 800px) {
    view[single] player{min-width:90vw; min-height:56.25vw }
    player iframe{min-height:240px;}
    item[tax] .input_wrap.fee{min-width:100px}
}


@media (min-width: 800px){
    action .button.fit{width:auto}
    count{max-width:350px;}
    /*scroller login{ margin:70px auto }*/
}

@media (max-width: 600px) {
   action .button.standard { font-size: 90% }
   privacy wrap text[large]{font-size: 24px}
   privacy wrap p{font-size:14px}
   privacy[data-page="service"] wrap text, privacy[data-page="policy"] wrap text{font-size: 20px}
   privacy wrap[data-page="intro"] div[data-type="list"]{gap: 4px}
   view[data-size="small"]#chatMessagesContainer{width: 100%; max-width: initial}
   view[data-height="calc-small"].chatList{max-height: initial}
   view[data-height="calc-medium"]{max-height: calc(100vh  -  200px)}
   [data-desk="hide"]{display: flex}
   [data-mobile="hide"]{display: none}

   [data-list="requset"] .list_view_scroller > wrap{grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));grid-auto-rows: 1fr; }
/*.field_group .form_fields:nth-child(2) {
    flex-basis: 200px;
    

}*/}

@media (max-width: 490px) {
    profile policy{padding: 0 10px}
    float{right:20px;bottom:75px}
}



contact {padding:30px}



.fb_reset{display:none;} /* temproray */

.apple{display:flex;width:60px;height:40px;cursor:pointer;position:relative}
.apple svg{width:100%;height:100%;}
.apple:active{transform:translateY(1px)}



.hidden,
badge[float].hidden 
{ display: none; }


/* notifications */

.notification_container { background: whitesmoke; display: flex; -ms-flex-direction: column; flex-direction: column; position: relative; width: 360px; max-width: 100% }
    .notification_container .footer { min-height: 60px; margin: 0 15px; box-shadow: 0 -1px 0 0 rgba(0,0,0,.05); display: -ms-flexbox; display: flex; align-items: center; -ms-flex-align: center; font-weight: 700; z-index: 1; -ms-flex-pack: end; justify-content: flex-end; position: relative; }

.notification_head { min-height: 60px; background: #fff; display: -ms-flexbox; display: flex; align-items: center; -ms-flex-align: center; font-weight: 700; z-index: 2; position: relative; padding: 0 15px; box-shadow: 0 1px 0 0 rgba(75, 92, 109, .08); }
    .notification_head .button { display: none }

.open_details .notification_head .button { margin-right: 10px; display: flex }
.open_details .notification_filter { display: none; }

.open_details .notification_details { display: block }
.open_details .notification_list { display: none }


@keyframes appear_from_right {
    from { transform: translateX(20px); opacity: 0 }
}

@keyframes appear_from_left {
    from { transform: translateX(-20px); opacity: 0 }
}


.notification_list { padding: 10px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; -ms-flex: auto; flex-direction: column; z-index: 1; position: relative; overflow: auto; animation: appear_from_left .2s; -webkit-overflow-scrolling: touch; }
.notification h1 { font-size: 13px; }
.notification_text { padding: 0 10px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; overflow: hidden; -ms-flex: 1; flex: 1; }
.notification_list br { display: none }

.notification { min-height: 50px; box-shadow: 0 0 0 1px rgba(0,0,0,.05); background: #fff; margin: 5px; cursor: pointer; display: -ms-flexbox; display: flex; overflow: hidden; animation-fill-mode: both; }
.notification_list .org_logo { margin: 10px 0 10px 10px; }
.notification_details .org_logo { margin: 0 0 15px; }

.notification_list .notification.error .thumb { background-color: #f44336; }
.notification_list .notification div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notification_text .date { margin: 10px; }
.notification_text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notification_list .notification.unread { opacity: 1; background: #fff; font-weight: 700 }


.notification_list .notification:hover { transform: translateY(-1px); opacity: 1 }
.notification_list .notification:active { transform: translateY(0); }

.notification_list .notification { opacity: .6 }
.notification_list .separator { padding: 5px; margin: 15px 0; font-weight: 700; float: left; }

.notification_list.type_transcode .notification, .notification_list.type_expire .notification, .notification_list.type_delete .notification, .notification_list.type_new .notification, .notification_list.type_message .notification { display: none; }
    .notification_list.type_transcode .notification.type_transcode, .notification_list.type_expire .notification.type_expire, .notification_list.type_delete .notification.type_delete, .notification_list.type_new .notification.type_new, .notification_list.type_message .notification.type_message { display: -ms-flexbox; display: flex }


.notification_details { padding: 10px; display: none; -ms-flex-direction: column; flex-direction: column; z-index: 1; position: relative; animation: appear_from_right .2s; overflow: auto; -webkit-overflow-scrolling: touch; }
    .notification_details .notification { flex-direction: column; padding: 15px; }

        .notification_details .notification h1 { font-size: 13px; margin-bottom: 15px; }
    .notification_details .notification_text { -ms-flex: auto; padding: 0; }



.notification_image { position: relative; overflow: hidden; }
    .notification_image wrap { position: relative; width: 100%; height: 100%; display: block; position: relative; }
    .notification_image img { max-height: 100%; position: absolute; margin: auto; position: absolute; margin: auto; user-select: none; -webkit-user-select: none; }

.notification_list .notification_image { width: 50px; height: 50px; }
.notification_details .notification_image { width: 75px; height: 75px; margin-bottom: 15px; }


.AuthorizeNetSeal[logo]{height: 80px; width:100px; margin-top: -20px;margin-left: -10px; }
.AuthorizeNetSeal[logo][page]{margin-left:auto; margin-top: 10px}
.AuthorizeNetSeal[iframe]{display:flex; justify-content:center;align-items: center; height:90px; margin-top: 0}
.AuthorizeNetSeal[iframe] iframe{margin-left: 190px}

@media (max-width: 740px) {
    .AuthorizeNetSeal[logo]{margin-top:0}
}
@media (max-width: 740px) {
    .AuthorizeNetSeal[iframe] {margin-top: 20px}
  
}

@media (max-width: 600px) {

    item[essential] date span{margin-top: 0}
    item[essential] date h1{font-size: 31px}
    privacy wrap[data-page="intro"] div[data-type="detail"] text[data-size="large"]{font-size: 20px; font-weight: 600}
    privacy wrap[data-page="intro"] div[data-type="detail"] text[data-size="medium"]{font-size: 14px;}
    privacy wrap[data-page="intro"] div[data-type="detail"] text[data-size="middle"]{font-size: 16px; font-weight: 600}
    [data-page="intro"] space[middle]{ height: 15px}
    [data-page="intro"] space[small]{height: 10px}
    privacy wrap[data-page="intro"]{padding:0}
    privacy back{padding: 25px}
    privacy wrap{padding: 25px}
    privacy wrap[data-page="intro"] div[data-type="detail"]{padding:30px 25px 25px}
}

.k-webkit.k-desktop ::-webkit-scrollbar-track {
    display: none
}

.k-webkit.k-desktop ::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }

.k-webkit.k-desktop ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.3); background-clip: padding-box; height: 40px; width: 40px;  }
/*.k-webkit.k-desktop ::-webkit-scrollbar-thumb:vertical{border-left:6px solid transparent;}
.k-webkit.k-desktop ::-webkit-scrollbar-thumb:horizontal{border-top:6px solid transparent;}*/
.k-webkit.k-desktop :hover::-webkit-scrollbar-thumb { }

.k-webkit.k-desktop ::-webkit-scrollbar-thumb:hover { border: none; }

.k-webkit.k-desktop ::-webkit-scrollbar-button { display: none }

.k-webkit.k-desktop ::-webkit-scrollbar-corner,
.k-webkit.k-desktop ::-webkit-resizer { background-color: transparent; }



 .filter_content { scrollbar-color: rgba(136, 136, 136, 0.25) transparent; scrollbar-width: thin; }

.filter_content ::-webkit-scrollbar-track { display: none }

.filter_content ::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }

/* ----- */




.message_box .message_container.request { position: relative; }
.message_box .message_container.request .form_fields{padding: 0}
.message_box .message_container.request .form_fields .input_wrap{margin:0 ; }


@supports(display:grid) {
    list[view="block"] > wrap {
        display: grid;
        grid-auto-rows: 1fr;
    }

    list[template="large"] > wrap {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 10px
    }

    list[template="common"] > wrap {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 10px
    }

    list#VenueEvents[template="common"] > wrap {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 10px
    }
}

@media (max-width: 600px ) {
    detail div[data-type="schedule"] .venue-event-tile-description {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}
@media (max-width: 540px ) {
    detail div[data-type="schedule"] .venue-event-tile-date {
        flex-direction: column;
    }

    detail div[data-type="schedule"] .venue-event-tile-description {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    @supports(display:grid) {
        list#VenueEvents[template="common"] > wrap {
            grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        }
    }
}



@media  (min-width: 451px){
    iscroll:hover .button[scrolltovideo].position.right[data-right="65"]{right: 65px}
    .message_box .message_container.request .form_fields .input_wrap{min-width: 320px}

    .message_box .message_container.request{max-width:480px; padding: 50px}
}

@media  (max-width: 600px){ 

   list[template='large'] > wrap{grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); grid-auto-rows: auto }
   list[template="common"] > wrap{grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 10px}

 .field_group .form_fields[data-length="500"]{max-width: auto; min-width: 100%}
.field_group .form_fields[data-length="150"]{max-width: auto; min-width: 100%}

 
}

@media  (max-width: 450px){ 
   privacy back item box{min-width: 335px}
   privacy back item > text {font-size: 18px; font-weight: bold}


}

@media  (max-width: 450px){
     privacy back item box{min-width: auto; width: 100%}
     .button[scrolltovideo]{ position: sticky !important;  margin-left: -80px; }
}

/* TODO: Figure our what the correct 'internal-autofill-selected' is if not '-internal-light-dark' */
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4))
   }


/* Generics */

.button.standard,
.chatItem .button.standard {
    color: white;
    background-color: black;
    box-shadow: 0px 0px 4px 1px white;
    margin: 2px 3px
}

.background-layer-white {
    background-color: #ffffff66;
}

.background-layer-black {
    background-color: #00000040;
}

.background-blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.monospace {
    font-family: monospace;
}

.whitespace-normal {
    white-space: normal;
}

[font-size="larger"] {
    font-size: larger;
}

.become-host {
    display: flex;
    align-items: center;
    gap: 2px;
}

.become-host icon {
    margin: 0;
}

@media (max-width: 500px) {
    .hideOn-mobile {
        display: none;
    }

    /* Hide the Become Host button when the search bar is focused */
    .srch:focus-within + a.become-host .hideOn-tiny {
        display: none;
    }
}

/* Generics */