/* semantic color variables for this project */
:root {
  --color-white: #ffffff;
  --color-mirage: #0d1c2e;
  --color-RegentGrey: #8c96a2;
  --color-BleuDeFrance: #2a8bf2;
  --color-PictonBlue: #4baeea;
  --color-BalticSea: #242529;
  --color-PaleGrey: #fdfdfd;
  --color-PeriwinkleGrey: #c9ccde;
  --color-WhiteSmoke: #f5f5f5;
  --color-Rhino: #344767;
  --color-black: #000000;
  --color-PickledBluewood: #33405a;
  --color-Dawn: #a2a2a2;
  --color-Seashell: #f1f1f1;
  --color-DavyGrey: #555555;
  --color-Zeus: #231f20;
  --color-MountainMist: #989898;
  --color-DarkJungleGreen: #212121;
  --color-CharcoalGrey: #414141;
  --color-StarDust: #9c9c9c;
  --color-LavenderPinocchio: #e0e0e0;
  --color-Azure: #1197e8;
  --color-RangoonGreen: #1a1a1a;
  --color-Gainsboro: #dddee1;
  --color-GunPowder: #3c4257;
  --color-BlackCow: #474747;
  --color-QuillGrey: #d4d4d4;
  --color-MediumGrey: #7f7f7f;
  --color-CharcoalGrey: #373d3f;
  --color-PaleAqua: #cdd2e1;
  --color-PinkSwan: #b8b8b8;
  --color-RadicalRed: #ff3654;
  --color-CarbonGrey: #555f61;
  --color-BalticSea: #2b2b2b;
  --color-TwilightBlue: #eeffff;
  --color-Onyx: #111111;
  --color-AquaHaze: #f0f3f6;
  --color-FrenchGrey: #bebebe;
  --color-WhiteLilac: #f7f8fa;
  --color-GhostWhite: #f7f9fc;
  --color-Liver: #4d4c4c;
  --color-Iron: #d0d3e3;
  --color-Grey: #919191;
  --color-SlateGrey: #707c97;
  --color-NileBlue: #203758;
  --color-Porcelain: #f1f2f6;
  --color-Gunmetal: #2a3037;
  --color-BleuDeFrance: #2a8bf2;
  --color-RubyRed: #fe2323;
  --color-AliceBlue: #f0f7ff;
  --color-BlueDress: #1877f2;
  --color-GreyCloud: #b7b7b7;
  --color-Dune: #343434;
  --color-Butterscotch:#FFAD4F;
  --color-MediumGreen: #13BD38;
  --color-Meteorite: #3B1B7C;
  --clor-VioletEggplant: #94219E;
  --color-MulledWine:#4F4E69;
  --color-AtomicTangerine: #FF8F6B;
  --color-EbonyClay: #192A3E;
  --color-RegentGrey: #8C96A2;
  --color-CarbonGrey: #606060;
  --clor-GreenTeal: #00B649;
  --color-Night: #050707;
  --color-Mercury: #E0E7ED;
  --color-PaleSky: #6F7C80;
  --color-PersianGreen:#00ADAA;
  --color-Amour: #FFE8E8;
  --color-RubyRed: #FE2323;
  --color-Honeydew: #EDFFED;
  --color-LimeGreen:#23A420;
  --color-Alabaster: #FBFBFB;
  --color-SnowDrift: #F9F9F9;
  --color-Cinder: #131516;
  --color-DarkIndigo: #170F49;
  --color-Geyser: #D9DBE9;
  --color-Water:#EAF4FF;
  --color-SnowyMint: #D6FCE5;
  --color-RoseWhite: #FFF7F0;
  --color-TigerEye: #E98D48;
  --color-Boulder:#7A7A7A;
  --color-Gravel:#494454;
  --color-MintTulip: #D2F0F0;
  --color-BattleshipGrey : #818181; 
  --color-Soapstone: #FCFCFC;
  --color-LightGrey: #D9D9D9;
  --color-IronsideGrey:#666666;
  --color-LaSalleGreen: #008535;
  --color-SoftPeach: #EFEFEF;
  --color-Geraldine: #F68686;
  --color-RedOrange: #FF3C2E;
  --color-IrishGreen: #03A800;
  --color-Thunder: #302525;
  --color-PastelGrey: #CDCDCD;
  --color-ArtyClickRed: #ED0000;
  --font-family: "Roboto", sans-serif;
  --font-family2: "Inter", sans-serif;
  --font-family3: "Poppins", sans-serif;
  --font-familyMontserrat: "Montserrat", sans-serif;
  --font-familyManrope: 'Manrope', sans-serif;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  font-weight: normal;
}

body {
  background: var(--color-white);
  line-height: 1.6;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: normal;
  
}

/* default styles  */

button {
  border: none;
  outline: none;
  box-sizing: border-box;
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

input {
  border: none;
  outline: none;
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}

#dropdown #dropdown-menu {
  background: var(--color-white) !important;
  box-shadow: 0px 1px 14px 4px rgba(184, 184, 184, 0.07) !important;
  border-radius: 6px !important;
  border: none;
}
#dropdown #dropdown-menu > li > a {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1rem;
  color: var(--color-Dune);
  border-bottom: 1px solid var(--color-WhiteSmoke);
  text-align: start;
  padding: 0;
  padding: 0rem 1rem;

  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
#dropdown #dropdown-menu > li > a.delete {
  color: var(--color-RubyRed);
}
#dropdown #dropdown-menu > li:last-child > a {
  border: none;
}

/***************************
*
*
*   sidebar styles
*
*****************************
*/

.sidebar_col {
  background-color: var(--color-white);
  box-shadow: 14.0351px 0px 25px rgba(86, 128, 248, 0.03),
    23.8596px 5.61404px 50px rgba(0, 0, 0, 0.02);
}


aside.sidebar {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-white);
  box-shadow: 14.0351px 0px 25px rgba(86, 128, 248, 0.03),
    23.8596px 5.61404px 50px rgba(0, 0, 0, 0.02);
  transition: all 0.5s ease-in-out;
}

/* close sidebar icon  */
aside.sidebar #closeSidebar {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
  display: none;
}

/* this will show the sidebar  */
aside.sidebar.show {
  transform: translateX(0%);
}


aside.sidebar > .profile_container {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  display: none;
}

aside.sidebar > .profile_container > img {
  width: 5.375rem;
  height: 5.375rem;
  border-radius: 50%;
  object-fit: cover;
}

aside.sidebar > .profile_container > h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-mirage);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

aside.sidebar > .profile_container > h3 > span {
  color: var(--color-mirage);
  margin-right: 0.5rem;
}
aside.sidebar > .profile_container > h3 > svg {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--color-mirage);
}

aside.sidebar > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
 box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
aside.sidebar > ul > li.hide_sm{
  display: none;
}
aside.sidebar > ul > li:last-child {
  margin-bottom: 1.8rem;
}

aside.sidebar > ul > li > a {
  display: flex;
  flex-direction: column;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.313rem;
  color: var(--color-RegentGrey);
}
aside.sidebar > ul > li > a:hover {
  font-weight: 500;
  color: var(--color-BalticSea);
}
aside.sidebar > ul > li > a.active {
  color: var(--color-BalticSea);
  font-weight: 500;
}
aside.sidebar > ul > li > a > div {
  display: flex;
  flex-direction: column;
}


aside.sidebar > ul > li > a svg {
  width: 1.5rem;
  height: 1.5rem;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

aside.sidebar > ul > li > a .rounded_dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: var(--color-PictonBlue);
  padding: 0.5rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--color-white);
  left: 29px;
  top: -1px;
}


@media screen and (min-width:375px){
  aside.sidebar > ul {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
  }
}
@media screen and (min-width: 576px) {
  aside.sidebar {
    width: 50.66666667%;
    height: 100vh;
    transform: translateX(-120%);
  }
  aside.sidebar > ul > li > a:hover {
    border-left: 3px solid var(--color-BleuDeFrance);
    border-radius: 3px;
    color: var(--color-BalticSea);
  }
  aside.sidebar > ul > li > a.active {
    border-left: 3px solid var(--color-BleuDeFrance);
    border-radius: 3px;
    color: var(--color-BalticSea);
  }
  
  /* close sidebar icon  */
  aside.sidebar #closeSidebar {
    display: block;
  }
  aside.sidebar > .profile_container {
    display: flex;
  }
  aside.sidebar > ul {
    display: block;
    height: auto;
   padding: 0;
   box-shadow:none;
  }
  aside.sidebar > ul > li.hide_sm{
    display: block;
  }
  
aside.sidebar > ul > li > a {
  padding-left: 2rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-RegentGrey);
  margin-top: 1.8rem;
}
  aside.sidebar > ul > li > a svg {
  width: 1.9rem;
  height: 1.9rem;
  margin: 0;
  margin-right: 1rem;
  }
  aside.sidebar > ul > li > a .rounded_dot {
  position: absolute;
  left: 15px;
  top: -1px;
}
aside.sidebar > ul > li > a > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  }
}
@media screen and (min-width: 768px) {
  aside.sidebar {
    width: 30.66666667%;
  }
}
@media screen and (min-width: 992px) {
  aside.sidebar {
    width: 24.66666667%;
  }
}
@media screen and (min-width: 1200px) {
  aside.sidebar {
    width: 16.6666667%;
    transform: translateX(0%);
  }
}

/***************************
*
*
*   navbar styles  
*
*****************************
*/

nav {
  width: 100%;
  color: var(--color-PaleGrey);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
nav .container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav svg#menu_bar {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 1rem;
  cursor: pointer;
  display: none;
}

nav .navbar_brand {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}

nav .navbar_item_left {
  display: flex;
  align-items: center;
}

nav .navbar_item_left .wrapper {
  border: 1px solid var(--color-PeriwinkleGrey);
  border-radius: 6px;
  margin-left: 3rem;
  padding: 0.4rem 0.5rem;
  width: 21rem;
  display: none;
  overflow: hidden;
}

nav .navbar_item_left input {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-PeriwinkleGrey);
  margin: 0;
}
nav .navbar_item_left input::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-PeriwinkleGrey);
}

nav .navbar_item_left svg {
  width: 1rem;
  height: 1rem;
}

/* search collapse styles  */
.search_collapse {
  background-color: var(--color-white);
  padding: 1rem;
  width: 100%;
}

.search_collapse .wrapper {
  border: 1px solid var(--color-PeriwinkleGrey);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  width: 100%;
}

.search_collapse input {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-PeriwinkleGrey);
  margin: 0;
}
.search_collapseinput::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-PeriwinkleGrey);
}

.search_collapse svg {
  width: 1rem;
  height: 1rem;
}

nav .navbar_nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
nav .navbar_nav .nav_item.avatar_li > div {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  display: none;
}

nav .navbar_nav .nav_item .notifation {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 13px;
  top: -4.8px;
  background-color: var(--color-PictonBlue);
  padding: 0.5rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--color-white);
}

nav .navbar_nav .nav_item.avatar_li > div img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}

nav .navbar_nav .nav_item.avatar_li > div h6 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-left: 0.6rem;
  margin-right: 0.4rem;
}

nav .navbar_nav .nav_item svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 1rem;
}
nav .navbar_nav .nav_item svg:nth-child(3) {
  margin-right: 0rem;
}
nav .navbar_nav .nav_item:nth-child(1) svg {
  margin-right: 1.6rem;
}
nav .navbar_nav .nav_item:nth-child(2) svg {
  margin-right: 1.8rem;
}

nav .navbar_nav .nav_item.avatar_li svg {
  width: 1rem;
  height: 1rem;
}

/* media screen for navbar  */
@media screen and (min-width: 500px) {
  nav .navbar_nav .nav_item.avatar_li > div {
    display: flex;
  }
  nav .navbar_nav .nav_item svg:nth-child(3) {
    margin-right: 1rem;
  }
}
@media screen and (min-width: 576px) {
  nav svg#menu_bar {
    display: block;
  }
}

@media screen and (min-width: 815px) {
  nav .navbar_item_left .wrapper {
    display: block;
  }
  nav .navbar_nav .nav_item:nth-child(1) svg {
    display: none;
  }
  .search_collapse {
    display: none;
  }
}

/***************************
*
*
*   trainings styles
*
*****************************
*/

.bookmark_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}

main.training {
  padding: 2rem 1rem;
}

main.training section.courses {
  background: var(--color-white);
  margin-top: 1rem;
}

main.training section.courses > .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main.training section.courses > .wrapper > h3 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.371rem;
  line-height: 1.625rem;
  color: var(--color-Rhino);
}
main.training section.courses > .wrapper > .link_container a  {
  display: flex;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.028rem;
  line-height: 1.188rem;
  color: var(--color-PictonBlue);
}
main.training section.courses > .wrapper > .link_container a  > svg{
 width: 1.125rem;
 height: 0.75rem;
 margin-left: 0.4rem;
}
main.training section.courses > .wrapper .filter_container .filter {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--color-white);
  border: 1px solid var(--color-Geyser);
  border-radius: 5px;
  min-width: 6.313rem;
  height: 2.5rem;
  cursor: pointer;
}
main.training section.courses > .wrapper .filter_container .filter span  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-MulledWine);
}
main.training section.courses > .wrapper .filter_container .filter svg  {
  width: 0.6rem;
  height: 0.6rem;
}
main.training section.courses > .wrapper .filter_container .dropdown-menu  {
background-color: var(--color-white);
border-radius: 8px;
}
main.training section.courses > .wrapper .filter_container .dropdown-menu a  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-GunPowder);
  padding: 0.3rem  0.8rem;
}

main.training section.courses .videos {
  margin-top: 1rem;
}
main.training section.courses .video_card  {
  background-color: var(--color-white);
  box-shadow: 0px 4px 20px rgba(1, 11, 60, 0.07);
  border-radius: 6px;
  margin-bottom: 1rem;
 
}

main.training section.courses .video_card  .thumbnail_container img {
  width: 100%;
  height: 11.25rem;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
main.training section.courses .video_card  .thumbnail_container span {
  position: absolute;
  right: 9px;
  top: 10px;
  padding: 0.25rem;
  background: rgba(75, 174, 234, 0.38);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
main.training section.courses .video_card  .thumbnail_container span > svg {
  width: 1.063rem;
  height: 1.438rem;
}

main.training section.courses  .video_card_body_container {
  padding: 1rem 1rem 0.3rem 1rem;
}
main.training section.courses  .video_card_body_container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  margin-bottom: 0.7rem;
}

main.training section.courses  .video_card_body_container .header h4  {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.training section.courses  .video_card_body_container .desc h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color:var(--color-RegentGrey);
  margin: 0;
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}
main.training section.courses  .video_card_body_container .desc h6 svg {
 width: 1rem;
 height: 1rem;
 margin-top: -3px;
 margin-right: 0.5rem;
}

main.training section.courses  .video_card_body_container .desc_profile_container  {
display: flex;
justify-content: space-between;
margin-top: 1rem;

}
main.training section.courses  .video_card_body_container .desc_profile_container .desc_profile_right {
  margin-top: 1rem;
}

main.training section.courses  .video_card_body_container .desc_profile_container  img  {
  width: 2.188rem;
  height: 2.188rem;
  border: 2px solid var(--color-white);
  filter: drop-shadow(0px 10px 14px rgba(1, 11, 60, 0.1));
  border-radius: 50%;
  object-fit: cover;

}

main.training section.courses  .video_card_body_container .desc_profile_container  h6  {
font-family: var(--font-family);
font-weight: 500;
font-size: 0.875rem;
line-height: 1rem;
color:var(--color-CarbonGrey);
margin: 0;
}
main.training section.courses  .video_card_body_container .desc_profile_container  span  {
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height:1.5rem;
color:var(--color-CarbonGrey);
display: block;
}
main.training section.courses .video_card_body_container .desc_profile_container  .desc_profile_right span:first-child   {
font-family: var(--font-family);
display: inline-block;
font-weight: 400;
font-size: 0.625rem;
line-height: 0.688rem;
color: var(--clor-GreenTeal);
background: rgba(0, 182, 73, 0.1);
border-radius: 2.14286px;
padding: 4.14286px 6.28571px;
margin: 0;

}

main.training section.courses  .underline {
height: 0;
border-top:1px solid var(--color-Porcelain);

}
main.training section.courses .video_card_footer
{
padding: 1rem;
}

main.training section.courses .video_card_footer .price_container {
display: flex;
align-items: center;
justify-content: space-between;
}

main.training section.courses .video_card_footer span 
{
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color:var(--color-Night);
}

main.training section.courses .video_card_footer a 
{
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-CharcoalGrey);
}

main.training section.courses .video_card_footer a:hover
{
text-decoration: underline;
}


main.training section.videos .card {
  background: var(--color-white);
  box-shadow: 0px 0.834496px 29.2074px -0.834496px rgba(187, 187, 187, 0.29);
  border-radius: 5.84147px;
  padding: 0.7rem;
  margin-bottom: 1.3rem;
  border: none;
}

main.training section.videos .card:last-child {
  margin-bottom: 0rem;
}
main.training section.videos .card img {
  width: 9.024rem;
  height: 6.111rem;
  object-fit: cover;
}

main.training section.videos .card .pause_button {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main.training section.videos .desc_container .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
}

main.training section.videos .desc_container h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.991rem;
  line-height: 1.188rem;
  color: var(--color-black);
  margin-right: 0.4rem;
}

main.training section.videos .desc_container p {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: var(--color-black);
  
}

main.training section.videos .desc_container .header p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.742rem;
  line-height: 0.875rem;
  color: var(--color-Dawn);
  margin-top: 0.7rem;
  margin-left: 0.3rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
main.training section.videos .para_wrapper {
  display: flex;
  align-items: center; 
  justify-content: space-between;
}

main.training section.videos .para_wrapper > p { 
   max-width: 80%;
}
main.training section.videos .para_wrapper span  {
  padding: 0.25rem;
  background: rgba(75, 174, 234, 0.2);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  height: 2.2rem;
  width: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  white-space: nowrap;
}
main.training section.videos .para_wrapper span  svg  {
  width: 1.063rem;
  height: 1.338rem;
}

/* media query for videos section  */
@media screen and (min-width: 628px) {
  main.training section.videos .card {
    display: flex;
    flex-direction: row;
  }
  main.training section.videos .desc_container {
    padding-left: 1rem;
  }
}

/* posts styles  */
main.training section.posts {
  margin-top: 1.26rem;
}
/* Display all posts  styles  */
main.training section.posts .all_posts_show_card {
  margin-bottom: 1.5rem;
}
main.training section.posts .all_posts_show_card .header {
  background-color: var(--color-white);
  box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.05),
    0px 4px 10px rgba(0, 0, 0, 0.25), 0px 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0rem 1.5rem;
}
main.training section.posts .all_posts_show_card .header img {
  width: 3.344rem;
  height: 3.344rem;
  object-fit: cover;
  border-radius: 50%;
}
main.training section.posts .all_posts_show_card .header h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.training section.posts .all_posts_show_card .header svg {
  width: 1.139rem;
  height: 1.036rem;
}
main.training section.posts
  .all_posts_show_card
  .header
  .dropdown
  svg {
  width: 1.514rem;
  height: 1.514rem;
}
main.training section.posts .all_posts_show_card .header span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
}

main.training section.posts .all_posts_show_card .header p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-GreyCloud);
}

main.training section.posts
  .all_posts_show_card
  .card_body
  img:first-child {
  width: 100%;
  height: 20rem;
  max-height: 100%;
  object-fit: cover;
}
main.training section.posts
  .all_posts_show_card
  .card_body
  img:nth-child(2) {
  width: 4.25rem;
  height: 4.25rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


main.training section.posts
  .all_posts_show_card
  .card_footer
  .desc_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  margin-top: 1.5rem;
}

main.training section.posts .all_posts_show_card .card_footer h1 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.213rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}
main.training section.posts .card_footer .left_desc span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
}

main.training section.posts .card_footer .left_desc a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
  color: var(--color-PictonBlue);
  margin-left: 0.6rem;
}

main.training section.posts .card_footer .right_desc svg {
  width: 1rem;
  height: 0.75rem;
}

main.training section.posts .card_footer .right_desc span.bookmark_icon  {
  padding: 0.27rem;
  background: rgba(75, 174, 234, 0.2);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 0.5rem;
  white-space: nowrap;
  
}
main.training section.posts .card_footer .right_desc span.bookmark_icon  svg  {
  width: 1.0rem;
  height: 1.238rem;
  text-align: center;
}
main.training section.posts .card_footer .right_desc span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.775rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}
main.training section.posts .card_footer hr {
  margin: 0;
  padding: 0;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
main.training section.posts .feedback {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
main.training section.posts .feedback span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}

main.training section.posts .feedback svg {
  width: 0.938rem;
  height: 0.75rem;
  margin-left: 0.8rem;
  margin-right: 0.1rem;
  margin-top: -5px;
}

/***************************
*
*
*   notification styles
*
*****************************
*/
main.notifications {
  padding-right: 0.8rem;
}
main.notifications section .header {
  margin-top: 1.7rem;
  margin-bottom: 2rem;
}

main.notifications section .header > h1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}

main.notifications section .header > .header_right span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-DarkJungleGreen);
}

main.notifications section .header > .header_right span:first-child {
  display: flex;
  align-items: center;
}
main.notifications section .header > .header_right span:first-child > div {
  margin: 0;
  margin-left: 1rem;
}
main.notifications section .header > .header_right .mark_read {
  display: flex;
  align-items: center;
}
main.notifications section .header > .header_right .mark_read > svg {
  margin-left: 1rem;
}
main.notifications section .header > .header_right > .form-switch {
  display: none;
}

main.notifications section .messages hr {
  color: var(--color-StarDust);
}

main.notifications section .single_message {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

main.notifications section .left_side {
  display: flex;
}

main.notifications section .left_side > img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
}

main.notifications section .left_side .desc {
  margin-left: 1rem;
}
main.notifications section .left_side h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-DarkJungleGreen);
}
main.notifications section .left_side h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-CharcoalGrey);
}

main.notifications section .left_side h4 > span {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RangoonGreen);
}

main.notifications section .left_side span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-StarDust);
}

main.notifications section .left_side .underline {
  border-left: 1px solid var(--color-LavenderPinocchio);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 1rem;
  margin-top: 1rem;
}

main.notifications section .left_side .underline.text span {
  font-family: var(--font-family2);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-BlackCow);
  max-width: 55rem;
}

main.notifications section .left_side .btn_container {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

main.notifications section .left_side .btn_container > button {
  width: 3.75rem;
  height: 1.75rem;
  background: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-white);
}
main.notifications section .left_side .btn_container > button:last-child {
  background: var(--color-white);
  color: var(--color-GunPowder);
  border: 1px solid var(--color-Gainsboro);
  margin-left: 1rem;
}

main.notifications section .right_side button {
  width: 4.938rem;
  height: 2.25rem;
  background: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  margin-left: 0.8rem;
}

/* media screen  */
@media screen and (min-width: 550px) {
  main.notifications section .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  main.notifications section .header > .header_right {
    display: flex;
    align-items: center;
  }
  main.notifications section .header > .header_right > span > div {
    display: none;
  }

  main.notifications section .header > .header_right .mark_read > svg {
    margin-left: 0rem;
  }
  main.notifications section .header > .header_right .mark_read {
    margin-left: 1rem;
  }
  main.notifications section .header > .header_right span:first-child {
    margin-right: 0.5rem;
  }
  main.notifications section .header > .header_right > .form-switch {
    display: block;
  }
  main.notifications section .right_side button {
    width: 5.938rem;
    height: 2.25rem;
    margin-left: 0.8rem;
  }
}

main.notifications section .right_side img {
  width: 43px;
  height: 47px;
  object-fit: cover;
}

/***************************
*
*
*   settings styles
*
*****************************
*/

main.settings {
  padding-right: 0.8rem;
}
main.settings section .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.7rem;
  margin-bottom: 1.7rem;
}

main.settings section .header > h1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.settings .settings_toggler .toggler_container hr {
  margin: 0;
  color: var(--color-QuillGrey);
  width: 100%;
  display: block;
}

/* toggler styles  */

main.settings
  .settings_toggler
  .toggler_container a.active::after {
    content: '';
     position: absolute;
     left: 0;
     bottom: -6px;
     width: 100%;
     height: 2px;
     background-color: var(--color-PictonBlue);
  }

main.settings .settings_toggler .toggler_container {
  width: 52.813rem;
}

/* media query for toggler container  */
@media screen and (min-width: 908px) {
  main.settings .settings_toggler .toggler_container {
    width: 100%;
  }
}

main.settings .settings_toggler {
  padding-bottom: 1rem;
  overflow-x: auto;
  scrollbar-color: var(--color-Seashell) var(--color-Dawn);
}

/* width */
main.settings .settings_toggler::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main.settings .settings_toggler::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main.settings .settings_toggler::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main.settings .settings_toggler::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}

main.settings .settings_toggler .toggler_container ul {
  white-space: nowrap;
}
main.settings .settings_toggler .toggler_container ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

main.settings .settings_toggler .toggler_container ul li {
  margin-bottom: 0.3rem;
  text-align: start;
}

main.settings .settings_toggler .toggler_container ul a {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  display: inline-block;
  color: var(--color-RegentGrey);
}

main.settings .settings_toggler .toggler_container ul a.active {
  color: var(--color-BalticSea);
}

main.settings .card_container {
  background-color: var(--color-white);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-top: 2rem;
}

main.settings .card_container hr {
  margin: 0;
  padding: 0;
}

main.settings .card_container .settings_header {
  padding: 1.5rem 1rem;
}

