/*------------------------------------------------------------------
[Master Stylesheet]

Bootstrap Gallery - Admin Dashboard Templates

Project:		Elite Admin Dashboard
Version:		1.0
Last change: 	September 2023
-------------------------------------------------------------------*/

/* Zmienna wysokości nagłówka + odstęp nad prawym panelem */
:root{
  --header-height: 65px;    /* jeśli kiedykolwiek zmienisz wysokość headera – wystarczy tu */
  --rs-gap-top: 10px;       /* żądany margines 10px poniżej headera */
}
/*------------------------------------------------------------------
[Table of Contents]

1. Importing Sass Variables
2. Importing Web Fonts
	2.1 Lato Font
	2.2 Rubik Mono One Font
3. Body CSS
4. Loading CSS
5. Re Usable Styles
	5.1 Anchor Reset
	5.2 HR
	5.3 Unorder List
	5.4 Headings
	5.5 Images
	5.6 Background Colors
    5.7 Border Colors
	5.9 Text Colors
6. Layout CSS
	6.1 Page Wrapper
	6.2 Sidebar Wrapper
	6.3 Main Container
	6.4 Page Header
    6.5 Main Header
	6.6 Search Container
	6.7 Leads Dropdown
    6.8 Header Ations
	6.9 Header Profile Actions
	6.10 Breadcrumb Container
	6.11 Content Wrapper
	6.12 App Footer
7. Country Dropdown
8. Components/Widgets
	8.1 Button Icon
	8.2 Custom Button Group
	8.3 Custom Icon Group
	8.4 Custom Badge Group
	8.5 Chart Heights
	8.6 Card Heights
	8.7 Number Stats
    8.8 Notifications Container
	8.9 Stats Tiles
	8.10 Reports Summary
    8.11 Day Selection
    8.12 Activity Container
    8.13 Transactions Container
    8.14 Task List
    8.15 User Messages
    8.16 Info Stats
    8.17 Income Stats
    8.18 Tickets Container
    8.19 Task Stats
    8.20 Meetings Container
    8.21 Nav Tabs
    8.21 Stacked Images
    8.22 Orders
    8.23 Logs
    8.24 Global Slaes
    8.25 Social Tile
    8.26 Databar Container
    8.27 Weather widget
    8.28 Ratings
    8.29 Product Cards
    8.30 Product Cards
    8.31 Product Checkout List
    8.32 Edit Customer Status
    8.33 Add Product
    8.34 Create Invoice Wrapper
    8.35 Invoice List
    8.36 Create Invoice
    8.37 Form Actions Footer
    8.38 Icons Container
    8.39 Sales Stats
    8.40 Monthly Stats
    8.41 Chart Notify
    8.42 Vertical line
9. Plugins
	9.1 Overlay Scroll
	9.2 DropZone
	9.3 Credit Card
	9.4 jVector Maps
	9.5 Apex Graphs
10. Pages
	10.1 Login
	10.2 Maintenance Screen
	10.3 Contacts
    10.4 Pricing Plan
    10.5 Account Settings
    10.6 Error Page
11. Bootstrap Overwrite CSS
	11.1 Badge
	11.2 Placeholder
	11.3 Accordion
	11.4 Alerts
	11.5 Tabs
	11.6 Cards
	11.7 Buttons
    11.8 Button Primary
    11.9 Button Secondary
    11.10 Button Info
    11.11 Button Danger
    11.12 Button Warning
    11.13 Button Success
    11.14 Button Light
    11.15 Button Dark
    11.16 Button White
    11.17 Dropdown Menu
    11.18 List Group
    11.19 Carousel
    11.20 Form Controls
    11.21 File Upload
    11.22 Checkbox and Radio
    11.23 Modal
    11.24 Tables
    11.25 Pagination
    11.26 Progress
    11.27 Spinners
    11.28 Off Canvas
    11.29 Off Canvas
    11.30 Row Gutters


-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]

# Lato - Main Font
# Rubik Mono One Font - Additional Font
-------------------------------------------------------------------*/
/************************************************
	************************************************
				1. Importing Sass Variables
	************************************************
************************************************/
/************************************************
	************************************************
				2. Importing Web Fonts
	************************************************
************************************************/
@font-face {
  font-family: "Rubik Mono One";
  src: url("../fonts/rubik-mono/RubikMonoOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-style: normal;
  font-display: swap;
}
/************************************************
	************************************************
									3. Body CSS
	************************************************
************************************************/
html,
body {
  height: 100%;
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: #17181c;
  min-height: 100%;
  position: relative;
  background: #ffffff;
}

/************************************************
	************************************************
					4. Loading CSS
	************************************************
************************************************/
#loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#loading-wrapper .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -28px;
  margin-top: -30px;
  width: 56px;
  height: 60px;
  display: flex;
}
#loading-wrapper .spinner > div {
  background-color: #1395ba;
  height: 100%;
  width: 3px;
  margin: 2px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -moz-animation: linedelay 1.1s infinite ease-in-out;
  -webkit-animation: linedelay 1.1s infinite ease-in-out;
  animation: linedelay 1.1s infinite ease-in-out;
}
#loading-wrapper .spinner .line1 {
  background-color: #5c7aa7;
  -moz-animation-delay: -1s;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
#loading-wrapper .spinner .line2 {
  background-color: #5ca793;
  -moz-animation-delay: -1s;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
#loading-wrapper .spinner .line3 {
  background-color: #a2b86c;
  -moz-animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
#loading-wrapper .spinner .line4 {
  background-color: #ebc844;
  -moz-animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
#loading-wrapper .spinner .line5 {
  background-color: #ecaa38;
  -moz-animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
#loading-wrapper .spinner .line6 {
  background-color: #ef8b2c;
  -moz-animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
#loading-wrapper .spinner .line7 {
  background-color: #df6f05;
  -moz-animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
#loading-wrapper .spinner .line8 {
  background-color: #f84c39;
  -moz-animation-delay: -0.4s;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
@-moz-keyframes linedelay {
  0%, 50%, 100% {
    -moz-transform: scaleY(0.4);
  }
  30% {
    -moz-transform: scaleY(2);
  }
}
@-webkit-keyframes linedelay {
  0%, 50%, 100% {
    -webkit-transform: scaleY(0.4);
  }
  30% {
    -webkit-transform: scaleY(2);
  }
}
@keyframes linedelay {
  0%, 50%, 100% {
    transform: scaleY(0.4);
  }
  30% {
    transform: scaleY(2);
  }
}

