@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
	margin: 0;
	padding: 0;
	outline: none;
}

ul {
	margin: 0;
	padding: 0;
}

body {
	font-size: 14px;
	color: #212121;
	background-color: #e8ecf3;
	font-family: 'Poppins', sans-serif;
	color: #505d69;
}

a {
	color: #fff;
}
a:hover {
	color: #fff;
}

a:active,
a:focus {
	outline: 0 !important;
	border: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	line-height: normal;
}

a,
a:hover,
a:focus,
a:active {
	outline: none;
	text-decoration: none;
}

button,
button:focus,
button:active,
button:hover {
	outline: none;
}

p,
ul {
	margin: 0;
}

ul {
	list-style: none;
}

/* HEADER */

header {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 10001;
	background: rgb(66,79,176);
    background: linear-gradient(0deg, rgba(66,79,176,1) 0%, rgba(91,106,223,1) 100%);
}

header .wrapper {
	display: flex;
	align-items: center;
	padding: 10px 30px;
}

header a {
	color: #fff;
	font-size: 14px;
	padding: 5px 10px;
	border-radius: 5px;
}

header a:hover {
	background-color: rgba(255, 255, 255, .1);
	color: #fff;
}

.document-viewer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	margin-top: 50px;
	height: calc(100vh - 50px);
	position: relative;
}

.document-viewer #iframe-container {
	width: 100%;
	height: 100%;
}

.document-viewer iframe {
	width: 100%;
	height: 100%;
}

.document-viewer .sign-wrapper {
	position: fixed;
	left: 50%;
	bottom: 70px;
	transform: translateX(-50%);
	z-index: 10001;
	background-color: #fff;
	border-radius: 30px;
	width: 20%;
	min-width: 250px;
	padding: 10px;
	box-shadow: 0 0 60px rgb(14 42 71 / 25%);
	display: none;
}

.document-viewer .sign-wrapper.width-2 {
	width: 40%;
	min-width: 450px;
}

.document-viewer .sign-wrapper .step {
	display: none;
}

.document-viewer .sign-wrapper a.sign {
	display: block;
	width: 100%;
	background-color: #f7f7f9;
	border-radius: 30px;
	padding: 10px 10px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	background-color: #b8c83c;
	color: #fff;
}

.document-viewer .loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 30px 50px;
	border-radius: 30px;
}

