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

/* user agent reset */

:root { --background: #fff; --border-color: #e4e4e4; --highlight: #f9f9f9; --light: #fff;--main-font:'Roboto', sans-serif; }

* { 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;*/ }
/* ----- */

html { -webkit-tap-highlight-color: rgba(0,0,0,0); color: rgb(0,0,0) !important; }
html, body { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; box-sizing: border-box; position: relative; cursor: default; -webkit-overflow-scrolling: none; background: var(--background) }

body { overflow: hidden; -webkit-user-select: none; display: flex; font-size: var(--text); }

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

/* layout */

application { height: 100%; width: 100%; position: relative; box-sizing: border-box; min-width: 320px; display: flex; flex-direction: column; padding: 30px; }
wrapper {  font-size: var(--text); height: 100%; position: relative; overflow: hidden; margin: 0 auto; transform: scale(1); display: flex; flex-direction: column; width: 100%; box-shadow: 0 0 0 1px var(--border-color); }

/* ----- */

space {padding:10px 0; display:flex}
space[small] {padding:5px 0;}
/* toolbar */

toolbar { min-height: var(--area); width: 100%; position: relative; display: flex; align-items: center; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border-color); box-sizing: border-box; user-select: none; display: flex; padding: 0 10px; z-index: 99; background-color:#fff}

toolbar[sticky]{position:sticky; z-index:9999;}
toolbar[sticky="top"]{top:0}
toolbar[sticky="bottom"]{bottom:0}

toolbar[space="no"] { padding: 0 }
toolbar[space="horizontal"] { padding: 20px 0; }
toolbar[accent] { background: var(--main-color); color: #fff; box-shadow: none; padding: 0 10px }
toolbar[light] { background: var(--light) }
toolbar[highlight] { background: var(--highlight) }
toolbar[shadow] { box-shadow: var(--elevation); }

toolbar[transparent] { box-shadow: none; background: none; }
toolbar[compact] { min-height: 0; flex-shrink: 0; }
toolbar[none] { box-shadow: none; background-color:transparent;}

toolbar[right] { justify-content: flex-end }
toolbar[scroll] { padding: 0 }
toolbar > wrap { display: flex; position: relative; align-items: center; padding: 0 15px; flex-shrink: 0;}

toolbar nav[launcher] { flex: 1; display: flex; overflow: hidden; position: relative; align-items: center; height: 40px; }
toolbar nav[launcher] ul { display: flex; max-width: 100%; padding: 0 10px; margin:0; }
toolbar nav[launcher] ul li a { display: flex; height: 30px; padding: 0 15px; align-items: center; text-decoration: none; overflow: hidden; width: 100%; }

toolbar nav[launcher] ul li { display: flex; cursor: pointer; border-radius: 30px; white-space: nowrap; position: relative; max-width: 100%;  }
toolbar nav[launcher] ul li.selected { color: #fff; background: var(--main-color); cursor: default; margin: 0 5px; }

toolbar nav[launcher] ul li:hover { background-image: var(--over-color); }
toolbar nav[launcher] ul li:active { background-image: var(--press-color) }
toolbar nav[launcher] ul li.separator { box-shadow: inset 1px 0 0 0px; opacity: .15; height: 30px; min-width: 1px; width: 1px; margin: 0 10px; position: relative; z-index: 2; }
toolbar nav[launcher] ul li:active text { transform: translateY(1px); }

toolbar nav[launcher] ul li text { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/*toolbar.main_header[invert] { background: var(--main-color); color: #fff; }
*/toolbar.main_header[invert] nav[launcher] ul li.selected { background-color:var(--main-color); color:#fff; font-weight:700;}
toolbar.main_header[invert] logo{padding:0 15px;}
toolbar.main_header {box-shadow: 0 1px 0 0 var(--border-color)}
 @media (max-width: 800px)
 {
toolbar nav[launcher] ul li{display:none}
toolbar nav[launcher] ul li.selected{display:flex;}
} 
/* ----- */
container { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; }
view { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; /*box-shadow: 0 0 0 1px var(--outline);*/ flex-direction: column; z-index: 1; background: var(--background); }

view[auto] { width: auto }
view[small] { width: 500px; flex-shrink: 0; }
.Popup:not(.fullscreen) view.medium {width:1250px; height:880px;}
.Popup:not(.fullscreen) view.small{width:950px; height:880px;}
.Popup:not(.fullscreen) view.extra {width:1440px; height:840px;}
.Popup:not(.fullscreen) view.medium_width {width:1260px;}
.Popup:not(.fullscreen) view.small_width {width:700px;}

/*view.small { width: 500px;}
*/
view[auto_height] { height: auto; }
view[auto_height][small] { min-height: 250px; width: 100%; flex-shrink: 1; }


view[transparent] { box-shadow: none; }

view[vertical] { flex-direction: row; }
view[horizontal] { flex-direction: column; }
view[accent] { background: var(--main-color); color: #fff; }
view[space] { padding: var(--fab); }
view[light] { background: var(--light); }
view[highlight] { background: var(--highlight);}

view > form { display: flex; overflow: hidden; flex-direction: column; width: 100%; height: 100%; }
view[scroll] { overflow: auto;  -webkit-overflow-scrolling: touch; }
view[empty] { box-shadow: none; background: none; }

/****/

view[intro] { overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; }
view[intro] > wrap { align-items: center; margin: auto; display: flex; flex-direction: column; flex-shrink: 0 }
view[intro] panel { display: flex; margin: 30px 0; }

/**/

view[hide] { display: none }

/*roads*/
/*view[space], .space, [space] {padding:10px;}
*/
.title{padding:10px 20px;}
    .title text {
        text-transform: uppercase;
        font-weight: bold;
        border: solid;
        border-width: thin;
        border-color: gray;
        border-radius: 5px;
        padding: 1px 10px 1px 10px;
        /*background-color: black;*/
        /*color: white;*/
    }

/**/
info { display: flex; flex-direction: column; position: relative; flex-shrink: 0; }

[intro] info { /*margin:10px;*/ align-items: center; }
[intro] info text { text-align: center; opacity: .5; }

info text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 0 }

info text[title] { opacity: 1; margin-bottom: 15px; }
info text[subtitle] { opacity: 1; margin-bottom: 5px; }
info text[accent] { color: var(--main-color); opacity: 1; }

[intro] info separator { width: 100%; margin-top: 40px; }

info[bar] { padding: 30px; }
info[bar] text { margin-bottom: 5px; }
info[bar] text:last-child { margin: 0 }

/* switch*/

gap{width:0; height:0; flex-shrink:0; transition:.225s; display:none}

switchable{display:flex;flex-direction:column; width:100%; height:100%; bottom:0; position:relative; overflow:hidden; box-shadow:0 0 0 1px #e4e4e4; box-shadow:0 0 0 1px var(--border-color);z-index:2;  transition: .125s; transition-property: width, height; }
switchable[compact]{width:60%; }
switchable[mini]{width:340px; max-width:100%;  flex-shrink:0}

switchable[micro]{width:300px; max-width:100%;  flex-shrink:0}

switchable[middle] switchable[large]{width:400px; max-width:100%;  flex-shrink:0}
switchable[large]{width:800px; max-width:100%;  flex-shrink:0}
switchable.hide{width:60px;width:var(--area); flex-shrink:0; flex-direction:row;}

switchable switch{width:100%;height:60px;height:var(--area);display: flex;cursor:pointer;overflow:hidden;position:relative;flex-shrink:0;background:#fff;background:var(--background);z-index:2;/*box-shadow:0 0 0 1px #e4e4e4;box-shadow:0 0 0 1px var(--border-color);*/box-shadow:inset 0 -1px 0 0px var(--border-color);padding:0 15px;}

switchable.hide switch{width:60px;width:var(--area);height:100%;flex-direction: column;align-items: center;padding:15px 0 }

switchable switch:active wrap{transform:translateY(1px)}
switchable switch[accent]{background:var(--main-color);color:#fff;}

switchable switch wrap{height:100%;cursor:pointer; width:100%; position:relative;}
switchable switch:hover{background-image: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);background-image: var(--over-color);}

switchable switch text { font-weight: 700; pointer-events: none; white-space: nowrap; text-overflow: ellipsis; display: flex; height: 60px; height: var(--area); align-items: center; padding: 0 10px; overflow: hidden; position: absolute; transform-origin: 0 0; }

switchable.hide switch text{transform: rotate(-90deg) translateX(-100%);    padding: 0 20px;}

.k-ie11 switchable.hide switch text{ width:400px; justify-content:flex-end}
.k-ie11 switchable.hide switch tip,switchable.hide switch tip span {order:0;}

switchable switch tip{ font-weight:400;  opacity:.0; transition-delay:.5s; transition-duration:.2s; transition-property:opacity; position:relative; display:flex;}
switchable switch tip,switchable switch tip span{order:2}
switchable.hide switch tip,switchable.hide switch tip span{order:initial}
switchable switch:hover tip{ opacity:.5; transition-delay:.125s;}
switchable switch tip b{padding:0 10px;}
switchable switch icon{margin:auto}

switchable[horizontal]{flex-direction:column}
switchable[horizontal].hide {height:var(--area); width:100%; flex-shrink:0}
switchable[horizontal] switch{height:var(--area); width:100%;}
switchable[horizontal] switch text{transform:rotate(0deg);}
switchable[right]{right:0}

switchable.hide.drop{ width:360px;}

switchable[full]{position:absolute;}
switchable[full] + gap{display:flex;width:60px; height:60px;}

@media(max-width:800px){

gap{display:flex;width:var(--area); height:var(--area);}

switchable[overlay]{position:absolute;z-index:10}
switchable[compact]{width:100%}

view[adaptive],
switchable[adaptive]{flex-direction:column;}

switchable[adaptive] > switch{height:var(--area); width:100%; flex-direction:row;     padding: 0 15px;}

switchable[adaptive] > switch text{transform:rotate(0deg);}
switchable[adaptive] > switch text tip,
switchable[adaptive] > switch text tip span {order:2}

switchable[adaptive].hide{height:var(--area); width:100%; flex-shrink:0}
switchable[adaptive].hide.drop{ height:50% }
switchable[adaptive].hide.drop.enter{ height:100% }

switchable[adaptive].drag{ height:var(--area) }

spliter[adaptive]{width:100%; height:10px;}

}
@media screen and (max-width:1300px), screen and ( max-height:650px) {
    view.medium, view.small, view.org {width:100%; height:100%;}
}
@media (max-width: 1300px) {
    .Popup:not(.fullscreen) view.medium {
        width: calc(100vw - 40px);
    }
}
@media (max-width:700px) {
    .Popup:not(.fullscreen) view.small_width {
        width: calc(100vw - 40px);
    }
}
@media (max-width: 1440px) {
    .Popup:not(.fullscreen) view.extra {
        width: calc(100vw - 40px);
    }
}