:root{
  --shopify-background: #f1f1f1;
}

#main-header-container {
  position: absolute;
  width: 100%;
  left: 0px;
}

.standalone #main-header-container{
  top: 50px;
  height: 70px;
  padding-top: 5px;
  z-index: 86;
}
.shopify-embedded #main-header-container{
  /* top: 0px;
  height: 56px;
  background: var(--shopify-background);
  border-bottom: 1px #ebebeb solid;
  z-index: 1000;
 */

  position: unset;
  padding: 24px 0px;
  font-size: 1.25rem;
  font-weight: bold;

}

.shopify-embedded hr.row-separator{
  margin : 15px -20px !important;
  display: block;
}

hr.row-separator{
  display: none;
}

.layout-horizontal-bar #main-header-container{
  top:40px;
}

.tool-input-spacer {
  margin-bottom: 20px;
}

.tool-input-side-header {
  display: none;
}

.tool-input-top-header {
  display: block;
}

.tool-input-break {
  display: none;
}

.tool-header-input-break {
  display: none;
}

@media (max-width: 576px) {
	#main-header-container {
		top: 65px;
	}

  .tool-header-input-break {
    display: block;
  }

  .standalone #main-header-container {
    top: -5px;
  }

  .standalone .spaced {
    height: 40px !important;
  }
}

@media (max-width: 992px ) {
  .tool-input-side-header {
    display: block;
  }

  .tool-input-top-header {
    display: none;
  }

  .tool-input-break {
    display: block;
  }
}

.mb-lg {
	margin-bottom: 5rem !important;
}

.textarea { 
	min-height: 100px;
}

.standalone .spaced {
	height : 120px;
}

.shopify-embedded .spaced {
  height : 0px;
}

.fixed-button {
	float : right;
	display: inline;
    margin-right: 32px;
}

.main-page-header {
	font-size: 1.5rem;
    margin-left: 32px;
    transition: all 0.2s ease-in;
}

.standalone .main-page-header{
    margin-top: 26px;
}
.shopify-embedded .main-page-header{
    margin-top: 8px;
}

.main-page-hr {
	left: 35px;
  position: relative;
  margin-top: 1rem;
  margin-right: 65px;
  transition: all 0.2s ease-in;
}

.main-page-hr.open {
	left: 155px;
	margin-right: 185px;
}

.block-td-top {
	display: block;
}

.block-td-bottom {
	display: inline-block;
	border-top : none !important;
}

.bottom-shadow { 
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
}

#context-content td, #context-content th  {
	border : none !important;
}

.td-icon {
	vertical-align: middle !important;
	width : 0px;
}

.main-context-card {
	margin-bottom: 20px;
}

.iframe-control { 
    border: 0px;
    border-radius: 0.25em;
    min-height : 600px;
}

/* .admin-chat-content { 
	height: calc(120vh - 300px) !important;
} */

.minimalist-mode .chat-message-header{
  display:none !important;
}

.chat-topbar.spaced {
	justify-content: space-between;
}

.side-chat { 
	cursor: pointer;
}

.side-chat:hover {
	background : #eee;
}

.side-chat.active { 
	background : #eee;
}

.center-chat {
	max-width: 900px;
    min-width: 330px;
    margin: 0 auto;
}

.modal-spinner { 
	display: block;
    position: absolute;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

.modal-loader {
	opacity: 0.6;
	height: 100% !important;
}

.context-icon {
	font-size : 1.5em;
}

.wait-icon { 
	font-size: 0.2em;
	margin-left: 20px;
    margin-top: 2px; 
}

.system-message a {
	font-weight: bold;
	text-decoration: underline;
}

.logo-remove {
	background : transparent;
	border : none;
	color : white;
}

.logo-remove-container {
	height : 2.1rem ;
	cursor: pointer;
}

.failed-message {
	background: #dedede !important;
}

.failed-message a {
	text-decoration: underline;
}

#payment-form{
	width:100%;
	height:100%;
	margin-top:20px;
	padding : 0px 0.5rem 0px;
}

.OffCanvas{
	position:fixed;
	height:100%;
	top:0px;
  transition: all .3s ease-in-out;
  z-index: 9999;
  width:100vw;
  right:-100vw;
  background: #fff;
  overflow-y:auto;
  background: #fff;
}

.shopify-embedded .OffCanvas{
  transition:none !important;
  width:100vw !important;
  background-color:#f1f1f1 !important;
}
.shopify-embedded .OffCanvas:not(.open){
  right:-100vw !important;
}
.shopify-embedded .OffCanvasHeader{
  background:transparent !important;
}

.shopify-embedded #main-header-container{
  display:none !important;
}

@media screen and (min-width: 768px){
	.OffCanvas{
		width:700px;
		right:-700px;
	    box-shadow: 0 4px 20px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
	}
}

@media screen and (min-width: 1168px){
  .OffCanvas.large{
    width:1100px;
    right:-1100px;
      box-shadow: 0 4px 20px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
  }
}

.OffCanvas.open{
	right:0px;
}

.modal-backdrop{
  z-index: 999 !important;
}

/* Hide global backdrop when any OffCanvas is open (CSS :has support required) */
body:has(.OffCanvas.open) > .modal-backdrop {
  opacity: 0 !important;
  pointer-events: none;
}

.modal{
  z-index: 10060 !important;
}

/* Ensure modal shown from within an OffCanvas sits above the backdrop */
.OffCanvas .modal{
  z-index: 11000 !important;
}

.OffCanvasHeader{
  width:100%;
  height:50px;
}

.shopify-embedded .OffCanvasHeader {
  display:none !important;
}

.semi-donut-model-2{
  width: 160px;
  height: 80px;
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  border-radius: 80px 80px 0 0;
  overflow: hidden;
  color: var(--fill);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing : border-box;
  &:before, &:after{
    content: '';
    width: 160px;
    height: 80px;
    border:50px solid var(--fill);
    border-top: none;
    position: absolute;
    transform-origin :50%  0% 0;
    border-radius: 0 0 160px 160px ;
    box-sizing : border-box;
    left: 0;
    top: 100%;
  }
  &:before {
    border-color:rgba(0,0,0,.15);
    transform: rotate(180deg);
  }
  &:after{
      z-index: 3;
     animation : 1s fillGraphAnimation ease-in;
    transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
  }
  &:hover{
     &:after{
        opacity: .8;
        cursor: pointer;
      }
  }
}

.semi-donut-model-2 span{
  position:absolute;
  top:55px;
}

.disable-mouse-clicks{
  pointer-events: none;
}
    
.widget-div {
    display: flex;
    height: auto;
}

.widget-div div {
    flex : 1;
}

.ql-editor img {
  box-shadow : 0 4px 20px 1px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
  margin : 5px;
}

/* Minimalist Sidebar Navigation */
.sidebar-left .navigation-left .nav-item .nav-item-hold {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

.sidebar-left .navigation-left .nav-item .nav-item-hold .nav-icon,
.sidebar-left .navigation-left .nav-item .nav-item-hold .feather {
  display: inline-block !important;
  margin: 0 12px 0 0 !important;
  font-size: 18px !important;
  height: 18px !important;
  width: 18px !important;
  flex-shrink: 0;
}

.sidebar-left .navigation-left .nav-item .nav-item-hold .nav-text {
  display: block !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  flex: 1;
}