@import "./variables.less";

/*--------------- HomePage Containers Structure ---------------------------*/
#digitalWorkplaceHomePage {

  #SliderContainer .newsSlider .sliderNewsItems  {
    width: 100%;
    height: 220px !important;
  }

  #digitalWorkplaceHomePageChildren {
    margin: 20px;

    > * {
      max-width: 100%;
    }
  }

  #MiddleContainer {

    #MiddleContainerChildren {
      display: flex;

      > :first-child {
        flex-basis: auto;
        flex-grow: 1;
        max-width: ~"calc( 100% - 390px )";
      }

      > :nth-child(2) {
        flex: 0 1 370px;
        margin-left: 20px ~'; /** orientation=lt */ ';
        margin-right: 20px ~'; /** orientation=rt */ ';
      }
    }
  }

  #UserProfileContainer {
    max-height: 404px;

    #UserProfileContainerChildren {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      margin-left: auto ~'; /** orientation=lt */ ';
      margin-right: auto ~'; /** orientation=rt */ ';

      > :first-child {
        flex-basis: auto;
        flex-grow: 1;
      }

      > :nth-child(2) {
        flex: 0 1 26%;
        margin-top: 10px;
      }
    }
  }

  #PerkstoreWalletContainer {
    height: 94px;

    #PerkstoreWalletContainerChildren {
      display: flex;
      flex-direction: row;

      > :first-child {
        flex: 1 1 auto;
        min-width: 48%;
      }

      > :nth-child(2) {
        flex: 1 1 48%;
        min-width: 48%;
        margin-left: 2% ~'; /** orientation=lt */ ';
        margin-right: 2% ~'; /** orientation=rt */ ';
      }
    }
  }

  #BottomContainer {
    #BottomContainerChildren {
      display: flex;
      flex-direction: row;
      max-width: 100%;

      > * {
        min-height: 100%;
        flex: 1 1 auto;
        min-width: 32%;
        background: #fff !important;
        overflow: hidden;
        max-width: 100%;
      }

      > :nth-child(2), > :nth-child(3) {
        margin-left: 20px ~'; /** orientation=lt */ ';
        margin-right: 20px ~'; /** orientation=rt */ ';
      }
    }
  }

  .UICLVPortlet, .UICLVFolderMode {
    border: 0 !important;
  }

  #profile-stats-portlet {
    margin: 0 !important;
  }

  #latestNewsDetails, #profile-stats-portlet, #perkstoreOrderPortlet, #walletBalancePortlet,#tasks {
    .container {
    	margin: 0;
      max-width: initial;
    }
  }

  #latestNewsDetails {
    background: #fff !important;
  }

  #DocumentsContainer {
    .v-slide-group__next,
    .v-slide-group__prev {
      flex:0 1 25px;
      min-width: 25px;
    }
    .v-slide-group__next > i,
    .v-slide-group__prev > i {
      color: @primaryColor;
    }
    .v-tabs-slider-wrapper {
      height: 3px!important;
    }
    .v-tab {
      box-sizing: border-box;
    }
    .v-tab > .tabsTitle {
      color: @greyColorLighten1;
    }
    .v-tab--active > .tabsTitle {
      color: @primaryColor
    }
    .tabsTitle {
      font-size: 1rem!important;
      font-weight: 400;
      letter-spacing: .009375em!important;
      line-height: 1.75rem;  text-transform: capitalize;
    }
  }
}
@media only screen and (min-width: @minDesktop) {
  #digitalWorkplaceHomePage #LatestNewsContainer .news-list-view-app {
    height: 404px;
  }
  #digitalWorkplaceHomePage #latestNewsDetails {
    height: 404px;
  }
}
@media (min-width: @minDesktop) {
  #digitalWorkplaceHomePage {
    #UserProfileContainerChildren {
      min-width: 370px;
      #ProfileStatsContainer:only-child {
        #profile-stats-portlet .profileCard {
          min-height: 404px;
        }
      }
    }
  }
}

@media (max-width: @minDesktop) {
  #digitalWorkplaceHomePage {

    #MiddleContainer {
      margin-top: 10px;

      #MiddleContainerChildren {
        flex-direction: column;

        > :first-child {
          max-width: 100%;
        }
  
        > :nth-child(2) {
          margin-left: 0 !important;
          margin-right: 0 !important;
          max-height: none;
        }
      }
    }

    #UserProfileContainer #UserProfileContainerChildren {
      flex-direction: row;
      margin-top: 10px;

      > :nth-child(2) {
        margin-top: 0;
        margin-left: 20px ~'; /** orientation=lt */ ';
        margin-right: 0 ~' !important; /** orientation=lt */ ';
        margin-right: 20px ~'; /** orientation=rt */ ';
        margin-left: 0 ~' !important; /** orientation=rt */ ';
      }
    }

    #PerkstoreWalletContainer {
      min-height: 100%;
      height: auto;

      #PerkstoreWalletContainerChildren {
        flex-direction: column;
        height: 300px;

        > :first-child {
          min-height: 50%;

          .big-number {
            margin: 17px 0 38px !important;
            display: block;
          }
        }

        > :nth-child(2) {
          min-height: 50%;
          margin-left: 0 ~'; /** orientation=lt */ ';
          margin-right: 0 ~'; /** orientation=rt */ ';
          margin-top: 20px;

          .big-number {
            margin: 12px 0 34px !important;
            display: block;
          }
        }
      }
    }

    #BottomContainer {
      margin-top: 10px;
      #BottomContainerChildren {
        flex-wrap: wrap;
  
        > :nth-child(3) {
          margin-left: 0 !important;
          margin-right: 0 !important;
          min-width: 100%;
          margin-top: 20px;
        }
      }
    }

    #DocumentsContainer {
      .v-slide-group__wrapper {
        padding-left: 18px ~'; /** orientation=lt */ ';
        padding-right: 18px ~'; /** orientation=rt */ ';
      }
    }

  }
}

@media (max-width: @maxMobileWidth) {
  .VuetifyApp .v-btn:not(.v-btn--round).v-size--small {
    margin-top: 0 !important;
  }
  #digitalWorkplaceHomePage {
    #UserProfileContainer #UserProfileContainerChildren {
      flex-direction: column;
  
      > :nth-child(2) {
        margin-top: 10px;
        margin-left: 0 ~'; /** orientation=lt */ ';
        margin-right: 0 ~'; /** orientation=rt */ ';
      }
    }
  
    #PerkstoreWalletContainer #PerkstoreWalletContainerChildren {
      flex-direction: row;
      height: 94px;
  
      > :first-child {
        min-height: 100%;
  
        .big-number {
          margin: 0 !important;
          display: block;
        }
      }
  
      > :nth-child(2) {
        min-height: 100%;
        margin-left: 10px ~'; /** orientation=lt */ ';
        margin-right: 10px ~'; /** orientation=rt */ ';
        margin-top: 0;
  
        .big-number {
          margin: 0 !important;
          display: block;
        }
      }
    }

    #BottomContainer #BottomContainerChildren {
      flex-direction: column;

      > * {
        min-width: auto !important;
      }

      > :nth-child(2), > :nth-child(3) {
        margin-left: 0 ~'!important; /** orientation=lt */ ';
        margin-right: 0 ~'!important; /** orientation=lt */ ';
        margin-right: 0 ~'!important; /** orientation=rt */ ';
        margin-left: 0 ~'!important; /** orientation=rt */ ';
        margin-top: 10px;
      }
    }

  }
}