* { 
    box-sizing: border-box; text-decoration: none; border: none ; outline: none; 
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;  */
    color: #000; font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11*/
    user-select: none; /* Standard syntax */
}







/* Theme Settings */
h1 { 
    text-transform: capitalize ;
    margin-bottom: 0 ;

    font-size: 2.5rem; 
    font-weight: 600 ; 
    letter-spacing: -1px;
    
    /* font-size: 3rem;
    font-weight: 100 ;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: -0.1rem;     */
}
h2 { font-size: 1.8rem ; margin-top: 1rem ; letter-spacing: -1px ; }
h3 { font-size: 1.5rem;  margin-top: 1.2rem ; }
h4 { margin-top: 1.2rem ; }


img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}





::-webkit-input-placeholder { color: rgb(0, 0, 0); }
:-ms-input-placeholder { color: rgb(0, 0, 0); }
::-moz-placeholder { color: rgb(0, 0, 0); }
:-moz-placeholder { color: rgb(0, 0, 0); }

::-webkit-calendar-picker-indicator { color-scheme: dark; }

.themeTextWhite { color: rgb(255, 255, 255); }
.themeTextBlack { color: rgb(0, 0, 0); }
.themeTextOrange { color: rgb( 190, 45, 0); }
.TextColourRed { color: rgb(200, 0, 0); }
.TextColourWhite { color: rgb(255, 255, 255); }
.themeText1 { color: rgb(255, 255, 255); }
.themeText2 { color: rgb(0, 0, 0); }
.themeText4 { color: rgb(29, 29, 29); }
.themeText5 { color: rgb(50, 57, 61);  }

.themeBgWhite { background-color: rgb(255, 255, 255); }
.themeBgBlack { background-color: rgb(0, 0, 0); }
.themeBgAvo { background-color: rgb(125, 140, 120); }
.themeBgAvoLight { background-color: rgb(190, 200, 180); }

.themeBg1 { background-color: rgb(235, 235, 235); }
.themeBg2 { background-color: rgb(0, 0, 0); }
.themeBg3 { background-color: rgb(83, 112, 50); }
.themeBg4 { background-color: rgb(17, 17, 17); }
.themeBg5 { background-color: rgb(50, 57, 61);   }
.themeBg6 { background-color: rgb(21, 49, 65);   }


.themeBgBlackGlass { background-color: rgba(0, 0, 0, 0.7); }
.themeBgBlackGlassLight { background-color: rgba(0, 0, 0, 0.3); }
.themeBgMist { background-color: rgba(255, 255, 255, 0.5); }
.themeBgGrey { background-color: rgba(85, 85, 85, 0); border: solid 1px black; font-weight: 600; }
.themeBgFaint { background-color: rgba(255, 255, 255, 0.1); }


.TextHeight08 { font-size: 0.8rem; }
.TextHeight09 { font-size: 0.9rem; }
.TextHeight1 { font-size: 1rem; }
.TextHeight1_5 { font-size: 1.5rem; }
.TextHeight2 { font-size: 2rem; }
.TextHeight3 { font-size: 3rem; }
.TextHeight4 { font-size: 4rem; }
.TextHeight5 { font-size: 5rem; }
.TextHeight6 { font-size: 6rem; }
.TextHeight7 { font-size: 7rem; }

.TextLeft { text-align: left ; }
.TextRight { text-align: right ; }
.TextCen { text-align: center ; }



.themeIconsLight { filter: invert(0%);  transition-duration: 0.1s ; }
.themeBgDark { background-color: rgb(11, 36, 44); }
.themeIconsDark { filter: invert(100%);  transition-duration: 0.1s ; }





body { width: 100%; margin: 0px; padding: 0px; }
button { cursor: pointer; }
p {
    line-height: 1.6rem; white-space: pre-line ; text-align: left; margin: 0 0 3rem; opacity: 0.8 ;
    /* text-align: justify; text-justify: inter-word; */
}
a { cursor: pointer; }
select { cursor: pointer;  }
option { cursor: pointer; border: none; font-weight: 600; font-size: 14px; }
textarea { resize: none ; }
section { scroll-snap-stop: always; }
b { font-weight: 600 ; }


.hide { display: none; }
.Fade { opacity: 0 ; }
.FileInput { position: absolute; top: 0; left: 0; opacity: 0 ;  }
.flexboxXY { display: flex; justify-content: center; align-items: center;  }
.flexboxXYWrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  }
.flexboxWrap { display: flex; flex-wrap: wrap; }
.flexboxX { display: flex; flex-direction: row; }
.flexboxY { display: flex; flex-direction: column; }
.flexboxCenY { display: flex; align-items: center ; }
.flexboxRight { display: flex; flex-wrap: wrap; justify-content: right; }
.flexboxLeft { display: flex; flex-wrap: wrap; justify-content: left; }
.flexboxCen { display: flex; flex-wrap: wrap; justify-content: center; }

.PosRel { position: relative ; }
.PosAbs { position: absolute ; }
.PosFix { position: fixed ; }

.full { width: 100%; }
.fullH { height: 100%; }
.halfH { height: 50%; }
.fullHvh { height: 100vh; }
.MinH100 { min-height: 100vh ; }
.FloatLeft { float: left; }
.FloatRight { float: right; }
.noSelect {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
}
.Shadow{ box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4 ) ; }
.TextShadow{ text-shadow: 0 0 5px rgba(0, 0, 0, 0.7) ; }
::placeholder { opacity: 0.5 ; color: grey; }



