/* GENERAL CSS */
::-webkit-scrollbar {
  	width: 4px;  /* for vertical scrollbars */
  	height: 4px; /* for horizontal scrollbars */
	}

::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.1);}
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);}

[placeholder]:focus::-webkit-input-placeholder {
  	transition: opacity 0.5s 4s ease; 
 	opacity: 0;
	}
	
input[type=number] {-moz-appearance:textfield;}

@charset "utf-8";

a {}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

label {
	font-family: Arial, sans-serif;
	font-weight: bold;
	}

html, body {
	font-family: Arial, sans-serif;
	margin:0;
	padding:0;
	overflow:hidden;
	width: 100%;
	height: 100dvh;
	}

#wrapper {					/* Begins in header.php and ends in footer.php */
	width: 100vw;	
	height: 100lvh;
	padding: .5vh .6vw .5vh .3vw;
	overflow:hidden;
	position:relative;
	}
	
#content {
	width: 100vw;
	height:90dvh;
	overflow: hidden;
	}
	

/* Remove spinner on inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button 
	{ 
	-webkit-appearance: none; 
	margin: 0; 
	}

/* SPINNER */
.dl-spinner {
	display: 	none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     50vw;
    width:      100vw;
	background-image: url('../../firebase-common/image/dl-spinner-2.gif');
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 35% 35%;
	}

/* JQUERY */
.ui-widget-overlay
	{
  	opacity: .50 !important; 
  	filter: Alpha(Opacity=50) !important;
  	background-color: rgb(50, 50, 50) !important;
	}
	
.ui-widget-header {
    background: #CCC;
    color: #666;
	}
	
.ui-menu-item-wrapper
	{
	font-size: .8vw;
	}
	
/* css for all various items */
#mainform {display: inline-block}	
	
.message {color: #666;}

ul.ui-autocomplete {z-index: 1000;}	

/* HEADER */
.header {
	width: 99.4%;
	height: 5.5vh;
	background-color:#283e4a;
	display: flex;
	align-items: center;
	}
	
.header-left {
	width: 10%;
	display: flex;
	align-items: center;	
	}
	
.header-right {
	width:90%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-end;
	}
	
.header-search {
	width: 250px;
	height: 100%;
	margin: 0 0 0 10vw;
	}
	
.header-search input {
	height: 4vh;
	width: 15vw;
	min-width: 260px;	
	padding:0 0 0 .5vw;
	border-radius: .5vh;
	color: #333;
	font-size: 14px;
	background-color:e1e9ee;
	}
	
.header-search input:focus {
	background-color: #FFC;
	transition: all 500ms ease-in;
	}
	
.header-buttons {
	width: 250px;
	height: 100%;
	margin: 0 0 0 4vw;
	color: #FFF;
	font-size: 1vw;
	display: flex;
	}
	
.header-buttons object {
	width: 30px;
	height: 30px;
	margin: 0 8px 0 0;
	}
	
.header-user {
	width: 250px;
	height: 100%;
	margin: 0 0 0 1vw;
	color: #E5E5E5;
	font-size: 18px;
	}
	
.header-logo {
	width: 40px;
	height: 100%;
	margin: 0 .5vw 0 0;
	}

.header-logo img {
	width: 4vh;
	height: 4vh;
	}

/* MENU TOGGLE */
.menu-bar-box {
	width: calc(1.4vw + 1.4vh);
	height: calc(1.4vw + 1.4vh);
	margin: 6% 0 0 6%;
	display: flex;
	align-items: center;
	justify-content: center;	
	}
#menu-bar {
	width: calc(1.5vw + 1.5vh);
	height: calc(1.1vw + 1.1vh);
	cursor: pointer;
	}

.bar {
	height: 20%;
	width: 100%;
	background-color: #FFF;
	display: block;
	border-radius: 5px;
	transition: 0.3s ease;
	}

#bar1 {
	transform: translateY(-90%);
	}

#bar3 {
	transform: translateY(90%);
	}

.change #bar1 {
	transform: translateY(110%) rotateZ(-45deg);
	background-color: orange;
	}

.change #bar2 {
	opacity: 0;
	}

