:root {

  --vs-danger: 255, 0, 0;

  --vs-success: 0, 230, 0;

}

html body {

  font-family: 'Microsoft JhengHei';

  --font-family-sans-serif: 'Microsoft JhengHei';

}

html body .content .content-wrapper h2.content-header-title {

  font-weight: 800;

  font-size: 1.5em;

  padding: 0.3rem 0;

}





.form-label-group.readonly>label {

  top: -20px;

  left: 3px;

  padding: 10px 5px 0px;

  display: block;

  background: #fff;

  font-size: 12px;

  color: rgb(34 41 47 / 66%) !important;

  opacity: 1
}



/*首次登入頁*/

.login_area .form-label-group>input:not(:placeholder-shown)~label,
.login_area .form-label-group textarea:not(:placeholder-shown)~label {

  padding: 10px 5px 0px;

  display: block;

  background: #fff;

  font-size: 12px;

}

.login_area .form-label-group>input:not(:focus):not(:placeholder-shown)~label,
.login_area .form-label-group textarea:not(:focus):not(:placeholder-shown)~label {

  color: rgb(34 41 47 / 66%) !important;

}

.login_area .form-label-group {

  margin-top: 10px;

}



.card-body {

  -webkit-box-flex: 1;

  -webkit-flex: 1 1 auto;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  padding: 2rem;

}

.disable-class {

  color: #ccc;

}

.pl-30px {

  padding-left: 30px !important
}

/*存檔區塊*/

.action-body .btn {

  font-family: 'Microsoft JhengHei';

  font-size: 16px;

  margin-right: 10px;

}

.action-body .btn:last-child {

  margin-right: 0px;

}

.action-body-mb {

  display: none;

}

/*主題*/

ul.nav_theme {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-bottom: 0;

  list-style: none;

  justify-content: center;

  padding: 5px 0 30px 0;

}

/* 20201221調整間距 */

@media (max-width: 991px) {

  ul.nav_theme {

    padding: 0 0 20px 0;

  }

}

ul.nav_theme li {

  padding: 0 12px;

  border-right: 1px solid #ccc;

}

ul.nav_theme li:last-child {

  border-right: 0px;

}

ul.nav_theme li a {

  font-size: 15px;

}

ul.nav_theme li a.active {

  color: var(--primary);

}

.theme_list table {

  border-collapse: separate;

  border-spacing: 0px 20px;

}

.theme_list table tbody tr {

  background-color: #FFFFFF;

  box-shadow: rgba(0, 0, 0, 0.05) 0 4px 20px 0;

  cursor: pointer;

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;

  border-radius: 0.5rem;

  margin-bottom: 50px;

}

.theme_list table.table thead th {

  padding: 0.714rem 1.785rem;

  font-weight: 600;

  font-size: 1.2em;

}

.theme_list .dropdown,
.dropup,
.dropright,
.dropleft {

  display: inline-block;

}

.theme_list .dropdown .dropdown-menu a {

  font-size: 16px;

}

.theme_card {

  position: relative;

  width: 100%;

  padding-right: 14px;

  padding-left: 14px;

}



.theme_card .card:hover {

  box-shadow: 0 0 10px 10px #dfdfdf;

}

.theme_add .card-content {

  width: 100%;

  border: 2px dashed #bababa;

  border-radius: calc(0.5rem - 1px);

}

.theme_add .card-content::before {

  content: "";
  width: 100%;
  display: block;
  padding-top: 58%;
  position: relative;
}

