@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Domine:wght@400..700&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Brands Theme */
@import "variables-diamond-light.css";
/* @import "variables-diamond-dark.css"; */
/* @import "variables-amber-light.css"; */
/* @import "variables-amber-dark.css"; */
/* @import "variables-opal-light.css"; */
/* @import "variables-opal-dark.css"; */

/* Language Theme */
@import "variables-english-serif.css";
/* @import "variables-english-sansserif.css"; */
/* @import "variables-arabic-serif.css"; */
/* @import "variables-arabic-sansserif.css"; */

/* Density Theme */
@import "variables-density-comfortable.css";
/* @import "variables-density-compact.css"; */

/* Radius Theme */
/* @import "variables-radius-square.css"; */
@import "variables-radius-round.css";
/* @import "variables-radius-pills.css"; */

/* Shadow Theme */
/* @import "variables-shadow-flat.css"; */
@import "variables-shadow-subtle.css";
/* @import "variables-shadow-default.css"; */
/* @import "variables-shadow-raised.css"; */

/* Global Theme */
@import "variables-global.css";



.main-content {
  margin-left: 285px;
  background-color: var(--pageBgColor);
  padding-right: 67px;
  padding-left: 67px;
}

/* Add the font family variable for the entire page */
body {
  background-color: var(--pageBgColor);
}

/* Use this part to syle the page container */
.page-container {
  background-color: var(--containerBgColor);
  border-radius: var(--containerBorderRadius);
  padding: var(--containerPadding) var(--containerPadding);
  direction: var(--containerDirection);
}


/* ////////////////////////////   Avatars Style Start Here   ////////////////////////////  */

.avatar {
margin-right: var(--avatarGroupGap);
border-width: var(--avatarBorderWidth);
}

/* Here to style the avatar small */
.avatar-small {
  height: var(--avatarSmallSize);
  border-radius: var(--avatarSmallBorderRadius);
}

/* Here to style the avatar large */
.avatar-large {
  height: var(--avatarLargeSize);
  border-radius: var(--avatarLargeBorderRadius);
}


/* ////////////////////////////   Section Style Start Here   ////////////////////////////  */

.section {
  padding: var(--sectionPadding) var(--sectionPadding);
  border-radius: var(--sectionBorderRadius) !important;
  background-color: var(--sectionBgColor) !important;
  margin-bottom: 24px;
  border-width: 0px;
  border-color: #ececed;
}

.section.shadow-sm {
  box-shadow: var(--sectionShadowX) var(--sectionShadowY) var(--sectionShadowBlur) var(--sectionShadowColor) !important;
}


.section-title {
  font-family: var(--sectionTitleFontFamily);
  font-weight: var(--sectionTitleFontWeight);
  font-size: var(--sectionTitleFontSize);
  line-height: var(--sectionTitleFontLineHeight);
  margin-bottom: var(--sectionGap);
  color: var(--sectionTitleFontColor);
}

/* ////////////////////////////   My Meetings Section Style Start Here   ////////////////////////////  */

/* Here to style the meeting section title content */
.my-meetings-title::before {
  content: var(--sectionMeetingsTitleContent);
}

/* Here to style the meeting card */
.meeting-card {
  padding: var(--meetingCardPadding);
  margin-bottom: var(--meetingCardMarginBottom);
  border-radius: var(--meetingCardBorderRadius);
}

/* Here to style the meeting card title */
.meeting-card .title {
  font-family: var(--meetingCardTitleFontFamily);
  font-weight: var(--meetingCardTitleFontWeight);
  font-size: var(--meetingCardTitleFontSize);
  line-height: var(--meetingCardTitleFontLineHeight);
  margin-bottom: var(--meetingCardTitleMarginBottom);
}

/* Here to style the meeting card time */
.meeting-card .time {
  font-family: var(--meetingCardTimeFontFamily);
  font-weight: var(--meetingCardTimeFontWeight);
  font-size: var(--meetingCardTimeFontSize);
  line-height: var(--meetingCardTimeFontLineHeight);
  margin-bottom: var(--meetingCardGap);
}

/* here to style the meeting card primary */
.meeting-card.primary {
  background-color: var(--meetingCardPrimaryBgColor);
  border-left: var(--meetingCardBorderWidthLeft) solid var(--meetingCardPrimaryBorderColor) !important;
  border-right: var(--meetingCardBorderWidthRight) solid var(--meetingCardPrimaryBorderColor) !important;
  border-bottom: 0px;
  border-top: 0px;
}

/* Here to style the meeting card primary title color */
.meeting-card.primary .title {
  color: var(--meetingCardPrimaryTitleColor);
}

/* Here to style the meeting 1 title content */
.meeting1-title::before {
  content: var(--meeting1TitleContent);
}

/* Here to style the meeting card primary time color */
.meeting-card.primary .time {
  color: var(--meetingCardPrimaryTimeColor);
}

/* Here to style the meeting 1 time content */
.meeting1-time::before {
  content: var(--meeting1TimeContent);
}

/* Here to style the meeting card primary avatar border width and color */
.meeting-card.primary .avatar {
  border: var(--avatarBorderWidth) solid var(--meetingCardPrimaryAvatarBorderColor);
}

/* Here to style the meeting card success colors */
.meeting-card.success {
  background-color: var(--meetingCardSuccessBgColor);
  border-left: var(--meetingCardBorderWidthLeft) solid var(--meetingCardSuccessBorderColor) !important;
  border-right: var(--meetingCardBorderWidthRight) solid var(--meetingCardSuccessBorderColor) !important;
  border-bottom: 0px;
  border-top: 0px;
}

/* Here to style the meeting card success title color */
.meeting-card.success .title {
  color: var(--meetingCardSuccessTitleColor);
}