.CloseButton1 { position: absolute; top: 1rem; right: 1rem; height: 2rem; width: 2rem; border-radius: 100px;  font-size: 1.5rem; display: flex; justify-content: center; align-items: center; z-index: 1; }
.CloseButton2 { position: absolute; top: 0; right: 0; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; z-index: 1; background-color: rgba(0, 0, 0, 0) }
.CloseButton2White { position: absolute; top: 0; right: 0; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; color: white ; z-index: 1; background-color: rgba(0, 0, 0, 0) }



.HoverBg {  transition-duration: 0.3s ; }
.HoverBg:hover { background-color: rgba(0, 0, 0, 0.1 ) ; }



.PlatformBgThemeColour { background-color: rgb(255, 255, 255) ; }

::-webkit-scrollbar { display: none; }
/* ::-webkit-scrollbar { width: 5px; transition-duration: 0.3s ;  }
::-webkit-scrollbar-track { background: #83838300; width: 20px ; }
::-webkit-scrollbar-thumb { background: rgb(0, 0, 0);  transition-duration: 0.3s ; width: 20px ; }
::-webkit-scrollbar-thumb:hover { background: rgb(227, 14, 14); width: 20px ; } */

.pointer{ cursor: pointer; }
.OffGrid { position: absolute ; top: -1000%; left: -1000%; }


.pageStructure { float: left;  top: 0 ; left: 0 ; width: 100%;  }
.sectionGeneral { position: relative; float: left; width: 100%; min-height: 80vh; padding: 7rem 15% 7rem ; scroll-snap-stop: always; }
.sectionGeneral2 { position: relative; float: left; width: 100%; padding: 9rem 5% 7rem ; scroll-snap-stop: always; }



.ScrollY { overflow-y: scroll; }
.ScrollX { overflow-x: scroll; }




/* Fixed Elements */
.AppFixedElementsPageTitle { position: fixed; top: 50%; right: 20px ; z-index: 2 ; background-color: rgba(137, 43, 226, 0); display: flex; align-items: center; 
    transform-origin: bottom right ; transform: rotate( 90deg ); 
}

.AppFixedElementsPageName { font-weight: 600; padding: 5px 5px 5px ; text-transform: capitalize;  font-size: 2rem ; margin-right: 17px ; opacity: 1; }

.AppFixedElementsGenText { float: left; font-weight: 600; text-transform: capitalize;  padding-right: 10px ; padding-top: 0.5rem; font-size: 0.9rem ; opacity: 0.5; }
.AppFixedElementsGenText2 { float: left; font-weight: 100; padding-right: 10px ; padding-top: 0.5rem; }

.AppFixedElementsLogoBox { position: fixed; top: 10px; left: 2px ; width: 40px ; height: 40px; display: flex; justify-content: center; align-items: center; z-index: 2 ; }
.AppFixedElementsLogo { height: 45%; }










.FormSection { position: relative; float: left; padding: 10vh 35% 10vh ; width: 100%; }
.formBox0 { width: 100% ; padding: 7vh 30% 0 ; }
.formTitle { width: 100%; font-size: 3rem; text-align: center; padding: 0 0 0.5vh;  }
.formSubTitle { width: 100%; font-size: 1.5rem;  text-align: center; padding: 0 0 5vh ;}



.FormLabelInputBox0 { float: left; width: 100%; padding: 0.5rem 1.5rem 0.5rem ; margin: 0 0.05rem 0.25rem; transition-duration: 0.2s;  box-shadow: 0 0 5px rgba(0, 0, 0, 0) ; border-radius: 5px;  }
.FormLabelInputTitle { width: 100%; margin: 0 0 0.5rem ; transition-duration: 0.2s; opacity: 0.7 ; font-size: 0.9rem ; }
.FormLabelInput  { width: 100%;  background-color: rgba(23, 99, 16, 0) ; transition-duration: 0.2s; font-weight: 600; font-size: 1.3rem ; padding: 6px 0 6px ; border-radius: 5px ; }

.FormTextArea { width: 100%; padding: 10px 0 10px;  background-color: rgba(255, 255, 255, 0);  font-weight: 600; font-size: 1.3rem; }

.FormLabelInputBox0Alert { float: left; width: 100%; padding: 0.5rem 1.5rem 0.5rem ; margin: 0 0.05rem 0.25rem;  transition-duration: 0.2s; border-radius: 5px; 
    background-color: rgba(200, 0, 0, 0.2 );
    /* border: solid 3px rgb(200, 0, 0) ; */
}
.FormLabelInputBox0Approved { float: left; width: 100%; padding: 0.5rem 1.5rem 0.5rem ; margin: 0 0.05rem 0.25rem;  transition-duration: 0.2s;  border-radius: 5px; 
    background-color: rgba(14, 93, 6, 0.2);
    /* border: solid 3px green ; */
}
.FormInputAlertMesage { width: 100%; padding: 5px 0 5px ; color: rgb(200, 0, 0); font-weight: 600; }
.ErrorMessageApproved { display:  none ; }

.FormLabelInput2  { display: flex; flex-direction: row; }

.signupMap { height: 150px; width: 100%; background-color: rgba(0, 0, 0, 0.2) ; }
.signupBg { width: 100%; }