.change #bar3 {
	transform: translateY(-90%) rotateZ(45deg);
	background-color: orange;
	}
	
/* MENU BOX */
.menu-box {
	position: absolute;
	top: 5.6vh;
	left: 6px;
	width: 360px;
	height: auto;
	background-color: #283e4a;
	margin: 10px 0 0 0;
	padding: 10px 0 20px 0;
	opacity: 0;
	z-index: 100;
	display: none;
	}
	
.menu-in {
	opacity: 1;
	top: 5.6vh;
	transition: all 200ms;
	display: block;
	}
	
.menu-out {
	opacity: 0;
	top: 10vh;
	transition: all 200ms;
	}

.menu-line {
	width: 100%;
	height: 6vh;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-start;
	}
	
.menu-line:hover {
	background-color: #666;
	}	
		
.menu-title {
	width: 80%;
	height: 100%;
	color: #FFF;
	font-size:24px;
	margin: 0 0 0 0;
	padding: 0 0 0 25px;
	display: flex;
	align-items: center;
	cursor: pointer;
	}
	
.menu-point {
	color: #FFF;
	}

/* COMMON STYLE FOR CHECKBOXES */
.fb-checkbox {
	border: 1px solid #999;
	border-radius: 6px;
	background-color:#FFF;
	text-align:center;
	cursor: hand;
	cursor:pointer;
	}

/*  CSS MODAL */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
	}

.modal-window {
    position: relative;
    background-color: #FFFFFF;
    width: 35%;
    margin: 20% auto;
    padding: 20px;
	text-align:center;
	border: #999 solid 1px;
	border-radius: .1vw;
	}

.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
	}
	
.modal-button {
	width: 100%;
	height: 4vh;
	}
	
#modal-button {
	height: 100%;
	float: right;
	border: #999 solid 1px;
	border-radius: .1vw;
	font-size: 1vw;
	color: #FFF;
	background-color: #390;
	outline: 0;	
	cursor: pointer;
	cursor: hand;	
	}
	
#modal-button:hover {
	border: #666 solid 1px;
	background-color: #09F;
	color : #FFF;	
	transition-duration: 0.6s;
	}	

.modal-close:hover,
.modal-close:focus {
    color: #000000;
    cursor: pointer;
	}
	
/* Overlay and Dim */
.overlay-main {
	position: fixed;
	width: 68.8%;
	height: 89.6%;
	top: 6.5%;
	left: 30.9%;
	background-color: rgba(0,0,0,0.5);
	z-index: 3;
	}	

/* Begining of footer.php page */
.page-title {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 5vh;
	text-align:right;
	background-color:#FFF;
	color: #999;
	width: 99vw;
	position: absolute;
	bottom: 4vh;
	z-index: -1000;
	}

.footer {
	width: 99.4vw;
	height: 3vh;
	line-height: 3vh;
	position: absolute;
	bottom: 1.4vh;
	background-color:#283e4a;
	text-align:center;
	font-size: 2vmin;
	color: #FFF;
	}

/* INPUT STYLE */
.input-container {
	position: relative;
	margin: .5vh 0 0 .1vw;
	white-space: nowrap;
	}
	
.input-sbs {
	display: flex;
	flex-direction: row;
	}

.input-container label {
	top: 5px;
	position: absolute;
	font-size: calc(.4vw + .3vh);
	margin: 0 0 0 0;
	padding: 0 0 0 .5vw;
	transition: color .8s ease-in-out;
	}
 
.input-active {
	color: #09C;
	font-size: calc(.4vw + .3vh);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	}
	
.input-container input, .input-container select, .input-container textarea {
	padding: .4vh 0 0 .4vw;
	border-radius: 4px;
	border: .5px solid #666;
	font-size: calc(.5vw + .5vh);
	background-color: #FFF;
	color: #666;
	outline: none;
	}
 
.input-container input:focus, .input-container select:focus, .input-container textarea:focus {
	background-color: #FFF;
	border: 1px solid green;
	}
	
.mod-email-form input, .mod-email-form select, .mod-email-form textarea {
	padding: 0 0 0 .5vw;
	border-radius: 4px;
	border: .5px solid #666;
	font-size: calc(.6vw + .6vh);
	background-color: #FFF;
	color: #666;
	outline: none;
	}
	
