html {
  height: 100%;
  scroll-behavior: smooth;
}

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,600,700,900);
 
body {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  background-color: #e4f3f6;
  min-height:100vh;
}

main { flex-grow:1; }

h1, h2, h3, h4, h5 {
	font-family: 'Poppins', sans-serif;
}
h4 {
font-weight:400 !important;
font-size:1.2rem;
}
h4 span {
font-size:.8rem;
color:#a2a2a3;
letter-spacing:.5px;
}
h5 {
font-weight:600 !important;
font-size:1.2rem;
margin:0 0 5px 0;
}
span.subtitle {
font-size:.75em;
color:#a0a0a3;
display:block !important;
letter-spacing:.5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc !important;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #ccc;
}
.btn-payroll {
	background-color: #242733;
	border-color:#242733;
	font-size:1.1rem !important;
}
.btn-payroll .fas {
    font-size: .8rem !important;
}

i.close-news {
	cursor: pointer;
	position:fixed;
	right:30px;
	top:30px;
}

.rocket-head {
	background-image: linear-gradient(45deg, #ac0d2b 0, #e91039 50%, #000 110%);
	padding-top: 1em;
	/*padding-bottom:180px;*/
	padding-bottom:0;
	position:relative;
}
.rocket-head h1 { 
	font-family: "Lato", sans-serif !important; 
	color:white; 
	font-weight: 900 !important; 
	margin-top: 3rem;
	font-size: 3.5em;
}
@media (min-width: 992px) {
	.rocket-head h1 { margin-top: 2em; }
}
.rocket-head p {
	font-size: 1.1em;
    margin: 15px 0;
    font-weight: 200;
    letter-spacing: 1px;
}
.rocket-head .nav-link {
	font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
	color: #ffeae5 !important;
	letter-spacing: 1px;
	padding-left:1.25em !important; 
	padding-right:1.25em !important; 
}
.shapes-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.static-shape.ghost-shape-1 {
    top: 0;
    -webkit-transform: translate3D(30%, -93%, 0) skewX(35deg) rotate(-12deg);
    transform: translate3D(30%, -93%, 0) skewX(35deg) rotate(-12deg);
    background-color: #e56357;
    max-height: 560px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.white-angle {
    z-index: 1000;
    height: 200px;
    /*height: 15vh;*/
    width: 100%;
}

.main-nav li {
width:210px;
margin:0px 1px 0 0;
padding:30px 15px 25px 15px;
border-right:solid 1px #f6f4f4;
border-bottom:solid 3px #FFF;
}

.navbar-expand-md .main-nav li {
	width:auto;
	border:none;
	margin:0;
	padding: 20px 15px 20px 15px;
}
@media (min-width: 768px) {
	.navbar-expand-md .main-nav li {
		width:210px;
		border-right:solid 1px #f6f4f4;
		border-bottom:solid 3px #FFF;
		margin:0px 1px 0 0;
		padding:30px 15px 25px 15px;
	}
}

.main-nav .active, .main-nav li:hover {
	border-bottom: solid 3px #e20d33 !important;
}
.main-nav li a.nav-link {
	font-size:1.15rem;
font-weight:500;
letter-spacing:.5px;
color:#000 !important;
 }
.main-nav li a.nav-link small {
font-weight:400;
font-size:.65em;
color:#a0a0a3;
display:block;
margin-top:5px;
letter-spacing:.5px;
 }
.rp-login {
	background-image: linear-gradient(45deg, #ac0d2b 0, #e91039 50%, #000 110%);
}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
/*.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}*/

/* bootstrap extension */
.rounded-top-0 { border-top-left-radius:0!important; border-top-right-radius:0!important; }
.rounded-left-0 { border-top-left-radius:0!important; border-bottom-left-radius:0!important; }
.rounded-right-0 { border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
.rounded-bottom-0 { border-bottom-left-radius:0!important; border-bottom-right-radius:0!important; }
.rounded-xl { border-radius:10px!important; }
.mb-n1px { margin-bottom: -1px; }

#date-modify { 
	display:none;
}
#paystub {
	border: solid 15px white;
}
.trial-info {
	background:#fdd9dd;
	padding:4px 16px;
	border-radius:6px;
	color:red;
	font-size:.9rem;
}
.trial-info:hover {
	text-decoration:none;
	color:white;
	background:#fa7d89;
}
.bg-staff-0 {
	background:#fff;
	padding:4px 16px;
border-radius:6px;
}
.bg-staff-1 {
	background:#d6e8d5;
	padding:4px 16px;
border-radius:6px;
}
.bg-staff-2 {
	background:#fcdef1;
	padding:4px 16px;
border-radius:6px;
}
.bg-staff-3 {
	background:#d1e3ea;
	padding:4px 16px;
border-radius:6px;
}
.bg-staff-4 {
	background:#f2f1c8;
	padding:4px 16px;
border-radius:6px;
}
.bg-staff-5 {
	background:#dccae5;
	padding:4px 16px;
	border-radius:6px;
}
.bg-staff-6 {
	background:#fae7cc;
	padding:4px 16px;
	border-radius:6px;
}
.bg-staff-7 {
	background:#f2f1c8;
	padding:4px 16px;
	border-radius:6px;
}
.bg-staff-8 {
	background:#f9fe71;
	padding:4px 16px;
	border-radius:6px;
}

.staff-initial {
	font-size: 1.1rem;
    border-radius: 30px;
    text-align: center;
    padding: 11px 0 0 0;
    width: 47px;
    height: 47px;
    display: block;
	cursor: default;
}

.bg-warning {
	background-color:#f9f6de !important;
}

.table .thead-light th {
	background:white !important;
	text-transform: uppercase;
	font-size:.7rem;
	color:#BBB !important;
	border-top: none;
	border-bottom: solid 1px #BBB;
	letter-spacing: .5px;
}
.table td {
	border-top: solid 1px #edeff4;
	font-size:.85rem;
}
.td-stub td {
	padding: .35rem !important;
}
.payroll-form label.small { 
	font-size:75%; 
	margin:0px; 
}
.payroll-form .form-control, .payroll-form .input-group-text { 
	font-size:.85rem; 
}
.payroll-form .form-control {
	border: 1px solid #e9ecef;
}
.ribbon-box {
  position: relative;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
}
/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #217d35;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #30a64a;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
  bottom: -10px;
  left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.ribbon-bottom-left::before {
  bottom: 0;
  right: 0;
}
.ribbon-bottom-left::after {
  top: 0;
  left: 0;
}
.ribbon-bottom-left span {
  right: -25px;
  bottom: 30px;
  transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
  bottom: -10px;
  right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.ribbon-bottom-right::before {
  bottom: 0;
  left: 0;
}
.ribbon-bottom-right::after {
  top: 0;
  right: 0;
}
.ribbon-bottom-right span {
  left: -25px;
  bottom: 30px;
  transform: rotate(-225deg);
}

.card-header .btn { text-align:left; }

.page-info {
	font-size:.9em;
}

/* animated loading overlay */
.spinner-border {
    animation: spinner-border 1s linear infinite!important;
}
.loading {
	position: absolute;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.2);
	opacity:0;
	transition: opacity .2s ease-in-out;
}
.loading.show {
	opacity:1;
}
.form-control.is-loading {
    padding-right: calc(1.5em + 0.75rem);
    background-image: url('/img/loading-grey.svg?1');
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.r-sm-btn {
	font-size:.75em;
	padding:4px 10px;
}
.btn-action {
	background: #25a2b7;
    color: white;
    font-size: .77rem;
    padding: 7px 15px;
    letter-spacing: .5px;
    border-radius: 8px;
    font-weight: 600;
}
.btn-action:hover {
	color:white;
	background:#46bacd;
}

.white-readonly {
background-color:white !important;
cursor:pointer;
}

#news-fixed {
	display:none;
width:90%;
background:white;
position:fixed;
right:0px;
padding:30px 0 0 30px;
height:100vh;
z-index:1000;
box-shadow: -.3px 0px 10px 1px rgba(0, 0, 0, 0.15);
}
@media (min-width: 692px) {
#news-fixed {
width:500px;
}
}


.timeline {
    border-left: 3px solid #727cf5;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(114, 124, 245, 0.09);
    margin: 0 0 0 100px;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: .83em;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width: 80%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: .8rem;
    margin-bottom: 10px;
}

.timeline .event {
    border-bottom: 1px dashed #e8ebf1;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -197px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    -webkit-box-shadow: 0 0 0 3px #727cf5;
    box-shadow: 0 0 0 3px #727cf5;
    left: -55.8px;
    background: #fff;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid #727cf5;
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}

.zi-1 { z-index: 1; }

/* Animation CSS for browsers that don't support animated SVGs */
@supports (-ms-ime-align: auto) {
    /* EDGE CSS styles go here */
	.loading>.loading-icon {
		-webkit-animation: loading 1s infinite steps(12, end);
		-moz-animation: loading 1s infinite steps(12, end);
	}

	@-webkit-keyframes loading {
		from {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(359deg);
			-moz-transform: rotate(359deg);
		}
	}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
	.loading>.loading-icon {
		-webkit-animation: loading 1s infinite steps(12, end);
		-moz-animation: loading 1s infinite steps(12, end);
	}

	@-webkit-keyframes loading {
		from {
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(359deg);
			-moz-transform: rotate(359deg);
		}
	}
}