/* 
.AFS--Theme__Page {
   padding: 8px 8px;
   padding-top: 0px;
}
.AFS--EditTheme__RightSection {
   position: fixed;
   overflow: hidden;
   overflow-y: auto;
   width: calc(100% - 63rem );
   height: calc(100% - 18rem);
}
.AFS--EditTheme__LeftSection {
   position: fixed;
   overflow: hidden;
   overflow-y: auto;
   width: calc(100% - 99rem);
   height: calc(100% - 18rem);
}
*/

.AFS--EditTheme__Page,
.AFS--EditQuickView__Page {
   margin: 0px 8px 24px 4px;
}

.AFS--EditTheme__HeaderSection,
.AFS--EditQuickView__HeaderSection{
   margin-bottom: 1.6rem;
   position: sticky;
   top: 5.64rem;
   z-index: 150;
}

/* START -> CSS Config Stepper v106 */
.progressbar-wrapper {
   background: #fff;
   width: 100%;
}

ul.progressbar {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 72px;
   /* border-top: 1px solid #e1e3e5; */
   box-shadow: 2px 1px 6px 0px rgb(0 0 0 / 25%);
   padding-top: 4px;
}

.progressbar li {
   list-style-type: none;
   width: 25%;
   float: left;
   font-size: 14px;
   position: relative;
   text-align: center;
   text-transform: capitalize;
   color: #849397;
}

.progressbar li:before {
   width: 44px;
   height: 44px;
   content: "";
   line-height: 32px;
   border: 6px solid #dfe3e4;
   display: block;
   text-align: center;
   margin: 0 auto 1px auto;
   border-radius: 50%;
   position: relative;
   z-index: 2;
   background-color: #fff;
}

.progressbar li:after {
   width: 100%;
   height: 8px;
   content: '';
   position: absolute;
   background-color: #dfe3e4;
   top: 20px;
   left: -50%;
   z-index: 0;
}

.progressbar li:first-child:after {
   content: none;
}

.progressbar li.active {
   color: #008060;
   font-weight: bold;
}

.progressbar li.active:before {
   border-color: #008060;
   background: #008060;
   color: #fff;
}

.progressbar li.active+li:after {
   background-color: #008060;
}

/* .progressbar li.current {
   color: #ed1b24;
} */

.progressbar li.current:before {
   border-color: #008060;
   /* background: #008060;
   color: #fff; */
}

.progressbar li::before {
   background: #dfe3e4 no-repeat center center;
   background-size: 60%;
}

.progressbar {
   counter-reset: step;
}

.progressbar li:before {
   content: counter(step);
   counter-increment: step;
}
/* END -> CSS Config Stepper v106 */

.text-capitalized{
   text-transform: capitalize !important;
   color: #6d7175;
   font-weight: 500;
}

.AFS--Vertical__Center{
   display: flex;
    align-items: center;
    height: 100%;
}


/* Welcome page css */
.AFS--WelcomePage {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 4rem;
}

.AFS--WelcomePage__Contents {
   margin: 0 auto;
   width: 60rem;
}

