rf-dialog {

   .rf-dialog {

      .dialog-container {
         overflow-y: auto;
         width: 100%;
         margin: 0;
         padding-bottom: 30px;
         background: white;
         position: absolute;
         left: 0;
         right: 0;
         max-height: 80vh;
      }

      .header {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
         background: var(--midwhite);
         height: 40px;
         padding-left: 10px;
         padding-right: 10px;
         text-align: left;
         color: var(--midgrey);
         font-weight: bold;
         font-size: 19px;
         line-height: 40px;

         .actions {
            float: right;

            .rf-btn {
               line-height: 21px;
               font-size: 21px;
            }
         }
      }


      .grey-layer {
         position: fixed;
         z-index: 9100;
         left: 0;
         right: 0;
         bottom: 0;
         top: 0;
         background-color: grey;
         opacity: 0;
         opacity: 0.8;
      }

      .dialog-child{
         .box {
            z-index: 9500;
         }

         .grey-layer {
            z-index: 9400;
         }
      }

      .box {
         position: fixed;
         z-index: 9300;
         display: block;
         text-align: center;
         margin: 0 auto;
         box-shadow: none;
         top: 15vh;

         &.small {
            @media (min-width: 768px) and (max-width: 991px) {
               width: 60%;
               left: 20%;
            }
            @media (min-width: 992px) and (max-width: 1399px) {
               width: 40%;
               left: 30%;
            }
            @media (min-width: 1400px) {
               width: 20%;
               left: 40%;
            }
         }
         // default
         @media (max-width: 991px) {
            width: 90%;
            left: 5%;
         }
         @media (min-width: 992px) and (max-width: 1399px) {
            width: 60%;
            left: 20%;
         }
         @media (min-width: 1400px) {
            width: 40%;
            left: 30%;
         }

         &.medium {
            width: 60%;
            left: 20%;
            top: 5vh;
            .dialog-container{
               max-height: 90vh;
            }
            @media (max-width: 1399px) {
               width: 90%;
               left: 5%;
            }
            @media (min-width: 1400px) {
               width: 60%;
               left: 20%;
            }
         }

         &.large {
            width: 90%;
            left: 5%;
            top: 3vh;
            .dialog-container{
               max-height: 90vh;
            }
         }

         &.max {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;

            dialog-body {
               background: white;
               bottom: 0;
               position: fixed;
               top: 34px;
               left: 0;
               // default padding
               padding: 10px;
            }

            &.header-hidden dialog-body {
               top: 0;
               // padding might be done individual in a sub container
               padding: 0;
            }
         }

         &.maxheader{
            top: 0;
            bottom: 0;
         }
      }
   }

   .no-header{
      .header{
         display: none;
      }

      .dialog-container{
         border-radius: 10px;
         padding-bottom: 0; // we want the whole space inside
      }

      dialog-body{
         padding: 0;
      }
   }

   @media (min-width: 100px) and (max-width: 768px){
      .rf-dialog .active .box{
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         &.small, &.medium, &.large{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
         }
      }
   }


   .dialog-left-container {
      height: 100%;
      margin-top: 5px;
      padding-left: 30px;

      &.scroll {
         overflow-y: auto;
      }
   }

   .dialog-right-col {
      border-left: 2px solid gray;
      height: 100%;

      .upper-container {
         position: absolute;
         top: 0;
         bottom: 70px;
         overflow-y: auto;
         padding-right: 15px;
         right: 15px;
         left: 15px;
      }

      .lower-container {
         position: absolute;
         bottom: 0;
         left: 15px;
         right: 25px;
         height: 60px;
         padding-top: 5px;
         border-top: 1px solid var(--midgrey);

         .rf-btn {
            width: 100%;
         }
      }
   }
}