/* General */
.HeadingDark { width: 100%;  font-size: 3rem; margin: 0px 0 7px ;  color: white ; font-weight: 100; }
.SubHeadingDark { float: left;  width: 100%; margin: 0 0 30px ; font-size: 1.3rem; font-weight: 400; background-color: rgba(240, 248, 255, 0); min-height: fit-content ;  }
.ParagraphDark { width: 100%; margin-bottom: 10px ; font-weight: 250 ; background-color: rgba(240, 248, 255, 0);  line-height: 1.6rem; white-space: pre-line ; text-align: left; }
.TextColourDark { color: rgb(255, 255, 255) ; font-weight: 200; }
.TextAccentColourDark { color: rgb(26, 96, 236) ; }
.TextAttentionColourDark { color: rgb(200, 45, 0) ; }
.BGColourDark {  background-color: rgb(18, 21, 24) ; }
.BGCardDark {  background-color: rgb(14, 17, 20) ; }
.BGAccentColourDark  { background-color: rgb(1, 4, 16) ; } 
.BGAccentColour2Dark  { background-color: rgb(255, 255, 255) ; }
.BGAccentColour3Dark  { background-color: rgb(0, 59, 142) ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7 ) ;  }
.BGAttentionColourDark  { background-color: rgb(200, 45, 0) ; color: white ; }
.BGHighlightColourDark { background-color: rgb(0, 107, 150) ; color: white ; }
.BGInputDark {  background-color: rgba(255, 255, 255, 0.05) ; }
.IconDark {  filter: invert( 100% ); }
.BorderColourDark  { border-color: rgba(118, 118, 118, 0.3); } 




.PlatformInputTitleDark { width: 100%; margin: 0 0 0px ; transition-duration: 0.2s; opacity: 0.7 ; color: white; font-size: 0.9rem ; }
.PlatformInputDark  { width: 100%;  background-color: rgba(0, 0, 0, 0) ; transition-duration: 0.2s; font-weight: 600; font-size: 1.2rem ; padding: 4px 0 4px ; color: white ; }
.PlatformTextAreaDark { width: 100%; height: 150px; padding: 10px 0 10px;  background-color: rgba(174, 42, 42, 0);  font-weight: 600; font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); }


.PlatformButtonForCardsBaseDark { float: left; min-width: 100px; padding: 9px 14px 9px ; margin: 3px ; border-radius: 7px;  display: flex; align-items: center; justify-content: center; }
.PlatformButtonForCardsDark { float: left; min-width: 80px; height: 35px; padding: 0 14px 0 ; margin: 3px ; background-color: rgba(0, 0, 0, 0.1); border: solid 0px black; border-radius: 7px;  display: flex; align-items: center; justify-content: center; }
.PlatformButtonForCardsDark:hover { background-color: rgba(0, 0, 0, 0.2); transition-duration: 0.5s ; }
.PlatformButtonForCardsWhiteDark { float: left; width: 100%; height: auto; padding: 9px 14px 9px ; margin: 3px 0 3px ; background-color: rgba(0, 0, 0, 0.7); border: solid 0px black; border-radius: 7px; color: rgb(255, 255, 255) ; display: flex; align-items: center; justify-content: left;  }
.PlatformButtonForCards2Dark { float: left; min-width: fit-content; padding: 0.7rem 1.7rem 0.7rem ; margin: 3px ; background-color: rgba(255, 255, 255, 0.5 ); border: solid 0px black; border-radius: 100rem ; display: flex; align-items: center; justify-content: center; font-weight: 600 ; cursor: pointer;  }





.PlatformButtonNormalDark { padding: 7px 14px 7px ; margin-left: 3px ; margin-right: 3px ; background-color: rgba(85, 85, 85, 0); border: solid 1px black; font-weight: 600; border-radius: 0px;  }
.PlatformButtonNormal2Dark { padding: 7px 14px 7px ; margin-left: 3px ; margin-right: 3px ; background-color: rgb(0, 0, 0); border: solid 1px rgba(0, 0, 0, 0); font-weight: 600; border-radius: 0px; color: rgb(255, 255, 255); }

.PlatformButton1Dark { padding: 7px 14px 7px ; margin: 0 3px 0; background-color: rgb(0, 0, 0); border: solid 1px rgb(0, 0, 0); font-weight: 400; border-radius: 0px; color: white; box-shadow: 0 0 12px rgba(255, 255, 255, 0) ; }
.PlatformButton2Dark { padding: 9px 20px 9px ; margin: 0 3px 0; background-color: rgb(0, 0, 0); border: solid 1px black; font-weight: 600; border-radius: 0px; color: white; }

