/*menu side bar*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root{
    --color-default:#EE0033;
    --color-second:#0067ac;
    --color-white:#fff;
    --color-body:#e4e9f7;
    --color-light:#e0e0e0;
    --color-sidebar:#737373;
}

/*body{*/
/*    overflow: hidden !important;*/
/*    font-family: Roboto !important;*/
/*    font-size: 14px;*/
/*    line-height: 1.4;*/
/*    margin: 0!important;*/
/*}*/

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/03523cf578d69fa923226ff457b92d90.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/2a1b89d7506c26fb931b47bbc5d8c926.ttf) format("truetype");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/4f39c5796e60c9d8e7327a00e9a4442e.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/ad2445ca4e46908fbf7bb4e0fff71139.ttf) format("truetype");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/c38fab23fc1c36894f10dd8014479b53.ttf) format("truetype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/082b9e840d3a498e8a3c8119f3a7132a.ttf) format("truetype");
    font-weight: 200;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/0cea39826bd36bbfe33076c544e3a1af.ttf) format("truetype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/f3afeb2d078386350b6657727c8de98e.ttf) format("truetype");
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/13a29228654d5c5ec9c482a267efa4af.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Roboto;
    src: url(/static/appbuilder/fonts/17d0cac04a3f124945e14d55323a71d5.ttf) format("truetype");
    font-weight: 300;
    font-style: italic
}

.sso-sidebar{
    font-family: Roboto, sans-serif !important;
    min-height: 100vh;
    width: 78px;
    padding: 12px 16px;
    z-index: 1;
    background-color: var(--color-white);
    transition: all .5s ease;
    position: fixed;
    top:0;
    left: 0;
    border-radius: 0 30px 30px 0;
    margin-top: 64px;
}

.sso-sidebar.sso-open{
    width: 270px;
}

.sso-sidebar i{
    color:var(--color-sidebar);
    height: 60px;
    line-height: 60px;
    min-width: 50px;
    font-size: 25px;
    text-align: center;
}

.sso-sidebar .sso-nav-list{
    margin-top: 10px;
    height: 100%;
    padding-left: 0;
}

.sso-sidebar li{
    position: relative;
    margin:8px 0;
    list-style: none;
}

/*.sso-sidebar li .sso-tooltip{*/
/*    position: absolute;*/
/*    top:-20px;*/
/*    !*left:calc(100% + 15px);*!*/
/*    left:0;*/
/*    z-index: 3;*/
/*    background-color: black;*/
/*    color: white;*/
/*    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);*/
/*    padding: 6px 14px;*/
/*    font-size: 15px;*/
/*    font-weight: 400;*/
/*    border-radius: 5px;*/
/*    white-space: nowrap;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*}*/

/*.sso-sidebar li a:hover .sso-tooltip{*/
/*    opacity: 1;*/
/*    pointer-events: auto;*/
/*    transition: all 0.4s ease;*/
/*    top:50%;*/
/*    transform: translateY(-50%);*/
/*}*/

/*.sso-sidebar.sso-open li .sso-tooltip{*/
/*    display: none;*/
/*}*/

.sso-sidebar input{
    font-size: 15px;
    color: var(--color-white);
    font-weight: 400;
    outline: none;
    height: 35px;
    width: 35px;
    border:none;
    border-radius: 5px;
    background-color: var(--color-second);
    transition: all .5s ease;
}

.sso-sidebar input::placeholder{
    color:var(--color-light)
}

.sso-sidebar.sso-open input{
    width: 100%;
    padding: 0 20px 0 50px;
}

.sso-sidebar .bx-search{
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    font-size: 22px;
    background-color: var(--color-second);
    color: var(--color-white);
}

.sso-sidebar li a{
    display: flex;
    height: 100%;
    align-items: center;
    text-decoration: none;
    position: relative;
    transition: all .5s ease;
    z-index: 12;
    padding: 5px 0;
}

.sso-sidebar li a .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 2000;
    top: 6px;
    left:calc(100% + 10px);
    white-space: nowrap;
}

.sso-sidebar:not(.sso-open) li a:hover .tooltiptext {
    visibility: visible;
}