/* Here to style the meeting 2 title content */
.meeting2-title::before {
  content: var(--meeting2TitleContent);
}

/* Here to style the meeting card success time color */
.meeting-card.success .time {
  color: var(--meetingCardSuccessTimeColor);
}

/* Here to style the meeting 2 time content */
.meeting2-time::before {
  content: var(--meeting2TimeContent, '1 - 2 PM');
}


/* Here to style the meeting card success avatar border width and color */
.meeting-card.success .avatar {
  border: var(--avatarBorderWidth) solid var(--meetingCardSuccessAvatarBorderColor);
}

/* Here to style the meeting card danger colors */
.meeting-card.danger {
  background-color: var(--meetingCardDangerBgColor);
  border-left: var(--meetingCardBorderWidthLeft) solid var(--meetingCardDangerBorderColor) !important;
  border-right: var(--meetingCardBorderWidthRight) solid var(--meetingCardDangerBorderColor) !important;
  border-bottom: 0px;
  border-top: 0px;
  margin-bottom: 0px;
}

/* Here to style the meeting card danger title color */
.meeting-card.danger .title {
  color: var(--meetingCardDangerTitleColor);
}

/* Here to style the meeting 3 title content */
.meeting3-title::before {
  content: var(--meeting3TitleContent);
}

/* Here to style the meeting card danger time color */
.meeting-card.danger .time {
  color: var(--meetingCardDangerTimeColor);
}

/* Here to style the meeting 3 time content */
.meeting3-time::before {
  content: var(--meeting3TimeContent, '3 - 4 PM');
}

/* Here to style the meeting card danger avatar border width and color */
.meeting-card.danger .avatar {
  border: var(--avatarBorderWidth) solid var(--meetingCardDangerAvatarBorderColor);
}


/* ////////////////////////////   Apps Notifications Section Style Start Here   ////////////////////////////  */


/* App Notification List style */
.apps-notifications .list {
  margin-bottom: var(--appNotificationsListGap);
}

.section-app-title::before {
  content: var(--sectionAppsTitleContent);
}

/* App Notification Image Style */
.apps-notifications .list .item {
  gap: var(--appNotificationsListItemGap);
}

/* App Notification Title Style */
.apps-notifications .title {
  color: var(--appNotificationsTitleFontColor);
  font-weight: var(--appNotificationsTitleFontWeight);
  font-size: var(--appNotificationsTitleFontSize);
  line-height: var(--appNotificationsTitleFontLineHeight);
  font-family: var(--appNotificationsTitleFontFamily);
}

/* App 1 Title Content */
.apps-notifications .app1-title::before {
  content: var(--appNotificationsApp1TitleContent);
}

/* App 2 Title Content */
.apps-notifications .app2-title::before {
  content: var(--appNotificationsApp2TitleContent);
}

/* App 3 Title Content */
.apps-notifications .app3-title::before {
  content: var(--appNotificationsApp3TitleContent);
}

/* App 4 Title Content */
.apps-notifications .app4-title::before {
  content: var(--appNotificationsApp4TitleContent);
}

/* App 5 Title Content */
.apps-notifications .app5-title::before {
  content: var(--appNotificationsApp5TitleContent);
}

/* ////////////////////////////   Toggle Style Start Here   ////////////////////////////  */


/* Don't Touch */
.form-check-input {
  margin-top: 0px;
}

/* Don't Touch */
.form-switch .form-check-input {
  --bs-form-switch-bg: none;
  background-image: none;
  position: relative;
  transition: all 0.3s ease;
}

/* Don't Touch */
.form-check-input:focus,
.form-check-input:active {
  box-shadow: none;
  border: none;
  outline: none;
}

/* Toggle Style */
.form-switch .form-check-input {
  width: var(--toggleWidth) !important;
  height: var(--toggleHeight) !important;
  border-radius: var(--toggleBorderRadius);
}

/* Toggle Off Style */
.form-switch .form-check-input {
  background-color: var(--toggleOffBgColor);
  border-color: var(--toggleOffBorderColor);
}

/* Toggle Off Circle Style */
.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--toggleCircleWidth) !important;
  height: var(--toggleCircleHeight) !important;
  background-color: var(--toggleOffCircleBgColor);
  border-radius: var(--toggleCircleBorderRadius);
  transition: transform 0.3s ease;
}

/* Toggle On Style */
.form-switch .form-check-input:checked {
  background-color: var(--toggleOnBgColor);
  border-color: var(--toggleOnBorderColor);
}

/* Toggle On Circle Style */
.form-switch .form-check-input:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -6px;
  width: var(--toggleCircleWidth) !important;
  height: var(--toggleCircleHeight) !important;
  background-color: var(--toggleOnCircleBgColor);
  border-radius: var(--toggleCircleBorderRadius);
  transition: transform 0.3s ease;
  transform: translateX(1.5rem);
}


/* Don't Touch */
.form-check-input:checked:focus::before,
.form-check-input:checked:active::before {
  position: absolute;
  top: 3px;
  left: -5px;
}

/* Don't Touch */
.form-check-input:focus::before,
.form-check-input:active::before {
  position: absolute;
  top: 3px;
  left: 3px;
}


/* ////////////////////////////   Header Section Style Start Here   ////////////////////////////  */


/* Header Section Avatar Margin Bottom */
.header .avatar {
  margin-bottom: var(--headerAvatarMarginBottom);
}

/* Header Section Name Style */
.header .name {
  font-family: var(--headerNameFontFamily);
  font-size: var(--headerNameFontSize);
  line-height: var(--headerNameFontLineHeight);
  font-weight: var(--headerNameFontWeight);
  color: var(--headerNameFontColor);
  margin-bottom: var(--headerNameMarginBottom);
}

