:root {
	--black-100: #011627;
	--black-70: #808A93;
	--white: #ffffff;
    --orange: #ee6c4d;
	--grey-50: #e0e2e6;
	--grey-70: #B2B7BF;
	--grey-100: #667080;
	--green-100: #38B000;
	--tosca-100: #B0FFD5;
	--red-100: #FF4633;
	--yellow-100: #FFD700;
}

/* General */
body {
	font-family: "Montserrat", sans-serif !important;
}

a {
	cursor: pointer !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

.cursor-pointer:hover {
	cursor: pointer !important;
}

a:hover {
	text-decoration: none;
}

.border-radius-10-left {
	border-radius: 10px 0 0 10px;
}

.border-radius-10-right {
	border-radius: 0 10px 10px 0;
}

.border-radius-10 {
	border-radius: 10px !important;
}

.border-radius-15 {
	border-radius: 15px !important;
}

.border-radius-top-20 {
	border-radius: 20px 20px 0 0 !important;
}

.border-radius-20 {
	border-radius: 20px !important;
}

.border-radius-top-20 {
	border-radius: 20px 20px 0 0 !important;
}

.border-dash-2-grey-70 {
	border: 2px dashed var(--grey-70) !important;
}

.rounded {
	border-radius: 50% !important;
}

.box-shadow-grey-10 {
	box-shadow: 0px 0px 10px 0px var(--grey-50);
}

.box-shadow-grey-20 {
	box-shadow: 0px 0px 20px 0px var(--grey-50);
}

.bg-transparet {
	background: transparent;
}

.bg-white {
	background-color: var(--white);;
}

.bg-gray {
	background-color: #F3F3F3;
}

.bg-tosca {
	background-color: var(--tosca-100);
}

.bg-black-70 {
	background-color: var(--black-70);
}

.bg-grey-50 {
	background-color: var(--grey-50);
}

.text-green {
	color: var(--green-100);
}

.text-black-70 {
	color: var(--black-70);
}

.text-grey-70 {
	color: var(--grey-70);
}

.bg-orange {
	background-color: var(--orange);
}

.bg-grey-50 {
	background-color: var(--grey-50) !important;
}

.border-bottom-2-grey-50 {
	border-bottom: 2px solid var(--grey-50);
}

.hr-1-grey-70 {
	border-top: 1px solid var(--grey-70);
}

.hr-3-grey-70 {
	border-top: 3px solid var(--grey-70);
}

.border-top-2-grey-50 {
	border-top: 2px solid var(--grey-50);
}

.border-top-1-grey-100 {
	border-top: 1px solid var(--grey-100);
}

.border-bottom-1-grey-100 {
	border-bottom: 1px solid var(--grey-100);
}

.border-left-1-grey-100 {
	border-left: 1px solid var(--grey-100);
}

.border-right-1-grey-100 {
	border-right: 1px solid var(--grey-100);
}

.h1, h1 {
    font-size: 2.0rem;
    font-weight: bold;
}

.hover-underline:hover {
	text-decoration: underline !important;
}

.cursor-default {
	cursor: default !important;
}

.line-through {
	-webkit-text-decoration-line: line-through; /* Safari */
   text-decoration-line: line-through; 
}

.border-bottom-1-grey {
	border-bottom: 1px solid var(--grey-70);
}

.border-bottom-2-orange {
	border-bottom: 2px solid var(--orange);
}

.bottom-50-desktop {
	bottom: 50% !important;
}

.font-weight-100 {
	font-weight: 100;
}

.font-weight-800 {
	font-weight: 800;
}

.text-orange {
	color: var(--orange) !important;
}

.text-dark-blue {
	color: #092332 !important;
}

.text-soft-blue {
	color: #003C72 !important;
}

.text-grey {
	color: #777 !important;
}

.text-grey-50 {
	color: var(--grey-50) !important;
}

.text-light-grey {
	color: #aaa !important;
}

.text-white {
	color: #fff !important;
}

/* .text-red {
	color: #f00 !important;
} */

/* .text-green {
	color: #00FE00 !important;
} */

.background-white {
	background: #fff !important;
}

@media screen and (max-width: 768px){
	.text-center-mobile {
		text-align: center;
	}
}

.border-top-orange {
	border-top: 1px solid var(--orange);
}

.btn-orange, .btn-outline-orange:hover {
	border: 1px solid var(--orange);
	background: var(--orange);
	color: #fff;
}

.btn-orange:hover, .btn-outline-orange {
	border: 1px solid var(--orange);
	background: #fff;
	color: var(--orange);
}

.btn-total-item-cart {
	width: 30px;
	height: 30px;
}

.gmaps-content iframe {
	width: 100%;
	height: 400px;
}

.nav-tabs {
	border-bottom: 1px solid transparent;
	cursor: pointer !important;
}

.nav-tabs .nav-link {
	color: var(--black-70);
	height: 100%;
	cursor: pointer !important;
}

.nav-tabs, .nav-tabs .nav-link:hover {
	cursor: pointer !important;
}

.tab-content .content {
	/* font-weight: 100 !important; */
	color: var(--black-70);
}

@media screen and (max-width: 768px){
	.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
		/* border-bottom: 1px solid transparent; */
		border-bottom: 1px solid var(--orange);
	}
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color: var(--black-100);
	border-color: transparent;
	border-bottom: 1px solid var(--orange);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	border-color: transparent;
	border-bottom: 1px solid var(--orange);
}