main.settings .card_container .settings_header h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main.settings .card_container .settings_header p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-MediumGrey);
  margin: 0;
}

main.settings .card_container .card_body {
  padding: 2rem 1rem 0rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main.settings .card_container .card_body:last-child {
  padding-bottom: 2rem;
}

main.settings .card_container .card_body > div {
  display: flex;
  align-items: center;
}

main.settings .card_container .card_body h4 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}

main.settings .card_container .card_body p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
  margin: 0;
}

main.settings .card_container .card_body > a > svg {
  margin-left: 0.5rem;
}

/* media screen  */
@media screen and (min-width: 576px) {
  main.settings .card_container .settings_header {
    padding: 1.5rem 2rem;
  }
  main.settings .card_container .card_body {
    padding: 2rem 2rem 0rem 2rem;
  }
}

/* change password  */

main.settings section.change_password .card_container {
  margin-bottom: 2rem;
}
main.settings section.change_password .header {
  padding: 1.5rem 1rem;
  margin: 0;
}

main.settings section.change_password .header h3 {
  margin: 0;
  display: flex;
  align-items: center;
}
main.settings section.change_password .header h3 a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main.settings section.change_password .header h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.6rem;
}

main.settings section.change_password .card_container .card_body {
  padding: 2rem 1rem 0rem 1rem;
  display: block;
}

main.settings
  section.change_password
  .card_container
  .card_body
  .input_wrapper {
  width: 100%;
  margin-bottom: 1rem;
}

main.settings
  section.change_password
  .card_container
  .card_body
  > div:last-child
  .input_wrapper {
  width: 100%;
  margin-right: 0rem;
}

main.settings section.change_password .card_container .card_body label {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-CharcoalGrey);
  margin: 0;
  margin-bottom: 0.3rem;
}

main.settings section.change_password .card_container .card_body input {
  padding: 0.625rem 0.75rem;
  height: 2.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  outline: none;
  box-shadow: none !important;
  width: 100%;
  color:var(--color-black);
}

main.settings
  section.change_password
  .card_container
  .card_body
  input::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);
}

main.settings section.change_password .card_container .card_body textarea {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0.625rem 0.75rem;
  height: 4.563rem;
  background: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  resize: none;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-black);
}
main.settings
  section.change_password
  .card_container
  .card_body
  textarea::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);
}

main.settings section.change_password .card_container .btn_submit {
  width: 7.875rem;
  height: 2.7rem;
  background: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-white);
  display: block;
  margin-left: auto;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* media screen  */
@media screen and (min-width: 768px) {
  main.settings section.change_password .card_container {
    margin-bottom: 2rem;
  }
  main.settings section.change_password .header {
    padding: 1.5rem 2rem;
    margin: 0;
  }
  main.settings section.change_password .card_container .card_body {
    padding: 2rem 2rem 0rem 2rem;
    display: flex;
    flex-wrap: wrap;
  }
  main.settings
    section.change_password
    .card_container
    .card_body
    .input_wrapper {
    margin-right: 0.8rem;
  }
  main.settings
    section.change_password
    .card_container
    .card_body
    .input_wrapper.verify_account_wrapper {
    margin-right: 0rem;
  }

  main.settings section.change_password .card_container .btn_submit {
    width: 11.875rem;
    height: 3rem;
    margin-right: 2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
}

/* privacy policy styles  */

/* account privacy  */
main.settings section.privacy_policy .account_privacy {
  margin-top: 1.3rem;
}

main.settings section.privacy_policy .account_privacy h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}

main.settings section.privacy_policy  .account_privacy .private_container  {
  display: flex;
  align-items: center;
  max-width: 18.75rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  margin-top: 1.2rem;
}
main.settings section.privacy_policy  .account_privacy .private_container h3  {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.settings section.privacy_policy  .account_privacy p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
}
main.settings section.privacy_policy  .account_privacy p > a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PictonBlue);
}

main.settings section.privacy_policy  .account_privacy .underline {
  padding: 0;
  border: 1px solid var(--color-QuillGrey);
  margin-top: 2rem;
}

/* activity status  */
main.settings section.privacy_policy .status_container {
 margin-top: 2rem;
}
main.settings section.privacy_policy .status_container h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin-top: 1rem;
  margin-bottom: 1.3rem;
}
main.settings section.privacy_policy .status_container .show_activity {
  display: flex;
  align-items: center;
  max-width: 18.75rem;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  margin-top: 1.2rem;
}
main.settings section.privacy_policy .status_container h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}

main.settings section.privacy_policy .status_container p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
}
main.settings section.privacy_policy .status_container p > a {
  font-weight: 600;
  color:  var(--color-PictonBlue);
  text-decoration: none;
}
main.settings section.privacy_policy .status_container .underline {
  border: 1px solid var(--color-QuillGrey);
  margin-top: 2rem;
}

/* story  */
main.settings section.privacy_policy  .story {
  margin-top: 2rem;
}
main.settings section.privacy_policy .story h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
main.settings section.privacy_policy .story a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PictonBlue);
}
main.settings section.privacy_policy .story .underline {
  border: 1px solid var(--color-QuillGrey);
  margin-top: 2rem;
}

/* photo_of_you */
main.settings section.privacy_policy  .photo_of_you {
  margin-top: 2rem;
}
main.settings section.privacy_policy .photo_of_you h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
main.settings section.privacy_policy .photo_of_you input {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
  transform: scale(1.2);
  margin-right: 0.5rem;
}
main.settings section.privacy_policy .photo_of_you label {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}
main.settings section.privacy_policy .photo_of_you p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
  margin-top: 1rem;
}
main.settings section.privacy_policy .photo_of_you p > a {
  font-weight: 600;
  color:  var(--color-PictonBlue);
  text-decoration: none;
}
main.settings section.privacy_policy .photo_of_you .underline {
  border: 1px solid var(--color-QuillGrey);
  margin-top: 1.2rem;
}

/* mentions  */
main.settings section.privacy_policy  .mentions {
  margin-top: 1.5rem;
}
main.settings section.privacy_policy .mentions h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;  
  color: var(--color-BalticSea);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
main.settings section.privacy_policy .mentions input {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
  transform: scale(1.2);
  margin-right: 0.5rem;
}
main.settings section.privacy_policy .mentions label {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}

main.settings section.privacy_policy .mentions h5 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-Liver);
  margin-bottom: 1rem;
}
main.settings section.privacy_policy .mentions h5 > span  {
  font-weight: 600;
  color: var(--color-PictonBlue);
}

main.settings section.privacy_policy .mentions  p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
}
main.settings section.privacy_policy .mentions  p > a{
  font-weight: 600;
  color:  var(--color-PictonBlue);
}

main.settings section.privacy_policy .mentions .underline {
  border: 1px solid var(--color-QuillGrey);
  margin-top: 1.2rem;
}

/* guides  */
main.settings section.privacy_policy  .guides {
  margin-top: 2rem;
}
main.settings section.privacy_policy .guides h5 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-Liver);
}
main.settings section.privacy_policy .guides h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;  
  color: var(--color-BalticSea);
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
main.settings section.privacy_policy .guides  p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
}
main.settings section.privacy_policy .guides  p > a{
  font-weight: 600;
  color:  var(--color-PictonBlue);
}
main.settings section.privacy_policy .guides .guides_container {
  display: flex;
  align-items: center;
  max-width: 18.75rem;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  margin-top: 2rem;
}
main.settings section.privacy_policy .guides h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}
main.settings section.privacy_policy .guides .underline {
  border: 1px solid var(--color-QuillGrey);
  margin-top: 1.2rem;
}

/* hidden words  */
main.settings section.privacy_policy  .hidden_words {
  margin-top: 2rem;
}
main.settings section.privacy_policy .hidden_words h5 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #4D4C4C;
}
main.settings section.privacy_policy .hidden_words h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;  
  color: var(--color-BalticSea);
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
main.settings section.privacy_policy .hidden_words  p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-RegentGrey);
  max-width: 43.75rem;
}

main.settings section.privacy_policy .hidden_words .words_container {
  max-width: 20.75rem;
  margin-bottom: 0.7rem;
  margin-top: 2rem;
}
main.settings section.privacy_policy .hidden_words h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
  margin: 0;
}


/* for notification settings  */
main.settings
  section.privacy_policy.notification_settings
  .wrapper:first-child {
  padding: 2rem 1rem 0rem 1rem;
}

main.settings  section.privacy_policy.notification_settings >  .header {
  margin-top: 1.7rem;
  margin-bottom: 1.7rem;
}
main.settings  section.privacy_policy.notification_settings >  .header > h1 {
  margin: 0;
}

main.settings  section.privacy_policy.notification_settings .card_container > .header {
  padding: 1.5rem 1rem;
  margin: 0;
}
main.settings  section.privacy_policy.notification_settings .card_container > .header > h3 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main.settings section.privacy_policy.notification_settings .wrapper {
  padding: 1rem 1rem 0rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main.settings section.privacy_policy.notification_settings .wrapper:last-child {
  padding: 1rem 1rem 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main.settings section.privacy_policy .wrapper h4 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}

main.settings section.privacy_policy .wrapper .left_wrapper {
  display: flex;
  align-items: center;
}

main.settings section.privacy_policy .wrapper p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
  margin: 0;
}

/* media screen  */
@media screen and (min-width: 768px) {
  main.settings section.privacy_policy .card_container {
    min-height: 25.438rem;
  }
  /* main.settings section.privacy_policy .header {
    padding: 1.5rem 2rem;
  } */
  main.settings section.privacy_policy .wrapper {
    padding: 2rem 2rem 0rem 2rem;
  }
  main.settings section.privacy_policy.notification_settings .wrapper {
    /* padding: 2rem 2rem 0rem 2rem; */
    padding-left: 2rem;
    padding-right: 2rem;
  }
  main.settings
    section.privacy_policy.notification_settings
    .wrapper:first-child {
    /* padding: 2rem 2rem 0rem 2rem; */
    padding-left: 2rem;
    padding-right: 2rem;
  }
  main.settings
    section.privacy_policy.notification_settings
    .wrapper:last-child {
    /* padding: 2rem 2rem 0rem 2rem; */
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* profile information  */

main.settings section.profile_information .card_container {
  margin-bottom: 2rem;
}
main.settings section.profile_information .header {
  padding: 1.5rem 1rem;
  margin: 0;
}

main.settings section.profile_information .header h3 {
  margin: 0;
  display: flex;
  align-items: center;
}
main.settings section.profile_information .header h3 a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main.settings section.profile_information .header h3 svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.6rem;
}

main.settings section.profile_information .card_container .wrapper {
  padding: 2rem 1.5rem 0rem 1.5rem;
}

main.settings section.profile_information .banner_container .banner_img {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: 8px;
}

main.settings section.profile_information .banner_container input {
  display: none;
}
main.settings section.profile_information .banner_container label {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-white);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.07);
}

main.settings section.profile_information .banner_container .upload_banner {
  top: 20px;
  right: 20px;
}

main.settings section.profile_information .banner_container .upload_profile {
  right: 50%;
  bottom: 12%;
  transform: translate(-50%, -12%);
}

main.settings section.profile_information .banner_container .profile_img {
  position: absolute;
  left: 50%;
  bottom: -80%;
  transform: translate(-50%, -80%);
  width: 5.813rem;
  height: 5.813rem;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--color-Azure);
}

main.settings section.profile_information .form_container {
  margin-top: 6rem;
}
main.settings section.profile_information label {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-CharcoalGrey);
  display: block;
}
main.settings section.profile_information .input_wrapper input {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0.625rem 0.75rem;
  width: 100%;
  height: 2.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-black);
}

main.settings section.profile_information .input_wrapper {
  margin-bottom: 1rem;
  width: 100%;
}
main.settings section.profile_information .input_wrapper input::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);
}

/* phone input styles  */
main.settings section.profile_information #phone {
  padding-left: 3rem;
}
.intl-tel-input {
  width: 100%;
}

.iti {
  width: 100%;
}

main.settings section.profile_information textarea {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0.625rem 0.75rem;
  height: 4.563rem;
  background: var(--color-white);
  border: 1px solid var(--color-PinkSwan);
  border-radius: 4px;
}

main.settings section.profile_information textarea {
  padding: 0.625rem 0.75rem;
  height: 4.563rem;
  background: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  resize: none;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-black);
}
main.settings section.profile_information textarea::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);
}

main.settings section.profile_information .btn_submit {
  width: 7.875rem;
  height: 2.7rem;
  background: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-white);
  display: block;
  margin-left: auto;
  margin-right: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

main.settings section.profile_information .account_manage {
  margin: 1rem 1rem 2rem 1rem;
}

main.settings section.profile_information .account_manage > h5 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--color-BalticSea);
}

main.settings section.profile_information .account_manage > a {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-RadicalRed);
  text-decoration: underline;
}
#delet_account_modal .modal-body {
  background-color: var(--color-white);
  text-align: center;
}

#delet_account_modal .modal-body img {
  width: 4.375rem;
  height: 4.375rem;
}
#delet_account_modal .modal-body h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: var(--color-CharcoalGrey);
  margin-top: 1rem;
  margin-bottom: 0rem;
}

#delet_account_modal .modal-body p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-CarbonGrey);
}

#delet_account_modal .modal-body .btn_container {
  display: flex;
  justify-content: center;
}
#delet_account_modal .modal-body .btn_container button {
  padding: 0.688rem 1rem;
  width: 7rem;
  height: 2.875rem;
  background: var(--color-Azure);
  border-radius: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-white);
}
#delet_account_modal .modal-body .btn_container button:first-child {
  margin-right: 1rem;
  color: var(--color-BalticSea);
  border: 1px solid var(--color-BalticSea);
  background-color: var(--color-white);
}
/* media screen  */
@media screen and (min-width: 768px) {
  main.settings section.profile_information .card_container {
    margin-bottom: 2rem;
  }
  main.settings section.profile_information .header {
    padding: 1.5rem 2rem;
    margin: 0;
  }
  main.settings section.profile_information .card_container .wrapper {
    padding: 2rem 2rem 0rem 2rem;
  }
  main.settings section.profile_information .card_container .btn_submit {
    width: 11.875rem;
    height: 3rem;
    margin-right: 2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  main.settings section.profile_information .banner_container .profile_img {
    left: 110px;
    bottom: -150px;
    width: 7.813rem;
    height: 7.813rem;
  }

  main.settings section.profile_information .banner_container .upload_profile {
    bottom: -55px;
    left: 150px;
  }
}

/* referral program styles  */
main.settings  {
  padding-right: 0;
}

main.settings  section.referral_program .card_container{
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  margin-top: 0rem;
  padding: 0;
  margin: 0;
}
main.settings  section.referral_program .referral_program_cards {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

main.settings  section.referral_program .referral_program_cards .card {
 width: 100%;
 height: 7.188rem;
 padding: 0.9rem;
 border: none;
 border-radius: 0px 0px 4px 4px;
 border-bottom:3px solid var(--color-PictonBlue);
 background-color: var(--color-white);
 box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
 border-radius: 4px;
 margin-bottom: 1rem;
}


main.settings  section.referral_program .referral_program_cards .card.yellow {
 border-bottom:3px solid var(--color-Butterscotch); 
}
main.settings  section.referral_program .referral_program_cards .card.green {
 border-bottom:3px solid var(--color-MediumGreen); 
}
main.settings  section.referral_program .referral_program_cards .card.purple {
 border-bottom:3px solid var(--color-Meteorite); 
}

main.settings  section.referral_program .referral_program_cards .card:last-child {
margin-bottom: 0rem;
}

main.settings  section.referral_program .referral_program_cards .card h3{
font-family: var(--font-family);
font-weight: 500;
font-size: 1.5rem;
line-height: 2rem;
color: var(--color-BalticSea);
}
main.settings  section.referral_program .referral_program_cards .card svg{
width: 2.188rem;
height: 2.188rem;
}
main.settings  section.referral_program .referral_program_cards .card span{
 font-family: var(--font-family);
 font-weight: 400;
 font-size: 0.875rem;
 line-height: 1.375rem;
 color: var(--color-BalticSea);
 display: block;
 margin-top: auto;
 }

 main.settings  section.referral_program .referral_link_container {
  padding: 0rem 0.8rem;
  background-color: rgba(52, 84, 207, 0.06);
  border: 1px solid var(--color-LavenderPinocchio);
  border-radius: 4px;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
 }
 main.settings  section.referral_program .referral_link_container h3{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 100%;
  color: var(--color-black);
 }
 main.settings  section.referral_program .referral_link_container > div > div > p{ 
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-MountainMist);
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
 }
 main.settings  section.referral_program .referral_link_container .link_url_container{ 
  background: rgba(17, 151, 232, 0.07);
  border-radius: 4px;
  max-width: 50rem;
  padding: 0.4rem 0.6rem;
 }
 main.settings  section.referral_program .referral_link_container svg{ 
  width: 0.938rem;
  height: 0.938rem;
 }
 main.settings  section.referral_program .referral_link_container .link_url_container  p{ 
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.045rem;
  line-height: 1.25rem;
  letter-spacing: -0.417857px;
  color: var(--color-DarkJungleGreen);
  margin: 0;
  margin-left: 0.4rem;

}
main.settings  section.referral_program .referral_link_container button{ 
  background: var(--color-Azure);
  border-radius: 2px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-white);
  padding: 0.4rem 0.6rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.7rem;
}
main.settings  section.referral_program .referral_link_container img {
  width: 8.375rem;
  height: 8.438rem;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main.settings  section.referral_program  .table_container {
  background-color: var(--color-white);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
main.settings  section.referral_program  .table_container .blur_table {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
  z-index: 99;
}

main.settings  section.referral_program  .table_container .header {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
}
main.settings  section.referral_program  .table_container .header h2{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.settings  section.referral_program  .table_container .header .dropdown > div{
padding: 0.563rem 0.6rem;
background-color: var(--color-white);
border: 1px solid var(--color-Geyser);
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
main.settings  section.referral_program  .table_container .header .dropdown > div span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.375rem;
  color: var(--color-GunPowder);
  display: block;
  margin-right: 0.7rem;
}

main.settings  section.referral_program  .table_wrapper {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
} 

/* width */
main.settings  section.referral_program  .table_wrapper::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main.settings  section.referral_program  .table_wrapper::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main.settings  section.referral_program  .table_wrapper::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main.settings  section.referral_program  .table_wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}


main.settings  section.referral_program  .table_container table  {
  text-align: center;
}

main.settings  section.referral_program  .table_container table thead,
main.settings  section.referral_program  .table_container table td,
main.settings  section.referral_program  .table_container table tr,
main.settings  section.referral_program  .table_container table th   {
border: none;
}

main.settings  section.referral_program  .table_container table thead {
  background: rgba(42, 139, 242, 0.1);
}
main.settings  section.referral_program  .table_container table thead th {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: var(--color-MediumGrey)
}
main.settings  section.referral_program  .table_container table thead th svg {
 margin-top: -5px;
}
main.settings  section.referral_program  table>tbody>tr:nth-of-type(even) {
  background-color: var(--color-WhiteSmoke);

}
main.settings  section.referral_program  tbody tr td:first-child {
  text-align: start;
}
main.settings  section.referral_program  tbody tr td:first-child span  {
  display: block;
  max-width: 10rem;
 margin-left: auto;
 margin-right: auto;
 font-family: var(--font-family);
 font-weight: 400;
 font-size: 1rem;
 line-height: 1.75rem;
 color: var(--color-BalticSea);

}
main.settings  section.referral_program  tbody tr td img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 0.7rem;
  margin-top: -0.3rem;
}
main.settings  section.referral_program  tbody td {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
main.settings  section.referral_program  tbody tr:hover {
  background-color: var(--color-WhiteSmoke);
}

/* modal  */
main.settings  section.referral_program #user_referral .modal-body {
  padding: 0;
}
main.settings  section.referral_program #user_referral .profile_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 1.3rem;
}
main.settings  section.referral_program #user_referral .profile_container  .icon_btn{
  position: absolute;
  right: 8px;
  top: -10px;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;

}
main.settings  section.referral_program #user_referral .profile_container > img {
  width: 4.813rem;
  height: 4.813rem;
  border-radius: 50%;
  object-fit: cover;
}
main.settings  section.referral_program #user_referral .profile_container > h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.875rem;
  color: var(--color-Dune);
}
main.settings  section.referral_program #user_referral   h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.875rem;
  color: var(--color-Dune);
  padding-left: 1.3rem;
  padding-right: 1rem;
  margin: 0;
}
main.settings  section.referral_program #user_referral  .referral_container  {
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-LightGrey);
padding: 0.8rem 1rem 0.8rem 1.3rem;
}
main.settings  section.referral_program #user_referral  .referral_container:last-child  {
border: none;
}
main.settings  section.referral_program #user_referral  .referral_container > img  {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
}
main.settings  section.referral_program #user_referral  .referral_container > h6  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.208rem;
  line-height: 2.313rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-left: 0.6rem;
}
/* pagination start  */
main.settings   .number_dropdown {
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-Mercury);
  border-radius: 8px;
  padding: 0.438rem 0.75rem;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 0.875rem;
  color: var(--color-DarkIndigo);
  
}
  
  main.settings   .number_dropdown svg {
   margin-left: 1rem;
   width: 0.625rem;
   height: 0.563rem;
  }
  
main.settings .pagination_container {
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1rem;
}
  main.settings .pagination_container span {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: var(--color-DarkIndigo);
    
  }

  main.settings .pagination_container #pagination_item {
  border: none;
  outline: none;
  box-shadow: none;
  }
  main.settings .pagination_container #pagination_item ul {
  flex-wrap: wrap;
  justify-content: center;
  }
  
  main.settings .pagination_container #pagination_item .page-item.active a {
  background-color: var(--color-Azure);
  border-radius: 4px;
  color: var(--color-white);
  }
  main.settings .pagination_container #pagination_item .page-item:hover a {
  background-color: var(--color-Azure);
  border-radius: 4px;
  color: var(--color-white);
  }
  
  main.settings .pagination_container #pagination_item .page-item a {
  padding: 0.25rem 0.625rem;
  border: none;
  min-width: 2.75rem;
  height: 2rem;
  background: var(--color-AquaHaze);
  border-radius: 4px;
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-Dune);
  margin-bottom: 1rem;
  
  }


 /* media styles  */
 @media screen and (min-width:500px) {
  main.settings  section.referral_program .referral_program_cards .card {
    width: calc(50% - 1rem) ;
    margin-right: 1rem;
   }
   main.settings  section.referral_program .referral_program_cards .card:nth-child(even) {
    width: 50%;
    margin-right: 0rem;
   }
   main.settings  section.referral_program .referral_link_container .link_url_container{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
   }
   main.settings  section.referral_program .referral_link_container button{ 
    margin: 0;
    margin-left: 1rem;
  }
}
@media screen  and (min-width:578px){
  main.settings  section.referral_program  .table_container .header h2{
    font-size: 1.5rem;
  }
  main.settings  section.referral_program  .table_container .header .dropdown > div{
    padding: 0.563rem 0.6rem;
    }
    main.settings  section.referral_program  .table_container .header .dropdown > div span{
      font-size: 1rem;
    }
}
@media screen and (min-width:768px) {
  main.settings  section.referral_program .referral_program_cards .card {
    width: calc(33.33% - 1rem) ;
    margin-right: 1rem;
   }
   main.settings  section.referral_program .referral_program_cards .card:nth-child(even) {
    width: calc(33.33% - 1rem) ;
    margin-right: 1rem;
   }
   main.settings  section.referral_program .referral_program_cards .card:last-child{
    width: 33.33%;
    margin-right: 0rem;
   }
   main.settings .pagination_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    
    }
    main.settings .pagination_container #pagination_item .page-item a { 
      margin-bottom: 0rem;
  }
}
@media screen and (min-width:992px) {
  main.settings  section.referral_program .referral_program_cards {
    margin-top: 0.5rem;
    margin-bottom: 0rem;
  }
  main.settings  section.referral_program .referral_program_cards .card {
    width: calc(20%) ;
    margin-right: 1rem;
   }
   main.settings  section.referral_program .referral_program_cards .card:nth-child(even) {
    width: calc(20%) ;
    margin-right: 1rem;
   }
   main.settings  section.referral_program .referral_program_cards .card:last-child{
    width: 20%;
    margin-right: 0rem;
   }
}


/* stripe connect style  start  */
main.settings  section.stripe_connect .card_container {
  border: none;
  margin: 0;
  outline: none;
  box-shadow: none;
}
main.settings  section.stripe_connect   .stripe_header_container {
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  text-align: center;
 
}
main.settings  section.stripe_connect   .stripe_header_container h2{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}
main.settings  section.stripe_connect   .stripe_header_container button{
  width: 8rem;
  height: 2.5rem;
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.7rem;
}