.header .name::before {
  content: var(--headerNameFontContent);
}

/* Header Section Role Style */
.header .role {
  font-family: var(--headerRoleFontFamily);
  font-size: var(--headerRoleFontSize);
  line-height: var(--headerRoleFontLineHeight);
  font-weight: var(--headerRoleFontWeight);
  color: var(--headerRoleFontColor);
}

.header .role::before {
  content: var(--headerRoleFontContent);
}

/* Header Section Title Style  */
.header .title {
  font-family: var(--headerTitleFontFamily);
  font-size: var(--headerTitleFontSize);
  line-height: var(--headerTitleFontLineHeight);
  font-weight: var(--headerTitleFontWeight);
  color: var(--headerTitleFontColor);
  margin-top: var(--headerGap);
  /* Don't touch */
  margin-bottom: 0px;
}

.header .title::before {
  content: var(--headerTitleFontContent);
}


/* ////////////////////////////   Logo Style Start Here   ////////////////////////////  */

/* Logo Icon Style */
.navbar .logo-icon {
  background-color: var(--logoIconBgColor);
  color: var(--logoIconColor);
  font-size: var(--logoIconFontSize);
  line-height: var(--logoIconFontLineHeight);
  padding: var(--logoIconPadding);
  border-radius: var(--logoIconBorderRadius);
}

