/*============================================================+
// File name   : style.css
// Begin       : 2021-01-20
// Last Update : 2021-10-14
//
// Description : CSS for all pages
//============================================================+

**
* Stylesheet
* @author Ralph Rezende Larsen
* @since 2021-01-20
*/


/**********************************************************************************************************************/
/* General                                                                                                            */
/**********************************************************************************************************************/
body {
    /*font-family: arial;*/
	/*font-size: 1.5rem;*/
}
h1 {
	font-family: frutiger !important;
	font-size: 2.3rem !important;
	color:rgb(0, 68, 99) !important;
	margin-top: 10px;
}
h2 {
	font-family: verdana !important;
	font-size: 1.9rem !important;
	color:rgb(0, 157, 224) !important;
	margin-top: 10px;
}
h3 {
	font-family: arial !important;
	font-size: 1.4rem !important;
	color:rgb(0, 157, 224) !important;
	margin-top: 10px;
}

label {
	width: 200px;
	height: auto !important;
}

.container-sheet th {
    text-align: center;
}

@media (min-width : 768px) {
	label {
		height: initial;
	}
}
@media (max-width : 767px) {
	.paycheck-row label{
		max-width: 300px;
	}
}
@media (min-width : 500px) {
	label {
		width: initial;
		height: auto !important;
	}
}

@media (max-width : 360px) {
	h1 {
		font-size: 1.9rem !important;
	}
	h2 {
		font-size: 1.6rem !important;
	}
	h3 {
		font-size: 1.3rem !important;
	}
	label {
		width: 100px;
		font-size: 0.8rem !important;
		word-break: break-word;
	}
	label.enter-total {
		font-size: 1rem !important;
		width: 150px;
	}
}

@media (max-width : 1514px) {
	.container-sheet {
		display: none;
	}
}
@media (min-width : 1515px) {
	.container-paycheck {
		display: none;
	}
}

hr {
    border-top: 1px solid rgb(0, 68, 99) !important;
}

.left-label {
	min-width: 250px;
}
 
.dropdown-item.active {
	background-color: rgb(0, 157, 224);
	color: #fff !important;
}

#termination-date .date, #start-date .date {
	display: inline-block;
    width: 150px;
    position: relative;
    top: 23px;
}

.autonumeric-hide {
	position: fixed !important;
	bottom: -10000px;
}

/*#termination-date .datepicker input {
	background-color: rgb(0, 157, 224);
}*/

#paycheck h1, #paycheck h2 {
	color:rgb(0, 157, 224) !important;
}
#paycheck h3 {
	color:#fff !important;
}
#paycheck {
	position:relative;
}
/*.paycheck.sheet {
	margin-left: 10px;
	margin-right: 10px;
}*/
.sheet-label {
	padding-right: 10px;
	white-space: nowrap;
}
.paycheck-row {
	margin-left: -15px;
    padding-left: 15px;
	margin-right: -15px;
    padding-right: 15px;
}
.paycheck-row label{
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	padding-top: 4px;
	background-color: transparent !important;
}
.paycheck-row span{
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	padding-top: 4px;
	background-color: transparent !important;
}
.paycheck-row input{
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	margin-right: -3px;
	padding-top: 2px;
    padding-bottom: 2px;
	background-color: white !important;
}

.paycheck-parts :nth-child(even){
  background-color: rgb(0, 68, 99);
}
.paycheck-parts :nth-child(odd){
  background-color: rgb(0, 76, 106);
}
.paycheck-parts input{
  background-color: #fff !important;
}
.paycheck-parts > div{
  height: 36px;
}
.paycheck-parts label {
  margin-top: 6px;
  background-color: transparent !important;
}
.paycheck-parts span {
  margin-top: 3px;
  background-color: transparent !important;
}
.paycheck-parts input{
  margin-top: 3px;
}

.paycheck-page .paycheck-row:nth-child(even){
  background-color: rgb(0, 157, 224);
}
.paycheck-page .paycheck-row:nth-child(odd){
  background-color: rgb(0, 162, 231);
}

.height-36 {
	height: 36px;
}

#total h1, #total h2, #total h3 {
	color:rgb(0, 68, 99) !important;
}

#result-calculation header h1, #result-calculation header h2, #result-calculation header h3 {
	color:rgb(0, 68, 99) !important;
}

/*#formula-month h1, #formula-month h2, #formula-month h3 {
	color:rgb(0, 68, 99) !important;
}*/

