/** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
/** Line-chart and donut-chart made by @kseso http://codepen.io/Kseso/pen/phiyL **/


/************************************ FONTS ************************************/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
@font-face {
	font-family: 'icomoon';
	src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot');
	src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
		url('http://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
li {
  cursor: pointer;
}
.icon-cloudy:before {
	content: "\e60f";
}
.material-pink {
  color: #E91E63;
}
.icon-sun:before {
	content: "\e610";
}
.icon-cloudy2:before {
	content: "\e611";
}
/************************************* END FONTS *************************************/

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

body {
	background: #1f253d;
}

ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

h1 {
	font-size: 23px;
}

h2 {
	font-size: 17px;
}

p {
	font-size: 15px;
}

a {
	text-decoration: none;
	font-size: 15px;
}
	a:hover {
		text-decoration: underline;
	}

h1, h2, p, a, span{
	color: #fff;
}
	.scnd-font-color {
		color: #9099b7;
	}

.input-container {
	position: relative;
}
.record_block {
  display: inline-block;
  float: left;
  min-height: 160px;
  padding: 10px;
}
	input[type=text]{
		width: 260px;
		height: 50px;
		margin-left: 20px;
		margin-bottom: 20px;
		padding-left: 45px;
		background: #50597b;
		color: #fff;
		border: solid 2px transparent;
		border-radius: 6px;
    -webkit-transition: border 0.4s; /* Safari */
    transition: border 0.4s;
	}
		input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
	   		color: #fff;
	   	}
		input[type=text]:-moz-input-placeholder { /* Mozilla Firefox 4 to 18 */
	   		color: #fff;
	   	}
		input[type=text]::-moz-input-placeholder { /* Mozilla Firefox 19+ */
	   		color: #fff;
	   	}
		input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
	   		color: #fff;
	   	}
	  input[type=text]:focus {
	   		outline: none; /* removes the default orange border when focus */
	   		border: 2px solid #11a8ab;
	  }
	.input-icon {
		font-size: 22px;
		position: absolute;
		left: 31px;
		top: 10px;
	}
		.input-icon.password-icon {
			left: 35px;
		}

.horizontal-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.noselect{
			    -webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
	.horizontal-list li {
		float: left;
	}

.clear {
	clear: both;
}

.icon {
	font-size: 25px;
}

.titular {
	display: block;
	line-height: 60px;
	margin: 0;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.button {
	display: block;
	width: 175px;
	line-height: 50px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-transition: background .3s;
	transition: background .3s;
}
	.button:hover {
		text-decoration: none;
	}

.arrow-btn-container {
	position: relative;
}
	.arrow-btn {
		position: absolute;
		display: block;
		width: 60px;
		height: 60px;
		-webkit-transition: background .3s;
		transition: background .3s;
	}
		.arrow-btn:hover {
			text-decoration: none;
		}
		.arrow-btn.left {
			border-top-left-radius: 5px;
		}
		.arrow-btn.right {
			border-top-right-radius: 5px;
			right: 0;
			top: 0;
		}
		.arrow-btn .icon {
			display: block;
			font-size: 18px;
			border: 2px solid #fff;
			border-radius: 100%;
			line-height: 17px;
			width: 21px;
			margin: 20px auto;
			text-align: center;
		}
			.arrow-btn.left .icon {
				padding-right: 2px;
			}

.profile-picture {
	border-radius: 100%;
	overflow: hidden;
	-webkit-box-sizing: content-box;
  	-moz-box-sizing: content-box;
  	box-sizing: content-box;
}
	.big-profile-picture {
		margin: 0 auto;
		border: 5px solid #50597b;
		width: 150px;
		height: 150px;
	}
	.small-profile-picture {
		border: 2px solid #50597b;
		width: 40px;
		height: 40px;
	}

  .ct-grids line {
    color: steelblue;
  }
  .ct-labels span {
  color: steelblue;
}
.collumn-padding {
  padding: 0px 10px 0px 0px;
}
/** MAIN CONTAINER **/
.block-general {
    display: inline-block;
    float: left;
}
.main-container {
	font-family: 'Ubuntu', sans-serif;
	width: 100%;
	padding-bottom:40px;
	margin: 0px auto;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);*/
	background-color: transparent;
}

#div_chat_content::-webkit-scrollbar-thumb {
  background-color: #F90;
  border-radius: 10px;
	background-image: -webkit-linear-gradient(45deg,
    rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}
#div_chat_content::-webkit-scrollbar {
  width: 10px;
}

