@charset "utf-8";
/* CSS Document */

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: Black;
    min-height: 100%;
}

body {
    /* min-width: max-content;*/
    min-height: 100%;
    margin: 0;
    font-size: 1em;
    line-height: 1.4;
    margin: 0px;
    padding: 0px;
    background-position: center;
    background: #f1f1f1;
}

.container {
    margin: auto;
    padding: 0px 10px;
    max-width: 900px;
}

div,
ul {
    margin: 0px;
    padding: 0px;
}

hr {
    margin-bottom: 10px;
}

h1 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    text-align: left;
    margin: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #bb0000;
    color: #bf0000;
    font-size: 40px;
}

h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    text-align: left;
    margin: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #bb0000;
    color: #bf0000;
    font-size: 30px;
}

h3 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    text-align: left;
    margin: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #bb0000;
    color: #bf0000;
    font-size: 30px;
}

h3,
h4,
h5,
h6,
h7 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 2px;
}


th {
    font-size: 16px;
}

p {
    margin: 0px;
    padding: 0px;
    font: 1.2em/1.8 'Open Sans', Helvetica, "Helvetica Neue", arial_black, sans-serif;
    font-size: 13.5px;
    color: black;
    /*text-align: justify;*/
    text-align: left;
    word-spacing: normal;
}

ul,
ol,
dl {
    margin-left: 0px;
    color: #3e3e3e;
    list-style: none;
}

li {
    padding: 1px;
    list-style: none;
}

a img {
    border: none;
}

a:link, a:visited {
    color: blue;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a.redlink2, a.redlink2:visited {
    color: #b41010;
    font-size: 16px;
}

    a.redlink2:hover {
        color: #ff0000;
    }

/* ********** Navigation ********** */

#nav_bar {
    margin: 0px;
    text-align: center;
    background-color: #1f1f1f;
    border-bottom: 0px solid #333333;
    padding: 8px;
    overflow: hidden;
}

header {
    background: White;
    /*background: #e4e4e4;*/
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}

.page-header {
    position: relative;
}

    .page-header a {
        position: absolute;
        right: 4px;
        bottom: 4px;
    }

.main-content {
    /*padding-top: 26px;*/
    min-height: 400px;
    margin-bottom: 40px;
}



/*Putting stuff here for video thumbnail page*/

.Documentation_Container {
    display: block;
}

.Documentation_Container_Header {
    text-align: left;
    font-size: 24px;
    font-weight: 400;
    text-decoration: underline;
    color: #bf0000;
}

.Documentation_Container::after {
    clear: both;
}

.All_Images_Container {
    margin-top: 30px;
}

    .All_Images_Container::after {
        content: "";
        display: table;
        clear: both;
    }

.Video_Headers {
    font-family: 'Trebuchet MS';
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    color: #bb0000;
}

.Video_hr {
    position: absolute;
    right: 500px;
    height: 2px;
    color: black;
    background-color: black;
    width: 910px;
    margin-top: -10px;
}

.Video_Thumbnails {
    vertical-align: top;
    border: 3px solid Black;
    border-radius: 15px;
    float: left;
    width: 280px;
    height: 160px;
}

.Video_Thumbnail_Container {
    display: inline;
    float: left;
    height: 290px;
    /*display:flex;*/
    /*flex-direction:column;*/
    padding-right: 14px;
    /*padding-bottom: 130px;*/
    margin-bottom: 10px;
    text-align: center;
}

.Video_Button {
    display: inline;
    overflow: hidden;
    vertical-align: bottom;
}

    .Video_Button img {
        max-width: 100%;
    }

.Video_Thumbnail_Description {
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    /*margin-bottom: 5px;*/
    max-width: 260px;
}

.Video_Views_And_Upload_Time {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 40px;
    padding-left: 5px;
}

/*Name of the video in pop-up window*/
.Video_Name_Popup {
    display: block;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: -80px;
    text-decoration: underline;
    padding-bottom: 5px;
}

/*Description of video under video in pop-up window*/
.Video_Description_Popup {
    display: block;
    font-size: 17px;
    font-weight: bold;
    /*padding-left: 15px;*/
    /*padding:50px;*/
    text-align: center;
    max-width: 580px;
}

