﻿/*General Style*/
.os-submenu {display: none;position:absolute;box-shadow:0 0 20px rgba(0,0,0,.2);background-color:#fff;padding:5px 0;text-align:left;top:45px;width:160px;left: 35%;margin-left: -118px;}
.os-submenu a {line-height: 25px;}
.os-submenu:hover, .os-menu:hover~.os-submenu {display: block;}
.os-text {min-height:40px;width:400px;max-width:100%;border:1px solid #ddd;padding: 0px 10px;}
.os-table {margin-bottom:10px;}
.os-table td{padding:6px 4px;}
.os-table th{padding:6px 4px;}
.os-table .row{}
.os-table thead {border-bottom:1px solid #ddd;}
.os-table .rowalt {background-color:#eeeeee !important;}

/*Autoreourder*/
.os-autoreorder{width:100%}
.os-autoreorder .os-step{width:33.33%;float:left;text-align:center;padding:20px;}
.os-autoreorder .os-title{font-weight:bold;width:100%;display:block;text-align: center !important;}
.os-autoreorder .os-number{background:rgb(80,154,46) none repeat scroll 0 0;border-radius:100%;color:#fff;display:inline-block;width:50px;height:50px;font-size:24px;padding-top:15px;margin-bottom:20px;}
.os-autoreorder p {text-align:center;}
.os-center{text-align:center;clear: both;}
.os-title{font-size:16px;font-weight:bold;text-align:left !important;margin-bottom: 20px;}
.os-title .os-number {background:rgb(80,154,46) none repeat scroll 0 0;border-radius:100%;color:#fff;display:inline-block;width:30px;height:30px;font-size: 16px;padding: 5px 10px;margin-right:10px;}
.os-button, .os-buttonsec{min-width: 140px;border: none;padding: 10px 30px;text-align: center;font-size:15px;color:#fff;text-transform:uppercase;border-radius:5px !important;}
.os-button {background-color: rgb(158,72,25);}
.os-buttonsec {background-color: darkgrey;}
.os-content{padding:30px 15px;}
.os-right{text-align:right;}
.os_select_freq {background: #fff;width: 400px !important;display: block;padding: 11px 5px;border: 1px solid #ddd;color: #000;}
.os_select {border: 1px solid #e2b095;padding: 6px 5px;width: 400px !important;}
#divSubscriptionMode {color:#fff;font-size: 13px;} 
@media screen and (max-width: 420px) {
    .os-autoreorder .os-step{width:100%;} }

@media (min-width: 769px) {
    .product-grid .item-box.os-product {width: 24% !important; margin:0 0 0.5% 1%;}
	
	
	.product-grid .item-box.os-product:nth-child(4n+1) {
    clear: left;
}

.item-box.os-product:nth-child(4n+1) {
    margin-left: 0;
}

.product-grid .item-box.os-product:nth-child(3n+1) {
    clear: none;
}
	
}

/*Confirmation Modal Window Style*/
.dialog-ovelay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}

    .dialog-ovelay .dialog {
        width: 400px;
        margin: 200px auto 0;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0,0,0,.2);
        border-radius: 3px;
        overflow: hidden;
		max-width:92%;
    }

        .dialog-ovelay .dialog header {
            padding: 10px 8px;
            background-color: #f6f7f9;
            border-bottom: 1px solid #e5e5e5;
            position:relative;
        }

            .dialog-ovelay .dialog header h3 {
                font-size: 14px;
                margin: 0;
                color: #555;
                display: inline-block
            }

            .dialog-ovelay .dialog header .fa-close {
                float: right;
                color: #c4c5c7;
                cursor: pointer;
                transition: all .5s ease;
                padding: 0 2px;
                border-radius: 1px
            }

                .dialog-ovelay .dialog header .fa-close:hover {
                    color: #b9b9b9
                }

                .dialog-ovelay .dialog header .fa-close:active {
                    box-shadow: 0 0 5px #673AB7;
                    color: #a2a2a2
                }

        .dialog-ovelay .dialog .dialog-msg {
            padding: 12px 10px
        }

            .dialog-ovelay .dialog .dialog-msg p {
                margin: 0;
                font-size: 15px;
                color: #333
            }

        .dialog-ovelay .dialog footer {
            border-top: 1px solid #e5e5e5;
            padding: 8px 10px
        }

            .dialog-ovelay .dialog footer .controls {
                direction: rtl
            }

                .dialog-ovelay .dialog footer .controls .button {
                    padding: 5px 15px;
                    border-radius: 3px
                }

.button {
    cursor: pointer
}

.button-default {
    background-color: rgb(248, 248, 248);
    border: 1px solid rgba(204, 204, 204, 0.5);
    color: #5D5D5D;
}

.button-danger {
    background-color: #f44336;
    border: 1px solid #d32f2f;
    color: #f5f5f5
}

.link {
    padding: 5px 10px;
    cursor: pointer
}


/******************** TOP MENU ***********************/
.header-autoreorder {margin-left: 10px;}
.header-cart, .header-autoreorder, .header-search {float: right;padding: 5px 0 0;position: relative;width: auto;}
.sub-header .sub-header-center .header-menu-parent .header-menu .ns-uswm-sticky-header .header-middle .grid-page .header-right .header-autoreorder a {font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;font-weight: 100 !important;padding: 5.5px 10px 5px 10px;}
.header-autoreorder .header-autoreorder-links-wrapper {color: #fff;font-size: 18px;text-transform: uppercase;display: flex;}
.header-autoreorder-links {display: none;float: left;margin: 0;padding: 0;width: 100%;position: absolute;right: 0;z-index: 99999;}
.header-autoreorder-links {box-shadow: 0 2px 3px rgba(0,0,0,0.1);background: #fff;}
.header-autoreorder-links.active {display: block;}
.header-menu .header-autoreorder-links li a {color: #4b3832 !important;display: block;font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;font-size: 18px;font-weight: 100;padding: 5px 10px;text-transform: uppercase;}

/**************** MODAL POPUP ***********************/
.os-modal {position: absolute;z-index: 10000; top: 0;left: 0;visibility: hidden;width: 100%;height: 100%;}
.os-modal.is-visible {visibility: visible;}
.os-modal-overlay {position: fixed;z-index: 10;top: 0;left: 0;width: 100%;height: 100%;background: hsla(0, 0%, 0%, 0.5);visibility: hidden;opacity: 0;transition: visibility 0s linear 0.3s, opacity 0.3s;}
.os-modal.is-visible .os-modal-overlay {opacity: 1;visibility: visible;transition-delay: 0s;}
.os-modal-wrapper {position: absolute;z-index: 9999;top: 6em;left: 50%;width: 32em;margin-left: -16em;background-color: #fff;box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);}
.os-modal-transition {transition: all 0.3s 0.12s;transform: translateY(-10%);opacity: 0;}
.os-modal.is-visible .os-modal-transition {transform: translateY(0);opacity: 1;}
.os-modal-header,.os-modal-content {padding: 1em;}
.os-modal-header {position: relative;background-color: #fff;box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);border-bottom: 1px solid #e8e8e8;}
.os-modal-close {position: absolute;top: 0;right: 0;padding: 1em;color: #aaa;background: none;border: 0;}
.os-modal-close:hover {color: #777;}
.os-modal-heading {font-size: 1.125em;margin: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.os-modal-content > *:first-child {margin-top: 0;}
.os-modal-content > *:last-child {margin-bottom: 0;}
.os-modal-content .os-comment{width:100%;height:100px !important;min-height:100px !important;}
.os-modal-content button {padding: 4px 10px;min-width: 50px;}

.order-item-title {
float: left;
    width: 50%;
}
	
.order-item-actions {	
	float: left;
    width: 50%;
    text-align: right;
    padding-top: 8px;
}


@media all and (max-width: 768px) {
	.order-item-title {
	float: left;
    width: 100%;
}

.order-item-actions {	
	float: left;
    width: 100%;
    text-align: left;
    padding-top: 8px;
	margin:5px 0 20px;
}

}

@media all and (max-width: 600px) { 
.os-modal-wrapper {
    position: absolute;
    z-index: 9999;
    top: 6em;
    left: 4%;
	right:4%;
    width: 32em;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
    max-width: 92%;
}
}

@media all and (max-width: 400px) {  
.os-right.update-subscription-btn { text-align:center;}
}