/**
* START root style
*/
html{
	height:100%;
}

body{
	font-size:16px!important;
	overflow:hidden;
	min-height:100%;
	height:100%;
	background-image : url('../img/tiny-grid-bg.jpg');
}

.clearer{
    clear:both;
}

.ui5prod-wrapper{
	position:absolute;
	top: 50px;
	bottom:30px;
	width:100%;
	height:auto!important;
}

.ui5prod-wrapperScrollable{
	overflow:auto;
}


.ui5prodStartPageExample{
	height:445px;
}


.ui5prodSocialMediaButtons{
    margin-top:12px;
    margin-bottom:12px;
    text-align:center;
}

.ui5prodEmailLink{
	cursort:pointer;
}

.ui5prodEmailAddress:after {
    content: attr(data-etis) "\0040" attr(data-resu);
    unicode-bidi: bidi-override;
    direction: rtl;
}


.ui5prod-footer{
    height:30px; 
    line-height:30px; 
    
    font-size:12px;
    padding-left:20px;
    padding-right:20px;
    width: 100%;
    position:fixed;
    bottom:0;
    left:0;

    background-color:#f0f0f0;
    border-top:solid 1px #e0e0e0;
    z-index:500;
}

.ui5prodFooter-menu{
	float:right; padding:0; margin:0; list-style:none;
}

.ui5prodFooter-menu > li{
	display:inline-block;
	margin-left:10px;
}

.ui5prodFooter-menu > li > a:hover{
	text-decoration:none;
}

.ui5prod-footer > p{
    margin:0;
}

.ui5prod-jsdocFrame{
	width:100%;
	height:100%;
	border:none;
}

.ui5prod-apiTabContent{
	
}

.ui5prod-blogPage h1{
	font-size: 24px;
    margin-top: 30px;
	margin-bottom: 30px;
}

.ui5prod-blogPage h2{
	font-size: 24px;
    margin-top: 30px;
	margin-bottom: 30px;
	color:#20638f;
}

