/* Class Link for Font Family */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Font Syle Classes for Poppins */
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* End Poppins */



/* variables Start */


/* Normal Theme Colors + Card Borders + Card Padding, etc */
:root {
  /* All Normal Colors */
  --clr-primary: #7380ec;
  --clr-danger: #ff7782;
  --clr-success: #41f1b6;
  --clr-white: #fff;
  --clr-info-dark: #7d8da1;
  --clr-info-light: #dce1eb;
  --clr-dark: #363949;
  --clr-warnig: #ff4edc;
  --clr-light: rgba(132, 139, 200, 0.18);
  --clr-primary-variant: #111e88;
  --clr-dark-variant: #677483;
  --clr-color-background: #f6f6f9;
  --clr-background-color-cards: transparent;
  --clr-background-color-main-cards-customer-cards-anchor: aqua;
  --clr-background-color-main-cards-customer-cards-span1: #ff7782;
  --clr-background-color-main-cards-customer-cards-span2: coral;
  --clr-background-color-main-cards-customer-cards-span3: #41f1b6;
  --clr-right-top-theme-toggler-span-active: white;
  /* --clr-color-hover-cards: black; */
  
  /* Border-Radius */
  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 0.8rem;
  --border-radius-3: 1.2rem;
  --border-radius-main-cards-customer-cards-span: 50%;

  /* Padding */
  --card-padding: 1rem;
  --padding-1: 1.2rem;
  --padding-2:0.4rem;
  --padding-main-date:.5rem 1.6rem;
  --padding-main-cards-customer-cards-span: .5rem;
  --padding-main-cards-customer-cards-customer-orders-anchor: 0.5rem;

  /* Margins */
  --margin-left-top-sidebar: 2rem;
  --margin-left-top-sidebar-hover: 1rem;
  --margin-top: 1.4rem;
  --margin-top-main-date: 1rem;
  --margin-top-main-order-book-table: 2rem;
  --margin-top-right-recent-updates: 1rem;
  --margin-left-right-recent-updates: -20px;
  --margin-bottom-right-recent-updates-updates-update: 1rem;

  /* Box Shadow */
  --box-shadow: 0 2rem 3rem var(--clr-light);

  /* ------------------------------------ */
  /* Font */

  /* Weight */
  --h3-top-sidebar-font-weight: 400;
  
  /* Size */
  --span-icon-top-sidebar-font-size:1.6rem;
  --main-cards-customer-cards-span-font-size: 2rem;
  --right-top-theme-toggler-span-font-size: 1.2rem;

  /* ---------------------------------- */


  /* Height */
  --height-top-sidebar-anchor: 3.2rem;
  --height-right-top-theme-toggler: 1.6rem;
  --height-right-top-theme-toggler-span: 100%;

  /* Width */
  --width-right-top-theme-toggler: 4.2rem;
  --width-right-top-theme-toggler-span: 50%;

  /* Gap */
  --body-grid-gap: 1.8rem;
  --gap-top: 1rem;
  --gap-main-cards:1.6rem;
  --gap-main-cards-customer-cards-customer-orders-anchor: 1rem;
  --gap-right-top: 2rem;
  --gap-right-top-profile: 2rem;
  --gap-right-recent-updates-updates-update: 1rem;

  /* Transitions */
  --transition-top-sidebar-anchor: all .4s ease;/* This one is for both anchor tag and with in it icon too*/
  --transition-main-cards: all .3s ease;
  --transition-main-table: all .3s ease;
  --transition-right-recent-updates-updates: all .3s ease;

  /* Grid Template Columns */
  --grid-template-columns-cards: repeat(3, 1fr);
  --grid-template-columns-recent-updates-updates-update: 2.6rem auto;

  /* -------------- Media Query ----------------------- */

  /* Tablet */
  /* Width */
  --media-query-tablet-width-container: 94%;
  --media-query-tablet-width-main-cards-customer-cards-customer-orders-span: 50%;
  /* Height */
  ---media-query-tablet-height-aside-sidebar: 100vh;
  /* grid Template Columns */
  --media-query-tablet-grid-template-columns-container: 7rem auto 14rem;
  --media-query-tablet-grid-template-columns-main-cards: repeat(1, 1fr);
  --media-query-tablet-grid-templet-columns-main-cards-customer-cards-customer-orders-span: repeat(3, 3fr);
  /* Bottom */
  --media-query-tablet-bottom-aside-sidebar-a-nth-last-child2: 10rem;
  --media-query-tablet-bottom-aside-sidebar-a-last-child: 5rem;

  /* Tablet Ends */


  /* Mobile */
  /* Width */
  --media-query-mobile-width-container: 100%;
  --media-query-mobile-width-aside: 18rem;
  --media-query-mobile-width-aside-sidebar-anchor: 100%;
  --media-query-mobile-width-main-date: fit-content;
  --media-query-mobile-width-right-top: 100%;
  /* Height */
  --media-query-mobile-height-aside-sidebar-anchor: 3.4rem;
  --media-query-mobile-height-right-top: 4.6rem;
  /* Grid template Columns */
  --media-query-mobile-grid-template-columns-container: repeat(1, 1fr);
  --media-query-mobile-grid-template-columns-main-cards: repeat(1, 1fr);
  /* gap */
  --media-query-mobile-gap-main-cards: 1.6rem;
  /* Z-Index */
  --media-query-mobile-z-index-aside: 3;
  --media-query-mobile-z-index-right-top: 2;
  /* left */
  --media-query-mobile-left-aside: -100px;
  --media-query-mobile-left-right-top: 0;
  --media-query-mobile-left-right-top-profile: 70%;
  /* right */
  --media-query-mobile-right-aside-top-close: 0;
  /* top */
  --media-query-mobile-top-right-top: 0;
  /* margin */
  --media-query-mobile-margin-right-aside-top-close: 30px;
  --media-query-mobile-margin-left-main-date: 35%;
  --media-query-mobile-margin-right-top: 0;
  --media-query-mobile-margin-main-order-book-table: 0 auto;
  --media-query-mobile-margin-left-right-recent-updates: 5px;
  /* Padding */
  --media-query-mobile-padding-right-top: .8rem;
  --media-query-mobile-padding-main-cards: 40px;
  --media-query-mobile-padding-main-order-book-table: 30px;
  --media-query-mobile-padding-right-recent-updates: 30px; 
  /* Box Shadow */
  --media-query-mobile-box-shadow-right-top: 0 1rem 1rem var(--box-shadow);

  /* Font */
  /* Size */
  --media-query-mobile-font-size-aside-top-close: 35px;
  /* Font End */

  /* Mobile Ends */

  /* --------------End Media Query-------------------  */

}

