:root {
  /* start colors */
  --color-black-100: #000;
  --color-black-200: #0c0c0c;

  --color-white-100: #fff;
  --color-white-200: #f8fafc;
  --color-white-300: #e8e8e8;

  --color-gray-100: #1c1c1c;
  --color-gray-200: #262626;
  --color-gray-300: #333;
  --color-gray-400: #666;
  --color-gray-500: #414142;
  --color-gray-600: #98a2b3;
  --color-gray-700: #eaecf1;

  --color-main-100: #447ceb;
  --color-main-200: #1d61e71a;

  --color-gradient-main-100: linear-gradient(180deg, #447ceb 0%, #1f62e7 100%);

  --color-red-100: #e01a1a;
  --color-yellow-100: #ffe644;

  /* // end colors */
}

/* start components */
/* start nav */
nav .logo {
  width: 120px;
}
nav .navbar-toggler {
  background-color: var(--color-main-100);
}

@media screen and (min-width: 992px) {
  nav .active {
    border-bottom: 2px solid var(--color-main-100);
  }
}
nav .user_actions_dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--color-white-100);
  color: var(--color-gray-500);
  border: none;
}
nav .user_actions_dropdown .dropdown-toggle:focus {
  box-shadow: none;
}
nav .user_actions_dropdown .dropdown-toggle::after {
  display: none;
}
nav .user_actions_dropdown .dropdown-menu {
  text-align: inherit;
}
@media screen and (min-width: 992px) {
  html[dir="ltr"] nav .user_actions_dropdown .dropdown-menu {
    left: unset;
    right: 15px;
  }
}
@media screen and (min-width: 992px) {
  html[dir="rtl"] nav .user_actions_dropdown .dropdown-menu {
    left: 15px;
    right: unset;
  }
}
nav .user_actions_dropdown .dropdown-item {
  padding: 8px 16px;
}
nav .user_actions_dropdown .dropdown-item:hover {
  background-color: var(--color-main-200);
}
nav .user_actions_dropdown .username {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;
}
nav .user_actions_dropdown .dropdown_item_sign_out {
  color: var(--color-red-100);
  border-top: 1px solid var(--color-gray-700);
  font-weight: 600;
}
nav .select_language {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 10px;
}
@media screen and (min-width: 320px) {
  nav .select_language {
    flex-direction: row;
  }
}
nav .select_language .logo {
  width: 130px;
}
nav .select_language .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: var(--color-white-100);
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-500);
  border-radius: 20px;
}
nav .select_language .dropdown-toggle:hover,
nav .select_language .dropdown-toggle:active,
nav .select_language .dropdown-toggle:focus {
  background-color: var(--color-white-100);
  color: var(--color-gray-300);
}
nav .select_language .dropdown-toggle::after {
  content: none;
}
html[dir="rtl"] nav .select_language .dropdown-toggle .arrow_select_language {
  transform: rotate(180deg);
}
nav .select_language .dropdown-menu {
  padding: 8px;
  border-color: var(--color-gray-500);
  border-radius: 5px;
}
html[dir="ltr"] nav .select_language .dropdown-menu {
  left: unset !important;
  right: unset !important;
}
@media screen and (min-width: 576px) {
  html[dir="ltr"] nav .select_language .dropdown-menu {
    right: 0 !important;
  }
}
html[dir="rtl"] nav .select_language .dropdown-menu {
  left: 0 !important;
  right: unset !important;
}
nav .select_language .dropdown-menu .dropdown-item {
  border-radius: 5px;
}
/* // end nav */

/* start dropdown toggle */

/* dropdown toggle */
.dropdown-toggle:focus {
  box-shadow: none;
}
/* // end dropdown toggle */
/* // end components */