//
// Wispotter Stylesheet v365.0.1
//

//
// i8 320 - iX 375 - iPlus 414 --- sm 575 - md 768 - lg 992 - xl 1200
//

// Settings

$assetPath : "/_assets/";

// Overridden Values

/*
$breakpoint-small:                               480px !default;
$breakpoint-medium:                              768px !default;
$breakpoint-large:                               960px !default;
$breakpoint-xlarge:                              1220px !default;

$breakpoint-mini-max:                            ($breakpoint-small - 1) !default;
$breakpoint-small-max:                           ($breakpoint-medium - 1) !default;
$breakpoint-medium-max:                          ($breakpoint-large - 1) !default;
$breakpoint-large-max:                           ($breakpoint-xlarge - 1) !default;


@media (max-width: $breakpoint-medium) {
	
}
@media (min-width: $breakpoint-medium) {
	
}

*/

// Import Defaults

@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// Mixin Overrides

@mixin hook-card() { color: #000; }

@mixin placeholder {
    &::-webkit-input-placeholder {@content}
    &:-moz-placeholder           {@content}
    &::-moz-placeholder          {@content}
    &:-ms-input-placeholder      {@content}  
}

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// Main Imports

@import "uikit/src/scss/uikit-theme.scss";

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

@import url("../fonts/awesome/css/all.min.css");

// Custom Colors

$color-wispotter: #6f1988;
$color-wipurple: #662D91;
$color-wipurple-type: #EFDBFF;

$color-client: #00704a;

$color-red: #AF474A;
$color-red-matte: #831E22;

$color-grey: #333;
$color-grey-border: #e6e6e6;

$color-type: #333;
$color-type-title: #A08E7F;
$color-type-title-dark: #815E40;
$color-type-title-darker: #805D40;
$color-type-dark: #999;

$color-bg: #FFF;
$color-bg-darker: #F3F0EC;
$color-bg-light: #F2EFEB;
$color-bg-middle: #DDD3C0;

$color-curtain: #DBDBDB;

$color-white: #fff;
$color-black: #000;

$static-white: #fff;
$static-black: #000;
$static-green: #4E8B43;
$static-yellow: #e3b200;
$static-red: #E26765;

$static-connected: #4CD964;


/*

a {
	&:hover {
		text-decoration: none !important;
		color: $color-type;
	}
}

*/

// Fonts

$font-stack: "Quicksand",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

// Global Hacks
html {
	background: $color-bg;
}
.body, header .container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}
.wi-p {
  flex: 1 0 auto;
}
.wi-pd {
  flex-shrink: 0;
}
* {
    font-family: $font-stack;
    text-transform: none !important;
    select:focus {
	    border-color: $color-red !important;
	}
    input:focus {
	    border-color: $color-red !important;
	}
}
h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge {
	font-family: $font-stack;
}
.select2-selection__rendered {
	font-family: $font-stack;
}
::selection {
	background: rgba($color-type-title, .2) !important;
	border-radius: 4px !important;
	color: $color-red !important;
}
a {
	&:hover {
		color: $color-red;
	}
}
.uk-grid-smaller, .uk-grid-column-smaller {
	margin-left:-8px
}

.uk-grid-smaller > *, .uk-grid-column-smaller > * {
	padding-left:6px
}

.uk-grid + .uk-grid-smaller, .uk-grid + .uk-grid-row-smaller, .uk-grid-smaller > .uk-grid-margin, .uk-grid-row-smaller > .uk-grid-margin, * + .uk-grid-margin-smaller {
	margin-top:6px
}



[data-svg="facebook"] {
    fill:#3b5998;
    svg {
	    color: #3b5998;
    }
}
[data-svg="instagram"] {
    fill:#c32aa3;
    svg {
	    color: #c32aa3;
    }
}
[data-svg="pinterest"] {
    fill:#bd081c;
    svg {
	    color: #bd081c;
    }
}
[data-svg="youtube"] {
    fill:#ff0000;
    svg {
	    color: #ff0000;
    }
}
[data-svg="twitter"] {
    fill:#1DA1F2;
    svg {
	    color: #1DA1F2;
    }
}
[data-svg="linkedin"] {
    fill:#007BB5;
    svg {
	    color: #007BB5;
    }
}
[data-svg="whatsapp"] {
    fill:#25D366;
    svg {
	    color: #25D366;
    }
}

.uk-list-inline {
	padding: 0 10px;
	margin-top: 0;
	li {
    list-style: none;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
	    a {
		    height: 24px;
		    background: $static-white;
		    color: $color-type;
		    font-weight: 500;
		    display: flex;
		    align-items: center;
		    font-size: 14px;
		    padding-left: 10px;
		    padding-right: 10px;
		    border-radius: 8px;
	    }
	}
}

// Styles

footer {
	// padding-bottom: 110px;
}

