.sellhe {
    min-height: 110px!important;
}


.sellin {
    font-size: 22px!important;
    margin-top: 10px;
}


.selected-option {
    background-color: #007bff; /* Niebieski kolor tła */
    color: white; /* Biały kolor tekstu */
}


#numer_id:focus {
    background-color: #eaffea; /* bardzo delikatny jasnozielony */
    outline: none; /* opcjonalnie, usuwa standardową obwódkę pokazywaną przy focusie */
}


.f-30{
fint-size:30px;

}


.table-multiplex{

    background:#e6ffff;
}


.table--multiple {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #a6c3ca;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}


.hidden {
    display: none;
}


.full-width-search input {
    width: 100% !important; /* Zapewnia, że pole wyszukiwania jest na całą szerokość */
}

.dataTables_filter label {
    display: none;
}


.dataTables_wrapper .dataTables_paginate {
    float: right; /* Wyrównuje paginację do prawej strony */
    text-align: right; /* Tekst wewnętrzny elementów paginacji również wyrównany do prawej */
}

.dataTables_wrapper .dataTables_filter {
    float: left; /* Wyrównuje pole wyszukiwania do lewej, jeśli jest używane */
}

.clear {
    clear: both; /* Zapobiega przelewowi zawartości */
}


.cursor-pointer{

cursor:pointer;
}

  .ms-container{
   width:100%!important;
margin-bottom:20px;
   }

  .ms-selectable .custom-header{

background:orange;
padding:5px;
color:#FFF;
font-weight:700;
}

  .ms-selection .custom-header{

background:green;
padding:5px;
color:#FFF;
font-weight:700;
}
  .wrapa {
    white-space: normal !important;
    word-wrap: break-word;
    cursor: pointer!important;
    /* color: red; */
}

.input-success,
.input-success:focus {
  border: 1px solid #4CAF50;
  -webkit-box-shadow: none;
  box-shadow: none;

  background:#eff3f6;
}

.input-warning,
.input-warning:focus {
  border: 1px solid #f57c00;
  -webkit-box-shadow: none;
  box-shadow: none;
    background:yellow;
}

.input-danger,
.input-danger:focus {
  border: 1px solid #ff5b5b !important;
  -webkit-box-shadow: none;
  box-shadow: none;
   background:yellow;
  }


        .rabat_div{
          color:#CCC;
          font-weight:700;
          text-transform: uppercase!important;
          font-size:14px;
            border-bottom: 1px solid #CCC !important;
      }



        .rabat_div span{
          color:#2196f3;
          font-weight:700;
          text-transform: uppercase!important;
          font-size:14px;
          float:right;
      }


   .sellhe{
       min-height:110px!important;
      }

  .sellin{
   font-size:22px;
margin-top:10px;
  }

  .put-warning{
      color:#ff5b5b;
      font-weight:bold;

      }

     .tinted {
	background-color: #ffffcc;
}


     .tintedg {
	background-color: #ccffcc;
}

.handle {
	cursor: grab;
       background:red;

}



     .tintedb {
	background-color: #F8F8F8;
}


.alert.alert-default {
    background-color: #f2f2f2;
    border-color: #eaeaea;
    color: #737373;
}

html .counters .counter-primary .fa, html .counters .counter-primary .icons, html .counters .counter-primary strong {
    color: #0088cc;
    font-family: "Open Sans", Arial, sans-serif;
}
.counters strong {
    display: block;
    font-weight: bold;
    font-size: 50px;
    line-height: 50px;
}

.cc-txt{
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: bold;
}

.ss-txt{
    font-family: "Open Sans", Arial, sans-serif;

}
.args{
   color:#0088cc;
}




html .call-to-action.featured.featured-primary {
    border-top-color: #0088cc;
}
.call-to-action.featured.featured-primary {
    border-top-color: #CCC;
}
.container .call-to-action {
    border-radius: 8px;
}
.call-to-action.featured {
    background: -webkit-linear-gradient( top , #FFF 1%, #fcfcfc 98%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: linear-gradient(to bottom, #FFF 1%, #fcfcfc 98%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 0;
    border-top: 3px solid #CCC;
    border-bottom: 1px solid #DFDFDF;
    border-left: 1px solid #ECECEC;
    border-right: 1px solid #ECECEC;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
}



.call-to-action {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 32px 55px;
    clear: both;
}

.font-weight-extra-bold {
	font-weight: 900 !important;
}


ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}


.scClass {
  height:650px;
 margin: 0 auto;
  overflow: hidden;
}

.scClass:hover {
  overflow-y: scroll;
}



.scrollbox {
  height:700px;
  overflow: auto;
  visibility: hidden;
}

.scrollbox-content,
.scrollbox:hover,
.scrollbox:focus {
  visibility: visible;
}

.scrollbox_delayed {
  transition: visibility 0.2s;
}

.scrollbox_delayed:hover {
  transition: visibility 0s 0.2s;
}


.args{
   color:#0088cc;
}

/*dotąd dobrze*/

.input_err {
background:#FFF000 url(images/error.png) center right no-repeat;
border:1px solid red;
}

.input_ok {
background:#FFF url(images/ok.png) center right no-repeat;
border:1px solid green;
}

.btn-primary{
    color:#fff!important;
}


.btn-group.btn-block2 {
    display: flex;
}
.btn-group.btn-block2 > .btn {
    flex: 1;
}


.prod_title{
 font-size:22px;
 font-weight:500;

}


.input-suc{
  border: 1px solid #4CAF50!important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.select2-selection--multiple{
 /*
   border: 1px solid #4CAF50!important;  */
 margin-top:0.7px;
 padding-top:3.5px;
 padding-bottom:3px;
 background:#eff3f6!important;
 border:1px solid #ced4da!important;
}


.select2-selection__choice{

    background:#FFFFFF!important;
}



/* to było do czegoś potrzebne, trzeba poszukać*/
/* .btn-group .btn {
    border-right-width: 0;
  }*/

  .btn-group .btn:last-child {
    border-right-width: 1px;
  }

    dfn {
    font-weight: bold;
    color: blue;
    text-decoration: underline;
  }

  #fullScreenDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* MoÅ¼esz dostosowaÄ‡ tÄ™ wartoÅ›Ä‡ w zaleÅ¼noÅ›ci od innych elementÃ³w na stronie. */
    background-color: rgba(255,255,255,1); /* Ustaw kolor i przezroczystoÅ›Ä‡ wedÅ‚ug uznania. */

    padding:20px;
}

