/* 3. External Components */
/* 3.1. Simple jQuery Modal */
.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: calc(100vw + 1px);
	height: 100%;
	overflow: auto;
	z-index: 1;
	padding: 20px;
	box-sizing: border-box;
	background-color: var(--lfa-bg-blocker);
	text-align: center
}
.blocker:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em
}
.blocker.behind {
	background-color: transparent
}
.modal {
	display: none;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	max-width: 500px;
	box-sizing: border-box;
	width: 90%;
	background: #fff;
	padding: 15px 30px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	text-align: left
}
.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')
}
.modal-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #111;
	height: 20px
}
.modal-spinner>div {
	border-radius: 100px;
	background-color: #fff;
	height: 20px;
	width: 2px;
	margin: 0 1px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out
}
.modal-spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}
.modal-spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s
}
.modal-spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s
}
@-webkit-keyframes sk-stretchdelay {
	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.5)
	}
	20% {
		-webkit-transform: scaleY(1.0)
	}
}
@keyframes sk-stretchdelay {
	0%,
	40%,
	100% {
		transform: scaleY(0.5);
		-webkit-transform: scaleY(0.5)
	}
	20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0)
	}
}

.jquery-modal {
	&.blocker {
		z-index:11;
		padding:40px;
	}
	&.blocker.blocker--full {
		padding:0;
	}

	> .modal {
		z-index:9;
		width:100%;
		max-width:610px;
		position:relative;
		padding:0;
		border-radius:10px;
		min-height:calc(96px + 102px);
		max-height: calc(100% - 160px);
		overflow:hidden;
		background: var(--lfa-bg-2);

		> .inner {

			> .modal__head {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:51px;
				background:transparent;
				border-bottom: var(--lfa-border);
				border-radius: 10px 10px 0 0;

				h2, h3, h4 {
					margin:0;
					padding:10px 15px;
					line-height:32px;
					font-size:1.4rem;
				}
				a.close-modal {
					top: 10px;
					right: 10px;
				}
			}
			> .modal__body {
				max-height: calc(100vh - 160px - 184px);
				min-height: 96px;
				overflow-y: auto;
				overflow-x:hidden;
				padding: 10px 15px;
				margin: 52px 0;
				font-size:.95rem;
				background:var(--lfa-bg-2);

				h3, h4 {
					margin:10px 0;
					font-size:1rem;
				}
				p.lead {
					font-size:.9rem;
					margin:0 0 20px 0;
					color:var(--lfa-gray-2);
				}
				p {font-size:.9rem;margin: 0 0 10px 0;}
			}
			> .modal__foot {
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:52px;
				background:var(--lfa-bg-2);
				border-top: var(--lfa-border);
				border-radius: 0 0 10px 10px;

				> a {
					display: block;
					padding: 10px 20px;
					text-align: center;
					font-size: 1rem;
					color: var(--lfa-red-2);
					line-height: 30px;
					font-weight: 500;
          text-transform: uppercase;
					cursor:pointer;
					
					&:hover {
						color:var(--lfa-red-3);
					}
				}
			}
		}

		> .close-modal {
			top: 0px;
			right: 0px;
			background:transparent;
			font-size:0;
			text-indent: 0;
			width:52px;
			height:52px;

			&::before {
				width:52px;
				height:52px;
				display:block;
				position:absolute;
				top:0;
				right:0;
				content:"✕";
				color: var(--lfa-gray-2);
				font-size:1.4rem;
				line-height:50px;
				text-align:center;
				font-weight:700;
			}

			&:hover::before {
				color: var(--lfa-red-2);
			}
		}
	}
}
.jquery-modal .modal[data-modal-id="1"],
.jquery-modal .modal[data-modal-id="5"] {
	width:400px;
	max-width:400px;
	
	> .inner > .modal__body {
		padding:10px 0;
	}
	.a2a-wrap {
				margin-bottom:30px;
				
				.a2a_kit {
					white-space:nowrap;
					overflow:hidden;
					padding: 10px 27px 0 25px;
					margin:0;
					height: 102px;
    			max-height: 102px;
					
					&.a2a_kit--slider {
						overflow-x: auto;
    				overflow-y: hidden;
    				scrollbar-width:none;
    				-ms-overflow-style: none;
    				
    				&::-webkit-scrollbar { display: none; }
    				
						.slick-prev,
						.slick-next {
							top:calc(50% - 6px);
						}
					}

					li {
						display:inline-block;
						margin: 0;

						a {
							color: var(--lfa-body);
							display:block;
							padding: 5px 0 0 0;
							margin: 0;
							text-align: center;
							text-decoration:none;
							min-width:74px;

							.img, .icon {
								display:block;
								background-color: var(--lfa-white);
								padding: 0;
								margin: 0 auto;
								border-radius: 50%;
								overflow: hidden;
								width: 60px;
								height: 60px;
								text-align: center;
								box-shadow: var(--lfa-shadow-1);

								img, i {
									padding: 15px;
									width: 60px;
									height: 60px;
									filter: var(--lfa-f-body);
									display:block;
								}
								i::before {
									font-size:30px;
								}
							}
							.anchor {
								display:block;
								color: var(--lfa-body);
								margin-top: 10px;
								font-size: 13px;
							}
							&:hover {
								.img, .icon {
									box-shadow: var(--lfa-shadow-2);
									transition: all 240ms;
								}
							}
						}
					}
				}
			}

	.copy-url {
				border: var(--lfa-border);
				background: var(--lfa-gray-1);
				position:relative;
				margin: 10px 20px 10px 20px;
				border-radius:16px;
        
        &::after {
				  display: block;
            width: 36px;
            height: 26px;
            content: "Copy";
            background: var(--lfa-magenta-2);
            border-radius: 13px;
            padding: 0 15px;
            color: white;
            position: absolute;
            top: 6px;
            right: 6px;
            text-align: center;
            line-height: 26px;
            text-transform: uppercase;
            font-weight: 500;
            font-size: .85rem;
				}
					
				.copierInput {
					margin: 0;
					padding: 8px 82px 8px 15px;
					line-height: 22px;
					font-size: .9rem;
					white-space:nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 0;
          border: 0;
          width: 100%;
          display: block;
          outline: 0;
          position:relative;
          background-color: transparent;
					cursor:pointer;
					color: var(--lfa-body);
					z-index:1;
		}
		
		&:hover::after {
		  background: var(--lfa-magenta-3);
		}
	}
}
.jquery-modal .modal[data-modal-id="2"] {
	/* Sign in */
	width:410px;
	max-width:410px;
	height:420px;
	max-height:420px;
	
	> .inner {height:calc(100% - 52px);}
	
	.modal__head {
		border:0;	
		
		.nav-back {
			display:none;
			position:absolute;
			top:0;
			left:0;
			width:42px;
			height:52px;
			
			&.is-visible {display:block;}
			
			img {
				width:42px;
				padding:10px 5px;
				filter:var(--lfa-f-gray-2);
			}
			
			&:hover {
				img {filter:var(--lfa-f-body);}
			}
		}
	}
	.modal__body {
		padding:0;
		height:100%;
		max-height:100%;
		margin:52px 0 0 0;
	}
	
	.lfa-signin {
		height: 100%;
		
		> form {
			height: 100%;
			
			> .inner {height: 100%;}
		}
		
		.lfa-signin__screen {
			position:relative;
			height: 100%;
		}
		
		.s {
			position:absolute;
			top:0;
			left:-100%;
			width:100%;
			display:flex;
			height: 100%;
			min-height:unset;
			flex-direction:column;

			.s__title {
				flex:0 0 auto;
				margin: 0 0 20px 0;
				padding:0 40px;
				font-size:2rem;
				text-align:center;
			}
			.s__main {
				flex:1 1 auto;
				padding:0 40px 87px 40px;
				
				> li {
						margin:0 0 15px 0;
						
						a, button {
							display:block;
							position:relative;
							border-radius:5px;
							border:var(--lfa-border);
							height:40px;
							width:100%;
							line-height:36px;
							padding:0 15px 0 30px;
							background:var(--lfa-white);
							text-transform:none;
							white-space:nowrap;
							font-size:15px;
							
							> span {display:block;}
							
							.icon {
								position:absolute;
								top:0;
								left:7px;
								height:39px;
								width:25px;
								background-position:center center;
								background-size: 20px auto;
								background-repeat:no-repeat;
								background-image:url(/images/0/icons/user-key-solid-full.svg);
								
								&.icon-feels {
									background-image:url(/images/0/logo/feels-logo-icon__PNG--400x400.png);
								}
								&.icon-alt {
									background:none;
								}
							}
							.anchor {
								text-align:center;
								color:var(--lfa-body);
								text-transform:unset;
								font-weight:500;
							}
							
							&:hover, &:active, &:focus {
								background:var(--lfa-gray-1);
							}
						}
						
						button.akeeba-sociallogin-link-button-google {
							background:transparent !important;
							color:transparent !important;
							
							.icon {
								svg {
									background-color: transparent !important;
							    width: 20px;
							    height: 20px;
							    margin: 10px 0 0 0;
								}
							}
							&:hover {
								background:var(--lfa-gray-1) !important;
							}
						}
					}
				
			}
			.s__foot {
				flex:0 0 auto;
				text-align:center;
				position:absolute;
				bottom:0;
				left:0;
				width: 100%;
				
				.foot-consent {
					padding:15px 40px;
					font-size:.8rem;
					color:var(--lfa-gray-2);
					
					a {
						color:var(--lfa-body);
						font-weight:500;
						opacity: 0.8;
						
						&:hover {
							text-decoration:underline;
						}
					}
				}
				.foot-nav {
					border-top:var(--lfa-border);
					padding:25px 40px;
					
					a {
						font-weight:500;
						color:var(--lfa-magenta-2);
						
						&:hover {
							color:var(--lfa-magenta-3);
						}
					}
				}
			}
		}
		.s.s-active {
			position:static;
			left:0;
		}
		
		.s-options { }
	}
}
.jquery-modal .modal[data-modal-id="4"],
.jquery-modal .modal[data-modal-id="6"] {
	/* Report Entity */
	width:400px;
	max-width:400px;
}

