@import url(https://fonts.googleapis.com/css?family=Roboto:400,500|Sarabun:400,600,700);
@import url('https://fonts.googleapis.com/css?family=Rubik');
@import url('https://fonts.googleapis.com/css?family=Poppins');

body {
	background-repeat: repeat;
	background-color: rgba(234, 249, 255, 0.04);
	font-family: Roboto, sans-serif;
	color: #5b626b;
	font-size: 14px
}

html {
	overflow-x: hidden;
	position: relative;
	min-height: 100%;
	font-family:sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	font-family: Sarabun, sans-serif;
	font-weight: 600
}

p {
	line-height: 1.7
}

svg {
	max-width: 100%
}

a {
	color: #6c757d
}

a:hover {
	outline: 0;
	text-decoration: none
}

a:active {
	outline: 0;
	text-decoration: none
}

a:focus {
	outline: 0;
	text-decoration: none
}

b,
strong {
	font-weight: 500
}

img{
	max-width: 100%;
}

ul, li{
	list-style: none;
}
@media only screen and (max-width: 500px) {
.colmd6_fll{
	position: relative;
	top: 0;
	width: 100%;
    padding: 0 15px;
    margin: 20px 0;
}
.colmd6_sb{
	position: relative !important;
	top: 0;
	right: 0;
}
.fll{
	float: none;
}
.rgg{
	float: none;
}
}
.tabcontent h4{
	color: #000;
}
.tablesorter-default tr.even > td {
    background-color: #fff;
}
.tablesorter-default tr.odd > td {
    background-color: #f5f5f5;
}
/*orders*/
button:focus{
	outline: none !important;
}
.tab {
  overflow: hidden;
}
.page-link:focus {
    /* z-index: 2; */
    outline: 0;
    box-shadow: none !important;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #dfdfdf;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE"
}
div.dataTables_wrapper div.dataTables_filter label, div.dataTables_wrapper div.dataTables_length label {
    text-align: left;
    font-weight: 400;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.dataTables_wrapper label {
    display: inline-block;
    margin-bottom: 0 !important;
}
.divdataTables_length.bs-select{
    margin-bottom: 0 !important;
}
div.dataTables_wrapper div.dataTables_filter select, div.dataTables_wrapper div.dataTables_length input, div.dataTables_wrapper div.dataTables_length select {
    width: auto;
}
input.ds {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
}
select.fd {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
    height: 28px;
}
div#selectedColumn_filter {
    /*text-align: right;*/
    margin: 5px 5px;
}
div#selectedColumn_length {
    margin: 5px 5px;
}
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}
.pagination .page-item .page-link {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    outline: 0;
    border: 0;
    background-color: transparent;
    font-size: .9rem;
    color: #212529;
}
.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
     -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
    background-color: #4285f4 !important;
    color: #fff;
}
div#selectedColumn_paginate {
    margin: 0 auto;
    display: table;
}
.tablesorter-default td{
	padding: 15px;
	text-align: center;
}
.tablesorter-default .header, .tablesorter-default .tablesorter-header{
	font-size: 14px;
}
.tablesorter-default th{
	text-align: center;
}
.tabcontent p{
	font-size: 16px;
    margin-bottom: 0;
}
.tabcontent h4{
    font-size: 17px;
}
.colmd6_fll{
	width: auto;
    padding: 0 15px;
    margin: 20px 0;
    float: left;
    margin-right: 40px;
}
.colmd6_sb{
    width: auto;
    float: left;
    margin: 20px 0;
    padding: 0 15px;
}
.tab button{
	font-size: 14px;
}
.colmd6_fll a,.colmd6_sb a{
	color: #000;
    font-weight: 500;
}
.colmd6_fll h4, .colmd6_sb h4{
    color: #000;
    font-weight: 700;
}
.ord h4{
	color: #000;
    font-weight: 700;
}

/*profile*/
.pfl_dtl .field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
.pfl_dtl label,.pfl_dtl input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.pfl_dtl input {
  border: 0;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: text;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 40px;
}

.pfl_dtl input:focus {
  outline: 0;
  /*border-bottom: 1px solid #666;*/
}

