body {
    font-family: 'Open Sans';
    position: relative;
    color: #333333;
    padding: 0;
    font-size: 16px;
    background-image: linear-gradient(to bottom, #ffffff, #fafafa, #f4f4f4, #efefef, #eaeaea);
}
* {
    box-sizing: border-box;
}
html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
}

h1 {
    font-family: "Open Sans";
    font-size: 40px;
    font-weight: bold;
}
h2 {
    font-family: "Open Sans";
    font-size: 30px;
    font-weight: normal;
}
h4 {
    font-size: 24px;
    font-family: "Open Sans";
    font-weight: bold;
}

p {
    font-size: 16px;
}
.welcomeTitle {
    font-family: 'Open Sans';
    font-size: 50px;
    font-weight: bold;
}

div.login-form {
    display: flex;
    align-itrems: center;
    width: 100%;
    justify-content: center;
}


select {
    height: 25px;
}

    select#PortalLanguage {
        width: 100px;
        margin-right: 10px;
        margin-top: 15px;
        background-color: white !important;
    }
    #wrapper {
        min-height: 85%;
        position: relative;
    }

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 15%; /* Height of the footer */
}

.nav.nav-pills {
    background-color: whitesmoke;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #333333;
    background-color: white;
    border-bottom: 5px solid #6eb4e4;
}
li.nav-item {
    min-width: 15em;
    text-align: center;
}

a.nav-link {
    font-family: "Open Sans";
    font-weight: bold;
    color: #333333;
}

a.nav-link.active {
    color: #333333;
}

.nav-link.active {
    border-bottom: 5px solid #6eb4e4;
}

.navbar {
    border-bottom: 1px solid gray;
}

.navbar-nav .nav-link {
    font-family: "Open Sans";
    font-weight: bold;
    color: #333333;
}

a.linkColor {
    color: #0067b1 !important;
    text-decoration: none;
}
.titleWithShortHorizontalLineLeft {
    font-family: "Open Sans";
    font-weight: bold;
    text-align: left;
    color: #0067b1;
    margin: 1em 0px;
}

.titleWithShortHorizontalLineRight {
    font-family: "Open Sans";
    font-weight: bold;
    text-align: right;
    color: #0067b1;
    margin: 1em 0px;
}

div.pageImageOverlay {
    position: absolute;
    width: 60%;
    height: 50vh;
    background-image: url("../Images/signIn.jpg");
    background-size: 100% 100%;
}

div.pageTitleOverlay,
div.pageTitleOverlaySecondLine,
div.pageTitleOverlayThirdLine {
    position: absolute;
    width: 60%;
    color: white;
    font-family: "Open Sans";
    font-weight: bold;
}

div.pageTitleOverlaySecondLine {
    margin-top: 1em;
}

div.pageTitleOverlayThirdLine {
    margin-top: 2em;
}
/* Form */
.form-control {
    height: 25px;
    padding: 0 0.75rem;
    border-radius: 0;
}

.form-horizontal {
    background-color: white;
    width: 80%;
    text-align: center;
    padding: 1em 0.5em;
    min-height: 300px;
    border: 1px solid #c1c7d0;
    margin-bottom: 0.5em;
}
.form-horizontal-account {
    background-color: white;
    width: 100%;
    text-align: center;
    padding: 1em 0;
    min-height: 100px;
    margin-bottom: 0.5em;
    border: 1px solid #c1c7d0;
}

.form-horizontal-account .form-row,
.form-horizontal .form-row {
    margin-right: 5px;
}

div.login-form-horizontal-control {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    justify-content: center;
    margin-top: 10em;
}

.form-horizontal-account .control-label,
.form-horizontal .control-label {
    padding-left: 4em;
    text-align: left;
}

div.form-horizontal-control {
    display: flex;
    align-itrems: center;
    position: relative;
    width: 100%;
    justify-content: center;
    margin-top: 5em;
}

.form-title h4 {
    color: #0067b1;
    font-family: "Open Sans";
    font-weight: bold;
    margin-bottom: 1em;
}

.form-row fieldset {
    border-top: 2px solid black;
    width: 100%;
}

.form-row {
    margin-bottom: -2px;
}

    .form-row legend {
        border: none;
        width: auto;
        text-align: center;
        padding: 0.2em 0.2em;
        font-weight: bold;
        margin: 0 auto;
        font-size: inherit;
    }