.formSubmitBtnDummy { 
    float: right; padding: 1.6rem 20px 1.6rem ; width: 100%; transition-duration: 0.3s; margin: 30px 0% 30px ; font-weight: 600; border-radius: 10px; text-align: center;  cursor: pointer;  text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0) ; border: solid 1px black;
}
.formSubmitBtn { 
    float: right; padding: 1.6rem 20px 1.6rem ; width: 100%; transition-duration: 0.3s; margin: 30px 0% 30px ; font-weight: 600; border-radius: 10px; text-align: center;  cursor: pointer; text-transform: uppercase;
    background-color: black ; color: rgb(255, 255, 255);
}
.formProcessingBtn { 
    float: right; padding: 1.6rem 20px 1.6rem ; width: 100%; transition-duration: 0.3s; margin: 30px 0% 30px ; font-weight: 600; border-radius: 0px; text-align: center;  cursor: default; text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0) ; border-bottom: solid 0.3px black ;
}
.FormPolicyBtn { float: left ; width: 100%; text-align: center; padding: 7px ;  margin: 5px 0 0 ; color: gray; }





.NoContentIconBox { height: 7rem ; background-color: rgba(63, 214, 214, 0); }



.PromptGuestToJoin { position: absolute ; top: 0 ; left: 0 ; background-color: rgba(255, 0, 0, 0) ; width: 100% ; height: 100% ; z-index: 2 ;  }
.PromptGuestToJoin2 { z-index: 1 ; }


.PlatformInputBox0 { float: left; width: 100%; padding: 0.5rem 2rem 0.5rem ; margin: 0 0 0.25rem; transition-duration: 0.2s;  border-radius: 5px ; }




.Card1Box1 { width: 17rem ;  height: 10rem ; }




.FormPaymentCardImageBox { width: 100%; float: left; display: flex; justify-content: center; align-items: center ; padding: 0.7rem 1.5rem 0.5rem ; margin: 0 0.05rem 0.25rem;  }
.FormPaymentCardImage { height: 35px ; background-color: rgb(255, 255, 255); }




.cenX { width: 100%; text-align: center; }
.bold700 { font-weight: 700; }
.bold600 { font-weight: 600; }
.bold400 { font-weight: 400; }
.bold100 { font-weight: 100; }
.left { float: left;}
.right { float: right;}
.leftC { left: -100%; }
.rightC { right: -100%; }
.Caps { text-transform: capitalize; }
.UpperCase { text-transform: uppercase; }
.LowerCase { text-transform: lowercase; }

.btnSmall { padding: 7px 20px 7px ; margin: 0 4px 0 ; transition-duration: 0.3s; letter-spacing: 0; border-radius: 100px; }
.btnBig { padding: 12px 30px 12px ; margin: 0 4px 0  ; transition-duration: 0.3s; letter-spacing: 0; border-radius: 100px; }
.btnProcessing { padding: 14px 40px 12px ; margin: 0 4px 0  ; transition-duration: 0.3s; letter-spacing: 0; border-bottom: solid 3px black ; }
.btnFull { padding: 10px 40px 10px ; margin: 0 4px 0 ; width: 100%; transition-duration: 0.3s; letter-spacing: 0; }

.BgNone { background-color: rgba(120, 120, 120, 0);  }
.BgTomato { background-color: rgb(255, 70, 37);  color: white; }
.BgGreen { background-color: rgb(56, 131, 33); }
.BgArmyGreen { background-color: rgb( 170 , 180 , 170 ) ; }
.BgFrost { background-color: rgba(255, 255, 255, 0.1 ); }
.BgTintLight { background-color: rgba(0, 0, 0, 0.1 ); }
.BgTint { background-color: rgba(0, 0, 0, 0.6 ); }
.BgTintDark { background-color: rgba(0, 0, 0, 0.9 ); }
.BgDeepBlue { background-color: rgb(0, 71, 151);  color: white; }
.BgSky { background-color: rgb(0, 119, 255);  color: white; }
.BgOcean { background-color: rgb(20, 201, 174);  color: white; }
.BgRed { background-color: rgb(180, 0, 0); color: white;  }
.BgPurple { background-color: rgb(168, 0, 180); color: white;  }
.BgYellow { background-color: rgb(182, 188, 0); color: white;  }
.BgBlack { background-color: rgb(0, 0, 0);   }
.BgWhite { background-color: rgb(255, 255, 255);   }
.BgLightGrey { background-color: rgb(250, 250, 250);   }
.BgGrey { background-color: rgb(120, 120, 120);  }

.BgTomatoGrad { background-image: linear-gradient( 180deg , rgb(172, 26, 0) , rgb(210, 44, 15) ); }
.BgGreenGrad { background-image: linear-gradient( 180deg , rgb(70, 100, 70), rgba(70, 100, 70, 0.7)) }
.BgSkyGrad {  background-image: linear-gradient( 180deg , rgb(0, 68, 146) , rgb(29, 100, 180)) ;}
.BgRedGrad { background-image: linear-gradient( 180deg , rgb(159, 34, 34) , rgb(130, 0, 0) ); }
.BgPurpleGrad { background-image: linear-gradient( 180deg , rgb(95, 16, 104) , rgb(138, 44, 149) ); }
.BgBlackGrad { background-image: linear-gradient( 180deg , rgb(0, 0, 0) , rgba(0, 0, 0, 0.7) ); }
.BgBlueGrad { background-image: linear-gradient( 180deg , rgb(85, 100, 109) , rgb(110, 135, 150) ); }