.theme_add_btn {

  width: 120px;

  height: 42px;

  padding: 10px 20px;

  background-image: linear-gradient(0deg, #f2f2f2, #fff);

  color: #626262;

  border-radius: 20px;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

}

.theme_add_btn:hover {

  color: #fff;

  background-image: linear-gradient(30deg, #7367F0 0%, #CE9FFC 100%);

}

.theme_card .card:hover {

  box-shadow: 0 0 10px 10px #dfdfdf;

}



.theme_in_use {

  width: 101px;

  height: 101px;

  position: absolute;

  color: white;

  font-size: 1.2em;

  padding-top: 20px;

  padding-left: 10px;

  font-weight: 600;

  background: url(../../images/transparent_green.png);

}

.dropdown-menu li a {

  font-size: 15px;

}

.progress-bar {

  height: 6px;

}

.theme_no_use img {

  opacity: 0.6;

}

.card-img-radius {

  border-radius: calc(0.5rem - 1px);

  /* 20201221確保圖片占滿空間 */

  width: 100%;
  padding-bottom: 58.53018372703412%;
  background-position: top center;
  background-size: cover;

}

.theme_hdead {
  position: relative;

  text-align: center;

}

.theme_hdead p {

  font-size: 38px;

  line-height: 1.4;

  display: inline-block;

  padding: 20px 0;

}

.theme_mode {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}

.theme_mode_btn {
  width: 40px;
  height: 30px;
  padding: 12px 5px;
  display: block;
  background-color: #fefefe;
  position: relative;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: opacity .3s linear;
}

.theme_mode_btn:hover {

  opacity: .7;

}

.theme_mode_btn--list {
  border-radius: 2px 0 0 2px;
}


.theme_mode_btn--list span {
  width: 10px;
  height: 2px;
  margin: auto;
  background-color: #888;
  display: block;
}

.theme_mode_btn--list::before,
.theme_mode_btn--list::after {
  content: "";
  width: 13px;
  height: 2px;
  margin: auto;
  background-color: #888;
  display: block;
  position: relative;
}

.theme_mode_btn--list::before {
  bottom: 2px;
}

.theme_mode_btn--list::after {
  top: 2px;
}

.theme_mode_btn--card {
  border-left: 1px solid #ccc;
  border-radius: 0 2px 2px 0;
}

.theme_mode_btn--card span {
  width: 15px;
  height: 10px;
  display: block;
  border-radius: 2px;
  background-color: #888;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/* 20201221 */

@media (max-width: 991px) {

  .theme_hdead p {

    padding: 0 0 10px 0;

  }

}



.theme-content {

  position: relative;

}

.theme-content:hover .overlay {

  background-color: rgba(0, 0, 0, .5);

  position: absolute;

  top: 0;

  left: 0;

  clear: float;

  width: 100%;

  height: 100%;

  color: #ffffff;

  border-radius: calc(0.5rem - 1px);

}

.theme-content:hover .theme_list_btn {

  display: block;

}

.theme_list_btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 1.075rem;

  font-weight: 400;

  text-align: center;

  padding: 0 16px;

  height: 48px;

  line-height: 48px;

  min-width: 180px;

  overflow: hidden;

  white-space: nowrap;

  color: #fff;

  z-index: 11;

  display: none;

}

.theme-content .theme_list_btn a {

  padding: 10px 20px;

  border-radius: 5px;

  border: 1px solid #fff;

  display: inblock;

  color: #fff;

}

.theme-content .theme_list_btn a:last-child {

  margin-left: 0px;

}

.theme-content .theme_list_btn a:hover {

  color: #000;

  background: #fff;

}

.theme_card .theme_title {

  font-size: 15px;

  text-align: center;

  padding: 10px;

}

/*分類*/

.category_header {

  display: flex;

  justify-content: space-between;

  width: 100%;

  font-size: 1.2em;

  font-weight: 600;

}

.category_header div {

  text-align: center;

}

.category_header div:last-child {

  display: flex;

  justify-content: flex-end;

}

.category_header div:last-child span {

  min-width: 120px;

}

/*多語言設定*/

.content-header.justify-content {

  justify-content: space-between
}

.content-header .language_block {

  margin-right: 30px;

}

.content-header .language_block a {

  padding: 5px 20px;

  border-radius: 5px;

  font-size: 1.1em;

  border: 1px solid #d6d6d6;

  display: inline-block;

  color: #666;

}

.content-header .language_block a.language_chang:hover {

  background-color: rgba(115, 103, 240, 0.08);

  color: #7367F0;

}

.main-menu.menu-light .navigation li.nav-item.status-close a {

  color: #929292;

}

.main-menu.menu-light .navigation li.nav-item.status-close>a span:after {

  content: "[ 關閉中 ]";

  margin-left: 10px;

}

div.swal2-content {

  font-size: 1.2em;

  font-family: 'Microsoft JhengHei';

  font-weight: 500;

}

.text_disabled {

  font-size: 1.1rem;

  color: #888;

  background-color: #F5F5F1;

}

/*---複製語言-彈跳視窗---*/

.mask-container {

  display: none;

  position: fixed;

  z-index: 1060;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  padding: .625em;

  overflow-x: hidden;

  background-color: transparent;

  -webkit-overflow-scrolling: touch;

  background-color: rgba(0, 0, 0, .4);

}

.popup-block {

  position: relative;

  box-sizing: border-box;

  flex-direction: column;

  justify-content: center;

  width: 40em;

  max-width: 100%;

  padding: 1.25em;

  border: none;

  border-radius: .3125em;

  background: #fff;

  font-family: inherit;

  font-size: 1rem;

}

.popup-block .popup-heading {

  box-shadow: rgba(161, 160, 162, 0.4) 0 6px 15px -7px;

  font-weight: 700;

  font-size: 1.5rem;

  padding: 0;

  padding-bottom: 8px;

  color: #333;

}

.popup-block ul.lang_copy_checkbox {

  max-height: 300px;

}

.popup-block ul.lang_copy_checkbox li {

  padding: 0.7em;

  padding-left: 0;

}

.popup-block ul.lang_copy_checkbox li:nth-child(even) {

  background: #f7f7f9;

}

a.btn-success {

  color: #fff !important;

  font-family: 'Microsoft JhengHei';

  font-size: 16px;

}

.btn-left {

  height: 48px;

  padding: 0.9rem 0.938rem;

  line-height: 1.7;

}

.alert-light {

  color: #535558 !important;

}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {

  font-size: 1.2em;

}

table.data-list-view.dataTable tbody td,
table.data-thumb-view.dataTable tbody td {

  word-break: break-all;

}

.card.my_head_action {

  margin-bottom: 1rem;

}

.card.my_head_action .card-body {

  padding: 0.8rem 1.5rem;

}

.table-responsive .btn.btn-outline-primary {

  margin-right: 0.75rem;

}

div.dataTables_wrapper div.dataTables_filter select,
div.dataTables_wrapper div.dataTables_length select {

  padding: 0 1rem;

}

.table-responsive .list-action a {

  font-size: 1.5rem;

  color: #747474;

  margin-left: 5px;

}

.table-responsive .list-action a:hover {

  color: #7367F0;

}

table.data-list-view.dataTable tbody tr.state_off {

  background: #eaeaea12;

  color: #b1b1b1;

}

table.data-list-view.dataTable .lang_default {

  padding-left: 30px;

}

table.data-list-view.dataTable tbody tr td a.btn-copy {

  padding: 0.5rem 0.8rem;

  font-size: 1.2rem;

  line-height: 1.1;

  border-radius: 0.3rem;

  border: none;

  display: inline-block;

  color: #888;

}

table.data-list-view.dataTable tbody tr td a.btn-copy:hover {

  color: #7367F0;

}

table.data-list-view.dataTable tbody tr td input.form-control {

  display: inline-block;

  width: 80%;

}

.no_imgae_thumb {

  line-height: 60px;

  font-size: 3em;

  width: 60px;

  height: 60px;

  text-align: center;

  border-radius: 5px;

  color: #ccc;

}

/*表單*/

.nav.nav-tabs .nav-item {

  width: 10%;

  min-width: 100px;

  margin-right: 10px;

}

.nav.nav-tabs .nav-item .nav-link {

  font-size: 1.1em;

  padding: 10px;

  text-align: center;



  background: #fff;
}


.nav-link.custom-url-path::before {
  content: '自定義';
  letter-spacing: .8px;
  position: relative;
  left: 3.5px;
}



label {

  color: #888;

  font-size: 1.1rem;

  margin-bottom: 0.8em;

  padding-left: 0.2rem;

}

.input-group-lg>.form-control:not(textarea),
.input-group-lg>.custom-select {

  max-height: 38px;

}

.input-group-lg>.input-group-prepend>.input-group-text {

  padding-left: 1rem;

  font-size: 1.1rem;

  color: #666;

  max-height: 38px;

  line-height: 38px;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {

  color: #666;

}

.nav-vertical.my_html .nav-item .nav-link {

  padding: 10px 0;

}

.required:before {

  content: "*";

  color: #F00;

}

.card .card-title {

  font-weight: 800;

}

.tip_bar {

  background-color: #ffecdaba;

  color: #b56316;

  padding: 0.2em 0.6em;

  display: inline-block;

  border-radius: 0.3em;

}

ul.category_checkbox {

  max-height: 600px;

}

ul.category_checkbox li {

  line-height: 2.5em;

}

ul.category_checkbox li:nth-child(even) {

  background: #f7f7f9;

}

.upload-image-item {

  width: 220px;

  margin-right: 20px;

  position: relative;

}

.cursor_context_menu {

  cursor: context-menu;

}

.upload-image-item.no_move {

  cursor: context-menu;

}

.upload-image-item .upload-image-item-x {

  position: absolute;

  font-size: 20px;

  z-index: 5;

  right: -5px;

  background: #fff;

  color: #aaa;

}

.upload-image-item .upload-image-item-x:hover {

  color: #7367F0;

}

.upload-image-item .upload-content {

  position: relative;

  height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.upload-image-item .upload-content img {

  width: 100%;

}

.upload-image-item .upload-content .photo_edit {

  display: none;

  position: absolute;

  padding: 5px 10px;

  background: #7367F0;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: #fff;

  border-radius: 5px;

}

.upload-image-item .upload-content:hover .photo_edit {

  display: block;

}

.upload-image-item .upload-content .flaot_tip {

  position: absolute;

  z-index: 2;

  background: #9990f4d6;

  width: calc(100% - 14px*2);

  bottom: 14px;

  color: #fff;

  font-size: 12px;

}

.img-border {

  border: 1px solid #D9D9D9;

  padding: 5px;

  width: 150px;

}

.img-border img {

  width: 100%;

}

.upload-image-item:last-child {

  margin-right: 0px;

}

.upload-content {

  border: 1px solid #D9D9D9;

  text-align: center;

  padding: 1em;

}

.upload-content .upload_no_image {

  background: #ececec;

  color: #888;

  font-size: 2em;

  height: 220px;

  padding-top: 3em;

}

.upload-content .upload_no_image span {

  font-size: 12px;

  display: block;

}

.upload-action {

  text-align: center;

  padding: 1em;

  font-size: 1.1em;

  color: #ccc;

}

.upload-action a {

  color: #888;

}

.upload-action a:hover {

  color: #7367F0;

}

.flex-start {

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

}

.scroller {

  overflow: overlay;

  scrollbar-width: thin;

}

.scroller::-webkit-scrollbar {

  width: 5px;

}

.scroller::-webkit-scrollbar-track {

  -webkit-border-radius: 10px;

  border-radius: 10px;

}

.scroller::-webkit-scrollbar-thumb {

  -webkit-border-radius: 4px;

  border-radius: 4px;

  background: rgb(219, 219, 219);

}

.cf:after {

  visibility: hidden;

  display: block;

  font-size: 0;

  content: " ";

  clear: both;

  height: 0;

}

* html .cf {

  zoom: 1;

}

*:first-child+html .cf {

  zoom: 1;

}

html {

  margin: 0;

  padding: 0;

}

body {

  font-size: 100%;

  margin: 0;

  font-family: 'Helvetica Neue', Arial, sans-serif;

}

h1 {

  font-size: 1.75em;

  margin: 0 0 0.6em 0;

}

a {

  color: #626262;

}

a:hover {

  text-decoration: none;

}

p {

  line-height: 1.5em;

}

.small {

  color: #666;

  font-size: 0.875em;

}

.large {

  font-size: 1.25em;

}

/***********************/

/* 多語言模式

/************************/

.mask-container .mult-language-tabs {

  width: calc(100% + 35px);

  margin-left: -17px;

  border-bottom: 1px dashed #ccc;

  margin-top: 20px;

}

.mask-container .mult-language-tabs>.nav {

  padding: 2px 0px;

}

.mult-language-tabs {

  width: calc(100% + 58px);

  margin-left: -29px;

  border-bottom: 1px dashed #ccc;

  margin-bottom: 20px;

}

/* 20201221調整高度 、scrollbar */

.mult-language-tabs>.nav {

  height: 46px;

  border: none;

  margin-bottom: 0rem;

  position: relative;

  border-radius: 0;

  width: 100%;

  background: #f3f3f3;

  padding: 0px 22px;

  border: 1px solid #e0dbdb;

}

.mult-language-tabs>.scrollbar {

  overflow-y: hidden;

  overflow-x: scroll;

}

.mult-language-tabs ::-webkit-scrollbar {

  height: 2px;

}

.mult-language-tabs>.nav .nav-item .nav-link {

  font-size: 1.1em;

  padding: 10px 20px;

  margin-right: 10px;

}

.mult-language-tabs>.nav .nav-item {

  padding: 3px 0px;

}

.mult-language-tabs>.nav .nav-item .nav-link {

  color: #9a9a9a;

  font-size: 0.95rem;

  border: none;

  min-width: auto;

  font-weight: 450;

  padding: 0.61rem 0.635rem;

  border-radius: 0;

}

.mult-language-tabs>.nav .nav-item .nav-link.active {

  border: none;

  position: relative;

  color: #7367F0;

}

.mult-language-tabs>.nav .nav-item .nav-link.active:after {

  background: #948bf3;

  content: attr(data-before);

  height: 2px;

  width: 100%;

  left: 0;

  position: absolute;

  bottom: 0;

  top: calc(100% + 3px);

}

.mult-language-tab-content {

  padding: 20px 30px;

  width: 100%;

}

.form-group {

  flex: 0 0 100%;

  max-width: 100%;

}

#youtube_v{

  max-width: 320px;

  width: 100%;

  max-height: 180px;

  height: 100%;

}


/***********************/

/* Nestable - 選單拖曳

/************************/

select.no_filter span.select2-search {

  display: none;

}







/*===分類選擇===*/

.catagroy-box {

  display: flex;

  justify-content: flex-start;

}

.catagroy_select {

  width: 300px;

  height: 400px;

  border: 1px solid #ececec;

  overflow-y: auto;

}

.catagroy_select ul li {

  padding: 0.7em;

  padding-left: 0.5em;

}

.catagroy_select ul li:hover,
.catagroy_select ul li.action {

  background: #f3f3f3;

}

.status_no_select {

  color: #ccc;

}

.status_selected {

  color: #F00;

}

.authority_group {

  padding: 5px 10px;

  border: 1px solid #e2e0e0;

  border-radius: 5px;

  max-height: 400px;

}

.authority_group ul li {

  padding: 5px 10px;

}

.authority_group ul li:nth-child(even) {

  background: #f2f2f2;

}

/*===列表頁===*/

.data-list-view a.search_keyword_name:hover,
table.dataTable tbody tr.selected a.search_keyword_name {

  color: #7367F0
}

.table-responsive a {

  font-size: 1.1rem;

}

td.category_item span::after {

  content: ",";

}

td.category_item span:last-child::after {

  content: "";

}

.data-list-view .select2-container--default .select2-selection--single,
.select_option_gray_bg .select2-container--default .select2-selection--single {

  background: #EDEDED;

}

.data-list-view .select2-container--default .select2-selection--single .select2-selection__rendered {

  color: #666;

  font-size: 0.96em;

}

.data-list-view .state_off .select2-container--default .select2-selection--single {

  background: #f8f8f8;

}

.data-list-view .state_off .select2-container--default .select2-selection--single .select2-selection__rendered {

  color: #9a9a9a;

}

table.data-list-view.dataTable tbody tr.selected a,
table.dataTable tbody th.selected a,
table.dataTable tbody td.selected a {

  color: #7367F0;

}

.gray_bg tr th {

  background: #f3f3f3;

}

/*===內容頁===*/

/*產品-延伸相關產品*/

.related_product_search_result {

  padding: 10px 20px;

  border: 1px solid #D9D9D9;

  border-radius: 5px;

  height: 200px;

  border-top: 0px;

}

/*產品- 檔案下載*/

#upload_file_block .upload_text {

  margin: 4px 0px;

}

#upload_file_block .table td {

  border-top: 1px dotted #e2e2e2;

}



.table-responsive .table.form_table {

  font-size: 0.5em;

}

.table-responsive .table.form_table thead th {

  background: #f5f5f5;

}

.table-responsive .table.form_table thead tr th {

  font-size: 1.1rem;

}

.table-responsive .table.form_table tbody tr {

  cursor: move;

}

.active-background-class {

  background: #f2f7fc;

  cursor: move;

}

.table-responsive .table.form_table tr.no_data {

  cursor: context-menu;

}

.table-responsive .table.form_table tr.no_data td {

  text-align: center;

  padding: 100px 0px;

}

/* 產品表格調整 */

.table.form_table.three_col th:first-child {

  width: 50%;

}



.table.form_table.three_col th:nth-child(n+2) {

  width: 25%;

}

.form-upload {

  background-color: #fff !important;

  padding-right: 55px !important;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.form-upload-btn {

  width: 50px;
  height: 37.5px;
  padding: 0.7rem 0.3rem;
  background-color: #7367f0;
  font-size: 0.96rem;
  line-height: 1.2;
  color: #fff !important;
  border-radius: 0 5px 5px 0;
}

/*顏色選擇器*/

.color-group {

  width: 200px;

}

.input-group-addon {

  padding: 10px;

}

.colorpicker-saturation {

  width: 100px;

  height: 100px;

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAAP9klEQVR4XnRWC47rNgwcKjlA0bv2VL1Qi/YELRav7203iS1ppqZoiXCAhuBHVLI74xFtG3/Hz2joIOjRGuR5eMYuRn9YA1fds859KX8ZvczLr9/pImiR3Rqky9/wlajRIdVE/1Rufeu/0No3/ASgBZAJUkwgi0iCaEatekJJoEqiTQncd67/gyOfRCZshTed0Nl8LbLj8D6qxtoq9/7kJz/aH/3Xfu8VwI5+AUH8DxE7gUyiIpZ5LwiGzUqE3CScJsCDQHAsvBnxWpkbC0QMHmBp6latWS0bnvrCN/x1+xPfce+Ij0GAyeAGGz15sOiax2UylPhKrFaMPnVWClwepKh07hdhkVDsK2uoyEIySergjdbY2VBtV8VLr8Mf9mF/4wMb7kR8FOhzFWZZe7HIZD9JRIbee28eJKBweTB6TwjYkAgWaUmtDveGw1Wx3zZ76YlPPfQd/+gTTUFkiGiJ+NQAszU1EPT/QJEgufolAMPkNU4CVOyUIBLg4xglEZHGQnTFOFV0VaulYddBhA986ge/7N/yQi/3flFgwfQq2ibLnTDBRl9TmUHyJASPV/eoN0UISIr+ICQKIFV4EpljSjV1uFVUq9hRtet5e9gXvuyHPW0zMhQxWaoBBa9Tg8vsCEhww23Smd0CKjIkmPIoxWrUBDgJqFCyESF43ctQxLUoHN7Q1KyVhqrNNm3cy2vMyQNPVKjc29Rh5SSU+giWdRJHkLnQG71FQEuNyNGBTDdBQQAKCuGiEUS/jcyGbkMPq931OIzb/dUPGuVlG7f+slqkO5NAAlzTMdcq0NkzmsEBmAQkbI+pSHbiqnuWIA6lijhvqwIxMyWxMGZiPU669XJE1tADDTs2HWpwKxuqdnTpOiOR42xlzLtm3pXGel3xd8/oTs8Xy0MV8GM1RlsC2Y3Wy3wut3M+2mEVux0Gt9fhzTWyLvGiiJYaqY5DWRFIwAiQ5r6gB9GpQihJw4I9j5Mkscj3BnzGjBhv8xna5P1Jo428o6IOPY5KFZtVOkEKqUjqQY9Gi+jrIOFwJUDzRtA9xyoIrGGmkNRmxVAnZoK+TkUIeUYni5wEzgOG5iZX5HCr2JyQNqdk++G0rgb1ochSIGutTj4P7F0PuRUAolmh5sCzAHn1BYyaADh6bgFeoBx6vst091CEvcSLWBBpqGq384jZ5llVHSwEShLx+D4d0mU3D5eEAJQ9KEhOZUYnDENV2qKgmIlQhWfdvcoXYaegPp/n1oKIOgYFqxrzQSciqNhv/5FqPpy6b0UcX2vf13DfWySRSEgkEYlEJJGQSyKJSEQSCYlEEpHexIVO3XOevffze2a+PfPv9x1rne1c3b3Mmlmz9mE++zuzngfnw/E+Dlc4LL4NwHdFy7u3KGPVmZ6/4eeMoDyre3i/KHADIHYO04w9zO0mAotuKnrc7XaPjvu66bNe5cDT7RlPepEnfS2X8dF1/utDvD+OwGDBxEgQywLCvIMYWBY+DShwAAORAdv9PswhDAqOUCi5+71AbFcDMR4xBDNfhySKXPXZ1+Vub+Q1Ltf5z7eC0AjVldHI26rIFdKIAyYBJCFVUhVDwttAnM52B3Ect1TFQXzJ0z33lOuib/QO8g+CuO0gKBRU80A8hkeJ0b1KRQWmFQVSh8mf3lpUpNaRulzN5NArrmKKGMijXgzk7w5ijdFVgT8f1IdFNjVWjDWicUYWEEMmSFDtILdzHW5XueHp7p+yuS54ep5/c5BE2Gw/gWPNYU4/PZaak2VGEsFjSbOf8irea6KQgojGCk0KxZY31tWWgzwayF8N5KYyo3VADVicWWrhwzr3ZqIOa5xW5zbqMPPMiyDURHDIHQTeWq7KFXcQPOqzPOL5Ov/iIDEDy7DHEwx0PTgjO8SS0fOEHcZNMt+XKEFMj8Q4QUSvPu6HPuvd4N9/x12RPwcIVRCAakSOUzHgsUSMFWYzDQ+PiOJqAOuYc9jh5TecnA+xHfFyOYhebeTH89P80wrCJzUjlsx7euIV0g4zQFUSiBPioIWBACFC7GgDj8P91ZSJOQmQP74MAnQo8H5RIe8kZ0kBcQCMAlEpRDiKROBxbR0ksdhWFq0gR9q9uQzkDzuIFQSPqAgRCAsCaVNF2ZAAhxvtzcqcnDk6tpXxSsayqXLIgSOb6zqeH+fvO0i9XEu5EVV+OZehRZJ6BGTeaRhCkTzVIZeAzaWGAFfErIPogQI5CuR3HQQx7DzBB16R3s7e0MBUPedjWutgG/JUTPqMeAQNEiytJRnJearWUgdwFNxN7rtBoECuj/O3BMHaTIxQ0a4GctireElTJHJvLTaalih5kvBCGMvkdESUMAdCFaI4yG8SpDfRWAptqkAJUwCG6B7lOREFSZBqKs57MEHqVJEBwHa2lp0OiKtiQ18gx9P89QrSXyc0vObBM4vPmBADqJZLAo/yzK7qPSZstCy+fDSZlhrm+Zkyjsf5q2otdC14zkLjHLf0me9wjNqQo0B1a6wBJRaIEgC2Qw9oby/cRHA+xHCQy/xlB1HVSV3Y/5yVhsc7dBi2UoIWCMcbELZWgxNCGUZ5y4ceBaLlE8dAfrEosrYT+z8ya3sxXndFBxuQivNGEHFCbLGBlBLKGYHZoeoQpcjtMn/uICPefcxecpuDOEemg9S/44cflZPIlWolyHkLrEpgbS9IQRlAgZgi0WDjsEiPh+PN/Fkogq4GdzPtarlRGW2tJwEK1RMTEvdVdmhAKHO1pdUuGQsVcX+rSfGzDbwGyE8NRPQc83HCaOkTZwPqABZBdFq8zAN1gue0FPO8wYUFBE1WkMwVzM1iQ4BItFh+H36Qy/yJg0DRQICmBl+tbKUC5cCj3yXI+SUFBS78ZAcBtHt+e9lBuiqpTNh9zTvIjzuIWxVYGQJpAZY+VWS3QKh84iSZbwuIdiDpc4KztQa/sjhMaDJEJDSZ8mZ+kCBdC0JpKVNQzZdKu+EsOeFCosrngVAkDS/uy6iGnW7UxmMpkB8FyFKo6iQW8z1HuBdMu1pdkZdB8jWTjlFtNaiJRYniIDcD+eECMqFLS9ED6DgxzCMKnRD3HYYA2uMCJUh70OK8G0EUnJV8lqe8nj84QdqLhdoJskNlEw1ivajM8LtPBhIeN99LESXI9xcQIHFQudHngZjUhXOQeGlUYmAddh5pxMhzV0M1vMAtMFIVmfp6fq+DgEWefjQVenstaqUy3bJQAiVlEihDghCDINFQg8oUhoQPkO8SBEM7SFQ72VYBwPuE7k8uYF5LNwg/TEd2zkuKjIIhTiJRlYrDfNS1QL7DYUcbcCyKJNwOwucVCVSwBBj/DwghXA2hQtACgCBBPprfXkAIFIYRXhONQARFU00Tsh6LEmmQUbkTImMi9me5qaHDIeBgHeRbdxAIqAJBCDSoCNVQglrciqX/ZCD9RRP6rgpBvhmKAFhg2ForBLXBYPtUjj7vCHPe8SXbYAY47gHB9mKeqjjIg/53fmMD0fR9Bug7SFcHI6EA1OC/E8QTL4NgBSGiCiyTChnI1zcQxmyfRZGM6w701KRybDvsIK3LWDx6mxGkcglEZQLkawnCdppZ6sgCh8trWWBUQaUWCEOlOs7HAenFE45QSu9RQQDAqchXNxDq4orQR44qRIFUQvM+mRJuB6GDEixgCbSBQGXghEEbdn1P/zO/QhAWCsWsmRhLa2VFkSZIgSVKmgEQhvk6K8YKMRZl7Dwg4amOUYvFBfLlE4RasOCB5S9PXKq0AqGDMiYIReXF0mYctITWBmqR5F38X5Y7yJfeCtKBzNbWYm5XpsMpf3dRZD3jPDesvdVCOs6KYQXIFw1E4fcE8dHWOepZBXpLJcACWUZVMRZbfvgXR4Ak8A7VVSKSVuu9p6/mFxyE7cOWavtLp952O8huK83+gmHzHaAsVXLgAvl8gPCvHzAFsM8GNXGKPH5cmN02sXTLa8QdKRXMzHv67/k5A9k1UIx36UH/VlWWtuKssNiRapB6BaLXl6MA+ayDcNS3v/sYXgCL620F1kk8QhKAEOvKu4DvajDO5zkHc4fBg76anyEIIcamBPex5EK8AoVHhMW7QAqWrYD1204CJB1hCfOAV/PTBPH0zBmJmsZZKCEaAmdqm4zMcYxYLN0JuHThIAjirAnp3px7TRgD+ZSD/K92M1CNIgbC8Ex7FkSEIlQEEUQEQQQBRBABEUQQEQTx3X0Evap9AhP39jL5OvuzAWuvbDaTTDIzX2aypUCJ0i7nAigoQAk9gUIUSxXEoCFyyVIuL9ZQcMZoArnwr4D0OLS8jGNGTgGnsZQWMYrcOARoIReAALBeWhf+RUCAIEsECFQHLkwR5zj4JW3t5WOUU5djvgQIawD53EDsctmYz8xGaZGPBUR3qNkiGwqDICUYIFpqBgRaayCfFiAWR2wWvoobmzxdF8N5kyxXmvap/sgGcLF/aoBosbG+lE395R8zCA4BqUYgOgYq+HtvBrT0LK15X8lZwx5f9klCX0rdgXzIIGbdhXMqZtHzJhuptEjmsFc4KzmN5IFPtfM7gWw2kPczSIqQSPUDYKYBMamsBCpKphW0iA5H8AbMDPJOQYjLZg1Vk4G49GlCYNYAkdOd0kwRQ8FCyAHydgLZ6Z2AqrVtjDUQ7hCEmrkEooDAsB2YnBCvkBpZ6yBvJpCd7Mn5zJ6C4QF2BUQPgHEIGUrGnHzQ8rlMekBeTyAzwDJksxwM4+w3BY02B8mIl0CmFRm+ZscxAuSnvwqQsECTIGSV6FEoJFTygVuzB5xAsKqBvAQE3+nkVoJDI1BJIaPBWik7ZSu5NIp5A3mRQaTFvLgkO9fVgEgMqqeVfb+p55tijWH+Kea71ubq4v8Sl8089sZKbKEZNq+VUfISJJF7j79WrbYgS994ZEf+nIz0pNFRWqapSmK6P45i3OQuItIiPDyg6RnxZ4D0g+CFPxAzluoRsWsaA6I6JOqVWCisDvJ0BgHTzMSRgMi0vmi8R+sR6tg/XUh7kCc7kMRqSNkTBDx0OkAUegFcMazciBXNpm798R6klXap/WZz49TQwBHqEcj4oCToUPjUuP9lfxcbyKMAwT6bTf1qqIIQDl3i5oCERNmVm0wgW4A8BGRxMX3hWh8bEV5Rvfp4DS5F3djWH2ztDNWKW7OBjgjIwsDWaKRknJjqMsh9QCa1p608lLovFkBE969DYtYelSzwSRcg535vAsFeNU9SzRCYZb4LDmxmFQKkwYGM+5y/G7b1uxMIylLdyE5yxIyYsoXWhQIpzQhYPi3JkJoKkB9+BxD0OMuyOEBe36DgyPSrxscmATldgKj8PxrkA/kA5PYMgkrocwIQ6GSRGmF0VaNqBKQZ5FYDEZSDzFTzq9mBQjAayE1A+ryDTzcQZe0Ibbxj7EwpAmTrJwEimZR9CCPtODhzxuNtY19Zd2Lf/fjCTnEiDAOg62j1utb/dv9mZ/aHCj4AyOHbsW3/As0BTzIgeJU7AAAAAElFTkSuQmCC");

  cursor: crosshair;

  float: left;

}

.colorpicker-saturation i {

  display: block;

  height: 5px;

  width: 5px;

  border: 1px solid #000;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  position: absolute;

  top: 0;

  left: 0;

  margin: -4px 0 0 -4px;

}

.colorpicker-saturation i b {

  display: block;

  height: 5px;

  width: 5px;

  border: 1px solid #fff;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

.colorpicker-hue,
.colorpicker-alpha {

  width: 15px;

  height: 100px;

  float: left;

  cursor: row-resize;

  margin-left: 4px;

  margin-bottom: 4px;

}

.colorpicker-hue i,
.colorpicker-alpha i {

  display: block;

  height: 1px;

  background: #000;

  border-top: 1px solid #fff;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  margin-top: -1px;

}

.colorpicker-hue {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAh0lEQVR4XgXAg3EDAAAAwI9to7Zt27a1/w49BASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTS1tHXo1KVbj159+g0YNGTYiFFjxk2YNGXajFlz5i1YtGTZilVr1m3YtGXbjl179h04dOTYiVNnzl24dOXajVt37j149OTZi1dv3n349OXbj19//wOxE1dQ8reGAAAAAElFTkSuQmCC");

}

.colorpicker-alpha {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=");

  display: none;

}

.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {

  background-size: contain;

}

.colorpicker {

  padding: 4px;

  min-width: 130px;

  margin-top: 1px;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  z-index: 2500;

}

.colorpicker:before,
.colorpicker:after {

  display: table;

  content: "";

  line-height: 0;

}

.colorpicker:after {

  clear: both;

}

.colorpicker:before {

  content: '';

  display: inline-block;

  border-left: 7px solid transparent;

  border-right: 7px solid transparent;

  border-bottom: 7px solid #ccc;

  border-bottom-color: rgba(0, 0, 0, 0.2);

  position: absolute;

  top: -7px;

  left: 6px;

}

.colorpicker:after {

  content: '';

  display: inline-block;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-bottom: 6px solid #ffffff;

  position: absolute;

  top: -6px;

  left: 7px;

}

.colorpicker div {

  position: relative;

}

.colorpicker.colorpicker-with-alpha {

  min-width: 140px;

}

.colorpicker.colorpicker-with-alpha .colorpicker-alpha {

  display: block;

}

.colorpicker-color {

  height: 10px;

  margin-top: 5px;

  clear: both;

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAQAAAAVxWkcAAABr0lEQVR4Xo2VwU0DQQxF7dmRuNIFlzlSAR3QAaXQQdIBJVABFXDcOVAAd67cjJLR07dkhcSrkZKfb/t7bG88rFo3B5gZPMNycItu2xloGV7MWHzM9zuzFWCkmA0nK6AszCUJDW6+mG6R03ncw5v8EMTEvZ2O3AliYjpslblc0RF9LmZYWxURU6aKytWZYsoWCAe+xwOZp1GsEukGiIkYxcQCHck99+gRgB7JncyIB5SGEhP3Yh5P6JwX+u6AnYot104d8DJT7uH7M9JH6OZbimj0vfMVaYnJIZFJDBW9kHlerL2C6JV4mSt7uuo2N57RxnZ+usQjn0R1jwBJBrNO3evJpVYUWsJ/E3UiXRlv24/7YZ04xmEdWlzcKS+B/eapeyMvFd2k0+hRk/T0AmTW8h69s2sjYMsdPntECiILhAeIMZAeH4QvUwfn6ijC0tTV+fT9ky8jM9nK2g7Ly1VjSpKYq6IvsAm7MtNu1orEqa/K3KNvgMFdhfquPfJmp2dbh0/8Gzb6Y22ViaNr6n5410zXdngVhbu6XqdOtWOuin5hjABGp4a2uotZ71MVCfwDBt2/v37yo6AAAAAASUVORK5CYII=");

  background-position: 0 100%;

}

.colorpicker-color div {

  height: 10px;

}

.colorpicker-selectors {

  display: none;

  height: 10px;

  margin-top: 5px;

  clear: both;

}

.colorpicker-selectors i {

  cursor: pointer;

  float: left;

  height: 10px;

  width: 10px;

}

.colorpicker-selectors i+i {

  margin-left: 3px;

}

.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {

  display: inline-block;

  cursor: pointer;

  height: 22px;

  vertical-align: text-top;

  width: 22px;

}

.colorpicker.colorpicker-inline {

  position: relative;

  display: inline-block;

  float: none;

  z-index: auto;

}

.colorpicker.colorpicker-horizontal {

  width: 110px;

  min-width: 110px;

  height: auto;

}

.colorpicker.colorpicker-horizontal .colorpicker-saturation {

  margin-bottom: 4px;

}

.colorpicker.colorpicker-horizontal .colorpicker-color {

  width: 100px;

}

.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {

  width: 100px;

  height: 15px;

  float: left;

  cursor: col-resize;

  margin-left: 0px;

  margin-bottom: 4px;

}

.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {

  display: block;

  height: 15px;

  background: #ffffff;

  position: absolute;

  top: 0;

  left: 0;

  width: 1px;

  border: none;

  margin-top: 0px;

}

.colorpicker.colorpicker-horizontal .colorpicker-hue {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAABLFBMVEXqFBb/ABH/ACL/ADH/AEH/AFD/AGD/AG7/AH7/AI3/AJ3/AKz/ALz/AMr/ANv/AOr/APr2AP/mAP/XAP/HAP+4AP+oAP+aAP+JAP97AP9rAP9cAP9MAP8+AP8tAP8fAP8PAP8BAv8AEP8AH/8AL/8APv8ATv8AXP8Abf8Ae/8Ai/8Amv8Aqv8AuP8Ayf8A1/8A5/8A9/8A//gA/+kA/9kA/8oA/7oA/6wA/5sA/40A/30A/24A/14A/1AA/z8A/zEA/yEA/xEB/wMN/wAd/wAs/wA8/wBK/wBb/wBp/wB5/wCI/wCY/wCm/wC3/wDF/wDV/wDk/wD1/wD/+gD/7AD/3AD/zAD/vgD/rQD/nwD/jgD/gAD/cAD/YgD/UQD/QwD/MgD/JAD/FAD4Eg42qAedAAAAbUlEQVR4XgXAghEDsbxtlrZt27ax/w49ACAYQTGcICmaYTleECVZUTXdMC1Wm93hdLk9Xp8/EAyFI9FYPJFMpTPZXL5QLJUr1Vq90Wy1O91efzAcjSfT2XyxXK03293+cDydL9fb/fF8vT/f3x+LfRNXARMbCAAAAABJRU5ErkJggg==");

}

.colorpicker.colorpicker-horizontal .colorpicker-alpha {

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAKCAQAAADoFTP1AAAB9ElEQVR4XoWTQW4VMRBEu9qWEimL7DhEMp8NF+ASnJJLcAQgE1bcgBUSkYKUuHCrZ9pjeqSU5Yn9LPu7umJQBIIv+k7vIOrtK66L4lmr3pVOrOv3otp619KZ0/KjdNI79L52Uo09FBQWrU0vfe5trezU+hLsoUKd3Repovte+0vbq/7Lj5XbaHECKasR9G4MPlbp+gzZxd6koPEJCkAYC5SjcOTAIIOK90Dja1IfIZ8Z+zAY9jm3b5Ia+MT5sFcqRJrR2AYYA8Kua5BzYRrFPNmD4PQMegGJMOffJJUsWiI3nCHZZjInNdffLWOufzbc3JaboCAVxwmnRHbhLSPwRJ4wU0BRSc6HkECYYVw95nMKgJOcylxrJttE5Ibzf9Xq9GPvP+WX3MiV/MGHfRu/SentRQrfG1GzsIrytdNXucSRKxQNIGHM9YhGFQJcdjNcBZvfJayuYe4Sia1CzwW+19mWOhe37HsxJWKwbu/jluEU15QzAQjAqCEbhMJc78GYV2E0kooHDubUImWkTOhGpgv8PoT8DJG/bzxna4BZ0eOFSOaLADGeSpFsg5AzeaDZIDQQXjZ4y/8ryfzUXBwdELRjTjCNvOeT0rNlrJz90vwy6N9pXXQEluX0inElpPWokSdiLCfiNJJjMKQ8Qsh8GEKQKMo/eiHrNbI9UksAAAAASUVORK5CYII=");

}

.colorpicker-right:before {

  left: auto;

  right: 6px;

}

.colorpicker-right:after {

  left: auto;

  right: 7px;

}

.colorpicker-no-arrow:before {

  border-right: 0;

  border-left: 0;

}

.colorpicker-no-arrow:after {

  border-right: 0;

  border-left: 0;

}

.colorpicker.colorpicker-visible,
.colorpicker-alpha.colorpicker-visible,
.colorpicker-saturation.colorpicker-visible,
.colorpicker-hue.colorpicker-visible,
.colorpicker-selectors.colorpicker-visible {

  display: block;

}

.colorpicker.colorpicker-hidden,
.colorpicker-alpha.colorpicker-hidden,
.colorpicker-saturation.colorpicker-hidden,
.colorpicker-hue.colorpicker-hidden,
.colorpicker-selectors.colorpicker-hidden {

  display: none;

}

.colorpicker-inline.colorpicker-visible {

  display: inline-block;

}

.div-gradient {

  width: 100px;

  height: 100px;

  background: linear-gradient(53deg, rgba(84, 160, 90, 0.8)35%, rgba(235, 220, 70, 0.8)60%);

  background: -moz-linear-gradient(53deg, rgba(84, 160, 90, 0.8)35%, rgba(235, 220, 70, 0.8)60%);

  background: -webkit-linear-gradient(53deg, rgba(84, 160, 90, 0.8)35%, rgba(235, 220, 70, 0.8)60%);

  background: -o-linear-gradient(53deg, rgba(84, 160, 90, 0.8)35%, rgba(235, 220, 70, 0.8)60%);

}

/*range*/

.slider {

  -webkit-appearance: none;

  width: 100%;

  height: 15px;

  border-radius: 5px;

  background: #d3d3d3;

  outline: none;

  opacity: 0.7;

  -webkit-transition: .2s;

  transition: opacity .2s;

}

.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  background: #4CAF50;

  cursor: pointer;

}

.slider::-moz-range-thumb {

  width: 25px;

  height: 25px;

  border-radius: 50%;

  background: #4CAF50;

  cursor: pointer;

}

.social-text {

  background: #fff;

}

/*圖片上傳*/

.con-img-upload {

  width: 100%;

  background: #fff;

  margin-top: 5px;

  padding-right: 5px;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-column-gap: 5px;

  -moz-column-gap: 5px;

  column-gap: 5px justify-items flex-start;

  display: flex;

}

.con-img-upload .img-upload-text {

  position: absolute;

  text-align: center;

  color: #c36912;

  background: #ffffffba;

  padding: 10px;

  border-radius: 10px;

  border: 1px dotted #c36912;

}

.con-img-upload .img-upload-text-black {

  position: absolute;

  text-align: center;

  color: #fff;

  background: #292929ba;

  padding: 10px;

  border-radius: 10px;

}



.con-img-upload,
.con-img-upload .img-upload {

  position: relative;

  border-radius: 10px;

  overflow: hidden;

  margin-bottom: 10px;

}

.con-img-upload .img-upload {

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  background: rgba(0, 80, 0, .5);

  background: #fff;

  border: 1px solid #efefef;

  -webkit-transition: all .3s ease;

  transition: all .3s ease;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  width: 200px;

  height: 200px;

  margin: 5px;

  cursor: pointer
}

.con-img-upload .img-upload.removeItem {

  -webkit-transition: all .3s ease, height .2s ease .2s;

  transition: all .3s ease, height .2s ease .2s;

  opacity: 0 !important;

  width: 0 !important;

  visibility: hidden;

  margin: 0 !important;

  height: 0 !important
}

.con-img-upload .img-upload img {

  -webkit-transition: all .3s ease;

  transition: all .3s ease;

  width: 100%;

}

.con-img-upload .img-upload:hover {

  -webkit-transform: scale(.99);

  transform: scale(.99);

  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);

  box-shadow: 0 0 0 0 rgba(0, 0, 0, .1)
}

.con-img-upload .img-upload:hover .btn-x-file {

  opacity: 1;

  -webkit-transform: translate(0);

  transform: translate(0)
}

.con-img-upload .img-upload:hover .btn-upload-file {

  opacity: 1;

  -webkit-transform: translate(-50%, 65%);

  transform: translate(-50%, 65%)
}

.con-img-upload .img-upload .btn-x-file {

  display: block;

  position: absolute;

  top: 10px;

  right: 10px;

  padding: 0;

  margin: 0;

  -webkit-transform: translate(20%, -20%);

  transform: translate(20%, -20%);

  background: transparent;

  z-index: 300;

  opacity: 0;

  border: 0;

  cursor: pointer;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

  border-radius: 10px
}

.con-img-upload .img-upload .btn-x-file i {

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

  position: relative;

  padding: 4px;

  font-size: 1.4rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  border-radius: 5px;

  background: rgba(0, 0, 0, .1);

  color: #fff;

  text-shadow: 0 3px 10px rgba(0, 0, 0, .5)
}

.con-img-upload .img-upload .btn-x-file:hover i {

  border-radius: 50%;

  background: rgba(255, 0, 0, 1)
}

.con-img-upload .img-upload .btn-x-file:hover~.btn-upload-file:not(.on-progress) {

  background: radial-gradient(ellipse at center, rgba(var(--vs-danger), 1) 0, transparent 70%);

  height: 300px
}

.con-img-upload .img-upload .btn-x-file:hover~.btn-upload-file:not(.on-progress):after {

  /*border: 1px solid rgba(var(--vs-danger),1)*/

}

.con-img-upload .img-upload .btn-x-file:hover~.btn-upload-file:not(.on-progress) i {

  opacity: 0
}

.con-img-upload .img-upload .btn-x-file:hover~.on-progress {

  background: rgba(var(--vs-danger), .2)
}

.con-img-upload .img-upload .btn-x-file:hover~.on-progress i {

  opacity: 0
}

.con-img-upload .img-upload .btn-x-file:hover~img {

  -webkit-filter: grayscale(80%);

  filter: grayscale(80%)
}

.con-img-upload .img-upload .text-archive {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  position: relative;

  text-align: center;

  padding: 5px
}

.con-img-upload .img-upload .text-archive i {

  position: absolute;

  font-size: 7rem;

  opacity: .05
}

.con-img-upload .img-upload .text-archive span {

  position: relative;

  padding: 5px
}

.con-img-upload .img-upload .btn-upload-file {

  margin: 0;

  opacity: 0;

  position: absolute;

  bottom: 0;

  left: 50%;

  z-index: 200;

  border-radius: 50%;

  width: 300px;

  height: 200px;

  -webkit-transform: translate(-50%, 80%);

  transform: translate(-50%, 80%);

  border: 0;

  background: radial-gradient(ellipse at center, rgba(var(--vs-success), 1) 0, transparent 70%);

  cursor: pointer;

  -webkit-transition: all .3s ease;

  transition: all .3s ease;

  -webkit-animation: imageRebound .7s ease !important;

  animation: imageRebound .7s ease !important
}

.con-img-upload .img-upload .btn-upload-file:after {

  content: "";

  width: 200px;

  height: 200px;

  position: absolute;

  z-index: 100;

  display: block;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  top: 50%;

  border-radius: 50%;

  -webkit-animation: circle 1.5s ease infinite;

  animation: circle 1.5s ease infinite
}

.con-img-upload .img-upload .btn-upload-file:not(.on-progress):hover {

  width: 200px;

  height: 200px;

  -webkit-transform: translate(-50%, 70%);

  transform: translate(-50%, 70%)
}

.con-img-upload .img-upload .btn-upload-file:not(.on-progress):hover i {

  font-size: 1.4rem;

  background: rgba(var(--vs-success), 1);

  top: 6%;

  padding: 10px
}

.con-img-upload .img-upload .btn-upload-file i {

  z-index: 50;

  border-radius: 50%;

  -webkit-transition: all .2s ease;

  transition: all .2s ease;

  position: absolute;

  left: 50%;

  top: 12%;

  -webkit-transform: translate(-50%);

  transform: translate(-50%);

  color: #fff;

  text-shadow: 0 3px 10px rgba(0, 0, 0, .5);

  padding: 20px;

  -webkit-backface-visibility: visible;

  backface-visibility: visible
}

.con-img-upload .img-upload .btn-upload-file span {

  opacity: 0;

  z-index: 300
}

.con-img-upload .img-upload .btn-upload-file.on-progress {

  width: 100%;

  height: 20px;

  background: rgba(var(--vs-success), 1);

  border-top: 1px solid rgba(var(--vs-success), 1);

  bottom: 0;

  -webkit-transform: translate(0);

  transform: translate(0);

  left: 0;

  opacity: 1 !important;

  overflow: hidden;

  border-radius: 0;

  pointer-events: none
}

.con-img-upload .img-upload .btn-upload-file.on-progress i {

  opacity: .2;

  background: rgba(var(--vs-success), 1);

  -webkit-box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .15);

  box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .15);

  top: 50%;

  -webkit-transform: translate(-50%, -50%) scale(1.2);

  transform: translate(-50%, -50%) scale(1.2);

  padding: 20px
}