/* End of Normal Variables */

/* dark theme  Starts */
.dark-theme-variables {
  /* All Dark Theme Colors */
  --clr-color-background: #181a1e;
  --clr-white: #202528;
  --clr-light: rgba(0, 0, 0, 0.4);
  --clr-dark: #edeffd;
  --clr-dark-variant: #677483;
  --box-shadow: 0 2rem 3rem var(--clr-light);
  /* --clr-color-hover-cards: white; */
}
/* Dark Theme variable Ends */


/* Pre-creation of few classes that can be used in future and to make them consistant */

/* Anchor Tag */
a {
  color: var(--clr-dark);
}
/* Anchor Tag Ends */

/* Heading 1 Start */
h1 {
  font-weight: 800;
  font-size: 1.8rem;
}
/* Heading 1 End */

/* Heading 2 Start */
h2 {
  font-size: 1.4rem;
}
/* Heading 2 End */

/* Heading 3 Start */
h3 {
  font-size: 0.87rem;
}
/* Heading 3 End */

/* Heading 4 Start */
h4 {
  font-size: 0.8rem;
}
/* Heading 4 End */


/* Heading 5 Start */
h5 {
  font-size: 0.77rem;
}
/* Heading 5 End */

/* Small Start */
small {
  font-size: 0.75rem;
}
/* Small End */

/* Paragraph Start */
p {
  color: var(--clr-dark-variant);
}
/* Paragraph End */

