@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

#mfn-demo-panel-overlay { display:none; position: fixed; left: 0; top: 0; z-index: 9001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2);}

#mfn-demo-panel{ font-family: "Poppins", Arial, Helvetica, sans-serif; letter-spacing: 0 !important; color: #00032A; position: fixed; right: -780px; top:0; width: 780px; height: 100%; padding: 8px 8px 8px 0; z-index:9002; font-size:14px; line-height:1.4;box-sizing: border-box; transition:right .4s ease-in-out}
#mfn-demo-panel * { box-sizing: border-box; }
#mfn-demo-panel a { text-decoration: none; }
#mfn-demo-panel img { max-width: 100%; height: auto; }

#mfn-demo-panel .panel-controls { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 50%; left: -106px; transform: translateY(-50%); background-color: #fff; padding: 4px; border-radius: 12px; box-shadow: 0 12px 16px -4px rgba(16,24,40, 0.08), 0 4px 6px -2px rgba(16,24,40, 0.03); }
#mfn-demo-panel .panel-controls .control { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 90px; height: 75px; background-color: #EEF0F2; color: #AEAEAE; text-align: center; font-size: 13px; line-height: 1; border-radius: 8px; transition:all .3s cubic-bezier(.05,.5,.3,1); }
#mfn-demo-panel .panel-controls .control i{ display: block; margin-bottom: 6px; color: #00032A; font-size: 20px; font-style: normal; }
#mfn-demo-panel .panel-controls .control:hover { background-color: #E4E6E8; }
#mfn-demo-panel .panel-controls .control.buy-now{ background-color: #66C61C; color: #fff; }
#mfn-demo-panel .panel-controls .control.buy-now:hover { background-color: #5CB219; }

#mfn-demo-panel .panel-content { display: flex; flex-direction: column; height: 100%; background-color: #fff; border-radius: 12px; overflow: hidden; }

#mfn-demo-panel .panel-header { position: relative; }
#mfn-demo-panel .panel-header a { display: block; line-height: 0; }
#mfn-demo-panel .panel-header .panel-promo { position: absolute; right: 50px; bottom: 35px; width: 190px; }
#mfn-demo-panel .panel-header a.panel-close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; background-size: 26px; border-radius: 4px; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.04); background-image: url(images/close.svg);  transition:all .3s cubic-bezier(.05,.5,.3,1); }
#mfn-demo-panel .panel-header a:hover.panel-close { background-color: rgba(255,255,255,.08); }

#mfn-demo-panel .panel-demos { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; overflow: auto; padding: 36px; }
#mfn-demo-panel .panel-demos .demos-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#mfn-demo-panel .panel-demos .demos-header .demos-title { font-size: 20px; font-weight: 500; margin: 0 0 3px 0; }
#mfn-demo-panel .panel-demos .demos-header .demos-title .woo { display: inline-block; background-image: url(images/woo.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; transform: translateY(-3%) scale(130%); line-height: 70%; margin: 0 0.5em; }
#mfn-demo-panel .panel-demos .demos-header .demos-title .woo .inside { visibility: hidden; }
#mfn-demo-panel .panel-demos .demos-header a.demos-link { color: #0089f7; display:inline-block; position: relative; font-weight: 500; margin: 0 25px 0 0; border-bottom: 1px solid #0089f7; padding-bottom: 5px; text-decoration: none; }
#mfn-demo-panel .panel-demos .demos-header a.demos-link:after { content: ""; display: block; position: absolute; right: -25px; top: 0; width: 22px; height: 22px; background-image: url(images/move-right-blue.svg); background-position: center; background-repeat: no-repeat; background-size: 22px;  transition:all .3s cubic-bezier(.05,.5,.3,1); }
#mfn-demo-panel .panel-demos .demos-header a:hover.demos-link:after { right: -30px; }
#mfn-demo-panel .panel-demos .demos-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
#mfn-demo-panel .panel-demos .demos-list a { display: block; }
#mfn-demo-panel .panel-demos .demos-list a.website-image { position: relative; line-height: 0; border: 1px solid #E0E2E5; border-radius: 4px; overflow: hidden; }
#mfn-demo-panel .panel-demos .demos-list a.website-image:before { content: ""; display: block; position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%); transition:all .3s cubic-bezier(.05,.5,.3,1) }
#mfn-demo-panel .panel-demos .demos-list a.website-image:after { content: "Live preview"; display: block; position: absolute; left: 10px; bottom: 0; width: calc(100% - 20px); padding: 10px 5px; text-align: center; box-sizing: border-box; opacity: 0; background-color: #fff; color: #00032A; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1; transition:all .3s cubic-bezier(.05,.5,.3,1); }
#mfn-demo-panel .panel-demos .demos-list a:hover.website-image:before { opacity: 1; }
#mfn-demo-panel .panel-demos .demos-list a:hover.website-image:after { bottom: 10px; opacity: 1; }
#mfn-demo-panel .panel-demos .demos-list a.website-title { color: #00032A; margin-top: 8px; }
#mfn-demo-panel .panel-demos hr { box-sizing: content-box; height: 0; overflow: visible; border-width: 1px 0 0; border-style: solid; border-color: rgba(48,64,80,.05); background: none; margin: 10px 0; }