.ui5prod-blogPage h3{
	font-size: 19px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.ui5prod-blogPage h4{
	font-size: 19px;
	margin-top: 20px;
	margin-bottom: 20px;
	color:#20638f;
	
}

.ui5prod-blogPage h5{
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.ui5prod-blogPage h6{
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 20px;
	color:#20638f;
}

#tab-pane-jsdoc{
	position:absolute;
	top:44px;
	bottom:0px;
	width:100%;
}

h1.ui5prod-firstHeading{
	margin:30px;
	font-size:28px;
	text-align:center;
}

.ui5prod-address{
	border:solid 1px #dedede;
	
	margin-bottom:10px;
}

.ui5prod-addressHeading{
	background-color: #dedede;
	margin:0;
	text-align:center;
	line-height:26px;
	
}

.ui5prod-addressBody{
	padding:8px;
}

/**
* END root style
*/

/**
* START StartPageQuote
*/

.ui5prod-quote{
    margin:30px auto; 
    width: 450px; 
    height:80px;
    border:none; 
    padding:0;
}

/**
* END StartPageQuote
*/

/**
* START FeaturesList
*/

.ui5prod-featuresList > h2{
	text-align:center;
	font-size:30px;
	padding:0;
	margin:20px 0;
}

.ui5prod-featuresList > ul{
	max-width: 480px;
	margin:20px auto;
	list-style : none;
	font-size:18px;
}

/**
* END FeaturesList
*/ 

/**
* START License
*/

.ui5prod-license{
	margin-bottom:30px;
	border: 1px solid #d0d0d0;
	background-color: #ffffff;
}

.ui5prod-license h3{
    font-size:18px;
    font-weight: bold;
    margin: 10px 0;	
}

.ui5prod-license h4{
    font-size:16px;
    font-weight: bold;
    margin: 10px 0; 
}

.ui5prod-basicLicense{
	background-color: #efefef;
	border-top: 1px solid #d0d0d0;
}

.ui5prod-basicLicense,
.ui5prod-premiumLicense{
	padding: 10px;
}

.ui5prod-pricePremium{
	display: block;
	font-size:22px;
	text-align:center;
	margin-bottom: 10px;
}

.ui5prod-priceBasic{
	padding:8px;
}

/**
* END License
*/

/**
* Start FAQ
*/

.ui5prod-faqQuestion{
	margin:20px 0 10px 0;
	font-weight: bold;
}

.ui5prod-faqHeading{
	margin: 0;
}

/**
* END Faq
*/

/**
* START Featurettes
*/

.ui5prod-featurettes{
	margin:30px 0;
}

.ui5prod-featurettes h2{
	font-weight:750;
}

.ui5prod-featurettes > .row{
	padding:30px 0;	
	border-bottom: solid 1px #e0e0e0;
}

.ui5prod-featurettes > .row:last-child{
	border:none;
}

.ui5prod-featurettesIcons{
	text-align: center;
	font-size: 80px;
	line-height:80px;
	margin-top:30px;
	margin-bottom:30px;
}

.ui5prod-featurettesIcons > .fa{
	margin-left:10px; 
	margin-right:10px;
}

/**
* END Featurettes
*/ 

/**
* START TechStack
*/

.ui5prod-techStack{
	margin-top:30px;
	margin-bottom:30px;
	text-align: center;
}

.ui5prod-techStack a{
	margin-right: 10px;	
}

.ui5prod-techStack a:last-child{
	margin-right: 0;	
}

/**
* END TechStack
*/


/**
* START Site Header
*/

.ui5prod-siteHeader{
	position: relative;
	margin-top:20px;
	margin-bottom:20px;
}

.ui5prod-siteHeader > img{
	width: 110px;
	position:absolute;
	top:0;
	left:0; 
}

.ui5prod-siteHeader > div{
	padding-left:136px;
	height:110px;
}

.ui5prod-siteHeader h1{
	margin:0;
	margin-bottom:6px;
}

.ui5prod-siteHeader h1 > span{
    color:#3797d3;
}

/**
* END Site Header
*/

/**
* START Device Sim
*/

.ui5prod-deviceSim{
	margin-bottom: 20px;
}

.responsive-frame{
	position:relative;
	border: solid 2px black;
}

.responsive-frame > .home-button{
	display:none;
}

.responsive-frame > .responsive-frame-screen{
	position: relative;
	width:100%;
    height:480px;
    margin:0;
    overflow:hidden;
    background-color:white;
}

.responsive-frame > .responsive-frame-screen > .example{
   
    
}

.responsive-frame > .responsive-frame-screen > iframe{
	width:100%;
	height:100%;
	border:none;
}



@media (min-width: 481px) {
    /*
	* Responsive Frame
	*/

	.responsive-frame{
		border:solid 1px #a0a0a0;
		background-color:black;
		border-radius:20px;
	    width: 380px;
	    margin:0 auto;
	}
	
	.responsive-frame:after{
       display:block;
       clear:both;
       content:'';
    }
	
	.responsive-frame > .responsive-frame-screen{
        margin:50px 20px;
        width:340px;
        height:603px;
    }
    

	.responsive-frame > .home-button{
		display:block;
		background-color:white;
		width:30px;
		height:30px;
		position: absolute;
		border-radius: 50%;

		bottom:10px;
		left:50%;
		margin-left:-15px;
		
		background-image : url('../img/tiny-grid-bg.jpg');
		background-position: center center;
	}

	
	

	.responsive-frame > .responsive-frame-screen > iframe{
		border:solid 1px #2f2f2f;
	}
}


@media (min-width: 768px) {
	
	.responsive-frame{
		float:left;
		width: auto;
		margin:0;
	}
	
	.responsive-frame > .responsive-frame-screen{
        margin:15px 50px;
        height:349px;
        width:620px;
    }
    

    .responsive-frame > .home-button{
        right:10px;
        top:50%;
        left:auto;
        bottom:auto;
        margin-top:-15px;
    }
	

}

@media (min-width: 992px) {

	.responsive-frame > .responsive-frame-screen{
        margin:15px 45px;
        height:637px;
        width:850px;
    }
    

    .responsive-frame > .home-button{
        right:12px;
        top:50%;
        left:auto;
        bottom:auto;
        margin-top:-12px;
        
        width:24px;
		height:24px;
    }
}

@media (min-width: 1200px) {

	.responsive-frame > .responsive-frame-screen{
        margin:20px 60px;
        height:640px;
        width:1024px;
    }
    

    .responsive-frame > .home-button{
        right:15px;
        top:50%;
        left:auto;
        bottom:auto;
        margin-top:-15px;
        
        width:30px;
		height:30px;
    }
    
    
}

@media (min-width: 992px) and (min-height: 1200px) {
	
	    .responsive-frame > .responsive-frame-screen{
	        margin:45px 15px;
	        height:800px;
	        width:600px;
	    }
	    
	
	    .responsive-frame > .home-button{
	        top:auto;
	        right:auto;
	        bottom:12px;
	        left:50%;
	        margin-left:-12px;
	        
	        width:24px;
			height:24px;
	    }
	}


/**
* END Device Sim
*/

/**
* START Prettyprint Theme
*/

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
    background-color: #000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
}

