@charset "UTF-8";

/** Modal background for situations when JavaScript not in use. */
 .salaxy-modal-background{
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.6);
}

.salaxy-component {
    &.salaxy-dialog{
      .panel-heading{
        h1{
          font-size:18px;
          margin-top:5px;
          margin-bottom:5px;
        }
      }
      .modal-body{
          >.payroll-report, .salaxy-invoices-create{
          max-height: calc(~"100vh - 280px");
          overflow:auto;
          &.payroll-report-partial-container{
            width:100%;
            max-height:unset;
            overflow:unset;
          }
        }
      
        
      }
      .company-onboarding{
        .modal-header{
          text-align: center;
          background-image:url("@{dialog-logo-path}");
          background-size: 160px auto;
          background-position: left center;
          background-repeat: no-repeat;
          background-origin: content-box;
          h2, h1, .modal-title{
            padding:0px;
          }
          @media (max-width: @screen-sm-min){
            background-image:none;
          }
        }
      }
    }
    .modal-header {
        border-bottom: 10px solid @modal-header-border-color;
        background-color: @salaxy-header-bg;
        border-radius: 6px 6px 0 0;
        color: @salaxy-header-text;
        .salaxy-avatar {
            font-size: 74px;
            margin: 0 20px;
        }
        h2, h1 {
            padding: 0px 10px 0 0px;
        }

        h4 {
            margin-top: 0;
            padding: 0px 10px 0 0px;
        }
        .rounded {
            padding: 0px;
        }
    }

    .modal-title {
        color: @salaxy-header-text;
    }

    .modal-body {
        width: 100%;
        @media screen and (max-width:768px){
            display:block;      
          }
        .payment-dialog-avatar{
        font-size:76px;
        line-height:1em;
        @media screen and (max-width:576px){
           font-size:50px; 
            } 
        }
    }
    .payment-options{
        display:table;
        .back{
            margin-top:10px;
        }
    }
    .dialog-buttons-row{
      margin-top:15px;
    }
    .payment-method-row{
        margin-top:30px;
        -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.14);
        -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.14);
        box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.14);
        .btn{
            margin-top:20px;
            margin-bottom:20px;
            float:right;
          }
    }
    .payment-img{
        padding:10px;
        
        img{
            border:1px solid #eee;
            min-width:97%;
            margin:auto;
            &.paytrail{
                border:none;
            }
        }
    }

    .salaxy-external-dialog,
    &.salaxy-external-dialog {
      .modal-header {
        border-radius: 0;
        height: 86px;
      }
      .modal-body {
        height: calc(100vh - 86px - 74px);
        overflow-y: auto;
      }
  
      .modal-footer {
        position: absolute;
        height: 74px;
        bottom: 0px;
        width: 100%;
      }
    }

    @media screen and (min-width: 1050px){
        &.salaxy-new-payment-dialog.modal-dialog {
        max-width:1024px;
        }
    }
    @media screen and (min-width: 892px){

        &.salaxy-new-payment-dialog.modal-dialog {
            width: 90%;
        }
    }
  
    @media screen and (max-width: 480px) {
        .modal-header h4 {
            margin-top: 0;
            line-height: 1em;
            font-size: 1em;
            word-break: break-all;
            padding: 0px 10px 0 15px;
        }

        .modal-header h2 {
            font-size: 1.1em;
            word-break: break-all;
        }

        .modal-header .salaxy-avatar {
            font-size: 2em;
            margin: 0 10px;
        }
    }
    .modal-date-range{
        padding: 10px;
        .uib-datepicker{
          display:block;
        }
    }
}

/**
    Mock modal is an experimental modal, that needs only CSS to function, no need for JavaScript
*/

// Experimental variable, can be fine-tuned
@mock-modal-footer-min-height: ((2 * @modal-inner-padding) + @line-height-computed + @mock-modal-helper);
@mock-modal-helper: 16px; // 2*6px +4px
@modal-title-padding: 20px;

@mock-modal-header-max-height-xs: (2*@modal-title-padding + @mock-modal-header-content-height-xs);
@mock-modal-header-max-height-sm: (2*@modal-title-padding + @mock-modal-header-content-height-sm);

@mock-modal-header-content-height-xs: 40px;
@mock-modal-header-content-height-sm: 52px;








@media screen and (min-width:768px) {
    .modal-dialog.modal-lg {
        width: 90%;
        margin: 30px auto;      
    }
}


@media screen and (min-width:992px) {
    .modal-dialog.modal-lg {
        width: 900px;
        margin: 30px auto;      
    }
}




/*new styles */

.modal-dialog{
    .salaxy-rpt{
      max-height: 80vh;
    }
    .salaxy-calc-reports {
      min-height: 500px;
    }
    .modal-logo{
        max-width: 157px;
        margin-top: -5px;
        float: left;
        margin-right: 30px;
    
    }
    .modal-title{
        display:inline-block;
    }
    &.modal-landscape{
      max-width: 90%;
      width: unset;
    }
    &.modal-xl{
      max-width: 1400px;
      width: 90%;
    }
}