.Video_Button .tooltip_text {
    visibility: hidden;
    width: 280px;
    margin-left: -110px;
    margin-top: 70px;
    background-color: blanchedalmond;
    color: Black;
    text-align: center;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 6px;
    padding: 5px 8px;
    max-height: 100%;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.Video_Button:hover .tooltip_text {
    visibility: visible;
}

video::cue {
    position: absolute;
    font-size: 30px;
    bottom: 10px;
    text-shadow: none;
    background-color: black;
    color: white;
}

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

video::-webkit-media-controls-timeline {
    display: flex !important;
    opacity: 1 !important;
}

video::-webkit-media-controls-fullscreen-button {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
}

video:-webkit-full-page-media {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

video::-webkit-media-controls- {
    visibility: visible !important;
    display: flex !important;
    opacity: 1 !important;
}
/*COMMENTED OUT Video_Container to try Vimeo*/

.Video_Container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: -50px;
}

.Video_Description_Container {
    display: flex;
    justify-content: center;
    /* margin-top:20px;*/
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px;
    z-index: 9999;
    border: 2px solid black;
    border-radius: 10px;
    height: auto;
    min-height: auto;
    min-width: auto;
    max-width: 100%;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 1px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    border: solid black;
    background-color: black;
    border-radius: 10px;
    color: white;
}


.footer_separator_container {
    clear: both;
}

.Video_Separator_Container {
    clear: both;
}


footer {
    min-height: 80px;
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}


/*PUTTING DIFFERENT PHONE RESOLUTIONS HERE*/

.All_Images_Container {
    margin-top: 30px;
}

.Search_Bar_Container {
}

    .Search_Bar_Container input {
        min-width: 350px;
        height: 35px;
        border: 1px solid black;
        border-radius: .3em;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
        font-size: 18px;
        font-weight: 500;
        padding-left: 18px;
        padding-top: 4px;
    }

        .Search_Bar_Container input::placeholder {
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            font-size: 20px;
            font-weight: bolder;
            letter-spacing: 2px;
            padding-left: 10px;
        }

.Search_Bar_Button {
    align-items: center;
    background-color: initial;
    background-image: linear-gradient(#A21D00, #CD0000);
    border-radius: 4px;
    border-width: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 200;
    height: 35px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    outline: none;
    overflow: hidden;
    padding: 0 22px;
    text-align: center;
    text-decoration: none;
    transform: translate3d(0, 0, 0);
    transition: all 150ms;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

    .Search_Bar_Button:hover {
        box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
        opacity: .85;
    }

    .Search_Bar_Button:active {
        outline: 0;
    }

    .Search_Bar_Button:focus {
        box-shadow: rgba(0, 0, 0, .5) 0 0 0 3px;
    }

[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-color: black;
    background-repeat: no-repeat;
    padding: 1px;
    background-position: center center;
    background-size: 16px 16px;
    background-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.46, transparent), color-stop(0.46, #fff), color-stop(0.54, #fff), color-stop(0.54, transparent), to(transparent)), -webkit-gradient(linear, right top, left bottom, from(transparent), color-stop(0.46, transparent), color-stop(0.46, #fff), color-stop(0.54, #fff), color-stop(0.54, transparent), to(transparent)) !important;
    border: 2px solid black;
    box-sizing: border-box;
    height: 25px;
    width: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    border-radius: 1em;
    cursor: pointer;
}

.Show_All_Videos_Button {
    align-items: center;
    background-color: initial;
    background-image: linear-gradient(#A21D00, #CD0000);
    border-radius: 4px;
    border-width: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 200;
    height: 35px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    outline: none;
    overflow: hidden;
    padding: 0 22px;
    text-align: right;
    text-decoration: none;
    transform: translate3d(0, 0, 0);
    transition: all 150ms;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    float: right;
    /*transform: translateY(6px);*/
}



/*iPad Regular*/
@media only screen and (min-width:766px) and (max-width: 769px) and (min-height:1022px) and (max-height:1025px) {

    .page_header_homescreen {
        margin-top: 90px;
    }

    .All_Images_Container {
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
        transform: translateX(40px);
        position: relative;
    }

    .popup {
        min-height: auto;
        max-height: none;
    }

    .Video_Name_Popup {
        max-width: 380px;
        margin-left: 40px;
    }
}

/*iPad Pro PORTRAIT*/
@media only screen and (min-width:1022px) and (max-width:1026px) and (min-height: 1364px) and (max-height: 1368px) and (orientation: portrait) {

    h1 {
        margin-top: 90px;
    }

    h2 {
        margin-top: 90px;
    }

    .header_class {
        min-width: 100%;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    .main-content {
        min-width: 915px;
    }

    #Search_Video_Form {
        min-width: max-content;
        max-width: 100vw;
        display: flex;
        align-items: center;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
        margin-left: 55px;
    }

    .Show_All_Videos_Button {
        align-items: center;
        border-radius: 8px;
        font-size: 20px;
        font-weight: 200;
        height: 44px;
        padding: 0 22px;
        text-align: right;
        float: right;
        transform: translateY(-0.2px);
        transform: translateX(260px);
        margin-left: 5px;
    }

    .Search_Bar_Button {
        border-radius: 8px;
        font-size: 20px;
        font-weight: 200;
        height: 44px;
        min-width: 55px;
        margin-left: 5px;
    }

    .All_Images_Container {
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
        transform: translateX(80px);
        position: relative;
    }

    #page_header_video_library {
        transform: translateX(60px);
    }

    #hr_Help_Video_Library {
        transform: translateX(60px);
    }

    .page-header {
        margin-top: 70px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}

/*iPad Mini PORTRAIT*/
@media only screen and (min-width: 766px) and (max-width: 770px) and (min-height: 1022px) and (max-height: 1026px) and (orientation: portrait) {

    .All_Images_Container {
        display: block;
        margin-left: 140px;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    #page_header_video_library {
        transform: translateX(100px);
    }

    #hr_Help_Video_Library {
        transform: translateX(100px);
    }

    .page-header {
        margin-top: 90px;
    }

    .header_class {
        min-width: 100%;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}

/*iPad Mini Landscape*/
@media only screen and (min-width: 1022px) and (max-width: 1026px) and (min-height: 766px) and (max-height: 770px) and (orientation: landscape) {
    .All_Images_Container {
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
    }

    .container {
        margin-left: 100px;
    }

    .header_class {
        min-width: 1194px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}

/*iPad Air PORTRAIT*/
@media only screen and (min-width:818px) and (max-width: 822px) and (min-height: 1178px) and (max-height: 1182px) and (orientation: portrait) {
    h2 {
        margin-top: 90px;
    }

    .h1 {
        margin-top: 40px;
    }

    .Search_Bar_Container input {
        min-width: 350px;
        height: 55px;
        border: 1px solid black;
        border-radius: .7em;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
        font-size: 20px;
        font-weight: 500;
    }

    #Search_Video_Form {
        min-width: max-content;
        max-width: 100vw;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .All_Images_Container {
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
        transform: translateX(180px);
        position: relative;
    }

    .Show_All_Videos_Button {
        align-items: center;
        border-radius: 8px;
        font-size: 20px;
        font-weight: 200;
        height: 44px;
        padding: 0 22px;
        text-align: right;
        float: right;
        transform: translateY(-0.2px);
        transform: translateX(150px);
        margin-left: 5px;
    }

    .Search_Bar_Button {
        border-radius: 8px;
        font-size: 20px;
        font-weight: 200;
        height: 44px;
        min-width: 55px;
        margin-left: 5px;
    }

    .header_class {
        min-width: 100%;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    #page_header_video_library {
        transform: translateX(80px);
    }

    #hr_Help_Video_Library {
        transform: translateX(80px);
    }

    .page-header {
        margin-top: 70px;
    }

    .page_header_homescreen {
        margin-top: 70px;
    }

    .container {
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}

/*iPad Air Landscape*/
@media only screen and (min-width: 1178px) and (max-width: 1182px) and (min-height: 818px) and (max-height: 822px) and (orientation: landscape) {
    .All_Images_Container {
        display: block;
        align-content: center;
        align-items: center;
        text-align: center;
        background-color: aqua;
    }

    .header_class {
        min-width: 1300px;
    }

    .container {
        margin-left: 190px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}

/*Samsung Galaxy S20 Ultra portrait*/
@media only screen and (min-width: 411px) and (max-width: 413px) and (min-height: 914px) and (max-height: 916px) and (orientation: portrait) {
    .All_Images_Container {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* width: 100%;
        min-width: max-content;*/
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }

    .video_class {
        overflow: hidden;
    }
}

/*Samsung Galaxy S20 Ultra landscape*/
@media only screen and (min-width: 913px) and (max-width: 916px) and (min-height: 410px) and (max-height: 415px) and (orientation: landscape) {
    .h1 {
        margin-top: 45px;
    }

    .All_Images_Container {
        display: block;
        margin-left: 180px;
        align-content: center;
        align-items: center;
        text-align: center;
        background-color: aqua;
    }

    .header_class {
        min-width: 100%;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    .page-header {
        margin-top: 90px;
    }

    .page_header_homescreen {
        margin-top: 60px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 10px;
        z-index: 9999;
        border: 2px solid black;
        border-radius: 10px;
        min-height: 70%;
        max-height: 90%;
        min-width: 600px;
        overflow-y: scroll;
    }

    .Video_Name_Popup {
        display: block;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: -80px;
        text-decoration: underline;
        max-width: 480px;
        margin-left: 60px;
    }

    .video_class {
        width: 420px;
        height: 381px;
        padding: 5px;
        overflow: hidden;
    }
}

/*iPhone XR LANDSCAPE*/
@media only screen and (max-width:896px) and (orientation: landscape) {
    .All_Images_Container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: max-content;
    }

    .container {
        margin: auto;
        padding: 0px 10px;
        max-width: 1900px;
        min-width: 500px;
        min-width: 100%;
        min-width: max-content;
    }

    .header_class {
        min-width: 100%;
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    .page-header {
        margin-top: 60px;
    }

    .page_header_homescreen {
        margin-top: 90px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 10px;
        /*z-index: 9999;*/
        border: 2px solid black;
        border-radius: 10px;
        min-height: 70%;
        max-height: 80%;
        min-width: 520px;
        overflow-y: auto;
    }

    .Video_Name_Popup {
        margin-left: 70px;
        text-decoration: underline;
        padding-bottom: 5px;
        max-width: 400px;
    }
}

/*iPhone SE LANDSCAPE*/
@media screen and (max-width:750px) and (orientation: landscape) {
    .h1 {
        margin-top: 40px;
    }

    .row-for-h1 {
        margin-bottom: 0px;
    }

    .All_Images_Container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: max-content;
    }

    .main-content {
        padding-top: 26px;
        min-height: 400px;
        margin-bottom: 40px;
        margin-top: 50px;
        min-width: max-content;
        min-width: 100%;
    }

    .container {
        margin: auto;
        padding: 0px 10px;
        max-width: 1900px;
        min-width: 500px;
        min-width: 100%;
        min-width: max-content;
    }

    .header_class {
        min-width: 100%;
        width: 770px;
    }

    #nav_bar {
        padding: 4px;
        min-width: min-content;
        max-width: 100%;
        width: 100%;
        min-width: max-content;
    }

    #div_header .container {
        min-width: 500px;
        width: 100%;
        min-width: min-content;
        max-width: 100%;
    }

    #header_logo {
        margin-left: 10px;
    }

    .shopping_cart_container {
        margin-left: -15px;
    }

    .shopping_cart_count {
        margin-left: -15px;
    }

    .button-link, .button-link:visited {
        background-color: #b41010;
        border: none;
        color: white !important;
        padding: 10px 16px;
        text-decoration: none;
        cursor: pointer;
        font-size: 17px;
        border-radius: 4px;
        font-weight: 400;
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
        min-width: 160px;
        text-align: center;
    }

    .popup {
        display: none;
        position: fixed;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 10px;
        z-index: 9999;
        border: 2px solid black;
        border-radius: 10px;
        min-height: 70%;
        max-height: 80%;
        min-width: 520px;
        overflow-y: auto;
    }

    .Video_Container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
    }

    .video_class {
        width: 400px;
        height: 361px;
        padding: 5px;
    }

    .Video_Name_Popup {
        display: block;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: -80px;
        text-decoration: underline;
        max-width: 410px;
        margin-left: 60px;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
        font-weight: 400;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }
}


/*iPhone SE PORTRAIT Covers most iPhones*/
@media screen and (max-width: 440px) and (orientation: portrait) {

    #Search_Video_Form {
        min-width: max-content;
        max-width: 100vw;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .Video_Thumbnail_Container {
        min-height: 290px;
        max-width: 300px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        margin-bottom: 10px;
        text-align: center;
    }

    .Show_All_Videos_Button {
        max-width: 90px;
        align-items: center;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 200;
        height: 34px;
        padding: 0 22px;
        text-align: right;
        float: right;
        transform: translateY(-0.2px);
        margin-left: 5px;
    }

    .Search_Bar_Button {
        border-radius: 8px;
        font-size: 11px;
        font-weight: 200;
        height: 34px;
        min-width: 55px;
        max-width: 30px;
        margin-left: 5px;
    }

    .Search_Bar_Container {
        min-width: 50px;
        max-width: 100vw;
        /*transform: translateX(75px);*/
    }

        .Search_Bar_Container input {
            min-width: 200px;
            max-width: 200px;
            height: 35px;
            border: 1px solid black;
            border-radius: .7em;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
            font-size: 14px;
            font-weight: 500;
            padding-left: 8px;
        }

            .Search_Bar_Container input::placeholder {
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                font-size: 12px;
                font-weight: bolder;
                padding-left: 2px;
                letter-spacing: 0px;
            }


    .footer_separator_container {
        /* transform: translateX(5px);*/
    }

    a.go-back-link {
    }

    #page_header_video_library {
        /* transform: translateX(75px); */
    }

    #hr_Help_Video_Library {
        /* transform: translateX(75px); */
    }

    .page-header {
        margin-top: 50px;
    }

    .page_header_homescreen {
        margin-top: 50px;
    }

    .All_Images_Container {
        /*display: block;*/
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        text-align: center;
        /*transform: translateX(200px);*/
        position: relative;
        /*max-width: 550px;*/
    }

    .footer_container {
        display: block;
        position: relative;
        z-index: 1;
        transform: translateY(100%);
    }

    .main-content {
        padding-top: 26px;
        min-height: 400px;
        margin-bottom: 40px;
        /*min-width: max-content;*/
        /*min-width:100%;*/
        max-width: 550px;
    }

    .container {
        margin: auto;
        padding: 0px 10px;
        max-width: 1600px; /*was 600*/
        /*min-width:500px;*/
        /*min-width:100%;*/
        /*min-width:max-content; */
        min-width: min-content; /*did have typo here where this was not active so if something is messed up it could be this*/
    }

    .header_class {
        min-width: 100%;
        max-width: 667px; /*was 667 */
        width: 100vw;
        overflow: hidden;
        position: fixed;
        z-index: 1;
    }

    #nav_bar {
        padding: 4px;
        min-width: min-content;
        max-width: 100%;
        width: 100%;
        min-width: max-content;
    }



    #div_header .container {
        min-width: 500px;
        width: 100%;
        min-width: min-content;
        max-width: 100%;
    }

    #header_logo {
        margin-left: 10px;
    }

    .shopping_cart_container {
        margin-left: -15px;
    }

    .shopping_cart_count {
        margin-left: -15px;
    }

    .button-link, .button-link:visited {
        background-color: #b41010;
        border: none;
        color: white !important;
        padding: 10px 16px;
        text-decoration: none;
        cursor: pointer;
        font-size: 17px;
        border-radius: 4px;
        font-weight: 400;
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
        min-width: 160px;
        text-align: center;
    }

    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 10px;
        z-index: 9999;
        border: 2px solid black;
        border-radius: 10px;
        /*height: 300px;*/
        min-height: auto;
        /* min-width: 530px; */
        min-width: 330px;
        max-height: none;
        max-width: max-content;
        overflow-x: auto;
    }

    .Video_Container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Video_Name_Popup {
        display: block;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-bottom: -80px;
        text-decoration: underline;
        padding-bottom: 10px;
        max-width: 250px;
        margin-left: 63px;
    }

    .video_class {
        width: 350px;
        height: 311px;
    }

    .Video_Button:hover .tooltip_text {
        visibility: hidden;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 2px;
        cursor: pointer;
        font-size: 20px;
        font-weight: 400;
        border: solid 2px black;
        background-color: black;
        color: white;
    }

    #loginForm {
        max-width: 300px;
    }


    .footer_separator_container {
        max-width: auto;
    }

    video::-webkit-media-controls-fullscreen-button {
        visibility: hidden !important;
        opacity: 1 !important;
        display: flex !important;
    }
}









