/* 
 * The names of these colors are based on the below website.
 * Reference: http://chir.ag/projects/name-that-color
 */
/*
 * User/GP/SP color
 */
/*******************************
         Site Settings
*******************************/
/***********************************************************
  Central element variation compilation enablers
***********************************************************/
/* General */
/*******************************
           Elements
*******************************/
/* Button */
/* Container */
/* Divider */
/* Header */
/* Icon */
/* Image */
/* Input */
/* Label */
/* List */
/* Loader */
/* Placeholder */
/* Rail */
/* Reveal */
/* Segment */
/* Step */
/* Text */
/*******************************
           Collections
*******************************/
/* Breadcrumb */
/* Form */
/* Grid */
/* Menu */
/* Message */
/* Table */
/*******************************
             Views
*******************************/
/* Ad */
/* Card */
/* Comment */
/* Feed */
/* Item */
/* Statistic */
/*******************************
            Modules
*******************************/
/* Accordion */
/* Calendar */
/* Checkbox */
/* Dimmer */
/* Dropdown */
/* Embed */
/* Modal */
/* Popup */
/* Progress */
/* Rating */
/* Search */
/* Shape */
/* Sidebar */
/* Slider */
/* Tab */
/* Toast */
/* Loading */
/* Emojis */
/*-------------------
       Fonts
--------------------*/
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
    Border Radius
--------------------*/
/* See Power-user section below
   for explanation of @px variables
*/
/*-------------------
    Brand Colors
--------------------*/
/* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */
/*--------------
  Page Heading
---------------*/
/*--------------
   Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
    Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
        Sizes
--------------------*/
/*
  Sizes are all expressed in terms of 14px/em (default em)
  This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
        Page
--------------------*/
/*-------------------
      Paragraph
--------------------*/
/*-------------------
       Links
--------------------*/
/*-------------------
    Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
  Highlighted Text
--------------------*/
/*-------------------
       Loader
--------------------*/
/*-------------------
        Grid
--------------------*/
/*-------------------
     Transitions
--------------------*/
/*-------------------
     Breakpoints
--------------------*/
/*-------------------
      Site Colors
--------------------*/
/*---  Colors  ---*/
/*---  Light Colors  ---*/
/*---   Neutrals  ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Light Colored Text ---*/
/*--- Hovered Colored Text ---*/
/*--- Colored Border ---*/
/*--- Shadows ---*/
/* Inverted */
/* Box Shadows */
/*-------------------
     Alpha Colors
--------------------*/
/*-------------------
       Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
           Power-User
*******************************/
/*-------------------
    Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
        Paths
--------------------*/
/* For source only. Modified in gulp for dist */
/*-------------------
       Em Sizes
--------------------*/
/*
  This rounds @size values to the closest pixel then expresses that value in (r)em.
  This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
       Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
     Neutral Text
--------------------*/
/*-------------------
     Brand Colors
--------------------*/
/*-------------------
      Borders
--------------------*/
/*-------------------
    Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
  Exact Pixel Values
--------------------*/
/*
  These are used to specify exact pixel values in em
  for things like borders that remain constantly
  sized as emSize adjusts

  Since there are many more sizes than names for sizes,
  these are named by their original pixel values.

*/
/* Columns */
/*******************************
             States
*******************************/
/*-------------------
      Disabled
--------------------*/
/*-------------------
        Hover
--------------------*/
/*---  Shadows  ---*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Focus
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
    Down (:active)
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Active
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*---  Tertiary  ---*/
/*---  Bright  ---*/
/*******************************
 States shared in Form-related components
 *******************************/
/* Form state*/
/* Input state */
/* AutoFill */
/* Dropdown state */
/* Focused state */
/* Placeholder state */
/*
 * ARW variables
 */
/*
 * User/GP/SP color
 */
/**  Sets box shadow, border and color.*/
ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-left: -4em;
  font-weight: bold;
  position: absolute;
}
li.l1 {
  margin-top: 2em;
}
li.l1::before {
  margin-left: -3em;
  font-size: 1.2em;
}
.l1-header {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: left !important;
  margin-top: 0.5rem;
}
.l2-content {
  margin-top: 0.5em;
}
.l2-content .interpretation {
  font-weight: bold;
  margin-right: 0.5em;
}
.l2-content.header {
  margin-left: -1em;
  margin-top: 1em;
  font-weight: bold;
}
.l2-content span.header {
  font-weight: bold;
}
.l2-content.emphasize {
  margin-left: -1em;
  margin-top: 1em;
  font-style: italic;
}
.l3-content {
  margin-top: 0.5em;
}
.l3-content .quoted {
  font-style: italic;
}
.l3-content .quoted:before {
  content: open-quote;
}
.l3-content .quoted:after {
  content: close-quote;
  margin-right: 0.5em;
}
body {
  counter-reset: section1;
}
.tnc-white-background {
  background-color: #ffffff;
  padding: 5px;
}
.tnc-container {
  line-height: 1.5;
}
.tnc-container *::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background-color: #F5F5F5;
}
.tnc-container *::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #363636;
  border-radius: 10px;
  background-color: #F5F5F5;
}
.tnc-container *::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px #363636;
  border-radius: 10px;
  background-color: #555;
}
.tnc-container *::-webkit-scrollbar {
  height: 25px;
  width: 15px;
  background-color: #F5F5F5;
}
.tnc-container *::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.tnc-container *::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 30%;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #3e3e3e;
}
.tnc-container > .tnc-styles,
.tnc-container .tnc {
  padding: 1rem 1.5rem;
}
.l4-content::before {
  counter-increment: section1;
  content: "(" counter(section1, lower-roman) ")";
}
li::before {
  position: unset;
  margin-right: 0.5rem;
}
.tnc-header {
  font-size: 1.25rem;
  font-weight: bold;
  padding-bottom: 1rem;
}