pre.prettyprint {
    width: 100%;
    margin: 0;
    margin-bottom:10px;
    padding: 1em;
    word-wrap: normal;
    white-space: pre;
    overflow: auto;
}



/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

/**
* END Prettyprint Theme
*/

/**
* START Stuff that should be part of Ui5Strap Toolkit CSS
*/

.ui5strapBar:after{
	display:block;
	content:'';
	clear:both;
}

.ui5strapHeading-option-BarHeadingFull{
	text-align:center;
	margin-top: 13px;
    margin-bottom: 13px;
    font-size: 16px;
}

/**
* END Stuff that should be part of Ui5Strap Toolkit CSS
*/

/**
* START Ui5Strap Custom Changes for docs due to its HTML nature
*/
@media (max-width: 767px){
     /*
      * Show btn-toggle-sidenav
      * (if options "sidebar" and "sidebar-2nav" are enabled)
      * TODO simplify
      */
      .navcontainer-type-standard.navcontainer-option-sidebar.navcontainer-option-sidebar-2nav .ui5strapBar > .container-fluid > .btn-toggle-sidenav{
        display:block!important;
      }
}
/**
* END Ui5Strap Custom Changes for docs
*/


/**
* START Manual Next Step
*/

.ui5prod-nextStep{
	padding:20px;
	text-align:right;
}

/**
* END Manual Next Step
*/

.ui5prod-manualPage{
	
}

.ui5prod-manualPage > .alert{
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}



.ui5prod-manualPage h4.list-group-item-heading{
    
}



.ui5prod-manualPage .table{
	font-size: 14px;
}

.ui5prod-manualPage-inset{
	padding:0 40px;
}

/**
* START Docs Page
*/


.docs-page-text-block{
	margin-bottom: 30px;
}

.docs-page-inset{
	padding:0 40px;
}

.docs-element-folder{
	font-style: italic;
	white-space: no-wrap;
}

.docs-element-file{
	font-style: italic;
	white-space: no-wrap;
}

.docs-element-term{
	font-style: italic; color: #606060;
}

.docs-page-tabs{
	margin-bottom: 30px;
}



.docs-toc > li:first-child,
.docs-toc > li:last-child,
.docs-toc > a:first-child,
.docs-toc > a:last-child{
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}



.docs-steps{
    padding:0 40px;
    list-style-type:decimal;
}

.docs-steps-big{
    padding:0 40px;
}

.docs-tabs{
	margin:30px 0;
}

/**
* END Docs Page
*/

/**
* START Api TOC
*/
.api-toc{
	padding:10px 0;
	margin:0;
	
	list-style:none;
}

