/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/* BUTTON MIXIN 
============================================= */
body {
  font-family: "Nunito", Helvetica, Arial, serif;
  color: #262c6c;
  font-weight: normal; }

.main-menu.menu-light .navigation li a {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #262c6c; }

.main-menu.menu-light .navigation > li.open > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: #262c6c; }

body.vertical-layout.vertical-menu-modern.menu-expanded
.main-menu
.navigation
li.has-sub
> a:not(.mm-next)::after {
  color: #DE468E; }

.header-navbar .navbar-container ul.nav li i.ficon {
  font-size: 1.4rem;
  color: #de468e; }

html body {
  background: #fff; }

.apexcharts-legend.position-right,
.apexcharts-legend.position-left {
  flex-direction: row !important; }

.vertical-overlay-menu
.main-menu
.navigation
li.has-sub
> a:not(.mm-next):after {
  color: #DE468E; }

.navbar-light {
  background: #f6f6f8; }

.switching-theme {
  transform: scale(1.1) translateY(1px);
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center; }

.page-title {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 33px;
  color: #262c6c; }

.text-color-blue {
  color: #262c6c; }

.btn-relief-white {
  background-color: #f9f9fb;
  color: #DE468E; }
  .btn-relief-white:hover, .btn-relief-white:focus {
    color: #DE468E; }

.dark-layout .btn-relief-white {
  background-color: #262c49;
  color: #c2c6dc; }
  .dark-layout .btn-relief-white:hover, .dark-layout .btn-relief-white:focus {
    color: #c2c6dc; }

.table-hover-animation tbody tr,
.table-hover-animation thead th {
  background-color: transparent; }

.table-hover-animation tbody tr {
  background-color: transparent; }
  .table-hover-animation tbody tr:hover {
    background-color: #fff; }

.table-hover-animation {
  background-color: transparent; }

.table a {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  text-decoration: underline; }
  .table a:hover {
    text-decoration: underline; }

.table tr td,
.table th td {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #262c6c; }
  @media only screen and (max-width: 767px) {
    .table tr td,
    .table th td {
      min-width: 150px; } }

.pagination .page-item .page-link {
  color: #262c6c; }

.table-type-1 {
  border-radius: 6px;
  overflow: hidden; }
  .table-type-1 tbody tr td,
  .table-type-1 tbody tr th,
  .table-type-1 thead tr td,
  .table-type-1 thead tr th {
    padding: 8px 25px; }

.form-control {
  border-color: #4359a5;
  border-width: 2px;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #262c6c;
  height: 42px;
  resize: none; }
  .form-control::placeholder {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #262c6c; }
  .form-control:focus {
    color: #262c6c !important; }

.form-label-group > input,
.form-label-group textarea {
  padding: 18px 15px; }

textarea {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #262c6c; }
  @media only screen and (min-width: 1248px) {
    textarea {
      /* width */
      /* Track */
      /* Handle */
      /* Handle on hover */ }
      textarea::-webkit-scrollbar {
        width: 7px;
        height: 4px;
        border-radius: 6px; }
      textarea::-webkit-scrollbar-track {
        background-color: #efeff1;
        border-radius: 6px; }
      textarea::-webkit-scrollbar-thumb {
        background: rgba(154, 154, 156, 0.9);
        border-radius: 6px; }
      textarea::-webkit-scrollbar-thumb:hover {
        background: #9a9a9c;
        border-radius: 6px; } }

.form-label-group > input:not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:placeholder-shown) ~ label {
  font-size: 15px;
  top: -30px; }

.form-label-group > input:not(:focus):not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:focus):not(:placeholder-shown) ~ label {
  color: #4359a5 !important; }

.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
  bottom: -40px; }

.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
  bottom: -40px; }

@media only screen and (min-width: 1024px) {
  .filtering {
    border-radius: 6px;
    background-color: #fff; } }

@media only screen and (min-width: 1024px) {
  .add-color {
    border-radius: 6px;
    background-color: #fff; } }

.add-color__items {
  display: flex;
  justify-content: space-between;
  align-items: start; }
  .add-color__items > div {
    width: 18%; }
  .add-color__items--last {
    margin-top: -10px; }
    .add-color__items--last select {
      min-width: 150px; }
    .add-color__items--last label {
      font-size: 15px;
      color: #4359a5 !important;
      font-weight: normal;
      margin-bottom: 3px;
      transform: translateY(-4px); }
  @media only screen and (max-width: 1023px) {
    .add-color__items {
      flex-wrap: wrap; }
      .add-color__items > div {
        width: 23%; } }
  @media only screen and (max-width: 1023px) {
    .add-color__items > div {
      width: 100%; }
    .add-color__items--last {
      width: 100%; } }

.comments {
  background-color: #fff;
  border-radius: 6px; }

.dark-layout .table-hover-animation a {
  color: #c2c6dc; }

.dark-layout .table-type-1 textarea {
  border: 2px solid #c2c6dc !important; }
  .dark-layout .table-type-1 textarea:focus {
    border-color: #DE468E !important; }

.dark-layout .text-color-blue {
  color: #c2c6dc; }

@media only screen and (min-width: 1024px) {
  .dark-layout .filtering {
    background-color: transparent;
    border: 1px solid #c2c6dc; } }

.dark-layout select {
  color: #c2c6dc; }
  .dark-layout select:focus {
    color: #c2c6dc; }
    .dark-layout select:focus option {
      color: #c2c6dc; }
  .dark-layout select option {
    color: #c2c6dc; }

.dark-layout .add-color {
  background-color: transparent; }

.modal {
  background: rgba(38, 44, 108, 0.6);
  backdrop-filter: blur(5px); }

.card {
  background: rgba(244, 244, 248, 0.5);
  border-radius: 20px; }
  .card-header {
    padding: 25px 25px 0 25px !important; }
  .card-body {
    padding: 25px !important; }

.last-actives,
.product-list {
  max-height: 360px;
  overflow-y: auto; }
  @media only screen and (min-width: 1248px) {
    .last-actives,
    .product-list {
      /* width */
      /* Track */
      /* Handle */
      /* Handle on hover */ }
      .last-actives::-webkit-scrollbar,
      .product-list::-webkit-scrollbar {
        width: 7px;
        height: 4px;
        border-radius: 6px; }
      .last-actives::-webkit-scrollbar-track,
      .product-list::-webkit-scrollbar-track {
        background-color: #efeff1;
        border-radius: 6px; }
      .last-actives::-webkit-scrollbar-thumb,
      .product-list::-webkit-scrollbar-thumb {
        background: rgba(154, 154, 156, 0.9);
        border-radius: 6px; }
      .last-actives::-webkit-scrollbar-thumb:hover,
      .product-list::-webkit-scrollbar-thumb:hover {
        background: #9a9a9c;
        border-radius: 6px; } }

.last-actives {
  max-height: 310px; }

.product-list .user-page-info h3,
.product-list .user-page-info h3 > a {
  font-style: 300;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #262c6c; }

.card-header h4 {
  color: #262c6c;
  font-weight: bolder; }

.new-users h5 {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #262c6c; }

@media only screen and (max-width: 767px) {
  .new-users > div:first-of-type {
    width: 60%; } }

.last-active h5 {
  font-weight: 700;
  font-size: 16px;
  color: #262c6c;
  margin-bottom: 5px; }

.last-active p {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #262c6c;
  margin-bottom: 8px; }

.last-active span {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #231f20;
  opacity: 0.5; }

.gallery-top {
  border-radius: 10px;
  overflow: hidden; }
  .gallery-top .product-item-image {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden; }
    @media only screen and (min-width: 1440px) {
      .gallery-top .product-item-image {
        height: 450px; } }
    @media only screen and (max-width: 767px) {
      .gallery-top .product-item-image {
        height: 250px; } }
    .gallery-top .product-item-image img {
      /*width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; */}

@media only screen and (min-width: 768px) {
  .datetime {
    width: 75%; } }

.gallery-thumbs {
  border-radius: 10px;
  overflow: hidden; }
  .gallery-thumbs .product-item-image {
    width: 60px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer; }
    .gallery-thumbs .product-item-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }
  .gallery-thumbs .swiper-slide-thumb-active {
    opacity: .5; }

.dark-layout .product-list .user-page-info h3,
.dark-layout .product-list .user-page-info h3 > a {
  color: #c2c6dc; }

.dark-layout .card-header h4 {
  color: #c2c6dc; }

.dark-layout .new-users h5 {
  color: #c2c6dc; }

.dark-layout .last-active h5 {
  color: #c2c6dc; }

.dark-layout .last-active p {
  color: #c2c6dc; }

.dark-layout .last-active span {
  color: #c2c6dc; }

.logo {
  height: 50px;
  width: 90px;
  transition: 500ms ease all; }
  .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center; }

.menu-collapsed .logo {
  width: 50px; }

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li.active > a i {
  color: white !important; }

body.menu-collapsed .main-menu .navbar-header {
  padding-left: 1rem !important; }

.vertical-overlay-menu .main-menu .navigation > li.active > a > i {
  color: white !important; }