/* 
 * 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
 */
/* Color variables for new UI enhancements Issue 9216 & 9212 */
/* Color variables for Calendar view when picking a session */
/* Font variables for new UI enhancements Issue 9216 & 9212*/
@font-face {
  font-family: 'jennasue';
  src: url('/assets/fonts/JennaSue.ttf');
}
@font-face {
  font-family: 'lato light';
  src: url('/assets/fonts/Lato-Light.ttf');
}
@font-face {
  font-family: 'lato heavy';
  src: url('/assets/fonts/Lato-Heavy.ttf');
}
@font-face {
  font-family: 'lato black';
  src: url('/assets/fonts/Lato-Black.ttf');
}
/* Font variables for new UI enhancements Issue 9216 & 9212*/
@font-face {
  font-family: 'montserrat bold';
  src: url('/assets/fonts/Montserrat-Bold.ttf');
}
@font-face {
  font-family: 'montserrat medium';
  src: url('/assets/fonts/Montserrat-Medium.ttf');
}
@font-face {
  font-family: 'montserrat regular';
  src: url('/assets/fonts/Montserrat-Regular.ttf');
}
/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
#md-18 {
  font-size: 18px;
}
/* sidebar compatibility - use this to retain desired background */
@media (max-width: 768px) {
  .arrow-banner {
    font-size: 70%;
  }
  .arw-menubar-color.ui.menu .right.menu a:not([href='#']) {
    display: none;
  }
}
.mdi.mdi-home {
  font-size: 1.2em;
}
.unauthenticated.menu {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
.arrow-banner {
  display: flex;
  align-items: center;
  padding: 0.5em 1.5em 0;
}
.arrow-banner .name {
  flex-grow: 1;
  text-align: right;
  padding-right: 4px;
  font-size: 1.5em;
}
.arrow-banner > .arrow-banner-logo img {
  width: 10em;
}
.ui.menu.arw-user,
.ui.accordion-trigger .label.arw-user {
  background-color: #f48025 !important;
  color: white;
  min-width: 80px;
}
.ui.menu.arw-gp,
.ui.accordion-trigger .label.arw-gp {
  background-color: #198ccc !important;
  color: white;
  min-width: 80px;
}
.ui.menu.arw-sp,
.ui.accordion-trigger .label.arw-sp {
  background-color: #052149 !important;
  color: white;
  min-width: 80px;
}
.ui.menu.arw-menubar-color,
.ui.accordion-trigger .label.arw-menubar-color {
  background-color: #5e5c5c !important;
  min-width: 80px;
}
.ui.breadcrumb.arw-user a,
.ui.breadcrumb.arw-user .divider {
  color: #f48025 !important;
}
.ui.breadcrumb.arw-gp a,
.ui.breadcrumb.arw-gp .divider {
  color: #198ccc !important;
}
.ui.breadcrumb.arw-sp a,
.ui.breadcrumb.arw-sp .divider {
  color: #052149 !important;
}
.ui.segment.arw-user {
  border-top-color: #f48025 !important;
}
.ui.segment.arw-user .ui.circular.label {
  color: white;
  background-color: #f48025 !important;
}
.ui.segment.arw-gp {
  border-top-color: #198ccc !important;
}
.ui.segment.arw-gp .ui.circular.label {
  color: white;
  background-color: #198ccc !important;
}
.ui.segment.arw-sp {
  border-top-color: #052149 !important;
}
.ui.segment.arw-sp .ui.circular.label {
  color: white;
  background-color: #052149 !important;
}
.ui.indicating.progress .bar.arw-user {
  background-color: #f48025 !important;
}
.ui.indicating.progress .bar.arw-gp {
  background-color: #198ccc !important;
}
.ui.indicating.progress .bar.arw-sp {
  background-color: #052149 !important;
}
.arrow-sidebar.ui.menu .menu > .item {
  font-size: 1rem;
}
.arrow-sidebar.ui.menu > .arrow-sidebar-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-sidebar.ui.menu > .arrow-sidebar-logo img {
  width: 70%;
}
.arrow-footer-logo img {
  margin-bottom: 1rem;
  width: 9em;
}
.arrow-menubar-item {
  font-weight: bold;
  font-size: 1.1rem;
}
.arw-menubar-color.ui.menu {
  margin-top: 0;
  margin-bottom: 0.5em;
}
.arw-menubar-color.ui.menu > a.item {
  font-weight: bold;
  font-size: 1.1rem;
}
@media (max-width: 480px) {
  .arw-menubar-color.ui.menu > a.item {
    font-size: 1rem;
  }
}
.action-btns .button {
  margin-bottom: 4px;
}
.country-text {
  font-size: 0.5em;
}
@media (max-width: 768px) {
  .country-text {
    font-size: 0.75em;
  }
}
.ui.menu.arw-menubar-color .arrow-banner-logo {
  display: flex;
  align-items: center;
  margin-left: 1.5em;
}
.ui.menu.arw-menubar-color .arrow-banner-logo img {
  height: 18px;
}
.ui.menu.arw-menubar-color .right.menu .login-item {
  color: white;
}
.ui.menu.arw-menubar-color .right.menu .ui.button.signup-button {
  background-color: #198ccc;
  color: white;
}
.ui.menu.arw-menubar-color .item.fitted {
  padding: 0 5px;
}
.ui.menu.arw-menubar-color .item.fitted .ui.flag {
  margin: 0;
}
.footer {
  display: grid;
  grid-template-columns: 1fr repeat(3, 300px) 1fr;
  grid-gap: 0 1em;
  background-color: #090b29 !important;
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.footer .ui.action.input input {
  border-radius: 0;
}
.footer .footer-content.footer-col1 {
  grid-column: 2 / 3;
}
.footer .footer-content.footer-col2 {
  grid-column: 3 / 4;
}
.footer .footer-content.footer-col3 {
  grid-column: 4 / 5;
}
.footer .footer-content.footer-row2 {
  grid-column: 1 / -1;
  text-align: center;
  color: white;
}
.footer .footer-content > .circular.icon {
  color: black;
}
.footer .footer-content > .circular.icon:not(:last-child) {
  margin-right: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.footer .header,
.footer .item {
  color: white !important;
}
.footer .header > img,
.footer .item > img {
  vertical-align: middle !important;
  margin-right: 20px !important;
  width: 1rem;
}
.footer a:hover.icon {
  color: white !important;
  background-color: #198ccc !important;
}
.footer a:hover.item {
  color: #198ccc !important;
}
.footer .ui.input > input {
  width: 50%;
}
.footer .ui.input > .user-orange {
  color: black;
  background-color: #f48025 !important;
  border-radius: 0 !important;
}
.footer .ui.input > .user-orange:hover {
  color: white !important;
  background-color: #198ccc !important;
}
.footer .ui.section.divider {
  border-bottom: 1px solid #ffffff !important;
}
.footer .lato-heavy {
  font-family: 'lato heavy';
}
.footer .lato {
  font-family: 'lato';
}
.footer .footer-nav::before {
  content: "» ";
}
@media (max-width: 1080px) {
  .footer {
    grid-template-columns: 1rem 1fr 1rem;
    grid-gap: 2em 0;
    padding: 5rem 3rem 3rem 3rem !important;
  }
  .footer .footer-content.footer-col1 {
    grid-column: 2 / 3 !important;
  }
  .footer .footer-content.footer-col2 {
    grid-column: 2 / 3 !important;
  }
  .footer .footer-content.footer-col3 {
    grid-column: 2 / 3 !important;
  }
}