/* Gap between logo icon and name Style */
.navbar-brand {
  gap: var(--logoGap);
  /* Don't touch */
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Navbar Section Logo Name Style */
.logo-name {
  color: var(--logoNameFontColor);
  font-size: var(--logoNameFontSize);
  line-height: var(--logoNameFontLineHeight);
  font-weight: var(--logoNameFontWeight);
  font-family: var(--logoNameFontFamily);
}

.logo-name::before {
  content: var(--logoNameFontContent);
}



/* ////////////////////////////   Navbar Section Style Start Here   ////////////////////////////  */

/* Navbar Section Style */
.section.navbar {
  padding: var(--sectionPadding);
}

/* Navbar Section Link Default Style */
.nav-item .nav-link {
  background-color: var(--menuItemDefaultBgColor);
  color: var(--menuItemDefaultFontColor);
  font-family: var(--menuItemFontFamily);
  font-size: var(--menuItemFontSize);
  font-weight: var(--menuItemFontWeight);
  line-height: var(--menuItemFontLineHeight);
  background-color: transparent;
  padding: var(--menuItemPaddingY) var(--menuItemPaddingX) !important;
  border-radius: var(--menuItemBorderRadius);
  gap: var(--menuItemGap);
  display: flex;
  align-items: center;
}

/* Navbar Section item default Icon Style */
.nav-item i {
  font-size: var(--menuItemIconSize);
  line-height: var(--menuItemIconLineHeight);
  color: var(--menuItemDefaultIconColor);
}


/* Navbar Section Link Hover Style */
.nav-item .nav-link:hover {
  background-color: var(--menuItemHoverBgColor);
  color: var(--menuItemHoverFontColor);
}


.nav-item .nav-link:hover i {
  color: var(--menuItemHoverIconColor);
}

/* Don't Touch */
.nav-link.dropdown-toggle::after {
  display: none;
}

.item1::before {
  content: var(--menuItem1Content);
}

.item2::before {
  content: var(--menuItem2Content);
}

.item3::before {
  content: var(--menuItem3Content);
}


/* Dropdown menu style here */
.dropdown-menu {
  background-color: var(--menuDropdownBgColor);
  border: var(--menuDropdownBorderWidth) solid var(--menuDropdownBorderColor);
  border-radius: var(--menuDropdownBorderRadius);
  box-shadow: var(--menuDropdownShadowX) var(--menuDropdownShadowY) var(--menuDropdownShadowBlur) var(--menuDropdownShadowColor);
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
}

/* Menu Dropdown Item Default style here  */
.dropdown-item {
  background-color: var(--menuItemDefaultBgColor);
  color: var(--menuItemDefaultFontColor);
  padding: var(--menuItemPaddingY) var(--menuItemPaddingX);
  border-radius: var(--menuDropdownItemBorderRadius);
  font-family: var(--menuItemFontFamily);
  font-size: var(--menuItemFontSize);
  line-height: var(--menuItemFontLineHeight);
  font-weight: var(--menuItemFontWeight);
  /* Don't touch */
  text-align: justify;
}

/* Menu Dropdown Item Hover style here  */
.dropdown-item:hover {
  background-color: var(--menuItemHoverBgColor);
  color: var(--menuItemDefaultFontColor);
}

/* Menu Dropdown Divider style here  */
.dropdown-divider {
  border-top: var(--menuDropdownDividerWidth) solid var(--menuDropdownDividerColor);
  /* Don't touch */
  margin: 0px;
}

/* Menu Dropdown Content */
.dropdown-menu .item1::before {
  content: var(--menuDropdownItem1Content);
}

.dropdown-menu .item2::before {
  content: var(--menuDropdownItem2Content);
}

.dropdown-menu .item3::before {
  content: var(--menuDropdownItem3Content);
}


/* ////////////////////////////   Choose Card Price Item Section Style Start Here   ////////////////////////////  */

/* Choose Card Section Style */
.section.choose-card {
  margin-bottom: 0px;
  padding: var(--chooseCardPaddingY) var(--sectionPadding);
  border: 2px solid var(--chooseCardBorderColor);
}

.choose-card .plan {
  gap: var(--chooseCardHorizontalGap);
}

/* Choose Card Section Title Style */
.choose-card .title {
  font-family: var(--chooseCardTitleFontFamily);
  font-weight: var(--chooseCardTitleFontWeight);
  font-size: var(--chooseCardTitleFontSize);
  line-height: var(--chooseCardTitleFontLineHeight);
  color: var(--chooseCardTitleFontColor);
  margin-bottom: var(--chooseCardVerticalGap);
}

.choose-card .title::before {
  content: var(--chooseCardTitleFontContent);
}

/* Choose Card Section Description style */
.choose-card .desc {
  font-family: var(--chooseCardDescFontFamily);
  font-weight: var(--chooseCardDescFontWeight);
  font-size: var(--chooseCardDescFontSize);
  line-height: var(--chooseCardDescFontLineHeight);
  color: var(--chooseCardDescFontColor);
}

.choose-card .desc::before {
  content: var(--chooseCardDescFontContent);
}

/* Choose Card Section Price Style */
.choose-card .price {
  font-family: var(--chooseCardPriceFontFamily);
  font-weight: var(--chooseCardPriceFontWeight);
  font-size: var(--chooseCardPriceFontSize);
  line-height: var(--chooseCardPriceFontLineHeight);
  color: var(--chooseCardPriceFontColor);
}

.choose-card .price::before {
  content: var(--chooseCardPriceFontContent);
}


/* Choose Card Section Radio Buton Style */
.form-check-input:checked {
  background-color: var(--toggleOnBgColor);
  border-color: var(--toggleOnBorderColor);
}


/* ////////////////////////////   Tabs Section Style Start Here   ////////////////////////////  */

/* Tabs Section Style */
.nav-tabs {
  background-color: var(--tapBgColor);
  padding: var(--tapPadding);
  border-radius: var(--tapBorderRadius);
  /* Don't touch */
  --bs-nav-tabs-border-width: initial;
  border: none;
}

/* Tab Section Link Default Style */
.nav-tabs .nav-link {
  background-color: var(--tapItemDefaultBgColor);
  color: var(--tapItemDefaultFontColor);
  padding: var(--tapItemPaddingY) var(--tapItemPaddingY) !important;
  border-radius: var(--tapItemBorderRadius);
  font-size: var(--tapItemLabelFontSize);
  font-family: var(--tapItemLabelFontFamily);
  font-weight: var(--tapItemLabelFontWeight);
  line-height: var(--tapItemLabelFontLineHeight);
}

/* Tab Section Link Hover Style */
.nav-tabs .nav-link:hover {
  background-color: var(--tapItemHoverBgColor);
  color: var(--tapItemHoverFontColor);
  border: none;
}

/* Tab Section Link Active Style */
.nav-tabs .nav-link.active {
  background-color: var(--tapItemActiveBgColor);
  color: var(--tapItemActiveFontColor);
  border: none;
}

/* Tab Items Content */

.nav-tabs .nav-link.item1::before {
  content: var(--tapItem1LabelContent);
}

.nav-tabs .nav-link.item2::before {
  content: var(--tapItem2LabelContent);
}

.nav-tabs .nav-link.item3::before {
  content: var(--tapItem3LabelContent);
}


/* ////////////////////////////   Input Field Section Style Start Here   ////////////////////////////  */

/* Input Field Default Style */
.form-control {
  background-color: var(--inputFieldDefaultBgColor);
  border: var(--inputFieldBorderWidth) solid var(--inputFieldDefaultBorderColor);
  border-radius: var(--inputFieldBorderRadius);
  padding: var(--inputFieldPaddingY) var(--inputFieldPaddingX);
  font-family: var(--inputFieldFontFamily);
  font-size: var(--inputFieldFontSize);
  line-height: var(--inputFieldFontLineHeight);
  font-weight: var(--inputFieldFontWeight);
  color: var(--inputFieldFocusFontColor) !important;
}

/* Input Field Default Placeholder Style */
.form-control::placeholder {
  font-size: var(--inputFieldFontSize);
  line-height: var(--inputFieldFontLineHeight);
  font-weight: var(--inputFieldFontWeight);
  color: var(--inputFieldDefaultFontColor) !important;
}

/* Input Field Hover Style */
.form-control:hover {
  background-color: var(--inputFieldHoverBgColor);
  border-color: var(--inputFieldHoverBorderColor);
}

/* Input Field Hover Placeholder Style */
.form-control:hover::placeholder {
  color: var(--inputFieldHoverFontColor) !important;
}

/* Input Field Focus Style */
.form-control:focus {
  background-color: var(--inputFieldFocusBgColor);
  border-color: var(--inputFieldFocusBorderColor);
  outline: none;
  box-shadow: none;
}

/* Input Field Focus Placeholder Style */
.form-control:focus::placeholder {
  color: var(--inputFieldFocusFontColor) !important;
}



/* ////////////////////////////   Buttons Section Style Start Here   ////////////////////////////  */

/* Buttons Style */
.btn {
  border-radius: var(--buttonMediumBorderRadius);
  padding: var(--buttonMediumPaddingY) var(--buttonMediumPaddingX);
  font-size: var(--buttonMediumFontSize);
  line-height: var(--buttonMediumFontLineHeight);
  font-weight: var(--buttonFontWeight);
  border: none;
  font-family: var(--buttonFontFamily);
}

.btn-content::before {
  content: var(--buttonContent);
}

/* Buttons Small Style */
.btn-sm {
  padding: var(--buttonSmallPaddingY) var(--buttonSmallPaddingX);
  border-radius: var(--buttonSmallBorderRadius);
  font-size: var(--buttonSmallFontSize);
  line-height: var(--buttonSmallFontLineHeight);
}

/* Buttons Icon Style */
.btn-icon {
  font-size: var(--buttonIconFontSize);
  line-height: var(--buttonIconFontLineHeight);
  padding: var(--buttonIconPaddingY) var(--buttonIconPaddingX);
}



/* Buttons Primary Default Style */
.btn-primary {
  background-color: var(--buttonPrimaryDefaultBgColor);
  color: var(--buttonPrimaryDefaultTextColor);
}

/* Buttons Primary Hover Style */
.btn-primary:hover {
  background-color: var(--buttonPrimaryHoverBgColor);
  color: var(--buttonPrimaryHoverTextColor);
}

/* Buttons Primary Focused Style */
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--buttonPrimaryFocusBgColor) !important;
  color: var(--buttonPrimaryFocusTextColor) !important;
}