.BorderColourMink { border-color: rgb(186, 29, 60); }
.BorderColourSky { border-color: rgb(0, 71, 153); }
.BorderColourTomato { border-color: rgb(209, 31, 0); }
.BorderColourGreen { border-color: rgb(93, 144, 78); }
.BorderColourBlack { border-color: rgb(0, 0, 0); }




.tabInner { width: 100% ; padding: 5vh 0 0 ; height: 90vh; overflow-y: scroll;  background-color: rgba(228, 121, 44, 0.738); }
.oneTab { position: relative; float: left; width: 100%; }
.twoTabs { position: relative;  float: left; width: 50%; }
.threeTabs { position: relative; float: left; width: 30%;   }
.fourTabs { position: relative; float: left; width: 25%;  }
.fiveTabs { position: relative; float: left; width: 20%;  }
.sixTabs { position: relative; float: left; width: 16.6666%;  }
.sevenTabs { position: relative; float: left; width: 14,285714%;   }


/* .BorderInput { border-left: solid 10px rgb(235, 0, 0); } */
.BorderInput { background-color: rgba(255, 0, 0, 0.2 ); }
.borderR { border-right: solid 0.1px rgba(128, 128, 128, 0.5) ;   }
.borderL { border-left: solid 0.1px rgba(128, 128, 128, 0.5) ;   }
.borderB { border-bottom: solid 0.1px rgba(128, 128, 128, 0.5) ;   }
.BorderFull { border: solid 0.1px rgba(134, 134, 134, 0.5) ;  }



.BorderRad2 { border-radius: 2px; }
.BorderRad5 { border-radius: 5px; }
.BorderRad10 { border-radius: 10px; }
.BorderRad15 { border-radius: 15px; }
.BorderRad20 { border-radius: 20px; }
.BorderRad100 { border-radius: 100px; }

.BorderRad50p { border-radius: 50%; }



.left { float: left; }
.right { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right;}

.m0 { margin: 0px; }
.m2 { margin: 2px; }
.m3 { margin: 3px; }
.m5 { margin: 5px; }
.m7 { margin: 7px; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }

.m1p { margin: 1%; }
.mT5p { margin: 0.5% 0 0 0 ; }
.mT1p { margin: 1vh 0 0 0 ; }
.mT2p { margin: 2vh 0 0 0 ; }
.mT3p { margin: 3vh 0 0 0 ; }
.mT5p { margin: 5vh 0 0 0 ; }
.mT17p { margin: 17vh 0 0 0 ; }
.mT10p { margin: 10vh  0 0 ; }
.mT20p { margin: 20vh  0 0 ; }
.mT25p { margin: 25vh  0 0 ; }
.mT30p { margin: 30vh  0 0 ; }
.mT40p { margin: 40vh  0 0 ; }
.mT50p { margin: 50vh  0 0 ; }

.mT-20 { margin-top: -20px ; }
.mT-10 { margin-top: -10px ; }
.mT-2 { margin-top: -2px ; }
.mT0 { margin-top: 0px ; }
.mT5 { margin-top: 5px ; }
.mT7 { margin-top: 7px ; }
.mT10 { margin-top: 10px ; }
.mT20 { margin-top: 20px ; }
.mT30 { margin-top: 30px ; }
.mT40 { margin-top: 40px ; }
.mT50 { margin-top: 50px ; }
.mT70 { margin-top: 70px ; }
.mT100 { margin-top: 100px ; }
.mT150 { margin-top: 150px ; }


.mB0 { margin-bottom: 0 ; }
.mB1 { margin-bottom: 1px ; }
.mB2 { margin-bottom: 2px ; }
.mB3 { margin-bottom: 3px ; }
.mB5 { margin-bottom: 5px ; }
.mB7 { margin-bottom: 7px ; }
.mB10 { margin-bottom: 10px ; }
.mB20 { margin-bottom: 20px ; }
.mB30 { margin-bottom: 30px ; }
.mB40 { margin-bottom: 40px ; }
.mB50 { margin-bottom: 50px ; }
.mB70 { margin-bottom: 70px ; }
.mB100 { margin-bottom: 100px ; }

.mB5p { margin-bottom: 5vh ; }
.mB10p { margin-bottom: 10vh ; }
.mB50p { margin-bottom: 50vh ; }

.mS10p { margin-left: 10% ; margin-right: 10%; }

.mS2 { margin-left: 2px ; margin-right: 2px ; }
.mS5 { margin-left: 5px ; margin-right: 5px ; }
.mS10 { margin-left: 10px ; margin-right: 10px ; }
.mS20 { margin-left: 20px ; margin-right: 20px ; }


.mR5 {  margin-right: 5px ; }
.mR10 {  margin-right: 10px ; }
.mR15 {  margin-right: 15px ; }
.mR20 {  margin-right: 20px ; }

