/* =========================================
   Root Variables & Global Color Classes
   Project: YourWorksheet.com
   ========================================= */

/* Theme Color Palette */
:root {
  --main-color: #0075b8;
  --black-color: #0a0a0a;
  --secondary-color: #828181;
  --third-color: #fffbe5;
  --grey-color: #f5f5f5;
  --light-grey-color: #f9f9f9;
  --light-txt: #8f8f8f;
  --white-color: #ffffff;
  --light-black-txt: #4e4e4e;
}

/* =========================================
   Text Color Utility Classes
   ========================================= */

/* Main Theme Text */
.text-main {
  color: var(--main-color) !important;
}

/* Black Text */
.text-black {
  color: var(--black-color) !important;
}

.text-white,
.w-txt {
  color: var(--white-color) !important;
}

/* Secondary Text */
.text-secondary {
  color: var(--secondary-color) !important;
}

/* Third (highlight) Text */
.text-third {
  color: var(--third-color) !important;
}

/* Grey Text */
.text-grey {
  color: var(--grey-color) !important;
}

/* Light Grey Text */
.text-light-grey {
  color: var(--light-grey-color) !important;
}

/* =========================================
   Background Color Utility Classes
   ========================================= */

/* Main Theme Background */
.bg-main {
  background-color: var(--main-color) !important;
}

/* Black Background */
.bg-black {
  background-color: var(--black-color) !important;
}

/* Secondary Background */
.bg-secondary {
  background-color: var(--secondary-color) !important;
}

/* Third (highlight) Background */
.bg-third {
  background-color: var(--third-color) !important;
}

/* Grey Background */
.bg-grey {
  background-color: var(--grey-color) !important;
}

/* Light Grey Background */
.bg-light-grey {
  background-color: var(--light-grey-color) !important;
}

/* =========================================
   Border & Hover Helper Classes
   ========================================= */

/* Borders */
.border-main {
  border-color: var(--main-color) !important;
}

.border-black {
  border-color: var(--black-color) !important;
}

.border-grey {
  border-color: var(--grey-color) !important;
}

/* Hover Text */
.hover-main:hover {
  color: var(--main-color) !important;
}

.hover-black:hover {
  color: var(--black-color) !important;
}

.hover-secondary:hover {
  color: var(--secondary-color) !important;
}

/* Hover Background */
.hover-bg-main:hover {
  background-color: var(--main-color) !important;
}

.hover-bg-black:hover {
  background-color: var(--black-color) !important;
}

.hover-bg-grey:hover {
  background-color: var(--grey-color) !important;
}