.lfa-modal-form[data-mform-id="1"] {
	/* Sign in */
	
	.mform__field {
		
		.field-wrap {
			border:var(--lfa-border);
			border-radius:5px;
			background: var(--lfa-gray-1);
			
			input {
				background:transparent;
				border: 0;
		    outline: 0;
		    padding: 10px;
		    height:40px;
		    line-height:20px;
		    font-size: 1.0rem;
		    width:100%;
		    margin: 0;
		    
		    &:focus {
		    	border: 1px solid var(--lfa-magenta-2);
		    }
			}
			&.fw-uname {
				margin:0;
				border-radius:5px 5px 0 0;
				
				input {
					border-radius: 5px 5px 0 0;
				}
			}
			&.fw-pass {
				position:relative;
				margin-bottom: 2px;
				border-radius: 0 0 5px 5px;
				
				input {
					padding:10px 40px 10px 10px;
					border-radius: 0 0 5px 5px;
				}
				button {
					position:absolute;
					top:0;
					right:0;
					width:30px;
					height:40px;
					
					> .icon-eye {
						display:block;
						width:25px;
						height:25px;
						background:url(/images/0/icons/eye-solid-full.svg) center center no-repeat;
						background-size:20px auto;
					}
					> .icon-eye-slash {
						display:block;
						width:25px;
						height:25px;
						background:url(/images/0/icons/eye-slash-solid-full.svg) center center no-repeat;
						background-size:20px auto;
					}
				}
			}
		}
		label {
			font-size: .95rem;
      font-weight: 500;
      margin: 0 0 5px 0;
      display: block;
		}
	}
	.mform__options {
		margin:0 0 15px 0;
		
		ul > li {
			display:inline-block;
			
			a {
				display:block;
				font-size:.80rem;
				font-weight:500;
				color:var(--lfa-body);
				
				&:hover {
					text-decoration:underline;
				}
			}
		}
	}
	.mform__submit {
		cursor:not-allowed;
		
		button {
			padding:0;
			margin:0;
			display:block;
			width:100%;
			height:40px;
			line-height:40px;
			text-align:center;
			text-transform:uppercase;
			outline:0;
			border:0;
			font-size:1rem;
			border-radius:5px;
			font-weight:500;
			background:var(--lfa-gray-2);
			color:var(--lfa-gray-4);
			pointer-events:none;
		}
		
		&.uname-ok.pass-ok {
			cursor:pointer;
			
			button {
				background:var(--lfa-magenta-2);
				color:white;
				cursor:pointer;
				pointer-events:unset;
				
				&:hover {
					background:var(--lfa-magenta-3);
				}
			}
		}
	}
}

.jquery-modal.jquery-mbl-modal,
body.modal-mbl-open .jquery-modal {
    padding:64px 0 0 0;
  	
	  .modal.modal-mbl {
			width: 100%;
	    max-width: 100%;
	    height: 100%;
	    max-height: 100%;
	    border-radius:25px 25px 0 0;
	    padding-top: 52px;
	    
	    .inner {height:100%;}
	    
	    .modal__head {
        h2, h3, h4 {
          padding: 10px 15px;
        }
      }
      
	    .modal__body {
	      max-height: calc(100dvh - 64px - 52px - 53px);
        min-height: unset;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        background: var(--lfa-bg-1);
        height: calc(100dvh - 64px - 52px - 53px);
	    }
  }
}

.jquery-modal .modal[data-modal-id="7"] {
  /* Mobile Feel summary */
  
  .lfa-mfeel {
    .lfa-mfeel__banner {
      width:100%;
      aspect-ratio:16 / 9;
      
      img {
        display:block;
        width:100%;
        border-bottom:var(--lfa-border);
      }
    }
    .lfa-mfeel__main {
      padding:10px 15px;
      
      p {font-size:1rem;margin:0;}
      
      .main-summary {}
      .main-result {
        padding:5px 0 0 30px;
          position:relative;
          font-weight:500;
          line-height: 1.7rem;
          
          &::before {
            display:block;
            content:"";
            position:absolute;
            top:7px;
            left:0;
            width:24px;
            height:24px;
            background:url(/images/0/icons/arrow-turn-down-right-solid-full.svg) center center no-repeat;
            background-size:24px auto;
            filter:var(--lfa-f-gray-2);
        }
      }
    }
  }
}