.api-toc > li{
    font-size:16px;
    line-height:1.6;
    color:white;
    padding:0 10px;
}

.ui5prod-apiSidebarItem,
.ui5prod-apiSidebarItem:focus,
.ui5prod-apiSidebarItem:hover
{
	color:inherit;
	text-decoration:none;
}

.ui5prod-typeIcon{
	display:inline-block;
	padding: 4px 6px;
	margin:6px 0;
	color: #ecf0f1;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.ui5prod-typeIcon.active{
	color: #34495e;
	background-color: #ecf0f1;
}

.api-toc > li.active{
    background-color:white;
    color:#025d8c;
    padding:10px 10px;
}
/**
* END Api TOC
*/

/**
* START Api Overview List
*/

.api-overview-list{
	padding:0;
    margin:0;
    
    list-style:none;
}

.api-overview-list > li{
	font-size:16px;
    line-height:1.6;
    padding:0;
}

.api-overview-list > li a,
.api-overview-list > li a:focus,
.api-overview-list > li a:hover{
	text-decoration:none;
}

.api-overview-list > li a.deprecated,
span.deprecated{
	color:#a94442; 
}

/**
* END Api Overview List
*/

/*
* START Module Page
*/

.nav-tabs.nav-tabs-module > li.active > a,
.nav-tabs.nav-tabs-module > li.active > a:focus,
.nav-tabs.nav-tabs-module > li.active > a:hover{
	background-color:#025d8c;
	color:white;
	border:solid 1px #025d8c;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
    border-radius: 0;
}

.table-module > tbody > tr > th,
.table-bordered.table-module > tbody > tr > th{
	background-color:#025d8c;
    color:white;
    border:solid 1px #025d8c;
}

.table-bordered.table-module > tbody > tr.inherited > td{
   background-color:rgba(2, 93, 140, 0.75);
    color:white;
    border:solid 1px #025d8c;
    text-align:center;
    font-weight:bold;
}

tr.inherited a,
tr.inherited a:focus,
tr.inherited a:hover{
	color:white;
}

/**
* END Module Page
*/

/**
* START Homescreen Icons
*/

.app-homescreen-container{
  position:relative;
  width:100%;
  height: 100%;
}

.app-homescreen{
  position:relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
	width:100%;
	height:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image:url('../img/background2.jpg'); background-position: center center;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


	background-repeat:no-repeat;

   -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;

  transition: border-color 0.01s;
    -webkit-transition: border-color 0.01s;
    -moz-transition: border-color 0.01s; /* Safari */

    -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

    border-color:green;
}

.app-homescreen:after{
  content: url('../img/spinner.png');
  display:none;
}


/*
* Icon
*/
.app-homescreen-icon{
	display:block;
  
	 width:204px; 
   height:248px;  

   cursor:pointer;

  -webkit-tap-highlight-color: rgba(0,0,0,0.5);

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

  text-decoration: none;
  
}

.examples-page .app-homescreen-icon{
	float:left;
	
}

.app-homescreen-icon:hover{
	text-decoration: none;
}


/*
* Icon title
*/
.app-homescreen-icon > .app-homescreen-icon-title{
    height:32px;
    line-height:32px;
    text-align: center; 
    text-shadow:0 1px 2px rgba(255,255,255,0.8);
    color:#090909;
    margin-bottom:12px;
    margin-top:12px;
    font-size:16px;
}

.app-homescreen.app-homescreen-icon-animation-drop.app-homescreen-transition-start .app-homescreen-icon,
.app-homescreen.app-homescreen-icon-animation-explode.app-homescreen-transition-start .app-homescreen-icon{
    
    transition: transform 0.5s;
    -webkit-transition:  -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s; 
    
}

.app-homescreen.app-homescreen-icon-animation-explode.app-homescreen-transition-start .app-homescreen-icon{
   left:49%;
   top:49%;
}