main.settings  section.stripe_connect .stripe_bank_card_container .stripe_card {
/* display: flex; */
background-color: var(--color-white);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 100% ;
padding: 1rem 2rem 1rem 1rem;
margin-bottom: 1rem;
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_left_side img  {
  width: 3.75rem;
  height: 3.75rem;
  background: var(--color-Water);
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_right_side   {
  margin-left: 0.8rem;
  width: 100%;
  margin-top: 0.3rem;
}
main.settings  section.stripe_connect .stripe_bank_card_container .top_header   {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

main.settings  section.stripe_connect .stripe_bank_card_container .top_header > div  {
  display: flex;
  align-items: center;
}
main.settings  section.stripe_connect .stripe_bank_card_container .top_header h3  {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 2.875rem;
  color: var(--color-Dune);
  margin: 0;
}

main.settings  section.stripe_connect .stripe_bank_card_container .dropdown-menu img {
  width: 1.25rem;
  height: 1.5rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
main.settings  section.stripe_connect .stripe_bank_card_container .top_header .underline  {
   height: 1.563rem;
   width: 1px;
   background-color: var(--color-Dune);
  margin-left: 0.5rem;
  margin-right: 0.3rem;
}

main.settings  section.stripe_connect .stripe_bank_card_container .top_header span  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.10rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_body {
  padding: 0;
  display: block;
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_body .status{
  width: 6rem;
  height: 1.875rem;
  background-color: var(--color-SnowyMint);
  border-radius: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--clor-GreenTeal);
  display: flex;
  align-items: center;
  justify-content: center;
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_body .status.pending{
  background-color: var(--color-RoseWhite);
  color: var(--color-TigerEye);
}
main.settings  section.stripe_connect .stripe_bank_card_container .card_body .account_id {
  display: block;
  margin-top: 0.7rem;
}
main.settings  section.stripe_connect .stripe_bank_card_container .card_body .account_id span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
}
main.settings  section.stripe_connect .stripe_bank_card_container .card_body .account_id p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-GunPowder);
}

main.settings  section.stripe_connect .stripe_bank_card_container .card_body .underline {
  border: 1px solid var(--color-Gainsboro);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}


main.settings  section.stripe_connect .stripe_bank_card_container .card_footer > div:last-child{
  margin: 0;
  margin-top: 1rem;

}
@media screen  and (min-width:576px){
  main.settings  section.stripe_connect .stripe_bank_card_container .stripe_card {
    display: flex;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .card_left_side img  {
    display: block;
    margin:0;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .top_header h3  {
    font-size: 1.5rem;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .top_header span  {
    font-size: 1.25rem;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .card_body .underline {
    width: 80%;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .card_footer {
    display: flex;
    align-items: center;
    padding: 0;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .card_footer > div:last-child{
    margin: 0;
    margin-left: 6rem;
  
  }
}
@media screen  and (min-width:992px){
  main.settings  section.stripe_connect .stripe_bank_card_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main.settings  section.stripe_connect .stripe_bank_card_container .stripe_card {
    width: calc(50% - 0.7rem) ;
  }
}
main.settings  section.stripe_connect .stripe_bank_card_container .card_footer span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
}
main.settings  section.stripe_connect .stripe_bank_card_container .card_footer p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-GunPowder); 
  margin: 0;
}

/* add bank modal  */
main.settings   .modal .modal-body {
  padding: 0;
}
main.settings   .modal .modal-content {
  border: none;
  background-color: var(--color-white);
  box-shadow: 0px 0px 35.3846px rgba(0, 0, 0, 0.1);
  border-radius: 14.1538px;
}


main.settings  .modal .modal-content .header_container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 0.7rem;
  margin-bottom: 2rem;

}
main.settings  .modal .modal-content .header_container > img {
  width: 4.813rem;
  height: 4.813rem;
  background-color: var(--color-Water);
  border-radius: 50%;
}
main.settings  .modal .modal-content .header_container > h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.875rem;
  text-align: center;
  color: var(--color-Dune);
}
main.settings  .modal .modal-content label {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-Boulder);
}
main.settings  .modal .modal-content input {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  padding: 0.56rem 0.7rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-Boulder);
}
main.settings  .modal .modal-content input::placeholder {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-Boulder);
}
main.settings  .modal .modal-content select {
padding: 0.56rem 0.7rem;
box-shadow: none;
border: 1px solid var(--color-PaleAqua);
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-Boulder);
}

main.settings  .modal .modal-content button {
  width: 10.75rem;
  height: 2.5rem;
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
main.settings  .modal .modal-content .close_button {
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  top: 10px;
  right: 7px;
  fill: var(--color-Boulder);
}

/* stepper styles start  */
main.settings section.stripe_connect .stepper_header {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin-bottom: 1rem;
  margin-top: 1rem;

}
@media screen  and (min-width:894px){
  main.settings section.stripe_connect .stepper_header {
    margin-bottom: 1.6rem;
    margin-top: 0rem;
  }  
}

main.settings section.stripe_connect  .responsive_wrap {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  display: block;

}

/* width */
main.settings  section.stripe_connect .responsive_wrap::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main.settings  section.stripe_connect .responsive_wrap::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main.settings  section.stripe_connect .responsive_wrap::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main.settings  section.stripe_connect .responsive_wrap::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}

main.settings section.stripe_connect .stepper {
 display: flex;
 justify-content: space-between;
 flex-direction: row;
 padding-left: 2rem;
 min-width: 50rem;
 padding-bottom: 1rem;
}

@media screen  and (min-width: 847px){
  main.settings section.stripe_connect .stepper {
    padding-bottom: 0rem;
   }
}
main.settings section.stripe_connect .stepper .stepper_item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

main.settings section.stripe_connect .stepper .stepper_item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid var(--color-LavenderPinocchio);
  width: 50%;
  top: 17px;
  left: 0%;
  z-index: 2;
}
main.settings section.stripe_connect .stepper .stepper_item:last-child::before {
 content: none;
 display: none;
}
main.settings section.stripe_connect .stepper .stepper_item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid var(--color-LavenderPinocchio);
  width: 50%;
  top: 17px;
  left: 50%;
  z-index: 2;
}
main.settings section.stripe_connect .stepper .stepper_item:last-child::after {
  content: none;
  display: none;
}
main.settings section.stripe_connect .stepper .step_counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.188rem;
  height: 2.188rem;
  border-radius: 50%;
  background-color: var(--color-white);
  margin-bottom: 0.5rem;
  border: 2px solid var(--color-LavenderPinocchio);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 73%;
  color: var(--color-MountainMist);
} 
main.settings section.stripe_connect .stepper .step_counter > svg {
 width: 1.1rem;
 height: 1.1rem;
} 
main.settings section.stripe_connect .stepper .step_name {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 100%;
  color: var(--color-MountainMist);
  margin-left: -1.75rem;
  margin-top: 0.4rem;
} 
main.settings section.stripe_connect .stepper_item.active  .step_name,
main.settings section.stripe_connect .stepper_item.completed  .step_name 
{
  color: var(--color-BleuDeFrance);
} 
main.settings section.stripe_connect .stepper .stepper_item.active  .step_counter{
  background-color: var(--color-BleuDeFrance);
  border: 3px solid var(--color-SnowDrift);
  color: var(--color-white);
}
main.settings section.stripe_connect .stepper .stepper_item.completed  .step_counter{
  background-color: var(--color-BleuDeFrance);
  border: none;
  color: var(--color-white);
}

main.settings section.stripe_connect .stepper .stepper_item.active  .step_counter::before{
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 2.313rem;
  height: 2.313rem;
  border-radius: 50% ;
  border-left:2px solid var(--color-BleuDeFrance);
  border-bottom: 2px solid var(--color-BleuDeFrance);
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
}
main.settings section.stripe_connect .stepper .stepper_item.active::after,
main.settings section.stripe_connect .stepper .stepper_item.completed::after
{
  border-bottom: 2px solid var(--color-BleuDeFrance);
}
main.settings section.stripe_connect .stepper .stepper_item.active::before ,
main.settings section.stripe_connect .stepper .stepper_item.completed::before
{
  border-bottom: 2px solid var(--color-BleuDeFrance);
}


@media screen  and (min-width:486px){
  main.settings  .modal .modal-body {
    padding: 1rem;
  }
  main.settings  .modal .modal-content button { 
    width: 18.75rem;
    height: 3rem;
  }
}

@media screen  and (min-width:500px){
  main.settings  section.stripe_connect   .stripe_header_container {
    text-align: start;
  }
  main.settings  section.stripe_connect   .stripe_header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  main.settings  section.stripe_connect   .stripe_header_container h2{
    font-size: 1rem;
    margin: 0;
  }
  main.settings  section.stripe_connect   .stripe_header_container button{
    width: 8rem;
    height: 2.5rem;
    font-size: 0.9rem;
    margin: 0;
  }
 }
@media screen  and (min-width:768px){
  main.settings  section.stripe_connect   .stripe_header_container h2{
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
  main.settings  section.stripe_connect   .stripe_header_container button{
    width: 11.125rem;
    height: 3rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
}


/* account type  */
main.settings section.stripe_connect .account_type_container {
  margin-bottom: 1rem;
  max-width: 67rem;
  margin-top: 3rem;
}

main.settings section.stripe_connect .account_type_container > h5 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;  
  color: var(--color-BalticSea);
  margin-bottom: 1.5rem;
}
main.settings section.stripe_connect .account_type_container label {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #242529;
  margin-left: 0.7rem;
  
}

main.settings section.stripe_connect  .btn_container {
  margin-top: 2rem;
 display: flex;
 align-items: center;
 justify-content: end;
}

main.settings section.stripe_connect  .btn_container >button {
  width: 8.125rem;
  height: 3rem;
  padding: 0.5rem;
  background-color: #C4C4C4;
  border-radius: 4px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
text-transform: capitalize;
color: var(--color-white);
}


main.settings section.stripe_connect  .btn_container >button:last-child {
  background-color: var(--color-Azure);
  margin-left: 1rem;
}
 

@media screen  and (min-width:786px){
  main.settings section.stripe_connect .account_type {
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   main.settings section.stripe_connect .account_type .account_item_card {
     width: 49%;
     height: 9.188rem;
   }
   main.settings section.stripe_connect .account_type .account_item_card h6{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  main.settings section.stripe_connect .account_type .account_item_card p{
    font-size: 0.875rem;
    line-height: 1.5rem;
    
  }
  main.settings section.stripe_connect .account_type .account_item_card img{
    width: 5.688rem;
    height: 5.688rem;
  }
  main.settings section.stripe_connect  .btn_container {
    margin-top: 6rem;
  }
  main.settings section.stripe_connect  .btn_container >button {
    width: 11.125rem;    
  }  
}
@media screen  and (min-width:992px){
   main.settings section.stripe_connect .account_type .account_item_card {
     width: 29.25rem;
     height: 9.188rem;
   }  
}

/* forms styles  */
main.settings section.stripe_connect .form_container {
  margin-bottom: 1rem;
  margin-top: 2rem;
}

main.settings section.stripe_connect .form_container  label {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-Boulder);
}
main.settings section.stripe_connect .form_container  input {
  outline: none;
  box-shadow: none;
  background: var(--color-white);
border: 1px solid var(--color-PaleAqua);
border-radius: 4px;
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-Boulder);
padding: 0.6rem 0.7rem;
}
main.settings section.stripe_connect .form_container  input::placeholder {
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-Boulder);
}
main.settings section.stripe_connect .form_container input[type="date"]::-webkit-inner-spin-button,
main.settings section.stripe_connect .form_container input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    opacity: 0;
    z-index: 1;
}
main.settings section.stripe_connect .form_container  select {
  outline: none;
  box-shadow: none;
  background: var(--color-white);
border: 1px solid var(--color-PaleAqua);
border-radius: 4px;
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-Boulder);
padding: 0.6rem 0.7rem;

}
main.settings section.stripe_connect .form_container svg {
  position: absolute;
  right: 10px;
  top: 78%;
  transform: translateY(-78%);
  width: 0.8rem;
  height: 0.8rem;
  z-index: 1;
}

main.settings section.stripe_connect .form_container .btn_personal_info {
  margin-top: 2rem;
}

main.settings section.stripe_connect .success_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
main.settings section.stripe_connect .success_container > img  {
  width: 8.503rem;
  height: 7.641rem;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main.settings section.stripe_connect .success_container > h5  {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-Gravel);
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
main.settings section.stripe_connect .success_container > button  {
  width: 10.5rem;
  height: 3rem;
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width:768px) {
  main.settings section.stripe_connect .success_container > img  {
    width: 11.503rem;
    height: 10.441rem;
  }
  
  main.settings section.stripe_connect .success_container > h5  {
    font-size: 1.5rem;
    line-height: 100%;
  }
  main.settings section.stripe_connect .success_container > button  {
    width: 17.5rem;
    height: 3rem;
  }
}


main.settings section.stripe_connect .account_details_container .header{
 display: flex;
 align-items: center;
 justify-content: start;
 margin: 0;
 margin-top: 1.3rem;
 margin-bottom: 1rem;
}

@media screen  and (min-width:894px){
  main.settings section.stripe_connect .account_details_container .header{
    margin-top: 0.5rem;
    margin-bottom: 1rem;
   }
}
main.settings section.stripe_connect .account_details_container .header > svg{
  width: 2rem;
  height: 1.438rem;
}
main.settings section.stripe_connect .account_details_container .header > h3{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-left: 0.5rem;
}
main.settings section.stripe_connect .account_details_container .card_container {
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  text-align: center;
  padding: 1rem 1rem;
}


main.settings section.stripe_connect .account_details_container img {
  width: 4.5rem;
  height: 4.5rem;
  margin-right: 1rem;
  margin-bottom: 0.8rem;
}

main.settings section.stripe_connect .account_details_container h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.575rem;
  color: var(--color-Dune);
  margin: 0;
  margin-right: 0.6rem;
}

main.settings section.stripe_connect .account_details_container span {
  background-color: var(--color-SnowyMint);
  border-radius: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--clor-GreenTeal);
  padding: 0.3rem 0.8rem;
  text-align: center;
  margin: 0;
  display: block;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

main.settings section.stripe_connect .account_details_container p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1rem;
  color: var(--color-RegentGrey);
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

main.settings section.stripe_connect .account_details_container button {
  width: 5.813rem;
  height: 2.5rem;
  background: var(--color-RubyRed);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  margin-left: auto;
  margin-right: auto;
}

main.settings section.stripe_connect .account_details_container label {
 font-family: var(--font-family);
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
color: var(--color-Boulder);
}
main.settings section.stripe_connect .account_details_container input {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-Onyx);
  border: none;
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid var(--color-PaleAqua);
  border-radius: 0px;
  padding: 0.1rem 0rem;
}
main.settings section.stripe_connect .account_details_container input:read-only {
  background-color: transparent;
}
main.settings section.stripe_connect .account_details_container .address_details_form_container h3 {
  font-family: var(--font-family);
font-weight: 600;
font-size: 1.5rem;
line-height: 1.75rem;
color: var(--color-BalticSea);
}

@media screen  and (min-width:786px){
  main.settings section.stripe_connect .account_details_container .card_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start;
  }
  main.settings section.stripe_connect .account_details_container img {
    width: 4.5rem;
    height: 4.5rem;
    margin-right: 1rem;
    margin-bottom: 0rem;
  }
  main.settings section.stripe_connect .account_details_container .card_left {
    display: flex;
  }
  main.settings section.stripe_connect .account_details_container h6 {

    font-size: 1.5rem;
    line-height: 2.875rem;
  }
  main.settings section.stripe_connect .account_details_container span {
    font-size: 0.875rem;
    line-height: 1rem;
  }
  main.settings section.stripe_connect .account_details_container p {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  main.settings section.stripe_connect .account_details_container button {
    width: 7.813rem;
    height: 3rem;
    margin: 0;
  }
  
}

/* stripe connect style  end  */


/************
*
*   Lists styles 
*
************/
main.lists section .header {
  margin-top: 1.7rem;
  margin-bottom: 2rem;
}
main.lists section .header > h1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main.lists section .toggler_container hr {
  margin: 0;
  color: var(--color-QuillGrey);
  width: 63.11rem;
  display: block;
}

@media screen and (min-width: 1060px) {
  main.lists section .toggler_container hr {
    margin: 0;
    color: var(--color-QuillGrey);
    width: 100%;
    display: block;
  }
}
/* toggler styles  */

main.lists section .toggler_container {
  width: 63.11rem;
}

/* media query for toggler container  */
@media screen and (min-width: 908px) {
  main.lists section .toggler_container {
    width: 100%;
  }
}

main.lists .toggler {
  padding-bottom: 1rem;
  overflow-x: auto;
  scrollbar-color: var(--color-Seashell) var(--color-Dawn);
}

/* width */
main.lists .toggler::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main.lists .toggler::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main.lists .toggler::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main.lists .toggler::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}

main.lists .toggler .toggler_container ul {
  white-space: nowrap;
}
main.lists .toggler .toggler_container ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

main.lists .toggler .toggler_container ul li {
  margin-bottom: 0.3rem;
  text-align: start;
}

main.lists .toggler .toggler_container ul a {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  display: inline-block;
  color: var(--color-RegentGrey);
}

main.lists .toggler .toggler_container ul a.active {
  color: var(--color-BalticSea);
}
main.lists .toggler .toggler_container ul a.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-PictonBlue);
  bottom: -6px;
  left: 0;
}

main.lists .card_container {
  background-color: var(--color-white);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-top: 2rem;
}

main.lists .card_container hr {
  margin: 0;
  padding: 0;
}

main.lists .card_container .header {
  padding: 1.5rem 1rem;
  margin: 0;
}

main.lists .card_container .header h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.lists .card_container .card_body {
  padding: 1rem 1rem 1rem 1rem;
  min-height: 50vh;
}

/* style both for bookmarks and restricted  */
main.lists .card_container .card_body.bookmark_card_body {
  display: flex;
  align-items: center;
  justify-content: center;
}
main.lists .card_container .card_body img.not_found {
  width: 10rem;
  height: 10rem;
}
main.lists .card_container .card_body h5 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  color: var(--color-BalticSea);
  margin-top: 1rem;
}

/* media screen  */
@media screen and (min-width: 576px) {
  main.lists .card_container .card_body img.not_found {
    width: 100%;
    height: 100%;
  }
  main.lists .card_container .header {
    padding: 1.5rem 2rem;
  }
  main.lists .card_container .card_body {
    padding: 2rem 2rem 0rem 2rem;
  }
}

/* people sort of like  */

main.lists .card_container .banner_container .dec {
  margin-top: 2rem;
  margin-left: 0.8rem;
}

main.lists .card_container .banner_container h4 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-bottom: 0.3rem;
}
main.lists .card_container .banner_container h5 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 0.688rem;
  color: var(--color-PictonBlue);
  text-align: start;
  margin: 0;
  display: inline-block;
  padding: 0.3rem;
  background-color: var(--color-TwilightBlue);
  border-radius: 2.14286px;
}

main.lists .card_container .link_container a {
  width: 6.5rem;
  height: 2.5rem;
  background: var(--color-Azure);
  border-radius: 4px;
  display: block;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-bottom: 0.6rem;
  margin-right: 0.6rem;
}

main.lists .card_container .card_wrapper .banner_img {
  width: 100%;
  height: 9.188rem;
  object-fit: cover;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  
}

main.lists .card_container .card_wrapper .profile_img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 4px solid var(--color-Azure);
  object-fit: cover;
  position: absolute;
  left: 50%;
  bottom: -24%;
  transform: translate(-50%);
}

/* recent chats  */
main.lists  .recent_chat_container {
  padding: 2rem 1rem;
}
main.lists  .recent_chat_container .recent_chat {
  background-color: var(--color-WhiteLilac);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


main.lists  .recent_chat_container .recent_chat .recent_chat_left  img {
  width: 3.125rem;
  height: 3.125rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

main.lists  .recent_chat_container .recent_chat .recent_chat_left  h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-Onyx);
  margin: 0;
}
main.lists  .recent_chat_container .recent_chat .recent_chat_left  p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.375rem;
  color: var(--color-FrenchGrey);
  margin: 0;
}
main.lists  .recent_chat_container .recent_chat .recent_chat_right  button {
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  width: 7.438rem;
  height: 2.813rem;
  margin-top: 1rem;
  
}


@media screen and (min-width:576px) {
  main.lists  .recent_chat_container {
    padding: 2rem;
  }
}
@media screen and (min-width:700px) {
  main.lists  .recent_chat_container .recent_chat {
    justify-content: space-between;
    flex-direction: row;
  }
  main.lists  .recent_chat_container .recent_chat .recent_chat_left {
    display: flex;
    align-items: center;
  }
  main.lists  .recent_chat_container .recent_chat .recent_chat_left  img {
    margin: 0;
  }
  main.lists  .recent_chat_container .recent_chat .recent_chat_right  button {
    margin: 0;
    margin-left: 1rem;
  }
}

@media screen and (min-width: 786px) {
  main.lists .card_container .card_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.7rem;
    padding-bottom: 0;
  }

  main.lists .card_container .banner_container {
    display: flex;
    align-items: center;
  
  }
  main.lists .card_container .banner_container .dec {
    margin-left: 0rem;
    margin-left: 4rem;
  }
  main.lists .card_container .card_wrapper .banner_img {
    width: 11.5rem;
    height: 9.188rem;
    object-fit: cover;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
  }

  main.lists .card_container .card_wrapper .profile_img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translateY(-50%);
  }
  main.lists .card_container .link_container a {
    width: 8.5rem;
    height: 3rem;
    margin-bottom: 0rem;
    margin-right: 0rem;
  }
}

/**********
*
* Messages styles
*
**********/

main.messages .header_container {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
main.messages aside {
  background-color: var(--color-white);
}

main.messages .header_container h3 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.875rem;
  color: var(--color-Onyx);
  margin: 0;
}

main.messages hr {
  margin: 0;
}
main.messages .header_container svg {
  cursor: pointer;
}
main.messages .header_container svg:first-child {
  margin-right: 1rem;
}

main.messages .messges_people_container {
  padding: 1rem 0.2rem;
  margin-top: 1rem;
}

main.messages .messges_people_container .search_container {
  background-color: var(--color-AquaHaze);
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
}

main.messages .messges_people_container .search_container input {
  background-color: transparent;
  width: 100%;
  margin-right: 0.5rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-FrenchGrey);
}
main.messages .messges_people_container .search_container input::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-FrenchGrey);
}

main.messages .messges_people_container .search_container svg {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

main.messages .messges_people_container .messges_people {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin: 0;
  cursor: pointer;
}

main.messages .messges_people_container .messges_people.firt_child {
  margin-top: 1rem;
}

main.messages .messges_people_container .messges_people.active {
  background-color: var(--color-WhiteLilac);
  border-radius: 6px;
}

main.messages .messges_people_container .messges_people:hover {
  background-color: var(--color-WhiteLilac);
  border-radius: 6px;
}
main.messages .messges_people_container .messges_people img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
}

main.messages .messges_people_container .messges_people .details {
  margin-left: 0.9rem;
}
main.messages .messges_people_container .messges_people h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-Onyx);
  margin: 0;
}

main.messages .messges_people_container .messges_people p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.375rem;
  margin: 0;
  color: var(--color-FrenchGrey);
}

main.messages .messges_people_container .messges_people .date {
  font-family: var(--font-family3);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-MountainMist);
}

/* chat body  */
main.messages section.chats .header_container {
  display: flex;
  justify-content: space-between;
  background: rgba(217, 217, 217, 0.3);
  backdrop-filter: blur(2px);
  border-radius: 4px 4px 0px 0px;
  padding: 0rem;
  padding: 0.68rem 1rem;
  position: relative;
  z-index: 3;
}

main.messages section.chats .header_container img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border: 50%;
}

main.messages section.chats .header_container h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.875rem;
  color: var(--color-Onyx);
  margin: 0;
  margin-left: 0.5rem;
}

main.messages section.chats .chats_body {
  background-color: var(--color-GhostWhite);
  border-radius: 4px;
  height: calc(100vh - 125.8px);
}

main.messages section.chats .chats_body .chats_body_overflow {
  position: relative;
  height: calc(100vh - 200px);
  overflow: hidden;
  overflow-y: scroll;
  padding: 1.6rem 1rem;
  z-index: 1;
}

main.messages section.chats .chats_body .sender_chat {
  display: flex;
  align-items: end;
  max-width: 40rem;
}

main.messages section.chats .chats_body .receiver_chat {
  max-width: 40rem;
  margin-left: auto;
}

main.messages section.chats .chats_body .chat_wrapper {
  display: flex;
  align-items: end;
  justify-content: end;
}
main.messages section.chats .chats_body .sender_chat .chat_wrapper {
  display: flex;
  align-items: end;
  justify-content: start;
}

main.messages section.chats .chats_body .image_container {
  display: flex;
}
main.messages section.chats .chats_body .image_container img {
  width: 3.438rem;
  height: 3.438rem;
  object-fit: cover;
  border-radius: 0px;
  margin-right: 0.4rem;
}
main.messages section.chats .chats_body .receiver_chat .chat_wrapper  .single_img img {
  width: 9.375rem;
  height: 6.938rem;
  border-radius: 5px 5px 0px 5px;
  object-fit: cover;
  display: block;
  margin-right: 0.4rem;
}
main.messages section.chats .chats_body .sender_chat .chat_wrapper  .single_img img {
  width: 9.375rem;
  height: 6.938rem;
  border-radius: 5px 5px 0px 5px;
  object-fit: cover;
  display: block;
  margin-left: 0.4rem;
}

main.messages section.chats .chats_body .image_container .more_images {
  width: 3.438rem;
  height: 3.438rem;
  background-color: rgba(75, 174, 234, 0.23);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-PictonBlue);
}

main.messages section.chats .chats_body img {
  width: 1.875rem;
  height: 1.875rem;
  object-fit: cover;
  border-radius: 50%;
}

main.messages section.chats .chats_body span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.5rem;
  line-height: 1rem;
  color: var(--color-Liver);
}

main.messages section.chats .chats_body p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-Liver);
  margin: 0;
  padding: 0.938rem 1rem;
  background: var(--color-white);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 0px;
}

main.messages section.chats .chats_body .receiver_chat p {
  background-color: var(--color-Iron);
}

