.app-bar-toolbar .app-logo {
    text-indent: -9999px;
    width: 100px;
    height: auto;
    padding: 0;
    margin-bottom: 1px !important;
    background-image: url('../images/MVSSA.jpg');
    background-color: #FFFFFF;
    background-size: auto 43px;
    background-position: center center;
}

.text-white {
    color: #ffffff !important;
}

#app-bar-toolbar span.app-logo {
    position: absolute;
    left: 56px;
    top: 1px;
    margin-bottom: 1px !important;
    height: 55px;
}


/*Fix form sidebar float when Font awesome icons used*/
div.ui-panel {
    left: 0px;
}
/* Override Bootstrap's btn-primary styles */
/*.btn-primary {
    background-color: #3b5999 !important;
    border-color: #3b5999 !important;*/ /* Set border color if needed */
/*padding: 5% !important;*/ /* primarily top and bottom */
/*width: auto;*/ /* fill the available space */
/*}*/

/* Apply hover effect */
/*.btn-primary:hover {
        background-color: #5872A8 !important;*/ /* Change to the desired hover color */
/*border-color: #5872A8 !important;*/ /* Set border color for hover if needed */
/*}*/

.btn-login {
    background-color: #808080 !important;
    border-color: #808080 !important; /* Set border color if needed */
    padding: 2% !important; /* primarily top and bottom */
    color: #FFF !important;
    width: auto; /* fill the available space */
}

    .btn-login:hover {
        background-color: #252525 !important; /* Change to the desired hover color */
        border-color: #252525 !important; /* Set border color for hover if needed */
    }

span.app-collapsible-toggle-text {
    color: #252525 !important;
    font-weight: 600 !important;
}

.table-full-width {
    width: 100% !important;
}

.text-centered {
    vertical-align: central !important;
    text-align: center !important;
}

.equal-width {
    width: 14.28% !important;
}

div.two-level div.production-menu {
    background-image: url(../_Shared/Page_Categories.png);
    background-repeat: no-repeat;
    background-position: 110% top;
}
/* menu Styling */
ul.app-listview.ui-listview > li > a.app-keep-open.app-btn-icon-transparent.ui-btn[class*="app-depth"] {
    color: #252525 !important;
    background-color: #e7e7e7 !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    margin-top: 20px !important;
}
/* menu Styling */
.ui-listview > .ui-li-static {
    color: #252525 !important;
    background-color: #e7e7e7 !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    margin-top: 20px !important;
}

.clear-both {
    clear: left !important;
    clear: right !important;
    margin-bottom: 1px !important;
}

/*  */
.pdt100 {
    padding-top: 100px !important;
}

.mgt20 {
    margin-top: 20px !important;
}

.mgt50 {
    margin-top: 50px !important;
}

.mgt100 {
    margin-top: 100px !important;
}

.mgt200 {
    margin-top: 200px !important;
}

.mgb20 {
    margin-bottom: 20px !important;
}

.mgb200 {
    margin-bottom: 200px !important;
}

.jumbotron-login {
    background-image: url('../images/fan-3645379_1280.jpg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    height: 70vh; /* Set the height to 100% of the viewport height */
    padding-top: 0 !important;
    margin-top: -30px !important; /* Remove any default margin */
    z-index: -100 !important;
}

.container-login {
    background-color: rgba(30, 30, 30, 0.75); /* Changed to rgba for proper opacity handling */
    padding: 100px;
    height: 70vh;
    /*    margin-top: 50px;*/
}

.jumbotron-home {
    background-image: url('../images/pipes-4161383_1280.jpg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    height: 40vh; /* Set the height to 100% of the viewport height */
    padding-top: 0 !important;
    margin-top: -30px !important; /* Remove any default margin */
}

.container-home {
    background-color: rgba(30, 30, 30, 0.75); /* Changed to rgba for proper opacity handling */
    padding: 80px;
    height: 40vh;
    /*    margin-top: 50px;*/
}
/* Styles for larger screens */
.site-wrapper-inner {
    background-color: rgba(30, 30, 30, 0.75); /* Changed to rgba for proper opacity handling */
    padding: 100px;
    border-radius: 20px;
    margin-top: 100px;
}

.emphasized {
    font-weight: 600 !important;
}

.italisized {
    font-style: italic !important;
}

.narrow-text {
    letter-spacing: -0.06em; /* Adjust the value to condense more or less */
}

.slanted {
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

.slanted-content {
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    display: inline-block;
}

.workflow-start-container,
.workflow-continue-container,
.workflow-end-container {
    padding: 1px !important; /* border size */
    background-color: #b5b5b5; /* Border color */
    display: flex; /* Flexbox for better alignment */
    align-items: center; /* Vertically center the content */
    z-index: -100 !important;
    text-align: left !important;
}

.workflow-start,
.workflow-continue,
.workflow-end {
    background-color: #f5f5f5;
    margin-bottom: 0px;
    border-radius: 0px;
    z-index: 1 !important;
    padding-top: 20px;
    padding-bottom: 20px;
}

.workflow-end {
    text-align: left !important;
    padding-left: 20% !important;
}

.workflow-start,
.workflow-continue {
    text-align: left !important;
    padding-left: 15% !important;
}

.workflow-start-container, .workflow-start {
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    width: 100%;
}

.workflow-continue-container, .workflow-continue {
    clip-path: polygon(10% 50%, 0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    width: 100%;
}

.workflow-end-container, .workflow-end {
    clip-path: polygon(10% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    width: 100%;
}

/* Styles for smaller screens */
@media (max-width: 600px) {
    .jumbotron-login {
        height: 100vh;
    }

    .site-wrapper-inner {
        padding: 20px; /* Adjust padding for smaller screens */
        margin-top: 50px !important;
    }

    .pdt100 {
        padding-top: 20px !important;
    }

    .mgt20 {
        margin-top: 20px !important;
    }

    .mgt200 {
        margin-top: 50px !important;
    }

    .mgb20 {
        margin-bottom: 20px !important;
    }

    .mgb200 {
        margin-bottom: 50px !important;
    }

    .img-mobile {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 800px) {
    .site-wrapper-inner {
        padding: 50px !important;
    }

    .pdt100 {
        padding-top: 50px !important;
    }

    .mgt20 {
        margin-top: 20px !important;
    }

    .mgt200 {
        margin-top: 100px !important;
    }

    .mgb20 {
        margin-bottom: 20px !important;
    }

    .mgb200 {
        margin-bottom: 100px !important;
    }

    .img-mobile {
        width: 90%;
        height: auto !important;
        float: none !important;
        margin-bottom: 20px !important;
        margin-left: 10px !important;
    }
}


/**********************************************************************************************************************/

/* */
/*https://codeontime.com/blog/2016/01/conditional-styling-of-data-in-touch-ui_23*/

.conpro-mr-wf-revision > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.conpro-mr-wf-revision > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: inherit;
    color: #FF6A00 !important;
    font-weight: 500;
}

.conpro-mr-cancellation > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.conpro-mr-cancellation > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: inherit;
    color: #f00 !important;
    font-weight: 500;
}

/**********************************************************************************************************************/

/*  */

.conpro-po-revision > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.conpro-po-revision > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: inherit;
    color: #FF6A00 !important;
    font-weight: 500;
}

.conpro-po-cancellation > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.conpro-po-cancellation > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: inherit;
    color: #f00 !important;
    font-weight: 500;
}
/**********************************************************************************************************************/