.sso-open .sso-ul-sub-menu {
    padding-left: 25px !important;
}

.sso-sidebar .sso-ul-sub-menu {
    padding-left: 0;
}

.sso-show-sidebar {
    position: absolute;
    top: 56px;
    right: -15px;
}

.sso-sidebar li a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    background-color: var(--color-white);
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
    transform-origin: left;
    z-index: -2;
}

.sso-sidebar li a:hover{
    background-color: #EE00331A;
    border-radius: 8px;
}

.sso-sidebar li a:hover::after{
    color: var(--color-default);
    background-color: #EE00331A;
}

.sso-sidebar li a .sso-link-name{
    color:var(--color-sidebar);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    /*pointer-events: auto;*/
    transition: all 0.4s ease;
    pointer-events: none;
    opacity: 0;
}

.sso-sidebar li a:hover .sso-link-name,
.sso-sidebar li a:hover .sso-link-menu,
.sso-sidebar li a:hover i{
    color: var(--color-default);
}

.sso-sidebar.sso-open li a .sso-link-name,
.sso-sidebar.sso-open li a .sso-link-menu,
.sso-sidebar.sso-open li a .sso-link-menu-bar{
    opacity: 1;
    pointer-events: auto;
}

.sso-sidebar.sso-open .sso-menu-bar{
    display: block;
}
.sso-sidebar.sso-open > .sso-menu-bar > a {
    display: flex !important;
}

.sso-open .sidebar-collapse  {
    padding-left: 10px!important;
}
.sso-open .icon-chevron-show {
    display: block !important;
}
.icon-chevron-show {
    display: none;
}
.sso-sidebar li .sso-link-menu-bar{
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    /*pointer-events: auto;*/
    transition: all 0.4s ease;
    pointer-events: none;
    padding-left: 15px;
}

.sso-sidebar li a .sso-link-menu{
    color:var(--color-white);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    /*pointer-events: auto;*/
    transition: all 0.4s ease;
    pointer-events: none;
    opacity: 0;
}

.sso-sidebar li i{
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    border-radius: 5px;
}

.sso-sidebar li.profile{
    position: fixed;
    height: 60px;
    width: 78px;
    left: 0;
    bottom:-8px;
    padding:10px 14px;
    overflow: hidden;
    transition: all .5s ease;
}

.sso-sidebar.sso-open li.profile{
    width: 250px;
}

.sso-sidebar .profile .profile_details{
    display: flex;
    align-items: center;
    flex-wrap:  nowrap;
}

.sso-sidebar li img{
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}

.sso-sidebar li.profile .name,
.sso-sidebar li.profile .designation{
    font-size: 15px;
    font-weight: 400;
    color:var(--color-white);
    white-space: nowrap;
}

.sso-sidebar li.profile .designation{
    font-size: 12px;
}

.sso-sidebar .profile #log_out{
    position: absolute;
    top:50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--color-second);
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.sso-sidebar.sso-open .profile #log_out{
    width: 50px;
    background: none;
}

.sso-home-section{
    position: relative;
    min-height: 100vh;
    top:0;
    left:78px;
    width: calc(100% - 78px);
    transition: all .5s ease;
}

.sso-home-section .text{
    display: inline-block;
    color:var(--color-default);
    font-size: 25px;
    font-weight: 500;
    margin: 18px;
}

.sso-sidebar.sso-open ~ .sso-home-section{
    left:270px;
    width: calc(100% - 270px);
}



.sso-collapse {
  transition: height 0.5s ease;
  height: 0;
  overflow: hidden;
}

.sso-collapse.show {
  height: auto;
    overflow: visible;
}


.font-weight-500 {
    font-weight: 500!important;
}
.p-l-0 {
    padding-left: 0!important;
}

/*navbar menu sso*/

.sso-main-header {
    position: sticky !important;
    top: 0px;
    z-index: 1001;
    background-color: white;
}

.sso-logo {
    height: 20px;
    width: 160px;
}


.sso-navbar-brand {
    width: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 18px!important;
    line-height: 19px!important;
}

.sso-navbar-brand:focus, .sso-navbar-brand:hover {
    text-decoration: none
}

