body{
	font-family: Microsoft JhengHei;
}

header .bg-btn,.editor-div .bg-btn{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #717071;
	display: inline-block;
	padding: 7px 14px;
	background: #fff;
	text-decoration: none;
	border: 0.5px solid #EB7013;
	border-bottom: 3px solid #EB7013;
	border-radius: 25px;
	font-size: 15px;
}

#editorNav{
	border-bottom: 3px solid #EB7013;
	background-color: white;
	color: #717071;
	font-weight: bolder;
	/*box-shadow: 1px 1px 10px grey;*/
}

nav .breadcrumb-item{
	width: 100%;
	text-decoration: none;
}

.navbar span{
	color: #717071;
	font-weight: bolder;
}

.sidebar .nav-item .nav-link .img-profile, .topbar .nav-item .nav-link .img-profile {
    height: 2.5rem;
    width: 2.5rem;
}

.sidebar .nav-item .nav-link i{
	color: #717071!important;
	margin: 0px 10px;
}

.toggled .nav-item .nav-link i{
	margin: 0px 0px!important;
}

.sidebar{
	width: 17.2rem!important;
	box-shadow: 1px 1px 10px grey;
	z-index: 99;
}

.fixed-sidebar{
	position: fixed;
}

.sidebar .sidebar-title{
	margin-left: 20px;
}

.sidebar .nav-item .collapse .collapse-inner{
    margin: 0 0 0rem 0;
}

#accordionSidebar{
	background: white;
	font-weight: 700;
	position: relative;
	transition: all 0.3s;
	max-width: 240px;
	position: relative;
}

#accordionSidebar.active {
    margin-left: -213px;
}

#accordionSidebar .control-btn{
	position: absolute;
	left: 13.45rem;
	top: 0.5rem;
}

#accordionSidebar .control-btn button{
	background: #fff;
	font-weight: bolder;
	border: none;
	padding: 15px;
	font-size: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	background: #717071;
	color: white;
}

#accordionSidebar .nav-link{
	color: #717071!important;
	padding: 10px;
	border-radius: 25px;
	border-top: 0.5px solid #EB7013;
	border-bottom: 3px solid #EB7013;
	cursor: pointer;
	max-width: 12rem;
}

#accordionSidebar .scroll-hidden{
	max-height: 100%;
	max-width: 213px;
	overflow: hidden;
	position: relative;
	height: calc(100vh - 350px);
}

#accordionSidebar .scroll-hidden .page-control{
	position: absolute;
	overflow-x: hidden;
	overflow-y: scroll;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
}


#accordionSidebar .page-control .nav-link{
	padding: 7px 10px;
}

.toggled .nav-link{
	border: none!important;
	border-bottom: 1px solid #EB7013!important;
	border-radius: 0px!important;
}

#accordionSidebar a span:hover{
	color: #717071;
}

#accordionSidebar li{
	padding: 10px;
}

.toggled .nav-item{
	padding: 10px 0px!important;
}

.sidebar .nav-item .nav-link{
	color: #717071;
}

#accordionSidebar .collapse{
	transition-duration: 0.5s;
}

#accordionSidebar .nav-item .collapse .collapse-item, #accordionSidebar .nav-item .collapsing .collapse-item{
	border: none;
	border-radius: 25px;
	background-color: #EB7013!important;
	margin-bottom: 5px;
	color: white!important;
	margin-left: 1rem;
	margin-right: 1rem;
}

@media (min-width: 768px){
	.sidebar.toggled .nav-item .nav-link {
    	text-align: center;
    	padding: 0.75rem 1rem;
    	width: 6.1rem;
    }
}

@media (min-width: 768px){}
	.sidebar.toggled .nav-item .nav-link {
    	text-align: center;
    	padding: 0 1rem;
    	width: 6.1rem;
    }
}

.toggled .nav-item .collapse .collapse-item{
	margin-left: 0!important;
}

#accordionSidebar .collapse .collapse-item i,#accordionSidebar .collapsing .collapse-item i{
	margin: 0px 15px 0px 10px;
}


.sidebar.toggled .nav-item .collapse .collapse-inner {
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    border-radius: 0;
}

.content-wrapper{
	margin-top: 71px;
	float: right;
	width: 80%;
	display: inline-flex;
	position: relative;
}

.content-wrapper #editorNav{
	position: absolute;
	top: 0px;
	width: 100%;
	display: block;
	z-index: 70;
}

.content-wrapper header{
	padding: 2.5rem 0;

}

.content-wrapper header .page-title{
	text-align: center;
	font-size: 30px;
	font-weight: bolder;
}

.content-wrapper .editor-div{
	padding: 2.5rem 0.75rem;
}

.content-wrapper footer{
	padding: 2.5rem 0.75rem;
}

.content-wrapper p{
	display: block;
	max-width: 100%;
}