.PlatformSubmitBtnDark { padding: 9px 20px 9px ;margin: 3px ; background-color: rgb(0, 0, 0); border: solid 1px black; font-weight: 600; border-radius: 0px; color: white; }

.PlatformButtonForCardsPublicDark { padding: 7px 14px 7px ; margin-left: 3px ; margin-right: 3px ; background-color: rgba(85, 85, 85, 0); border: solid 1px black; font-weight: 600; border-radius: 0px;  }



.ReadMoreDark { font-weight: 600; margin: 10px 0 0 ; cursor: pointer;  }

.LargeFontDark { font-size: 1.2rem; line-height: 1.7rem; white-space: pre-line ; font-weight: 400;  }
.SmallPhotoDark { max-height: 25vh; border-radius: 10px; }



/* File Upload */
.GlobalFileTypeObjectPhotoBoxDark { width: 100% ; height: 150px ; overflow: hidden; display: flex ; justify-content: center; align-content: center;  }
.GlobalFileTypeObjectPhotoDark { height: 100% ; }

.CardResponseBtnsIndicatorImageDark { height: 40% ; filter: invert( 100% );  }









/* Landing */
.AppLandingBgShadingDark { background-image: linear-gradient( 270deg , rgba(0, 0, 0, 0) , rgba(18, 21, 24, 0.8 ) , rgb(18, 21, 24) ); }

.AppLandingBox2Dark { background-image: linear-gradient( 270deg , rgba(156, 30, 30, 0) , rgb(18, 21, 24) ); }


.AppLandingBodyDark { float: left; width: 100%; background-color: rgba(0, 0, 0, 0); opacity: 0.8 ; line-height: 1.5rem ; }

.AppLandingButtonBoxDark { width: 100%; margin: 40px 0 0; display: flex; flex-wrap: wrap; }

.AppLandingCallToActBtnsDark { min-width: fit-content ; padding: 12px 20px 12px ; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; margin: 2px ; border-radius: 500px ; font-size: 1rem ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);  }















/* Contact */
.AppContactBox0Dark {  float: left;  width: 100%; height: fit-content; padding: 70px 15% 100px ; display: flex; justify-content: center ;  }

.AppContactBox1Dark { width: 500px; }

.AppContactSloganDark { width: 100%; position: relative;  }
.AppContactBodyDark { width: 100%; position: relative; height: 100px ; overflow: hidden; }







/* Footer */

.AppFooterCallToActionButtonDark { padding: 12px 30px 12px ; margin: 40px 5px 40px; background-color: rgba(85, 85, 85, 0); border: solid 1px black; font-weight: 600; border-radius: 100px; }



















/* Store */
.AppProductSectionDark { float: left; width: 100%; padding: 70px 10% 100px ; display: flex; justify-content: center; flex-wrap: wrap ;  }

.AppProductBox0DisplayDark { float: left; position: relative ; width: 100% ; height: fit-content ; background-color: rgba(137, 43, 226, 0) ; }

.AppProductCodeDark { float: left;  width: 100% ; padding: 10px 0 100px ; background-color: rgba(0, 0, 0, 0); } 

.AppProductTitleDark { width: 100%; font-weight: 600 ; font-size: 1.4rem ; padding: 0 0 0 ; margin: 7px 0 7px ; background-color: rgba(137, 20, 20, 0); text-align: left;  }

/* .AppProductMessageDark { min-width: 100% ; max-width: 100% ; min-height: 4.7rem ; max-height: 4.7rem ; padding: 5px 0 5px ;  overflow-y: hidden ; }  */
.AppProductMessageDark { float: left; width: 100%; height: fit-content ; padding: 5px 0 5px ; overflow-y: hidden ; background-color: rgba(0, 0, 0, 0); line-height: 1.5rem ; color: rgba(255, 255, 255, 0.8) ; font-weight: 300 ; } 

.AppProductButtonBoxPublicDark { position: relative; width: 100% ; padding: 5px 0px 0  ; display: flex; justify-content: right ; }


.AppProductPriceBoxDark { float: left; width: 100% ; margin: 7px 0 0 ; padding: 0 25px 0 ; background-color: rgba(224, 68, 68, 0); }
.AppProductPriceBox2Dark { float: left;  width: 100% ; margin: 0 0 15px ; background-color: rgba(22, 237, 237, 0); }
.AppProductPriceDark { color: rgb(255, 255, 255); font-size: 1.2rem; margin-right: 5px ;  background-color: rgba(59, 62, 138, 0); }
.AppProductPrice2Dark {  color: rgb(255, 255, 255); margin-bottom: 10px ; opacity: 0.7 ; font-weight: 200; font-size: 0.8rem; background-color: rgba(151, 32, 74, 0); }

.AppProductFWDark { float: left; width: 100% ; padding: 8px 0 8px ; background-color: rgba(0, 0, 255, 0); color: white; }
.AppProductHeadingsDark { font-weight: 600 ; margin: 30px 0 10px ; width: 100% ; float: left ; color: rgb(255, 255, 255); }

.AppProductDisplayTopDark { position: absolute; top: 0; left: 0; display: flex; align-items: center; flex-direction: row; height: 30px; width: 50% ; background-color: rgba(59, 170, 49, 0) ; padding: 0 10px 0 ; margin: 5px 0 5px ;  }
.AppProductDisplayTypeDark { height: 100%; width: 100% ; display: flex ; align-items: center ; background-color: rgba(154, 196, 150, 0) ; padding: 0 0 0 ; margin: 0 0 15px ;  text-transform: capitalize; color: white ; }
.AppProductDisplayLogoBoxDark { width: 35px ; height: 30px; overflow: hidden; display: flex; justify-content: center; align-items: center ; border-radius: 50% ; }
.AppProductDisplayLogoDark { height: 50% ; }


.AppProductDisplayDesciptionDark { height: 3.4rem; width: 100% ; background-color: rgba(84, 188, 74, 0) ;  overflow: hidden ; font-size: 0.8rem ; margin: 25px 0 25px ; opacity: 0.4 ; text-justify: inter-word; line-height: 1.1rem ; color: rgba(255, 255, 255, 0.8); font-weight: 100 ; }
.AppProductDisplayPriceBoxDark { display: flex; flex-direction: row; justify-items: left ; align-content: center ; margin: 0 0 40px ; width: 100% ; }
.AppProductDisplayPriceBox2Dark { display: flex; flex-direction: row; justify-items: left ; align-content: center ; margin: 0 0 15px ; width: 100% ; }
.AppProductDisplayPriceDark { font-size: 1.2rem ; margin-right: 5px ; color: rgb(255, 255, 255) ;  }
.AppProductDisplayTypicalDark {  margin-right: 5px ; color: white; background-color: rgba(200, 25, 25, 0); }



/* StoreItem Slider */
.AppStoreItemSliderDark { position: absolute; top: 0; right: 0; height: 100%;  border-radius: 10px; box-shadow: -5px 0 7px rgba(0, 0, 0, 0.3) ; transition-duration: 0.2s ; z-index: 1; }
.AppStoreItemSliderOpenDark { width: 80% ; }
.AppStoreItemSliderCloseDark { width: 0%;  }
.AppStoreItemSliderInnerDark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-delay: 1s ; background-color: rgba(0, 0, 255, 0); padding: 50px 10px 10px ; overflow-y: scroll; }














/* Website Navigation*/
.NavigationSliderBtnsBox01 { background-color: rgb(0, 0, 0);  }
.NavigationSliderBtnsBox02 { background-color: rgba(0, 0, 0, 0);  }

/* .NavigationSliderBtnsIconBoxDark { display: none; } */


.NavigationSliderBtnsDescriptionDark { width: 100%; margin-top: 2px ; color: rgb(255, 255, 255); opacity: 0.3 ; padding-left: 32px ; font-weight: 200 ; }
.NavigationSliderBtnsDescription2Dark { width: 100%; margin-top: 2px ; color: rgb(255, 255, 255); opacity: 0.3 ; padding-left: 0 ; font-weight: 200 ; }
.NavigationSliderBtnsIndicatorDark { position: absolute; top: 10px ; right: 15px;  color: rgb(200, 0, 0); width: fit-content ; font-weight: 800 ; background-color: rgba(45, 196, 31, 0); text-align: right; }


.NavigationSliderBtnsIndicator2Dark { position: absolute; top: 0 ; left: 0; padding: 0 0 3px; width: 100% ; color: rgb(200, 0, 0); font-weight: 800 ; background-color: rgba(193, 200, 0, 0); text-align: center; font-size: 0.7rem ; }




















