@charset "UTF-8";

#smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  
  box-shadow: 1px 1px 6px 2px rgba(0,0,0,.5);
}

#content {
  position:relative;
  max-width: 340px;
  height:500px;
  min-height: 500px;
  max-height: 500px;
  margin-top:20px;
  background: #F8F9F4;
  /*overflow-y:scroll;*/
  overflow:hidden;
}



#smartphone:before {
	content: '';
	display: block;
	width: 60px;
	height: 5px;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #333;
	border-radius: 10px;
	z-index:9999;
}

#smartphone-home {
	position:absolute;
	content: '';
	display: block;
	width: 35px;
	height: 35px;
	cursor:pointer;
	left: 50%;
	bottom: -65px;
	transform: translate(-50%, -50%);
	background: #333333;
	border-radius: 50%;
	z-index:9999;
}

#smartphone-home:hover{
	background: #555555;
}

#smartphone-home-tooltip{
	position:absolute;
	width:120px;
	left:40px;
	top:-5px;
	color:#DDDDDD;
	display:none;
}

#topbar{
	position:absolute;
	top:0px;
	height:20px;
	width:328px;
	padding:2px;
	padding-left:6px;
	padding-right:6px;
	font-size:12px;
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	background-color:#CCCCCC;
}

#phoneinfo{
	float:right;	
}

#app_home{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFFFFF;}

.app{
	position:absolute;
	display:none;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
}

.app_container{
	padding:3px;
	height:100%;
}

.menu-header{
	position:relative;
	height:30px;
	border-bottom:#888888 solid 1px;
	margin-bottom:4px;
	font-size:24px;
	line-height:30px;
	font-weight:bold;
	text-align:center;
	
}

.menu-header-name{
	position:absolute;
	width:100%;
	text-align:center;
	pointer-events:none;	
}

#volumeinfo{
	display:inline-block;
	height:13px;
	width:15px;
}
#volumeinfo:hover{
	text-decoration:none;
}

.volume-option{
	display:none;
}

.volumeinfo-settings{
	display:block;
	font-size:20px;
}

.volumeinfo-settings.active{
	display:block;
	color:#D01114;
}


.descIcon, 
.descIcon-hidden{
	position:relative;
	z-index:99;
}

.descIcon-hidden{
	display:none;
}

.descIcon:hover .desc,
.descIcon-hidden:hover .desc{
	display:inline-block;
	font-size:10px;
}

.desc{
	display:none;
	padding:2px;
}

.float-left .desc{
	float:right;
}

.float-right .desc{
	float:left;
}

#admin{
	display:none;
	width:350px;
	position:absolute;
}


html, body {
  overflow-x: hidden;
}
body {
  position: relative
}


/* Home */
#home{
	position:relative;
	width:100%;
	height:100%;
	background-size:cover;
	background-color:#D2CDCD;
	
}

#home_dock{
	position:absolute;
	bottom:0;
	width:100%;
	text-align:center;
	background:rgba(255,255,255,.7)
	
}

.icon{
	cursor:pointer;	
}

.icon{
	position:relative;
	margin:5px;
	display:inline-block;
}

.icon .badge{
	position:absolute;
	top:0;
	right:0;
}

/* Messenger */


.messenger-header-icon{
	float:left;	
}
#messenger-feed{
	overflow-y:scroll;
	height:265px;
	padding:3px;
	padding-bottom:110px;
	
}

.text{
	display:block;
	border-radius:10px;
	max-width:220px;
	min-width:75px;
	width: max-content;
	padding:4px;	
	margin-bottom:12px;
	color:#212121;
}

.text-me{
	background-color:#28abe3;
	border-top-right-radius:0px;
	margin-left:auto;
	margin-right:0;
	
}

.text-them{
	background-color:#93dd92;
	border-top-left-radius:0px;
}

.text img{
	border-radius:10px;
	
}

#keyboard{
	position:absolute;
	bottom:0px;
	left:0;
	width:100% !important;
	background-color:#CCCCCC;
	
}

#keyboard-text{
	border-top:#888888 solid 1px;
	border-bottom:#888888 solid 1px;
	height:30px;
	text-align:center;
	background-color:#f8f9f4;
}

#keyboard-text-box{
	height:28px;
}

#keyboard-select{
	border-bottom:#888888 solid 1px;
	min-height:30px;
}

#sendBtn{
	float:right;
	font:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	padding:2px;
	margin-top:2px;
	height:24px;
	line-height:17px;
	border-radius:10px;
}


.select-option{
	display:inline-block;
	margin:1px;
	padding:2px;	
	border-radius:3px;
	border:#777777 solid 1px;
}

.select-option.active{
	background-color:#D8D8D8;
	
}