/* audio stlyes  */

main.messages section.chats .chats_body .waveform_container {
  width: 15.4rem;
  background-color: var(--color-white);
  box-shadow: 0px 10px 30px rgba(38, 51, 77, 0.03);
  border-radius: 9.58621px;
  padding: 0rem 1rem;
  height: 4.125rem;
  display: flex;
  align-items: center;
}

main.messages section.chats .chats_body .receiver_chat .waveform_container {
  background-color: var(--color-Iron);
  margin-right: 0.4rem;
}
main.messages section.chats .chats_body .sender_chat .waveform_container {
  background-color: var(--color-white);
}

main.messages section.chats .chats_body #waveform {
  width: 100%;
}

main.messages section.chats .chats_body #waveform > wave > wave {
  background: rgba(75, 174, 234, 0.3);
  border: 0px !important;
}

.player-button {
  margin-right: 0.5rem;
}
.player-button {
  background-color: transparent;
}
.player-button svg {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

main.messages section.chats .chats_body .file_container {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid #e1e1e1;
  box-shadow: 0px 9px 28px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  padding: 0rem 1rem;
  min-height: 4.125rem;
  display: flex;
  align-items: center;
}

main.messages section.chats .chats_body .receiver_chat .file_container {
  margin-right: 0.4rem;
  background-color: var(--color-Iron);
}

main.messages section.chats .chats_body .file_container .desc {
  width: 100%;
  margin-left: 0.6rem;
}
main.messages section.chats .chats_body .file_container h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.188rem;
  color: var(--color-DarkJungleGreen);
  margin: 0;
  margin-bottom: 0 !important;
  padding: 0;
}

main.messages section.chats .chats_body .file_container span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1.188rem;
  color: var(--color-Grey);
  margin: 0;
}

/* chat footer  */

main.messages section.chats .chat_footer {
  height: 54px;
  background-color: var(--color-GhostWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding-top: 1.3rem;
}

main.messages section.chats .container {
  max-width: 49.5rem;
  background-color: var(--color-white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0;
  padding: 0.3rem 0.5rem;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
}
main.messages section.chats .container input {
  width: 100%;
  font-family: var(--font-family3);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-MountainMist);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
main.messages section.chats .container input::placeholder {
  font-family: var(--font-family3);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-MountainMist);
}

main.messages section.chats .container svg {
  margin-left: 0.8rem;
}

/* media screen  */
@media screen and (min-width: 768px) {
  main.messages aside {
    height: calc(100vh - 62.75px);
    overflow: hidden;
    overflow-y: auto;
    background-color: var(--color-white);
  }
  main.messages section.chats .chats_body .waveform_container {
    width: 20rem;
  }
  main.messages .messges_people_container {
    margin-top: 0rem;
  }
  main.messages section.chats .chats_body .file_container {
    width: 20rem;
  }
}

/***********
*
*
*  Home Styles 
*
*
************/

header.dashboard_home {
  width: 100%;
  padding-top: 1rem;
}


header.dashboard_home .search_container_outer {
  padding-left: 1rem;
  padding-right: 1rem;
  /* border: 1px solid red; */
}


header.dashboard_home .search_container_outer #menu_bar {
 width: 1.5rem;
 height: 1.5rem;
 margin-top: 0.5rem;
}

header.dashboard_home .search_container {
  width: 100%;
  background-color: var(--color-white);
  box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.05),
    0px 4px 10px rgba(0, 0, 0, 0.25), 0px 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
}


header.dashboard_home .search_container svg {
  height: 1rem;
  width: 1rem;
}

header.dashboard_home .search_container input {
  font-family: var(--font-family3);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--color-SlateGrey);
  width: 100%;
  padding-left: 0.4rem;
}
header.dashboard_home .search_container input::placeholder {
  font-family: var(--font-family3);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--color-SlateGrey);
}
header.dashboard_home .search_container .search_by {
  border-left: 1px solid var(--color-WhiteSmoke);
  padding: 0.5rem 0.3rem 0.5rem 0.5rem;
  position: relative;
}
header.dashboard_home .search_container .search_by .search_by_header {
  display: flex;
  align-items: center;
}

header.dashboard_home .search_container .search_by span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1rem;
  color: var(--color-SlateGrey);
}



header.dashboard_home .search_container .search_by svg {
  width: 0.938rem;
  height: 0.938rem;
  margin-left: 0.5rem;
}
header.dashboard_home .btn_container {
  display: flex;
  align-items: center;
 justify-content: end;
 margin-right: 0.8rem;
}
header.dashboard_home .btn_container button {
  background: linear-gradient(92.68deg, #e87575 0%, #e41339 100%);
  box-shadow: 6px 6px 25px rgba(42, 139, 242, 0.15),
    4px 4px 25px rgba(42, 139, 242, 0.05),
    10px 6px 25px rgba(42, 139, 242, 0.15);
  border-radius: 6px;
  width: 7.75rem;
  height: 2.6rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.188rem;
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header.dashboard_home .btn_container button:last-child {
  background: linear-gradient(92.68deg, #7cb8f7 0%, #2a8bf2 100%);
  box-shadow: 6px 6px 25px rgba(42, 139, 242, 0.15),
    4px 4px 25px rgba(42, 139, 242, 0.05),
    10px 6px 25px rgba(42, 139, 242, 0.15);
  border-radius: 6px;
  margin-left: 0.6rem;
}

main.dashboard_home .left_main_container {
  padding: 1rem 0.9rem 1rem 0.9rem;
}
main.dashboard_home .posts_input_container {
  background-color: var(--color-white);
  box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.05),
    0px 4px 10px rgba(0, 0, 0, 0.25), 0px 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding-top: 1rem;
  padding-left: 1rem;
  display: flex;
}

main.dashboard_home .posts_input_container > img {
  width: 2.359rem;
  height: 2.359rem;
  object-fit: cover;
  border-radius: 50%;
}
main.dashboard_home .posts_input_container .posts_input {
  margin-left: 0.4rem;
  width: 100%;
}
main.dashboard_home .posts_input_container .posts_input #post_input {
  font-family: var(--font-family3);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.688rem;
  color: var(--color-Dawn);
  width: 100%;
  height: 50px;
  margin-bottom: 0.6rem;
  padding-right: 1rem;
}
main.dashboard_home
  .posts_input_container
  .posts_input
  #post_input::placeholder {
  font-family: var(--font-family3);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.688rem;
  color: var(--color-Dawn);
}


main.dashboard_home .posts_input_container .post_input_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--color-AquaHaze);
}
main.dashboard_home .posts_input_container .post_input_footer input {
  display: none;
}

main.dashboard_home .posts_input_container .post_input_footer label {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 1.5rem;
}


main.dashboard_home .posts_input_container .post_input_footer button {
  width: 5.5rem;
  height: 2.375rem;
  background: linear-gradient(92.68deg, #7cb8f7 0%, #2a8bf2 100%);
  box-shadow: 6px 6px 25px rgba(42, 139, 242, 0.15),
    4px 4px 25px rgba(42, 139, 242, 0.05),
    10px 6px 25px rgba(42, 139, 242, 0.15);
  border-radius: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
 
}
main.dashboard_home .posts_input_container .post_input_footer button  svg{
  width: 1.9rem;
  height: 1.9rem;
}

/* welcome message  */
main.dashboard_home .left_main_container .welcome_container {
  
  margin-top: 2rem;
  margin-bottom: 1.7rem;
}

main.dashboard_home .left_main_container .welcome_container h2 {
  font-family: var(--font-family3);
  font-weight: 700;
  font-size: 1rem;
  line-height: 2rem;
  color: var(--color-Gunmetal);
}
main.dashboard_home .left_main_container .welcome_container p {
  font-family: var(--font-family3);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  color: var(--color-Gunmetal);
}

main.dashboard_home .left_main_container .welcome_container button {
  background-color: var(--color-BleuDeFrance);
  box-shadow: 6px 6px 25px rgba(42, 139, 242, 0.15),
    4px 4px 25px rgba(42, 139, 242, 0.05),
    10px 6px 25px rgba(42, 139, 242, 0.15);
  border-radius: 3.313rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.188rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--color-white);
  margin-left: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;

}
main.dashboard_home .left_main_container .welcome_container button svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}


/* Display all posts  styles  */
main.dashboard_home .left_main_container .all_posts_show_card {
  margin-bottom: 1.5rem;
}
main.dashboard_home .left_main_container .all_posts_show_card .header {
  background-color: var(--color-white);
  box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.05),
    0px 4px 10px rgba(0, 0, 0, 0.25), 0px 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0rem 1.5rem;
}
main.dashboard_home .left_main_container .all_posts_show_card .header img {
  width: 3.344rem;
  height: 3.344rem;
  object-fit: cover;
  border-radius: 50%;
}
main.dashboard_home .left_main_container .all_posts_show_card .header h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main.dashboard_home .left_main_container .all_posts_show_card .header svg {
  width: 1.139rem;
  height: 1.036rem;
}
main.dashboard_home
  .left_main_container
  .all_posts_show_card
  .header
  .dropdown
  svg {
  width: 1.514rem;
  height: 1.514rem;
}
main.dashboard_home .left_main_container .all_posts_show_card .header span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
}

main.dashboard_home .left_main_container .all_posts_show_card .header p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-GreyCloud);
}

main.dashboard_home
  .left_main_container
  .all_posts_show_card
  .card_body
  img:first-child {
  width: 100%;
  height: 20rem;
  max-height: 100%;
  object-fit: cover;
}
main.dashboard_home
  .left_main_container
  .all_posts_show_card
  .card_body
  img:nth-child(2) {
  width: 4.25rem;
  height: 4.25rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


main.dashboard_home
  .left_main_container
  .all_posts_show_card
  .card_footer
  .desc_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  margin-top: 1.5rem;
}

main.dashboard_home .left_main_container .all_posts_show_card .card_footer h1 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.213rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}
main.dashboard_home .left_main_container .card_footer .left_desc span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
}
main.dashboard_home .left_main_container .card_footer .left_desc a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
  color: var(--color-PictonBlue);
  margin-left: 0.6rem;
}

main.dashboard_home .left_main_container .card_footer .right_desc svg {
  width: 1rem;
  height: 0.75rem;
}
main.dashboard_home
  .left_main_container
  .card_footer
  .right_desc
  svg:last-child {
  width: 1rem;
  height: 1.25rem;
  margin-left: 0.5rem;
}

main.dashboard_home .left_main_container .card_footer .right_desc span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.775rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}
main.dashboard_home .left_main_container .card_footer hr {
  margin: 0;
  padding: 0;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
main.dashboard_home .left_main_container .feedback {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
main.dashboard_home .left_main_container .feedback span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}

main.dashboard_home .left_main_container .feedback svg {
  width: 0.938rem;
  height: 0.75rem;
  margin-left: 0.8rem;
  margin-right: 0.1rem;
  margin-top: -5px;
}

/* suggested  posts  */
main.dashboard_home aside {
  padding-right: 0rem;
  padding-top: 0.8rem;
  padding-left: 0.6;
}


main.dashboard_home aside .suggestions_container .suggestion_card_overflow {
  height: 70vh;
  overflow: hidden;
  overflow-y: auto;
  padding-right: 0.2rem;
}

main.dashboard_home aside .suggestions_container h3 {
  font-family: var(--font-familyMontserrat);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 1.313rem;
  color: var(--color-NileBlue);
  margin-bottom: 1rem;
}

main.dashboard_home aside .suggestions_container .suggestion_card {
  width: 100%;
  border: 1.5px solid var(--color-Porcelain);
  border-radius: 8px;
  margin-bottom: 1rem;
}
main.dashboard_home aside .suggestion_card .header_container {
  width: 100%;
  position: relative;
}

main.dashboard_home aside .suggestion_card .header_container > img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: 8px 8px 0px 0px;
}

main.dashboard_home aside .suggestion_card .header_container > .desc {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-left: 1.3rem;
}

main.dashboard_home aside .suggestion_card .header_container > .desc img {
  width: 0.938rem;
  height: 0.923rem;
  object-fit: cover;
  margin-top: -3px;
  margin-right: 0.2rem;
}

main.dashboard_home aside .suggestion_card .header_container > .desc span {
  font-family: var(--font-familyMontserrat);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 1.313rem;
  color: var(--color-white);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}

main.dashboard_home aside .suggestion_card .header_container > .desc p {
  font-family: var(--font-familyMontserrat);
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1.25rem;
  color: var(--color-white);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  max-width: 16rem;
  margin: 0;
  margin-bottom: 0.8rem;
}
main.dashboard_home aside .suggestion_card .header_container > .desc button {
  width: 5.612rem;
  height: 1.938rem;
  background-color: var(--color-white);
  opacity: 0.9;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  font-family: var(--font-familyMontserrat);
  font-weight: 500;
  font-size: 0.688rem;
  line-height: 0.813rem;
  text-align: center;
  color: var(--color-NileBlue);
}
main.dashboard_home aside .suggestion_card .card_footer {
  display: flex;
  align-items: center;
  padding: 1rem 1rem 1.5rem 1rem;
}

main.dashboard_home aside .suggestion_card .card_footer img {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

main.dashboard_home aside .suggestion_card .card_footer :nth-child(2) {
  left: 14px;
  z-index: 2;
}
main.dashboard_home aside .suggestion_card .card_footer :nth-child(3) {
  left: 27px;
  z-index: 1;
}

main.dashboard_home aside .suggestion_card .card_footer p {
  font-family: var(--font-familyMontserrat);
  font-weight: 400;
  font-size: 0.563rem;
  line-height: 0.813rem;
  color: var(--color-SlateGrey);
  margin: 0;
  margin-left: 2.813rem;
}

/* topics styles  */

main.dashboard_home aside .topics {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
main.dashboard_home aside .topics h4 {
  font-family: var(--font-familyMontserrat);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 1.313rem;
  color: var(--color-NileBlue);
}

main.dashboard_home aside .topics .topics_container {
  width: 100%;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-Porcelain);
  border-radius: 8px;
}

main.dashboard_home aside .topics .topic_card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--color-Porcelain);
}

main.dashboard_home aside .topics .topic_card:last-child {
  border-bottom: none;
}
main.dashboard_home aside .topics img {
  width: 2.125rem;
  height: 2.125rem;
  object-fit: cover;
  border-radius: 50%;
}
main.dashboard_home aside .topics h6 {
  font-family: var(--font-familyMontserrat);
  font-weight: 400;
  font-size: 0.813rem;
  line-height: 1rem;
  color: var(--color-SlateGrey);
  margin: 0;
  margin-left: 0.5rem;
}
main.dashboard_home aside .topics svg {
  width: 0.938rem;
  height: 0.874rem;
  margin-left: 0.5rem;
}
main.dashboard_home aside .topics button {
  width: 4.438rem;
  height: 1.938rem;
  background: var(--color-AliceBlue);
  border-radius: 6px;
  font-family: var(--font-familyMontserrat);
  font-weight: 500;
  font-size: 0.688rem;
  line-height: 0.813rem;
  text-align: center;
  color: var(--color-BlueDress);
}


/* media styles  */

@media screen  and (min-width:510px) {
  header.dashboard_home .search_container .search_by {
    padding: 0.5rem 0.3rem 0.5rem 0.7rem;
  }

 }

 @media screen  and (min-width:525px) {
  header.dashboard_home .search_container .search_by {
    padding: 1rem 0.5rem 1rem 0.5rem;
    width: 6.25rem;

  }
 }

@media screen  and (min-width:768px) {
  header.dashboard_home .search_container_outer #menu_bar {
    width: 1.5rem;
    height: 1.5rem;
   }
  header.dashboard_home .search_container_outer {
    padding-left: 3.38rem;
    padding-right: 1rem;
  }
  
  header.dashboard_home .search_container {
    padding-left: 1.6rem;
  }
  header.dashboard_home .search_container svg {
    height: 1.5rem;
    width: 1.5rem;
  }
  header.dashboard_home .search_container .search_by {
    padding: 0.9rem 0.7rem 0.9rem 0.7rem;
    width: auto;
  }
  header.dashboard_home .search_container .search_by span {
    font-size: 1.125rem;
    line-height: 1.125rem;
  }
  main.dashboard_home .left_main_container .welcome_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen  and (min-width:992px) {
  header.dashboard_home .search_container .search_by {
    width: auto;
    padding: 1.1rem 0.5rem 1.1rem 0.5rem;
  }
  header.dashboard_home .search_container .search_by span {
    font-size: 1rem;
    line-height: 1rem;
  }
  
  header.dashboard_home .btn_container {
    margin-left: 0.5rem;
    margin-right: 0px;
    justify-content: start;
  } 
 header.dashboard_home .btn_container button {
    width: 8.75rem;
    height: 3.125rem;
    font-size: 1rem;
    line-height: 1.188rem;
  }
  main.dashboard_home .left_main_container {
    padding: 1rem 0.9rem 1rem 3.4rem;
  }
  main.dashboard_home .posts_input_container > img {
    width: 3.359rem;
    height: 3.359rem;
  
  }
  main.dashboard_home .posts_input_container .post_input_footer label {
    width: 1.688rem;
    height: 1.375rem;
    margin-right: 0.5rem;
  }
  main.dashboard_home .posts_input_container .post_input_footer button {
    width: 9.125rem;
    height: 3.375rem;
    font-size: 1rem;
    line-height: 1.188rem; 
  }
  
  main.dashboard_home .posts_input_container .post_input_footer button  svg{
    width: 3rem;
    height: 3rem;
  }
  main.dashboard_home .left_main_container .welcome_container h2 {
    
    font-size: 1.313rem;
    line-height: 2rem;
 
  }
  main.dashboard_home .left_main_container .welcome_container p {
  
    font-size: 1rem;
    line-height: 1.5rem;
  
  }
  main.dashboard_home .left_main_container .welcome_container button {
    font-size: 1rem;
    line-height: 1.188rem;
    width: 14.375rem;
    height: 3.563rem;
    margin-left: 0.6rem;
  }
  main.dashboard_home .left_main_container .welcome_container button svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.5rem;
  }
  main.dashboard_home .left_main_container .all_posts_show_card .header img {
    width: 4.344rem;
    height: 4.344rem;
  }
  main.dashboard_home .left_main_container .all_posts_show_card .card_footer h1 {
 
    font-size: 1.813rem;
    line-height: 2.125rem;
 
  }
  main.dashboard_home .left_main_container .card_footer .left_desc span {
   
    font-size: 1rem;
    line-height: 1.188rem;
    
  }
  main.dashboard_home .left_main_container .card_footer .right_desc svg {
    width: 1.25rem;
    height: 0.75rem;
  }
  main.dashboard_home
    .left_main_container
    .card_footer
    .right_desc
    svg:last-child {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
  }
  main.dashboard_home aside {
    padding-right: 1.5rem;
 
  }
}

@media screen  and (min-width:1200px) {
  header.dashboard_home .search_container .search_by {
    width: 7.188rem;
    padding: 1.1rem 0.5rem 1.1rem 0.5rem;
  }
  header.dashboard_home .search_container .search_by span {
    font-size: 1rem;
    line-height: 1rem;
  }
}


/***********
*
*   Creator Panel
*
*
************/

main#creator_panel section .header {
  margin-top: 1.7rem;
  margin-bottom: 2rem;
}
main#creator_panel section .header > h1 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}
main#creator_panel section .toggler_container hr {
  margin: 0;
  color: var(--color-QuillGrey);
  width: 30rem;
  display: block;
}

@media screen and (min-width: 526px) {
  main#creator_panel section .toggler_container hr {
    width: 100%;
    display: block;
  }
}


/* media query for toggler container  */
@media screen and (min-width: 908px) {
  main#creator_panel section .toggler_container {
    width: 100%;
  }
}

main#creator_panel .toggler {
  padding-bottom: 1rem;
  overflow-x: auto;
  scrollbar-color: var(--color-Seashell) var(--color-Dawn);
}

/* width */
main#creator_panel .toggler::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main#creator_panel .toggler::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main#creator_panel .toggler::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main#creator_panel .toggler::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}

main#creator_panel .toggler .toggler_container ul {
  white-space: nowrap;
}
main#creator_panel .toggler .toggler_container ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

main#creator_panel .toggler .toggler_container ul li {
  margin-bottom: 0.3rem;
  text-align: start;
}

main#creator_panel .toggler .toggler_container ul a {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  display: inline-block;
  color: var(--color-RegentGrey);
}

main#creator_panel .toggler .toggler_container ul a.active {
  color: var(--color-BalticSea);
}
main#creator_panel .toggler .toggler_container ul a.active::before {
  content: '';
  width: 100%;
  border-bottom: 2px solid var(--color-PictonBlue);
  left: 0;
  position: absolute;
  bottom: -7px;
  
}

main#creator_panel .wrapper {
  padding: 1.5rem 0rem;
}

main#creator_panel .wrapper .header {
  margin: 0;
}

main#creator_panel .wrapper .header h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}

 /* filter styles  */
 main#creator_panel .wrapper .header .filter_options {
  display: flex;
  align-items: end;
  justify-content: start;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
main#creator_panel .wrapper .header .filter_options > div {
  margin-bottom: 1rem;
  width: 100%;
}


main#creator_panel .wrapper .header .filter_options h6 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size:0.875rem;
  line-height: 100%;
  color: var(--color-RegentGrey);
}
main#creator_panel .wrapper .header .filter_options .category_filter .category_filter_container,
main#creator_panel .wrapper .header .filter_options .sortBy_filter .sortBy_filter_container
{
  width: 100%;
  height: 2.125rem;
  border: 1px solid var(--color-Mercury);
  border-radius: 4px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  display: flex;
  
}


main#creator_panel .wrapper .header  .category_filter .category_filter_container span ,
main#creator_panel .wrapper .header .sortBy_filter .sortBy_filter_container span 
{
 margin: 0;
 padding: 0;
 font-family: var(--font-family);
font-weight: 400;
font-size: 1.125rem;
line-height: 100%;
color: var(--color-RegentGrey);
}
main#creator_panel .wrapper .header  .category_filter .category_filter_container svg ,
main#creator_panel .wrapper .header .sortBy_filter .sortBy_filter_container svg 
{
width: 1rem;
height: 0.625rem;
}

main#creator_panel .wrapper .header .filter_options .overview_filter , 
main#creator_panel .wrapper .header .filter_options .details_filter {
  width: 100%;
  height: 2.125rem;
  border: 1px solid var(--color-Mercury);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  cursor: pointer;
}

main#creator_panel .wrapper .header .filter_options .overview_filter.active , 
main#creator_panel .wrapper .header .filter_options .details_filter.active {
  border: 1px solid var(--color-Azure);
}
main#creator_panel .wrapper .header .filter_options .overview_filter.active span  , 
main#creator_panel .wrapper .header .filter_options .details_filter.active span {
 color: var(--color-Azure);
}
main#creator_panel .wrapper .header .filter_options .overview_filter.active svg > path  , 
main#creator_panel .wrapper .header .filter_options .details_filter.active svg > path {
 fill: var(--color-Azure);
}

main#creator_panel .wrapper .header .filter_options .overview_filter {
  display: none;
}
main#creator_panel .wrapper .header .filter_options .overview_filter  span, 
main#creator_panel .wrapper .header .filter_options .details_filter span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  color: var(--color-RegentGrey);
  margin-left: 0.5rem;
}

/* filter styles media query  */
@media screen  and (min-width:454px){
  main#creator_panel .wrapper .header .filter_options > div {
    margin-right: 1rem;
    width: 7.563rem;
  }
  main#creator_panel .wrapper .header .filter_options .category_filter .category_filter_container,
  main#creator_panel .wrapper .header .filter_options .sortBy_filter .sortBy_filter_container
  {
    width: 7.563rem;
    
  }

  main#creator_panel .wrapper .header .filter_options .overview_filter , 
  main#creator_panel .wrapper .header .filter_options .details_filter {
    width: 7.25rem;
    justify-content: space-between;
  }
}

@media screen  and (min-width:800px){
  main#creator_panel .wrapper .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main#creator_panel .wrapper .header .filter_options {
    margin-top: 0rem;
  }
  main#creator_panel .wrapper .header .filter_options > div {
    margin-bottom: 0rem;
  } 
  main#creator_panel .wrapper .header .filter_options > div:last-child {
    margin-right: 0rem;
  } 
}

/* filter style end here  */


main#creator_panel .cards_container {
   display: flex;
   margin-top: 1rem;
   margin-bottom: 1rem;
   flex-wrap: wrap;
   justify-content: space-between;
}  
 
main#creator_panel .cards_container .card {
  width: 100%;
  height: 7.188rem;
  padding: 0.9rem;
  border: none;
  border-radius: 0px 0px 4px 4px;
  background: linear-gradient(91.23deg, #3C53A7 0.82%, #7159C9 46.56%, #B376F3 93.16%);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
}
main#creator_panel .cards_container .card > .circle {
  position: absolute;
  right: 0;
  width: 4rem;
  height: 4rem;
}
main#creator_panel .cards_container .card > .circle_left {
  bottom: 0;
}
main#creator_panel .cards_container .card.purple {
  background: linear-gradient(91.23deg, #3C53A7 0.82%, #7159C9 46.56%, #B376F3 93.16%);
}
main#creator_panel .cards_container .card.orange_dark {
  background: linear-gradient(91.23deg, #FF5C00 0.82%, #F96E0E 42.46%, #F2903D 93.16%);
}
main#creator_panel .cards_container .card.grey {
  background: linear-gradient(91.23deg, #0D4657 0.82%, #247C93 46.56%, #5BADC8 93.16%);
}
main#creator_panel .cards_container .card.pink {
  background: linear-gradient(91.97deg, #D74A55 1.3%, #E76B70 49.41%, #F6979E 98.43%);
}
main#creator_panel .cards_container .card.orange_light {
  background: linear-gradient(91.23deg, #FFA800 4.04%, #FFB31F 46.56%, #FFC147 93.16%);
}
main#creator_panel .cards_container .card.blue {
  background: linear-gradient(91.23deg, #2A8BF2 0.82%, #53A6FF 42.46%, #4BAEEA 93.16%);
}


