@media (max-width: 767px) {
      #kitContainer {
        min-height:350px;
    }
       #kitContainer kitLabels {
   
       max-height: 200px;
     }
      #kitContainer availableLabels {
   
       max-height: 100px;
     }
}

@media (min-width: 768px) and (max-width:991px) {
   
}

@media (min-width: 992px) {
    #kitContainer {
        min-height:750px;
    }
    #kitContainer kitLabels {
   
       max-height: 320px;
   }
    #kitContainer availableLabels {
   
       max-height: 200px;
   }
}


#kitContainer {
    display: -webkit-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 90%;
    width: 100%;
}

#kitContainer kitLabels {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
   
}

#kitContainer kitSummary {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
}

#kitContainer availableLabels {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
}

#shopPageSpinner > os-animated-logo {
    display: block;
    min-height:197px;
    margin: 10% auto 0 auto;
}

#shopPageSpinner .svgSpinnerContainer {
    text-align: center;
}
    .svgSpinnerContainer > svg {
        max-width: 192px;
        max-height: 192px;
    }

.svgSpinnerContainer > svg .tickPath {
    stroke:transparent;
    fill:transparent;
}


.svgSpinnerContainer.animateTick > svg .tickPath {
    stroke-dasharray: 1000;
}    

.svgSpinnerContainer.ticked > svg .tickPath {
    stroke:#fff;
}


.svgSpinnerContainer > svg .st0{fill:#ABAFB4;}
.svgSpinnerContainer > svg .st1{fill:#27588D;}



.svgSpinnerContainer.animateViaCss.spin > svg #grey_cog {
    -webkit-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
            
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
        



.svgSpinnerContainer.animateViaCss.animateTick > svg .tickPath {
    stroke-dashoffset: 1000;
    
}    

.svgSpinnerContainer.animateViaCss.ticked > svg .tickPath {
    stroke:#fff;
    animation: dash 5s linear forwards;
}


@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.spinner-animation {
    line-height: 40px;
    -webkit-transition: 0.2s linear all;
    -moz-transition: 0.2s linear all;
    -o-transition: 0.2s linear all;
    transition: 0.2s linear all;
}

    .spinner-animation.ng-move,
    .spinner-animation.ng-enter,
    .spinner-animation.ng-leave {
    }

        .spinner-animation.ng-leave.ng-leave-active,
        .spinner-animation.ng-move,
        .spinner-animation.ng-enter {
            opacity: 0;
            max-height: 0px;
        }

            .spinner-animation.ng-leave,
            .spinner-animation.ng-move.ng-move-active,
            .spinner-animation.ng-enter.ng-enter-active {
                opacity: 1;
                max-height: 40px;
            }

    .spinner-animation.ng-leave-stagger,
    .spinner-animation.ng-enter-stagger,
    .spinner-animation.ng-move-stagger {
        /* this will have a 200ms delay between each successive leave animation */
        -webkit-transition-delay: 0.1s;
        -moz-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }



/*#region Angular ng-show dissolve animation */
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    position: fixed !important;
    display: inline !important;
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

    .dissolve-animation.ng-hide-remove.ng-hide-remove-active,
    .dissolve-animation.ng-hide-add {
        opacity: 1;
    }

        .dissolve-animation.ng-hide-add.ng-hide-add-active,
        .dissolve-animation.ng-hide-remove {
            opacity: 0;
        }
/*#endregion */


/*#region Slide Left animation*/

.slide-left-animation.ng-animate {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    right: 0;
}

.slide-left-animation.ng-leave.ng-leave-active { /* terminal animations for leave */
    left: 100%;
    right: -100%;
    opacity: 0;
}


.slide-left-animation.ng-enter { /* starting animations for enter */
    left: -100%;
    right: 100%;
    opacity: 0;
}


    .slide-left-animation.ng-leave, /* starting animations for leave */
    .slide-left-animation.ng-enter.ng-enter-active { /* terminal animations for enter */
        left: 0;
        right: 0;
        opacity: 1;
    }
/*#endregion Slide Left animation*/


/*#region Slide Right animation*/

.slide-right-animation.ng-animate {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: absolute;
    left: 0;
    right: 0;
}

.slide-right-animation.ng-leave.ng-leave-active {
    left: -100%;
    right: 100%;
    opacity: 0;
}

.slide-right-animation.ng-enter {
    left: 100%;
    right: -100%;
    opacity: 0;
}

    .slide-right-animation.ng-leave,
    .slide-right-animation.ng-enter.ng-enter-active {
        left: 0;
        right: 0;
        opacity: 1;
    }
/*#endregion Slide Right animation*/




@keyframes shake {
  0% {transform: translateX(0);}
  12.5% {transform: translateX(-6px) rotateY(-5deg)}
  37.5% {transform: translateX(5px) rotateY(4deg)}
  62.5% {transform: translateX(-3px) rotateY(-2deg)}
  87.5% {transform: translateX(2px) rotateY(1deg)}
  100% {transform: translateX(0)}
}

@-webkit-keyframes shake {
  0% {-webkit-transform: translateX(0);}
  12.5% {-webkit-transform: translateX(-6px) rotateY(-5deg)}
  37.5% {-webkit-transform: translateX(5px) rotateY(4deg)}
  62.5% {-webkit-transform: translateX(-3px) rotateY(-2deg)}
  87.5% {-webkit-transform: translateX(2px) rotateY(1deg)}
  100% {-webkit-transform: translateX(0)}
}

.checkoutFlash {
  -webkit-animation: shake 400ms ease-in-out;
  animation: shake 400ms ease-in-out;
}




.questionCountFlash {
    display: block !important;
}

.questionCountFlash-add {
    -webkit-animation: questionCountFlash ease-in 2.5s;
    -moz-animation: questionCountFlash ease-in 2.5s;
    -o-animation: questionCountFlash ease-in 2.5s;
    animation: questionCountFlash ease-in 2.5s;
}

@-webkit-keyframes questionCountFlash {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0.0;
    }
}

@keyframes questionCountFlash {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0.0;
    }
}

button, .btn {
    border:none;
    border-radius: 0;
    text-transform: uppercase;
    padding: 4px 8px 4px 8px;
    white-space: nowrap;
    min-height: 34px;
}

pa-sidebar button,  pa-sidebar button {
    width: 100%;
}

button:hover, .btn:hover {
    border:none;
}

.btn-default:not(.mbsc-ms-item)
{
    color: white;
    background-color: #888;
}

.btn-default:not(.mbsc-ms-item):hover, .btn-default:not(.mbsc-ms-item):active
{
    color: white;
    background-color: #888;
}

.btn-file {
    min-width: 128px;
}