.con-img-upload .img-upload .btn-upload-file.on-progress span {

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

  opacity: 1;

  color: #fff;

  font-size: 1rem;

  position: absolute;

  top: calc(50% + 40px);

  left: 0;

  text-align: center;

  width: 100%;

  text-shadow: 0 3px 15px rgba(var(--vs-success), 1);

  font-weight: 700;

  z-index: 300;

  display: block;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%)
}

.con-img-upload .img-upload .btn-upload-file.ready-progress {

  border-top: 0 solid rgba(var(--vs-success), 1);

  background: rgba(var(--vs-success), .5)
}

.con-img-upload .img-upload .btn-upload-file.ready-progress span {

  z-index: 10;

  -webkit-transform: translateY(-50%) scale(.5);

  transform: translateY(-50%) scale(.5);

  top: calc(50% + 20px);

  opacity: 0
}

.con-img-upload .img-upload .btn-upload-file.ready-progress:after {

  opacity: 0
}

.con-img-upload .img-upload .btn-upload-file.ready-progress i {

  opacity: 1;

  background: rgba(var(--vs-success), 1);

  -webkit-box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .15);

  box-shadow: 0 5px 17px 0 rgba(0, 0, 0, .15);

  top: 50%;

  -webkit-transform: translate(-50%, -50%) scale(1);

  transform: translate(-50%, -50%) scale(1);

  padding: 10px
}