/* Bold Start */ 
b {
  color: var(--clr-dark);
}
/* Bold End */

/* Primary Colour */
.primary {
  color: var(--clr-primary);
}
/* Darker version of primary colour */
.primary-dark {
  color: var(--clr-primary-variant-lighter);
}
/* For Success Colour */
.success {
  color: var(--clr-success);
}
/* For Danger colour */
.danger {
  color: var(--clr-danger);
}
/* For Warning Colour */
.warning {
  color: var(--clr-warning);
}
/* Text Muted */
.text-muted {
  color: var(--clr-info-dark);
}
 /* Profile Photo */
 .profile-photo img{
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  overflow: hidden;
}

/* Pre-created classes End */

/* 
  Random
  ********************** Side Notes ****************************

  
  /*Must Come back to This : 

  ...........For now the aside .top has height of auto come back and experiment with this.....
  ...........for now the aside .sidebar has height of auto come back and experiment with this.............
  
  
  
  /* Width and Height Values

  1. min-content : Ensures that an element will never be smaller than the content inside it
  2. max-content : Ensures that the element inside the container will never be larger than the container
  3. fit-content : Ensures that the element will not be larger or smaller than the content inside of it.  
  4. 100% : sets the width of an element to be 100% of its parent container's width


  /* Flex Box : 

  1. The container becomes a flex container, and its direct children become flex items.
  2. By default, flex items are laid out in a row (horizontal orientation), but this can be changed with the flex-direction property.
  3. The size of the flex items can be controlled using properties like flex-grow, flex-shrink, and flex-basis.

  /* About using this ">" or not
  1. When you use this ">" you target only the  immediate child of the selector on the left side.
  2. When you don't use that you target all the elements with the  class name specified on the left side.


*/


/* Overall Files basic Css to follow */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: 0;
  list-style: none;
  appearance: none;
}
/* End */

/* Overall Home Page Body Start */
body {
  font-family: "Poppins", sans-serif;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--clr-color-background);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
}
/* Body Ends */

/* Container that holds the entire site together */
.container {
  height: auto;
  width: 90%;
  display: grid;
  gap: var(--body-grid-gap);
  grid-template-columns: 14rem auto 14rem;
}
/* Container Ends */

/* Side bar/ Aside  Starts here */
aside {
  height: auto;
  width: auto; 
}
/* Aside Top Starts */
aside .top {
  background-color: var(--clr-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--margin-top);
  padding: var(--padding-2);
  border-radius: var(--border-radius-1);
}

/* Aside Top Logo Starts */
aside .top > .logo {
  display: flex;
  align-items: center;
  gap: var(--gap-top);
  color: var(--clr-dark-variant);
}

/* Aside Top Logo Image */
aside .top > .logo > img {
  width: 4rem;
  height: 3rem;
}
/* Aside Top Logo Image Ends */

/* Aside Top Logo Ends */

/* Aside Top Close Button Start */
aside .top > .close {
  display: none;
}
/* Aside Top Close Button End */

/* Aside Top Ends */


/* Aside Sidebar Starts */
aside .sidebar {
  /* background-color: #111e88; */
  background-color: var(--clr-white);
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  top: 1rem;
}

/* Aside  Sidebar anchor tags Start*/
aside .sidebar > a {
  height: var(--height-top-sidebar-anchor);
  margin-left: var(--margin-left-top-sidebar);
  display: flex;
  align-items: center;
  gap: var(--gap-top);
  transition: var(--transition-top-sidebar-anchor);
}

/* Aside Sidebar anchor Active Start */
aside .sidebar a.active {
  background: var(--clr-light);
  color: var(--clr-primary);
  margin-left: 0;
  border-left: 5px solid var(--clr-primary);
}
/* Aside Sidebar anchor Active End */

/* before Active Element they will have this css */
aside .sidebar a.active::before {
  content: '';
  width: 6px;
  height: 100%;
  background-color: var(--clr-primary);
}
/* Ends */

