body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Calibri, sans-serif;
}

.form-container {
    width: 80%;
    max-width: 900px;
    margin: auto;
    border: 0.75pt solid #000000;
    padding: 20px;
    box-sizing: border-box;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 0.75pt solid #000000;
    padding: 5pt;
    text-align: left;
}

input[type="text"], input[type="time"], textarea {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-family: Calibri, sans-serif;
}

.section-title {
    background-color: #f2f2f2;
    text-align: center;
    font-weight: bold;
    font-size: 9pt;
}

.form-title {
    text-align: center;
    font-weight: bold;
    font-size: 13pt;
    font-family: Calibri, sans-serif;
}

.form-header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.submit-button {
    padding: 10px 20px;
    background-color: #2ecc71;
    color: white;
    border: 2px solid #27ae60;
    border-radius: 10px;
    cursor: pointer;
    font-family: Calibri, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin: 20px auto;
}
.danger-button {
    padding: 10px 20px;
    background-color: red;
    color: white;
    border: 2px solid red;
    border-radius: 10px;
    cursor: pointer;
    font-family: Calibri, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin: 20px auto;
}
.info-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #007bff;
            color: white;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            line-height: 16px;
            margin-left: 5px;
            cursor: pointer;
            position: relative;
        }

        .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Tooltip yukarıda görünecek */
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip-text::after {
            content: '';
            position: absolute;
            top: 100%; /* Tooltip okunu aşağıda göstermek için */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #007bff transparent transparent transparent;
        }

        .info-icon:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }


/* Bootstrap 5 - Container, Row, Col */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md,
    .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1320px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.order-first {
    order: -1;
}

.order-last {
    order: 13;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.offset-1 {
    margin-left: 8.3333333333%;
}

.offset-2 {
    margin-left: 16.6666666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.3333333333%;
}

.offset-5 {
    margin-left: 41.6666666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.3333333333%;
}

.offset-8 {
    margin-left: 66.6666666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.3333333333%;
}

.offset-11 {
    margin-left: 91.6666666667%;
}