.app-homescreen.app-homescreen-icon-animation-drop .app-homescreen-icon{
    -webkit-transform: translateZ(1000px);
    -moz-transform: translateZ(1000px);
    -ms-transform: translateZ(1000px);
    -o-transform: translateZ(1000px);
    transform: translateZ(1000px);
}

.app-homescreen.app-homescreen-icon-animation-drop .app-homescreen-icon.app-homescreen-icon-random-1{
       transition-delay: 0.1s;
    -webkit-transition-delay:  0.1s; /* Safari */
    -moz-transition-delay: 0.1s; /* Safari */
}

.app-homescreen.app-homescreen-icon-animation-drop .app-homescreen-icon.app-homescreen-icon-random-2{
       transition-delay: 0.2s;
    -webkit-transition-delay:  0.2s; /* Safari */
    -moz-transition-delay: 0.2s; /* Safari */
}

.app-homescreen.app-homescreen-icon-animation-drop .app-homescreen-icon.app-homescreen-icon-random-3{
      transition-delay: 0.3s;
    -webkit-transition-delay:  0.3s; /* Safari */
    -moz-transition-delay: 0.3s; /* Safari */
}

.app-homescreen.app-homescreen-icon-animation-drop .app-homescreen-icon.app-homescreen-icon-random-4{
       transition-delay: 0.4s;
    -webkit-transition-delay:  0.4s; /* Safari */
    -moz-transition-delay: 0.4s; /* Safari */
}




.app-homescreen.app-homescreen-icon-animation-drop.app-homescreen-transition-start .app-homescreen-icon{
   -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.app-homescreen-icon.app-homescreen-icon-default{

} 

.app-homescreen-icon.app-homescreen-icon-precomposed{

}

.app-homescreen-icon-img-wrapper{
  position: relative;
  width:144px;
  height:144px;
  
  margin-left:auto;
  margin-right:auto;
  margin-top:12px;

  -webkit-transition: -webkit-transform 0.2s; /* For Safari 3.1 to 6.0 */
    transition: transform 0.2s;
}

@media (max-width: 600px) {
	.app-homescreen-icon{
        width:160px; 
        height:180px;  
    }
    
	.app-homescreen-icon-img-wrapper{
        width:120px;
        height:120px;
	}
}

@media (max-width: 480px) {
	.app-homescreen-icon{
       width:140px; 
        height:160px;  
	}
	
    .app-homescreen-icon-img-wrapper{
        width:100px;
        height:100px;
    }
}


.app-homescreen-icon:hover .app-homescreen-icon-img-wrapper{
	-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

/*
* Icon image container
*/
.app-homescreen-icon-img{
	position: absolute;
  width:100%;
  height:100%;
  
  
  
  
  z-index: 10;

  border-radius: 18px;
}

/*
* Icon image container
*/
.app-homescreen-icon-actions,
.app-homescreen-icon-decorators{
  position: absolute;
  width:100%;
  height:100%;
  display:none;
}


.app-homescreen-edit .app-homescreen-icon-actions{
  display:block;
}

.app-homescreen-icon-decorator{
  border-radius:50%;
    
    position:absolute;
    
    z-index: 11;
    line-height:20px;
    font-size:12px;
    text-align:center;
    font-weight:bold;

    width:24px;
    height:24px;

    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .6);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .6);

     -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.app-homescreen-icon-actions-close{
    

    left:0;
    top:0;
    margin-left:-12px;
    margin-top:-12px;

    
    background-color:black;
    border:solid 2px #f0f0f0;
    color:white;

    
  }

  .app-homescreen-icon-decorators-counter{
    right:0;
    top:0;
    
    margin-right:-12px;
    margin-top:-12px;

    
    background-color:red;
    color:white;
    border:solid 2px #f0f0f0;

  }

.app-homescreen-icon.app-homescreen-icon-3d .app-homescreen-icon-img{
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .6);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .6);
}

/*
* Icon image
*/
.app-homescreen-icon .app-homescreen-icon-img > img{
	position:absolute;
  width:100%; 
  height:100%;
	
  z-index:5;

  border-radius: inherit;
	
  border:none;
}

