html {
  position: relative;
  min-height: 100%;
    // -webkit-user-select: none;
    // -webkit-touch-callout: none;
}
body {
  margin-bottom: 60px;
}
.ae-locale-strings{
	display:none;
}
.ae-locale-strings li{
	display: none;
}
a.iqm,
a.iqm:hover,
a.iqm:visited{
	color:inherit !important;
}

/* Styling for announcement banner */
#notice{
	background-color: yellow;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
}


.tal {
  text-align: left;
}

.cc-window {
  position: absolute;
  z-index: -999;
  opacity: 0;
}


.ae-sidebar-wrapper{
	position: relative;
}
.ae-sidebar{
	position: absolute;
	background-color: green;
	top:0;
	bottom:0;
	left:0;
	right: 0;
	height: 300px;
	border:3px solid black;
}

.toggle-group .btn.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.toggle-group .btn.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4
}

.toggle-group .btn {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 17px;
}
.toggle-group .btn.btn-primary {
    color: #fff;
    background-color: #4ec9d5;
    border-color: #00b0cf;
}



span.locale {
    display: inline-block;
    color: #fff;
    border: 1px solid #4EC9D5;
    padding: 3px 5px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color:#4EC9D5;
    border-radius: 2px;
    line-height: 1.4em;
}

.ae-lang.active{
	// color:red;
}
.ae-lang.active i.check{
	display:inline;
}
.ae-lang i.check{
	display:none;
	color:#4EC9D5;
}

.navbar{
	margin-bottom: 0;
}
.ae-intro p{
	margin-bottom: 0;
	background-color: #F5F5F5;
	padding: 6px;
	line-height: 1.2em;
	border-bottom:1px solid #EAEAEA;
}
.ae-intro .alert-link{
	font-weight: 700	;
	text-decoration: underline;
}
.ae-intro.well{
	padding:10px;
}
.ae-advise{
	color:#333;
}

.simulator .title h1{
	// margin-top: 0;
}
.ae-emphasis{
	letter-spacing: -0.05px;
	font-family: 'amazon_emberbold';
}
.wrap_recaptcha{
	height: 76px;
}
.control-label{
	color:#848484;
}
.form-text{
	margin:2em 0;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f8f8f8;
  font-size: 0.9em;
  border-top: 1px solid #EAEAEA;
}
.navbar-header{
	height: 76px;
}
.navbar-default .navbar-toggle{
	margin-top: 20px;
}
img.echosim-logo{
	width: 202px;
	height: 50px;
	margin-top: -3px;
}
.echosim-menu{
	margin-top: 10px;
}
.ae-login{
	margin-top: 2em;

}

/* amz login button updates */
.ae-login a.btn{
	margin:0;
	padding: 0;
	border:0;
	background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_195x46.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 195px;
	/*width: 221px;*/
	/*height: 46px;*/
	height: 47px;
	display:inline-block;
}
.ae-login a.btn:active{
	background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_195x46_pressed.png);
}
.ae-login a.btn span{
	display:none;
}
.ae-light{
	font-family: 'amazon_emberlight', sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
}

.ae-bold{
	font-family: 'amazon_emberbold', sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
}
.ae-info{
	letter-spacing: 0.1px;
}
.ae-log-out{
	font-size: 1.3em;
	padding-bottom: 1em;
	letter-spacing: 0;
}

.text-muted a{
	color:#777 !important;
}
.container .text-muted {
  margin: 20px 0;
}


.simulator{
	position: relative;


}
.echo-btn{
	background-color: gray;
	border-radius: 50%;
	text-align: center;
	width: auto;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	display:flex;
	align-items:center;
	z-index: 2;
	border:2px solid #fff;
	box-shadow: 0px 8px 42px -10px rgba(46,46,46,1);

}

.subtitle h3{
	margin-top: 0;
	font-size: 1.2em;
	color:grey;
	font-weight: normal;
}
.subtitle img{
	width: 275px;
	height: 32px;
	margin-bottom: 1em;
}
.title img{
	width: 295px;
	height: 31px;
	margin-bottom: 1em;
}
img.am-alexa-logo{
	width: 140px;
	height: 30px;
	margin-top: -3px;
}


.app-state{
	position: relative;
	display:inline-block;
	background-color: red;
	z-index: 16;
}

.state-text{
	position:absolute;
	top:8px;
	right:125%;
	width: 120px;
	border-bottom: 1px solid #dedede;
	text-transform: capitalize;
}
.state-text h4{
	font-weight: normal;
	color:#8c8c8c;
	font-size: 1.1em;
	font-style: italic;
}

.state-ready{
	background-color: #4ec9d5;
}
.state-listening{
	background-color: #4ec9d5;
}
.state-processing{
	background-color: #2841f6;
}
.state-speaking{
	background-color: green;
}
.state-error{
	background-color: #4ec9d5;
}