/* On hover Effect for anchor Start */
aside .sidebar a:hover {
  color: var(--clr-primary);
}
/* On hover Effect for anchor End */

/* On Hover Effect for Anchor Span Tag i.e. Icon Start */
aside .sidebar a:hover span {
  margin-left: var(--margin-left-top-sidebar-hover);
  transition: .4s ease;
}
/* On Hover Effect for Anchor Span Tag i.e. Icon End */

/* Aside Sidebar anchor span Start */
aside .sidebar > a > span {
  font-size: var(--span-icon-top-sidebar-font-size);
  transition: var(--transition-top-sidebar-anchor);
}
/* Aside Sidebar anchor span End */

/* Aside Sidebar anchor all Headings Start */
aside .sidebar > a >  h3 {
  font-weight: var(--h3-top-sidebar-font-weight);
}
/* Aside Sidebar all Headings End */

/* Aside Sidebar Anchor Ends */

/* Aside Sidebar Ends */

/* Aside bar Ends */



/* Main Start */
main {
  height: auto;
  width: auto;
  margin-top: var(--margin-top);
  color: var(--clr-dark);
}

/* Main Date Input Start */
main .date > input {
  display: inline-block;
  background-color: var(--clr-white);
  border-radius: var(--border-radius-1);
  margin-top: var(--margin-top-main-date);
  padding: var(--padding-main-date);
  color: var(--clr-dark);
}
/* Main Date Input End */

/* Main Cards Start */
main .cards {
  display: grid;
  grid-template-columns: var(--grid-template-columns-cards);
  gap: var(--gap-main-cards);
  background-color: var(--clr-background-color-cards);
  border: 0;
  outline: 0;
  color: var(--clr-dark);
}

/* Main Cards Customer_cards Start */
main .cards > .customer_cards {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--clr-white);
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  margin-top: 1rem;
  box-shadow: var(--box-shadow);
  transition: var(--transition-main-cards);
}
/* With Hover Start */
main .cards > .customer_cards:hover {
  box-shadow: none;
}
/* With Hover End */

/* Main cards Customer Cards Customer Orders anchor */
main .cards > .customer_cards > .customer_orders > a {
  display: flex;
  gap: var(--gap-main-cards-customer-cards-customer-orders-anchor);
  padding: var(--padding-main-cards-customer-cards-customer-orders-anchor);
}
/* Hover Start */
main .cards > .customer_cards > .customer_orders > a:hover {
  background-color: var(--clr-background-color-main-cards-customer-cards-anchor);
  border-radius: var(--border-radius-3);
}
/* Hover Ends */

/* Main cards Customer Cards Customer Orders anchor Span Elements Start */
main .cards > .customer_cards > .customer_orders > a span {
  padding: var(--padding-main-cards-customer-cards-span);
  border-radius: var(--border-radius-main-cards-customer-cards-span);
  color: var(--clr-white);
  font-size: var(--main-cards-customer-cards-span-font-size);
}

/* 1 */
main .cards > .customer_cards > .customer_orders > a:nth-child(1) span {
  background-color: var(--clr-background-color-main-cards-customer-cards-span1);
}
/* 1 Ends */
/* 2 */
main .cards > .customer_cards > .customer_orders > a:nth-child(2) span {
  background-color: var(--clr-background-color-main-cards-customer-cards-span2);
}
/* 2 Ends */
/* 3 */
main .cards > .customer_cards > .customer_orders > a:nth-child(3) span {
  background-color: var(--clr-background-color-main-cards-customer-cards-span3);
}
/* 3 Ends */
/* Main cards Customer Cards Span Elements End */

/* Main Cards Customer_cards End */

/* Main Cards See More Start */
main .cards > h1 > .see_more {
  margin: 0;
  padding: 0;
}
/* Hover */
main .cards  .see_more:hover {
  color: var(--clr-primary);
  text-decoration: underline;
}
/* Hover End */
/* Main Cards See More End */

/* Main Cards End */


/* Main Order Book Table Start */
main .order_book_table {
  margin-top: var(--margin-top-main-order-book-table);
}