input[type=text],
input[type=password] {
    width: 100%;
    padding: 10px 10px;
    margin: 4px 0 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #c5c5c5;
    border-radius: 4px;
}

input[type=radio] {
    font-weight: normal;
}

input[type=button],
input[type=submit],
input[type=reset] {
    background-color: #b41010;
    border: none;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    font-weight: 400;
}

input[type=date] {
    height: 22px;
    padding: 3px 2px 3px 6px;
    border-radius: 4px;
    border: 1px solid #c5c5c5;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    background-color: #d60000;
    text-decoration: none;
    cursor: pointer;
}

option {
    font-size: 13px;
    padding: 20px;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 8px 10px;
    font-size: 14px;
    margin: 4px 0 10px 0;
    box-sizing: border-box;
    resize: none;
}

.sub-banner {
    background: LightGray;
    margin: 0px;
    overflow: hidden;
}

    .sub-banner h2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

#loginForm .control-label {
    font-size: 24px;
}

.control-label {
    font-size: 15px;
    padding-left: 2px;
    text-align: left;
    font-weight: 600;
    display: inline-block;
    min-width: 130px;
}

span.required-symbol {
    font-size: 24px;
    color: #d60000;
}

#contact-form .control-label {
    margin-right: 8px;
    min-width: 70px;
}