.sso-navbar-brand > img {
    display: block
}

@media print {
    .sso-navbar {
        display: none
    }
}

@media (min-width: 768px) {
    .sso-navbar {
        border-radius: 4px
    }
}

@media screen and (max-width: 768px) {
    .sso_web_title_header {
        display: none;
    }
}

@media screen and (max-width: 425px) {
    .sso_web_title_header {
        display: none;
    }
    .sso-logo-title {
        display: none!important;
    }
    .sso-navbar-brand {
        width: 115px;
        padding: 0 10px!important;
    }
    .sso-logo {
        width: 100px;
    }
    .sso-container {
        padding: 0 5px!important;
    }
}

.sso-navbar li > a:focus {
    outline: 0
}

.sso-navbar {
    min-height: 64px !important;
    display: flex;
    align-items: center;
    font-family: Roboto, sans-serif !important;
    border: none;
    margin-bottom: 0 !important;
    width: 100%;
    justify-content: space-between !important;
    background-color: #FFFFFF;
    z-index: 1;
}

.sso-sidebar.sso-open .menu-item-href {
    padding-left: 10px !important;
}

.sso_web_title_header {
    font-weight: 700;
    font-size: 22px;
}

.sso-logo-title {
    margin-top: 2px!important;
    /*color: #dddddd!important;*/
    FONT-SIZE: 18px!important;
    display: inline-block;
    margin-left: 70px!important;
    color: black !important;
    text-align: unset!important;
}
.sso-left-header {
    display: flex;
    align-items: center;
}
.sso-right-header {
    display: flex;
    align-items: center;
}
.sso-btn-setting {
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    padding: 0.6rem;
    cursor: pointer;
    border-radius: 100%;
    border: none;
    position: relative;
    margin-right: 10px;
    color: #6f6c99;
    width: 36px;
    height: 36px;
}
.sso-noti-number {
    position: absolute;
    right: -7px;
    top: -10px;
    padding: 2px 5px;
    font-size: 10px;
    background-color: var(--color-default);
    color: white;
    border-radius: 6px;
}

.sso-btn-setting:hover {
    box-shadow: rgba(0, 0, 0, 0.05) 0 6px 10px 0, rgba(0, 0, 0, 0.1) 0 0 0 1px;
    color: #0a0d0e;
}

.sso-dropdown {
    position: absolute;
    min-width: 150px;
    box-shadow: rgba(0, 0, 0, 0.05) 0 6px 10px 0, rgba(0, 0, 0, 0.1) 0 0 0 1px;
    border-radius: 5px;
    margin-top: 0.3rem;
    background: white;
    transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
    transform: translateY(0.5rem);
    visibility: hidden;
    opacity: 0;
    top: 35px;
    right: 0;
}

.sso-dropdown a {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.8rem 1rem;
    color: black;
    text-decoration: none !important;
}

.sso-dropdown a:hover {
    background-color: var(--color-default);
    color: white;
    border-radius: 5px;
}

.sso-show {
    /*transform: translateY(0rem);*/
    /*visibility: visible;*/
    /*opacity: 1;*/
    transition: all 0.5s ease;
}
.sso-dropdown.sso-show {
    transform: translateY(0rem);
    visibility: visible;
    opacity: 1;
}

/*user manual*/
.sso-container {
    width: 100%;
    padding: 0 30px;
}
.sso-view-item {
    background-color: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 15px;
}
.sso-menu-header {
    color: #d81221;
    text-align: center;
    margin-top: 0;
}
.sso-menu-item {
    color: #d81221;
    font-weight: bold;
}
.sso-license {
    font-size: 12px;
    margin-left: 10px;
}
.sso-list-item {
    font-size: 16px;
}
.sso-view-download {
    width: 100%;
    background-color: #dfbc6e;
    padding: 12px 30px;
    display: flex;
    align-items: center;
    justify-content: end;
}
.sso-signature-symbol {
    text-align: center;
    line-height: 25px;
    margin-right: 20px;
}