/*會員中心 - 修改密碼*/

.show_pass {

  cursor: pointer;

}



.order_status_green {

  width: 20px;

  height: 20px;

  border-radius: 10px;

  background: #28c76f;



}



.order_status_gray {

  width: 20px;

  height: 20px;

  border-radius: 10px;

  background: #ccc;

}







@media (min-width: 1360px) {

  .theme_card {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 25%;

    -ms-flex: 0 0 25%;

    flex: 0 0 25%;

    max-width: 25%;

  }

}

@media (max-width: 1360px) {

  .theme_card {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 33.3%;

    -ms-flex: 0 0 33.3%;

    flex: 0 0 33.3%;

    max-width: 33.3%;

  }

}

@media (max-width: 992px) {

  .theme_card {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 50%;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;

  }

  .theme_mode {

    transform: translateY(0);

    top: 15px;

  }

}

@media (max-width: 768px) {

  /*產品列表*/

  .data-list-view-header .table-responsive .top .action-btns .dt-buttons button span i.feather {

    display: none;

  }

  .data-list-view-header .table-responsive .top .action-btns .dt-buttons .btn,
  .data-thumb-view-header .table-responsive .top .action-btns .dt-buttons .btn {

    padding: 0.9rem 0.5rem;

  }

  .data-list-view-header .table-responsive .top .action-btns div.dt-buttons {

    margin-bottom: 0em;

  }

  .data-list-view-header .table-responsive .top .dataTables_filter .form-control,
  .data-thumb-view-header .table-responsive .top .dataTables_filter .form-control {

    padding: 1.45rem 0.6rem !important;

    padding-left: 2.4rem !important;

  }

  /*存檔區塊*/

  .action-body-pc {

    display: none;

  }

  .action-body-mb {

    display: flex;

    position: fixed;

    justify-content: space-evenly;

    left: 0;

    bottom: 0px;

    height: 60px;

    width: calc(100% - 2.4rem) !important;

    margin-left: 1.2rem;

    margin-right: 1.2rem;

    background: #fff;

    z-index: 999;

    padding: 10px 20px;

    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);

  }

  /*捷徑列*/

  html body .content .content-wrapper h2.content-header-title {

    font-size: 1.2em;

    padding: 0.4rem 0;

  }

  .breadcrumb {

    padding: 0.5rem 0 0.5rem 1rem !important;

  }

  .breadcrumb-item+.breadcrumb-item::before,
  .breadcrumb>li+li::before {

    padding-left: 0.2rem;

    padding-right: 0.2rem;

  }

  /*編輯頁面選單*/

  .nav.nav-tabs {

    display: flex;

    justify-content: flex-start;

    flex-wrap: wrap;

  }

  .nav.nav-tabs .nav-item {

    width: calc((99.999% - 20px)/3);

    min-width: 85px;

  }

  .nav.nav-tabs .nav-item:nth-child(3n) {

    margin-right: 0;

  }

  .nav.nav-tabs .nav-item:nth-child(n+4) {

    margin-top: 10px;

  }

  .nav.nav-tabs .nav-item .nav-link {

    padding: 10px 20px;

    display: flex;

    align-items: center;

    justify-content: space-around;

  }

  .nav-link.custom-url-path::before {
    content: '';
    display: none;
  }

  /*分類列表*/

  .category_header {

    padding-top: 10px;

  }

  /*分類列表只保留名稱和動作的項目*/

  .category_header--xs2 div:last-child span:first-child {

    display: none;

  }

  /* 帶網址輸入框 mb大小 */

  .form-group .tip_bar.ml-1 {

    margin-left: 0 !important;

  }

  .form-group .input-group.input-group-lg {

    flex-wrap: wrap;

  }

  .input-group-lg>.input-group-prepend {

    width: 100%;

  }

  .form-group .input-group.input-group-lg .form-control {

    width: 100%;

  }

  .input-group-lg>.input-group-prepend>.input-group-text {

    width: 100%;

    font-size: 12px;

    padding-left: 10px;

    border-bottom: 0;

    border-radius: 6px 6px 0 0;

  }

  .form-group .input-group.input-group-lg .form-control {

    border-radius: 0 0 6px 6px;

  }

}

