/* Frost Base */
    @import url(base/config.css);
    @import url(base/typography.css);
    @import url(base/colors.css);
    @import url(base/spacing.css);
    @import url(base/layouts.css);
    @import url(base/borders.css);
    @import url(base/effects.css);
    @import url(base/adaption.css);
    @import url(base/overflow.css);

    /* Frost Components */
    @import url('components/app.css');
    @import url('components/buttons.css');
    @import url('components/menus.css');
    @import url('components/dialogs.css');
    @import url('components/icons.css');
    @import url('components/inputs.css');
    @import url('components/layouts.css');
    @import url('components/loaders.css');
    @import url('components/slides.css');
    @import url(components/adaption.css);
    


    /* Font Awesome */
    @import url('fontawesome.css');


    /*==============================================
    // LEGACY
    /=============================================*/

	*:focus-visible{
		outline:none
	}

    #app-activity{width:100vw; height: 100vh; overflow: hidden; transform: none;}

	#background-stage{transition-property: opacity, background-color, transform;}
    #background-stage.hidden{z-index:0!important;opacity: 0!important;}
	#stage{height:100vh;  overflow:hidden; transition:none!important}

	#background-stage.hidden .icon-loading{display: none}

	
	
	.greyscale{filter: grayscale(1)}

	#fullscreen-dialog{position:fixed; top:0%; right:0%; bottom:0%; left:0%; -webkit-transform:translate3d(0,0,0) scale(1.2);transform:translate3d(0,0,0) scale(1.2); opacity:0; z-index:-1}
	#fullscreen-dialog.show{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1); opacity:1; z-index:10003; }
	#fullscreen-dialog #content{position:absolute; top:0; right:0; top:0; bottom:0; left:0;}

	.grid-layout{
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax(20%, 1fr));
		align-content: center;
	}

	.grid-column.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.float-left{float: left;}
	.float-right{float:right}
	.clear{clear: both;}


    /* == TOOLBAR == */
    .icon-close{width: 48px; height: 48px; position: fixed; top:var(--safe-area-inset-top); right: 0; cursor: pointer; z-index: 2}
    .icon-close i,
	.icon-back i{font-size: 21px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%}
	

	.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; 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{ position:relative; }
	.toolbar-panel{position:absolute;width:100%; transform: translate3d(0%, 0, 0)!important; min-height:48px; max-height:48px; transition-property:transform;}
	.toolbar-panel.show{transform: translate3d(0, 0, 0)!important; opacity:1; z-index:1;visibility:visible; }
	.toolbar-panel.hiding{ transform: translate3d(-0%, 0, 0)!important; z-index:0}
	.toolbar-panel.hide{ transform: translate3d(-0%, 0, 0)!important; z-index:0}
	
	/*FRAGMNET TOOL BARS*/
	.fragment-toolbars{ position:relative;}
	.fragment-toolbar{position:absolute;width:100%;  transform: translate3d(100%, 0, 0)!important;min-height:48px;opacity:0;transition-property:transform opacity;z-index:0}
	.fragment-toolbar.show{transform: translate3d(0, 0, 0)!important; opacity:1;z-index:1}
	.fragment-toolbar.hide{transform: translate3d(-50%, 0, 0)!important;  z-index:0;opacity:0;}
	
	.toolbar-center{display:flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; color:#000;padding:13px 0 13px; opacity:0; font-size: 13px; text-transform:uppercase; margin:0 77px; position: relative;min-height: 22px}
	
	.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-left .fa{position: absolute!important;}



	.toolbar-panel > div,
	.fragment-toolbar.show > 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}

	.fragment-toolbar.hide > div{opacity: 0!important;}



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


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

	/* Inset Fixes */
	.toolbar-panel.no-childs:before,
	.panel-padding-top:before,
	.fragment-toolbar:before{
		content: ' ';
		display: block;
		position: static;
		height:var(--safe-area-inset-top);
	}
	
	.toolbar-right,
	.toolbar-left{top:var(--safe-area-inset-top)}

	.no-safe-area .toolbar-right,
	.no-safe-area .toolbar-left{top:0}

	.toolbar-panel{max-height: none}

	.status-bar-overlay-gap{height:var(--safe-area-inset-top);}
	.navigation-bar-overlay-gap{height:var(--safe-area-inset-top);}


    /* == TOP TABS & PAGES == */
    .tab-navigation{border-bottom:1px solid rgba(0,0,0,.1); position: relative; z-index: 1;}
	.tab-navigation ul{
		display: grid;
		grid-template-columns: 32% 32% 32% 32% 32% 32% 32% 32% 32% 32%;
		list-style:none; 
		text-align:center;  
		position:relative; 
		max-width: 720px; 
		margin: 0 auto;
		
	}
	.tab-navigation li{cursor:pointer; display:inline-block; position:relative; width: 100%}
	.tab-navigation li:after{content:" "; display:block; position:absolute; width:0%; background:#000; height:2px; 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:21px}
	.tab-navigation li a{ padding:10px 3px; text-align:center; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 12px;}

	
	.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}


	.tab-pages{overflow-x: hidden!important}
	.page-tab{display: none;}
	.page-tab.show{display: block}


    /* == DIALOGS == */

    .context-dialog-header{padding:10px 15px;}
	.context-dialog{ background:#fff; position: absolute;  z-index: 1; visibility: hidden; transform: translate3d(0,10%,0); opacity: 0; box-shadow: 0 0 3px rgb(0, 0, 0,.3)}

	.context-dialog.show{transform: translate3d(0,0,0); opacity: 1; visibility: visible; z-index: 4}
    #context-menu-dialog{display:none; }

	

    #modal-alert,#modal-option{max-width:380px;}

    .md-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		max-width: 630px;
		min-width: 280px;
		height: auto;
		z-index: -1;
		opacity:1;
		transform: translateX(-50%) translateY(-50%);
	}
	
	.md-show {
		display:block;
		opacity:1;
		z-index: 10004;
	}
	
	.md-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		-webkit-transform:translate3d(100%,0,0);
		transform:translate3d(100%,0,0);
		top: 0;
		left: 0;
		z-index: 10003;
		opacity: 0;
		background: rgba(0,0,0,0.3);
	}
	.md-overlay.show,
	.md-show ~ .md-overlay {
		opacity: 1!important;
		 -webkit-transform:translate3d(0%,0,0);
		 transform:translate3d(0%,0,0);
		 
	}
	
	/* Content styles */
	.md-content {
		background: #fff;
		position: relative;
		border-radius: 3px;
		margin: 0 auto;
		padding: 16px 0;
        margin: 0 16px;
		opacity:1;
		box-shadow:0 10px 30px rgb(0 0 0 / 20%);
	}
	
	.md-content .button-container{border-radius:0 0 3px 3px;}
	
	.md-content .md-title {
		margin: 0;
		padding: 20px;
		font-size: 140%;
		font-weight: 300;
		opacity: 0.8;
		display:block;
		color:#fff;
	}
	
	.md-content > .md-content-text {
		padding: 10%;
		margin: 0;
		text-align:center;
		
	}

	.md-content-text h3{margin-bottom: 7.5px}
	
	.md-content > div p {
		margin: 0;
	}
	
	.md-content > div ul {
		margin: 0;
		padding: 0 0 30px 20px;
	}
	
	.md-content > div ul li {
		padding: 5px 0;
	}
	
	.md-content .button {
		display: block;
		margin: 0 auto 15px;
		max-width:220px;
	}

	/* Effect 1: Fade in and scale up */
	.md-effect-1 .md-content {
		transform: scale(0.7);
		opacity: 0;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-1 .md-content {
		transform: scale(1);
		opacity: 1;
	}


	/* Effect 3: Slide from the bottom */
	.md-effect-3 .md-content {
		transform: translateY(20%);
		opacity: 0;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-3 .md-content {
		transform: translateY(0);
		opacity: 1;
	}

    /* == SNACKBAR == */
    #snackbar-dialog{position: fixed; transform: translate3d(0,110%,0); bottom: 0; left: 0; right: 0; z-index: 11;
        background:#fff;
        box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);}

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

    #snackbar-dialog .container{
		max-width: 960px;
		margin: 0 auto 0;
		padding: 15px 30px;
		display: grid;
		grid-template-columns: 53px 1fr 280px;
		align-items: center;
		column-gap: 8px;
	}
	
	.snackbar-icon{
        width: 38px;
        height: 38px;
		border-radius: 50%;
		border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;
	}
	

    #snackbar-dialog .snackbar-buttons{
        text-align: right;
    }

	#snackbar-dialog p{
		padding-bottom:0
	}

	@media screen and (max-width: 767px){
		#snackbar-dialog .container{
			grid-template-columns: 1fr;
			text-align: center;
			box-shadow: 0 2.5px 25px rgb(0 0 0 / 15%);
		}

		#snackbar-dialog .snackbar-buttons{
			text-align: center;
			padding-bottom: env(safe-area-inset-bottom);
			padding-top: 30px;
			margin-bottom: 15px;
			display: grid;
			justify-content: center;
			align-content: center;
			grid-template-columns: 1fr 1fr;
		}
		#snackbar-dialog .snackbar-buttons.x1{
			grid-template-columns: 1fr;
		}
	}


    /* == CONTENT == */
    .app-content{padding:5vw;}
	.app-content h3{margin:0 0 4px;}
	.app-content h2{margin:16px 0 8px;}
	.app-content ul,.app-content ol{padding:0 20px 8px;}

    .app-content li{padding-bottom:8px;}


    /* == FORMS == */
    .label-icon{width:48px; height:52px;left:0; top:0; opacity:1; background-repeat:no-repeat; background-position:center center; background-size:28px; position:absolute}


    .fieldset-group{border-top:1px solid rgba(0,0,0,0)}
	.fieldset-group fieldset:last-of-type:after{display: none;}

	.inputs,.fake-inputs{ border:none; font:inherit; display:inline-block; background:none; width:100%; color:#000; margin:0; padding:0; -webkit-appearance:none; padding:5px 0}

    .inline-inputs{width:80%!important; margin-left:30px}

	.label-icon .fa{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 21px;
		height: 21px;
		text-align: center;
		font-size: 19px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-profile-icon{width:100%; height:auto; border-radius:50%}
    .user-profile-icon.tiny{width:24px; height:auto; border-radius:50%; transform:translate(-50%,-50%); top:50%; left:50%; position:absolute;}

	.arrow-field{position:absolute; right:5px; width:32px; height:32px; display: flex; align-items: center; justify-content: center;}
    .arrow-field i{font-size: 19px; color: #666;}

    .menu-fieldset{border-bottom:none!important;}
	.menu-fieldset:after{content:" "; left:0; border-bottom:1px solid rgba(0,0,0,.1); display:block; position:absolute; right:0; bottom:0;}



    /* == TABLES == */
    .data-table{width:100%;}
	.data-table td{padding:15px 10px; background:#fff; line-height:1.2em}
	.cell-padding-10 td{padding:10px 10px 10px 0px; }
	.cell-padding-10 td:first-of-type{padding-left:10px;}
	
	.cell-padding-tb-10 td{padding:10px 0;}
	
	.list-table{display:table; font-size:90%;}
	.list-table .row{display:table-row;}
	.list-table .row span{display:table-cell;}
	
	
	.data-row{border-bottom:1px solid rgba(0,0,0,0.1);}
	.data-row:after{content:' '; clear:both; display:block;}
	.data-row > div{padding:10px;}
	
	.data-table td{border-bottom:1px solid rgba(0,0,0,0.1); }
	.data-table th{color:#ddd;border-bottom:1px solid rgba(0,0,0,0.1); padding:3px 10px; font-weight:normal; text-align:left; text-transform:uppercase; font-size:80%; background:#fff}
	.data-table-stat{border-radius:30px; padding:5px 7.5px; background:rgba(0,0,0,0.1); color:#2d2d2d; display:block; line-height:normal; font-size:80%; text-align:center; text-transform:uppercase}
	.data-table .forward-arrow{width:32px; height:32px;}
	.data-table td strong{display:block;}


    .floating-bottom-btn.hidden{
		transform: translate3d(0,100%,0);
		opacity: 0;
	}

	.floating-bottom-btn.elevation-0{
		box-shadow: none!important;
		border-top: 1px solid rgb(0, 0, 0,.1);
	}

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

	.floating-bottom-btn::after{
		content: ' ';
		display:block;
		padding-bottom: var(--safe-area-inset-bottom);
	}




    .fragments{overflow:hidden; position:relative;min-height:100vh; height:100vh; width:100%;}
	.fragment{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); z-index:0; -webkit-transition-property:transform; transition-property:transform;-webkit-overflow-scrolling: touch; min-height:100%; height:100%; overflow:hidden;}
	
	
	.ios .fragment:after{content:' '; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.1); display:block; z-index:2;}
	.ios .fragment.show:after{opacity:0; z-index:0; display:none;}
	.ios .fragment.hide:after{opacity:1; z-index:2; display:block;}

	.fragment.show{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1;  visibility:visible; overflow:auto;overflow-x:hidden}
	.fragment.hide{-webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity:1;overflow:hidden;overflow-x:hidden}
	.fragment.hide.solid{ opacity:1}

	.fragment.hidden{visibility:hidden!important; transition:none!important; z-index:0!important; opacity:0!important}


    /* == BOTTOM NAVIGATION == */

    #action-tabbed-navigation{display: none;}

    .tabbed-navigation{height:58px; background:#fff; position:fixed; bottom:0; left:0; right:0; border-top:1px solid rgba(0,0,0,0.2); z-index:1; margin:0 auto;transform: translate3d(0, 150%, 0); opacity: 0;}
    
	.tabbed-navigation ul{
		list-style:none; 
		display:grid; 
		text-align:center;
		grid-template-columns:repeat( auto-fit, minmax(20%, 1fr) );
	}
	.tabbed-navigation ul li{display:inline-block; text-transform:uppercase; font-size:11px; position:relative; opacity:.5; font-size: 10px;}
	.tabbed-navigation ul li img{filter: grayscale(1)}

	.tabbed-navigation.show{ transform: translate3d(0, 0%, 0)!important; opacity: 1; z-index: 4;}
	
	.tabbed-navigation ul li.show{ opacity:1;}
	.tabbed-navigation ul li.show img{filter: grayscale(0)}

	

	.tabbed-navigation{ padding-bottom: var(--safe-area-inset-bottom); }
	
	.tab.show span{color:#000}
	
	.tab-inner{padding:7.5px 0px 0;}
	.tab-icon{display:block; margin:0 auto 0px; width:28px; height:28px; cursor:pointer; position: relative;  }
	.tab-bubble,.bubble{
		min-width:10px; 
		height:14px; 
		text-align:center;
		background:#2d2d2d; 
		font-size:12px; 
		padding:3px 5px; 
		border-radius:10px;  
		color:#fff; 
		position:absolute; 
		line-height:14px; 
		font-family:sans-serif; 
		opacity:0; 
		transform:scale(0);
	}
	
	.tab-bubble{top:-5px; right:-10px;}
	
	.tab-bubble.show,.bubble.show{
		opacity:1;
		transform: scaleX(1) scaleY(1) translateZ(0);
		 z-index: 1;
	}
	
	.tabbed-navigation.show .tab-bubble{display:block}


	/* Color Faded */
	.nav-style-faded #panel-tabbed-navigation{
		box-shadow: none;
		border: none;
	}

	.nav-style-faded #panel-tabbed-navigation{
		background:rgba(250,250,250,0.8);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}

	.nav-style-faded .white-page-nav .tab-navigation,
	.nav-style-faded .bg-white-onscroll.visible,
	.nav-style-faded .toolbar-border{
		box-shadow: none;
		border-bottom:1px solid rgb(0, 0, 0,.05);
	}
	
	

	/* Style Compact */
	.nav-style-compact #panel-tabbed-navigation{
		bottom:15px;
		left: 15px;
		right: 15px;
		border-radius: 45px;
		height: auto;
		max-width: 420px;
		box-shadow: 0 0 35px -20px rgb(0 0 0 / 75%);
	}

	.nav-style-compact .tabbed-navigation.hide{transform: translate3d(0,100%,0)!important; opacity: 0;}

	.nav-style-compact #panel-tabbed-navigation li{
		display:flex;
		align-items: center;
		justify-content: center;
	}

	.nav-style-compact #panel-tabbed-navigation .tab-inner{
		padding: 15px 0;
	}	

	.nav-style-compact #panel-tabbed-navigation li span{
		display:none;
	}

	.nav-style-compact .tabbed-navigation{ margin-bottom: var(--safe-area-inset-bottom); padding-bottom: 0; }




	.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%;
		background:#fff;
		font-family: var(--body-bold-font);
		cursor: pointer;
		height: 48px;
		width: 48px;
		letter-spacing: 0.5px;
    }

    .floating-action-btn.extend{
        width: auto;
        padding: 0 16px;
        border-radius: 24px;
        height: 39px;
        /*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.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;
		letter-spacing: normal;
    }

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

	.floating-action-btn.position-relative {
		position: relative;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}


	.tabbed-list nav{text-align:center; margin:0;}
	.tabbed-list nav a{display:inline-block; padding:5px 7.5px; border-top:1px solid #fff; border-bottom:1px solid #fff;text-transform:uppercase; font-size:11px;border-left:1px solid #fff; width:24.5vw;line-height:normal; color:#fff; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); max-width: 60px; cursor: pointer}
	.tabbed-list nav a:first-of-type{ border-radius:5px 0 0 5px;}
	.tabbed-list nav a:last-of-type{border-right:1px solid #fff; border-radius:0px 5px 5px 0;}

	.tabbed-list nav a.show{background:#fff; color:#fff;}


	/*=======================================================
	// SLIVER SCROLL
	/======================================================*/

	.sliver-appbar{

		height: 34vh;
		position: absolute;
		top:0; 
		left: 0;
		right: 0;
		min-height: 48px;
		padding-top: var(--safe-area-inset-top);
		color:#fff;
		will-change: height;
		transform: translate3d(0,0,0);

	}

	.sliver-appbar .fragment-toolbar{top:0}

	.sliver-appbar-content{
		position: absolute;
		height: 100%;
		overflow: hidden;
		width: 100%;
		top: 0;
		padding-bottom: var(--safe-area-inset-top);
	}

	.sliver-content{margin-top:34vh; min-height: calc(100vh - 48px); padding-top: var(--safe-area-inset-top)}


	.sliver-view{
		height: 100vh;
		overflow: auto;
	}


	/*==========================================
	//	FOOTER BUTTONS
	/==========================================*/
	
	#footer-actions{position:absolute; bottom:0; left:0; right:0; z-index:1; -webkit-transform: translate3d(0, 100%, 0) ;transform: translate3d(0, 100%, 0); visibility:hidden}
	#footer-actions.show{ -webkit-transform: translate3d(0, 0%, 0) ;transform: translate3d(0, 0%, 0);}
	.footer-panels{overflow:hidden; position:relative; height:0}
	.footer-panel{position:absolute;width:100%; visibility:hidden;-webkit-transform: translate3d(0, 100%, 0) ;transform: translate3d(0, 100%, 0);}
	.footer-panel.show{visibility:visible;-webkit-transform: translate3d(0, 0%, 0) ;transform: translate3d(0, 0%, 0);}
	
	.footer-buttons{position:absolute; bottom:0; left:0; right:0; width:100%;display:block; text-align:center}
	.footer-button{padding:19px 15px; text-transform:uppercase; display:block; text-align:center;}

	/*=======================================================
	// ANIMATIONS
	/======================================================*/

	.animation{
		transition-duration:900ms;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		transition-property:transform, opacity, background, visibility, width;
	}

	.animation-bounce{
		transition: all 900ms cubic-bezier(.87,-.41,.19,1.44);
	}

	.animate-from-left{transform: translate3d(-100%, 0, 0); opacity:0}
	.animate-from-right{ transform: translate3d(100%, 0, 0); opacity:0}
	.animate-from-bottom{transform: translate3d(0%, 100%, 0); opacity:0}
	.animate-from-top{  transform: translate3d(0, -100%, 0); opacity:0}
	.animate-popIn{transform:scale(0); opacity:1; visibility:hidden}
	.animate-fadeIn{opacity:0}

	.animate-expand{width:0; opacity:0}

	.animate-from-bottom.run{ transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-left.run{transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-right.run{transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-top.run{transform: translate3d(0%, 0, 0); opacity:1}
	.animate-popIn.run{
		 animation:popIn 0.5s;  animation-fill-mode: forwards;visibility:visible
	}
	.animate-fadeIn.run{
		opacity:1
	}
	
	.animate-visible{display:none!important; transition:none!important; }
	.animate-visible.run{display:block!important;}

	.effect-pulse{
		 animation:pulse 1s infinite;
	}

	@keyframes pulse {
	  0% {
		transform: scale(0.85) translateZ(0);
	  }
	  50% {
		transform: scaleX(1) scaleY(1) translateZ(0);
	  }
	  100% {
		transform: scale(0.85) translateZ(0);
	  }

	}
	
	@keyframes popIn {
	  0% {
		transform: scale(0.9) translateZ(0);
		opacity:0.5;
	  }
	  50% {
		transform: scaleX(1.05) scaleY(1.05) translateZ(0);
		opacity:1;
	  }
	  100% {
		transform: scale(1) translateZ(0);
		opacity:1;
	  }

	}

	/*=======================================================
	// SSO
	/======================================================*/

	.sso-title{
		position: relative;
		text-align: center;
		margin: 28px 0 var(--margin-medium);
		padding: 0;
	}

	.sso-title:after{
		content: ' ';
		position: absolute;
		display: block;
		background: rgba(0, 0, 0, 0.1);
		height: 2px;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);

	}

	.sso-title strong{
		display: inline-block;
		position: relative;
		z-index: 1;
		width: auto;
		margin: 0 auto;
		padding: 0 7.5px;

	}

	.sso-btn{
		width: 44px;
		height: 44px;
		align-items: center;
		display: flex;
		justify-content: center;
		border-radius: 50%;
		border-color: #000;
		background: #000;
		color: #fff;
	}


	.sso-btn-large.button{
		background:#000;
		border-color: #000;
		color: #fff;
	}

	.sso-btn{
        border-radius: 50%;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
    }

	/*=== SSO Light on Dark theme ===*/
    .bg-dark .sso-btn{
        background:rgba(255,255,255,0.9);
    }

    .bg-dark .sso-btn-large{
        background:#fff;
		border-color: #fff;
		color: #000;
    }
	

    .bg-dark .sso-btn .fa,
    .bg-dark .sso-btn-large .fa{
        color:#000;
    }

	/*=== SSO Dark on White theme ===*/
    .bg-white .sso-btn{
        background:#000;
    }
    
    .bg-white .sso-btn .fa{
        color:#fff;
    }


	.bg-white .sso-btn-large{
        background:#000;
		border-color: #000;
		color: #fff;
    }

	.bg-white .sso-btn-large .fa{
		color:#fff;
	}


	/*=== SSO Light Theme ===*/

	.sso-light-theme .sso-btn{
        background:rgba(255,255,255,0.9);
    }
	.sso-light-theme .sso-btn-large{
        background:#fff;
		border-color: #fff;
		color: #000;
    }
	

	.sso-light-theme .sso-btn-large .fa,
	.sso-light-theme .sso-btn .fa{
        color:#000;
    }

    

	.sso-btn i{
		font-size: 22px;
	}

	

	.sso-btn-grid{
		display: flex;
		gap:28px;
		justify-content: center;
		align-items: center;
	}

	#sso-btn-apple .fa-apple{
		font-size: 24px;
		margin-top:-3px
	}

	
	


    /*=======================================================
    // LARGE SCREENS
    /======================================================*/

    @media screen and (min-width: 768px) and (orientation: landscape)  and (min-height: 400px) {

        .panel.hiding{
            transform: translate3d(0%, 0, 0); 
        }

        .fragment-toolbar{transform: translate3d(2.5%,0,0)!important; z-index: 0;}
		.fragment-toolbar.show{transform: translate3d(0%,0,0)!important; z-index: 1;}
		.fragment-toolbar.hide{transform: translate3d(-2.5%,0,0)!important;z-index: 0;}

		.fragment{transform: translate3d(2.5%,0,0)!important; z-index: 0;}
		.fragment.show{transform: translate3d(0%,0,0)!important; z-index: 1;}
		.fragment.hide{transform: translate3d(-2.5%,0,0)!important;z-index: 0;}


		/* Compact Style */
		.nav-style-compact #left-navigation{width:80px!important}
		.nav-style-compact #container{margin-left:80px!important}
		.nav-style-compact #left-navigation .menu-logo{width: 42px!important; height: 42px!important;}

		.nav-style-compact #left-navigation ul li a{
			text-indent: -9990px;
			padding: 25px;
		}

		.nav-style-compact #left-navigation .menu-icon{
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
		}

    }