/*--- Default tokoelit css. This must put for every template ---*/   
a {color:black;} 
.pac-container { z-index: 99999;} /*---for gosend map modal on summary page---*/
.error {color:red;} 
/*----share buttons product page--*/
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices, .stButton .stButton_gradient {height:22px !important;}
/*---date picker----*/
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {color:black;}
label {font-weight:normal;}
/*----shipping logo---*/
.shippingLogo img {width:40%; height:auto;} /*to control shipping logo dimension in summary page */
/*
Chris Coyier's Responsive Table
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*---this is for Cart----*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    /* Force table to not be like tables anymore */
    .myCart table, .myCart thead, .myCart tbody, .myCart th, .myCart td, .myCart tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    .myCart thead tr { position: absolute; top: -9999px; left: -9999px; }
    .myCart tr { border: 1px solid #ccc; }
    .myCart td {
        /* Behave  like a "row" */
        border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 10px !important; text-align:left;
    }
    .myCart td:before {
        /* Now like a table header */
        /* position: absolute; */
        /* Top/left values mimic padding */
        top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; clear:both;
    }
    /* Label the data */
    /* td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: ""; } */
    .myCart td:nth-of-type(3):before { content: "Price"; }
    .myCart td:nth-of-type(4):before { content: "Quantity"; }
    .myCart td:nth-of-type(5):before { content: "Subtotal"; }
    .myCart td:nth-of-type(6):before { content: "Delete"; }
    #button_continue a {display:block; width:100%; text-align:center;}
    #button_checkout {text-align:left;}
    #button_checkout a {display:block; width:100%; text-align:center;}
}

/*---this is for Order History----*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    /* Force table to not be like tables anymore */
    .orderHistory table, .orderHistory thead, .orderHistory tbody, .orderHistory th, .orderHistory td, .orderHistory tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    .orderHistory thead tr { position: absolute; top: -9999px; left: -9999px;}
    .orderHistory tr { border: 1px solid #ccc; }
    .orderHistory td {
        /* Behave  like a "row" */
        border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 10px !important; text-align:left;
    }
    .orderHistory td:before {
        /* Now like a table header */
        /* position: absolute; */
        /* Top/left values mimic padding */
        top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; clear:both;
    }
    /* Label the data */
    /* .orderHistory td:nth-of-type(1):before { content: "Order No"; } */
    .orderHistory td:nth-of-type(1):before { content: "Order No"; }  
    .orderHistory td:nth-of-type(2):before { content: "Order Date"; } 
    .orderHistory td:nth-of-type(3):before { content: "Amount"; }
    .orderHistory td:nth-of-type(4):before { content: "Item Details"; }
    .orderHistory td:nth-of-type(5):before { content: "Order Status"; }
    .orderHistory td:nth-of-type(6):before { content: "Order Status"; }
}
/*----product pagination color ---*/
.pagination>li>a, .pagination>li>span {color:black;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {background:black; border:black;}
/*----no stock icon---*/
img#nostockIcon {
    width: 50px !important;
    height: auto;
    position: absolute;
    top: 345px;
}

/*----popup banner----*/
/*----modal for popup----*/
.customModalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	z-index: 999999999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
}

.customModalDialog > div {
	max-width: 800px;
	position: relative;
	margin: 10% auto;
	/*padding: 5px 20px 13px 20px;*/
	background: #000;
}

.customModalDialog img {width:100%;}

.customModalDialog .modalClose {
    opacity:1;
	/* color: #c1c1c1; */
	color:grey !important;
    /* background:black; */
    font-size:20px;
	line-height: 25px;
	position: absolute;
	right: -2px;
	text-align: center;
	top: -1px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	/* -webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;  */
	/* -moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000; */
}

.customModalDialog .modalClose:hover { color:grey; }


/*---summary page modal popup-----*/
/*----activate this if the bootstrap modal has conflict with current template ---*/
/* .modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	max-width: 800px;
	position: relative;
	margin: 5% auto;
	padding: 5px 20px 13px 20px;
	background: #fff;
}

.close {
    opacity:1;
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; } */

.custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }