
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
.toast {
    background-color: black;
    color: white;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transform: translateY(20px);

    &.show {
    	opacity: 1;
    	transform: translateY(0);
    }
}

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

  > .modal {
    z-index:9;
    padding:20px;
    width:100%;
    max-width:610px;
    position:relative;
    padding:0;
    border-radius:10px;
    max-height: calc(100% - 160px);
    min-height: calc(96px + 102px);
    overflow:hidden;
    background: white;
    box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;

    > .inner {
      position:relative;
      padding:52px 0;
      overflow: hidden;

      > .modal__head {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:51px;
        background:transparent;
        border-bottom:1px solid #ced4da;
        border-radius: 10px 10px 0 0;

        h2, h3, h4 {
          margin:0;
          padding:10px 20px;
					line-height: 30px;
          font-size: 1.5rem;
					color: #232323;
        }
        a.close-modal {
          top: 10px;
          right: 10px;
        }
      }
      > .modal__body {
      	max-height: calc(100dvh - 160px - 184px);
        min-height: 96px;
        overflow-y: auto;
        overflow-x:hidden;
        padding: 20px;
        font-size:.95rem;
        scrollbar-width: thin;
    		scroll-behavior: smooth;
				scrollbar-color: auto;
        background:white;
				color: #232323;

        h3, h4 {
          margin:10px 0;
          font-size:1.2rem;
        }
        p.lead {font-size:.95rem;margin:0 0 5px 0;}
        p {font-size:.95rem;margin:5px 0 0 0;}
      }
      > .modal__foot {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:52px;
        background:white;
        border-top:1px solid #ced4da;
        border-radius: 0 0 10px 10px;

        > a {
          display: block;
          cursor:pointer;
          padding: 10px 20px;
          text-align: center;
          font-size: 1.2rem;
          color: #c31b1b;
          line-height: 32px;
          text-transform: uppercase;
    			font-weight: 500;

          &:hover {
            color:#910f0f;
          }
        }
      }
    }
    
    > .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: gray;
        font-size:1.4rem;
        line-height:50px;
        text-align:center;
        font-weight:700;
      }
      
      &:hover::before {
        color:#c31b1b;
      }
    }
  }
}
.jquery-modal .modal[data-modal-id="1"] {
	width:400px;
	max-width:400px;
	
	> .inner > .modal__body {
		padding:10px 0;
		max-height: calc(100vh - 160px - 184px);
    min-height: 96px;
	}
	.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: #232323;
							display:block;
							padding: 5px 0 0 0;
							margin: 0;
							text-align: center;
							text-decoration:none;
							min-width:74px;

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

								img, i {
									padding: 15px;
									width: 60px;
									height: 60px;
									filter: brightness(0) saturate(100%) invert(12%) sepia(91%) saturate(20%) hue-rotate(32deg) brightness(87%) contrast(95%);
									display:block;
								}
								i::before {
									font-size:30px;
								}
							}
							.anchor {
								display:block;
								color: #232323;
								margin-top: 10px;
								font-size: 13px;
							}
							&:hover {
								.img, .icon {
									box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;
									transition: all 240ms;
								}
							}
						}
					}
				}
			}

	.copy-url {
				border: 1px solid #ced4da;
				background: #f1f1f1;
				position:relative;
				margin: 10px 20px 10px 20px;
				border-radius:16px;
        
        &::after {
				  display: block;
            width: 36px;
            height: 26px;
            content: "Copy";
            background: black;
            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: #232323;
					z-index:1;
		}
		
		&:hover::after {
		  background: black;
			opacity:0.7;
		}
	}
}
.jquery-modal .modal[data-modal-id="3"] {
	width:300px;
	max-width:300px;
	
	> .inner > .modal__body {
		padding:0;
		max-height: calc(100vh - 160px - 184px);
    min-height: 96px;

    .mb__qrcode {
    	text-align: center;
      padding:10px 10px 0 10px;

      img {
      	max-width: 307px;
      	width: 100%;
        margin: 0 auto;
				padding: 15px;
      }
    }
    p {
    	max-width: 323px;
    	margin: 0 auto;
    	padding:0 20px 20px 20px;
    }
	}
}
.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: white;
        height: calc(100dvh - 64px - 52px - 53px);
	    }
  }
} .blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);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)}
  	}

@media only screen and (max-width: 560px) {
  body.modal-open .jquery-modal {
  	&.modal-share {
  		padding: calc(100dvh - 308px) 0 0 0;
  	}
  	&.modal-qrcode,
		&.modal-links {
  		padding: calc(100dvh - 508px) 0 0 0;
  	}
    
		.modal[data-modal-id="3"],
		.modal[data-modal-id="2"] {
    	> .inner > .modal__body {
				max-height:405px;
        min-height: 96px;
    	}
  	}
    .modal {
      width: 100dvw;
      max-width: 100dvw;
      height: 100%;
      max-height: 100%;
      border-radius: 25px 25px 0 0;
			
			> .inner {
				height: 100%;
			}
  	}
  }
}