/* ======================================================================================================= 
                                             Main Styling
======================================================================================================= */

/* XARIS CSS */

.unstyled-link:hover {
	color: inherit;
	text-decoration: none;
}

.mouse-hand {
	cursor: pointer;
}

.img-featured {
	max-height: 20px;
	max-width: 20px;
}

.product-img {
	max-height: 75px;
	max-width: 150px;
}

body {
	font-family: 'Roboto', sans-serif;
	background-color: #e4e5e6;
	color: #51493d;
}

.vert-align {
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
}

.center-da-shit {
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -ms-flexbox;
	display: flex;
}

.w-22 {
	width: 22% !important;
}

.row.stripped:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, .05);
}

/* Reset Stuff For Browser Compitabilities */

/* Remove Spinners from Input type number */

input[type='number'] {
	-moz-appearance: textfield !important;
	margin: 0 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0 !important;
}

.form-control:focus {
	color: none;
	box-shadow: none;
	border-color: #51493d;
}

/* Border */

.brdr-right {
	border-right: 1px solid #ccc;
}

/* Add/Remove */

.add-remove {
	width: 25px;
	margin: .75rem 0;
}

.remove-cross {
	color: red;
	font-size: 1.9rem;
	font-weight: 300;
}

/* All Pages Styling */

.main-container {
	min-height: calc(100vh - 56px);
	padding: 3rem 1rem;
	max-width: 1140px;
}

.row.add {
	padding-bottom: 2rem;
}

/* Buttons */

.btn-outline {
	display: inline-block;
	border: 1px solid #633f22;
	color: #633f22;
	padding: 0.375rem 0.75rem;
	background: transparent;
}

.btn-fill {
	display: inline-block;
	background: #633f22;
	border: 1px solid #633f22;
	padding: 0.375rem 0.75rem;
	color: white;
}

.btn-outline img,
.btn-fill img {
	max-width: 25px;
}

/* Text Angular */
.angular-text-height .ta-scroll-window.form-control {
	max-height: 300px;
}
/* ======================================================================================================= 
                                             Nav Bar
======================================================================================================= */

.navbar {
	/* background: #29363d; */
	background: #51493d;
}

.navbar-light .navbar-nav .nav-link {
	color: white;
}

.navbar-light .navbar-nav .nav-link:hover {
	color: #b9b8b8;
}

/* ======================================================================================================= 
                                             Login Page
======================================================================================================= */

.login-wrapper {
	max-width: 450px;
	margin: 0 auto;
	background: white;
	padding: 5rem 3rem;
	border: 1px solid #51493d;
}

.login-wrapper h3,
.register-wrapper h3 {
	margin-bottom: 2rem;
}

.login-page input,
.register-page input {
	border: none;
	border-bottom: 1px solid #51493d;
	border-radius: 0;
	padding-left: 0;
}

.login-page input:focus,
.register-page input:focus {
	border: none;
	/* border-bottom: 1px solid red; */
	border-radius: 0;
	transition: border 2s linear;
}

.login-page .form-group,
.register-page .form-group {
	margin-bottom: 2rem;
}

.login-page .form-group,
.register-page .form-group {
	position: relative;
}

.login-page .test,
.register-page .test {
	position: absolute;
	bottom: 6px;
	left: 0px;
	pointer-events: none;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.login-page .login-wrapper input:focus ~ .test,
.login-page .login-wrapper input:valid ~ .test,
.register-page .register-wrapper input:focus ~ .test,
.register-page .register-wrapper input:valid ~ .test {
	bottom: 30px;
}

.bar {
	position: relative;
	display: block;
	width: 100%;
}

.bar:before,
.bar:after {
	content: '';
	height: 1px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #5264ae;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.bar:before {
	left: 50%;
}

.bar:after {
	right: 50%;
}

/* active state */

input:focus ~ .bar:before,
input:focus ~ .bar:after {
	width: 50%;
}

/* ======================================================================================================= 
                                             Login Page
======================================================================================================= */

.register-wrapper {
	max-width: 600px;
	margin: 0 auto;
	background: white;
	padding: 5rem 3rem;
	border: 1px solid #51493d;
}

.register-page .test {
	left: 1rem;
}

/* ======================================================================================================= 
                                             Products Page
======================================================================================================= */

.product-listing table th:last-child {
	width: 256px !important;
}

.product-listing table td,
.product-listing table th {
	vertical-align: middle;
}

.product-listing table td:last-child {
}

.product-listing table img,
.shippings table img {
	max-width: 25px;
}

/* New Product Page
======================== */

@media (min-width: 576px) {
	#newProductModal .modal-dialog {
		max-width: 95%;
		margin: 30px auto;
	}
}