.jquery-modal .modal[data-modal-id="8"] {
  /* Edit profile */
  width:400px;
	max-width:400px;
	
  .modal__body {
    padding:0;
  }
}
.jquery-modal .modal[data-modal-id="9"] {
  /* Logo Menu */
  width:300px;
	max-width:300px;
	
  .modal__body {
    padding:0;
  }
}

@media only screen and (max-width: 560px) {
	
  .jquery-modal.jquery-auth-modal,
  body.modal-auth-open .jquery-modal,
  .jquery-modal.jquery-mbl-modal,
  body.modal-mbl-open .jquery-modal {
  	
  	padding:64px 0 0 0;
  	
	  .modal[data-modal-id="2"],
	  .modal[data-modal-id="4"],
	  .modal[data-modal-id="6"],
	  .modal[data-modal-id="8"],
	  .modal[data-modal-id="9"] {
			width: 100%;
	    max-width: 100%;
	    height: 100%;
	    max-height: 100%;
	    border-radius:25px 25px 0 0;
	  }
  }
  
  .jquery-modal.jquery-share-modal,
  body.modal-share-open .jquery-modal {
  	
  	padding:calc(100dvh - 308px) 0 0 0;
  	
	  .modal[data-modal-id="1"],
	  .modal[data-modal-id="5"] {
			width: 100%;
	    max-width: 100%;
	    height: 100%;
	    max-height: 100%;
	    border-radius:25px 25px 0 0;
	  }
  }
  
  .jquery-modal.jquery-settings-modal,
  body.modal-settings-open .jquery-modal {
  	
  	padding:64px 0 0 0;
  	
	  .modal[data-modal-id="3"] {
			width: 100%;
	    max-width: 100%;
	    height: 100%;
	    max-height: 100%;
	    border-radius:25px 25px 0 0;
	  }
  }
  
  .jquery-modal.jquery-mbl-modal,
  body.modal-mbl-open .jquery-modal {
    .modal {
      .inner {
        .modal__body {
          height: calc(100dvh - 158px);
          max-height:unset;
        }
      }
    }
  }
}

@media only screen and (max-width: 480px) {}