.btn-primary:not(.mbsc-ms-item)
{
    background-color: #0069AA;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active
{
    background-color: #005991;
}


button.dropdown-toggle.btn-primary-green {
    border-left: 1px solid #318E51;
}


.btn-primary-green:not(.mbsc-ms-item)
{
    background-color: #439945;
    color: white;
    border: none;
}

.btn-primary-green:hover, .btn-primary-green:active, .btn-primary-green.active
{
    background-color: #318E51;
}

.btn-secondary {
    color: white;
    background-color: #888;
}

.btn-secondary:hover, .btn-secondary:active
{
    color: white;
    background-color: #777;
}

.btn-action {
    background: #4fa0f8;
    color: white;
}

.btn-action:hover, .btn-action:active
{
    background-color: #3693f7;
    color: white;
}

.btn.btn-transparent, .btn.btn-transparent:hover {
    background-color: transparent;
    border:none;
    padding: 4px 8px 4px 8px;
}

.btn-subtle-green
{
    background-color: green;
    color: white;
}

.btn-subtle-green:hover, .btn-subtle-green:active
{
    background-color: limegreen;
    color: black;
}

.btn-subtle-red
{
    background-color: red;
    color: white;
}

.btn-subtle-red:hover, .btn-subtle-red:active
{
    background-color: tomato;
    color: black;
}

button.btn {
        height: inherit;
        padding: 4px 8px;
    }

.modal-footer .btn {
    min-height: 34px;
}

.panel-heading button.btn {
    min-height: inherit;
}
@media (max-width : 1199px) {
    button.btn, a.btn  {
        min-height: 38px;
    }

        a.btn > i {
            margin: 7px 0;
        }

    .modal-footer .btn {
        min-height: 38px;
    }
}

.btn > svg {
  	max-width: 14px;
    min-width: 8px;
    max-height: 26px;
	vertical-align: middle;
}

    
button.transparent, .btn.transparent {
    color: #0F76BC;
    background-color: transparent;
}
button.transparent:hover, .btn.transparent:hover {
    background-color: #EDEFEF;
}


button.dropdown-toggle.blue {
    border-left: 1px solid #005991
}
    
button.blue, .btn.blue {
    color: white;   
    background-color: #0069AA;
}

button.blue:hover, .btn.blue:hover {
    background-color: #005991;
}

button.dropdown-toggle.gray {
    border-left: 1px solid #AFB1B2
}

button.gray, .btn.gray {
    color: black;
	background-color: #D8DCDF;
}
button.gray:hover, .btn.gray:hover {
    background-color:  #AFB1B2;
}
    
button.dropdown-toggle.orange {
    border-left: 1px solid #E48A27
}

button.orange, .btn.orange {
    color: white;
	background-color: orange;
}
button.orange:hover, .btn.orange:hover {
	background-color: #E48A27;
}

button.dropdown-toggle.green {
    border-left: 1px solid #134C27
}

button.green, .btn.green {
    color: white;
	background-color: #116E37;
}
button.green:hover, .btn.green:hover {
	background-color: #134C27;
}

button.dropdown-toggle.lightGreen {
    border-left: 1px solid #0F6333
}

button.lightGreen, .btn.lightGreen {
    color: white;
	background-color: #0F8F46;
}
button.lightGreen:hover, .btn.lightGreen:hover {
	background-color: #0F6333;
}

button.dropdown-toggle.red {
    border-left: 1px solid #C42130
}

button.red, .btn.red {
    color: white;
	background-color: #E5202E;
}
button.red:hover, .btn.red:hover {
	background-color: #C42130;
}

button.dropdown-toggle.darkOrange {
    border-left: 1px solid #D86F27
}

button.darkOrange, .btn.darkOrange {
    color: white;
	background-color:  #f7941e;
}
button.darkOrange:hover, .btn.darkOrange:hover {
	background-color:  #D86F27;
}

button.dropdown-toggle.lightBlue {
    border-left: 1px solid #3D6Da0
}

button.lightBlue, .btn.lightBlue {
    color: white;
	background-color: dodgerblue;
}
button.lightBlue:hover, .btn.lightBlue:hover {
	background-color: #3D6Da0;
}

.miniSizeButton{
    min-height: 12px;
}

@media (max-width: 768px) {
    .modal-footer .dropdown-toggle {
        max-width: 32px;
    }
}


@media (min-width: 992px) {
        .cartContainer {
                    display: flex;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    overflow-y: auto;
                    overflow-x: hidden;
                }
          
            div .cartItems {
                -ms-flex:2;
                -webkit-flex:2;
                flex: 2;
            }

            div.cartTotal {
                margin-right: 20px;
            }

            .cartTotal { 
                -ms-flex:1;
                -webkit-flex:1;
                flex: 1;
            }

            div > div.cartTotal-wrapper{
                width: 380px;
                border: solid 3px #0069aa;
            }

            .cartTotal-wrapper {
                position: fixed;
            }
}

@media (max-width: 991px) {
        .cartContainer {
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
        }
}
@media (max-width: 767px) {
        div.cartTotal {
        padding-left: 6px;
        padding-right: 6px;
    }
}






#cartSummary .row > .col-xs-1, #cartSummary .row > .col-xs-2, #cartSummary .row > .col-xs-3, #cartSummary .row > .col-xs-4, #cartSummary .row > .col-xs-5, #cartSummary .row > .col-xs-6, #cartSummary .row > .col-xs-7, #cartSummary .row > .col-xs-8, #cartSummary .row > .col-xs-9, #cartSummary .row > .col-xs-10, #cartSummary .row > .col-xs-11, #cartSummary .row > .col-xs-12 {
    padding-left: 4px;
    padding-right: 4px;
}

#cartSummary .cartIcon {
    direction: rtl;
}
#cartSummary .cartItems {
    font-size: 11px;
    border: 1px solid #ccc;
}

    #cartSummary .cartItems > .row {
        border-bottom: solid 1px #eee;
    }
    #cartSummary .cartItems > .row:nth-of-type(2n+1) {
        background-color: #fcfcfc;
    }

    #cartSummary .cartItems > .row:hover {
        background-color: #eee;
    }

    #cartSummary .cartItems > .row:last-of-type {
        border-bottom: none;
        margin-top: 2px;
    }

#cartSummary .stickerNumber {

    font-weight: bold;
    color: #0069AA;
    /*direction: rtl;*/
}

#cartSummary .stickerName {
    overflow: hidden;
}

#cartSummary .stickerQuantityLabel {
    font-weight: bold;
    /*direction: rtl;*/

}

#cartSummary .stickerQuantity {
    font-weight: bold;
}

#cartSummary .stickerPrice {
    font-weight: bold;
}

#cartSummary .totalPrice {
    font-weight: bold;
    margin: 4px;
}

#cartSummary .stickerRemoveButton {
    text-align: left;
}

    #cartSummary .stickerRemoveButton > button {
        color: black;
        text-transform: lowercase;
    }

#cartSummary .panel-default.panel-open > .panel-heading {
	border-bottom: none;
}

#cartSummary .panel-heading > .panel-title > a:hover, #cartSummary .panel-heading > .panel-title > a:focus {
    text-decoration: none;
}

#cartSummary .panel-heading > .panel-title > a > span > div {
    background-color: #439945;
}

#cartSummary .panel-heading > .panel-title > a > span > div:hover {
    background-color: #318E51;
}

#cartSummary .panel-group {
    margin-top: 8px;
}

#cartSummary .panel-group > .panel > .panel-heading {
    color: #0069AA;
    background: inherit;
    font-size: 16px;
    font-weight: bold;
}


#cartSummary .panel-group .panel-heading + .panel-collapse > .panel-body {
	border: none;
	margin-bottom: 16px;
	padding-left: 0;
	padding-right: 0;
}


#cartSummary .panel-group > .panel > .panel-collapse {
    border: none
}


/*#checkoutContainer {
    display: -webkit-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    width: 100%;
}*/

.panel-title {
    font-size: 14px;
}

.panel-group > .panel > .panel-heading {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background-color: #0069aa;
	border-color: silver;
}

.panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div {
    padding: 10px;
    color: white;
    text-transform: uppercase;
}

    .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div:hover {
        background-color: #005991;
    }

    .panel:not(.questioncategory) > .panel-heading > .panel-title > a:hover, .panel:not(.questioncategory) > .panel-heading > .panel-title > a:focus {
        text-decoration: none;
        outline: none;
    }


.panel.questioncategory > .panel-heading > .panel-title > a > span > div {
    border-top: 1px solid silver;
}

.panel-group .panel {
	border-radius: 0;
}

.panel-group {
    margin-bottom: 0;
}

div[data-toggle="collapse"] > H4 {
   cursor: pointer;
}

.panel:not(.mbsc-ms-c) {
    box-shadow: inherit;
    border: none;
    background-color: transparent;
}

.panel-collapse {
    border: solid 1px silver;
    border-top: none;
}

    .panel-collapse.in.collapse {
        padding: 0;
    }

.panel-group > .panel > .panel-heading .badge {
    background-color: #0069AA;
    color: white;
    margin-top: -3px;
}

/* Double definition to make it more specific over the default bootstrap one*/
uib-accordion > .panel-group > .panel > .panel-heading, uib-accordion > .panel-group > .panel > .panel-heading {
    padding: 0;
}

.clearAccordionHeaders .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div {
    border-top: none;
}

    .clearAccordionHeaders .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div:first-of-type {
        border-top: 1px solid silver;
        color: black;
    }

    .clearAccordionHeaders .panel:not(.questioncategory) > .panel-heading > .panel-title > a > span > div:hover {
        background-color: transparent;
    }

