html {
    position: relative;
    min-height: 100%;
    height: 100%;
}

body {
    font-size: 14px;
	height: calc(100% - 3.3em);
	height: -webkit-calc(100% - 3.3em);
    height: -moz-calc(100% - 3.3em);
    min-width: 58em;
	/* Margin bottom by footer height */
	/* margin-bottom: 3.3em; */
}
input {
	border: 1px solid #ccc;
	padding: 0.1em 0.3em;
}
textarea:disabled, 
input:disabled,
select:disabled {
	background-color: #eee;
}

::-webkit-input-placeholder { font-style: italic; color: #c6c6c6; text-overflow: ellipsis; opacity: 1; transition: opacity 0.3s ease; }
::-moz-placeholder          { font-style: italic; color: #c6c6c6; text-overflow: ellipsis; opacity: 1; transition: opacity 0.3s ease; }/* Firefox 19+ */
:-moz-placeholder           { font-style: italic; color: #c6c6c6; text-overflow: ellipsis; opacity: 1; transition: opacity 0.3s ease; }/* Firefox 18- */
:-ms-input-placeholder      { font-style: italic; color: #c6c6c6; text-overflow: ellipsis; opacity: 1; transition: opacity 0.3s ease; }
:focus::-webkit-input-placeholder	{ opacity: 0; transition: opacity 0.3s ease; }
:focus::-moz-placeholder			{ opacity: 0; transition: opacity 0.3s ease; }
:focus:-moz-placeholder				{ opacity: 0; transition: opacity 0.3s ease; }
:focus:-ms-input-placeholder		{ opacity: 0; transition: opacity 0.3s ease; }

#notif-wrapper {
	z-index: 3000;
	padding: 0;
	margin: 0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	text-align: center;
}
#notifies {
	display: inline-block;
	min-width: 300px;
}
#notifies div {
	padding: 0.3em 0.5em;
}

header {
    width: 100%;
    min-width: 58em;
    background: #02466b;
}

header div {
    display: inline-block;
    vertical-align: middle;
}

header div * {
    display: inline-block;
}

.header_menu {
    width: 100%;
    text-align: justify;
    padding: 0 1.6em 0 0;
}

.header_menu img {
	margin: 0 0.52%;
}

.header_menu_item {
	cursor: pointer;
    padding: 0.8em;
    color: #fff;
}

.header_menu_item_selected {
	cursor: default;
	padding: 0.8em;
    color: #fff;
    background: #e31e25;
}

.header_menu_userinfo {
    padding: 0.8em;
    color: #ffffff;
    float: right;
}

.header_menu_userinfo a {
	color: #ffffff;
}
.header_menu_userinfo select {
	background-color: #02466b;
}
#timezone option {
	display: block;
}

.hamburger,
.cross {
	width: 2em;
	padding: 0.4em;
	color: #fff;
	border: none;
	font-size: 1.4em;
	font-weight: bold;
	cursor: pointer;
}
.cross {
	font-size: 2em;
	width: 1.4em;
	padding: 0 0 0.1em 0.4em;
}

.hamburger:hover,
.header_menu_item:hover {
    color: #e31e25;
}

.menu {
  z-index: 990;
  font-weight: bold;
  font-size: 0.8em;
  width: 220px;
  background: #02466b;
  position: absolute;
  text-align: left;
  left: -220px;
}

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

.menu li {
  border-bottom: #1d1f20 1px solid;
}

.menu li:hover {
  background: #181818;
}

.menu a {
  display: block;
  padding: 1.5em 1em;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}

/*** Header menu for tabs ***/
.header_menu_left {
	cursor: pointer;
    padding: 0.4em;
    fill: #fff;
    color: #fff;
}
.header_menu_right {
    padding: 0.4em;
    color: #fff;
    fill: #fff;
    float: right;
}
.header_menu_left:hover,
.header_menu_right:hover {
    color: #e31e25;
	fill: #e31e25;
}
#header_menu_custom_info {
	color: #fff;
	padding: 0.4em 1.5em;
	font-weight: bold;
	font-size: 1.4em;
}
#header_menu_custom_info span {
	font-weight: normal;
	font-size: small;
	margin: 0 0 0 1em;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-width: 58em;
    height: 44px;
    padding: 0 0%;
	text-align: justify;
    background: #02466b;
    color: #2d6d90;
}

footer * {
	display: inline-block;
    vertical-align: middle;
}

footer span {
	margin-right: 0.5em;
	margin-left: 0.5em;
}

#copyrigth {
    margin: 0.1em 0.5em;
}

footer a {
    vertical-align: baseline;
}

footer a:hover {
	cursor: pointer;
	color: #2d6d90;
	text-decoration: none;
}



/*** Login form ***/
.error {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

.msg {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

#login-box {
	width: 400px;
	padding: 1em;
}

#login-box input[type="submit"] {
	float: right;
}