.menus-section a:hover {
	text-decoration: none;
	color: #000 !important;
}

.breadcrumb-item a, .breadcrumb-item+.breadcrumb-item::before {
	color: var(--black-70);
}

.breadcrumb-item+.breadcrumb-item::before {
	font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f054";
    padding-right: 0;
    float: none;
}

.breadcrumb-item.active {
	color: var(--black-100);
}

.content {
	flex: 1;
}

.desktop-sidebar {
}

@media (min-width: 576px) {
	.desktop-sidebar {
		margin-left: 20px; /* Adjust the value as needed */
		display: flex;
	}
}

.play-button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Additional styling for the icon, adjust as needed */
    width: 50px;
    height: 50px;
    /* Add background image for the play button icon */
    background-image: url('../images/youtube-icon.png');
    background-size: cover;
	transition-duration: 0.3s;
}

.youtube-video-thumbnail:hover .play-button-icon {
	opacity: 0.7;
	transition-duration: 0.3s;
}

.alert-success {
	color: var(--green-100);
	background-color: var(--tosca-100);
	border-color: var(--tosca-100);
}

.wishlist-collection .wishlist-collection-banner {
	height: 150px;
    overflow-y: hidden;
    display: flex;
    align-items: center;
}

.wishlist-collection .collection-option .dropdown-toggle::after {
	display: none;
}

/* .file-upload-area {
	border: 2px dashed var(--grey-70);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
}
  
.file-upload-area.dragover {
	border-color: var(--orange);
} */

.preview-box {
    position: relative;
    background: #ffffff;
    width: 100%;
}

.preview-box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}

.preview-box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.dropzone-wrapper {
    border: 2px dashed var(--grey-70);
    color: var(--grey-70);
    position: relative;
    height: 150px;
    border-radius: 15px;
}

.dropzone-desc {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 40%;
    top: 50px;
    font-size: 16px;
}

.dropzone,
.dropzone:focus {
    position: absolute;
    outline: none !important;
    width: 100%;
    height: 150px;
    cursor: pointer;
    opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
    background: #ecf0f5;
}

.preview-zone {
    text-align: center;
}

.preview-zone .preview-box {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

@media (max-width: 576px) {
	.nav-slider-container {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		/* Set a fixed width for the container (adjust as needed) */
		width: 100%;
	}

	/* Optional: Increase the width of each nav-item to create more space between items */
	.nav-slider-container .nav-item {
		flex: 0 0 200px;
	}
}

.tab-content ul li {
    margin-bottom: 7.5px;
}

.square-container {
	display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
	position: relative;
    overflow: hidden;
    padding-bottom: 100%;
}

.square-container img {
	position: absolute;
    width: 200%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	object-fit: cover;
}

.rectangle-container {
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    position: relative;
    overflow: hidden;
    padding-bottom: 75%; /* Adjust this value to set the aspect ratio (e.g., 4:3 = 75%) */
}

.rectangle-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.share-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: white;
	border: 1px solid #343a40;
	margin: 5px;
	/* color: #343a40; */
	text-decoration: none;
	transition: background-color 0.3s, border-color 0.3s;
}
  
