/* Common Grid Function*/
.gridbutton {
  grid-area: button;
}

/* dashboard */
.subGridMonth {
  grid-area: monthOption;
}
.subGridYear {
  grid-area: yearOption;
}

.v17mainGridTime {
  grid-area: selectorMonth;
  display: grid;
}

.v17mainGridCustomization{
  grid-area: customizeHeader;
}

.v17mainGridTitle {
  grid-area: titlePage;
}

.v17mainGridTitle2 {
  grid-area: titlePage2;
}

.v17mainGridTitle3 {
  grid-area: titlePage3;
}

.v17mainGridSlider {
  grid-area: slideDetails;
}

.v17mainGridCampaign {
  grid-area: listCampaign;
}

.v17mainGridPods {
  grid-area: slidePods;
}

.v17mainGridGetOrders {
  grid-area: slideGetOrders;
}

.v17mainGridUser {
  grid-area: numUser;
}

.v17mainGridUserPoint {
  grid-area: numUserPoint;
}

.v17mainGridStatistic {
  grid-area: graphUser;
}

.v17mainGridSales {
  grid-area: salesTop;
}

.v17mainGridUStats {
  grid-area: userGrowth;
}

.v17dashboardGrid {
  grid-template-areas:
    "...... customizeHeader ......"
    "...... titlePage ......"
    "...... selectorMonth ......"
    "...... titlePage2 ......"
    "...... slideDetails ......"
    "...... numUser ......"
    "...... listCampaign ......"
    "...... numUserPoint ......"
    "...... graphUser ......"
    "...... salesTop ......"
    "...... userGrowth ......"
    "...... titlePage3 ......"
    "...... slidePods ......"
    "...... slideGetOrders ......";
}

/* customization service */

.v17customizationTitle{
  grid-area: customizationTitle;
}

.v17customizationPlanDesktop{
  grid-area: customizationPlan;
  display: grid;
}

.v17customizationPlanPhone{
  grid-area: customizationPlan;
  display: grid;
}

.v17customizationFooter{
  grid-area: customizationFooter;
}

.v17customizationGrid{
  grid-template-areas: 
  "..... customizationTitle ....."
  "..... customizationPlan ....."
  "..... customizationFooter .....";
}

/* homepage */

.v17subImgPost {
  grid-area: imgPost;
}

.v17subPostBox {
  grid-area: postBox;
}

.v17postGrid {
  grid-area: selectorPost;
  display: grid;
}

.v17subPicture {
  grid-area: pictureOption;
}

.v17subVideo {
  grid-area: videoOption;
}

.v17subDocument {
  grid-area: documentOption;
}

.v17postGrid2 {
  grid-area: selectorPost2;
  display: grid;
}

.v17subPost1 {
  grid-area: subPost1;
}

.v17subPost2 {
  grid-area: subPost2;
}

.v17subPost3 {
  grid-area: subPost3;
}

.v17postGrid3 {
  grid-area: selectorPost3;
  display: grid;
}

.v17postGrid4 {
  grid-area: selectorPost4;
  display: grid;
}

.v17postGrid5 {
  grid-area: selectorPost5;
  display: grid;
}

.v17hofSlide {
  grid-area: hofSlide;
}

.v17hofPost {
  grid-area: hofPost;
}

.v17hofPost2 {
  grid-area: hofPost2;
}

.v17homepageGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... hofSlide ......"
    "...... titlePage2 ......"
    "...... hofPost ......"
    "...... selectorPost ......"
    "...... hofPost2 ......";
}

/* theme page */
.v17paletteCard {
  grid-area: paletteCard;
}

.v17paletteColor {
  grid-area: paletteColor;
  display: grid;
}

.v17leftArrow {
  grid-area: leftArrow;
}

.v17colorSet {
  grid-area: colorSet;
}

.v17rightArrow {
  grid-area: rightArrow;
}

.v17previewTheme {
  grid-area: previewTheme;
  display: grid;
}

.v17previewButton {
  grid-area: previewButton;
}

.v17previewImg {
  grid-area: previewImg;
}

.v17saveTheme {
  grid-area: saveTheme;
}

.v17themecolorGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... paletteCard ......"
    "...... paletteColor ......"
    "...... previewTheme ......"
    "...... saveTheme ......";
}