main#creator_panel .cards_container .card:last-child {
margin-bottom: 0rem;
}

main#creator_panel .cards_container .card h3{
font-family: var(--font-family);
font-weight: 500;
font-size: 2.25rem;
line-height: 2rem;
color: var(--color-white);
}
main#creator_panel .cards_container .card svg{
width: 2.188rem;
height: 2.188rem;
}
main#creator_panel .cards_container .card span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: var(--color-white);
  display: block;
  margin-top: auto;
  }

main#creator_panel  .analytics  .course_enrollment {
  background: var(--color-white);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  padding: 1.5rem 0.7rem 1.5rem 0.9rem;
  margin-bottom: 1rem;
}

main#creator_panel  .analytics  .course_enrollment .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

main#creator_panel  .analytics  .course_enrollment h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}

.month_dropdown {
  height: 2.375rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-Azure);;
  border-radius: 4px;
  position: relative;
}
main#creator_panel  .analytics  .course_enrollment select {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-Azure);
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
}

main#creator_panel  .analytics  .course_enrollment svg  {    
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

main#creator_panel .course_enrollment.right .course_enrollment_graph { 
  max-width: 14.375rem;
  max-height: 18.75rem;
}
main#creator_panel .course_enrollment.right .desc  {
  margin-top: 1rem;
}
main#creator_panel .course_enrollment.right .desc  p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color:var(--color-MulledWine);
  opacity: 0.7;
}

main#creator_panel .course_enrollment.right .desc  svg{
width: 0.938rem;
height: 0.938rem;
}

main#creator_panel .course_enrollment.right .tooltip_container {
     display: flex;
     align-items: center;
     justify-content: center;
     
font-family: var(--font-family);
font-weight: 400;
font-size: 1rem;
line-height: 1.188rem;
color:var(--color-EbonyClay);
opacity: 0.7;
}

main#creator_panel .course_enrollment.right .tooltip_container  div{
  width: 0.938rem;
  height: 0.938rem;
  border-radius: 5px;
  background-color: var(--color-Azure);
margin-right: 0.6rem;     
margin-left: 0.7rem; 
}
main#creator_panel .course_enrollment.right .tooltip_container  div:last-child{
margin-left: 2rem; 
background-color:var(--color-AtomicTangerine);
border-radius: 5px;
}
main#creator_panel .analytics .padding_lg_left {
 padding: 0;
 margin: 0;
  } 
  main#creator_panel .analytics .padding_lg_right {
    padding: 0;
    margin: 0;
     } 
  /* media styles  */
 @media screen and (min-width:500px) {
    main#creator_panel .cards_container .card {
      width:calc(50% - 0.7rem) ;
    } 
    main#creator_panel .cards_container .card:nth-child(odd) {
      margin-right: 0.7rem;
    } 
  }

  @media screen and (min-width:525px) {
    main#creator_panel .wrapper {
       padding: 0.3rem 0rem;
     } 
   }
   
   @media screen and (min-width:768px) {
    main#creator_panel .cards_container {
      justify-content: start;
    }
     main#creator_panel .cards_container .card {
       width:  calc(33.333% - 0.7rem) ;
       margin-right: 0.7rem;
     }
      main#creator_panel .cards_container .card:nth-child(3n) {
       width:calc(33.333%);
       margin-right: 0rem;
     } 
   
    }
    @media screen and (min-width:992px) {
      main#creator_panel .analytics .padding_lg_left {
        padding-left: 0.8rem;
      } 
      main#creator_panel .analytics .padding_lg_right {
        padding-right: 0.7rem;
      } 
      main#creator_panel .cards_container {
      margin-left:0.7rem;
      margin-right:0.7rem;
     }  
      main#creator_panel  .analytics  .course_enrollment {
        padding: 1.5rem 0.7rem 1.5rem 1.5rem;
      }
      main#creator_panel .course_enrollment.right {
        margin-left: 1rem;
      }
    }
    
    @media screen and (min-width:1200px) {
    
     main#creator_panel .cards_container .card {
       width:  calc(20% - 0.7rem) ;
       margin-right: 0.7rem;
     }
     main#creator_panel .cards_container .card:nth-child(3n) {
      width:  calc(20% - 0.7rem) ;
      margin-right: 0.7rem;
     }
     main#creator_panel .cards_container .card:nth-child(5n) {
       width:calc(20%);
       margin-right: 0rem;
     } 

    }

  
    /* enrolls  */
    main#creator_panel  .enrolls .videos {
      margin-top: 1rem;
    }
    main#creator_panel  .enrolls .students_video_card {
      width: 100%;
      border: 1px solid var(--color-QuillGrey);
      border-radius: 8px;
      text-align: center;
      margin-bottom: 1rem;
    }
    main#creator_panel  .enrolls .students_video_card .banner_img {
      width: 100%;
      height: 5.688rem;
      object-fit: cover;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    main#creator_panel  .enrolls .students_video_card .profile_img {
      width: 5.5rem;
      height: 5.5rem;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid var(--color-Azure);
      margin-top: -50px;
    }
    main#creator_panel  .enrolls .students_video_card .video_card_body h4 {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      color: #242529;
      margin: 0;
      margin-top: 0.7rem;
    }
    main#creator_panel  .enrolls .students_video_card .video_card_body p {
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.375rem;
      color: var(--color-RegentGrey);
      margin: 0;
    }
    main#creator_panel  .enrolls .students_video_card .video_card_body span {
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1.5rem;
      color: var(--color-CarbonGrey);
    }
    
    main#creator_panel  .enrolls .students_video_card .video_card_body button {
      width: 9.5rem;
      height: 3rem;
      background-color: var(--color-Azure);
      border-radius: 4px;
      font-family: var(--font-family);
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.5rem;
      text-align: center;
      text-transform: capitalize;
      color: var(--color-white);
      margin-left: auto;
      margin-right: auto;
      margin-top: 0.7rem;
      margin-bottom: 0.9rem;
    }
    
    main#creator_panel  .enrolls .video_card  {
      background-color: var(--color-white);
      box-shadow: 0px 4px 20px rgba(1, 11, 60, 0.07);
      border-radius: 6px;
      margin-bottom: 1rem;
    }
    main#creator_panel  .enrolls .video_card  .thumbnail_container img {
      width: 100%;
      height: 11.25rem;
      object-fit: cover;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }

    main#creator_panel  .enrolls .video_card  .thumbnail_container span {
      position: absolute;
      right: 9px;
      top: 10px;
      padding: 0.25rem 0.625rem;
      height: 1.75rem;
      background-color: var(--color-Amour);
      border-radius: 22px;
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1.25rem;
      text-align: center;
      color:var(--color-RubyRed);
    }
 
    main#creator_panel  .enrolls .video_card  .thumbnail_container span.green {
      background-color:var(--color-Honeydew);
      color:var(--color-LimeGreen);
    }

    main#creator_panel  .enrolls  .video_card_body_container {
      padding: 1rem;

    }
    main#creator_panel  .enrolls  #card_dropdown > ul > li > a {
      padding: 0.5rem 0.75rem;

    }
    main#creator_panel  .enrolls  .video_card_body_container .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      margin-bottom: 0.9rem;
    }
    main#creator_panel  .enrolls  .video_card_body_container .header h4  {
      font-family: var(--font-family);
      font-weight: 500;
      font-size: 1.25rem;
      line-height: 1.75rem;
      color: var(--color-BalticSea);
      margin: 0;
    }
    main#creator_panel  .enrolls  .video_card_body_container .header #overview_header{
      display: none;
    }
    
    main#creator_panel  .enrolls  .video_card_body_container #tags_container{
      display: none;
    }
    main#creator_panel  .enrolls  .video_card_body_container .header .tags_container {
      display: flex;
    }
    main#creator_panel  .enrolls  .video_card_body_container .header .tags_container span {
      display: flex;
      padding: 0.25rem 0.5rem;
      height: 1.75rem;
      background-color: var(--color-TwilightBlue);
      border-radius: 4px;
      font-family:var(--font-family);
      font-weight: 500;
      font-size: 0.75rem;
      line-height:1.25rem;
      color: var(--color-PersianGreen);
      text-align: center;
      margin-right: 0.5rem;
    }
    main#creator_panel  .enrolls  .video_card_body_container .header .tags_container span.pink {
      color:#E41993 ;
      background-color: #FFEEF4;  
    }

    main#creator_panel  .enrolls  .video_card_body_container .desc h6{
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5rem;
      color:var(--color-RegentGrey);
      margin: 0;
      display: flex;
      align-items: center;
      margin-bottom: 0.6rem;
    }
    main#creator_panel  .enrolls  .video_card_body_container .desc h6 svg {
     width: 1rem;
     height: 1rem;
     margin-top: -3px;
     margin-right: 0.5rem;
    }
    
    main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 1rem;
  
    }
    main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  .desc_profile_right span:first-child   {
      font-family: var(--font-family);
      display: inline-block;
      font-weight: 400;
      font-size: 0.625rem;
      line-height: 0.688rem;
      color: var(--clor-GreenTeal);
      background: rgba(0, 182, 73, 0.1);
      border-radius: 2.14286px;
      padding: 4.14286px 6.28571px;
      margin: 0;
      display: none;
    }
    main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  img  {
      width: 2.188rem;
      height: 2.188rem;
      border: 2px solid var(--color-white);
      filter: drop-shadow(0px 10px 14px rgba(1, 11, 60, 0.1));
      border-radius: 50%;
      object-fit: cover;
    
   }
   
   main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  h6  {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1rem;
    color:var(--color-CarbonGrey);
    margin: 0;
 }
 main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  span  {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height:1.5;
    color:var(--color-CarbonGrey);
   }
   main#creator_panel  .enrolls  .video_card_body_container .desc_profile_container  .desc_profile_desc span   {
    font-family: var(--font-family);
   font-weight: 400;
    font-size: 0.625rem;
    line-height: 0.688rem;
    color: var(--clor-GreenTeal);
    background: rgba(0, 182, 73, 0.1);
    border-radius: 2.14286px;
    padding: 2.14286px 4.28571px;
    margin: 0;
 }

 main#creator_panel  .enrolls  .underline {
  height: 0;
  border-top:1px solid var(--color-Porcelain);
   
 }
 main#creator_panel  .enrolls .video_card_footer
 {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }

 main#creator_panel  .enrolls .video_card_footer .price_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  }
  main#creator_panel  .enrolls .video_card_footer .overview_desc {
    display: none;
  }
  
 main#creator_panel  .enrolls .video_card_footer span 
 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color:var(--color-Night);
 }


 main#creator_panel  .enrolls .video_card_footer a 
 {
  font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-CharcoalGrey);
 }

 main#creator_panel  .enrolls .video_card_footer a:hover
 {
  text-decoration: underline;
 }

 main#creator_panel  .enrolls  .number_dropdown {
   display: flex;
   align-items: center;
   background-color: var(--color-white);
  border: 1px solid var(--color-Mercury);
  border-radius: 8px;
  padding: 0.438rem 0.75rem;
  margin-left: 1rem;
  margin-right: 1rem;

 }

 main#creator_panel  .enrolls  .number_dropdown svg {
 margin-left: 1rem;

}

/* overview style start  */
@media screen and (min-width:900px){
  main#creator_panel .wrapper .header .filter_options .overview_filter {
    display: flex;
  }
  main#creator_panel  .enrolls .overview_video_card {
    display: flex;
  }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container {
    padding: 0.5rem 1rem 0.5rem 1rem;
  }
  main#creator_panel  .enrolls .overview_video_card .video_card_body_container .header .tags_container {
    display: none;
  }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container #details_header  {
    display: none;
  }
  main#creator_panel  .enrolls .overview_video_card   .video_card_body_container .header #overview_header{
    display: block;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--color-BalticSea);
    margin: 0;
  }
  main#creator_panel  .enrolls .overview_video_card .video_card_body_container #tags_container {
    display: flex;
  }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container  .tags_container span {
    display: flex;
    padding: 0.25rem 0.5rem;
    height: 1.75rem;
    background-color: var(--color-TwilightBlue);
    border-radius: 4px;
    font-family:var(--font-family);
    font-weight: 500;
    font-size: 0.75rem;
    line-height:1.25rem;
    color: var(--color-PersianGreen);
    text-align: center;
    margin-right: 0.5rem;
  }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container .tags_container span.pink {
    color:#E41993 ;
    background-color: #FFEEF4;  
  }
  
  main#creator_panel  .enrolls .overview_video_card  .thumbnail_container img {
    width: 12.313rem;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
  }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container .desc > h6{
    display: none;
  }
  main#creator_panel  .enrolls .overview_video_card .underline {
    display: none;    
}
main#creator_panel  .enrolls .overview_video_card .video_card_body_container .desc_profile_container  {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  
  }
 
  main#creator_panel  .enrolls .overview_video_card .video_card_body_container .desc_profile_container .desc_profile_desc span  {
    display: none;
    
    }
  main#creator_panel  .enrolls .overview_video_card  .video_card_body_container .desc_profile_container .desc_profile_right {
    margin-top: 0rem;
  }
main#creator_panel  .enrolls .overview_video_card .video_card_body_container .desc_profile_container  .desc_profile_right span:first-child   {
  font-family: var(--font-family);
  display: inline-block;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.688rem;
  color: var(--clor-GreenTeal);
  background: rgba(0, 182, 73, 0.1);
  border-radius: 2.14286px;
  padding: 4.14286px 6.28571px;
  margin: 0;
  }
  main#creator_panel  .enrolls .overview_video_card .video_card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.7rem;
  }
  main#creator_panel  .enrolls .overview_video_card .video_card_footer .price_container {
    display: flex;
    align-items: center;
    justify-content: end;
    }
    main#creator_panel  .enrolls .overview_video_card .video_card_footer .overview_desc {
      display: block;
      display: flex;
      align-items: center;
    }
    main#creator_panel  .enrolls .overview_video_card  .video_card_footer .overview_desc h6{
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5rem;
      color:var(--color-RegentGrey);
      margin: 0;
      display: flex;
      align-items: center;
      margin-bottom: 0rem;
      margin-right: 1rem;
    }
    main#creator_panel  .enrolls .overview_video_card   .video_card_footer .overview_desc h6 svg {
      width: 1rem;
      height: 1rem;
      margin-top: -3px;
      margin-right: 0.5rem;
     }
     main#creator_panel  .enrolls .overview_video_card .video_card_footer a 
      {
        padding: 0;
      font-family: var(--font-family);
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.5rem;
      color: var(--color-Azure);
      padding: 3px 7px;
      width: 109px;
      height: 30px;
      border: 1px solid var(--color-Azure);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 1rem;
      }
     main#creator_panel  .enrolls .overview_video_card .video_card_footer a > svg > path 
      {
      fill:var(--color-Azure);
      }
      main#creator_panel  .enrolls .overview_video_card .video_card_footer a:hover
      {
      text-decoration:none;
      }
}

/* orders  */
main#creator_panel section.orders  .wrapper {
  padding: 0;
  background-color: var(--color-white);
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.06);
  margin-top: 1rem;
}
@media screen and (min-width:575px){
  main#creator_panel section.orders  .wrapper.spacing_pagination {
    margin-top: 0rem;
  } 
}
main#creator_panel section.orders  .wrapper .header{
  padding: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

main#creator_panel section.orders  .wrapper .header .filter_options_container .serach_container{
 display: flex;
 align-items: center;
 justify-content: space-between;
  padding: 0.5rem 1rem;
  width: 100%;
  height: 2.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-Geyser);
  border-radius: 5px;
  margin-right: 0rem;
  margin-top: 1rem;
}

main#creator_panel section.orders  .wrapper .header .filter_options_container .serach_container input{
border: none;
outline: none;
box-shadow: none;
}
main#creator_panel section.orders  .wrapper .header .filter_options_container .filter{
  padding: 0.563rem 1rem;
  height: 2.5rem;
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-Geyser);
  border-radius: 5px;
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
main#creator_panel section.orders  .wrapper .header .filter_options_container .filter > div {
  margin: 0;
 width: 100%;
}
@media screen  and (min-width:768px){
  main#creator_panel section.orders  .wrapper .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main#creator_panel section.orders  .wrapper .header .filter_options_container{
    display: flex;
    align-items: center;
   }
   main#creator_panel section.orders  .wrapper .header .filter_options_container .serach_container{
     width: 19.313rem;
     height: 2.5rem;
     margin-right: 0.7rem;
     margin-top: 0rem;
   }
   main#creator_panel section.orders  .wrapper .header .filter_options_container .filter{
    display: flex;
    align-items: center;
    margin-top: 0rem;
    /* width: 8rem; */
  }
}
main#creator_panel section.orders  .wrapper .header .filter_options_container .filter.all_filter{
margin-right: 0.7rem;

}
main#creator_panel section.orders  .wrapper .header .filter_options_container .filter svg{
 width: 0.625rem;
 height: 1.125rem;
 margin-left: 1rem;
}

main#creator_panel section.orders .table_wrapper {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
} 

/* width */
main#creator_panel section.orders .table_wrapper::-webkit-scrollbar {
  height: 5px;
}

/* Track */
main#creator_panel section.orders .table_wrapper::-webkit-scrollbar-track {
  background: var(--color-Seashell);
}

/* Handle */
main#creator_panel section.orders .table_wrapper::-webkit-scrollbar-thumb {
  background: var(--color-Dawn);
}

/* Handle on hover */
main#creator_panel section.orders .table_wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-DavyGrey);
}


main#creator_panel section.orders .table_container table  {
  text-align: center;
}

main#creator_panel section.orders .table_container table thead,
main#creator_panel section.orders .table_container table td,
main#creator_panel section.orders .table_container table tr,
main#creator_panel section.orders .table_container table th   {
border: none;
}

main#creator_panel section.orders .table_container table thead {
  background: rgba(42, 139, 242, 0.1);
}
main#creator_panel section.orders .table_container table thead th {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: var(--color-MediumGrey)
}
main#creator_panel section.orders .table_container table thead th svg {
 margin-top: -5px;
}
main#creator_panel section.orders table>tbody>tr:nth-of-type(even) {
  background-color: var(--color-WhiteSmoke);

}
main#creator_panel section.orders tbody tr td:first-child {
  text-align: start;
}
main#creator_panel section.orders tbody tr td:first-child span  {
  display: block;
  max-width: 10rem;
 margin-left: auto;
 margin-right: auto;
 font-family: var(--font-family);
 font-weight: 400;
 font-size: 1rem;
 line-height: 1.75rem;
 color: var(--color-BalticSea);

}
main#creator_panel section.orders  tbody tr td img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 0.7rem;
  margin-top: -0.3rem;
}
main#creator_panel section.orders  tbody td {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
main#creator_panel section.orders  tbody tr:hover {
  background-color: var(--color-WhiteSmoke);
}


/* pagination  */
main#creator_panel .pagination_container {
margin-top: 1rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width:768px){
  main#creator_panel .pagination_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding-left: 0.8rem;
   
    }
}
main#creator_panel .pagination_container #pagination_item {
   border: none;
   outline: none;
   box-shadow: none;
}
main#creator_panel .pagination_container #pagination_item ul {
  flex-wrap: wrap;
  justify-content: center;
}

main#creator_panel .pagination_container #pagination_item .page-item.active a {
  background-color: var(--color-Azure);
  border-radius: 4px;
  color: var(--color-white);
}
main#creator_panel .pagination_container #pagination_item .page-item:hover a {
  background-color: var(--color-Azure);
  border-radius: 4px;
  color: var(--color-white);
}

main#creator_panel .pagination_container #pagination_item .page-item a {
  padding: 0.25rem 0.625rem;
  border: none;
  min-width: 2.75rem;
  height: 2rem;
  background: var(--color-AquaHaze);
  border-radius: 4px;
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
font-weight: 400;
font-size: 0.75rem;
line-height: 0.875rem;
color: var(--color-Dune);
margin-bottom: 1rem;

}

@media  screen and (min-width: 768px) {
  main#creator_panel .pagination_container #pagination_item .page-item a { 
    margin-bottom: 0rem;
  }
}

/* courses header styles  */
section.courses .header_container {
  margin: 0;
  margin-top: 1rem;
  
}

section.courses .header_container nav{
 border: none;
 outline: none;
 box-shadow: none;
 margin: 0;
 padding: 0;  
}
section.courses .header_container nav ol {
  margin: 0;
}
section.courses .header_container nav ol a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-PaleSky);
}
section.courses .header_container nav li.active {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
}

section.courses .header_container a.upload_courses {
  width: 7.2rem;
  height: 2.5rem;
  background: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75rem;
  text-transform: capitalize;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-top: 0.5rem;

}

  /* media screen  */
@media screen  and (min-width:786px){
  section.courses .header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  section.courses .header_container a.upload_courses {
    width: 11.875rem;
    height: 3rem;
    margin-top: 0;
  
  }
}

/* add new course styles */
section.add_new_course .form_container {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0;
}
section.add_new_course .form_container .header_container {
  display: block;
  padding: 0;
  margin: 0;
  border-right: 1px solid var(--color-QuillGrey);
  border-bottom: 1px solid var(--color-QuillGrey);
  margin-bottom: 1rem;
}

section.add_new_course .form_container .header_container .heading{
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
  margin-top: 0.7rem;
  padding-left: 0.66rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

section.add_new_course .form_container .header_container .heading:last-child{
  margin-bottom: 0rem;

}
section.add_new_course .form_container .header_container .heading.active{
  border-left:3px solid var(--color-Azure) ;
  padding-left: 0.5rem;
}
section.add_new_course .form_container .header_container .heading span{
 margin-left: 0.5rem;
 font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-CharcoalGrey);
}
section.add_new_course .form_container .header_container .heading svg{
width: 1rem;
height: 1rem;
}

section.add_new_course .course_data_form {
  border: 1px solid var(--color-QuillGrey);
  border-radius: 6px;
}

section.add_new_course .course_data_form  .header{
 padding:0.8rem 1rem;
}
section.add_new_course .course_data_form  .header{
  padding:0.8rem 1rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 2rem;
  color: var(--color-Night);
 }

 section.add_new_course .course_data_form .underline {
  height: 0;
  border: 1px solid var(--color-Gainsboro);
 }
 section.add_new_course .course_data_input_container  {
  padding:0.8rem 1rem;
 }

 section.add_new_course .course_data_input_container label {
  font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.375rem;
color: var(--color-CharcoalGrey);
 }

 section.add_new_course .course_data_input_container input {
 outline: none;
 box-shadow: none;
  height: 2.625rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.375rem;
color: var(--color-PinkSwan);  
 }

 section.add_new_course .course_data_input_container input::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);  
  } 

  section.add_new_course .course_data_input_container .tags_container {
    display: flex;
    align-items: center;
    margin-top: 1rem;
  }
  section.add_new_course .course_data_input_container .tags_container  > div  {
    padding: 0.5rem 0.75rem;    
    width: 5.063rem;
    height: 2.375rem;
    background-color: var(--color-AquaHaze);
    border-radius: 4px;
  }

  section.add_new_course .course_data_input_container .tags_container span  {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--color-CarbonGrey);
  }
  section.add_new_course .course_data_input_container .tags_container svg  {
   position: absolute;
   top: -4px;
   right: -4px;
  }
  /* textarea Editor styles  */
  .tox.tox-tinymce{
    border: 1px solid var(--color-QuillGrey) !important;
   border-radius: 4px;
  }
 
  section.add_new_course   .tox:not(.tox-tinymce-inline) .tox-editor-header {
    border: none;
    box-shadow: none;
    background-color: var(--color-Alabaster) !important;
    border-bottom: 1px solid var(--color-QuillGrey);
    border-radius: 4px 4px 0px 0px;
   
  }


  section.add_new_course  .tox-toolbar-overlord{
    background: var(--color-Alabaster);
  }
  section.add_new_course .tox-toolbar--scrolling{
    background: var(--color-Alabaster) !important;
  }

  section.add_new_course  .tox-toolbar__primary {
    background: var(--color-Alabaster) !important;
  }
    
  section.add_new_course .tox-edit-area{
   padding:10px; 
   }

section.add_new_course .course_data_input_container select {
  background-color: var(--color-white);
  border: 1px solid var(--color-PaleAqua);
  border-radius: 4px;
  padding: 0.3rem 0.3rem;
  margin: 0;
  width: 100%;
  height: 2.625rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);  
  outline: none;
}

section.add_new_course .course_data_input_container .switch {
  position: relative;
  display: inline-block;
  background-color: var(--color-MountainMist);
  border-radius: 26px;
  width: 3rem;
  height: 1.375rem;
  margin-left: 1rem;
}

section.add_new_course .course_data_input_container .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

section.add_new_course .course_data_input_container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-MountainMist);
  -webkit-transition: .4s;
  transition: .4s;
}

section.add_new_course .course_data_input_container .slider:before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-white);
  -webkit-transition: .4s;
  transition: .4s;
}

section.add_new_course .course_data_input_container input:checked + .slider {
  background-color: var(--color-Azure);
}