.share-button:hover {
	box-shadow: 0px 0px 5px 0px var(--grey-100);
}

.share-button img {
	width: 20px;
}

.card-hoverable:hover, .card-hoverable.active {
	border-color: var(--orange);
}

.card-hoverable.active {
	box-shadow: 0px 0px 10px 0px var(--orange);
}

.slick-slider .image-square-container {
    padding-top: 100%;
}

.image-square-container {
	background: rgba(0,0,0,.125);
	position: relative;
	/* width: 100%; */
	/* padding: 100%; */
	display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack video and icon vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    height: 100%;
}

.image-square-container > img, .image-square-container > video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-square-container > video, .image-square-container-in-modal > img {
	z-index: 1;
}

.icon-play-video {
	z-index: 2;
	position: absolute;
}

@media screen and (max-width: 768px){
	.icon-play-video {
		top: 50%;
	}
}

.icon-play-video i {
	text-shadow: 2px 2px var(--grey-70);
}

.pagination-container {
    text-align: center;
    margin-top: 20px;
}

.pagination {
    display: inline-block;
}

.pagination a, .pagination span {
    padding: 8px 16px;
    margin: 2px;
    text-decoration: none;
    color: var(--black-70);
    background-color: #fff;
    border: 0;
}

.pagination a:hover {
    background-color: #f5f5f5;
}

.pagination .text-decoration-underline {
    text-decoration: underline;
    font-weight: bold;
	text-decoration-color: var(--orange);
    color: var(--black-100);
	text-underline-offset: 5px;
}

