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


/* user agent reset */

:root{
--background:#fff;
--border-color:#e4e4e4;
--highlight:#f2f2f2;
--light:#fafafa;

}

* {
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);color:rgb(0,0,0)!important;}



/* layout */

application{height:100%;width:100%;position:relative;box-sizing:border-box;min-width:320px;display:flex; flex-direction:column;padding:30px; }
wrapper{font-family:var(--main-font);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);}

/* ----- */

/* toolbar */

toolbar{min-height:var(--area);width:100%;position:relative;background:var(--background);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}

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[right]{justify-content:flex-end}
toolbar[scroll]{padding:0}
toolbar > wrap{display:flex;position:relative;align-items:center; padding:0 15px; flex-shrink:0;width:100%; }

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;}
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 a{}
/* toolbar nav[launcher] ul li{display:flex;cursor:pointer;border-radius:30px;white-space: nowrap;position: relative;max-width: 100%; overflow:hidden;font-weight:600;} */
                                        /* Will be review */
toolbar nav[launcher] ul li{display:flex;cursor:pointer;border-radius:30px;white-space: nowrap;position: relative;max-width: 100%; font-weight:600;}
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;line-height:30px;}

toolbar.main_header{padding-left:0}
                                        /* Will be review */
/* @media (max-width: 800px)
 {
toolbar nav[launcher] ul li{display:none}
toolbar nav[launcher] ul li.selected{display:flex;}
} */

toolbar wrap.label {width: auto; flex: 1; overflow: hidden;}
toolbar wrap.label text{white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}


/* ----- */
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;}
view[mini] { max-width: 240px; /*max-width: 100%; flex-shrink: 0*/ }
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(--space);}
view[light]{background: var(--light);}

view > form{display:flex; overflow:hidden; flex-direction:column;width:100%; height:100%;}

view[player] media{}

view[scroll]{overflow:auto; overflow:overlay;-webkit-overflow-scrolling: touch; padding-bottom: 150px;}
view[scroll_wrapper] { overflow: auto; overflow: overlay; -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[single] player{min-height:360px;min-width:640px; }

view[hide]{display:none}


@media (max-width: 800px)
 {
view[single] player{min-width:100vw; min-height:56.25vw }
}

/**/

view[player] {  align-items:center; justify-content:center;}
view[player] player{/*max-width:100%; max-height:100%;*/ height:100%; width:100%;}







/**/

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



view[single]  info[bar]{max-width:640px;}


[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;}


[player]  info[bar]:hover,
player[hover][desktop] + info[bar],
player[state="pause"][desktop] + info[bar]

{
    transform: translateY(0px);
    transition-delay: 0s;
    opacity: 1;
}



[player]  info[bar]{  position: absolute; color: #fff; top: 0; left: 0; background: linear-gradient(to bottom, rgb(25, 25, 25) 0%,rgba(0,0,0,0) 100%); width: 100%; transition-delay: .225s;transition-duration: .175s; transform:translateY(-100%); opacity:0;}


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


/*view[resize]{flex-shrink: 0;resize: horizontal; width:50%; min-width:300px; max-width:calc(100% - 300px);padding-bottom:10px}*/ /* experiment */




/* switch*/

gap { width: 0; height: 0; flex-shrink: 0; transition: .225s; display: none }
switchable[dynamic].hide.drop ~ gap[dynamic] { width: var(--area); height: var(--area); display: flex; }
switchable[dynamic].hide.drop { box-shadow: var(--elevation); position: absolute; right: 0; z-index: 9; }



    switchable[dynamic].hide.drop.close { width: var(--area); flex-shrink: 0; position: absolute; right: 0; z-index: 9; }

switchable[dynamic].hide toolbar { display: none }

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

    switchable[short] { flex-shrink: 0; height: 350px; }



    switchable[mini="280"], switchable[micro] { width: 280px; max-width: 100%; flex-shrink: 0 }

    switchable[middle] { 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: #f9f9f9; background: var(--highlight); z-index: 2; box-shadow: 0 0 0 1px #e4e4e4; box-shadow: 0 0 0 1px var(--border-color); /*padding: 0 15px*/ transition: .225s; transition-property: width, height }

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

    switchable switch:active wrap,
    switchable switch:active icon { 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.hide switch tip, switchable.hide switch tip span { order: initial }

switchable switch tip,
switchable switch tip span,
switchable[horizontal] switch tip,
switchable[horizontal] switch tip span { order: 2 }


switchable switch:hover tip { opacity: .5; transition-delay: .125s; }

switchable switch tip b { padding: 0 10px; }

switchable switch icon { margin: calc((var(--area) - 30px) / 2); }

switchable[horizontal] { flex-direction: column }
    switchable[horizontal].hide { height: var(--area); width: 100%; flex-shrink: 0 }
    switchable[horizontal] switch { height: var(--area); width: 100%; flex-direction: row; /*padding: 0 15px;*/ }
        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; }


switchable[elevation]:not(.hide) { box-shadow: var(--elevation_3) }

/*switchable.hide:not(.drop) > view {

    visibility: hidden;
    transform: translateY(10px);
    transform-origin:center top;
    transition-delay: 0s;
}

switchable:not(.drop) > view {
    transition: .125s .275s;

}*/


    @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% }


        /* mobile ui imporment */
        switchable[overlay] { max-width: calc(100% - 30px); max-height: calc(100% - 30px); border-radius: var(--button-radius); margin: 15px; box-shadow: var(--elevation); }

        switchable[adaptive].hide.drop { margin: 15px; max-width: calc(100% - 30px); max-height: calc(100% - 30px); border-radius: var(--button-radius); box-shadow: var(--elevation); }

        switchable.hide { width: 60px; width: var(--area); flex-shrink: 0; margin: 0; height: 100%; border-radius: 0; box-shadow: 0 0 0 1px var(--border-color); max-width: initial; max-height: initial; }

        switchable[adaptive][dynamic].hide.drop.close { height: var(--area); width: 100%; }

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

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



    @media (max-width: 700px) {
        view[main] { border-radius: 0; }
        wrapper { padding: 0 }
    }


switchable,
switchable switch { transition: none; transition-delay: 0s; }

/* stylelint-enable */