.p0 { padding: 0px; }
.p3 { padding: 3px; }
.p5 { padding: 5px; }
.p7 { padding: 7px; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p50 { padding: 50px; }
.p100 { padding: 100px; }

.p3p { padding: 3%; }
.p5p { padding: 5%; }

.pB5p{ padding-bottom: 5%; }
.pB10p{ padding-bottom: 10%; }
.pB15p{ padding-bottom: 15%; }
.pB20p{ padding-bottom: 20%; }
.pB30p{ padding-bottom: 30%; }
.pB40p{ padding-bottom: 40%; }


.pT3p{ padding-top: 3vh ;  }
.pT5p{ padding-top: 5vh ;  }
.pT10p{ padding-top: 10vh ;  }
.pT15p{ padding-top: 15vh ;  }
.pT20p{ padding-top: 20vh ;  }
.pT25p{ padding-top: 25vh ;  }
.pT30p{ padding-top: 30vh ;  }
.pT40p { padding-top: 40vh ;  }

.pT3{ padding-top: 3px ;  }
.pT5{ padding-top: 5px ;  }
.pT7{ padding-top: 7px ;  }
.pT10{ padding-top: 10px ;  }
.pT15{ padding-top: 15px ;  }
.pT20{ padding-top: 20px ;  }
.pT30{ padding-top: 30px ;  }
.pT40{ padding-top: 40px ;  }
.pT50{ padding-top: 50px ;  }
.pT100{ padding-top: 100px ;  }
.pT70{ padding-top: 70px ;  }
.pT150{ padding-top: 150px ;  }

.pB3 { padding-bottom: 3px ;  }
.pB5 { padding-bottom: 5px ;  }
.pB10 { padding-bottom: 10px ;  }
.pB20{ padding-bottom: 20px ;  }
.pB30{ padding-bottom: 30px ;  }
.pB40{ padding-bottom: 40px ;  }
.pB50{ padding-bottom: 50px ;  }
.pB70 { padding-bottom: 70px; }
.pB100{ padding-bottom: 100px ;  }
.pB150{ padding-bottom: 150px ;  }
.pB300{ padding-bottom: 300px ;  }


.pS5p { padding-left: 5%; padding-right: 5%; }
.pS10p { padding-left: 10%; padding-right: 10%; }
.pS15p { padding-left: 15%; padding-right: 15%; }
.pS20p { padding-left: 20%; padding-right: 20%; }
.pS25p { padding-left: 25%; padding-right: 25%; }
.pS30p { padding-left: 30%; padding-right: 30%; }

.pS0 { padding-left: 0px; padding-right: 0px; }
.pS2 { padding-left: 2px; padding-right: 2px; }
.pS5 { padding-left: 5px; padding-right: 5px; }
.pS7 { padding-left: 7px; padding-right: 7px; }
.pS10 { padding-left: 10px; padding-right: 10px; }
.pS15 { padding-left: 15px; padding-right: 15px; }
.pS20 { padding-left: 20px; padding-right: 20px; }
.pS30 { padding-left: 30px; padding-right: 30px; }
.pS50 { padding-left: 50px; padding-right: 50px; }

.pR20 { padding-right: 20px; }





.rem01P { padding: 0.1rem; }
.rem03P { padding: 0.3rem; }
.rem05P { padding: 0.5rem; }
.rem07P { padding: 0.7rem; }
.rem08P { padding: 0.8rem; }
.rem09P { padding: 0.9rem; }
.rem1P { padding: 1rem; }
.rem2P { padding: 2rem; }
.rem3P { padding: 3rem; }
.rem4P { padding: 4rem; }

.rem01PT { padding-top: 0.1rem; }
.rem03PT { padding-top: 0.3rem; }
.rem05PT { padding-top: 0.5rem; }
.rem07PT { padding-top: 0.7rem; }
.rem1PT { padding-top: 1rem; }
.rem2PT { padding-top: 2rem; }
.rem3PT { padding-top: 3rem; }
.rem4PT { padding-top: 4rem; }
.rem5PT { padding-top: 5rem; }
.rem6PT { padding-top: 6rem; }
.rem7PT { padding-top: 7rem; }
.rem8PT { padding-top: 8rem; }
.rem9PT { padding-top: 9rem; }
.rem10PT { padding-top: 10rem; }

.rem01PB { padding-bottom: 0.1rem; }
.rem03PB { padding-bottom: 0.3rem; }
.rem05PB { padding-bottom: 0.5rem; }
.rem07PB { padding-bottom: 0.7rem; }
.rem1PB { padding-bottom: 1rem; }
.rem2PB { padding-bottom: 2rem; }
.rem3PB { padding-bottom: 3rem; }
.rem4PB { padding-bottom: 4rem; }
.rem5PB { padding-bottom: 5rem; }
.rem6PB { padding-bottom: 6rem; }
.rem7PB { padding-bottom: 7rem; }
.rem8PB { padding-bottom: 8rem; }
.rem9PB { padding-bottom: 9rem; }
.rem10PB { padding-bottom: 10rem; }

.rem0PS { padding-left: 0rem; padding-right: 0rem; }
.rem03PS { padding-left: 0.3rem; padding-right: 0.3rem; }
.rem05PS { padding-left: 0.5rem; padding-right: 0.5rem; }
.rem07PS { padding-left: 0.7rem; padding-right: 0.7rem; }
.rem1PS { padding-left: 1rem; padding-right: 1rem; }
.rem2PS { padding-left: 2rem; padding-right: 2rem; }
.rem3PS { padding-left: 3rem; padding-right: 3rem;  }
.rem4PS { padding-left: 4rem; padding-right: 4rem;  }

.rem03PSR { padding-right: 0.3rem; }
.rem05PSR { padding-right: 0.5rem; }
.rem07PSR {  padding-right: 0.7rem; }
.rem1PSR { padding-right: 1rem; }
.rem2PSR { padding-right: 2rem; }
.rem3PSR { padding-right: 3rem;  }
.rem4PSR { padding-right: 4rem;  }

.rem03PSL { padding-left: 0.3rem; }
.rem05PSL { padding-left: 0.5rem; }
.rem07PSL { padding-left: 0.7rem; }
.rem1PSL { padding-left: 1rem; }
.rem2PSL { padding-left: 2rem; }
.rem3PSL { padding-left: 3rem; }
.rem4PSL { padding-left: 4rem; }


.rem0M { margin: 0rem ; }
.rem02M { margin: 0.2rem ; }
.rem03M { margin: 0.3rem ; }
.rem05M { margin: 0.5rem ; }
.rem07M { margin: 0.7rem ; }
.rem1M { margin: 1rem ; }
.rem2M { margin: 2rem ; }
.rem3M { margin: 3rem ; }
.rem4M { margin: 4rem ; }

.rem02MT { margin-top: 0.2rem ; }
.rem03MT { margin-top: 0.3rem ; }
.rem05MT { margin-top: 0.5rem ; }
.rem07MT { margin-top: 0.7rem ; }
.rem1MT { margin-top: 1rem ; }
.rem2MT { margin-top: 2rem ; }
.rem3MT { margin-top: 3rem ; }
.rem4MT { margin-top: 4rem ; }

.rem01MB { margin-bottom: 0.1rem ; }
.rem02MB { margin-bottom: 0.2rem ; }
.rem03MB { margin-bottom: 0.3rem ; }
.rem05MB { margin-bottom: 0.5rem ; }
.rem07MB { margin-bottom: 0.7rem ; }
.rem1MB { margin-bottom: 1rem ; }
.rem2MB { margin-bottom: 2rem ; }
.rem3MB { margin-bottom: 3rem ; }
.rem4MB { margin-bottom: 4rem ; }

.rem01P { padding: 0.1rem; }
.rem1P { padding: 1rem; }



.O100 { opacity: 1 ; }
.O70 { opacity: 0.7 ; }
.O50 { opacity: 0.5 ; }
.O30 { opacity: 0.3 ; }
.O20 { opacity: 0.2 ; }
.O10 { opacity: 0.1 ; }
.O05 { opacity: 0.05 ; }




.MoreSliderSidePadding { padding-left: 10%; padding-right: 10% ; }


.NotificationClosed { display: none; }
.NotificationOpen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgb(217, 226, 211); z-index: 100 ; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 7% 0 ; }
.NotificationSpecialText { width: 100%; font-size: 2.5rem ; font-weight: 600 ; margin: 20px 0 0 ; }