.highlighttr {
    background-color: #e6ffe6!important; /* WÅ‚aÅ›ciwoÅ›Ä‡ do zmiany */
}


#xoverlay {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background-color: rgba(255,255,255,0.7);
  z-index: 2;
  cursor: pointer;
}


#moverlay {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background-color: rgba(255,255,255,0.7);
  z-index: 2;
  cursor: pointer;
}


#xtext {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  text-align: center;
}

/*powyzej*/
.btn-quaternary {
    background-color: #6c5ce7; /* fioletowy */
    color: #ffffff; /* biaÅ‚y */
    border: none;
}

.btn-quaternary:hover,
.btn-quaternary:focus,
.btn-quaternary:active {
    background-color: #5d4bd9; /* nieco ciemniejszy odcieÅ„ fioletu dla efektu najechania i aktywacji */
    color: #ffffff; /* biaÅ‚y */
}

.btn-quaternary.disabled,
.btn-quaternary:disabled {
    background-color: #6c5ce7; /* fioletowy */
    color: #ccc; /* jasnoszary kolor tekstu dla wyÅ‚Ä…czonych przyciskÃ³w */
}

.custom-badge-container {
    display: flex;
    flex-direction: row; /* Ustawienie elementów w poziomie */
    align-items: center; /* Wycentrowanie elementów w pionie */
    gap: 10px; /* Odstępy między elementami */
}


.custom-badge {
    display: inline-flex;
    border: 1px solid #007bff; /* Kolor badge-primary */
}

.custom-badge .left-part {
    padding: 0.25em 0.75em; /* DomyÅ›lne paddingi badge */
    color: #007bff; /* Kolor tekstu badge-primary */
    border-right: 1px solid #007bff; /* Prawa krawÄ™dÅº w kolorze badge-primary */
}

.custom-badge .right-part {
    padding: 0.25em 0.75em; /* DomyÅ›lne paddingi badge */
    background-color: #007bff; /* TÅ‚o badge-primary */
    color: #ffffff; /* BiaÅ‚y kolor tekstu */
}

.custom-badge2 {
    display: inline-flex;
    border: 1px solid #dc3545; /* Kolor badge-danger */
}

.custom-badge2 .left-part {
    padding: 0.25em 0.75em; /* DomyÅ›lne paddingi badge */
    color: #dc3545; /* Kolor tekstu badge-danger */
    border-right: 1px solid #dc3545; /* Prawa krawÄ™dÅº w kolorze badge-danger */
}

.custom-badge2 .right-part {
    padding: 0.25em 0.75em; /* DomyÅ›lne paddingi badge */
    background-color: #dc3545; /* TÅ‚o badge-danger */
    color: #ffffff; /* BiaÅ‚y kolor tekstu */
}