#month-calculation h1, #month-calculation h2, #month-calculation h3 {
	color:rgb(0, 68, 99) !important;
}

#year-calculation h1, #year-calculation h2, #year-calculation h3 {
	color:rgb(0, 68, 99) !important;
}

a {
    /*color: #0056b3 !important;*/
    color: #000 !important;
}

a.btn{
    color: #fff !important;
}
 
.header {
	font-weight: 500;
	color: rgb(0, 68, 99) !important;
}

.cursor-pointer {
	cursor: pointer;
}
.width-100pct {
	width: 100% !important;
}

.width-80 {
	width: 80px !important;
}

.width-90 {
	width: 90px !important;
}

.width-40 {
	width: 40px !important;
}

.width-50 {
	width: 50px !important;
}

.margin-bottom-0 label, .margin-bottom-0 span{
	margin-bottom: 0;
}

.margin-left-10 {
	margin-left: 10px;
}

.bg-color-white {
	background-color: #fff !important;
}
		
.type-float {
	border: transparent 1px solid;
    border-top: transparent 2px solid;
    background-color: transparent;
    color: #fff;
	margin-right: -18px;
}
		
.type-float:focus-visible {
	outline: none;
}

#current-increased-holiday-supplement button, #pension-rate button {
	cursor: text;
	padding: 0.2rem 0.75rem;
}

#pension-rate {
	display: inline-block;
	margin-left: 40px;
}

.float-left {
	float: left !important;
}

.float-right {
	float: right !important;
}

/*.container {
	width: 1200px;
	margin: 0 auto 0 auto;
}*/

.inline-block {
	display: inline-block !important;
}

.hide {
	display: none !important;
}

/*.show {
	display: initial;
}*/

.error {
	color: #aa0000 !important;
}

.sub-result {
	/*min-width: 100px;
	display: inline-block;
	margin: 5px 0px 5px 5px;*/
	float: right;
	text-align: right;
}

.result {
	/*min-width: 100px;
	display: inline-block;
	margin: 5px 0px 5px 5px;*/
	float: right;
	text-align: right;
}
}

.text-align-right {
	text-align: right !important;
}

.unit-text {
	float: right;
	width: 20px;
	text-align: right;
	height: 30px;
    padding-top: 3px;
	margin-left: 5px;
}

.unit-text-day {
	width: 41px;
}

.unit-text-day-dynamic {
	width: 56px;
}

.unit-text-percent-dynamic {
	width: 34px;
}

#remove-data, #new-calculation {
	border: 3px solid rgb(0, 157, 224);
    padding: 0.4rem 1rem;
}

#set-salary-all {
	border: 2px solid rgb(0, 157, 224);
    padding: 0.125rem 0.5rem;
    margin-right: 40px;
	margin-top: 3px;
}

#set-adds-all {
	border: 2px solid rgb(0, 157, 224);
    padding: 0.125rem 0.5rem;
    margin-right: 40px;
	margin-top: 3px;
}

.unit-text.sub-result, .unit-text.result {
    margin-top: -3px;
}
 
.template-calc-label {
}
 
.template-calc-sign {
	float: right;
	/*position: absolute;
    bottom: 0;
    right: 0.75rem;*/
}
 
.template-calc-value {
	float: right;
	/*position: absolute;
    bottom: 0;
    right: 0.75rem;*/
}
 
.template-formula-label {
}
 
.template-formula-value {
	float: right;
	overflow-x: visible;
    white-space: nowrap;
}
 
.template-text-value {
}
 
.template-textbold-value {
	font-weight: 500;
	color:rgb(0, 68, 99) !important;
}
 
.template-textitalic-value {
	font-style: italic;
	color: #999
}
 
.template-h1-value {
}
 
.template-h2-value {
}
 
.template-h3-value {
}
 
label {
    height: 30px;
}

/*.left-column label {
	width: 350px;
}

.right-column label {
	width: 270px;
}*/

input {
	width: 100px;
	float: right;
	text-align: right;
}

.input-sheet {
	width: 100%;
	max-width: 150px;
	min-width: 75px;
	float: right;
	text-align: right;
}

.input-sheet-day {
	width: 50px;
	float: right;
	text-align: right;
}

/* Remove arross */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

select {
	/*width: 105px;
    height: 22px;
	margin: 5px 0px 5px 5px;*/
}

.margin-top-10 {
	margin-top: 10px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}

.padding-top-15 {
	padding-top: 15px;
}

.padding-bottom-15 {
	padding-bottom: 15px;
}

.padding-top-25 {
	padding-top: 25px;
}

