/**
 * 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.
 */
@font-face {
  font-family: 'K2D';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../../../../fonts/K2D/K2D-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../../../../fonts/Readex_Pro/ReadexPro-Regular.ttf') format('truetype');
}

:root {
  --fp-font-family: 'K2D';
}

body{
  font-family: var(--fp-font-family) !important;
}
.login-portal.layout .page-wrapper { 
  background: #e8f4ff
}
.ui.segment.segment-layout {
  padding: 0px!important;
}
.login-portal.layout .center-segment > .ui.container > .ui.segment .ui.header {
  margin-bottom: 0px;
  background: #1f5ca9;
  text-align: center !important;
  padding: .5rem;
  color: #fff;
  text-transform: uppercase;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  font-size: 16pt;
}
.ui.segment.segment-layout > .segment-form {
  padding: 1rem 2rem;
}
.ui.segment.segment-layout > .segment-form * {
  font-size: 13pt !important;
}
#usernameErrorText, #passwordErrorText, #error-msg{
  font-size: 11pt !important;
}
.login-portal.layout .center-segment > .ui.container > .ui.segment .segment-form .buttons{
  text-align: center !important;
  font-family: var(--fp-font-family) !important;
  font-size: 13px !important;
}
.login-portal.layout .center-segment > .ui
, .login-portal.layout .center-segment > .ui.container > .ui.segment .ui.header
, .login-portal.layout .center-segment > .ui.container > .ui.segment .ui.button
, .ui.form .field > label
, .notification-panel *
{
  font-family: var(--fp-font-family) !important;
}
.login-portal.layout .page-wrapper.layout-file .slogan-container {
    margin-left: 30px;
    min-width: 540px;
    text-align: right;
    margin-right: 0;
    display: flex;
    align-self: start;
}

.login-portal.layout .page-wrapper.layout-file .slogan-container .tag-line-text {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.login-portal.layout .page-wrapper.layout-file .slogan-container .tag-line-text > p {
  font-size: 1.3rem;
  max-width: 300px;
}

.login-portal.layout .page-wrapper.layout-file .center-segment .ui.container > .theme-icon.product-logo.portal-logo {
  display: none;
}

.login-portal.layout .center-segment {
  margin: 1rem auto;
  font-family: var(--fp-font-family);
  font-size: 13px !important;
}
.login-portal.layout .center-segment > .ui.container{
  margin: 0px;
  display: flex;
  align-self: start;
}
.login-portal.layout .center-segment > .ui.container > .ui.segment.segment-layout {
  flex: 1;
  padding: 2rem 2rem;
}
.login-portal.layout .center-segment > .ui.container > .ui.segment .ui.button {
  height: 43px;
  border-radius: 12px;
  font-size: 14px;
  font-family: var(--fp-font-family) !important;
}
.notification-panel {
    max-width: 600px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    overflow: hidden;
    flex: 1;
    font-size: 11pt!important;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    background: #f9f9f9;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}
.notification-header > span {
    flex: 1;
    text-align:center;
    text-transform: capitalize;
    color: red;
    font-size: 14pt;
}

.notification-list {
    max-height: 750px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 7px 20px;
    /* border-bottom: 1px dotted #f0f0f0; */
    position: relative;
}

.notification-item:not(:last-child) {
    background: url('assets/images/bg_dotted.png') repeat-x center bottom;
}

.notification-content {
    flex-grow: 1;
    text-align: left;
}

.notification-content p {
    font-size: 13px;
    margin: 0;
    color: #4b5563;
}
.notification-content p a {
    color: #4b5563;
    text-decoration: none;
}
.notification-content p a:hover {
    color: #565656;
    text-decoration: underline;
}
.notification-content p a:visited {
    color: #008000;
}

#header {
  width: 100%;
  height: 99px;
  /* margin: 0px 0px 10px 0px; */
  padding: 0px;
  background: url('assets/images/bg_banner.png') repeat-x center top;
}

#banner {
  position: relative;
  width: 981px;
  height: 99px;
  margin: 0px auto;
  background: url('assets/images/banner.png') no-repeat left top;
}

#footer {
    min-width: 980px;
    padding: 10px 0px;
}
#footer p {
    text-align: center;
    margin: 0px;
    padding: 4px 0px 4px 0px;
}
#footer p.top {
    padding: 10px 0px 4px 0px;
    background: url('assets/images/bg_dotted.png') repeat-x center top;
}
#footer p.bottom {
    padding: 4px 0px 5px 0px;
    background: url('assets/images/bg_dotted.png') repeat-x center bottom;
}

@media only screen and (max-width: 1200px) {
  .login-portal.layout .page-wrapper.layout-file .center-segment:not(.landing-segment) .slogan-container {
    min-width: 32em;
  }
}

@media only screen and (max-width: 1000px) {
  .login-portal.layout .page-wrapper.layout-file .center-segment:not(.landing-segment) .slogan-container {
    min-width: 25em;
  }
}

@media only screen and (max-width: 933px) {
  .login-portal.layout .page-wrapper.layout-file .center-segment .ui.container > .theme-icon.product-logo.portal-logo {
    display: block;
  }
}