@media (max-width: 576px) {

  /*主題*/

  .theme_card {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 100%;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

  }

  .theme_mode {

    top: 0;

    position: relative;

    justify-content: flex-end;

  }

  /* tabs 項目 */

  .nav.nav-tabs .nav-item .nav-link {

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding: 10px 5px;

  }

  /*多語言*/

  /*

	.mult-language-tabs .nav {

    flex-wrap: nowrap;

  }

  .mult-language-tabs .nav .nav-item {

    flex-shrink: 0

  }

	*/

  /*水平 項目滑動*/

  .nav {

    flex-wrap: nowrap;

  }

  .nav .nav-item {

    flex-shrink: 0
  }

  .slide-x-box {

    display: flex;

    overflow-x: scroll;

    -webkit-overflow-scrolling: touch;

    justify-content: flex-start;

    flex-shrink: 0;

  }

  .slide-x-box::-webkit-scrollbar {

    width: 0;

    height: 0;

    display: none;

  }

  .nav-wrap {

    flex-wrap: wrap;

  }


  /*分類列表名稱之外的項目*/

  .category_header div:last-child span {

    min-width: 75px;

  }


  /*內頁-圖片*/

  .con-img-upload {

    display: block;

  }

  .upload-image-item {

    width: 100%;

    margin-right: 0px;

  }

  .upload-image-item:first-child {

    border-bottom: 1px solid #efefef;

    margin-bottom: 20px;

  }

  .upload_area {

    padding: 20px;

  }

  .upload-image-item .upload-content img {

    width: 55%;

  }

  /*品牌*/

  .category-body {

    overflow-x: scroll;

  }

  ul.category_checkbox {

    width: 100%;

  }

}

