/* ========== North Panel CSS =============*/
.menu-bar {
    display: flex;
    width: 100%;
    height: 55px
}

.left-buttons-group {
    display: flex;
    width: 33%;
    align-items: center
}

.panel-group-header {
    background: #0d2c7e !important;
    height: 70px;
    width: 410px;
    display: table;
}

.left-buttons-group-container {
    display: flex;
    margin-left: 18%
}

.menu-bar-h2-container {
    width: 33%;
    height: inherit
}

.menu-bar-h2-container h2 {
    text-align: center;
    line-height: 1;
    font-weight: 400;
    font-size: clamp(0.625rem, 0.5469rem + 0.625vw, 1.5625rem);
}

.right-buttons-group-container {
    display: flex;
    width: 33%;
    height: inherit;
    align-items: center;
    justify-content: flex-end
}

.language-selector-buttons-container {
    display: flex;
    flex-direction: row;
    background-color: #0d2c7e
}

.welcome-span {
    margin-left: 2%;
    color: #6986d2;
    font-style: italic;
}

.username-span {
    color: white;
    font-weight: bold;
}

.button-flat {
    background-color: #0c2979 !important;
    color: white !important;
    height: 35px !important;
    width: 40px !important;
    border-color: transparent !important;
    margin-left: 2% !important;
    border-radius: 0 !important;
}

.button-flat:hover {
    background-color: #e9ecef !important;
    color: #153487 !important;
}

.button-flat:focus {
    box-shadow: none !important;
}

.button-flat-language-selector {
    background-color: #0c2979 !important;
    color: white !important;
    border-color: transparent !important;
    font-weight: 700;
    border-radius: 0 !important;
}

.button-flat-language-selected {
    background-color: #e9ecef !important;
    color: #153487 !important;
    border-color: transparent !important;
    font-weight: 700;
    border-radius: 0 !important;
}

.button-flat-language-selector:hover {
    background-color: #e9ecef !important;
    color: #153487 !important;
}

.button-flat-language-selector:focus {
    box-shadow: none !important;
}

.round-button {
    border-radius: 50% !important;
}

.ui-overlay-badge {
	margin-left: 2% !important;
}

@media (max-width: 1120px) {
    .menu-bar-h2-container h2 {
        display: none;
    }

    .right-buttons-group-container{
        width: 40%;
    }
}

/*===================== END ====================*/


/*===================== Side Panel CSS ===============*/

/* disable default west panel menu toggle */
.ui-layout-toggler-west-open {
    display: none !important;
}

.ui-layout-toggler-east-open {
    display: none !important;
}

body .ui-panelmenu h3.ui-panelmenu-header {
    background-color: #153487;
    color: white;
}

body .ui-panelmenu h3.ui-panelmenu-header.ui-state-active:hover {
    background-color: #9bb5ff;
    color: #153487;
}

body .ui-panelmenu h3.ui-panelmenu-header:hover {
    background-color: #9bb5ff;
    color: #153487;;
}

body .ui-panelmenu .ui-panelmenu-panel .ui-panelmenu-header.ui-state-active {
    background-color: #0c2979;
    color: white;
}

body .ui-panelmenu .ui-panelmenu-content {
    background-color: #163588;
}

body .ui-panelmenu .ui-panelmenu-content:hover {
    background-color:#163588 !important;
    color: white !important;
}

body .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link.ui-state-hover {
    background-color: #9bb5ff;
    color: #153487;
}

body .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link{
    border-bottom: 3px solid #0c2979 !important;
}

body .ui-panelmenu .ui-panelmenu-content {
    border: none !important;
    margin-left: 7%;
}

body .ui-panelmenu h3.ui-panelmenu-header {
    border: none !important;
    border-bottom: 3px solid #0c2979 !important;
}


/* side menu icons */
body .ui-panelmenu h3.ui-panelmenu-header .ui-icon.ui-icon-triangle-1-s:before {
    content: "\e90f";
}

body .ui-panelmenu h3.ui-panelmenu-header .ui-icon.ui-icon-triangle-1-e:before {
    content: "\e90d";
}

body .ui-panelmenu .ui-icon {
    color: white !important;
}

body .ui-panelmenu .ui-panelmenu-content .ui-menuitem-link {
    color: white;
}

.side-menu-dsh-h2 {
    color: #3b5dbc;
    font-style: italic;
    padding-left: 20%;
}

/* side menu icons end */


/*=============== END =========================================*/

/* buttons text style */
body .ui-button.ui-button-text-only .ui-button-text {
    padding: 0.1rem 1rem;
}


/* =============== Template layout panels style =============== */

#center-pnl {
    z-index: -1
}

#west-pnl {
    /* overflow: visible;
    z-index: 999 !important; */
    background-color: #163588;
    height: auto !important;
}

#north-pnl {
    background-color: #23439aeb;
    color: white;
}

#south-pnl{
    background-color: #DEECF5;
}

.footer-container {
    color: #284ca3;
    opacity: 0.9;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 25%;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .footer-container {
        width: 35%;
    }
}

/* home button from footer */
.home-link {
    color: #284ca3;
    text-decoration: none;
}

.simavi-txt{
    color: black;
}

/* ==================== End ======================================= */

.circle {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: relative;
    height: 15px;
    width: 15px;
}

.red {
    background-color: #c0392b;
    box-shadow: 0 0 5px 2px #c0392b;
}

.green {
    background-color: #2ecc71;
    box-shadow: 0 0 5px 2px #2ecc71;
}

.blue {
    background-color: #00b4ff;
    box-shadow: 0 0 5px 2px #00b4ff;
}

.dark-blue {
    background-color: rgba(0, 51, 255, 0.68);
    box-shadow: 0 0 5px 2px rgba(0, 51, 255, 0.68);
}

.yellow {
    background-color: #ffdd00;
    box-shadow: 0 0 5px 2px #ffdd00;
}

.custom-dialog.ui-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

.ui-treetable {
     margin-top: 40px
 }

.ui-treetable table {
    table-layout: fixed
}