.field-validation-error {
    display: inline-block;
    float: left;
    font-weight: bold;
    color: #ff0000;
    text-align: left;
    font-size:11px;
}

.form-control[disabled], fieldset[disabled] .form-control {
    cursor: not-allowed;
}

.input-validation-error {
    border-bottom: 1px solid #ff0000;
    background-color: #ffeeee;
}

.input-password {
    position: relative;
    display: inline-block;
}

    .input-password a {
        position: absolute;
        right: 1.5em;
        top: 0.5em;
        color: black;
        cursor: pointer;
    }

        .input-password a:hover {
            text-decoration: none;
        }

input[type="email"],
input[type="password"],
input[type="text"],
select {
    background-color: #f2f2f2 !important;
    border-bottom: 1px solid black;
}

.dropdownStyle.disabled {
    background-color: #e9ecef !important;
    border-bottom: 1px solid black !important;
}

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
}

.field-validation-error,
.form-row .field-validation-error,
.row .field-validation-error {
    display: inline-block;
    float: left;
    font-weight: bold;
    color: #ff0000;
    text-align: left;
}

.form-row .input-validation-error {
    border-bottom: 1px solid #ff0000;
    background-color: #ffeeee;
}


/*.shadow {
    box-shadow: -20px 27px 60px 2px rgba(0,0,0,.25);
}
*/
textarea {
    background-color: #e1e1e1;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid black;
    outline: none;
}
/* hide the "No File Chosen"
input[type="file"] {
    color: transparent;
}*/
input[type="file"]::file-selector-button {
    background-color: #e3e3e3;
    border: none;
    padding: 0.5rem;
    
}
input[type='radio'] {
    accent-color: black;
}

    /* color */
.bgcolor-primary {
    background: #0067b1;
    color: #ffffff;
    font-weight: bold;
    border: none;
}

.bgcolor-secondary {
    background: #ffffff;
    color: #333333;
    font-weight: bold;
    border: 1px solid #c1c7d0;
}

/* table */
.table {
    margin-bottom: 2rem;
    text-align: center;

}
.table td, .table th {
    padding: 0.35rem;
}
.table th {
    font-family: "Open Sans";
    font-weight: bold;
    background-color: #e3e3e3;
}
/* button */

.image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 5px 5px;
    border: none;
    cursor: pointer;
}

.image-button img {
    margin-right: 3px;
    width: 25px;
}
.button-content,
.button-content > a {
    display: inline-flex;
    align-items: center;
    border: none;
    margin-inline: 0 5px;
    padding: 4px 4px;
}

.buttonNoIcon-content,
.buttonNoIcon-content > a {
    align-items: center;
    border: none;
    margin-inline: 0 5px;
    padding: 4px 4px;
}

.button-content > span {
    margin-left: 3px;
}

.buttonNoIcon {
    text-align: center;
    /*  width: 100%;*/
    /*    border: none;*/
    min-width: 8em;
    padding: 4px 4px;
}

.disabledButton {
    opacity: 0.4;
    cursor: default !important;
}

.buttonNoIconWidthAuto {
    text-align: center;
    width: 100%;
    padding: 4px 4px;
}

.btn-login-with-google {
    transition: background-color .3s, box-shadow .3s;
    padding: .3em .3em .3em .3em;
    /*    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);*/
    color: black;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: .4em .4em;
    width: 100%;
    border: 1px solid #c1c7d0;
    font-weight: bold;
}

.btn-login-with-ms {
    transition: background-color .3s, box-shadow .3s;
    padding: .3em .3em .3em 1.3em;
    /*   box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);*/
    color: black;
    background-image: url(../Images/ms-logo.png);
    background-repeat: no-repeat;
    background-position: .4em .4em;
    width: 100%;
    border: 1px solid #c1c7d0;
    font-weight: bold;
}

    .btn-login-with-ms > span,
    .btn-login-with-google > span {
        margin-left: 8px;
        font-weight: bold;
    }

#showHide,
#showHideConfirmPassword,
#showHideResetConfirmPassword,
#showHideChangeConfirmPassword {
    margin-top: -3px;
    font-style: normal;
}

