.chat-bar{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 16;
}

#container.aside-in .chat-bar{
	width: calc(100% - 255px);
}

#container.mainnav-in .chat-bar{
	width: calc(100% - 220px);
	left: 220px;
}

.chat-bar .panel-title,
#chat-mobile .panel-title{
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.chat-bar .panel-title.write,
#chat-mobile .panel-title.write{
	line-height: 35px;
    height: 50px;
}

.chat-bar .panel-heading .onwrite,
#chat-mobile .panel-heading .onwrite{
	position: absolute;
	font-size: 10px;
	bottom: 7.5px;
	left: 20px;
	display: none;
}

#container.recipe-in #aside-container{
	position: fixed !important;
}

/**/

#container.aside-in .chronometer-container{
	right: 165px !important;
}

#container.mainnav-in .back-recipe-container{
	left: 235px !important;
}


/*Update Chat*/

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loading-chat > span{
	-webkit-animation:spin 2s linear infinite;
	-moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}

.gi-5x{font-size: 1.2em;}

/**/

@media (max-width: 320px){
	.chat-bar > div{
		display: none !important;
	}
}

@media (max-width: 559px){
	.chat-bar > div{
		display: none !important;
	}
	#container.aside-in .chat-bar {
	    width: calc(100% - 60px);
	}
	#chat-mobile{
		position: fixed;
		top: 80px;
		right: 60px;
		left: 0;
		width: calc(100% - 65px);
		height: calc(100% - 60px);
		background-color: black;
		z-index: 1052;
	}
	#chat-mobile .panel{
		position: absolute;
		width: 100%;
		margin: auto;
		bottom: 20px;
	}
	#chat-mobile .panel .nano{
		height: calc(100vh - 238px) !important;
	}
	#chat-mobile .panel .speech{
		font-size: 11px;
		padding: 5px 10px !important;
	}
	#chat-mobile .panel .media-left{
		padding-right: 5px;
	}
	#chat-mobile .panel .media-right{
		padding-left: 5px;
	}
	#chat-mobile .panel .media-body{
		padding: 0px 5px;
	}
	.speech-right>.speech:before {
	    left: auto;
	    right: 0;
	    border-top: 7px solid transparent;
	    border-bottom: 7px solid transparent;
	    border-left: 7px solid #ffdc91;
	    border-right: 0;
	    margin: 7px -6px 0 0;
	}
	.speech:before {
	    content: "";
	    display: block;
	    position: absolute;
	    width: 0;
	    height: 0;
	    left: 0;
	    top: 0;
	    border-top: 7px solid transparent;
	    border-bottom: 7px solid transparent;
	    border-right: 7px solid #b7dcfe;
	    margin: 7px 0 0 -6px;
	}
	#chat-mobile .panel .media-body .speech-time{
		margin-top: 10px;
	}
	#chat-mobile .panel .img-sm{
		width: 25px;
    	height: 25px;
	}
	#chat-mobile .panel .panel-footer .chat-input{
		padding: 5px;
	}
	.chat-send{
		padding: 4.5px 3px 4.5px 4px !important;
	}
	.chat-send i{
		font-size: 10px;
	}
}

@media (max-width: 767px){
	#container.aside-in .chat-bar {
	    width: calc(100% - 60px);
	}
	#container.aside-in .chronometer-container {
	    right: -31.8px !important;
	}
}

@media (min-width: 560px){
	.chat-bar > div{
		display: none;
	}
	.chat-bar > div:nth-child(1){
		display: block;
	}
}

@media (min-width: 992px){
	.chat-bar > div{
		display: none;
	}
	.chat-bar > div:nth-child(1),
	.chat-bar > div:nth-child(2){
		display: block;
	}
}

@media (min-width: 1200px){
	.chat-bar > div{
		display: none;
	}
	.chat-bar > div:nth-child(1),
	.chat-bar > div:nth-child(2),
	.chat-bar > div:nth-child(3){
		display: block;
	}
}

@media screen and (min-width: 320px) and (max-width: 767px){
	#container #aside-container{
		width: 65px !important;
	}
	#container #aside-container #asd-tab-1 > p,
	#container #aside-container .media-body{
		display: none !important;
	}
}

.turnDeviceNotification{
	display: none;
}

