/* #region General Settings */
/* Colors Root */
:root {
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-dark: #343a40;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --red: #ea3131;
  --red-rgb: 241, 26, 123;
  --green: #b1cc21;
  --green-rgb: 177, 204, 33;
  --blue: #66c3d0;
  --blue-rgb: 102, 195, 208;
  --primary-bg: #007bff;
  --primary-color: #004085;
  --primary-font-color: #007bff;
  --primary-rgb: 0, 123, 255;
  --secondary-bg: #6c757d;
  --secondary-color: #383d41;
  --secondary-font-color: #6c757d;
  --secondary-rgb: 108, 117, 125;
  --success-bg: #28a745;
  --success-color: #155724;
  --success-font-color: #28a745;
  --success-rgb: 40, 167, 69;
  --danger-bg: #dc3545;
  --danger-color: #721c24;
  --danger-font-color: #dc3545;
  --danger-rgb: 220, 53, 69;
  --caution-bg: #974b0c;
  --caution-color: #854612;
  --caution-font-color: #ec6c01;
  --caution-rgb: 236, 108, 1;
  --warning-bg: #ffc107;
  --warning-color: #856404;
  --warning-font-color: #ffc107;
  --warning-rgb: 255, 193, 7;
  --info-bg: #17a2b8;
  --info-color: #0c5460;
  --info-font-color: #17a2b8;
  --info-rgb: 23, 162, 184;
  --light-bg: var(--gray-300);
  --light-color: #818182;
  --light-font-color: var(--gray-300);
  --light-rgb: 251, 251, 252;
  --dark-bg: #343a40;
  --dark-color: #1b1e21;
  --dark-font-color: #343a40;
  --dark-rgb: 52, 58, 64;
}

/* Box Shadow */
:root {
  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
  --green-box-shadow: 0 0 0 0.2rem rgba(var(--green-rgb), 0.1);
  --blue-box-shadow: 0 0 0 0.2rem rgba(var(--blue-rgb), 0.1);
  --primary-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.3);
  --secondary-box-shadow: 0 0 0 0.2rem rgb(108, 117, 125, 0.3);
  --success-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.3);
  --danger-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.3);
  --warning-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.3);
  --info-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.3);
  --light-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.3);
  --dark-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.3);
}

/* Border and Border Radius Root */
:root {
  /* Border */

  /* Border Radius */
  --border-radius: 0.465rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-xxl: 2rem;
  --border-radius-pill: 50rem;
}

/* Button Root */
:root {
  /* Color */
  --btn-primary-bg: #007bff;
  --btn-primary-color: var(--white);
  --btn-secondary-bg: #6c757d;
  --btn-secondary-color: var(--white);
  --btn-success-bg: #28a745;
  --btn-success-color: var(--white);
  --btn-danger-bg: #dc3545;
  --btn-danger-color: var(--white);
  --btn-warning-bg: #ffc107;
  --btn-warning-color: #212529;
  --btn-info-bg: #17a2b8;
  --btn-info-color: var(--white);
  --btn-light-bg: #f8f9fa;
  --btn-light-color: #212529;
  --btn-dark-bg: #343a40;
  --btn-dark-color: var(--white);
  --btn-disabled-bg: #f8f9fa;
  --btn-disabled-color: var(--gray-400);
  /* Box Shadow */
  --btn-primary-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.3);
  --btn-secondary-box-shadow: 0 0 0 0.2rem rgb(108, 117, 125, 0.3);
  --btn-success-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.3);
  --btn-danger-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.3);
  --btn-warning-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.3);
  --btn-info-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.3);
  --btn-light-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.3);
  --btn-dark-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.3);
}

/* Font Root */
:root {
  --font-color: #4a4a4a;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;
  --font-weight-normal: "normal";
  --font-weight-bold: "bold";
  --font-weight-bolder: "bolder";
  --font-weight-lighter: "lighter";
}