#contact-form input {
    clear: none;
    max-width: 250px;
    width: 60%;
    height: 36px;
    margin: 4px;
}

#contact-form {
    min-width: 66%;
    max-width: 620px;
    margin-bottom: 20px;
    float: left;
}

div#create-account-form .control-label {
    margin-right: 10px;
    min-width: 140px;
}

#create-account-form input {
    clear: none;
    max-width: 250px;
    width: 60%;
    height: 36px;
    margin: 4px;
}

.checkbox-label {
    font-size: 24px;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}

.button-link, .button-link:visited {
    background-color: #b41010;
    border: none;
    color: white !important;
    padding: 10px 16px;
    text-decoration: none;
    cursor: pointer;
    font-size: 17px;
    border-radius: 4px;
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    min-width: 160px;
    text-align: center;
}

    .button-link:hover {
        background-color: #d60000;
    }

.button-linkCustomerHome, .button-linkCustomerHome:visited {
    background-color: #b41010;
    border: none;
    color: white !important;
    padding: 8px 10px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 2px;
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    min-width: 160px;
    text-align: center;
}

    .button-linkCustomerHome:hover {
        background-color: #d60000;
    }



/*.button-25 {
    padding: 7px 17px 7px 12px;
    text-decoration: none;
    font-weight: 400;
    display: inline-block;
    min-width: 100px;
    background-color: green;
    background-image: linear-gradient(green, darkgreen);
    border: 1px solid Dimgray;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.35) 1.25px 1.25px 1.25px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    line-height: 100%;
    margin: 0;
    outline: 0;
    text-align: center;
    transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-right: 10px;
    margin-bottom: 10px;
}


    .button-25:hover {
    box-shadow: rgba(255, 255, 255, 0.3) 0 0 3px inset, rgba(0, 0, 0, 1) 1px 1px 1px;
    text-decoration: none;
    transition-duration: .15s, .15s;
}

.button-25:active {
    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px inset, rgba(0, 0, 0, 0.4) 1px 1px 1px;
}

.button-25:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.button-25:disabled:active {
    pointer-events: none;
}

.button-25:disabled:hover {
    box-shadow: none;
}

.button-25 p {
    color: white;
    font-size: 14.5px;
    text-align: center;
}

.button-25 i {
    margin-right: 10px;
    margin-left: 4px;
    vertical-align: text-bottom;
    text-shadow: rgba(0, 0, 0, 0.75) 0 1px 1px;


*/