/*
* Icon gloss
*/
.app-homescreen-icon .app-homescreen-icon-img > .app-homescreen-icon-gloss {
    display:none;
    position: absolute;
    top: 0px;
    height: 53%;
    width: 100%;
    overflow: hidden;
  
    background: rgba(255,255,255,0.2);
    
    z-index: 7;
    -webkit-box-shadow: 0px 0px 30px rgba(0,0,0, .2), inset 0px 1px 1px rgba(255,255,255,0.6);
    -moz-box-shadow: 0px 0px 30px rgba(0,0,0, .2), inset 0px 1px 1px rgba(255,255,255,0.6);
    box-shadow: 0px 0px 30px rgba(0,0,0, .2), inset 0px 1px 1px rgba(255,255,255,0.6); 

    border-bottom-right-radius: 72px 20px;
    border-bottom-left-radius: 72px 20px;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;

    -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
    
}

.app-homescreen-icon.app-homescreen-icon-default .app-homescreen-icon-img > .app-homescreen-icon-gloss{
    display:block;
} 

.app-homescreen-icon.app-homescreen-icon-precomposed .app-homescreen-icon-img > .app-homescreen-icon-gloss{
    display:none;
}

/*
* Icon Bevel
*/
.app-homescreen-icon .app-homescreen-icon-img > .app-homescreen-icon-bevel {
   display:none;
   position:absolute;
   overflow:hidden;
   
   width:100%;
   height:100%;

   z-index:6;

   border-radius: inherit;
   
   -webkit-box-shadow: inset 0px 0px 40px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 0px 40px rgba(0,0,0,0.2);
    box-shadow: inset 0px 0px 40px rgba(0,0,0,0.2);

    -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.app-homescreen-icon.app-homescreen-icon-default .app-homescreen-icon-img > .app-homescreen-icon-bevel{
    display:block;
} 

.app-homescreen-icon.app-homescreen-icon-precomposed .app-homescreen-icon-img > .app-homescreen-icon-bevel{
    display:none;
}


/*
* Icon top layer
*/
.app-homescreen-icon .app-homescreen-icon-top-layer {
   
   position:absolute;
   
   width:100%;
   height:100%;

   z-index:9;

   border-radius : inherit;
}

.app-homescreen-edit .app-homescreen-icon .app-homescreen-icon-top-layer {
  display:none;
}



/*
* Loader
*/

.app-homescreen-icon .app-homescreen-icon-img > .app-homescreen-icon-loader{
  background-color:rgba(255,255,255,0.8);
   width:100%;
  height:100%;
  position:absolute;
  z-index:8;
  
  display:none;

  border-radius : inherit;

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.app-homescreen-icon .app-homescreen-icon-img > .app-homescreen-icon-loader > .app-homescreen-icon-loader-spinner{
  background-image:url('../img/spinner.png');
  background-position: center center;
  background-repeat: no-repeat;
  width:100%;
  height:100%;

  -webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;

-webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

display:block;
}

.app-homescreen-icon.app-homescreen-icon-loader .app-homescreen-icon-img > .app-homescreen-icon-loader{
  display:block;
}



.app-homescreen-edit .app-homescreen-icon .app-homescreen-icon-img{
   -webkit-animation: shake 0.2s infinite linear;
-moz-animation: shake 0.2s infinite linear;
-o-animation: shake 0.2s infinite linear;
animation: shake 0.2s infinite linear;

}

.app-homescreen-edit .app-homescreen-icon > .app-homescreen-icon-title{
  display:none;
}

/**
* END Homescreen Icons
*/



/**
* START sidenav
*/
.sidenav-heading{
	font-size:14px;
    background-color:rgba(0,0,0,0.1);
	margin:0;
	padding:12px;
}

ul.sidenav{
	margin:8px 0;
	padding:0;
}

ul.sidenav > li > a{
	color:inherit;
	padding:6px 12px;
	border-radius:0;
}

ul.sidenav > li > a:hover{
    
    background-color:rgba(0,0,0,0.1);
    
}

ul.sidenav > li.active > a,
ul.sidenav > li.active > a:focus,
ul.sidenav > li.active > a:hover{
	background-color:rgba(0,0,0,0.25);
   padding:10px 12px;
}

ul.sidenav > li > ul{
	display:none;
} 

ul.sidenav > li.active > ul.sub-nav{
	display:block;
	margin:0;
	
	list-style:none;
	padding:10px 0px 10px 24px;
	
} 

ul.sidenav > li.active > ul.sub-nav > li{
	
}

ul.sidenav > li.active > ul.sub-nav > li > a{
	text-decoration:none;
	padding:8px;
	display:block; 
	color:inherit;
	-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

ul.sidenav > li.active > ul.sub-nav > li > a:hover{
    background-color:rgba(0,0,0,0.1);	
}

ul.sidenav > li.active > ul.sub-nav > li.active > a,
ul.sidenav > li.active > ul.sub-nav > li.active > a:focus,
ul.sidenav > li.active > ul.sub-nav > li.active > a:hover{
	background-color:rgba(255,255,255,0.75);
	color:#025d8c;
	padding:10px;
}

/**
* END sidenav
*/


/**
* START Project Structure
*/
#project-structure-directories{
	float:left;
}

#project-structure-explaination{
	margin-left:10px;
	float:left;
}

#project-structure:after{
	display:block;
	height:10px;
	content:'';
	clear:both;
}