.AFS--WelcomePage__Heading {
   display: flex;
   align-items: center;
   width: 100%;
   justify-content: center;
   margin-bottom: 3rem;
}
.AFS--WelcomePage__ImageSection {
   width: 150px;
   height: 150px;
   /* background: #f1f2f3;
   border: 1px solid #eaebed; */
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.AFS--WelcomePage__H1 {
   letter-spacing: 3px;
   font-size: 3.2rem;
   margin-left: 1rem;
}
.AFS--WelcomePage__Description {
   font-size: 1.7rem;
   margin-top: 1rem;
   color: #6d7175;
   line-height: 1.6;
}
.AFS--WelcomePage__ButtonSection {
   text-align: center;
   margin-top: 6rem;
}
.AFS--WelcomePage__Button {
   background: #2e9279;
   border: 0px solid #045d47;
   padding: 8px 24px;
   color: #fff;
   font-size: 1.8rem;
   border-radius: 4px;
   letter-spacing: 1.2px;
   cursor: pointer;
   transition: background 0.4s;
}
.AFS--WelcomePage__Button:hover {
   background: #045d47;
}
.AFS--WelcomePage__Img {
   width: 100px;
}
.afs--appMode_Test {
   color: #ed1b24 !important;
   display: flex;
   align-items: center;
}
.afs--appMode_Test span {
   display: inline-block;
   height: 14px;
   width: 14px;
   /* background: red; */
   border: 3px solid #ed1b24;
   border-radius: 50%;
   margin-right: 4px;
}

.afs--appMode_Live {
   color: #008060 !important;
   display: flex;
   align-items: center;
}
.afs--appMode_Live span {
   display: inline-block;
   height: 14px;
   width: 14px;
   background: #008060;
   border-radius: 50%;
   margin-right: 4px;
}
.AFS--AppMode__Heading {
   font-size: 1.7rem;
   font-weight: 600;
   line-height: 1.5;
   color: #008060;
   background: #edeeef;
   padding: 8px;
   border-radius: 2px;
   border: 1px solid #e1e1e1;
}

.AFS--SyncMessage__v106 {
   line-height: 2.4rem;
}


/* Saving overlay */
.AFS--LoadingOverlay {
   display: flex;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
   z-index: 78954;
   background: #36363699;
   align-items: center;
}

.AFS--LoadingOverlay .spanner {
   height: 100%;
   display: flex;
   align-items: center;
   color: #fff;
   font-size: 2rem;
   z-index: 78955;
}

 .AFS--LoadingOverlay .loader,
 .AFS--LoadingOverlay .loader:before,
 .AFS--LoadingOverlay .loader:after {
   border-radius: 50%;
   width: 2.5em;
   height: 2.5em;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation: load7 1.8s infinite ease-in-out;
   animation: load7 1.8s infinite ease-in-out;
 }
 .AFS--LoadingOverlay .loader {
   color: #ffffff;
   font-size: 10px;
   margin: 0 auto;
   margin-bottom: 4rem;
   position: relative;
   text-indent: -9999em;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }
 .AFS--LoadingOverlay .loader:before,
 .AFS--LoadingOverlay .loader:after {
   content: '';
   position: absolute;
   top: 0;
 }
 .AFS--LoadingOverlay .loader:before {
   left: -3.5em;
   -webkit-animation-delay: -0.32s;
   animation-delay: -0.32s;
 }
 .AFS--LoadingOverlay .loader:after {
   left: 3.5em;
 }
 @-webkit-keyframes load7 {
   0%,
   80%,
   100% {
     box-shadow: 0 2.5em 0 -1.3em;
   }
   40% {
     box-shadow: 0 2.5em 0 0;
   }
 }
 @keyframes load7 {
   0%,
   80%,
   100% {
     box-shadow: 0 2.5em 0 -1.3em;
   }
   40% {
     box-shadow: 0 2.5em 0 0;
   }
 }

 .AFS--LoadingOverlay .spanner, .AFS--LoadingOverlay .overlay{
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
 }

.react-dropdown-select {
   border: 1px solid #c9cccf !important;
   border-radius: 4px !important;
   outline: none !important;
   box-shadow: none !important;
   background-color: #fff !important;
}

.react-dropdown-select:hover,
.react-dropdown-select:focus,
.react-dropdown-select:focus-within {
   border-color: #c9cccf !important;
   outline: none !important;
   box-shadow: none !important;
   background-color: #fff !important;
}

span.react-dropdown-select-option {
   border-radius: 4px !important;
   background: #e4e5e7 !important;
   color: #202223 !important;
   display: inline-flex !important;
   max-width: 100% !important;
   align-items: center !important;
   min-height: 2.8rem !important;
   padding: 0 0.8rem !important;
}

.AFS--Dropdown_Collection_Select .react-dropdown-select-dropdown{
   z-index: 1001 !important;
}
.react-dropdown-select-dropdown{
   z-index: 1001 !important;
}
.AFS--Separator {
   display: block;
   border-top: 1px solid #c9cccf;
   width: 100%;
   margin: 2rem 0rem;
}

.AFS--CustomGroup_Item:first-child {
   margin-top: 0rem;
}
.AFS--CustomGroup_Item:last-child {
   margin-bottom: 0rem;
}

.AFS--CustomGroup_Item {
   border: 1px solid #ededed;
   background: #f9f9f9;
   padding: 0.6rem;
   border-radius: 4px;
   margin: 0.8rem 0rem;
}

#AFS--CustomGroup_Label_TextField{
   width: 100% !important;
}

.AFS--Tooltip_Item {
   color: #008060;
   cursor: pointer;
}