.flatpickr-day.highlighted-day {
    background: #8BC34A; /* Zielone tÅ‚o dla dni publikacji */
    color: white; /* BiaÅ‚y tekst dla lepszej czytelnoÅ›ci */
    border-radius: 50%; /* Opcjonalnie, dla okrÄ…gÅ‚ego ksztaÅ‚tu */
}


.flatpickr-day.single-publication {
    background: #8BC34A; /* Zielone tÅ‚o dla dni z jednÄ… publikacjÄ… */
    color: white;
    border-radius: 50%;
}

.flatpickr-day.multiple-publications {
    background: #F44336; /* Czerwone tÅ‚o dla dni z wieloma publikacjami */
    color: white;
    border-radius: 50%;
}


      .label-box {
        border-top: 1px solid #ddd; /* Ramka tylko na gÃ³rze */
        border-right: none;
        border-left: none;
        border-bottom: none;
        padding-top: 15px;
        padding-left:20px;
        padding-right:5px;
        position: relative;
        margin-top: 5px;

      }
      .label {
        background: #fff;
        padding: 0 10px;
        color:#0d6efd;
        position: absolute;
        top: -0.5em; /* Dostosowanie pozycji etykiety */
        left: 10px;
        font-size: 0.8em; /* Zmniejszamy rozmiar czcionki */
      }

      #loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


.cursor-pointer{

cursor:pointer;
}

#numer_id:focus {
    background-color: #ccffcc; /* Lekko zielony kolor tÅ‚a */
}

.input-with-icon {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path fill="%2347a447" fill-opacity="0.5" d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/></svg>');

    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}




.select-wrapper {
    position: relative;
    display: inline-block; /* Aby dopasować szerokość do zawartości i pozwolić ikonie na pozycjonowanie się poza select */
}

.select-icon {
    position: absolute;
    top: 33px; /* Ajustuj, aby pasowało do twojego designu */
    right: 23px;
    display: none; /* Początkowo ukryta */
    color: #47a447; /* Kolor ikony c */
}

.select-icon-tax {
    position: absolute;
    top: 33px; /* Ajustuj, aby pasowało do twojego designu */
    right: 23px;
    display: none; /* Początkowo ukryta */
    color: #47a447; /* Kolor ikony c */
}

.select-icon-zc {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}


.select-icon-cp {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}


.select-icon-dp {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}

.select-icon-ts {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}

.select-icon-ns {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}


.select-icon-sm {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}


.select-icon-sl {
  position: absolute;
  top: 33px; /* Ajustuj, aby pasowało do twojego designu */
  right: 23px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}



/*ten osobno*/
.select-icon-wt {
  position: absolute;
  top: 30px; /* Ajustuj, aby pasowało do twojego designu */
  right: 18px;
  display: none; /* Początkowo ukryta */
  color: #47a447; /* Kolor ikony c */
}




.sell_body {
  padding: 40px 25px!important;
}



.input-group .nazwa-skladnik {
  flex: 4;  /* Zajmuje dwa razy więcej miejsca niż inne elementy */
}

.input-group .procent-skladnik {
  flex: 2;  /* Standardowa szerokość */
}

.input-group .jednostka-skladnik {
 flex: 1;  /* Stała szerokość dla jednostki miary */
}

.input-group .btn-remove {
  width: 40px;  /* Ograniczenie szerokości przycisku */
}

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


.tnt-table thead th{
  border:0px!important; background:#FFF!important;
}


.table_cntnr {
  height: 500px; /* Możesz dostosować tę wysokość do swoich potrzeb */
  overflow-y: auto; /* Dodaje pasek przewijania, gdy zawartość jest większa niż kontener */
}


#numer_idx:focus {
  background-color: #ccffcc; /* Lekko zielony kolor tła */
outline: none;
}


/* Styl dla obrazka netto */
.zcena_netto {
  background-image: url('images/netto.png'); /* Notacja względna */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 25px; /* Dodatkowy padding, aby nie zasłonić tekstu */
}

/* Styl dla obrazka brutto */
.zcena_brutto {
  background-image: url('images/brutto.png'); /* Notacja względna */
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 25px; /* Dodatkowy padding, aby nie zasłonić tekstu */
}






#datatable-kasa tbody tr:hover {
transform: scale(1.03); /* Lekkie powiększenie */
transition: transform 0.3s ease-in-out; /* Animacja tylko dla powiększenia */
cursor:pointer;
}