/*** Content ***/
.content {
    padding: 0 0%;
    margin: 0;
    white-space: nowrap;
    height: calc(100% - 3.1em);
    height: -webkit-calc(100% - 3.1em);
    height: -moz-calc(100% - 3.1em);
    background: #ffffff;
    color: #02466b;
}
.content td, th {
	padding: 0.5em;
}

#content_block {
    display: inline-block;
    margin: 0 0 -0.26em -0.26em;
    padding: 0 0.5em; 
    white-space: nowrap;
	width: 80%;
	height: 100%;
	vertical-align: top;
	overflow-y: auto; 
}

.tree_block {
    display: inline-block;
    margin-bottom: -0.25em;
    white-space: normal;
	width: 20%;
	min-width: 150px;
	height: 100%;
    padding: 0;
    margin: 0;
    border-right: 1px solid #e0e0e0;
	vertical-align: top;
}

.tree_menu {
	display: block;
	height: 2em;
    padding: 0;
    margin: 0;
    border-right: 1px solid #e0e0e0;
    background: #e6e6e6;
    text-align: right;
    white-space: nowrap;
}

.tree_menu li {
	display: inline-block;
	list-style: none;
	width: 2.2em;
	height: 100%;
}

.tree_menu li:after {
	display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: "";
}
	
.tree_menu_item {
    fill: #6b6b6b;
    color: #6b6b6b;
}

.tree_menu_item:hover,
.tree_menu_item_selected {
	cursor: pointer;
	background: #6b6b6b;
    fill: #e6e6e6;
    color: #e6e6e6;
}

.tree_icon_svg {
	display: inline-block;
    vertical-align: middle;
	width: 80%;
    height: 80%;
}

#jstree {
	display: block;
    height: calc(100% - 1.9em);
    height: -webkit-calc(100% - 1.9em);
    height: -moz-calc(100% - 1.9em);
	overflow: auto;
	vertical-align: top;
}

.no_checkbox > i.jstree-checkbox {
	display:none;
}

.circle {
	display: inline-block;
	margin-left: 0.2em;
	width: 20px;
	height: 20px;
	border: 1px solid;
	border-radius: 10px;
	line-height: 18px;
	text-align: center;
	background-color: #2e6da4;
	color: #f8f8f8;
	font-family: bold;
	font-size: 12px;
}

.circleLong {
	display: inline-block;
	margin-left: 0.2em;
	width: 24px;
	height: 24px;
	border: 1px solid;
	border-radius: 12px;
	line-height: 24px;
	text-align: center;
	background-color: #2e6da4;
	color: #f8f8f8;
	font-family: bold;
	font-size: 12px;
}


/*** Forms (user,folder,login) ***/
#user_form button,
#folder_form button,
#imap_parser_form button,
#parser_info button,
#witsml_loader_info button,
#witsml_sender_info button,
#login-box input[type="submit"] {
	line-height: 20px;
	margin: 1em 0;
	padding: 0.5em 1em;
	border: none;
	background: #e6e6e6;
	color: #6b6b6b;
}
#user_form button:hover,
#folder_form button:hover,
#imap_parser_form button:hover,
#parser_info button:hover,
#witsml_loader_info button:hover,
#witsml_sender_info button:hover,
#login-box input[type="submit"]:hover {
	cursor: pointer;
	background: #024669;
	color: #ffffff;
}

#ff_sblock,
#ipf_sblock,
#pf_sblock,
#wl_sblock,
#ws_sblock,
#uf_sblock {
	text-align: left;
}

#uf_eblock a,
#ff_eblock a,
#ipf_eblock a,
#pf_eblock a,
#wl_eblock a,
#ws_eblock a,
#login-box a {
	display: block;
    margin: 1em 0.5em;
	text-decoration: underline;
    color: #02466b;
}
#uf_sblock a,
#ipf_sblock a,
#pf_sblock a,
#wl_sblock a,
#ws_sblock a,
#ff_sblock a {
    margin: 1em 2em;
	text-decoration: underline;
    color: #02466b;
}

#uf_eblock a:hover,
#ff_eblock a:hover,
#ipf_eblock a:hover,
#pf_eblock a:hover,
#wl_eblock a:hover,
#ws_eblock a:hover,
#uf_sblock a:hover,
#ff_sblock a:hover,
#ipf_sblock a:hover,
#pf_sblock a:hover,
#wl_sblock a:hover,
#ws_sblock a:hover,
#login-box a:hover {
	cursor: pointer;
}
#parser_info button[disabled],
#witsml_loader_info button[disabled],
#witsml_sender_info button[disabled] {
	cursor: default;
	background: #e6e6e6;
	color: #c6c6c6;
}


/*** User form ***/
#user_form table th,
#add_acl_item_form table th {
	background: #F5F5F5;
}