.FinePrint { font-size: 0.8rem ; }
.FinePrintX2 { font-size: 0.7rem ; }



.Table { width: 100%; display: flex; flex-direction: column; }
.Row { width: 100%; display: flex; flex-direction: row; }
.CellHeading { width: 100%; padding: 0.4rem 0 0.4rem ; background-color: rgba(255, 255, 255, 0) ; margin: 0.5px ; font-weight: 600;  }
.Cell { width: 100%; padding: 0.1rem 0 0.1rem ; background-color: rgba(255, 255, 255, 0) ; margin: 0.5px ; }
.Cell2 { width: 100%; padding: 1rem; background-color: rgb(255, 255, 255) ; margin: 0.5px ; opacity: 0.5 ; }
.Cell3 { width: 100%; padding: 1rem; background-color: rgb(255, 255, 255) ; margin: 0.5px;  opacity: 0.5 ; }





.PageAlertBoxActive { position: fixed; top: 0 ; right: 0; width: 100% ; height: 100vh; z-index: 500 ; }
.PageAlertContent { width: 100% ; height: 100%; padding: 35vh 1.5rem 5rem ; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }







.HideOnPhone { display: contents; }






/* WebApp navigation slider */
.NavSliderBase { position: fixed;  top: 0; right: 0; height: 100vh; transition-duration: 0.1s; z-index: 8; }
.NavSliderInner { position: absolute; top: 0; right: 0; height: 100vh; width: 30% ; overflow: hidden; overflow-y: scroll; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7) ; background-color: rgb(255, 255, 255); padding: 70px 0 200px ;  }
.NavSliderOpen { width: 100%; }
.NavSliderClose { width: 100% ; right: -110% ; }






.EditButtonBox { background-color: red ; }









.boxCenY { display: flex; justify-content: center; flex-wrap: wrap; }
.boxCenX { display: flex; align-items: center; }







.PlatformFeaturesBtn { width: fit-content; padding: 0.4rem ; margin: 0 0.2rem 0; border-radius: 100rem ; }





/* New Slider */
.NavSliderBase2 { position: fixed;  bottom: 0; right: 0; height: 100vh; width: 100%; z-index: 200 ; transition-duration: 0.1s;  }
.NavSliderInner2 { position: absolute; top: 0; right: 0; height: 100vh; width: 35%; overflow: hidden; overflow-y: scroll; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7) ; cursor: default; background-color: rgb(78, 62, 62); }
.NavSliderOpen2 {  right: 0; width: 100%;  }
.NavSliderClose2 {  right: -100%; width: 100%; }



/* Slider General */
.SliderGeneralBase { position: fixed; top: 0; right: 0; height: 100vh; width: 100%; z-index: 200 ; transition-duration: 0.02s; }
.SliderGeneralBox { position: absolute; top: 0; right: 0; height: 100vh; width: 35%; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7) ; overflow-y: scroll; }
.SliderGeneralInner { height: 90vh; width: 100%; overflow: hidden; overflow-y: scroll;  }

