:root {

--background: #fff;
--border-color: #e4e4e4;
--highlight: #f9f9f9;

--main-font:'Quicksand','Arial','Tahoma', sans-serif;
--heading-font:'Plus Jakarta Sans','Tahoma','Arial', sans-serif;
--text: 14px;
--radius-small: 12px;


    --button-radius: 5px;
    --input-color: rgba(136, 136, 136, 0.1);
    --input-padding: 15px;
    --input-radius: 10px;
    --elevation: 0 0 50px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --elevation_2: 0 50px 110px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --elevation_3: 0 50px 110px -20px rgba(0, 0, 0, 0.3), 0 -50px 110px -20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    --elevation_4: 0 50px 110px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --outline: rgba(0, 0, 0, 0.1);
    --ripple: rgba(0, 0, 0, 0.15);
    --outline-dark: rgba(0, 0, 0, 0.1);
    --fab: 50px;
    --hover: rgba(136, 136, 136, 0.1);
    --tip: #424242;
    --context: #fff;
    --over-color: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
    --press-color: linear-gradient(to top, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0.07) 100%);
    --overlay: rgba(234, 234, 234, 0.65);
    --area: 60px;
    --dark-color: #eae8e8;
    --text-color: #000;
    --gap: 10px;

    --main-color:#008aff

}




::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: var(--main-color);
}

::selection {
  color: #fff;
  background: var(--main-color);
}

/* 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 */
user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}



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

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

a[link]{text-decoration:underline; font-weight:700; color:var(--text-color)}
a[link]:hover { color:var(--main-color)}
a[link]:active {transform:translateY(1px)}

/* ----- */