.content-wrapper .img-block{
	text-align: center;
}

.content-wrapper .img-block img,.modal .img-block img{
	max-width: 100%;
	max-height: 500px;
}

.content-wrapper .text-block{
	padding: 4rem 0.75rem;
}

.content-wrapper .text-block h2{
	text-align: center;
	font-weight: bolder;
}

.content-wrapper .text-block-header h2{
	text-align: center;
	font-weight: bolder;
	padding: 1rem 0;
}

.content-wrapper .text-block p{
	text-align: left;
}

.content-btn{
	text-align: center;
}

.content-wrapper .text-block .content-btn-a{
	padding: 15px;
	border: 1px solid black;
	text-decoration: none;
	color: black;
	display: inline-block;
}

.block-img-l .col-lg-6,.block-img-r .col-lg-6{
	vertical-align: middle;
	align-items: center;
}

.editor-block, .content-wrapper .editor-div{
	display: block;
	position: relative;
	z-index: 10;
	padding: 2rem 0;
	-webkit-background-size: cover!important;
	background-size: cover!important;
	background-position: center!important;
}

.content-wrapper header, .content-wrapper footer{
	display: block;
	position: relative;
	z-index: 10;
	padding: 4rem 0.75rem;
}

header .editor-block{
	padding: 0.5rem 0.75rem;
}

.editor-box{
	display: none;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: none;
    border:1px dotted grey;
    transition: all 0.3s;
}

.editor-box-show{
	display: block;
	text-align: center;
}

.editor-box a{
	padding: 5px 10px;
	background: #717071;
	color: white!important;
	text-decoration: none;
	position: absolute;
	margin: 7px;
}

.editor-box-show a{
	padding: 5px 10px;
	background: none;
	color: #717071!important;
	border: 1px dotted #717071;
	text-decoration: none;
	cursor: pointer!important;
	margin-top: 45%;
	transition: all 0.3s;
}

.editor-box-show a:hover{
	padding: 10px 15px;
	background: white;
	font-weight: bolder;
}

.editor-block:hover .editor-box{
	display: block;
	background-color: rgba(256,256,256,.5);
}

.modal-header{
	border: none;
}

.modal-title{
	text-align: center;
	font-size: 23px;
	font-weight: bolder;
	border-bottom: 5px solid #EB7013;
}

.modal-img-block{
	text-align: center;margin-bottom: 40px;
}

.modal .editor-done{
	background: #EB7013;
	color: white;
	font-weight: bold;
	margin-bottom: 40px;
	padding: 15px 30px;
}

#address-modal .form-group label{
	font-weight: bolder;
	color: #717071;
}

.content-wrapper .editor-div .address-span{
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 25px;
}

.content-wrapper .editor-div .address-span i{
	margin-right: 15px;
}

.product-block .max-width{
	max-width: 100%;
	overflow-x: scroll;
	padding: 1rem 0;
}

.product-block .container .row{
  	width: 155rem!important;
}

.product-block .container .row .product-scroll .card{
	display: inline-block;
	margin: 0 0.5rem;
}

.product-block .container .row .product-scroll .product-img{
	height: 222px;
	width: 222px;
	overflow: hidden;
}


.product-block .container .row .product-scroll .card img{
	max-width: 100%;
}

#product-modal .card .card-body input,#product-modal .card .card-body textarea{
	width: 100%;
	padding: 5px;
	border: none;
	border-bottom: 0.5px dotted black;
}

.product-block .container .row .product-scroll .card .card-body{
	height: 240px;
}

.product-block .container .row .product-scroll .card .card-body span{
	display: inline-block;
	width: 50%;
	float: left;
	padding: 0 5px;
}

.product-block .container .row .product-scroll .card .card-body span button{
	border:0.5px solid #717071;
	background: none;
	padding: 3px 0px;
	width: 100%;
	color: #717071;
}

#product-modal .product-img{
	height: 222px;
	width: 222px;
	text-align: center;
}

#product-modal .product-img img{
	height: 100%;
	width: auto;
}

#product-modal .card{
	margin-bottom: 15px;
}

.image-preview-wrapper{
  display: block;
  max-width: 310px;
  max-height: 310px;
  width: 100%;
  border: 0px solid #cccccc;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.img-thumbnail{
	border: 0px;
}

.spinner-wrapper {
  opacity: 0;
  margin: 0;
  padding: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.opacity-1 {
  opacity: 1;
}

.product-del {
  text-align: center;
}

.product-del a{
  display: inline-block;
  color: #EB7013;
  border: 1px solid #EB7013;
  padding: 5px 10px;
  text-decoration: none;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

/* style 2 */

.inputfile-2 + label {
    color:  #EB7013;
    border: 2px solid currentColor;
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
    color: #EB7013;
}

.website-input{
	height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    margin-left: 10px;
}