.pfl_dtl label {
  text-transform: capitalize;
  font-size: 10px;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
/* input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
} */
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
.pfl_dtl input:focus::-webkit-input-placeholder {
  opacity: 0;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
.pfl_dtl input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
  color: #2399f7;
  font-weight: 500;
}
.pfl_dtl input:focus + label span{
	color: red;
}
.pfl_img{
	margin-bottom: 5px;
}
/* .upt_btn button {
    border: none;
    background-color: #2399f7;
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 15px;
} */
.upt_btn {
    /*display: table;
    margin: 0 auto;
    width: auto;
    margin-top: 20px;*/
		margin-bottom: 15px;
}
.upt_btn button{
border: none;
background-color: #bf0131;
color: #fff;
border-radius: 5px;
width: auto;
display: table;
margin: auto;
font-size: 16px;
padding: 12px;
line-height: normal;
font-weight: 600;
}
/*billing*/
.bll_dtl .field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 2em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
.bll_dtl label,.bll_dtl input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.bll_dtl input {
  border: 0;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: text;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 40px;
}

.bll_dtl input:focus {
  outline: 0;
  /*border-bottom: 1px solid #666;*/
}

.bll_dtl label {
  text-transform: capitalize;
  font-size: 10px;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
/* input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
} */
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 0;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
.bll_dtl input:focus::-webkit-input-placeholder {
  opacity: 0;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
.bll_dtl input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
  color: #2399f7;
  font-weight: 500;
}
/*.bll_dtl input:focus + label span{
	color: red;
}*/
/*end billing*/

/*shipping*/
.shp_dtl .field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 2em;
}
/**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
.shp_dtl label,.bll_dtl input {
  transition: all 0.2s;
  touch-action: manipulation;
}

.shp_dtl input {
  border: 0;
  font-family: inherit;
  -webkit-appearance: none;
  border-radius: 0;
  cursor: text;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  height: 40px;
}

.shp_dtl input:focus {
  outline: 0;
  /*border-bottom: 1px solid #666;*/
}

.shp_dtl label {
  text-transform: capitalize;
  font-size: 10px;
}
/**
* Translate down and scale the label up to cover the placeholder,
* when following an input (with placeholder-shown support).
* Also make sure the label is only on one row, at max 2/3rds of the
* field—to make sure it scales properly and doesn't wrap.
*/
/* input:placeholder-shown + label {
  cursor: text;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
} */
/**
* By default, the placeholder should be transparent. Also, it should
* inherit the transition.
*/
::-webkit-input-placeholder {
  opacity: 1;
  transition: inherit;
}
/**
* Show the placeholder when the input is focused.
*/
.shp_dtl input:focus::-webkit-input-placeholder {
  opacity: 0;
}
/**
* When the element is focused, remove the label transform.
* Also, do this when the placeholder is _not_ shown, i.e. when
* there's something in the input at all.
*/
input:not(:placeholder-shown) + label,
.shp_dtl input:focus + label {
  transform: translate(0, 0) scale(1);
  cursor: pointer;
  color: #2399f7;
  font-weight: 500;
}
.shp_dtl input:focus + label span{
	color: red;
}
/*end shipping*/
/*End Profile*/
.show-hide{
	display: block !important;
}
.fll{
	float: left;
}
.rgg{
	float: right;
}
/*End Orders*/

/*************
Default Theme
*************/
/* overall */
.tablesorter-default {
	width: 100%;
	font: 12px/18px Arial, Sans-serif;
	color: #333;
	background-color: #fff;
	border-spacing: 0;
	margin: 10px 0 15px;
	text-align: left;
}

/* header */
.tablesorter-default th,
.tablesorter-default thead td {
	font-weight: bold;
	color: #000;
	background-color: #fff;
	border-collapse: collapse;
	border-bottom: #ccc 2px solid;
	padding: 0;
}
.tablesorter-default tfoot th,
.tablesorter-default tfoot td {
	border: 0;
}
.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
	background-position: center right;
	background-repeat: no-repeat;
	cursor: pointer;
	white-space: normal;
	padding: 4px 20px 4px 4px;
}
.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
	border-bottom: #000 2px solid;
}
.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc {
	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
	border-bottom: #000 2px solid;
}
.tablesorter-default thead .sorter-false {
	background-image: none;
	cursor: default;
	padding: 4px;
}

