/*!
 * # Semantic UI - Modal
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/*******************************
             Modal
*******************************/
/* Close Icon */
/* Header */
/* Content */
/* Image / Description */
/* Modal Actions */
/* Inner Close Position (Tablet/Mobile) */
/* Mobile Positions */
/* Responsive Widths */
/* Coupling */
/*-------------------
       States
--------------------*/
/*-------------------
        Types
--------------------*/
/* Basic */
/* Top Aligned */
/* Scrolling Margin */
/* Scrolling Content */
/*-------------------
      Variations
--------------------*/
/* Size Widths */
/* Derived Responsive Sizes */
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*******************************
             Modal
 *******************************/
/*-------------------------------
             Wizard
--------------------------------*/
/*-------------------------------
        Side Panel Modal
--------------------------------*/
/*-------------------------------
        Attribute Modal
--------------------------------*/
/*-------------------------------
      Edit Avatar Modal
--------------------------------*/
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*******************************
             Modal
 *******************************/
/*-------------------------------
             Wizard
--------------------------------*/
/*-------------------------------
        Side Panel Modal
--------------------------------*/
/*-------------------------------
        Attribute Modal
--------------------------------*/
/*-------------------------------
      Edit Avatar Modal
--------------------------------*/
/*******************************
             Modal
*******************************/
.ui.modal {
    position: absolute;
    display: none;
    z-index: 1001;
    text-align: left;
    background: #FFFFFF;
    border: none;
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
    transform-origin: 50% 25%;
    flex: 0 0 auto;
    border-radius: 3px;
    user-select: text;
    will-change: top, left, margin, transform, opacity;
}
.ui.modal > :first-child:not(.icon),
.ui.modal > .icon:first-child + * {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.ui.modal > :last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
/*******************************
            Content
*******************************/
/*--------------
     Close
---------------*/
.ui.modal > .close {
    cursor: pointer;
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    z-index: 1;
    opacity: 0.8;
    font-size: 1.25em;
    color: #FFFFFF;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.625rem 0rem 0rem 0rem;
}
.ui.modal > .close:hover {
    opacity: 1;
}
/*--------------
     Header
---------------*/
.ui.modal > .header {
    display: block;
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background: #FFFFFF;
    margin: 0em;
    padding: 1.25rem 1.5rem;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.modal > .header:not(.ui) {
    font-size: 1.42857143rem;
    line-height: 1.28571429em;
    font-weight: 400;
}
/*--------------
     Content
---------------*/
.ui.modal > .content {
    display: block;
    width: 100%;
    font-size: 1em;
    line-height: 1.4;
    padding: 1.5rem;
    background: #FFFFFF;
}
.ui.modal > .image.content {
    display: flex;
    flex-direction: row;
}
/* Image */
.ui.modal > .content > .image {
    display: block;
    flex: 0 1 auto;
    width: '';
    align-self: top;
}
.ui.modal > [class*="top aligned"] {
    align-self: top;
}
.ui.modal > [class*="middle aligned"] {
    align-self: middle;
}
.ui.modal > [class*="stretched"] {
    align-self: stretch;
}
/* Description */
.ui.modal > .content > .description {
    display: block;
    flex: 1 0 auto;
    min-width: 0px;
    align-self: top;
}
.ui.modal > .content > .icon + .description,
.ui.modal > .content > .image + .description {
    flex: 0 1 auto;
    min-width: '';
    width: auto;
    padding-left: 2em;
}
/*rtl:ignore*/
.ui.modal > .content > .image > i.icon {
    margin: 0em;
    opacity: 1;
    width: auto;
    line-height: 1;
    font-size: 8rem;
}
/*--------------
     Actions
---------------*/
.ui.modal > .actions {
    background: #F9FAFB;
    padding: 1rem 1rem;
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    text-align: right;
}
.ui.modal .actions > .button {
    margin-left: 0.75em;
}
/*-------------------
       Responsive
--------------------*/
/* Modal Width */
@media only screen and (max-width: 767px) {
    .ui.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.modal {
        width: 88%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.modal {
        width: 850px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.modal {
        width: 900px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.modal {
        width: 950px;
        margin: 0em 0em 0em 0em;
    }
}
/* Tablet and Mobile */
@media only screen and (max-width: 991px) {
    .ui.modal > .header {
        padding-right: 2.25rem;
    }
    .ui.modal > .close {
        top: 1.0535rem;
        right: 1rem;
        color: rgba(0, 0, 0, 0.87);
    }
}
/* Mobile */
@media only screen and (max-width: 767px) {
    .ui.modal > .header {
        padding: 0.75rem 1rem !important;
        padding-right: 2.25rem !important;
    }
    .ui.modal > .content {
        display: block;
        padding: 1rem !important;
    }
    .ui.modal > .close {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
    /*rtl:ignore*/
    .ui.modal .image.content {
        flex-direction: column;
    }
    .ui.modal .content > .image {
        display: block;
        max-width: 100%;
        margin: 0em auto !important;
        text-align: center;
        padding: 0rem 0rem 1rem !important;
    }
    .ui.modal > .content > .image > i.icon {
        font-size: 5rem;
        text-align: center;
    }
    /*rtl:ignore*/
    .ui.modal .content > .description {
        display: block;
        width: 100% !important;
        margin: 0em !important;
        padding: 1rem 0rem !important;
        box-shadow: none;
    }
    /* Let Buttons Stack */
    .ui.modal > .actions {
        padding: 1rem 1rem 0rem !important;
    }
    .ui.modal .actions > .buttons,
    .ui.modal .actions > .button {
        margin-bottom: 1rem;
    }
}
/*--------------
    Coupling
---------------*/
.ui.inverted.dimmer > .ui.modal {
    box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
}
/*******************************
             Types
*******************************/
.ui.basic.modal {
    background-color: transparent;
    border: none;
    border-radius: 0em;
    box-shadow: none !important;
    color: #FFFFFF;
}
.ui.basic.modal > .header,
.ui.basic.modal > .content,
.ui.basic.modal > .actions {
    background-color: transparent;
}
.ui.basic.modal > .header {
    color: #FFFFFF;
}
.ui.basic.modal > .close {
    top: 1rem;
    right: 1.5rem;
}
.ui.inverted.dimmer > .basic.modal {
    color: rgba(0, 0, 0, 0.87);
}
.ui.inverted.dimmer > .ui.basic.modal > .header {
    color: rgba(0, 0, 0, 0.85);
}
/* Resort to margin positioning if legacy */
.ui.legacy.modal,
.ui.legacy.page.dimmer > .ui.modal {
    top: 50%;
    left: 50%;
}
.ui.legacy.page.dimmer > .ui.scrolling.modal,
.ui.page.dimmer > .ui.scrolling.legacy.modal,
.ui.top.aligned.legacy.page.dimmer > .ui.modal,
.ui.top.aligned.dimmer > .ui.legacy.modal {
    top: auto;
}
/* Tablet and Mobile */
@media only screen and (max-width: 991px) {
    .ui.basic.modal > .close {
        color: #FFFFFF;
    }
}
/*******************************
             States
*******************************/
.ui.loading.modal {
    display: block;
    visibility: hidden;
    z-index: -1;
}
.ui.active.modal {
    display: block;
}
/*******************************
           Variations
*******************************/
/*--------------
   Top Aligned
---------------*/
/* Top Aligned Modal */
.modals.dimmer[class*="top aligned"] .modal {
    margin: 5vh auto;
}
@media only screen and (max-width: 767px) {
    .modals.dimmer[class*="top aligned"] .modal {
        margin: 1rem auto;
    }
}
/* Legacy Top Aligned */
.legacy.modals.dimmer[class*="top aligned"] {
    padding-top: 5vh;
}
@media only screen and (max-width: 767px) {
    .legacy.modals.dimmer[class*="top aligned"] {
        padding-top: 1rem;
    }
}
/*--------------
    Scrolling
---------------*/
/* Scrolling Dimmer */
.scrolling.dimmable.dimmed {
    overflow: hidden;
}
.scrolling.dimmable > .dimmer {
    justify-content: flex-start;
}
.scrolling.dimmable.dimmed > .dimmer {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.scrolling.dimmable > .dimmer {
    position: fixed;
}
.modals.dimmer .ui.scrolling.modal {
    margin: 1rem auto;
}
/* Undetached Scrolling */
.scrolling.undetached.dimmable.dimmed {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.scrolling.undetached.dimmable.dimmed > .dimmer {
    overflow: hidden;
}
.scrolling.undetached.dimmable .ui.scrolling.modal {
    position: absolute;
    left: 50%;
    margin-top: 1rem !important;
}
/* Scrolling Content */
.ui.modal .scrolling.content {
    max-height: calc(80vh - 10em);
    overflow: auto;
}
/*--------------
   Full Screen
---------------*/
.ui.fullscreen.modal {
    width: 95% !important;
    margin: 1em auto;
}
.ui.fullscreen.modal > .header {
    padding-right: 2.25rem;
}
.ui.fullscreen.modal > .close {
    top: 1.0535rem;
    right: 1rem;
    color: rgba(0, 0, 0, 0.87);
}
/*--------------
      Size
---------------*/
.ui.modal {
    font-size: 1rem;
}
/* Mini */
.ui.mini.modal > .header:not(.ui) {
    font-size: 1.3em;
}
/* Mini Modal Width */
@media only screen and (max-width: 767px) {
    .ui.mini.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.mini.modal {
        width: 35.2%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.mini.modal {
        width: 340px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.mini.modal {
        width: 360px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.mini.modal {
        width: 380px;
        margin: 0em 0em 0em 0em;
    }
}
/* mini */
.ui.small.modal > .header:not(.ui) {
    font-size: 1.3em;
}

/*--------------
     Sizes
---------------*/
.ui.mini.images .image,
.ui.mini.images img,
.ui.mini.images svg,
.ui.mini.image {
    width: 35px;
    height: auto;
    font-size: 0.78571429rem;
}
.ui.tiny.images .image,
.ui.tiny.images img,
.ui.tiny.images svg,
.ui.tiny.image {
    width: 80px;
    height: auto;
    font-size: 0.85714286rem;
}
.ui.small.images .image,
.ui.small.images img,
.ui.small.images svg,
.ui.small.image {
    width: 150px;
    height: auto;
    font-size: 0.92857143rem;
}
.ui.medium.images .image,
.ui.medium.images img,
.ui.medium.images svg,
.ui.medium.image {
    width: 300px;
    height: auto;
    font-size: 1rem;
}
.ui.large.images .image,
.ui.large.images img,
.ui.large.images svg,
.ui.large.image {
    width: 450px;
    height: auto;
    font-size: 1.14285714rem;
}
.ui.big.images .image,
.ui.big.images img,
.ui.big.images svg,
.ui.big.image {
    width: 600px;
    height: auto;
    font-size: 1.28571429rem;
}
.ui.huge.images .image,
.ui.huge.images img,
.ui.huge.images svg,
.ui.huge.image {
    width: 800px;
    height: auto;
    font-size: 1.42857143rem;
}
.ui.massive.images .image,
.ui.massive.images img,
.ui.massive.images svg,
.ui.massive.image {
    width: 960px;
    height: auto;
    font-size: 1.71428571rem;
}

/*******************************
         Theme Overrides
*******************************/
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*******************************
     User Image Variation
*******************************/
/* @deprecated Moved to avatar module */
.ui.image.user-image.user-avatar {
    text-align: center;
    background: #9c9c9c;
}
.ui.image.user-image.user-avatar .initials {
    color: #FFFFFF;
}
.ui.image.user-image.user-avatar.editable {
    cursor: pointer;
    animation-fill-mode: both;
    animation-duration: 0.5s;
    transition: background-color 0.5s linear;
}
.ui.image.user-image.user-avatar.editable .edit-icon {
    position: absolute;
    color: #FFFFFF;
    display: none;
    z-index: 9;
    top: 0;
}
.ui.image.user-image.user-avatar:hover.editable .edit-icon {
    display: inline-block;
}
.ui.image.user-image.user-avatar:hover.editable .initials,
.ui.image.user-image.user-avatar:hover.editable img {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}
.ui.image.user-image.user-avatar.mini {
    width: 35px;
    height: 35px;
}
.ui.image.user-image.user-avatar.mini .initials {
    font-size: 1.5em;
    line-height: 35px;
}
.ui.image.user-image.user-avatar.mini.editable .edit-icon {
    font-size: 1em;
    line-height: 35px;
    margin-left: -1px;
}
.ui.image.user-image.user-avatar.little {
    width: 48px;
    height: 48px;
}
.ui.image.user-image.user-avatar.little .initials {
    font-size: 2em;
    line-height: 48px;
}
.ui.image.user-image.user-avatar.little.editable .edit-icon {
    font-size: 1.2em;
    line-height: 48px;
    margin-left: -1px;
}
.ui.image.user-image.user-avatar.x60 {
    width: 60px;
    height: 60px;
}
.ui.image.user-image.user-avatar.x60 .initials {
    font-size: 2.4em;
    line-height: 60px;
}
.ui.image.user-image.user-avatar.x60.editable .edit-icon {
    font-size: 1.8em;
    line-height: 60px;
    margin-left: -2px;
}
.ui.image.user-image.user-avatar.tiny {
    width: 80px;
    height: 80px;
}
.ui.image.user-image.user-avatar.tiny .initials {
    font-size: 3em;
    line-height: 80px;
}
.ui.image.user-image.user-avatar.tiny.editable .edit-icon {
    font-size: 2.2em;
    line-height: 80px;
    margin-left: -4px;
}
.ui.image.user-image.user-avatar.small {
    width: 150px;
    height: 150px;
}
.ui.image.user-image.user-avatar.small .initials {
    font-size: 4em;
    line-height: 150px;
}
.ui.image.user-image.user-avatar.small.editable .edit-icon {
    font-size: 3em;
    line-height: 150px;
    margin-left: -6px;
}
.ui.image.user-image.user-avatar.medium {
    width: 300px;
    height: 300px;
}
.ui.image.user-image.user-avatar.medium .initials {
    font-size: 8em;
    line-height: 300px;
}
.ui.image.user-image.user-avatar.medium.editable .edit-icon {
    font-size: 7em;
    line-height: 300px;
    margin-left: -23px;
}
.ui.image.user-image.user-avatar.large {
    width: 450px;
    height: 450px;
}
.ui.image.user-image.user-avatar.large .initials {
    font-size: 11em;
    line-height: 450px;
}
.ui.image.user-image.user-avatar.large.editable .edit-icon {
    font-size: 11em;
    line-height: 450px;
    margin-left: -30px;
}
.ui.image.user-image.user-avatar.big {
    width: 600px;
    height: 600px;
}
.ui.image.user-image.user-avatar.big .initials {
    font-size: 13em;
    line-height: 600px;
}
.ui.image.user-image.user-avatar.big.editable .edit-icon {
    font-size: 13em;
    line-height: 600px;
    margin-left: -52px;
}
.ui.image.user-image.user-avatar.huge {
    width: 800px;
    height: 800px;
}
.ui.image.user-image.user-avatar.huge .initials {
    font-size: 16em;
    line-height: 800px;
}
.ui.image.user-image.user-avatar.huge.editable .edit-icon {
    font-size: 15em;
    line-height: 800px;
    margin-left: -76px;
}
.ui.image.user-image.user-avatar.massive {
    width: 960px;
    height: 960px;
}
.ui.image.user-image.user-avatar.massive .initials {
    font-size: 17em;
    line-height: 960px;
}
.ui.image.user-image.user-avatar.massive.editable .edit-icon {
    font-size: 16em;
    line-height: 960px;
    margin-left: -97px;
}
.ui.image.user-image.user-avatar.spaced-right {
    margin-right: 1em;
}
.ui.image.user-image.user-avatar.spaced-left {
    margin-left: 1em;
}
.ui.image.user-image.user-avatar .custom-label {
    position: fixed;
    z-index: 999;
    width: 1.5em;
    height: 1.5em;
    margin-left: 22px;
    margin-top: -16px;
}
.ui.image.app-image.app-avatar {
    text-align: center;
}
.ui.image.app-image.app-avatar.with-app-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.ui.image.app-image.app-avatar.bg-image {
    background-repeat: no-repeat;
}
.ui.image.app-image.app-avatar.bg-image .initials {
    color: #FFFFFF;
}
.ui.image.app-image.app-avatar.default-app-icon .initials {
    color: #ff5000;
}
.ui.image.app-image.app-avatar.mini {
    width: 35px;
    height: 35px;
}
.ui.image.app-image.app-avatar.mini .initials {
    font-size: 1.5em;
    line-height: 35px;
}
.ui.image.app-image.app-avatar.mini.bg-image {
    background-size: 35px 35px;
}
.ui.image.app-image.app-avatar.mini.with-app-image img {
    width: 35px;
    height: 35px;
}
.ui.image.app-image.app-avatar.little {
    width: 48px;
    height: 48px;
}
.ui.image.app-image.app-avatar.little .initials {
    font-size: 2em;
    line-height: 48px;
}
.ui.image.app-image.app-avatar.little.bg-image {
    background-size: 48px 48px;
}
.ui.image.app-image.app-avatar.little.with-app-image img {
    width: 48px;
    height: 48px;
}
.ui.image.app-image.app-avatar.tiny {
    height: 80px;
}
.ui.image.app-image.app-avatar.tiny .initials {
    font-size: 3em;
    line-height: 80px;
}
.ui.image.app-image.app-avatar.tiny.bg-image {
    background-size: 80px 80px;
}
.ui.image.app-image.app-avatar.tiny.with-app-image img {
    width: 80px;
    height: 80px;
}
.ui.image.app-image.app-avatar.small {
    height: 150px;
}
.ui.image.app-image.app-avatar.small .initials {
    font-size: 4em;
    line-height: 150px;
}
.ui.image.app-image.app-avatar.small.bg-image {
    background-size: 150px 150px;
}
.ui.image.app-image.app-avatar.small.with-app-image img {
    width: 150px;
    height: 150px;
}
.ui.image.app-image.app-avatar.medium {
    height: 300px;
}
.ui.image.app-image.app-avatar.medium .initials {
    font-size: 8em;
    line-height: 300px;
}
.ui.image.app-image.app-avatar.medium.bg-image {
    background-size: 300px 300px;
}
.ui.image.app-image.app-avatar.medium.with-app-image img {
    width: 300px;
    height: 300px;
}
.ui.image.app-image.app-avatar.large {
    height: 450px;
}
.ui.image.app-image.app-avatar.large .initials {
    font-size: 11em;
    line-height: 450px;
}
.ui.image.app-image.app-avatar.large.bg-image {
    background-size: 450px 450px;
}
.ui.image.app-image.app-avatar.large.with-app-image img {
    width: 450px;
    height: 450px;
}
.ui.image.app-image.app-avatar.big {
    height: 600px;
}
.ui.image.app-image.app-avatar.big .initials {
    font-size: 13em;
    line-height: 600px;
}
.ui.image.app-image.app-avatar.big.bg-image {
    background-size: 600px 600px;
}
.ui.image.app-image.app-avatar.big.with-app-image img {
    width: 600px;
    height: 600px;
}
.ui.image.app-image.app-avatar.huge {
    height: 800px;
}
.ui.image.app-image.app-avatar.huge .initials {
    font-size: 16em;
    line-height: 800px;
}
.ui.image.app-image.app-avatar.huge.bg-image {
    background-size: 800px 800px;
}
.ui.image.app-image.app-avatar.huge.with-app-image img {
    width: 800px;
    height: 800px;
}
.ui.image.app-image.app-avatar.massive {
    height: 960px;
}
.ui.image.app-image.app-avatar.massive .initials {
    font-size: 17em;
    line-height: 960px;
}
.ui.image.app-image.app-avatar.massive.bg-image {
    background-size: 960px 960px;
}
.ui.image.app-image.app-avatar.massive.with-app-image img {
    width: 960px;
    height: 960px;
}
.ui.image.app-image.app-avatar.spaced-right {
    margin-right: 0.4em;
}
.ui.image.app-image.app-avatar.spaced-left {
    margin-left: 0.4em;
}
.ui.image.circular.user-image .wrapper {
    background: #9c9c9c;
    overflow: hidden;
    display: flex;
    height: 3.2em;
    width: 3.2em;
    justify-content: center;
    align-items: center;
}
.ui.image.circular.user-image .wrapper i {
    display: flex;
    align-items: center;
    margin: 0px;
}
.ui.image.circular.user-image .wrapper .edit-icon {
    margin-left: unset !important;
}
.ui.image.circular.user-image .wrapper img,
.ui.image.circular.user-image .wrapper .inner-image {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    max-width: max-content;
    left: 0;
}
.ui.image.circular.user-image .wrapper.pref-background {
    background: white;
}

/*-------------------
   Animated Avatar
--------------------*/
.ui.image.animated-avatar .initial {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ui.image.animated-avatar.mini .initial {
    font-size: 1.5em;
}
.ui.image.animated-avatar.tiny .initial {
    font-size: 3em;
}

/*-------------------
        Sizes
--------------------*/
.ui.mini.labels .label,
.ui.mini.label {
    font-size: 0.64285714rem;
}
.ui.tiny.labels .label,
.ui.tiny.label {
    font-size: 0.71428571rem;
}
.ui.small.labels .label,
.ui.small.label {
    font-size: 0.78571429rem;
}
.ui.labels .label,
.ui.label {
    font-size: 0.85714286rem;
}
.ui.large.labels .label,
.ui.large.label {
    font-size: 1rem;
}
.ui.big.labels .label,
.ui.big.label {
    font-size: 1.28571429rem;
}
.ui.huge.labels .label,
.ui.huge.label {
    font-size: 1.42857143rem;
}
.ui.massive.labels .label,
.ui.massive.label {
    font-size: 1.71428571rem;
}

/*-------------------
      Sizes
--------------------*/
.ui.mini.list {
    font-size: 0.78571429em;
}
.ui.tiny.list {
    font-size: 0.85714286em;
}
.ui.small.list {
    font-size: 0.92857143em;
}
.ui.list {
    font-size: 1em;
}
.ui.large.list {
    font-size: 1.14285714em;
}
.ui.big.list {
    font-size: 1.28571429em;
}
.ui.huge.list {
    font-size: 1.42857143em;
}
.ui.massive.list {
    font-size: 1.71428571em;
}
.ui.mini.horizontal.list .list > .item,
.ui.mini.horizontal.list > .item {
    font-size: 0.78571429rem;
}
.ui.tiny.horizontal.list .list > .item,
.ui.tiny.horizontal.list > .item {
    font-size: 0.85714286rem;
}
.ui.small.horizontal.list .list > .item,
.ui.small.horizontal.list > .item {
    font-size: 0.92857143rem;
}
.ui.horizontal.list .list > .item,
.ui.horizontal.list > .item {
    font-size: 1rem;
}
.ui.large.horizontal.list .list > .item,
.ui.large.horizontal.list > .item {
    font-size: 1.14285714rem;
}
.ui.big.horizontal.list .list > .item,
.ui.big.horizontal.list > .item {
    font-size: 1.28571429rem;
}
.ui.huge.horizontal.list .list > .item,
.ui.huge.horizontal.list > .item {
    font-size: 1.42857143rem;
}
.ui.massive.horizontal.list .list > .item,
.ui.massive.horizontal.list > .item {
    font-size: 1.71428571rem;
}

/* Tiny Modal Width */
@media only screen and (max-width: 767px) {
    .ui.tiny.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.tiny.modal {
        width: 52.8%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.tiny.modal {
        width: 510px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.tiny.modal {
        width: 540px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.tiny.modal {
        width: 570px;
        margin: 0em 0em 0em 0em;
    }
}
/* Small */
.ui.small.modal > .header:not(.ui) {
    font-size: 1.3em;
}
/* Small Modal Width */
@media only screen and (max-width: 767px) {
    .ui.small.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.small.modal {
        width: 70.4%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.small.modal {
        width: 680px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.small.modal {
        width: 720px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.small.modal {
        width: 760px;
        margin: 0em 0em 0em 0em;
    }
}
/* Large Modal Width */
.ui.large.modal > .header {
    font-size: 1.6em;
}
@media only screen and (max-width: 767px) {
    .ui.large.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.large.modal {
        width: 88%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.large.modal {
        width: 1020px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.large.modal {
        width: 1080px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.large.modal {
        width: 1140px;
        margin: 0em 0em 0em 0em;
    }
}
/*******************************
         Theme Overrides
*******************************/
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
.ui.modal.custom-modal {
    text-align: center;
}
.ui.modal.custom-modal .modal-icon {
    margin-top: 0.5em;
}
.ui.modal.custom-modal .modal-description {
    margin: 0em 1.5em 0em 1.5em;
}
.ui.modal.custom-modal .modal-heading {
    margin: -1.25em 1.5em 0em 1.5em;
}
.ui.modal .content.certificate-content {
    display: flex;
    justify-content: center;
}
.ui.modal .content.certificate-content:not(.summary) {
    padding: 0;
}
.svg-box {
    display: inline-block;
    position: relative;
    width: 150px;
    margin-bottom: -25px !important;
}
.svg-box .positive-stroke {
    stroke: #7CB342;
}
.svg-box .negative-stroke {
    stroke: #FF6245;
}
.svg-box .warning-stroke {
    stroke: #FFC107;
}
.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.4;
    animation: 0.7s draw-circle ease-out;
}
/*------- Positive Icon ---------*/
.positive-icon {
    stroke-width: 6.25;
    stroke-linecap: round;
    position: absolute;
    top: 56px;
    left: 49px;
    width: 52px;
    height: 40px;
}
.positive-icon path {
    animation: 1s draw-check ease-out;
}
@keyframes draw-circle {
    0% {
        stroke-dasharray: 0,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    80% {
        stroke-dasharray: 330,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}
@keyframes draw-check {
    0% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 0;
    }
    50% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 130,80;
        stroke-dashoffset: 48;
    }
}
/*---------- Negative Icon ----------*/
.negative-icon {
    stroke-width: 6.25;
    stroke-linecap: round;
    position: absolute;
    top: 54px;
    left: 54px;
    width: 40px;
    height: 40px;
}
.negative-icon .first-line {
    animation: 0.7s draw-first-line ease-out;
}
.negative-icon .second-line {
    animation: 0.7s draw-second-line ease-out;
}
@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}
@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }
    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }
    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}
/*---------- Warning Icon ----------*/
.warning-icon {
    stroke-width: 6.25;
    stroke-linecap: round;
    position: absolute;
    top: 40px;
    left: 68px;
    width: 15px;
    height: 70px;
    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.warning-icon .dot {
    stroke: none;
    fill: #FFC107;
}
@keyframes warning-icon-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
/*********************************************
                    Wizards
*********************************************/
.ui.modal.wizard .wizard-header h6 {
    margin-top: 5px;
    color: #9c9c9c;
    width: 600px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.ui.modal.wizard .wizard-header.help-panel-header {
    display: flex;
}
.ui.modal.wizard .wizard-header.help-panel-header .help-panel-header-text {
    margin: auto 0;
    display: inline-block;
}
.ui.modal.wizard .steps-container {
    background: #f9fafb;
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.modal.wizard .content-container {
    padding-left: 3em;
    padding-right: 3em;
}
.ui.modal.wizard .content-container:not(.height-auto) {
    height: 500px;
}
.ui.modal.wizard .content-container .wizard-summary .summary-field .label {
    font-weight: 500;
}
.ui.modal.wizard .content-container .wizard-summary .summary-field .value {
    margin-bottom: 10px;
    color: #969696;
}
.ui.modal.wizard .content-container .wizard-summary .summary-field .value.url {
    font-style: italic;
}
.ui.modal.wizard .content-container .wizard-summary .summary-field .value.constrain {
    word-wrap: break-word;
}
.ui.modal.wizard .content-container .wizard-summary .result-container {
    margin-bottom: 15px;
}
.ui.modal.wizard .content-container .wizard-summary .result-container .header {
    font-weight: 500;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.4);
}
.ui.modal.wizard.application-create-wizard .content-container .wizard-summary .general-details .name {
    margin-bottom: 8px;
    margin-top: 10px;
}
.ui.modal.wizard.application-create-wizard .content-container .wizard-summary .general-details .info-label {
    padding: 4px 6px;
    margin-bottom: 8px;
}
.ui.modal.wizard.application-create-wizard .content-container .wizard-summary .general-details .description {
    padding: 0 16em;
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui.modal.wizard.minimal-application-create-wizard .sub-template-selection .sub-templates-label,
.ui.modal.wizard.identity-provider-create-wizard .sub-template-selection .sub-templates-label {
    display: block;
    margin: 0em 0em 0.28571429rem 0em;
    color: rgba(0, 0, 0, 0.87);
    font-size: 0.92857143em;
    font-weight: 400;
    text-transform: none;
}
.ui.modal.wizard.minimal-application-create-wizard .sub-template-selection .sub-template-selection-card .card-text-container .header,
.ui.modal.wizard.identity-provider-create-wizard .sub-template-selection .sub-template-selection-card .card-text-container .header {
    font-size: 0.9em !important;
}
.ui.modal.wizard.minimal-application-create-wizard .sub-template-selection .sub-template-selection-card.image-inline .card-image-container .theme-icon,
.ui.modal.wizard.identity-provider-create-wizard .sub-template-selection .sub-template-selection-card.image-inline .card-image-container .theme-icon {
    margin-right: 10px;
    border-right: 1px solid rgba(58, 61, 65, 0.15);
    padding-right: 10px;
}
/*********************************************
                    TOTP
*********************************************/
.ui.modal.totp {
    width: 535px;
}
.ui.modal.totp .totp-header {
    height: 150px;
    background-color: #ff5000;
    color: #FFFFFF;
    border: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: end;
}
.ui.modal.totp .totp-header .illustration {
    width: 150px;
    height: 150px;
    overflow: hidden;
}
.ui.modal.totp .actions {
    padding: 0;
}
.ui.modal.totp .content {
    min-height: inherit;
    padding: 0;
}
.ui.modal.totp .content .step-text .segment.qr-code {
    padding-left: 0;
}
.ui.modal.totp .content .step-text .segment.qr-code * {
    margin-left: -14px;
}
.ui.modal.totp .link {
    color: #ff5000;
    cursor: pointer;
    text-weight: bold;
    max-width: max-content;
    position: absolute;
    right: 38%;
}
/*********************************************
      Confirmation Modal
*********************************************/
.ui.modal.confirmation-modal[class*="center aligned"] {
    text-align: center;
    align-self: inherit;
}
.ui.modal.confirmation-modal[class*="left aligned"] {
    text-align: left;
    align-self: inherit;
}
.ui.modal.confirmation-modal[class*="right aligned"] {
    text-align: right;
    align-self: inherit;
}
.ui.modal.confirmation-modal.justified {
    text-align: justify;
    hyphens: auto;
}
.ui.modal.confirmation-modal .animated-icon {
    text-align: center;
    align-self: inherit;
}
.ui.modal.confirmation-modal .content.no-margin-top {
    padding-top: 0;
}
.ui.modal.confirmation-modal .content .modal-alert-wrapper {
    padding-bottom: 10px;
}
.ui.modal.confirmation-modal .actions .fluid {
    margin-left: 0;
}
.ui.modal.confirmation-modal .confirmation-modal-message.attached {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-top: none;
}
/*********************************************
                  User Roles
*********************************************/
.ui.modal.user-roles .ui.fluid.button {
    margin-top: 0.3em !important;
}
/*********************************************
             Certificate Details
*********************************************/
.ui.modal.certificate-display div.certificate-serial {
    margin-top: -35px;
    margin-left: 33px;
    font-size: 12px;
    color: gray;
}
.ui.modal.certificate-display div.certificate-alias {
    margin-top: -39px;
    margin-left: 33px;
    font-size: 15px;
    color: #656565;
}
/*-------------------------------
        Side Panel Modal
--------------------------------*/
.ui.modal.modal-with-side-panel .panels {
    display: flex;
    justify-content: space-between;
}
.ui.modal.modal-with-side-panel .panels .side-panel {
    border-left: whitesmoke solid 1px;
    box-shadow: -4px 0px 15px -8px #d6d6d6;
    position: relative;
    transition: all 100ms ease-in-out !important;
}
.ui.modal.modal-with-side-panel .panels .side-panel .toggle-button-column {
    position: absolute;
    display: flex;
    align-items: center;
    right: 30px;
    top: 20px;
    z-index: 99;
    width: 100%;
    justify-content: flex-end;
}
.ui.modal.modal-with-side-panel .panels .side-panel .toggle-button-column.closed {
    right: 0;
    justify-content: center;
}
.ui.modal.modal-with-side-panel .panels .side-panel .toggle-button-column .toggle-button {
    display: flex;
    align-items: center;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content {
    transition: opacity ease-out 100ms;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content.visible {
    opacity: 1;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content.visible .modal-content {
    position: absolute;
    bottom: 0;
    height: auto !important;
    top: 75px;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content.hidden {
    opacity: 0;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content .modal-content {
    height: 568px;
}
.ui.modal.modal-with-side-panel .panels .side-panel .side-panel-content .modal-content p {
    font-size: 0.9em;
    color: #616161;
}
.ui.modal.modal-with-side-panel .panels .side-panel.closed {
    width: 65px;
}
.ui.modal.modal-with-side-panel .panels .modal-header {
    font-weight: 400;
    border-top-right-radius: 3px;
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
    font-size: 1.42857143rem;
    line-height: 1.3 em;
    padding: 1.25rem 1.5rem;
    height: 75px;
    overflow: hidden;
}
.ui.modal.modal-with-side-panel .panels .modal-header.muted {
    background: #f1f1f1;
}
.ui.modal.modal-with-side-panel .panels .modal-header h6 {
    text-overflow: ellipsis;
    width: 100%;
}
.ui.modal.modal-with-side-panel .panels .modal-actions {
    height: 68px;
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    font-size: 1.43em;
    line-height: 1.3em;
    padding: 30px;
}
.ui.modal.modal-with-side-panel .panels .modal-actions .row {
    padding: 0;
}
.ui.modal.modal-with-side-panel .panels .modal-content {
    padding: 30px;
    line-height: 30px;
    overflow: auto;
    width: 100%;
}
.ui.modal.modal-with-side-panel .panels .modal-content:not(.steps-container) {
    height: 500px;
}
/*-------------------------------
        Attribute Modal
--------------------------------*/
.ui.modal.attribute-modal .content {
    height: 500px;
}
.ui.modal.attribute-modal .content .transfer-segment {
    height: 450px;
}
.ui.modal.attribute-modal .content .transfer-segment .ui.checkbox.all-select {
    margin: 20px 10px 0px 0px;
    border: 1px solid #efefef;
    background-color: #fbfbfb;
    padding: 10px;
    border-radius: 3px;
    font-weight: 500;
}
.ui.modal.attribute-modal .content .transfer-segment .transfer-list-segment {
    height: 350px;
}
.ui.modal.attribute-modal .content .transfer-segment .transfer-list-segment .transfer-list-sub-content {
    color: #f99467;
}
.ui.modal.attribute-modal .content .transfer-segment .transfer-list-segment thead tr:first-child th {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 2;
}
.ui.modal .content.edit-attribute-mapping {
    height: 500px;
}
.ui.modal .content.attribute-list .transfer-segment {
    height: 450px;
}
.ui.modal .content.attribute-list .transfer-segment .ui.checkbox.all-select {
    margin: 20px 10px 0px 0px;
    border: 1px solid #efefef;
    background-color: #fbfbfb;
    padding: 10px;
    border-radius: 3px;
    font-weight: 500;
}
.ui.modal .content.attribute-list .transfer-segment .transfer-list-segment {
    height: 350px;
}
.ui.modal .content.attribute-list .transfer-segment .transfer-list-segment thead tr:first-child th {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .ui.modal.modal-with-side-panel .main-panel {
        width: 60%;
        flex-grow: 1;
    }
    .ui.modal.modal-with-side-panel .side-panel {
        width: 350px;
    }
}
@media only screen and (min-width: 768px) {
    .ui.modal.modal-with-side-panel .main-panel {
        width: 60%;
        flex-grow: 1;
    }
    .ui.modal.modal-with-side-panel .side-panel {
        width: 40%;
    }
}
@media only screen and (min-width: 992px) {
    .ui.modal.modal-with-side-panel {
        width: auto;
    }
    .ui.modal.modal-with-side-panel .main-panel {
        width: 600px;
    }
    .ui.modal.modal-with-side-panel .side-panel {
        width: 350px;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.modal.modal-with-side-panel {
        width: auto;
    }
    .ui.modal.modal-with-side-panel .main-panel {
        width: 700px;
    }
    .ui.modal.modal-with-side-panel .side-panel {
        width: 400px;
    }
}
/*-------------------------------
      Edit Avatar Modal
--------------------------------*/
.ui.modal.edit-avatar-modal .avatar-types-loader-container {
    height: 100px;
    width: 100%;
}
.ui.modal.edit-avatar-modal .avatar-from-url-field {
    display: flex;
}
.ui.modal.edit-avatar-modal .avatar-from-url-field .hosted-url-input {
    display: inline-block;
    width: 80%;
    margin-bottom: 0;
}

.ui.modal.code-editor-fullscreen-wrapper .editor-content {
    max-height: 90vh;
    min-height: 90vh;
    padding: 0;
}
.ui.modal.code-editor-fullscreen-wrapper .editor-content .CodeMirror {
    height: 90vh;
}

/*-------------------
        Sizes
--------------------*/
.ui.mini.buttons .button,
.ui.mini.buttons .or,
.ui.mini.button {
    font-size: 0.78571429rem;
}
.ui.tiny.buttons .button,
.ui.tiny.buttons .or,
.ui.tiny.button {
    font-size: 0.85714286rem;
}
.ui.small.buttons .button,
.ui.small.buttons .or,
.ui.small.button {
    font-size: 0.92857143rem;
}
.ui.large.buttons .button,
.ui.large.buttons .or,
.ui.large.button {
    font-size: 1.14285714rem;
}
.ui.big.buttons .button,
.ui.big.buttons .or,
.ui.big.button {
    font-size: 1.28571429rem;
}
.ui.huge.buttons .button,
.ui.huge.buttons .or,
.ui.huge.button {
    font-size: 1.42857143rem;
}
.ui.massive.buttons .button,
.ui.massive.buttons .or,
.ui.massive.button {
    font-size: 1.71428571rem;
}

/*--------------
 Content Heading
---------------*/
.ui.huge.header {
    min-height: 1em;
    font-size: 2em;
}
.ui.large.header {
    font-size: 1.71428571em;
}
.ui.medium.header {
    font-size: 1.57142857em;
}
.ui.small.header {
    font-size: 1.35714286em;
}
.ui.tiny.header {
    font-size: 1.14285714em;
}
/* Sub Header */
.ui.huge.header .sub.header {
    font-size: 1.14285714rem;
}
.ui.large.header .sub.header {
    font-size: 1.14285714rem;
}
.ui.header .sub.header {
    font-size: 1rem;
}
.ui.small.header .sub.header {
    font-size: 1rem;
}
.ui.tiny.header .sub.header {
    font-size: 0.92857143rem;
}

/*-------------------
        Block
--------------------*/
.ui.block.header {
    background: #F3F4F5;
    padding: 0.78571429rem 1rem;
    box-shadow: none;
    border: 1px solid #D4D4D5;
    border-radius: 3px;
}
.ui.tiny.block.header {
    font-size: 0.85714286rem;
}
.ui.small.block.header {
    font-size: 0.92857143rem;
}
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-size: 1rem;
}
.ui.large.block.header {
    font-size: 1.14285714rem;
}
.ui.huge.block.header {
    font-size: 1.42857143rem;
}
/* Attached Sizes */
.ui.tiny.attached.header {
    font-size: 0.85714286em;
}
.ui.small.attached.header {
    font-size: 0.92857143em;
}
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-size: 1em;
}
.ui.large.attached.header {
    font-size: 1.14285714em;
}
.ui.huge.attached.header {
    font-size: 1.42857143em;
}

/*-------------------
        Sizes
--------------------*/
i.mini.icon,
i.mini.icons {
    line-height: 1;
    font-size: 0.4em;
}
i.tiny.icon,
i.tiny.icons {
    line-height: 1;
    font-size: 0.5em;
}
i.small.icon,
i.small.icons {
    line-height: 1;
    font-size: 0.75em;
}
i.icon,
i.icons {
    font-size: 1em;
}
i.large.icon,
i.large.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: 1.5em;
}
i.big.icon,
i.big.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: 2em;
}
i.huge.icon,
i.huge.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: 4em;
}
i.massive.icon,
i.massive.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: 8em;
}

/* Tiny Modal Width */
@media only screen and (max-width: 767px) {
    .ui.tiny.modal {
        width: 95%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 768px) {
    .ui.tiny.modal {
        width: 52.8%;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 992px) {
    .ui.tiny.modal {
        width: 510px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1200px) {
    .ui.tiny.modal {
        width: 540px;
        margin: 0em 0em 0em 0em;
    }
}
@media only screen and (min-width: 1920px) {
    .ui.tiny.modal {
        width: 570px;
        margin: 0em 0em 0em 0em;
    }
}

/*--------------
    Circular
---------------*/
.ui.circular.button {
    border-radius: 10em;
}
.ui.circular.button > .icon {
    width: 1em;
    vertical-align: baseline;
}

.ui.icon.header .circular.icon {
    font-size: 2em;
}

/*-------------------
      Circular
--------------------*/
i.circular.icon {
    border-radius: 500em !important;
    line-height: 1 !important;
    padding: 0.5em 0em !important;
    box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
    width: 2em !important;
    height: 2em !important;
}
i.circular.inverted.icon {
    border: none;
    box-shadow: none;
}

/*-------------------
       Colors
--------------------*/
/* Red */
i.red.icon {
    color: #DB2828 !important;
}
i.inverted.red.icon {
    color: #FF695E !important;
}
i.inverted.bordered.red.icon,
i.inverted.circular.red.icon {
    background-color: #DB2828 !important;
    color: #FFFFFF !important;
}
/* Orange */
i.orange.icon {
    color: #ff5000 !important;
}
i.inverted.orange.icon {
    color: #FF851B !important;
}
i.inverted.bordered.orange.icon,
i.inverted.circular.orange.icon {
    background-color: #ff5000 !important;
    color: #FFFFFF !important;
}
/* Yellow */
i.yellow.icon {
    color: #FBBD08 !important;
}
i.inverted.yellow.icon {
    color: #FFE21F !important;
}
i.inverted.bordered.yellow.icon,
i.inverted.circular.yellow.icon {
    background-color: #FBBD08 !important;
    color: #FFFFFF !important;
}
/* Olive */
i.olive.icon {
    color: #B5CC18 !important;
}
i.inverted.olive.icon {
    color: #D9E778 !important;
}
i.inverted.bordered.olive.icon,
i.inverted.circular.olive.icon {
    background-color: #B5CC18 !important;
    color: #FFFFFF !important;
}
/* Green */
i.green.icon {
    color: #7cd25a !important;
}
i.inverted.green.icon {
    color: #2ECC40 !important;
}
i.inverted.bordered.green.icon,
i.inverted.circular.green.icon {
    background-color: #7cd25a !important;
    color: #FFFFFF !important;
}
/* Teal */
i.teal.icon {
    color: #22b7b1 !important;
}
i.inverted.teal.icon {
    color: #6DFFFF !important;
}
i.inverted.bordered.teal.icon,
i.inverted.circular.teal.icon {
    background-color: #22b7b1 !important;
    color: #FFFFFF !important;
}
/* Blue */
i.blue.icon {
    color: #006faa !important;
}
i.inverted.blue.icon {
    color: #54C8FF !important;
}
i.inverted.bordered.blue.icon,
i.inverted.circular.blue.icon {
    background-color: #006faa !important;
    color: #FFFFFF !important;
}
/* Violet */
i.violet.icon {
    color: #6435C9 !important;
}
i.inverted.violet.icon {
    color: #A291FB !important;
}
i.inverted.bordered.violet.icon,
i.inverted.circular.violet.icon {
    background-color: #6435C9 !important;
    color: #FFFFFF !important;
}
/* Purple */
i.purple.icon {
    color: #A333C8 !important;
}
i.inverted.purple.icon {
    color: #DC73FF !important;
}
i.inverted.bordered.purple.icon,
i.inverted.circular.purple.icon {
    background-color: #A333C8 !important;
    color: #FFFFFF !important;
}
/* Pink */
i.pink.icon {
    color: #E03997 !important;
}
i.inverted.pink.icon {
    color: #FF8EDF !important;
}
i.inverted.bordered.pink.icon,
i.inverted.circular.pink.icon {
    background-color: #E03997 !important;
    color: #FFFFFF !important;
}
/* Brown */
i.brown.icon {
    color: #A5673F !important;
}
i.inverted.brown.icon {
    color: #D67C1C !important;
}
i.inverted.bordered.brown.icon,
i.inverted.circular.brown.icon {
    background-color: #A5673F !important;
    color: #FFFFFF !important;
}
/* Grey */
i.grey.icon {
    color: #767676 !important;
}
i.inverted.grey.icon {
    color: #DCDDDE !important;
}
i.inverted.bordered.grey.icon,
i.inverted.circular.grey.icon {
    background-color: #767676 !important;
    color: #FFFFFF !important;
}
/* Black */
i.black.icon {
    color: #464646 !important;
}
i.inverted.black.icon {
    color: #545454 !important;
}
i.inverted.bordered.black.icon,
i.inverted.circular.black.icon {
    background-color: #464646 !important;
    color: #FFFFFF !important;
}

/*--------------
    Circular
---------------*/
.ui.circular.images,
.ui.circular.image {
    overflow: hidden;
}
.ui.circular.images .image,
.ui.circular.image,
.ui.circular.images .image > *,
.ui.circular.image > * {
    -webkit-border-radius: 500rem;
    -moz-border-radius: 500rem;
    border-radius: 500rem;
}

.ui.image.circular.user-image .wrapper {
    background: #9c9c9c;
    overflow: hidden;
    display: flex;
    height: 3.2em;
    width: 3.2em;
    justify-content: center;
    align-items: center;
}
.ui.image.circular.user-image .wrapper i {
    display: flex;
    align-items: center;
    margin: 0px;
}
.ui.image.circular.user-image .wrapper .edit-icon {
    margin-left: unset !important;
}
.ui.image.circular.user-image .wrapper img,
.ui.image.circular.user-image .wrapper .inner-image {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    max-width: max-content;
    left: 0;
}
.ui.image.circular.user-image .wrapper.pref-background {
    background: white;
}

.ui.icon.input > i.circular.icon {
    top: 0.35em;
    right: 0.5em;
}

.ui[class*="left icon"].input > i.circular.icon {
    right: auto;
    left: 0.5em;
}

/*-------------------
       Circular
--------------------*/
.ui.circular.labels .label,
.ui.circular.label {
    min-width: 2em;
    min-height: 2em;
    padding: 0.5em !important;
    line-height: 1em;
    text-align: center;
    border-radius: 500rem;
}
.ui.empty.circular.labels .label,
.ui.empty.circular.label {
    min-width: 0em;
    min-height: 0em;
    overflow: hidden;
    width: 0.5em;
    height: 0.5em;
    vertical-align: baseline;
}

/*******************************
            Sizing
*******************************/
.ui.label.mini.compact {
    padding: 0.4em;
}
.ui.label.mini.spaced-left {
    margin-left: 0.4em;
}
.ui.label.mini.spaced-right {
    margin-right: 0.4em;
}
.ui.circular.label.micro {
    min-width: 1em;
    min-height: 1em;
}
.ui.circular.label.micro.spaced-left {
    margin-left: 0.4em;
}
.ui.circular.label.micro.spaced-right {
    margin-right: 1em;
}
.ui.circular.label.status-label-with-popup {
    cursor: pointer !important;
    opacity: 0.7 !important;
}
.ui.circular.label.status-label-with-popup:hover {
    opacity: 1 !important;
}

/*-------------------
       Circular
--------------------*/
.ui.circular.segment {
    display: table-cell;
    padding: 2em;
    text-align: center;
    vertical-align: middle;
    border-radius: 500em;
}

/*************************************
    Create Role Summary Variation
*************************************/
.role-summary-user {
    display: inline-flex;
    margin: 0.2em;
    background-color: #f7f7f7;
    border-radius: 100px;
    align-items: center;
    padding: 0 1em 0 0;
    border: 0.5px solid #efefef;
    vertical-align: top;
}
.role-summary-user .circular {
    margin-right: 0.5em !important;
}

.ui.icon.message .circular.icon {
    width: 1em;
}

/*******************************
         Theme Overrides
*******************************/
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
.dimmable.circular {
    border-radius: 50%;
}
.dimmable.circular.user-avatar .upload-button {
    box-shadow: none;
    margin-right: 0 !important;
}
.dimmable.circular.user-avatar .upload-button .icon {
    color: #FFFFFF !important;
    margin-right: 0 !important;
}
.dimmable.circular.user-avatar .upload-button:hover,
.dimmable.circular.user-avatar .upload-button:active,
.dimmable.circular.user-avatar .upload-button:focus {
    background: transparent !important;
}

.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.4;
    animation: 0.7s draw-circle ease-out;
}

.theme-icon.circular {
    border-radius: 50% !important;
}

/*-------------------------------
        Circular Avatar
--------------------------------*/
.ui-avatar.circular {
    text-align: center;
    background: #9c9c9c;
}
.ui-avatar.circular.mini {
    width: 35px;
    height: 35px;
}
.ui-avatar.circular.mini .initials {
    font-size: 1.5em;
    line-height: 35px;
}
.ui-avatar.circular.little {
    width: 48px;
    height: 48px;
}
.ui-avatar.circular.little .initials {
    font-size: 2em;
    line-height: 48px;
}
.ui-avatar.circular.x30 {
    width: 30px;
    height: 30px;
}
.ui-avatar.circular.x30 .initials {
    font-size: 2.4em;
    line-height: 50px;
}
.ui-avatar.circular.x50 {
    width: 50px;
    height: 50px;
}
.ui-avatar.circular.x50 .initials {
    font-size: 1.5em;
    line-height: 50px;
}
.ui-avatar.circular.x60 {
    width: 60px;
    height: 60px;
}
.ui-avatar.circular.x60 .initials {
    font-size: 2em;
    line-height: 60px;
}
.ui-avatar.circular.tiny {
    width: 80px;
    height: 80px;
}
.ui-avatar.circular.tiny .initials {
    font-size: 3em;
    line-height: 80px;
}
.ui-avatar.circular.small {
    width: 150px;
    height: 150px;
}
.ui-avatar.circular.small .initials {
    font-size: 4em;
    line-height: 150px;
}
.ui-avatar.circular.medium {
    width: 300px;
    height: 300px;
}
.ui-avatar.circular.medium .initials {
    font-size: 8em;
    line-height: 300px;
}
.ui-avatar.circular.large {
    width: 450px;
    height: 450px;
}
.ui-avatar.circular.large .initials {
    font-size: 11em;
    line-height: 450px;
}
.ui-avatar.circular.big {
    width: 600px;
    height: 600px;
}
.ui-avatar.circular.big .initials {
    font-size: 13em;
    line-height: 600px;
}
.ui-avatar.circular.huge {
    width: 800px;
    height: 800px;
}
.ui-avatar.circular.huge .initials {
    font-size: 16em;
    line-height: 800px;
}
.ui-avatar.circular.massive {
    width: 960px;
    height: 960px;
}
.ui-avatar.circular.massive .initials {
    font-size: 17em;
    line-height: 960px;
}
.ui-avatar.circular.spaced-right {
    margin-right: 1em;
}
.ui-avatar.circular.spaced-left {
    margin-left: 1em;
}

/*******************************
           Brand Icons
*******************************/
/* Load & Define Brand Font */
@font-face {
    font-family: 'brand-icons';
    src: url("../../themes/default/assets/fonts/brand-icons.eot");
    src: url("../../themes/default/assets/fonts/brand-icons.eot?#iefix") format('embedded-opentype'), url("../../themes/default/assets/fonts/brand-icons.woff2") format('woff2'), url("../../themes/default/assets/fonts/brand-icons.woff") format('woff'), url("../../themes/default/assets/fonts/brand-icons.ttf") format('truetype'), url("../../themes/default/assets/fonts/brand-icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}
/* Brand Icon Font Family */
i.icon.\35 00px,
i.icon.accessible.icon,
i.icon.accusoft,
i.icon.adn,
i.icon.adversal,
i.icon.affiliatetheme,
i.icon.algolia,
i.icon.amazon,
i.icon.amazon.pay,
i.icon.amilia,
i.icon.android,
i.icon.angellist,
i.icon.angrycreative,
i.icon.angular,
i.icon.app.store,
i.icon.app.store.ios,
i.icon.apper,
i.icon.apple,
i.icon.apple.pay,
i.icon.asymmetrik,
i.icon.audible,
i.icon.autoprefixer,
i.icon.avianex,
i.icon.aviato,
i.icon.aws,
i.icon.bandcamp,
i.icon.behance,
i.icon.behance.square,
i.icon.bimobject,
i.icon.bitbucket,
i.icon.bitcoin,
i.icon.bity,
i.icon.black.tie,
i.icon.blackberry,
i.icon.blogger,
i.icon.blogger.b,
i.icon.bluetooth,
i.icon.bluetooth.b,
i.icon.btc,
i.icon.buromobelexperte,
i.icon.buysellads,
i.icon.cc.amazon.pay,
i.icon.cc.amex,
i.icon.cc.apple.pay,
i.icon.cc.diners.club,
i.icon.cc.discover,
i.icon.cc.jcb,
i.icon.cc.mastercard,
i.icon.cc.paypal,
i.icon.cc.stripe,
i.icon.cc.visa,
i.icon.centercode,
i.icon.chrome,
i.icon.cloudscale,
i.icon.cloudsmith,
i.icon.cloudversify,
i.icon.codepen,
i.icon.codiepie,
i.icon.connectdevelop,
i.icon.contao,
i.icon.cpanel,
i.icon.creative.commons,
i.icon.css3,
i.icon.css3.alternate,
i.icon.cuttlefish,
i.icon.d.and.d,
i.icon.dashcube,
i.icon.delicious,
i.icon.deploydog,
i.icon.deskpro,
i.icon.deviantart,
i.icon.digg,
i.icon.digital.ocean,
i.icon.discord,
i.icon.discourse,
i.icon.dochub,
i.icon.docker,
i.icon.draft2digital,
i.icon.dribbble,
i.icon.dribbble.square,
i.icon.dropbox,
i.icon.drupal,
i.icon.dyalog,
i.icon.earlybirds,
i.icon.edge,
i.icon.elementor,
i.icon.ember,
i.icon.empire,
i.icon.envira,
i.icon.erlang,
i.icon.ethereum,
i.icon.etsy,
i.icon.expeditedssl,
i.icon.facebook,
i.icon.facebook.f,
i.icon.facebook.messenger,
i.icon.facebook.square,
i.icon.firefox,
i.icon.first.order,
i.icon.firstdraft,
i.icon.flickr,
i.icon.flipboard,
i.icon.fly,
i.icon.font.awesome,
i.icon.font.awesome.alternate,
i.icon.font.awesome.flag,
i.icon.fonticons,
i.icon.fonticons.fi,
i.icon.fort.awesome,
i.icon.fort.awesome.alternate,
i.icon.forumbee,
i.icon.foursquare,
i.icon.free.code.camp,
i.icon.freebsd,
i.icon.get.pocket,
i.icon.gg,
i.icon.gg.circle,
i.icon.git,
i.icon.git.square,
i.icon.github,
i.icon.github.alternate,
i.icon.github.square,
i.icon.gitkraken,
i.icon.gitlab,
i.icon.gitter,
i.icon.glide,
i.icon.glide.g,
i.icon.gofore,
i.icon.goodreads,
i.icon.goodreads.g,
i.icon.google,
i.icon.google.drive,
i.icon.google.play,
i.icon.google.plus,
i.icon.google.plus.g,
i.icon.google.plus.square,
i.icon.google.wallet,
i.icon.gratipay,
i.icon.grav,
i.icon.gripfire,
i.icon.grunt,
i.icon.gulp,
i.icon.hacker.news,
i.icon.hacker.news.square,
i.icon.hips,
i.icon.hire.a.helper,
i.icon.hooli,
i.icon.hotjar,
i.icon.houzz,
i.icon.html5,
i.icon.hubspot,
i.icon.imdb,
i.icon.instagram,
i.icon.internet.explorer,
i.icon.ioxhost,
i.icon.itunes,
i.icon.itunes.note,
i.icon.jenkins,
i.icon.joget,
i.icon.joomla,
i.icon.js,
i.icon.js.square,
i.icon.jsfiddle,
i.icon.keycdn,
i.icon.kickstarter,
i.icon.kickstarter.k,
i.icon.korvue,
i.icon.laravel,
i.icon.lastfm,
i.icon.lastfm.square,
i.icon.leanpub,
i.icon.less,
i.icon.linechat,
i.icon.linkedin,
i.icon.linkedin.alternate,
i.icon.linkedin.in,
i.icon.linode,
i.icon.linux,
i.icon.lyft,
i.icon.magento,
i.icon.maxcdn,
i.icon.medapps,
i.icon.medium,
i.icon.medium.m,
i.icon.medrt,
i.icon.meetup,
i.icon.microsoft,
i.icon.mix,
i.icon.mixcloud,
i.icon.mizuni,
i.icon.modx,
i.icon.monero,
i.icon.napster,
i.icon.nintendo.switch,
i.icon.node,
i.icon.node.js,
i.icon.npm,
i.icon.ns8,
i.icon.nutritionix,
i.icon.odnoklassniki,
i.icon.odnoklassniki.square,
i.icon.opencart,
i.icon.openid,
i.icon.opera,
i.icon.optin.monster,
i.icon.osi,
i.icon.page4,
i.icon.pagelines,
i.icon.palfed,
i.icon.patreon,
i.icon.paypal,
i.icon.periscope,
i.icon.phabricator,
i.icon.phoenix.framework,
i.icon.php,
i.icon.pied.piper,
i.icon.pied.piper.alternate,
i.icon.pied.piper.pp,
i.icon.pinterest,
i.icon.pinterest.p,
i.icon.pinterest.square,
i.icon.playstation,
i.icon.product.hunt,
i.icon.pushed,
i.icon.python,
i.icon.qq,
i.icon.quinscape,
i.icon.quora,
i.icon.ravelry,
i.icon.react,
i.icon.rebel,
i.icon.redriver,
i.icon.reddit,
i.icon.reddit.alien,
i.icon.reddit.square,
i.icon.rendact,
i.icon.renren,
i.icon.replyd,
i.icon.resolving,
i.icon.rocketchat,
i.icon.rockrms,
i.icon.safari,
i.icon.sass,
i.icon.schlix,
i.icon.scribd,
i.icon.searchengin,
i.icon.sellcast,
i.icon.sellsy,
i.icon.servicestack,
i.icon.shirtsinbulk,
i.icon.simplybuilt,
i.icon.sistrix,
i.icon.skyatlas,
i.icon.skype,
i.icon.slack,
i.icon.slack.hash,
i.icon.slideshare,
i.icon.snapchat,
i.icon.snapchat.ghost,
i.icon.snapchat.square,
i.icon.soundcloud,
i.icon.speakap,
i.icon.spotify,
i.icon.stack.exchange,
i.icon.stack.overflow,
i.icon.staylinked,
i.icon.steam,
i.icon.steam.square,
i.icon.steam.symbol,
i.icon.sticker.mule,
i.icon.strava,
i.icon.stripe,
i.icon.stripe.s,
i.icon.studiovinari,
i.icon.stumbleupon,
i.icon.stumbleupon.circle,
i.icon.superpowers,
i.icon.supple,
i.icon.telegram,
i.icon.telegram.plane,
i.icon.tencent.weibo,
i.icon.themeisle,
i.icon.trello,
i.icon.tripadvisor,
i.icon.tumblr,
i.icon.tumblr.square,
i.icon.twitch,
i.icon.twitter,
i.icon.twitter.square,
i.icon.typo3,
i.icon.uber,
i.icon.uikit,
i.icon.uniregistry,
i.icon.untappd,
i.icon.usb,
i.icon.ussunnah,
i.icon.vaadin,
i.icon.viacoin,
i.icon.viadeo,
i.icon.viadeo.square,
i.icon.viber,
i.icon.vimeo,
i.icon.vimeo.square,
i.icon.vimeo.v,
i.icon.vine,
i.icon.vk,
i.icon.vnv,
i.icon.vuejs,
i.icon.wechat,
i.icon.weibo,
i.icon.weixin,
i.icon.whatsapp,
i.icon.whatsapp.square,
i.icon.whmcs,
i.icon.wikipedia.w,
i.icon.windows,
i.icon.wordpress,
i.icon.wordpress.simple,
i.icon.wpbeginner,
i.icon.wpexplorer,
i.icon.wpforms,
i.icon.xbox,
i.icon.xing,
i.icon.xing.square,
i.icon.y.combinator,
i.icon.yahoo,
i.icon.yandex,
i.icon.yandex.international,
i.icon.yelp,
i.icon.yoast,
i.icon.youtube,
i.icon.youtube.square {
    font-family: 'brand-icons';
}

/*******************************
         Theme Overrides
*******************************/
/*******************************
        Loader Overrides
*******************************/
/*!
 * # Semantic UI - Loader
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/* Key Content Sizing */
/* Interval between consecutive placeholders */
/* Repeated Placeholder */
/* Image */
/* Header Image */
/* Paragraph */
/* Glow Gradient */
/* Variations */
/*******************************
     Placeholder Variables
*******************************/
/*******************************
     Placeholder Variables
*******************************/
/*-------------------
      Content
--------------------*/
.ui.placeholder {
    position: static;
    overflow: hidden;
    animation: placeholderShimmer 2s linear;
    animation-iteration-count: infinite;
    background-color: #FFFFFF;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
    background-size: 1200px 100%;
    max-width: 30rem;
}
@keyframes placeholderShimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}
.ui.placeholder + .ui.placeholder {
    margin-top: 2rem;
}
.ui.placeholder + .ui.placeholder {
    animation-delay: 0.15s;
}
.ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: 0.3s;
}
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: 0.45s;
}
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: 0.6s;
}
.ui.placeholder,
.ui.placeholder > :before,
.ui.placeholder .image.header:after,
.ui.placeholder .line,
.ui.placeholder .line:after {
    background-color: #FFFFFF;
}
/* Image */
.ui.placeholder .image:not(.header):not(.ui) {
    height: 100px;
}
.ui.placeholder .square.image:not(.header) {
    height: 0px;
    overflow: hidden;
    /* 1/1 aspect ratio */
    padding-top: 100%;
}
.ui.placeholder .rectangular.image:not(.header) {
    height: 0px;
    overflow: hidden;
    /* 4/3 aspect ratio */
    padding-top: 75%;
}
/* Lines */
.ui.placeholder .line {
    position: relative;
    height: 0.85714286em;
}
.ui.placeholder .line:before,
.ui.placeholder .line:after {
    top: 100%;
    position: absolute;
    content: '';
    background-color: inherit;
}
.ui.placeholder .line:before {
    left: 0px;
}
.ui.placeholder .line:after {
    right: 0px;
}
/* Any Lines */
.ui.placeholder .line {
    margin-bottom: 0.5em;
}
.ui.placeholder .line:before,
.ui.placeholder .line:after {
    height: 0.5em;
}
.ui.placeholder .line:not(:first-child) {
    margin-top: 0.5em;
}
/* Header Image + 2 Lines */
.ui.placeholder .header {
    position: relative;
    overflow: hidden;
}
/* Line Outdent */
.ui.placeholder .line:nth-child(1):after {
    width: 0%;
}
.ui.placeholder .line:nth-child(2):after {
    width: 50%;
}
.ui.placeholder .line:nth-child(3):after {
    width: 10%;
}
.ui.placeholder .line:nth-child(4):after {
    width: 35%;
}
.ui.placeholder .line:nth-child(5):after {
    width: 65%;
}
/* Header Line 1 & 2*/
.ui.placeholder .header .line {
    margin-bottom: 0.64285714em;
}
.ui.placeholder .header .line:before,
.ui.placeholder .header .line:after {
    height: 0.64285714em;
}
.ui.placeholder .header .line:not(:first-child) {
    margin-top: 0.64285714em;
}
.ui.placeholder .header .line:after {
    width: 20%;
}
.ui.placeholder .header .line:nth-child(2):after {
    width: 60%;
}
/* Image Header */
.ui.placeholder .image.header .line {
    margin-left: 3em;
}
.ui.placeholder .image.header .line:before {
    width: 0.71428571rem;
}
.ui.placeholder .image.header:after {
    display: block;
    height: 0.85714286em;
    content: '';
    margin-left: 3em;
}
/* Spacing */
.ui.placeholder .image .line:first-child,
.ui.placeholder .paragraph .line:first-child,
.ui.placeholder .header .line:first-child {
    height: 0.01px;
}
.ui.placeholder .image:not(:first-child):before,
.ui.placeholder .paragraph:not(:first-child):before,
.ui.placeholder .header:not(:first-child):before {
    height: 1.42857143em;
    content: '';
    display: block;
}
/* Inverted Content Loader */
.ui.inverted.placeholder {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
}
.ui.inverted.placeholder,
.ui.inverted.placeholder > :before,
.ui.inverted.placeholder .image.header:after,
.ui.inverted.placeholder .line,
.ui.inverted.placeholder .line:after {
    background-color: #464646;
}
/*******************************
            Variations
*******************************/
/*-------------------
        Sizes
--------------------*/
.ui.placeholder .full.line.line.line:after {
    width: 0%;
}
.ui.placeholder .very.long.line.line.line:after {
    width: 10%;
}
.ui.placeholder .long.line.line.line:after {
    width: 35%;
}
.ui.placeholder .medium.line.line.line:after {
    width: 50%;
}
.ui.placeholder .short.line.line.line:after {
    width: 65%;
}
.ui.placeholder .very.short.line.line.line:after {
    width: 80%;
}

/*******************************
        Outline Icons
*******************************/
/* Outline Icon */
/* Load & Define Icon Font */
@font-face {
    font-family: 'outline-icons';
    src: url("../../themes/default/assets/fonts/outline-icons.eot");
    src: url("../../themes/default/assets/fonts/outline-icons.eot?#iefix") format('embedded-opentype'), url("../../themes/default/assets/fonts/outline-icons.woff2") format('woff2'), url("../../themes/default/assets/fonts/outline-icons.woff") format('woff'), url("../../themes/default/assets/fonts/outline-icons.ttf") format('truetype'), url("../../themes/default/assets/fonts/outline-icons.svg#icons") format('svg');
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
}
i.icon.outline {
    font-family: 'outline-icons';
}
/* Icon Definitions */
i.icon.address.book.outline:before {
    content: "\f2b9";
}
i.icon.address.card.outline:before {
    content: "\f2bb";
}
i.icon.arrow.alternate.circle.down.outline:before {
    content: "\f358";
}
i.icon.arrow.alternate.circle.left.outline:before {
    content: "\f359";
}
i.icon.arrow.alternate.circle.right.outline:before {
    content: "\f35a";
}
i.icon.arrow.alternate.circle.up.outline:before {
    content: "\f35b";
}
i.icon.bell.outline:before {
    content: "\f0f3";
}
i.icon.bell.slash.outline:before {
    content: "\f1f6";
}
i.icon.bookmark.outline:before {
    content: "\f02e";
}
i.icon.building.outline:before {
    content: "\f1ad";
}
i.icon.calendar.outline:before {
    content: "\f133";
}
i.icon.calendar.alternate.outline:before {
    content: "\f073";
}
i.icon.calendar.check.outline:before {
    content: "\f274";
}
i.icon.calendar.minus.outline:before {
    content: "\f272";
}
i.icon.calendar.plus.outline:before {
    content: "\f271";
}
i.icon.calendar.times.outline:before {
    content: "\f273";
}
i.icon.caret.square.down.outline:before {
    content: "\f150";
}
i.icon.caret.square.left.outline:before {
    content: "\f191";
}
i.icon.caret.square.right.outline:before {
    content: "\f152";
}
i.icon.caret.square.up.outline:before {
    content: "\f151";
}
i.icon.chart.bar.outline:before {
    content: "\f080";
}
i.icon.check.circle.outline:before {
    content: "\f058";
}
i.icon.check.square.outline:before {
    content: "\f14a";
}
i.icon.circle.outline:before {
    content: "\f111";
}
i.icon.clipboard.outline:before {
    content: "\f328";
}
i.icon.clock.outline:before {
    content: "\f017";
}
i.icon.clone.outline:before {
    content: "\f24d";
}
i.icon.closed.captioning.outline:before {
    content: "\f20a";
}
i.icon.comment.outline:before {
    content: "\f075";
}
i.icon.comment.alternate.outline:before {
    content: "\f27a";
}
i.icon.comments.outline:before {
    content: "\f086";
}
i.icon.compass.outline:before {
    content: "\f14e";
}
i.icon.copy.outline:before {
    content: "\f0c5";
}
i.icon.copyright.outline:before {
    content: "\f1f9";
}
i.icon.credit.card.outline:before {
    content: "\f09d";
}
i.icon.dot.circle.outline:before {
    content: "\f192";
}
i.icon.edit.outline:before {
    content: "\f044";
}
i.icon.envelope.outline:before {
    content: "\f0e0";
}
i.icon.envelope.open.outline:before {
    content: "\f2b6";
}
i.icon.eye.slash.outline:before {
    content: "\f070";
}
i.icon.file.outline:before {
    content: "\f15b";
}
i.icon.file.alternate.outline:before {
    content: "\f15c";
}
i.icon.file.archive.outline:before {
    content: "\f1c6";
}
i.icon.file.audio.outline:before {
    content: "\f1c7";
}
i.icon.file.code.outline:before {
    content: "\f1c9";
}
i.icon.file.excel.outline:before {
    content: "\f1c3";
}
i.icon.file.image.outline:before {
    content: "\f1c5";
}
i.icon.file.pdf.outline:before {
    content: "\f1c1";
}
i.icon.file.powerpoint.outline:before {
    content: "\f1c4";
}
i.icon.file.video.outline:before {
    content: "\f1c8";
}
i.icon.file.word.outline:before {
    content: "\f1c2";
}
i.icon.flag.outline:before {
    content: "\f024";
}
i.icon.folder.outline:before {
    content: "\f07b";
}
i.icon.folder.open.outline:before {
    content: "\f07c";
}
i.icon.frown.outline:before {
    content: "\f119";
}
i.icon.futbol.outline:before {
    content: "\f1e3";
}
i.icon.gem.outline:before {
    content: "\f3a5";
}
i.icon.hand.lizard.outline:before {
    content: "\f258";
}
i.icon.hand.paper.outline:before {
    content: "\f256";
}
i.icon.hand.peace.outline:before {
    content: "\f25b";
}
i.icon.hand.point.down.outline:before {
    content: "\f0a7";
}
i.icon.hand.point.left.outline:before {
    content: "\f0a5";
}
i.icon.hand.point.right.outline:before {
    content: "\f0a4";
}
i.icon.hand.point.up.outline:before {
    content: "\f0a6";
}
i.icon.hand.pointer.outline:before {
    content: "\f25a";
}
i.icon.hand.rock.outline:before {
    content: "\f255";
}
i.icon.hand.scissors.outline:before {
    content: "\f257";
}
i.icon.hand.spock.outline:before {
    content: "\f259";
}
i.icon.handshake.outline:before {
    content: "\f2b5";
}
i.icon.hdd.outline:before {
    content: "\f0a0";
}
i.icon.heart.outline:before {
    content: "\f004";
}
i.icon.hospital.outline:before {
    content: "\f0f8";
}
i.icon.hourglass.outline:before {
    content: "\f254";
}
i.icon.id.badge.outline:before {
    content: "\f2c1";
}
i.icon.id.card.outline:before {
    content: "\f2c2";
}
i.icon.image.outline:before {
    content: "\f03e";
}
i.icon.images.outline:before {
    content: "\f302";
}
i.icon.keyboard.outline:before {
    content: "\f11c";
}
i.icon.lemon.outline:before {
    content: "\f094";
}
i.icon.life.ring.outline:before {
    content: "\f1cd";
}
i.icon.lightbulb.outline:before {
    content: "\f0eb";
}
i.icon.list.alternate.outline:before {
    content: "\f022";
}
i.icon.map.outline:before {
    content: "\f279";
}
i.icon.meh.outline:before {
    content: "\f11a";
}
i.icon.minus.square.outline:before {
    content: "\f146";
}
i.icon.money.bill.alternate.outline:before {
    content: "\f3d1";
}
i.icon.moon.outline:before {
    content: "\f186";
}
i.icon.newspaper.outline:before {
    content: "\f1ea";
}
i.icon.object.group.outline:before {
    content: "\f247";
}
i.icon.object.ungroup.outline:before {
    content: "\f248";
}
i.icon.paper.plane.outline:before {
    content: "\f1d8";
}
i.icon.pause.circle.outline:before {
    content: "\f28b";
}
i.icon.play.circle.outline:before {
    content: "\f144";
}
i.icon.plus.square.outline:before {
    content: "\f0fe";
}
i.icon.question.circle.outline:before {
    content: "\f059";
}
i.icon.registered.outline:before {
    content: "\f25d";
}
i.icon.save.outline:before {
    content: "\f0c7";
}
i.icon.share.square.outline:before {
    content: "\f14d";
}
i.icon.smile.outline:before {
    content: "\f118";
}
i.icon.snowflake.outline:before {
    content: "\f2dc";
}
i.icon.square.outline:before {
    content: "\f0c8";
}
i.icon.star.outline:before {
    content: "\f005";
}
i.icon.star.half.outline:before {
    content: "\f089";
}
i.icon.sticky.note.outline:before {
    content: "\f249";
}
i.icon.stop.circle.outline:before {
    content: "\f28d";
}
i.icon.sun.outline:before {
    content: "\f185";
}
i.icon.thumbs.down.outline:before {
    content: "\f165";
}
i.icon.thumbs.up.outline:before {
    content: "\f164";
}
i.icon.times.circle.outline:before {
    content: "\f057";
}
i.icon.trash.alternate.outline:before {
    content: "\f2ed";
}
i.icon.user.outline:before {
    content: "\f007";
}
i.icon.user.circle.outline:before {
    content: "\f2bd";
}
i.icon.window.close.outline:before {
    content: "\f410";
}
i.icon.window.maximize.outline:before {
    content: "\f2d0";
}
i.icon.window.minimize.outline:before {
    content: "\f2d1";
}
i.icon.window.restore.outline:before {
    content: "\f2d2";
}
/* Outline Aliases */
i.icon.disk.outline:before {
    content: "\f0a0";
}
i.icon.heart.empty,
i.icon.star.empty {
    font-family: 'outline-icons';
}
i.icon.heart.empty:before {
    content: "\f004";
}
i.icon.star.empty:before {
    content: "\f089";
}

/*******************************
             Types
*******************************/
/*-------------------
       Animated
--------------------*/
.ui.animated.button {
    position: relative;
    overflow: hidden;
    padding-right: 0em !important;
    vertical-align: middle;
    z-index: 1;
}
.ui.animated.button .content {
    will-change: transform, opacity;
}
.ui.animated.button .visible.content {
    position: relative;
    margin-right: 1.5em;
}
.ui.animated.button .hidden.content {
    position: absolute;
    width: 100%;
}
/* Horizontal */
.ui.animated.button .visible.content,
.ui.animated.button .hidden.content {
    transition: right 0.3s ease 0s;
}
.ui.animated.button .visible.content {
    left: auto;
    right: 0%;
}
.ui.animated.button .hidden.content {
    top: 50%;
    left: auto;
    right: -100%;
    margin-top: -0.5em;
}
.ui.animated.button:focus .visible.content,
.ui.animated.button:hover .visible.content {
    left: auto;
    right: 200%;
}
.ui.animated.button:focus .hidden.content,
.ui.animated.button:hover .hidden.content {
    left: auto;
    right: 0%;
}
/* Vertical */
.ui.vertical.animated.button .visible.content,
.ui.vertical.animated.button .hidden.content {
    transition: top 0.3s ease, transform 0.3s ease;
}
.ui.vertical.animated.button .visible.content {
    transform: translateY(0%);
    right: auto;
}
.ui.vertical.animated.button .hidden.content {
    top: -50%;
    left: 0%;
    right: auto;
}
.ui.vertical.animated.button:focus .visible.content,
.ui.vertical.animated.button:hover .visible.content {
    transform: translateY(200%);
    right: auto;
}
.ui.vertical.animated.button:focus .hidden.content,
.ui.vertical.animated.button:hover .hidden.content {
    top: 50%;
    right: auto;
}
/* Fade */
.ui.fade.animated.button .visible.content,
.ui.fade.animated.button .hidden.content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ui.fade.animated.button .visible.content {
    left: auto;
    right: auto;
    opacity: 1;
    transform: scale(1);
}
.ui.fade.animated.button .hidden.content {
    opacity: 0;
    left: 0%;
    right: auto;
    transform: scale(1.5);
}
.ui.fade.animated.button:focus .visible.content,
.ui.fade.animated.button:hover .visible.content {
    left: auto;
    right: auto;
    opacity: 0;
    transform: scale(0.75);
}
.ui.fade.animated.button:focus .hidden.content,
.ui.fade.animated.button:hover .hidden.content {
    left: 0%;
    right: auto;
    opacity: 1;
    transform: scale(1);
}

/*--------------
     Content
---------------*/
.ui.header .content {
    display: inline-block;
    vertical-align: top;
}
/* After Image */
.ui.header > img + .content,
.ui.header > .image + .content {
    padding-left: 0.75rem;
    vertical-align: middle;
}
/* After Icon */
.ui.header > .icon + .content {
    padding-left: 0.75rem;
    display: table-cell;
    vertical-align: middle;
}

/*-------------------
        Icon
--------------------*/
.ui.icon.header {
    display: inline-block;
    text-align: center;
    margin: 2rem 0em 1rem;
}
.ui.icon.header:after {
    content: '';
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.ui.icon.header:first-child {
    margin-top: 0em;
}
.ui.icon.header .icon {
    float: none;
    display: block;
    width: auto;
    height: auto;
    line-height: 1;
    padding: 0em;
    font-size: 3em;
    margin: 0em auto 0.5rem;
    opacity: 1;
}
.ui.icon.header .content {
    display: block;
    padding: 0em;
}
.ui.icon.header .circular.icon {
    font-size: 2em;
}
.ui.icon.header .square.icon {
    font-size: 2em;
}
.ui.block.icon.header .icon {
    margin-bottom: 0em;
}
.ui.icon.header.aligned {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Content */
.ui.list .list > .item > .content,
.ui.list > .item > .content {
    line-height: 1.14285714em;
}
.ui.list .list > .item > .image + .content,
.ui.list .list > .item > .icon + .content,
.ui.list > .item > .image + .content,
.ui.list > .item > .icon + .content {
    display: table-cell;
    width: 100%;
    padding: 0em 0em 0em 0.5em;
    vertical-align: top;
}
.ui.list .list > .item > img.image + .content,
.ui.list > .item > img.image + .content {
    display: inline-block;
    width: auto;
}
.ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list {
    margin-left: 0em;
    padding-left: 0em;
}

/*******************************
            Types
*******************************/
/*-------------------
      Horizontal
--------------------*/
.ui.horizontal.list {
    display: inline-block;
    font-size: 0em;
}
.ui.horizontal.list > .item {
    display: inline-block;
    margin-left: 1em;
    font-size: 1rem;
}
.ui.horizontal.list:not(.celled) > .item:first-child {
    margin-left: 0em !important;
    padding-left: 0em !important;
}
.ui.horizontal.list .list {
    padding-left: 0em;
    padding-bottom: 0em;
}
.ui.horizontal.list > .item > .image,
.ui.horizontal.list .list > .item > .image,
.ui.horizontal.list > .item > .icon,
.ui.horizontal.list .list > .item > .icon,
.ui.horizontal.list > .item > .content,
.ui.horizontal.list .list > .item > .content {
    vertical-align: middle;
}
/* Padding on all elements */
.ui.horizontal.list > .item:first-child,
.ui.horizontal.list > .item:last-child {
    padding-top: 0.21428571em;
    padding-bottom: 0.21428571em;
}
/* Horizontal List */
.ui.horizontal.list > .item > i.icon {
    margin: 0em;
    padding: 0em 0.25em 0em 0em;
}
.ui.horizontal.list > .item > .icon,
.ui.horizontal.list > .item > .icon + .content {
    float: none;
    display: inline-block;
}

/*-------------------
       Aligned
--------------------*/
.ui.list[class*="top aligned"] .image,
.ui.list[class*="top aligned"] .content,
.ui.list [class*="top aligned"] {
    vertical-align: top !important;
}
.ui.list[class*="middle aligned"] .image,
.ui.list[class*="middle aligned"] .content,
.ui.list [class*="middle aligned"] {
    vertical-align: middle !important;
}
.ui.list[class*="bottom aligned"] .image,
.ui.list[class*="bottom aligned"] .content,
.ui.list [class*="bottom aligned"] {
    vertical-align: bottom !important;
}

/*******************************
    Resource List Variation
*******************************/
.ui.list.resource-list > .item > .image:not(:only-child):not(img) {
    padding-right: unset;
}
.ui.list.resource-list .resource-list-header {
    border: none;
}
.ui.list.resource-list .resource-list-header .resource-list-header-cell {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
}
.ui.list.resource-list > .item {
    padding: 0.85714286em 0.5em !important;
    border-color: rgba(132, 138, 145, 0.15);
}
.ui.list.resource-list > .item .list-item-description {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: grey;
    font-size: 13px;
}
.ui.list.resource-list > .item .list-item-action-panel .list-item-action {
    display: inline-block;
    margin-top: 10px;
}
.ui.list.resource-list > .item .list-item-action-panel > .list-item-action:not(:last-child) {
    margin-right: 10px;
}
.ui.list.resource-list > .item .list-item-meta {
    padding-top: 10px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui.list.resource-list > .item .content {
    x-overflow: hidden;
}
.ui.list.resource-list > .item .content .list-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui.list.resource-list.fill-default {
    border: 1px solid rgba(132, 138, 145, 0.15);
    border-radius: 3px;
    background: #FFFFFF;
}
.ui.list.resource-list.fill-default > .item {
    padding: 0.85714286em 0.9em !important;
}

/*!
 * # Semantic UI - Reveal
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/*******************************
            Reveal
*******************************/
/* Types */
/*******************************
       Reveal Variables
*******************************/
/*******************************
       Reveal Variables
*******************************/
/*******************************
            Reveal
*******************************/
.ui.reveal {
    display: inherit;
    position: relative !important;
    font-size: 0em !important;
}
.ui.reveal > .visible.content {
    position: absolute !important;
    top: 0em !important;
    left: 0em !important;
    z-index: 3 !important;
    transition: all 0.5s ease 0.1s;
}
.ui.reveal > .hidden.content {
    position: relative !important;
    z-index: 2 !important;
}
/* Make sure hovered element is on top of other reveal */
.ui.active.reveal .visible.content,
.ui.reveal:hover .visible.content {
    z-index: 4 !important;
}
/*******************************
              Types
*******************************/
/*--------------
      Slide
---------------*/
.ui.slide.reveal {
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap;
}
.ui.slide.reveal > .content {
    display: block;
    width: 100%;
    white-space: normal;
    float: left;
    margin: 0em;
    transition: transform 0.5s ease 0.1s;
}
.ui.slide.reveal > .visible.content {
    position: relative !important;
}
.ui.slide.reveal > .hidden.content {
    position: absolute !important;
    left: 0% !important;
    width: 100% !important;
    transform: translateX(100%) !important;
}
.ui.slide.active.reveal > .visible.content,
.ui.slide.reveal:hover > .visible.content {
    transform: translateX(-100%) !important;
}
.ui.slide.active.reveal > .hidden.content,
.ui.slide.reveal:hover > .hidden.content {
    transform: translateX(0%) !important;
}
.ui.slide.right.reveal > .visible.content {
    transform: translateX(0%) !important;
}
.ui.slide.right.reveal > .hidden.content {
    transform: translateX(-100%) !important;
}
.ui.slide.right.active.reveal > .visible.content,
.ui.slide.right.reveal:hover > .visible.content {
    transform: translateX(100%) !important;
}
.ui.slide.right.active.reveal > .hidden.content,
.ui.slide.right.reveal:hover > .hidden.content {
    transform: translateX(0%) !important;
}
.ui.slide.up.reveal > .hidden.content {
    transform: translateY(100%) !important;
}
.ui.slide.up.active.reveal > .visible.content,
.ui.slide.up.reveal:hover > .visible.content {
    transform: translateY(-100%) !important;
}
.ui.slide.up.active.reveal > .hidden.content,
.ui.slide.up.reveal:hover > .hidden.content {
    transform: translateY(0%) !important;
}
.ui.slide.down.reveal > .hidden.content {
    transform: translateY(-100%) !important;
}
.ui.slide.down.active.reveal > .visible.content,
.ui.slide.down.reveal:hover > .visible.content {
    transform: translateY(100%) !important;
}
.ui.slide.down.active.reveal > .hidden.content,
.ui.slide.down.reveal:hover > .hidden.content {
    transform: translateY(0%) !important;
}
/*--------------
      Fade
---------------*/
.ui.fade.reveal > .visible.content {
    opacity: 1;
}
.ui.fade.active.reveal > .visible.content,
.ui.fade.reveal:hover > .visible.content {
    opacity: 0;
}
/*--------------
      Move
---------------*/
.ui.move.reveal {
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap;
}
.ui.move.reveal > .content {
    display: block;
    float: left;
    white-space: normal;
    margin: 0em;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
}
.ui.move.reveal > .visible.content {
    position: relative !important;
}
.ui.move.reveal > .hidden.content {
    position: absolute !important;
    left: 0% !important;
    width: 100% !important;
}
.ui.move.active.reveal > .visible.content,
.ui.move.reveal:hover > .visible.content {
    transform: translateX(-100%) !important;
}
.ui.move.right.active.reveal > .visible.content,
.ui.move.right.reveal:hover > .visible.content {
    transform: translateX(100%) !important;
}
.ui.move.up.active.reveal > .visible.content,
.ui.move.up.reveal:hover > .visible.content {
    transform: translateY(-100%) !important;
}
.ui.move.down.active.reveal > .visible.content,
.ui.move.down.reveal:hover > .visible.content {
    transform: translateY(100%) !important;
}
/*--------------
     Rotate
---------------*/
.ui.rotate.reveal > .visible.content {
    transition-duration: 0.5s;
    transform: rotate(0deg);
}
.ui.rotate.reveal > .visible.content,
.ui.rotate.right.reveal > .visible.content {
    transform-origin: bottom right;
}
.ui.rotate.active.reveal > .visible.content,
.ui.rotate.reveal:hover > .visible.content,
.ui.rotate.right.active.reveal > .visible.content,
.ui.rotate.right.reveal:hover > .visible.content {
    transform: rotate(110deg);
}
.ui.rotate.left.reveal > .visible.content {
    transform-origin: bottom left;
}
.ui.rotate.left.active.reveal > .visible.content,
.ui.rotate.left.reveal:hover > .visible.content {
    transform: rotate(-110deg);
}
/*******************************
              States
*******************************/
.ui.disabled.reveal:hover > .visible.visible.content {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}
.ui.disabled.reveal:hover > .hidden.hidden.content {
    display: none !important;
}
/*******************************
           Coupling
*******************************/
.ui.reveal > .ui.ribbon.label {
    z-index: 5;
}
/*******************************
           Variations
*******************************/
/*--------------
     Visible
---------------*/
.ui.visible.reveal {
    overflow: visible;
}
/*--------------
     Instant
---------------*/
.ui.instant.reveal > .content {
    transition-delay: 0s !important;
}
/*--------------
     Sizing
---------------*/
.ui.reveal > .content {
    font-size: 1rem !important;
}

/*******************************
            Content
*******************************/
/* Title */
.ui.steps .step .title {
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1.14285714em;
    font-weight: 400;
}
.ui.steps .step > .title {
    width: 100%;
}
/* Description */
.ui.steps .step .description {
    font-weight: normal;
    font-size: 0.92857143em;
    color: rgba(0, 0, 0, 0.87);
}
.ui.steps .step > .description {
    width: 100%;
}
.ui.steps .step .title ~ .description {
    margin-top: 0.25em;
}
/* Icon */
.ui.steps .step > .icon {
    line-height: 1;
    font-size: 2.5em;
    margin: 0em 1rem 0em 0em;
}
.ui.steps .step > .icon,
.ui.steps .step > .icon ~ .content {
    display: block;
    flex: 0 1 auto;
    align-self: middle;
}
.ui.steps .step > .icon ~ .content {
    flex-grow: 1 0 auto;
}
/* Horizontal Icon */
.ui.steps:not(.vertical) .step > .icon {
    width: auto;
}
/* Link */
.ui.steps .link.step,
.ui.steps a.step {
    cursor: pointer;
}

/*---------------
    Responsive
----------------*/
/* Mobile (Default) */
@media only screen and (max-width: 767px) {
    .ui.steps:not(.unstackable) {
        display: inline-flex;
        overflow: visible;
        flex-direction: column;
    }
    .ui.steps:not(.unstackable) .step {
        width: 100% !important;
        flex-direction: column;
        border-radius: 0em;
        padding: 1.14285714em 2em;
    }
    .ui.steps:not(.unstackable) .step:first-child {
        padding: 1.14285714em 2em;
        border-radius: 3px 3px 0em 0em;
    }
    .ui.steps:not(.unstackable) .step:last-child {
        border-radius: 0em 0em 3px 3px;
    }
    /* Arrow */
    .ui.steps:not(.unstackable) .step:after {
        display: none !important;
    }
    /* Content */
    .ui.steps:not(.unstackable) .step .content {
        text-align: center;
    }
    /* Icon */
    .ui.steps:not(.unstackable) .step > .icon,
    .ui.ordered.steps:not(.unstackable) .step:before {
        margin: 0em 0em 1rem 0em;
    }
}

/*******************************
           Variations
*******************************/
/*--------------
   Stackable
---------------*/
/* Tablet Or Below */
@media only screen and (max-width: 991px) {
    .ui[class*="tablet stackable"].steps {
        display: inline-flex;
        overflow: visible;
        flex-direction: column;
    }
    /* Steps */
    .ui[class*="tablet stackable"].steps .step {
        flex-direction: column;
        border-radius: 0em;
        padding: 1.14285714em 2em;
    }
    .ui[class*="tablet stackable"].steps .step:first-child {
        padding: 1.14285714em 2em;
        border-radius: 3px 3px 0em 0em;
    }
    .ui[class*="tablet stackable"].steps .step:last-child {
        border-radius: 0em 0em 3px 3px;
    }
    /* Arrow */
    .ui[class*="tablet stackable"].steps .step:after {
        display: none !important;
    }
    /* Content */
    .ui[class*="tablet stackable"].steps .step .content {
        text-align: center;
    }
    /* Icon */
    .ui[class*="tablet stackable"].steps .step > .icon,
    .ui[class*="tablet stackable"].ordered.steps .step:before {
        margin: 0em 0em 1rem 0em;
    }
}

/*******************************
         Theme Overrides
*******************************/
/*!
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*******************************
         Theme Overrides
*******************************/
.ui.menu.app-header .item:hover,
.ui.menu.app-footer .item:hover,
.ui.menu.app-header .item:active,
.ui.menu.app-footer .item:active,
.ui.menu.app-header .item:focus,
.ui.menu.app-footer .item:focus,
.ui.menu.app-header .item:visited,
.ui.menu.app-footer .item:visited {
    background: transparent;
}
.ui.menu.app-header {
    display: block;
    background: #FFFFFF;
    height: auto;
    box-shadow: none;
    border-bottom: 1px solid #eeeeee;
}
.ui.menu.app-header .app-header-container {
    background: inherit;
    display: flex;
    justify-content: space-between;
}
.ui.menu.app-header .app-header-container .icon.bars {
    color: inherit;
}
.ui.menu.app-header .app-header-container .bars-container {
    height: 100%;
}
.ui.menu.app-header .app-header-container .brand-container {
    padding: 0;
    height: 100%;
}
.ui.menu.app-header.has-announcement {
    display: block;
    height: auto;
}
.ui.menu.app-header .header-extensions .header-link .header-link-inner {
    background: transparent;
    padding: 10px 15px;
    border-radius: 3px;
    color: inherit;
}
.ui.menu.app-header .header-extensions .header-link .header-link-inner:hover {
    cursor: pointer;
    background: #f5f5f5;
}
.ui.menu.app-header .header-extensions .item.secondary-panel-item {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.6) !important;
}
.ui.menu.app-header .header-extensions .item.secondary-panel-item.active {
    color: rgba(0, 0, 0, 0.87) !important;
    border-bottom: 3px solid #ff5000;
}
.ui.menu.app-header .header-extensions.right > .item:not(:last-child) {
    padding-left: 3px;
    padding-right: 3px;
}
.ui.menu.app-header .header-extensions.right > .item > .item {
    padding: 0;
}
.ui.menu.app-header .header-extensions.right > .item .theme-icon i {
    width: 100%;
    height: 100%;
}
.ui.menu.app-header .header-container {
    display: flex;
    justify-content: space-between;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu {
    padding: 0;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item {
    border: none;
    margin: 8px 0;
    padding: 1.2em 1em !important;
    border-radius: 3px !important;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item:last-child {
    margin-bottom: 0 !important;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item .header-dropdown-item-inner {
    padding: 0;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item .header-dropdown-item-inner.flex {
    display: flex !important;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item .header-dropdown-item-inner .header {
    font-weight: 400;
}
.ui.menu.app-header .header-dropdown .header-dropdown-menu .header-dropdown-item .header-dropdown-item-inner .meta {
    color: #969696;
}
.ui.menu.app-header .header-dropdown.app-switch-dropdown .header-dropdown-menu .header-dropdown-item:first-child {
    margin-top: 0 !important;
}
.ui.menu.app-header .tenant-dropdown-wrapper {
    padding-left: 0;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown {
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 25px !important;
    color: rgba(0, 0, 0, 0.87);
    padding: 10px 15px;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:hover,
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:active,
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:focus {
    color: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:hover .tenant-dropdown-trigger .theme-icon svg > path,
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:active .tenant-dropdown-trigger .theme-icon svg > path,
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:focus .tenant-dropdown-trigger .theme-icon svg > path {
    fill: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown:hover {
    background: #EAEFF4;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown.active {
    background: #EAEFF4;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown .tenant-dropdown-trigger {
    display: contents;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown .tenant-dropdown-trigger .tenant-dropdown-trigger-display-name {
    max-width: 120px;
    line-height: initial;
    margin-top: -3px;
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown .tenant-dropdown-trigger .theme-icon svg > path {
    fill: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-header .tenant-dropdown-wrapper .tenant-dropdown .ui.items {
    margin: 0;
}
.ui.menu.app-header .tenant-dropdown .divider {
    margin: 0;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .item {
    display: flex!important;
    padding: 12px 8px;
    border: 1px solid rgba(34, 36, 38, 0.15);
    margin-bottom: 8px;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .associated-tenant-icon .icon {
    width: 24px;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .tenant-description {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .tenant-description .manage-icon-wrapper {
    display: flex;
    align-items: center;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .tenant-description .manage-icon-wrapper .manage-tenant-icon {
    padding: 4px;
    border: 1px solid rgba(34, 36, 38, 0.15);
    display: flex;
    border-radius: 4px;
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .tenant-description .manage-icon-wrapper .manage-tenant-icon:hover {
    background-color: rgba(34, 36, 38, 0.15);
}
.ui.menu.app-header .tenant-dropdown .tenant-item-wrapper .spaced-right {
    padding-right: 5px;
}
.ui.menu.app-header .tenant-dropdown .menu {
    min-width: 270px;
    padding: 12px 8px;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content {
    padding-left: 15px;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description {
    margin-top: 0;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .name {
    min-width: 100px;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .default-button {
    min-width: 60px;
    padding: 0.4em 1em;
    font-size: 0.8em;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .default-button.active {
    box-shadow: 0 0 0 1px #ffa176 inset !important;
    background-color: #fff1eb !important;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .default-button.active:hover {
    box-shadow: 0 0 0 1px #e64800 inset !important;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .default-button.disabled {
    box-shadow: 0 0 0 1px #767676 inset !important;
    background-color: #eaeaea !important;
    color: #464646 !important;
}
.ui.menu.app-header .tenant-dropdown .menu .header .content .description .default-button.disabled.loading {
    color: transparent!important;
}
.ui.menu.app-header .tenant-dropdown .menu .header-with-margin {
    margin-bottom: 8px;
}
.ui.menu.app-header .tenant-dropdown .menu .search-bar {
    padding: 12px 0;
    margin: 0;
}
.ui.menu.app-header .tenant-dropdown .menu .search-bar.tenant {
    padding: 12px 15px !important;
}
.ui.menu.app-header .tenant-dropdown .menu .tenant-pagination {
    display: flex;
    justify-content: flex-end;
}
.ui.menu.app-header .tenant-dropdown .menu .tenant-pagination.organizations {
    margin-top: 1em;
}
.ui.menu.app-header .tenant-dropdown .menu .tenant-pagination button:first-child {
    margin-left: 8px;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list {
    max-height: 210px;
    overflow: auto;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account {
    border-radius: 3px !important;
    padding: 14px 20px !important;
    border: none;
    transition: none !important;
    margin: 0;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account .theme-icon {
    margin-top: 0 !important;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account .description {
    margin-top: 0;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account:hover {
    cursor: pointer;
    background: #f0f0f0;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account .name {
    font-weight: 400;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .tenant-account .email {
    color: #969696;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .empty-list {
    margin: 8px 0;
    padding: 5px 10px !important;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list .empty-list .message {
    color: #969696;
    height: 30px;
    padding-top: 5px;
    text-align: center;
}
.ui.menu.app-header .tenant-dropdown .menu .tenants-list.organizations {
    max-height: none !important;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel {
    border: none;
    margin: 0;
    padding: 14px 20px !important;
    border-radius: 0;
    min-height: 46px;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel:last-child {
    margin-bottom: 0 !important;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel.no-hover:hover {
    background: transparent !important;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel .link-icon {
    color: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel .link-text {
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel .action-button {
    background: #f8f8f8;
    border: 1px solid #c6c6c6;
    line-height: 28px;
    padding: 6px 20px;
    color: #666;
}
.ui.menu.app-header .tenant-dropdown .menu .action-panel .action-button,
.ui.menu.app-header .tenant-dropdown .menu .action-panel .action-button:hover {
    text-decoration: none;
}
.ui.menu.app-header .user-dropdown:hover,
.ui.menu.app-header .user-dropdown:active,
.ui.menu.app-header .user-dropdown:focus {
    background: transparent;
}
.ui.menu.app-header .user-dropdown .divider {
    margin: 0;
}
.ui.menu.app-header .user-dropdown .user-dropdown-trigger {
    display: contents;
}
.ui.menu.app-header .user-dropdown .user-dropdown-trigger .username {
    color: inherit;
    margin-right: 0.7em;
    text-align: right;
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui.menu.app-header .user-dropdown .menu {
    min-width: 270px !important;
    padding: 0;
}
.ui.menu.app-header .user-dropdown .menu .header {
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.menu.app-header .user-dropdown .menu .header .content {
    padding-left: 15px;
}
.ui.menu.app-header .user-dropdown .menu .header .content .description {
    margin-top: 0;
}
.ui.menu.app-header .user-dropdown .menu .header .content .description.linked {
    cursor: pointer;
}
.ui.menu.app-header .user-dropdown .menu .header .content .description .name {
    font-weight: bold;
    min-width: 100px;
}
.ui.menu.app-header .user-dropdown .menu .header .content .description .email {
    color: #969696;
    min-width: 100px;
}
.ui.menu.app-header .user-dropdown .menu .linked-accounts-list {
    max-height: 200px;
    overflow: auto;
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}
.ui.menu.app-header .user-dropdown .menu .linked-accounts-list .linked-account {
    border-radius: 0 !important;
    margin: 0;
    border: none;
    transition: none !important;
}
.ui.menu.app-header .user-dropdown .menu .linked-accounts-list .linked-account:hover {
    cursor: pointer;
    background: #f0f0f0;
}
.ui.menu.app-header .user-dropdown .menu .linked-accounts-list .linked-account .name {
    font-weight: 400;
}
.ui.menu.app-header .user-dropdown .menu .linked-accounts-list .linked-account .email {
    color: #969696;
}
.ui.menu.app-header .user-dropdown .menu .action-panel {
    border: none;
    margin: 8px 0;
    padding: 14px 20px !important;
    border-radius: 0;
}
.ui.menu.app-header .user-dropdown .menu .action-panel:last-child {
    margin-bottom: 0 !important;
}
.ui.menu.app-header .user-dropdown .menu .action-panel.no-hover:hover {
    background: transparent !important;
}
.ui.menu.app-header .user-dropdown .menu .action-panel .link-icon {
    color: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-header .user-dropdown .menu .action-panel .link-text {
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
}
.ui.menu.app-header .user-dropdown .menu .action-panel .action-button {
    background: #f8f8f8;
    border: 1px solid #c6c6c6;
    line-height: 28px;
    padding: 6px 20px;
    color: #666;
}
.ui.menu.app-header .user-dropdown .menu .action-panel .action-button,
.ui.menu.app-header .user-dropdown .menu .action-panel .action-button:hover {
    text-decoration: none;
}
.ui.menu.app-header:not(.fluid-header) .user-dropdown {
    padding-right: 0;
}
.ui.menu.app-header .ui.dropdown.item.user-dropdown .menu .item.linked-account,
.ui.menu.app-header .ui.dropdown.item.user-dropdown .menu .item.linked-account:not(.filtered) {
    display: flex;
    padding: 0.78571429em 1.14285714em;
}
.ui.menu.app-header .ui.dropdown.item.user-dropdown .menu .item.header,
.ui.menu.app-header .ui.dropdown.item.user-dropdown .menu .item.header:not(.filtered) {
    display: flex;
    padding: 0.78571429em 1.14285714em;
}
.ui.menu.app-header .ui.dropdown.item.user-dropdown .menu .item.header .ui.divider {
    margin: 0.5rem 0rem;
}
.ui.menu.app-header .secondary-panel {
    display: block;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    background: #FFFFFF;
    height: 50px;
}
.ui.menu.app-header .secondary-panel .ui.container {
    height: 100%;
}
.ui.menu.app-header .secondary-panel .inner-menu {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    height: 100%;
}
.ui.menu.app-header .secondary-panel .inner-menu .item.secondary-panel-item {
    background: inherit;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 3px solid transparent;
}
.ui.menu.app-header .secondary-panel .inner-menu .item.secondary-panel-item.active {
    background: inherit;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 3px solid #ff5000;
}
.ui.menu.app-header .secondary-panel .inner-menu .item.secondary-panel-item:not(.active) {
    border-bottom: 3px solid #f5f5f5;
}
.ui.menu.app-header .secondary-panel .inner-menu .item.secondary-panel-item:first-child {
    margin-left: 14px;
}
.ui.menu.app-footer {
    background: #FFFFFF;
    height: 50px;
}
.ui.menu.app-footer .footer-link,
.ui.menu.app-footer .footer-dropdown .dropdown-trigger.link {
    color: rgba(0, 0, 0, 0.87);
}
.ui.menu.app-footer .footer-link:hover,
.ui.menu.app-footer .footer-dropdown .dropdown-trigger.link:hover {
    text-decoration: underline;
    cursor: pointer;
}

/*--------------
      Icon
---------------*/
.ui.icon.message {
    display: flex;
    width: 100%;
    align-items: center;
}
.ui.icon.message > .icon:not(.close) {
    display: block;
    flex: 0 0 auto;
    width: auto;
    line-height: 1;
    vertical-align: middle;
    font-size: 3em;
    opacity: 0.8;
}
.ui.icon.message > .content {
    display: block;
    flex: 1 1 auto;
    vertical-align: middle;
}
.ui.icon.message .icon:not(.close) + .content {
    padding-left: 0rem;
}
.ui.icon.message .circular.icon {
    width: 1em;
}

/*!
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*******************************
          Theme Overrides
 *******************************/
.ui.table.sub-section-table {
    margin: 0.7em 1em;
}
.ui.table .thead.user-attribute-table-header {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
/*-------------------------------
          Data Table
--------------------------------*/
.ui.table.data-table.transparent {
    background: transparent;
    border: none;
}
.ui.table.data-table.selectable .data-table-body .data-table-row {
    cursor: pointer;
}
.ui.table.data-table .data-table-header th {
    font-weight: 500;
}
.ui.table.data-table .data-table-header th .header-with-popup {
    display: flex;
    align-items: center;
}
.ui.table.data-table .data-table-row:hover.no-hover {
    background: transparent !important;
}
.ui.table.data-table .data-table-row.no-selectable {
    cursor: unset !important;
}
.ui.table.data-table .data-table-row.no-selectable:hover {
    background: transparent !important;
}
.ui.table.data-table .data-table-cell .header-with-icon {
    display: flex;
    align-items: center;
}
.ui.table.data-table .data-table-cell .header-with-icon .content {
    vertical-align: middle;
}
.ui.table.data-table .data-table-cell .header-with-icon .content .sub.header.truncate {
    max-width: 500px;
}
.ui.table.data-table .data-table-cell .header-with-icon .theme-icon {
    display: inline-flex;
}
.ui.table.data-table .data-table-cell .header-with-icon .theme-icon .icon {
    margin-right: 0;
}
.ui.table.data-table .data-table-cell.actions-cell.items-1 {
    min-width: 47px;
}
.ui.table.data-table .data-table-cell.actions-cell.items-2 {
    min-width: 75px;
}
.ui.table.data-table .data-table-cell.actions-cell.items-3 {
    min-width: 100px;
}
.ui.table.opaque {
    border: none;
    background: none;
}
@media only screen and (max-width: 768px) {
    .ui.table.data-table .data-table-search {
        margin-bottom: 10px;
    }
}

/*--------------
     Content
---------------*/
.ui.cards > .card > .content,
.ui.card > .content {
    flex-grow: 1;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, 0.1);
    background: none;
    margin: 0em;
    padding: 1em 1em;
    box-shadow: none;
    font-size: 1em;
    border-radius: 0em;
}
.ui.cards > .card > .content:after,
.ui.card > .content:after {
    display: block;
    content: ' ';
    height: 0px;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
    display: block;
    margin: '';
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: rgba(0, 0, 0, 0.85);
}
/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
    font-weight: 400;
    font-size: 1.28571429em;
    margin-top: -0.21425em;
    line-height: 1.28571429em;
}
.ui.cards > .card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.card > .content > .header + .description {
    margin-top: 0.5em;
}

/*--------------
  Content Image
---------------*/
.ui.cards > .card .content img,
.ui.card .content img {
    display: inline-block;
    vertical-align: middle;
    width: '';
}
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
    width: 2em;
    height: 2em;
    border-radius: 500rem;
}
/*--------------
   Description
---------------*/
.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
    clear: both;
    color: rgba(0, 0, 0, 0.68);
}
/*--------------
    Paragraph
---------------*/
.ui.cards > .card > .content p,
.ui.card > .content p {
    margin: 0em 0em 0.5em;
}
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
    margin-bottom: 0em;
}
/*--------------
      Meta
---------------*/
.ui.cards > .card .meta,
.ui.card .meta {
    font-size: 1em;
    color: rgba(0, 0, 0, 0.4);
}
.ui.cards > .card .meta *,
.ui.card .meta * {
    margin-right: 0.3em;
}
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
    margin-right: 0em;
}
.ui.cards > .card .meta [class*="right floated"],
.ui.card .meta [class*="right floated"] {
    margin-right: 0em;
    margin-left: 0.3em;
}
/*--------------
      Links
---------------*/
/* Generic */
.ui.cards > .card > .content a:not(.ui),
.ui.card > .content a:not(.ui) {
    color: '';
    transition: color 0.1s ease;
}
.ui.cards > .card > .content a:not(.ui):hover,
.ui.card > .content a:not(.ui):hover {
    color: '';
}
/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
    color: rgba(0, 0, 0, 0.85);
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
    color: #d94400;
}
/* Meta */
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
    color: rgba(0, 0, 0, 0.4);
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
    color: rgba(0, 0, 0, 0.87);
}
/*--------------
     Buttons
---------------*/
.ui.cards > .card > .buttons,
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
    margin: 0px -1px;
    width: calc(100% +  2px );
}
/*--------------
      Dimmer
---------------*/
.ui.cards > .card .dimmer,
.ui.card .dimmer {
    background-color: '';
    z-index: 10;
}
/*--------------
     Labels
---------------*/
/*-----Star----- */
/* Icon */
.ui.cards > .card > .content .star.icon,
.ui.card > .content .star.icon {
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.1s ease;
}
.ui.cards > .card > .content .star.icon:hover,
.ui.card > .content .star.icon:hover {
    opacity: 1;
    color: #FFB70A;
}
.ui.cards > .card > .content .active.star.icon,
.ui.card > .content .active.star.icon {
    color: #FFE623;
}
/*-----Like----- */
/* Icon */
.ui.cards > .card > .content .like.icon,
.ui.card > .content .like.icon {
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.1s ease;
}
.ui.cards > .card > .content .like.icon:hover,
.ui.card > .content .like.icon:hover {
    opacity: 1;
    color: #FF2733;
}
.ui.cards > .card > .content .active.like.icon,
.ui.card > .content .active.like.icon {
    color: #FF2733;
}
/*----------------
  Extra Content
-----------------*/
.ui.cards > .card > .extra,
.ui.card > .extra {
    max-width: 100%;
    min-height: 0em !important;
    flex-grow: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    position: static;
    background: none;
    width: auto;
    margin: 0em 0em;
    padding: 0.75em 1em;
    top: 0em;
    left: 0em;
    color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    transition: color 0.1s ease;
}
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
    color: rgba(0, 0, 0, 0.4);
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
    color: #d94400;
}

/*******************************
         Theme Overrides
*******************************/
/**
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
/*-----------------------------
     Global Card Overrides
------------------------------*/
.ui.card .content.extra.selection {
    cursor: pointer;
}
.ui.card .content.extra.selection:hover {
    background: rgba(0, 0, 0, 0.03);
}
.ui.card .content.compact {
    padding: 0;
}
.ui.card.clipped {
    overflow: clip;
}
.ui.card.rounded {
    border-radius: 100%;
}
/*-----------------------------
   Application Card Variation
------------------------------*/
.ui.card.application-card.recent {
    color: #464646;
    width: 100%;
    margin-bottom: 25px;
}
.ui.card.application-card.recent:hover {
    transform: none;
}
.ui.card.application-card.recent .logo {
    background: transparent;
    padding: 3em 0;
    height: 170px;
}
.ui.card.application-card.recent .application-image {
    text-align: center;
}
.ui.card.application-card.recent .application-image.default {
    background: #f5f5f5;
}
.ui.card.application-card.recent .application-content .text-content-container {
    display: inline-block;
}
.ui.card.application-card.recent .application-content .text-content-container .application-name {
    color: rgba(0, 0, 0, 0.85);
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 4px;
    max-width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui.card.application-card.recent .application-content .text-content-container .application-description {
    color: rgba(0, 0, 0, 0.6);
    max-width: 160px;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui.card.application-card.recent .application-content .text-content-container .application-tag {
    margin: 0;
    font-size: 0.8em;
}
.ui.card.application-card.recent .application-content .icon-container {
    display: inline-block;
    font-size: 1.3em;
    float: right;
    margin-top: 10px;
}
.ui.card.application-card.recent .application-content .icon-container .favourite-icon.favoured {
    color: #FFB70A;
}
.ui.card.settings-card {
    border: 1px solid #DADCE0;
    box-shadow: none;
}
.ui.card.settings-card.with-top-action-bar .ui.list {
    margin-top: 0;
}
.ui.card.settings-card.overview {
    min-height: 220px;
}
.ui.card.settings-card:last-child {
    margin-bottom: 0.3em;
}
.ui.card.settings-card .no-padding {
    padding: 0;
}
.ui.card.settings-card .header-section {
    padding: 2em 2em 1.5em;
}
.ui.card.settings-card .header-section .ui.header {
    font-size: 1.5rem;
    margin-bottom: 5px;
}
.ui.card.settings-card .top-action-panel {
    background: #FFFFFF;
    box-shadow: none;
    padding: 0 2em;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.ui.card.settings-card .top-action-panel .description {
    display: flex;
    align-items: center;
}
.ui.card.settings-card .top-action-panel.no-margin-bottom {
    margin-bottom: 0;
}
.ui.card.settings-card .main-content .main-content-inner .edit-segment {
    padding: 2em;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item {
    padding: 0;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .description .placeholder-text {
    color: #acacac;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .description .small-text {
    font-size: 11px;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .description.padded-description {
    padding-top: 0.7em;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .list-item-action {
    display: inline-block;
    padding-top: 10px;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .first-column {
    padding-left: 2em;
}
.ui.card.settings-card .main-content .main-content-inner .inner-list-item .last-column {
    padding-right: 2em;
}
.ui.card.settings-card .main-content .main-content-inner.no-margin-top {
    margin-top: 0;
}
.ui.card.settings-card .extra-content {
    padding: 0;
    border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
}
.ui.card.settings-card .extra-content .action-button {
    padding: 16px 2em;
}
.ui.card.settings-card .extra-content .action-button .action-button-text {
    color: #ff5000;
    font-weight: 500;
}
.ui.card.settings-card .extra-content .action-button.disabled .action-button-text {
    color: #464646;
}
.ui.card.settings-card .settings-section-tab .ui.attached.menu:not(.tabular) {
    border-radius: 0;
    border-left: none;
    border-right: none;
}
.ui.card.settings-card .settings-section-tab .ui.secondary.pointing.menu .item {
    padding-left: 2em;
    padding-right: 2em;
    border-bottom-width: 3px;
}
.ui.card.settings-card .settings-section-tab .ui.secondary.pointing.menu .item:active,
.ui.card.settings-card .settings-section-tab .ui.secondary.pointing.menu .item.active {
    border-bottom-color: #ff5000;
}
.ui.card.settings-card .settings-section-tab .ui.segment.tab-pane {
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
}
/*-----------------------------
     Basic Card Variation
------------------------------*/
.ui.card.basic-card {
    transition: all 0.3s;
    border: 1px solid #e8e8e8;
    box-shadow: none;
}
.ui.card.basic-card:hover {
    transform: none !important;
    text-decoration: none;
}
.ui.card.basic-card:not(.no-hover):hover {
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09) !important;
}
.ui.card.basic-card.no-hover:hover {
    box-shadow: none !important;
}
.ui.card.basic-card.no-background {
    background: unset !important;
    background-color: transparent !important;
}
/*******************************
    Selection Card Variation
*******************************/
.ui.card.selection-card {
    transition: all 0.3s;
    border: 1px solid #e8e8e8;
    box-shadow: none;
}
.ui.card.selection-card.default {
    width: 150px;
}
.ui.card.selection-card.small {
    width: 135px;
}
.ui.card.selection-card.x100 {
    width: 100px;
}
.ui.card.selection-card.x120 {
    width: 120px;
}
.ui.card.selection-card:hover {
    transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.ui.card.selection-card.inline {
    display: inline-block;
    margin-right: 20px;
}
.ui.card.selection-card.image-inline .card-text-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.ui.card.selection-card.selected.underlined-selection:after {
    visibility: visible;
}
.ui.card.selection-card.selected.filled-selection {
    background: #ffdccc;
    border: 1px solid #ff5000;
}
.ui.card.selection-card.disabled {
    cursor: not-allowed;
}
.ui.card.selection-card.grayscale {
    filter: grayscale(100%);
}
.ui.card.selection-card.spaced-bottom {
    margin-bottom: 2em;
}
.ui.card.selection-card.no-content-top-border .card-text-container {
    border-top: 0;
}
.ui.card.selection-card .card-text-container {
    padding: 0.8em 1em;
}
.ui.card.selection-card .card-text-container .header {
    font-size: 1em !important;
    line-height: 1.2em !important;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui.card.selection-card .card-text-container .description {
    font-size: 0.8em;
    max-width: 100%;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui.card.selection-card .card-text-container .description.multiline {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.ui.card.selection-card:after {
    display: block;
    background: #ff5000;
    content: '';
    height: 3px;
    visibility: hidden;
}
.ui.card.selection-card.no-actions {
    cursor: not-allowed !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Selection card with radio button */
.ui.card.selection-card.radio-selection-card {
    border: none !important;
    box-shadow: none !important;
    background: #eeeeee;
    border-left: 4px solid transparent !important;
}
.ui.card.selection-card.radio-selection-card .integrate-radio {
    flex-grow: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui.card.selection-card.radio-selection-card .integrate-radio .ui.radio.checkbox {
    margin-top: -5px !important;
}
.ui.card.selection-card.radio-selection-card .integrate-radio .ui.radio.checkbox label::after {
    width: 22px !important;
    height: 22px !important;
    top: 0px !important;
    left: -1px !important;
    background-color: #ff5000 !important;
}
.ui.card.selection-card.radio-selection-card .integrate-radio .ui.radio.checkbox label::before {
    width: 20px !important;
    height: 20px !important;
    border-color: #c8c8c8 !important;
    border-width: 2px !important;
}
.ui.card.selection-card.radio-selection-card.card-selected {
    box-shadow: none !important;
    background: #d6d6d6;
    border-left: 4px solid #ff5000 !important;
}
.ui.card.selection-card.radio-selection-card.card-selected .integrate-radio .ui.radio.checkbox label::before {
    border-color: #ff5000 !important;
}
.ui.card.selection-card.radio-selection-card.card-selected .selection-card-content .meta span {
    color: #4d4d4d;
}
.ui.card.selection-card.radio-selection-card.card-selected:hover {
    background: #d6d6d6;
}
.ui.card.selection-card.radio-selection-card .selection-card-content {
    display: flex;
    flex-direction: row;
    padding: 1.4em 1em !important;
    cursor: pointer;
}
.ui.card.selection-card.radio-selection-card .selection-card-content .header {
    font-size: 1.4em;
}
.ui.card.selection-card.radio-selection-card .selection-card-content .header span {
    color: #000000;
    font-weight: 600;
}
.ui.card.selection-card.radio-selection-card .selection-card-content .meta span {
    font-size: 0.9em;
}
.ui.card.selection-card.radio-selection-card:hover {
    background: #d6d6d6;
}
/*-----------------------------
     Resource Cards Grid
------------------------------*/
.ui.cards.resource-grid .ui.card.info-card {
    width: 220px;
}
.ui.cards.resource-grid .ui.card.info-card .content:not(:first-child) {
    padding-top: 0.4em;
}
.ui.cards.resource-grid .ui.card.info-card .content:not(:first-child):not(:last-child) {
    padding-bottom: 0.4em;
}
.ui.cards.resource-grid .ui.card.info-card .action-container {
    min-height: 55px !important;
}
.ui.cards.resource-grid .ui.card.info-card .action-container .actions {
    display: flex;
    justify-content: space-between;
}
.ui.cards.resource-grid .ui.card.info-card .action-container .actions .delete-button {
    visibility: hidden;
    color: #DB2828;
}
.ui.cards.resource-grid .ui.card.info-card:hover .action-container .delete-button {
    visibility: visible;
}
.ui.cards.resource-grid .ui.card.info-card.disabled {
    opacity: 0.6;
}

/*******************************
      Info Card Variation
*******************************/
.ui.card.info-card {
    transition: all 0.3s;
    border: 1px solid #e8e8e8;
    box-shadow: none;
}
.ui.card.info-card:hover {
    transform: none;
    text-decoration: none;
}
.ui.card.info-card:hover:not(.no-hover) {
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.ui.card.info-card.selected {
    border-color: #ff5000;
}
.ui.card.info-card.disabled {
    cursor: not-allowed;
    filter: grayscale(100%);
}
.ui.card.info-card .ribbon {
    font-size: 0.8em;
    font-weight: 500;
    color: #FFFFFF;
    right: 0;
    height: 24px;
    position: absolute;
    min-width: 100px;
    background: linear-gradient(270deg, #ff854d 0%, #ff5000 100%);
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
    -webkit-clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
}
.ui.card.info-card .content {
    border: none;
}
.ui.card.info-card .card-image {
    margin-right: 0.7em;
}
.ui.card.info-card .card-header-section .card-header {
    font-weight: 500;
}
.ui.card.info-card .card-subheader {
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.4);
}
.ui.card.info-card .card-description-container {
    padding-top: 0.5em;
    min-height: 45px;
}
.ui.card.info-card .card-description {
    font-size: 0.9em;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.2em;
    max-height: 2.8em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: rgba(0, 0, 0, 0.4);
}
.ui.card.info-card:not(.fluid) .github-meta {
    padding-top: 0.3em;
}
.ui.card.info-card.fluid .card-description {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
.ui.card.info-card.fluid .github-meta {
    margin-top: 3px;
}
.ui.card.info-card.fluid .card-image {
    margin-right: 1em;
}
.ui.card.info-card .card-tags {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}
.ui.card.info-card .card-tags .label {
    font-weight: 600;
    color: #FFFFFF;
    background: #c9c9c9;
}
.ui.card.info-card .github-meta .ui.labels {
    display: flex;
}
.ui.card.info-card .github-meta .ui.labels .label {
    background: #f1f1f1;
}
.ui.card.info-card .github-meta.inline {
    display: inline-block;
}
.ui.card.info-card .action-container .info-card-inner-action {
    padding-left: 0;
}
.ui.card.info-card .action-container .info-card-inner-action .icon {
    margin-left: 0 !important;
    text-decoration: auto;
}

/*-----------------------------
      Relaxed Variation
------------------------------*/
.ui.card.relaxed .content {
    padding: 2em 1.5em;
}

/*-----------------------------------------
      Disabled User Card
-------------------------------------------*/
.ui.card.disabled-card {
    transition: all 0.3s;
    border: none;
    box-shadow: none;
    height: 290px;
    width: 205px;
}
.ui.card.disabled-card.small {
    width: 135px;
}
.ui.card.disabled-card.x100 {
    width: 100px;
}
.ui.card.disabled-card.x120 {
    width: 120px;
}
.ui.card.disabled-card.inline {
    display: inline-block;
}
.ui.card.disabled-card.spaced-bottom {
    margin-bottom: 2em;
}
.ui.card.disabled-card .card-text-container {
    text-align: center;
    border-top: 0;
}
.ui.card.disabled-card .card-text-container .header {
    color: #616161;
    font-size: 1em !important;
    line-height: 1.2em !important;
}
.ui.card.disabled-card .card-text-container .description {
    color: #9e9b9b;
    font-size: 0.8em;
}
.ui.card.disabled-card .card-image-container {
    height: 145px;
    opacity: 0.6;
}
/*-----------------------------------------
         Reusable Card Directives
-------------------------------------------*/
.ui.card .coming-soon-ribbon {
    top: 0;
    width: fit-content;
    min-width: 100px;
    font-size: 0.8em;
    height: 24px;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    font-weight: 500;
    color: #FFFFFF;
    background: linear-gradient(270deg, #ff854d 0%, #ff5000 100%);
    clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
    -webkit-clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
}
.ui.card.context-card {
    padding: 15px;
}
.ui.card .no-borders {
    border: none !important;
}
.ui.card .application-tile {
    position: relative;
    align-content: space-between;
    background-color: #eeeeee;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
    padding: 15px;
    transition: all 0.3s;
    border: 1px solid #e8e8e8;
    box-shadow: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex !important;
}
.ui.card .application-tile:hover {
    transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.ui.card .application-tile.auto-vh-center {
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}
.ui.card .application-tile.outlined {
    background-color: unset !important;
    box-shadow: unset !important;
    border-style: dashed;
    border-width: 2px;
    border-color: lightgray;
}
.ui.card .application-tile.cursor-not-allowed {
    pointer-events: none !important;
    cursor: not-allowed !important;
}
.ui.card .application-tile.cursor-pointer {
    cursor: pointer !important;
}
.ui.card .application-tile.clipped {
    overflow: clip;
}
.ui.card .application-tile.grayscale {
    filter: grayscale(100%);
}
.ui.card .application-tile.opacity-50 {
    opacity: 0.5;
}
.ui.card .application-tile.white-bg {
    background-color: white;
}
.ui.card .application-tile .header {
    margin-top: 0 !important;
    width: 100%;
}
.ui.card .application-tile .header > h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
}
.ui.card .application-tile .header > h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    text-overflow: ellipsis;
}
.ui.card .application-tile .body {
    height: 100%;
    display: flex;
}
.ui.card .application-tile .body > h1 {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    width: 90%;
    text-align: left;
    overflow: clip;
    /* Faster than hidden */
    text-overflow: ellipsis;
    /* Required for line-clamp */
    display: -webkit-box;
    /* Required for line-clamp */
    line-clamp: 2;
    /* Number of lines to show */
    -webkit-line-clamp: 2;
    /* Chrome */
    -webkit-box-orient: vertical;
    /* Chrome */
}
.ui.card .application-tile .body.center {
    justify-content: center;
    align-items: center;
}
.ui.card .application-tile .body.start {
    justify-content: start;
    align-items: start;
}
.ui.card .application-tile .body .content {
    margin-top: 10px;
    font-size: 11px;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: -webkit-linear-gradient(top, transparent 80%, #eeeeee);
}
.ui.card .application-tile .body .stacked-content {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    text-align: center;
}
.ui.card .application-tile .footer {
    display: flex;
    justify-content: space-between;
}
.ui.card .application-tile .footer.justify-end {
    justify-content: end !important;
}
.ui.card .application-tile .footer.justify-start {
    justify-content: start !important;
}
.ui.card .application-tile .coming-soon-ribbon {
    top: 0;
    width: fit-content;
    min-width: 100px;
    font-size: 0.8em;
    height: 24px;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    font-weight: 500;
    color: #FFFFFF;
    background: linear-gradient(270deg, #ff854d 0%, #ff5000 100%);
    clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
    -webkit-clip-path: polygon(4% 0, 0 100%, 100% 100%, 100% 0, 100% 0);
}
.ui.card .card-expanded-navigation-button {
    border: none !important;
    border-radius: 6px;
    width: 100%;
    padding: 15px 0 0 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    background-color: #eeeeee;
    text-decoration: none;
    align-items: center;
    text-overflow: ellipsis !important;
    color: #ff5000 !important;
    background-color: transparent !important;
    box-shadow: unset !important;
    height: 45px;
}
.ui.card .card-expanded-navigation-button:hover {
    text-decoration: underline;
}
.ui.card .card-rich-navigation-button {
    color: #000000 !important;
    justify-content: space-between !important;
    background-color: #e6e6e6 !important;
    text-decoration: none !important;
    box-shadow: revert !important;
    padding: 15px !important;
}
.ui.card .card-rich-navigation-button:hover {
    color: #000000 !important;
    background-color: #dadada !important;
}

/*--------------
     Content
---------------*/
.ui.comments .comment > .content {
    display: block;
}
/* If there is an avatar move content over */
.ui.comments .comment > .avatar ~ .content {
    margin-left: 3.5em;
}

/*--------------------
        Minimal
---------------------*/
.ui.minimal.comments .comment .actions {
    opacity: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    left: auto;
    transition: opacity 0.2s ease;
    transition-delay: 0.1s;
}
.ui.minimal.comments .comment > .content:hover > .actions {
    opacity: 1;
}

/*******************************
         Theme Overrides
*******************************/
/*******************************
       Comments Overrides
*******************************/
/*!
 * # Semantic UI - Feed
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/*******************************
             Feed
*******************************/
/*-------------------
        Feed
--------------------*/
/*-------------------
      Elements
--------------------*/
/* Event */
/* Event Label */
/* Icon Label */
/* Image Label */
/* Content w/ Label */
/* Content */
/* Date */
/* Summary */
/* Summary Image */
/* Summary Date */
/* User */
/* Extra Summary Data */
/* Extra Images */
/* Extra Text */
/* Metadata Group */
/* Like */
/* Metadata Divider */
/*-------------------
      Variations
--------------------*/
/*******************************
        Feed Variables
*******************************/
/*******************************
        Feed Variables
*******************************/
/*******************************
         Activity Feed
*******************************/
.ui.feed {
    margin: 1em 0em;
}
.ui.feed:first-child {
    margin-top: 0em;
}
.ui.feed:last-child {
    margin-bottom: 0em;
}
/*******************************
            Content
*******************************/
/* Event */
.ui.feed > .event {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.21428571rem 0em;
    margin: 0em;
    background: none;
    border-top: none;
}
.ui.feed > .event:first-child {
    border-top: 0px;
    padding-top: 0em;
}
.ui.feed > .event:last-child {
    padding-bottom: 0em;
}
/* Event Label */
.ui.feed > .event > .label {
    display: block;
    flex: 0 0 auto;
    width: 2.5em;
    height: auto;
    align-self: stretch;
    text-align: left;
}
.ui.feed > .event > .label .icon {
    opacity: 1;
    font-size: 1.5em;
    width: 100%;
    padding: 0.25em;
    background: none;
    border: none;
    border-radius: none;
    color: rgba(0, 0, 0, 0.6);
}
.ui.feed > .event > .label img {
    width: 100%;
    height: auto;
    border-radius: 500rem;
}
.ui.feed > .event > .label + .content {
    margin: 0.5em 0em 0.35714286em 1.14285714em;
}
/*--------------
     Content
---------------*/
/* Content */
.ui.feed > .event > .content {
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    text-align: left;
    word-wrap: break-word;
}
.ui.feed > .event:last-child > .content {
    padding-bottom: 0em;
}
/* Link */
.ui.feed > .event > .content a {
    cursor: pointer;
}
/*--------------
      Date
---------------*/
.ui.feed > .event > .content .date {
    margin: -0.5rem 0em 0em;
    padding: 0em;
    font-weight: normal;
    font-size: 1em;
    font-style: normal;
    color: rgba(0, 0, 0, 0.4);
}
/*--------------
     Summary
---------------*/
.ui.feed > .event > .content .summary {
    margin: 0em;
    font-size: 1em;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.87);
}
/* Summary Image */
.ui.feed > .event > .content .summary img {
    display: inline-block;
    width: auto;
    height: 10em;
    margin: -0.25em 0.25em 0em 0em;
    border-radius: 0.25em;
    vertical-align: middle;
}
/*--------------
      User
---------------*/
.ui.feed > .event > .content .user {
    display: inline-block;
    font-weight: 400;
    margin-right: 0em;
    vertical-align: baseline;
}
.ui.feed > .event > .content .user img {
    margin: -0.25em 0.25em 0em 0em;
    width: auto;
    height: 10em;
    vertical-align: middle;
}
/*--------------
   Inline Date
---------------*/
/* Date inside Summary */
.ui.feed > .event > .content .summary > .date {
    display: inline-block;
    float: none;
    font-weight: normal;
    font-size: 0.85714286em;
    font-style: normal;
    margin: 0em 0em 0em 0.5em;
    padding: 0em;
    color: rgba(0, 0, 0, 0.4);
}
/*--------------
  Extra Summary
---------------*/
.ui.feed > .event > .content .extra {
    margin: 0.5em 0em 0em;
    background: none;
    padding: 0em;
    color: rgba(0, 0, 0, 0.87);
}
/* Images */
.ui.feed > .event > .content .extra.images img {
    display: inline-block;
    margin: 0em 0.25em 0em 0em;
    width: 6em;
}
/* Text */
.ui.feed > .event > .content .extra.text {
    padding: 0em;
    border-left: none;
    font-size: 1em;
    max-width: 500px;
    line-height: 1.4285em;
}
/*--------------
      Meta
---------------*/
.ui.feed > .event > .content .meta {
    display: inline-block;
    font-size: 0.85714286em;
    margin: 0.5em 0em 0em;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0em;
    color: rgba(0, 0, 0, 0.6);
}
.ui.feed > .event > .content .meta > * {
    position: relative;
    margin-left: 0.75em;
}
.ui.feed > .event > .content .meta > *:after {
    content: '';
    color: rgba(0, 0, 0, 0.2);
    top: 0em;
    left: -1em;
    opacity: 1;
    position: absolute;
    vertical-align: top;
}
.ui.feed > .event > .content .meta .like {
    color: '';
    transition: 0.2s color ease;
}
.ui.feed > .event > .content .meta .like:hover .icon {
    color: #FF2733;
}
.ui.feed > .event > .content .meta .active.like .icon {
    color: #EF404A;
}
/* First element */
.ui.feed > .event > .content .meta > :first-child {
    margin-left: 0em;
}
.ui.feed > .event > .content .meta > :first-child::after {
    display: none;
}
/* Action */
.ui.feed > .event > .content .meta a,
.ui.feed > .event > .content .meta > .icon {
    cursor: pointer;
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    transition: color 0.1s ease;
}
.ui.feed > .event > .content .meta a:hover,
.ui.feed > .event > .content .meta a:hover .icon,
.ui.feed > .event > .content .meta > .icon:hover {
    color: rgba(0, 0, 0, 0.95);
}

/*--------------
     Content
---------------*/
.ui.items > .item > .content {
    display: block;
    flex: 1 1 auto;
    background: none;
    margin: 0em;
    padding: 0em;
    box-shadow: none;
    font-size: 1em;
    border: none;
    border-radius: 0em;
}
.ui.items > .item > .content:after {
    display: block;
    content: ' ';
    height: 0px;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.ui.items > .item > .image + .content {
    min-width: 0;
    width: auto;
    display: block;
    margin-left: 0em;
    align-self: top;
    padding-left: 1.5em;
}
.ui.items > .item > .content > .header {
    display: inline-block;
    margin: -0.21425em 0em 0em;
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}
/* Default Header Size */
.ui.items > .item > .content > .header:not(.ui) {
    font-size: 1.28571429em;
}
/*--------------
     Floated
---------------*/
.ui.items > .item [class*="left floated"] {
    float: left;
}
.ui.items > .item [class*="right floated"] {
    float: right;
}
/*--------------
  Content Image
---------------*/
.ui.items > .item .content img {
    align-self: middle;
    width: '';
}
.ui.items > .item img.avatar,
.ui.items > .item .avatar img {
    width: '';
    height: '';
    border-radius: 500rem;
}
/*--------------
   Description
---------------*/
.ui.items > .item > .content > .description {
    margin-top: 0.6em;
    max-width: auto;
    font-size: 1em;
    line-height: 1.4285em;
    color: rgba(0, 0, 0, 0.87);
}
/*--------------
    Paragraph
---------------*/
.ui.items > .item > .content p {
    margin: 0em 0em 0.5em;
}
.ui.items > .item > .content p:last-child {
    margin-bottom: 0em;
}
/*--------------
      Meta
---------------*/
.ui.items > .item .meta {
    margin: 0.5em 0em 0.5em;
    font-size: 1em;
    line-height: 1em;
    color: rgba(0, 0, 0, 0.6);
}
.ui.items > .item .meta * {
    margin-right: 0.3em;
}
.ui.items > .item .meta :last-child {
    margin-right: 0em;
}
.ui.items > .item .meta [class*="right floated"] {
    margin-right: 0em;
    margin-left: 0.3em;
}
/*--------------
      Links
---------------*/
/* Generic */
.ui.items > .item > .content a:not(.ui) {
    color: '';
    transition: color 0.1s ease;
}
.ui.items > .item > .content a:not(.ui):hover {
    color: '';
}
/* Header */
.ui.items > .item > .content > a.header {
    color: rgba(0, 0, 0, 0.85);
}
.ui.items > .item > .content > a.header:hover {
    color: #d94400;
}
/* Meta */
.ui.items > .item .meta > a:not(.ui) {
    color: rgba(0, 0, 0, 0.4);
}
.ui.items > .item .meta > a:not(.ui):hover {
    color: rgba(0, 0, 0, 0.87);
}
/*--------------
     Labels
---------------*/
/*-----Star----- */
/* Icon */
.ui.items > .item > .content .favorite.icon {
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.1s ease;
}
.ui.items > .item > .content .favorite.icon:hover {
    opacity: 1;
    color: #FFB70A;
}
.ui.items > .item > .content .active.favorite.icon {
    color: #FFE623;
}
/*-----Like----- */
/* Icon */
.ui.items > .item > .content .like.icon {
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.1s ease;
}
.ui.items > .item > .content .like.icon:hover {
    opacity: 1;
    color: #FF2733;
}
.ui.items > .item > .content .active.like.icon {
    color: #FF2733;
}
/*----------------
  Extra Content
-----------------*/
.ui.items > .item .extra {
    display: block;
    position: relative;
    background: none;
    margin: 0.5rem 0em 0em;
    width: 100%;
    padding: 0em 0em 0em;
    top: 0em;
    left: 0em;
    color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    transition: color 0.1s ease;
    border-top: none;
}
.ui.items > .item .extra > * {
    margin: 0.25rem 0.5rem 0.25rem 0em;
}
.ui.items > .item .extra > [class*="right floated"] {
    margin: 0.25rem 0em 0.25rem 0.5rem;
}
.ui.items > .item .extra:after {
    display: block;
    content: ' ';
    height: 0px;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
/*******************************
          Responsive
*******************************/
/* Default Image Width */
.ui.items > .item > .image:not(.ui) {
    width: 175px;
}
/* Tablet Only */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ui.items > .item {
        margin: 1em 0em;
    }
    .ui.items > .item > .image:not(.ui) {
        width: 150px;
    }
    .ui.items > .item > .image + .content {
        display: block;
        padding: 0em 0em 0em 1em;
    }
}
/* Mobile Only */
@media only screen and (max-width: 767px) {
    .ui.items:not(.unstackable) > .item {
        flex-direction: column;
        margin: 2em 0em;
    }
    .ui.items:not(.unstackable) > .item > .image {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .ui.items:not(.unstackable) > .item > .image,
    .ui.items:not(.unstackable) > .item > .image > img {
        max-width: 100% !important;
        width: auto !important;
        max-height: 250px !important;
    }
    .ui.items:not(.unstackable) > .item > .image + .content {
        display: block;
        padding: 1.5em 0em 0em;
    }
}
/*******************************
           Variations
*******************************/
/*-------------------
       Aligned
--------------------*/
.ui.items > .item > .image + [class*="top aligned"].content {
    align-self: flex-start;
}
.ui.items > .item > .image + [class*="middle aligned"].content {
    align-self: center;
}
.ui.items > .item > .image + [class*="bottom aligned"].content {
    align-self: flex-end;
}
/*--------------
     Relaxed
---------------*/
.ui.relaxed.items > .item {
    margin: 1.5em 0em;
}
.ui[class*="very relaxed"].items > .item {
    margin: 2em 0em;
}
/*-------------------
      Divided
--------------------*/
.ui.divided.items > .item {
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    margin: 0em;
    padding: 1em 0em;
}
.ui.divided.items > .item:first-child {
    border-top: none;
    margin-top: 0em !important;
    padding-top: 0em !important;
}
.ui.divided.items > .item:last-child {
    margin-bottom: 0em !important;
    padding-bottom: 0em !important;
}
/* Relaxed Divided */
.ui.relaxed.divided.items > .item {
    margin: 0em;
    padding: 1.5em 0em;
}
.ui[class*="very relaxed"].divided.items > .item {
    margin: 0em;
    padding: 2em 0em;
}
/*-------------------
        Link
--------------------*/
.ui.items a.item:hover,
.ui.link.items > .item:hover {
    cursor: pointer;
}
.ui.items a.item:hover .content .header,
.ui.link.items > .item:hover .content .header {
    color: #d94400;
}
/*--------------
      Size
---------------*/
.ui.items > .item {
    font-size: 1em;
}
/*---------------
   Unstackable
----------------*/
@media only screen and (max-width: 767px) {
    .ui.unstackable.items > .item > .image,
    .ui.unstackable.items > .item > .image > img {
        width: 125px !important;
    }
}

/*******************************
         Theme Overrides
*******************************/
/**
 * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 *
 */
.ui.items > .item.application-list-item {
    margin-bottom: 25px;
    padding: 8px 11px;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-color: rgba(34, 36, 38, 0.15);
    border-radius: 3px;
}
.ui.items > .item.application-list-item:hover {
    cursor: pointer;
    border-color: rgba(34, 36, 38, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
.ui.items > .item.application-list-item:hover .app-avatar.bg-image .initials {
    text-shadow: 1px 1px 3px #993000;
}
.ui.items > .item.application-list-item .content {
    flex: 0 1 auto;
}
.ui.items > .item.application-list-item .content:hover {
    color: rgba(0, 0, 0, 0.85);
}
.ui.items > .item.application-list-item .content a.header:hover {
    color: rgba(0, 0, 0, 0.85);
}
.ui.items > .item.application-list-item .icon-container {
    margin: auto 0;
}
.ui.items > .item.application-list-item .icon-container .ui.mini.image {
    width: 48px;
}
.ui.items > .item.application-list-item .text-content-container {
    margin-top: 5px;
    margin-left: 5px;
}
.ui.items > .item.application-list-item .text-content-container.app-text {
    margin-top: 0;
    display: flex;
    min-height: 65px;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}
.ui.items > .item.application-list-item .text-content-container .header.app-header {
    display: flex;
    align-items: center;
}
.ui.items > .item.application-list-item .text-content-container .item-header {
    line-height: initial;
    color: rgba(0, 0, 0, 0.85);
    float: left;
    max-width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui.items > .item.application-list-item .text-content-container .item-description {
    color: rgba(0, 0, 0, 0.6);
    margin-top: 0;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 15px;
}
.ui.items > .item.application-list-item .text-content-container .item-description.app-description {
    margin: 2px 0;
}
.ui.items > .item.application-list-item .text-content-container .tag {
    margin: 0;
    font-size: 0.8em;
}
.ui.items > .item.application-list-item .text-content-container .favourite-icon {
    margin-left: 5px;
}
.ui.items > .item.application-list-item .text-content-container .favourite-icon.favoured {
    color: #FFB70A;
}
.hint-description {
    color: rgba(0, 0, 0, 0.6) !important;
    margin-top: -0.5rem 0 !important;
}

/*******************************
         Theme Overrides
*******************************/
/*******************************
      Statistic Overrides
*******************************/
/* Modules */
/*!
 * # Semantic UI - Accordion
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/*******************************
           Accordion
*******************************/
/* Title */
/* Icon */
/* Child Accordion */
/* Content */
/*-------------------
       Coupling
--------------------*/
/*-------------------
       States
--------------------*/
/*-------------------
      Variations
--------------------*/
/* Styled */
/* Content */
/* Child Content */
/* Styled Title */
/* Styled Title States */
/* Styled Child Title States */
/* Inverted */
/*******************************
      Accordion Variables
*******************************/
/*******************************
      Accordion Variables
*******************************/
/*******************************
            Accordion
*******************************/
.ui.accordion,
.ui.accordion .accordion {
    max-width: 100%;
}
.ui.accordion .accordion {
    margin: 1em 0em 0em;
    padding: 0em;
}
/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
    cursor: pointer;
}
/* Default Styling */
.ui.accordion .title:not(.ui) {
    padding: 0.5em 0em;
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
}
/* Content */
.ui.accordion .title ~ .content,
.ui.accordion .accordion .title ~ .content {
    display: none;
}
/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
    margin: '';
    padding: 0.5em 0em 1em;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
    padding-bottom: 0em;
}
/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
    display: inline-block;
    float: none;
    opacity: 1;
    width: 1.25em;
    height: 1em;
    margin: 0em 0.25rem 0em 0rem;
    padding: 0em;
    font-size: 1em;
    transition: transform 0.1s ease, opacity 0.1s ease;
    vertical-align: baseline;
    transform: none;
}
/*--------------
    Coupling
---------------*/
/* Menu */
.ui.accordion.menu .item .title {
    display: block;
    padding: 0em;
}
.ui.accordion.menu .item .title > .dropdown.icon {
    float: right;
    margin: 0.21425em 0em 0em 1em;
    transform: rotate(180deg);
}
/* Header */
.ui.accordion .ui.header .dropdown.icon {
    font-size: 1em;
    margin: 0em 0.25rem 0em 0rem;
}
/*******************************
            States
*******************************/
.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
    transform: rotate(90deg);
}
.ui.accordion.menu .item .active.title > .dropdown.icon {
    transform: rotate(90deg);
}
/*******************************
            Types
*******************************/
/*--------------
     Styled
---------------*/
.ui.styled.accordion {
    width: 600px;
}
.ui.styled.accordion,
.ui.styled.accordion .accordion {
    border-radius: 3px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15);
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
    margin: 0em;
    padding: 0.75em 1em;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 400;
    border-top: 1px solid rgba(34, 36, 38, 0.15);
    transition: background 0.1s ease, color 0.1s ease;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
    border-top: none;
}
/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
    margin: 0em;
    padding: 0.5em 1em 1.5em;
}
.ui.styled.accordion .accordion .content {
    padding: 0em;
    padding: 0.5em 1em 1.5em;
}
/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
    background: transparent;
    color: rgba(0, 0, 0, 0.87);
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
    background: transparent;
    color: rgba(0, 0, 0, 0.87);
}
/* Active */
.ui.styled.accordion .active.title {
    background: transparent;
    color: rgba(0, 0, 0, 0.95);
}
.ui.styled.accordion .accordion .active.title {
    background: transparent;
    color: rgba(0, 0, 0, 0.95);
}
/*******************************
            States
*******************************/
/*--------------
     Active
---------------*/
.ui.accordion .active.content,
.ui.accordion .accordion .active.content {
    display: block;
}

/* Dimmer Content */
.ui.dimmer > .content {
    user-select: text;
    color: #FFFFFF;
}

/*--------------
    Aligned
---------------*/
.ui.dimmer > .top.aligned.content > * {
    vertical-align: top;
}
.ui.dimmer > .bottom.aligned.content > * {
    vertical-align: bottom;
}
/*--------------
    Inverted
---------------*/
.ui.inverted.dimmer {
    background-color: rgba(255, 255, 255, 0.85);
}
.ui.inverted.dimmer > .content > * {
    color: #FFFFFF;
}

/*******************************
         Theme Overrides
*******************************/
/*******************************
         Nag Overrides
*******************************/
/*!
 * # Semantic UI - Popup
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
/*******************************
            Theme
*******************************/
/**
 * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. 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.
 */
/*******************************
             Popup
*******************************/
/*-------------------
       Element
--------------------*/
/*-------------------
       Parts
--------------------*/
/* Placement */
/* Header */
/* Content Border */
/* Arrow */
/* Arrow color by position */
/*-------------------
       Types
--------------------*/
/* Tooltip */
/* Inverted */
/* Arrow */
/*-------------------
       Coupling
--------------------*/
/* Grid Inside Popup */
/* (padding * @medium) */
/*-------------------
       States
--------------------*/
/*-------------------
       Variations
--------------------*/
/* Wide */
/* Inverted */
/* Arrow color by position */
/*******************************
        Popup Variables
*******************************/
/*-----------------------------
        Compact Tooltip
------------------------------*/
/*-------------------------------
          Data Table
--------------------------------*/
/*-------------------------------
        CORS Details Popup
--------------------------------*/
/*******************************
        Popup Variables
*******************************/
/*-----------------------------
        Compact Tooltip
------------------------------*/
/*-------------------------------
          Data Table
--------------------------------*/
/*-------------------------------
        CORS Details Popup
--------------------------------*/
/*******************************
            Popup
*******************************/
.ui.popup {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    /* Fixes content being squished when inline (moz only) */
    min-width: min-content;
    z-index: 1900;
    border: 1px solid #D4D4D5;
    line-height: 1.4285em;
    max-width: 250px;
    background: #FFFFFF;
    padding: 0.833em 1em;
    font-weight: normal;
    font-style: normal;
    color: rgba(0, 0, 0, 0.87);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
}
.ui.popup > .header {
    padding: 0em;
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 1.14285714em;
    line-height: 1.2;
    font-weight: 400;
}
.ui.popup > .header + .content {
    padding-top: 0.5em;
}
.ui.popup:before {
    position: absolute;
    content: '';
    width: 0.71428571em;
    height: 0.71428571em;
    background: #FFFFFF;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 1px 1px 0px 0px #bababc;
}

/*--------------
      Info
---------------*/
.ui.search > .results .result .image + .content {
    margin: 0em 6em 0em 0em;
}
.ui.search > .results .result .title {
    margin: -0.14285714em 0em 0em;
    font-family: "''", -apple-system, BlinkMacSystemFont, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif, "font-awesome", 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.85);
}
.ui.search > .results .result .description {
    margin-top: 0;
    font-size: 0.92857143em;
    color: rgba(0, 0, 0, 0.4);
}
.ui.search > .results .result .price {
    float: right;
    color: #7cd25a;
}

/*******************************
             Types
*******************************/
.ui.cube.shape .side {
    min-width: 15em;
    height: 15em;
    padding: 2em;
    background-color: #E6E6E6;
    color: rgba(0, 0, 0, 0.87);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}
.ui.cube.shape .side > .content {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
    user-select: text;
}
.ui.cube.shape .side > .content > div {
    display: table-cell;
    vertical-align: middle;
    font-size: 2em;
}

.layout.dashboard-layout .layout-content .desktop-container .content-wrapper {
    width: 100%;
}

.login-portal.layout .center-segment > .ui.container > .ui.segment .social-login.social-dimmer .content p,
.login-portal.layout .center-segment > .ui.container > .ui.segment .external-login.social-dimmer .content p,
.login-portal.layout .center-segment > .ui.container > .ui.segment .social-login .external-login-dimmer .content p,
.login-portal.layout .center-segment > .ui.container > .ui.segment .external-login .external-login-dimmer .content p {
    font-size: 12px;
    padding: 1.5em;
    color: #474747;
}

.developer-portal.page.overview-page .quick-links .ui.card .content {
    border-top: none;
    padding: 1em 2em 1.5em 2em;
}
.developer-portal.page.overview-page .quick-links .ui.card .content .header {
    font-size: 1.1em;
}
.developer-portal.page.overview-page .quick-links .ui.card .content .description {
    font-size: 0.9em;
}

.add-authenticator-modal .authenticator-container .authenticator.add-custom-authenticator-card .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
}
.authenticator-item-wrapper {
    margin-right: 10px;
    margin-bottom: 10px;
}
.authenticator-item-wrapper .authenticator-card {
    font-size: 0.9em;
}
.authenticator-item-wrapper .authenticator-card .content {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.authenticator-item-wrapper .authenticator-card .content .close-button {
    box-shadow: -1px 1px 1px 0px #00000017;
    border: none;
}
.authenticator-item-wrapper .authenticator-card .content .close-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.text-center {
    text-align: center !important;
}

/*--------------
     Active
---------------*/
.ui.active.button {
    background-color: #C0C1C2;
    background-image: none;
    box-shadow: 0px 0px 0px 1px transparent inset;
    color: rgba(0, 0, 0, 0.95);
}
.ui.active.button:hover {
    background-color: #C0C1C2;
    background-image: none;
    color: rgba(0, 0, 0, 0.95);
}
.ui.active.button:active {
    background-color: #C0C1C2;
    background-image: none;
}
/*--------------
    Loading
---------------*/
/* Specificity hack */
.ui.loading.loading.loading.loading.loading.loading.button {
    position: relative;
    cursor: default;
    text-shadow: none !important;
    color: transparent !important;
    opacity: 1;
    pointer-events: auto;
    transition: all 0s linear, opacity 0.1s ease;
}
.ui.loading.button:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -0.64285714em 0em 0em -0.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    border-radius: 500rem;
    border: 0.2em solid rgba(0, 0, 0, 0.15);
}
.ui.loading.button:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -0.64285714em 0em 0em -0.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    animation: button-spin 0.6s linear;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #FFFFFF transparent transparent;
    border-style: solid;
    border-width: 0.2em;
    box-shadow: 0px 0px 0px 1px transparent;
}
.ui.labeled.icon.loading.button .icon {
    background-color: transparent;
    box-shadow: none;
}
@keyframes button-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.ui.basic.loading.button:not(.inverted):before {
    border-color: rgba(0, 0, 0, 0.1);
}
.ui.basic.loading.button:not(.inverted):after {
    border-top-color: #767676;
}

/*--------------
      Label
---------------*/
/* Dropdown Menu */
.ui.label.dropdown .menu {
    min-width: 100%;
}