/* My Rewards */
.v17monthlySubscription {
  grid-area: monthlySubscription;
}

.v17subscriptionDetails {
  grid-area: subscriptionDetails;
  display: grid;
}

.v17imgSubscription {
  grid-area: imgSubscription;
}

.v17packageDetails {
  grid-area: packageDetails;
}

.v17buttonSubscription {
  grid-area: buttonSubscription;
}

.v17myReward {
  grid-area: myRewards;
}

.v17myrewardDetails {
  grid-area: myrewardDetails;
}

.v17speakerDetails {
  grid-area: speakerDetails;
  display: grid;
}

.v17speakerImg {
  grid-area: speakerImg;
}

.v17speakerAbout {
  grid-area: speakerAbout;
}

.v17speakerLine {
  grid-area: speakerLine;
}

.v17speakerValidity {
  grid-area: speakerValidity;
}

.v17buttonReward {
  grid-area: buttonReward;
  display: grid;
}

.v17buttonBack {
  grid-area: buttonBack;
}

.v17buttonRedeemnow {
  grid-area: buttonRedeemnow;
}

.v17popupReward {
  grid-area: popupReward;
  display: grid;
}

.v17popupRewardA {
  grid-area: popupRewardA;
}

.v17popupRewardB {
  grid-area: popupRewardB;
}

.v17myrewardsGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... monthlySubscription ......"
    "...... subscriptionDetails ......"
    "...... titlePage2 ......"
    "...... myRewards ......"
    "...... myrewardDetails ......"
    "...... speakerDetails ......"
    "...... buttonReward ......"
    "...... popupReward ......";
}
/*-------------ADD ON PACKAGE------------*/
.v17litesubscriptionsGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... monthlySubscription ......"
    "...... subscriptionDetails ......"
    "...... titlePage2 ......"
    "...... myRewards ......"
    "...... buttoncheckoutgrid ......";
}

.v17addondetails {
  grid-template-areas:
      "...... myrewardDetails ......"
      "...... speakerDetails ......"
      "...... buttonReward ......"
      "...... popupReward ......";
}

.v17addonpackagedetails {
  grid-area: speakerDetails;
  display: grid;
}

.buttoncheckoutgrid {
  grid-area: buttoncheckoutgrid;
}
/* ---------------- QR Redeem Reward -------------------- */
.v17passwordReward {
  grid-area: passwordReward;
}

.v17passwordUser {
  grid-area: passwordUser;
  display: grid;
}

.v17passwordA {
  grid-area: passwordA;
}

.v17passwordB {
  grid-area: passwordB;
}

.v17pwButton {
  grid-area: pwButton;
}

.v17tableReward {
  grid-area: tableReward;
}

.v17rewardCompany {
  grid-area: rewardCompany;
  display: grid;
}

.v17rewardCompanyA {
  grid-area: rewardCompanyA;
}

.v17rewardCompanyB {
  grid-area: rewardCompanyB;
}

.v17rewardPackage {
  grid-area: rewardPackage;
  display: grid;
}

.v17rewardPackageA {
  grid-area: rewardPackageA;
}

.v17rewardPackageB {
  grid-area: rewardPackageB;
}

.v17rewardDate {
  grid-area: rewardDate;
  display: grid;
}

.v17rewardDateA {
  grid-area: rewardDateA;
}

.v17rewardDateB {
  grid-area: rewardDateB;
}

.v17rewardStatus {
  grid-area: rewardStatus;
  display: grid;
}

.v17rewardStatusA {
  grid-area: rewardStatusA;
}

.v17rewardStatusB {
  grid-area: rewardStatusB;
}

.v17rewardButton {
  grid-area: rewardButton;
}

.v17qrrewardGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... passwordReward ......"
    "...... passwordUser ......"
    "...... pwButton ......"
    "...... tableReward ......"
    "...... rewardCompany ......"
    "...... rewardPackage ......"
    "...... rewardDate ......"
    "...... rewardStatus ......"
    "...... rewardButton ......";
}

/* ------------- Feedback Page -------------- */
.v17feedbackCard {
  grid-area: feedbackCard;
}

.v17feedbackGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... feedbackCard ......";
}

/* ------------- My Shop -------------- */
.v17categorySwiper {
  grid-area: categorySwiper;
}

.v17productDetails {
  grid-area: productDetails;
}