.document-viewer .loading h1 {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: #424fb0;
	margin-bottom: 30px;
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #b8c83c;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}


/* AUTHORIZATION */

.authorization {
	height: 100vh;
	background: linear-gradient(0deg, rgba(66,79,176,1) 0%, rgba(91,106,223,1) 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow-x: hidden;
}

.authorization h1 {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.authorization .content {
	padding: 0 50px;
}

.authorization .logo {
	width: 130px;
	margin: 0 auto;
}

.authorization .logo img {
	width: 100%;
}

.authorization .steps {
	display: flex;
	align-items: center;
}

.authorization .step {
	display: none;
	position: relative;
	right: 0;
	transform: translateX(-150%);
}

.authorization .step[data-step="1"] {
	display: block;
	transform: translateX(0px);
}

.authorization .step.hide {
	display: none;
	animation-name: step-hide;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes step-hide {
	0% {
		opacity: 1;
		transform: translateX(0px);
	}
	100% {
		opacity: 0;
		transform: translateX(-150%);
	}
}

.authorization .step.show {
	display: block;
	animation-name: step-show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	right: 0px;
}

@keyframes step-show {
	0% {
		opacity: 0;
		transform: translateX(150%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

/* QUESTIONNAIRE */

.questionnaire .item {
	display: none;
}

.questionnaire .item h2 {
	font-size: 22px;
    font-weight: 700;
    color: #000;
}

.questionnaire .item h3 {
	font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.questionnaire .item:first-child {
	display: block;
}

.questionnaire .item .form-space.hidden {
	display: none;
}

.questionnaire .item .form-space label {
	display: block;
	color: #000;
}

.questionnaire .item .form-space input[type="text"],
.questionnaire .item .form-space input[type="number"] {
	border: 1px solid #999;
}

.questionnaire .item .form-space select {
	display: block;
	width: 100%;
	border: 1px solid #999;
	height: 40px;
}

/* FORMS */

.form-space {
	margin-bottom: 20px;
}

.form-space:last-child {
	margin-bottom: 0px;
}

.form-space label {
	color: #fff;
	margin-bottom: 5px;
	font-weight: 300;
}

.form-space input {
	display: block;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #fff;
	border: 0;
	background-color: rgba(255, 255, 255, .15);
	padding: 15px;
	color: #000;
	font-size: 16px;
}

input::placeholder { 
	color: #000;
}

/* HELLO */

.hello {
	background: rgb(66,79,176);
	background: linear-gradient(0deg, rgba(66,79,176,1) 0%, rgba(91,106,223,1) 100%);
	padding-top: 20px;
	padding-bottom: 80px;
}

.hello h1 {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}

.hello .owl-carousel .item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, .07);
	border-radius: 10px;
	padding: 10px 20px;
}

.hello .owl-carousel .item span {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 13px;
	font-weight: 400;
	color: #efefef;
}

.owl-carousel h4 {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.hello .my-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.hello .my-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	width: 100%;
	height: 80px;
	background: rgba(255, 255, 255, .07);
	padding: 10px;
	border-radius: 10px;
	transition: .1s;
}

.hello .my-icons a:hover {
	background: rgba(255, 255, 255, .2);
}

.hello .my-icons a span {
	display: block;
	margin-top: 10px;
	color: #fff;
	font-size: 13px;
	line-height: 13px;
	font-weight: 500;
}

.hello .my-icons i {
	color: #fff;
	font-size: 30px;
	line-height: 30px;
}

/* INSTALMENTS */
.documents-table a {
	color: #000;
}

/* Braki */
.lack {
	color: #eb0000;
}
/* Uzupełnione */
.filled { 
	color: #37c71e;
}

/* SUPPORT */
.client-support {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.client-support .item {
    text-align: center;
    background: #5663c3e0;
    color: white;
    border-radius: 10px;
    padding: 10px;
}
 
.client-support .item h4 {
	color: white;
}

.client-support .item p {
	margin-top: 5px;
}

.company-data {
	text-align: center;
    margin: 100px 0pc 40px 0px;
}

.company-data h4 {
	margin-bottom: 15px;
}

.client-user {
	margin-top: 20px; 
}

/* BUTTONS */

.main {
	background-color: #fff;
	padding: 20px;
	margin-top: -50px;
	border-radius: 20px;
}

.main h1 {
	font-size: 24px;
	font-weight: 700;
	color: #424fb0;
}

.main h4 {
	font-size: 16px;
	font-weight: 600;
	color: #212121;
}

/* BUTTONS */

.btn {
	border-radius: 5px;
	color: #ffff;
}

.btn-1 {
	background-color: #fff;
	color: #424fb0;
	font-weight: 700;
	font-size: 14px;
	padding: 15px 35px;
	text-transform: uppercase;
}

.btn-2 {
	background-color: #b8c83c;
    color: #ffffff;
	padding: 15px 35px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
}

/* OTHERS */

.hamburger {
	margin-bottom: 20px;
	display: flex;
    justify-content: space-between;
}

.hamburger .line {
	width: 30px;
	height: 2px;
	background-color: #ecf0f1;
	display: block;
	margin: 7px 0;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hamburger .line:nth-child(2) {
	width: 21px;
}

.hamburger:hover {
	cursor: pointer;
}

.hamburger .menu a {
	color: #ffff;
	margin-right: 6px;
}

.hamburger .menu {
	display:none;
	align-items: center;
}

.hamburger .menu.active{
	display:flex;
}

/* ELEVEN */

#hamburger-11 {
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#hamburger-11.is-active {
	animation: smallbig 0.6s forwards;
}

@keyframes smallbig {
	0%, 100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
}

#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3) {
	-webkit-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

#hamburger-11.is-active .line:nth-child(2) {
	opacity: 0;
}

#hamburger-11.is-active .line:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

#hamburger-11.is-active .line:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.separator {
	border-bottom: 1px #e7e7e7 solid;
	margin: 20px 0px;
}

.client-company {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.client-company .text-center {
	display: flex;
    flex-direction: column;
}

.client-company .text-center button {
	margin-bottom: 20px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.client-company .text-center button img {
	margin-right: 15px;
}

.topbar-menu {
	display: flex;
}

.topbar-menu {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt50 { margin-top: 50px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }

@media (min-width: 0px) and (max-width: 991px) {
	
	header .wrapper {
		display: flex;
		align-items: center;
		padding: 10px 10px;
	}
	
	.document-viewer .sign-wrapper {
		width: 90%;
		min-width: 90%;
	}
	
	.document-viewer .sign-wrapper.width-2 {
		width: 90%;
		max-width: 90%;
		min-width: 90%;
	}
	
	.document-viewer .loading {
		padding: 20px 30px;
	}

	.document-viewer .loading h1 {
		font-size: 18px;
		margin-bottom: 20px;
	}

}