.tidy-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-truncate-1-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-2-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-4-line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-5-line {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-6-line {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* End of General */

/* Header */
header {
	height: auto;
	/* height: 176px; */
    /* position: fixed;
	top: 0;
	z-index: 9; */
}

.navbar-brand img {
	width: 75%;
}

@media screen and (min-width: 576px){
	.navbar-brand img {
		width: 80%;
	}
}

.navbar {
	background: var(--black-100);
	padding: 0;
}

.navbar-expand-lg .navbar-collapse {
	height: 80px;
}

.navbar-light .navbar-nav .nav-item {
	margin-right: 30px;
	cursor: pointer;
}

.navbar-light .navbar-nav .nav-link {
	color: #333;
	cursor: pointer;
}

.navbar-nav .nav-item, .navbar-nav .nav-link {
	cursor: pointer;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
	color: var(--yellow) !important;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: var(--orange);
}

.navbar .header-search {
	display: flex;
	flex-basis: auto;
	flex-grow: 2;
}

.navbar .header-search div.row {
	background: #F3F3F3;
	padding: 10px;
	border-radius: 20px;
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 15px;
}

.header-search div input[type="search"] {
	background: transparent;
	border: 0;
}

.header-search div button[type="submit"] {
	color: #999;
	background: transparent;
}

.navbar .sign-menu {
	display: flex;
	flex-basis: auto;
	/*flex-grow: 3;*/
	height: 80px;
	align-items: center;
}

.navbar .sign-menu a {
	color: #333;
}

.navbar .sign-menu .user-toggler.dropdown-toggle:focus {
	outline: 0px;
}

.navbar .sign-menu .user-toggler.dropdown-toggle::after {
	display: none;
}

.navbar .sign-menu .dropdown-menu {
	transform: translate3d(-45px, 2px, 0px) !important;
	background: #092332;
	border-radius: 0 !important;
	border: 0;
}

.navbar .sign-menu .dropdown-menu a {
	color: #fff;
	padding: 12.5px 25px;
}

.navbar .sign-menu .dropdown-menu a:hover {
	background: #fff;
	color: #092332;
}

.navbar-light .navbar-toggler {
	color: #000;
}

.find-product-toggler, .sign-toggler {
	display: none;
	padding: .25rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	background: transparent;
	border: 0;
}

.user-toggler {
	border: 0;
	background: var(--orange);
	color: #fff;
	font-size: 20px;
	border-radius: 50%;
	padding: 2.5px 10px;
	width: 35px;
	height: 35px;
	text-align: center;
	right: 15px;
	position: absolute;
}

@media screen and (max-width: 768px){
	.user-toggler {
		padding: 8px 10px;
		margin-right: 10px;
		right: 0px;
		position: relative;
	}

	.find-product-toggler, .sign-toggler {
		display: initial;
	}

	.navbar-expand-lg .navbar-collapse {
		height: auto;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.navbar .navbar-top-menu {
		width: 100%;
	}

	.navbar-light .navbar-nav {
		background: #092332;
	}

	.navbar-light .navbar-nav .nav-item {
		margin-right: 0;
	}

	.navbar-light .navbar-nav .nav-link {
		padding: 20px;
		color: #fff;
	}

	.navbar .header-search {
		display: none;
		/*margin: 10px;*/
		flex-basis: none;
		flex-grow: initial;
		width: 100%;
	}

	.navbar .header-search.show {
		display: block;
	}

	.navbar .sign-menu {
		display: none;
	}

	.navbar .sign-menu.show {
		display: block;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mobile-menus {
		margin-top: 30px;
		margin-right: 20px;
	}

	.header-search-mobile {
		background: #092332;
		padding: 15px;
	}

	.header-search-mobile div.row {
		background: #fff;
		/*padding: 10px;*/
		border-radius: 20px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.header-search-mobile div input[type="search"] {
		background: transparent;
		border: 0;
	}

	.header-search-mobile div button[type="submit"] {
		color: #999;
		background: transparent;
	}

	.navbar .sign-menu .dropdown-menu.show {
		display: none;
	}
}

.menus-section a {
	color: #999 !important;
}

.menus-section a.active {
	color: #000 !important;
}
/* End of Header */

/* First Section */
.first-section {
	margin-top: 100px;
}
/* End of First Section */

/* Footer */
footer {
	background: var(--black-100);
	color: #fff;
	font-size: 12px;
}

footer a {
	color: #fff;
	font-weight: 100;
}

footer a:hover {
	color: #fff;
}

footer .footer-ojk img {
	width: 40%;
}

footer .footer-socmed a:hover {
	text-decoration: none;
}

@media screen and (max-width: 768px){
	footer .footer-menus a {
		width: 100%;
		float: left;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 0;
	}
}
/* End of Footer */

/* Whatsapp Message */
.whatsapp-message {
	position: fixed;
    z-index: 1030;
    width: auto;
    height: auto;
    font-size: 15px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    background: #00A82D;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 10px;
    cursor: pointer;
    /* border-radius: 50%; */
	border-radius: 20px;
    padding: 7.5px;
    transition-duration: 0.4s;
}

.whatsapp-message:hover {
	transition-duration: 0.4s;
    transform: translateY(0);
    transition: transform .3s ease;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
}

.whatsapp-message img {
	width: 45px;
}

@media screen and (max-width: 768px){
	.whatsapp-message {
		display: none;
	}
}

.sticky-contact-buttons {
	bottom: 0;
	z-index: 1020;
}
/* End of Whatsapp Message */

/* Copyright */
.copyright {
	color: #fff;
	background: var(--black-100);
	font-size: 12px;
}

.copyright a {
	color: #fff;
}

.copyright a:hover {
	color: #fff;
}

.copyright .border-top-orange {
	border-top: 1px solid var(--orange);
}
/* End of Copyright */

/* Section */
.section {

}

.section .section-title {
	/*letter-spacing: 2.5px;*/
    /* font-size: 30px;
    font-weight: 800; */
}
/* End of Section */

/* Slick */
@media (max-width: 768px) {
	.slick-track {
		margin-right: 0; /* Override the margin on the right side */
	}
}

.slick-prev:before, .slick-next:before {
	/*display: none;*/
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	color: var(--grey-100);
	box-shadow: 0px 0px 5px 0px var(--grey-100);
	opacity: 1;
}

.slick-prev, .slick-next {
	width: auto;
	/*opacity: 1;*/
    padding: 7.5px;
    height: 45px;
	width: 45px;
	border-radius: 50%;
    top: calc(50% - 15px);
    bottom: 50%;
}

button.slick-arrow {
    position: absolute;
    z-index: 9;
    /* top: calc(50% - 15px); */
    background: #fff;
    color: var(--grey-70);
    border: 0;
    /*height: 100%;*/
    /*top: 0;*/
    text-align: center;
	box-shadow: 0px 0px 5px 0px var(--grey-70);
	opacity: 0.8;
}

button.slick-arrow img {
	width: 24px;
}

button.slick-arrow i {
    font-size: 30px;
}

.slick-prev {
    left: 15px;
	/* left: 0px; */
}

.slick-next {
    right: 15px;
	/* right: 0px; */
}

@media screen and (max-width: 768px){
	.slick-prev {
		left: 30px;
		/* left: 0px; */
		/* z-index: 100; */
	}

	.slick-next {
		right: 30px;
		/* right: 0px; */
		/* z-index: 100; */
	}
}

ul.slick-dots {
	display: flex;
    list-style: none;
    justify-content: center;
}

ul.slick-dots li button {
    border: 0;
    background: transparent;
    padding: 10px;
    font-size: 20px;
    color: var(--grey-70);
}

ul.slick-dots li.slick-active button {
    font-weight: 800;
    border-bottom: 2px solid var(--orange);
	color: var(--black-100);
}
/* End of Slick */

/* Form Box */
.form-box {
	background: #F3F3F3;
	border-radius: 10px;
}

.form-box .form-title {
	font-size: 19px;
	font-weight: bold;
}

.form-box .form-title-note {
	font-size: 13px;	
}

.form-box input, .form-box select, .form-box textarea, .form-box button, .form-box #backward {
	border-radius: 15px;
}

.form-box textarea {
	resize: none;
	overflow-y: scroll;
}

.input-quantity {
	width: 120px;
    float: left;
    border: 1px solid;
    border-radius: 10px;
}
/* End of Form Box */

/* Homepage */
#header-slider .carousel-indicators li {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #777;
}

#header-slider .carousel-indicators li.active {
	background-color: var(--orange) !important;
}
/* End of Homepage */

/* Product - Homepage */
.card-image-col {
    position: relative;
}

.btn-wishlist {
    position: absolute;
    bottom: 10px;
    left: 10px;
	border-radius: 50%;
    width: 50px;
    height: 50px;
}

/* .btn-wishlist i {
    line-height: 40px;
} */

.product-detail {
	background: #F3F3F3;
	border-radius: 10px;
}

.product-detail .product-name {
	font-size: 17px;
	font-weight: 800;
}

.product-detail .product-price, .product-detail .product-down-payment {
	font-size: 15px;
}

.product-description p {
	color: var(--black-70) !important;
}

.btn-page, .btn-arrow {
    width: 31px;
    height: 31px;
    font-weight: bold;
}

.btn-page.active, .btn-page:hover {
    color: #fff;
    background: var(--orange) !important;
}

#slide-product-banners .slick-prev, #slide-product-banners .slick-next{
	padding-bottom: 0 !important;
	padding-top: 0 !important;
	top: calc(50% - 30px);
}
/* End of Product - Homepage */

/* Article - Homepage */
.article-detail {
	border: 1px solid #092332;
    border-radius: 15px;
}
/*.article-detail .article-tags {
	font-size: 14px;
}

.article-detail .article-title a {
	color: #092332;
	font-weight: bold;
}

.article-detail .article-body {
	color: #777;
}

.article-detail .article-readmore a {
	color: var(--orange);
}*/

#slick-articles .slick-dots {
    width: 100%;
    text-align: center;
    align-items: center;
	justify-content: center;
  	display: flex;
	padding: 0;
}