.SliderGeneralInnerBox { position: absolute; bottom: 0; right: 0; background-color: rgb(255, 255, 255); height: fit-content; width: 100%; padding: 40px; display: flex; align-items: center; justify-content: center; }

.SliderGeneralOpen {  right: 0; width: 100%; }
.SliderGeneralClose {  right: -100%; width: 100%; }

.SliderHomeInput { float: left; width: 100%; height: 80vh; background-color: rgba(249, 24, 24, 0); font-size: 1.5rem ; }



/* Butterfliez Slider */
.ButterflyOpen { position: fixed;  bottom: 0; left: 0; width: 100%; height: 100vh;  z-index: 200 ; transition-duration: 0.1s; }
.ButterflyClose { position: fixed;  bottom: 0; left: -105%; width: 100%; height: 100vh;  z-index: 200 ; transition-duration: 0.1s;  }
.ButterflySliderInner { position: absolute; top: 0; left: 0; height: 100vh ; width: 35%; padding: 10vh 5% 10vh ; overflow-y: scroll; background-color: rgb(255, 255, 255);  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); }









.NotificationAlertBox { position: fixed ; right: 0 ; width: 30rem ; margin: 2% ; min-height: 10rem ; background-color: rgb(255, 255, 255) ; padding: 2rem ; border-radius: 0.5rem ; z-index: 100 ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5 ) ; transition-duration: 0.3s; }
.NotificationAlertBoxOpen { top: 0 ; }
.NotificationAlertBoxClose { top: -100rem; }
.NotificationAlertBoxCloseButton { position: absolute ; top: 0.3rem ; right: 0.3rem ; width: 2.5rem; height: 2.5rem; border-radius: 5rem ; background-color: rgba(0, 0, 0, 0);  }








.NotificationBox0 { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, 0.6 ); z-index: 100; display: flex; justify-content: center; align-items: center; transition-duration: 0.3s;  }
.NotificationBox1 { height: fit-content; width: 60%; background-color: rgb(255, 255, 255); overflow-y: scroll; padding: 30px 10% 30px; border-radius: 10px ; transition-duration: 0.3s; }

.NotificationTitle { font-weight: 600 ; width: 100% ; font-size: 2rem ; margin: 0 0 4px ; }
.NotificationSubTitle { font-weight: 400 ; width: 100% ; font-size: 1.3rem ; }
.NotificationBtnBox { width: 100% ; display: flex; margin: 30px 0 0 ;  }

.NotificationBtnBase { float: left; min-width: fit-content; padding: 9px 14px 9px ; margin: 3px ; border-radius: 500px; display: flex; align-items: center; justify-content: center;  }
.NotificationBtn1 {  background-color: rgba(0, 0, 0, 0); font-weight: 600 ; border-radius: 500px; border: solid 0.1px rgba(0, 0, 0, 0.7) ; }
.NotificationBtn2 {  background-color: rgb(0, 0, 0); font-weight: 600 ; color: white; }




.ExitEditModeButton { position: fixed; top: 0 ; left: 50% ; transform: translate( -50% , 0 ); width: fit-content; background-color: rgb(200, 0, 0) ; color: white ; padding: 0.5rem 2rem 0.5rem ; border-radius: 0 0 0.7rem 0.7rem ; z-index: 2;  }




/* SliderHome */
.SliderHomeBase { position: fixed; top: 0; right: 0; height: 100vh ; width: 100%;  transition-duration: 0.2s; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }
.SliderHomeSection { position: relative; top: 0; right: 0 ; width: 100%; height: 100vh; }

.SliderHomeOpen {  z-index: 1000 ; opacity: 1 ; animation-delay: 0.3s ;  }
.SliderHomeClose {  display: none; }

.SliderHomeSectionInner { position: relative; float: left; height: 86vh ; margin: 7vh 0 7vh ; width: 100%; overflow: hidden; overflow-y: scroll; background-color: rgba(0, 255, 255, 0) ; padding: 2rem ;  }
.SliderHomeBtnBox { position: absolute ; top: 0; left: 0; height: fit-content; width: 100%; background-color: rgba(255, 255, 255, 0.69); }









.StudioThemeBox0 { position: relative; float: left; width: 100px ; height: 150px ; margin: 5px 1rem 50px ; display: block; border-radius: 7px ;  }
.StudioThemeBox { width: 100% ; height: 100% ; border-radius: 7px ; overflow: hidden ; display: flex ; justify-content: center; align-content: center ; box-shadow: 0 0 10px rgba(0, 0, 0, 0); }
.StudioThemeBoxImage { height: 100% ; }
.StudioThemeName { position: absolute; bottom: -1.9rem ; left: 0; width: 100% ; font-weight: 600 ; text-align: center ; }

.StudioThemeDarkGrey { background-color: rgb(40, 45, 50) ; }

.ActivateWebsiteTheme { box-shadow: 0 0 15px rgb(0, 0, 0); }








.SubscriptionLogBox0 { width: 100%; float: left; margin: 0 0 5px; border-bottom: solid 0.3px rgba(0, 0, 0, 0.2 ) ; background-color: rgba(0, 255, 255, 0); }





