@localtapiola-primary:#0077b3; 
@localtapiola-primary-hover: rgb(0, 95, 143);
@localtapiola-danger: #de2362;
@localtapiola-danger-hover:rgb(178, 28, 78);
@localtapiola-secondary: rgb(0, 41, 77);
@localtapiola-secondary-hover: @localtapiola-primary;
@localtapiola-font: "localtapiola-sans";

 .salaxy-component {
  .localtapiola-modal{
   /* background-image: url("https://cdn.salaxy.com/ng1/if-modal/if-bg.jpg");*/
    font-family: @localtapiola-font;
    background-position: right;
    font-weight: 400;
    font-size: 16px;
    line-height:1.08em;
    background-color: #ffff;
    border-radius: 0;
    background-size: cover;
    &.localtapiola-bg{
      //NOT IN USE
      background-image:url('https://cdn.salaxy.com/ng1/localtapiola-modal/localtapiola-shape-bg.png');
      min-height: 560px;
      background-position: left;
      
    }
    .modal-header{
      background-color:@localtapiola-primary;
      border-bottom:none;
    }
    .logo-wrapper{
      float:left;
    }
    .logo-img {
      max-width: 200px;  
    }
    .modal-body {
      padding-left:30px;
      padding-right:30px;
      background-color:transparent;
    }
    
    /* Typography */
    h1 {
      font-weight: 900;
      margin-top: 10px;
      font-size:36px;
      margin-bottom:15px;
      letter-spacing: -0.16px;
      color:@localtapiola-secondary;
    }
    h2{font-weight: 900;
      color:@localtapiola-secondary;}
    .subtitle{
      font-weight:normal;
      letter-spacing: -0.16px;
      font-size:24px;
      color:@localtapiola-secondary;
      font-weight:900;
      
    }
    .intro{
      font-size: 20px;
      line-height: 1.2em;
      color:@localtapiola-secondary;
    }
   
    p{
      color:@localtapiola-secondary;
      
      font-size:16px;
      a{
        color:@localtapiola-primary;
      }
      &.small{
        font-size:14px;
      }
    }
    .checkbox-label{
      color:@localtapiola-secondary;
    }
    .control-label{
      color: @localtapiola-secondary;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.5;
      padding-top:0;
    }
    legend{
      font-size: 20px;
      line-height: 1.2em;
      font-weight:600;
      color: @localtapiola-secondary;
      small{
        font-size: 76%;
        color: @localtapiola-secondary;
        display: block;
      }
    }
  
    input, select, textarea, .form-control{
      background-clip: initial;
      border: 1px solid #909599;
      border-radius: 4px;
      color: @localtapiola-secondary;
      // height:auto;
      // padding:12px 14px !important;
      font-weight: 400;
      line-height:1.6 !important;
      &:hover{
        box-shadow: 0 0 0 1px #909599;
      }
      &:focus{
        border-color: @localtapiola-primary;
        box-shadow: 0 0 0 1px @localtapiola-primary;
        outline: 0;
      }
      &[readonly], &[readonly]:hover, &[readonly]:focus{
        background-color: #f5f8fa!important;
        border-color: #f5f8fa!important;
        box-shadow: none;
      }
    }
    salaxy-input.ng-invalid input.ng-dirty.ng-valid{
      border-color: @localtapiola-danger;
    }
    .form-group .salaxy-validation-error {
      
      line-height: 1.9em;
    }
    textarea{
      height:auto;
    }

    .text-danger{
      color:@localtapiola-danger;
    }
    .intro-col{
      margin-bottom: 35px;
    }
    .start-subtitle{
      margin-bottom:20px;
      margin-top:20px;
      
    }
    .txt-index{
      div{
        font-weight:900;
        padding: 11px 19px 10px;
        font-size:16px;
        line-height: 1.5;
      }
    }
    .btn{
      border-width:2px;
      color:#fff;
      font-size:16px;
      border-radius: 27px;
      padding: 14px 27px 15px;
      font-weight: 600;
      font-family: @localtapiola-font;
      transition: background-color 300ms ease 0s, color 300ms ease 0s, border 300ms ease 0s, box-shadow 300ms ease 0s;
      &.btn-primary {
        background-color: @localtapiola-primary;
        border-color:@localtapiola-primary;
        
        &:hover{
          background-color:  @localtapiola-primary-hover;
          border-color:  @localtapiola-primary-hover;
          

        }
      }
      &.btn-secondary {
        background: #fff;
        border-color: @localtapiola-secondary;
        color: @localtapiola-secondary;
        
        &:hover{
          background-color:#fff;
          border-color: @localtapiola-secondary-hover;
          color: @localtapiola-secondary-hover;
        }
      }
      &.btn-danger{
        background-color:#fff;
        border-color:@localtapiola-danger;
        color:@localtapiola-danger;
        &:hover{
          color:#fff;
          background: @localtapiola-danger-hover;
          border-color:  @localtapiola-danger-hover;
        }
      }
      &.btn-sm{
        padding: 9px 19px 10px;
        font-size:14px;
      }
      &.btn-xs{
        padding: 6px 13px 6px;
        font-size:12px;
      }
      &:focus{
        outline:none;
      }
      /*Wizard navi buttons*/
      &.navi-link{
        color:@localtapiola-primary;
        font-weight: 600;
        text-decoration: none;
        &:focus{
          outline:none;
          text-decoration: none;
        }
        &:hover{
          color:rgb(0, 77, 128);
          text-decoration: none;
        }
        &.disabled {
          cursor: not-allowed;
        }
        &.btn-sm{
          font-size:16px;
        }
      }
    }
    .close{
      text-shadow:none;
      color:#fff;
      opacity:1;
      font-weight:normal;
      font-size: 15px;
      &:hover, &:focus{
        color:#fff;
        text-decoration: none;
        cursor: pointer;  
      }
    }
    
   
    .delete-row-col{
      padding-top:18px;
      @media screen and (max-width:767px){
        padding-top:24px;
      }

      .fa{
        @media screen and (min-width:767px){
          margin-right:5px;
        }
       
      }
    }
  
    
    
 

    .glyphicon {
      
      &.glyphicon-calendar{
        min-height: 21px;
        &:before{
          font-family:'Glyphicons Halflings';
          content: "\e109";
        }
      }
    }
    .input-group-btn .btn, .input-group:last-child > .btn, .input-group-btn .btn.btn-default{
      border-radius: 0px 4px 4px 0px;
      padding: 7px 10px 2px;
      color:#555;
      border: 1px solid #ccc;
      background-color:#fff;
      
     
     &:focus{
       
       box-shadow:none;
     }
      &:first-child{
        margin-right:0px;
      }
    }
   
    

    .alert-text {
      color:@localtapiola-danger;
      margin-left: 67px;
    }

  
    
  }
}