/* Grid */
:root {
  --grid-number: 12;
  --col-1-width: calc(100% * 1 / var(--grid-number));
  --col-2-width: calc(100% * 2 / var(--grid-number));
  --col-3-width: calc(100% * 3 / var(--grid-number));
  --col-4-width: calc(100% * 4 / var(--grid-number));
  --col-5-width: calc(100% * 5 / var(--grid-number));
  --col-6-width: calc(100% * 6 / var(--grid-number));
  --col-7-width: calc(100% * 7 / var(--grid-number));
  --col-8-width: calc(100% * 8 / var(--grid-number));
  --col-9-width: calc(100% * 9 / var(--grid-number));
  --col-10-width: calc(100% * 10 / var(--grid-number));
  --col-11-width: calc(100% * 11 / var(--grid-number));
  --col-12-width: calc(100% * 12 / var(--grid-number));
}

/* #region Filled */
.filled {
  border: none !important;
}
.filled.primary {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary-color) !important;
}
.filled.secondary {
  background-color: rgba(var(--secondary-rgb), 0.1) !important;
  color: var(--secondary-color) !important;
}
.filled.success {
  background-color: rgba(var(--success-rgb), 0.1) !important;
  color: var(--success-color) !important;
}
.filled.danger {
  background-color: rgba(var(--danger-rgb), 0.1) !important;
  color: var(--danger-color) !important;
}
.filled.caution {
  background-color: rgba(var(--caution-rgb), 0.1) !important;
  color: var(--caution-color) !important;
}
.filled.warning {
  background-color: rgba(var(--warning-rgb), 0.1) !important;
  color: var(--warning-color) !important;
}
.filled.info {
  background-color: rgba(var(--info-rgb), 0.1) !important;
  color: var(--info-color) !important;
}
.filled.light {
  background-color: #fbf9fa !important;
  color: var(--dark-color) !important;
  border: 1px solid #ededed !important;
}
.filled.dark {
  background-color: rgba(var(--dark-rgb), 0.1) !important;
  color: var(--dark-color) !important;
}
/* #endregion */
/* Filled */

/* #region Outlined */
.outlined.primary {
  border-color: var(--primary-bg) !important;
  color: var(--primary-color) !important;
}
.outlined.secondary {
  border-color: var(--secondary-bg) !important;
  color: var(--secondary-color) !important;
}
.outlined.success {
  border-color: var(--success-bg) !important;
  color: var(--success-color) !important;
}
.outlined.danger {
  border-color: var(--danger-bg) !important;
  color: var(--danger-color) !important;
}
.outlined.caution {
  border-color: var(--caution-bg) !important;
  color: var(--caution-color) !important;
}
.outlined.warning {
  border-color: var(--warning-bg) !important;
  color: var(--warning-color) !important;
}
.outlined.info {
  border-color: var(--info-bg) !important;
  color: var(--info-color) !important;
}
.outlined.light {
  border-color: var(--light-bg) !important;
  color: var(--light-color) !important;
}
.outlined.dark {
  border-color: var(--dark-bg) !important;
  color: var(--dark-color) !important;
}
/* #endregion */
/* Outlined */

/* #region Badge */
/* Subtle Badge */
.badge.subtle.primary {
  background-color: rgba(var(--primary-rgb), 0.25) !important;
  color: var(--primary-color) !important;
}
.badge.subtle.secondary {
  background-color: rgba(var(--secondary-rgb), 0.25) !important;
  color: var(--secondary-color) !important;
}
.badge.subtle.success {
  background-color: rgba(var(--success-rgb), 0.25) !important;
  color: var(--success-color) !important;
}
.badge.subtle.danger {
  background-color: rgba(var(--danger-rgb), 0.25) !important;
  color: var(--danger-color) !important;
}
.badge.subtle.warning {
  background-color: rgba(var(--warning-rgb), 0.25) !important;
  color: var(--warning-color) !important;
}
.badge.subtle.info {
  background-color: rgba(var(--info-rgb), 0.25) !important;
  color: var(--info-color) !important;
}
.badge.subtle.light {
  background-color: rgba(var(--light-rgb), 0.25) !important;
  color: var(--light-color) !important;
}
.badge.subtle.dark {
  background-color: rgba(var(--dark-rgb), 0.25) !important;
  color: var(--dark-color) !important;
}