/************************************************
	************************************************
				5. Re Usable Styles
	************************************************
************************************************/
/************* 5.1 Anchor Reset *************/
a {
  color: #17181c;
  text-decoration: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #232f40 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

@keyframes autofill {
    100% {
        background: #232f40;
        color: #fff;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: #232f40;
        color: #fff;
    }
}
a:hover {
  text-decoration: none;
  color: inherit;
}

/************* 5.2 HR *************/
hr {
  background: #b7c6d8;
  opacity: 1;
  color: transparent;
}

/************* 5.3 Unorder List *************/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.custom {
  margin: 20px 0 0 20px;
}
ul.custom li {
  line-height: 180%;
}

/************* 5.4 Headings *************/
p {
  line-height: 160%;
  color: #686d7d;
}

/************* 5.6 Background Colors *************/
.shade-white, .modal .modal-content {
  background: #ffffff !important;
}

.shade-primary, .page-item.active .page-link {
  background: #245fae !important;
}

.shade-secondary {
  background: #7e8c9e !important;
}

.shade-yellow, .header-profile a.user-settings .avatar .status.away {
  background: #ffb31b !important;
}

.shade-red, .header-profile a.user-settings .avatar .status.busy, .page-header .sidebar-togglescreen:hover, .page-header .toggle-sidebar-fullscreen:hover, .page-header .toggle-sidebar:hover {
  background: #e4515e !important;
}

.shade-green, .header-profile a.user-settings .avatar .status.online, .page-header .sidebar-togglescreen, .page-header .toggle-sidebar-fullscreen, .page-header .toggle-sidebar {
  background: #2c998d !important;
}

.shade-blue {
  background: #337ce9 !important;
}

.shade-purple {
  background: #8736d6 !important;
}

.shade-orange {
  background: #e1661b !important;
}

.shade-light {
  background: #eff2f5 !important;
}

.shade-dark {
  background: #34424e !important;
}

/************* 5.8 Text Colors *************/
.text-primary {
  color: #1553a3 !important;
}

.text-secondary {
  color: #707f93 !important;
}

.text-red {
  color: #e13d4b !important;
}

.text-green {
  color: #158c7f !important;
}

.text-yellow {
  color: #fda901 !important;
}

.text-blue {
  color: #276dd9 !important;
}

.text-purple {
  color: #7920d1 !important;
}

.text-white {
  color: #ffffff !important;
}

.text-black {
  color: #191919 !important;
}

.text-light {
  color: #686d7d !important;
}

.text-muted {
  color: rgba(0, 0, 0, 0.5) !important;
}

/************* 5.9 Box Colors *************/
.box-light-yellow {
  background-color: #fff7e8;
  border: 1px solid #ffbe3c;
}

.box-light-red {
  background-color: #fff2f3;
  border: 1px solid #e96c76;
}

.box-light-green {
  background-color: #e6fffc;
  border: 1px solid #4baa9f;
}

.box-light-blue {
  background-color: #eaf2ff;
  border: 1px solid #448af4;
}

.box-light-purple {
  background-color: #f5ebff;
  border: 1px solid #9954dd;
}

/************* 5.9 Box Colors *************/
.box-bdr-yellow {
  border: 1px solid #ffbe3c;
}

.box-bdr-red {
  border: 1px solid #e96c76;
}

.box-bdr-green {
  border: 1px solid #4baa9f;
}

.box-bdr-blue {
  border: 1px solid #448af4;
}

.box-bdr-purple {
  border: 1px solid #9954dd;
}

/************* Seperators *************/
.v-separator {
  border-right: 1px solid #b7c6d8;
}

.h-separator {
  border-bottom: 1px solid #b7c6d8;
}

.ht-separator {
  border-top: 1px solid #b7c6d8;
}

.v-curve-seperator {
  background: url(../images/curve-line.svg) repeat-y;
  background-position: right center;
}

/************* Font Sizes *************/
.font-1x {
  font-size: 1rem;
}

.font-1xx {
  font-size: 1.5rem;
}

.font-2x {
  font-size: 2rem;
}

.font-2xx {
  font-size: 2.5rem;
}

.font-3x {
  font-size: 3rem;
}

.font-3xx {
  font-size: 3.5rem;
}

.font-4x {
  font-size: 4rem;
}

.font-4xx {
  font-size: 4.5rem;
}

.font-5x {
  font-size: 5rem;
}

/************* Image Sizes *************/
.img-1x {
  width: 1rem;
  height: 1rem;
}

.img-1xx {
  width: 1.5rem;
  height: 1.5rem;
}

.img-2x {
  width: 2rem;
  height: 2rem;
}

.img-2xx {
  width: 2.5rem;
  height: 2.5rem;
}

.img-3x {
  width: 3rem;
  height: 3rem;
}

.img-3xx {
  width: 3.5rem;
  height: 3.5rem;
}

.img-4x {
  width: 4rem;
  height: 4rem;
}

.img-4xx {
  width: 4.5rem;
  height: 4.5rem;
}

.img-5x {
  width: 5rem;
  height: 5rem;
}

.img-5xx {
  width: 5.5rem;
  height: 5.5rem;
}

.img-6x {
  width: 6rem;
  height: 6rem;
}

.img-6xx {
  width: 6.5rem;
  height: 6.5rem;
}

.img-7x {
  width: 7rem;
  height: 7rem;
}

.img-7xx {
  width: 7.5rem;
  height: 7.5rem;
}

/* Style dla obrazków w kartach produktów, aby miały stałą wysokość i były wyśrodkowane */
.item-card img.card-img-top {
  height: 150px; /* Ustaw stałą wysokość */
  object-fit: contain; /* Zachowaj proporcje i dopasuj obraz do kontenera */
  display: block; /* Upewnij się, że obraz jest elementem blokowym */
  margin: 0 auto; /* Wyśrodkuj obraz poziomo */
  padding: 10px; /* Dodaj padding, aby obraz nie dotykał krawędzi */
}

/************* Icon Boxes *************/
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box.sm {
  width: 2rem;
  height: 2rem;
}
.icon-box.md {
  width: 3rem;
  height: 3rem;
}
.icon-box.lg {
  width: 4rem;
  height: 4rem;
}
.icon-box.xl {
  width: 5rem;
  height: 5rem;
}

/************************************************
	************************************************
					6. Layout CSS
	************************************************
************************************************/
/************* 6.1 Page Wrapper *************/
.page-wrapper {
  padding: 0;
  position: relative;
}
.page-wrapper.fullscreen .sidebar-wrapper {
  left: -250px;
}
.page-wrapper.fullscreen .main-container {
  padding-left: 0px;
}
.page-wrapper.togglescreen .sidebar-wrapper {
  left: -250px;
}
.page-wrapper.togglescreen .main-container {
  padding-left: 0px;
}

/************* 6.2 Sidebar Wrapper *************/
.sidebar-custom-nav {
  max-height: 210px;
  min-height: 210px;
  padding: 10px 0 10px 0;
  background: #18202b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sidebar-custom-nav a {
  min-width: 105px;
  min-height: 80px;
  background: #232f40;
  padding: 10px;
  margin: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #bec9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 0.9rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.sidebar-custom-nav a i {
  font-size: 1.6rem;
  color: #bec9d9;
  margin: 0 0 5px 0;
}
.sidebar-custom-nav a:hover {
  background-color: #36455b;
}
.sidebar-custom-nav a.active {
  background: #5a6981;
  color: #ffffff;
}
.sidebar-custom-nav a.active i {
  color: #ffffff;
}

@media screen and (max-height: 600px) {
  .sidebar-custom-nav {
    display: none;
  }
}
.sidebar-quick-links {
  max-height: 200px;
  min-height: 200px;
  margin: 20px 0 20px 0;
}
.sidebar-quick-links .quick-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.sidebar-quick-links .quick-links a {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  margin: 8px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/************* Sidebar Wrapper *************/
.sidebar-wrapper {
  width: 250px;
  padding: 0;
  background: #232f40;
  position: fixed;
  top: var(--header-height); 
  height: calc(100vh - var(--header-height)); 
  left: 0;
  z-index: 999;
  -webkit-transition: left 0.3s ease, width 0.3s ease;
  transition: left 0.3s ease, width 0.3s ease;
  /************* Sidebar Icon Animation *************/
}
@keyframes iconUpDown {
  0%, 100% {
    transform: translateY(3px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/************* Sidebar Menu *************/
.sidebar-menu {
  padding: 0 0 20px 0;
  height: calc(100vh - 275px);
}
.sidebar-menu ul li {
  margin: 0;
}
.sidebar-menu ul li a {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
  padding: 4px 20px 4px 20px;
  color: #bec9d9;
  background: #232f40;
  font-size: 0.9rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: relative;
}
.sidebar-menu ul li a i {
  margin-right: 10px;
  font-size: 1.25rem;
  min-width: 30px;
  min-height: 40px;
  color: #bec9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.sidebar-menu ul li a .menu-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1;
  overflow: hidden;
}
.sidebar-menu ul li a .badge {
  margin: 0 15px 0 auto;
  min-width: 32px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.sidebar-menu ul li a:hover {
  color: #ffffff;
  background-color: #36455b;
}
.sidebar-menu ul li a:hover i {
  animation: iconUpDown 1s linear infinite;
}
.sidebar-menu ul li.active-page-link {
  position: relative;
}
.sidebar-menu ul li.active-page-link a {
  color: #ffffff;
  background-color: #5a6981;
}
.sidebar-menu ul li.active-page-link a i {
  color: #ffffff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.sidebar-menu ul li.active a i {
  color: #ffffff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.sidebar-menu ul li.active a.current-page {
  position: relative;
  color: #ffffff;
  background-color: #5a6981;
}
.sidebar-menu ul li.active a.current-page:hover {
  background-color: #5a6981;
  color: #ffffff !important;
}
.sidebar-menu ul li.active .sidebar-submenu {
  display: block;
}
.sidebar-menu .sidebar-dropdown > a:after {
  font-family: "bootstrap-icons" !important;
  font-weight: 700;
  font-size: 0.9rem;
  content: "\f282";
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 14px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  transform: rotate(-90deg);
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu {
  display: none;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li {
  margin: 0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 7px 4px 30px;
  margin: 0;
}
.sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover {
  color: #ffffff;
}
.sidebar-menu .sidebar-dropdown.active > a:after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  right: 15px;
}

@media screen and (max-height: 600px) {
  .sidebar-menu {
    height: calc(100vh - 75px);
  }
}
/************* 6.3 Main Container *************/
.main-container {
  -webkit-transition: padding-left 0.3s ease;
  transition: padding-left 0.3s ease;
  padding: 0 0 0 250px;
  height: calc(100vh - var(--header-height));
  background: #e6ecf3;
}

@media (max-width: 1199.98px) {
  /************* Page Wrapper *************/

  .page-wrapper .sidebar-wrapper {
    left: -290px;
  }
  .page-wrapper.toggled .sidebar-wrapper {
    left: 0;
  }
  .page-wrapper .main-container {
    padding: 0;
  }

  /* Dodatkowy padding na dole menu bocznego dla urządzeń mobilnych */
  .sidebar-menu {
    padding-bottom: 80px; /* Zwiększ padding, aby ostatni element był widoczny */
  }
}
@media screen and (min-width: 1200px) {
  /************* Page Wrapper fullscreen *************/
  .page-wrapper.toggled-fullscreen .sidebar-wrapper {
    left: 0;
  }
  .page-wrapper.toggled-fullscreen .main-container {
    padding-left: 250px;
  }
  /************* Page Wrapper fullscreen *************/
  .page-wrapper.toggled-togglescreen .sidebar-wrapper {
    left: 0;
  }
  .page-wrapper.toggled-togglescreen .main-container {
    padding-left: 0;
  }
}
/************* 6.4 Page Header *************/
.page-header {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #d3dde9;
}
.page-header .toggle-sidebar {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0 15px 0 0;
  z-index: 1000;
  transition: all 0.5s ease;
}
.page-header .toggle-sidebar i {
  color: #ffffff;
  font-size: 1.4rem;
}
.page-header .toggle-sidebar-fullscreen {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  margin: 0 10px 0 10px;
  height: 40px;
  z-index: 1000;
  transition: all 0.5s ease;
}
.page-header .toggle-sidebar-fullscreen i {
  color: #ffffff;
  font-size: 1.4rem;
}
.page-header .sidebar-togglescreen {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  margin: 0 0 0 10px;
  height: 40px;
  z-index: 1000;
  transition: all 0.5s ease;
}
.page-header .sidebar-togglescreen i {
  color: #ffffff;
  font-size: 1.4rem;
}
.page-header .brand {
  margin: 0;
}
.page-header .brand .logo {
  padding: 0 0 0 25px;
  display: flex;
}
.page-header .brand .logo img {
  max-width: 190px;
  max-height: 40px;
         margin-top: 18px;
        margin-bottom: 18px;
}

@media screen and (max-width: 1199.98px) {
  .page-header .toggle-sidebar {
    display: flex;
  }
  .page-header .toggle-sidebar-fullscreen {
    display: none;
  }
  .page-header .sidebar-togglescreen {
    display: none;
  }
}
/************* 6.5 Main Header *************/
.main-header {
  padding: 5px 25px;
  background: #ffffff;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/************* 6.6 Updates *************/
ul.updates {
  height: 36px !important;
}
ul.updates li {
  line-height: 36px;
  text-align: right;
}
ul.updates li a i {
  display: inline-block;
  vertical-align: middle;
}

/************* 6.6 Page Title *************/
.page-icon {
  background: url(../images/curve-line.svg) repeat-y;
  background-position: right center;
}
.page-icon i {
  font-size: 1.5rem;
  margin: 10px 10px 10px 0;
  display: block;
  color: #1553a3;
}

.page-title {
  margin-left: 20px;
}
.page-title h5 {
  margin: 5px 0;
  line-height: 100%;
  font-size: 1.2rem;
  font-weight: 400;
}

/************* 6.6 Search Container *************/
.search-container {
  margin: 0;
  padding: 0;
}
.search-container .input-group {
  position: relative;
}
.search-container .input-group .form-control {
  min-width: 180px;
}

@media screen and (max-width: 991.98px) {
  .search-container {
    display: none;
  }
}
/************* 6.8 Header Ations *************/
.header-actions-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: auto;
}
.header-actions-container .dropdown-toggle::after {
  display: none;
}

.header-profile {
  padding: 7px 25px;
}
.header-profile a.user-settings {
  padding: 1rem 0.725rem;
  display: flex;
  align-items: center;
  padding: 0;
}
.header-profile a.user-settings .avatar {
  position: relative;
}
.header-profile a.user-settings .avatar > img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.header-profile a.user-settings .avatar .status {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.header-profile a.user-settings span.user-name {
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  max-width: 100px;
  text-align: end;
}
.header-profile:hover > a i, .header-profile:focus > a i {
  color: #17181c;
}
.header-profile:hover .dropdown-menu, .header-profile:focus .dropdown-menu {
  margin-top: 0;
  display: block;
}
.header-profile .dropdown-menu-end {
  right: 0;
}

@media (max-width: 575.98px) {
  .header-profile {
    margin-left: 0;
  }
  .header-profile a.user-settings span.user-name {
    display: none;
  }
}
.header-actions {
  display: flex;
  align-items: center;
}
.header-actions a:hover {
  color: #276dd9;
}

@media (max-width: 767.98px) {
  .header-actions {
    display: none;
  }
}
/************* 6.9 Header Profile Actions *************/
.header-profile-actions a {
  padding: 8px 15px;
  display: flex;
  font-size: 0.875rem;
}
.header-profile-actions a:hover {
  background-color: #e6f1ff;
  color: #1553a3;
}

/************* 6.11 Content Wrapper *************/
.content-wrapper-scroll {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 0px 0px 5px 5px;
}

/************* 6.12 App Footer *************/
.app-footer {
  font-size: 0.75rem;
  padding: 5px 25px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0; /* Zapobiega kurczeniu się stopki */
  border-top: 1px solid #d3dde9; /* Dodajemy linię oddzielającą */
}
.app-footer span {
  color: #9499a9;
}

/************************************************
	************************************************
							8. Components/Widgets
	************************************************
************************************************/
/************* 8.5 Chart Heights *************/
.chart-height {
  height: 250px;
}

.chart-height-md {
  height: 220px;
}

.chart-height-xxl {
  height: 420px;
}

.chart-height-full {
  height: 600px;
}

.auto-align-graph .apexcharts-canvas {
  margin: 0 auto;
}

/************* 8.6 Stats Tiles *************/
.stats-tile {
  padding: 2rem 1rem;
  margin: 0 0 24px 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #b7c6d8;
  box-shadow: rgba(76, 78, 100, 0.2) 0px 2px 10px 0px;
}
.stats-tile .tile-count {
  position: absolute;
  right: -1px;
  color: #ffffff;
}
.stats-tile .tile-count.red {
  background: url(../images/tile-count-red.svg) no-repeat;
  background-size: 100%;
  background-position: center center;
  width: 40px;
  height: 115px;
}
.stats-tile .tile-count.blue {
  background: url(../images/tile-count-blue.svg) no-repeat;
  background-size: 100%;
  background-position: center center;
  width: 40px;
  height: 115px;
}
.stats-tile .tile-count.green {
  background: url(../images/tile-count-green.svg) no-repeat;
  background-size: 100%;
  background-position: center center;
  width: 40px;
  height: 115px;
}
.stats-tile .tile-count.yellow {
  background: url(../images/tile-count-yellow.svg) no-repeat;
  background-size: 100%;
  background-position: center center;
  width: 40px;
  height: 115px;
}
.stats-tile.tile-green {
  border: 1px solid #2c998d;
}
.stats-tile.tile-green .sale-icon {
  background: radial-gradient(circle, #158c7f -100%, #ffffff 65%);
  border: 1px solid #2c998d;
}
.stats-tile.tile-red {
  border: 1px solid #e4515e;
}
.stats-tile.tile-red .sale-icon {
  background: radial-gradient(circle, #e13d4b -100%, #ffffff 65%);
  border: 1px solid #e4515e;
}
.stats-tile.tile-yellow {
  border: 1px solid #ffb31b;
}
.stats-tile.tile-yellow .sale-icon {
  background: radial-gradient(circle, #fda901 -100%, #ffffff 65%);
  border: 1px solid #ffb31b;
}
.stats-tile.tile-blue {
  border: 1px solid #276dd9;
}
.stats-tile.tile-blue .sale-icon {
  background: radial-gradient(circle, #276dd9 -100%, #ffffff 65%);
  border: 1px solid #276dd9;
}

/************* 8.10 Activity Container *************/
.activity-block:before {
  content: "";
  background: url(../images/curve-line.svg) repeat-y;
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  z-index: 0;
  min-height: 140px;
  width: 7px;
}
.activity-block img.activity-user {
  z-index: 1;
}

/************* 8.12 HR of the month *************/
.hr-of-month .hr-list {
  border: 1px solid #7e8c9e;
  border-bottom: 0;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding: 15px 20px;
}
.hr-of-month .hr-list-last {
  border: 1px solid #7e8c9e;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  padding: 15px 20px;
}

/************* 8.15 Sales Reports *************/
.sales-reports-container {
  padding: 20px 0 40px 0;
}
.sales-reports-container .middle-block {
  background: url(../images/infographic.svg) no-repeat center center;
  min-height: 250px;
  width: 100%;
  max-width: 640px;
  background-size: 100%;
}

.reports-block-start, .reports-block-end {
  row-gap: 20px;
  margin: 0 -20px 0 0;
}
.reports-block-start .report-block, .reports-block-end .report-block {
  padding: 0.8rem 1.2rem;
  border: 1px solid #b7c6d8;
  min-width: 180px;
  max-width: 180px;
}
.reports-block-start .report-block.red, .reports-block-end .report-block.red {
  border: 1px solid #e13d4b;
}
.reports-block-start .report-block.blue, .reports-block-end .report-block.blue {
  border: 1px solid #276dd9;
}
.reports-block-start .report-block.yellow, .reports-block-end .report-block.yellow {
  border: 1px solid #fda901;
}

.reports-block-end {
  margin: 0 0 0 -20px;
}

@media (min-width: 1399.98px) {
  .reports-block-start .report-block, .reports-block-end .report-block {
    padding: 0.8rem 0.8rem;
    min-width: 140px;
    max-width: 140px;
  }
}
/************* 8.25 Tile Link  *************/
.tile-link {
  border: 1px solid #b7c6d8;
  background: #ffffff;
  padding: 2rem 0.5rem;
  box-shadow: rgba(76, 78, 100, 0.2) 0px 2px 10px 0px;
  transition: all 1s ease-out;
}
.tile-link:hover {
  border: 1px solid #158c7f;
}

/************* 8.26 Logs *************/
.log-list {
  padding: 15px 0;
}
.log-list .log-dot {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 0.9rem;
  color: #ffffff;
}
.log-list .log-dot.high {
  background: #276dd9;
}
.log-list .log-dot.medium {
  background: #448af4;
}
.log-list .log-dot.low {
  background: #7db0fc;
}

/************* 8.30 Team Activity *************/
.activity-list {
  border-bottom: 1px dotted #b7c6d8;
}
.activity-list .activity-time {
  border-right: 1px solid #b7c6d8;
}
.activity-list .activity-time .badge {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  min-width: 70px;
  text-align: left;
  margin: 5px 0 15px 5px;
}

/************* 8.31 Events List *************/
.events-list-container {
  border: 1px solid #b7c6d8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.events-list-container .events-list {
  border-bottom: 1px solid #b7c6d8;
}
.events-list-container .events-list .event-time {
  border-right: 1px solid #b7c6d8;
  min-width: 100px;
}
.events-list-container .events-list:last-child {
  border-bottom: 0;
}
.events-list-container .events-list:hover {
  color: #1553a3;
  background: #e6f1ff;
}

/************* 8.33 Graph Stats *************/
.graph-stats {
  max-width: 210px;
  min-width: 210px;
}
.graph-stats .graph-stats-details p {
  max-width: 90px;
  line-height: 130%;
}

/************* 8.34 Timeline Activity *************/
.activity-log {
  padding-left: 2.5rem;
  padding-bottom: 2rem;
  position: relative;
}
.activity-log:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  background: #ffffff;
  border: 4px solid #e13d4b;
  width: 21px;
  height: 21px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  z-index: 1;
}
.activity-log:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  background: url(../images/curve-line.svg) repeat-y;
  height: 100%;
  width: 7px;
}

/************* 8.35 Stacked Images *************/
.stacked-images {
  display: flex;
}
.stacked-images.center {
  justify-content: center;
}
.stacked-images img {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  width: 48px;
  height: 48px;
  margin-right: -10px;
}
.stacked-images .plus {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #ffffff;
  width: 48px;
  height: 48px;
}

/************************************************
	************************************************
									9. Pages
	************************************************
************************************************/
/******** 8.38 Icons Container ********/
.icons-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 100px;
  column-gap: 15px;
  row-gap: 1em;
  text-align: center;
}
.icons-container .icon {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #e6ecf3;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.icons-container .icon i {
  font-size: 2rem;
}
.icons-container .icon:hover {
  background: #d3ddea;
}

/******** 8.40 Create Invoice Wrapper ********/
.create-invoice-wrapper {
  background: #eaf2ff;
  padding: 15px;
  margin: 0 0 15px 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/************* 8.42 Contacts *************/
.contact-card {
  padding: 2rem 1rem;
  position: relative;
  text-align: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.contact-card a.edit-contact-card {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 48px;
  height: 48px;
  border: 2px solid #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: all 1s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card a.edit-contact-card i {
  font-size: 1rem;
  color: #ffffff;
}
.contact-card a.edit-contact-card:hover {
  width: 60px;
  height: 60px;
  transition: all 0.5s ease-out;
}
.contact-card .contact-avatar {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  max-width: 90px;
  margin-bottom: 20px;
}
.contact-card h5 {
  margin-bottom: 20px;
  font-weight: 600;
}
.contact-card .list-group {
  text-align: left;
}
.contact-card .list-group .list-group-item {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/************* 8.43 Subscriber *************/
.subscribe-header {
  margin: -30px -30px 0 -30px;
}

.subscriber-body {
  padding: 1.5rem 0 0 0;
  margin: -6rem 0 0 0;
}

.team-tile {
  padding: 1.5rem 3rem;
  text-align: center;
}
.team-tile img.avatar {
  width: 120px;
  height: 120px;
}

.subscriber-tile {
  text-align: center;
}
.subscriber-tile .top-bg {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  min-height: 90px;
}
.subscriber-tile .subscriber-tile-body {
  padding: 0;
  margin: -60px 0 0 0;
}

/************* 10.4 Pricing Plan *************/
.pricing-plan {
  margin: 0 0 1.5rem 0;
  width: 100%;
  padding: 25px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
}
.pricing-plan .pricing-header {
  padding: 20px 0 0 0;
}
.pricing-plan .pricing-header h1 {
  text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15);
}
.pricing-plan .pricing-features {
  padding: 20px 0;
  margin: 0;
}
.pricing-plan .pricing-features li {
  padding: 12px 15px 12px 15px;
}

@media (max-width: 767px) {
  .pricing-plan-container {
    height: auto;
  }
  .pricing-plan .pricing-header {
    text-align: center;
  }
  .pricing-plan .pricing-header i {
    display: block;
    float: none;
    margin-bottom: 1.5rem;
  }
}
/************* 8.45 Subscriber *************/
.hero-header {
  margin: -30px -20px 0 -20px;
  padding: 3rem 0 8rem 0;
}

.hero-body {
  padding: 1.5rem 0 0 0;
  margin: -6rem 0 0 0;
}

.card-btn-floating {
  position: absolute;
  right: 20px;
  top: -22px;
}

/************************************************
	************************************************
					9. Plugins
	************************************************
************************************************/
/******** 9.1 Overlay Scroll ********/
.sidebarMenuScroll {
  height: 100%;
}
.sidebarMenuScroll .os-scrollbar-vertical {
  left: 0;
  right: initial;
}

.scroll370 {
  height: 370px;
}

.scroll360 {
  height: 360px;
}

.scroll333 {
  height: 333px;
}

.scroll160 {
  height: 160px;
}

/******** 9.2 Credit Card Type ********/
#creditCardType {
  display: flex;
  align-items: center;
  flex-direction: row;
}
#creditCardType .credit-card {
  margin: 5px 5px 0 0;
  display: inline-block;
}
#creditCardType .credit-card img {
  max-width: 40px;
  filter: grayscale(100%);
}
#creditCardType .credit-card.highlight img {
  filter: grayscale(10%);
}

/******** 9.2 jVector Maps ********/
.jvectormap-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

.jvectormap-tip {
  position: absolute;
  display: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: #191919;
  color: #ffffff;
  font-size: 0.75rem;
  padding: 6px 12px;
}

@-webkit-keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/******** 9.3 Apex Graphs ********/
.apex-hide-lines .apexcharts-xaxis {
  display: none;
}
.apex-hide-lines .apexcharts-grid {
  display: none;
}

.apex-dark-legend .apexcharts-legend-text {
  color: #17181c !important;
}
.apex-dark-legend .apexcharts-xaxis-label {
  fill: #17181c !important;
}

/******** 9.4 Rating ********/
.rating-stars {
  width: 120px !important;
  line-height: 100%;
}
.rating-stars img {
  width: 18px;
  height: 18px;
}

/******** 9.2 DropZone ********/
.dropzone {
  border: 2px dashed #b7c6d8 !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #ffffff;
  min-height: 250px !important;
  display: flex;
  align-items: center;
}
.dropzone .dz-message {
  font-weight: 700;
  margin: 0 auto !important;
}
.dropzone .dz-message .note {
  font-size: 0.9rem;
  display: block;
  margin-top: 1rem;
  color: #17181c !important;
}
.dropzone.sm {
  min-height: 180px !important;
}

/************************************************
	************************************************
				11. Bootstrap Overwrite CSS
	************************************************
************************************************/
/************* 11.1 Badge *************/
.badge {
  font-weight: 400;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.badge.shade-green, .page-header .badge.toggle-sidebar, .page-header .badge.toggle-sidebar-fullscreen, .page-header .badge.sidebar-togglescreen, .header-profile a.user-settings .avatar .badge.status.online {
  outline: 1px solid #2c998d;
  outline-offset: 3px;
}
.badge.green {
  background: #158c7f;
}
.badge.shade-light-green {
  outline: 1px solid #2c998d;
  background-color: #e6fffc;
  outline-offset: 3px;
  color: #158c7f;
}
.badge.shade-red, .page-header .badge.toggle-sidebar:hover, .page-header .badge.toggle-sidebar-fullscreen:hover, .page-header .badge.sidebar-togglescreen:hover, .header-profile a.user-settings .avatar .badge.status.busy {
  outline: 1px solid #e4515e;
  outline-offset: 3px;
}
.badge.red {
  background: #e13d4b;
}
.badge.shade-light-red {
  outline: 1px solid #e4515e;
  background-color: #fff2f3;
  outline-offset: 3px;
  color: #e13d4b;
}
.badge.shade-yellow, .header-profile a.user-settings .avatar .badge.status.away {
  outline: 1px solid #ffb31b;
  outline-offset: 3px;
}
.badge.yellow {
  background: #fda901;
}
.badge.shade-light-yellow {
  outline: 1px solid #ffb31b;
  background-color: #fff7e8;
  outline-offset: 3px;
  color: #fda901;
}
.badge.shade-blue {
  outline: 1px solid #276dd9;
  outline-offset: 3px;
}
.badge.blue {
  background: #276dd9;
}
.badge.shade-light-blue {
  outline: 1px solid #337ce9;
  background-color: #eaf2ff;
  outline-offset: 3px;
  color: #276dd9;
}
.badge.shade-purple {
  outline: 1px solid #7920d1;
  outline-offset: 3px;
}
.badge.purple {
  background: #7920d1;
}
.badge.shade-light-purple {
  outline: 1px solid #8736d6;
  background-color: #f5ebff;
  outline-offset: 3px;
  color: #7920d1;
}
.badge.shade-orange {
  outline: 1px solid #dd5500;
  outline-offset: 3px;
}
.badge.orange {
  background: #dd5500;
}
.badge.shade-light-orange {
  outline: 1px solid #e1661b;
  background-color: #fff1eb;
  outline-offset: 3px;
  color: #dd5500;
}
.badge.shade-secondary {
  outline: 1px solid #7e8c9e;
  outline-offset: 3px;
}
.badge.secondary {
  background: #707f93;
}
.badge.shade-light-secondary {
  outline: 1px solid #a4afbc;
  background-color: #f0f4f8;
  outline-offset: 3px;
  color: #707f93;
}
.badge.shade-primary, .page-item.active .badge.page-link {
  outline: 1px solid #245fae;
  outline-offset: 3px;
}
.badge.primary {
  background: #1553a3;
}
.badge.shade-light-primary {
  outline: 1px solid #6590c9;
  background-color: #e6f1ff;
  outline-offset: 3px;
  color: #1553a3;
}
.badge.shade-light {
  outline: 1px solid #dde2e7;
  outline-offset: 3px;
}
.badge.light {
  background: #eff2f5;
}
.badge.shade-light-light {
  outline: 1px solid #a6b2bd;
  background-color: #dde2e7;
  outline-offset: 3px;
  color: #748696;
}
.badge.shade-dark {
  outline: 1px solid #475560;
  outline-offset: 3px;
}
.badge.dark {
  background: #34424e;
}
.badge.shade-light-dark {
  outline: 1px solid #7a8792;
  background-color: #e1ebf4;
  outline-offset: 3px;
  color: #34424e;
}

/************* 11.2 Placeholder *************/
.placeholder {
  background-color: rgba(0, 0, 0, 0.3);
}
.placeholder.light {
  background-color: rgba(255, 255, 255, 0.4);
}

/************* 11.3 Accordion *************/
.accordion {
  background: #ffffff;
}
.accordion .accordion-item {
  background-color: #ffffff;
  border: 1px solid #b7c6d8;
}
.accordion .accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion .accordion-button {
  background-color: transparent;
}
.accordion .accordion-button::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1rem;
  content: "\f282";
}
.accordion .accordion-button:not(.collapsed)::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1rem;
  content: "\f286";
}
.accordion .accordion-button:not(.collapsed) {
  background-color: #ffffff;
  color: #1553a3;
  font-weight: 600;
}
.accordion .accordion-body {
  line-height: 180%;
}

/************* 11.4 Alerts *************/
.alert a {
  text-decoration: underline;
  color: #ffffff;
}
.alert .alert-icon {
  font-size: 1.2rem;
  margin: 0 10px 0 0;
  line-height: 100%;
  vertical-align: middle;
}
.alert.alert-dismissible .btn-close {
  padding: 1.1rem 1rem;
}
.alert.alert-primary {
  color: #ffffff;
  background: #245fae;
  border-color: #1553a3;
}
.alert.alert-secondary {
  color: #ffffff;
  background: #7e8c9e;
  border-color: #707f93;
}
.alert.alert-success {
  color: #ffffff;
  background: #2c998d;
  border-color: #158c7f;
}
.alert.alert-warning {
  color: #ffffff;
  background: #ffb31b;
  border-color: #fda901;
}
.alert.alert-danger {
  color: #ffffff;
  background: #e4515e;
  border-color: #e13d4b;
}
.alert.alert-info {
  color: #ffffff;
  background: #337ce9;
  border-color: #276dd9;
}
.alert.alert-light {
  color: #191919;
  background: #eff2f5;
  border-color: #dde2e7;
}
.alert.alert-light a {
  color: #191919;
}

.alert-fixed {
  position: fixed;
  right: 45px;
  top: 80px;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.alert-fixed i {
  font-size: 3rem;
  margin: 0 10px 0 0;
}

/************* 11.5 Tabs *************/
.custom-tabs-container .nav-tabs {
  margin: 0 -20px;
  border-bottom: 1px solid #b7c6d8;
}
.custom-tabs-container .nav-tabs .nav-link {
  padding: 0.8rem 1.2rem;
  color: #17181c;
  font-size: 1rem;
}
.custom-tabs-container .nav-tabs .nav-link.active {
  border-color: transparent transparent #4477bc;
  color: #1553a3;
  background: transparent;
  border-bottom-width: 3px;
}
.custom-tabs-container .nav-tabs .nav-link i {
  font-size: 1.3rem;
  margin-right: 7px;
  vertical-align: middle;
}
.custom-tabs-container .nav-tabs .nav-item:first-child {
  margin-left: 20px;
}
.custom-tabs-container .nav-tabs .nav-item:last-child {
  margin-right: 20px;
}
.custom-tabs-container .tab-content {
  padding: 1.5rem 0 0 0;
}
.custom-tabs-container .tab-content.h-350 {
  min-height: 350px;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
}

/************* 11.6 Cards *************/
.card {
  border: 1px solid #b7c6d8;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 16px;
  box-shadow: rgba(76, 78, 100, 0.2) 0px 2px 10px 0px;
}
.card .card-header {
  padding: 1rem 1.25rem 0 1.25rem;
  background: transparent;
  border: 0;
}
.card .card-header.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card .card-title {
  font-size: 1.2rem;
  margin: 0;
  color: #17181c;
  font-weight: 600;
  line-height: 150%;
}
.card .card-subtitle {
  font-size: 0.9rem;
  margin: 0.3rem 0 0 0;
  color: #9499a9;
  font-weight: 400;
  line-height: 150%;
}
.card .card-body {
  padding: 1rem 1.25rem;
}
.card .card-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: wait;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
}
.card .card-footer {
  padding: 1rem 1.25rem 1rem 1.25rem;
  background: transparent;
  border-top: 1px solid #b7c6d8;
}
.card.light {
  background-color: rgba(255, 255, 255, 0.4);
  border: 0;
  box-shadow: rgb(197, 206, 217) 0px 0px 30px 0px;
}
.card.light .light {
  background-color: rgba(255, 255, 255, 0.1);
}
.card.light-shadow {
  border: 0;
  box-shadow: rgba(76, 78, 100, 0.2) 0px 2px 10px 0px;
}
.card.card-primary {
  border: 1px solid #1553a3;
}
.card.card-primary .card-title {
  color: #1553a3;
}
.card.card-primary .card-footer {
  border-top: 1px solid #1553a3;
}
.card.card-secondary {
  border: 1px solid #707f93;
}
.card.card-secondary .card-title {
  color: #707f93;
}
.card.card-secondary .card-footer {
  border-top: 1px solid #707f93;
}
.card.card-red {
  border: 1px solid #e13d4b;
}
.card.card-red .card-title {
  color: #e13d4b;
}
.card.card-red .card-footer {
  border-top: 1px solid #e13d4b;
}
.card.card-blue {
  border: 1px solid #276dd9;
}
.card.card-blue .card-title {
  color: #276dd9;
}
.card.card-blue .card-footer {
  border-top: 1px solid #276dd9;
}
.card.card-yellow {
  border: 1px solid #fda901;
}
.card.card-yellow .card-title {
  color: #fda901;
}
.card.card-yellow .card-footer {
  border-top: 1px solid #fda901;
}
.card.card-green {
  border: 1px solid #158c7f;
}
.card.card-green .card-title {
  color: #158c7f;
}
.card.card-green .card-footer {
  border-top: 1px solid #158c7f;
}
.card.card-orange {
  border: 1px solid #dd5500;
}
.card.card-orange .card-title {
  color: #dd5500;
}
.card.card-orange .card-footer {
  border-top: 1px solid #dd5500;
}
.card.card-purple {
  border: 1px solid #7920d1;
}
.card.card-purple .card-title {
  color: #7920d1;
}
.card.card-purple .card-footer {
  border-top: 1px solid #7920d1;
}
.card.card-dark {
  border: 1px solid #34424e;
}
.card.card-dark .card-title {
  color: #34424e;
}
.card.card-dark .card-footer {
  border-top: 1px solid #34424e;
}

/************* 11.7 Buttons *************/
button:focus {
  outline: none;
}
button:focus:not(:focus-visible) {
  outline: none;
}

.btn i {
  margin: 0 3px 0 0;
  vertical-align: middle;
}
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.0025);
}
.btn.btn-rounded {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

.btn-link {
  color: #1553a3;
}

/************* 11.8 Button Primary *************/
.btn-primary {
  color: #ffffff;
  background: #245fae;
  border: 1px solid #245fae;
}
.btn-primary:hover {
  color: #ffffff !important;
  background: #1553a3 !important;
  border: 1px solid #1553a3 !important;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #ffffff;
  background: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-primary.dropdown-toggle.show, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active {
  color: #ffffff;
  background: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-primary.dropdown-toggle.show:focus, .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus {
  color: #ffffff;
  background: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-primary:disabled, .btn-primary.disabled, fieldset:disabled .btn-primary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #6590c9;
  background: #85a8d7;
}

.btn-outline-primary {
  color: #245fae;
  border: 1px solid #245fae;
}
.btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: #1553a3 !important;
  border: 1px solid #1553a3 !important;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  color: #ffffff;
  background-color: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-outline-primary.dropdown-toggle.show, .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active {
  color: #ffffff;
  background-color: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-outline-primary.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus {
  color: #ffffff;
  background-color: #1553a3;
  border: 1px solid #1553a3;
  box-shadow: 0 0 0 0.25rem #a5c0e4;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled, fieldset:disabled .btn-outline-primary {
  pointer-events: none;
  color: #ffffff;
  background-color: #6590c9;
  border: 1px solid #85a8d7;
}

/************* 11.9 Button Secondary *************/
.btn-secondary {
  color: #ffffff;
  background: #7e8c9e;
  border: 1px solid #7e8c9e;
}
.btn-secondary:hover {
  color: #ffffff !important;
  background: #707f93 !important;
  border: 1px solid #707f93 !important;
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  color: #ffffff;
  background: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-secondary.dropdown-toggle.show, .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active {
  color: #ffffff;
  background: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-secondary.dropdown-toggle.show:focus, .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus {
  color: #ffffff;
  background: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-secondary:disabled, .btn-secondary.disabled, fieldset:disabled .btn-secondary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #a4afbc;
  background: #b7c0cb;
}

.btn-outline-secondary {
  color: #7e8c9e;
  border: 1px solid #7e8c9e;
}
.btn-outline-secondary:hover {
  color: #ffffff !important;
  background-color: #707f93 !important;
  border: 1px solid #707f93 !important;
}
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  color: #ffffff;
  background-color: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-outline-secondary.dropdown-toggle.show, .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active {
  color: #ffffff;
  background-color: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-outline-secondary.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus {
  color: #ffffff;
  background-color: #707f93;
  border: 1px solid #707f93;
  box-shadow: 0 0 0 0.25rem #cad1da;
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled, fieldset:disabled .btn-outline-secondary {
  pointer-events: none;
  color: #ffffff;
  background-color: #a4afbc;
  border: 1px solid #b7c0cb;
}

/************* 11.9 Button Light *************/
.btn-light {
  color: #34424e;
  background: #dde2e7;
  border: 1px solid #dde2e7;
}
.btn-light:hover {
  color: #34424e !important;
  background: #eff2f5 !important;
  border: 1px solid #eff2f5 !important;
}
.btn-check:focus + .btn-light, .btn-light:focus {
  color: #34424e;
  background: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-light.dropdown-toggle.show, .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active {
  color: #34424e;
  background: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-light.dropdown-toggle.show:focus, .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus {
  color: #34424e;
  background: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-light:disabled, .btn-light.disabled, fieldset:disabled .btn-light {
  pointer-events: none;
  color: #748696;
  border: 1px solid #b8c2cb;
  background: #a6b2bd;
}

.btn-outline-light {
  color: #748696;
  border: 1px solid #dde2e7;
}
.btn-outline-light:hover {
  color: #748696 !important;
  background-color: #eff2f5 !important;
  border: 1px solid #eff2f5 !important;
}
.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
  color: #748696;
  background-color: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-outline-light.dropdown-toggle.show, .btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active {
  color: #748696;
  background-color: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-outline-light.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus {
  color: #eff2f5;
  background-color: #eff2f5;
  border: 1px solid #eff2f5;
  box-shadow: 0 0 0 0.25rem #cbd2d9;
}
.btn-outline-light:disabled, .btn-outline-light.disabled, fieldset:disabled .btn-outline-light {
  pointer-events: none;
  color: #748696;
  background-color: #b8c2cb;
  border: 1px solid #a6b2bd;
}

/************* 11.9 Button Dark *************/
.btn-dark {
  color: #e1ebf4;
  background: #475560;
  border: 1px solid #475560;
}
.btn-dark:hover {
  color: #e1ebf4 !important;
  background: #34424e !important;
  border: 1px solid #34424e !important;
}
.btn-check:focus + .btn-dark, .btn-dark:focus {
  color: #e1ebf4;
  background: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-dark.dropdown-toggle.show, .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active {
  color: #e1ebf4;
  background: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-dark.dropdown-toggle.show:focus, .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus {
  color: #e1ebf4;
  background: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-dark:disabled, .btn-dark.disabled, fieldset:disabled .btn-dark {
  pointer-events: none;
  color: #e1ebf4;
  border: 1px solid #7a8792;
  background: #94a0aa;
}

.btn-outline-dark {
  color: #34424e;
  border: 1px solid #475560;
}
.btn-outline-dark:hover {
  color: #e1ebf4 !important;
  background-color: #34424e !important;
  border: 1px solid #34424e !important;
}
.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
  color: #e1ebf4;
  background-color: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-outline-dark.dropdown-toggle.show, .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active {
  color: #e1ebf4;
  background-color: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-outline-dark.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus {
  color: #34424e;
  background-color: #34424e;
  border: 1px solid #34424e;
  box-shadow: 0 0 0 0.25rem #aeb9c3;
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled, fieldset:disabled .btn-outline-dark {
  pointer-events: none;
  color: #e1ebf4;
  background-color: #7a8792;
  border: 1px solid #94a0aa;
}

/************* 11.10 Button Info *************/
.btn-info {
  color: #ffffff;
  background: #337ce9;
  border: 1px solid #337ce9;
}
.btn-info:hover {
  color: #ffffff !important;
  background: #276dd9 !important;
  border: 1px solid #276dd9 !important;
}
.btn-check:focus + .btn-info, .btn-info:focus {
  color: #ffffff;
  background: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-info.dropdown-toggle.show, .btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active {
  color: #ffffff;
  background: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-info.dropdown-toggle.show:focus, .btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus {
  color: #ffffff;
  background: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-info:disabled, .btn-info.disabled, fieldset:disabled .btn-info {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #69a5ff;
  background: #7db0fc;
}

.btn-outline-info {
  color: #276dd9;
  border: 1px solid #337ce9;
}
.btn-outline-info:hover {
  color: #ffffff !important;
  background-color: #276dd9 !important;
  border: 1px solid #276dd9 !important;
}
.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  color: #ffffff;
  background-color: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-outline-info.dropdown-toggle.show, .btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active {
  color: #ffffff;
  background-color: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-outline-info.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus {
  color: #ffffff;
  background-color: #276dd9;
  border: 1px solid #276dd9;
  box-shadow: 0 0 0 0.25rem #9fc6ff;
}
.btn-outline-info:disabled, .btn-outline-info.disabled, fieldset:disabled .btn-outline-info {
  pointer-events: none;
  color: #ffffff;
  background-color: #69a5ff;
  border: 1px solid #7db0fc;
}

/************* 11.11 Button Danger *************/
.btn-danger {
  color: #ffffff;
  background: #e4515e;
  border: 1px solid #e4515e;
}
.btn-danger:hover {
  color: #ffffff !important;
  background: #e13d4b !important;
  border: 1px solid #e13d4b !important;
}
.btn-check:focus + .btn-danger, .btn-danger:focus {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-danger.dropdown-toggle.show, .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-danger.dropdown-toggle.show:focus, .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-danger:disabled, .btn-danger.disabled, fieldset:disabled .btn-danger {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ed878f;
  background: #f2a1a8;
}

.btn-outline-danger {
  color: #e4515e;
  border: 1px solid #e4515e;
}
.btn-outline-danger:hover {
  color: #ffffff !important;
  background: #e13d4b !important;
  border: 1px solid #e13d4b !important;
}
.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-outline-danger.dropdown-toggle.show, .btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-outline-danger.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus {
  color: #ffffff;
  background: #e13d4b;
  border: 1px solid #e13d4b;
  box-shadow: 0 0 0 0.25rem #f6bcc1;
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled, fieldset:disabled .btn-outline-danger {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ed878f;
  background: #f2a1a8;
}

/************* 11.12 Button Warning *************/
.btn-warning {
  color: #ffffff;
  background: #ffb31b;
  border: 1px solid #ffb31b;
}
.btn-warning:hover {
  color: #ffffff !important;
  background: #fda901 !important;
  border: 1px solid #fda901 !important;
}
.btn-check:focus + .btn-warning, .btn-warning:focus {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-warning.dropdown-toggle.show, .btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-warning.dropdown-toggle.show:focus, .btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-warning:disabled, .btn-warning.disabled, fieldset:disabled .btn-warning {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ffcd68;
  background: #ffd98c;
}

.btn-outline-warning {
  color: #ffb31b;
  border: 1px solid #ffb31b;
}
.btn-outline-warning:hover {
  color: #ffffff !important;
  background: #fda901 !important;
  border: 1px solid #fda901 !important;
}
.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-outline-warning.dropdown-toggle.show, .btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-outline-warning.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus {
  color: #ffffff;
  background: #fda901;
  border: 1px solid #fda901;
  box-shadow: 0 0 0 0.25rem #ffe6b3;
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled, fieldset:disabled .btn-outline-warning {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ffcd68;
  background: #ffd98c;
}

/************* 11.13 Button Success *************/
.btn-success {
  color: #ffffff;
  background: #2c998d;
  border: 1px solid #2c998d;
}
.btn-success:hover {
  color: #ffffff !important;
  background: #158c7f !important;
  border: 1px solid #158c7f !important;
}
.btn-check:focus + .btn-success, .btn-success:focus {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-success.dropdown-toggle.show, .btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-success.dropdown-toggle.show:focus, .btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-success:disabled, .btn-success.disabled, fieldset:disabled .btn-success {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #6abbb2;
  background: #89ccc4;
}

.btn-outline-success {
  color: #2c998d;
  border: 1px solid #2c998d;
}
.btn-outline-success:hover {
  color: #ffffff !important;
  background: #158c7f !important;
  border: 1px solid #158c7f !important;
}
.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-outline-success.dropdown-toggle.show, .btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-outline-success.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus {
  color: #ffffff;
  background: #158c7f;
  border: 1px solid #158c7f;
  box-shadow: 0 0 0 0.25rem #a8ddd7;
}
.btn-outline-success:disabled, .btn-outline-success.disabled, fieldset:disabled .btn-outline-success {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #6abbb2;
  background: #89ccc4;
}

/************* 11.11 Button Orange *************/
.btn-orange {
  color: #ffffff;
  background: #e1661b;
  border: 1px solid #e1661b;
}
.btn-orange:hover {
  color: #ffffff !important;
  background: #dd5500 !important;
  border: 1px solid #dd5500 !important;
}
.btn-check:focus + .btn-orange, .btn-orange:focus {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-orange.dropdown-toggle.show, .btn-check:checked + .btn-orange, .btn-check:active + .btn-orange, .btn-orange:active, .btn-orange.active {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-orange.dropdown-toggle.show:focus, .btn-check:checked + .btn-orange:focus, .btn-check:active + .btn-orange:focus, .btn-orange:active:focus, .btn-orange.active:focus {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-orange:disabled, .btn-orange.disabled, fieldset:disabled .btn-orange {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #eb9460;
  background: #f0ac83;
}

.btn-outline-orange {
  color: #e1661b;
  border: 1px solid #e1661b;
}
.btn-outline-orange:hover {
  color: #ffffff !important;
  background: #dd5500 !important;
  border: 1px solid #dd5500 !important;
}
.btn-check:focus + .btn-outline-orange, .btn-outline-orange:focus {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-outline-orange.dropdown-toggle.show, .btn-check:checked + .btn-outline-orange, .btn-check:active + .btn-outline-orange, .btn-outline-orange:active, .btn-outline-orange.active {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-outline-orange.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-orange:focus, .btn-check:active + .btn-outline-orange:focus, .btn-outline-orange:active:focus, .btn-outline-orange.active:focus {
  color: #ffffff;
  background: #dd5500;
  border: 1px solid #dd5500;
  box-shadow: 0 0 0 0.25rem #f5c3a6;
}
.btn-outline-orange:disabled, .btn-outline-orange.disabled, fieldset:disabled .btn-outline-orange {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #eb9460;
  background: #f0ac83;
}

/************* 11.11 Button Purple *************/
.btn-purple {
  color: #ffffff;
  background: #8736d6;
  border: 1px solid #8736d6;
}
.btn-purple:hover {
  color: #ffffff !important;
  background: #7920d1 !important;
  border: 1px solid #7920d1 !important;
}
.btn-check:focus + .btn-purple, .btn-purple:focus {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-purple.dropdown-toggle.show, .btn-check:checked + .btn-purple, .btn-check:active + .btn-purple, .btn-purple:active, .btn-purple.active {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-purple.dropdown-toggle.show:focus, .btn-check:checked + .btn-purple:focus, .btn-check:active + .btn-purple:focus, .btn-purple:active:focus, .btn-purple.active:focus {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-purple:disabled, .btn-purple.disabled, fieldset:disabled .btn-purple {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ab73e4;
  background: #be91eb;
}

.btn-outline-purple {
  color: #8736d6;
  border: 1px solid #8736d6;
}
.btn-outline-purple:hover {
  color: #ffffff !important;
  background: #7920d1 !important;
  border: 1px solid #7920d1 !important;
}
.btn-check:focus + .btn-outline-purple, .btn-outline-purple:focus {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-outline-purple.dropdown-toggle.show, .btn-check:checked + .btn-outline-purple, .btn-check:active + .btn-outline-purple, .btn-outline-purple:active, .btn-outline-purple.active {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-outline-purple.dropdown-toggle.show:focus, .btn-check:checked + .btn-outline-purple:focus, .btn-check:active + .btn-outline-purple:focus, .btn-outline-purple:active:focus, .btn-outline-purple.active:focus {
  color: #ffffff;
  background: #7920d1;
  border: 1px solid #7920d1;
  box-shadow: 0 0 0 0.25rem #d0aff1;
}
.btn-outline-purple:disabled, .btn-outline-purple.disabled, fieldset:disabled .btn-outline-purple {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #ab73e4;
  background: #be91eb;
}

/************* 11.17 Dropdown Menu *************/
.dropdown-menu {
  border: 0;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
}
.dropdown-menu.mini {
  width: 46px;
  min-width: auto;
}
.dropdown-menu.sm {
  width: 15rem;
  min-width: auto;
}
.dropdown-menu.md {
  width: 20rem;
}
.dropdown-menu.lrg {
  width: 24rem;
}
.dropdown-menu .dropdown-item {
  padding: 0.5rem 1rem 0.5rem 1rem;
  line-height: 100%;
  position: relative;
  color: #17181c;
}
.dropdown-menu .dropdown-item:hover {
  background: #e6ecf3;
}
.dropdown-menu .dropdown-item:first-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.dropdown-menu .dropdown-item:last-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.dropdown-menu .dropdown-item.active-page {
  background: #d8d8d8;
  pointer-events: none;
  cursor: not-allowed;
}
.dropdown-menu .dropdown-divider {
  border-top: 1px solid #e8e8e8;
}
.dropdown-menu .dropdown-menu-header {
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
  background: #e8e8e8;
  color: #17181c;
  font-size: 0.925rem;
  font-weight: bold;
}
.dropdown-menu.white-dropdown {
  background-color: #ffffff;
}
.dropdown-menu.white-dropdown:before {
  border-bottom: 9px solid #ffffff;
}

.dropdown-toggle::after {
  vertical-align: middle;
}
.dropdown-toggle.sub-nav-link::after {
  float: right;
  margin: 0.15rem 0 0 0;
  border-right: 0;
  border-left: 5px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

@media (min-width: 992px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .dropdown:hover .dropdown-menu-end {
    right: 0;
  }
}
/************* 11.18 List Group *************/
.list-group .list-group-item {
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border: 1px solid #b7c6d8;
}
.list-group .list-group-item.active {
  background-color: #1553a3;
}
.list-group .list-group-item + .list-group-item {
  border-top-width: 0;
}

/************* 11.19 Carousel *************/
.carousel-item img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
}

/******** 11.20 Form Controls ********/
.form-section-title {
  background: #eaf2ff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 1rem;
}

.form-label {
  color: #4a4c4d;
  font-weight: 600;
}

.form-control {
  border: 1px solid #7e8c9e;
  color: #232629;
  background-color: #ffffff;
}
.form-control:hover {
  border: 1px solid #5d6a7c;
}
.form-control:focus {
  border-color: #276dd9;
  box-shadow: none;
  outline: 0 !important;
  outline-color: #276dd9 !important;
}
.form-control:disabled {
  opacity: 0.7;
}

.form-select {
  border: 1px solid #7e8c9e;
  color: #232629;
  background-color: #ffffff;
}
.form-select:hover {
  border: 1px solid #5d6a7c;
}
.form-select:focus {
  border-color: #5d6a7c;
  box-shadow: none;
  outline: auto !important;
  outline-color: #5d6a7c !important;
}
.form-select:disabled {
  opacity: 0.7;
}

.input-group-text {
  border: 1px solid #7e8c9e;
  background: #ffffff;
}
.input-group-text i {
  color: #232629;
}

.form-control[type=file]:not(:disabled):not([readonly]) {
  font-size: 1rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #2c998d;
  -webkit-text-fill-color: #232629;
  box-shadow: 0 0 0px 100px rgba(0, 0, 0, 0.8) inset;
}

/******** 11.21 File Upload ********/
.form-control::-webkit-file-upload-button {
  background: #ffffff;
  margin: -1rem 1rem -1rem -0.75rem;
  color: #17181c;
}

/******** 11.22 Checkbox and Radio ********/
.form-check {
  margin: 0 0 0.75rem 0;
  min-height: 2rem;
}
.form-check .form-check-label {
  font-weight: 400;
  margin: 5px 0 0 10px;
  color: #4a4c4d;
}
.form-check .form-check-input {
  border-color: #7e8c9e;
  background-color: #ffffff;
}
.form-check .form-check-input:checked {
  background-color: #1553a3;
  border-color: #1553a3;
}
.form-check .form-check-input:disabled ~ .form-check-label,
.form-check .form-check-input [disabled] ~ .form-check-label {
  opacity: 0.7;
}
.form-check .form-check-input[type=checkbox] {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-top: 0.15em;
  min-height: auto;
  padding: 0;
}
.form-check .form-check-input[type=radio] {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  width: 1.5rem !important;
  height: 1.5rem !important;
  margin-top: 0.15em;
  min-height: auto;
  padding: 0;
}
.form-check.form-switch .form-check-input {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width: 3em !important;
  height: 1.5em !important;
  margin-left: -2.5em;
}
.form-check.form-switch .form-check-reverse {
  padding-right: 3.5em;
}
.form-check.form-switch .form-check-reverse .form-check-input {
  margin-right: -3.5em;
}

.form-check-inline {
  margin: 6px 1rem 6px 0;
}

.form-check-reverse {
  padding-right: 2.5em;
}
.form-check-reverse .form-check-input {
  margin-right: -2.5em;
}

.form-switch .form-check-label {
  margin: 3px 0 0 10px;
}
.form-switch.form-check-reverse {
  padding-right: 3.5em;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -3.5em;
}

/******** 11.23 Modal ********/
.modal .modal-content {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 0;
}
.modal .modal-header {
  color: #1553a3;
  padding: 0.8rem 1rem;
  -webkit-border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
}
.modal .modal-header .btn-close {
  background: url(../images/cancel.svg) center/1em auto no-repeat;
}
.modal .modal-body {
  padding: 1rem;
}
.modal .modal-footer {
  border-top: 1px solid #ced9e6;
  padding: 0.5rem 1rem;
}

.modal-fullscreen .modal-content {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.modal-fullscreen .modal-header {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}
.modal-fullscreen .modal-footer {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

/******** 11.24 Offcanvas ********/
.offcanvas-header {
  border-bottom: 1px solid #ced9e6;
}
.offcanvas-header .offcanvas-title {
  color: #1553a3;
}

/******** 11.24 Tables ********/
.table {
  color: #17181c;
  border: 1px solid #d7e0eb;
  background-color: #ffffff;
}
.table > thead {
  box-shadow: 0 7px 7px rgba(189, 201, 214, 0.3);
  padding-bottom: 1rem;
}
.table > thead td,
.table > thead th {
  font-size: 1rem;
  padding: 1rem 0.5rem;
}
.table .user-details {
  display: flex;
  align-items: center;
}
.table .user-details img {
  width: 60px;
  height: 60px;
  margin: 0 10px 0 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.table .actions {
  display: flex;
  align-items: center;
}
.table .actions a {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  margin: 3px;
  border: 1px solid #d7e0eb;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.table .flag-img {
  width: 21px;
  height: 21px;
  margin: 0 10px 0 0;
}
.table.nowrap {
  white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #242424;
  box-shadow: none;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  color: #242424;
  background-color: #f3f6fa;
}

.table > :not(:first-child) {
  border-top: 3px solid #d7e0eb;
}

/******** 11.25 Pagination ********/
.page-item.disabled .page-link {
  background-color: rgba(255, 255, 255, 0.0002);
  border: 1px solid #b7c6d8;
  color: #17181c;
}
.page-item .page-link {
  padding: 0.594rem 1.25rem;
  font-size: 0.9rem;
}
.page-item .page-link:hover {
  background-color: #e6f1ff;
}
.page-item .page-link:focus {
  box-shadow: none;
}
.page-item.active .page-link {
  border: 1px solid #1553a3;
  color: #ffffff;
}

.page-link {
  background-color: rgba(255, 255, 255, 0.0005);
  border: 1px solid #b7c6d8;
  color: #17181c;
}
.page-link:hover, .page-link:focus {
  background-color: rgba(0, 0, 0, 0.0005);
  border: 1px solid #b7c6d8;
  color: #17181c;
}

/******** 11.26 Progress ********/
.progress-wrapper .progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.5rem 0;
}

.progress {
  background-color: rgba(14, 49, 89, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.progress .progress-bar {
  background-color: #1553a3;
}
.progress.thin {
  height: 3px;
}
.progress.small {
  height: 5px;
}
.progress.medium {
  height: 8px;
}
.progress.lg {
  height: 10px;
}

/******** 11.26 Tooltip ********/
.tooltip-inner {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.custom-tooltip-red .tooltip-inner {
  background-color: #e13d4b;
}
.custom-tooltip-red[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: #e13d4b;
}
.custom-tooltip-red[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: #e13d4b;
}
.custom-tooltip-red[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: #e13d4b;
}
.custom-tooltip-red[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: #e13d4b;
}

.custom-tooltip-green .tooltip-inner {
  background-color: #158c7f;
}
.custom-tooltip-green[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: #158c7f;
}
.custom-tooltip-green[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: #158c7f;
}
.custom-tooltip-green[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: #158c7f;
}
.custom-tooltip-green[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: #158c7f;
}

.custom-tooltip-blue .tooltip-inner {
  background-color: #276dd9;
}
.custom-tooltip-blue[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: #276dd9;
}
.custom-tooltip-blue[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: #276dd9;
}
.custom-tooltip-blue[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: #276dd9;
}
.custom-tooltip-blue[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: #276dd9;
}

.custom-tooltip-yellow .tooltip-inner {
  background-color: #fda901;
}
.custom-tooltip-yellow[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: #fda901;
}
.custom-tooltip-yellow[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: #fda901;
}
.custom-tooltip-yellow[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: #fda901;
}
.custom-tooltip-yellow[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: #fda901;
}

/******** 11.27 Spinners ********/
.spinner-1x {
  width: 1rem;
  height: 1rem;
}

.spinner-2x {
  width: 2rem;
  height: 2rem;
}

.spinner-3x {
  width: 3rem;
  height: 3rem;
}

.spinner-4x {
  width: 4rem;
  height: 4rem;
}

.spinner-5x {
  width: 5rem;
  height: 5rem;
}

/******** 11.29 Off Canvas ********/
.popover {
  border: 1px solid #b7c6d8;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.popover-header {
  background: #e6ecf3;
  border-bottom: 1px solid #b7c6d8;
  padding: 10px 15px;
  font-weight: 600;
}

/************* 11.30 Row Gutters *************/
.gutters {
  margin-right: -10px;
  margin-left: -10px;
}

.gutters > .col,
.gutters > [class*=col-] {
  padding-right: 10px;
  padding-left: 10px;
}

/* === NEW LAYOUT PATCH === */
/************************************************
	************************************************
					12. Style dla Poczty
	************************************************
************************************************/
#wiadomosci-kontener .p-3 {
  color: #17181c; /* Główny kolor tekstu dla wiadomości */
}

#wiadomosci-kontener .p-3 small {
  color: #6c757d !important; /* Ciemnoszary kolor dla daty (nadpisuje .text-dark) */
}

/* Poprawka czytelności aktywnego elementu na liście rozmów */
.list-group-item.active,
.list-group-item.active h6,
.list-group-item.active p,
.list-group-item.active small {
    color: #ffffff !important;
}

.icon-ets2 {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url('/images/icons/ets2.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon-dsp_sm {
  display: inline-block;
  width: 39px;
  height: 20px;
  background-image: url('/images/icons/logo-sm.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon-dsp {
  display: inline-block;
  width: 111px;
  height: 20px;
  background-image: url('/images/icons/logo.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Ulepszenia wizualne modułu Poczty */
#lista-rozmow .list-group-item {
    padding: 1.25rem;
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid #e9ecef;
}

#lista-rozmow .list-group-item:last-child {
    border-bottom: none;
}

#lista-rozmow .list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

#wiadomosci-kontener .d-flex {
    align-items: flex-end;
    margin-bottom: 1rem;
}

#wiadomosci-kontener .p-3 {
    position: relative;
    border-radius: 18px !important;
    padding: 0.75rem 1.25rem !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    max-width: 75%;
}

/* Dymek wiadomości otrzymanej */
#wiadomosci-kontener .d-flex:not(.justify-content-end) .p-3 {
    background-color: #e9ecef;
    border-bottom-left-radius: 4px !important;
}

/* Dymek wiadomości wysłanej */
#wiadomosci-kontener .d-flex.justify-content-end .p-3 {
    background-color: #0d6efd; /* Nowy, jaśniejszy kolor niebieski */
    color: white;
    border-bottom-right-radius: 4px !important;
}
#wiadomosci-kontener .d-flex.justify-content-end .p-3 small {
    color: #555  !important;
}

.chat-date {
    color: #1553a3 !important;
}


/************************************************
	************************************************
					13. Style dla Forum
	************************************************
************************************************/

/* Lepsze odstępy między kategoriami */
.forum-card {
    margin-bottom: 2rem !important;
}

/* Stylizacja tabeli z tematami */
.table-forum thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.table-forum tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.table-forum tbody tr:hover {
    background-color: #f1f1f1;
}

.table-forum tbody td {
    vertical-align: middle;
}

/* Poprawki dla widoku tematu */
.post-user-info {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 1.5rem;
    text-align: center;
}

.post-content .card-body {
    font-size: 1rem;
    line-height: 1.6;
}

.post-content .card-footer {
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
}
.right-sidebar{
  position: fixed;
  right: 0;
  width: 250px;
  top: 65px;
  height: calc(100vh - (var(--header-height) + var(--rs-gap-top)));
  background: #232f40;
  color: #bec9d9;
  padding: 0 20px 20px;          /* wewnętrzne marginesy (góra = 0, bo gap robi .right-sidebar top) */
  overflow-y: auto;              /* JEDYNY scroll dla prawego paska */
  z-index: 998;
}

/* Desktop – dostosuj prawą kolumnę głównej treści do szerokości paska */
@media (min-width: 1200px){
  .main-container{ padding-right: 250px; }
}

/* Mobile – chowamy prawy pasek i zdejmujemy padding z treści */
@media (max-width: 1199.98px){
  .right-sidebar{ display:none; }
  .main-container{ padding-right:0; }
}

/************************************************
	************************************************
					14. Style dla Slidera
	************************************************
************************************************/
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: .5rem;
    padding: 1rem;
}

/* --- Poprawki Nagłówka Mobilnego --- */
.page-header .header-left-side {
    display: flex;
    align-items: center;
}

@media (max-width: 1199.98px) {
    .page-header {
        padding: 0 0.5rem;
        flex-wrap: nowrap;
    }
    .page-header .header-actions-container {
        display: none;
    }
    .page-header .toggle-sidebar {
        margin: 0 0.5rem 0 0;
    }
    .page-header .brand .logo img {
        margin-right: 0 !important;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    .page-header .header-profile {
        padding: 7px 0;
    }
}

/* 1) Zakładki: usuń ujemne marginesy i pozwól się przewijać w poziomie na mobile */
.custom-tabs-container .nav-tabs{
  margin: 0 !important;           /* <-- zabija overflow z -20px */
  padding: 0 12px;                /* lekki „oddech” wewnątrz */
  overflow-x: auto;               /* poziomy scroll tylko wewnątrz zakładek */
  overflow-y: hidden;
  white-space: nowrap;
}
.custom-tabs-container .nav-tabs .nav-link{
  flex: 0 0 auto;                 /* linki nie łamią się */
}

/* 2) Centralna treść – pewne zwężenie i twarde „bez overflow” */
.main-container,
.content-wrapper{
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Daj po 8–12px „zapasu” od krawędzi, żeby nic nie dotykało ramki */
.content-wrapper{
  padding-left: 8px !important;
  padding-right: 8px !important;
}


/* 5) Ostateczna siatka bezpieczeństwa, gdyby coś jeszcze wystawało */
html, body{
  overflow-x: hidden;
}

/* 0) Bezpiecznik – żadnego poziomego scrolla dla strony */
html, body,
.main-container,
.content-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

/* 1) Taby w nagłówku karty – żadnych ujemnych marginesów i scroll tylko w środku */
.card-header .nav-tabs {
  margin: 0 !important;          /* nadpisuje reguły z template'u */
  max-width: 100%;
  flex-wrap: nowrap;              /* utrzymuj w jednej linii */
}
.card-header > .overflow-auto {
  overflow-x: auto;               /* poziomy scroll tylko dla zakładek */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card-header .nav-tabs .nav-link {
  flex: 0 0 auto;                 /* linki nie zawijają się i nie „rozpychają” */
}

/* 2) Sticky save bar – nie może wychodzić poza kartę */
.savebar {
  left: 0;
  right: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Drobny „oddech” w body karty, żeby nic nie stykało się z ramką */
.card .card-body {
  overflow-x: hidden;             /* gdyby jakaś tabela/img miała >100% przez paddingi */
}

/* 4) (opcjonalnie) Jeśli używasz gdzieś .custom-tabs-container z template’u – ubij ujemne marginesy globalnie */
.custom-tabs-container .nav-tabs { 
  margin: 0 !important;
}

/* Niestandardowe style dla obrazków slidera o stałej wysokości */
.slider-img-fixed-height {
    height: 700px; /* Docelowa wysokość */
    object-fit: cover; /* Przytnij obraz, aby wypełnić kontener, zachowując proporcje */
}



.auth-user .right-sidebar .player-panel { display:block; }
.auth-guest .right-sidebar .player-panel { display:none; }

.auth-guest .download-app-card { display:block; }
.auth-user  .download-app-card { display:none; }


/* === Wnętrze prawego paska ===
   UWAGA: usuwamy sticky/overflow z __inner,
   żeby nie było podwójnych scrolli i „przeskoków”. */
.right-sidebar__inner{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 10px;    /* lekki oddech dla pierwszej karty; możesz zmienić na 0 */
  /* NIE: position: sticky; NIE: max-height; NIE: overflow */
}

/* Karty w prawym pasku */
.right-sidebar__inner .card{
  border-radius: .75rem;
  overflow: hidden;
}
.right-sidebar__inner .card-header{
  padding: .6rem .9rem;
}
.right-sidebar__inner .card-body{
  padding: .9rem;
}

/* Listy statystyk – wspólna baza */
.right-sidebar__inner .list-group-item{
  padding: .5rem .75rem;
  border: 0;                 /* czyściej w kartach */
  border-bottom: 1px solid rgba(0,0,0,.075);
  background: transparent;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.right-sidebar__inner .list-group-item:last-child{
  border-bottom: 0;
}
.right-sidebar__inner .badge{
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ===== Tryb DOMYŚLNY: 2-LINIOWY (etykieta nad badgem) ===== */
.right-sidebar__inner .list-group-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.right-sidebar__inner .list-group-item .badge{
  margin-top: .15rem;
}

/* ===== OPCJONALNY przełącznik: 1-LINIOWY =====
   Dodaj klasę .rs-one-line na .right-sidebar__inner,
   aby wszystkie pozycje były etykieta | badge w jednej linii. */
.right-sidebar__inner.rs-one-line .list-group-item{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.right-sidebar__inner.rs-one-line .list-group-item .badge{
  margin-top: 0;
  flex-shrink: 0;
}

/* Responsywne dopieszczenie:
   Na bardzo wąskich ekranach nawet w 1-liniowym wymuś 2-linie */
@media (max-width: 992px){
  .right-sidebar__inner.rs-one-line .list-group-item{
    flex-direction: column;
    align-items: flex-start;
  }
  .right-sidebar__inner.rs-one-line .list-group-item .badge{
    margin-top: .15rem;
  }
}

/* Drobne: avatar w panelu gracza, kolory tekstu itp. */
.right-sidebar__inner .player-panel .rounded-circle{
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.right-sidebar__inner .sidebar-text-color{
  color: var(--sidebar-fg, #334155);
}

/* Karty w prawym pasku */
.right-sidebar__inner .card{
  border-radius: .75rem;
  overflow: hidden;
}
.right-sidebar__inner .card-header{ padding: .6rem .9rem; }
.right-sidebar__inner .card-body{   padding: .9rem; }

/* Listy statystyk – baza (2-linijki: etykieta nad badgem) */
.right-sidebar__inner .list-group-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: .5rem .75rem;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.075);
  background: transparent;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.right-sidebar__inner .list-group-item:last-child{ border-bottom: 0; }

.right-sidebar__inner .badge{
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: .15rem;
}

/* (Opcjonalnie) tryb 1-linijkowy na żądanie – dodaj .rs-one-line na __inner */
.right-sidebar__inner.rs-one-line .list-group-item{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.right-sidebar__inner.rs-one-line .badge{
  margin-top: 0;
  flex-shrink: 0;
}

@media (max-width: 992px){
  /* nawet w 1-linijkowym – wymuś 2 linie na wąskich ekranach */
  .right-sidebar__inner.rs-one-line .list-group-item{
    flex-direction: column;
    align-items: flex-start;
  }
  .right-sidebar__inner.rs-one-line .list-group-item .badge{
    margin-top: .15rem;
  }
}

/* Drobne dopieszczenie wyglądu */
.right-sidebar__inner .player-panel .rounded-circle{
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.right-sidebar__inner .sidebar-text-color{
  color: var(--sidebar-fg, #334155);
}