.button-25 {
    padding: 8px 15px 8px 12px;
    text-decoration: none;
    font-weight: 400;
    display: inline-block;
    min-width: 100px;
    /*background-color: green;*/
    /*background: linear-gradient( to right, Green 0px, Green 40px, Black 40px, Black 100%);*/
    /*background-image: linear-gradient(DimGray, Black);*/
    /*background-image: linear-gradient(#757575, Black);*/
    background-image: linear-gradient(Gray, Black);
    border: 1px solid Dimgray;
    border-radius: 3px;
    /*box-shadow: rgba(0, 0, 0, 0.35) 1.25px 1.25px 1.25px;*/
    /*box-shadow: rgba(0, 0, 0, 0.15) 2px 3px 3.5px;*/
    box-shadow: rgba(0, 0, 0, 0.6) 1px 1.5px 1.25px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    line-height: 100%;
    margin: 0;
    outline: 0;
    text-align: center;
    transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 204px;
}

    .button-25:hover {
        /*box-shadow: rgba(255, 255, 255, 0.3) 0 0 3px inset, rgba(0, 0, 0, 1) 1px 1px 1px;*/
        /*box-shadow: rgba(255, 255, 255, 0.5) 0 0 3px inset, rgba(0, 0, 0, 0.6) 1px 2px 2px;*/
        background-image: linear-gradient(Gray, Black);
        box-shadow: rgba(0, 0, 0, 0.7) 1.5px 2.5px 3.5px;
        text-decoration: none;
        transition-duration: .15s, .15s;
    }

    .button-25:active {
        /*box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px inset, rgba(0, 0, 0, 0.4) 1px 1px 1px;*/
    }

    .button-25:disabled {
        cursor: not-allowed;
        opacity: .6;
    }

        .button-25:disabled:active {
            pointer-events: none;
        }

        .button-25:disabled:hover {
            box-shadow: none;
        }

    .button-25 p {
        color: white;
        font-size: 14px;
        text-align: left;
        z-index: 10;
        /*NEEDS THIS TO SHOW ON TOP OF PSEUDO ELEMENT (:BEFORE)*/
        position: relative;
    }

    .button-25 i {
        margin-right: 20px;
        margin-left: 0px;
        vertical-align: text-bottom;
        text-shadow: rgba(0, 0, 0, 0.75) 0 1px 1px;
    }

#ConsumableSelectButton, .ConsumableSelectButton:visited {
    /*background-image: linear-gradient(#00a503, darkgreen);*/
    /*background: linear-gradient(to right, Green 0px, Green 40px, Transparent 42px, Transparent 100%), linear-gradient(DimGray, Black);*/
    border: 1px solid #00a503;
    position: relative; /* Needed to position the pseudo-element */
}

    #ConsumableSelectButton::before {
        content: "";
        position: absolute;
        top: 0px;
        /*right: 190px;*/
        right: 160px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        border-radius: 2px 0px 0px 2px;
        background-image: linear-gradient(#09cd0c, darkgreen); /* Or your page background color */
        transition: right 0.10s ease-out; /*THIS IS THE TRANSITION WHEN MOUSE LEAVES BUTTON*/
        /* This creates a "hole" showing the gradient border around it */
    }

    #ConsumableSelectButton:hover:before {
        background-image: linear-gradient(#09cd0c, darkgreen); /* Or your page background color */
        right: 0px;
        transition: right 0.15s ease-out;
        border-radius: 2px;
    }

    #ConsumableSelectButton:hover {
        /*background-image: linear-gradient(#00c104, darkgreen);*/
    }


#SoftwareSelectButton, .SoftwareSelectButton:visited {
    /*background-image: linear-gradient(DodgerBlue, #005891);*/
    border: 1px solid DodgerBlue;
    position: relative;
}

    #SoftwareSelectButton::before {
        content: "";
        position: absolute;
        top: 0px;
        /*right: 172px;*/
        right: 160px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        border-radius: 2px 0px 0px 2px;
        background-image: linear-gradient(#34b2ff, #005891); /* Or your page background color */
        transition: right 0.10s ease-out; /*THIS IS THE TRANSITION WHEN MOUSE LEAVES BUTTON*/
        /* This creates a "hole" showing the gradient border around it */
    }

    #SoftwareSelectButton:hover:before {
        background-image: linear-gradient(#34b2ff, #005891); /* Or your page background color */
        right: 0px;
        transition: right 0.15s ease-out;
        border-radius: 2px;
    }

    #SoftwareSelectButton:hover {
        /*background-image: linear-gradient(#2eb3ff, #005891);*/
    }


#HelpVideosButton, .HelpVideosButton:visited {
    /*background-image: linear-gradient(#c40606, #9a0000);*/
    border: 1px solid #c40606;
    position: relative;
}

    #HelpVideosButton::before {
        content: "";
        position: absolute;
        top: 0px;
        /*right: 162px;*/
        right: 160px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        border-radius: 2px 0px 0px 2px;
        background-image: linear-gradient(#eb4f4f, #9a0000); /* Or your page background color */
        transition: right 0.10s ease-out; /*THIS IS THE TRANSITION WHEN MOUSE LEAVES BUTTON*/
        /* This creates a "hole" showing the gradient border around it */
    }

    #HelpVideosButton:hover:before {
        background-image: linear-gradient(#eb4f4f, #9a0000); /* Or your page background color */
        right: 0px;
        transition: right 0.15s ease-out;
        border-radius: 2px;
    }

    #HelpVideosButton:hover {
        /*background-image: linear-gradient(#e43e3e, #9a0000);*/
    }


#HelpManualsButton, .HelpManualsButton:visited {
    /*background-image: linear-gradient(#ff8300, #ca6800);*/
    border: 1px solid #ff8300;
    position: relative;
}

    #HelpManualsButton::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 160px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        border-radius: 2px 0px 0px 2px;
        background-image: linear-gradient(#ff9f39, #ca6800); /* Or your page background color */
        transition: right 0.10s ease-out; /*THIS IS THE TRANSITION WHEN MOUSE LEAVES BUTTON*/
        /* This creates a "hole" showing the gradient border around it */
    }

    #HelpManualsButton:hover:before {
        background-image: linear-gradient(#ff9f39, #ca6800); /* Or your page background color */
        right: 0px;
        transition: right 0.15s ease-out;
        border-radius: 2px;
    }

    #HelpManualsButton:hover {
        /*background-image: linear-gradient(#ff9321, #ca6800);*/
    }