.v17buttongrid {
  grid-area: buttonaddtocart;
}

.v17sortingDropdown {
  grid-area: sortingDropdown;
}

.v17mainGrid4columns {
  grid-area: filter4columns;
  display: grid;
} 

.Filter1 {
  grid-area: Filter1;
}

.Filter2 {
  grid-area: Filter2;
}

.variation1 {
  grid-area: variation1;
}

.variation2 {
  grid-area: variation2;
}

.variation3 {
  grid-area: variation3;
}

.v17catalogueGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... categorySwiper ......"
    "...... sortingDropdown ......"
    /* "...... filter4columns......" */
    "...... myRewards ......"
    "...... productDetails ......"
    "...... buttonaddtocart ......";
}

/* ------------- Delivery Option Page -------------- */
.v17deliveryGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... deliveryChoice ......"
    "...... deliveryCard ......"
    "...... buttonDelivery ......"
    "...... addressBook ......";
}

.v17deliveryChoice {
  grid-area: deliveryChoice;
}

.v17deliveryCard {
  grid-area: deliveryCard;
}

.Information {
  grid-area: Information;
}

.AddressTitle {
  grid-area: AddressTitle;
}

.AddressName {
  grid-area: AddressName;
}

.Address1 {
  grid-area: Address1;
}

.Address2 {
  grid-area: Address2;
}

.AddressPostcode {
  grid-area: AddressPostcode;
}

.AddressCountry {
  grid-area: AddressCountry;
}

.AddressPhone {
  grid-area: AddressPhone;
}

.AddressNotes {
  grid-area: AddressNotes;
}

.v17buttonDelivery {
  grid-area: buttonDelivery;
}

/* ------------- Payment Page -------------- */
.v17paymentMethod {
  grid-area: paymentMethod;
}

.v17deliveryForm {
  grid-area: deliveryForm;
  display: grid;
}

.v17titleField {
  grid-area: titleField;
}

.v17inputField {
  grid-area: inputField;
}

.v17addressBook {
  grid-area: addressBook;
  display: grid;
}

.selectdelivery {
  grid-area: selectdelivery;
}

.deliveryDetails {
  grid-area: deliveryDetails;
}

.v17paymentGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... paymentMethod ......";
}

/* ------------- Order Summary Page -------------- */
.v17cartProductList {
  grid-area: cartProductList;
}

.v17unitPrice {
  grid-area: unitPrice;
}

.v17productStock {
  grid-area: productStock;
}

.v17productQty {
  grid-area: productQty;
}

.v17total {
  grid-area: v17total;
}

.v17cartProductDetails {
  grid-area: cartProductDetails;
  display: grid;
}

.imageProduct {
  grid-area: imageProduct;
}

.ProductDetails {
  grid-area: ProductDetails;
}

.v17cartImg {
  grid-area: cartImg;
  display:grid;
}

.v17cartDetails {
  grid-area: cartDetails;
}

.v17cartDelete {
  grid-area: v17cartDelete;
}

.CardSummaryOrder {
  grid-area: CardSummaryOrder;
}

.BranchOrder {
  grid-area: BranchOrder;
}

.DeliveryDetails {
  grid-area: DeliveryDetails; 
  display: grid;
}

.gridOrderSummary {
  grid-template-areas:
    "...... titlePage ......"
    "...... BranchOrder ......"
    "...... DeliveryDetails ......"
    "...... CardSummaryOrder ......"
    "...... cartProductList ......"
    "...... shippingMethod ......"
    "...... PaymentMethod ......"
    "...... summaryOrder ......";
}

.shippingMethod {
  grid-area: shippingMethod;
}

.shippingMethod {
  grid-area: shippingMethod;
}

.PaymentMethod {
  grid-area: PaymentMethod;
}

.summaryOrder {
  grid-area: summaryOrder;
}

/*----------- Forget & Reset Password page ----------*/
.v17PasswordCard {
  grid-area: PasswordCard;
}

.v17passwordGrid {
  grid-template-areas:
    "...... PasswordCard ......";
}

/* ------------- Order Invoice Page -------------- */

.v17proceedPaymentTitle {
  grid-area: proceedPaymentTitle;
}

.v17proceedPaymentCancel {
  grid-area: proceedPaymentCancel;
}