.file-explorer{
	list-style:none;
	padding:10px;
	margin:0;
	margin-bottom:10px;
	
	width:360px;
	
	border:solid 1px #eee;
	border-radius:8px;
}

.file-explorer > li{
	height:23px;
	font-size:14px;
	line-height: 23px;
	background-color:#f3f6fa;
	padding-right:10px;
	
} 

.file-explorer >  li:nth-child(odd) {
	background-color:#f7f7f7;
}

.file-explorer > li.level1{
	padding-left:10px;
}

.file-explorer > li.level2{
	padding-left:30px;
}

.file-explorer > li.level3{
	padding-left:50px;
}

.file-explorer > li.level4{
	padding-left:70px;
}

.file-explorer > li.level5{
	padding-left:90px;
}

.file-explorer > li.level6{
	padding-left:110px;
}

.file-explorer > li.level7{
	padding-left:130px;
}

.file-explorer > li.level8{
	padding-left:150px;
}

.do{
	
}

.avoid{
	color:#BFA530;
}

.dont{
	color:#BC2F36;
}


/**
* END Project Structure
*/


/*
* START File Tag
*/
.filename-tag{
	background-color:#FAFAFA;
	padding:4px 8px;
	width:140px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-left:solid 1px #DDD6DC;
	border-right:solid 1px #DDD6DC;
	border-top:solid 1px #DDD6DC;
	text-align: left;
}

.filename-tag-long{
	background-color:#FAFAFA;
	padding:4px 8px;
	width:240px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-left:solid 1px #DDD6DC;
	border-right:solid 1px #DDD6DC;
	border-top:solid 1px #DDD6DC;
	text-align: left;
}

.filename-tag-extra-long{
	background-color:#FAFAFA;
	padding:4px 8px;
	width:500px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-left:solid 1px #DDD6DC;
	border-right:solid 1px #DDD6DC;
	border-top:solid 1px #DDD6DC;
	text-align: left;
}

.ui5strap-file{
	margin-bottom:10px;
}

.ui5strap-file > .prettyprint{
  border-color: #DDD6DC;
  
  border-top-left-radius: 0;
}

/*
* END File Tag
*/

/*
* START Demo Phone
*/

.demo-pad{
	margin:20px 0;
}

.demo-pad:after{
    display:block;
    clear:both;
    content:'';
 }
 
