/*
==============================================

Popup

============================================== */
.krt-popup{
  position: relative;
  z-index: 900;
}


/* BG
-------------------------*/


/* Popup BG */
.krt-popup .bg{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0 0 0 / 60%);
  display: block;
  transition:
  0.1s 0s linear opacity,
  0s 0s linear height;
}
.krt-popup .bg:not(.shown){
  height: 0;
  opacity:0;
  transition:
  0s 0.1s linear height,
  0.1s 0s linear opacity;
}



/* Popup
-------------------------*/
.krt-popup .popup{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
  0s 0s linear height;
}
.krt-popup .popup:not(.shown){
  height: 0;
  top:-9999px;
  transition:
  0s 0.5s linear all;


}


/* Popup Box
-------------------------*/
.krt-popup .popup .box{
  display: block;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  width: fit-content;


  height: auto;
  min-height: 300px;
  max-height: 90%;
  background-color: #fff;
  margin:0;
  border-radius: 4px;
  opacity:1;
  transform-origin: center;
  transition:
  0.1s 0s linear opacity,
  0.3s 0s cubic-bezier(0,1,0,1) transform;
}
/* Popup */
.krt-popup .popup .box:not(.shown){

  opacity:0;
  transform:scale(0.94);
  transition:
  0.1s 0s linear opacity,
  0.1s 0s linear transform;
}

@media (max-width:640px) {
  .krt-popup .popup .box{
    max-width: 96%;
    width: 100%;
    min-height: 200px;
  }

}



/* Scrollable Body, flexible heiht */
.krt-popup .box .body{
  line-height: 1.6;
  font-size:14px;
  padding:40px 50px;
  overflow: scroll;
}
.krt-popup .box .body.with-buttons{
  paddin-gbottom:110px;
}
@media (max-width:640px) {
  .krt-popup .box .body{
    padding:25px 7% 30px;
    font-size:13px;
  }
}
@media (max-width:640px) {

}


/* Buttons
---------------------------------- */
.krt-popup .box .buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    #fff 30px,
    #fff 100%
  );

  position: absolute;
  bottom:0px;
  left:0;
  right:0;
  display: flex;
  justify-content: space-evenly;
  padding:30px 0;
  border-radius: var(--radius-m);
}
@media (max-width:640px) {
  .krt-popup .box .buttons{
    padding:15px 0 15px;
  }
}




/* Close
------------------------------------------ */
.krt-popup .box .close{
  display: block;
  position: absolute;
  top:15px;
  right:15px;
  --radius:40px;
  line-height: var(--radius);
  width: var(--radius);
  height:var(--radius);
  background-size: 18px;
  cursor:pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/common/popup/popup-close.svg);
}
.krt-popup .box .close:hover{
  opacity: .6;
}
@media (max-width:640px) {
  .krt-popup .box .close{
    top:10px;
    right:10px;
    --radius:30px;
    background-size: 16px;
  }

}