.select-option.selected{
	background-color:#93dd92 !important;
}

.select-option:hover{
	cursor:pointer;
	background-color:#DDDDDD;
}

.fillin-option{
	display:inline-block;
	background-color:#93dd92;
	font-weight:bold;
	margin:1px;
	padding:2px;	
	border-radius:3px;
	border:#777777 solid 1px;	
}


.textarea-option{
	width:100%;
	height:60px !important;
	resize: none;
}

.keyboard-row{
	margin: 0 auto;
	text-align:center;
	width:100%;	
}

.key{
	display:inline-block;
	height:25px;
	min-width:20px;
	padding:2px;
	line-height:21px;
	background-color:#EEEEEE;
	border-radius:2px;
	text-align:center;
	margin-left:3px;	
	margin-top:2px;	
	margin-bottom:1px;
	cursor:pointer;	
}

.key-space{
	width:140px;
}

.key-enter{
	width:40px;
}

.key-backspace, .key-shift{
	width:30px;
}

/* Settings */

.settings-icon{
	position:relative;
	z-index:99;
}

.wallpaper{
	border:transparent 1px solid;
	display:inline-block;
	margin-left:3px;
	margin-bottom:4px;
	cursor:pointer;
}

.wallpaper:hover{
	border:#00CCCC solid 1px;
	opacity:.8;
}

.wallpaper.active{
	border:#D01114 solid 1px;
}

/* Email */

#email_container{
	position:relative;
	
}

#email-list{
	position:relative;
	height:100%;
	overflow:scroll;
	padding-bottom:40px;
}

.email-item{
	position:relative;
	cursor:pointer;
	height:60px;
	padding-left:6px;
	border-bottom:#CCCCCC solid 1px;
	overflow:hidden;
}

.email-item:hover{
	background-color:#EEEEEE;
}

.email-item-subject{
	font-weight:bold;
}

.email-item-body{
	font-size:12px;
}

.email-item-time{
	color:#CCCCCC;
	font-size:10px;
	float:right;
	margin-right:3px;
}

#email-selected, #compose-email{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	display:none;
	overflow:scroll;
	padding-bottom:40px;
	z-index:99;
}

#compose-email .input-group-text{
	width:80px;
	
}

.invalid{
	border:rgba(228,57,60,.6) solid 2px !important;
	background-color:rgba(228,57,60,.04) !important;
	
}

.read .email-item-body{
	color:#444444 !important;
	
}

.read .email-item-subject{
	font-weight:normal !important;
	color:#444444 !important;
}

#email-selected-subject{
	border-bottom:#CCCCCC solid 1px;
	
}

#compose-email-send{
	position:absolute;
	bottom:24px;
	right:2px;
	color:#FFFFFF !important;
	
}

.colorbar{
	position:absolute;
	left:0;
	display:inline-block;
	width:4px;
	height:55px;
	margin-top:2px;
	background-color:#CCCCCC;
}

.colorbar-red{
	background-color:#ef4836;
}

.colorbar-blue{
	background-color:#357ebd;
}

.colorbar-green{
	background-color:#06b988;
}

/* Phone */

#phone_container{
	position:relative;
	height:100% !important;
	overflow:hidden;
}

#phoneTabs{
	position:relative;
	height:100% !important;
	overflow:hidden;
	}

#phoneTabs_UL li a{
	padding:2px;
}

#tab-phone-space{
	height:200px;
}

#tab-contacts{
	height:inherit !important;
	overflow:scroll;
}

.letter_HR{
	position:relative;
	display:block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	color:#AAAAAA;
	border-bottom:solid 1px #AAAAAA;
}

.letter_HR-sort{
	position:absolute;
	left:-16px;
	bottom:-12px;
}

/* Help / Splash */

#help_container{
	position:relative;
	height:100%;
	overflow:scroll;
}

.section{
	text-align:left;	
}

#app_splash{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#FFFFFF;
}

.splash_content{
	position:absolute;
	padding-top:70px;
	width:100%;
	height:100%;
	text-align:center;
	z-index:90;
	color:#FFFFFF;
	padding-right:6px;
}

.splash_content .btn{
	color:#000000 !important;
}

.splash-header{
	margin-top:40px;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}

#splash-nav{
	position:absolute;
	bottom:0;
	width:100%;
	padding-right:6px;
	z-index:91;
}

#splash_container-bg{
	position:absolute;
	background-image:url(/images/backgrounds/splash.jpg);
	background-size:cover;
	height:500px;
	width:1400px;
	top:0;
	left:0;
	z-index:10;
}

.splash_content label{
	cursor:pointer;
	margin-right:15px;
}

.splash_content:not(#splash-page-1){
	display:none;
}

.splash_content #help_container{
	padding-bottom:110px;
}