.margin-top-30 {
	margin-top: 30px;
}

.margin-top-10 {
	margin-bottom: 10px;
}

.hk-bg-dark-blue {
	background-color: rgb(0, 68, 99);
}

.hk-bg-middle-blue {
	background-color: rgb(0, 117, 163);
}

.hk-light-blue {
	background-color: rgb(0, 157, 224);
}

.btn {
	padding: 0.2rem 0.75rem !important;
}

.btn-select {
	padding: 0.375rem 0.75rem !important;
}

.hk-btn-dark-blue {
	color: #fff;
    background-color: rgb(0, 68, 99) !important;
    border-color: rgb(0, 68, 99);
}
.hk-btn-dark-blue:hover, .hk-btn-dark-blue:focus, .hk-btn-dark-blue:active, .hk-btn-dark-blue.active, .open>.dropdown-toggle.hk-btn-dark-blue {
    color: #fff;
}

.hk-btn-light-blue {
	color: #fff;
    background-color: rgb(0, 157, 224) !important;
    border-color: rgb(0, 157, 224);
}
.hk-btn-light-blue-customize {
    border-color: rgb(0, 157, 224);
}
.hk-btn-light-blue:hover, .hk-btn-light-blue:focus, .hk-btn-light-blue:active, .hk-btn-light-blue.active, .open>.dropdown-toggle.hk-btn-light-blue {
    color: #fff;
}

.hk-border-dark-blue {
    border: 3px solid rgb(0, 68, 99);
}

/*.hk-border-light-blue {
    border-color: #A5CF4D;
}*/

.hk-border-rounded {
	border-radius: 10px;
}

.hk-light-blue {
	color: rgb(0, 157, 224);
}

.hk-dark-blue {
    color:  rgb(0, 68, 99);
}

.color-white {
	color: #fff;
}

.color-black {
	color: #000;
}

.inner-container {
	/*text-align: left;
	margin: 30px 12px 30px 12px;*/
}

button {
	/*padding: 10px 20px;
    font-size: 16px;*/
}

.month-browser-left {
	padding: 15px 40px 15px 15px;
    margin-right: -30px;
	position: relative;
	z-index: 100;
}

.month-browser-right {
	padding: 15px 15px 15px 40px;
    margin-left: -30px;
	position: relative;
	z-index: 100;
}

.month-browser-text {
	z-index: 0;
    width: 120px;
    text-align: center;
}

#month-browser i {
	color: #ccc;
}

.caret-active {
	color: #000 !important;
}

#result-area label, #result-area span,#result-area p {
	color:#fff;
}

#formula-month label,
#formula-month span,
#formula-month p,
#formula-year label,
#formula-year span,
#formula-year p {
	color:#000;
}
#formula-month span.template-textitalic-value,
#formula-year span.template-textitalic-value {
	color:rgb(0, 157, 224);
}


/**********************************************************************************************************************/
/* Header                                                                                                             */
/**********************************************************************************************************************/
#logo div:first-child {
	text-align: center;
}

#logo .header-logo {
	height: 113px;
	width: 90px;
	display: inline-block;
	margin: 30px auto 0 auto;
}

#logo .header-logo-default {
	background-image: url(/assets/images/header-logo-default.jpg);
	background-repeat: no-repeat;
	background-size: 90px 113px;
}

#logo .header-logo-private {
	background-image: url(/assets/images/header-logo-private.jpg);
	background-repeat: no-repeat;
	background-size: 90px 113px;
}

#logo .header-logo-trade {
	background-image: url(/assets/images/header-logo-trade.jpg);
	background-repeat: no-repeat;
	background-size: 90px 113px;
}

#logo .social-header {
	padding-left: 40px;
	width: 120px;
	display: inline-block;
	position: relative;
	bottom: 8px;
}

#logo .social-header a {
	margin:0 3px 0 3px;
	color:rgb(0, 68, 99) !important;
}


/**********************************************************************************************************************/
/* Footer                                                                                                             */
/**********************************************************************************************************************/
#footer {
	text-align: center;
    height: 70px;
    position: fixed;
    left: 0;
    Bottom: 0;
    width: 100%;
    z-index: 1000;
}

#footer span:nth-child(2) {
	position:relative;
	top: -15px;
	left: 5px;
}

#footer a{
	color: rgb(0, 157, 224) !important;
    margin: 0 3px 0 3px;
}

