.widget-demo-sidebar {
 position:relative;
 font-family: var(--base-fm);
 font-size: var(--base-size);
 background-color: var(--bg-clr);
}

.widget-demo-inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin: auto;
 max-width: 500px;
 align-content: center;
 text-align: center;
 height: 100vh;
}

.widget-demo-inner h2 {
 margin: 0px;
 font-size: 33px;
 color: var(--theme-clr);
}

/**Forms Widget Form**/
.cw-widget-btn {
 width: 60px;
 height: 60px;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
 border-radius: 100%;
 position: fixed;
 z-index:9001;
 left:50%;
 bottom: 0;
 margin-left: 140px;
 transform: translate(-50%,-50%);
 border: none;
 background-color: var(--theme-clr);
 color: var(--white-clr);
 cursor: pointer;
 box-shadow: #333 0px 4px 10px;
}

.chatmess-icon {
 display: none;
}

.widget-btn-show .chatclose-icon {
 display: none;
}

.widget-btn-show .chatmess-icon {
 display: block;
}

/**Form Design**/
.widget-form-group {
 border-radius: 10px;
 overflow: hidden;
 max-width: 340px;
 width: 100%;
 position: fixed;
 z-index:6001;
 left: 50%;
 transform:translateX(-50%);
 bottom: 60px;
 background-color: var(--white-clr);
 box-shadow: rgba(0,0,0,0.2) 0 0 14px;
 transition: 0.5s all;
 pointer-events: none;
 opacity: 1;
}

@media all and (min-width:980px) {
	.cw-widget-btn {right:1rem; left:auto}
	.widget-form-group {left:auto; right: 2rem; bottom:60px; transform: translateX(0);}
}

@media all and (min-width:1200px) {
	.widget-form-group {right:calc(150px + 2rem);}
	.cw-widget-btn {right:calc(150px + 1rem);}
}

.form-top {
 color: var(--white-clr);
 background-color: var(--theme-clr);
 text-align: center;
 padding: 0.666rem;
}

.form-top h4 {
 margin: 0px 0px 0 0px;
 font-size: var(--text-sm);
 line-height: normal;
}

.form-group-main {
 padding: 5px 20px 5px 20px;
}

.form-group {
 width: 100%;
 margin: 8px 0;
 display: inline-block;
}

.form-control {
 width: 100%;
 padding: 12px 15px;
 border-radius: 4px;
 outline: none;
 line-height: normal;
 border: var(--bdr-clr) 1px solid;
 font-size: var(--base-size);
 font-family: var(--base-fm);
 color: var(--base-clr);
 transition: 0.5s all;
}

textarea.form-control {
 min-height: 100px;
 display: block;
}

.form-control::-webkit-input-placeholder {
 color: var(--base-clr);
}

.form-control:-ms-input-placeholder {
 color: var(--base-clr);
}

.form-control::placeholder {
 color: var(--base-clr);
}

.form-control:focus {
 border-color: var(--theme-clr);
}

.send-message-btn {
 width: 100%;
 border: none;
 font-family: var(--base-fm);
 font-size: 18px;
 font-weight: 500;
 background-color: var(--theme-clr);
 color: var(--white-clr);
 padding: 12px;
 border-radius: 5px;
 cursor: pointer;
 outline: none;
 transition: 0.5s all;
}

.send-message-btn:hover {
 opacity: 0.9;
}

.poweredby {
 text-align: center;
 font-size: 14px;
 margin: 0px 0 10px 0;
 color: var(--base-clr);
}

.widget-form-show {
 pointer-events: auto;
 opacity: 1;
 bottom: 110px;
}

.widget-form-hide {
 pointer-events: auto;
 opacity: 0;
 bottom: 110px;
 z-index:-1;
}

/*Button and Form Left Side Open*/
.widget-form-left {
 left: 20px;
 right: auto;
}

.widget-btn-left {
 left: 20px;
 right: auto;
}



/*inContent*/
.noIcon {
	display:flex; 
	padding:0 var(--padding-s);
	margin-bottom:var(--margin-1);
	gap:1rem; 
	justify-content:center; 
	text-align:center;
	font-size:var(--text-sm);
	color:var(--theme-clr)
}
.noIcon [class*='Icon'] {width:32%}
.noIcon [class*='Icon']:last-child {width:36%}
.noIcon [class*='Icon']:before{
	content:"";
	width:50px;
	height:50px;
	display:block;
	background-repeat:no-repeat;
	margin:0.3333rem auto;
}

.noIcon [class*='Icon'] p {font-size:0.875em}

.Icon1:before {background-image:url(/images/common/noPet.svg)}
.Icon2:before {background-image:url(/images/common/noReserve.svg)}
.Icon3:before {background-image:url(/images/common/noFood.svg)}

.Useinfo {padding-bottom:var(--padding-1);}
.Useinfo li {
	position:relative;
	font-family: var(--title-fm);
	font-size: var(--text-sm);
	padding-left:1.5rem;
	margin-bottom:var(--margin-s)
}
.Useinfo li span {color:var(--point-clr);}
.Useinfo li em {font-size:var(--text-xs)}
.Useinfo li:before {
	content:"";
	width:16px;
	height:16px;
	display:inline-block;
	background-image:url(/images/common/task_alt.svg);
	background-repeat:no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	
}