/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}




.btn:focus, .bth:hover{
    color:#fff !important;
}

body, h1,h2,h3,h4,h5,h6, input,textarea{font-family:'Montserrat', '微軟正黑體', 'Microsoft JhengHei', sans-serif !important;}
input, textarea{padding:3px;border:#333 1px solid;}
a{text-decoration:none;color:#0A0A0A;cursor:pointer;}
a:hover{text-decoration:underline;}

a.a_button:hover{text-decoration:none;}

input[type=button],input[type=submit], span.button{
    min-width:70px;background-color: #f5f5f5;color:#000;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.1);
    transition-duration: 0.3s;
    padding:7px 10px;
    vertical-align:top;
    cursor: default;
    /*box-shadow: 2px 2px 6px rgba(0,0,0,0.5);*/
}
input[type=button].blue,input[type=submit].blue, span.button.blue,a.blue{
    background-color: #0051ff;background-image: none;color:#fff;
}
input[type=button].red,input[type=submit].red, span.button.red,a.red{
    background-color: #ff243c;background-image: none;color:#fff;
}
input[type=button]:hover,input[type=submit]:hover, span.button:hover{
    background-color: #aaa;background-image: none;
    background-image: -webkit-linear-gradient(top,#fff,#f8f8f8);
    background-image: -moz-linear-gradient(top,#fff,#f8f8f8);
    background-image: -o-linear-gradient(top,#fff,#f8f8f8);
    background-image: linear-gradient(top,#fff,#f8f8f8);
}
input[type=button].blue:hover,input[type=submit].blue:hover, span.button.blue:hover,a.blue:hover{
    background-color: #0041cc;background-image: none;
}
input[type=button].red:hover,input[type=submit].red:hover, span.button.red:hover,a.red:hover{
    background-color: #d01e32;background-image: none;
}
input[type=button]:disabled,input[type=submit]:disabled{
    background-color: #eaeaea !important;background-image: none !important;color:#bbb !important;
}
input[type=button].apple_green,input[type=submit].apple_green, span.button.apple_green,a.apple_green{
    background-color: #a0b100;background-image: none;color:#fff;
}
input[type=button].apple_green:hover,input[type=submit].apple_green:hover, span.button.apple_green:hover,a.apple_green:hover{
    background-color: #758200;background-image: none;
} 
.nouserselect{
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}


body{text-align:center;font-size:14px;font-family:arial;margin:0;padding:0;}

.stdWidth{width:1200px;margin:auto;text-align:left;}
.logo_container{display:inline-block;vertical-align:top;}
.logo_image{height:54px;}
.logo_text_container{font-size:1.2em;display:inline-block;vertical-align:top;color:#F26521;margin:16px;}

div.tips{
    text-align: center;
    padding: 6px;
    position:fixed;
    top:50px;
    left:50%;
    margin-left:-200px;
}
div.tips div{
    margin: auto;
    line-height: 30px;
    width: 400px;
    box-shadow: 2px 2px 4px #eee;}
div.tips div.success{background-color:#f5fff8;border:1px solid #B3DABF;color:#2e633e;}
div.tips div.failed{background-color:#fcece6;border:1px solid #D59F9E;color:#b32825;}

div.header {
  background-color: #fafafa; font-size: 18px; padding:6px 0;
  width: 100%; text-align: center;
}
div.page_navigation > div{
    display:inline-block;vertical-align:top;margin:4px 0; line-height: 32px;
}
div.page_navigation > div.right_navigation{
    float: right;margin-top:0;
}
div.page_navigation_bottom{margin-top:10px;}
div.left_navigation a.active-section{font-weight:bold;color:#000;text-decoration:underline;}
div.right_navigation span.bold{font-weight:bold;}



div.tabbar{
    background-color:#fafafa;border-bottom:1px solid #ddd;
    height: 31px;
    padding-top: 8px;
}
div.tabbar a{color:#222;}
div.tabbar .tab{
    display:inline-block;vertical-align:top;margin-top:1px;
    padding:8px 16px;cursor:pointer;
	text-transform:uppercase;font-size:13px;
}
div.tabbar .tab:hover{
    background-color:#fff;
}
div.tabbar .tab-active{
    border:1px solid #ddd;margin-top:1px;border-bottom:none;background-color:#fff;
}


.login_name{float:right;line-height: 30px;}


.main{}
.main_inner{margin:18px 8px;position:relative;}

div.page_header{
  /* font-size: 1.4em; */
  font-size: 18px;
  font-weight: bold;
  text-transform:uppercase;
  margin: 10px 0;
  line-height: 40px;
  position:relative;
  width:60%;
}



/* Admin Panel list style. Column width is set in each individual page */

.page_number_input{width:40px;text-align:center;}
.right_navigation input.page_number_input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.list_header{background-color: #F26521;color:#fff;}
.list_body{}
.list_body > div.item{width:100%;background-color:#fff;}
.list_body > div.item:nth-child(even){background-color:#FFF0E9;}
.list_header .item_attr,.list_body > div.item .item_attr{display: inline-block;vertical-align: top;line-height:26px;padding:4px;}

.list_body > div.item .item_attr_tool{padding-top:10px;padding-bottom: 10px;}

.item_attr_tool .tool{position:relative;outline: none;}
.item_attr_tool .tool ul{display: none;}
.item_attr_tool .tool:focus ul, .item_attr_tool .tool:hover ul{
    display:inline-block;vertical-align: top;position:absolute;top:33px;left:-1px;width:140px;border: 1px solid #ddd;z-index: 1;
}
.item_attr_tool .tool ul a{color:#000;text-decoration: none;}
.item_attr_tool .tool ul li{display:block;background-color:#fff;padding:2px 6px;}
.item_attr_tool .tool ul li:hover{background-color:#f6f6f6;}


/* Admin panel create or edit page style */

.page_header_tool{float:right;}
.page_header_maintools{
	display:inline-block;vertical-align:top;margin-top:4px;margin-left:10px;
	text-transform:none;
}


.data_form{border:2px solid #F26521;border-left:0;border-right:0;padding:14px;margin-bottom: 16px;}
.data_form > div{padding:6px;}
.data_form .data_form_attrname{padding:2px 0;line-height:22px;font-weight: bold;}

.search_input{position:absolute;width:280px;height:30px;line-height:10px;border:1px solid black;display:inline-block;right:90px;top:10px;}
.search_input i{margin-left:10px}
.search_input input{border:none;outline:none;width:230px;}

.search{position:absolute;right:0;top:10px;display:inline-block;width:70px;height:30px;}

/* Status bar for notifying users */

.status_message_hidden_default{display: none;}
#status_message{
    display:inline-block;vertical-align: top;position: fixed;top:10px;left:50%;width:400px;margin-left:-200px;z-index:1;
}
#status_message > div{padding:10px 0;color:#000;width:100%;border-radius:2px;}
#status_message > div.success{border:1px solid #252;background-color:#efe;}
#status_message > div.failed{border:1px solid #522;background-color:#fee;}

.modal_background{
    background-color: rgba(0,0,0,0.7);position:fixed;top:0;left:0;height:100%;width:100%;
    z-index: 1;
}
.modal_dialog{
    position:fixed;top:40px;left:50%;width:960px;margin-left:-470px;
    background-color:#fff;border:1px solid #ddd;z-index: 100;
}
.modal_title{
    padding:12px;text-align: left;
    font-size: 1.2em; font-weight: bold; background-color: #ff7632;
}
.modal_subheading{padding:1px;background-color: #ffc8ad;text-align:left;}
.modal_subheading .subheading_left{padding: 12px; line-height: 34px;}
.modal_subheading .subheading_right{float:right;}

.modal_count_div{border-bottom: 2px solid #ffc8ad;  line-height: 30px;}
.modal_count_div .product-count{display: inline-block; line-height: 20px; color: #7E7E7E;}
.modal_count_div .page_indicator{float: right;line-height: 28px;}


.modal_body{min-height: 400px;text-align:left;padding:6px;}
.modal_body .result_not_found{color:#818181;line-height:200px;font-size:26px;text-align: center;}
.modal_footer{padding:12px;text-align: right;background-color: #ffc8ad;}





.select_image_button{
    visibility: hidden;
    color:#fff;padding:4px;
    background-color: #0b7880;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    padding: 4px;
}
.image_selected{visibility: visible;border:2px solid #0b7880;margin: 3px;}
.image_selected .select_image_button{visibility: visible;}




.item_attr_tool .tool{position:relative;outline: none;}
.item_attr_tool .tool ul{display: none;}
.item_attr_tool .tool:focus ul, .item_attr_tool .tool:hover ul{
    display:inline-block;vertical-align: top;position:absolute;top:33px;left:-1px;width:140px;border: 1px solid #ddd;z-index: 1;
}
.item_attr_tool .tool ul a{color:#000;text-decoration: none;}
.item_attr_tool .tool ul li{display:block;background-color:#fff;padding:2px 6px;}
.item_attr_tool .tool ul li:hover{background-color:#f6f6f6;}






.image_block_list{padding:10px 20px;}
.image_block_list ul{display:inline-block;vertical-align: top;}
.image_block{
    display: inline-block;vertical-align: top;border:1px solid #ddd;
    width:120px;height:120px;background-position:50% 50%;margin:4px;
    background-size: contain;background-repeat:no-repeat;position: relative;cursor:pointer;
}

.image_block img{max-width:120px;}

.icon2 img{vertical-align:top}

.image_block .edit_image_url_button{
	position: absolute; bottom:0; right:30px; width: 30px; height: 30px; cursor: pointer;
	background-color: #237878; color: #fff; font-size: 1.2em; text-align: center;
}
.image_block .edit_image_url_button:hover{background-color:#2f9f9f;}
.image_block span.edit_image_url_button i{line-height:30px;}

.image_block .delete_image_button{
    position:absolute;bottom:0;right:0;width:30px;height:30px;cursor: pointer;
    background-color:#782323;color:#fff;font-size:1.2em;text-align:center;
}
.image_block .delete_image_button:hover{background-color:#ab3333;}
.image_block span.delete_image_button i{line-height:30px;}
.image_block span.add_image, .image_block span.upload_image{
    color:#666;font-weight:bold;line-height: 120px;
    font-size: 4em;text-align: center;display: block;cursor:pointer;
}
.image_block span.add_image:hover,
.image_block span.upload_image:hover{background-color:#D7D7D7;}

.image_block_list .ui-state-highlight{
    display: inline-block;vertical-align: top;width:120px;height:120px;
    margin:4px;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

/* start una */
div.change_header{
  background-color: #35363a;
  width: 100%;
  padding-left: 1%;
}
.change_logo_text{
  color: #e3e3e3;
}
div.change_menu{
 background-color: #ffffff;
 border: none;
 height: auto;
 padding: 0 0;
}
.change_loginname{
  color: #e3e3e3;
  text-align: right;
  float: none;
  flex: 1;
  padding-top: 1%;
  padding-right: 3%;
}
.change_stdWidth{
  width: 100%;
  margin: 2% auto;
  padding-left: 1%;
}
.change_sub_stWidth{
  width: auto;
  margin: 0 5%;
}
.change_header_stdWidth{
  width: auto;
  margin: 0 1%;
}
.ues_flex{
  display: flex;
}
.change_body button{
width: fit-content;
}

.change_list_header{
  background-color: #ffffff;
  color: #000000;
}
.change_list_header .item_attr{
  font-weight: bold;
}
div.change_but_sty{
  width: fit-content;
}
.change_but_sty button{
 border: none;
 background-color: transparent;
 font-weight: normal;
 color: #000;
 position: relative;
}
.change_but_sty button:hover{
 border: none;
 background-color: transparent;
 font-weight: normal;
 color: #d1d1d1;
 position: relative;
}
.change_but_sty span{
 border: none;
 background-color: transparent;
 font-weight: normal;
 position: relative;
 background-color:#00ada4;
 border-radius: 50px;
 color: #fff;
 background-image: none;
}
.change_but_sty span:hover{
 font-weight: bolder;
 background-color:#00a399;
 background-image: none;
 border-radius: 50px;
 color: #fff;
}
.chang_icon{
  margin-right: 3px;
}
button.change_text_width{
  width: 110px;
  width: 110px;
  text-align: left;
}
.change_body > div.item{width:100%;background-color:#fff;}
.change_body > div.item:nth-child(even){background-color:rgb(248, 248, 248);}
.change_body .item_attr,.list_body > div.item .item_attr{
  display: inline-block;
  vertical-align: top;
  line-height:26px;
  padding:4px;
}
.change_btn_width{
  font-weight: normal;
  color: #000;
  position: relative;
}
.chang_btn_tools{
  background-color:#00ada4;
  color: #fff;
  border-radius: 50px;
  padding: 2% 6%;
  font-size: small;
}
.chang_btn_tools:hover{
 background-color:#00a399;
 color: #fff;
 border-radius: 50px;
 /* padding: 2% 6%; */
 color: #000;
 font-size: small;
}
.change_icon{
  width: 90%;
}
.test_color{
  color: #fff;
}
.change_width{
  width: 100%;
}
.change_body > div.item .item_attr_tool{padding-top:10px;padding-bottom: 10px;}

div.tabbar.change_tabbar .tab-active {
  color: #dc1a86;
  border: none;
  border-bottom: 3px solid #dc1a86;
  background-color: #fff;
}
a.blue,a.red,a.apple_green{
    border-radius: 50px;
}
.btn:hover{
    color:#fff !important;
}
#example_wrapper{
    min-height: 606px;
}
#example_paginate{
    position: absolute;
    bottom: -50px;
    right: 0;
}
#example_info{
    position: absolute;
    bottom: -50px;
}
.btn{
    font-size: 12px !important;
}
.screens_size{
    display: none;
}
@media screen and (max-width: 992px) {
    div.change_menu{
        background-color: #35363a;
    }
    div.tabbar .tab{
        width: 97%;
        font-size: 30px;
        color: #fff
    }
    div.tabbar .tab:hover{
        width: 97%;
        font-size: 30px;
        color: red
    }
    div.change_stdWidth{
        margin: 0 auto;
        padding-left: 0px;
    }
    a.screen_hidden{
        display: none;
    }
    a.screen_show, .screens_size{
        display: inline-block !important;
    }

  }
/* end una */

/* Registration Page - per Event */
#example.filter.dataTables_filter {
	font-size: 11px;
}

/* General Data Table */
table.dataTable.display tbody td {
	font-size: 12px;
}

/* Interactive Question */
h1.topic {
	background-color:#c3c5ca;
	font-size:16px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

#iq_mgr select.question-session  {
	width:45%;
	border: 0;
    background: none;
    border-bottom: 2px solid black;
    border-radius: 0px;
    -webkit-appearance: none;
}

#iq_mgr .select-arrow {
	margin-left:-15px;
}