#div_chat_content::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);*/
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #F90;
	background-image: -webkit-linear-gradient(45deg,
    rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}
}
	/*********************************************** HEADER ***********************************************/
	header {
		height: 80px;
	}
		.header-menu {
			font-size: 17px;
			line-height: 80px;
		}
			.header-menu li {
				position: relative;
			}
				.header-menu-tab {
					padding: 0 32px;
					display: block;
					line-height: 68px;
					font-size: 17px;
          border-bottom: 4px solid transparent;
					-webkit-transition: background .3s;
					transition: background .3s;
				}
					.header-menu-tab:hover {
						background: #50597b;
						border-bottom: 4px solid #11a8ab;
						text-decoration: none;
					}
					.header-menu-tab .icon {
						padding-right: 15px;
					}
				.header-menu-number {
					position: absolute;
					line-height: 22px;
					padding: 0 6px;
					font-weight: 700;
					background: #e64c65;
					border-radius: 100%;
					top: 15px;
					right: 10px;
					-webkit-transition: all .3s linear;
					transition: all .3s linear;
				}
					.header-menu li:hover .header-menu-number {
						text-decoration: none;

					}
		.profile-menu {
			float: right;
			height: 80px;
			padding-right: 20px;
		}
			.profile-menu p {
				font-size: 17px;
				display: inline-block;
				line-height: 76px;
				margin: 0;
				padding-right: 10px;
			}
				.profile-menu a {
					padding-left: 5px;
				}
					.profile-menu a:hover {
						text-decoration: none;
					}
			.small-profile-picture {
				display: inline-block;
				vertical-align: middle;
			}
	/** CONTAINERS **/
	.container {
		float: left;
		width: 300px;
	}
		.block {
			margin-bottom: 15px;
			background: #394264;
			border-radius: 5px;
		}
    .record-block {
        padding: 10px;
        min-height: 106px;
        height: auto;
        background: #394264;
  			border-radius: 4px;
        border: 2px solid transparent;
        transition: border 0.4s;
        margin-bottom: 11px;
    }
    .my-card {
      background-color: rgb(57,66,100);
      border-radius: 3px;
      display: inline-block;
      float: left;
    }
    .section-button {
      width: 47px;
      float: left;
      display: inline-block;
      border: none;
      background-color: transparent;
      border-right: 3px solid rgb(31,37,61);
      height: 46px;
      color: white;
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      transition: background-color 0.4s;

    }
    .div_small_popup > .body > .collum > .collum > .my-card > .cancel-btn {
      transition: background-color 0.4s;
      background-color: #BDBDBD;
      border:none;color:white;cursor:pointer;height:46px;margin-top:2px;border-radius:2px;line-height:36px;font-size:15px;width:120px;float:right;color:#424242;
    }
    .sign-in.button.cancel-btn {
      transition: background-color 0.4s;
      background-color: #BDBDBD;
      border:none;color:white;cursor:pointer;height:46px;margin-top:2px;border-radius:2px;line-height:36px;font-size:14px;width:120px;float:left;color:#646464;
    }
    .sign-in.button.cancel-btn:hover {
      background-color: #E0E0E0;
    }
    .div_small_popup > .body > .collum > .collum > .my-card > .cancel-btn:hover {
      background-color: #E0E0E0;
    }
    .div_nen_den {
      background-color: rgba(0,0,0,0.3);
      width: 100%;
      height: 100%;
      position: fixed;
      margin: 0px;padding: 0px;
      z-index: 1000;
      display: inline-block;
      top:0px;left:0px;
      font-family: 'entypo', sans-serif;
    }
    .div_small_popup {
      width:748px;height:480px;position:fixed;top:calc(50vh - 240px);right:calc(50% - 380px);
      background-color: rgba(0,0,0,0.5);
      border-radius: 6px;
      overflow: hidden;
      font-family: 'entypo', sans-serif;
    }
    .div_small_popup > .header {
      cursor: move;
    }
    .div_small_popup > .body > .collum > .sub-section {
      width: 100%;font-size: 14px;
        float: left;
        display: inline-block;
        background-color: rgba(0,0,0,0.8);
        border: none;
        border: 2px solid #ccc;
        margin-top: 6px;
        color: white;
        resize: none;
        border-radius: 3px;
        font-family: 'entypo', sans-serif;
        transition: border 0.4s;
    }
    .div_small_popup > .body > .collum > .sub-section:focus {
      outline: none;
      border: 2px solid rgb(230,76,101);
    }
    .sub-section-input {
      height:42px;line-height:42px;border-radius:3px;background-color:rgba(0,0,0,0.8);border:2px solid #ccc;padding-left:12px;padding-right:12px;
      font-family: 'entypo', sans-serif;
      transition: border 0.4s;
    }
    .sub-section-input:focus {
      outline: none;
    }
    .div_small_popup > .body > .collum > .sub-section:focus {
      outline: none;
    }
    input[type="file"] {
        display: none;
    }
    button:focus {
      outline: none;
    }
    .custom-file-upload {
      width: 100%;height: 52px;line-height: 48px;font-size: 16px;
        border: 2px solid #ccc;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.4s;
        background-color: rgba(0,0,0,0.8);
        border-radius: 2px;
        font-family: 'entypo', sans-serif;
        border-radius: 3px;
    }
    .custom-file-upload:hover {
      background-color: #424242;
    }
    .div_small_popup > .body {
      width: 100%;
      height: calc(100% - 60px);
      display: inline-block;
      float: left;
      overflow: hidden;
      font-family: 'entypo', sans-serif;
    }
    .div_small_popup > .body > .collum > .collum > input {
      height:52px;line-height:52px;border-radius:3px;background-color:rgba(0,0,0,0.8);border:2px solid #ccc;padding-left:12px;padding-right:12px;margin-left:0px;width:100%;font-size:15px;
      transition: border 0.4s;
    }
    .div_small_popup > .body > .collum > .collum > input:focus {
      outline: none;
      border: 2px solid rgb(230,76,101);
    }
    .div_small_popup > .body > .collum {
      float: left;
      display: inline-block;
      height: 100%;
      font-family: 'entypo', sans-serif;
    }
    .div_small_popup > .header {
      width: 100%;
      display: inline-block;
      float: left;
      height: 62px;
      background-color: rgba(230,76,101,0.9);
      /*background-color: black;*/
      color: white;
      text-align: center;
      border-bottom: 4px solid black;
    }
    .div_small_popup > .header > h2 {
      font-size: 20px;
      line-height: 62px;
      margin: 0px;
      padding: 0px;
      font-weight: 400;
    }
    .section-button:hover {
      background-color: rgb(80,89,123);
    }
    .section-button:focus {
      outline: none;
    }
    .record-block-quiter {
      position:absolute;top:0px;right:0px;padding-left:16px;padding-right:14px;padding-top: 6px;padding-bottom: 10px;font-size:16px;cursor:pointer;
      opacity: 0.8;
      transition: color 0.4s;
    }
    .record-block-quiter:hover {
      color: rgb(40,156,244);
    }
    .overflow-3dot {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .record-block:hover {
      border: 2px solid rgb(40,156,244);
    }
    .normal_color {
      color: rgb(17,168,171);
    }
    .caution_color {
      color: rgb(252,177,80);
    }
    .danger_color {
      color: rgb(230,76,101);
    }
    .block-text_color {
      color: rgb(114,128,149);
    }
    .highlight_color {
      color: rgb(40,156,244);
    }
    .grey_color {
      color: #E0E0E0;
    }
    .white_color {
      color: white;
    }
    .hover_normal {
      transition: color 0.4s;
    }
    .hover_normal:hover {
      color: rgb(17,168,171);
    }
    .hover_caution {
      transition: color 0.4s;
    }
    .ct-pointlabel {
      color: red;
      font-size:10px;
    }
    .hover_caution:hover {
      color: rgb(252,177,80);
    }
    .hover_danger {
      transition: color 0.4s;
    }
    .hover_danger:hover {
      color: rgb(230,76,101);
    }
		/******************************************** LEFT CONTAINER *****************************************/
		.left-container {}
			.menu-box {
				height: 360px;
			}
				.menu-box .titular {
					background: #11a8ab;
				}
				.menu-box-menu .icon {
					display: inline-block;
					vertical-align: top;
					width: 28px;
					margin-left: 20px;
					margin-right: 15px;
				}
				.menu-box-number {
					width: 36px;
					line-height: 22px;
					background: #50597b;
					text-align: center;
					border-radius: 15px;
					position: absolute;
					top: 15px;
					right: 15px;
					-webkit-transition: all .3s;
					transition: all .3s;
				}
				.menu-box-menu li{
					height: 60px;
					position: relative;
          cursor: pointer;
				}
				.menu-box-tab {
					line-height: 60px;
					display: block;
					border-bottom: 1px solid #1f253d;
					-webkit-transition: background .2s;
					transition: background .2s;
				}
					.menu-box-tab:hover {
						background: #50597b;
						border-top: 1px solid #1f253d;
						text-decoration: none;
					}
					.menu-box-tab:hover .icon {
						color: #fff;
					}
					.menu-box-tab:hover .menu-box-number {
						background: #e64c65;
					}
			.donut-chart-block {
				height: 434px;
			}
				.donut-chart-block .titular {
					padding: 10px 0;
				}
				.donut-chart {
					height: 270px;
				}
				/******************************************
				DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
				******************************************/
					.donut-chart {
					  position: relative;
						width: 200px;
					  height: 200px;
						margin: 0 auto 2rem;
						border-radius: 100%
					 }
					p.center-date {
					  background: #394264;
					  position: absolute;
					  text-align: center;
						font-size: 28px;
					  top:0;left:0;bottom:0;right:0;
					  width: 130px;
					  height: 130px;
					  margin: auto;
					  border-radius: 50%;
					  line-height: 35px;
					  padding: 15% 0 0;
					}
					.center-date span.scnd-font-color {
					 line-height: 0;
					}
					.recorte {
					    border-radius: 50%;
					    clip: rect(0px, 200px, 200px, 100px);
					    height: 100%;
					    position: absolute;
					    width: 100%;
					  }
					.quesito {
					    border-radius: 50%;
					    clip: rect(0px, 100px, 200px, 0px);
					    height: 100%;
					    position: absolute;
					    width: 100%;
					    font-family: monospace;
					    font-size: 1.5rem;
					  }
					#porcion1 {
					    -webkit-transform: rotate(0deg);
					    transform: rotate(0deg);
					  }

					#porcion1 .quesito {
					    background-color: #E64C65;
					    -webkit-transform: rotate(76deg);
					    transform: rotate(76deg);
					  }
					#porcion2 {
					    -webkit-transform: rotate(76deg);
					    transform: rotate(76deg);
					  }
					#porcion2 .quesito {
					    background-color: #11A8AB;
					    -webkit-transform: rotate(140deg);
					    transform: rotate(140deg);
					  }
					#porcion3 {
					    -webkit-transform: rotate(215deg);
					    transform: rotate(215deg);
					  }
					#porcion3 .quesito {
					    background-color: #4FC4F6;
					    -webkit-transform: rotate(113deg);
					    transform: rotate(113deg);
					  }
					#porcionFin {
					    -webkit-transform: rotate(-32deg);
					    transform:rotate(-32deg);
					  }
					#porcionFin .quesito {
					    background-color: #FCB150;
					    -webkit-transform: rotate(32deg);
					    transform: rotate(32deg);
					  }
				/******************************************
				END DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
				******************************************/
        .os-percentages {
					padding-top: 36px;
				}
        .os-percentages li {
					width: 75px;
					border-left: 1px solid #394264;
					text-align: center;
					background: #50597b;
				}
					.os {
						margin: 0;
						padding: 10px 0 5px;
						font-size: 15px;
					}
						.os.ios {
							border-top: 4px solid #e64c65;
						}
						.os.mac {
							border-top: 4px solid #11a8ab;
						}
						.os.linux {
							border-top: 4px solid #fcb150;
						}
						.os.win {
							border-top: 4px solid #4fc4f6;
						}
					.os-percentage {
						margin: 0;
						padding: 0 0 15px 10px;
						font-size: 25px;
					}
			.line-chart-block {
				height: 400px;
			}
				.line-chart {
					height: 200px;
					background: #11a8ab;
				}
        /******************************************
				LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
				******************************************/
				.grafico {
				  padding: 2rem 1rem 1rem;
				  width: 100%;
				  height: 100%;
				  position: relative;
				  color: #fff;
				  font-size: 80%;
				}
				.grafico span {
				  display: block;
				  position: absolute;
				  bottom: 3rem;
				  left: 2rem;
				  height: 0;
				  border-top: 2px solid;
				  -webkit-transform-origin: left center;
				  transform-origin: left center;
				}
				.grafico span > span {
				  left: 100%; bottom: 0;
				}
				[data-valor='25'] {width: 75px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
				[data-valor='8'] {width: 24px; -webkit-transform: rotate(65deg); transform: rotate(65deg);}
				[data-valor='13'] {width: 39px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
				[data-valor='5'] {width: 15px; -webkit-transform: rotate(50deg); transform: rotate(50deg);}
				[data-valor='23'] {width: 69px; -webkit-transform: rotate(-70deg); transform: rotate(-70deg);}
				[data-valor='12'] {width: 36px; -webkit-transform: rotate(75deg); transform: rotate(75deg);}
				[data-valor='15'] {width: 45px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

				[data-valor]:before {
				  content: '';
				  position: absolute;
				  display: block;
				  right: -4px;
				  bottom: -3px;
				  padding: 4px;
				  background: #fff;
				  border-radius: 50%;
				}
				[data-valor='23']:after {
				  content: '+' attr(data-valor) '%';
				  position: absolute;
				  right: -2.7rem;
				  top: -1.7rem;
				  padding: .3rem .5rem;
				  background: #50597B;
				  border-radius: .5rem;
				  -webkit-transform: rotate(45deg);
				  transform: rotate(45deg);
				}
				[class^='eje-'] {
				  position: absolute;
				  left: 0;
				  bottom: 0rem;
				  width: 100%;
				  padding: 1rem 1rem 0 2rem;
				  height: 80%;
				}
				.eje-x {
				  height: 2.5rem;
				}
				.eje-y li {
				  height: 25%;
				  border-top: 1px solid #777;
				}
				[data-ejeY]:before {
				  content: attr(data-ejeY);
				  display: inline-block;
				  width: 2rem;
				  text-align: right;
				  line-height: 0;
				  position: relative;
				  left: -2.5rem;
				  top: -.5rem;
				}
				.eje-x li {
				  width: 33%;
				  float: left;
				  text-align: center;
				}
				/******************************************
				END LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
				******************************************/
				.time-lenght {
					padding-top: 22px;
					padding-left: 38px;
				}
					.time-lenght-btn {
						display: block;
						width: 70px;
						line-height: 32px;
						background: #50597b;
						border-radius: 5px;
						font-size: 14px;
						text-align: center;
						margin-right: 5px;
						-webkit-transition: background .3s;
						transition: background .3s;
					}
						.time-lenght-btn:hover {
							text-decoration: none;
							background: #e64c65;
						}
				.month-data {
					padding-top: 28px;
				}
					.month-data p {
						display: inline-block;
						margin: 0;
						padding: 0 25px 15px;
						font-size: 16px;
					}
						.month-data p:last-child {
							padding: 0 25px;
              float: right;
							font-size: 15px;
						}
						.increment {
							color: #e64c65;
						}
			.media {
				height: 216px;
			}
				#media-display {
					position: relative;
					height: 180px;
					background: #787878 url('http://www.paulrowell.com/sites/default/files/am-fullpage.png') center top;
				}
					#media-display .play {
						position: absolute;
						top: 75px;
						right: 32px;
						border: 2px solid #fff;
						border-radius: 100%;
						padding: 2px 5px 2px 9px;
					}
						#media-display .play:hover {
							border: 2px solid #e64c65;
					}
				.media-control-bar {
					padding: 6px 0 0 15px;
				}
					.media-btn, .time-passed {
						display: inline-block;
						margin: 0;
					}
					.media-btn {
						font-size: 19px;
					}
						.media-btn:hover, .media-btn:hover span {
							text-decoration: none;
							color: #e64c65;
						}
						.play {
							margin-right: 100px
						}
						.volume {
							margin-left: 30px;
						}
						.resize {
							margin-left: 12px;
						}
			.left-container .social {
				height: 110px;
			}
				.left-container .social li {
					width: 75px;
					height: 110px;
				}
					.left-container .social li .icon {
						text-align: center;
						font-size: 20px;
						margin: 0;
						line-height: 75px;
					}
					.left-container .social li .number {
						text-align: center;
						margin: 0;
						line-height: 34px;
					}
					.left-container .social .facebook {
						background: #3468af;
						border-top-left-radius: 5px;
						border-bottom-left-radius: 5px;
					}
						.left-container .social .facebook .number {
							background: #1a4e95;
							border-bottom-left-radius: 5px;
						}
					.left-container .social .twitter {
						background: #4fc4f6;
					}
						.left-container .social .twitter .icon {
							font-size: 18px;
						}
						.left-container .social .twitter .number {
							background: #35aadc;
						}
					.left-container .social .googleplus {
						background: #e64c65;
					}
						.left-container .social .googleplus .number{
							background: #cc324b;
						}
					.left-container .social .mailbox {
						background: #50597b;
						border-top-right-radius: 5px;
						border-bottom-right-radius: 5px;
					}
						.left-container .social .mailbox .number {
							background: #363f61;
							border-bottom-right-radius: 5px;
						}
		/************************************************** MIDDLE CONTAINER **********************************/
		.middle-container {
			margin: 0 25px;
		}
			.profile {
				height: 410px;
			}
				.add-button .icon {
					float: right;
					line-height: 18px;
					width: 23px;
					border: 2px solid;
					border-radius: 100%;
					font-size: 18px;
					text-align: center;
					margin: 10px;
				}
					.add-button .icon:hover {
						color: #e64c65;
						border-color: #e64c65;
					}
				.user-name {
					margin: 25px 0 16px;
					text-align: center;
				}
				.profile-description {
					width: 210px;
					margin: 0 auto;
					text-align: center;
				}
				.profile-options {
					padding-top: 23px;
				}
					.profile-options li {
						border-left: 1px solid #1f253d;
					}
						.profile-options p {
							margin: 0;
						}
						.profile-options a {
							display: block;
							width: 99px;
							line-height: 60px;
							text-align: center;
							-webkit-transition: background .3s;
							transition: background .3s;
						}
							.profile-options a:hover {
								text-decoration: none;
								background: #50597b;
							}
							.profile-options a:hover.comments .icon {
								color: #fcb150;
							}
							.profile-options a:hover.views .icon {
								color: #11a8ab;
							}
							.profile-options a:hover.likes .icon {
								color: #e64c65;
							}
							.profile-options .icon {
								padding-right: 10px;
							}
							.profile-options .comments {
								border-top: 4px solid #fcb150;
							}
							.profile-options .views {
								border-top: 4px solid #11a8ab;
							}
							.profile-options .likes {
								border-top: 4px solid #e64c65;
							}
			.weather {
				height: 555px;
			}
				.weather .titular {
					background: #cc324b;
				}
					.weather .titular .icon {
						padding-right: 15px;
						font-size: 26px;
					}
				.weather .current-day {
					height: 135px;
					background: #e64c65;
				}
					.weather .current-day p {
						margin: 0;
						padding-left: 50px;
					}
						.current-day-date {
							font-size: 16px;
							padding-top: 16px;
						}
						.current-day-temperature {
							font-size: 70px;
						}
							.current-day-temperature .icon-cloudy {
								padding-left: 20px;
							}
				.weather .next-days{}
				.weather .next-days p {
					margin: 0;
					display: inline-block;
					font-size: 16px;
				}
				.weather .next-days a {
					display: block;
					line-height: 58px;
					border-bottom: 1px solid #1f253d;
					-webkit-transition: background .3s;
					transition: background .3s;
				}
					.weather .next-days a:hover {
						background: #50597b;
					}
					.weather .next-days a:hover .day {
						color: #e64c65;
					}
					.weather .next-days-date {
						padding-left: 20px;
					}
					.weather .next-days-temperature {
						float: right;
						padding-right: 20px;
					}
						.weather .next-days-temperature .icon {
							padding-left: 10px;
						}
			.tweets {
				height: 375px;
			}
				.tweets .titular {
					background: #35aadc;
				}
					.tweets .titular .icon {
						font-size: 18px;
						padding-right: 20px;
					}
				.tweet.first {
					height: 150px;
					border-bottom: 1px solid #1f253d;
				}
					.tweet p:first-child {
						margin: 0;
						padding: 30px 30px 0;
					}
					.tweet p:last-child {
						margin: 0;
						padding: 15px 30px 0;
					}
					.tweet-link {
						color: #4fc4f6;
					}
			.middle-container .social {
				height: 205px;
				background: #1f253d;
			}
				.middle-container .social li {
					margin-bottom: 12px;
				}
				.middle-container .social a {
					line-height: 60px;
				}
					.middle-container .social a:hover {
						text-decoration: none;
					}
					.middle-container .social .titular {
						border-radius: 5px;
					}
						.middle-container .social .facebook {
							background: #3468af;
							-webkit-transition: background .3s;
							transition: background .3s;
						}
							.middle-container .social a:hover .facebook {
								background: #1a4e95;
							}
							.middle-container .social a:hover .icon.facebook {
								background: #3468af;
							}
						.middle-container .social .twitter {
							background: #4fc4f6;
							-webkit-transition: background .3s;
							transition: background .3s;
						}
							.middle-container .social a:hover .twitter {
								background: #35aadc;
							}
							.middle-container .social a:hover .icon.twitter {
								background: #4fc4f6;
							}
						.middle-container .social .googleplus {
							background: #e64c65;
							-webkit-transition: background .3s;
							transition: background .3s;
						}
							.middle-container .social a:hover .googleplus {
								background: #cc324b;
							}
							.middle-container .social a:hover .icon.googleplus {
								background: #e64c65;
							}
				.middle-container .social .icon {
					float: left;
					width: 60px;
					height: 60px;
					text-align: center;
					font-size: 20px;
					border-bottom-left-radius: 5px;
					border-top-left-radius: 5px;
				}
					.middle-container .social .icon.facebook {
						background: #1a4e95;
					}
					.middle-container .social .icon.twitter {
						background: #35aadc;
					}
					.middle-container .social .icon.googleplus {
						background: #cc324b;
					}
		/********************************************* RIGHT CONTAINER ****************************************/
		.right-container {}
			.join-newsletter {
				height: 230px;
			}
				.join-newsletter .titular {
					padding-top: 10px;
				}
				.subscribe.button {
					background: #11a8ab;
					margin-top: 10px;
				}
					.subscribe.button:hover {
						background: #0F9295;
					}
			.account {
				height: 390px;
			}
				.account .titular {
					padding: 10px 0;
				}
				.sign-in.button {
					background: #e64c65;
					margin: 10px auto;
				}
					.sign-in.button:hover {
						background: #cc324b;
					}
				.account p {
					text-align: center;
				}
				.fb-sign-in {
					margin-top: 28px;
					display: block;
					line-height: 50px;
					background: #3468af;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					-webkit-transition: background .3s;
					transition: background .3s;
				}
					.fb-sign-in:hover {
						background: #1a4e95;
						text-decoration: none;
					}
				.fb-sign-in .icon {
					line-height: 20px;
					font-size: 12px;
					padding-right: 3px;
				}
					.fb-border {
						display: inline-block;
						width: 23px;
						line-height: 20px;
						border: 2px solid #fff;
						border-radius: 100%;
						margin-right: 10px;
					}
			.loading {
				height: 200px;
				padding-top: 35px;
			}
				.loading p {
					display: inline-block;
					padding-left: 30px;
					margin: 5px 0 20px;
				}
					.loading .icon {
						padding-right: 15px;
					}
					.loading .percentage {
						float: right;
						padding: 6px 35px 0 0;
					}
				.loading .progress-bar {
					width: 250px;
					height: 20px;
					background: #50597b;
					border-radius: 5px;
					margin: 0 auto;
				}
					.progress-bar.downloading {
						background: -webkit-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* Chrome10+,Safari5.1+ */
						background: -ms-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* IE10+ */
						background: linear-gradient(to right, #11a8ab 81%,#50597b 81%); /* W3C */
					}
					.progress-bar.uploading {
						background: -webkit-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* Chrome10+,Safari5.1+ */
						background: -ms-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* IE10+ */
						background: linear-gradient(to right, #4fc4f6 43%,#50597b 43%); /* W3C */
					}
			.calendar-day {
				height: 320px;
				background: #3468af;
			}
				.calendar-day .titular {
					background: #1a4e95;
				}
					.calendar-day .arrow-btn:hover {
						background: #16417E;
					}
				.calendar-day .the-day {
					margin: 0;
					text-align: center;
					font-size: 146px;
				}
				.add-event.button {
					background: #4fc4f6;
				}
					.add-event.button:hover {
						background: #35aadc;
					}
			.calendar-month {
				height: 380px;
			}
				.calendar-month .titular {
					background: #3468af;
				}
					.calendar-month .arrow-btn:hover {
						background: #1a4e95;
					}
				.calendar {
					margin: 22px 15px;
					text-align: center;
				}
					.calendar a {
						font-size: 17px;
					}
					.calendar td, .calendar th {
						width: 40px;
						height: 38px;
					}
					.calendar .days-week {
						color: #4fc4f6;
					}
					.calendar .today {
						display: block;
						width: 34px;
						line-height: 34px;
						background: #e64c65;
						border-radius: 100%;
					}


          .e_health_text_block {
            display:inline-block;float:left;height:46px;line-height:46px;font-size:16px;font-weight: bold;background-color: transparent;
          }
          .e_health_input_block {
            display:inline-block;float:left;height:46px;line-height: 46px;font-size: 16px;font-weight: bold;background-color: transparent;
          }
          .e_health_input_block input {
            display:inline-block;float:left;height:46px;width:100%;padding-left:10px;padding-right:10px;font-size: 15px;
          }
          .red-hover-container {
            transition: color 0.1s;
          }
          .red-hover-container:hover {
            color: rgb(230,76,101);
          }
          .red-hover {
            transition: color 0.1s;
          }
          .red-hover:hover {
            color: rgb(230,76,101);
          }
          .tooltip {
              position: relative;
              cursor: pointer;
              float: left;
              padding: 6px 6px 6px 0px;
              display: inline-block;

          }
          .tooltip span {
              position: relative;
              display: inline-block;
              cursor: pointer;
              float: left;
              padding: 6px 6px 6px 0px;
              display: inline-block;
          }
          .tooltip .tooltiptext {
              display: none;
              padding-left: 10px;
              padding-right: 10px;
              padding-top: 5px;
              padding-bottom: 5px;
              min-width: 100px;
              background-color: black;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              /* Position the tooltip */
              position: relative;
              float: left;
              left: 2px;
              top: 2px;
              z-index: 1;
              min-width: 120px;
          }

          .tooltip:hover .tooltiptext {
              display: inline-block;
          }

					.card_trongsuot {
						/*background-color: rgba(57,66,100,0.6);*/
						/*background-color: rgba(34,39,63,0.52);*/
						background-color: rgba(0,0,0,0.16);
					}
					.card_trongsuot_2 {
						/*background-color: rgba(57,66,100,0.6);*/
						/*background-color: rgba(34,39,63,0.64);*/
						background-color: rgba(0,0,0,0.24);
						/*background-color: transparent;*/
					}

					[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

.window_no_drag {
	-webkit-app-region: no-drag;
}

.window_drag {
	-webkit-app-region: drag;
}

#title {
 position: fixed;
 top: 0px;
 left: 6px; 
}





#title-bar-btns {
 -webkit-app-region: no-drag;
 position: fixed;
 top: 6px;
 right: 0px;
}

.box_handler {
	position: absolute;
	top: 0px;
	right: 0px; 
	width: 100px;
}

.box_handler_btns {
	position: absolute;
	top: 6px;
	right: 0px;
	width: 100px;
}
.handler-btn {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	float:right;
	margin-right:12px;
	color:white;
	font-size: 12px;
	cursor: pointer;
	-webkit-app-region: no-drag;
	outline: none;
	border: 2px solid #FFFFFF;
	display: inline-block;
	text-align: center;
	line-height: 100%;
	font-weight: bolder;
	font-family: Montserrat;
}

.quit_bgcolor {
	background-color: rgb(255,96,88);
}

.zoom_bgcolor {
	background-color: rgb(255,192,46);
}

.mini_bgcolor {
	background-color: rgb(39,203,64);
}

.general_black_box_dragable {
	background-color: rgba(31,37,67,1);
	display: inline-block;
	border: 3px solid black;
	border-radius: 6px;
	overflow: hidden;
}

.general_black_box_dragable .header {
	width:100%;
	height:60px;
	display: inline-block;
	cursor: move;
}

.general_black_box_dragable .body {
	width:100%;
	display: inline-block;
	overflow: hidden;
}
.app_mail_anchor_title {
	border:0px;font-family:Montserrat;height:46px;line-height:46px;width:100%;display:inline-block;padding-left:12px;
	cursor: pointer;font-size:14px;
	background-color: rgba(31,37,61,0.54);
	/*border-top: 2px solid rgb(31,37,61);*/
	/*border-bottom: 2px solid rgb(31,37,61);*/
}

.app_mail_anchor_title:hover {
	outline: none;
	text-decoration: none;
}
.hover_hightlight {
	border: 2px solid transparent;
	border-radius:3px;
	transition: border 0.4s;
}
.hover_hightlight:hover {
	border: 2px solid steelblue;
}