.wi-header {
	height: 50px;
	background-image: url(../images/header-bg.svg);
	width: 100%;
	.hud {
		height: 30px;
		width: calc(100% - 100px);
		background: $color-wipurple;
		border-radius: 0 0 10px 10px;
		display: inline-block;
		color: $static-white;
		font-size: 10px;
		line-height: 28px;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 2px;
		a {
			color: rgba($static-white, .5);
			text-decoration: underline;
			&:hover {
				color: rgba($static-white, .75);
				text-decoration: none;
			}
		}
		.logo-wrapper {
			padding-left: 0;
			img {
				height: 15px;
			}
			svg, .inj {
				margin-left: 8px;
				cursor: pointer;
				height: 16px;
			}
		}
		&.connected {
			color: $static-connected;
		}
		.error {
			// TODO
		}
	}
	.lf, .rg {
		width: 35px;
		display: inline-block;
	}
	.drawer {
		padding: 15px;
		background: linear-gradient(180deg, #3B0D5E 0%, #662D91 100%);
		.user {
			.avatar {
				height: 62px;
				width: 62px;
				display: block;
				border-radius: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				border: 1px solid #662D91;
				box-sizing: border-box;
			}
			.name {
				color: $color-wipurple-type;
				font-size: 18px;
				font-weight: 500;
			}
			.edit {
				line-height: 1rem;
				a {
					color: $color-wipurple-type;
					font-size: 11px;
				}
			}
		}
		.nav {
			padding-top: 20px;
			.icon {
				width: 20px;
				text-align: center;
			}
			a.light {
				font-size: 12px;
				padding-left: 12px;
				padding-right: 12px;
				text-align: left !important;
				width: 100%;
				border-radius: 8px;
				background: $color-wipurple;
				color: $color-wipurple-type;
				&:hover {
					background: lighten($color-wipurple, 10%);
					color: #fff;
					// -webkit-box-shadow: 0 0 4px 0 lighten($color-wipurple, 15%);
					// box-shadow: 0 0 4px 0 lighten($color-wipurple, 15%);
				}
				.title {
					padding-left: 10px;
				}
				.count {
					span {
						padding: 4px 6px;
						border-radius: 6px;
						background: darken($color-wipurple, 10%);;
					}
				}
			}
			a.dark {
				font-size: 12px;
				padding-left: 12px;
				padding-right: 12px;
				text-align: left !important;
				width: 100%;
				border-radius: 8px;
				background: darken($color-wipurple, 10%);
				color: $color-wipurple-type;
				&:hover {
					background: lighten($color-wipurple, 10%);
					color: #fff;
				}
				.title {
					padding-left: 10px;
				}
				.count {
					span {
						padding: 4px 6px;
						border-radius: 6px;
						background: darken($color-wipurple, 20%);;
					}
				}
			}
		}
		.version {
			text-align: center;
			a, span {
				font-size: 10px !important;
				color: lighten($color-wipurple, 35%);
			}
			a {
				color: lighten($color-wipurple, 35%);
				text-decoration: none;
				line-height: 1.2em;
				border-bottom: 1px solid lighten($color-wipurple, 15%);
				&:hover {
					color: lighten($color-wipurple, 50%);
					text-decoration: none;
					border-bottom: none;
				}
			}
			.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
				content: "•";
				margin: 0 5px;
				font-size: .5rem;
				color: lighten($color-wipurple, 35%);
			}
			.uk-breadcrumb {
				margin-bottom: 0;
			}
		}
	}
}

