html , body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
}
:root {
    --background-color:#00615f;
    --button-color:#ed5158;
}
body {
    background-image: url("../img/çekici3.jpeg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    height: 130vh;
    width: 100%;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
.login-window {
    display: inline-flex;
    flex-direction: column;
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 41px;
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.7));
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    margin: 10px 15%;
    row-gap: 13px;
    font-size: 1rem;
    .read-accept {
        display: flex;
         align-items: center;
        justify-content: flex-start;
        column-gap: 4px;
        font-size:12px;
        a{
            color: blue;
        }
        input[type="checkbox"] {
            padding: 0;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    }

    button {
        padding: 4px 10px;
        text-align: center;
        font-size: 1.6rem;
        background-color: var(--button-color);
        border: none;
         outline: none;
        border-radius: 10px;
        cursor: pointer;
        color: white;
    }
    button:hover {
        opacity: 0.9;
    }
    input {
        width: 150px;
        padding: 0.75rem 0.75rem 0.75rem 20px;
        border: 1px solid black;
        border-radius: 0 6px 6px 0;
    }
    select {
        width: 150px;
        font-size: 1rem;
        padding: 0.75rem 0.75rem 0.75rem 20px;
        border: 1px solid black;
        border-radius: 0 6px 6px 0;
    }

  .flew-row-container{
      display: flex;
      align-items: center;

      .input-wrap {
          display: flex;
          column-gap: 13px;
      }
      .flex-row {

             width: 34px;
             height: 41px;
          i {
        font-size:16px;
              color: white;

          }
      }
  }
}
.input-wrap {
    display: flex;
    column-gap: 13px;
    border: none;
    div {
        background-color: var(--button-color);
        height: 41px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        i {
            display: flex;
             justify-content: center;
            align-items: center;
            width: 34px;
            font-size: 16px;
            color: white;

        }
    }
}
input:focus-within {
    outline: 2px solid var(--button-color);
}
select:focus {
    outline: 2px solid var(--button-color);
}

input[type='file'] {
    display: none;
}
input[type='file']:valid + label.input-wrap2 {
    p:last-of-type{
        display: inline-block;
    }
    p:first-of-type {
        display: none;
    }
}
label {
    width: 100% !important;
    background-color: white;
    border-radius: 6px;
    border-top:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid black;
    height: 41px;
    position:relative;
    cursor: pointer;
    p {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50px;
        font-size: 1rem;
        font-weight: lighter;
    }
  p:last-of-type {
      display: none;
  }
}

.input-wrap2 {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1rem;
    input {
        padding: 0.75rem 0.75rem 0.75rem 20px;
        width: 100%;
    }
    div {
        background-color: var(--button-color);
      height: 41px;
        width: 34px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 6px 0 0 6px;
        i {
            font-size: 16px;
            color: white;
            padding: 0 4px;
        }
    }
}
.login-window-responsive {
    display: none;
}
@media (max-width: 700px) {
    .login-window {
        display: none;
    }
    .login-window-responsive {
        display: flex;
        flex-direction: column;
       position: absolute;
        width:98% !important;
        left: 50%;
        transform: translate(-50%);
        row-gap: 10px;
       padding: 25px;
        background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.7));
        backdrop-filter: blur(10px);
        border-radius: 15px;
        input[type='file'] {
         display: none;
        }
        input[type='file']:valid + .input-file {
            p:last-of-type{
                display: inline-block;
            }
            p:first-of-type {
                display: none;
            }
        }
        .input-file {
            background-color: white;
            height: 35px !important;
            padding: 12px 15px;
            border-radius: 6px;
            border: 1px solid black;
            font-size: 20px !important;
            p {
                font-size: 0.9rem;
                font-weight: lighter;
                white-space: pre;
                left: 8px;
            }
            p:last-of-type{
                display: none;
            }
        }
        button {
            padding: 2px 10px;
            text-align: center;
            font-size: 18px;
            background-color: var(--button-color);
            border: none;
            outline: none;
            border-radius: 6px;
            cursor: pointer;
            color: white !important;

        }
        select {
            padding: 2px 5px;
            border: 1px solid black;
            border-radius: 6px;
            font-size: 18px;
        }
        input {
            padding: 2px 5px;
            border: 1px solid black;
            border-radius: 6px;
            font-size: 18px;
        }
        input:focus {
            outline: 3px solid var(--button-color);
        }
        select:focus {
            outline: 3px solid var(--button-color);
        }
     }
}
footer {
    position: absolute;
    left: 0;
  top: 100vh;
}
.swal2-show {
    border-radius: 6px !important;
}
.swal2-confirm {
    background-color: #ed5158;
}
@media (max-width:1100px) {
    .login-window {
        margin: 10px 7.5% !important;
    }
}