@media (max-width: 500px) {
  .upload-image-item .upload-content img {

    width: 90%;

  }

  .form-upload {
    padding-right: 45px !important;
  }

  .form-upload-btn {

    width: 40px;

    font-size: 12px !important;

    line-height: 1.5;

  }
}

@media (max-width: 414px) {
  #youtube_default_img {
    width: 100%;
  }
}

@media (max-width: 361px) {

  .nav.nav-tabs .nav-item .nav-link {

    padding: 10px 16px;

  }

}

@media (max-width: 321px) {

  .btn-outline-primary.text-parameter span,
  .btn-outline-primary.text-categroy span {

    display: none
  }

  .btn-outline-primary.text-categroy::after {

    content: '分類'

  }

  .btn-outline-primary.text-parameter::after {

    content: '參數'

  }

  .action-body-mb .btn {

    padding: 0.9rem 1.2rem;

  }

  /*tabs 項目*/

  .nav.nav-tabs .nav-item .nav-link {

    padding: 10px 12px;

  }


  .nav.nav-tabs .nav-item {

    width: calc((100% - 10px)/2);

  }

  .nav.nav-tabs .nav-item:nth-child(2n) {
    margin-right: 0;
  }

  .nav.nav-tabs .nav-item:nth-child(3) {
    margin-right: 10px;
  }


  .nav.nav-tabs .nav-item:nth-child(n+3) {
    margin-top: 10px;
  }

  /*分類列表名稱之外的項目*/

  .category_header div:last-child span {

    min-width: 55px;

  }

  /* 帶網址輸入框 mb大小 */
  .input-group-lg>.input-group-prepend>.input-group-text{

    max-height: none;

    line-height: 1.25;

    text-align: left;

    white-space: normal;

  }

}



/* footer調整 */

.footer.footer-static.footer-light p {

  text-align: center;

}

.footer.footer-static.footer-light p span.float-md-left.d-block.d-md-inline-block.mt-25 {

  float: none !important;

}