//*todo variables for personal layout*/
@import "../_all-includes.less";
@import "./timeline.less";
@salaxy-navi-logo-personal: "https://cdn.salaxy.com/ng1/palkkaus-logos/palkkaus-logo-dark.png";
@salaxy-navi-sidebar-width-personal:  250px;


@brand-dark-personal: #212529;
.layout-personal{
  background-color:#f4f7fc;
  font-family: 'Source Sans Pro', sans-serif;
  color:@brand-dark-personal;
  .salaxy-navi-page-container{
      padding-left: @salaxy-navi-sidebar-width-personal;
      &.double-sidebar{
        @media screen and (min-width:@screen-sm){
          padding-right:315px;
        }
      }
     
      .salaxy-navi-main-container {
        @media screen and (max-width:@screen-sm-max){
          margin-top: 60px;
        }
      }
     

    .salaxy-navi-sidebar{
      box-shadow:0 0 2rem 0 rgba(0,0,0,.05);
      width: @salaxy-navi-sidebar-width-personal;
      li.list-group-item{ 
        border:none;
        
        a {
          color: @brand-dark-personal;
          font-weight: 700;
          font-size:1.05em;
          line-height:1.5em;
        }
        >a {
          text-transform:uppercase;
        }
        li a{
          font-size:1em;
          &:hover{
            color: #009fd8;
            
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
          }
        }
        >a:hover {
          color: #009fd8;
          background: #fff;
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
        }
        > a:after{
          height: 2px;
          content: "";
          display: block;
          width: 0;
          background-color: @brand-primary;
          background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #009fd8), to(#289548));
          background-image: linear-gradient(90deg, #009fd8 0, #289548);
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
        }
        >a:hover:after{
          width: 220px;
        }
      }
      
      .salaxy-login-button-personal{
        font-size:16px;
        border-bottom:1px solid #ddd;
        width:100%;
        padding:10px;

        salaxy-avatar{
          font-size:2.5em;
          margin-top:5px;
        }
        .login-text{
          display:inline-block;
          margin-left:7px;
          .salaxy-login-button-text{
            font-size:0.85em;
            font-weight: 600;
          }
          a{//delete
            display:block;
            font-size:13px;
            color: @brand-dark-personal;
            
          }
        }
        .btn{
          display:block;
          font-size:13px;
          color: @brand-dark-personal;
          &:hover{
            color:@brand-primary;
          }
        }
        .btn-group{
          display:block;
          &.btn{
            font-size:13px;
            color: @brand-dark-personal;
            &:hover{
              color:@brand-primary;
            }
          }
        }
      }

      .salaxy-logo-container{
        height: 58px;
        padding: 5px 0px 5px 0px;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        a{
          height: 48px;
          background-position: center center;
          //background-image: url(/img/palkkaus-logo.png);
          background-image:url("@{salaxy-navi-logo-personal}");
          background-size: 114px;
          background-repeat: no-repeat;  
          display: block;
          width: 100%;
          margin: auto;
        }
      }
    }
    @media (max-width: @screen-sm-max){
      padding-left: 0;
    }
    .salaxy-navi-header-mobile{
      height:50px;
      padding:10px 15px;
      .btn.salaxy-navi-hamburger{
       padding:4px 9px;
      }
      .btn-group-login-button{
        margin-right:10px;
      }
      .login-button{
        font-size: 30px;
        height: 1em;
        line-height: 1em;
        border-radius: 50%;
        width: 1em;
        overflow: hidden;
        border: 1px solid #ddd;
        padding-left: 0;
      }
      @media screen and (max-width: 480px){
        height: 45px;
        padding: 9px 15px;
        h1 {
         font-size: 20px;
         margin-top: 3px;
        }
      }
    }
   
  }
  .salaxy-navi-sitemap{
    .list-group{
      margin-top:10px;
    }
  }
  main{
    .container, .container-fluid{
      margin-top:0;
    }
  }
  .embed{
    margin-left: -15px;
    margin-right: -15px;
    iframe{
      height:calc(100vh - 180px);
      @media (max-width: @screen-sm-max){
        height:calc(100vh - 145px);
      }
      @media (max-width: @screen-xs-max){
        height:calc(100vh - 70px);
      }
    }
  }

  /*iframe content*/
  .subtitle{
    font-size:25px;
  }
  .report-signature-line {
    height: 25px;
    border-bottom: 1px solid #000;
    margin-bottom: 8px;
  }
  .palkkaus-avatar {
    width: 1em;
    height: 1em;
    line-height: 1em;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    position: relative;
    strong {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      font-size: .5em;
      font-family: 'Source Sans Pro', sans-serif;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 1em;
      height: 1em;
      padding: 0;
      border-radius: .2em;
    }
    &.fa-user{
      strong{
        font-size: .35em;
        margin-top: .7em;
      }
    }
  }
  .worker-drafts{
    .table-responsive{
      background-color:#fff;
      padding:20px 15px;
      box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.13);
    }
  }
  table{
    .avatar-container{
      font-size:45px;
      @media (max-width: @screen-xs-max){
        font-size:35px;
      }
    }
  }
  iframe{
    width: 100%;
    border: none;
  }
  

}

.salaxy-account-info .person-account salaxy-avatar {
  font-size: 85px;
  margin-right: 0;
  margin-bottom: 5px;
  margin-top: 15px;
}

.salaxy-navi-sidebar{
 
  .fa-chevron-down{
    transition: 300ms linear transform;
    &.upside{
      transform: rotate(180deg);
    }
  }
}


@media (max-width: 991px){
  .layout-personal{
    .salaxy-navi-page-container{
      padding-left: 0;
    }
  }
  
}

.light-bg{
  background-color:#fff;
  padding:20px 15px;
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.13);
  @media (max-width: @screen-sm-max){
    margin-bottom:20px;
  }
  h2, h3, h4 {
    margin-top:0px;
  }
}
.large-number{
  font-size: 80px;
  font-weight: bold;
  line-height: 0.5em;
  margin-top: 30px;
  .sub{
    display:block;
    font-size: 0.3em;
    line-height: 2em;
    
  }

}