/* Solid Badge */
.badge.solid.primary {
  background-color: var(--primary-bg) !important;
  color: var(--white) !important;
}
.badge.solid.secondary {
  background-color: var(--secondary-bg) !important;
  color: var(--white) !important;
}
.badge.solid.success {
  background-color: var(--success-bg) !important;
  color: var(--white) !important;
}
.badge.solid.danger {
  background-color: var(--danger-bg) !important;
  color: var(--white) !important;
}
.badge.solid.warning {
  background-color: var(--warning-bg) !important;
  color: var(--white) !important;
}
.badge.solid.info {
  background-color: var(--info-bg) !important;
  color: var(--white) !important;
}
.badge.solid.light {
  background-color: var(--light-bg) !important;
  color: var(--white) !important;
}
.badge.solid.dark {
  background-color: var(--dark-bg) !important;
  color: var(--white) !important;
}
/* #endregion Badge */

/* AbisList İtem */
.list-item.primary {
  color: var(--primary-font-color);
}
.list-item.primary::before {
  background-color: var(--primary-bg);
}
.list-item.secondary {
  color: var(--secondary-font-color);
}
.list-item.secondary::before {
  background-color: var(--secondary-bg);
}
.list-item.success {
  color: var(--success-font-color);
}
.list-item.success::before {
  background-color: var(--success-bg);
}
.list-item.danger {
  color: var(--danger-font-color);
}
.list-item.danger::before {
  background-color: var(--danger-bg);
}
.list-item.warning {
  color: var(--warning-font-color);
}
.list-item.warning::before {
  background-color: var(--warning-bg);
}
.list-item.info {
  color: var(--info-font-color);
}
.list-item.info::before {
  background-color: var(--info-bg);
}
.list-item.light {
  color: var(--light-font-color);
}
.list-item.light::before {
  background-color: var(--light-bg);
}
.list-item.dark {
  color: var(--dark-font-color);
}
.list-item.dark::before {
  background-color: var(--dark-bg);
}
/* #endregion AbisList İtem */

@font-face {
  font-family: "NotoSans";
  src: url("../webfonts/NotoSans-Regular.ttf");
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "NotoSans", sans-serif;
  outline: none;
}

html {
  font-size: 0.9rem;
}

body {
  background-color: var(--gray-200);
  overflow-x: hidden;
  overflow-y: scroll;
}

.layoutSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100vh - 8rem - 3rem);
  margin-top: 8rem;
}
.layoutMain {
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 2rem 6rem;
  flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--font-color);
}

h1 {
  font-size: 2.125rem;
}
h2 {
  font-size: 1.875rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}

a {
  color: var(--font-color);
  text-decoration: none;
}

.custom-link-style {
  color: var(--btn-primary-bg) !important;
  text-decoration: underline !important;
}

input[type="text"] {
  font-size: 1rem !important;
}
/* #endregion */
/* General Settings */

/* For Mid-Sized Phones */
@media only screen and (min-width: 576px) and (max-width: 1200px) {
  html {
    font-size: 0.8rem;
  }
}

/* Extra Small */
@media only screen and (max-width: 575px) {
  html {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 1200px) {
  .layoutSection {
    margin-top: 7rem;
  }
  .layoutMain {
    padding: 0 2rem 2rem 2rem;
  }
}

/* Extra Small */
@media only screen and (max-width: 575px) {
  .layoutSection {
    margin-top: 7rem;
  }
  .layoutMain {
    padding: 0 2rem 2rem 2rem;
  }
}