/* Dimensions */
:root {
  --inner-width: 960px;
  --nav-height: 69px;
  --search-box-height: 20px;
  --university-icon-height: 80px;
  --university-menu-width: 300px;
  --title-box-height: 46px;
  --semester-menu-width: 135px;
  --student-menu-width: 150px;
  --subject-menu-width: 230px;
  --course-menu-width: 440px;
  --student-submenu-width: 250px;
  --add-new-height: 26px;
  --side-menu-width: 164px;
}

/* Colors */
:root {
  --color-transparent: transparent;
  --color-primary: #9F44FC;
  --color-primary-light: #D2A8FD;
  --color-secondary: #5D5EFC;
  --color-secondary-light: #8490FD;  
  --color-dark: #323447;
  --color-light: #FFFFFF;

  --color-light-gray: #f8f8f8;
  --color-white: #FFFFFF;
  --main-fg-color: #666666;
  --alt-bg-color: #c54c27;
  --tag-fg-color: #b75333;
  --cancel-fg-color: #ae7377;
  --title-menu-fg-color: #cccccc;
  --light-bg-color: #ffffff;
  --shadow-color: rgba(58, 58, 58, 0.5);
  --border-color: #E0E1E3;
  --border-default: 0.5px solid var(--border-color);
}

/* Font styles */
:root {
  --normal-font-size: 0.8125rem;
}

/* Z-indexes */
:root {
  --normal-z: 1;
  --popup-bg-z: 2;
  --menu-box-z: 3;
  --search-bar-z: 4;
  --topmost-z: 99999;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Prompt', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--main-fg-color);
}

input,
textarea,
button,
select {
  outline: none;
  font-family: Prompt, sans-serif;
  font-size: 0.9em;
  color: var(--main-fg-color);
  box-sizing: border-box;
  padding: 0 8px;
  font-weight: 300;
  border-radius: 19px;
}

input,
textarea {
  border: 0.5px solid #e0e1e3;
  background: #f8f8f8;
}

input,
select {
  height: 36px;
}

input[disabled],
button[disabled],
select[disabled] {
  opacity: 0.5;
}


button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
  font-weight: 300;
  outline: none;
  color: var(--color-dark);
  background: var(--color-white);
  border: 0.5px solid #e0e1e3;
  cursor: pointer;
  height: 36px;
  width: 126.5px;
}

button:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border: 0.5px solid var(--color-dark);
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: normal;
}

.font-medium {
  font-weight: 500;
}

.font-heavy {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}