/* Text Buttons Primary Default Font Style */
.btn-link.btn-primary{
  color: var(--buttonPrimaryTextDefaultTextColor);
}

/* Text Buttons Primary Hover Font Style */
.btn-link.btn-primary:hover{
  color: var(--buttonPrimaryTextHoverTextColor);
}

/* Text Buttons Primary Focus Font Style */
.btn-link.btn-primary:focus,
.btn-link.btn-primary:active{
  color: var(--buttonPrimaryTextFocusTextColor) !important;
}


/* Buttons Secondary Default Style */
.btn-secondary {
  background-color: var(--buttonSecondaryDefaultBgColor);
  color: var(--buttonSecondaryDefaultTextColor);
}

/* Buttons Secondary Hover Style */
.btn-secondary:hover {
  background-color: var(--buttonSecondaryHoverBgColor);
  color: var(--buttonSecondaryHoverTextColor);
}

/* Buttons Secondary Focused Style */
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--buttonSecondaryFocusBgColor) !important;
  color: var(--buttonSecondaryFocusTextColor) !important;
}


/* Text Buttons Secondary Default Font Style */
.btn-link.btn-secondary{
  color: var(--buttonSecondaryTextDefaultTextColor);
}

/* Text Buttons Secondary Hover Font Style */
.btn-link.btn-secondary:hover{
  color: var(--buttonSecondaryTextHoverTextColor);
}

/* Text Buttons Secondary Focus Font Style */
.btn-link.btn-secondary:focus,
.btn-link.btn-secondary:active{
  color: var(--buttonSecondaryTextFocusTextColor) !important;
}


/* Text Button Style */
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  background-color: transparent !important;
  text-decoration: var(--buttonTextDecoration);
}



/* ////////////////////////////   Pagination Section Style Start Here   ////////////////////////////  */

/* Pagination Section Style */
.pagination {
  gap: var(--paginationGap);
}

/* Pagination Section Link Default Style */
.pagination .page-item .page-link {
  border-radius: var(--paginationItemBorderRadius);
  background-color: var(--paginationItemDefaultBgColor);
  color: var(--paginationItemDefaultFontColor);
  padding: var(--paginationNumberPaddingY) var(--paginationNumberPaddingX);
  font-size: var(--paginationNumberFontSize);
  line-height: var(--paginationNumberFontLineHeight);
  font-weight: var(--paginationNumberFontWeight);
  font-family: var(--paginationNumberFontFamily);
  border: none;
}

/* Pagination Section Link Hover Style */
.pagination .page-item .page-link:hover {
  background-color: var(--paginationItemHoverBgColor);
  color: var(--paginationItemHoverFontColor);
}

/* Pagination Section Link Active Style */
.pagination .page-item.active .page-link {
  background-color: var(--paginationItemActiveBgColor);
  color: var(--paginationItemActiveFontColor);
}

/* Pagination pages number content */
.pagination .page1::before {
  content: var(--paginationPage1NumberFontContent);
}
.pagination .page2::before {
  content: var(--paginationPage2NumberFontContent);
}
.pagination .page3::before {
  content: var(--paginationPage3NumberFontContent);
}
.pagination .page4::before {
  content: var(--paginationPage4NumberFontContent);
}
.pagination .page5::before {
  content: var(--paginationPage5NumberFontContent);
}


/* ////////////////////////////   Color Palette Section Style Start Here   ////////////////////////////  */

/* Palette Section Style */
.palette .margin-short {
  /* Don't touch */
  margin-bottom: 4px;
}

/* Palette Section Item Style */
.palette .item {
  font-family: var(--palettesItemFontFamily);
  font-size: var(--palettesItemFontSize);
  line-height: var(--palettesItemFontLineHeight);
  font-weight: var(--palettesItemFontWeight);
  padding: var(--palettesItemPaddingY) var(--palettesItemPaddingX);
  border-radius: var(--palettesItemBorderRadius);
}

/* Palette Section Item Primary 100 Style */
.palette .item.primary-100 {
  background-color: var(--palettesPrimary100BgColor);
  color: var(--palettesPrimary100FontColor);
}

/* Palette Section Item Primary 200 Style */
.palette .item.primary-200 {
  background-color: var(--palettesPrimary200BgColor);
  color: var(--palettesPrimary200FontColor);
}

/* Palette Section Item Primary 300 Style */
.palette .item.primary-300 {
  background-color: var(--palettesPrimary300BgColor);
  color: var(--palettesPrimary300FontColor);
}

/* Palette Section Item Primary 400 Style */
.palette .item.primary-400 {
  background-color: var(--palettesPrimary400BgColor);
  color: var(--palettesPrimary400FontColor);
}

/* Palette Section Item Primary 500 Style */
.palette .item.primary-500 {
  background-color: var(--palettesPrimary500BgColor);
  color: var(--palettesPrimary500FontColor);
}

/* Palette Section Item Primary 600 Style */
.palette .item.primary-600 {
  background-color: var(--palettesPrimary600BgColor);
  color: var(--palettesPrimary600FontColor);
}

/* Palette Section Item Primary 700 Style */
.palette .item.primary-700 {
  background-color: var(--palettesPrimary700BgColor);
  color: var(--palettesPrimary700FontColor);
}