uib-accordion > .panel-group > .panel > .panel-collapse, uib-accordion > .panel-group > .panel > .panel-collapse {
    border: solid 1px silver;
    border-top: none;
}

.clearAccordionHeaders > .panel-group > .panel > .panel-heading {
    color: black;
    background: inherit;
}

.clearAccordionHeaders > .panel-group > .panel > .panel-collapse {
    border: none;
}

.clearAccordionHeaders fieldset legend label {
    font-size: 16px;
}

.zeroAccordionMargin > .panel-group > .panel + .panel {
    margin: 0;
}

.zeroAccordionMargin > .panel-group {
    margin: 0;
}

.zeroAccordionPadding > .panel-group > .panel > .panel-collapse > .panel-body {
    padding: 0;
}

.zeroAccordionHeaderPadding > .panel-group  > .panel > .panel-heading > .panel-title > a > span > div{
    padding: 12px 0 3px 0;
}
    .zeroAccordionHeaderPadding > .panel-group > .panel > .panel-heading > .panel-title > a > span > div > i {
        padding: 3px 3px 3px 3px;
        font-size: 13px;
        margin-top: 0;
    }

.primaryAccordion > .panel-group  > .panel > .panel-heading > .panel-title > a > span > div {
    color: #0069AA;
    font-weight:bold;
    border-top: none;
    padding: 12px 0 2px 2px;
    border-bottom: solid 2px #0069AA;
    background: white;
}

    .primaryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > div > i {
        background: #0069AA;
        color: white;
    }

.primaryAccordion > .panel-group  > .panel > .panel-heading > .panel-title > a:hover, .primaryAccordion .panel > .panel-heading > .panel-title > a:focus {
    text-decoration:none;
}

uib-accordion.borderNone > .panel-group > .panel > .panel-collapse {
	border: none;
}

uib-accordion.borderNone > .panel-group > .panel > .panel-collapse >.panel-body {
	border-top: none;
}


@media (min-width: 992px) {
        .confirmationContainer {
            display: flex;
            display: -ms-flexbox;
            display: -webkit-flex;
            overflow-y: auto;
            overflow-x: hidden;
        }
          
                 
        div .orderInfo {
            -ms-flex:2;
            -webkit-flex:2;
            flex: 2;
        }
}

@media (max-width: 991px) {
        .confirmationContainer {
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
       }
}














.form-container {
    padding: 0;
    display: inline-block;
    width: 100%;
}

.text-info {
    color: black;
}

.control-label {
    margin-bottom: 0;
    /* padding-left: 0; */
    /* padding-right: 0; */
}

textarea.form-control {
    padding: 4px 8px;
}

select.form-control {
    padding-left: 4px;
    height: 34px;
}

.form-control {
    vertical-align: middle;
    /* border: 1px solid #aaa; */
    border-radius: 0;
    padding: 0;
    padding-left: 8px;
    min-height: 34px;
}


    .form-control.input[type="submit"] {
        background: #2d90df;
        color: #fff;
        border: #abb4ba solid 1px;
    }

        .form-control.input[type="submit"]:hover {
        }

@media (max-width: 767px) {
    input.form-control, select.form-control {
        min-height: 42px;
    }

    .form-control-height {
        min-height: 42px;
    }
}

.form-group > div > .checkbox {
    margin-top: 3px;
    margin-left: 0;
}

@media (max-width: 991px) {
    .form-horizontal .radio, .form-horizontal .checkbox {
        min-height: 32px;
        margin: 8px 4px;
    }
}

@media (min-width: 992px) {
    .control-label {
        height: 35px;
        padding-top: 7px;
        padding-right: 8px;
    }
}

/* Kendo UI Inputs*/
.k-input {
    height: 28px !important;
    padding: 0 !important;
}

.form-group .k-dropdown {
    width: 100%;
}

.form-group .k-dropdown-wrap {
    border-radius: 0;
}

.k-picker-wrap {
    border-radius: 0;
    border-width: 0;
    border: none;
}

    .k-picker-wrap > .k-input {
        margin: 0 !important;
    }

