@font-face{
	font-family: Arimo-Regular;
	src: url("../fonts/Roboto-Regular.ttf");
}
@font-face{
	font-family: Ubuntu-Regular;
	src: url("../fonts/Roboto-Regular.ttf");
}
@font-face{
	font-family: Arimo-Bold;
	src: url("../fonts/Roboto-Bold.ttf");
}
@font-face{
	font-family: Ubuntu-Bold;
	src: url("../fonts/Roboto-Bold.ttf");
}
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.ttf');
}

*{
	font-family: Ubuntu-Regular, Arial, Helvetica, sans-serif;
}
html{
	position: relative;
	min-height: 100%;
}
body{
	background: #efefef;
	padding: 0 !important;
	margin-bottom: 100px;
}
.footer-wrapper{
	position: absolute;
	bottom: 0;
	width: 100%;
}
.footer-head{
	border-top: 5px #012951 solid;
	height: 100px;
	background-image: url('../images/diagmonds-paleblue.PNG');
}
.footer-content{
	color: #fff;
	margin-top: 15px;
	font-size: 12px;
	text-align: right;
}
.footer-content div:first-child{
	float: right;
}
.footer-content div:last-child{
	float: left;
	margin-top: -2px;
}
.footer-links a:first-child{
	margin-left: 0px;
	/*content: "  |  ";*/
}
.footer-links a{
	/*color: #f9e5a2;*/
	color: #fff;
	font-size: 12px;
	margin-left: 15px;
}
.label, label{
	font-weight: normal !important;
	font-family: Ubuntu-Bold !important;
}
.btn, .modal-title{
	text-transform: uppercase;
}
select{
	font-size: 13px;
}
table thead tr:hover {
	background: #136F9E;
}
/*.table{
	width: auto;
}*/
/*.table {
	margin: 0;
}
.table .singleCell {
	padding: 0;
}*/
/*table tr:hover {
	background: #FCF4D4;
	cursor: pointer;	lanie -- so that cursor will change to pointer when hover to employee tr to hint that tr is clickable for edit
}*/
/*.tableheader:hover {
	background: #136F9E;
	cursor: default; /*lanie */
