* {
    margin: 0;
    padding: 0;
}
html {
  font-size: 10px;
}
body {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
    --color-select-type-one:#ed5158;
    --color-select-background:blue;
    --section-background-color:rgb(250,248,245);
    --customer-puan:#ffc108;
    --button-color:#ed5158;

}
@media (max-width:1100px) {
    .input-wrapper {
        width: 96% !important;
        flex-direction: column;
        margin: 10px auto !important;
        row-gap: 10px;
        background-color: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        padding: 20px;

        i {
            display: none !important;
        }
        select {
            margin: 0;
            width: 98% !important;
            border-radius: 6px;
            padding:  1.75rem 1.75rem 1.75rem 45px !important;
            font-size: 20px !important;

        }
        button {
            margin-right: 2%;
            font-size: 25px !important;
            width: 96% !important;
            text-align: center;
            border-radius: 6px;
            padding: 20px 0;

            i {
                display: none;
            }
        }
    }

}

.input-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 1;
    margin:15px 15% 15px;
    column-gap: 15px;
    .district {
        position: relative;
        i {
            font-size: 1.8rem;
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 15px;
            color: var(--button-color);
        }
    }
    .city {
        position: relative;
        i {
            font-size: 1.8rem;
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 15px;
            color: var(--button-color);
        }
    }
    .sector {
        position: relative;
        i {
            font-size: 1.6rem;
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 15px;
            color: var(--button-color);
            animation:settingrotate 2.5s infinite;
        }
    }
    select {
        padding:  0.75rem 0.75rem 0.75rem 35px;
        font-size: 1.4rem;
        border-radius: 6px;
        border: 1px solid #ccc;
        background-clip: padding-box;
    }
    select:focus {
        outline: 2px solid var(--color-select-type-one);
    }
    select:nth-of-type(1) {
        margin-left: 0;
        color: black;
        option {
            color: black;
        }
     }

    button {
        background-color: var(--color-select-type-one);
        color: white;
        display: flex;
        column-gap: 2px;
        position: relative;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        border: none;
        outline: none;
        width: 100px;
        border-radius: 6px;
        i{
            font-size: 16px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 20px;
        }
    }
    button:hover {
        opacity: 0.9;
    }

}
.content {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.4)) , url('../img/road-5056788_1280.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: flex-start;
    padding: 30px 0;
    width: 100%;
    margin: 0 auto;
    .content-text {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 70%;
        color: white;
        font-size: 2rem;
        row-gap: 30px;
        span {
            width: 100%;
        }
      pre {
        font-weight: 100;
        font-size: 1.5rem;
      }
       button {
        width:max-content;
        border: none;
        background-color: var(--button-color);
        color: white;
        cursor: pointer;
        padding: 12px 20px;
        border-radius: 20px;
        margin-bottom: 2%;
        a {
            color: white;
            text-decoration: none;
        }
       }
       button:hover {
        opacity: 0.9;
       }
    }
}
.gradient {
    width: 100%;
    background: linear-gradient(to left ,white,#ed5158,white);
    display: flex;
    align-items: center;
    p {
        font-size: 1.4rem;

    }
   p:first-of-type {
     font-size: 1.5rem;
     font-weight: bold;
     margin-left: 15%;
   }
}
@media (max-width: 1100px) {
    .pick {
        flex-direction: column;
        width: 85% !important;
        box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
        border-radius: 6px;
        padding: 20px;
        .select-wrapper {
            width: 100%;
            margin-left: 12%;

        }
        #apply {
            width: 80%;
            margin-bottom: 15px !important;
        }
    }

}
.pick {
    margin:15px auto 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 1;
    flex-basis: 0;
    flex-grow: 0;
    column-gap: 15px;
    width: 70%;
     #apply {
         background-color: #ed5158;
         border-radius: 6px;
         padding: 6px 25px;
         font-size: 17px;
         transform: translateY(40%);
         color: white;
         border:none;
     }
    #apply:active {
        transform: translateY(40%) scale(0.9);
    }
    #addreturnjobbutton {
        font-size: 15px;
        padding: 5px 10px;
        border-radius: 6px;
        margin-top: 2%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-decoration: none;
        background-color: var(--button-color);
    }
    #addreturnjobbutton:hover {
         opacity: 0.9;
    }
    p {
        font-size: 1.5rem;
    }
    div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        select {
            width: 90%;
            border-radius: 6px;
        padding: 7px 60px;
        }
    }
}
/*.work-wrapper {
    margin: 100px 15%;
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    cursor: pointer;

    box-shadow: 1px 1px 4px rgba(0,0,0,.2);
    .work-wrapper-alt {
        border: .2px solid rgba(0,0,0,.4);
        padding: 10px;
    }
    .whell {
        padding: 10px;
        border: 0.2px solid rgba(0,0,0,.3);
    }
   .work-wrapper-middle {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border: 0.2px solid rgba(0,0,0,.3);
    .right {
        display: flex;
    }
    .middle {
        display: flex;
    }
    .column {
        display: flex;
        flex-direction: column;
        .top {
            display: flex;
        }
        .alt {
            display: flex;
        }

    }
   }
}

  <div class="work-wrapper">
         <div class="whell"><h2>Lastikci</h2></div>
        <div class="work-wrapper-middle">
              <div class="column">
                <div class="top">
                    <h3>Araç Tipi</h3>
                    <pre> :Otomobil</pre>
                 </div>
                 <div class="alt">
                    <h3>Araç</h3>
                    <pre> :Diğer-Diğer</pre>
                 </div>
              </div>
              <div class="middle">
                <h3>Konum</h3>
                <pre> :Manisa,YunusEmre</pre>
              </div>
              <div class="right">
                <h3>Süre</h3>
                <pre> :1 Gün İçersinde</pre>
              </div>
        </div>
        <div class="work-wrapper-alt">
              <h4>Acıklama :Otomobil</h4>
              <span>İstanbul Sarı Tepe İlçesinde</span>
              <br>
              <span>NOT: 205/55/16 4 adet kışlık</span>
        </div>
       </div>
*/
.table-dark {
    width: 100% !important; /* Tam genişlik */
    border-collapse: collapse !important; /* Kenarların birleşmesi */
    border-radius: 10px !important; /* Kenar yuvarlama */
    overflow: hidden !important; /* Kenar yuvarlama için taşmayı gizle */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Daha hafif gölge */
    background-color: #ed5158 !important; /* Hafif saydam arka plan */
    color: white !important; /* Metin rengi */
    font-size: 11px !important;
}