#ManageLicensesButton, .ManageLicensesButton:visited {
    /*background-image: linear-gradient(#ff8300, #ca6800);*/
    border: 1px solid #d4c500;
    position: relative;
}

    #ManageLicensesButton::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 160px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        border-radius: 2px 0px 0px 2px;
        background-image: linear-gradient(#e2d956, #928800); /* Or your page background color */
        transition: right 0.10s ease-out; /*THIS IS THE TRANSITION WHEN MOUSE LEAVES BUTTON*/
        /* This creates a "hole" showing the gradient border around it */
    }

    #ManageLicensesButton:hover:before {
        background-image: linear-gradient(#e2d956, #928800); /* Or your page background color */
        right: 0px;
        transition: right 0.15s ease-out;
        border-radius: 2px;
    }

    #ManageLicensesButton:hover {
        /*background-image: linear-gradient(#ff9321, #ca6800);*/
    }




input.redlink, input.redlink:visited {
    color: black;
    background-color: transparent;
    font-size: 14px;
    padding: 0px;
}

    input.redlink:hover {
        color: #ff0000;
        background-color: transparent;
        text-decoration: underline;
    }

input.bluelink, input.bluelink:visited {
    color: blue;
    background-color: transparent;
    font-size: 16px;
    padding: 0px;
}

    input.bluelink:hover {
        color: blue;
        background-color: transparent;
        text-decoration: underline;
    }




a#shopping-cart-link, a#shopping-cart-link:visited {
    box-shadow: 0px 0px 2px 0.25px rgba(0,0,0,0);
    float: right;
    border: 0px solid black;
    border-radius: 3px;
    background-color: transparent;
    text-align: center;
    position: relative;
    padding: 3px;
    margin-top: 1px;
}

    a#shopping-cart-link:hover {
        background-color: #f9f9f9;
        box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
    }

    a#shopping-cart-link:first-child {
        position: relative;
        padding: 5px 8px;
        width: 86px;
    }

#shopping-cart-link img {
    margin-right: 0px;
    height: 30px;
    float: left;
}

#shopping-cart-link > div > p {
    margin-left: 44px;
    line-height: 30px;
    background-color: transparent;
    font-weight: bold;
    font-size: 16px;
    vertical-align: bottom;
}

#shopping-cart-link div > div {
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0);
    border-radius: 10px;
    height: 17px;
    width: auto;
    min-width: 17px;
    background-color: #b41010;
    text-align: center;
    position: absolute;
    left: 32px;
    bottom: 4px;
}

    #shopping-cart-link div > div > p {
        font-size: 11.5px;
        color: white;
        line-height: 17px;
        padding: 0px 1px;
        vertical-align: central;
        text-align: center;
    }



/*<a>
                            <div>
                                <img/>
                                <p>Cart</p>
                                <div>
                                    <p>
                                    </p>
                                </div>
                            </div>
                        </a>*/






a.go-back-link, a.go-back-link:visited {
    color: black;
    text-decoration: none;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

    a.go-back-link:hover {
        color: #ff0000;
        text-decoration: underline;
    }

a.zoom-in, a.zoom-in:visited {
    color: #a0a0a0;
    text-decoration: none;
    position: absolute;
    right: 3px;
    bottom: 0px;
    background-color: transparent;
    line-height: 1;
    opacity: 0.45;
}

    a.zoom-in:hover {
        color: black;
        text-decoration: underline;
        opacity: 1;
    }

a.forgot-password-link, a.forgot-password-link:visited {
    color: #b41010;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    float: none;
    font-size: 15px;
    margin-top: 14px;
    margin-left: 0px;
    margin-bottom: 20px;
}

    a.forgot-password-link:hover {
        color: #ff0000;
        text-decoration: underline;
    }
/*#shipping-form div {
    float:left;
    clear: both;
}*/

#shipping-form .control-label {
    display: inline-block;
    margin-right: 0px;
    margin-left: 4px;
    font-size: 14px;
    line-height: 40px;
    width: 110px;
    min-width: 40px;
    /*text-align: right;*/
}

#shipping-form input {
    clear: none;
    width: 222px;
    height: 36px;
    margin: 4px;
}

#password-change-form label {
    display: inline-block;
    margin-right: 6px;
    font-size: 14px;
    line-height: 40px;
    width: 156px;
}

#password-change-form input {
    clear: none;
    width: 250px;
    height: 36px;
    margin: 4px;
}

input.disabled {
    background-color: #e0e0e0;
}

.text-danger {
    color: #b94a48;
    font-size: 15px;
    text-align: center;
}

button.RedButton {
    background-color: #b41010;
    border: none;
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    cursor: pointer;
    font-size: 17px;
    border-radius: 4px;
    font-weight: 400;
}

    button.RedButton:hover {
        background-color: #d60000;
        text-decoration: none;
        cursor: pointer;
    }



input:focus {
    outline: none !important;
}

button:focus {
    outline: none !important;
}

input[type=text]:focus {
    border: 1px solid #36acfe;
}

textarea {
    padding: 8px 10px;
    margin: 4px 0 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #c5c5c5;
    outline: 0px;
    border-radius: 4px;
}

    textarea:focus {
        border: 1px solid #36acfe;
    }

select {
    /*width: 100%;*/
    padding: 8px 10px;
    margin: 4px 0 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #c5c5c5;
    outline: 0px;
    border-radius: 4px;
}

    select:focus {
        border: 1px solid #36acfe;
        outline: 0px;
    }

h1#header-logo {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 32px;
    color: #3e3e3e;
    font-weight: bold;
    text-transform: uppercase;
}

    h1#header-logo img {
        height: 20px;
        border: solid 1px #bf0000;
        border-radius: 4px;
        padding: 8px;
        background: #1f1f1f;
        margin-right: 0px;
        margin-bottom: -4px;
    }

    h1#header-logo span {
        color: #bf0000;
        font-weight: bold;
    }

h1#arc-header-logo img {
    margin-top: 10px;
    max-width: 150px;
    max-height: 74px;
}

h1#linde-header-logo img {
    margin-top: 10px;
    max-width: 150px;
    max-height: 74px;
}

h3#order-number-header {
    font-size: 22px;
}

input[type=text].login-textbox, input[type=password].login-textbox {
    max-width: 450px;
}
/*
    .row-for-h1 {
        margin-bottom: 40px;
    }
*/
p#header-email {
    color: lightgray;
    font-size: 14px;
    float: left;
}

    p#header-email img {
        height: 14px;
        margin-right: 4px;
        margin-bottom: 0px;
        margin-left: 4px;
        opacity: 0.5;
    }

    p#header-email span {
        color: white;
        font-size: 15px;
        margin-left: 2px;
    }

#login-button {
    margin-top: 30px;
    margin-bottom: 10px;
    width: 100px;
}

