/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.tingle-modal{&.bg-30{background:rgba(0,0,0,.30);}&.bg-75{background:rgba(0,0,0,.75);}&.bg-opaque{background:rgba(0,0,0,1);}&::before{content:none;}}.tingle-modal-box{width:auto;background:transparent;.tingle-modal-box__content{padding:0;.tingle-modal__close{position:absolute;color:#808080;top:1rem;right:1rem;background:rgba(255,255,255,0.6);width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid #808080;padding:5px;transition:all 100ms ease-in-out;&:hover{transform:scale(1.2);color:#000000;border-color:#000000;}.tingle-modal__closeIcon{display:flex;}}}}.popup-content{width:30vw;display:grid;padding:0;max-height:80vh;overflow-y:auto;&.large{width:60vw;}img{object-fit:cover;}}.popup-grid{display:grid;width:100%;max-height:80vh;> img{width:100%;height:100%;}&.grid-full{grid-template:100% / 100%;height:100%;> img,.text-content{grid-area:1/1;}.text-content{margin:3rem 1rem;width:auto;max-width:calc(100% - 1rem);}}&.grid-img-left{grid-template-columns:45% 55%;grid-template-rows:auto;.text-content{grid-column:2;background-color:#ffffff;}> img{grid-column:1;grid-row:1;}}&.grid-img-right{grid-template-columns:55% 45%;grid-template-rows:auto;.text-content{grid-column:1;background-color:#ffffff;}> img{grid-column:2;grid-row:1;}}&.grid-img-top{grid-template-rows:45% 1fr;grid-template-columns:auto;.text-content{grid-row:2;width:100%;background-color:#ffffff;}> img{grid-row:1;}}&.grid-img-bottom{grid-template-rows:1fr 45%;grid-template-columns:auto;.text-content{grid-row:1;width:100%;background-color:#ffffff;}> img{grid-row:2;}}}.text-content{padding:1.5rem;justify-self:center;align-self:center;text-align:center;max-height:100%;z-index:1;width:100%;img{max-width:100%;}}.bg-white{background:#ffffff;&.opacity-60{background:rgba(255,255,255,0.6);opacity:1;}}.bg-black{background:#000000;&.opacity-60{background:rgba(0,0,0,0.6);opacity:1;}}.button{padding:15px 25px 15px 25px;border-radius:25px;font-size:1rem;transition:all 150ms ease-in-out;display:inline-block;outline:none;margin-top:1.5rem;border:1px solid transparent;position:relative;z-index:1;text-decoration:none;&.popup-bg-primary{background-color:var(--fetched-color-primary);&.popup-text-primary{color:var(--fetched-color-primary);&:hover{color:var(--fetched-color-primary);background-color:var(--fetched-color-primary);}&.bordered-button{border-color:var(--fetched-color-primary);&:hover{border-color:var(--fetched-color-primary);}}}&.popup-text-secondary{color:var(--fetched-color-secondary);&:hover{color:var(--fetched-color-primary);background-color:var(--fetched-color-secondary);}&.bordered-button{border-color:var(--fetched-color-secondary);&:hover{border-color:var(--fetched-color-primary);}}}&.popup-text-black{color:#000000;&:hover{color:var(--fetched-color-primary);background-color:#000000;}&.bordered-button{border-color:#000000;&:hover{border-color:var(--fetched-color-primary);}}}&.popup-text-white{color:#ffffff;&:hover{color:var(--fetched-color-primary);background-color:#ffffff;}&.bordered-button{border-color:#ffffff;&:hover{border-color:var(--fetched-color-primary);}}}}&.popup-bg-secondary{background-color:var(--fetched-color-secondary);&.popup-text-primary{color:var(--fetched-color-primary);&:hover{color:var(--fetched-color-secondary);background-color:var(--fetched-color-primary);}&.bordered-button{border-color:var(--fetched-color-primary);&:hover{border-color:var(--fetched-color-secondary);}}}&.popup-text-secondary{color:var(--fetched-color-secondary);&:hover{color:var(--fetched-color-secondary);background-color:var(--fetched-color-secondary);}&.bordered-button{border-color:var(--fetched-color-secondary);&:hover{border-color:var(--fetched-color-secondary);}}}&.popup-text-black{color:#000000;&:hover{color:var(--fetched-color-secondary);background-color:#000000;}&.bordered-button{border-color:#000000;&:hover{border-color:var(--fetched-color-secondary);}}}&.popup-text-white{color:#ffffff;&:hover{color:var(--fetched-color-secondary);background-color:#ffffff;}&.bordered-button{border-color:#ffffff;&:hover{border-color:var(--fetched-color-secondary);}}}}&.popup-bg-black{background-color:#000000;&.text-primary{color:var(--fetched-color-primary);&:hover{color:#000000;background-color:var(--fetched-color-primary);}&.bordered-button{border-color:var(--fetched-color-primary);&:hover{border-color:#000000;}}}&.popup-text-secondary{color:var(--fetched-color-secondary);&:hover{color:#000000;background-color:var(--fetched-color-secondary);}&.bordered-button{border-color:var(--fetched-color-secondary);&:hover{border-color:#000000;}}}&.popup-text-black{color:#000000;&:hover{color:#000000;background-color:#000000;}&.bordered-button{border-color:#000000;&:hover{border-color:#000000;}}}&.popup-text-white{color:#ffffff;&:hover{color:#000000;background-color:#ffffff;}&.bordered-button{border-color:#ffffff;&:hover{border-color:#000000;}}}}&.popup-bg-white{background-color:#ffffff;&.popup-text-primary{color:var(--fetched-color-primary);&:hover{color:#ffffff;background-color:var(--fetched-color-primary);}&.bordered-button{border-color:var(--fetched-color-primary);&:hover{border-color:#ffffff;}}}&.popup-text-secondary{color:var(--fetched-color-secondary);&:hover{color:#ffffff;background-color:var(--fetched-color-secondary);}&.bordered-button{border-color:var(--fetched-color-secondary);&:hover{border-color:#ffffff;}}}&.popup-text-black{color:#000000;&:hover{color:#ffffff;background-color:#000000;}&.bordered-button{border-color:#000000;&:hover{border-color:#ffffff;}}}&.popup-text-white{color:#ffffff;&:hover{color:#ffffff;background-color:#ffffff;}&.bordered-button{border-color:#ffffff;&:hover{border-color:#ffffff;}}}}}.opacity-light{opacity:0.75;}.opacity-strong{opacity:0.3;}@media screen and (max-width:768px){.tingle-modal{display:flex;padding:0;.tingle-modal__closeLabel{display:none;}.tingle-modal__close{left:auto;width:1.2rem;height:1.2rem;&:hover{transform:scale(1.2);}.tingle-modal__closeIcon{display:inline;}}}.popup-content{width:90vw;&.large{width:90vw;}}.popup-grid{&.grid-img-left,&.grid-img-right{grid-template-rows:20% 80%;grid-template-columns:100%;.text-content{grid-row:2;grid-column:auto;}> img{grid-row:1;grid-column:auto;}}&.grid-img-top{grid-template-rows:40% 1fr;grid-template-columns:100%;}&.grid-img-bottom{grid-template-rows:1fr 40%;grid-template-columns:100%;}}}