.table-dark th, .table-dark td {
    padding: 12px 15px !important; /* İç boşluk */
    text-align: left !important; /* Metin hizalaması */
    color: white !important;
    background-color: #ed5158 !important; /* Hafif saydam arka plan */
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-size: 20px !important;
}

.table-dark th {
    color: white !important; /* Başlık metin rengi */
    font-size: 25px !important; /* Başlık font boyutu */
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important; /* Daha hafif alt kenar çizgisi */
}

.table-dark tr {
    transition: background 0.3s ease !important; /* Satır geçiş efekti */
}

.table-dark tr:hover {
    background: rgba(237, 81, 88, 0.4) !important; /* Hover efekti */
}
th.phone_number {
    font-size: 25px !important;
    button {
        font-size: 16px;
        background-color: #157347;
        color: white;
        padding: 10px 20px;
        border-radius: 6px;
        border: none;
        box-shadow: 1px 1px 10px rgba(255,255,255,0.3);
    }
    button:active {
        transform: scale(0.9);
        outline: none;
    }
}
.table-dark td {

    font-size: 18px !important; /* Metin font boyutu */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; /* Daha hafif alt kenar çizgisi */
}
td.phoneno button {
    font-size: 16px;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    background-color: #f27478;
    color: white;
    cursor: pointer;
}
td.phoneno button:active {
    outline: none;
    transform: scale(0.9);
}
.table-dark td, .table-dark th, .table-dark thead th {
    border-color: white !important;
}
.table {
    width: 100% !important;
}
#outputWrapper {
    width: 100% !important;
}
th.sectors {
    font-size: 24px !important;
}
th.sectors {
    white-space: pre;
}
.table-dark {
    width: 70% !important;
    padding: 2%;
    margin: 0 auto;
    border: 1px solid white !important;
}
@media (max-width: 1100px) {
    .table-dark {
        width: 85% !important;
        font-size: 10px !important; /* Küçük ekranlarda font boyutunu azalt */
        margin: 0 auto;
    }

    .table-dark th, .table-dark td {
        display: flex !important; /* Flexbox ile düzenle */
        justify-content: center !important; /* Yatayda ortala */
        align-items: center !important; /* Dikeyde ortala */
        padding: 12px 15px !important; /* İç boşluk */
        text-align: center !important; /* Metin hizalaması */
        color: white !important;
        background-color: #ed5158 !important; /* Hafif saydam arka plan */
        border-left: 1px solid rgba(255, 255, 255, 0.2) !important; /* Daha ince sol kenar çizgisi */
    }

    th.phone_number {
        font-size: 16px !important;
        white-space: pre;
         height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

}

.table-wrapper {
    min-height: 70vh;
    margin: 15px auto;
}
.delete-button {
    padding: 6px 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Beyaz */
    backdrop-filter: blur(30px);
    border-radius: 10px;
    font-size: 20px;
    color: black;
    border: 2px solid rgba(0, 0, 0, 0.3); /* Daha hafif odunsu siyah kenar */
    transition: background-color 0.3s ease, color 0.3s ease; /* Geçiş efekti */
}

.delete-button:hover {
    background-color: rgba(240, 240, 240, 0.8); /* Daha açık bir beyaz/gray */
    color: #333; /* Koyu gri metin */
}


.delete-button:active {
    transform: scale(0.9);
}
.my-confirm-button {
    background-color: #ed5158 !important; /* Butonun arka plan rengini değiştir */
    color: white !important; /* Butonun yazı rengini beyaz yap */
    border: none !important; /* Kenarlıkları kaldırmak istersen */
}
.swal2-confirm {
    background-color: #ed5158 !important;
    color: white !important;
}
/* Select2 açılış animasyonu */
.select2-container--open .select2-selection--single {
    animation: expandIn 0.4s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@keyframes expandIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Select2 kutusu stil */
.select2-selection--single {
    transition: all 0.3s ease;
    border-radius: 8px;

}

.select2-selection__rendered {
    color: #333;
}

/* Select2 dropdown animasyonu */
.select2-dropdown {
    display: none;
    animation: slideDown 0.3s forwards;
}

/* Animasyon efekti */
@keyframes slideDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.select2-container--open .select2-dropdown {
    display: block;
}
div:where(.swal2-container).swal2-center>.swal2-popup {
    border-radius: 15px;
}
#outputWrapper {
    width: 100% !important;
    margin: 0 auto;
}
@media (max-width: 1100px) {
    .content {
        width: 85%;
        margin: 15px auto;
    }
    .pick {
     width: 85%;
    }
    .gradient {
        p:first-of-type {
            margin-left: 7.5%;
        }
    }
    .navbar-container {
        position: sticky !important;
        top: 0 !important;

    }
    .input-wrapper {
        width: 85% !important;
    }
    .content-text {margin:7.5% !important;}
}
.table-responsive {
    margin-top: 60px;
  th.sectors {
    font-size: 16px !important;
  }
    /* Genel stil */
    .table {
        background-color: #2c2f38; /* Koyu arka plan */
        color: white; /* Beyaz metin */
    }

    /* Başlık hücreleri */
    th {
        background-color: #f27478; /* Renk skalandaki ana renk */
        color: white;
        padding: 15px;
        border: 1px solid white; /* Beyaz border */
    }

    /* Satır hover efekti */
    tr:hover {
        background-color: #3a3f48; /* Hover arka plan rengi */
    }

    /* Silme butonuna stil */
    .delete-button {
        color: #f27478; /* Buton rengi */
        font-weight: bold;
        text-decoration: none;
    }

    .delete-button:hover {
        color: white; /* Hoverda beyaz renk */
        background-color: #f27478;
        padding: 5px 10px;
        border-radius: 5px;
    }

    /* Hücrelerin stilini ayarlama */
    td {
        padding: 10px;
        border: 1px solid white; /* Beyaz border */
    }

    /* Telefon numarası ikonuyla stil */
    .phone_number i {
        margin-right: 10px;
    }

    /* Araç tip ve modelinde stil */
    .car_type, .car_model, .car_location {
        font-size: 14px;
    }

}