p#header-contact {
    color: lightgray;
    font-size: 15px;
    float: right;
}

    p#header-contact a {
        color: white;
        font-weight: bold;
        font-size: 15px;
    }

        p#header-contact a:hover {
            text-decoration: underline;
        }

#header-username-logout span {
    color: white;
    font-size: 14px;
    margin-right: 12px;
}

#header-username-logout a {
    color: white;
    font-size: 14px;
    float: right;
    padding: 0px 10px;
    border-radius: 3px;
    margin-right: 0px;
    min-width: 0px;
    margin-bottom: 0px;
}


#filter-consumables {
    overflow: hidden;
    clear: both;
    /*margin-bottom: 10px;*/
    margin-bottom: 0px;
}

    #filter-consumables div {
        float: left;
        clear: none;
    }

#or-paragraph p {
    font-weight: bold;
    color: #bb0000;
    font-size: 14px;
    text-align: left;
    margin: 34px 50px;
}

#search-by-number input[type=submit], #search-by-company input[type=submit] {
    padding: 8px 14px;
    font-size: 16px;
    margin-left: 4px;
}

div#search-by-number #search-textbox, div#search-by-company #search-textbox {
    width: 220px;
    height: 34px;
    margin-bottom: 10px;
}

#search-by-DateRange {
    padding: 7px 12px;
    font-size: 15px;
    margin-left: 4px;
}

#consumable-select-table {
}

/*input.add-to-cart-link, input.add-to-cart-link:visited {
    color: blue;
    background-color: transparent;
    font-size: 16px;
    padding: 0px;
}

    input.add-to-cart-link:hover {
        color: blue;
        background-color: transparent;
        text-decoration: underline;
    }*/



button.increase-all-quantity {
    font-size: 14px;
    text-align: left;
    background-color: #555555;
    color: white;
    padding: 3px 7px;
    font-weight: normal;
    border: 0px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
}

button.increase-all-quantity:hover {
    background-color: #707070;
    text-decoration: none;
}

    button.increase-all-quantity:active {
        background-color: #808080;
        text-decoration: none;
    }


input.add-to-cart-link, input.add-to-cart-link:hover {
    font-size: 14px;
    text-align: left;
    background-color: #264093;
    color: white;
    padding: 8px 10px;
    margin-top: 4px;
    font-weight: normal;
}

    input.add-to-cart-link:hover {
        background-color: #215ecd;
        text-decoration: none;
    }

a.view-order, a.view-order:hover {
    font-size: 14px;
    text-align: left;
    background-color: #264093;
    color: white;
    padding: 8px 10px;
    margin-top: 4px;
    font-weight: normal;
    border-radius: 3px;
}

    a.view-order:hover {
        background-color: #215ecd;
        text-decoration: none;
    }

.show-on-mobile, .show-on-tablet {
    display: none;
}

.qty-header {
    padding: 8px 40px;
}

.show-row-on-mobile {
    display: none;
}

.show-row-on-tablet {
    display: none;
}

#order-placed-header h1 {
    font-size: 30px;
    color: black;
    margin: 10px;
    margin-left: 0px;
    margin-bottom: 4px;
}

#order-placed-header h2 {
    font-size: 15px;
    color: black;
    margin-top: 0px;
    margin-left: 0px;
    font-weight: normal;
}

div.cart-totals-div {
    min-width: 200px;
    max-width: 220px;
    margin-top: 20px;
    margin-bottom: 6px;
    float: right;
    margin-right: 4px;
}

#btn-add-all-to-cart {
    padding: 10px 12px;
    font-size: 15px;
    margin-top: 10px;
    font-weight: normal;
}

#arc-contact-info {
    float: left;
    max-width: 260px;
}

.consumable-data1, .consumable-data2 {
    width: 48%;
    float: left;
    text-align: center;
}

.consumable-data2 {
    float: right;
}

div#life-meter-div img {
    height: 156px;
}

div#life-meter-div-small {
    float: right;
    vertical-align: middle;
}

    div#life-meter-div-small img {
        height: 48px;
        vertical-align: middle;
        /*float:right;*/
    }

div#life-meter-div-small-tablet {
    float: right;
    vertical-align: middle;
}

    div#life-meter-div-small-tablet img {
        height: 36px;
        vertical-align: middle;
        /*float:right;*/
    }

/*div#life-meter-div-small span {
    font-size: 14px;
    vertical-align:middle;
}*/

p.consumable-name {
    font-size: 14px;
    float: left;
    line-height: 48px;
}


p#life-meter-legend {
    font-size: 12px;
    color: #4f4f4f;
    line-height: 1.5;
    float: left;
    width: 340px;
}

    p#life-meter-legend img {
        height: 34px;
        float: left;
        /*vertical-align: middle;*/
    }

    p#life-meter-legend span {
        white-space: nowrap;
    }

div#order-history-list {
    width: 100%;
    /*max-width: 900px;*/
}

#order-history-list table {
    clear: both;
    min-width: 100%;
}

@media screen and (max-width: 880px) {

    div#search-by-number #search-textbox, div#search-by-company #search-textbox {
        width: 160px;
    }
}

@media screen and (max-width: 800px) {
    div#order-history-list {
        margin: 0px auto;
    }

        div#order-history-list table {
            font-size: 15px;
        }

    #filter-consumables div {
        clear: both;
    }

    #or-paragraph p {
        margin: 2px 20px 4px 4px;
    }

    #arc-contact-info {
        float: left;
        max-width: 100%;
    }

    #contact-form {
        min-width: 100%;
    }
}

@media screen and (max-width: 740px) {

    #btn-add-all-to-cart {
        margin-top: 0px;
    }

    div.cart-totals-div {
        margin-top: 0px;
    }

    th {
        font-size: 15px;
    }

    .hide-on-tablet {
        display: none;
    }

    .show-on-tablet {
        display: block;
    }

    .show-row-on-tablet {
        display: table-row;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 26px;
    }

    h3#order-number-header {
        font-size: 22px;
    }

    #loginForm .control-label {
        font-size: 20px;
    }

    p#header-email {
        display: none;
    }

    .consumables-page-content {
        margin: 0px auto;
        width: 380px;
    }

    .shopping-cart-page-content {
        margin: 0px auto;
        width: 440px;
    }

    .complete-order-page-content {
        margin: 0px auto;
        width: 400px;
    }

    #order-placed-header h1 {
        font-size: 26px;
    }

    #order-placed-header h2 {
        font-size: 13px;
    }

    #password-change-form label {
        margin-right: 0px;
        font-size: 13.5px;
        line-height: 40px;
        width: 156px;
    }

    #password-change-form input {
        clear: none;
        width: 230px;
        height: 36px;
        margin: 4px;
    }
}

