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


/* 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[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[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{display:flex; width:100%; height:100%; bottom:0; position:relative; overflow:hidden; 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:420px; max-width:100%;  flex-shrink:0}
switchable[middle]{width:400px; max-width:100%;  flex-shrink:0}
switchable.hide{width:var(--area); flex-shrink:0}

switchable switch{width:var(--area);height:100%;cursor:pointer;overflow:hidden;position:relative; display:flex; flex-shrink:0; background:var(--highlight);z-index:2;   box-shadow:0 0 0 1px var(--border-color);}
switchable switch:active wrap{transform:translateY(1px)}
switchable switch[accent]{background:var(--main-color);color:#fff;}

switchable switch wrap{height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer; width:100%; position:relative;}
switchable switch text{transform:rotate(-90deg);font-weight:700;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;}

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:2}
switchable[compact]{width:100%}

view[adaptive],
switchable[adaptive]

{flex-direction:column;}

switchable[adaptive] > switch{height:var(--area); width:100%;}
switchable[adaptive] > switch text{transform:rotate(0deg);}
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) }


}


/* stylelint-enable */