/*}*/
/*.slipSummary {
	width: 500px;
}
.deductions {
	width: 300px;
}*/
/*.alert {
	margin-top: 5px;
}*/
/*.headImg {
	text-align: center;
	 margin-bottom:  20px;
}*//*
.loginLogo {
	margin: 0 auto
}*/
/*.slipTitle {
	margin: 20px;
}
.slipSummary, .payslip, .deductions {
	margin: 20px;
}
.payslip {
	width: 450px;
}
.payslip .dateheader span:first-child {
	float: left;
	margin: 10px;
}
.payslip .dateheader span:last-child {
	float: right;
	margin: 10px;
}*/
/*.form-login .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}*/
/*.form-login .form-control: focus {
	z-index: 2;
}*/
/*nav ul {
	margin: 30px 0 0;
	padding: 0;
}
nav ul li {
	list-style: none;
	padding: 10px 0 10px 20px;
	cursor: pointer;
}
nav ul li i {
	margin-right: 20px;
}
nav ul li a {
	color: #16A0E8;
	font-size: 16px;
	outline: 0;
	display: block;
}
nav ul li a:hover, nav ul li a:active {
	color: #ffffff;
	text-decoration: none;
	outline: 0;
}*/
/*.contentWrap {
	padding: 0;
	display: table-cell;
	clear: both;
	float: right;
	width: 100%;
	margin-left: -202px;
}*/
/*.inner {
	margin-left: 202px;
}*/
/*.panelSection .panel-heading {
	background-color: #515151;
	border-radius: 0;
}*/
.headNav {
	overflow: auto;
}
.verDate {
	width: 100%;
}
.verDate .dateheader, .verDate .version {
	color: #ffffff;
	margin: 10px;
}
.verDate .dateheader {
	float: left;
}
.verDate .version {
	float: right;
}
.fileUploader {
	margin-top: 20px;
	margin-bottom: 20px;
}
.empName {
	clear: both;
	width: 100%;
	display: block;
	overflow: auto;
}
.empName span {
	float: left;
	margin: 10px;
}
.payPeriod span:first-child {
	float: left;
	margin: 10px;
}
.payPeriod span:last-child {
	float: right;
	margin: 10px;
}
.form-login {
	max-width: 350px;
	padding: 15px;
	background:  #2F2F2F;
	margin-top: 200px;
	box-shadow: 0px 0px 3px 1px #333;
}
.form-login .btn-orange {
	background: #F47E08;
	color: #fff;
}
.form-login .btn-orange:hover {
	background: #df7304;
	color: #fff;
}
.form-login .checkbox,.form-login .form-login-heading {
	margin-bottom: 10px;
}
.form-login .checkbox {
	font-weight: 400;
}
.form-login input[type=text], .form-login input[type=password] {
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 43px;
}
.sidebar {
	background-color: #2F2F2F;
	bottom: 0;
	display: table-cell;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 202px;
}
.sidebar .logo {
	width: 100%;
	padding: 10px 20px;
	border-bottom: 1px solid #121212;
	box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
.inner .headNav {
	background-image: url("../images/diagmonds-paleblue.PNG");
}
.inner .headNav .topIcons {
	float: right;
	margin: 10px;
	font-weight: bold;
}
.inner .headNav .topIcons a {
	color: #ffffff;
}
.inner .headNav i {
	color: #A8A8A8;
	font-size: 20px;
	padding: 10px;
}
.content {
	padding: 0 20px;
	margin-top: 40px;
}
.pagination {
	margin-top: 0!important;
	float: right;
}
.col-md-12 form,.col-md-12 table {
	/*margin-top: 5px;*/
}
.notifications .panel-heading .panel-title,.ratepernight .panel-heading .panel-title,.reservations .panel-heading .panel-title,.revenue .panel-heading .panel-title,.roomnights .panel-heading .panel-title,.visits .panel-heading .panel-title {
	color: #fff;
}
.panel-body .visitor {
	float: right;
}
.panel-body .month {
	color: #959595;
	font-size: 18px;
}
.list-group li {
	color: #346b96;
}

.nav-tabs li a {
	background-color: #5c7375;
	color: #fff;
	outline: 0;
}
.nav-tabs li a:hover {
	background-color: #4d5f60;
	color: #fff;
	outline: 0;
}
.tab-content {
	background: #fff;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 15px 15px;
	margin-bottom: 20px;
}
.tab-content .tab-pane {
	/*overflow-y: auto;
	overflow-x: hidden;*/
}
.graphMarkers {
	margin: 0;
}
.graphMarkers thead {
	color: #959595;
}
.graphMarkers thead tr th {
	border: 0;
}
.graphMarkers thead th: first-child {
	text-align: left;
}
.graphMarkers thead th: last-child {
	text-align: right;
}
.addNewHead {
	color: #346b96;
	font-size: 16px;
	font-weight: 700;
}
.addPanel {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
	margin-bottom: 30px;
	overflow: auto;
}
.addPanel .addPolicyBtn {
	margin-top: 20px;
}
.panel-default>.panel-heading {
	/*background: #136F9E;*/
	/*color: #fff;*/
}
.panel-default>.panel-heading a,.panel-default>.panel-heading a: active {
	outline: 0;
	text-decoration: none;
}
.nav-tabs,.tab-content {
	min-width: 657px;
}
.policies {
	/*margin-top: 15px;*/
	position: relative;
}
.policies h4 {
	color: #346b96;
}
.policies .panel-heading {
	background: #ff8200;
}
.modal-body {
	/*overflow: visible;*/
}
.selectRoomType .dropdown-menu {
	/*position: relative;*/
}
tbody {
	/* background: #fff; */
}
tbody .full {
	background: #F2DEDE;
}
tbody .full a {
	color: #A94442;
	font-weight: 700;
}
tbody .dayLink {
	display: block;
	height: 100%;
}
tbody a {
	/*font-size: 16px;*/
}
tbody span {
	font-family: Ubuntu-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
}
.filters {
	margin: 20px 0;
}
.userPage {
	margin: 30px 0;
}
.userPage .panel-heading {
	background: #FF8200;
	color: #fff;
	border-radius: 0;
}
.userPage .panel-heading a {
	bottom: 18px;
	float: right;
	position: relative;
	color: #fff;
}
.panel-title>a {
	display: block;
}
.userIntro {
	color: #fff;
	font-family: Ubuntu-Bold;
}
.modal-content {
	border-radius: 0;
}
.modal-content .modal-header {
	background: #136F9E;
	color: #fff;
	text-transform: uppercase;
}
/*ADDED BY GIAN EGAMINO 08-27-2014*/
/*Table CSS*/

thead {
	background: #136F9E;
	color: #fff;
}
div[id*="tbl"] table:first-child tr + tr:hover, div[id*="tbl"] table:first-child tr + tr:nth-child(odd):hover{
	background: #FCF4D4;
	cursor: pointer;
}
div[id*="tbl"] table:first-child tr + tr:nth-child(odd){
	background: #F4F2F2;
	cursor: pointer;
}
div[id*="tbl"] table td{
	vertical-align: middle;
	padding: 5px;
}
div[id*="tbl"] table:last-child{
	border: 1px #ccc solid;
	margin-top: 15px;
	font-size: 13px;
	font-family: Arimo-Regular;
}
div[id*="tbl"] table:last-child tr:last-child{
	background: #F4F2F2;
}
div[id*="tbl"] table:last-child td{
	padding: 5px;
	text-align: center;
}
div[id*="tbl"] table:first-child input{
	font-size: 14px;
	font-family: Arimo-Regular;
}
.tableheader{
    background: #5c7375;
    color: #fff;
 }
.tableheader td{
	font-family: Ubuntu-Regular, Arial, sans-serif;
	font-size: 14px;
    border: none !important;
}
td[class*="tddelete"], td[class*="tdimg_emp"]{
	text-align: center;
}

/*Override Navigation Bar Style*/
.navbar { 
	border-radius: 0;
}
.navbar-inverse { 
	/*background-color: #526f8c;
	border-bottom: 3px #3d546b solid;*/
	background-color: #f5f5f5;
	border-bottom: 2px #ddd solid;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { 
	background-color: #e8e8e8;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #505E63}
.dropdown-menu { background-color: #FFFFFF;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #526f8c;}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { 
	/*border-color: #526f8c;*/
}
.navbar-inverse .navbar-brand { color: #494949;}
.navbar-inverse .navbar-brand:hover { color: #494949;}
.navbar-inverse .navbar-nav>li>a { color: #494949;}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #494949;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #494949;}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #494949;}
.dropdown-menu>li>a { color: #494949;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF;}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF;}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF;}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF;}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF;}

.menu-move{
	margin-left: 58px;
}
.header-content{
	color: #fff;
}
#logout-edit{
	font-size: 11px;
	color:#D7FC5D;
}
#logout-edit:hover{
	color:#E0F98B;
}
.header-img{
	margin-top: 15px;
	margin-bottom: 15px;
}


input[id*="pagenumber"], input[id*="filternumber"]{
	width: 50px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 2px 7px;
	text-align: center;
}
input[value*="Previous"], input[value*="Next"]{
	background: #136F9E;
	color: #fff;
	border: none;
	width: 70px;
	font-family: Ubuntu-Regular;
	border: 1px #116189 solid;
	border-radius: 3px;
	font-size: 12px;
	padding: 4px;
}
input[value*="Previous"]:hover, input[value*="Next"]:hover{
	background: #116189;
}
.btn{
	font-size: 13px;
}
.btn-primary{
	background: #136F9E;
	color: #fff;
	border-color: #116189;
}
.btn-primary:hover{
	background: #116189;
}
.btn-success{
	background: #149b5c;
	color: #fff;
	border-color: #158c54;
}
.btn-success:hover{
	background: #158c54;
}
.btn-warning{
	background: #eea236;
	color: #fff;
	border-color: #d89331;
}
.btn-warning:hover{
	background: #d89331;
}
i[class*="close"]{
	color: #EA4444;
}
i[class*="history"]{
	color: #136F9E;
}
i[class*="cog"]{
	color: #2182C6;
}
i[class*="check"]{
	color: #07BC19;
}

.modal-subhead{
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px #ccc solid;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #F4F4F4;
}

textarea{
	resize:none;
}

.each-img-panel{
    width: 133px;
    height: 130px;
    float: left;
    box-shadow: 0px 0px 2px 1px #ccc;
    border-radius: 10px;
    background: #F2F2F2;
}
.each-img-panel:hover{
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
    /*text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);*/
}
.menu-button-lnks a{
	text-decoration: none;
}
.pic-menu-space{
    width: 100%;
    height: 57px;
    margin-top: 20px;
    text-align: center;
}
.pic-menu-caption{
	width: 99%;
    color: #494949;
    text-align: center;
}
.modal-footer{
	border-top: none;
}
.payslip-header td{
	background: #136F9E !important;
	color: white;
	border: none !important;
	text-align: center; 
	font-size: 16px;
}
.total-payslip td{
	background: #d1d1d1 !important;
	border: none !important;
	font-family: Ubuntu-Bold;
}
.payslip-class table{
	font-size: 14px;
}
.payslip-class, .company-name{
	font-size: 33px;
}
.tbl-payslip-details{
	margin-bottom: 15px;
}
.tbl-payslip-details td{
	font-size: 18px;
	padding: 7px;
}
.added-total td{
	background-color:#fce79c;
}
.added-total-details td{
	background-color:#fffcc6;
}

/*Dashboard CSS*/
.full-name{
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 15px;
	text-align: center;
}
.emp-details{
	margin-bottom: 15px;
}
.emp-details div{
	font-size: 12px;
}
.birthday-div{
	height: 151px;
}
.birthday-celebrant{
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	float: left;
	width: 100%;
	cursor: pointer;
}
.birthday-celebrant:hover{
	background: #d8d8d8;
}
.birthday-celebrant div:first-child{
	float: left;
	width: 170px;
}
.birthday-celebrant div:last-child{
	float: right;
}
.birthday-limit-div{
	overflow-y: scroll;
	overflow-x: hidden;
	height: 108px;
	margin-top: -15px;
}
.panel-header-div{
	border-bottom: 1px #ddd solid;
}
.panel-header-div, .panel-recent-activities-header{
	float:left;
	width:100%;
	background: #F5F5F5;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.panel-header-title{
	margin:15px 0px 15px 15px;
	float:left;
}
.panel-header-buttons{
	margin:8px 7px 0px 0px;
	float:right;
}
.date-panel{
	position:absolute;
	right:7;
	top:5;
}
.posted-by{
	color: #8c8c8c;
}
.panel-main-size{
	height:314px;
}
.panel-scroll{
	height: 255px;
	overflow-y: scroll;
	overflow-x: hidden;
}
.panel-each-link:hover{
	background: #FCF4D4;
}
.panel-each-link{
	border-bottom: 1px #ddd solid;
	padding-top: 5px;
	padding-bottom: 5px;
}
.panel-each-audit-date{
	border-top: 1px #0e5477 solid;
	border-bottom: 1px #0e5477 solid;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #136F9E;
	color: #fff;
}
.panel-audit-pagination{
 	border-top: 1px #ddd solid;
 	border-bottom: 1px #ddd solid;
 	padding-top: 5px;
 	padding-bottom: 5px;
}
.panel-audit-trail ul li{
	padding-top: 5px;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.panel-sub-head{
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 15px;
	float: left;
	width:100%;
	background: #F5F5F5;
	border-top: 1px #ddd solid;
	border-bottom: 1px #ddd solid;
}
.panel-request-head{
	margin-top: -16px;
	margin-bottom: 15px;
	padding: 10 10 10 15;
	float: left;
	width:100%;
	background: #F5F5F5;
	border-top: 1px #ddd solid;
	border-bottom: 1px #ddd solid;
}
.obenefits-sub-head{
	padding: 15px;
	width: 100%;
	background: #F5F5F5;
	border-bottom: 1px #ddd solid;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.panel-header-title{
	margin:15px 0px 15px 15px;
	float:left;
}

.settings-header:first-child{
	margin-top: -15px;
}
.settings-header{
	background: #136F9E;
	color:#fff;
	margin: 15px 0 15px 0;
	padding:10 0px 10 15px;
}
/*CHOSEN CSS Override*/
.chzn-drop,.chzn-search input, .chzn-container, .chzn-container-single, .chzn-container-active{
    width: 100% !important;
}
.chzn-single{
    padding: 4px 12px !important;
    height: auto !important;
}
.chzn-single div b{
    margin-top: 5px !important;
}
.c-checkbox{
	position:absolute;
	margin-left:-20px !important;
}
.c-checkbox-cont{
	width: 36%;
}
.c-checkbox-cont div{
	float:left;
	padding-left: 20px;
	margin-left: 20px;
}
.c-checkbox-cont div:first-child{
	margin-left: 0px;
}
.c-form-header{
	border-top:1px #ccc solid;
	border-bottom:1px #ccc solid;
	padding: 10px 0 7px 0;
	margin-bottom:15px;
	background:#f4f4f4;
}
.file-details div:first-child{
	font-size: 22px;
	color: #136F9E;
}
.file-details div{
	font-size: 14px;
}
/*td[class*="tdupdate"], td[class*="tddelete"]{
	width: 35px;
}
.tddate{
	width: 9%;
}*/
.center-all{
	text-align: -webkit-center;
}
.delete-eq{
	color: red;
	cursor: pointer;
}
.delete-eq:hover{
	background: #ccc;
}
#equation-area .input-group-addon:first-child{
	width: 35px;
	color: #fff;
	font-family: Ubuntu-Bold;
	border: none;
}
#equation-area .input-group{
	z-index: 0;
	margin-bottom: 2px;
}
.add-bg{
	background: #08577f;
}
.sub-bg{
	background: #bc3203;
}
.mul-bg{
	background: #376803;
}
.divide-bg{
	background: #664003;
}
.total-amount-eq{
	margin-top: 10px;
	font-size: 25px;
}
.benefit-header-btns{
	background: #2c4051;
	padding: 15px; 
	margin: -15 -15 15 -15;
}
.add-eq{
	background: #08577f;
	border-color: #08577f;
	color: #fff;
}
.add-eq:hover, .add-eq:focus, .add-eq.focus, .add-eq:active, .add-eq.active, .open > .dropdown-toggle.add-eq{
	background: #064b6d;
	color: #fff;
}
.sub-eq{
	background: #BC3203;
	border-color: #BC3203;
	color: #fff;
}
.sub-eq:hover, .sub-eq:focus, .sub-eq.focus, .sub-eq:active, .sub-eq.active, .open > .dropdown-toggle.sub-eq{
	background: #a02a03;
	color: #fff;
}
.mul-eq{
	background: #376803;
	border-color: #376803;
	color: #fff;
}
.mul-eq:hover, .mul-eq:focus, .mul-eq.focus, .mul-eq:active, .mul-eq.active, .open > .dropdown-toggle.mul-eq{
	background: #294f02;
	color: #fff;
}
.divide-eq{
	background: #664003;
	border-color: #664003;
	color: #fff;
}
.divide-eq:hover, .divide-eq:focus, .divide-eq.focus, .divide-eq:active, .divide-eq.active, .open > .dropdown-toggle.divide-eq{
	background: #4f3001;
	color: #fff;
}

/*SIDEBAR*/
.side-bar-div a{
	text-decoration: none;
	color: black;
}
.single-link, .single-link-active{
	/*border-bottom: 1px #e2e2e2 solid;*/
	padding: 10px 15px;
	font-size: 12px;
	cursor: pointer;
}
.single-link-active{
	background: #dbf3ff;
	border-left: 2px #2f8ab7 solid;
}
.single-link:hover{
	background: #f2f2f2;
	border-left: 2px #2f8ab7 solid;
}
.link-heading{
	padding: 10px 15px;
	background: #116189;
	color: #fff;
	border: 1px #1A5F8B solid;
	border-top-left-radius: 3px; 
	border-top-right-radius: 3px; 
}
.breadcrumbs-style{
	background: #fff;
	border-color: #ddd;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	border: 1px solid transparent;
}
.breadcrumbs-style a{
	color: #2f8ab7;
}


.topnav {
  overflow: hidden;
  background-color: #fff7f7;
}

.topnav a {
  float: left;
  color: #292525;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}