#user_form table button {
	margin: 0;
	padding: 0.1em 1em;
}

#user_form table select:disabled,
#user_form table select[disabled],
#user_form table button:disabled,
#user_form table button[disabled] {
	cursor: default;
	background: #e6e6e6;
	color: #c6c6c6;
}

#user_form label {
	/*margin: 0 1em 0 0;*/
	display: block;
}

#user_form input[type="text"],
#reportTypes {
	width: 100%;
}

#removeReportType,
#addReportType {
	margin-top: 0.5em !important;
	width: 49%;
}

/*** Loading animation ***/
.loadingImgOvrl {
      background: #000;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='128px' height='128px' viewBox='0 0 128 128'><g><path d='M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z' fill='%23ffffff' fill-opacity='1'/><animateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='600ms' repeatCount='indefinite'></animateTransform></g></svg>");
      background-position: center center;
      background-repeat: no-repeat;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1000;
      opacity: .5;
}
.loadingImgOvrlSmall {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='128px' height='128px' viewBox='0 0 128 128'><g><path d='M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z' fill='%236b6b6b' fill-opacity='1'/><animateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='600ms' repeatCount='indefinite'></animateTransform></g></svg>");
      background-position: center center;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1020;
      opacity: 0.5;
}

/*** Modal edit window ***/
.em_overlay {
	background: #000;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	opacity: .5;
}
.em_visible {
	background: #fff;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	z-index: 1010;
	width: auto;
	padding: 0px;
}
.edit_modal_button {
	float: right;
	line-height: 20px;
	padding: 0.5em 1em;
	margin: 0 0 0 1em;
	border: none;
	background: #e6e6e6;
	color: #6b6b6b;
}
.edit_modal_a {
	display: block;
	float: right;
    margin: 0.5em 1em;
	text-decoration: underline;
    color: #02466b;
}
.edit_modal_button:hover {
	cursor: pointer;
	background: #024669;
	color: #ffffff;
	/*text-decoration: underline;*/
}
.edit_modal_a:hover {
	cursor: pointer;
}
.edit_modal_button:disabled,
#edit_modal select:disabled {
	cursor: default;
	background: #e6e6e6;
	color: #c6c6c6;
}
#edit_modal td {
	padding: 0.5em;
}
#edit_modal form {
	margin-bottom: 0;
}
.em_title {
	padding: 0.5em;
	color: #ffffff;
	background: #024669;
}
#em_content {
	padding: 1em;
}


/*** WellTracking ***/
.well_tracking_inline {
	display: inline-block;
	vertical-align: top;
	margin: 0.5em;
	/*border: 1px solid black;*/
}


/*** Well Info in monitoring ***/
.well_info_form {
	padding: 0 0 1em 0;
}
.well_info_header,
.well_info_header_non_selectable {
	background: #e6e6e6;
	color: #6b6b6b;
	padding: 0;
	margin: 0;
	white-space: normal;
}
.well_info_header:hover {
	cursor: pointer;
}
.well_info_header_non_selectable:hover {
	cursor: default;
}
.well_info_body {
	border: 1px solid #c6c6c6;
	color: #6b6b6b;
}
.wi_title {
	padding: 0.5em;
	font-weight: bold;
}
.wi_title_active {
	background: #024669;
	color: #ffffff;
}

.well_info_header .wi_settings,
.well_info_header_non_selectable .wi_settings {
	float: right;
	border-left: 1px solid #c6c6c6;
	padding: 0 0.5em;
	font-weight: bold;
}
.wi_options,
.wi_options_active {
	float: left;
	border-left: 1px solid #c6c6c6;
	padding: 0 0.5em;
	font-weight: bold;
}
.well_info_header .wi_settings:hover,
.well_info_header_non_selectable .wi_settings:hover,
.well_info_header.wi_title_active .wi_options_active:hover {
	cursor: pointer;
	background: #024669;
	color: #ffffff;
}
.wi_options_active,
.wi_options:hover {
	cursor: pointer;
	background: #e31e25;
	color: #ffffff;
}

.well_info_header.wi_title_active .wi_settings:hover,
.well_info_header .wi_options_active:hover {
	cursor: pointer;
	background: #e6e6e6;
	color: #6b6b6b;
}

.well_info_form table {
	width: 100%;
}
.well_info_form table,
.well_info_form th,
.well_info_form td {
	font-size: small;
	color: #6b6b6b;
	border: 1px solid #c6c6c6;
}
.well_info_form th {
	background: #F5F5F5;
}
.well_info_form th,
.well_info_form td {
	padding: 0.1em 0.3em;
}