@media screen and (max-width: 440px) {

    div#order-history-list {
        max-width: 300px;
    }

    .consumable-data1, .consumable-data2 {
        width: 100%;
        float: none;
    }

    th {
        font-size: 15px;
    }

    #shipping-form .control-label {
        display: inline-block;
        margin-right: 0px;
        margin-left: 4px;
        font-size: 13px;
        line-height: 36px;
        width: 100px;
        min-width: 40px;
        /*text-align: right;*/
    }

    #shipping-form input {
        clear: none;
        width: 180px;
        height: 34px;
        margin: 4px 0px;
        font-size: 12px;
    }

    #password-change-form label {
        display: inline-block;
        margin-right: 0px;
        margin-left: 4px;
        font-size: 13px;
        line-height: 30px;
        width: 146px;
        min-width: 40px;
        margin-bottom: 0px;
        margin-top: 4px;
        /*text-align: right;*/
    }

    #password-change-form input {
        clear: none;
        width: 100%;
        margin: 0px 0px;
        font-size: 12px;
    }

    .complete-order-page-content {
        margin: 0px auto;
        width: 300px;
    }

    .consumables-page-content {
        margin: 0px auto;
        width: 270px;
    }

    .shopping-cart-page-content {
        margin: 0px auto;
        width: 270px;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }

    .show-row-on-mobile {
        display: table-row;
    }


    .page-header a {
        right: 4px;
        bottom: 3px;
    }

    #header-username-logout span {
        font-size: 12px;
        margin-right: 6px;
    }

    #header-username-logout a {
        color: white;
        font-size: 13px;
        float: right;
        padding: 0px 6px;
        border-radius: 3px;
    }

    .button-link, .button-link:visited {
        padding: 8px 12px;
        font-size: 15px;
        border-radius: 4px;
        margin-right: 10px;
        min-width: 140px;
    }

    a#shopping-cart-link:first-child {
        padding: 0px 4px;
        width: 40px;
    }

    #shopping-cart-link img {
        margin-right: 0px;
        height: 30px;
        float: left;
    }

    #shopping-cart-link > div > p {
        margin-left: 44px;
        line-height: 30px;
        display: none;
    }

    #shopping-cart-link div > div {
        left: 30px;
        bottom: 1px;
    }

    .main-content {
        padding-top: 20px;
        margin-bottom: 20px;
        min-height: 0px;
    }

    #nav_bar {
        padding: 4px;
    }

    p#header-contact {
        font-size: 14px;
        float: left;
    }

    footer {
        min-height: 40px;
    }

        footer p {
            font-size: 12px;
        }

    h1 {
        margin-top: 45px;
        font-size: 20px;
    }

    h2 {
        font-size: 20px;
    }

    h3,
    h4,
    h5,
    h6,
    h7,
    h3#order-number-header {
        font-size: 16px;
    }

    #loginForm .control-label {
        font-size: 18px;
    }

    .row-for-h1 {
        margin-bottom: 20px;
    }

    input[type=text],
    input[type=password] {
        padding: 8px 8px;
        margin: 4px 0 10px 0;
        font-size: 14px;
    }

    input[type=button],
    input[type=submit],
    input[type=reset] {
        padding: 8px 24px;
        font-size: 17px;
        border-radius: 4px;
        font-weight: 400;
    }

    #login-button {
        margin-top: 20px;
        margin-bottom: 0px;
    }

    h1#header-logo {
        margin-top: 6px;
        margin-bottom: 6px;
        font-size: 22px;
        color: black;
        font-weight: normal;
    }

        h1#header-logo img {
            height: 18px;
            border: solid 1px #bf0000;
            border-radius: 4px;
            padding: 4px;
            background: #1f1f1f;
            margin-right: 0px;
            margin-bottom: -4px;
        }

    .control-label {
        font-size: 14px;
    }

    input.add-to-cart-link, input.add-to-cart-link:hover {
        font-size: 14px;
        text-align: left;
        background-color: #264093;
        color: white;
        padding: 6px 9px;
        margin-top: 4px;
        font-weight: normal;
    }

        input.add-to-cart-link:hover {
            background-color: #215ecd;
            text-decoration: none;
        }

    .qty-header {
        padding: 8px 20px;
    }

    input.redlink, input.redlink:visited {
        color: black;
        background-color: transparent;
        font-size: 14px;
        padding: 0px;
    }

        input.redlink:hover {
            color: #ff0000;
            background-color: transparent;
            text-decoration: underline;
        }

    #order-placed-header h1 {
        font-size: 18px;
        margin: 2px;
    }

    #order-placed-header h2 {
        font-size: 12px;
    }
}

@media screen and (max-width: 320px) {
    /*h2 {
        font-size: 18px;
    }*/

    .page-header a {
        position: relative;
        margin-bottom: 4px;
        margin-left: 2px;
    }
}


/* Modal Style */

.modal-open {
    overflow: hidden;
}

    body.modal-open,
    .modal-open .navbar-fixed-top,
    .modal-open .navbar-fixed-bottom {
        margin-right: 15px;
    }

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
}

    .modal.fade .modal-dialog {
        -webkit-transform: translate(0, -25%);
        -ms-transform: translate(0, -25%);
        transform: translate(0, -25%);
        -webkit-transition: -webkit-transform 0.3s ease-out;
        -moz-transition: -moz-transform 0.3s ease-out;
        -o-transition: -o-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }

    .modal.in .modal-dialog {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }

.modal-dialog {
    z-index: 1050;
    width: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}

.modal-content {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000000;
}

    .modal-backdrop.fade {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .modal-backdrop.in {
        opacity: 0.75;
        filter: alpha(opacity=50);
    }


.modal-body {
    position: relative;
    padding: 20px;
    margin: 80px auto;
    width: 80%;
    max-width: 500px;
    background-color: white;
}


@media screen and (max-width: 740px) {
    /*.modal-dialog {
        right: auto;
        left: 50%;
        width: 600px;
        padding-top: 30px;
        padding-bottom: 30px;
    }*/
    .modal-body {
        margin: 30px auto 10px auto;
    }
}