/* Order Book Table H1 */
main .order_book_table h1 {
  color: var(--clr-dark);
}

/* Order Book Table Table Start */
main .order_book_table table {
  width: 100%;
  height: auto;
  background-color: var(--clr-white);
  border-radius: var(--border-radius-1);
  padding: var(--card-padding);
  text-align: center;
  box-shadow: var(--box-shadow);
  transition: var(--transition-main-table);
  color: var(--clr-dark);
}
/* Hover Start */
main .order_book_table table:hover {
  box-shadow: none;
}
/* Hover End */

/* Table Body Table Row */
main .order_book_table table tbody tr {
  height: 3.8rem;
  border-bottom: 1px solid var(--clr-white);
  color: var(--clr-dark-variant);
}
/* Table Body Table Row End */

/* Table Body, Row, Data Start */
main .order_book_table table tbody td {
  height: 3.8rem;
  border-bottom: 1px solid var(--clr-dark) ;
}
/* Table Body, Row, Data End */

/* Table Body, Row, Data Anchor Start */
main .order_book_table table tbody td a {
  text-align: center;
  display: block;
  margin: 1rem;
}
/* Table Body, Row, Data Anchor End */

/* Order Book Table Table End */

/* Main Order Book Table End */

/* Main Ends */




/* Right Start */
.right {
  margin-top: var(--margin-top);
  margin: 1rem;
}

/* Heading Start */
.right h2 {
  color: var(--clr-dark);
}
/* Heading End */

/* Right Top Start*/
.right .top {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--gap-right-top);
}
/* Right Top Button Start */
.right > .top > button {
  display: none;
}
/* Right Top Button End */

/* Right Top Theme Toggler Button Start */
.right > .top > .theme-toggler {
  background-color: var(--clr-white);
  display: flex;
  justify-content: space-between;
  height: var(--height-right-top-theme-toggler);
  width: var(--width-right-top-theme-toggler);
}

/* Theme Toggler Span Start */
.right > .top > .theme-toggler > span {
  width: var(--width-right-top-theme-toggler-span);
  height: var(--height-right-top-theme-toggler-span);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--right-top-theme-toggler-span-font-size);
}
/* Theme Toggler Span Active Start */
.right > .top > .theme-toggler > span.active {
  background-color: var(--clr-primary);
  color: var(--clr-right-top-theme-toggler-span-active);
}
/* Theme Toggler Span Active End */
/* Theme Toggler Span Start */
/* Right Top Theme Toggler Button End */

/* Right Top Profile Start */
.right > .top > .profile {
  display: flex;
  gap: var(--gap-right-top-profile);
  text-align: center;
}
.right > .top > .profile .info > h3 {
  color: var(--clr-dark)!important;
}
/* Right Top Profile End */

/* Right Top End */

/* Right Recent Updates Start */
.right > .recent_updates {
  margin-top: var(--margin-top-right-recent-updates);
  margin-left: var(--margin-left-right-recent-updates);
}
/* Right recent Updates updates Start */
.right > .recent_updates > .updates {
  background-color: var(--clr-white);
  padding: var(--card-padding);
  border-radius: var(--border-radius-3);
  box-shadow: var(--box-shadow);
  transition: var(--transition-right-recent-updates-updates);
}
/* Hover */
.right > .recent_updates > .updates:hover { 
  box-shadow: none;
}
/* Hover End */

/* Recent Updates Updates Update Start */
.right > .recent_updates > .updates > .update {
  display: grid;
  grid-template-columns: var(--grid-template-columns-recent-updates-updates-update);
  gap: var(--gap-right-recent-updates-updates-update);
  margin-bottom: var(--margin-bottom-right-recent-updates-updates-update);
}
/* Recent Updates Updates Update End */

/* Right recent Updates updates End */
/* Right Recent Updates End */

/* Right see more */
.right .see_more:hover {
  color: var(--clr-primary);
}

/* Right End */



/* Media Query */
/* For Responsive Design */

