body#auto-collections-seo{
  --vfitz-p-primary: rgb(35,95,242);
  --vfitz-p-primary-hovered:#273678;
  --vfitz-demo-primay: rgb(64,75,121	);
  --vfitz-domo-subdued: rgb(150,161,211);

}

#auto-collections-seo .Polaris-TopBar{
  background-color:rgb(219,	223,	235	);
}

#auto-collections-seo .Polaris-Navigation__Icon svg{
  transform: scale(0.7);
}

#auto-collections-seo .Polaris-Navigation__Item--selected .Polaris-Navigation__Icon svg{
  fill:var(--vfitz-p-primary);
}

#auto-collections-seo .Polaris-Navigation__Item--selected{
  color: var(--vfitz-p-primary);
  font-weight: 600;
}

#auto-collections-seo .Polaris-Navigation__Item--selected::before{
  background-color: var(--vfitz-p-primary);
}

#auto-collections-seo .Polaris-VideoThumbnail__Thumbnail{
  background-size: contain;
}

.vfitzplus-menu-topbar-preview{display: flex;}
.vfitzplus-menu-topbar-preview ul{list-style: none; padding-inline-start: 60px;}
.vfitzplus-menu-topbar-preview ul.top{padding-left: 5px;} 
.vfitzplus-menu-topbar-preview li{list-style: none;}
.vfitzplus-menu-topbar-preview a{
  cursor: unset;
  text-decoration: unset;
  background: var(--vfitz-demo-primay);
  padding: 5px 10px;
  min-width: 100px;
  display: inline-block;
  color: white;
  border-top: 2px white solid;
  text-align: center;
  font-weight: 600;
}
.vfitzplus-menu-topbar-preview a.void{
  background: var(--vfitz-domo-subdued);
  color:  var(--vfitz-domo-subdued);
}

.vfitzplus-menu-drop-preview { display: flex; justify-content: center;width: 80%;margin-left: 10%;}
.vfitzplus-menu-drop-preview.t1{width: 40%;margin-left: 30%;}
.vfitzplus-menu-drop-preview.t2{width: 60%;margin-left: 20%;}
.vfitzplus-menu-drop-preview.t3{width: 80%;margin-left: 10%;}
.vfitzplus-menu-drop-preview.t4{width: 86%;margin-left: 6%;}
.vfitzplus-menu-drop-preview.t5{width: 96%;margin-left: 2%;}
.vfitzplus-menu-drop-preview ul{list-style: none; flex:1}
.vfitzplus-menu-drop-preview ul.top{padding-left: 5px;position: relative;}
.vfitzplus-menu-drop-preview ul.top:after{
  display: block;
  content: '';
  border-width: 8px 8px 8px 8px;
  border-style: solid;
  border-color: var(--p-background-pressed) transparent transparent transparent;
  position: absolute;
  top: 12px;
  right: 12px;
}
.vfitzplus-menu-drop-preview li{list-style: none;}
.vfitzplus-menu-drop-preview a{
  cursor: unset;
  text-decoration: unset;
  background: var(--vfitz-demo-primay);
  padding: 5px 10px;
  min-width: 100px;
  display: inline-block;
  color: white;
  border-top: 2px white solid;
  text-align: center;
  font-weight: 600;
  min-width: 100%;
}
.vfitzplus-menu-drop-preview a.void{
  background: var(--vfitz-domo-subdued);
  color:  var(--vfitz-domo-subdued);
}


.loading {
  display: flex;
  justify-content: center;
}

.loading .logo {
  background-image: url("https://cdn.shopify.com/s/files/applications/dc6a3061ea370210cd0f499f0bc95011_480x480.png");
  height: 100px;
  width: 100px;
  background-size: cover;
}

.loading .title {
  text-align: center;
  color: #0274bf;
  font-size: 2rem;
  font-weight: 900;
  font-family: monospace;
}

.loading .info {
  margin-top: 25px;
}
.loading .info a {
  font-size: 12px;
  color: #999;
}
.loading .info br + a {
  text-decoration: none;
}

/* Inspirated from  http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html */
.ouro {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 1em;
  border-radius: 50%;
  background: none repeat scroll 0 0 #f4f6f8;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 0 25px rgba(0, 0, 255, 0.075);
}

.ouro:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  display: block;
  height: 38px;
  width: 38px;
  background: none repeat scroll 0 0 #f4f6f8;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.ouro > span {
  position: absolute;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.left {
  left: 0;
}
.right {
  left: 50%;
}

.anim {
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: none repeat scroll 0 0 #0274bf;
  opacity: 0.8;
  -webkit-animation: ui-spinner-rotate-left 3s infinite;
  animation: ui-spinner-rotate-left 3s infinite;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}
.left .anim {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.right .anim {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  left: -100%;
  -webkit-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
}

/* v2 */
.ouro2 .anim {
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
.ouro2 .right .anim {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

/* v3 */
.ouro3 .anim {
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-timing-function: linear;
}
.ouro3 .right .anim {
  -webkit-animation-name: ui-spinner-rotate-right;
  -webkit-animation-delay: 0;
  -webkit-animation-delay: 1.5s;
  animation-name: ui-spinner-rotate-right;
  animation-delay: 0;
  animation-delay: 1.5s;
}

/* round variation */
.round .ouro:after {
  display: none;
}

/* double variation */
.double {
  position: absolute;
  top: -3px;
  left: -7px;
}

.double .ouro:after {
  /* height: 13px; width: 13px; */
  /* left: 7px; top: 7px; */
  border: 10px solid #f4f6f8;
  background: transparent;
  box-shadow: none;
}

.Polaris-ResourceItem__Container{align-items: center;}

.level-optionlist .Polaris-OptionList-Option{margin-top: 0.4rem; min-height: 1rem;}
.level-optionlist .Polaris-OptionList-Option__Label, .level-optionlist .Polaris-OptionList-Option__SingleSelectOption{padding: 0.2rem;}

@keyframes ui-spinner-rotate-right {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ui-spinner-rotate-left {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ui-spinner-rotate-right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes ui-spinner-rotate-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/*
* Some bugs with Chrome (Android), Safari and Opera, I'll try to see how http://atomeye.com/projects/sass-css-spinner.html made his code.
*/

/* presentation styles */
/* html {height: 100%} */
/* body { text-align:center; background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat; height: 100%; display:table; width:100%} */
/* .block {display: table-cell; vertical-align:middle} */
/* h1, a { margin-top: 1em; font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial; color: #888; font-weight: lighter;} */