.v17proceedPaymentSubmit {
  grid-area: proceedPaymentSubmit;
}

.v17proceedPaymentButtons {
  grid-area: proceedPaymentButtons;
  display: grid;
}

.v17proceedPaymentGrid {
  grid-template-areas:
    "proceedPaymentTitle"
    "proceedPaymentButtons";
  display: grid;
}

/* ------------- Setup Api -------------- */
.v17setupApiTitle {
  grid-area: title;
}

.v17setupApiDesc {
  grid-area: desc;
}

.v17mainSetupApiTitle{
  grid-area: mainTitle;
  display:grid;
}

.v17settingCoutierCard {
  grid-area: settingCoutierCard;
}

.v17settingCoutierGrid {
  grid-template-areas:
    "...... bannerPopUp ......"
    "...... mainTitle ......"
    "...... menuCourier ......"
    "...... settingCoutierCard ......";
}

.v17setupApiCard {
  grid-area: setupApiCard;
}

.v17setupApiGrid {
  grid-template-areas:
    "...... mainTitle ......"
    "...... setupApiCard ......";
}

/* -------------SYSTEM LOCK PAGE--------------- */
.gridLockPage {
  grid-template-areas:
    "...... ...... ....."
    "...... lockPicture ......"
    "...... PaymentRedirection ......";
}

.lockPicture {
  grid-area: lockPicture;
}

.PaymentRedirection {
  grid-area: PaymentRedirection;
}

/* --------STATISTIC----------- */
.v17statisticGrid {
  grid-template-areas:
    "...... ...... ....."
    "...... titleandFilter ......"
    "...... fourboxgrid ......"
    "...... threeboxgrid ......"
    "...... graphboxgrid ......";
}

.titleandFilter {
  grid-area: titleandFilter;
}

.fourboxgrid {
  grid-area: fourboxgrid;
  display:grid;
}

.threeboxgrid {
  grid-area: threeboxgrid;
  display:grid;
}

.graphboxgrid {
  grid-area: graphboxgrid;
}

/* ------------SETTING COMBO-------------  */
.v17comboGrid{
  grid-template-areas:
    "...... titlePage ......"
    "...... combomessagealert ......"
    "...... titleandFilter ......";
}

.v17creditGrid{
  grid-template-areas:
    "...... titlePage ......"
    "...... combomessagealert ......"
    "...... titleandFilter ......";
}

.combomessagealert{
  grid-area: combomessagealert;
}
.tablecampaign {
  grid-area: tablecampaign;
}
.formcreate {
  grid-area: formcreate;
}
/* --------Registration Link----------- */
.registrationLinkGrid {
  grid-template-areas:
    "...... registerLink ......";
}

.registerLink{
  grid-area: registerLink;
}

.registrationFormGrid {
  grid-template-areas:
  "...... registerForm ......";
}

.registerForm{
  grid-area: registerForm;
}

.registrationSuccessGrid {
  grid-template-areas:
  "...... registerSuccess ......";
}

.registerSuccess{
  grid-area: registerSuccess;
}
/*----------GOSTORE AGENT DATABASE---------*/
.v17storesummaryGrid {
  grid-template-areas:
    "...... ...... ....."
    "...... formcreate ......"
    "...... titleandFilter ......"
    "...... summarygostore ......"
    "...... graphboxgrid ......"
    "...... tablecampaign ......";
}

.summarygostore {
  grid-area: summarygostore;
  display:grid;
}

.fiveboxgrid {
  display:grid;
}

.tenboxgrid {
  display:grid;
}

/*----------GOSTORE SUBSCRIPTION---------*/
.v17storesubscriptionGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... titleandFilter ......"
    "...... spaceBetween ....."
    "...... titlePage2 ......"
    "...... summarysubscription ......";
}

.summarysubscription {
  grid-area: summarysubscription;
}

.spaceBetween {
  grid-area: spaceBetween;
}

/*----------GOSTORE INTRODUCTION---------*/
.v17storeintroductionGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... introductiondetails ......";
}

.introductiondetails {
  grid-area: introductiondetails;
}

/*----------GOSTORE Shipping---------*/
.v17storeshippingGrid {
  grid-template-areas:
    "...... titlePage ......"
    "...... detailsShipping ......";
}

.detailsShipping {
  grid-area: detailsShipping;
}