#mfn-demo-panel .panel-footer { padding: 24px; }
#mfn-demo-panel .panel-footer a{display:block;background:#008af7;color:#fff;height:auto;line-height: 52px;border-radius:8px;text-align:center;width:100%;font-weight:500; transition:all .3s cubic-bezier(.05,.5,.3,1);}
#mfn-demo-panel .panel-footer a:hover{background:#006edf}

.demo-panel-open #mfn-demo-panel{right:0}
.demo-panel-open #hubspot-messages-iframe-container { display: none !important; }

@-webkit-keyframes demoflash {
  0%,100%,50%{opacity:1}
  25%,75%{opacity:.4}
}
@keyframes demoflash {
  0%,100%,50%{opacity:1}
  25%,75%{opacity:.4}
}
/* .faa-flash.animated{-webkit-animation:demoflash 4s ease infinite;animation:demoflash 4s ease infinite} */

@media only screen and (max-width: 959px) {
  #mfn-demo-panel{ width: 600px; right: -600px; }
}

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

  #mfn-demo-panel{ width: 100%; height: auto; top: auto; bottom: 0; right: auto; padding: 8px; }

  #mfn-demo-panel .panel-controls { flex-direction: row; left: 50%; transform: translateX(-50%); top: auto; bottom: 8px; }
  #mfn-demo-panel .panel-controls .control { height: 60px; width: 85px; gap: 5px; }
  #mfn-demo-panel .panel-controls .control i { margin-bottom: 2px; }

  #mfn-demo-panel .panel-content { height: calc(100% - 16px); width: calc(100% - 16px); position: fixed; top:-100%; opacity:0; transition: opacity .2s ease-in-out}
  #mfn-demo-panel .panel-header .panel-promo { display: none; }

  #mfn-demo-panel .panel-demos { padding: 20px; }
  #mfn-demo-panel .panel-demos .demos-header .demos-title { font-size: 16px; }
  #mfn-demo-panel .panel-demos .demos-header a.demos-link { display: none; }
  #mfn-demo-panel .panel-demos .demos-list { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  #mfn-demo-panel .panel-demos .demos-list a.website-title { font-size: 12px; }

  #mfn-demo-panel .panel-header a.panel-close {background-color: rgba(0,0,0,.8);}
  #mfn-demo-panel .panel-header a:hover.panel-close { background-color: rgba(0,0,0,1); }

  .demo-panel-open{overflow-y:hidden}

  .demo-panel-open #mfn-demo-panel .panel-content{top:8px;opacity:1}
  .demo-panel-open #mfn-demo-panel .panel-controls { display: none; }

}

@media only screen and (max-height: 550px) {
  #mfn-demo-panel,
  #mfn-demo-panel-overlay { display: none !important; }
  .demo-panel-open { overflow-y: auto; }
}