section.add_new_course .course_data_input_container input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
section.add_new_course .course_data_input_container  .slider.round {
  border-radius: 2.125rem;
}
section.add_new_course .course_data_input_container .slider.round:before {
  border-radius: 50%;
}
section.add_new_course .course_data_input_container .upload_image_container img {
  width: 100%;
  height: 15.813rem;
  object-fit: cover;
}

section.add_new_course .course_data_input_container .upload_image_container p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-PinkSwan);  
  color: var(--color-CarbonGrey);
  margin-top: 1.2rem;
}
section.add_new_course .course_data_input_container .upload_image_container input {
  display: none;
}

section.add_new_course .course_data_input_container .upload_image_container .file_image {
padding: 0.563rem 0.75rem;
width: 100%;
height: 2.5rem;
background-color: var(--color-white);
border: 1px solid var(--color-PaleAqua);
border-radius: 4px;
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.375rem;
color: var(--color-PinkSwan);
}

section.add_new_course .course_data_input_container .upload_image_container button {
  padding: 0.656rem 1.063rem;
  background-color: transparent;
  height: 2.5rem;
  border: 1px solid var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height:1.188rem;
  color: var(--color-Azure);
  margin-left: auto;
  margin-top: 1rem;
}

section.add_new_course .btn_container {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 2rem;
}
section.add_new_course .btn_container button {
padding: 0.75rem 1.5rem;
width: 6.063rem;
height: 3rem;
border: 1px solid var(--color-RegentGrey);
border-radius: 4px;
background-color: var(--color-white);
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
text-transform: capitalize;
color: var(--color-RegentGrey);
}

section.add_new_course .btn_container button:last-child {
background: var(--color-Azure);
border-radius: 4px;
color: var(--color-white);
margin-left: 1rem;
border: none;
}

section.add_new_course .btn_container .publish_course_btn {
  width: 10rem;
  height: 2.8rem;

}
/* media screen  */
@media screen  and (min-width:786px){
  section.add_new_course .btn_container .publish_course_btn {
    width: auto;
    height: 3rem;
  }
 }
@media screen  and (min-width:992px){
  section.add_new_course .form_container .header_container {
    margin-right: 1rem;
  }
  section.add_new_course .course_data_input_container .upload_image_container p {
    margin-top: 0rem;
  }
  section.add_new_course .course_data_input_container .upload_image_container .file_image {
    width: 17.375rem;
    }
    section.add_new_course .course_data_input_container .upload_image_container button {
      margin-left: 1rem;
      margin-top: 0rem;
    }
}

/* add new course  */
section.add_new_course .course_data_input_container .drag_file_hide {
  opacity: 0;
  width: 100%;
  height: 8.875rem;
  position: absolute;
  bottom: 7px;
  left: 0;
  z-index: 1;
}

section.add_new_course .course_data_input_container .drag_and_drop_label {
 display: block;
 width: 100%;
 height: 8.875rem;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 border: 1px dashed var(--color-PaleAqua);
}
section.add_new_course .course_data_input_container .drag_and_drop_label svg {
 width: 2.125rem;
 height: 1.938rem;
}
section.add_new_course .course_data_input_container .drag_and_drop_label p {
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.375rem;
color: var(--color-RegentGrey);
margin: 0;
padding: 0;
margin-top: 0.8rem;
}

section.add_new_course .course_data_input_container .btn_add_lesson {
  padding: 0.906rem 1.063rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-Azure);
  border-radius: 4px;  
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-Azure);
  margin-left: auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
section.add_new_course .course_data_input_container .btn_add_lesson svg {
  width: 0.729rem;
  height: 0.729rem;
  margin-right: 0.5rem;
}

@media screen  and (min-width:768px){
  section.add_new_course .course_data_input_container .btn_add_lesson { 
    width: 9.188rem;
    height: 3.063rem;

  }
}

/* course_details */
section.course_details .header_container .btn_container {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
section.course_details .header_container button  {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    padding: 0.55rem 0.7rem;
    width: 9rem;
    height: 2.7rem;
    border: 1px solid var(--color-RegentGrey);
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.5rem;
    text-transform: capitalize;
    color: var(--color-RegentGrey);
    margin-left: 1rem;
}

section.course_details .header_container button:last-child  {
  background-color: var(--color-Azure);
  color: var(--color-white);
  border: none;
}
section.course_details .course_desc_container .header_container{
  margin-top: 1rem;
  margin-bottom: 1rem;
 }

section.course_details .course_desc_container h1{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
  margin: 0;
  text-align: center;
 }

 section.course_details .course_desc_container span{
    padding: 0.25rem 0.5rem;
    width: 5.875rem;
    height: 1.875;
    background-color: var(--color-Honeydew);
    border-radius: 4px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--color-LimeGreen);
    text-align: center;
    display:block;
    margin-left:auto ;
    margin-right:auto ;
    margin-top: 0.5rem;
 }

 
 section.course_details .course_desc_container p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.125rem;
  line-height:1.875rem;
  color: var(--color-RegentGrey);
 }
 
 section.course_details .course_desc_container .profile_container{
 display: flex;
 align-items: center;
 }
 
 section.course_details .course_desc_container img{
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
  }
 section.course_details .course_desc_container h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-DarkJungleGreen);
  margin: 0;
  margin-left: 0.6rem;
  }
 
  section.course_details #leacture_accordion{
    border: none;
    outline: none;
    box-shadow: none;
    background: rgba(42, 139, 242, 0.06);
    border-radius: 6px;
    margin-top: 1.5rem;
  }
  section.course_details #leacture_accordion > h2{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--color-DarkJungleGreen);
    padding: 0.7rem 1rem 0rem 1rem;

  }

  section.course_details #leacture_accordion .accordion_body_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.8rem 1rem;
  }
  section.course_details #leacture_accordion .accordion_body_container:last-child {
    border: none;
  }
 
  section.course_details #leacture_accordion  .accordion_lesson_desc{
    display: flex;
    align-items: center;
    margin: 0;
  }
  
  section.course_details #leacture_accordion  .accordion_lesson_desc img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 4px;
  }
  section.course_details #leacture_accordion  .accordion_lesson_desc .play_icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(.jpg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.course_details #leacture_accordion  .accordion_lesson_desc svg {
   width: 1rem;
   height: 1rem;
   }

   section.course_details #leacture_accordion  .accordion_lesson_desc h6 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin: 0;
    color: var(--color-DarkJungleGreen);
    padding: 0;
    }
   section.course_details #leacture_accordion .accordion_lesson_desc span  {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5rem;
    color: var(--color-CarbonGrey);
    margin: 0;
  }

  section.course_details .preview_course_container img {
    width: 100%;
    height: 17.75rem;
    border-radius: 3.98991px;
    object-fit: cover;
  }

  section.course_details .preview_course_container .preview_desc {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
  }
  section.course_details .preview_course_container  .preview_desc svg {
    width: 4.375rem;
    height: 4.375rem;
  }
  section.course_details .preview_course_container  .preview_desc h5 {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-white);
    margin-top: 1rem;
  }
  
  section.course_details .preview_course_container  .preview_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
  section.course_details .preview_course_container  .preview_footer  h6{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--color-CarbonGrey);
    margin: 0;
  }
  section.course_details .preview_course_container  .preview_footer  svg{
    width: 1.375rem;
    height: 1.188rem;
  }
  section.course_details .preview_course_container  .preview_footer  span{
    font-family: var(--font-familyManrope);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: var(--color-Azure);
  }
  
 /* media screen  */
  @media screen and (min-width:586px) { 
    section.course_details .course_desc_container .header_container{
      display: flex;
      align-items: center;
      justify-content: space-between;
     }
     section.course_details .course_desc_container span{
      padding: 0.25rem 0.5rem;
      width: 5.875rem;
      height: 1.875;
      font-size: 0.875rem;
      line-height: 1.375rem;
      text-align: center;
      margin-left:0 ;
      margin-right:0 ;
      margin-top: 0;
   }
   }

   @media screen and (min-width:600px) {
    section.course_details .course_content .course_content_desc {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    section.course_details .course_content .course_content_desc .circle  {
      margin-left: 1.5rem;
      margin-right: 0.4rem;
    }
      section.course_details .course_content .course_content_desc > div:first-child   .circle  {
    margin-left: 0rem;
  }
  section.course_details .accordion .accordion-header .accordion_collsped span{
    display: block;
  }
  section.course_details .accordion .accordion_body_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  section.course_details .accordion .accordion-body span  {
    display: block;
    margin-left: 0rem;
    }
  }

   @media screen and (min-width:992px) {
    section.course_details .course_left_part {
      margin-right: 4rem;
    }
    
    section.course_details .header_container .btn_container {
      margin-top: 0rem;
      margin-bottom: 0rem;
    }
    section.course_details .header_container button  {
      padding: 0.75rem 1.5rem;
      width: 10.25rem;
      height: 3rem;
      font-size: 1rem;
      line-height: 1.5rem;
    }
    section.course_details .course_desc_container .header_container{
      margin-top: 0;
      margin-bottom: 0.5rem;
     }
    section.course_details .course_desc_container h1{
      font-size: 2rem;
      line-height: 2.5rem;
      margin: 0;
      text-align: start;
     }
     section.course_details .course_desc_container span{
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.375rem;
   }
   
  }

  /**************
  *
  *
  *   User panel styles
  *
  *
  ****************/

  main#user_panel section .header {
    margin-top: 1.7rem;
    margin-bottom: 2rem;
  }
  main#user_panel section .header > h1 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.75rem;
    color: var(--color-BalticSea);
  }
  main#user_panel section .toggler_container hr {
    margin: 0;
    color: var(--color-QuillGrey);
    width: 24.7rem;
    display: block;
  }
  
  @media screen and (min-width: 526px) {
    main#user_panel section .toggler_container hr {
      width: 100%;
      display: block;
    }
  }

 
 
  /* media query for toggler container  */
  @media screen and (min-width: 908px) {
    main#user_panel section .toggler_container {
      width: 100%;
    }
  }
  
  main#user_panel .toggler {
    padding-bottom: 1rem;
    overflow-x: auto;
    scrollbar-color: var(--color-Seashell) var(--color-Dawn);
  }
  
  /* width */
  main#user_panel .toggler::-webkit-scrollbar {
    height: 5px;
  }
  
  /* Track */
  main#user_panel .toggler::-webkit-scrollbar-track {
    background: var(--color-Seashell);
  }
  
  /* Handle */
  main#user_panel .toggler::-webkit-scrollbar-thumb {
    background: var(--color-Dawn);
  }
  
  /* Handle on hover */
  main#user_panel .toggler::-webkit-scrollbar-thumb:hover {
    background: var(--color-DavyGrey);
  }
  
  main#user_panel .toggler .toggler_container ul {
    white-space: nowrap;
  }
  main#user_panel .toggler .toggler_container ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  main#user_panel .toggler .toggler_container ul li {
    margin-bottom: 0.3rem;
    text-align: start;
  }
  
  main#user_panel .toggler .toggler_container ul a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    display: inline-block;
    color: var(--color-RegentGrey);
  }
  
  main#user_panel .toggler .toggler_container ul a.active {
    color: var(--color-BalticSea);
  }
  main#user_panel .toggler .toggler_container ul a.active::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-PictonBlue);
  }

  
  main#user_panel .wrapper {
    margin: 0;
    padding: 1rem 0rem;
    
  }
  
  main#user_panel .wrapper .header {
    margin: 0;
  }
  
  main#user_panel .wrapper .header h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--color-BalticSea);
    margin: 0;
  }
    
  /* filter styles  */
  main#user_panel .wrapper .header .filter_options {
    display: flex;
    align-items: end;
    justify-content: start;
    margin-top: 0.7rem;
    flex-wrap: wrap;
  }
  main#user_panel .wrapper .header .filter_options > div {
    margin-bottom: 1rem;
    width: 100%;
  }
 
 
  main#user_panel .wrapper .header .filter_options h6 {
    font-family: var(--font-family);
    font-weight: 400;
    font-size:0.875rem;
    line-height: 100%;
    color: var(--color-RegentGrey);
  }
  main#user_panel .wrapper .header .filter_options .category_filter .category_filter_container,
  main#user_panel .wrapper .header .filter_options .sortBy_filter .sortBy_filter_container
  {
    width: 100%;
    height: 2.125rem;
    border: 1px solid var(--color-Mercury);
    border-radius: 4px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    display: flex;
    
  }

 
  main#user_panel .wrapper .header  .category_filter .category_filter_container span ,
  main#user_panel .wrapper .header .sortBy_filter .sortBy_filter_container span 
  {
   margin: 0;
   padding: 0;
   font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 100%;
  color: var(--color-RegentGrey);
  }
  main#user_panel .wrapper .header  .category_filter .category_filter_container svg ,
  main#user_panel .wrapper .header .sortBy_filter .sortBy_filter_container svg 
  {
  width: 1rem;
  height: 0.625rem;
  }

  main#user_panel .wrapper .header .filter_options .overview_filter , 
  main#user_panel .wrapper .header .filter_options .details_filter {
    width: 100%;
    height: 2.125rem;
    border: 1px solid var(--color-Mercury);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    cursor: pointer;
  }
  
  main#user_panel .wrapper .header .filter_options .overview_filter.active , 
  main#user_panel .wrapper .header .filter_options .details_filter.active {
    border: 1px solid var(--color-Azure);
  }
  main#user_panel .wrapper .header .filter_options .overview_filter.active span  , 
  main#user_panel .wrapper .header .filter_options .details_filter.active span {
   color: var(--color-Azure);
  }
  main#user_panel .wrapper .header .filter_options .overview_filter.active svg > path  , 
  main#user_panel .wrapper .header .filter_options .details_filter.active svg > path {
   fill: var(--color-Azure);
  }

  main#user_panel .wrapper .header .filter_options .overview_filter {
    display: none;
  }
  main#user_panel .wrapper .header .filter_options .overview_filter  span, 
  main#user_panel .wrapper .header .filter_options .details_filter span{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1rem;
    line-height: 100%;
    color: var(--color-RegentGrey);
    margin-left: 0.5rem;
  }

  /* filter styles media query  */
  @media screen  and (min-width:454px){
    main#user_panel .wrapper .header .filter_options > div {
      margin-right: 1rem;
      width: 7.563rem;
    }
    main#user_panel .wrapper .header .filter_options .category_filter .category_filter_container,
    main#user_panel .wrapper .header .filter_options .sortBy_filter .sortBy_filter_container
    {
      width: 7.563rem;
      
    }
  
    main#user_panel .wrapper .header .filter_options .overview_filter , 
    main#user_panel .wrapper .header .filter_options .details_filter {
      width: 7.25rem;
      justify-content: space-between;
    }
  }

  @media screen  and (min-width:800px){
    main#user_panel .wrapper .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    main#user_panel .wrapper .header .filter_options {
      margin-top: 0rem;
    }
    main#user_panel .wrapper .header .filter_options > div {
      margin-bottom: 0rem;
    } 
    main#user_panel .wrapper .header .filter_options > div:last-child {
      margin-right: 0rem;
    } 
  }

  /* filter style end here  */

  main#user_panel .cards_container {
     display: flex;
     margin-top: 1rem;
     margin-bottom: 1rem;
     flex-wrap: wrap;
  }  
   
  main#user_panel .cards_container .card {
    width: 100%;
    height: 7.188rem;
    padding: 0.9rem;
    border: none;
    border-radius: 0px 0px 4px 4px;
    background: linear-gradient(91.23deg, #3C53A7 0.82%, #7159C9 46.56%, #B376F3 93.16%);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 1rem;
    position: relative;
  }
  main#user_panel .cards_container .card > .circle {
    position: absolute;
    right: 0;
    width: 4rem;
    height: 4rem;
  }
  main#user_panel .cards_container .card > .circle_left {
    bottom: 0;
  }
  main#user_panel .cards_container .card.orange_dark {
    background: linear-gradient(91.23deg, #FF5C00 0.82%, #F96E0E 42.46%, #F2903D 93.16%);
  }
  main#user_panel .cards_container .card.grey {
    background: linear-gradient(91.23deg, #0D4657 0.82%, #247C93 46.56%, #5BADC8 93.16%);
  }
 
  
  main#user_panel .cards_container .card:last-child {
  margin-bottom: 0rem;
  }
  
  main#user_panel .cards_container .card h3{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.25rem;
line-height: 2rem;
color: var(--color-white);
  }
  main#user_panel .cards_container .card svg{
  width: 2.188rem;
  height: 2.188rem;
  }
  main#user_panel .cards_container .card span{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.375rem;
    color: var(--color-white);
    display: block;
    margin-top: auto;
}
  
  /* media styles for analytic   */
  @media screen and (min-width:500px) {
    main#user_panel .cards_container .card {
      width:calc(50% - 0.7rem) ;
    } 
    main#user_panel .cards_container .card:nth-child(odd) {
      width:calc(50%) ;
      margin-right: 0.7rem;
    } 
  }

  @media screen and (min-width:525px) {
    main#creator_panel .wrapper {
       padding: 0.3rem 0rem;
     } 
   }
   
   @media screen and (min-width:768px) {
     main#user_panel .cards_container .card {
       width:  calc(33.333% - 0.7rem) ;
       margin-right: 0.7rem;
     }
     main#user_panel .cards_container .card:nth-child(odd) {
       width:calc(33.333% - 0.7rem);
     } 
   
    }
    @media screen and (min-width:992px) {
      main#user_panel .analytics .padding_lg_left {
        padding-left: 0.8rem;
      } 
      main#user_panel .analytics .padding_lg_right {
        padding-right: 0.7rem;
      } 
      main#user_panel .cards_container {
      margin-left:0rem;
      margin-right:0rem;
     }  
    }
    
    @media screen and (min-width:1200px) {
     
     main#user_panel .cards_container .card {
       width:  calc(20% - 0.7rem) ;
       margin-right: 0.7rem;
     }
     main#user_panel .cards_container .card:nth-child(odd) {
       width:calc(20% - 0.7rem);
     } 
    
     main#user_panel  .training_resources .card:last-child {
      width:calc(20%);
      margin-right: 0rem;
     }
 }

 /* my enrollments  */
 main#user_panel  .my_enrollments .videos {
  margin-top: 1rem;
}
main#user_panel  .my_enrollments .video_card  {
  background-color: var(--color-white);
  box-shadow: 0px 4px 20px rgba(1, 11, 60, 0.07);
  border-radius: 6px;
  margin-bottom: 1rem;
 
}



main#user_panel  .my_enrollments .video_card  .thumbnail_container img {
  width: 100%;
  height: 11.25rem;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}


main#user_panel  .my_enrollments .video_card  .thumbnail_container span {
  position: absolute;
  right: 9px;
  top: 10px;
  padding: 0.25rem 0.625rem;
  height: 1.75rem;
  background-color: var(--color-Amour);
  border-radius: 22px;
  font-family: var(--font-family);
  font-weight: 400; 
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  color:var(--color-RubyRed);
}

main#user_panel  .my_enrollments .video_card  .thumbnail_container span.green {
  background-color:var(--color-Honeydew);
  color:var(--color-LimeGreen);
}

main#user_panel  .my_enrollments  .video_card_body_container {
  padding: 1rem 1rem 0.3rem 1rem;
}
main#user_panel  .my_enrollments  .video_card_body_container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  margin-bottom: 0.7rem;
}


main#user_panel  .my_enrollments  .video_card_body_container .header h4  {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}
main#user_panel  .my_enrollments  .video_card_body_container .header #overview_header{
  display: none;
}

main#user_panel  .my_enrollments  .video_card_body_container .header .tags_container {
  display: flex;
}
main#user_panel  .my_enrollments  .video_card_body_container #tags_container{
  display: none;
}
main#user_panel  .my_enrollments  .video_card_body_container .header .tags_container span {
  display: flex;
  padding: 0.25rem 0.5rem;
  height: 1.75rem;
  background-color: var(--color-TwilightBlue);
  border-radius: 4px;
  font-family:var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height:1.25rem;
  color: var(--color-PersianGreen);
  text-align: center;
  margin-right: 0.5rem;
}
main#user_panel  .my_enrollments  .video_card_body_container .header .tags_container span.pink {
  color:#E41993 ;
  background-color: #FFEEF4;  
}

main#user_panel  .my_enrollments  .video_card_body_container .desc h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color:var(--color-RegentGrey);
  margin: 0;
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}
main#user_panel  .my_enrollments  .video_card_body_container .desc h6 svg {
 width: 1rem;
 height: 1rem;
 margin-top: -3px;
 margin-right: 0.5rem;
}

main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container  {
display: flex;
justify-content: space-between;
margin-top: 1rem;

}
main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container .desc_profile_right {
  margin-top: 1rem;
}

main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container  img  {
  width: 2.188rem;
  height: 2.188rem;
  border: 2px solid var(--color-white);
  filter: drop-shadow(0px 10px 14px rgba(1, 11, 60, 0.1));
  border-radius: 50%;
  object-fit: cover;

}

main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container  h6  {
font-family: var(--font-family);
font-weight: 500;
font-size: 0.875rem;
line-height: 1rem;
color:var(--color-CarbonGrey);
margin: 0;
}
main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container  span  {
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height:1.5rem;
color:var(--color-CarbonGrey);
display: block;
}
main#user_panel  .my_enrollments  .video_card_body_container .desc_profile_container  .desc_profile_right span:first-child   {
font-family: var(--font-family);
display: inline-block;
font-weight: 400;
font-size: 0.625rem;
line-height: 0.688rem;
color: var(--clor-GreenTeal);
background: rgba(0, 182, 73, 0.1);
border-radius: 2.14286px;
padding: 4.14286px 6.28571px;
margin: 0;

}

main#user_panel  .my_enrollments  .underline {
height: 0;
border-top:1px solid var(--color-Porcelain);

}
main#user_panel  .my_enrollments .video_card_footer
{
padding: 1rem;
}

main#user_panel  .my_enrollments .video_card_footer .price_container {
display: flex;
align-items: center;
justify-content: space-between;
}
main#user_panel  .my_enrollments .video_card_footer .overview_desc {
  display: none;
}

main#user_panel  .my_enrollments .video_card_footer span 
{
font-family: var(--font-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.5rem;
color:var(--color-Night);
}


main#user_panel  .my_enrollments .video_card_footer a 
{
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-CharcoalGrey);
}

main#user_panel  .my_enrollments .video_card_footer a:hover
{
text-decoration: underline;
}

/* overview style start  */
@media screen and (min-width:900px){
  main#user_panel .wrapper .header .filter_options .overview_filter {
    display: flex;
  }
main#user_panel  .my_enrollments .overview_video_card {
  display: flex;
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container {
  padding: 0.5rem 1rem 0.5rem 1rem;
}
main#user_panel  .my_enrollments .overview_video_card  .thumbnail_container img {
  width: 12.313rem;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

main#user_panel  .my_enrollments .overview_video_card .video_card_body_container .header .tags_container {
  display: none;
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container #details_header  {
  display: none;
}

main#user_panel  .my_enrollments .overview_video_card   .video_card_body_container .header #overview_header{
  display: block;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
}
main#user_panel  .my_enrollments .overview_video_card .video_card_body_container #tags_container {
  display: flex;
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container  .tags_container span {
  display: flex;
  padding: 0.25rem 0.5rem;
  height: 1.75rem;
  background-color: var(--color-TwilightBlue);
  border-radius: 4px;
  font-family:var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height:1.25rem;
  color: var(--color-PersianGreen);
  text-align: center;
  margin-right: 0.5rem;
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container .tags_container span.pink {
  color:#E41993 ;
  background-color: #FFEEF4;  
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container .desc > h6{
  display: none;
}
main#user_panel  .my_enrollments .overview_video_card .video_card_body_container .desc_profile_container  {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  
  }
  main#user_panel  .my_enrollments .overview_video_card  .video_card_body_container .desc_profile_container .desc_profile_right {
    margin-top: 0rem;
  }
main#user_panel  .my_enrollments .overview_video_card .video_card_body_container .desc_profile_container  .desc_profile_right span:first-child   {
  font-family: var(--font-family);
  display: inline-block;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.688rem;
  color: var(--clor-GreenTeal);
  background: rgba(0, 182, 73, 0.1);
  border-radius: 2.14286px;
  padding: 4.14286px 6.28571px;
  margin: 0;
  }
 
  main#user_panel  .my_enrollments .overview_video_card .underline {
    display: none;
    
}

main#user_panel  .my_enrollments .overview_video_card .video_card_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-top: 0.7rem;
}

main#user_panel  .my_enrollments .overview_video_card .video_card_footer .price_container {
display: flex;
align-items: center;
}
main#user_panel  .my_enrollments .overview_video_card .video_card_footer .overview_desc {
  display: block;
  display: flex;
  align-items: center;
}
main#user_panel  .my_enrollments .overview_video_card  .video_card_footer .overview_desc h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color:var(--color-RegentGrey);
  margin: 0;
  display: flex;
  align-items: center;
  margin-bottom: 0rem;
  margin-right: 1rem;
}
main#user_panel  .my_enrollments .overview_video_card   .video_card_footer .overview_desc h6 svg {
 width: 1rem;
 height: 1rem;
 margin-top: -3px;
 margin-right: 0.5rem;
}
main#user_panel  .my_enrollments .overview_video_card .video_card_footer a 
{
  padding: 0;
font-family: var(--font-family);
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-Azure);
padding: 3px 7px;
width: 109px;
height: 30px;
border: 1px solid var(--color-Azure);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 1rem;
}
main#user_panel  .my_enrollments .overview_video_card .video_card_footer a > svg > path 
{
 fill:var(--color-Azure);
}
main#user_panel  .my_enrollments .overview_video_card .video_card_footer a:hover
{
text-decoration:none;
}

}
/* overview style end  */


