/**
 * Copyright (c) 2022-2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.login-portal.layout .page-wrapper.layout-file {
  flex-direction: row;
  width: 100%;
}

.page-wrapper.layout-file .left-side {
  display: flex;
  flex: 0.7;
  height: 100vh;
}

.page-wrapper.layout-file .left-side .left-panel-image {
  width: 100%;
  object-fit: cover;
  object-position: 100% 100%;
  height: 100%;
}

.page-wrapper.layout-file .right-side {
  display: flex;
  flex-direction: column;
  flex: 0.3;
  height: 100vh;
  overflow-y: auto;
}

.page-wrapper.layout-file .ui.menu {
    flex-direction: column;
}

.page-wrapper.layout-file .ui.menu:not(.vertical)>.menu {
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-portal.layout .page-wrapper.layout-file .footer {
    padding: .6rem 0!important;
}

.login-portal.layout .page-wrapper.layout-file .footer a#copyright span {
  max-width: 300px;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 2000px) {
  .page-wrapper.layout-file .left-side {
    flex: 0.65;
  }

  .page-wrapper.layout-file .right-side {
    flex: 0.35;
  }
}

@media only screen and (max-width: 1600px) {
  .page-wrapper.layout-file .left-side {
    flex: 0.6;
  }

  .page-wrapper.layout-file .right-side {
    flex: 0.4;
  }
}

@media only screen and (max-width: 1200px) {
  .page-wrapper.layout-file .left-side {
    flex: 0.5;
  }

  .page-wrapper.layout-file .right-side {
    flex: 0.5;
  }
}

@media only screen and (max-width: 1000px) {
  .page-wrapper.layout-file .left-side {
    flex: 0;
  }

  .page-wrapper.layout-file .right-side {
    flex: 1;
  }
}