.UploadBtnLast { position: absolute; top: 0; left: 0; width: 100% ; height: 150px ; background-color: rgb(144, 144, 144); cursor: pointer; font-size: 1.5rem ; display: flex; align-items: center; justify-content: center; font: 600 ; }







/* CheckBox */
.containerBox0 { width: 100%; float: left;  height: fit-content ; margin-top: 7px ; }
.container { display: flex; position: relative; padding-left: 35px; height: 25px ; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  align-items: center; }
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: rgba(128, 128, 128, 0.4) ; border: solid 1px rgba(128, 128, 128, 0) ; border-radius: 3px ; }
.container:hover input ~ .checkmark { background-color: #ccc;   }
.container input:checked ~ .checkmark { background-color: #000000;   }
.checkmark:after { content: "";  position: absolute; display: none;   }
.container input:checked ~ .checkmark:after { display: block;   }
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }






.OnOffButtonBox { position: relative; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5 ) ; width: 45px; height: 12px; border-radius: 200px; transition-duration: 0.3s; float: right; }
.AutoLoginActivated { background-color: rgba(67, 124, 48, 0.8) ; display: flex; justify-content: right; align-items: center; }
.AutoLoginDeactivated { background-color: rgb(226, 226, 226) ;  display: flex; justify-content: left; align-items: center;  }

.OnOffButton {  width: 20px; height: 20px; border-radius: 200px; background-color: rgb(255, 255, 255); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) ; }










@media screen and ( max-width: 10800px ) {
    * {  font-size: 31px; }
}
@media screen and ( max-width: 9300px ) {
    * {  font-size: 30px; }
}
@media screen and ( max-width: 8800px ) {
    * {  font-size: 29px; }
}
@media screen and ( max-width: 8300px ) {
    * {  font-size: 28px; }
}
@media screen and ( max-width: 7800px ) {
    * {  font-size: 27px; }
}
@media screen and ( max-width: 7300px ) {
    * {  font-size: 26px; }
}
@media screen and ( max-width: 6800px ) {
    * {  font-size: 25px; }
}
@media screen and ( max-width: 6300px ) {
    * {  font-size: 24px; }
}
@media screen and ( max-width: 5800px ) {
    * {  font-size: 23px; }
}
@media screen and ( max-width: 5300px ) {
    * {  font-size: 22px; }
}
@media screen and ( max-width: 4800px ) {
    * {  font-size: 21px; }
}
@media screen and ( max-width: 4300px ) {
    * {  font-size: 20px; }
}
@media screen and ( max-width: 3800px ) {
    * {  font-size: 19px; }
}
@media screen and ( max-width: 3300px ) {
    * {  font-size: 18px; }
}

@media screen and ( max-width: 2800px ) {
    * {  font-size: 17px; }
}

@media screen and ( max-width: 2300px ) {
    * {  font-size: 16px; }
}

@media screen and ( max-width: 1800px ) {
    * {  font-size: 15px; }
}

@media screen and ( max-width: 1300px ) {
    * {  font-size: 14px; }
    .NavSliderInner2 {  width: 50%;  }
    .SliderGeneralBox {  width: 50%;  }
    .ButterflySliderInner{ width: 50%; }

    .FormSection { padding-left: 20%; padding-right: 20%; }
    .formBox0 { padding-left: 10%; padding-right: 10%; }
    .formTitle {  font-size: 4vh;   }

    /* .SliderHomeSection {  width: 70%;   } */

}

@media screen and ( max-width: 800px ) {
    * {  font-size: 13px; }

    /* h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem ; } */


    .sectionGeneral { padding-left: 3% ;  padding-right: 3% ; }

    /* .SliderHomeSection { width: 90%; } */


    .NavSliderInner2 {  width: 90%;  }
    .SliderGeneralBox {  width: 90%;   }
    .ButterflySliderInner{ width: 90%; }
    .MainNavBtn {  width: 100%;  }

    .formBox0 { padding-left: 0%; padding-right: 0%; }
    .FormSection { position: relative; float: left; padding-left: 7%; padding-right: 7%; width: 100%; }

    .BookmarkSection { padding-left:  2%; padding-right: 2%; }

    .pS10p { padding-left:  3%; padding-right: 3%; }
    .pS15p { padding-left:  5%; padding-right: 5%; }
    .pS25p { padding-left:  5%; padding-right: 5%; }
    .pS20p { padding-left:  5%; padding-right: 5%; }
    .pS30p { padding-left:  5%; padding-right: 5%; }

    .subTitle2 { font-size: 18px; }
    .SettingsPadding { padding: 0 0% 0; }

    .NotificationBox1 { width: 95%;  }

    .MoreSliderSidePadding { padding-left: 0; padding-right: 0 ; }

    .HideOnPhone { display: none ; }


    .oneTab { position: relative; float: left; width: 100%; }
    .twoTabs { position: relative;  float: left; width: 100%; }
    .threeTabs { position: relative; float: left; width: 100%;   }
    .fourTabs { position: relative; float: left; width: 100%;  }
    .fiveTabs { position: relative; float: left; width: 100%;  }
    .sixTabs { position: relative; float: left; width: 100%;  }
    .sevenTabs { position: relative; float: left; width: 100%;   }

    /* .BCommon { right: 8px ;  }
    .MBCommon { right: 8px ;  } */

    .Card1Box0 { width: 100% ; }

    .NotificationAlertBox { width: 96% ; }

}




@media screen and ( max-width: 500px ) {
}