main#user_panel  .my_enrollments  .number_dropdown {
display: flex;
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-Mercury);
border-radius: 8px;
padding: 0.438rem 0.75rem;
margin-left: 1rem;
margin-right: 1rem;

}

main#user_panel  .my_enrollments  .number_dropdown svg {
margin-left: 1rem;

}

main#user_panel .pagination_container {
margin-top: 1rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width:768px){
main#user_panel .pagination_container {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;

}
}
main#user_panel .pagination_container #pagination_item {
border: none;
outline: none;
box-shadow: none;
}
main#user_panel .pagination_container #pagination_item ul {
flex-wrap: wrap;
justify-content: center;
}

main#user_panel .pagination_container #pagination_item .page-item.active a {
background-color: var(--color-Azure);
border-radius: 4px;
color: var(--color-white);
}
main#user_panel .pagination_container #pagination_item .page-item:hover a {
background-color: var(--color-Azure);
border-radius: 4px;
color: var(--color-white);
}

main#user_panel .pagination_container #pagination_item .page-item a {
padding: 0.25rem 0.625rem;
border: none;
min-width: 2.75rem;
height: 2rem;
background: var(--color-AquaHaze);
border-radius: 4px;
margin-right: 1rem;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-family);
font-weight: 400;
font-size: 0.75rem;
line-height: 0.875rem;
color: var(--color-Dune);
margin-bottom: 1rem;

}

@media  screen and (min-width: 768px) {
main#user_panel .pagination_container #pagination_item .page-item a { 
margin-bottom: 0rem;
}
}

/* my purchases  */

main#user_panel section.my_purchases  .video_card_col {  
  background-color: var(--color-white);
  box-shadow: 0px 0px 4px rgba(0, 0, 3, 0.13);
  border-radius: 6px;
}
main#user_panel section.my_purchases   .video_header {  
 padding-top: 1rem;
 padding-bottom: 1rem;
}

main#user_panel section.my_purchases  .purchases_videos  .video_card{
   border: none;
   outline: none;
   box-shadow: none;
   border-radius: 0px;
   border-bottom: 0.5px solid var(--color-RegentGrey);
   padding-bottom: 1rem;
   
}


main#user_panel section.my_purchases  .purchases_videos  .video_card:hover{
  background: rgba(42, 139, 242, 0.1);
}
main#user_panel section.my_purchases  .purchases_videos  .video_card.active{
  background: rgba(42, 139, 242, 0.1);
}
main#user_panel section.my_purchases  .purchases_videos  .video_card .thumbnail_container img {
  width: 100%;
  height: 14.375rem;
  object-fit: cover;
  border: 0;
}

main#user_panel section.my_purchases  .purchases_videos  .video_card .video_card_body_container{
  padding: 0;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 1rem;
}

main#user_panel section.my_purchases    .video_card .video_card_body_container .header {
  margin: 0;
  margin-bottom: 0.4rem;
}
main#user_panel section.my_purchases    .video_card .video_card_body_container .header h4{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-black);
}
main#user_panel section.my_purchases    .video_card .video_card_body_container .header span{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: var(--color-CarbonGrey);
}
main#user_panel section.my_purchases    .video_card .video_card_body_container .desc{
  padding: 0;
}

main#user_panel section.my_purchases    .video_card .video_card_body_container .desc h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
  margin: 0;
}
main#user_panel section.my_purchases    .video_card .video_card_body_container .desc h6:first-child{
  margin-bottom: 0.5rem;
}
main#user_panel section.my_purchases    .video_card .video_card_body_container .desc .price{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-BleuDeFrance);
  text-align: end;
}

main#user_panel section.my_purchases    .video_card .video_card_footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-top: 0.5rem;
}
main#user_panel section.my_purchases    .video_card .video_card_footer img {
  width: 2.188rem;
  height: 2.188rem;
  border: 2px solid var(--color-white);
  filter: drop-shadow(0px 10px 14px rgba(1, 11, 60, 0.1));
  border-radius: 50%;
  object-fit: cover;
}
main#user_panel section.my_purchases    .video_card .video_card_footer h6 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: var(--color-CarbonGrey);
  margin: 0;
  margin-left: 0.5rem;
}
main#user_panel section.my_purchases    .video_card .video_card_footer span  {
  padding: 0.25rem 0.5rem;
  width: 4rem;
  height: 1.75rem;
  background: rgba(0, 182, 73, 0.12);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--clor-GreenTeal);
}
main#user_panel section.my_purchases   .my_purchases_right_side {
  background-color: var(--color-white);
  box-shadow: 0px 0px 4px rgba(0, 0, 3, 0.13);
  border-radius: 6px;
  padding: 1rem 0.9rem;
  margin-left: 0rem;
  margin-top: 1rem;
}

main#user_panel section.my_purchases   .my_purchases_right_side .creator_details > h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.438rem;
  color: var(--color-BalticSea);
  margin: 0;
}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details > img  {
  width: 7.5rem;
  height: 7.5rem;
  border: 3px solid var(--color-PictonBlue);
  border-radius: 3.75rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details > h3  {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  text-align: center;
  color: var(--color-Onyx);

}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details > .btn_follow  {
  padding-left: 0.472rem;
  padding-right: 0.472rem;
  width: 8.938rem;
  height: 2.125rem;
  background-color: var(--color-BleuDeFrance);
  border-radius: 3.02218px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-white);
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;

}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details .statics{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 20.625rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details .statics span{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  text-align: center;
  letter-spacing: -0.3px;
  color: var(--color-black);
}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details .statics h6{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: center;
  letter-spacing: -0.3px;
  color: #6A6A6A;
  margin: 0;
  margin-top: 0.5rem;
}
main#user_panel section.my_purchases   .my_purchases_right_side .creator_details .statics .underline{
height: 2.313rem;
width: 2px;
background-color: rgba(32, 32, 32, 0.16);
}

main#user_panel section.my_purchases   .my_purchases_right_side  > .underline {
  border: 0.5px solid #C4C4C4;
}
main#user_panel section.my_purchases   .my_purchases_right_side  .contact_info {
  margin-top: 1.5rem;
  margin-bottom: 1.7rem;
}
main#user_panel section.my_purchases   .my_purchases_right_side  .contact_info > h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-black);
  margin-bottom: 1rem;

}
main#user_panel section.my_purchases   .my_purchases_right_side  .contact_info > p {
  font-family:var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  display: flex;
  align-items: center;
  color: var(--color-RegentGrey);

}
main#user_panel section.my_purchases   .my_purchases_right_side  .contact_info > p > svg {
  width: 1.25rem;
  height: 0.875rem;
  margin-right:0.7rem ;
}
main#user_panel section.my_purchases   .popular_courses {
  margin-top: 1rem;
}
main#user_panel section.my_purchases   .popular_courses > h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-black);
  margin: 0;
}
main#user_panel section.my_purchases   .popular_courses .course {
  display: flex;
  margin-top: 1.3rem;
}
main#user_panel section.my_purchases   .popular_courses .course  > img{
  width:5.147rem;
  height: 4.938rem;
  object-fit: cover;
  border-radius: 4.01695px;
}
main#user_panel section.my_purchases   .popular_courses .course .course_right {
  width: 100%;
  margin-left: 0.7rem;
}
main#user_panel section.my_purchases   .popular_courses .course .course_right > h3 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-black);
  margin:0; 
}
main#user_panel section.my_purchases   .popular_courses .course .course_right h6 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
  display: flex;
  align-items: center;
  margin:0; 
}
main#user_panel section.my_purchases   .popular_courses .course .course_right h6 > svg{
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
}
main#user_panel section.my_purchases   .popular_courses .course .course_right span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-BleuDeFrance);
}
@media screen and (min-width:786px){
  main#user_panel section.my_purchases  .purchases_videos  .video_card{
    display: flex;
    padding-top: 0.7rem;
   padding-left: 0.7rem;
  }
 main#user_panel section.my_purchases  .purchases_videos  .video_card .thumbnail_container img {
  width: 7.688rem;
  height: 7.375rem;
  border-radius: 6px;
  object-fit: cover;
  border-radius: 6px;
  }  
  main#user_panel section.my_purchases  .purchases_videos  .video_card .video_card_body_container{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0rem;
  }
  main#user_panel section.my_purchases    .video_card .video_card_body_container .desc{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main#user_panel section.my_purchases   .my_purchases_right_side {
    margin-left: 1rem;
    margin-top: 0rem;
  }
}
/**********
*
*
*  my profile 
*
*
**********/

main#my_profile {
  padding: 1.3rem 1.2rem 1.5rem 1.2rem;
  background-color: var(--color-Soapstone)
}

main#my_profile .my_profile_header .banner_header .banner_img {
  width: 100%;
  height: 9.625rem;
  border-radius: 0.625rem;
  object-fit: cover;
}


main#my_profile .my_profile_header .banner_header  .profile_img{
  border: 5px solid var(--color-white);
  border-radius: 50%;
  width:6.5rem;
  height:6.5rem;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

main#my_profile .my_profile_header .btn_profile{
 /* display: flex;
 align-items: center;
 justify-content: end;  */
 margin-top: 3.5rem;
 margin-bottom: 1rem;
}



main#my_profile .my_profile_header .btn_profile > button {
  padding: 0.438rem 0.625rem;
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.375rem;
  color: var(--color-white);
  margin-right: 0.6rem;
  min-width: 100%;
  margin-bottom: 1rem;
}


main#my_profile .my_profile_header .btn_profile > .btn_followed {
  background-color: transparent;
  border: 1px solid var(--color-BleuDeFrance);
  color: var(--color-BleuDeFrance);
}
main#my_profile .my_profile_header .btn_profile > button > svg{
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.4rem;
}
main#my_profile .my_profile_header .btn_profile  .more_options {
  width: 2.132rem;
  height: 2.132rem;
  background: rgba(140, 150, 162, 0.2);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen  and (min-width:576px){
  main#my_profile .my_profile_header .btn_profile{
    display: flex;
    align-items: center;
    justify-content: end; 
   }
   main#my_profile .my_profile_header .btn_profile > button {
    margin-bottom: 0rem;
    min-width: 2rem;
  }
}
main#my_profile .my_profile_header .btn_profile  .more_options > svg {
  width: 1.188rem;
  height: 0.25rem;
}

.dropdown-menu {
  inset: 0px 0 auto 0px;
  background-color: var(--color-white);
  border-radius: 4px;
}
.dropdown-menu .dropdown-item{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-GunPowder);
  padding: 0.375rem;
}

main#my_profile .my_profile_header .profile_heading_container h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-Onyx);  
  margin: 0;
  margin-right: 0.5rem;
  margin-bottom: 0.3rem;
}
main#my_profile .my_profile_header .profile_heading_container span {
  padding: 5px;
  background-color: var(--color-MintTulip);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 0.688rem;
  color: var(--color-PersianGreen);
}


/* my_profile_feed  */
main#my_profile .my_profile_feed {
  margin-top: 1rem;
}

main#my_profile .my_profile_feed .stats > div{
 margin-right: 1.6rem;
 font-family: var(--font-family);
font-weight: 400;
font-size: 1.173rem;
line-height: 2rem;
color: var(--color-BattleshipGrey);
}

main#my_profile .my_profile_feed .stats > div:last-child{
 margin-right: 0rem;
}
main#my_profile .my_profile_feed .stats > div > span {
 font-family: var(--font-family);
font-weight: 400;
font-size: 1.273rem;
line-height: 2rem;
color: var(--color-Onyx);
}
main#my_profile .my_profile_feed .feeds_horizantal_scroll {
  width: 100%;
  height: 7.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: start;
}
main#my_profile .my_profile_feed .feeds {
  display: flex;
  align-items: center;
  flex-direction: row;
  white-space: nowrap;
  position: absolute;
  left: 0px;
  transition: 0.5s all ease-in-out;
}
main#my_profile .my_profile_feed  .left_circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: -3.825px 2.55px 15.3px rgba(0, 0, 0, 0.25);
  left:-16px ;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}
main#my_profile .my_profile_feed  .right_circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: -3.825px 2.55px 15.3px rgba(0, 0, 0, 0.25);
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

main#my_profile .my_profile_feed  .left_circle svg {
 width: 1rem;
 height: 1rem;
 fill: var(--color-BleuDeFrance);
}
main#my_profile .my_profile_feed  .right_circle svg {
 width: 0.9rem;
 height: 0.9rem;
}
main#my_profile .my_profile_feed .feeds .feed{
text-align: center;
min-width:  7.813rem;
margin: 0;
}

main#my_profile .my_profile_feed .feeds .feed:last-child{
margin-right: 0rem
}
main#my_profile .my_profile_feed .feeds .feed img {
width: 4.563rem;
height: 4.563rem;
border-radius: 50%;
border: 1.28972px solid var(--color-BleuDeFrance);
}
main#my_profile .my_profile_feed .feeds .feed h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.121rem;
  line-height: 1.313rem;
  color: var(--color-BalticSea);
  margin-top: 0.8rem;
}
main#my_profile .my_profile_feed .feeds .feed svg{
 position: absolute;
 top: 32%;
 left: 47%;
 z-index: 1;
 transform: translate(-32%,-47%);
}

/* enrol  */
main#my_profile section.enroll .enroll_card {
  background-color: var(--color-white);
  border-radius: 6px;
  margin-bottom: 1.5rem;
}
main#my_profile section.enroll .enroll_card .enroll_left  {
  padding: 1rem;
}

main#my_profile section.enroll .enroll_card .enroll_left img  {
  width: 10.723rem;
  height: 10rem;
  object-fit: cover;
}

main#my_profile section.enroll .enroll_card .enroll_left .desc {
  padding-top: 1rem;
}

main#my_profile section.enroll .enroll_card .enroll_left h4  {
  font-family:var(--font-family);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-right: 0.5rem;
}

main#my_profile section.enroll .enroll_card .enroll_left  span  {
  padding: 0.25rem 0.5rem;
  height: 1.75rem;
  background-color: rgba(0, 182, 73, 0.1);
  border-radius: 4px;
  font-family:var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--clor-GreenTeal);
}
main#my_profile section.enroll .enroll_card .enroll_left .timeline {
  margin-top: 0.5rem;
}

main#my_profile section.enroll .enroll_card .enroll_left h6  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-RegentGrey);
  display: flex;
  align-items: center;
  margin-right: 0.9rem;
  
}
main#my_profile section.enroll .enroll_card .enroll_left h6 > svg {
  width: 0.938rem;
  height: 0.938rem;
  margin-right: 0.4rem;
}
main#my_profile section.enroll .enroll_card .enroll_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main#my_profile section.enroll .enroll_card .enroll_footer > span{
  background-color: transparent;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
  color: var(--color-Night);
  display: block;
}

main#my_profile section.enroll .enroll_card .enroll_footer > a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-CharcoalGrey);
}
main#my_profile section.enroll .enroll_card .enroll_right {
  padding-left: 1rem;
  padding-right: 
  1rem;
  padding-bottom: 1rem;
}
main#my_profile section.enroll .enroll_card .enroll_right button  {
  padding: 0.472rem;
  width: 100%;
  height: 2.125rem;
  background-color: var(--color-ArtyClickRed);
  border-radius: 3.02218px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-white);

}
main#my_profile section.enroll .enroll_card .enroll_right button.btn_enroll  {
  background-color: var(--color-BleuDeFrance);

}


/* another_post */

main#my_profile .another_post_container .inputer_wrapper {
  background-color: var(--color-white);
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1rem;
  margin-bottom: 1.4rem;
}


main#my_profile .another_post_container .inputer_wrapper textarea {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--color-WhiteLilac);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-BattleshipGrey);
  padding: 1rem;
  width: 100%;
  resize: none;
}

main#my_profile .another_post_container .inputer_wrapper input[type='file']{
  display: none;
}

main#my_profile .another_post_container .inputer_wrapper button {
  padding: 0.625rem 1rem;
  width: 5.375rem;
  height: 2.188rem;
  background-color: var(--color-BleuDeFrance);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
main#my_profile .another_post_container .inputer_wrapper label > svg{
 width: 0.813rem;
 height: 0.663rem;
 margin-right: 0.4rem;
}

main#my_profile .another_post_container .post_input_options label > svg  {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.7rem;
}


/* gallary styles  */

main#my_profile  .image_gallary_container .img_container {
  position: relative;
}

main#my_profile  .image_gallary_container .img_container > img {
  width: 100%;
  height: 20.5rem;
  object-fit: cover;
}
main#my_profile  .image_gallary_container  .play_icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 2.5rem;
 height: 2.5rem;
}

main#my_profile  .image_gallary_container .img_container .desc{
  position: absolute;
  bottom: 7px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
}
main#my_profile  .image_gallary_container .img_container .desc > span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-white); 
  margin-right: 0.8rem;
}
main#my_profile  .image_gallary_container .img_container .desc > span > svg {
  width: 1rem;
  height: 0.875rem;
}

/* Display all posts  styles  */
main#my_profile  section.all_posts_show_container {
  position: relative; 
}
main#my_profile  section.all_posts_show_container > .hide_content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12.5px);
  z-index: 2;
}
main#my_profile  .all_posts_show_card .header {
  background-color: var(--color-white);
  box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.05),
    0px 4px 10px rgba(0, 0, 0, 0.25), 0px 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0rem 1.5rem;
}
main#my_profile  .all_posts_show_card .header img {
  width: 3.344rem;
  height: 3.344rem;
  object-fit: cover;
  border-radius: 50%;
}
main#my_profile  .all_posts_show_card .header h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-BalticSea);
  margin: 0;
}

main#my_profile  .all_posts_show_card .header svg {
  width: 1.139rem;
  height: 1.036rem;
}
main#my_profile
  .all_posts_show_card
  .header
  .dropdown
  svg {
  width: 1.514rem;
  height: 1.514rem;
}
main#my_profile  .all_posts_show_card .header span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-MountainMist);
}

main#my_profile  .all_posts_show_card .header p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-GreyCloud);
}

main#my_profile
  .all_posts_show_card
  .card_body
  img:first-child {
  width: 100%;
  height: 20rem;
  max-height: 100%;
  object-fit: cover;
}
main#my_profile
  .all_posts_show_card
  .card_body
  img:nth-child(2) {
  width: 4.25rem;
  height: 4.25rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


main#my_profile
  .all_posts_show_card
  .card_footer {
    background-color: var(--color-white);
    box-shadow: 10px 10px 25px rgba(212, 212, 212, 0.1), 15px 15px 35px rgba(212, 212, 212, 0.05), 10px 10px 50px rgba(213, 213, 213, 0.1);
    border-radius: 3px;
    padding-bottom: 2rem;
}
main#my_profile
  .all_posts_show_card
  .card_footer
  .desc_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
}

main#my_profile  .all_posts_show_card .card_footer h1 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.213rem;
  line-height: 1.5rem;
  color: var(--color-BalticSea);
}
main#my_profile  .card_footer .right_desc {
  width: 9.375rem !important;
}
main#my_profile  .card_footer .right_desc svg {
  width: 1rem;
  height: 0.75rem;
}
main#my_profile 
  .card_footer
  .right_desc
  svg:last-child {
  width: 1rem;
  height: 1.25rem;
  margin-left: 0.5rem;
}

main#my_profile  .card_footer .right_desc span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.775rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}
main#my_profile  .card_footer  .feedback {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
main#my_profile  .card_footer  .feedback span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-MountainMist);
}

main#my_profile  .card_footer  .feedback svg {
  width: 0.938rem;
  height: 0.75rem;
  margin-left: 0.8rem;
  margin-right: 0.1rem;
  margin-top: -5px;
}

main#my_profile  .card_footer .comments {
  background-color: var(--color-GhostWhite);
  border-radius: 1rem;
  margin: 0.5rem 0rem 0rem 0rem;
}
main#my_profile  .card_footer .comments .comment{
  padding: 0.9rem 0.9rem;
  display: flex;
  align-items: start;
}
main#my_profile  .card_footer .comments .comment > img {
  align-self: flex-start;
  width: 2.375rem;
  height: 2.375rem;
  object-fit: cover;
  border-radius: 50%;;
}
main#my_profile  .card_footer .comments .comment_right {
  margin-left: 1.2rem;
}
main#my_profile  .card_footer .comments .comment_right > .comment_post {
  background-color: var(--color-white);
  box-shadow: 10px 10px 25px rgba(212, 212, 212, 0.1), 15px 15px 35px rgba(212, 212, 212, 0.05), 10px 10px 50px rgba(213, 213, 213, 0.1);
  border-radius: 11px;
  padding: 0.7rem 0.5rem 0.5rem 0.7rem;
}
main#my_profile  .card_footer .comments .comment_right > .comment_post p {
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
  
}
main#my_profile  .card_footer .comments .comment_right > .comment_post span {
  font-family: var(--font-family);
  font-size: 0.75rem;
  line-height:  0.875rem;
  text-align: right;
  color: var(--color-RegentGrey);
  display: block;
  margin-top: 0.7rem;
}
main#my_profile  .card_footer .comments .comment_right > .btn_container {
 display: flex;
 align-items: center;
 margin-top: 0.9rem;
 margin-bottom: 0.9rem;
}
main#my_profile  .card_footer .comments .comment_right > .btn_container  > button{
 background-color: transparent;
 font-family: var(--font-family);
 font-weight: 400;
 font-size: 0.875rem;
 line-height: 1rem;
 color:var(--color-black);
 margin-left: 0.9rem;
}
main#my_profile  .card_footer .comments .comment_right > .replied_container {
  display: flex;
  align-items: start;
  padding-left: 0.9rem;
}

main#my_profile  .card_footer .comments .comment_right > .replied_container > img {
  align-self: flex-start;
  width: 2.375rem;
  height: 2.375rem;
  object-fit: cover;
  border-radius: 50%;;
}
main#my_profile  .card_footer .comments .comment_right > .replied_container > .comment_post {
  margin-left: 0.7rem;
  background-color: var(--color-white);
  box-shadow: 10px 10px 25px rgba(212, 212, 212, 0.1), 15px 15px 35px rgba(212, 212, 212, 0.05), 10px 10px 50px rgba(213, 213, 213, 0.1);
  border-radius: 11px;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

main#my_profile  .card_footer .comments .comment_right > .replied_container > .comment_post p {
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
  
}
main#my_profile  .card_footer .comment_right > .replied_container > .comment_post span {
  font-family: var(--font-family);
  font-size: 0.75rem;
  line-height:  0.875rem;
  text-align: right;
  color: var(--color-RegentGrey);
  display: block;
  margin-top: 0.7rem;
}

/* plan styles  */
main#my_profile  .plan{
  margin-top: 3rem; 
}

main#my_profile  .plan .plan_header {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-AliceBlue);
  position: relative;
  padding: 0.5rem;
  max-width: 46.875rem;
  margin-bottom: 4rem;
}
main#my_profile  .plan .plan_header .desc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

main#my_profile  .plan .plan_header .desc h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 2.875rem;
  display: flex;
  align-items: center;  
  color: var(--color-Onyx);
}
main#my_profile  .plan .plan_header .desc h3 > svg {
 width: 1.375rem;
 height: 1.375rem;
 margin-right: 0.9rem;
}
main#my_profile  .plan .plan_header .desc p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
  color: var(--color-RubyRed);
  text-align: center;
}


main#my_profile  .plan .plan_header > img {
  display: none;
}

main#my_profile  .plan .plan_desc_container .plan_desc_card{
  background-color: var(--color-AliceBlue);
  border: 1px solid var(--color-LightGrey);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

main#my_profile  .plan .plan_desc_container .plan_desc_card h6{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.875rem;
  color: var(--color-black);
  white-space: nowrap;
}
main#my_profile  .plan .plan_desc_container .plan_desc_card > p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--color-PersianGreen);
  margin-bottom: 0;
}
main#my_profile  .plan .plan_desc_container .plan_desc_card > span {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.438rem;
  color: var(--color-RegentGrey);
}

main#my_profile  .plan .plan_desc_container .plan_desc_card span.lg_font{
 display: block;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.853rem;
  line-height: 2.5rem;
  text-align: center;
  color: var(--color-PickledBluewood);
  margin-top: 1rem;
}
main#my_profile  .plan .plan_desc_container .plan_desc_card span.medium_font{
  color: var(--color-PickledBluewood);
  margin-bottom: 1.5rem;
  text-align: center;
  display: block;
}

main#my_profile  .plan  button {
  padding: 0.75rem ;
  width: 12.625rem;
  height: 3rem;
  background-color: var(--color-Azure);
  border-radius: 4px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
main#my_profile  .plan  button > svg{
 width: 0.375rem;
 height: 0.75rem;
 margin-left: 1rem;
}

main#my_profile  .plan .plan_desc_container .plan_benefits {
  text-align: start;
  padding: 0;
  margin-top: 2rem;
}

main#my_profile  .plan .plan_desc_container .plan_benefits li{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 2rem;
  color: var(--color-IronsideGrey);
  margin-bottom: 1rem;
}
main#my_profile  .plan .plan_desc_container .plan_benefits li:last-child{
margin-bottom: 0rem;
}
main#my_profile  .plan .plan_desc_container .plan_benefits li svg{
width:1.5rem;
height: 1.5rem;
margin-right: 0.4rem;
}