/* Palette Section Item Primary 800 Style */
.palette .item.primary-800 {
  background-color: var(--palettesPrimary800BgColor);
  color: var(--palettesPrimary800FontColor);
}

/* Palette Section Item Primary 900 Style */
.palette .item.primary-900 {
  background-color: var(--palettesPrimary900BgColor);
  color: var(--palettesPrimary900FontColor);
}

/* Palette Section Item Primary 1000 Style */
.palette .item.primary-1000 {
  background-color: var(--palettesPrimary1000BgColor);
  color: var(--palettesPrimary1000FontColor);
}

/* Palette Section Item Secondary 100 Style */
.palette .item.secondary-100 {
  background-color: var(--palettesSecondary100BgColor);
  color: var(--palettesSecondary100FontColor);
}

/* Palette Section Item Secondary 200 Style */
.palette .item.secondary-200 {
  background-color: var(--palettesSecondary200BgColor);
  color: var(--palettesSecondary200FontColor);
}

/* Palette Section Item Secondary 300 Style */
.palette .item.secondary-300 {
  background-color: var(--palettesSecondary300BgColor);
  color: var(--palettesSecondary300FontColor);
}

/* Palette Section Item Secondary 400 Style */
.palette .item.secondary-400 {
  background-color: var(--palettesSecondary400BgColor);
  color: var(--palettesSecondary400FontColor);
}

/* Palette Section Item Secondary 500 Style */
.palette .item.secondary-500 {
  background-color: var(--palettesSecondary500BgColor);
  color: var(--palettesSecondary500FontColor);
}

/* Palette Section Item Secondary 600 Style */
.palette .item.secondary-600 {
  background-color: var(--palettesSecondary600BgColor);
  color: var(--palettesSecondary600FontColor);
}

/* Palette Section Item Secondary 700 Style */
.palette .item.secondary-700 {
  background-color: var(--palettesSecondary700BgColor);
  color: var(--palettesSecondary700FontColor);
}

/* Palette Section Item Secondary 800 Style */
.palette .item.secondary-800 {
  background-color: var(--palettesSecondary800BgColor);
  color: var(--palettesSecondary800FontColor);
}

/* Palette Section Item Secondary 900 Style */
.palette .item.secondary-900 {
  background-color: var(--palettesSecondary900BgColor);
  color: var(--palettesSecondary900FontColor);
}

/* Palette Section Item Secondary 1000 Style */
.palette .item.secondary-1000 {
  background-color: var(--palettesSecondary1000BgColor);
  color: var(--palettesSecondary1000FontColor);
}

/* Palette Section Item Success 100 Style */
.palette .item.success-100 {
  background-color: var(--palettesSuccess100BgColor);
  color: var(--palettesSuccess100FontColor);
}

/* Palette Section Item Success 200 Style */
.palette .item.success-200 {
  background-color: var(--palettesSuccess200BgColor);
  color: var(--palettesSuccess200FontColor);
}

/* Palette Section Item Success 300 Style */
.palette .item.success-300 {
  background-color: var(--palettesSuccess300BgColor);
  color: var(--palettesSuccess300FontColor);
}

/* Palette Section Item Success 400 Style */
.palette .item.success-400 {
  background-color: var(--palettesSuccess400BgColor);
  color: var(--palettesSuccess400FontColor);
}

/* Palette Section Item Success 500 Style */
.palette .item.success-500 {
  background-color: var(--palettesSuccess500BgColor);
  color: var(--palettesSuccess500FontColor);
}

/* Palette Section Item Success 600 Style */
.palette .item.success-600 {
  background-color: var(--palettesSuccess600BgColor);
  color: var(--palettesSuccess600FontColor);
}

/* Palette Section Item Success 700 Style */
.palette .item.success-700 {
  background-color: var(--palettesSuccess700BgColor);
  color: var(--palettesSuccess700FontColor);
}

/* Palette Section Item Success 800 Style */
.palette .item.success-800 {
  background-color: var(--palettesSuccess800BgColor);
  color: var(--palettesSuccess800FontColor);
}

/* Palette Section Item Success 900 Style */
.palette .item.success-900 {
  background-color: var(--palettesSuccess900BgColor);
  color: var(--palettesSuccess900FontColor);
}

/* Palette Section Item Success 1000 Style */
.palette .item.success-1000 {
  background-color: var(--palettesSuccess1000BgColor);
  color: var(--palettesSuccess1000FontColor);
}

/* Palette Section Item Warning 100 Style */
.palette .item.warning-100 {
  background-color: var(--palettesWarning100BgColor);
  color: var(--palettesWarning100FontColor);
}

/* Palette Section Item Warning 200 Style */
.palette .item.warning-200 {
  background-color: var(--palettesWarning200BgColor);
  color: var(--palettesWarning200FontColor);
}

/* Palette Section Item Warning 300 Style */
.palette .item.warning-300 {
  background-color: var(--palettesWarning300BgColor);
  color: var(--palettesWarning300FontColor);
}

/* Palette Section Item Warning 400 Style */
.palette .item.warning-400 {
  background-color: var(--palettesWarning400BgColor);
  color: var(--palettesWarning400FontColor);
}

/* Palette Section Item Warning 500 Style */
.palette .item.warning-500 {
  background-color: var(--palettesWarning500BgColor);
  color: var(--palettesWarning500FontColor);
}

/* Palette Section Item Warning 600 Style */
.palette .item.warning-600 {
  background-color: var(--palettesWarning600BgColor);
  color: var(--palettesWarning600FontColor);
}

/* Palette Section Item Warning 700 Style */
.palette .item.warning-700 {
  background-color: var(--palettesWarning700BgColor);
  color: var(--palettesWarning700FontColor);
}