.submitCellulosic {
    margin-bottom:20px;
}
/* timeline */
.timeline {
    list-style: none;
    padding: 5px 12px 0 2px;
    position: relative;
    font-family: "Open Sans";
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 6px;
        background-color: #333333;
        margin-left: 0.75em;
    }

    .timeline > li {
        position: relative;
        height: 3.5em;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            padding: 10px;
            position: relative;
            margin-left: 2em;
            font-weight: normal;
            color: black;
        }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 25px;
            height: 25px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 10px;
          
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
           
        }

.timeline-badge.info {
    background-color: white !important;
    border: 3px solid gray;
}

.timeline-summary {
    margin-left: 2.5em;
    font-family: "Open Sans";
    color: red;
}

/* Badge */

.badge {
    background-color: #ff0000;
    margin-left: 2px;
}
.badge-pill {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
/* Modal */
.modal-header {
    background-color: #e3e3e3;
    padding: 4px 0;
    text-align: center;
    display: inline;
    font-family: "Open Sans";
    font-weight: bold;
    border-radius: 0;
}

    .modal-header .close {
        margin-right: auto;
    }

.modal-title {
    font-family: "Open Sans";
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
}

.modal-body {
    text-align: left;
    padding: 0.25rem 1rem 1rem 1rem;
}
.modal-content {
    font-size:inherit;
    border-radius: 0;
    border: none;
}
.modal-footer {
    padding: 10px 20px 10px;
    border-top: none;
}

.modal-footer > button,
.modal-footer a > button {
    font-family: 'Open Sans';
    padding: 0.5rem 0;
}

#sds2PluginModal .modal-body ul > li,
#teklaPluginModal .modal-body ul > li {
    padding-bottom: 8px;
}
#helpOptionModal {
    overflow-y: hidden;
}

#tabSubMyAccount {
    border: none;
    margin-top: 1em;
    font-family: 'Open Sans';
    min-height:65vh;
}

    #tabSubMyAccount > ul {
        background-color: white;
        padding: 0;
        border: none;
        border-bottom: 1px solid gray;
    }


/* carousel */
.multi-item-carousel {
    margin-top: 2em;
}

    .multi-item-carousel .carousel-inner .carousel-item {
        margin-right: inherit;
    }


       

    .multi-item-carousel .carousel-inner .carousel-item-next,
    .multi-item-carousel .carousel-inner .carousel-item-prev {
        position: relative;
        transform: translate3d(0,0,0);
    }

        .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            visibility: visible;
        }

   

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
    width: 2%;
    opacity: 1;
}

.carousel-control-home-prev {
        margin-left: -8em;
    }

.carousel-control-home-next {
    margin-right: -8em;
}
.carousel-indicators {
    position: relative !important;
    bottom: -5% !important;
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
   
    text-decoration: none;
    outline: 0;
    opacity: 0.9;
}

.carousel-indicators > li {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background-color: #fff;
    background-color: rgba(70,70,70,.25);
}

.carousel-indicators > li.active {
    background-color: #444;
    z-index: 10;
}

/*.carousel-indicators > li:nth-of-type(4n+2),
        .carousel-indicators > li:nth-of-type(4n+3),
        .carousel-indicators > li:nth-of-type(4n+4) {
             margin-left: -15px;
  position: relative;
  z-index: -1;
             
        }
        .carousel-indicators > li.active:nth-of-type(4n+2),
        .carousel-indicators > li.active:nth-of-type(4n+3),
        .carousel-indicators > li.active:nth-of-type(4n+4) {
            margin-left: -16px;
          
        }*/

/* Video */
.videoExplanation {
    width: 90%;
    text-align: left;
    cursor: pointer;
}