html{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action: manipulation;}
html,body{width:100%;margin:0;padding:0;box-sizing:border-box;position:relative;cursor:default;     background:#fff; overscroll-behavior-x: none;  color:var(--text-color);/*overscroll-behavior: none;*/}
body{-webkit-user-select:none;display:flex;font-size:var(--text); line-height:1.5; overflow:overlay; min-height:100vh; }
/*html.lock, */.lock body, .nav_open body{overflow:hidden; /*position:fixed;*/}

body{overflow-x: hidden; justify-content:center}

html, body, input, button, textarea, li { font-family: var(--main-font); font-size: var(--text); font-weight:500; }



text{white-space:nowrap;/*color:var(--main-text)*/}

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

[data-heading] { font-family:var(--heading-font)}
[data-size="medium"] {font-size:16px;}
[data-size="large"] {font-size:18px;}
[data-size="larger"] {font-size:20px;}
[data-size="x-large"] {font-size:24px;}
[data-size="xx-large"] {font-size:32px;}
[data-size="xxx-large"] {font-size:48px;}

/*[data-weight="100"] {font-weight:100}
[data-weight="300"] {font-weight:300}
[data-weight="400"] {font-weight:400}*/
[data-weight="500"] {font-weight:500}
[data-weight="600"] {font-weight:600}
[data-weight="700"] {font-weight:700}
[data-weight="800"] {font-weight:800}

text[contenteditable="true"]{cursor:text}

text[wrap]{white-space:normal}
text[wrap-line]{white-space:pre-line}
text[nowrap]{white-space:nowrap}
text[middle]{font-size:15px;}
text[medium]{font-size:17px;}
text[large]{font-size:24px;}
text[light], tip[light]{opacity:.5}
text[digit]{letter-spacing: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
text[error]{color:var(--error-color);}
text[private]{color:var(--private-color);}
text[accent]{color:#4e87de;color:var(--main-color)}
[data-shrink="no"]{flex-shrink:0}
[data-shrink="yes"]{flex-shrink:initial}





/*temp*/

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


header{  position:sticky; top:0;z-index:99; margin-top:50px; color:#fff}

logo{display:flex; align-self:center;}

section{  width:100%; display:flex; flex-direction:column; position:relative; margin: auto; }
section[city]{background:#f3f3f3}

wrapper {max-width:800px;width:100%; height:100%; position:relative;margin:auto; display:flex; flex-direction:column; padding:20px;}
wrap[layout="block"]{ display:grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));flex-wrap:wrap; gap:15px; width:100%}





space {
    height: 30px;
    width: 100%;
    flex-shrink: 0;
}
space[top] {
    margin-top: auto;
}
space[tiny] {
    height: 5px;
}
space[small] {
    height: 10px;
}
space[mini] {
    height: 20px;
}
space[medium] {
    height: var(--area);
}
space[large] {
    height: 150px;
}

space[horizontal] {
    flex-shrink: initial;
    height: initial;
}

dot {
    padding: 0 10px;
    font-weight: 700;
}
dot::after {
    content: '\00b7';
}


/**/



/**/


group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;    align-items: center;
    justify-content: center;
}

group[align=center] {align-items:center;}

group[wrap="no"] {flex-wrap: nowrap;}
group[direction='column'] {
    flex-direction: column;
    align-items: flex-start;
}
group[direction='row'] {
    flex-direction: row;
}

group[gap='small'] {
    gap: 10px;
}
group[gap='medium'] {
    gap: 20px;
}
group[gap='large'] {
    gap: 30px;
}
group[gap='none'] {
    gap: 0px;
}

/**/




/* button */

.button {
    touch-action: manipulation;
    -webkit-user-drag: none;
    height: 30px;
    text-align: center;
    border-radius: var(--button-radius);
    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.rounded {
    --button-radius: 30px;
}
.button * {
    pointer-events: none;
}

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

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

.button.open {
    background-image: var(--over-color);
}

.button:active text,
.button:active icon,
.button:active badge,
.button:active tip,
.button:active dot {
    transform: translateY(1px);
}

.button text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.button text,
.button dot,
.button tip,
.button separator,
svg[icon] {
    z-index: 1;
}

a.button:not([outline='none']) text {
    /* text-decoration: underline; */
}

.button icon {
    margin: 0 0 0 -10px;
}

.button text ~ icon {
    margin: 0 -10px 0 5px;
}
.button separator + icon {
    margin: 0 -15px 0 -10px;
}

.button.mini icon,
.button.extra icon,
.button.micro icon {
    margin: auto;
}

.button.mini {
    width: 40px; /* height: 40px;*/
    padding-left: 0;
    padding-right: 0;
    flex-shrink: 0;
}
.button.mini.rounded {
    height: 40px;
}

.button.micro {
    width: 30px;
    height: 30px;
    padding-left: 0;
    padding-right: 0;
    flex-shrink: 0;
}

.button.accent {
    box-shadow: inset 0 0 0 1.52px;
}

.button.extra {
    padding: 0;
    height: 100%;
    width: 100%;
    border-radius: 0;
    margin: 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;
   
}

.primary.facebook {
    --main-color: #1877f2;
}

.primary.dark {
    background-color: var(--main-color-dark);
}


.button.special {
    background-color: var(--special-color);
    color: #fff;
}
.button.outline {
    box-shadow: inset 0 0 0 1px var(--outline);
    height: 30px;
    background-color: var(--context);
}
.button.highlight {
    background-color: var(--hover);
}

.button.orange {
    background-color: var(--orange-color);
    color: #fff;
}

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

.button.large {
    min-height: 42px;
    height: 42px;
    padding: 0 35px;
    --gap: 20px;
    margin: auto;
}
.button.xlarge {
    min-height: 50px;
    height: 50px;
    padding: 0 20px;
    --gap: 20px;
    margin: 0;
}
.button.large.rounded {
    --button-radius: 20px;
}
.button.large separator[vertical] {
    height: 40px;
}
.button.fit {
    flex: 1;
    max-width: 100%;
}
.button.wide {
    width: 100%;
}

.button .material_ink {
    border-radius: var(--button-radius);
}

.button[shrink='no'],
button[shrink='no'] {
    flex-shrink: 0;
    overflow: visible;
}

.button[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

button::-moz-focus-inner {
    border: none;
}

.button.adaptive icon {
    display: none;
}
.button.adaptive icon[visible] {
    display: flex;
}

.button.error {
    background: var(--error-color);
    color: #fff;
}

.button tip {
    font-weight: 500;
}

/* separator */



separator { box-shadow: inset 0 0 0 1px; flex-shrink: 0; opacity: .1 }

separator[vertical] {--gap:10px; height: 30px; min-width: 1px; width: 1px; margin: 0 var(--gap); position: relative; z-index: 2; display: flex; }

separator[horizontal] {--gap:20px; min-height: 1px; height: 1px; margin: var(--gap) 0; position: relative; z-index: 2; display: flex; flex: 1 1 100%; max-height: 1px }
separator[horizontal][gap="small"]{--gap:15px}

separator[bottom] { margin-top: auto }

.option_bar separator[vertical]{ margin: 0 calc(var(--gap) + 5px);}

/* ----- */


logo[animate]{animation: arrow .75s infinite alternate-reverse; opacity: .15;}

@keyframes arrow {

    to{transform: translateY(15px);}
    
}

logo a{display: flex;}