/*=======================================================
	// LAYOUT
    /======================================================*/
    
    .vertical-center,.center-vertical{position:absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center}

	.center-self{left: 50%; top: 50%; transform: translate(-50%,-50%); position: absolute}

    /*=======================================================
	// CONTENT
    /======================================================*/
    
    .app-content{padding: 15px; max-width: 720px; margin: 0 auto;}
    .app-content h2{font-weight: 700; margin: 0 0 7.5px}
    .app-content p{margin-bottom: 15px}

	.app-content.narrow{max-width: 520px}
	
	.width-constraint-1280{max-width: 1280px;margin: 0 auto;}
	.width-constraint-1024{max-width: 1024px;margin: 0 auto;}

	/* Tile Cards */
	.tile-card{
		background:#fff;  box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1); border-radius: 7.5px; position: relative;
	}

	.tile-card-figure{
		position: relative; overflow: hidden; border-radius: 7.5px 7.5px 0 0;
		background: #444;
	}
	.tile-card-figure img{width: 100%; height: auto; display: block; border-radius: 7.5px 7.5px 0 0;}

	.tile-card-details{
        padding: 15px;
        column-gap: 7.5px;
        background: #fff; 
        border-radius: 0 0 7.5px 7.5px;
        min-height: 170px;
        
    }

	.tile-card-details h3{margin: 15px 0; font-size: 130%;}
	
	.tile-card-bottom{
		position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: grid;
        padding: 10px 15px;
        background: #f9f9f9;
        border-radius: 0 0 7.5px 7.5px;
	}

    /*=======================================================
	// BACKGROUNDS
    /======================================================*/
    
    .bg-white{background: #fff;}
	.bg-grey{background: #fbfbfb;}


	/*=======================================================
	// UI SWITCH
	/======================================================*/

	.onoff-switch{width:50px; height:30px; border-radius: 50px; background:rgba(0,0,0,.03); position: relative; border: 1px solid rgba(0,0,0,0.1); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; cursor: pointer;}
	.onoff-switch{transition: border 0.2s ease-in 0s, box-shadow 0.2s ease-in 0s, background-color .6s ease-in 0s}

	.switch-btn{width:30px; height:30px;border-radius: 50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); background:#fff; position: absolute; left: 0px; top: 0px}
	.switch-btn{transition: transform 0.1s ease-in}

	
	.onoff-switch.on .switch-btn{transform: translate3d(20px,0,0)}


	.onoff-switch.small{width:30px; height:17px; border-radius: 42px; }
	.onoff-switch.small .switch-btn{width:17px; height:17px;}
	.onoff-switch.on .switch-btn{transform: translate3d(14px,0,0)}

	.onoff-switch.xsmall{width:24px; height:12px; border-radius: 42px; }
	.onoff-switch.xsmall .switch-btn{width:12px; height:12px;}
	.onoff-switch.xsmall.on .switch-btn{transform: translate3d(13px,0,0)}

    /*=======================================================
	// ACTIVITY VIEW CONTROLLER
	/======================================================*/	
    .activity-view-controller{
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: -1;
		visibility: hidden;

	}

	/* SET PANELS TO RELATIVE HEIGHT */
	.activity-view .panels{height: 100%; min-height: 100%;}
	
	.activity-view-controller .overlay{
		background:rgba(0,0,0,0);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
		transition-property: background;
	}

    .activity-view-controller > .activity-view{
        position: fixed;  top: 0; right: 0; bottom: 0; left: 0;
		transform: translate3d(0,100%,0);
		transition-property: transform, opacity;
    }

	/* SHOW */
	.activity-view-controller.show{visibility: visible; z-index: 10}
	.activity-view-controller.show .overlay{background:rgba(0,0,0,.2)}
    .activity-view-controller.show > .activity-view{
        transform: translate3d(0,0%,0);
    }	
	
	/* DISMISS */
	.activity-view-controller.dismiss,
    .activity-view-controller.dismiss > .activity-view{
		transform: translate3d(0,100%,0);
		display:none;
    }	


    .close-activity-view{position: absolute; width: 48px; height: 48px; top: 0; right: 0; z-index: 3}
	.close-activity-view i{font-size: 26px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; cursor: pointer}


	.activity-view-controller .dialog-view-controller{
		width:640px; height:300px; 
        left:50%; top: 50%; 
		opacity: 0; 
		overflow: hidden;
		box-shadow:0 0 15px rgba(0,0,0,.4);
        transform: translate3d(-50%,-50%,0) scale(.7); 
        border-radius: 5px;
    }

    .activity-view-controller.show .dialog-view-controller{transform:  translate3d(-50%,-50%,0) scale(1); opacity: 1}
	

	.activity-view-controller .appear-from-right{
		width: 50%;
		right:0;
		left:auto;
		top:0;
		bottom:0;
		opacity: 0; 
		box-shadow:0 0 15px rgba(0,0,0,.4);
        transform: translate3d(120%,0%,0); 
	}

	.activity-view-controller.show .appear-from-right{transform:  translate3d(0%,0%,0); opacity: 1}

	/*=======================================================
	// PAGE TAB VIEW CONTROLLER
	/======================================================*/

	.tab-navigation{border-bottom:1px solid rgba(0,0,0,.1);}
	.tab-navigation ul{list-style:none; padding:0; text-align:center;  position:relative; max-width: none; margin: 0 auto;}
	.tab-navigation li{cursor:pointer; display:inline-block;width:24%; position:relative; max-width: 180px}
	.tab-navigation li:after{content:" "; display:block; position:absolute; width:0%; background:#000; height:3px; bottom:-1px; left:50%; -webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);}
	.tab-navigation li i{ padding:15px; text-align:center; font-size:24px}
	.tab-navigation li a{ padding:15px; text-align:center; display: block; text-decoration: none!important;}

	
	.tab-navigation li.show i,
	.tab-navigation li:hover i
	{color:#000;}

	
	
	
	.tab-navigation li:hover:after,
	.tab-navigation li.show:after{width:100%; transition:.1s linear}

	.page-tab{display: none; position: relative; min-height: 100%;}
	.page-tab.show{display: block}


	/*=======================================================
	// TOOLBARS
	/======================================================*/

	#left-navigation{width:256px; display:none;}

	.icon-close{width: 48px; height: 48px; position: fixed; top:0; right: 0; cursor: pointer; z-index: 2}
    .icon-close i,
	.icon-back i{position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%}
	
	.icon-close i{}

    .icon-back{width: 48px; height: 48px;cursor: pointer}
	
	.toolbars{height:48px;background:none; position:absolute; top:0; left:0; right:0; z-index:2;margin:0 auto; -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

	/*MAIN*/
	.header-input{font:inherit; line-height:normal; background:#fff; border-radius:30px; border:none; display:block; margin:-1px auto -5px; width:70%; text-align:center; padding:3px!important}
	.toolbar-panels{overflow:hidden; position:relative; height:56px; }
	.toolbar-panel{position:absolute;width:100%; -webkit-transform: translate3d(0%, 0, 0)!important; transform: translate3d(0%, 0, 0)!important; min-height:48px; max-height:48px;  -webkit-transition-property:transform; transition-property:transform;}
	.toolbar-panel.show{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; opacity:1; z-index:1;visibility:visible; }
	.toolbar-panel.hiding{-webkit-transform: translate3d(-0%, 0, 0)!important; transform: translate3d(-0%, 0, 0)!important; z-index:0}
	.toolbar-panel.hide{-webkit-transform: translate3d(-0%, 0, 0)!important; transform: translate3d(-0%, 0, 0)!important; z-index:0}
	
	/*FRAGMNET TOOL BARS*/
	.fragment-toolbars{overflow:hidden; position:relative; height:56px}
	.fragment-toolbar{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0)!important; transform: translate3d(100%, 0, 0)!important;min-height:48px; max-height:48px;  opacity:0; -webkit-transition-property:transform opacity; transition-property:transform opacity;}
	.fragment-toolbar.show{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; opacity:1; visibility:visible}
	.fragment-toolbar.hide{-webkit-transform: translate3d(-50%, 0, 0)!important; transform: translate3d(-50%, 0, 0)!important; opacity:0; z-index:0}
	
	.toolbar-center{display:block; text-align:center; color:#000;padding:13px 0; opacity:0; text-transform:uppercase; margin:0 77px; position: relative; font-size:100%; font-family: 'Roboto'; font-weight: 900}
	
	.back-with-text .toolbar-text{position:absolute; top:-1px; left:16px; display:block}
	.toolbar-text.long{width:60px;}
	.toolbar-left,.toolbar-right{position:absolute; top:0; height:48px;}
	.toolbar-left{left: 0;}
	.toolbar-right{right: 0}

	.toolbar-border{border-bottom: 1px solid rgba(0,0,0,.1);}

	.toolbar-panel > div,
	.fragment-toolbar.show > div,
	.fragment-toolbar.hide > div{transition: .5s linear opacity; transition-delay: .25s}

	

	.toolbar-panel    > .toolbar-left,
	.toolbar-panel    > .toolbar-center,
	.toolbar-panel    > .toolbar-right,
	.fragment-toolbar > .toolbar-left,
	.fragment-toolbar > .toolbar-center,
	.fragment-toolbar > .toolbar-right
	{ opacity:0; z-index:1}



	.toolbar-panel.show    > .toolbar-left,
	.toolbar-panel.show    > .toolbar-center,
	.toolbar-panel.show    > .toolbar-right,
	.fragment-toolbar.show > .toolbar-left,
	.fragment-toolbar.show > .toolbar-center,
	.fragment-toolbar.show > .toolbar-right
	{opacity:1;}
	



	.effect-rotate{ -webkit-animation:turn  1.5s infinite linear; animation:turn  1.5s infinite linear;}


	.toolbar-huge{height:auto; max-height:none!important;}
	.toolbar-huge > .toolbar-center{
		font-size:300%; color:#000; position:absolute; left:0%; padding:10vw 5vw 0; 
		-webkit-transition-duration:300ms;
		-webkit-transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transition-property:all;
		transition-duration:300ms;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		transition-property:all;
	}

	.toolbar-huge.visible{ max-height:49px!important;}
	.toolbar-huge.visible > .toolbar-center{font-size:100%; color:#000; text-align:center;left:50%; transform:translate3d(-50%,0,0); padding:15px 0 7px;}
	
	.toolbar-huge.visible.toolbar-panel{border-bottom:1px solid rgba(0,0,0,.1);}

	.toolbar-shadow{box-shadow: 0 0 3px rgba(0,0,0,0.3)}


    .toolbar-font-icon{position: relative; width: 48px; height: 48px;}
    .toolbar-font-icon .fa{transform: translate3d(-50%,-50%,0); position: absolute; left: 50%; top: 50%; font-size: 21px}

	.toolbar-text{padding:16px 5px;  margin:0 10px;cursor:pointer;display:block; line-height:100%; text-transform:uppercase;font-size: 13px;font-family: 'WorkSans-Bold',sans-serif;}


	.panel-padding-top{padding-top:48px;}

	/*=======================================================
	// WALKTHROUGH
	/======================================================*/

	#walkthrough-overlay{background:rgba(0,0,0,.2); position:fixed; top:0; right:0; left:0; bottom:0; z-index:9015; visibility:hidden; transform:translate(-100%,0); opacity:0; transition-property:visibility, opacity}
	#walkthrough-target{position:absolute; top:0; left:0; padding:7.5px; width:48px; height:48px; border-radius:50%; opacity:0; background:#fff;}
	#walkthrough-content{
		background: #fff;
		padding: 45px;
		border-radius: 5px;
    	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
		position: absolute;
		min-width: 360px;
		max-width: 420px;
		opacity: 0;
		transform: translate3d(0,10%,0);
		transition-property: opacity, transform;
	}
	#walkthrough-content-inner h3{font-size: 180%; font-weight: 700; margin-bottom: 7.5px}
	#walkthrough-content-inner p{ font-size:15px; line-height: 1.5em}
	
	#walkthrough-target .center-self *{position: relative!important; padding: 0; filter: grayscale(1);}
	#walkthrough-target .fa{font-size: 24px}

	#walkthrough-target .menu-icon span{background: #444!important;}

	#walkthrough-target .taskbar-icon{background-size: 100%!important; width: 24px; height: 24px; display: block}

	#walkthrough-content.center-self{left: 50%!important; top: 50%!important; transform: translate3d(-50%,-40%,0);}

	.guide-icon{max-width: 90px; max-height: 90px; width: 35vw; height: 35vw; margin:15px auto 30px}

	.guide-icon.fa{font-size: 80px;}

	.inline-button{font-size: 15px;  text-decoration: none!important;}

	
	
	#walkthrough-overlay.show{visibility:visible; transform:translate(0%,0); opacity:1;}
	
	#walkthrough-overlay.show-help #walkthrough-target{
		opacity:1;
		border-color:#fff;
		transition:
			transform .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			border-top-color 0.15s linear,
			border-right-color 0.15s linear 0.10s,
			border-bottom-color 0.15s linear 0.20s,
			border-left-color 0.15s linear 0.30s;	
	}

	#walkthrough-overlay #walkthrough-target:after{
		content:" "; width:100%; height:100%; border-radius:50%; border:4px solid #fff; position:absolute;top:-4px; left:-4px;
		animation:pulseObjective 1.3s infinite ; 
	}

	#walkthrough-overlay.show-help #walkthrough-content{opacity:1; transform:translate3d(0,0%,0); border-radius: 5px}


	#walkthrough-overlay.show-help #walkthrough-content.center-self{transform: translate3d(-50%,-50%,0);}

	


	@media screen and (max-width: 641px){
		#walkthrough-content{position: absolute; left:50%!important; top:50%!important; transform: translate3d(-50%,-50%,0)!important; width: 100%}
	}

	@keyframes pulseObjective{
		0% {
		  transform: translate3d(0,0,0) scale(.5);
		  opacity:1;
		}
		100% {
		  transform: translate3d(0,0,0) scale(2);
		  opacity:0;
		}
	  }	


	/*================================================
    // SNACKBAR
    /================================================*/
    
    .snackbar-dialog{
		position: fixed;  left: 0; right: 0; z-index: 6;
        background:#fff;
		border-bottom: 1px solid rgba(0,0,0,.1);
	}


	.snackbar-dialog.top{top: 0;transform: translate3d(0,-110%,0);}
	.snackbar-dialog.bottom{bottom: 0;transform: translate3d(0,110%,0);}

	.snackbar-message{font-size: 15px; line-height: 1.5em;}

    .snackbar-dialog.show{transform: translate3d(0,0%,0);}

    .snackbar-dialog .container{
        max-width: 960px;
        margin: 0 auto 0;
        padding: 7.5px 30px;
        display: grid;
		grid-template-columns: 40px 1fr auto;
		align-items: center;
		font-size: 15px;
    }

    .snackbar-dialog .snackbar-buttons{
		text-align: right;
		display: grid;
		grid-template-columns: auto auto
    }

    .snackbar-dialog .flat-button{
        display: inline-block;
        width: auto;
        text-transform: uppercase;
        margin-left:15px;
	}
	
	.snackbar-icon .fa{font-size:24px}


	/*================================================
    // APP CONTENT
    /================================================*/   

	.app-ui-content{padding:45px; font-size: 15px; line-height: 1.5em;}

	.app-ui-content td{font-size: 15px;}

	.app-ui-content h2 {
		padding-bottom: 7.5px;
		margin: 15px 0 0
	}

	.app-ui-content p{
		margin: 0;
		padding: 0 0 15px;
	}
    .app-font-icon{width: 64px; height: 64px; border: 2px solid #6e97e9; margin:15px auto 0; border-radius: 50%; position: relative}
    .app-font-icon i{color: #6e97e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px}

    .app-font-icon.solid{width: 42px; height: 42px; border: none; margin:0; }
    .app-font-icon.solid i{color:#fff;font-size: 18px;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

	.app-tile{background:#fff;  box-shadow: 0 2.5px 25px rgba(0,0,0,0.05); border-radius: 7.5px; margin:30px 15px 0vw; padding: 45px; position: relative}


	/*=======================================================
	// BOX LAYOUT -> COLLAPSED
	/======================================================*/

	.box-constraint-center,
	.box-constraint-center.app-tile{
		z-index: 1;
       	overflow: hidden;
		height: 90vh;
		width: 90vw;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
        margin: 0 auto;
        position: fixed;
        display: flex; 
        justify-content: center; 
        align-items: center; 
		flex-direction: column;
		padding: 0;
		max-width: 500px;
    }

	.box-constraint-center.medium{
        max-width: 640px!important;
    }

    .box-constraint-center.short{
        max-height: 480px!important;
    }

	.box-fill-height{ width: 100%; height: 100%;}
	.box-fill-center{display: flex; align-items: center;}
	
	.with-scrollbar.box-fill-height{margin: 5px; width: calc(100% - 10px);height: calc(100% - 10px);}

	.with-scrollbar.box-fill-height .floating-bottom-btn{margin-bottom: 0px;}

	/*=======================================================
	// BOX SLIDE
	/======================================================*/

	.box-slides-navigation-bar{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		min-height:48px;
		border-radius: 10px 10px 0 0;
		z-index: 2;
	}

	.box-slides-navigation-bar .fragment-toolbar{
		transform: translate3d(10%,0,0)!important;
		z-index: 0;
	}
	
	.box-slides-navigation-bar .fragment-toolbar.show{
		transform: translate3d(0%,0,0)!important;
		z-index: 1;
	}
	.box-slides-navigation-bar .fragment-toolbar.hide{
		transform: translate3d(-10%,0,0)!important;
		z-index: 0;
	}

	.box-slides{
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.box-slide{
		opacity: 0;
		transform: translate3d(10%,0,0);
		position: absolute;
		height: 100%;
		width: 100%;
		will-change: transform, opacity;
	}

	

	
	.box-slide.present{
		opacity: 1;
		z-index: 1;
		transform: translate3d(0,0,0);
	}


	.box-slide.dismiss{
		opacity: 0;
		z-index: 0;
		transform: translate3d(-10%,0,0);
	}


	.box-slide .floating-bottom-btn{visibility: hidden; opacity: 0; transform: translate3d(0,10%,0); transition-property: opacity, transform;}
    .box-slide.present .floating-bottom-btn{visibility: visible; transition: .2s cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: .3s; opacity: 1;transform: translate3d(0,0%,0);}

    .box-slide.dismiss .floating-bottom-btn{visibility: hidden; opacity: 0;transform: translate3d(0,10%,0); transition-property: opacity, transform;}

	/*=======================================================
	// STANDARD BUTTONS
	/======================================================*/


	

	.floating-bottom-btn{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -6px 22px -21px #000;
		padding-top: 15px;
		z-index: 1;
	}

	.floating-bottom-btn.radius-bottom {
		border-radius: 0 0 10px 10px;
	}
	.app-button{position:relative;border: 2px solid #6e97e9; border-radius: 7.5px; padding:14px 12px; line-height: 1em; color: #fff; background: #6e97e9; max-width: 240px; margin: 0 auto 15px; display: block; text-align: center; font-weight: bold; text-transform: uppercase}


	/*=======================================================
	// FLOATING ACTION BUTTON
	/======================================================*/

	.floating-action-btn{
		color: #fff;
		display: inline-flex;
		box-sizing: border-box;
		align-items:center;
		justify-content:center;
		position: absolute;
		bottom: 1.5rem;
		right: 1.5rem;
		border-radius: 50%;

		cursor: pointer;
		height: 48px;
		width: 48px;

		box-shadow: 
			0px 3px 5px -1px rgba(0, 0, 0, 0.1), 
			0px 6px 10px 0px rgba(0, 0, 0, 0.07), 
			0px 1px 18px 0px rgba(0,0,0,.06);
    }

    .floating-action-btn.extend{
        width: auto;
        padding: 0 24px;
        border-radius: 24px;
        height: 42px;
        font-size: 12px;
        font-family: 'Roboto Bold';
        letter-spacing: .0892857143em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .floating-action-btn:before{
        content: ' ';
        background : rgba(255,255,255,0.1);
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        opacity: 0;
        transition: 0.1s cubic-bezier(0.6, -0.28, 0.735, 0.045) opacity;
    }

    .floating-action-btn:hover:before{
        opacity: 1;
    }

    .floating-action-btn:hover{
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.07), 0px 3px 14px 2px rgba(0,0,0,.06);
    }

    .floating-action-btn.extend span{
        justify-content: flex-start;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }


    .floating-action-btn i{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    .floating-action-btn.extend i{
        margin: -2px 7.5px 0 -8px;
        width: 19px;
        height: 19px;
        font-size: 19px;
        
	}

	
	.elevation-0,
	.elevation-0:hover{box-shadow: none;}
	.position-relative{position: relative; top: 0; bottom: 0; right: 0; left: 0;}