div.videoThumbnail a span,
div.learningVideoThumbnail a span {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("../Images/Video Play Button.png") no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.videoTitle {
    font-family: "Open Sans";
    font-weight: bold;
}
div.videoThumbnail {
    position: relative;
}

div.learningVideoThumbnail {
    position: relative;
    margin-left: 1.2em;
}

div.learningVideoThumbnail a img,
div.videoThumbnail a img {
    width: 100%;
}


.breadcrumb {
    background-color: white !important;
    padding: 0.5rem 2.6rem;
    list-style: none;
}
.breadcrumb-item.active {
    color: #333333;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/\00a0";
    width: 0;
    height: 0;
    padding-right: 25px;
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0
}
.popover {
    font-family: inherit;
    font-size: inherit;
    left:-60px;

}
.popover-header {
    font-family: "Open Sans";
    font-weight: bold;
    text-align: center;
    background-color: #e3e3e3;
}
.popover-body {
    text-align: left;
}


/*.customBoxShadow {
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.25);
}*/

div.UnregisterAccount {
    cursor: pointer;
    width: fit-content;
    padding: 4px 0px;
}
div.UnregisterAccount:hover {
    background-color: #e8eff7;

}

/* Timeline - Project Tracking */

.time-line-box {
    width: 100%;
}

.time-line-box .timeline {
    list-style-type: none;
    display: flex;
    padding: 0;
    text-align: center;
}

.time-line-box .timestamp {
    margin: auto;
    margin-bottom: 5px;
    padding: 0px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-line-box .receivedDate,
.time-line-box .estPickDate,
.time-line-box .estDeliveryDate,
.time-line-box .statusTBD,
.time-line-box .statusOnHold,
.time-line-box .statusQuery,
.time-line-box .statusCancelled,
.time-line-box .statusCompleted,
.time-line-box .receivedDateCompleted,
.time-line-box .estPickDateCompleted,
.time-line-box .estDeliveryDateCompleted,
.time-line-box .empty-estDeliveryDateCompleted,
.time-line-box .statusInhand {
    padding: 0px 10px;
    display: flex;
    justify-content: center;
    border-top: 3px solid darkgray;
    position: relative;
    transition: all 200ms ease-in;
}

.time-line-box .receivedDate span,
.time-line-box .estPickDate span,
.time-line-box .estDeliveryDate span,
.time-line-box .statusTBD span,
.time-line-box .statusOnHold span,
.time-line-box .statusQuery span,
.time-line-box .statusCancelled span,
.time-line-box .statusCompleted span,
.time-line-box .receivedDateCompleted span,
.time-line-box .estPickDateCompleted span,
.time-line-box .estDeliveryDateCompleted span,
.time-line-box .empty-estDeliveryDateCompleted span,
.time-line-box .statusInhand span {
    padding-top: 8px;
}

.time-line-box .receivedDate span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #9AD055;
    border-radius: 12px;
    border: 2px solid #9AD055;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}

.time-line-box .estPickDate span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #FE9865;
    border-radius: 12px;
    border: 2px solid #FE9865;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}

.time-line-box .estDeliveryDate span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #F73E36;
    border-radius: 12px;
    border: 2px solid #F73E36;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}
.time-line-box .empty-estDeliveryDateCompleted span:before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}

.time-line-box .statusTBD span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #4CADF9;
    border-radius: 12px;
    border: 2px solid #4CADF9;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}

.time-line-box .statusInhand span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #AA5AF1;
    border-radius: 12px;
    border: 2px solid #AA5AF1;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}
    .time-line-box .statusOnHold span:before {
        content: '';
        width: 12px;
        height: 12px;
        background-color: #934CF9;
        border-radius: 12px;
        border: 2px solid #934CF9;
        position: absolute;
        left: 50%;
        top: 0%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        transition: all 200ms ease-in;
    }
    .time-line-box .statusQuery span:before {
        content: '';
        width: 12px;
        height: 12px;
        background-color: #F9C74C;
        border-radius: 12px;
        border: 2px solid #F9C74C;
        position: absolute;
        left: 50%;
        top: 0%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        transition: all 200ms ease-in;
    }
.time-line-box .statusCancelled span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #A7322C;
    border-radius: 12px;
    border: 2px solid #A7322C;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}
.time-line-box .estDeliveryDateCompleted span:before,
.time-line-box .estPickDateCompleted span:before,
.time-line-box .receivedDateCompleted span:before,
.time-line-box .statusCompleted span:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 12px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    top: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-in;
}

.swiper-container {
    width: 95%;
    margin: auto;
    overflow-y: auto;
}

.swiper-wrapper {
    display: inline-flex;
    flex-direction: row;
    overflow-y: auto;
    justify-content: center;
    margin-bottom: 3px;
    max-width: 100%;
    float:left;
}

.swiper-container::-webkit-scrollbar-track {
    background: #a8a8a8b6;
}

.swiper-container::-webkit-scrollbar {
    height: 6px;
}