/*** WITS Session info ***/
#session_info {
	display: inline-block;
}
.wits_session_table {
	width: 100%;
	font-size: small;
	border: 1px solid #c6c6c6;
}
.wits_session_table th {
	background: #F5F5F5;
}
.wits_session_table th,
.wits_session_table td {
	padding: 0.1em 0.3em;
	cursor: default;
}
.session_selected,
.session_selected select {
	background: #024669 !important;
	color: #ffffff !important;
}
#sessionFilter {
	margin: 0;
	font-size: small;
	text-align: right;
}
.sessionFilter_item {
	display: inline-block;
	margin: 0.1em 0 0.1em 1em;
}
#sessionFilter input[type="submit"],
#session_info button {
	line-height: 20px;
	padding: 0.1em 1em;
	border: none;
	background: #e6e6e6;
	color: #6b6b6b;
}
#sessionFilter input[type="submit"]:hover,
#session_info button:hover {
	cursor: pointer;
	background: #024669;
	color: #ffffff;
}
#session_info button[disabled] {
	cursor: default;
	background: #e6e6e6;
	color: #c6c6c6;
}

/*** WITS Packets info ***/
#packets_info {
	display: inline-block;
}
.wits_packets_table {
	table-layout: fixed;
	font-size: small;
	border: 1px solid #c6c6c6;
	white-space: nowrap;
	min-width: 100%;
}
.wits_packets_table thead {
	background: #F5F5F5;
}
.wits_packets_table th,
.wits_packets_table td {
	padding: 0.1em 0.3em;
	cursor: default;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wits_packets_table tbody {
	overflow-y: auto;
	overflow-x: hidden;
}
.wits_packets_template_select {
	text-align: right;
	padding-top: 0.5em;
}
.wits_packets_template_select * {
	display: inline-block;
}
#packets_info form {
	margin-top: 0.5em;
}
#packets_info input[type="submit"] {
	line-height: 20px;
	padding: 0.1em 1em;
	border: none;
	background: #e6e6e6;
	color: #6b6b6b;
}
#packets_info input[type="submit"]:hover {
	cursor: pointer;
	background: #024669;
	color: #ffffff;
}

/*** Modal branding ***/
.modal-header-branding {
	color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #02466b;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}


/*** Right sidebar ***/
.nav-right {
    width: 280px;
    min-width: 280px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    right: -280px;
    padding: 15px 20px;
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    background: #02466b;
    z-index: 990;
}


.nav-right-toggle {
    position: absolute;
    right: 280px;
    top: 0.0em;
    padding: 0.1em 0.1em 0.19em 0.1em;
    background: inherit;
    color: #fff;
    cursor: pointer;
    font-size: 2.4em;
    font-stretch: expanded;
    line-height: 1;
    z-index: 991;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

.nav-right-toggle:after {
    content: '\00AB';
    text-decoration: none;
}

.nav-right-toggle:hover {
    color: #e31e25;
}

[id='nav-toggle'] {
    position: absolute;
    display: none;
}

[id='nav-toggle']:checked ~ .nav-right > .nav-right-toggle {
    left: auto;
    right: 2px;
    top: 0.4em;
}


[id='nav-toggle']:checked ~ .nav-right {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
    overflow-x: hidden;
}


[id='nav-toggle']:checked ~ header, 
[id='nav-toggle']:checked ~ div.content,
[id='nav-toggle']:checked ~ footer {
    -webkit-transform: translateX(-280px);
    -moz-transform: translateX(-280px);
    transform: translateX(-280px);
}

header, div.content, footer {
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s;
}

[id='nav-toggle']:checked ~ .nav-right > .nav-right-toggle:after {
    content: '\00BB';
}

.nav-right h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav-right h2 > svg {
	fill: #dadada;
	width: 20px;
	height: 20px;
	vertical-align: sub;
}

.nav-right table {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1.2em;
}

[id='nav-toggle']:checked ~ .nav-right h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

.nav-right > table {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 2.5;
	color: #fff;
}

.nav-right > table tr {
    opacity: 0;
	-webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav-right > ul > li,
[id='nav-toggle']:checked ~ .nav-right > table tr {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


.nav-right > table tr:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav-right > table tr:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav-right > table tr:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav-right > table tr:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav-right > table tr:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav-right > table tr:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}

.nav-right > table tr:nth-child(8) {
    -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
    transition: opacity .5s .8s, transform .5s .8s;
}

 .nav-right > table select,
 .nav-right > table input {
	color: #dadada;
	background: #02466b;
	line-height: normal;
 }

.nav-right > table a {
    display: inline;
    position: relative;
    padding: 0;
    color: #dadada;
    text-decoration: none;
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


.nav-right > table a:hover,
.nav-right > table a:focus {
    color: #e31e25;
    padding-left: 10px;
    padding-right: 5px;
}


.nav-right > table a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav-right > table a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #fff;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}


.nav-right > table a:hover:before {
    width: 0%;
    background: #fff;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav-right > table a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}