#slick-articles .slick-dots li {
    display: table-cell;
    background: #092332;
    border-radius: 10px;
    width: 10px;
    height: 10px;
	margin: 7.5px;
}

#slick-articles .slick-dots li.slick-active {
	background: var(--orange);
}

#slick-articles .slick-dots button {
    display: none;
}

/* Ribbon */
.ribbon {
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
.ribbon::before,
.ribbon::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	border: 5px solid #2980b9;
}
.ribbon span {
	position: absolute;
	display: block;
	width: 225px;
	padding: 15px 0;
	background-color: #3498db;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color: #fff;
	font: 700 18px/1 'Lato', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}
  
  /* top left*/
.ribbon-top-left {
	top: -10px;
	left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
	border-top-color: transparent;
	border-left-color: transparent;
}
.ribbon-top-left::before {
	top: 0;
	right: 0;
}
.ribbon-top-left::after {
	bottom: 0;
	left: 0;
}
.ribbon-top-left span {
	right: -25px;
	top: 30px;
	transform: rotate(-45deg);
}
  
  /* top right*/
.ribbon-top-right {
	top: -10px;
	right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
	border-top-color: transparent;
	border-right-color: transparent;
}
.ribbon-top-right::before {
	top: 0;
	left: 0;
}
.ribbon-top-right::after {
	bottom: 0;
	right: 0;
}
.ribbon-top-right span {
	left: -25px;
	top: 30px;
	transform: rotate(45deg);
}
  
  /* bottom left*/