.demo-pad-frame{
     border:solid 1px #a0a0a0;
     background-color:black;
     border-radius:20px;
     float:left;
     margin-right:20px;
     position:relative;
 }
 
 .demo-pad-explaination{
 
    float:left;
    width:240px;
 }
    
 .demo-pad-frame > .demo-pad-screen{
    position:relative;
     background-color:white;
     margin:30px 10px;
     width:240px;
     height:320px;
 }
 

 .demo-pad-frame > .demo-pad-home-button{
     display:block;
     background-color:white;
     width:15px;
     height:15px;
     position: absolute;
     border-radius: 50%;

     bottom:8px;
     left:50%;
     margin-left:-8px;
 }

/*
* END Demo Phone
*/


/*
* START JS API Object
*/
      .js-object{
        border:solid 1px #d0d0d0;
      }

      .js-object-row{
        padding:8px;
      }

      .js-object-constructor{
        background-color:#f0f0f0; color:#D88C40;
      }

      .js-object-prototype{
       
      }


      .js-object-members{
        background-color:#f0f0f0; font-weight: bold;
      }

      .js-object-methods{
        background-color:#f0f0f0; font-weight: bold;
      }

      .js-object-no-entries{
        font-style: italic;
      }

      .js-object-keyword-void{
        font-style: italic; font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-requires{
        font-weight:bold; color:#970055;
      }

      .js-object-keyword-static{
        font-weight:bold; color:#970055;
      }

      .js-object-keyword-extends{
        font-weight:bold; color:#970055;
      }

      .js-object-keyword-constructor{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-prototype{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-control{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-view{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-app-component{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-app-frame{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-nav-container{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-element{
        font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-managed-object{
        font-weight:bold; color:#7F0055;
      }

      .js-object-variable{
         height:36px;overflow: hidden;
         border-bottom:solid 1px #f0f0f0; 
         position: relative;
      }

      .js-object-variable-group{
          margin-left:36px;
        }

      .js-object-code{
         height:36px;overflow: hidden; padding-left:36px;
         border-bottom:solid 1px #d0d0d0; 
         position: relative;
      }

      .js-object-code > .js-object-collapse{
        position: absolute;
        left:0px;
        
        width:36px;
        text-align: center;
        font-size: 20px;
        cursor:pointer;
        z-index: 199;
      }

      .js-object-code > .js-object-collapse-layer{
        display: block;
        left:36px;
        top:0;
        right:0;
        bottom:0;
        background-color:rgba(255,255,255,0.8);
        position: absolute;
        z-index: 99;
      }

      .js-object-code > .js-object-collapse > .fa{
        line-height: 36px;
      }

      .js-object-code > .js-object-collapse > .fa-chevron-circle-down{
        display: none;
      }

      .js-object-code > .prettyprint{
        margin:0; border-radius: 0; border:solid 1px #f0f0f0;
       }

      .js-object-code-visible{
         height:auto;
      }

      .js-object-code.js-object-code-visible > .js-object-collapse-layer{
          display:none;
      }
      
      .js-object-code.js-object-code-visible > .js-object-collapse > .fa-chevron-circle-right{
         display: none;
      }

      .js-object-code.js-object-code-visible > .js-object-collapse > .fa-chevron-circle-down{
         display: block;
      }

      .js-object-data-type{
        font-style: italic; font-weight:bold; color:#7F0055;
      }

      .js-object-keyword-public,
      .js-object-keyword-protected,
      .js-object-keyword-private{
        font-weight:bold; color:#C44855;
      }

      .js-object-function-parameter{
         color: #800080;
      }

/*
* END JS API Object
*/

/**
* START Various Stuff
* TODO
*/

pre.console{
    background-color:black;
    color:#f0f0f0;
}

.get-started-screenshot{
    max-width:100%;
    height:auto;
    margin-top:20px;
    margin-bottom:20px;
}

.table-app-json pre{
    font-size: 11px;
    overflow-x:scroll;
}

.definition-table{
    width:500px;
}

/**
* END Various Stuff
*/