.form-control.k-datepicker {
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.noBoldLabels label {
    font-weight: normal;
}


.checkmarkChecked::after {
    color: green;
    content: "\f00c";
}

.checkmarkCrossed::after {
    content: "\f00d";
    color: Gainsboro;
}


.inputWithInnerButton > pa-filtered-dropdown, .inputWithInnerButton > div, .inputWithInnerButton > input {
    display: inline-block;
    position: static;
}

.inputWithInnerButtonAdd > div, .inputWithInnerButtonAdd > input {
    margin-right: -64px;
}

    .inputWithInnerButtonAdd > div > input {
        padding-right: 64px;
    }

@media (min-width: 768px) {
    .inputWithInnerButtonClear > pa-filtered-dropdown, .inputWithInnerButtonClear > input {
        margin-right: -81px;
    }


        .inputWithInnerButtonClear > pa-filtered-dropdown > input {
            padding-right: 81px;
        }
}



.inputWithInnerButton button {
    margin-top: 2px;
}

@media (min-width: 768px) {
    .inputWithInnerButton button {
        margin-top: 2px;
        min-height: 30px;
    }
}

.osFilteredDropdown {
    border: solid 1px black;
    overflow: auto;
    height: auto;
    padding: 8px;
    line-height: 26px;
    z-index: 11140;
}

@media (min-width: 768px) {
    .osFilteredDropdown {
        position: absolute;
        max-height: 276px;
        width: 94%;
    }
   
}

@media (max-width: 767px) {
    .focussed[os-filtered-dropdown] {
        width: 100%;
        max-height: 80vh;
        display: -ms-flexbox;   
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        float: left;
    }

        .focussed[os-filtered-dropdown] > .osFilteredDropdown {
            margin-top: 4px;
            width: 100%;
        }

        .focussed[os-filtered-dropdown] button {
            position: absolute;
            top: 42px;
            right: 2px;
            border: none;
            vertical-align: top;
            height: 32px;
            z-index: 1070;
        }

        .focussed[os-filtered-dropdown] > .osFilteredDropdown > div {
            padding: 4px;
        }

    .osFilteredDropdownInputContainer {
        min-height: 42px;
    }

    .osFilteredDropdownSelectContainer {
        -ms-flex: 1 auto; /* IE10 SUpport */
        -webkit-flex: 1 auto;
        flex-grow: 1;
    }

    os-filtered-dropdown > button {
        margin-top: -40px;
    }
}

.osFilteredDropdown > div {
    width: 90%;

    cursor: pointer;
}

.osFilteredDropdown > div:hover {
    font-weight: bold;
}

.osFilteredDropdown > .selected {
    font-weight: bold;
}

.osFilteredDropdown > div > span {
    font-weight: bold;
}


@media (max-width : 767px) {
    .imageFillContainer img {
    flex-shrink:0;
    min-width:100%;
    }
    .xs-image-small-margin {
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 8px !important;
    }
}

@media (min-width : 768px) {
    .imageFillContainer img {
        flex-shrink:0;
        min-width:100%;
        max-height:472px;
        border: 2px solid;
        border-color: transparent;
    }

    .imageFillContainer img:hover {
        border-color: #0069AA;
    }
}

.imageContainerWithSearchPlusIcon {
    content: "\f00e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}
.imageFillContainer{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.profilePic {
    margin: 4px 2px;
    max-width: 76px;
}

.unitPhoto {
    max-width: 192px;
    max-height: 192px;
}


.logoPic {
    max-width: 40px;
    max-height: 40px;
}

.companyLogoCog {
    max-width: 64px;
    max-height: 64px;
}

.companyLogo {
    width: 100%;
    max-width: 192px;
    max-height: 130px;
}

.assessmentDocumentThumbnail {
    max-width: 64px;
    max-height: 64px;
    font-size: 40px;
}

.img-responsive.imageGallery {
    max-width: 100%;
}

.modalImageCloseButton {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent;
}

.modalImageRightButton {
    position: absolute;
    top: 50%;
    right: 5px;
    background-color: black;
}

.modalImageLeftButton {
    position: absolute;
    top: 50%;
    left: 5px;
}

.galleryImageDesc {
    position: absolute;
    padding: 5px;
    top: 10%;
    color: white;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.imageGalleryBorder {
    border: solid 1px white;
    height: 100vh;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    /* width: 100vw; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* display: inherit; */
}

@media (max-width : 767px) {
    .companyLogo {
        width: 192px;
        /*max-width: 64px;*/
        /*max-height: 44px;*/
    }

    img[src="content/images/placeholder.png"] {
        display: none;
    }
}


.imageContainer {
    float: left;
    margin-right: 10px;
    min-height: 40px;
    min-width: 64px;
    text-align: center;
}


.profile-pic-container {
    margin-bottom: 15px;
    text-align: center;
}

td > .placeholderImage {
    max-width: 40px;
}

.placeholderImage {
    max-width: 192px;
}

.profilePic.placeholderImage {
    max-height: 40px;
}

@media (min-width: 768px) {
    .nav-container {
        float: right;
    }

    .profile-pic-container {
        float: right;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

ul.galleryNav {
    background-color: black;
    list-style-type: none;
    text-align: center;
    bottom: 10px;
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    width: 100%;
    z-index: 5;
}

    ul.galleryNav li {
        border: 2px solid #ffffff;
        cursor: pointer;
        display: inline-table;
        height: 30px;
        margin: 0 8px;
        position: relative;
        width: 50px;
        bottom: 5%;
    }

        ul.galleryNav li.active {
            border: 2px solid #4cff00;
        }

        ul.galleryNav li img {
            width: 100%;
        }


.kitContainer {
    display: -ms-flexbox;   
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    min-height: 700px;
}

.kitContainer > os-kit {
    padding: 2px;
    flex-grow: 0;
}

.osKit {
    border: 1px solid #ccc;
    margin: 1px;
    width: 100%;
    height: 100%;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.osKit > div:nth-of-type(2) {
    min-height: 48px;
}

.osKit {
    border: 1px solid #ccc;
    margin: 1px;
    width: 100%;
}

div.osKit:hover, div.osKit:focus {
    background-color: #eee;
    border: 2px solid forestgreen;
    margin:0;
}

div.osKit:hover i{
     color:  forestgreen;
}

div.osKit:hover button{
     background-color:  forestgreen;
}



@media (max-width: 767px) {
    .kitContainer {
        justify-content: center;
        padding: 0;
        -ms-align-content: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }

     .kitContainer > os-kit {
        width: 100%;
        padding-bottom: 4px !important;
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .kitContainer > os-kit {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .kitContainer > os-kit {
        width: 33%;
    }
}

.osKit.fadeIn {
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.osKit > .row > .col-xs-1, .osKit > .row > .col-xs-2, .osKit > .row > .col-xs-3, .osKit > .row > .col-xs-4, .osKit > .row > .col-xs-5, .osKit > .row > .col-xs-6, .osKit > .row > .col-xs-7, .osKit > .row > .col-xs-8, .osKit > .row > .col-xs-9, .osKit > .row > .col-xs-10, .osKit > .row > .col-xs-11, .osKit > .row > .col-xs-12 {
    padding-left: 8px;
    padding-right: 8px;
}


.osKit .kitImage {
    direction: rtl;
}

    .osKit .kitImage > img {
        min-height: 90px;
        max-width: 180px;
    }

    .osKit .kitImage.defaultProductImage > img {
        max-height: 96px;
    }


.osKit .kitNumber {
    font-size: 1.1em;
    font-weight: bold;
    color: #0069AA;
    direction: rtl;
}

.osKit .kitName {
    font-weight: bold;
}

.osKit .kitPrice {
    font-weight: bold;
    text-align: right;
    font-size: 1.1em;
}

.osKit .bulkPrice {
    text-align: right;
    font-size: 0.75em;
}



.osKit .altRow {
    /*background-color: #F4F8FC;*/
}

.osKit .quantityInput {
    padding-left: 8px;
    padding-right: 8px;
}

.osKit .quantityInput > input {
    text-align: center;
    margin: 0;
}

.osKit .quantityButton {
    color: #0069AA;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
}

.osKit .addToCartButton {
    padding-left: 8px;
}

    .osKit .addToCartButton > button {
        height: 34px;
        width: 100%;
    }

.kitStickers {
    font-size: 0.8em;
    margin: 8px 0;
}


#kitCategoryList .categoryHeader {
    color: #EB5824;
}

#kitCategoryList .categoryHeader + i {
    color: #EB5824;
}


#kitCategoryList .square {
    background-color: #EB5824;
}




.labelTable {
    margin-bottom: 0;
}

    .labelTable > thead > tr > th {
        color: #0069AA;
        border-bottom: solid 1px #0069AA;
    }

    .labelTable > tbody > tr > td {
        border-top: none;
        padding: 2px 8px;
    }

html {
    height: 100%;
}

body {
   
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    font-weight: 300;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #333;
    text-rendering: optimizeLegibility;
}


#wrap {
    display: flex;
    display: -ms-flexbox;
    flex-grow: 1;
    
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow-y:scroll;
}
@media (max-width: 767px) {
    #wrap > div {
        padding: 4px;
        width: 100vw;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #wrap > div {
        margin: 0;
        flex-grow: 1;
    }
}


@media print {
    #wrap {
        min-height: 100%;
    }
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.container {
    padding: 0;
}


@media print {
    .container {
        padding: 0;
    }
}


header {
    border: 0;
}

footer {
   border-top: 1px solid #ccc;
	color: #777;
	line-height: 28px;
	font-size: 9px;
	font-size: 11px;
}

.footer-text {
    margin: 0;
    text-align: right;
    display: inline;
    font-size: 11px;
}

@media (min-width: 768px) {
    body {
        overflow: hidden;
    }
    .footer-text {
        float: right;
    }
}

.title {
    display: inline;
    float: left;
}

.title-primary {
    color: #005991;
    font-weight: bold;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.contentBox {
    padding: 0;
    margin-top: 0;
    padding-bottom: 0;
}

.collapse-header {
    margin-top: 10px;
    padding: 5px 15px;
    background-color: #2d90df;
    color: #ffffff;
    cursor: pointer;
}

.info-container .info-title {
    font-weight: bold;
}

.info-container .info-detail {
    font-weight: bold;
}

.info-container .info-detail-title {
    margin-right: 5px;
    font-weight: normal;
}


.btn-file input[disabled] {
    cursor: not-allowed;
}


.minimalPadding {
    padding: 2px !important;
}

.minimalMargin {
    margin: 2px !important;
}

.minimalVerticalMargin {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}


fieldset legend {
    margin-bottom: 4px;
}

.mediumMargin {
    margin: 10px !important;
}

.smallMargin {
    margin: 8px !important;
}

.minimalHorizontalPadding {
    padding-left: 2px !important;
    padding-right: 2px !important;
}


.smallHorizontalPadding {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.minimalVerticalPadding {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.smallVerticalPadding {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.smallVerticalTopPadding {
    padding-top: 4px !important;
}

.smallVerticalBottomPadding {
    padding-top: 4px !important;
}
.mediumVerticalBottomPadding {
    padding-bottom: 8px !important;
}

.mediumVerticalTopMargin {
    margin-top: 8px !important;
}

.minimalLeftPadding {
    padding-left: 2px !important;
}

.minimalRightPadding {
    padding-right: 2px !important;
}

.minimalLeftPaddingOnly {
    padding: 0  0 0 2px !important;
}

.minimalRightPaddingOnly {
    padding: 0 2px 0 0 !important;
}


.zeroPadding {
    padding: 0 !important;
}

.zeroPaddingRight {
    padding-right: 0 !important;
}

.zeroHorizontalPadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.zeroVerticalPadding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.zeroMargin {
    margin: 0 !important;
}

.panel-body {
    padding: 0;
    border: none;
}

.text-bold {
    font-weight: bold;
}

@media (max-width: 767px) {
    h4 {
        font-size: 16px;
    }
}

@media print {

    .mainbar {
        padding-top: 0 !important;
    }
}


@media (min-width: 768px) {

    .column-container {
        display: table;
    }

        .column-container .column {
            display: table-cell;
            vertical-align: middle;
            float: none;
        }

    .info-container .info-detail .info-detail-title {
        margin-left: 0;
        margin-right: 5px;
    }
}

@media (min-width: 992px) {

    .info-container .info-detail .info-detail-title {
        margin-left: 0;
        margin-right: 5px;
    }

    .collapse-header {
        margin-top: 0;
        padding: 0;
        color: #0069aa;
        cursor: pointer;
        background-color: transparent;
    }

    .collapse-content {
        padding-top: 10px;
    }

    .info-detail-title {
        margin-left: 5px;
    }
}


.paBlue {
    color: #0069aa !important;
}

.paBlueBorder {
    border-color: #0069aa;
}

.background-red {
    color: red;
}

.background-white {
    color: white;
}

.background-black {
    color: black;
}

.background-orange {
    color: darkOrange;
}

.background-green {
    color: green;
}

input:-ms-input-placeholder {
    color: lightgray;
}

.form-group {
    margin-bottom: 8px;
}

.vertical-align {
    display: -ms-flexbox;   
    display: flex;
    align-items: center;
    vertical-align: middle !important;
}

.clickable {
    cursor: pointer;
}

    .clickable:hover {
        text-decoration: none;
    }

.line-height-32 {
    line-height: 32px !important;
}

.line-height-64 {
    line-height: 64px !important;
}

.borderSingleSubtle {
    border: 1px solid silver;
}

fieldset.zeroMargin > div.form-group {
    margin-left: 0;
    margin-right: 0;
}

.noTextWrapping {
    white-space: nowrap;
}

.redirectToLogin > .fa-lock {
    font-size: 1.1em;
}

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

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

.text-left {
    text-align: left !important;
}

form i {
    font-size: 24px;
    color: #0069aa;
    width: 22px;
    line-height: 16px;
    vertical-align: bottom;
    position: absolute;
    padding-top: 10px;
    margin-top: -4px;
    margin-left: 4px;
    text-align: right;
}

.form_field_label_error {
    display: inline;
    color: red !important;
    font-size: 16px !important;
}

    .form_field_label_error i {
        position: relative;
    }

.form_field_label_valid {
    display: none;
}

.validation-summary-errors {
    color: red !important;
}

/**
    make default bootstrap button with shop view product requirement
     */

/**
    make input field and button has same height
     */
/*


/**
 * Firefox Fix
 * Without that the submit button will be too high.
 */
.submit::-moz-focus-inner {
    border: 0;
}
/*20160113 QTY> input number > button add to cart*/

.inputWrapper {
    margin-left: 10px;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 16px;
    border: 1px solid lightgray;
    border-right-style: none;
    background-color: #ffffff;
}

.inputWrapperInput {
    margin: 0;
    margin-left: 1px;
    padding: 5px;
    border-width: 0 1px;
}

.inputWrapperButton {
    margin: -1px;
    margin-left: 2px;
    padding: 6px;
    border-width: 0;
    color: #ffffff;
    font-size: 15px;
    background-color: #0069AA;
}

    .inputWrapperButton:hover, .inputWrapperButton:active, .inputWrapperButton.active {
        background-color: #005991;
    }

.imageContainerWithSearchPlusIcon {
    content: "\f00e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

.vcenter {
    vertical-align: middle !IMPORTANT;
}


.opaque {
    opacity: 0;
}


.borderNone {
    border: none !important;
}


.fontSize14 {
    font-size: 14px;
}

.fontSize10 {
    font-size: 10px;
}

.fontNormal {
    font-weight: 100;
}

.indexBanner {
    background-image: url('/PlantAssessor/content/shop/shop/images/shop-topbanner.jpg');
    background-repeat: no-repeat;
    font-size: 16px;
    border: 2px solid #0069AA;
    padding: 12px;
}

.indexBannerRow {
    margin-top: 16px;
    margin-bottom: 16px;
}

.indexLink:hover {
    outline: 1px solid #0069Aa;
}

.padding-left-18px{
    padding-left:18px;
}

.mainSpacer {
    margin-left: 24px;
}

.padding-left-14px{
    padding-left:14px;
}

.padding-top-8px{
    padding-top: 8px;
}

.padding-bottom-10px{
    padding-bottom: 10px;
}


.standardRowBottomMargin {
    margin-bottom: 15px;
}

.standardRowTopMargin {
    margin-top: 15px;
}

.doubleRowTopMargin {
    margin-top: 30px;
}




#loginContainer {
    display: -webkit-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}


.silverBorderBottom {
    border-bottom: 1px solid silver;
}


.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 30px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.categoryDescription {
    color : black !important;
    font-weight: normal !important;
}

.categoryDescription > i {
    padding-top: 8px !important;
}


.categoryHeader > i {
    padding-top: 8px !important;
}

/* Allow for fixed menu bar */
@media (min-width: 1200px) {
    .navbar-fixed-top {
        border-bottom: solid 1px #ccc;
        position: relative;
        width: 100vw;
    }
}

.changeAccountLink {
    min-width: 17px;
}

.changeAccountLinkSelected {
    margin-left: -17px;
    min-width: 17px;
}

 .page-Header-Wrapper {
        margin-top: 72px;
    }
.menubar {
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    line-height: 38px;
    background: black;
    color: white;
    text-transform: uppercase;
}

.current {
    background-color: #fff;
    color: #0069aa !important;
}

.menu-icon {
    width: 32px;
    text-align: center;
    font-size: 200%;
    line-height: 50px !important;
    padding: 0 4px;
    display: table-cell;
}

.sidebar-dropdown {
    display: none;
    width: 100%;
    text-align: center;
}

.nav-tabs.nav-justified > li {
    vertical-align: middle;
}

.navbar {
    margin-bottom: 0;
    min-height: 32px;
    border: none;
    border-bottom: solid 1px #ccc;
}

@media print {
    body {
        padding-top: 0 !important;
    }

    .navbar {
        display: none;
    }
}

@media (max-width: 767px) {
    .sidebar-filler {
        display: none;
    }

    .sidebar .sidebar-inner {
        height: inherit;
    }

    .sidebar {
        float: none;
        width: 100%;
        padding-bottom: 1px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .sidebar .sidebar-dropdown {
            display: block;
            height: 35px;
        }

        .sidebar .sidebar-widget {
            text-align: center;
        }
}

.navbar-collapse {
    border-top: none;
}

.navbar-nav {
    border-right: solid 1px;
}


@media (min-width: 768px) {
    .navbar-nav {
        border: none;
        border-color: #005991;
        margin-top: 0;
    }
}


.navbar-nav > li > a {
    font-weight: bold;
    background-color: white;
    color: #337ab7;
    text-align:center;
}
 
#shopTopMenu .navbar-nav > li > a.active {
    color:white;
    background-color: #337ab7;
}


#shopTopMenu{
  border: none;
  background-color: white;
}

#shopTopMenu .navbar-nav > li {
    cursor: pointer;
    border-left: solid 1px lightgray;
    width: 25%;
}


#shopTopMenu .navbar-nav > li:last-child{
    border-right: solid 1px lightgray;
}       

#shopTopMenu .navbar-nav > li > a {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}

    #shopTopMenu .navbar-nav > li > a:hover {
        background-color: #eee;
        border-bottom-color: #0069AA;
        color: #0069AA;
    }


    #shopTopMenu .navbar-nav > li > a.cartCheckout:hover {
        border-bottom-color: forestgreen;
    }
       
#shopTopMenu .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    color: white;
    background-color: #005991;
    border-color: #005991;
}


.navbar-header .navbar-toggle {
    margin-top: 17px;
    border: none;
    background-color: #0069aa;
    margin: 4px;
}

    .navbar-header .navbar-toggle .icon-bar {
        background-color: #ffffff;
    }

.navbar-header .navbar-header-logo {
    margin: 5px 0 5px 15px;
    float: left;
}

    .navbar-header .navbar-header-logo img {
        height: 60px;
    }

.navbar-current-company {
    float: left;
    margin-left: -13px;
    margin-top: 3px;
}

.header-company .header-company-logo {
    display: none;
    padding: 5px;
}

.header-company .collapse-header {
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
}

.username-display {
    margin-top: 14px;
    padding: 0;
    border: none;
    background: white;
    color: green;
    text-align: right;
    font-weight:bold;
}

.usercompany-display {
    margin-top: 0;
    padding: 0;
    border: none;
    background: white;
    color: green;
    text-align: right;
    font-size: 10px;
}

.dropdown-menu {
    background-color: #0069aa;
    border: none;
    border-radius: 0;
}

    .dropdown-menu li > a {
        color: #0069aa;
    }

        .dropdown-menu li > a:hover {
            background-color: silver;
            color: #0069aa;
        }


@media (min-width: 992px) {

    .dropdown-menu li > a {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .dropdown-menu li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

.dropdown-header {
    color: #fff;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #ffffff;
    }


.mbsc-ms-c {
    text-align: left !important;
}

.mbsc-ms-a {
    height: 64px;
    border-bottom: solid 1px #cccccc;
    z-index: 1049; /* Modal windows are 1050, we want it to hide behind modals*/
}

.mbsc-ms-a .mbsc-ms-icons {
    height: 64px;
}

.mbsc-ms-item.mbsc-btn:not(.mbsc-ms-item-sel) {
    color: #0069aa;
}


@media (min-width: 768px) {

    .navbar-nav > li > a {
        padding: 10px 8px;
        border-top: none;
        font-weight: bold;
        text-transform: uppercase;
    }

    .navbar-nav.navbar-right:last-child {
        margin-right: 0;
    }

    .navbar-collapse {
        padding: 0;
    }

    .navbar-header {
        display: none;
    }

        .navbar-header .navbar-header-logo {
            display: none;
        }

    .header-company .header-company-logo {
        display: table-cell;
    }    
}

.mbsc-ms-icons .mbsc-ms-item-i-c {
    padding-top: 0;
    padding-bottom: 0;
    color: #0069aa;
}

.mbsc-ms-icons .mbsc-ms-item-sel .mbsc-ms-item-i-c {
    color: white;
}

@media(min-width: 992px) {
    .navbar-nav > li > a {
        padding: 10px 16px;
    }
}

.modal {
    display: -ms-flexbox !important;
    display: flex !important;
}


.modal-dialog {
    display: -ms-flexbox;
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
    align-items: stretch;
}


.modal-content {
    border: none;
    border-radius: 0;
    width: 100%;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: stretch;
    display: -ms-flexbox;
    display: flex;
}


@media (min-width: 768px) and (max-width: 1199px) {
    .modal-content {
        margin: 4px;
    }
}




@media (min-width: 1200px) {
    .modal-content > section {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        border: 1px solid;
    }
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}


.modal-header {
    background-color: #FFF;
    color: #0069aa;
    /* padding-top: 8px; */
    /* padding-bottom: 6px; */
    padding: 2px;
    /* min-height: 46px; */
    border-bottom: none;
    flex-shrink: 0;
}

    .modal-header svg {
        vertical-align: middle;
        max-width: 32px;
    }


.modal-header-content {
    margin: 4px;
}

.modal-title {
    line-height: 40px;
}


.modal-body .form-horizontal .form-group {
    margin-top: 12px;
    /* margin-left: -8px; */
    /* margin-right: -8px; */
}



@media (min-width: 768px) {
    .modal-title {
        white-space: nowrap;
    }
}

.modal-header-icon {
    margin: 4px;
    font-size: 300%;
}


.modal-header-image {
    height: 91px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.modal-header-text {
    margin: 29px;
    margin-left: 15px;
    font-size: 200%;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-button-spacer {
    padding-left: 32px;
}

@media (min-width: 768px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 768px;
    }
}

@media (min-width: 992px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 992px;
    }
}


@media (min-width: 1200px) {
    .modal-xl > .modal-dialog {
        max-width: 1170px;
        width: 1170px;
    }
}


@media (max-width: 767px) {
    .modal-dialog {
        margin: 0;
        width: 100vw;
    }

    section > .modal-header {
        padding: 0;
    }

    .modal-content > .mainbar {
        padding-top: 0;
    }
}

.modal-body {
    border-top: none;
    padding: 0;
    overflow-y: auto;
    background-color: white;
    /* padding-top: 8px; */
    -ms-flex: 1 auto;
    -webkit-flex: 1 auto;
    flex: 1 auto;
    flex-grow: 1;
    min-height: 387px;
}

/*.modal-content:not(.ios) > section:first-of-type {
    height: 100%;
}*/

.modal-body > fieldset {
    padding: 8px;
}

.modal-content > section:first-of-type {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1;
    -webkit-flex: 1 1;
    flex: 1 1;
    flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.modal-footer {
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FFF;
    color: inherit;
    border-color: #a9a9a9;
    text-align: right;
    flex-shrink: 0;
}

    .modal-footer.form-inline > div > .checkbox {
        font-size: 14px;
    }

        .modal-footer.form-inline > div > .checkbox input {
            margin-right: 5px;
        }


.modal-lg {
    max-width: 700px;
}

/*Only show blur on desktop PCs, performance isn't great on ipads etc*/
/* Removed for Performance Reasons
@media (min-device-width: 1025px) {
    .modal-open > #wrap {
        filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        -moz-filter: blur(4px);
        -webkit-filter: blur(4px);
    }
}*/


@media (max-width : 767px) {

    .modal-footer {
        padding: 4px;
        min-height: 47px;
    }
        /* button styles for phone widths*/
        .modal-footer .btn, .modal-footer .btn + .btn {
            width: 100%;
        }

    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 2px;
        padding-right: 2px;
    }

    .form-horizontal .form-group {
        margin-right: -2px;
        margin-left: -2px;
    }
}

@media (min-width: 768px) {
    .modal-footer {
        min-height: 43px;
    }
}

@media (min-width: 1200px) {
    .modal-footer {
        min-height: 39px;
    }
}

.modal.fade {
    align-items: center;
}

    .modal.fade.full-height {
        align-items: stretch;
    }

    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        max-width: 100vw;
        width: unset;
    }


@media (max-width: 767px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        width: 100vw;
        max-width: 98vw;
    }
}

@media (min-width: 768px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 730px;
    }
}

@media (min-width: 992px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 960px;
    }
}

@media (min-width: 1200px) {
    .modal.fade.fluid, .modal.fade.fluid > .modal-dialog {
        min-width: 970px;
        max-height: 1160px;
    }
}

#wizardModal > .modal-body {
    overflow-x: hidden;
}