#footer .footer-logo {
	background-image: url(/assets/images/footer-logo.jpg);
	height: 70px;
	width: 123px;
	display: inline-block;
	position: relative;
	left: -23px;
}

.footer-spacer {
	margin-bottom: 150px;
}

@media (min-width : 768px) {
	#footer .footer-logo {
		position: initial;
		left: initial;
	}

	#footer span:nth-child(2) {
		left: 25px;
	}
}

/**********************************************************************************************************************/
/* Cookie directive                                                                                                   */
/**********************************************************************************************************************/
#cookie_directive_container #cookie_accept {
	margin-top:0px;
}

#cookie_directive_container {
	padding-top: 4px;
    /*padding-bottom: 10px;*/
    background-color: rgb(0, 68, 99);
    height: 120px;
    z-index: 2000;
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
}

#cookie_directive_container #cookie_accept p {
    padding-top   : 7px;
    margin-bottom : 7px;
}

#cookie_accept {
	margin: 0 auto 0 auto;
}

#cookie_accept > a {
	display: inline-block;
    float: right;
    margin-top: 20px;
}

#cookie_accept p a{
	color:rgb(0, 157, 224) !important;
}

#cookie_accept p {
	display: inline-block;
	color: #fff !important;
	width: 70%;
}

#cookie_directive_container {
    background-color:rgb(0, 68, 99);
}

.navbar {
    padding: 0;
}	

@media (min-width : 500px) {
	#cookie_directive_container {
		height: 95px;
	}
}

@media (min-width : 768px) {
	#cookie_accept > a {
		margin-top: 13px;
	}
	
	#cookie_directive_container {
		height: 70px;
	}
}


/**********************************************************************************************************************/
/* List                                                                                                            */
/**********************************************************************************************************************/
.list-logo {
	height: 60px;
	width: 56px;
	display: inline-block;
	margin: 30px auto 0 auto;
}	

.list-logo.list-logo-private{
	background-image: url(/assets/images/list-logo-private.jpg);
	background-repeat: no-repeat;
	background-size: 56px 60px;

}	

.list-logo.list-logo-trade{
	background-image: url(/assets/images/list-logo-trade.jpg);
	background-repeat: no-repeat;
	background-size: 56px 60px;

}

#department a {
	width: 100%;
    text-align: center;
}
	
@media (min-width : 768px) {
	#logo .social-header {
		width: inherit;
	}
}


/**********************************************************************************************************************/
/* Arrows                                                                                                             */
/**********************************************************************************************************************/
@media (min-width : 992px) {
	#paycheck::after {
		content: "";
		display: block;
		width: 0; 
		height: 0; 
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid rgb(0, 68, 99); 
		position: absolute;
		top: 79px;
		right: -35px;
	}

	#result::after {
		content: "";
		display: block;
		width: 0; 
		height: 0; 
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid rgb(0, 157, 224); 
		position: absolute;
		top: 124px;
		right: -20px;
	}

	#month-calculation::before {
		content: "";
		display: block;
		width: 0; 
		height: 0; 
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-right: 20px solid rgb(0, 68, 99); 
		position: absolute;
		top: 529px;
		left: -3px;
	}
	
	#month-calculation::after {
		content: "";
		display: block;
		width: 0; 
		height: 0; 
		border-top: 18px solid transparent;
		border-bottom: 18px solid transparent;
		border-right: 18px solid #fff; 
		position: absolute;
		top: 531px;
		left: 1px;
	}
}


/**********************************************************************************************************************/
/* HK Popover                                                                                                         */
/**********************************************************************************************************************/
.hk-popover-toggle {
	position: static;
}

.hk-popover-arrows {
	position: absolute;
}

.hk-popover {
	position: absolute;
	width: 100%;
    left: 0;
}

.hk-popover .hk-popover-inner {
	position: absolute;
    padding: 10px;
    bottom: 120px;
	/*left: 0;*/
    right: 0;
    background-color: rgb(255,255,255) !important;
    color: rgb(0, 68, 99);
    border: 3px solid rgb(0, 157, 224);
    border-radius: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 16px !important;
	color:rgb(0, 68, 99) !important;
	font-weight: 400;
}

.hk-popover-arrows::before {
	content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 20px solid rgb(0, 157, 224);
    position: absolute;
	top: -31px;
    left: -3px;
}

.hk-popover-arrows::after {
	content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 18px solid transparent;
    border-top: 18px solid rgb(255, 255, 255);
    position: absolute;
    top: -36px;
    left: 0px;
	z-index: 1000;
}

@media (min-width: 768px) {
	
}