body{
    box-sizing: border-box;
    margin: 0;
}
.logo{
    text-align: center;
}
.text-white {
    color: whitesmoke !important;
}
.border-green-2{
    border: 2px solid #1B8800;
}
.border-yellow-2{
    border: 2px solid #FDD05E;
}
.border-orange-2{
    border: 2px solid orange;
}
.border-blue-1{
    border: 1px solid #009AFF;
}
.border-blue-2{
    border: 2px solid #009AFF;
}
.border-white-2{
    border: 2px solid whitesmoke;
}
.color-blue{
    color:#009AFF ;
}
.color-white{
    color: whitesmoke !important;
}
.border-red-2{
    border: 2px solid #FF0303;
}
.task-icon {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    margin-left:10px;
    border-radius: 6px;
    background-color: #F3F3F3;
}
.task-icon img{
    width:70%;
    height:70%
}
.gap-20{
    gap: 20px;
}
.gap-10{
    gap: 10px;
}
.top-0{
    top: 0;
}
.right-0{
    right: 0;
}
.left-0{
    left: 0;
}
.bottum-0{
    bottom: 0;
}
.right-15{
    right: 15px !important;
}
.border-rad-100p{
    border-radius: 100%;
}
.font-8p{
    font-size: 8px;
}
.font-10p{
    font-size: 10px;
}
.font-11p{
    font-size: 11px;
}
.font-12p{
    font-size: 12px !important;
}
.font-14p {
    font-size: 14px;
}
.font-16p{
    font-size: 16px !important;
}
.font-18p{
    font-size: 18px;
}
.font-22p{
    font-size: 22px;
}
.font-25p{
    font-size: 25px !important;
}
.font-50p{
    font-size: 50px !important;
}
.padding-5p{
    padding: 5px;
}
.margin-r-5p{
    margin-right: 5px;
}
.margin-l-5p{
    margin-left: 5px;
}
.color-primary{
    color: #094B77;
}
.color-grey{
    color: grey;
}
.cursor-pointer {
    cursor: pointer;
}
.user-select-none{
    user-select: none;  /* Modern property to prevent text selection */
    -webkit-user-select: none;  /* Safari and older WebKit browsers */
    -moz-user-select: none;  /* Firefox */
    -ms-user-select: none;  /* Older IE and Edge */
}
.width-510{
    width: 510px;
}
.width-250{
    width: 250px;
}
.width-200{
    width: 200px;
}
.width-150{
    width: 150px;
}
.width-100{
    width: 100px;
}
.height-menu-button{
    height: 42px;
}
.box-shadow-black {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,0.5);
}
.testing-background-red{
    background-color: red;
}
.testing-background-yellow{
    background-color: yellow;
}
.testing-background-blue{
    background-color: blue;
}
.background-light-blue{
    background-color: #F8FAFD;
}
.backcolor-table-blue{
    background-color: #E2F2FA;
}
.menu-button{
    height: 42px !important;
    color: #094B77;
    background-color: #F8FAFD;
    opacity: 0.35;
    border-radius: 5px;
    padding:8px 0 8px 15px;
    cursor: pointer;
    border: 1px solid #094B77;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.backcolor-black{
    background-color: #343A40 !important;
}
.backcolor-primary{
    background-color: #094B77 !important;
}
.backcolor-lightblue{
    background-color: #E2F2FA;
}
.backcolor-secondary{
    background-color:#F8FAFD !important;
}
.backcolor-grey{
    background-color:lightgrey !important; ;
}
.backcolor-blue{
    background-color: #007BFF;
}
.backcolor-dark-grey{
    background-color: #A9A9A9 !important;
}
.backcolor-white{
    background-color: whitesmoke;
}
.full-height{
    height: 100%;
}
.border-lightgrey-1{
    border: 1px solid lightgrey;
}
.menu-button:hover {
    background-color: #094B77;
    opacity: 1;
    color: whitesmoke;
    scale: 1.05;
}
.menu-button>a:hover {
    text-decoration: none;
}
.menu-icon {
    width: 14px;
    height: 14px;
}
.item-containor{
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.menu-button:nth-child(1):hover>img {
    content: url("/images/icons/dashboard white.png");
}
.menu-button:nth-child(2):hover>img {
    content: url("/images/icons/activity white.png");
}
.menu-button:nth-child(3){
    z-index: 1;
}
.menu-button:nth-child(3):hover img {
    content: url("/images/icons/track and trace white.png");
}
.menu-button:nth-child(3):hover #ongoingWFTrackButton{
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.menu-button:nth-child(3):hover #ongoingWFTrackButton>div{
    background-color: rgba(9, 75, 119, 0.8);
    /*border: 1px solid whitesmoke;*/
}
#ongoingWFTrackButton div{
    width: 100%;
}
#ongoingWFTrackButton > div:hover{
    border: 1px solid whitesmoke;
}
.menu-button:nth-child(4):hover>img {
    content: url("/images/icons/documents white.png");
}
.menu-button:nth-child(5):hover img {
    content: url("/images/icons/active panels white.png");
}
.menu-button:nth-child(5){
    z-index: 1;
}
.menu-button:nth-child(5):hover .panelCategories{
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.menu-button:nth-child(5):hover .panelCategories>div{
    background-color: rgba(9, 75, 119, 0.8);
}
.panelCategories>div:hover{
    border: 1px solid whitesmoke;
}
.panelCategories div:hover .panelSubCategories {
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.panelCategories div:hover .panelSubCategories>div {
    margin-bottom: 5px;
    background-color: rgba(9, 75, 119, 0.8);
}
.panelSubCategories>div:hover{
    border: 1px solid whitesmoke;
}
/*.panelCategories>div:hover .panelSubCategories{*/
/*    display: flex;*/
/*    background-color: rgba(9, 75, 119, 0.5);*/
/*}*/
.panelSubCategories div:hover .panelReports{
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.panelReports>div:hover{
    border: 1px solid whitesmoke;
    color: whitesmoke;
}
.menu-button:nth-child(6):hover img {
    content: url("/images/icons/reports white.png");
}
.menu-button:nth-child(6){
    z-index: 1;
}
.menu-button:nth-child(6):hover .reportCategories{
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.menu-button:nth-child(6):hover .reportCategories>div{
    background-color: rgba(9, 75, 119, 0.8);
}
.reportCategories>div:hover{
    border: 1px solid whitesmoke;
}
.reportCategories div:hover .reportSubCategories {
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.reportCategories div:hover .reportSubCategories>div {
    margin-bottom: 5px;
    background-color: rgba(9, 75, 119, 0.8);
}
.reportSubCategories>div:hover{
    border: 1px solid whitesmoke;
}
/*.panelCategories>div:hover .panelSubCategories{*/
/*    display: flex;*/
/*    background-color: rgba(9, 75, 119, 0.5);*/
/*}*/
.reportSubCategories div:hover .reports{
    display: flex;
    background-color: rgba(9, 75, 119, 0.5);
}
.reports>div:hover{
    border: 1px solid whitesmoke;
    color: whitesmoke;
}
.menu-button:nth-child(7):hover>img {
    content: url("/images/icons/profile white.png");
}
.menu-button:nth-child(8):hover>img {
    content: url("/images/icons/support white.png");
}
.menu-button:nth-child(9):hover>img {
    content: url("/images/icons/admin tools white.png");
}
.menu-button:nth-child(10):hover>img {
    content: url("/images/icons/logout white.png");
}
.border-rad-5{
    border-radius: 5px;
}
.border-rad-8{
    border-radius: 8px !important;
}
.border-top-right-8{
    border-top-right-radius: 8px
}
.border-top-left-8{
    border-top-left-radius: 8px
}
.border-bottom-left-8{
    border-bottom-left-radius: 8px
}
.border-bottom-grey-1{
    border-bottom: 1px solid lightgrey;
}
.opacity-0{
    opacity: 0;
}
.m-top-10{
    margin-top: 10px;
}
.border-grey-1{
    border: 1px solid grey !important;
}
.border-primary-2{
    border: 1px solid #094B77 !important;
}
.border-light-blue{
    border: 1px solid #E2F2FA;
}
.border-black{
    border: 1px solid #343A40 !important;
}
.text-height {
    display: inline-block;
    vertical-align: middle;
}
.flex-gap-5{
    gap: 5px;
}
.width-100vw{
    width: 100vw;
}
.height-100vh{
    height: 100vh;
}
.width-100present{
    width: 100%;
}
.height-100present{
    height: 100%;
}
.width-75p{
    width: 75%;
}
.width-50present{
    width: 50%;
}
.width-25p{
    width: 25%;
}
.width-10vw{
    width: 10vw
}
.height-50present{
    height: 50%;
}
.width-40p{
    width: 40%;
}
.width-60p{
    width: 60%;
}
.height-50p{
    height: 50px;
}
.height-32p{
    height: 32px !important;
}
.button-grey{
    background-color:  #716d6d !important;
    border-color:#716d6d !important;
}
.button-black{
    background-color: black !important;
    border-color: black !important;
}
.button-primary{
    background-color: #094B77 !important;
    border-color: #094B77 !important;
}
.button-light-blue{
    background-color: #007BFF !important;
    border-color: #007BFF !important;
}
.disabled-button{
    opacity: 0.2;
}
#ongoingWFTrackButton{
    padding: 10px;
    width: 200px;
    top: 0; left: 100%;
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
}
.report-link-container{
    width: 100%;
    background-color: rgba(9, 75, 119, 0.8);
    margin-bottom: 5px;
    padding: 5px;
}
/*.panelReport-link{*/
/*    width: 100%;*/
/*    text-decoration: none;*/
/*    color: whitesmoke;*/
/*}*/





.panelCategories,.panelSubCategories,.panelReports,.reportCategories,.reportSubCategories,.reports{
    padding: 10px;
    width: 200px;
    top: 0; left: 100%;
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
}
.panelCategories>div{
    margin-bottom: 5px;
}
.panelCategories>div{
    margin-bottom: 5px;
}
.pagination-details{
    border-radius: 4px;
    border: 1px solid #094B77;
    margin-right: 5px;
}
.pagination-details>b{
    font-size: 10px;
    margin-right: 3px;
    margin-left: 5px;
}
.pagination-button{
    font-size: 10px !important;
    width: 46px !important;
    margin-right: 5px !important;
    background-color: #094B77 !important;
    border-color:#094B77 !important;
}
.pagination-go-button{
    font-size: 10px !important;
    background-color: #094B77 !important;
    border-color:#094B77 !important;
}
.pagination-page-select{
    border: 1px solid black;
    width: 40px;
    font-size: 90%;
    color: #094B77;
    border-radius: 4px;
    border: 1px solid #094B77;
    margin-right: 5px;
    outline: none;
}
.loading_panel {
    width: 200px;
    height: 200px;
    /*background-color: #ccc;*/
    position: absolute;
    z-index: 9000;
    opacity: 0.3;
    filter: alpha(opacity=50);
    top: 30%;
    left: 50%;
    background-image: url(../images/loading2.0.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 10%;
    z-index: 9999;
    /* width: 200px; */
    /* height: 200px; */
    position: fixed;
    /* top: 10%; */
    /* left: 45%; */
    display: none;
}
#logo{
    width: 8vh;
    height: auto;
    display: inline-block;
    margin: auto;
}
#logo-login{
    width: 100px;
}
#error-image {
    width: 320px;
}
#logoutSection{
    background-color: rgba(48, 161, 217, 0.14);
    height: 30px;
    bottom: -25px;
    right: 0;
    display: none;
}
table thead th{
    background-color: #E2F2FA !important;
}