.sso-signature-symbol span {
    background: #31a8c5;
    color: #FFF;
    border-radius: 100%;
    width: 36px;
    display: inline-block;
    line-height: 36px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

#sso-user-dropdown.sso-dropdown {
    top: 50px;
    right: 10px;
}
.sso-button-download {
    padding: 10px 15px;
    border-radius: 10px;
    border: 0;
    background-color: #d81221;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.sso-button-download:hover {
    background-color: #db3d49;
}
.sso-button-download i {
    margin-left: 3px;
}
.sso-or {
    margin: 0 15px;
}

#subapp-viewport {
    /*overflow-y: auto;*/
}

.sso-btn-footer {
    color: black;
    font-size: 26px;
    width: 50px;
    height: 50px;
    background-color: #DFBC6E;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.sso-btn-footer:hover{
    text-underline: none !important;
}

.sso-user-manual {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.sso-phone {
    position: fixed;
    bottom: 20px;
    left: 20px;
}
.sso-layout-table-manual {
    border: 1px solid black;
    border-radius: 5px;
    padding: 20px;
    background-color: #edf5ff;
    max-width: 700px;
    margin: 50px 0 30px 0;
}
.sso-title-table-manual {
    margin: 0 0 15px 20px;
    float: left;
}
.sso-table-manual {
    border-collapse: collapse;
    width: 100%;
}

.sso-table-manual td {
    text-align: left;
    padding: 8px;
}
.sso-table-manual th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    background-color: #bde3ff;
}
.sso-table-manual tr {
    background-color: #cedcfc;
}
.sso-table-manual tr:nth-child(even) {
    background-color: white !important;
}


.sso-collapse.collapse {
  display: none;
  transition: all 0.5s ease;
  /*visibility: hidden;*/
    opacity: 1;
}

.sso-collapse.collapsing {
  height: 0;
  transition: height 0.35s ease;
  display: block !important;
  position: relative;
  overflow: hidden;
    margin-top:-8px;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
#sso-dropdown a {text-align: left;white-space: nowrap;}

.sso-menu-item--active {
    display: none !important;
}

.sso-menu-item--active {
  background-color: var(--color-default) !important;
  border-radius: 8px !important;
    display: flex !important;
    padding: 5px 0 !important;
}

.sso-menu-item--active .sso-link-name, .sso-menu-item--active i {
    color: var(--color-white) !important;
}

.sso-menu-item--active[data-menu-level="0"] .sso-link-name {
  font-weight: 700 !important;
}

.sso-trans-rotate {
    transform: rotate(180deg);
}

#header_children > ul {width: 100%;overflow: hidden;border-bottom: 1px solid rgb(205, 205, 205);margin:0px 0px 0px 0px;list-style: none;padding:0px;}
#header_children > ul > li {float: left;}
#header_children > ul > li > a{display: block;line-height: 40px;padding: 0px 16px;color:black;text-decoration: none;}
#header_children > ul > li.subheader-active > a{border-bottom:2px solid rgb(205, 57, 43);color: rgb(205, 57, 43);}

.popup-fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.popup-fade.popup-in {
    opacity: 1;
}

.popup-modal-open{overflow:hidden}
.popup-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}
.popup-modal.popup-fade .popup-modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out,-o-transform .3s ease-out}
.popup-modal.popup-in .popup-modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
.popup-modal-open .popup-modal{overflow-x:hidden;overflow-y:auto}
.popup-modal-dialog{position:relative;margin:30px auto;width:80%;}
.popup-modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);outline:0}
.popup-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
.popup-modal-backdrop.popup-fade{filter:alpha(opacity=0);opacity:0}
.popup-modal-backdrop.popup-in{filter:alpha(opacity=50);opacity:.5}
.popup-modal-header{padding:15px;border-bottom:1px solid #e5e5e5}
.popup-modal-header .popup-close{margin-top:-2px}
.popup-modal-title{margin:0;line-height:1.42857143}
.popup-modal-body{position:relative;padding:15px}
.popup-modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}
.popup-modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}
.popup-modal-footer .btn-group .btn+.btn{margin-left:-1px}
.popup-modal-footer .btn-block+.btn-block{margin-left:0}
.popup-modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}