/* media styles  */
@media screen and (min-width:578px){
  main#my_profile .another_post_container .inputer_wrapper {
    padding: 1.4rem 1.7rem;
  }
  main#my_profile .another_post_container .post_input_options label > svg  {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
  }
  main#my_profile .my_profile_header .banner_header .banner_img {
    width: 100%;
    height: 11.625rem;
  }
  main#my_profile .my_profile_header .banner_header  .profile_img{
    width:7.5rem;
    height:7.5rem;
    bottom: -50px;
    left: 20px;
    transform: translateX(-0%);
  }
  main#my_profile .my_profile_header .btn_profile{
    margin-top: 1rem;
    margin-bottom: 0rem;
   }
   main#my_profile .my_profile_feed .stats{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  main#my_profile .my_profile_feed .stats > div{
   font-size: 1.273rem;
   line-height: 2rem;
   }
 
  main#my_profile  .card_footer .comments {
    margin: 0.5rem 1.4rem 0rem 1.4rem;
  }
  main#my_profile  .card_footer .comments .comment{
    padding: 0.9rem 2rem;
  }
  main#my_profile  .image_gallary_container .img_container > img {
    height: 17.5rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_left .timeline {
    display: flex;
    align-items: center;
  }
  main#my_profile  .plan .plan_header {
    border-radius: 5px 80px 80px 5px;
    align-items: center;
  }
  main#my_profile  .plan .plan_header .desc {
    display: block;
    width: 100%;
  }
  main#my_profile  .plan .plan_header .desc img {
    display: none;
  }
  main#my_profile  .plan .plan_header .desc p {
    text-align: start;
  }
  main#my_profile  .plan .plan_header > img {
    display: block;
    position: relative;
  }
}


@media  screen and (min-width:768px) {
  main#my_profile section.enroll .enroll_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main#my_profile section.enroll .enroll_card .enroll_left  {
    display: flex;
    padding: 0rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_left img  {
    width: 12.723rem;
    height: 12rem;
    border-radius: 8.67097px 0px 0px 8.67097px;
  }
  main#my_profile section.enroll .enroll_card .enroll_left .desc {
    padding-left: 1rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_left .timeline {
    display: flex;
    align-items: center;
    margin-top: 1rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_left h4  {
    font-size: 1.5rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_footer {
    display: block;
  }
  main#my_profile section.enroll .enroll_card .enroll_footer > span{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_right {
    padding:0rem;
  }
  main#my_profile section.enroll .enroll_card .enroll_right button  {
    width: 5.808rem;
    height: 2.125rem;
    margin-right: 1rem;
  }
  main#my_profile  .plan .plan_desc_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 62.5rem;
  }
  main#my_profile  .plan .plan_desc_container .plan_desc_card{
    width: 20rem;
    margin-top: 0rem;
  }
 
}

@media screen  and (min-width:885px){ 
  main#my_profile  .plan .plan_header {
    display: block;
    max-width: 46.875rem;
  }
  main#my_profile  .plan .plan_header .desc h3 {
  font-size: 2.375rem;
  line-height: 2.875rem;
}
main#my_profile  .plan .plan_header .desc h3 > svg {
 width: 2.375rem;
 height: 2.375rem;
 margin-right: 0.9rem;
}
  main#my_profile  .plan .plan_header .desc p {
    font-size: 1.375rem;
    line-height: 1.5rem;
    margin: 0;
    margin-top: 2rem;
  }
  main#my_profile  .plan .plan_header > img {
    position: absolute;
    top: -50px;
    right: -100px;
    width: 12.5rem;
    height: 12.5rem;
  }
}

@media  screen and (min-width:992px) {
  main#my_profile aside.spaceing {
    padding-left: 1.5rem;
  }
  main#my_profile .another_post_container {
    padding-right: 1.5rem;
  }
  main#my_profile .action_btn_container {
    margin-right: 0px;
    justify-content: start;
  } 
 main#my_profile .action_btn_container button {
    width: 8.75rem;
    height: 3.125rem;
    font-size: 1rem;
    line-height: 1.188rem; 
  }
  main#my_profile .posts_input_container > img {
    width: 3.359rem;
    height: 3.359rem;
  
  }
  main#my_profile .posts_input_container .post_input_footer label {
    width: 1.688rem;
    height: 1.375rem;
    margin-right: 0.5rem;
  }
  main#my_profile .posts_input_container .post_input_footer button {
    width: 9.125rem;
    height: 3.375rem;
    font-size: 1rem;
    line-height: 1.188rem; 
  }
  
  main#my_profile .posts_input_container .post_input_footer button  svg{
    width: 3rem;
    height: 3rem;
  }
  main#my_profile  .all_posts_show_card .header img {
    width: 4.344rem;
    height: 4.344rem;
  }
  main#my_profile  .all_posts_show_card .card_footer h1 {
 
    font-size: 1.813rem;
    line-height: 2.125rem;
 
  }
  main#my_profile .card_footer .right_desc svg {
    width: 1.25rem;
    height: 0.75rem;
  }
  main#my_profile
    .card_footer
    .right_desc
    svg:last-child {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
  }
}
@media screen and (min-width:1200px){
  main#my_profile {
    padding: 1.3rem 1.5rem 1.5rem 1.2rem;
  }
}

/***********
*
*
*  For You styles
*
*
************/

/* main#for_you {
padding: 1rem 1rem;
} */
main#for_you .for_you_header {
  padding: 1rem 1rem 0rem 1rem; 
}
main#for_you .for_you_header h3 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.75rem;
  color: var(--color-BalticSea);
  margin: 0;
  margin-bottom: 1rem;
 
}
main#for_you > .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 1rem 0rem 1rem; 
}

main#for_you > .wrapper > h3 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.371rem;
  line-height: 1.625rem;
  color: var(--color-BalticSea);
}
main#for_you > .wrapper .filter_container .filter {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--color-white);
  border: 1px solid var(--color-Geyser);
  border-radius: 5px;
  min-width: 6.313rem;
  height: 2.5rem;
  cursor: pointer;
}
main#for_you > .wrapper .filter_container .filter span  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-MulledWine);
}
main#for_you > .wrapper .filter_container .filter svg  {
  width: 0.6rem;
  height: 0.6rem;
}
main#for_you > .wrapper .filter_container .dropdown-menu  {
background-color: var(--color-white);
border-radius: 8px;
}
main#for_you > .wrapper .filter_container .dropdown-menu a  {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-GunPowder);
  padding: 0.3rem  0.8rem;
}

main#for_you .photo_gallary_container {
  margin-top: 1rem;
}
main#for_you .photo_gallary_container ul {
  display: flex;
  flex-wrap: wrap;
}
main#for_you .photo_gallary_container ul::after {
  content: "";
  flex-grow: 999;
}

main#for_you .photo_gallary_container li {
  height: 7.75rem;
  cursor: pointer;
  position: relative;
  width: 33.33%;
  padding: 2px;
}

main#for_you .photo_gallary_container li .play_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 1.5rem;
  width: 1.5rem;
}

main#for_you .photo_gallary_container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* media query  */
@media screen  and (min-width:500px){
  main#for_you .photo_gallary_container li {
    height: 8.75rem;
    width: 25%;
  }
  main#for_you .photo_gallary_container li .play_icon {
    height: 2rem;
    width: 2rem;
  }
  
}
@media screen  and (min-width:700px){
  main#for_you .photo_gallary_container li {
  width: unset;
  height: 18.75rem;
  cursor: pointer;
  position: relative;
  flex: 1 1 auto; 
}
main#for_you .photo_gallary_container li .play_icon {
  height: 2.5rem;
  width: 2.5rem;
}
 }
@media screen  and (min-width:800px){

  main#for_you .for_you_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  main#for_you .for_you_header h3 {
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin: 0;
  }
 
}

/* no data found styles  */
main#for_you section.no_data {
  width: 100%;
  height: calc(50vh ) ;
  display: flex;
  align-items: center;
  justify-content: center;
}
main#for_you section.no_data > img {
  width: 12.5rem;
  height: 9rem;
}

@media screen and (min-width:576px) {
  main#for_you section.no_data {
    width: 100%;
    height: calc(100vh - 110px ) ;
  }
  main#for_you section.no_data > img {
    width: 19.5rem;
    height: 15rem;
  }  
}


/************
*
*
*   Login
*
*
*************/

main#login {
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-GhostWhite);
}
#login .bg_image_container{
  background-color: var(--color-GhostWhite);
  background-image: url('/assets/images/login_banner.png');
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
#login .bg_image_container .text_container {
  padding-top: 4rem;
  padding-left: 4rem;
  padding-right: 2rem;
}
#login .bg_image_container img{
  width: 6rem;
  height: 6rem;
  object-fit: cover;
}
#login .bg_image_container h2{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 3.438rem;
  line-height: 2.75rem;
  color: var(--color-white);
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#login .bg_image_container p{
font-family: var(--font-family2);
font-weight: 400;
font-size: 1rem;
line-height: 1.188rem;
color: var(--color-white);

}
#login .login_card_container  {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#login .login_card_container .login_card{
  width: 30.563rem;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 20px;
  padding: 1.5rem;
}
#login .login_card_container .login_card h4{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-align: center;
  color: var(--color-BalticSea);
}
#login .login_card_container .login_card h5{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.625rem;
  text-align: center;
  color: var(--color-BalticSea);
}
#login .login_card_container .login_card form{
 margin-top: 1.5rem;
}
#login .login_card_container .login_card form  .form-control{
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%; 
  height: 3rem; 
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 5px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-Dune);
}

/* error  */
#login .login_card_container .login_card form  .form-control.error {
border: 0.940424px solid var(--color-Geraldine);
box-shadow: 0px 0px 11px -2px var(--color-RedOrange);
}

#login .login_card_container .login_card form  .error_icon {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 1.188rem;
  height: 1.188rem;
}
#login .login_card_container .login_card form  .input_wrapper.error {
  border: 0.940424px solid var(--color-Geraldine);
  box-shadow: 0px 0px 11px -2px var(--color-RedOrange);
} 


/* success  */
#login .login_card_container .login_card form  .form-control.success {
  border: 0.940424px solid var(--color-IrishGreen);
  box-shadow: 0px 0px 11px -2px var(--color-IrishGreen);
  }
  
  #login .login_card_container .login_card form  .input_wrapper.success {
    border: 0.940424px solid var(--color-IrishGreen);
    box-shadow: 0px 0px 11px -2px var(--color-IrishGreen);
  } 

#login .login_card_container .login_card form  .input_wrapper{
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%; 
  height: 3rem; 
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-right: 1rem;

}
#login .login_card_container .login_card form  .input_wrapper > input{
  border: none;
  outline: none;
  box-shadow: none;
  height: 100%;
}
#login .login_card_container .login_card form  .input_wrapper > svg{
  width: 1rem;
  height: 1rem;
  fill: var(--color-LavenderPinocchio);
}
#login .login_card_container .login_card form  input::placeholder{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-LightGrey);
}

#login .login_card_container .login_card form .form-check-input{
  width: 1.063rem;
  height: 1rem;
  border: 0.854489px solid var(--color-LavenderPinocchio);
  border-radius: 2.56347px;
}
#login .login_card_container .login_card form .form-check-label{
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.775rem;
  line-height: 1rem;
  text-align: center;
  color: var(--color-BalticSea);
  opacity: 0.8;
}

#login .login_card_container .login_card form .forgot_password{
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.775rem;
  line-height: 1rem;
  text-align: center;
  color: var(--color-BleuDeFrance);

}

#login .login_card_container .login_card form .btn_container .btn{
  width: 100%;
  height: 2.5rem;
  background-color: var(--color-BleuDeFrance);
  border-radius: 6.39035px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.065rem;
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--color-white);
}
#login .login_card_container .login_card form .btn_container .btn_register{
 margin-top: 1.4rem;
}
#login .login_card_container .login_card .top_creator_container  {
  margin-top: 1.6rem;
  margin-bottom: 1rem;
}
#login .login_card_container .login_card .top_creator_container .top_creator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}
#login .login_card_container .login_card .top_creator_container > h6 {
font-family: var(--font-family);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.75rem;
text-align: center;
color: var(--color-Gunmetal);
margin-bottom: 1.1rem;
}
#login .login_card_container .login_card .top_creator_container .top_creator_card {
  width: 5.188rem;
  height: 5.188rem;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin-right: 0.6rem;
  margin-bottom: 1rem;
}
#login .login_card_container .login_card .top_creator_container .top_creator_card:last-child {
  margin-right: 0rem;
  
}
@media screen  and (min-width:578px){
  #login .login_card_container  {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  #login .login_card_container .login_card form .form-check-label{
    font-size: 0.875rem;
    line-height: 1rem;
  }
  #login .login_card_container .login_card form .forgot_password{
    font-size: 0.875rem;
    line-height: 1rem;
  }
}
#login .login_card_container .login_card .top_creator_container .top_creator_card img {
  width: 2.063rem;
  height: 2.063rem;  
  border-radius: 50%;

}
#login .login_card_container .login_card .top_creator_container .top_creator_card h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.568rem;
  line-height: 0.688rem;
  text-align: center;
  color: var(--color-black);
  margin-top: 0.6rem;
}

#login .login_card_container .login_card .top_creator_container .top_creator_card .circle {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-LaSalleGreen);
}

#login .login_card_container .login_card .policy_container p {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: center;
  color: var(--color-BalticSea);
  margin: 0;
  margin-bottom: 0.3rem;
}
#login .login_card_container .login_card .policy_container p  > a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-black);
}



/* sign in  */

main#signin {
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-GhostWhite);
}
#signin .bg_image_container{
  background-color: var(--color-GhostWhite);
  background-image: url('/assets/images/login_banner.png');
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
#signin .bg_image_container .text_container {
  padding-top: 4rem;
  padding-left: 4rem;
  padding-right: 2rem;
}
#signin .bg_image_container img{
  width: 6rem;
  height: 6rem;
  object-fit: cover;
}
#signin .bg_image_container h2{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 3.438rem;
  line-height: 2.75rem;
  color: var(--color-white);
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#signin .bg_image_container p{
font-family: var(--font-family2);
font-weight: 400;
font-size: 1rem;
line-height: 1.188rem;
color: var(--color-white);

}
#signin .signin_card_container  {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-top: 2rem;
  margin-bottom: 2rem;

}

#signin .signin_card_container .signin_card{
  width: 30.563rem;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 20px;
  padding: 1.5rem 1rem;
}

#signin .signin_card_container .signin_card h3{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.75rem;
  text-align: center;
  color: var(--color-BalticSea);
}
#signin .signin_card_container .signin_card h4{
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.175rem;
  line-height: 1.625rem;
  text-align: center;
  color: var(--color-BalticSea);
}
#signin .signin_card_container .signin_card h4 > span {
  font-weight: 500;
}

#signin .signin_card_container .signin_card form  .form-control {
  outline: none;
  border: none;
  box-shadow: none;
  width: 100%;
  height: 3rem;
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 2px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
}
/* error  */
#signin .signin_card_container .signin_card form  .form-control.error { 
  border: 0.940424px solid var(--color-Geraldine);
  box-shadow: 0px 0px 11px -2px var(--color-RedOrange);
  border-radius: 5px;
}
#signin .signin_card_container .signin_card form  .verify_code_input_wrapper {
  width: 100%;
  height: 3rem;
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding-left: 0.6rem;
}
#signin .signin_card_container .signin_card form  .verify_code_input_wrapper > span {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.188rem;
  text-transform: uppercase;
  color: #585252;
  white-space: nowrap;
}
#signin .signin_card_container .signin_card form  .verify_code_input_wrapper .form-control{
  outline: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
  background-color: transparent;
}
#signin .signin_card_container .signin_card .upload_img_text{
  font-size: 1.125rem;
  line-height: 1.313rem;
  text-align: center;
}
#signin .signin_card_container .signin_card form .upload_container{
  border: 1px dashed var(--color-PinkSwan);
  border-radius: 17px;
  height: 190px;
}
#signin .signin_card_container .signin_card form .upload_container > input {
display: none;
}
#signin .signin_card_container .signin_card form .upload_container > label {
width: 100%;
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
#signin .signin_card_container .signin_card form .upload_container > label > img  {
width: 6.25rem;
height: 6.25rem;

}
#signin .signin_card_container .signin_card   .account_type select {
  outline: none;
  border: none;
  box-shadow: none;
  width: 100%;
  height: 3rem;
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 2px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
}

#signin .signin_card_container .signin_card form  .form-control::placeholder {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-LavenderPinocchio); 
}
#signin .signin_card_container .signin_card form textarea {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  border: 1px solid var(--color-LavenderPinocchio);
  border-radius: 2px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.188rem;
  color: #C4C4C4;
  resize: none;
  padding: 1rem;
}
#signin .signin_card_container .signin_card form textarea::placeholder {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.188rem;
  color: #C4C4C4;
  
}

#signin .signin_card_container .signin_card form .link {
  display: block;
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: end;
  color: var(--color-BleuDeFrance);
  opacity: 0.8;
}

#signin .signin_card_container .signin_card form  .dob {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-Gunmetal); 
}
#signin .signin_card_container .signin_card form  .desc {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.058rem;
  line-height: 1.25rem;
  color: var(--color-Gunmetal);
}
#signin .signin_card_container .signin_card form  .para {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.625rem;
  color: var(--color-Gunmetal);
  text-align: center;
}

#signin .signin_card_container .signin_card   .pass_desc {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.625rem;
  color: var(--color-Gunmetal);
  text-align: center;
}
#signin .signin_card_container .signin_card form  .para {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.625rem;
  color: var(--color-Gunmetal);
  text-align: center;
}
#signin .signin_card_container .signin_card   .code_text {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-Gunmetal);
  text-align: center;
}
#signin .signin_card_container .signin_card  form .code_icon {
  position: absolute;
  top: 28%;
  right: 10px;
  width: 1.188rem;
  height: 1.188rem;
}

#signin .signin_card_container .signin_card form  .code_desc {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-Gunmetal);
  text-align: center;
}
#signin .signin_card_container .signin_card form  .code_desc > a{
  font-weight: 600;
  color: var(--color-Gunmetal);
}
#signin .signin_card_container .signin_card  form .btn_container {
  display: flex;
  align-items: center
  ;
  justify-content: space-between;
}
#signin .signin_card_container .signin_card  form .btn_container > button{
  width: 49%;
}
#signin .signin_card_container .signin_card   .btn_next {
  height: 2.5rem;
  background-color: var(--color-BleuDeFrance);
  box-shadow: 6.39035px 6.39035px 26.6265px rgba(42, 139, 242, 0.15), 4.26023px 4.26023px 26.6265px rgba(42, 139, 242, 0.05), 10.6506px 6.39035px 26.6265px rgba(42, 139, 242, 0.15);
  border-radius: 6.39035px;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.188rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--color-white);
}

/* account category  */
#signin .signin_card_container .account_category .dropdown_header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3rem;
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
}
#signin .signin_card_container .account_category .dropdown_header_container h6 {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-LightGrey);
  margin: 0;
}
#signin .signin_card_container .account_category .dropdown_header_container svg {
  width: 0.875rem;
  height: 0.438rem;
}
#signin .signin_card_container .account_category .dropdown_options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 20rem;
  overflow: hidden;
  overflow-y: auto;
  background-color: var(--color-white);
  padding: 1rem;
  display: none;
  transition: 0.3s all ease-in-out ;
}

#signin .signin_card_container .account_category .dropdown_options li {
  height: 3rem;
  background-color: var(--color-white);
  opacity: 0.8;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.17);
  border-radius: 7px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.188rem;
  line-height: 1.375rem;
  text-align: center;
  color: var(--color-Thunder);
  margin-bottom: 1rem;
  cursor: pointer;

}
#signin .signin_card_container .account_category .dropdown_options li:hover {
background: var(--color-AquaHaze);

}

.password_error {
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  padding-left: 0.6rem;
  padding-right:0.6rem ;
  height: 2.813rem;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  text-align: center;
  color: var(--color-Dune);
}
.password_error > p {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.188rem;
  text-align: center;
  color: var(--color-Dune);
  margin: 0;
}
.password_error > svg {
 width: 1.125rem;
 height: 1.125rem;
 margin-right: 0.5rem;
}
.password_error > p > a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.188rem;
  color: var(--color-black);
  text-decoration: underline;
}

#signin .signin_card_container .signin_card .creator_list_container {
  height: 20rem;
  overflow: hidden;
  overflow-y: auto;
  padding: 0.3rem;
}
#signin .signin_card_container .signin_card .creator_list_container .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#signin .signin_card_container .signin_card .creator_list_container .list h6 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: var(--color-black);
  margin: 0;

}

#signin .signin_card_container .signin_card .creator_list_container .list span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.563rem;
  line-height: 0.688rem;
  color: var(--color-PastelGrey);

}
#signin .signin_card_container .signin_card .creator_list_container .list .follow{
  width: 4.125rem;
  height: 3.75rem;
  background-color: var(--color-BleuDeFrance);
  box-shadow: 8.06259px 8.06259px 33.5941px rgba(42, 139, 242, 0.15), 5.37506px 5.37506px 33.5941px rgba(42, 139, 242, 0.05), 13.4376px 8.06259px 33.5941px rgba(42, 139, 242, 0.15);
  border-radius: 8.06259px 16.4019px 16.4019px 8.06259px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#signin .signin_card_container .signin_card .creator_list_container .list .follow > svg{
 width: 1.438rem;
 height: 1.688rem;
}

@media screen  and (min-width:578px){
  #signin .signin_card_container   {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  #signin .signin_card_container .signin_card h3{
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
  #signin .signin_card_container .signin_card h4{
    font-size: 1.375rem;
    line-height: 1.625rem;
  }
  #signin .signin_card_container .signin_card{
   
    padding: 1.5rem;
  }
  .password_error {
  width: 30.563rem;
    width: 30rem;
    height: 2.813rem; 
  }
  .password_error.email_error {
    width: 100%;
    height: 2.813rem; 
    margin-bottom: 1rem;
  }
}

/* forget moal styles  */
.forget_modal.modal {
  background-color: var(--color-GhostWhite);
}

.forget_modal.modal .maskgroup {
 position: absolute;
 z-index: 1000;
 width: 17rem;
 height:17rem; 
 opacity: 0.4;
 z-index: 1;
}
.forget_modal.modal .maskgroup.left_mask{
 bottom: 0px;
 left: 0px;
}
.forget_modal.modal .maskgroup.right_mask{
 right: 0px;
 top: 0px;
 opacity: 0.2;
}

.forget_modal.modal .modal-content {
  border: none;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.forget_modal.modal .modal-body .forget_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-align: center;
  color: var(--color-Thunder);
}
.forget_modal.modal .modal-body form input{
  border: none;
  outline: none;
  box-shadow: none;
  height: 2.375rem;
  width: 100%;
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
}
.forget_modal.modal .modal-body form .link{
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: center;
  color: var(--color-DavyGrey);
  opacity: 0.8;
  text-align: end;
  display: block;
}
.forget_modal.modal .modal-body form .btn_recover{
  width: 100%;
  height: 2.5rem;
  background-color: var(--color-BleuDeFrance);
  border-radius: 6.39035px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.065rem;
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  color: var(--color-white);

}
.forget_modal.modal .modal-content .close_icon {
  width: 1.688rem;
  height: 1.688rem;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
.forget_modal.modal .modal-content   .code_text {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.313rem;
  color: var(--color-Gunmetal);
  text-align: center;
}

.forget_modal.modal .modal-content  .verify_code_input_wrapper {
  width: 100%;
  height: 3rem;
  background-color: var(--color-white);
  border: 0.940424px solid var(--color-LavenderPinocchio);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding-left: 0.6rem;
}
.forget_modal.modal .modal-content  .verify_code_input_wrapper.error {
  border: 0.940424px solid var(--color-Geraldine);
  box-shadow: 0px 0px 11px -2px var(--color-RedOrange);
}
.forget_modal.modal .modal-content  .verify_code_input_wrapper.success {
  border: 0.940424px solid var(--color-IrishGreen);
  box-shadow: 0px 0px 11px -2px var(--color-IrishGreen);
}
.forget_modal.modal .modal-content  .verify_code_input_wrapper > span {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.188rem;
  text-transform: uppercase;
  color: #585252;
  white-space: nowrap;
}
.forget_modal.modal .modal-content  .verify_code_input_wrapper .form-control{
  outline: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-black);
  background-color: transparent;
}
.forget_modal.modal .modal-content  .verify_code_input_wrapper .code_icon {
  position: absolute;
  top: 28%;
  right: 10px;
  width: 1.188rem;
  height: 1.188rem;
}
.forget_modal.modal .modal-content form  .code_desc {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.2rem;
  color: var(--color-Gunmetal);
  text-align: center;
}
.forget_modal.modal .modal-content form  .code_desc > a{
  font-weight: 600;
  color: var(--color-Gunmetal);
}

.forget_modal.modal .error_message 
{
  position: absolute;
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(52, 84, 207, 0.07);
  border-radius: 14px;
  padding: 0.7rem 1rem;
  width: 100%;
  z-index: 3;
}

.forget_modal.modal .error_message  p
{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.375rem;
  text-align: center;
  color: var(--color-Dune);
  margin: 0;
}
.forget_modal.modal .error_message  p > span 
{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.375rem;
  text-align: center;
  color: var(--color-Dune);
  margin: 0;
}
.forget_modal.modal .error_message  svg
{
width: 1.3rem;
height: 1.3rem;
margin-right: 0.6rem;
}
@media screen  and (min-width:768px){
  .forget_modal.modal .error_message {
    width: 37.5rem;
  }
}