.os-pagination {
    margin: 0;
}

    .os-pagination > li > a {
        margin-left: 5px;
        color: black;
        border-radius: 4px;
    }

    .os-pagination > label:not(.mbsc-ms-item) {
        background-color: transparent;
        color: #0069aa;
        padding: 6px 8px;
        min-width: 32px;
        border: 1px solid #0069aa;
    }

    .os-pagination > label.active {
        background-color: #005991;
        color: white;
    }

    .os-pagination > li > a:hover, .os-pagination > label:hover {
        background-color: #0069aa;
        color: white;
        border: solid 1px #0069aa;
        padding: 6px 8px;
    }

    .os-pagination > .active > a, .os-pagination > .active > span, .os-pagination > .active > a:hover, .os-pagination > .active > span:hover, .os-pagination > .active > a:focus, .os-pagination > .active > span:focus {
        background-color: #0069aa;
        color: white;
    }



os-sidebar  {
    display: block;
}

os-sidebar > #companyImage {
    height: 77px;
}

@media(min-width: 768px) {
    os-sidebar {
        margin: 4px;
    }
}

#splash-page {
    z-index: 99999 !important;
}

    #splash-page > .bar {
        width: 100%;
    }

.page-splash {
    z-index: 99998 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(48, 48, 48, .9);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    transform: translate3d(0,0,0);
}

