TakeCareApp/app/www/style.css

body{
	
background-color: #C7F9CC;
height:100vh;

}
body >.container-fluid{
height:100vh;
}
.container-fluid{
display:flex;
flex-direction: column;
}
#router-page-wrapper{
	flex:1;
	justify-content:center;
	
height:100%;

}
#router-page-wrapper > .router{
	
height:100%;
width:100%;

}
#router-page-wrapper > .router >.container-fluid{

height:100%;
}



.row{
display:flex;
flex-direction:row;
flex-wrap:wrap;

}
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{
display:flex;
flex-direction:column;
padding:0;	
margin-bottom:10px;
}

.navbar-brand{
display:none;


}



.navbar{
padding-left:0;
background-color:#00A896;
}

.navbar-default{
	background-color:#00A896;
}
#





.navbar-nav >li:first-child >a {
	background-color: #028090;
	box-shadow: 0.5px 0px 0px #FFFFFF;
	font-family: Lobster !important;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	#line-height: 9px;

/* or 90% */
	#display: flex;
	
	#align-items: center;
	#text-align: center;

	color: #FFFFFF !important;
}

.navbar-nav >li:first-child.active >a {
	#background-color: #028090;
	#color: #FFFFFF !important;
}


.navbar-nav >li:first-child >a {
#background-color: #028090;
#	color: #FFFFFF !important;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
		#background-color: #008375;
	#color: #FFFFFF !important;
	#font-family: 'Teko', sans-serif;

}
.navbar-default .navbar-nav > li:hover{
	cursor:pointer;
	background-color: #008375;
}

.navbar-default .navbar-nav > li > a{
	color: #FFFFFF !important;
	font-family: 'Teko', sans-serif;
	font-size:18px;
	
	text-align: center;
}



.navbar-nav >li:first-child.active >a, .navbar-nav >li:first-child.active >a:hover, .navbar-nav >li:first-child.active >a:focus,.navbar-nav >li:first-child >a:focus,.navbar-nav >li:first-child >a:hover,.navbar-nav >li:first-child >a {
	background-color: #028090;
	color: #FFFFFF !important;
		background-color: #028090;
	box-shadow: 0.5px 0px 0px #FFFFFF;
	font-family: Lobster !important;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
}




.navbar-nav >li >a:first-child {
	display:none;
	
}

.clicked{
background-color: #008375 !important;
}


#row-content{
	margin-left:0;
	margin-right:0;
	margin-bottom:auto;

}

#column-panel{
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	
	background-color:white;
	
}	

#column-content{
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	background-color:white;
	
	
}

#column-profile{
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	background-color:white;
	
	
}

#column-title{
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;



}
#row-title{
	display:flex;
	height:30vh;
	width:100vw;
margin-top:-30px;
	margin-left:-30px;
	margin-right:0;
	background: #F9F3F3;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 10px 10px;
}

#column-title > h1{
	font-family: Lobster !important;
	color:#028090;
	font-size:52px;
}

#row-tiles{
	display:flex;
	justify-content:center;
	margin-top:30px;
	padding:5px;
	min-height:400px;
}




.column-tile{
	height:300px;
	min-height:250px;
	min-width:210px;
	display:flex;
	flex-direction:column;	
	width:25%;
	margin-left:15px;
	margin-right:15px;
	background: #00A896;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}

#row-tiles > .column-tile:nth-child(2){
	align-self:flex-end;
	background-color:#028090;

}


.column-tile > div{
	height:100%;
	width:100%;
	display:flex;
	justify-content:space-between;
	padding-top:20px;
	padding-bottom:15px;
	flex-direction:column;
	align-items:center;

}



.column-tile > div >div
{	
	text-align:center;
	font-size:30px;
	color:white;
	font-family: 'Teko', sans-serif;
	
}


.content-wrapper{
padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
	padding-right:5px;

}

.panel-title{
display:flex;
padding:10px;
min-height:40px;
background-color:#028090;
color:white;
justify-content:center;
align-items:center;
font-family: 'Teko', sans-serif;
font-size:18px;
text-align:center;
}

#row-login{
	max-width:600px;
	min-width:300px;
	min-height:300px;
	align-self:center;	
}
#row-register{
		max-width:600px;
	
	align-self:center;	
}
#content-personal{
	display:flex;
	justify-content:center;
	
}


#column-login > .well{
	display:flex;
	flex-direction:column;
	background-color:#00A896;
	color:white;
	border:none;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	
}
#regform{
	    display: flex;
    justify-content: center;
}
#calculatorSubmit{
	align-self:center;
		background-color:#028090;
	color:white;
	font-weight:bold;
	border:none;
	box-shadow: 0px 4px 4px rgb(255 255 255 / 25%);
}
#submit,#loginBtn,#editSubmit{
	margin-top:20px;
	align-self:center;
	min-width:25%;
	max-width:40%;	
	background-color:#028090;
	color:white;
	font-weight:bold;
	border:none;
	box-shadow: 0px 4px 4px rgb(255 255 255 / 25%);
}