/* Tablet */
@media screen and (max-width:1200px) {
  .container {
    width: var(--media-query-tablet-width-container);
    grid-template-columns: var(--media-query-tablet-grid-template-columns-container);
  }
  aside .sidebar{
    height: var(---media-query-tablet-height-aside-sidebar);
  }
  aside .top h3 {
    display: none;
  }
  aside .sidebar a:last-child {
    position: absolute;
    bottom: var(--media-query-tablet-bottom-aside-sidebar-a-last-child);
  }
  aside .sidebar a:nth-last-child(2) {
    position: absolute;
    bottom: var(--media-query-tablet-bottom-aside-sidebar-a-nth-last-child2);
  }
  aside .sidebar h3 {
    display: none;
  }
  main > .cards {
    display: grid;
    grid-template-columns: var(--media-query-tablet-grid-template-columns-main-cards)
  }
  main > .cards > .customer_cards > .customer_orders a {
    display: grid;
    grid-template-columns: var(--media-query-tablet-grid-templet-columns-main-cards-customer-cards-customer-orders-span);
  }
  main > .cards > .customer_cards > .customer_orders a span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--media-query-tablet-width-main-cards-customer-cards-customer-orders-span);
  }
}
/* Tablet End */

/* Mobile View Start */
@media screen and (max-width:768px) {
  .container {
    width: var(--media-query-mobile-width-container);
    grid-template-columns: var(--media-query-mobile-grid-template-columns-container);
  }
  aside {
    position: fixed;
    width: var(--media-query-mobile-width-aside);
    z-index: var(--media-query-mobile-z-index-aside);
    background-color: var(--clr-white);
    display: none;
    left: var(--media-query-mobile-left-aside);
    animation: menuAni 1s forwards;
  }

  /* menuAni Animation Start */
  @keyframes menuAni {
    to {
      left: 0;
    }
  }
  /* menuAni Animation Ends */

  aside > .top > .logo h3 {
    display: inline;
  }

  aside > .top > div.close {
    display: inline;
    position: absolute;
    right: var(--media-query-mobile-right-aside-top-close);  
    margin-right: var(--media-query-mobile-margin-right-aside-top-close);
    font-size: var(--media-query-mobile-font-size-aside-top-close);
  }

  aside > .sidebar > a {
    width: var(--media-query-mobile-width-aside-sidebar-anchor);
    height: var(--media-query-mobile-width-aside-sidebar-anchor);
  }

  aside > .sidebar > a > h3 {
    display: inline;
  }

  main .date {
    margin-left: var(--media-query-mobile-margin-left-main-date);
  }

  main .cards {
    display: grid;
    grid-template-columns: var(--media-query-mobile-grid-template-columns-main-cards);
    gap: var(--media-query-mobile-gap-main-cards);
    padding: var(--media-query-mobile-padding-main-cards);
  }

  main .order_book_table {
    padding: var(--media-query-mobile-padding-main-order-book-table);
    margin: var(--media-query-mobile-margin-main-order-book-table);
  }

  .right .top {
    position: fixed;
    top: var(--media-query-mobile-top-right-top);
    left: var(--media-query-mobile-left-right-top);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--media-query-mobile-padding-right-top);
    background-color: var(--clr-white);
    width: var(--media-query-mobile-width-right-top);
    height: var(--media-query-mobile-height-right-top);
    z-index: var(--media-query-mobile-z-index-right-top);
    box-shadow: var(--media-query-mobile-box-shadow-right-top);
    margin: var(--media-query-mobile-margin-right-top);
  }

  .right .top .profile {
    position: absolute;
    left: var(--media-query-mobile-left-right-top-profile);
  }

  .right .recent_updates {
    padding: var(--media-query-mobile-padding-right-recent-updates);
    margin-left: var(--media-query-mobile-margin-left-right-recent-updates);
  }
  .right .top button {
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    color: var(--clr-dark);
    position: absolute;
    left: 1rem;
  }
  aside .sidebar a:last-child {
    position: relative;
    bottom: 0;
  }
  aside .sidebar a:nth-last-child(2) {
    position: relative;
    bottom: 2px;
  }
  
}
/* Mobile View Ends */

/* Responsive Design Ends */