/* Palette Section Item Warning 800 Style */
.palette .item.warning-800 {
  background-color: var(--palettesWarning800BgColor);
  color: var(--palettesWarning800FontColor);
}

/* Palette Section Item Warning 900 Style */
.palette .item.warning-900 {
  background-color: var(--palettesWarning900BgColor);
  color: var(--palettesWarning900FontColor);
}

/* Palette Section Item Warning 1000 Style */
.palette .item.warning-1000 {
  background-color: var(--palettesWarning1000BgColor);
  color: var(--palettesWarning1000FontColor);
}

/* Palette Section Item Danger 100 Style */
.palette .item.danger-100 {
  background-color: var(--palettesDanger100BgColor);
  color: var(--palettesDanger100FontColor);
}

/* Palette Section Item Danger 200 Style */
.palette .item.danger-200 {
  background-color: var(--palettesDanger200BgColor);
  color: var(--palettesDanger200FontColor);
}

/* Palette Section Item Danger 300 Style */
.palette .item.danger-300 {
  background-color: var(--palettesDanger300BgColor);
  color: var(--palettesDanger300FontColor);
}

/* Palette Section Item Danger 400 Style */
.palette .item.danger-400 {
  background-color: var(--palettesDanger400BgColor);
  color: var(--palettesDanger400FontColor);
}

/* Palette Section Item Danger 500 Style */
.palette .item.danger-500 {
  background-color: var(--palettesDanger500BgColor);
  color: var(--palettesDanger500FontColor);
}

/* Palette Section Item Danger 600 Style */
.palette .item.danger-600 {
  background-color: var(--palettesDanger600BgColor);
  color: var(--palettesDanger600FontColor);
}

/* Palette Section Item Danger 700 Style */
.palette .item.danger-700 {
  background-color: var(--palettesDanger700BgColor);
  color: var(--palettesDanger700FontColor);
}

/* Palette Section Item Danger 800 Style */
.palette .item.danger-800 {
  background-color: var(--palettesDanger800BgColor);
  color: var(--palettesDanger800FontColor);
}

/* Palette Section Item Danger 900 Style */
.palette .item.danger-900 {
  background-color: var(--palettesDanger900BgColor);
  color: var(--palettesDanger900FontColor);
}

/* Palette Section Item Danger 1000 Style */
.palette .item.danger-1000 {
  background-color: var(--palettesDanger1000BgColor);
  color: var(--palettesDanger1000FontColor);
}

/* Palletes items content style here */
.item100::before {
  content: var(--palettesItem100FontContent);
}
.item200::before {
  content: var(--palettesItem200FontContent);
}
.item300::before {
  content: var(--palettesItem300FontContent);
}
.item400::before {
  content: var(--palettesItem400FontContent);
}
.item500::before {
  content: var(--palettesItem500FontContent);
}
.item600::before {
  content: var(--palettesItem600FontContent);
}
.item700::before {
  content: var(--palettesItem700FontContent);
}
.item800::before {
  content: var(--palettesItem800FontContent);
}
.item900::before {
  content: var(--palettesItem900FontContent);
}

/* ////////////////////////////   Footer Section Style Start Here   ////////////////////////////  */

/* Footer Section Title style */

.footer-title {
  margin-bottom: var(--footerGap);
}

.footer-title::before {
  content: var(--footerTitleContent);
}


/* Footer Section Links Default style */
.footer .link {
  font-family: var(--buttonFontFamily);
  font-size: var(--buttonSmallFontSize);
  line-height: var(--buttonSmallFontLineHeight);
  font-weight: var(--buttonFontWeight);
  color: #86878f;
  padding: var(--buttonSmallPaddingY) var(--buttonSmallPaddingX);
}


/* Footer Section Links Hover style */
.footer .link:hover {
  color: var(--buttonSecondaryTextHoverTextColor);
}

/* Footer Section Links Focus style */
.footer .link:focus,
.footer .link:active {
  color: var(--buttonSecondaryTextFocusTextColor);
}

/* Footer Links Content */
.footer .link1::before {
  content: var(--footerLink1Content);
}

.footer .link2::before {
  content: var(--footerLink3Content);
}

.footer .link3::before {
  content: var(--footerLink3Content);
}



/* ////////////////////////////   Alerts Section Style Start Here   ////////////////////////////  */


/* Alert Section Card Style */
.alert {
    padding: var(--alertsPaddingY) var(--alertsPaddingX);
    border-radius: var(--alertsBorderRadius);
    border-width: var(--alertsBorderWidth);
    gap: var(--alertsGap);
}

.alert-section-title::before {
  content: var(--alertsTitleFontContent);
}

/* Alert Section Card Title Style */
.alert .content {
  font-family: var(--alertsTitleFontFamily);
  font-size: var(--alertsTitleFontSize);
  line-height: var(--alertsTitleFontLineHeight);
  font-weight: var(--alertsTitleFontWeight);
}

/* Alert Section Card Text with link Style */
.alert span {
  /* Don't touch */
  text-decoration: underline;
}

/* Alert Section Card Primary Style */
.alert-primary {
  background-color: var(--alertsPrimaryBgColor);
  border-color: var(--alertsPrimaryBorderColor);
  color: var(--alertsPrimaryFontColor);
  /* Don't touch */
  border-style: solid;
}

/* Alert Section Card Primary Icon Style */
.inbox {
  color: var(--alertsPrimaryIconColor);
}

/* Alert Section Card Success Style */
.alert-success {
  background-color: var(--alertsSuccessBgColor);
  border-color: var(--alertsSuccessBorderColor);
  color: var(--alertsSuccessFontColor);
  /* Don't touch */
  border-style: solid;
}