/* Nadpisz kolory hover dla klas Bootstrap z efektem transformacji */
#datatable-kasa tbody .table-danger:hover {
background-color: #f28b82; /* Ciemniejszy czerwony */
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#datatable-kasa tbody .table-success:hover {
background-color: #81c784; /* Ciemniejszy zielony */
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#datatable-kasa tbody .table-primary:hover {
background-color: #5c6bc0; /* Ciemniejszy niebieski */
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}



.custom-gray-rounded {
  background-color: #f8f9fa; /* Jasnoszary kolor tła, dostosuj według potrzeb */
  border-radius: 0.5rem; /* Zaokrąglenie rogów, dostosuj według potrzeb */
  padding: 1rem; /* Dodatkowy padding, jeśli potrzebny */
}



.custom-gray {
  background-color: #d6d8db; /* Ciemniejszy szary kolor tła */
  border: 1px solid #bfc1c4; /* Szary border */
  border-radius: 0.5rem; /* Zaokrąglenie rogów */
  padding: 1rem; /* Dodatkowy padding */
  display: flex; /* Ustawienie flexbox dla wyrównania elementów */
  align-items: center; /* Wycentrowanie elementów pionowo */
  justify-content: space-between; /* Rozłożenie elementów na całej szerokości */
}

.deposit-label {
  font-weight: bold; /* Pogrubienie tekstu */
  flex-grow: 1; /* Element zajmie dostępną przestrzeń między przyciskami */
  text-align: center; /* Wycentrowanie tekstu */
  font-size:30px;
}


.rounded-right {
  border-top-right-radius: 0.25rem!important;
  border-bottom-right-radius: 0.25rem!important;
}


.event-urgent {
  background-color: red!important;
    border: red!important;
  color: white;
}

.event-done {
  background-color: green!important;
  color: white!important;
}


.event-with-amount {
  background-color: navy; /* Ciemny granatowy kolor tła */
  color: white; /* Biały kolor tekstu */
}




.prog_box{
  border-right:1px solid #efefef;  min-height:140px; border-bottom:1px solid #efefef;
  text-align:center;
}


.prog_box2 {
  border-right: 1px solid #efefef;
  min-height: 220px;
  border-bottom: 1px solid #efefef;
  border-top: 1px solid #efefef;
  text-align: center;
}

.prog_box2:first-of-type {
  border-left: 1px solid #efefef;
}



.prog_box .data, .prog_box2 .data{

  -webkit-font-smoothing: antialiased;
  color: #00afbe;
  text-transform: uppercase;
  font-size: 12px;
  font-weight:700;
  margin:0px;
  padding:0px;
}


.prog_box .dzien, .prog_box2 .dzien{

  -webkit-font-smoothing: antialiased;
  color: #ccc;
  text-transform: uppercase;
  font-size: 11px;

  margin:0px;
  padding:0px;
}


.prog_box .temp, .prog_box2 .temp{

  -webkit-font-smoothing: antialiased;
  color: #f05514;
  text-transform: uppercase;
  font-size: 30px;
  font-weight:700;
  margin:0px;

}





.prog_today{
  background:#ffffe6;
}

.prog_box2:hover {
  background-color: #F5F5F5;
}


.ps-25 {
  padding-left: 0.75rem !important;
}
.pe-25 {
  padding-right: 0.75rem !important;
}


@media (max-width: 575.98px) {
  .prog_box2:nth-child(odd) {
    border-left:1px solid #efefef;
  }
}


#datatable-buttons {
display: flex;
align-items: center;
justify-content: space-between; /* Adjust if you want different spacing */
flex-wrap: wrap; /* Allows elements to wrap onto the next line if space is insufficient */
}

#datatable-buttons .dt-buttons,
#datatable-buttons .inputs-group {
display: flex;
flex-grow: 1;
align-items: center;
}

.inputs-group input {
  width: auto; /* Override default full width */
}


table.dataTable tr.bg-success {
  background-color: #d4edda !important;  /* Używaj !important, aby upewnić się, że styl zostanie zastosowany */
}

.city-select {
  width: 100%;
  text-align: left;
}

.city-select option {
  display: flex;
  justify-content: space-between;
  padding: 2px 10px;
}

.city-select option::before {
  content: attr(data-city);
  flex: 1;
  text-align: left;
  padding-right: 10px;
}

.city-select option::after {
  content: attr(data-distance) " km";
  flex: 0 0 auto;
  text-align: right;
}


.sortable-placeholder {
  outline: 1px dashed #ccc;
  height: 4rem;
}


.bg-cold {
  background-color: #0000FF; /* Przykładowy kolor niebieski */
  color: #FFFFFF; /* Biały tekst */
}

