::-webkit-scrollbar { width: 3px; height: 3px; background: #f4f4f4; }
::-webkit-scrollbar-thumb { background: #004984; }
::-webkit-scrollbar-button {}
::-webkit-scrollbar-corner {}
::-webkit-scrollbar-track {}


html {
  overflow-x: hidden; font-family: "Open Sans", sans-serif; font-size: 14px;
}

.flex-divider { flex:1; }

body {
  display: flex; flex-direction: column; padding: 0; margin: 0;
  :is(h1, h2, h3, h4, h5, h6, ul, li, ol, a, p) { padding: 0; margin:0; text-decoration: none; color:#000; list-style: none; }
  :is(input, textarea, select, button) { outline: none; }
  :is(button, select) { cursor: pointer; font-family: inherit; }
}

body *, body *:before, body *:after { box-sizing: border-box; }

input, textarea, select { font-family: "Open Sans", sans-serif; }

$modalZIndex: 9998;
$loadingZIndex: 9999;


.peyc {
  width: 100%;
}

.peyc_giris {
  display: grid; place-items: center; height: 100vh; background: url('../img/login_bg.jpg') right bottom / cover no-repeat;
  .giris_container {
    background: #EFEFF5cc; backdrop-filter: blur(5px); padding: 40px 25px; max-width: 100vw; position: fixed; left:0; top:0; bottom: 0; width: min-content; display: grid; grid-gap:16px; align-content: center;
    align-items: center; box-shadow: -30px 0 120px -35px #000000cc;
    .logo {
      height: 55px; background-color: #004984; padding: 10px 15px 10px 12px; border-radius: 4px; color:#fff;
      display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 1fr; grid-gap: 3px 10px; align-items: center;
      img { grid-row: span 2; width: 100%; }
      h5 {
        color:inherit; font-size: 11px; font-weight: 400; align-self: flex-end; line-height: 1;
        b { font-size: 14px; font-weight: 700; }
      }
      h6 { color:inherit; align-self: flex-start; font-weight: 400; line-height: 1; }
    }
    form {
      display: grid; grid-gap: 4px;
      input { padding: 11px 14px; border:0; border-radius: 4px; min-width:270px; max-width: 100%; }
      button {
        justify-self: flex-end; background: #51a351; color:#fff; border:0; padding:8px 25px 8px 20px; border-radius: 4px; margin-top:8px; transition:.18s linear; font-weight: 600;
        &:hover {
          background: darken(#51a351, 3);
        }
      }
    }
    .fivi_logo {
      height: 45px; position: absolute; bottom: 0; justify-self: center; display: flex;
      img { height: 100%; width: auto; }
    }
  }
}


.peyc_kayit {
  display: grid; place-items: center; height: 100vh;
  .giris_container {
    background: #004984; padding: 40px 25px; border-radius: 4px;
    form {
      display: grid; grid-gap: 4px 8px; grid-template-columns: repeat(2, 1fr);
      label {
        display: grid; grid-gap: 4px; color:#fff;
        input { padding: 8px 10px; border:0; border-radius: 4px; }
      }
      button { justify-self: flex-end; background: #51a351; color:#fff; border:0; padding:8px 10px; border-radius: 4px; margin-top:8px; }
    }
  }
}


#toast-container {
  padding-top: 8px;
  > div {
    backdrop-filter: blur(4px); opacity: 1!important; //transition: .3s ease-in-out;
    &:hover {
      box-shadow: 0 0 18px #999!important;
    }
  }
  .toast {
    background-color: #030303cc;
  }
  .toast-error {
    background-color: #BD362Fcc;
  }
  .toast-info {
    background-color: #2F96B4cc;
  }
  .toast-success {
    background-color: #51A351cc;
  }
  .toast-warning {
    background-color: #F89406cc;
  }
}



.modal {
  position: fixed; z-index: $modalZIndex; width: 100vw; height: 100vh; left:0; top:0; display: grid; place-items: center; isolation: isolate;
  .modal_overlay {
    position: absolute; width: 100vw; height: 100vh; left:0; top:0; background-color: #030303cc; z-index: -1;
    transition: opacity .18s linear;
  }
  .modal_container {
    background-color: #fff; display: grid; max-width: 90vw; transition: .3s ease-in-out;

    .modal_container_header {
      background-color: #F4F6F9; padding: 25px 30px 20px; border-bottom: 1px solid #E1E5EC; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
      > h4 { padding-right: 15px; font-size: 15px; color: #04253d; font-weight: 800; }
      section {
        button {
          border:1px solid #E1E5EC; background-color: #fff; padding: 5px 10px;
          &.modal_container_close {
            color:red; background-color: transparent; border: none;
          }
        }
      }
    }
    .modal_container_body {
      background-color: #F4F6F9; padding: 35px 30px 30px; max-height: 70vh; max-width: 90vw;
    }

  }

  &[data-open="false"] {
    pointer-events: none;
    .modal_overlay { opacity: 0; }
    .modal_container { opacity: 0; transform: scale(.8); }
  }
}


.loading {
  position: fixed; z-index: $loadingZIndex; left:0; top:0; width: 100vw; height: 100vh; background-color: #ffffff9D; display: grid; place-items: center; isolation: isolate; transition: .18s linear;

  > div {
    color:#fff; font-weight: 800; font-size: 24px;
    img { width: 80px; height: auto; }
  }


  &[data-open="false"] {
    visibility: hidden; opacity: 0; pointer-events: none;
  }

}



label.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
    &:checked + .slider {
      background-color: #004984;
      &:before {
        transform: translateX(24px);
      }
    }
    &:focus + .slider {
      //box-shadow: 0 0 1px #004984;
    }
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    &:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
    }
    &.round {
      border-radius: 24px;
      &:before {
        border-radius: 50%;
      }
    }
  }
}



@media screen and (max-width: 480px){
  .peyc_giris {
    .giris_container {
      width:100%; right:0;
      form {
        input {
          min-width:unset;
        }
      }
    }
  }
}