.page-spash-dark {
    opacity: .99;
}


.page-error-message {
    text-align: center;
    margin: 15% auto 0 auto;
    font-size: 150%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 0;
}

.page-splash-message {
    text-align: center;
    font-size: 300%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #FFF;
    padding: 0;
}

.progress,
.page-progress-bar {
    margin: 30px 10% !important;
}


.page-error-bug {
    margin: 30% auto 0 auto;
    z-index: 99999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-align: right;
    overflow: hidden;
}



.stickerContainer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}


.stickerContainer > os-sticker {
    padding: 2px;
    flex-grow: 0;
}


.osSticker {
    border: 1px solid #ccc;
    margin: 1px;
    width: 100%;
    height: 100%;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

div.osSticker:hover, div.osSticker:focus {
    background-color: #eee;
    border: 2px solid forestgreen;
    margin: 0;
}

div.osSticker:hover i{
     color:  forestgreen;
}

div.osSticker:hover button{
     background-color:  forestgreen;
}
   

.osSticker > div:nth-of-type(1) {
    min-height: 104px;
    display: flex;
}

.osSticker > div:nth-of-type(1) > div:nth-of-type(1) {
    margin-top: auto;
    margin-bottom: auto;
}

.osSticker > div:nth-of-type(2) {
    flex-grow: 1;
}


@media (max-width: 767px) {
    .stickerContainer {
        justify-content: center;
        padding: 0;
        -ms-align-content: stretch;
        -webkit-align-content: stretch;
        align-content: stretch;
    }

    .stickerContainer > os-sticker {
        width: 100%;
        padding-bottom: 4px !important;
    }
}


@media (min-width: 768px) and (max-width:991px) {
    .stickerContainer > os-sticker {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .stickerContainer > os-sticker {
        width: 33%;
    }
}


.osSticker.fadeIn {
    -moz-animation: fadeIn 1s;
    -o-animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.osSticker > .row > .col-xs-1, .osSticker > .row > .col-xs-2, .osSticker > .row > .col-xs-3, .osSticker > .row > .col-xs-4, .osSticker > .row > .col-xs-5, .osSticker > .row > .col-xs-6, .osSticker > .row > .col-xs-7, .osSticker > .row > .col-xs-8, .osSticker > .row > .col-xs-9, .osSticker > .row > .col-xs-10, .osSticker > .row > .col-xs-11, .osSticker > .row > .col-xs-12 {
    padding-left: 8px;
    padding-right: 8px;
}


.osSticker .stickerImage {
    direction: rtl;
    vertical-align: central;
}


    .osSticker .stickerImage.defaultProductImage > img {
        max-height: 94px;
    }




.osSticker .stickerNumber {
    font-size: 1.1em;
    font-weight: bold;
    color: #0069AA;
    direction: rtl;
}

.osSticker .stickerName {
    font-weight: bold;
}

.osSticker .stickerPrice {
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
}

.osSticker .altRow {
    /*background-color: #F4F8FC;*/
}

.osSticker .quantityInput {
    padding-left: 8px;
    padding-right: 8px;
}

    .osSticker .quantityInput > input {
        text-align: center;
        margin: 0;
    }

.osSticker .quantityButton {
    color: #0069AA;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
}

.osSticker .addToCartButton {
    padding-left: 8px;
}

    .osSticker .addToCartButton > button {
        height: 34px;
        width: 100%;
    }


#stickerCategoryList .categoryHeader {
    color: #0069AA;
}

#stickerCategoryList .categoryHeader + i {
    color: #0069AA;
}

#stickerCategoryList .square {
    background-color: #0069AA;
}