.swiper-container::-webkit-scrollbar-thumb {
    background: #4F4F4F !important;
}

.swiper-slide {
    text-align: center;
    font-family: "Open Sans";
    width: 180px;
    height: 100%;
    position: relative;
}

.firstline-title {
    font-size: 3em;
}
.secondline-title {
    font-size: 1.5em;
}

.firetexLogo {
    width: 25%;
}

.swLogo {
    width: 40%;
}

.imgFde2PlugIn {
    width: 20%;
}

.pm-cellulosicDescription,
.pm-hydrocarbonDescription {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
.pm-Boder {
    border-right: 1px solid gray;
    border-bottom:none;
    margin-bottom: 1em;
}
.productLicenseButton {
    width: 80%;
}
.profileSettingChangePasswordButton {
    margin: 1rem 0px;
}
.modal-sm {
    max-width: 330px !important;
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        font-size: 0.875em;
    }
    html {
        font-size: 0.875em;
    }
    .firstline-title {
        font-size: 1.5em;
    }

    .secondline-title {
        font-size: 0.875em;
    }
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 20px;
    }
    .welcomeTitle {
        font-size:40px;
    }
    div.login-form-horizontal-control {
        margin-top: 6em;
    }

    h4 {
        font-size: 20px;
    }

    .firetexLogo {
        width: 60%;
    }
    .modal-sm {
        max-width: 100% !important;
    }
    .swLogo {
        width: 100%;
        margin-top: 0px;
    }

    .imgFde2PlugIn {
        width: 50%;
    }

    .portalPageHeaderImageRow {
        width: 100%;
    }
    .form-control {
        font-size: 0.875rem;
    }
    .carousel-control-next,
    .carousel-control-prev /*, .carousel-indicators */ {
        filter: invert(100%);
        width: 5%;
        opacity: 1;
    }

    .carousel-control-home-prev {
        margin-left: -1em;
    }

    .carousel-control-home-next {
        margin-right: -1em;
    }
    .timeline > li {
        height: 5.5em;
    }
    li.nav-item {
        text-align: left;
        margin-left: 10px;
    }

    .pm-cellulosicDescription,
    .pm-hydrocarbonDescription {
        width: 100%;
        text-align: center;
        margin-left: 0px;
    }

    .pm-Boder {
        border-right: none;
        border-bottom: 1px solid gray;
        padding-bottom: 2em;
    }

    .table {
        font-size: 0.875em;
    }

    div.pageImageOverlay {
        height: 30vh;
    }
    div.form-horizontal-control {
        margin-left: 20px;
    }
    .productLicenseButton {
        width: 100%;
    }
    .profileSettingChangePasswordButton {
        margin: 1rem 1.5rem;
    }
    .multi-item-carousel .carousel-inner .carousel-item.active {
        display: block;
    }

        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left {
            transition: none;
        }

    .multi-item-carousel .carousel-inner .carousel-item.active {
        position: initial;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }


    .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item {
        position: relative;
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item {
        position: relative;
        transform: translate3d(100%,0,0);
        display: block;
        visibility: visible;
    }

    .submitCellulosic {
        margin-bottom:0;
    }
    .modal {
        width:97%;
    }
    .breadcrumb {
        padding: 0.5rem 2rem;
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {
    .multi-item-carousel .carousel-inner .carousel-item.active,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

    .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%,0,0);
        display: block;
        visibility: visible;
    }

    .submitCellulosic {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .multi-item-carousel .carousel-inner .carousel-item.active,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

    .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%,0,0);
        display: block;
        visibility: visible;
    }

    .submitCellulosic {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .multi-item-carousel .carousel-inner .carousel-item.active,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

    .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%,0,0);
        display: block;
        visibility: visible;
    }
    .submitCellulosic {
        margin-bottom: 20px;
    }
}

@media (min-width: 1200px) {
    .multi-item-carousel .carousel-inner .carousel-item.active,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item,
        .multi-item-carousel .carousel-inner .carousel-item.active .carousel-item-right .carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
            transition: none;
        }

        .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible;
        }

    .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%,0,0);
        visibility: visible;
    }

    .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%,0,0);
        display: block;
        visibility: visible;
    }

    .submitCellulosic {
        margin-bottom: 20px;
    }
}