:root {
  --color-background: #F9FAFF;
  --color-primary: #FFCC01;
  --color-body: #221F20;
  --color-alternate: #757575;
  --color-danger: #FF0000;
  --color-border: #D0D5DD;
  --color-placeholder: #B3B3B3;
  --font-family: "Anakotmai";
  --font-size-body: 16px;
  --font-size-header: 20px;
  --border-radius: 16px;
  --space-size: 36px;
  --space-size-half: calc(var(--space-size) / 2);

  --bs-border-color: var(--color-border);
}

@font-face {
  font-family: "Anakotmai";
  src: url('../fonts/anakotmai/anakotmai-light.eot');
  src: url('../fonts/anakotmai/anakotmai-light.eot?#iefix') format('embedded-opentype'), url('../fonts/anakotmai/anakotmai-light.woff2') format('woff2'), url('../fonts/anakotmai/anakotmai-light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Anakotmai";
  src: url('../fonts/anakotmai/anakotmai-medium.eot');
  src: url('../fonts/anakotmai/anakotmai-medium.eot?#iefix') format('embedded-opentype'), url('../fonts/anakotmai/anakotmai-medium.woff2') format('woff2'), url('../fonts/anakotmai/anakotmai-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Anakotmai";
  src: url('../fonts/anakotmai/anakotmai-bold.eot');
  src: url('../fonts/anakotmai/anakotmai-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/anakotmai/anakotmai-bold.woff2') format('woff2'), url('../fonts/anakotmai/anakotmai-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: normal;
  background-color: var(--color-background);
}

hr {
	margin: var(--space-size-half) 0;
	border-top: 1px var(--color-border) solid;
	opacity: 1;
}
hr.hr-primary {
	border-top: 2px var(--color-primary) solid;
}


h1, h2, h3, h4 {
  margin-top: var(--space-size-half);
  margin-bottom: var(--space-size-half);
  line-height: 1.5;
}

h1 {
  font-size: var(--font-size-header);
  font-weight: bold;
}

h2 {
  font-size: var(--font-size-header);
  font-weight: 500;
  color: var(--color-body);
}

h2.main-title {
  position: relative;
  padding-left: 10px;
}

h2.main-title::before {
  content: "";
  display: block;
  background-color: var(--color-primary);
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

h3 {
  font-size: var(--font-size-header);
  font-weight: medium;
  color: var(--color-alternate);
}

h4 {
  font-size: var(--font-size-header);
  font-weight: normal;
}

textarea {
  resize: none;
}
/* Bootstrap Overide */

.form-control::placeholder {
  color: var(--color-placeholder);
}
.form-check-input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}
.form-check-input:focus {
	box-shadow: 0 0 5px .05rem var(--color-primary);
}
.btn-primary {
	--bs-btn-color: var(--color-body);
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-color: var(--color-body);
	--bs-btn-hover-bg: var(--color-primary);
	--bs-btn-hover-border-color: var(--color-primary);
	--bs-btn-active-color: var(--color-body);
	--bs-btn-active-bg: var(--color-primary);
	--bs-btn-active-border-color: var(--color-primary);
	--bs-btn-disabled-color: var(--color-body);
	--bs-btn-disabled-bg: var(--color-primary);
	--bs-btn-disabled-border-color: var(--color-primary);
}
/* Custom Styles */
.form-wrapper {
  border: 1px solid var(--color-border);
  background-color: #FFF;
  padding: var(--space-size-half) 100px;
  border-radius: var(--border-radius);
}
@media (max-width: 1399.98px) {
  .form-wrapper {
    padding-left: var(--space-size-half);
    padding-right: var(--space-size-half);
  }

}

label > span {
  color: var(--color-danger);
}
.select-placeholder {
  color: var(--color-placeholder);
}
.upload-placeholder {
  cursor: pointer;
  object-fit: cover;
}
.multiple-input-title {
  color: var(--color-alternate);
}

.multiple-input-button {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.multiple-input-button::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: URL("../images/icon-multiple-input.svg");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.multiple-input > input {
  margin-bottom: 0.5rem;
}

.table-transcript {

}
.table-transcript td {
  border: 1px solid var(--color-border) ;
}
.major > td, .bg-gray {
  background-color: var(--color-background);
}
.grade {
  font-weight: 500;
  display: inline-block;
  border-radius: 6px;
  width: 25px;
  --grade-background-opacity: 0.15;
}
.grade[data-grade="A"] {
  color: #44ce1b;
  background-color: rgba(68,206,27,var(--grade-background-opacity));
}
.grade[data-grade="B"] {
  color: #0590CC;
  background-color: rgba(144,204,100,var(--grade-background-opacity));
}
.grade[data-grade="C"] {
  color: #AF9164;
  background-color: rgba(175,145,100,var(--grade-background-opacity));
}
.grade[data-grade="D"] {
  color: #3D0B37;
  background-color: rgba(61,11,55,var(--grade-background-opacity));
}
.grade[data-grade="F"] {
  color: #e51f1f;
  background-color: rgba(229,31,31,var(--grade-background-opacity));
}