/* CSS Drag&drop

Author: Andrea Fornari
Company: A Digital Else Srl
Website: https://adigitalelse.com
Description: Demo version consecutive drag & drop with JS and CSS animations
Year: 2023
Version: 1.0
*/

/* Generale */
html, body {margin:0;padding:0;}
body {color: #000;overflow: hidden scroll;}
body * {box-sizing:border-box;}

body.focus-on-budget .dd.list .grid .item:not(.grabbed) {opacity:0.3;}

.font-lato {font-family:'Lato', sans-serif;}
.font-dmsans {font-family:'Dm Sans', sans-serif;}

h1, h2, h3, h4, h5, h6 {font-size:0;line-height:1;display: inline-block;}
p {margin:0;margin-bottom:15px;}
p:last-child {margin-bottom:0;}
ul {padding:0;margin:0;}

/* Scrollbar */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background-color:#f2effd;border-left:1px solid;border-right:1px solid;border-color:#ebe8f7;}
::-webkit-scrollbar-thumb {border-radius: 0;background-color:#75baea;}

.normal {width: 740px;margin:0 auto;}
.floating {position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate3d(-50%,-50%,0);z-index:-1;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.not-selectable {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.cover-img {width:100%;height:100%;position:absolute;top:0;left:0;background-size: cover;background-position: center;background-repeat: no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.overlay {width:100%;height:100%;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition: 0.5s ease;transform: translate3d(0,0,0);z-index: -1;}

/* Header */
header {padding-top: 80px;padding-bottom: 60px;text-align: center;}
header h1 span {font-size: clamp(25px, 4.21vw, 40px);text-transform: uppercase;display:block;letter-spacing: 5px;text-align: center;font-weight: 900;}
header p {font-size:clamp(14px, 2.45vw, 16px);letter-spacing:1px;text-align:center;color:#555;margin-top:17px}

/* Titoli */
.dd h2 {padding-bottom:20px;}
.dd h2:not(:first-child) {padding-top: 100px;}
.dd h2 span {font-size: clamp(18px, 2vw, 22px);display:block;text-transform:uppercase;letter-spacing: 2px;font-weight: 700;line-height: 1.3;}
.dd.list h2 span {text-transform: none;letter-spacing: 0.7px;}

/* Griglia */
.dd {padding-bottom:50px;position: relative;visibility:hidden;z-index:0;}
.dd.starting-grid {z-index:1;}
.dd > * {visibility:visible;}
.dd.list {transition:opacity 1s ease;}
.dd .grid {position:relative;width:100%;}


.dd .grid .item {cursor:pointer;overflow:hidden;position:absolute;top:0;left:0;z-index:0;transition: transform 0s, opacity 0.8s ease 0.2s, visibility 0.8s ease 0.2s;background-color:#fff;touch-action:none;}
.dd .grid .item .erasable {background-color:#ee7272;top:0;left:0;transform:translate3d(0,0,0);opacity: 0;transform-origin:top left;transition:opacity 0.5s ease;}
.dd .grid .item .colorer {background-color:#75baea;transition:background-color 0.7s ease, opacity 0.7s ease;}
.dd .grid .item .text {font-size: clamp(30px, 4vw, 35px);font-weight: 700;text-align:center;display:flex;align-items:center;justify-content:center;color: #274256;transition:color 0.5s ease;}

.dd .grid.budget-list .item {display:flex;align-items:center;padding: 12px 15px;}
.dd .grid.budget-list .item .colorer {background-color:#bee0fa}
.dd .grid.budget-list .item > * {text-transform:uppercase;font-weight: 600;font-size: 9px;letter-spacing:1px}
.dd .grid.budget-list .item .price {font-weight:900;margin-left:10px;font-size:11px;letter-spacing:0}

.dd .grid .markers {display:flex;align-items:flex-start;flex-wrap:wrap;}
.dd .grid .markers .marker {flex:0 0 auto;position: absolute;z-index:0;}
.dd .grid .markers .marker .border {width:calc(100% - 1px);height:calc(100% - 1px);}
.dd .grid .markers .marker .border.orizontal {background-image: linear-gradient(to right, #75baea 60%, rgba(255, 255, 255, 0) 40%);background-position-x:left;background-size: calc(100% / (12 + 0.6)) 4px;background-repeat: repeat-x;}
.dd .grid .markers .marker .border.vertical {background-image: linear-gradient(to bottom, #75baea 60%, rgba(255, 255, 255, 0) 40%);background-position-y:top;background-size: 4px calc(100% / (12 + 0.6));background-repeat: repeat-y}
.dd .grid .markers .marker .top {background-position-y: top;}
.dd .grid .markers .marker .right {background-position-x: right;}
.dd .grid .markers .marker .bottom {background-position-y: bottom;}
.dd .grid .markers .marker .left {background-position-x: left;}

.dd .grid.budget-list .markers .marker {position: relative;display: flex;align-items: center;background-color: #eeeff4;color: #a0a0a0;}
.dd .grid.budget-list .markers .marker > * {text-transform:uppercase;font-weight:600;font-size:9px;letter-spacing:1px;}
.dd .grid.budget-list .markers .marker .price {font-weight:900;margin-left:10px;font-size:11px;letter-spacing:0}

.dd .grid.budget {transition:height 0.5s ease;}
.dd .grid.budget .markers .marker {position: relative;display: flex;align-items: center;justify-content: center;min-height: 60px;color: #75baea;border: 3px dashed;text-align: center;transition: color 1s ease;}
.dd .grid.budget .markers .marker .text {text-transform:uppercase;font-weight: 900;font-size: 13px;letter-spacing: 2px;filter: brightness(0.9);}

.dd .grid.budget .item {display:flex;align-items:center;padding: 12px 15px;}
.dd .grid.budget .item .colorer {background-color:#bee0fa}
.dd .grid.budget .item > * {text-transform:uppercase;font-weight: 600;font-size: 9px;letter-spacing:1px}
.dd .grid.budget .item .price {font-weight:900;margin-left:10px;font-size:11px;letter-spacing:0}

.dd .grid .marker.unified-heights .dummy {padding-top:100%;}
.dd .grid .marker.different-heights:nth-child(2n) .dummy {padding-top:100%;}
.dd .grid .marker.different-heights:nth-child(2n + 1) .dummy {padding-top:130%;}

/* Icone */
.item-action {opacity:0;visibility:hidden;transition:background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease, visibility 0.5s ease, filter 0.5s ease;position:absolute;top: 11px;display: flex;align-items: center;justify-content: center;border-radius: 4px;cursor:pointer;background-color:rgb(255, 255, 255);background-color:rgba(255, 255, 255, 0.4);-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translate3d(0,0,0);line-height: 1;width: 23px;height: 24px;}
.touch .item-action {opacity:1;visibility:visible;}
.item-action .icon {color:inherit;font-size: 12px;}
.item-action.locks {right: 11px;}
.item-action.erase-item {left: 11px;}
.item-action.locks .icon {display:none;}

.item:hover .item-action,
.item[data-locked="true"] .item-action.locks {opacity:1;visibility:visible;}
.item[data-locked="true"] .item-action.locks {background-color:#f8bea7;}
.item[data-locked="false"].dragging:hover .item-action.locks,
.item[data-locked="false"].grabbed:hover .item-action.locks,
.item[data-locked="false"].released:hover .item-action.locks {opacity:0;visibility:hidden;}
.item-action.locks:hover {background-color:#fccab7;}
.item.can-be-erased .item-action.locks,
.item.wait-deletion .item-action.locks {background-color:rgb(255,255,255);background-color:rgba(255,255,255,0.3);}
.item[data-locked="false"] .item-action.locks .icon.unlock {display:block;}
.item[data-locked="true"] .item-action.locks .icon.lock {display:block;}

.item-action.erase-item {background-color: #ec6a6a;color: #fff;}

.item.grabbed:hover .item-action.erase-item,
.item.dragging:hover .item-action.erase-item,
.item.grabbed .item-action.erase-item,
.item.dragging .item-action.erase-item,
.item.released:hover .item-action.erase-item,
.not-selectable .item:hover .item-action.erase-item,
.shift-pressed .item:hover .item-action.erase-item {opacity:0;visibility:hidden;}
.item-action.erase-item:hover {filter: brightness(1.15);}
.item.can-be-erased .item-action.erase-item,
.item.wait-deletion .item-action.erase-item {filter: brightness(1.15);opacity:1;visibility:visible;}

/* Context menu */
.grid .context-menu {opacity:0;visibility:hidden;position:absolute;top:0;left:0;z-index:99;transform: translate3d(0,-20px,0);transition:opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;width: 200px;border-radius:10px 10px 0 0;box-shadow:10px 10px 0 0 rgba(0,0,0,0.05);}
.no-touch .grid.context-menu-visible .context-menu,
.touch [data-mobile-context="true"] .grid.context-menu-visible .context-menu {opacity:1;visibility:visible;transform: translate3d(0,0,0);}
.grid .context-menu .topbar {width:100%;padding: 4px 7px;background-color: #e0eff8;border-radius:10px 10px 0 0;display:flex;align-items:center;}
.grid .context-menu .topbar .circle {width: 7px;height: 7px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:filter 0.5s ease;cursor:pointer;}
.grid .context-menu .topbar .circle.exit {background-color:#e36f6f;}
.grid .context-menu .topbar .circle:hover {filter:brightness(1.2);}
.grid .context-menu ul {list-style-type:none;color:#fff;}
.grid .context-menu ul li > span {display:block;}
.grid .context-menu ul li .title {padding: 7px 20px;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:900;color:#283f4f;background-color:#daf0ff}
.grid .context-menu ul li .context {padding: 12px 15px;position:relative;z-index:2;display:flex;align-items:center;cursor: pointer;line-height: 1;font-size: 0;}
.grid .context-menu ul li .context > .colorer {background-color: #3f6681;transition:background-color 0.3s ease;}
.grid .context-menu ul li .context > .icon {font-size: 10px;padding-right: 11px;margin-top: -1px;}
.grid .context-menu ul li .context > .text {font-size: 11px;letter-spacing:0.8px;font-weight:700;}
.grid .context-menu ul li .context > .text span {font-weight:900;color:#fccab7;}

.grid .context-menu ul li .context:hover .colorer {background-color:#22597f}
.grid .context-menu ul li .context.erase .colorer {background-color:#f38181;}
.grid .context-menu ul li .context.erase:hover .colorer {background-color:#e36f6f;}

.grid .context-menu ul li.submenu-open > .context .colorer,
.grid .context-menu ul li.submenu-open > .context:hover .colorer {background-color:#fccab7;transition:background-color 0s;}
.grid .context-menu ul li.submenu-open > .context .text,
.grid .context-menu ul li.submenu-open > .context .icon,
.grid .context-menu ul li.submenu-open > .context .icon-arrow {color:#5f4b43;}

.grid .context-menu ul li.with-submenu .context {position:relative;}
.grid .context-menu ul li.with-submenu .context .icon-arrow {transform-origin:center;position:absolute;font-weight:bold;right:13px;top:50%;z-index:9;font-size:8px;opacity:0.8;transform:translate3d(0,-50%,0);}
.grid .context-menu ul.submenu {border-top: 2px solid #000;transform:translate3d(0,-10px,0);visibility:hidden;opacity:0;z-index:1;top: 100%;left: 0;width:200px;position:absolute;box-shadow: 10px 10px 0 0 rgba(0,0,0,0.05);transition:transform 0.4s ease 0.5s, opacity 0.4s ease 0.5s, visibility 0.4s ease 0.5s;}
.grid .context-menu ul.submenu li .context {padding: 9px 15px;}
.grid .context-menu ul.submenu li .context .line,
.grid .context-menu ul.submenu li .context .text {transform:translate3d(-10px,0,0);opacity:0;visibility:hidden;transition:transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s, visibility 0.4s ease 0.4s;}
.grid .context-menu ul.submenu li .context .line {width:12px;background-color:rgba(255,255,255,0.5);height:1px;margin-right:7px;}
.grid .context-menu ul.submenu li .context .text {font-size: 9px;font-weight: 500;letter-spacing: 0.6px;}

.grid .context-menu ul li.submenu-open .context .icon-arrow {transform:translate3d(0,-50%,0) rotate(180deg);}
.grid .context-menu ul li.submenu-open ul.submenu li .context .line,
.grid .context-menu ul li.submenu-open ul.submenu li .context .text {transform:translate3d(0,0,0);opacity:1;visibility:visible;transition:transform 0.4s ease 0.1s, opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s;}

.grid .context-menu .context.erase + ul.submenu {border-color:#cf5353;}
.grid .context-menu .context.erase + ul.submenu li .context .colorer {background-color:#e36f6f;}
.grid .context-menu .context.erase + ul.submenu li .context:hover .colorer {background-color:#ed7b7b;}

.grid.context-menu-visible .context-menu ul.submenu {transition:transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;}
.grid .context-menu li.submenu-open ul.submenu {transform:translate3d(0,0,0);opacity:1;visibility:visible;transition:transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;}

.grid .context-menu ul li .context[disabled="disabled"] {cursor:not-allowed;}
.grid .context-menu ul li .context[disabled="disabled"] .colorer {background-color:#c9c5d3!important;}
.grid .context-menu ul li .context[disabled="disabled"] .line {background-color:rgb(146, 143, 173, 0.5);}
.grid .context-menu ul li .context[disabled="disabled"] .text {color:#817f95;}
.grid .context-menu ul li .context[disabled="disabled"] .text span {color:#7a7791;}

/* Controlli */
.dd .controls {margin-top:30px;display:flex;align-items:center;flex-wrap:wrap;margin-bottom: -10px;margin-right: -10px;}
.dd .controls .btn {border-radius:3px;transition:filter 0.5s ease;flex:0 0 auto;width: calc(50% - 10px);cursor:pointer;padding: 17px 30px;margin-right: 10px;margin-bottom: 10px;background-color: #fccab7;display: flex;align-items: center;justify-content: center;font-size:0;line-height:1;}
.dd .controls .btn .icon,
.dd .controls .btn .text {flex:0 0 auto;}
.dd .controls .btn .icon {font-size:13px;font-weight:bold;padding-right:10px;color:inherit;}
.dd .controls .btn .text {text-transform: uppercase;font-size: 12px;letter-spacing: 1.5px;font-weight: 900;color: inherit;}
.dd .controls .btn .text span {color:inherit;}
.dd .controls .btn:last-child {margin-right:0;}
.dd .controls .btn:not([disabled="disabled"]):hover {filter:brightness(1.1)}
.dd .controls .btn[disabled="disabled"] {background-color: #e7e5e5;cursor:not-allowed;}
.dd .controls .btn.hide-when-disabled[disabled="disabled"] {display:none;}
.dd .controls .btn[disabled="disabled"] span {color: #505050;}

.dd .controls .erase {background-color: #e36f6f;color: #ffeeef;}

/* Animazione elementi */
.dd .grid .item.could-move,
.dd .grid .item.released {transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease}
.dd .grid .item.move-undone {transition:transform 0.6s ease, width 0.3s ease, height 0.3s ease}
.dd .grid .item.released {z-index: 1;}
.dd .grid.initial .item {transition:transform 0.5s ease;}
.dd .grid .item.grabbed {cursor:grabbing;z-index:1;}
.dd .grid .item.dragging {cursor:grabbing;z-index:1;transition:transform 0s, width 0.3s ease, height 0.3s ease;}
.dd .grid .item.deleted {opacity:0;visibility: hidden;transition: opacity 0.8s ease 0.3s, visibility 0.8s ease 0.3s;}

.dd .grid .item:not(.grabbed):not(.released):not([data-locked="true"]):hover .colorer {opacity:0.7;}
.dd .grid .item[data-locked="true"]:not(.grabbed) .colorer {background-color:rgba(252, 202, 183, 0.7)}
.dd .grid .item.hovered .colorer {opacity:0.5;}
.dd .grid .item.grabbed .colorer {background-color:rgba(252, 202, 183, 0.5)!important;}
.dd .grid .item.can-be-erased .erasable,
.dd .grid .item.wait-deletion .erasable {opacity:1;}
.dd .grid .item.can-be-erased .text,
.dd .grid .item.wait-deletion .text {color:#953a3a;}
.dd .grid .item.wait-deletion .colorer {opacity:0;}
.dd .grid.one-focused .item:not(.focused) .colorer {opacity:0.3;}

.dd .grid .markers .marker .border.highlight {transition:opacity 1s ease;opacity:0;}
.dd .grid.initial .markers .marker .border {opacity:0;transition:opacity 0s;}
.dd .grid .markers .marker .border.highlight.orizontal {background-image: linear-gradient(to right, #fccab7 60%, rgba(255, 255, 255, 0) 40%);}
.dd .grid .markers .marker .border.highlight.vertical {background-image: linear-gradient(to bottom, #fccab7 60%, rgba(255, 255, 255, 0) 40%);}
.dd .grid .markers .marker .border.highlight.marker-active {opacity:1;}

.dd .grid.budget .markers .marker.marker-active {color:#fccab7;}

/* Selezione elementi */
.selection-active {cursor:crosshair!important;}
#select-elements {position:fixed;left:0;top:0;width: 1px;height: 1px;z-index:9;background-color:#0096ff;opacity:0;visibility:hidden;transform-origin:left top;transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:0s;}
.selection-active.box-moving #select-elements {visibility:visible;opacity:0.6;transition:opacity 1s ease, visibility 1s ease;}

/* Popups */
.popup {position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999999;display: flex;align-items: center;justify-content: center;transition: opacity 0.5s ease, visibility 0.5s ease;visibility: hidden;opacity: 0;}
.popup.visible {visibility:visible;opacity:1;}
.popup .overlay {opacity: 0;visibility:hidden;transition: opacity 0.5s ease, visibility 0.5s ease;}
.popup.visible .overlay {opacity: 0.85;visibility:visible;}
.popup .content {flex:0 0 auto;width: 520px;position:relative;padding: 40px;border-radius: 10px;text-align:center;background-color: #121f29;transform: translate3d(0,-80px,0);opacity: 0;visibility:hidden;transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;}
.popup.visible .content {transform: translate3d(0,0,0);opacity: 1;visibility:visible;transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.3s, visibility 0.5s ease 0.3s;}
.popup .content h2 {padding-bottom: 20px;}
.popup .content h2 span {font-weight: 900;font-size: 22px;letter-spacing: 2px;display:block;line-height:1.3;color: #fccab7;}
.popup .content p {font-size: 14px;letter-spacing: 1.5px;line-height:1.4;margin-bottom: 3px;color: #fff;opacity: 0.8;}
.popup .content p span {color:inherit;font-weight:900;}

.popup .content .buttons {display:flex;flex-wrap:wrap;align-items: center;justify-content:center;padding-top:25px;margin-bottom:-10px;}
.popup .content .buttons .btn {flex:0 0 auto;padding: 12px 17px;display:flex;align-items:center;color:#121f29;background-color:#fccab7;border-radius:3px;font-size:0;line-height:1;cursor: pointer;transition:filter 0.5s ease;margin:0 5px;margin-bottom:10px;}
.popup .content .buttons .btn > * {flex:0 0 auto;}
.popup .content .buttons .btn .icon {font-size: 10px;padding-right:10px;font-weight: bold;}
.popup .content .buttons .btn .text {font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:900;}
.popup .content .buttons .btn:hover {filter:brightness(1.15);}

.popup .content .close {position:absolute;top: 14px;right: 14px;font-size:0;line-height:1;cursor: pointer;transition: filter 0.5s ease;color: #fccab7;display: flex;align-items: center;justify-content: center;border-radius: 50%;transform: translate3d(0,0,0);}
.popup .content .close:hover {filter:brightness(1.1)}
.popup .content .close .icon {font-size: 10px;font-weight: bold;color: inherit;}

.popup.info-config .overlay {background-color: #7ec8fe;}
.popup.erase-confirm .overlay {background-color: #0d0304;}
.popup.erase-confirm .content {background-color: #ff6071;}
.popup.erase-confirm .content h2 span {color:#481c21;}
.popup.erase-confirm .content p {color:#6f2b33;font-weight:600;opacity:1}
.popup.erase-confirm .content p span {color: #4b1b21;}
.popup.erase-confirm .content .buttons .btn.confirm {background-color:#f9b8bf;}
.popup.erase-confirm .content .buttons .btn.confirm .icon,
.popup.erase-confirm .content .buttons .btn.confirm .text {color:#b44c56;}
.popup.erase-confirm .content .buttons .btn.cancel {background-color: #481c21;}
.popup.erase-confirm .content .buttons .btn.cancel .icon,
.popup.erase-confirm .content .buttons .btn.cancel .text {color:#dd5664}
.popup.erase-confirm .content .close {color: #481c21;}

/* Risposte */
.response {cursor:pointer;position:fixed;top:20%;right: 30px;border-radius: 4px;z-index: 99;background-color: #000;transition:opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;box-shadow: 7px 7px 0 0 rgba(50, 48, 188, 0.17);max-width:calc(100% - 60px);}
.response[data-show="true"] {opacity:1;visibility:visible;transform:translate3d(0,0,0);transition:opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;}
.response[data-show="false"] {opacity:0;visibility:hidden;transform: translate3d(60px,0,0);}

.response .close {position:absolute;right: 25px;top:-5px;transform:translate3d(0,-100%,0);display:flex;align-items:center;font-size: 0;line-height: 1;}
.response .close .icon,
.response .close .text {flex:0 0 auto;color: inherit;}
.response .close .icon {font-size: 7px;font-weight: bold;padding-right: 4px;}
.response .close .text {text-transform:uppercase;font-weight: 900;font-size: 10px;letter-spacing:1px}

.response .tool {position:absolute;right:25px;top: calc(100% - 2px);transform: translate3d(0,-50%,0);display:flex;align-items:center;font-size: 0;line-height: 1;background-color: #fff;padding: 7px 10px;border-radius: 2px;color: #fff;}
.response .tool .icon,
.response .tool .text {flex:0 0 auto;color: inherit;}
.response .tool .icon {font-size: 8px;font-weight: bold;padding-right: 7px;}
.response .tool .text {text-transform:uppercase;font-weight: 900;font-size: 8px;letter-spacing:1px}

.response .inner {display:flex;align-items:center;border-radius: 4px;overflow:hidden;justify-content: flex-end;position:relative;z-index:0;padding: 20px 22px;}
.response .inner .colorer {border: 3px solid;opacity: 0.1;color: #000;}
.response .inner .icon,
.response .inner p {color:inherit;}

.response .inner .icon {flex:0 0 auto;margin-right:13px;font-size:9px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;}
.response .inner .icon .checkmark {border-radius: 50%;display: block;stroke-width: 4;stroke: #fff;stroke-miterlimit: 10;color: #000;box-shadow: inset 0 0 0;}
.response .inner .icon .checkmark__circle {stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 3;stroke-miterlimit: 10;stroke: #000;fill: none;}
.response .inner .icon .checkmark__check {transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;}
.response[data-show="true"] .inner .icon .checkmark__circle {animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}
.response[data-show="true"] .inner .icon .checkmark {animation: fill .4s ease .4s forwards, scale .3s ease .9s both;}
.response[data-show="true"] .inner .icon .checkmark__check {animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}

.response .inner p {flex:1;color:inherit;font-size: 14px;font-weight: 700;letter-spacing: 1px;text-align: left;display: block;line-height: 1.3;}
.response .inner p span {color:inherit;font-weight:900}

.response[data-type="default"] {background-color:#4ff1d5;}
.response[data-type="default"] .close,
.response[data-type="default"] .inner {color:#1e544a;}
.response[data-type="default"] .inner .icon.no-svg {background-color:#113d30;color:#4ff1d5}
.response[data-type="default"] .inner .icon .checkmark {color:#113d30;}
.response[data-type="default"] .inner .icon .checkmark__circle {stroke:#113d30;}
.response[data-type="default"] .inner .icon .checkmark__check {stroke:#4ff1d5;}
.response[data-type="default"] .inner p span {color:#113d30;}
.response[data-type="default"] .tool {background-color:#113d30;color:#4ff1d5}

.response[data-type="undo-drop"] {background-color:#ffd4c3;}
.response[data-type="undo-drop"] .close,
.response[data-type="undo-drop"] .inner {color:#5f2812;}
.response[data-type="undo-drop"] .inner .icon.no-svg {background-color:#b74c22;color:#ffd4c3}
.response[data-type="undo-drop"] .inner .icon .checkmark {color:#b74c22;}
.response[data-type="undo-drop"] .inner .icon .checkmark__circle {stroke:#b74c22;}
.response[data-type="undo-drop"] .inner .icon .checkmark__check {stroke:#ffd4c3;}
.response[data-type="undo-drop"] .inner p span {color:#b74c22;}
.response[data-type="undo-drop"] .tool {background-color:#b74c22;color:#ffd4c3}

.response[data-type="undo-erase"] {background-color:#ffd4c3;}
.response[data-type="undo-erase"] .close,
.response[data-type="undo-erase"] .inner {color:#5f2812;}
.response[data-type="undo-erase"] .inner .icon.no-svg {background-color:#b74c22;color:#ffd4c3}
.response[data-type="undo-erase"] .inner .icon .checkmark {color:#b74c22;}
.response[data-type="undo-erase"] .inner .icon .checkmark__circle {stroke:#b74c22;}
.response[data-type="undo-erase"] .inner .icon .checkmark__check {stroke:#ffd4c3;}
.response[data-type="undo-erase"] .inner p span {color:#b74c22;}
.response[data-type="undo-erase"] .tool {background-color:#b74c22;color:#ffd4c3}

.response[data-type="unlock"] {background-color: #f3baa3;}
.response[data-type="unlock"] .close,
.response[data-type="unlock"] .inner {color:#7b3f27;}
.response[data-type="unlock"] .inner .icon.no-svg {background-color:#973c16;color:#f5ab8d}
.response[data-type="unlock"] .inner .icon .checkmark {color:#973c16;}
.response[data-type="unlock"] .inner .icon .checkmark__circle {stroke:#973c16;}
.response[data-type="unlock"] .inner .icon .checkmark__check {stroke:#f5ab8d;}
.response[data-type="unlock"] .inner p span {color:#973c16;}
.response[data-type="unlock"] .tool {background-color:#973c16;color:#f5ab8d}

.response[data-type="delete"] {background-color:#fd5769;}
.response[data-type="delete"] .close {color:#631e25;}
.response[data-type="delete"] .inner {color:#fff;}
.response[data-type="delete"] .inner .icon.no-svg {background-color:#ffd4c3;color:#fd5769}
.response[data-type="delete"] .inner .icon .checkmark {color:#ffd4c3;}
.response[data-type="delete"] .inner .icon .checkmark__circle {stroke:#ffd4c3;}
.response[data-type="delete"] .inner .icon .checkmark__check {stroke:#fd5769;}
.response[data-type="delete"] .inner p span {color:#ffd4c3;}
.response[data-type="delete"] .tool {background-color:#ffd4c3;color:#fd5769}

/* Animazioni keyframe */
@keyframes stroke {
	100% {stroke-dashoffset: 0}
}

@keyframes scale {
	0%, 100% {transform: none}
	50% {transform: scale3d(1.1, 1.1, 1)}
}

@keyframes fill {
	100% {box-shadow: inset 0 0 0 30px;}
}

/* Media queries */
@media screen and (max-width:900px) {
	/* General */
    .normal {width:100%;padding-left:12%;padding-right:12%;}
}

@media screen and (max-width:600px) {
	/* Header */
	header {padding-top: 50px;padding-bottom: 40px;}
	/* Controlli */
	.dd .controls {margin-right:0;margin-bottom:0;}
	.dd .controls .btn {width:100%;margin-right: 0;}
	.dd .controls .btn:last-child {margin-bottom: 0;}
	/* Popup */
	.popup {padding-left:6%;padding-right:6%;}
	.popup .content {width: 100%;}
	
}