.stickerCategoryTag {
    border: 1px solid #ccc;
    color: #777;
    /*margin: 1px 0 1px 2px;*/
    margin-left: 2px;
    margin-bottom: 1px;
    background: white;
    outline: none;
    font-size: 9px;
}

.stickerCategoryTag:hover {
   border: 1px solid #000000;
   color: black;
}

.stickerCategoryTag > i {
    font-size: 1.1em;
}

.stickerCategoryTag.selected {
    background-color: #ddd;
    color: black;
    border: 1px solid #666;
}




.profile-img-container {
    position: relative;
    text-align: center;
}

    .profile-img-container img {
        max-width: 64px;
        max-height: 64px;
    }

        .profile-img-container img:hover {
            opacity: 0.5;
            z-index: 501;
        }

            .profile-img-container img:hover + i {
                display: block;
                z-index: 500;
            }

    .profile-img-container i {
        display: none;
        position: absolute;
        margin-left: 25px;
        margin-top: -25px;
    }

.collapse-all {
    color: #0069aa;
    cursor: pointer;
    background-color: transparent;
}

@media (min-width: 768px) {
    .collapse-all {
        padding: 0;
    }
}

.sticker > .panel-group > .panel > .panel-collapse {
    border: none;
}

    .sticker > .panel-group > .panel > .panel-collapse > .panel-body {
        padding: 0 12px;
    }

.sticker > .panel-group {
    margin-bottom: 0;
}

.borderBottomSolid {
    border-bottom: 1px solid #0069aa;
}

.borderBottomLight {
    border-bottom: 1px solid #ccc;
}

.storeCategoryContainer {
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.storeCategory {
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

    .storeCategory img, .storeCategory > div > div {
        border: 1px solid #ccc;
    }

    .storeCategory:hover img, .storeCategory:hover > div > div {
        border-color: #0069AA;
    }

.categoryContent {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: white;
    text-align: center;
    font-weight: bold;
    width: 100%;
}

    .categoryContent div {
        -ms-flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
        border: 0 none;
    }

@media (max-width : 767px) {
    .categoryContent div {
        margin-bottom: 0;
    }
}

@media (min-width : 768px) {
    .categoryContent div {
        margin-bottom: 8px;
    }
}

.categoryContent img {
    height: 30%;
}

.category_label_background {
    background-color: #F8C430;
}

.category_kit_background {
    background-color: #EB5824;
}

.category_machine_background {
    background-color: black;
}





.categoryGroupAccordion > .panel-group {
    border-bottom: none;
}

.square {
    width: 6px;
    height: 6px;
    padding: 0;
    border-top: none;
    margin: 0 15px;
}


.categoryAccordion > .panel-group > .panel {
    margin: 0;
}

uib-accordion.categoryAccordion > .panel-group > .panel > .panel-collapse, uib-accordion.categoryAccordion > .panel-group > .panel > .panel-collapse {
    border: none;
}


.categoryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span:hover, .categoryGroupAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span:hover {
    background-color: #eee;
}

.categoryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span, .categoryGroupAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span {
    padding: 4px 2px;
    line-height: 30px;
    background-color: white;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    border-top: 1px solid #ccc;
}

    .categoryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > i, .categoryGroupAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > i {
        padding-right: 6px;
        flex-grow: 0;
    }

.panel-title > a > span > .categoryHeader {
    font-weight: bold;
    padding-left: 10px;
}

.categoryAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > .grow, .categoryGroupAccordion > .panel-group > .panel > .panel-heading > .panel-title > a > span > .grow {
    flex-grow: 1;
}



.filterMyMachine {
    border-top: 1px solid #ccc;
    color: green;
    font-weight: bold;
    padding: 0 0 0 12px;
    margin: 0;
    line-height: 39px;
}

    .filterMyMachine:hover {
        background-color: #eee;
        cursor: pointer;
    }

.filterResultContainer{
    padding-left: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 2px;

    line-height: 30px;
    background-color: white;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    border-top: 1px solid #ccc;
}
    .filterResult{
       flex-grow:1;
    }

    .filterResultContainer > i {padding-right: 4px;}


/*animation tick*/
.checkmark-circle {
  width: 50px;
  height: 50px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.checkmark-circle .background {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2EB150;
  position: absolute;
}
.checkmark-circle .checkmark {
  border-radius: 8px;
}
.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  animation-delay: 100ms;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
  opacity: 1;
  height: 25px;
  width: 12px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 3px solid white;
  border-top: 3px solid white;
  border-radius: 1px !important;
  content: '';
  left: 10px;
  top: 28px;
  position: absolute;
}

@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 12px;
    opacity: 1;
  }
  40% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
  100% {
    height: 25px;
    width: 12px;
    opacity: 1;
  }
}



div .svgTitleSize  {

    font-size: 26px;
    color:#0069AA;
}

div .svgTitleSize > svg {
    max-width: 30px;
    vertical-align: middle;
    max-height: 30px;
    flex-grow: 1;
    line-height: normal;
    margin: auto;

}
div > svg {
    max-width: 14px;
    vertical-align: middle;
    max-height: 14px;
    flex-grow: 1;
    line-height: normal;
    margin: auto;
}