.nav-tabs{
color:white;
background-color:#028090;
border-bottom:#028090;
}
.nav-tabs > li{
margin-bottom:0;
}

.nav-tabs > li > a{
color:white;
background-color:#028090;
border:none;
border-radius:0;
font-family: 'Teko', sans-serif;
font-size:18px;
}

.nav-tabs > li > a:hover {
color:white;
background-color:#028090;
border:none;
}

.nav-tabs > li > a:focus {
color:white;
background-color:#028090;
border:none;
}

.nav-tabs > li {
	border:none;
	border-radius:0;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
color:#028090;
background-color:white;
border:none;
border-radius:0;
}


#row-footer{
height:50px;
border-top:2px solid white;
margin-top:auto;
}

#column-copyright{
padding-left:15px;
margin:0;

}
#column-copyright > span{
	height:100%;
	color:#00a896;
	
}

table.dataTable{
	
}

table.dataTable td{
	#color: white;
    #text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black;
    font-family: 'Teko', sans-serif;
	font-size:18px;
	text-align:center!important;
}

table.dataTable tr:nth-child(even)>td:last-child{
color:#00A896!important;
}
table.dataTable tr:nth-child(odd)>td:last-child{
color:#00c7b2!important;
}

table.dataTable tr:nth-child(even){
	background-color:#00A896!important;
}
table.dataTable tr:nth-child(odd){
	background-color:#00c7b2 !important;

}

table.dataTable th{
	background-color:white !important;
	text-align:center!important;
	#color:#028090;
}
.datatables .dataTables_wrapper .dataTables_paginate a{
	border:none;

}


.datatables .dataTables_wrapper .dataTables_paginate span > a:hover,.datatables .dataTables_wrapper .dataTables_paginate span > a.current,.datatables .dataTables_wrapper .dataTables_paginate span > a.current:hover,.datatables .dataTables_wrapper .dataTables_paginate > .previous:hover,.datatables .dataTables_wrapper .dataTables_paginate > .next:hover {
      	color:white !important;
	    background:#05668dff !important;
		border:none;
		box-shadow: 0.5px 0px 0px #FFFFFF;
		
}

.datatables .dataTables_wrapper .dataTables_paginate .previous.disabled,.datatables .dataTables_wrapper .dataTables_paginate .next.disabled{
	display:none!important;
}

#firms{
	background-color: #C7F9CC;
}
#column-firms{
	font-family: 'Teko', sans-serif;
	font-size:18px;
border-radius: 10px;

	display:flex;
	flex-direction:column;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	background: #F9F3F3;
}
#column-firms > .well{
	#border-radius: 10px;
	
	display:flex;
	flex-direction:row;
	
	flex-wrap:wrap;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	#background-color:#00A896!important;
}

#column-firms > .well >div:nth-child(2){
	#height:100%;
	border-right:1.5px dashed #00A896;
	border-left:1.5px dashed #00A896;
}
#column-firms > .well >div{
	padding-left:15px;
	padding-right:15px;
}
#column-firms > .well div{

	display:flex!important;
	align-items:center;
	justify-content:center;
	
	
}
#no-firms{
	background-color:#00A896;
	color:white;
	text-align:center;
}

#about-page{
font-family: 'Teko', sans-serif;

border-radius: 10px;

	display:flex;
	flex-direction:column;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	background: #F9F3F3;
}

#about-page>h4{
	width:50%;
	max-width:800px;
	align-self:center;
	
}
#about-page>#row-content>div{
	font-size:20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
#about-header,#firms-header{
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
	background-color:#028090;
	color:white;
}

@media only screen and (max-width: 767px) {
		body >.container-fluid{
height:auto;
min-height:100vh;
}	
	
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{
    width:100%;
  }
  
  #column-panel{
	
	min-height:500px;
	
}	

#column-content{
	
	min-height:500px;
	
	
	
}

#column-profile{
	
	min-height:500px;
	
	
	
}

#row-title{
	display:none;
}

#profileData{
	width:100%;
}

}


@media only screen and (min-width: 768px) {
.navbar-nav{
	width:100%;
	margin-left:-15px;
	display:flex !important;
}
.navbar-nav > li:nth-last-of-type(2) {
margin-left:auto;
}
.navbar-nav > li:last-of-type,.navbar-nav > li:nth-last-of-type(2) {
	align-self:flex-end;
	
	#float:right !important;
}

#row-content{
	justify-content:space-between;
}

#column-panel{
	width:23%;
	min-height:900px;
	
}	

#column-content{
	width:73%;
	min-height:900px;

	
}	
#profileData{
	width:73%;
	#min-height:900px;
}


}