@media screen and (min-width: 320px) and (max-device-width : 768px) and (orientation:landscape) and (min-aspect-ratio: 13/9){
	.turnDeviceNotification {
		position:fixed;
		top: 0;
		left:0;
		height:100vh;
		width:100%;
		display: block;
		z-index: 99999;
		background-color: black;
	}
	.turnDeviceNotification #containerNotification{
		position: absolute;
		width: 100%;
		top: calc(50% - 76px);
		height: 152px;
	}
	#container{
		display: none;
	}
	.text-xxl{
		font-size: 10em !important;
	}

	.turnDeviceNotification #containerNotification #screen-rotation{
	    -webkit-animation:spin 1.5s linear infinite;
	    -moz-animation:spin 1.5s linear infinite;
	    animation:spin 1.5s linear infinite;
	}

	@-moz-keyframes spin { 100% { -moz-transform: rotate(45deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(45deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }
}


#aside-container ul.nav{
	position: fixed;
    z-index: 1;
}

#aside-container #aside .tab-content {
    margin-top: 44px;
}

.badge:not(:empty).badge-icon{
    width: 1.4em;
    height: 1.4em;
    font-size: .9em;
    text-align: center;
    padding: 2px 2px;
    color: white !important;
    font-size: .9em !important;
}

#container.mainnav-in a.mainnav-toggle i.material-icons,
#container.mainnav-lg a.mainnav-toggle i.material-icons,
#container.aside-in .navbar-aside-icon i.material-icons{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform:rotate(360deg);
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#container.mainnav-out a.mainnav-toggle i.material-icons,
#container.mainnav-sm a.mainnav-toggle i.material-icons,
#container:not(.aside-in) .navbar-aside-icon i.material-icons{
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform:rotate(0deg);
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#container .navbar-aside-icon i.material-icons,
#container a.mainnav-toggle i.material-icons,
#container a.play-recipe i.material-icons
{
	margin-top: 9px;
	font-size: 18px;
}
#container #dropdown-user i.material-icons{
	margin-top: 7px;
	font-size: 22px;
}
#container.mainnav-in a.mainnav-toggle i.material-icons:after,
#container.mainnav-lg a.mainnav-toggle i.material-icons:after,
#container.aside-in .navbar-aside-icon i.material-icons:after{
	content: "\E14C" !important;
}
#container:not(.aside-in) .navbar-aside-icon.new-message i.material-icons:after{
	-webkit-animation:message 1s linear infinite;
	-moz-animation:message 1s linear infinite;
	animation:message 1s linear infinite;
}
#container:not(.aside-in) .navbar-aside-icon i.material-icons:after{
	content: "\E0CB" !important;
}
#container.mainnav-out a.mainnav-toggle i.material-icons:after,
#container.mainnav-sm a.mainnav-toggle i.material-icons:after{
	content: "\E5D2";
}

@-moz-keyframes message { 50% { content: "\E625"; } 100% { content: "\E0CB"; }}
@-webkit-keyframes message { 50% { content: "\E625"; } 100% { content: "\E0CB"; } }
@keyframes message { 50% { content: "\E625"; } 100% { content: "\E0CB"; } }

.position-relative{
    position: relative;
  }
.master-loading{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 100;
}

.loading-container {
    position:fixed;
    top: 0;
    left:0;
    height:100vh;
    width:100%;
    display: block;
    z-index: 99999;
    background-color: rgba(0,0,0,0.8);
  }

  .loading-container #containerNotification{
    position: absolute;
    width: 100%;
    top: calc(50% - 76px);
    height: 152px;
  }
  
  .text-xxl{
    font-size: 10em !important;
  }

  .master-loading .content-loading{
  	display: flex;
  	width: 100%;
  	height: 100%;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	align-self: center;
  }

  .loading-container #containerNotification #screen-rotation,
  .master-loading #screen-rotation{
      -webkit-animation:spin 2s linear infinite;
      -moz-animation:spin 2s linear infinite;
      animation:spin 2s linear infinite;
  }

  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }}

  /*Animacion aside container*/

  #container #aside-container{
  	-webkit-transition: right .3s;
  	-moz-transition: right .3s;
    transition: right .3s;
  }

  #container #mainnav-container{
  	-webkit-transition: left .3s;
  	-moz-transition: left .3s;
    transition: left .3s;
    z-index: 10;
  }