.alert-title1::before {
  content: var(--alertsItem1TitleContent);
}

/* Alert Section Card Success Icon Style */
.badge-check {
  color: var(--alertsSuccessIconColor);
}

.alert-title2::before {
  content: var(--alertsItem2TitleContent);
}

/* Alert Section Card Warning Style */
.alert-warning {
  background-color: var(--alertsWarningBgColor);
  border-color: var(--alertsWarningBorderColor);
  color: var(--alertsWarningFontColor);
  /* Don't touch */
  border-style: dashed;
}

/* Alert Section Card Warning Icon Style */
.shield-check {
  color: var(--alertsWarningIconColor);
}

.alert-title3::before {
  content: var(--alertsItem3TitleContent);
}

/* Alert Section Card Danger Style */
.alert-danger {
  background-color: var(--alertsDangerBgColor);
  border-color: var(--alertsDangerBorderColor);
  color: var(--alertsDangerFontColor);
  /* Don't touch */
  border-style: solid;
}

/* Alert Section Card Danger Icon Style */
.lock {
  color: var(--alertsDangerIconColor);
}

.alert-title4::before {
  content: var(--alertsItem4TitleContent);
}



/* ////////////////////////////   Card Section Style Start Here   ////////////////////////////  */

/* Card Section Style */
.section.card {
  padding: var(--cardPadding);
}

/* Card Section Image Style */
.card .card-image {
  background-color: var(--cardImageBgColor);
  background-image: var(--cardImageName);
  border-radius: var(--cardImageBorderRadius);
  height: var(--cardImageHeight);
  /* Don't touch */
  background-size: cover;
  background-repeat: no-repeat;
}

/* Card Section Body Style */
.card .card-body {
  padding: var(--cardBodyPaddingTop) var(--cardBodyPaddingX) var(--cardBodyPaddingBottom);
}

/* Card Section Title Style */
.card .card-title {
  font-family: var(--cardTitleFontFamily);
  font-size: var(--cardTitleFontSize);
  font-weight: var(--cardTitleFontWeight);
  line-height: var(--cardTitleFontLineHeight);
  color: var(--cardTitleFontColor);
  margin-bottom: var(--cardBodyTextGap);
}

.card .card-title::before {
  content: var(--cardTitleFontContent);
}

/* Card Section Text Style */
.card .card-text {
  font-family: var(--cardDescFontFamily);
  font-size: var(--cardDescFontSize);
  font-weight: var(--cardDescFontWeight);
  line-height: var(--cardDescFontLineHeight);
  color: var(--cardDescFontColor);
  margin-bottom: var(--cardBodyGap);
}

.card .card-text::before {
  content: var(--cardDescFontContent);
}

/* Card Section Stars Style */
.card .card-body .reviews .stars {
  gap: var(--cardStarsGap);
}

/* Card Section Starts Icons Style */
.card .card-body .reviews .stars i {
  font-size: var(--cardStarsIconSize);
  color: var(--cardStarsIconColor);
}

/* Card Section Review Style */
.card .card-body .reviews {
  gap: var(--cardBodyReviewGap);
  margin-bottom: var(--cardBodyGap);
}

/* Card Section Review Number Style */
.card .card-body .reviews .number {
  font-family: var(--cardReviewFontFamily);
  font-size: var(--cardReviewFontSize);
  line-height: var(--cardReviewFontLineHeight);
  font-weight: var(--cardReviewFontWeight);
  color: var(--cardReviewFontColor);
}

.card .card-body .reviews .number::before {
  content: var(--cardReviewFontContent);
}

.prices {
  gap: var(--cardBodyPricesGap);
}
/* Card Section New Price Style */
.card .card-body .new-price {
  font-family: var(--cardNewPriceFontFamily);
  font-size: var(--cardNewPriceFontSize);
  font-weight: var(--cardNewPriceFontWeight);
  line-height: var(--cardNewPriceFontLineHeight);
  color: var(--cardNewPriceFontColor);
}

.card .card-body .new-price::before {
  content: var(--cardNewPriceFontContent);
}

/* Card Section Old Price Style */
.card .card-body .old-price {
  font-family: var(--cardOldPriceFontFamily);
  font-size: var(--cardOldPriceFontSize);
  font-weight: var(--cardOldPriceFontWeight);
  line-height: var(--cardOldPriceFontLineHeight);
  color: var(--cardOldPriceFontColor);
}

.card .card-body .old-price::before {
  content: var(--cardOldPriceFontContent);
}



/* ////////////////// DON'T TOUCH //////////////////////// */


/* =========== SIDE NAVIGATION MENU STYLES =========== */

.side-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 285px;
  height: 100vh;
  background: linear-gradient(135deg, #f5f3ff 0%, #f0f0f5 100%);
  border-right: 1px solid #e5e5ea;
  overflow-y: auto;
  z-index: 1000;
  padding: 24px 16px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
}

.side-nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #ddd;
}

.side-nav-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c2c2c;
}

.side-nav-header i {
  font-size: 24px;
  color: #916dff;
}

.nav-section {
  margin-bottom: 40px;
}

.nav-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #7e7d84;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-section-title i {
  font-size: 14px;
  color: #916dff;
}

.nav-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nav-option {
  padding: 10px 12px;
  border: 2px solid #e5e5ea;
  border-radius: 6px;
  background-color: white;
  color: #2c2c2c;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.nav-option:hover {
  background-color: #e8e0ff;
  border-color: #d4c5ff;
}

.nav-option.active {
  background-color: #916dff;
  color: #ffffff;
  border: 2px solid #7c5ce6;
  font-weight: 700;
  box-shadow: none;
}

.nav-option i {
  font-size: 14px;
  width: 18px;
  text-align: center;
}