.ribbon-bottom-left {
	bottom: -10px;
	left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
	border-bottom-color: transparent;
	border-left-color: transparent;
}
.ribbon-bottom-left::before {
	bottom: 0;
	right: 0;
}
.ribbon-bottom-left::after {
	top: 0;
	left: 0;
}
.ribbon-bottom-left span {
	right: -25px;
	bottom: 30px;
	transform: rotate(225deg);
}
  
  /* bottom right*/
.ribbon-bottom-right {
	bottom: -10px;
	right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
	border-bottom-color: transparent;
	border-right-color: transparent;
}
.ribbon-bottom-right::before {
	bottom: 0;
	left: 0;
}
.ribbon-bottom-right::after {
	top: 0;
	right: 0;
}
.ribbon-bottom-right span {
	left: -25px;
	bottom: 30px;
	transform: rotate(-225deg);
}

/* Product Page */
#sort-and-pagination .btn, #sort-and-pagination .btn-sort, #sort-and-pagination .select-sort {
	padding: .75rem 1.5rem
}

#sort-and-pagination .btn-sort.active {
	background: var(--orange);
	color: #fff;
}

#sort-and-pagination .select-sort {
    width: 100%;
	height: calc(2.25rem + 14px);
}

#sort-and-pagination .select-sort option {
	/*background: var(--orange);
	color: #fff;*/
}

@media screen and (max-width: 768px){
	#sort-and-pagination .select-sort {
		width: inherit;
	}

	#sort-and-pagination .btn, #sort-and-pagination .btn-sort, #sort-and-pagination .select-sort {
		width: 100%;
		padding: .375rem .75rem;
	}
}

#product-list a {
	text-decoration: none;
	color: #000;
}

.product-loading .fa-spinner {
	font-size: 60px;
}

.product-detail img {
	width: 100%;
}

/* End of Product Page */

/* Product Detail Page */
#product-detail-page .product-name {
	color: #0A2330;
	font-weight: bold;
	font-size: 28px;
}

#product-detail-page .product-price {
	color: #0A2330;
	font-weight: bold;
	font-size: 25px;	
}

#product-detail-page .product-specification {
	font-size: 13px;
}

#product-detail-page .product-ram-rom #ram-rom-price-choice {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #092332;
    color: #092332;
    padding: 7.5px 15px;
    font-size: 14px;
}

#product-detail-page .product-ram-rom #ram-rom-price-choice.active {
    border: 1px solid var(--orange);
}

#product-detail-page #btn-apply-now {
	border-radius: 15px;
	padding: 10px;
}

#product-detail-page #color-choice.active {
    border: 3px #fff double;
}

#product-detail-page #color-choice.active.active-white {
	border: 3px #555 double;	
}

#product-detail-page #color-choice {
    padding: 10px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 5px;
}

@media screen and (max-width: 768px){
	#product-detail-page .product-ram-rom #ram-rom-price-choice {
		font-size: 12px;
		margin-bottom: 7.5px;
	}
}

.section#related-product .section-title {
	font-size: 25px;
}

.data-related-product a {
	text-decoration: none;
	color: #000;
}
/* End of Product Detail Page */

/* Custom Select2 */
span.select2 {
    width: 100% !important;
}

span.select2-selection {
    border-radius: 15px !important;
    height: calc(2.25rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: inherit !important;
    color: #495057;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 2.25rem !important;
}
/* End of Custom Select2 */