@import "../../../../assets/scss/variables";

#visit-print, #invitation-print {
  display: none;
}
@font-face {
  font-family: 'DD';
  font-style: normal;
  font-weight: normal;
  src: local('DejaVu Sans'), url("/assets/fonts/DejavuSansCondensedBold.ttf") format('truetype');
}
//
//@font-face {
//  font-family: 'DD';
//  font-style: normal;
//  font-weight: bold;
//  src: local('DejaVu Sans'), url("/assets/fonts/DejavuSansCondensedBold.ttf") format('truetype');
//}



@media print {

  #root {
    display: none;
  }

  #invitation-print {
    font-family: 'DD', 'open-sans';
    color: #040059 !important;
    display: initial;
    //position: fixed;
    //top: 0;
    //left: 0;
    //padding: 10px 0;
    //margin: 0;
    //display: block !important;
    //margin-bottom: auto;
    width: 794px;
    height: 1122px;

    //p{
    //  color: #ccc;
    //  font-family: 'DD', 'open-sans';
    //}
    //h1,h2,h3,h4{
    //  font-family: 'DD', 'open-sans';
    //  color: #ccc;
    //}
  }



  @page {
    margin: 0 !important;
    padding: 0 !important;
    size: A4;
  }

  body {

    font-size: 16px;
    color: #707070;
    margin: 0;
    padding: 0;
  }

  h1, h2, h3, h4, p {
    /*font-size: 16px;*/
    margin: 0;
  }

  table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
  }

  tr {
    height: 419pt;
    vertical-align: bottom;
  }


  td {
    height: 49.95%;
    width: 50%;
    padding: 0 20px;
    position: relative;
  }

  tr:first-child {
    border-bottom: 1px dashed black;
  }

  td:first-child {
    border-right: 1px dashed black;
  }

  .bottom-print {
    border-top: 1px solid #040059;
    font-size: 10px;
    color: #040059;
    padding: 8px 0 5px;
  }

  .blue {
    color: #040059;
  }

  .gray {
    color: #707070;
  }

  /**
      TOP LEFT SECTION
   */
  .top-left .title{
    font-weight: $bold;
    color: #aaa;
    font-size: 16px;
    margin-bottom: 28px;
  }

  .top-left .name p {

    color: #040059;
    font-size: 25px;
    margin-bottom: 37px;
  }

  .top-left .code {
    font-size: 16px;
    color: #aaa;
    margin-bottom: 18px;
  }

  .top-left .qr-code {
    margin-bottom: 38px;
  }

  .top-left .logo {
    margin-bottom: 10px;
  }


  /**
    TOP RIGHT SECTION
 */

  .top-right .access {
    margin-bottom: 35px;
  }

  .top-right .access p {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 14px;
  }


  .top-right .visits {
    height: 90px;
    margin-bottom: 35px;
  }

  .top-right .visits p {
    margin-bottom: 14px;
  }

  .top-right .visits .index {
    font-size: 12px;
    margin-right: 22px;
  }

  .top-right .visits .date {
    color: #040059;
    font-size: 14px;
    margin-right: 40px;
  }

  .top-right .visits .time {
    color: #040059;
    font-size: 14px;
  }

  .top-right .visits-message {
    height: 30px;
    margin-bottom: 150px;

    h4 {
      color: #aaa;
    }
  }

  .top-right .visits-message .hint {
    margin-top: 6px;
    font-size: 12px;
  }


  .bottom-left .info {
    margin-bottom: 200px;
  }

  .bottom-left .info p{
    font-size: 16px;
  }

  .bottom-right .how-to-print {
    margin-bottom: 155px;
  }

  .bottom-right .how-to-print img {
    margin-left: 50px;
  }

  .bottom-right .how-to-print h4 {
    font-size: 16px;
    margin-bottom: 20px;
  }


  .fold {
    position: absolute;
    font-size: 8px;
    font-weight: bold;
  }

  .fold.top {
    top: 6px;
    right: 20px;
  }

  .fold.left {
    transform: rotate(270deg);
    top: 55px;
    &.en{
      left: -14px;
    }
    &.el{
      left: -22px;
    }

  }

  //#visit-print, #invitation-print {
  //  display: initial;
  //  position: fixed;
  //  top: 0;
  //  left: 0;
  //  padding: 10px 0;
  //  margin: 0;
  //  display: block !important;
  //  margin-bottom: auto;
  //  width: 794px;
  //  height: 1122px;
  //
  //  & .qr-print {
  //    display: grid !important;
  //    grid-template-columns: 50% 50%;
  //    grid-template-rows: 50% 50%;
  //    background-color: white;
  //    height: 100%;
  //
  //    & p, span {
  //      color: $main-color !important;
  //      font-size: 16px;
  //      line-height: 19px;
  //      font-weight: 500;
  //    }
  //
  //    & h4 {
  //      font-weight: bold;
  //      color: $main-color;
  //      font-size: 16px;
  //    }
  //
  //    & img {
  //      border: none !important;
  //      width: auto !important;
  //      margin: 0 !important;
  //      height: auto !important;
  //    }
  //
  //    & .bottom-print {
  //      margin-top: auto;
  //      border-top: 1px solid $main-color;
  //      padding: 0;
  //      display: flex;
  //      align-items: flex-start;
  //      padding-top: 5px;
  //
  //      & img {
  //        border: none !important;
  //        margin-right: 5px !important;
  //        width: auto !important;
  //      }
  //
  //      & span {
  //        font-size: 12px;
  //      }
  //    }
  //
  //    & .grid-item {
  //      display: flex !important;
  //      flex-direction: column;
  //      background-color: rgba(255, 255, 255, 0.8);
  //      padding: 15px;
  //      text-align: center;
  //      position: relative;
  //      text-align: left;
  //
  //      &.top-left {
  //        //border-bottom: 1px dashed black;
  //        //border-right: 1px dashed black;
  //        text-align: left;
  //
  //
  //        & .qr-code {
  //
  //          margin-bottom: 25px;
  //          //border: 1px solid rgb(190, 190, 190) !important;
  //        }
  //
  //        .visits {
  //          height: 100px;
  //        }
  //
  //        & .logo {
  //          margin-top: auto;
  //          margin-bottom: 10px;
  //
  //        }
  //
  //        & .bottom-print {
  //          margin-top: unset;
  //        }
  //      }
  //
  //      &.top-right {
  //        border-left: 1px dashed black;
  //
  //        & .info {
  //          white-space: pre-line;
  //          padding-left: 10px;
  //          text-align: left;
  //          margin-top: 140px;
  //
  //          & p {
  //            margin-bottom: 25px;
  //          }
  //        }
  //
  //        & .fold {
  //          position: absolute;
  //          transform: rotateZ(90deg);
  //          transform-origin: bottom left;
  //          top: 20px;
  //          left: 5px;
  //          font-size: 8px;
  //          color: #03045E !important;
  //        }
  //      }
  //
  //      &.bottom-left {
  //        border-top: 1px dashed black;
  //
  //        & .fold {
  //          font-size: 8px;
  //          color: #03045E !important;
  //        }
  //
  //      }
  //
  //      &.bottom-right {
  //        border-top: 1px dashed black;
  //        border-left: 1px dashed black;
  //
  //        & .how-to-print {
  //          padding-left: 10px;
  //          margin-top: 25px;
  //        }
  //      }
  //    }
  //  }
  //}
}