:root {
	--k8-pnb-font-size-base: 1rem;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);    
  }
  to {
    transform: translateY(0);    
  }
}

@keyframes slideUpCenter {
  from {
    transform: translateX(-50%) translateY(100%);    
  }
  to {
    transform: translateX(-50%) translateY(0);    
  }
}

.k8-pnb-main {
	position: fixed;
	bottom: 20px;	
	width: 90%;	
	background-color: #FFFFFF;
	padding: 20px;
	box-sizing: border-box;
	z-index: 999;	
	text-align: center;
	border-radius: 12px;	
	display: none;
	grid-row-gap: 10px;
	border-style: solid;		
}

@media(min-width: 768px) {
	.k8-pnb-main--custom-width {
		width: var(--k8-pnb-width);
	}
}

.k8-pnb-main--show {
	display: grid;
}

.k8-pnb-is-hidden {
	display: none;
}

.k8-pnb-main--bottom-right {
	right: 20px;
}
.k8-pnb-main--bottom-left {
	left: 20px;
	right: auto;
}
.k8-pnb-main--bottom-center {
	left: 50%;
	transform: translateX(-50%);
}
.k8-pnb-main--animate {
	animation: slideUp .6s ease-out forwards;
}
.k8-pnb-main--bottom-center.k8-pnb-main--animate {
	animation: slideUpCenter .6s ease-out forwards;
}

.k8-pnb-main p {
	margin: 0;
	padding: 0;
	font-size: var(--k8-pnb-font-size-base);
	color: #222;
}


/* inner styling */

.k8-pnb-main__header {
	display: flex;
	>* {
		flex: 1 0 0;
	}

	.k8-pnb-main__header-logo {}

	.k8-pnb-main__header-title {
		p {
			font-size: 16px;
			font-weight: 500;
		}
	}
	.k8-pnb-main__header-close {			
		svg {
			display: block;
			margin-left: auto;
			color: #000;
			height: 20px;
			width: 20px;
			cursor: pointer;			
		}
		svg:hover {
			opacity: .85;
		}
	}
}

.k8-pnb-main__message {
	p {
		font-size: 12px !important;
	}
}

.k8-pnb-main__button-wrap {
	
	.k8-pnb-main__button {
		outline: 0;
		border: 0;
		padding: 10px;
		border-radius: 6px;
		width: 100%;
		cursor: pointer;
	}
	.k8-pnb-main__button:hover {
		opacity: .9;
	}
}

.k8-pnb-main__link-text {
	a {
		font-size: 12px;
		text-decoration: underline;
	}
}