div .size18svg > svg {
    max-width: 18px;
    vertical-align: middle;
    max-height: 18px;
    flex-grow: 1;
    line-height: normal;
    margin: auto;
}

button > svg {
    max-width: 14px;
    vertical-align: middle;
    max-height: 14px;
    flex-grow: 1;
    line-height: normal;
    margin: auto;
}

div .topMenuBar > svg {
    max-width: 20px;
    vertical-align: middle;
    max-height: 20px;
    flex-grow: 1;
    line-height: normal;
    margin: auto;
}

.svgWhiteFillClip {
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#FFFFFF;
}

.svgWhiteFillStroke {
    fill:none;
    stroke:#FFFFFF;
    stroke-width:9;
    stroke-miterlimit:10;
}

.svgWhiteFill {
    fill: white;
}

.svgBlueFill {
    fill: #0069AA;
}
.svgBlueFillClip {
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#0069AA;
   
}
.svgBlueFillStroke {
    fill:none;
    stroke:#0069AA;
    stroke-width:9;
    stroke-miterlimit:10;
   
}

/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  [src$="svg"] {
    width: 100%; 
  }
}*/

.toast-bottom-right {
    bottom: 64px;
}

@media (min-width: 480px) {
    .toast-bottom-right {
        bottom: 48px;
    }
}

#toast-container {
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


#toast-container >.toast-info {
    background-image: none !important;
}

@media print {
    #toast-container {
        display: none;
    }
}
#toast-container > .toast-info > .toast-message {
    margin-left: -40px;
}


#toast-container > .toast-info  > .toast-message > span {
    vertical-align: middle;
    display: table-cell;
}

#toast-container > .toast-info  > .toast-message > span > img {
    max-width: 32px;
    max-height: 32px;
    vertical-align: middle;
    display: table-cell;
    margin-right: 1em;
}



os-unit-summary > div   {
    display: -ms-flexbox;   
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1px #bbb;
/*contain: strict;*/
}


#tblUnitMissingLabels_xs tr {
    width: 100%;
    height: 33px;
    table-layout: fixed;
}

@media (max-width : 767px) {
    os-unit-summary > div {
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        os-unit-summary > div > div {
            margin: 0;
        }

    os-unit-summary .machineImage {
        width: 25%;
        text-align: right;
    }

    os-unit-summary .machineSummary {
        width: 75%;
    }
}

@media (min-width : 768px) {
    os-unit-summary > div  {
        margin: 2px 2px;
    }

    os-unit-summary .machineImage {
        width: 64px;
        text-align: center;
    }

}


os-unit-summary .machineSummary {
    -ms-flex: 1 auto; /* IE10 SUpport */
    flex-grow: 1;
    display: -ms-flexbox;   
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
}

    os-unit-summary .machineSummary > div > label {
        margin-bottom: 1px;
        font-weight: normal;
    }


    os-unit-summary .machineSummary  > div:nth-of-type(n+2) {
        color: #AAA;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    os-unit-summary .machineSummary:hover  >  div:nth-of-type(n+2) {
        color: black;
    }




.unitMessage {
    text-align: center;
    margin: 32px 0;
    font-weight: bold;
}









@media only screen and (max-width : 767px) {
    os-unit-summary .machineImage {
        align-self: flex-start;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}


@media (max-width: 767px) {

   
}

.warning {
    color: red;
}

.z-required:after {
    color: red;
    content: "*";
    padding-left: 5px;
}

input:invalid, select:invalid {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}

.z-decorator {
    overflow: hidden;
    float: right;
}

.z-character-count {
    overflow: hidden;
    float: left;
    font-size: 12px;
    padding-left: 4px;
    padding-top: 2px;
    display: none;
}



textarea:focus ~ .z-character-count {
    display: inline;
}


.errorContainer {
    margin: 0 -20px 0 20px;
    -ms-transform: skew(45deg);
    transform: skew(45deg);
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
    background: red;
    overflow: hidden;
    position: relative;
    padding-left: 8px;
    -moz-transition: height ease-in-out .45s, height ease-in-out .45s;
    -o-transition: height ease-in-out .45s, height ease-in-out .45s;
    -webkit-transition: height ease-in-out .45s, height ease-in-out .45s;
    transition: height ease-in-out .45s, height ease-in-out .45s;
}

.errorText {
    margin-left: 12px;
    margin-right: 26px;
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    text-align: left;
    color: white;
    display: inline-block;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.post-code .errorContainer {
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform: none;
    margin-right: -12px;
}

.post-code .errorText {
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform: none;
}

.z-warning {
    position: absolute;
    top: 8px;
    right: 23px;
    color: #eea236;
    cursor: pointer;
    opacity: 1;
}

.wizardContainer {
    padding: 0;
    width: 100%;
}


@media (min-width: 768px) {
    .wizardContainer {
        position: absolute;
    }
}
.wizardContainer .table {
    margin-bottom: 0;
}


.wizardContainer fieldset {
    padding: 4px;
}


#wizardNavigation .modal-header {
    padding: 0;
}

#wizardNavigation .navbar {
    width:100%;
    margin:0;
    cursor: pointer;
    padding: 0;
}

#wizardNavigation .navbar-nav {
    width:100%;
    margin:0;
}

#wizardNavigation .nav-tabs {
    background-color: #f2f2f2;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0;
}

#wizardNavigation .nav-tabs li {
    border: none;
    border-right: solid 1px #005991;
    color: #0069aa;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #E8ECF2;
}

#wizardNavigation .nav-tabs li.disabled:not(.tab-active) {
    color: gray;
    cursor: not-allowed;
}

#wizardNavigation .nav-tabs li a {
    color: inherit;
    background-color: inherit;
    padding: 6px 0;
    text-align: center;
}


#wizardNavigation .nav-tabs li:last-of-type {
    border: none;
}

#wizardNavigation .nav-tabs li:hover {
    color: white;
    background-color: #d8dfe9;
}


#wizardNavigation .nav-tabs li.tab-disabled {
    color:#ccc;
    cursor: not-allowed;
}

#wizardNavigation .nav-tabs li.tab-active {
    color:white;
    background-color: #0069AA;
}


@media (min-width: 768px) {
    #wizardNavigation.doubleHeight .nav-tabs li a {
        min-height: 52px;
    }

    #wizardNavigation .nav {
        display: table;
        table-layout: fixed;
    }

    #wizardNavigation .nav-tabs li {
        width: 14.28%; /* 100 / 7 as there are 7 options*/
        display: table-cell;
        padding: 0 10px;
    }

    #wizardNavigation .nav-tabs .oneOption li {
        width: 100%;/* 100 / 7 as there are 7 options*/
    }

    #wizardNavigation .nav-tabs .twoOptions li {
        width: 50%;/* 100 / 7 as there are 7 options*/
    }

    #wizardNavigation .nav-tabs .threeOptions li {
        width: 33%;/* 100 / 7 as there are 7 options*/
    }

    #wizardNavigation .nav-tabs .fourOptions li {
        width: 25%;/* 100 / 7 as there are 7 options*/
    }

    #wizardNavigation .nav-tabs .fiveOptions li {
        width: 20%;/* 100 / 7 as there are 7 options*/
    }

    #wizardNavigation .nav-tabs .singleLine li a {
        min-height: 32px;
    }
}

#wizardModal hr {
    margin: 14px 0 8px 0;
    border-color: #999;
}




#wizardModal .hiddenRow {
    padding: 0;
    border-top: none;
}

#wizardModal .accordion-body {
    margin: 8px;
}


@media (min-width: 768px) {
    #wizardModal .modal-body {
        background-color: white;
        /* padding: 4px; */
    }
}


#wizardModal .table > thead > tr > th {
    padding: 0 4px;
}

.wizardContainer .form-horizontal .questionCategory {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width:767px) {
    #wizardNavigation:not(.mbsc-ms) {
        opacity: 0;
        height: 43px;
    }
}

@media (min-width: 768px) {
    .shop-nav-icons {
        margin-top: 155px;
    }
}


.green {
    color: green;
}