:root{
    --bg-color: #183253;
    --bg-imageBg: url("images/girisBg_koyuMavi.svg");
    --bg-textColor: #ffffff;
    --bg-formBgColor:#8d9fb5;
    
    background-color: #ffffff ;
    
          /* width */
          ::-webkit-scrollbar {
            width: 10px;
            height: 8px;
          }
    
          /* Track */
          ::-webkit-scrollbar-track {
            background: #183253;
    
          }
    
          /* Handle */
          ::-webkit-scrollbar-thumb {
            background: #8dadd8;
          }
    
          /* Handle on hover */
          ::-webkit-scrollbar-thumb:hover {
            background: #183253;
          }
    
          ::-webkit-scrollbar-corner {
            background: #183253;
          }
    
    }
       .svg-inline--fa.fa-w-18 {
          width: 12px;
        }
    
        .header {
          height: 40px;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background-color: #183253;
          color: white;
          box-shadow: 0 2px 5px rgba(0,0,0,0.2);
          z-index: 1;
        }
    
    .header h4 {
        top: 8px;
        position: fixed;
        margin-left: 63px;
        margin-bottom: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
    }
    
    #favicon {
        margin-top: -6px;
        margin-left: 0px;
        top: 20px;
    }
    
          #favicon img {
            height: 50px;
            width: 60px;
          }
    
        .sidebar {
            position: fixed;
            left: 0;
            top: 40px;
            height: calc(100% - 40px);
            width: 250px;
            background-color: #343a40;
            overflow-x: hidden;
            transition: 0.5s;
            z-index: 100;
            padding-top: 10px;
        }
    
        .sidebar a {
          padding: 10px 15px;
          text-decoration: none;
          font-size: 18px;
          color: white;
          display: block;
          transition: 0.3s;
        }
    
        .sidebar a:hover {
          background-color: #007bff;
        }
    
    .hamburger {
        height: 100%;
        cursor: pointer;
        position: absolute;
        left: 250px;
        z-index: 1100;
    }
    
        .menu {
          position: fixed;
          top: 40px;
          left: 0px;
          width: 250px;
          height: calc(100% - 40px);
          background-color: #375D81;
          transition: all 0.3s ease-in-out;
          z-index: 1;
        }
        .menu ul {
          list-style: none;
          padding: 0;
        }
    
        #content {
          width: calc(100% - 250px);
          margin-top: 20px; /* Sabit header yüksekliği kadar margin-top */
          padding: 20px;
          background-color: #ffffff ;
          position: relative;
          left: 250px; /* Default olarak 0 */
          transition: all 0.3s ease-in-out;
    
    
        }
        .table td, .table th {
        padding: 0px;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
    th {
        max-width: 83px;
        text-align: inherit;
    }
    
    .bootstrap-table .fixed-table-container .table thead th .sortable {
        cursor: pointer;
        background-position: right;
        background-repeat: no-repeat;
    }
    
    .bootstrap-table .fixed-table-container .table thead th .th-inner {
        padding-left: 0px;
        vertical-align: bottom;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    label {
      color: #115ba2;
      font-weight: 600;
      display: inline-block;
      margin-top: 6px;
      margin-bottom: 3px;
  }
    .form-control {
      display: block;
      width: 100%;
      height: 38px;
      padding-left: 3px;
      padding-top: 0px;
      font-size: 16px;
      color: #000000;
      background-color: #f9f9f9;
      background-clip: padding-box;
      border: 1px solid #eaeaea;
      border-radius: 5px;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }
  .modal-content {
    border-radius: 35px;
  }
  .modal-footer {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background-color: #375D81;
  }
  .modal-header {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    color: white;
    background-color: #375D81;
  }
  .close {
    color: #ffffff;
    opacity: 1;
}

    #addKatmanBtn{
      top: 76px;
      position: absolute;
      z-index: 50;
    }
    
    #addUserBtn {
      top: 76px;
      position: absolute;
      z-index: 50;
    }
    .modal-dialog {
      max-width: 800px;
    }
    
    .oturum_kapat {
      position: absolute;
      top: 4px;
      right: 6px;
      height: 30px;
      width: 30px;
      background-color: transparent;
      border: none;
      border-radius: 10%;
    }
    
    .oturum_kapat:hover {
      background-color: var(--bg-activebuttonbgcolor);
      cursor: pointer;
      border: none;
    }

  .oturum_kapat img {
    top: 3px;
    padding: 0px;
    cursor: pointer;
    position: absolute;
    height: 27px;
    width: 32px;
    z-index: 5;
    }
    
      #username-display {
        cursor: default;
        position: absolute;
        right: 24px;
        margin-top: 5px;
        height: 23px;
        width: max-content;
        color: var(--text-color);
        box-shadow: 0px 0px 2px #808080;
        border: 0px solid #000000;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        background-color: #369;
        padding: 4px;
        z-index: 0;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12pt;
        text-align: center;
        outline: 0px solid #000000;
        line-height: 13px;
    }
    
    .open {
      /*left: -250px;*/
        }
    .notopen {
          left: 0px;
        }
    
        .menubutton {
        outline: none;
        margin-bottom: 0px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: left;
        width: calc(100% - 10px);
        height: 35px;
        background-color: #C4D7ED;
        border: 1px solid black;
        border-radius: 5px 5px 5px 5px;
    }
    
    .menubutton:hover {
      outline: none;
        margin-bottom: 0px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: left;
        width: calc(100% - 10px);
        height: 35px;
        background-color: #557491;
        border: 1px solid black;
        border-radius: 5px 5px 5px 5px;
    }
    .sliderbutton {
      outline: none;
        text-align: left;
        width: calc(100% - 10px);
        height: 100%;
        background-color: #1d4163;
        border-right: 1px solid black;
        border-left: none;
        border-bottom: none;
        border-top: none;
    }
    
    .sliderbutton:hover {
      outline: none;
      text-align: left;
        width: calc(100% - 10px);
        height: 100%;
        background-color: #627c94;
        border-right: 1px solid black;
        border-left: none;
        border-bottom: none;
        border-top: none;
      }
      button:focus {
        outline: 0px;
    }
    #manuloading {
      position: fixed;
      top: 0px;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-image: url("images/girisBg.svg");        
      z-index: 10;
    }
    
    #monuloading_text {
      position: relative;
      text-align: center;
      top: 49%;
      z-index: 1000;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    #monuloading_title_text {
      position: relative;
      text-align: center;
      top: 40%;
      z-index: 1000;
      color: white;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 30px;
    }
    
    #monuloading_logo {
      position: fixed;
      top: 30%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    
    .loader {
      top: 50%;
      margin: auto;
      width: 300px;
      height: 20px;
      border-radius: 20px;
      color: #e6e5f0;
      border: 2px solid;
      position: relative;
      z-index: 1001;
    }
    
    .loader::before {
      content: "";
      position: absolute;
      margin: 2px;
      inset: 0 100% 0 0;
      border-radius: inherit;
      background: currentColor;
      animation: load 1.1s;
    }
    
    @keyframes load {
      100% {
        inset: 0
      }
    }
    
    @keyframes cssAnimation {
      to {
        width: 0;
        height: 0;
        overflow: hidden;
      }
    }
    
    @-webkit-keyframes cssAnimation {
      to {
        width: 0;
        height: 0;
        visibility: hidden;
      }
    }
    .form-group {
      transition: all 0.3s ease;
      margin-bottom: 0px;
    }
    
    /* Gizli elemanlar için ek stil */
    .form-group[style*="display: none"] {
      margin: 0;
      padding: 0;
      height: 0;
      overflow: hidden;
    }
    body {
      line-height: 1.11;
    }
    input {
      line-height: 1;
    }