.wi-logo {
	padding: 0 20px;
	.square {
		display: block;
		width: 100%;
		height: 90px;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.horizontal {
		height: 30px;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.vertical {
		height: 130px;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}
}

.wi-intro {
	min-height: 100vh;
	background: linear-gradient(180deg, 
		#FFFFFF 0.03%, 
		#F0F6F4 7.48%, 
		#D4E4DF 55.09%);
		display: flex;
	.loading {
		flex-grow: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		width: 50%;
		height: 50vh;
		color: $color-client;
		.message {
			margin-bottom: 30px;
		}
	}
	.logged-in {
		flex-grow: 1;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		width: 50%;
		height: 50vh;
		color: $color-client;
		.message {
			margin-bottom: 30px;
		}
	}
}

.wi-content {
	padding: 30px 10px 110px;
	background: linear-gradient(180deg, 
		#FFFFFF 0.03%, 
		#F0F6F4 7.48%, 
		#D4E4DF 55.09%);
	.slider {
		margin-bottom: 20px;
		.item {
			display: block;
			border: 1px solid rgba($color-client, .2);
			width: 100%;
			padding-bottom: 56.25%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			border-radius: 15px;
		}
	}
	.survey {
		margin-bottom: 20px;
		background: $color-bg;
		border-radius: 15px;
		color: $color-client !important;
		.begin, .step, .end {
			width: 100%;
			padding: 20px;
			.hashtag {
				text-align: center;
				a {
					color: $color-client;
					font-weight: 500;
					font-size: 14px;
					line-height: 17px;
					&:hover {
						color: darken($color-client, 10%);
					}
				}
			}
			.question {
				text-align: center;
				color: $color-client;
				font-weight: normal;
				font-size: 24px;
				line-height: 30px;
				margin-top: 10px;
				margin-bottom: 20px;
				p {
					
				}
			}
			.disclaimer {
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				line-height: 17px;
				text-align: center;
				color: $color-client;
				margin-bottom: 20px;
				p {
					margin: 10px auto;
					width: 90%;
				}
			}
			.agreement {
				padding: 15px;
				height: 100px !important;
				min-height: 100px !important;
				background: rgba($color-client, .1);
				border: 2px solid rgba($color-client, .15);
				box-sizing: border-box;
				color: $color-client;
				font-size: 11px;
				border-radius: 8px;
			}
		}
		.uk-dotnav>.uk-active>* {
			background-color: rgba($color-client, 40%);
		}
		.uk-dotnav>*>:hover, .uk-dotnav>*>:focus {
			background-color: rgba($color-client, 20%);
		}
		.uk-dotnav>*>* {
			border-color: rgba($color-client, 20%);
		}
	}
	.facebook {
		margin-bottom: 20px;
		background: url(/_assets/images/bg-facebook.svg), rgba($color-client, 0.15);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: contain;
		border-radius: 15px;
		color: $color-client;
		padding: 10px;
		.title {
			font-weight: 500;
			font-size: 24px;
			line-height: 30px;
			text-align: center;
			margin: 10px auto;
		}
		.info {
			margin: 0 auto 20px;
			width: 90%;
			font-weight: 500;
			font-size: 11px;
			line-height: 14px;
			text-align: center;
		}
		.box {
			iframe {
				border-radius: 8px;
			}
		}
	}
	.button-wrapper {
		text-align: center;
		.rating {
			margin: 0 auto;
			width: 100%;
			direction: rtl;
			unicode-bidi: bidi-override;
			color: #ddd;
			input {
				display: none;
			}
			label:hover,
			label:hover ~ label,
			input:checked + label,
			input:checked + label ~ label {
				color: $color-client;
				cursor: pointer;
			}
		}
		.choice {
			margin: 0 auto;
			width: 100%;
			color: #ddd;
			input {
				display: none;
			}
			label:hover,
			input:checked {
				color: $color-client;
				cursor: pointer;
			}
		}
	}
	.input-wrapper {
		textarea {
			background: #FFFFFF;
			border: 2px solid rgba($color-client, 0.1);
			box-sizing: border-box;
			border-radius: 8px;
			color: $color-client !important;
			&:focus {
				border: 2px solid rgba($color-client, 0.2);
			}
		}
	}
}

.wi-bar {
	text-align: center;
	height: 65px;
	display: block;
	background: $static-white;
	border-radius: 28px;
	margin: 0 10px 10px 10px;
	padding: 10px;
	.uk-grid>* {
		padding: 0 !important;
	}
	.wrapper {
		display: flex;
		justify-content: space-between;
		.wi-button {
			display: inline-flex;
			color: $color-client;
			&.active {
				background: rgba($color-client, .1);
				&:hover {
					cursor: default;
					background: rgba($color-client, .1);
				}
			}
			&:hover {
				background: rgba($color-client, .05);
			}
		}
	}
}

.wi-button {
	
	&.wi-button-round {
		align-items: center;
		justify-content: center;
		display: flex;
		width: 66px;
		height: 66px;
		border-radius: 18px;
	}
	&.wi-button-icon {
		align-items: center;
		justify-content: center;
		display: flex;
		width: 48px;
		height: 48px;
		border: none;
		color: $color-client !important;
		background: transparent;
		cursor: pointer;
		font-size: 48px;
		margin-top: 12px;
		svg {
			fill: $color-client;
			color: $color-client;
		}
		&.single {
			margin-left: auto;
			margin-right: auto;
		}
	}
	&.wi-button-icon-wtext {
		align-items: center;
		justify-content: center;
		display: flex;
		width: auto;
		padding-left: 12px;
		padding-right: 12px;
		height: 48px;
		border: none;
		color: $color-client !important;
		background: transparent;
		cursor: pointer;
		font-size: 48px;
		margin-top: 12px;
		svg {
			fill: $color-client;
			color: $color-client;
		}
		&.single {
			margin-left: auto;
			margin-right: auto;
		}
	}
	&.wi-button-survey {
		background: rgba($color-client, 6%);
		border-radius: 8px;
		color: $color-client;
		&:hover {
			background: rgba($color-client, 12%);
		}
		&.yes {
			background: rgba($color-client, 0.80);
			color: $color-white;
			&:hover {
				background: rgba($color-client, 1);
			}
		}
		&.no {
			background: rgba($color-black, 0.75);
			color: $color-white;
			&:hover {
				background: rgba($color-black, 1);
			}
		}
	}
}
.uk-button {
	&.uk-button-wi {
		color: $static-white;
		background: $color-client;
		border-radius: 12px;
		font-size: 18px;
		&:hover {
			background: darken($color-client, .2);
		}
	}
}