@import url('https://fonts.googleapis.com/css?family=Roboto');

/********************************************************************************************************
		Colours
********************************************************************************************************/

/**
** brand #00BAB7
** light brand rgba(0, 186, 183, 0.1);
** accent #00BAB7
** light 
** gray 
** dark
**/


/*************************************************************************************************************
	General Clases
*************************************************************************************************************/
	
html, body {font-family: 'Roboto', sans-serif; font-size: 15px; background-color: #F5F8F6; color: rgba(0,0,0,0.8); -webkit-font-smoothing: antialiased; 	-moz-osx-font-smoothing: grayscale;}

body.sidebar-open {height: 100vh; overflow: hidden;}

/**
 * Font weights
 */
	a:hover, a:focus {color: inherit;}
	strong,.bold{font-weight: bold; }
	.light{font-weight: 300;}


/**
 * Link
 */
	a.link{ color: #00BAB7 }
	a.link:hover{}
	

/**
 * Display table
 */
	.display-t {display: table;width: 100%;height: 100%;}
	.display-t > .display-tc {display: table-cell;height: 100%;vertical-align: middle;width: 100%;}
	.display-t > .display-tc.aling-top {vertical-align: top}
	.display-t > .display-tc.aling-bottom {vertical-align: bottom}

/**
 * Imagen Holder
 */

	.img-holder{background-size: cover;background-repeat: no-repeat;background-position: center center;display: block;/* height: 100%; */}

/**
 * Borders
 */
	
/**
 * Buttons
 */
	button:focus{
		outline: 0;
	}
	.btn {
		border-radius: 0;
		cursor: pointer;
		padding: .75rem 1.5rem;
		font-size: 1.1rem; 
		font-weight: 500;
		text-transform: uppercase;
	}
	.btn-group-sm>.btn, .btn-sm{
		padding: .5rem .75rem;
	    font-size: .875rem;
	    line-height: 1.5;
	}

	.btn:focus, .btn.focus{
		outline: 0; 
		-webkit-box-shadow: none; 
		box-shadow: none; 
	}



	.btn-brand{background-color: #00BAB7;color: #fff;}
	.btn-white{background-color: #fff;color: #00BAB7; border-radius: 4px;}
	.btn-accent{background-color: #FF671F;color: #fff;}
	.btn-default{background-color: rgba(0,0,0,0.05);color: rgba(0,0,0,0.6);}


	
	.btn-brand:hover,
	.btn-brand:focus,
	.btn-brand.active{ 
		background-color: #FF671F; 
		color: #fff; 	
	}
	.btn-accent:hover,
	.btn-accent:focus,
	.btn-accent.active{ 
		background-color: #72A3DC; 
		color: #fff; 
		
	}
	.btn-default:hover,
	.btn-default:focus,
	.btn-default.active{
		background-color: rgba(0,0,0,0.05);
		box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
	}

	button.link {
		background-color: transparent;
		border: 0;
		color: #00BAB7;
		line-height: 1.4;
		padding: 5px;
	}
	button.link:hover,
	button.link:focus,
	button.link.active{
		color: rgba(0, 186, 183, 0.8);
	}
	
/**
 * Color Text
 */
	.color-brand {color: #00BAB7!important;}
	.color-accent {color: #FF671F!important;}
	.color-light {color: #72A3DC!important;}
	.color-gray {color: #4A4A4A!important;}
	.color-white {color: #FFFFFF!important;}
	.color-white a{color: #FFFFFF;}

/**
 * Background Color
 */
	.bg-brand {background-color: #00BAB7!important;}
	.bg-accent {background-color: #FF671F!important;}	
	.bg-light {background-color: #72A3DC!important;}
	.bg-gray {background-color: #D8D8D8!important;}
	.bg-dark {background-color: #003865!important;}	
	.bg-white {background-color: #FFFFFF!important;}



/**
 * Element :: Checkbox select
 */
	.checkbox-select .custom-control-indicator {
		border-radius: 0;
		border: 2px solid #00BAB7;
		background-color: #fff;
		outline: 0;
		transition: background .5s;
		width: 16px;
 		height: 16px;
 		display: block;
	}
	.checkbox-select .custom-control-input:focus~.custom-control-indicator{
		box-shadow: none;
	}

	.checkbox-select .custom-control-input:checked~.custom-control-indicator{
		transition: background .5s;
		background-color: #00BAB7;
	}

	.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
		background-size: 0%;
	}




/**
 * Element :: Btn Favorite
 */
	.btn-fav, .btn-unfav  {
		color: #00BAB7;
		background-color: transparent;
		border: 0;
		padding: 5px;
	}	
	.btn-fav .text, .btn-unfav .text {
		display: inline-block; margin-left: 5px; margin-right: 5px;
	}
	.btn-fav .fa, .btn-unfav .fa {
		font-size: 21px;
		transform: scale(1);
		transition: all .3s;
	}
	.btn-fav .fa:before {
		content:"\f006";
		transition: all .3s;
	}

	/*.btn-fav:hover .fa, .btn-unfav:hover .fa {transition: all .3s ease-in-out; transform: scale(1.2); }*/
	.btn-fav:active .fa, .btn-unfav:active .fa {transition: all .3s ease-in-out; transform: scale(.1); }
	

	

	.btn-unfav .fa:before {
		content:"\f005";
		transition: all .3s;
	}

	
	


/**
 * Form elements
 */
	
	.Select-placeholder,
	::-webkit-input-placeholder,
	.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	  color: #565a5c;
	  font-size: 14px;
	  font-weight: 300;
	}
	.Select-placeholder,
	::-moz-placeholder,
	.form-control::-moz-placeholder { /* Firefox 19+ */
	  color: #565a5c;
	  font-size: 14px;
	  font-weight: 300;
	  opacity: 1;
	}
	.Select-placeholder,
	:-ms-input-placeholder,
	.form-control:-ms-input-placeholder { /* IE 10+ */
	  color: #565a5c;
	  font-size: 14px;
	  font-weight: 300;
	}
	.Select-placeholder,
	:-moz-placeholder,
	.form-control:-moz-placeholder { /* Firefox 18- */
	  color: #565a5c;
	  font-size: 14px;
	  font-weight: 300;
	  opacity: 1;
	}
	
	.form-label {/* display: block; */font-size: 14px;color: rgba(0,0,0,0.3);}
	
	.form-control:focus {
		color: #495057;
	    background-color: #fff;
	    border-color: transparent;
	    outline: 0;
	    box-shadow: none;
	}

	.form-control{
		border-radius: 0;
		background-color: transparent;
		border-color: transparent;
		border-bottom-color: rgba(0,0,0,0.2);
		border-width: 1px;
	}
		
	.form-control:focus,
	.form-control:focus + .input-group-addon:not(:first-child) {
		border-bottom-color: rgba(0,0,0,0.4);
		border-width: 1px;
	}

	.form-control-static {
	    padding-top: .5rem;
	    padding-bottom: .5rem;
	    margin-bottom: 0;
	    line-height: 1.25;
	    border: 1px solid transparent;
	    border-bottom-color: rgba(0,0,0,0.2);
	    width: 100%;
	    color: rgba(0,0,0,0.4);
	    
	}
	.has-error .form-control,
	.has-error .form-control + .input-group-addon:not(:first-child) {
	    border-bottom-color: red;

	}

	.text-error {
		color: #f77777!important;
		font-size: 13px!important;
	}


/* 
* boxed-component
*/
	.boxed-component {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);
		margin-bottom: 20px;
		padding: 15px;
	}

/**
 * Badge Brand
 */
	.badge-brand, 
	.badge-watch {
		font-family: Roboto; cursor: pointer;
		position: absolute;top: 0;width: 40px;height: 40px;line-height: 1;padding: 9px 5px 0 5px;right: 15px;border-radius: 50%;text-align: center;box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);transform: translateY(-50%);background-color: #fff;color: #1ABC9C;white-space: pre-wrap;
	}
	.badge-brand *, 
	.badge-watch * { color:#1ABC9C }
	
	.badge-brand { right: 65px; }
	.badge-watch {}
	.badge-brand .text,
	.badge-watch .text { font-size: 9px; }




/**
 *  SVG Success / Error
 */
	svg.email-animated,
	svg.cross-error,
	svg.check-success {width: 100px; display: block; margin-left: auto; margin-right:  auto; }
	.cross-error .path,
	.check-success .path {stroke-dasharray: 1000; stroke-dashoffset: 0; }
	.cross-error .path.circle,
	.check-success .path.circle {-webkit-animation: dash 0.9s ease-in-out; animation: dash 0.9s ease-in-out; }
	.cross-error .path.line{stroke-dashoffset: 1000; -webkit-animation: dash 0.9s 0.35s ease-in-out forwards; animation: dash 0.9s 0.35s ease-in-out forwards; }
	.check-success .path.check {stroke-dashoffset: -100; -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards; animation: dash-check 0.9s 0.35s ease-in-out forwards; }
	.email-animated .path{stroke-dashoffset: 1000; -webkit-animation: email-animated 0.9s 0.35s ease-in-out forwards; animation: email-animated 0.9s 0.35s ease-in-out forwards; }

	@-webkit-keyframes dash {
	  0% {stroke-dashoffset: 1000; }
	  100% {stroke-dashoffset: 0; }
	}
	@keyframes dash {
	  0% {stroke-dashoffset: 1000; }
	  100% {stroke-dashoffset: 0; }
	}
	@-webkit-keyframes dash-check {
	  0% {stroke-dashoffset: -100; }
	  100% {stroke-dashoffset: 900; }
	}
	@keyframes dash-check {
	  0% {stroke-dashoffset: -100; }
	  100% {stroke-dashoffset: 900; }
	}

	@-webkit-keyframes email-animated {
	  0% {stroke-dashoffset: 745.74853515625; }
	  100% {stroke-dashoffset: 0; }
	}
	@keyframes email-animated {
	  0% {stroke-dashoffset: 745.74853515625; }
	  100% {stroke-dashoffset: 0; }
	}




/*************************************************************************************************************
	LAOUTS
*************************************************************************************************************/

/**
 * Laout :: Side Bar
 */
 	body {padding-top: 90px!important}
 	.container-has-sidebar .sidebar {
	     position: fixed;
	     top: 86px;
	     bottom: 0;
	     left: 0;
	     z-index: 99;
	     padding: 20px;
	     border-right: 1px solid #eee;
	     box-shadow:  1px 1px 1px 1px rgba(0,0,0,.1);
	     min-width: 320px;
	     max-width: 320px;
	     background-color: #fff;
	}
	

	.container-has-sidebar .main-content {/* margin-left: 320px; */}

	.main {padding-top: 20px;max-width: 2200px;margin-left: auto;margin-right: auto;width: 100%;}

	.container-has-sidebar .sidebar .toggle-filter{position: absolute;top: 0; right: -40px; display: none; font-size: 21px; border: 0;  width: 40px; height: 40px; color: #00BAB7; }

	@media(min-width: 1440px){
	.container-has-sidebar .main-content { margin-left: 320px; }

	}
	@media(max-width: 991px){
		.container-has-sidebar .sidebar {left: -320px; margin-right: 40px; transition: all .3s;}
		.container-has-sidebar .sidebar.open { left: 0px; transition: all .3s; }
		.container-has-sidebar .sidebar .toggle-filter{position: absolute;top: 10px;right: -40px;display: block;box-shadow: 1px 1px 1px 1px rgba(0,0,0,.1);}
		.container-has-sidebar .main-content {margin-left: 0px;}
	}
	@media(max-width: 575px){
		.container-has-sidebar .sidebar {width:100vw; left: -100% ;margin-right: 0;max-width: 100%;}
		.container-has-sidebar .sidebar.open .toggle-filter {display: none;}
	}



 /*************************************************************************************************************
	HTML COMPONENTS
*************************************************************************************************************/


/**
 * Componente :: header-app
 */

 	.header-app {
 		border-bottom: 1px solid #F2F2F2;
 		background-color: #fff;
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		z-index: 100;
 	}
	

	.nav-link {
		text-transform: uppercase;
		color: #535A5F;
		font-size: 14px;
		letter-spacing: 1px;
	}

/**
 * Componente :: navbar-main
 */


	
	.navbar-main {
		padding: 0;
		list-style: none;
	}
	.navbar-main .navbar-nav {
		
	}
	.navbar-main .navbar-nav .dropdown-menu{
		width: 100%;
	}
	.navbar-main .dropdown-menu .dropdown-item{
		position: relative;
		line-height: 40px;
		padding-left: 20px;
		padding-right: 20px;
		border-left: 1px solid #F2F2F2;
		background-color: transparent;
		overflow: hidden;
		color: #535A5F
	}
	.navbar-main .dropdown-menu .dropdown-item .fa {
		display: inline-block;
		margin-left: 5px;
		margin-right: 5px;
	}
		
	.navbar-main .navbar-nav .nav-link {
		position: relative;
		line-height: 70px;
		padding-left: 50px;
		padding-right: 50px;
		border-left: 1px solid #F2F2F2;
		background-color: transparent;
		overflow: hidden;
	}
	.navbar-main .navbar-nav .nav-link:before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0%;
		left: 0;
		background-color: rgba(0, 186, 183, 0.1);
		transform: translateY(100%);
		transition: all .5s ease-in-out;

	}

	.navbar-main .navbar-nav .nav-link.active:before,
	.navbar-main .navbar-nav .nav-link:active:before,
	.navbar-main .navbar-nav .nav-link:focus:before,
	.navbar-main .navbar-nav .nav-link:visited:before,
	.navbar-main .navbar-nav .nav-link:hover:before {		
		transform: translateY(0%);
		transition: all .5s ease-in-out;
	}


	.navbar-main .nav-link > span {
		line-height: 1.2;
	}

	.navbar-brand {
		/* background-color: #143539; */
		margin-right: 0;
		width: 320px;
		text-align: center;
	}

	.navbar-main .navbar-nav .nav-link .fa{ display: none; }

	#navbar-main-toggler {
		position: relative;
		height: 86px;
		line-height: 70px;
		padding-right: 180px;
		border-left: 1px solid #F2F2F2;
		background-color: #fff;
		overflow: hidden;
		width: calc(100% - 180px);
		font-size: 14px;
		text-transform: uppercase;
		}

	@media(max-width: 1200px){
		.navbar-brand {width: 180px;}

		.navbar-main .navbar-nav .nav-link {padding-left: 20px; padding-right: 20px; border-top: 1px solid rgba(0,0,0,0.05)}
		/*.navbar-main .navbar-nav .nav-link .fa{ font-size: 16px; display: inline-block; }*/
	/*	.navbar-main .navbar-nav .nav-link .text {position: absolute;left: 0;width: 100%;top: 10px;font-size: 10px;text-align: center;}*/
		.navbar-main .navbar-nav .nav-link .text {font-size: 12px;text-align: center;}
	}
	@media(max-width: 768px){
		
		.navbar-main{
			    position: relative;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: block;
	    -ms-flex-wrap: wrap;
	    flex-wrap: initial;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: initial;
	    padding: 0;
		}
	}
	@media(max-width: 575px){
		.navbar-brand {width: 140px;}
		#navbar-main {z-index: 1001}
		#navbar-main-toggler {
			height: 65px;
			padding-right: 140px;
			width: calc(100% - 140px);
		}
	}


/**
 * Componente :: Toggler
 */

	.navbar-expand .navbar-toggler {
		display: block; 
		position: relative;		
		width: 40px;
		height: 30px; 
		padding: 0; 
		z-index: 100;
	}

	.navbar-toggler .icon-bars{   
		 width: 38px; 
		 left: 0; 
		 height: 0px; 
		 background-color: #fff; 
		 margin-top: 15px; 
		 margin-bottom: 15px; 
		 position: absolute; 
		 top: 0px; 

	}
	.navbar-toggler .icon-bars:before,
	.navbar-toggler .icon-bars:after{
		content: ''; 
		position: absolute; 
		left: 0; 
		width: 100%; 
		height: 2px; 
		background-color: #fff;
	    transition: all .5s;
	}
	.navbar-toggler .icon-bars:before {
	    top: 0px;
	    bottom: 0;
	    transform: rotate(45deg);
	}
	.navbar-toggler .icon-bars:after {
	    bottom: 0px;
	    top: 0;
	    transform: rotate(-45deg);
	}

	.navbar-toggler.collapsed  .icon-bars {
	    height: 2px;
	    background-color: #535A5F; 	   
	}
	.navbar-toggler.collapsed .icon-bars:before, 
	.navbar-toggler.collapsed .icon-bars:after {
		background-color: #535A5F;
	}
	.navbar-toggler.collapsed .icon-bars:before{
		top: -12px; 
		transform: rotate(0deg);
	}
	.navbar-toggler.collapsed .icon-bars:after{
		top:initial; 
		bottom: -12px; 
		transform: rotate(-0deg);
	}






/**
 * Componente :: navbar-main-right
 */

	.navbar-main-right .list-inline {
		margin-bottom: 0;
		padding-right: 60px;
		position: relative;
		/* min-height: 40px; */
	}
	.navbar-main-right .list-inline-item {
		padding-left: 20px;
		padding-right: 20px;
		vertical-align: middle;
	}
	.navbar-main-right .list-inline-item .nav-link {
		color: #535A5F;
		
	}
	.navbar-main-right .list-inline-item .nav-link .fa {
		margin-right: 5px;
		opacity: 0;
		transform: translateX(100%);
		transition: all .5s;
	}
	.navbar-main-right .list-inline-item .nav-link:hover .fa {
		opacity: 1;
		transform: translateX(0%);
		transition: all .5s;
	}

	#navbar-collapse-toggler{
		position: absolute;
		right: 10px;
		top:25px;
		display: block!important;
		width: 40px;
	    height: 30px;
	    padding: 0;
	    z-index: 100;
	}

	@media(max-width: 575px){
		#navbar-collapse-toggler {
			top: 18px;
		}
	}

/**
 * Componente :: navbar-collapse
 */

	#navbar-collapse {
		position: fixed;
	    right: -350px;
	    height: 100vh!important;
	    width: 350px;
	    background: #123539;
	    top: 0;
	    padding: 4rem 1.5rem 4rem 1rem;
	    z-index: 99;	   
		transition: all .5s;
		min-height: 570px;
		overflow: auto;
	}
	#navbar-collapse.show {		
		display: block;
	    transform: translateX(-350px);
	    transition: all .5s;
	}

	#navbar-collapse .nav-link {
		color: #FFFFFF;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		font-weight: 300;
	}
	
	#navbar-collapse .nav-link.active,
	#navbar-collapse .nav-link:active,
	#navbar-collapse .nav-link:focus,
	#navbar-collapse .nav-link:hover {
		color: #00BAB7;
	}
	
	#navbar-collapse .nav-link .fa {
		opacity: 0;
		transform: translateX(-20px);
	    transition: all .5s;
	    padding-right: 5px;
	    width: 18px;
	}
	#navbar-collapse .nav-link.active .fa,
	#navbar-collapse .nav-link:active .fa,
	#navbar-collapse .nav-link:focus .fa,
	#navbar-collapse .nav-link:hover .fa {
		opacity: 1;
		transform: translateX(0px);
	    transition: all .5s;
	}

	#navbar-collapse .divider{
		width: 100%;
		height: 1px;
		background: rgba(0,0,0,0.4);
		display: block;
	}

	#navbar-collapse .navbar-footer { position: absolute; bottom: 1rem; }
	#navbar-collapse .navbar-footer .footer-logo { width: 130px; height: 25px; background: url('../img/logo-maileater-invert.png') center center; overflow: hidden; white-space: nowrap; text-indent: -1000px; vertical-align: bottom;}
	#navbar-collapse .navbar-footer a { text-decoration: underline;}

	.login-wrapper {max-width: 520px;margin: 0 auto;}
/**
 * Componente :: login-logo
 */
	.login-logo {text-align: center; margin-top: 20px; margin-bottom: 20px;}
/**
 * Componente :: login-register-view
 */

 	.login-register-view {background-color: #fff;border-radius: 5px; overflow: hidden;}

 	.login-register-view .nav {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
 	.login-register-view .nav .nav-item {-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center; }
 	.login-register-view .nav .nav-link {color: rgba(0,0,0,0.6); background-color: #DFDFDF; height: 55px; padding: 15px; border-color: transparent; text-transform: none; font-size: 18px; }
 	
 	.login-register-view .nav .nav-link.active {background-color: #fff; color: rgba(0,0,0,0.6); border-color: transparent; }
 	.login-register-view .nav a:not([href]):not(.active):hover, 
 	.login-register-view .nav a:not([href]):not(.active):focus{background-color: rgba(0,0,0,0.1); }
 	.login-register-view .nav a:not([href]):not([tabindex]):focus, 
 	.login-register-view .nav a:not([href]):not([tabindex]):hover{color: rgba(0,0,0,0.6);}

 	.login-register-view .tab-content {padding-left: 40px; padding-right: 40px; padding-bottom: 10px}
 	.login-register-view .user-form {}
 	.login-register-view .user-form .btn-brand{ border-radius: 10px; }

	 @media(max-width: 991px){
		.login-container { margin-top: -90px; }
	 }

	.login-footer {color: rgba(0,0,0,0.4); margin-top: 10px;}
	.login-footer li{display: inline-block; margin-right: 10px; margin-left: 10px;}
	.login-footer .link {color: rgba(0,0,0,0.4);}



	.login-register-notification {  text-align: center; }

	.login-register-notification .notification-header {padding-top: 20px;padding-bottom: 20px;background-color: rgba(0, 186, 183, 0.4); height: 140px;}
	.login-register-notification .notification-block { margin-top: 40px; margin-bottom: 40px; padding: 0 40px; color: rgba(0,0,0,0.4);}
	.login-register-notification .notification-block p{ font-size: 18px;  }
	.login-register-notification .notification-block h3{font-size: 18px;color: #13353a;font-weight: bold; margin-bottom: 40px;}
	.login-register-notification .notification-footer { padding-top: 20px; padding-bottom: 20px;  }
	.login-register-notification .notification-footer .link {font-size: 12px;  }


/**
 * Componente :: pagination
 */

 	.pagination { margin-right: 0; margin-top: 20px; margin-bottom: 20px; float: right; }
 	.pagination:after {content: '';display: table;height: 1px;clear: both;}
 	.page-item.active .page-link {background-color: #1ABC9C; color: #fff; border-color: #1ABC9C}
 	.page-item.disabled .page-link{background-color: transparent; opacity: .5;}
	.page-link{color: #1ABC9C; border: transparent; background-color: transparent; outline: 0;}
	.page-link:focus {box-shadow: none;}

/**
 * Componente :: results-list
 */
 	.results-list {margin-top: 20px;}
 	.results-list {margin-bottom: 100px;}


	.card{border-radius: 6px;}
/**
 * Componente :: Card Email
 */
	.card-email {width: 350px;height: 420px;  box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.1); margin: 1rem .5rem; padding-bottom: 40px; transition: all .3s; margin-left: auto; margin-right: auto;}
	.card-email:before,
	.card-email:after { position: absolute; content: ''; opacity: 0; }
	.card-email:before {top: 0px; right: 0px; bottom: 0px; left: 0px; border-top: 4px solid #1abc9c; border-bottom: 4px solid #1abc9c; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; border-radius: 6px; }
	.card-email:after {top: 0px; right: -1px; bottom: 0px; left: 0px; border-right: 4px solid #1abc9c; border-left: 4px solid #1abc9c; -webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; border-radius: 6px; }
	
	.card-email.selected:before,	
	.card-email.selected:after {opacity: 1; -webkit-transform: scale(1); /* transform: scale(1); */ -webkit-transition-delay: 0.15s; transition-delay: 0.15s; pointer-events: none; }

	/*.card-email.selected { border: 4px solid #00BAB7; transition: all .3s; }*/

	.card-email .card-header,
	.card-email .card-footer{position: relative; background-color: transparent; border: 0; padding: 0.5rem 1rem; }
	.card-email .card-header{padding-top: 1rem; padding-right: 80px; height: 80px;	}
	.card-email .card-header .actions {position: absolute; right: 0.4rem; top: 0.4rem;	}
	.card-email .card-header .actions .d-inline-block {vertical-align: middle; }
	.card-email .card-title { font-family: 'Montserrat', sans-serif; font-weight: bold; }
	.card-email .btn-favorite {padding: 0.2rem 0.3rem; border: 0; line-height: .6; font-size: 21px; color: #1ABC9C; }
	.card-email .btn-fav, .card-email .btn-unfav  { font-size: 21px; }
	.card-email	.checkbox-select {margin: 0.3rem; padding: 0.5rem; /* vertical-align: middle; */ }

	.card-email .card-image {text-align: center; height: 220px; overflow: hidden; margin-left: 60px; margin-right: 60px; }

	.card-email .card-footer-link {position: absolute; bottom: 0; left: 0; width: 100%;	}
	.card-email .card-footer-link a {display: block; height: 100%; width: 100%; background-color: rgba(0, 186, 183, 0.1); text-align: center; color: #00BAB7; padding-top: .7rem; padding-bottom: .7rem; font-size: 14px; font-weight: 300; transition: all .3s; }

	.card-email .card-footer-link a:active,
	.card-email .card-footer-link a:focus,
	.card-email .card-footer-link a:hover {text-decoration: none; background-color: #1ABC9C; color: #fff; transition: all .3s; }

	.card-email .card-info {padding: .5rem; font-size: 13px; height: 60px; width: 50%; }
	.card-email .card-info .label {color: rgba(0,0,0,0.3); text-transform: uppercase; font-size: 10px; }

	.card-item { flex: 0 350px; }
	.card-item a { color: inherit; text-decoration: none; }

	@media (max-width: 1600px) {
		.card-email {margin-left: auto; margin-right: auto;}
	}
	@media (max-width: 991px) {
		
		.card-email { width: 100%;}
		.card-item {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	}
	@media (max-width: 575px) {
		.card-item {-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
		.card-email {max-width: 350px; width: 100%;}

	}

/**
 * Componente :: Card Brand
 */
	.card-brand {max-width: 350px; width: 100%;height: 225px;border: 0;box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.1);margin: 1rem auto;/* padding-bottom: 60px; */}

	.card-brand .card-header,
	.card-brand .card-footer {background-color: transparent;border: 0;/* text-align: right; */}
	.card-brand .card-header {height: 15px; padding: 0;}
	.card-brand .card-header .title{font-size: 13px; padding: 0 15px; color: rgba(0,0,0,0.4); margin-top: 10px;  margin-bottom: 0 }
	.card-brand .card-footer {height: 40px;}
	.card-brand .card-block {height: 170px; display: table; width: 100%;}
	.card-brand .card-image {text-align: center;height: 100%; display: table-cell; vertical-align: middle; padding: 20px;}
	.card-brand .card-image a {display: block;}
	.card-brand .card-image a img { max-height: 130px;}
	.card-brand a {color: inherit; text-decoration: none;}

	.card-brand .category {color: rgba(0,0,0,0.4);font-size: 12px;/* display: inline-block; */margin-right: 10px;text-align: right;}

/**
 * Componente :: Card Payment
 */
 .card-payment {width: 380px; max-width: 100%; background: #FCFCFC; border-radius: 10px; font-size: 12px; height: 110px;}

 .card-payment .card-header {background-color: #00BAB7; font-size: 0; height: 10px; padding: 0; }
 .card-payment .card-footer {margin: 0 10px; border-top: 1px solid rgba(0,0,0,0.3); padding: 5px 10px; height: 28px; background: none;}
 .card-payment .card-footer a { cursor: pointer; }
 .card-payment .card-block {padding: 15px 10px; height: 72px; }

 .card-payment-add { border: 1px dashed #00BAB7; cursor: pointer; }
 .card-payment-add .card-block { height: 100%; color: #00BAB7; font-size: 12px; }
 .card-payment-add .card-block i { font-size: 30px; vertical-align: middle; margin-right: 5px;}


/**
 * Componente :: Sidebar Filte
 */

	.sidebar-filter {width: 100%;height: auto; overflow-x: hidden;overflow-y: auto;}
	.sidebar-filter fieldset{ margin-bottom: 40px; }
	.sidebar-filter .legend{ font-size: 14px; color: rgba(0,0,0,0.3); margin-bottom: 10px; }
	.sidebar-filter .fieldset-box {border:1px solid rgba(220, 224, 224, .2); box-shadow: 0px 1px 3px rgba(220, 224, 224, .5);padding: 0px;border-radius: 5px;max-height: 225px;}
	.sidebar-filter .fieldset-box .checkbox-group-wrapper {max-height: 160px;overflow: auto;}
	.sidebar-filter .checkbox-group .form-group {margin-bottom: 5px; font-size: 14px; }
	.sidebar-filter .input-filter .form-input{ width: 100%; display:block; border: 0; border-bottom: 1px solid  rgba(220, 224, 224, .8); outline: 0;}
	.sidebar-filter .input-search {margin: 0;}
	.sidebar-filter .input-search .form-input{ width: 100%; display:block; border: 0;  outline: 0; }

	@media ( max-height: 600px) {
		.sidebar-filter {height: calc(100% - 60px); margin-bottom: 20px}
	}

/**
 * Componente :: DateRangePicker
 */

	.DateRangePicker {width: 100%;}
	.DateRangePickerInput {width: 100%; border: 0;}
	.DateRangePickerInput__withBorder{border: 0!important}
	.DateRangePicker_picker{z-index: 10!important; position: static;}
	.DateRangePicker_picker {left: -15px!important; }


/* 
* Componente :: SearchForm
*/

	.search-bar-form{position: relative; z-index: 0; }
	.search-bar-text {display: inline-block; border: 0; width: 100%; padding-left: 50px; outline: 0;}
	.search-bar-label {margin: 0;width: 50px;text-align: center;position: absolute;left: 0;height: 36px;line-height: 36px;z-index: 10;}
	.search-bar-loadding{border-color: #fff!important}
	.search-bar-form,
	.search-bar-text,
	.search-bar-loadding{background-color: #fff;height: 36px;}

/* 
* Componente :: mail-detail-title
*/
	.mail-detail-title { margin-top: 20px; margin-bottom: 30px; font-family: 'Montserrat', sans-serif; font-weight: 500;}

/* 
* Componente :: mail-detail-aside
*/
	
	.mail-detail-aside .box-aside	{font-size: 14px; position: relative; } 
	.mail-detail-aside .box-aside .title {color: rgba(0,0,0,0.3); }
	.mail-detail-aside .box-aside .data {color: rgba(0,0,0,0.6); }

	.mail-detail-aside .brand-info .brand-info-image { text-align: center; }
	.mail-detail-aside .brand-info .badge-brand {}

	.mail-detail-aside .box-aside {}	
	.mail-detail-aside .box-aside .card-brand{ margin-left: 0; margin-right: 0; max-width: none; width: 100%; margin-top: 30px; margin-bottom: 30px; }	

	.mail-detail-aside .actions ul { margin-bottom: 0; }
	.mail-detail-aside .actions ul li{ display: block; margin: 10px auto }
	.mail-detail-aside .actions ul li button, 
	.mail-detail-aside .actions ul li a {display: block;padding: 5px;text-decoration: none;color: #00BAB7;border: 0;padding: 5px;cursor: pointer;}

	.mail-detail-aside .actions ul li button .text, 
	.mail-detail-aside .actions ul li a  .text{  display: inline-block; margin-left: 5px; margin-right: 5px; }
	.mail-detail-aside .actions ul li button .fa, 
	.mail-detail-aside .actions ul li a  .fa { display: inline-block; margin-left: 5px; margin-right: 5px; width: 25px; text-align: center; }

/* 
* Componente :: Nav Pills Brand
*/
	.nav-pills-brand .nav-link {background-color: transparent; border-radius: 0; padding: 8px 15px; cursor: pointer;}
	.nav-pills-brand a:not([href]):not([tabindex]):focus, 
	.nav-pills-brand a:not([href]):not([tabindex]):hover {
		color: #00BAB7;		
	}
	.nav-pills-brand .nav-link.active, .nav-pills-brand .show > .nav-link {background-color: transparent; color: #00BAB7; border-bottom: 3px solid #00BAB7; }

	@media (max-width: 767px){
		.nav-pills-brand { background-color: #F5F8F6; }
	}


/* 
* Componente :: Tabs
*/
	
	.tab-content {margin-top: 20px; margin-bottom: 20px; padding-left: 15px; padding-right: 15px }

/* 
* Page :: User Config
*/
	 
	.user-config {max-width: 900px;margin: 20px auto;padding:40px 30px;}
	.user-config { }
	.user-config .tabs .nav-link { color: #00BAB7; text-transform: none; letter-spacing: 0; }
	@media (max-width: 767px){
		.user-config {padding: 0; box-shadow: none;}
		.user-config .nav-pills-brand { background-color: #F5F8F6; padding-bottom: 20px; }
		.user-config .tab-content {border-radius: 5px; box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);margin-top: 0}
	}


/* 
* Componente :: User / Password form
*/
	.user-form,
	.password-form {padding: 30px 0px;}
	.user-form fieldset {margin-bottom: 30px;}
	.user-form .form-group  .input-group-addon:not(:first-child) > *,
	.password-form .form-group  .input-group-addon:not(:first-child) > * {opacity: 0; transition: all .3s; color: #00BAB7}
	.user-form .form-control:focus + .input-group-addon:not(:first-child) > *,
	.password-form .form-control:focus + .input-group-addon:not(:first-child) > * {opacity: 1; transition: all .3s;}
	.user-form .form-group {margin-bottom: 30px;}

	form .message:not(:empty){padding: 15px 30px;color: #3d3d3d; margin-top: 20px; background-color: #F5F8F6}
	



/* 
* Componente :: Pricing List 
*/

	.pricing-list {padding: 60px 0; list-style: none;}

	
	.pricing-list .pricing-wrapper {box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.04);border-radius: 5px;border-top: 15px solid #00BAB7;padding-top: 15px; transition: all .3s; margin-top: 1rem; margin-bottom: 1rem; margin-left: 1rem; margin-right: 1rem}
	.pricing-list .pricing-wrapper.selected  {box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.02); border: 2px solid #00BAB7;border-top: 15px solid #00BAB7; }
	.pricing-list .pricing-wrapper.selected,
	.pricing-list .pricing-wrapper.selected:hover {transform: scale(1.1); transition: all .3s}
	.pricing-list .pricing-wrapper:hover{transform: scale(1.05); transition: all .3s}

	.pricing-list .pricing-header {padding-left: 15px; padding-right: 15px;}
		.pricing-list .pricing-desc { font-size: 12px; color: rgba(0,0,0,0.6); text-align: center; }
		.pricing-list .pricing-desc:after { content: ''; height: 1px; width: 80%; background-color: rgba(0,0,0,0.6); margin-top: 20px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; }

		.pricing-list .price { font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: center; font-size: 80px; color: #000; margin-top: 20px; margin-bottom: 20px; }
		.pricing-list .price .value { font-weight: normal; }
		.pricing-list .price .currency {font-weight: 300;}
	.pricing-list .pricing-body {}
		.pricing-list .pricing-features { list-style: none; padding: 0; margin:0; text-align: center; }
		.pricing-list .pricing-features li {padding-top: 10px; padding-bottom: 10px;}
		.pricing-list .pricing-features li:nth-of-type(2n+1) {background-color: rgba(0, 0, 0, 0.02); }
	.pricing-list .pricing-footer { padding-top: 30px; padding-bottom: 30px; text-align: center; }
	.pricing-list .pricing-footer .btn { width: 70%; border-radius: 5px; }

	@media screen and (max-width: 767px) {
		.pricing-list {padding: 30px 0;}
		.pricing-list .pricing-wrapper.selected,
		.pricing-list .pricing-wrapper.selected:hover {transform: scale(1); transition: all .3s}
		.pricing-list .pricing-wrapper:hover{transform: scale(1); transition: all .3s}
		.pricing-list .price { font-size: 40px; }

	}

/* 
* Componente :: User Invoices 
*/


	.user-invoices { padding: 30px 0; }
	.user-invoices .boxed-component{ padding: 0; }

	@media screen and (max-width: 575px) {
		.user-invoices {box-shadow: none;margin-bottom: 0;}
		.user-invoices .table {border: 0; }
		.user-invoices .table thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
		.user-invoices .table tr {border-bottom: 3px solid #ddd; display: block; margin-bottom: 1em; }
		.user-invoices .table td {border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right; }
		.user-invoices .table td:before {content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; }
		.user-invoices .table td:last-child {border-bottom: 0; }
	}

/* 
* Componente :: Screenshot Container
*/
	.screenshot-container{ text-align: center; }

/* 
* Componente :: code-html
*/
	.code-html { position: relative;  }
	.code-html .notification{ position: absolute; top: -40px; width: 100%; padding: 5px 15px; background-color: #F5F8F6; color: rgba(0,0,0,0.6); }
	.code-html .btn-copy{ position: absolute; right: 10px; top: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); color: rgba(0,0,0,0.4); font-size: 18px; padding: 8px 15px; }
	.code-content { margin-top: 50px }
	

/* 
* Componente :: Notification Download
*/
	.notification-download {position: fixed;width: calc(100% - 320px);bottom: 0;padding: 15px 30px;right: 0;background-color: #1ABC9C;color: #fff;font-size: 18px;vertical-align: middle;z-index:10;}

	.notification-download .btn-download-code { padding: 8px 15px 5px 15px; font-size: 13px;  }
	.notification-download .btn-download-code .fa {display: inline-block; margin-right: 5px; margin-left: 5px;}

	.notification-actions {position: fixed;width: calc(100% - 320px);top: 86px;padding: 8px 30px;right: 0;background-color: #f5f8f6;color: rgba(0,0,0,0.4);vertical-align: middle;z-index:10;box-shadow: 0 2px 4px 1px rgba(0,0,0,0.1);z-index: 0;}
	
	.notification-actions .btn {font-size: 12px; margin-left: 10px; }

	@media screen and (max-width: 767px) {
		.notification-download { width: 100%; }
	}

/* 
* Animations 
*/
	.list-item-appear {
	  opacity: 0.01;
	}

	.list-item-appear.list-item-appear-active {
	  opacity: 1;
	  transition: opacity .5s ease-in;
	}

	.list-item-enter {
	  opacity: 0.01;
	  transform: translate(0, 1em);
	}

	.list-item-enter.list-item-enter-active {
	  opacity: 1;
	  transition: opacity 500ms ease-out, transform 500ms ease-out;
	  transform:translate(0,0);
	}

	.list-item-leave {
	  opacity: 1;
	  transform: translate(1em, 0);
	}

	.list-item-leave.list-item-leave-active {
	  opacity: 0.01;
	  transition: opacity 300ms ease-in, transform 300ms ease-in;
	  transform:translate(-5em, 0) scale(0,0);
	}
/* 
* Componente :: No Results
*/

	.no-results {height: 60vh;width: 100%;text-align: center;}
	.no-results h2 {margin-top: 20px;margin-bottom: 40px;font-weight: 200;color: #00bab7;font-size: 60px;}
	.no-results h5 {margin-top: 40px; margin-bottom: 20px; font-weight: bold}
	.no-result-image {
		width: 134px;
	    height: 63px;
	    background-image: url('../img/no-results-map.png');
	    animation: no-result-image 6s steps(10) infinite;
	    margin-bottom: 0px;
	    margin-left: auto;
	    margin-right: auto;
	    animation-delay: 0s;
	    opacity: 1;
	}
	@keyframes no-result-image {
	    0% { background-position-x: 0px;  }	    
	    100% {  background-position-x: -1340px; }
	}

	@media (max-width: 991px){
		.no-results h2{font-size: 40px; }
		.no-results h5{font-size: 18px; }
	}


/* 
* Componente :: Nprogress 
*/
	#nprogress {pointer-events: none; }
	#nprogress .bar {background: #00bab7; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 3px; }
	/* Fancy blur effect */
	#nprogress .peg {display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #00bab7, 0 0 5px #00bab7; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); }
	/* Remove these to get rid of the spinner */
	#nprogress .spinner {display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; }
	#nprogress .spinner-icon {width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #00bab7; border-left-color: #00bab7; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; }

	.nprogress-custom-parent {overflow: hidden; position: relative; }
	.nprogress-custom-parent #nprogress .spinner,
	.nprogress-custom-parent #nprogress .bar {position: absolute; }

	@-webkit-keyframes nprogress-spinner {
	  0%   { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}
	@keyframes nprogress-spinner {
	  0%   { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}


/**
* Dummy class para evitar que Chrome quite cosas del CSS
* Y si las quita, que las quite de aqui
*/
	.dummy-no-me-toques-chrome {}
	@media screen and (max-width: 1600px) {
		.dummy-no-me-toques-chrome{
			height: 100%;
			height: 100%;
			height: 100%;
			height: 100%;
			height: 100%;
		}
	}