.btnBackground{
	width: 80px;
	z-index: 1;
}
#mic{
	position: absolute;
	top:0;
	height: 80px;
}
.echo-btnbg{
	position:absolute;
	top:0;
	border-radius: 50%;
	text-align: center;
	width: auto;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	display:flex;
	align-items:center;
}

.step1{
	opacity: 0.1;
}
.step2{
	opacity: 0.2;
}
.step3{
	opacity: 0.3;
}
.step4{
	opacity: 0.4;
}
.step5{
	opacity: 0.5;
}
.step6{
	opacity: 0.6;
}
.echo-btnbg{
	opacity:0.2 !important;
}

#InteractionTrigger{
	display:none;
}

.rings-wrapper{

    width: 210px;
    visibility: hidden;
    height: 0;
    position: relative;
    left: 50%;
    margin-left: -104px;
    top: -87.5px;
	z-index: 2;
}

.wake,.sleep{
	position: relative;
}

.r_left{
	/*background-color: red;*/
}
.rings{
	position:relative;
	position:absolute;
	top:0;
	top:25.5px;
	left:50%;
	margin-left: -105px;

	/*-webkit-backface-visibility: hidden !important;*/

    /*-webkit-perspective: 150px; */
    /*perspective: 150px;	*/
}
.ring{
	/*position: absolute; top:0;*/
	position: absolute;
	top:0;
	-webkit-backface-visibility: hidden !important;

    /*-webkit-transform: rotateX(77.5deg); */
    /*transform: rotateX(77.5deg);	*/
}
.ring-listening{
	position: relative;
}
.ring-listening .r_right{
	position: absolute;
	top:0;
	left:0%;
}


.ring.ring-slide{
	position: absolute;
	top:0;
}


.ring.ring-speaking{
	background-image: url(/static/assets/img/svg/speaking_bg.svg);
	background-repeat: no-repeat;
}


.tutorial{
	margin-top: 2em;
}
.tu-label{
	padding-bottom: 2em;
	padding-top: 0.5em;
}

.btn-icon{
	width: 80px;
	height: 80px;
	background-image: url(/static/assets/img/mic.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	display:inline-block;
	cursor:pointer;
}

.ring-speaking{
	z-index: 13;
}
.ring-processing{
	z-index: 12;
}
.wake{
	z-index: 11;
}
.ring-ready{
	z-index: 10;
}


.amazon-echo{
	position: relative;
	margin-top: 100px;
	user-select:none;
	-webkit-user-select: none !important;

}





.full-echo{
	background-image: url(/static/assets/img/full_echo1.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: relative;
	height: 695px;
	z-index: 1;
	z-index: 15;
}
.amazon-echo img{
	display: inline-block;
	position: relative;
	z-index: 3;
}
.echo-btn .btn-icon{
	margin:0 auto;
	user-select:none;
	-webkit-user-select: none !important;

}

.ae-panels #right-pane{
	display:none;
}

.ae-panels.opened #right-pane{
	display:block;
}

#right-pane{
	// min-height: 900px;
	position: relative;
	// background-color: #fefff2;
	background-color: #fff;
	border-left: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	overflow-y: scroll;
}

#ae-console-container{
	position: relative;
}
.toast-top-right{
	top: 12px;
	right: 12px;
	left: 0;
	padding: 8px;
	padding-right: 12px;
}

#toast-container {
	// position: absolute !important;
	position: relative !important;
	z-index: 20;
	width: 100% !important;
}

#toast-container > div.toast {
    background-image: none !important;
    background-color: #f8f8f8;
    color:#333333;
    // font-family: monospace;
    font-size: 0.9em;
    padding: 15px 15px 15px 15px;
}


#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  opacity: 1;
}


#toast-container > div:hover {
  opacity: 1;
  cursor: initial;
}

#toast-container > div.toast{
	width: 100% !important;
	margin-bottom: 0;
	border-bottom: 1px solid #eaeaea;
	border-radius: 0;
}


.toast-close-button{
	color: #b3b3b3;
	line-height: 16px;
	right: 0;
	top: 0;
	font-size: 27px;
	margin-top: -2px;
}

#toast-container > div.toast h4{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 16px;
	font-size: 14px;
	margin-left: 20px;
	color: #808080;
	display:inline-block;
	clear:both;
}
#toast-container > .toast:before {
    position: relative;
    // font-family: 'Glyphicons Halflings';
    font-family: 'FontAwesome';
    font-size: 16px;
    line-height: 16px;
    float: left;
    margin-left: 0;
    color: #808080;
    padding-right: 0;
    margin-right: 0;

}
#toast-container > div.toast pre{

    display: block;
    padding: 9.5px;
    margin: 0px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin-top: 6px;
    overflow-y: hidden;
}