.bg-very-cold {
  background-color: #ADD8E6; /* Przykładowy kolor jasnoniebieski */
  color: #000080; /* Ciemny granatowy tekst */
}

.bg-extremely-cold {
  background-color: #E0FFFF; /* Przykładowy kolor bardzo jasnoniebieski */
  color: #000080; /* Ciemny granatowy tekst */
}


.alert-very-cold {
  background-color: #ADD8E6; /* Jasnoniebieski */
  color: #000080; /* Ciemny granatowy tekst */
  border-color: #5C9EAD; /* Średniotonowy niebieski */
  border-style: solid;
  border-width: 1px;
}


.counter-updated {
  animation: highlight-counter 1s ease-in-out;
}

@keyframes highlight-counter {
  0% { color: inherit; background-color: inherit; }
  50% { color: white; background-color: #28a745; }
  100% { color: inherit; background-color: inherit; }
}


.badge-container {
  position: relative;
}

.badge-container .badge.drukcen-counter  {
  position: absolute;
  top: -10px;
  right: 1px;
  z-index:50;
    display: none; /* Domyślnie ukryty */
}


.badge-container .badge.drukpromo-counter  {
  position: absolute;
  top: -10px;
  right:1px;
  z-index:50;
  display: none; /* Domyślnie ukryty */
}


/* Dodaj do głównego pliku CSS lub <style> w <head> */
#dynamicIncomingModal .modal-dialog {
max-width: 350px;
}
#dynamicIncomingModal .modal-content {
border-radius: 2.2rem;
background: linear-gradient(135deg, #f9f9f9 65%, #f3f7fa 100%);
box-shadow: 0 12px 48px 0 rgba(30,50,100,0.22), 0 1.5px 12px rgba(20,24,55,0.10);
padding: 0 0 1.5rem 0;
overflow: visible;
}
#dynamicIncomingModal .modal-header {
background: linear-gradient(180deg, #009969 60%, #10e797 110%);
border-radius: 2.2rem 2.2rem 0 0;
padding-top: 2.5rem;
padding-bottom: 1.1rem;
border-bottom: none;
position: relative;
}
#dynamicIncomingModal .call-icon {
font-size: 3.4rem;
color: #fff;
margin-bottom: 0.3rem;
}
#dynamicIncomingModal .modal-title {
color: #fff;
font-size: 1.18rem;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,0.12);
letter-spacing: 0.02em;
}
#dynamicIncomingModal .modal-body {
background: none;
margin-top: -1.5rem;
padding-top: 1.5rem;
}
#dynamicIncomingModal .caller-number {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
margin-top: 1rem;
}
#dynamicIncomingModal .caller-name {
font-size: 1.1rem;
font-weight: 500;
color: #25314c;
margin-bottom: 0.15rem;
}
#dynamicIncomingModal .dialed-label {
font-size: 1rem;
color: #1c2b44;
margin-bottom: 0.15rem;
}
#dynamicIncomingModal .dialed-number {
font-size: 1.1rem;
color: #6b7b93;
margin-bottom: 0.18rem;
}
#dynamicIncomingModal .phone-arrow {
color: #13c97a;
font-size: 1.3rem;
margin: 0.4rem 0 0.4rem 0;
}
#dynamicIncomingModal .badge-status {
font-size: 1.09rem;
font-weight: 700;
background: #ffd233;
color: #23292f;
border-radius: 0.7rem;
box-shadow: 0 2px 7px #eee;
padding: 0.48rem 1.2rem;
margin-bottom: 1rem;
margin-top: 0.2rem;
}
#dynamicIncomingModal .call-actions {
margin-top: 1.0rem;
display: flex;
justify-content: center;
gap: 2rem;
}
#dynamicIncomingModal .call-btn {
border: none;
outline: none;
width: 58px;
height: 58px;
border-radius: 50%;
font-size: 2.0rem;
box-shadow: 0 2px 9px #eee;
transition: box-shadow 0.18s, transform 0.14s;
}
#dynamicIncomingModal .call-btn.accept {
background: #1ed760;
color: #fff;
}
#dynamicIncomingModal .call-btn.reject {
background: #fa3248;
color: #fff;
}
#dynamicIncomingModal .call-btn:active {
transform: scale(0.93);
box-shadow: 0 0px 3px #bbb;
}

.call-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;         /* kwadrat */
  height: 32px;        /* kwadrat */
  border-radius: 6px;  /* lekko zaokrąglone rogi */
  font-size: 18px;     /* większa ikona */
  line-height: 1;
}

.btn-icon-lg i {
  font-size: 1.9rem; /* większe ikony, domyślnie ~1rem */
  line-height: 1;
}