/* tfoot */
.tablesorter-default tfoot .tablesorter-headerSortUp,
.tablesorter-default tfoot .tablesorter-headerSortDown,
.tablesorter-default tfoot .tablesorter-headerAsc,
.tablesorter-default tfoot .tablesorter-headerDesc {
	border-top: #000 2px solid;
}

/* tbody */
.tablesorter-default td {
	background-color: #fff;
	border-bottom: #ccc 1px solid;
	padding: 4px;
	vertical-align: top;
}

/* hovered row colors */
.tablesorter-default tbody > tr.hover > td,
.tablesorter-default tbody > tr:hover > td,
.tablesorter-default tbody > tr.even:hover > td,
.tablesorter-default tbody > tr.odd:hover > td {
	background-color: #fff;
	color: #000;
}

/* table processing indicator */
.tablesorter-default .tablesorter-processing {
	background-position: center center !important;
	background-repeat: no-repeat !important;
	/* background-image: url(images/loading.gif) !important; */
	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
}

/* Zebra Widget - row alternating colors */
.tablesorter-default tr.odd > td {
	background-color: #dfdfdf;
}
.tablesorter-default tr.even > td {
	background-color: #efefef;
}

/* Column Widget - column sort colors */
.tablesorter-default tr.odd td.primary {
	background-color: #bfbfbf;
}
.tablesorter-default td.primary,
.tablesorter-default tr.even td.primary {
	background-color: #d9d9d9;
}
.tablesorter-default tr.odd td.secondary {
	background-color: #d9d9d9;
}
.tablesorter-default td.secondary,
.tablesorter-default tr.even td.secondary {
	background-color: #e6e6e6;
}
.tablesorter-default tr.odd td.tertiary {
	background-color: #e6e6e6;
}
.tablesorter-default td.tertiary,
.tablesorter-default tr.even td.tertiary {
	background-color: #f2f2f2;
}

/* caption */
.tablesorter-default > caption {
	background-color: #fff;
}

/* filter widget */
.tablesorter-default .tablesorter-filter-row {
	background-color: #eee;
}
.tablesorter-default .tablesorter-filter-row td {
	background-color: #eee;
	border-bottom: #ccc 1px solid;
	line-height: normal;
	text-align: center; /* center the input */
	-webkit-transition: line-height 0.1s ease;
	-moz-transition: line-height 0.1s ease;
	-o-transition: line-height 0.1s ease;
	transition: line-height 0.1s ease;
}
/* optional disabled input styling */
.tablesorter-default .tablesorter-filter-row .disabled {
	opacity: 0.5;
	filter: alpha(opacity=50);
	cursor: not-allowed;
}
/* hidden filter row */
.tablesorter-default .tablesorter-filter-row.hideme td {
	/*** *********************************************** ***/
	/*** change this padding to modify the thickness     ***/
	/*** of the closed filter row (height = padding x 2) ***/
	padding: 2px;
	/*** *********************************************** ***/
	margin: 0;
	line-height: 0;
	cursor: pointer;
}
.tablesorter-default .tablesorter-filter-row.hideme * {
	height: 1px;
	min-height: 0;
	border: 0;
	padding: 0;
	margin: 0;
	/* don't use visibility: hidden because it disables tabbing */
	opacity: 0;
	filter: alpha(opacity=0);
}
/* filters */
.tablesorter-default input.tablesorter-filter,
.tablesorter-default select.tablesorter-filter {
	width: 95%;
	height: auto;
	margin: 4px auto;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #bbb;
	color: #333;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: height 0.1s ease;
	-moz-transition: height 0.1s ease;
	-o-transition: height 0.1s ease;
	transition: height 0.1s ease;
}
/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
	display: none;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
	text-align: center;
	cursor: pointer;
	background-color: #e6bf99;
}
/* Order */
.field.field--name-title.field--type-string.field--label-hidden.field__item{
	display: none;
}
.path-checkout td .field a {
    word-break: break-word;
    color: #565656;
    cursor: pointer;
    pointer-events: none;

}
/* End Order */