.toast-message a,
.toast-message label {
  color: #808080;
  font-weight: normal;
}
.toast-message a:focus{
	color: #808080;
	text-decoration: none;
}
.toast-message a:hover, .toast-message a:focus {
  color: #3a9ba5;

}

#toast-container > .toast-warning:before {
    content: "\e013";
}
#toast-container > .toast-error:before {
    content: "\e014";
}
#toast-container > .toast-info:before {
    content: "\f05a";
}
#toast-container > .toast-success:before {
    content: "\f028";
}
#toast-container > .toast-locale:before {
    content: "\e135";
}
#toast-container > .toast-expect:before {
    content: "\f254";
}


#toast-container > .toast-info.echosim-ready:before {
    content: "\f05a";
}


#toast-container > .toast-info.speechsynthesizer-speechstarted:before {
    content: "\f028";
}
#toast-container > .toast-info.speaker-setmute:before {
    content: "\f026";
}
#toast-container > .toast-info.audioplayer-play:before {
    content: "\f144";
}
#toast-container > .toast-info.speechrecognizer-recognize:before {
    content: "\f130";
}

#toast-container > .toast-info.speechrecognizer-expectspeech:before {
    content: "\f250";
}

#toast-container > .toast-info.settings-settingsupdated:before {
    content: "\f013";
}

#toast-container > .toast-info.echosim-ready:before {
    content: "\f121";
}

#toast-container > .toast-info.echosim-refresh:before {
    content: "\f021";
}



.toast pre code{
	padding: 0.5em;
}


// .toast-success {
//   background-color: #51A351;
// }
// .toast-error {
//   background-color: #BD362F;
// }
// .toast-info {
//   background-color: #2F96B4;
// }
// .toast-warning {
//   background-color: #F89406;
// }
// .toast-locale {
//   background-color: green;
// }



.hljs-literal {
  color: #FF5722;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #3a9ba5;
}



/* Develop Console Panel Animation */

.row-console div {
    // height: 200px;
    -webkit-transition: width 0.8s ease, margin 0.8s ease;
    -moz-transition: width 0.8s ease, margin 0.8s ease;
    -o-transition: width 0.8s ease, margin 0.8s ease;
    transition: width 0.8s ease, margin 0.8s ease;
}

.row-console div + div {
    margin-left: 0;
}

.console-actions {
    padding: 1em;
    background-color: #f5f5f5;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.echosim-refresh pre a {
    color: green;
    text-decoration: underline;
}

.console-cnt{
	clear:both;
}

.console-time{
	color: #afafaf;
	padding-left: 8px;
	display: inline-block;
	font-size: 0.9em;
	float: right;
	padding-right: 8px;
}
.cc-revoke,.cc-window {
    position: fixed;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Helvetica,Calibri,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    z-index: 9999;
}

.navbar-brand{
	padding-right:0;
}



.ae-card-info{
    display: block;
    padding: 15px;
    margin: 0px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    // word-break: break-all;
    // word-wrap: break-word;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin-top: 6px;
    overflow-y: scroll;
    max-height: 300px;
    text-align: left;
}
.ae-card-info.ae-weather-template ul.ae-week {
	list-style: none;
	padding-left: 0;
}
.ae-card-info.ae-weather-template ul.ae-week li{
	margin-left: 0;
}

#toast-container > div.toast h3.ae-card-info-title,
#toast-container > div.toast h4.ae-card-info-subtitle{
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 4px;
}
#toast-container > div.toast h4.ae-card-info-subtitle{
	font-style: italic;
}
#toast-container > div.toast h3.ae-card-info-title{
	font-size: 1.5em;
	font-weight: bold;
}
.ae-card-info-content img.pull-right{
	margin-left: 8px;
}

.ae-weather-high-temp{

}
.ae-weather-low-temp{
	color:grey;
}
span.ae-weather-day{
	font-weight: bold;
}
.ae-list-template1 ul li,
ul.ae-current-weather{
	border-bottom: 1px solid #f8f8f8;
	margin-top: 8px;
}
.ae-list-template1 ul li{
	line-height: 1.2em;
	padding-top: 4px;
	padding-bottom: 4px;
}
span.ae-current-weather-title{
	font-size: 3.5em;
	font-weight: bold;
	color:grey;
}
.highlow-wrapper{
	border-left:1px solid #929292;
	padding-left: 8px;
	font-size: 1.3em;
}

span.left-textfield{
	color:grey;
}






// Bootstrap 7 Columns
@media (min-width: 768px){

	.container {
	   	width: 100% !important;
		border: 1px solid green !important;
	}

	.seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 {
		width: 100%;
		*width: 100%;
	}

}

@media (min-width: 992px) {


  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }




}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}