div#registerModal {
	padding-left: 0 !important;
}

#registerModal input.form-control {
	height: 3rem;
	border: 1px solid #ccc;
	border-radius: 0;
}

/* ======================================================================================================= 
                                             Product Page
======================================================================================================= */

.img-actions {
	position: absolute;
	bottom: 0;
	right: 1rem;
	left: 1rem;
	/* width: 100%; */
	background: #00000087;
	padding: 0.5rem;
}

.img-actions [class^='col-']:first-child {
	border-right: 1px solid white;
}

.img-actions [class^='col-'] {
	text-align: center;
}

.featured-btn img {
	position: absolute;
	max-width: 25px;
	top: 0;
	right: 0;
}

.remove-img {
	max-height: 18px;
	max-width: 18px;
}

.product-page #dropdownMenuButton {
	width: 100%;
}

.product-page .dropdown-menu {
	width: 100%;
}

/* ======================================================================================================= 
                                            Category Page
======================================================================================================= */

.white-wrapper {
	background: white;
	padding: 3rem 2rem;
}

.category-wrapper.ng-scope {
	/* background: whitesmoke; */
	padding: 0 .75rem 0 0;
	margin-bottom: .5rem;
}

/* ======================================================================================================= 
                                             Footer
======================================================================================================= */

footer {
	background: #29363d;
	color: white;
}

/* ======================================================================================================= 
                                             Site Section
======================================================================================================= */

.main-container.site-sections {
	padding: 3rem 2rem;
}

.tabs {
	background: #fff;
	border-radius: 2px;
	/* display: inline-block;
	height: 300px; */
	/* margin: 1rem; */
	position: relative;
	/* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.row.tabs.tab-nav .col {
	padding: 1rem;
	text-align: center;
}
.row.tabs.tab-nav .col.active {
	background: whitesmoke;
}

.tabs [class^='col-'] {
	text-align: center;
	line-height: 48px;
}

.tabs [class^='col-'].active {
	background: rgba(248, 187, 208, 0.3);
}

.da-line {
	background-color: #e91e63;
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 33.333333%;
}

.row.tab-content {
	padding: 2rem 1rem 1rem;
	margin-top: 2rem;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.category-wrapper {
	line-height: 48px;
	padding: 0 1rem;
	border-bottom: 1px solid #ccc;
}

.category-wrapper .action {
	font-size: 36px;
	font-weight: 300;
}

.category-wrapper .action.add {
	color: green;
}

.category-wrapper .action.remove {
	color: red;
}

text-angular .btn-group {
	margin-bottom: 5px;
	margin-left: 5px;
}

text-angular button {
	background-color: white;
	border-color: #ccc !important;
}

text-angular button .btn {
	/* background-color: white; */
	border-color: #ccc;
}

/* .site-sections .row.add {
	padding: 2rem 0 1rem;
} */

.slider-photo-col {
	padding: 0 .25rem 0.5rem;
}

.slider-tab .btn-fill {
	float: right;
	font-size: 16px;
}

/* ======================================================================================================= 
                                            Order Page
======================================================================================================= */

.order form {
	padding: 0 1rem;
}

.order .col-md-8 {
	padding-right: .5rem;
}

.order .col-md-4 {
	padding-left: .5rem;
}

.order .white-wrapper {
	padding: 2rem 2rem;
	max-width: 900px;
	margin: 0 auto;
	margin-bottom: 1rem;
	border-radius: 2px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.order-section {
	margin-top: 1rem;
}

.order tr.total1,
.order tr.total2,
.order tr.total3,
.order tr.total4 {
	border: 1px solid black;
}

.order tr.total1 th,
.order tr.total1 td {
	border-top: 1px solid black;
	border-bottom: none;
}

.order tr.total2 th,
.order tr.total2 td,
.order tr.total3 th,
.order tr.total3 td,
.order tr.total4 th,
.order tr.total4 td {
	border-top: none;
	border-bottom: none;
}

.orders table td:last-child {
	min-width: 130px;
}


/* ======================================================================================================= 
                                            Sliders
======================================================================================================= */
span.remove-img {
    position: absolute;
    top: -7.5px;
    right: -1px;
    background: #9c0101;
    border-radius: 50%;
    padding: .25rem .666rem;
    display: inline-block;
    color: white;
    max-width: 31px;
    max-height: 31px;
    font-weight: 300;
}



/* ======================================================================================================= 
                                            Modals
======================================================================================================= */
#warningModal .modal-header {
    background: #ffc458;
}