/* Connections */
.AppConnectionsBoxDark { position: relative; width: 150px; height: fit-content; padding: 30px 10px 10px ; margin: 0 1% 9vh; border-radius: 10px;  display: flex; align-items: center; flex-direction: column ; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3) ; }


.AppConnectionsImageBoxDark { float: left; width: 70px; height: 70px; overflow: hidden;  display: flex; justify-content: center; align-items: center; border-radius: 50% ; cursor: pointer; }
.AppConnectionsImageDark { height: 100% ; }

.AppConnectionsTextBoxDark { float: left; width: 100%; display: flex ; flex-direction: column ; justify-content: center; align-items: center;  margin: 15px 0 10px ; background-color: rgba(0, 255, 255, 0); }
.AppConnectionsButtonBoxDark { display: flex; align-items: center; justify-content: center; margin: 7px 0 0 ; background-color: brown; }
.AppConnectionsTextTitleDark { float: left; font-size: 1.1rem; padding: 0 0 0.1rem ; font-weight: 600; text-transform: capitalize; text-align: center; color: white; }
.AppConnectionsCountryDark { float: left; text-align: center; color: white; font-weight: 100 ; }

.ConnectionButtonsBox0Dark { position: relative; z-index: 20 ; }
.ConnectionButtonsDark { position: absolute; top: 0; right: 0; width: 180px ; height: fit-content; padding: 10px; background-color: white; box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); z-index: 1; border-radius: 10px ; color: white;  }


.AppConnectionsSliderDark { position: absolute; top: 0; right: 0; width: 100%; height: 100%;  border-radius: 10px; box-shadow: -5px 0 7px rgba(0, 0, 0, 0.3) ; transition-duration: 0.2s ; }
.AppConnectionsSliderOpenDark { width: 100% ; }
.AppConnectionsSliderCloseDark { width: 0%;  }
.AppConnectionsSliderInnerDark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-delay: 1s ; background-color: rgba(0, 0, 255, 0); padding: 50px 10px 10px ; overflow-y: scroll; }






/* CheckBox */
/* .CheckmarkNameDark { color: white ;  } */






.PlatformStatsSectionDark { float: left; width: 100%; height: fit-content; padding: 100px 15% 100px ; background-color: rgb(18, 21, 24) ; display: flex ; justify-content: center;  }
.PlatformStatsImageDark  { height: 100% ; margin: 0; filter: invert( 100% ); opacity: 0.8; }
.PlatformStatsTitleDark  { font-size: 1rem ; margin: 0.7rem 0 0 ; text-align: center; color: white; }
.PlatformStatsCounterDark  { font-size: 2.5rem ; margin: 0; color: white; opacity: 0.8; }
































@media screen and ( max-width: 1700px ) {
    /* .AppLandingBox2Dark  { width: 50% ;  } */
}


@media screen and ( max-width: 1200px ) {       
    /* Landing */
    .AppLandingBox2Dark  { width: 70% ;  }



    /* Website Navigation Slider*/
}



@media screen and ( max-width: 800px ) {
    /* General */
    .HeadingDark { width: 100%;  font-size: 2.5rem;  }



    /* Landing */
    .AppLandingBox2Dark  { background-image: linear-gradient( 180deg , rgba(0, 0, 0, 0) , rgb(18, 21, 24) ); }
    .AppLandingSloganDark{ font-size: 2.5rem ; }
    .AppLandingButtonBoxDark { margin: 20px 0 0;  }

    .AppLandingBgShadingDark { background-image: linear-gradient( 180deg , rgba(0, 0, 0, 0) , rgba(18, 21, 24, 0.9 ) , rgb(18, 21, 24) , rgb(18, 21, 24) ); }


    

    /* About */
    .AppAboutBox2Dark { padding-right: 10% ; padding-left: 10% ; width: 95%; }
    .AppAboutBgBoxDark { width: 100% ;  }


    /* Contact */



    /* Store */
    .AppProductColumnsDark {  width: 100%; }
    .ViewStoreItemDetailsDark { padding-left: 5%; padding-right: 5%; justify-content: center; }
    .ViewStoreItemDetailsDark { padding-left: 5% ; padding-right: 5% ; }
    .AppProductSectionEditDark { padding-left: 5% ; padding-right: 5% ; }
    .AppProductSectionDark { padding-left: 5%; padding-right: 5% ; }

}

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