/* PHONEBOOK */
.phonebook {
	width: 40vw;
	height: 60vh;
	display:none;
	background-color:#006699;
	}
	
.phonebook-search {
	width: 45%;
	height: 5vh;
	margin: 1% 0 1% 0;
	white-space:nowrap;
	}
	
.phonebook-search-input {
	width: 72%;
	height: 5vh;
	display: inline-block;
	background-color:#FBFBFB;
	margin: 1% 0 1% 0;
	vertical-align: top;
	}
		
.phonebook-search-button {
	width: 28%;
	height: 5vh;
	border: #999 solid 1px;
	border-radius: .4vw;
	font-size: 1vw;
	color: #FFF;
	background-color: #06F;
	margin: 1% 0 1% 0;
	outline: 0;	
	display: inline-block; 
	cursor: pointer;
	cursor: hand;
	}

.phonebook-search-button:hover {
	border: #666 solid 1px;
	background-color: #09F;
	color : #FFF;	
	transition-duration: 0.6s;
	}
		
.phonebook-list {
	display: inline-block;
	width: 45%;
	height: 50vh;
	padding: 1% 0 0 1%;
	border: 1px solid #666;
	border-radius: 2px;
	vertical-align: top;
	overflow-y: auto;
	white-space:nowrap;
	}
		
.phonebook-list-group {
	width: 100%;
	height: 6.5vh;
	cursor: pointer;
	cursor: hand;
	}
	
.person-images {
	width: 24%;
	height: 5vw;	
	display:inline-block;
	}
	
.person-photo {
	width: 3vw;
	height: 3vw;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#FFF;
	border: 2px solid #00F;
	border-radius: 50%;
	position:relative;
	vertical-align: top;
	}
	
.person-logo {
 	width: 1.5vw;
	height: 1.5vw;
	position:absolute;
    bottom:-3;
    right:-10;
	border: 2px solid #00F;
	border-radius: 50%;
	background-color:#FFF;
	}
	
.person-details {
	display: inline-block;
	width: 74%;
	height: 4vw;
	padding: 1% 0 0 0;
	font-size: .8vw;
	vertical-align: top;
	white-space:nowrap;
	}
	
.phonebook-person {
	display: inline-block;
	width: 52%;
	height: 50vh;
	vertical-align: top;
	}
	
.phonebook-person-photo	{
	width: 8vw;
	height: 8vw;
	margin: 0 8% 0 1%; 
	border: 2px solid #666;
	border-radius: 50%;
	background-repeat:no-repeat;
	background-size:cover;
	vertical-align: top;
	display:inline-block;
	overflow:hidden;
	}
		
.phonebook-person-details {
	width: 18vw;
	margin: 1% 0 0 1%; 
	vertical-align: top;
	display:inline-block;
	}
	
.phonebook-person-group {
	width: 95%;
	margin: 1% 0 2% 1%;
	float: right;
	}
	
.phonebook-person-line {
	width: 98%;
	height: 16px;
	background-color:#F7F7F7;
	border-radius: 6px;
	margin: 0 0 5px 0;
	text-align:right;
	}
	
.web-meeting-button {
	width: 100%;
	height: 3vh;
	color: #FFF;
	background-color:#0066CC;
	border-radius: 4px;
	font-size: 1.2vw;
	cursor: hand;
	cursor: pointer;
	}

.web-meeting-button:hover {
	background-color:#09F;
	transition-duration: 0.6s;
	}
	
.communication-head {
	width: 98%;
	margin: 0 0 1% 0;
	padding: 0 0 0 0;
	font-size: .8vw;
	color: #666;
	}	
	
.communication-header {
	display: inline-block;
	color: #FFF;
	padding: 0 0 0 1%;
	background-color: #666;
	font-size: .8vw;
	}
	
.communication-list-items {
	display: inline-block;
	font-size: .8vw;
	margin: .5% 0 .5% 0;
	padding: 0 0 0 1%;
	vertical-align: middle;
	}
	
.communication-icon img{
	width: 1vw;
	height: 1vw;
	cursor: hand;
	cursor: pointer;
	}