.charm-link {cursor: pointer; color:#1d34fe; display: flex; align-items: center; justify-content: center; margin-left: 8px;width:30px; height:30px; align-self: center}
.charm-link svg {width: 20px; height:20px; fill:currentColor}


.charmopen {
  background: radial-gradient(#eeeeee, #cccccc);
  height: 100%;
  overflow: hidden;
}

.charmopen .wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  perspective: 1500px;
}

.charmopen .page {
  background:white;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100vw;
  height: 100vh;
  backface-visibility: hidden;   
  z-index: 10;
  
  transition: opacity 0.25s, transform 0.25s;
  transform-origin: 0% 50%;
  transform: rotateY(45deg) scale(0.85,1);
  opacity: 0.5;
}

.charmopen header {
  position: absolute;
}


.charmopen .page-cover {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 10;    
}

.charmopen .charm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 48px;
  color: #777777;
  cursor: pointer;
  z-index: 11;
}

.charmopen .charm-close:hover {
  color: #1d34fe;
}

.charmopen .charm-close:before {
  content: "\00d7";
}

.charm {
  display: none
}


.charmopen .charm{
  right: 0;
  width: 30%;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #777777;
  font-size: 24px;
  z-index: 10;
  position: absolute;
  font-family: "Arial Narrow", sans-serif;
  animation: show-charm 0.3s;
  display: block;
  min-width: 250px;
  background: #ffffff;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;    
}

.charmclosing .page {
  transform: rotateY(0deg) scale(1,1);
  opacity: 1;
}

.charmclosing .charm {
  animation: hide-charm 0.25s;
}

.charmclosing .page-cover,
.charmclosing .charm-close {
  display: none;
}

@keyframes show-charm {
  0% { opacity: 0; right: -100%; }   
 25% { opacity: 0; right: -100%; }   
100% { opacity: 1; right: 0 }
}

@keyframes hide-charm {
  0% { opacity: 1; right: 0 }   
100% { opacity: 0; right: -100% }
}


@media (min-width: 959px) {
  .charmopen .page {
      transform: translateZ(-600px) translateX(3%) rotateY(45deg) scale(0.85,1);
      box-shadow: 150px 0 500px rgba(0,0,0,0.1);
  }

  .charmclosing .page {
    transform: translateZ(0) translateX(0) rotateY(0deg) scale(1,1);
  }

  .charmopen .charm{
      height: auto;
      top: 50%;
      transform: translateY(-50%);
      background: transparent
  }    
}

.charm .charmin{padding:18px 0;  overflow: auto; max-height: 100vh; box-sizing: border-box; -webkit-overflow-scrolling: touch }
.charm .charmmenu{}
.charm .charmmenu+.charmmenu {margin-top: 120px;}
.charm ul{list-style:none;margin:0;padding:0;display:table}
.charm .charmmenu:last-child ul{vertical-align:bottom;padding:0 0 23px 0;height:100%}
.charm .charmmenu:first-child ul{vertical-align:top;padding:23px 0 0 0;}
.charm ul li{margin:0;padding:0}
.charm ul li a{display:block;padding:10px 30px;margin:0;text-decoration:none;color:#1d34fe}
.charm ul li:hover a{text-decoration:underline}
.charm ul li strong{display:block;padding:10px 30px;margin:0;text-decoration:none;}
.charm ul li.separator{padding:5px 30px;margin:30px 0 0 0;font-size:16px;font-weight:bold;color:#777777}
.charm ul li.separator:first-child{margin-top:0}

.admin-actions {display: block;margin-top: 16px;}
.admin-actions a {display:inline-block;margin-right: 4px;background:#eeeeee;padding:6px;line-height:16px;text-transform:uppercase;font-size:12px;text-decoration: none;font-weight: bold;border:2px solid #eeeeee;border-radius:2px}
.admin-actions a:hover{border-color:#1d34fe}
.admin-actions .icon{display:inline-block;width:16px;height:16px;background-repeat:no-repeat;background-position:0 0;vertical-align: top;}
.admin-actions .icon-bin{background-image:url(img/icon-bin.png)}
.admin-actions .icon-edit{background-image:url(img/icon-edit.png)}