/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/

/* Responsive grid */

.row-fluid {
  width: 100%;
}

.row-fluid:before, .row-fluid:after {
  display: table;
  content: '';
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*='span'] {
  display: block;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-left: 2.127659574%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.row-fluid [class*='span']:first-child {
  margin-left: 0;
}

.row-fluid .span12 {
  width: 99.99999998999999%;
}

.row-fluid .span11 {
  width: 91.489361693%;
}

.row-fluid .span10 {
  width: 82.97872339599999%;
}

.row-fluid .span9 {
  width: 74.468085099%;
}

.row-fluid .span8 {
  width: 65.95744680199999%;
}

.row-fluid .span7 {
  width: 57.446808505%;
}

.row-fluid .span6 {
  width: 48.93617020799999%;
}

.row-fluid .span5 {
  width: 40.425531911%;
}

.row-fluid .span4 {
  width: 31.914893614%;
}

.row-fluid .span3 {
  width: 23.404255317%;
}

.row-fluid .span2 {
  width: 14.89361702%;
}

.row-fluid .span1 {
  width: 6.382978723%;
}

.container-fluid:before, .container-fluid:after {
  display: table;
  content: '';
}

.container-fluid:after {
  clear: both;
}

@media (max-width: 767px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: '';
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.762430939%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*='span']:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 99.999999993%;
  }

  .row-fluid .span11 {
    width: 91.436464082%;
  }

  .row-fluid .span10 {
    width: 82.87292817100001%;
  }

  .row-fluid .span9 {
    width: 74.30939226%;
  }

  .row-fluid .span8 {
    width: 65.74585634900001%;
  }

  .row-fluid .span7 {
    width: 57.182320438000005%;
  }

  .row-fluid .span6 {
    width: 48.618784527%;
  }

  .row-fluid .span5 {
    width: 40.055248616%;
  }

  .row-fluid .span4 {
    width: 31.491712705%;
  }

  .row-fluid .span3 {
    width: 22.928176794%;
  }

  .row-fluid .span2 {
    width: 14.364640883%;
  }

  .row-fluid .span1 {
    width: 5.801104972%;
  }
}

@media (min-width: 1280px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: '';
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*='span'] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.564102564%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*='span']:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 100%;
  }

  .row-fluid .span11 {
    width: 91.45299145300001%;
  }

  .row-fluid .span10 {
    width: 82.905982906%;
  }

  .row-fluid .span9 {
    width: 74.358974359%;
  }

  .row-fluid .span8 {
    width: 65.81196581200001%;
  }

  .row-fluid .span7 {
    width: 57.264957265%;
  }

  .row-fluid .span6 {
    width: 48.717948718%;
  }

  .row-fluid .span5 {
    width: 40.170940171000005%;
  }

  .row-fluid .span4 {
    width: 31.623931624%;
  }

  .row-fluid .span3 {
    width: 23.076923077%;
  }

  .row-fluid .span2 {
    width: 14.529914530000001%;
  }

  .row-fluid .span1 {
    width: 5.982905983%;
  }
}

/* Clearfix */

.clearfix:before, .clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

/* Visibilty classes */

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none;
  visibility: hidden;
}

.relative {
  position: relative;
}

/* Responsive visibilty classes */

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }

  .hidden-phone {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1139px) {
  .visible-tablet {
    display: inherit !important;
  }

  .hidden-tablet {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important;
  }
}
.content-wrapper {
  margin: 0 auto;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body<, <h1>, <a>, <p>, <button> etc.)
*/

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/
body{
    background-color: #f2f5fa;
}

.content-wrapper {
max-width: 100%;
}

.uppercase{
    text-transform: uppercase;
}
.fullWidth {
    width: 100%;
}

.header-spacer-above{
    height: 32px;
    margin: 0px;
}
.header-spacer-below{
    height: 32px;
    margin: 0px;
}

.element-spacer{
    height: 32px;
    margin: 0px;
}

.element-spacer-small{
    height: 16px;
    margin: 0px;
}

.border-radius-4 {
    border-radius: 4px !important;
}

.padding-n {
    padding: 0px !important;
}

.padding-top-16 {
    padding-top: 16px !important;
}

.padding-bottom-16 {
    padding-bottom: 16px !important;
}

.margin-b-5{
    margin-bottom: 5px !important;
}
.margin-b-10{
    margin-bottom: 10px !important;
}
.margin-b-15{
    margin-bottom: 15px !important;
}
.margin-b-20{
    margin-bottom: 20px !important;
}

.margin-t-5{
    margin-top: 5px !important;
}

.margin-l-10{
    margin-left: 10px !important;
}

.margin-r-5{
    margin-right: 5px !important;
}

.margin-r-10{
    margin-right: 10px !important;
}

.margin-r-15{
    margin-right: 15px !important;
}

.isHidden{
    display:none;
}

.qs-dk-background{
    background-color: #2e599f;
}

.qs-lt-background{
    background-color: #b9cfec;
}

.qs-white-background{
    background-color: #FFFFFF;
}

.qs-cream-background {
    background-color: #FDE5B6 !important;
}

.qs-portal-background {
    background-color: #F1F5FB !important;
}

h1{
    font-family: Red Hat Display, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 52px;
}

h2{
    font-family: Red Hat Display, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
}

h3{
    font-family: Red Hat Display, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
}

h4{
    font-family: Red Hat Display, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}

h5{
    font-family: Red Hat Display, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

h6{
    font-family: Red Hat Display, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

p {
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin:0px;
}

.text-white {
    color: #FFFFFF !important;
}

.text-dark {
    color: #1D1D1B;
}

.text-light {
    color: #797979;
}

.hr-line{
    width: 100%;
    height: 1px;
    background-color: #EDEDED;
    margin: 16px auto 16px auto;
}

.div-align-right{
    display: flex !important;
    justify-content: right;
}

.div-align-center{
    display: flex !important;
    justify-content: center;
}

.flex-align-start{
    align-items: flex-start !important;
}

.qs-button-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    gap: 16px;
    background-color: #F7A70D;
    border-radius: 4px;
    border: 0px;
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #1D1D1B;
}

.qs-button-cta-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    gap: 16px;
    background-color: #F7A70D;
    border-radius: 4px;
    border: 0px;
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1D1D1B;
}

.qs-button-cta.fixed-width-cta {
    width: 318px;
}

.top-padding-0 {
    padding-top: 0px !important;
}

.top-padding-16 {
    padding-top: 16px !important;
}

.float-right{
    float: right !important;
}

.footer{
    border-top: 4pt SOLID #F7A70D;
    height: 244px;
    background-color: #FFFFFF;
    padding: 40px 0px 40px 0px;
}

.footer-row{
    display: flex;
}

.footer-links-col{
    width: calc(100% - 320px);
}

.footer-social-col{
    width: 320px;
    display: flex;
    justify-content: flex-start;
    margin-top: -15px;
}

.footer-links-col span {
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-right:30px;
}

.footer-links-col ul{
    display:flex;
    margin: 0;
    padding: 0;
}

.footer-links-col ul > li {
    list-style: none;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-right:30px;
    text-transform: uppercase;
}

.footer-social-col ul{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer-social-col ul > li {
    list-style: none;
    font-size: 40px;
    margin-right:5px;
}

.footer-social-col ul li a {
    text-decoration: none;
    color: #f7a70d;
}
.footer-social-col ul li a.facebook:hover {
    color: #1877f2;
}

.footer-social-col ul li a.twitter:hover {
    color: #1DA1F2;
}

.footer-social-col ul li a.linkedin:hover {
    color: #0a66c2;
}

.footer-social-col ul li a.youtube:hover {
    color: #ff0000;
}

.footer-social-col ul li a.instagram:hover {
    color: #c32aa3;
}

/* inner action buttons */
.inner-action-button{
    background-color: #b9cfec;
    color: #2e599f;
    height: 36px;
    border: 0px;
    border-radius: 4px;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    padding-left: 16px;
    padding-right: 16px;
}

/* slider overwrites */
.slick-dots li {
    width: 50px !important;
}

.cleanLink{
    text-decoration: none !important;
    border-bottom: 0px !important;
}
.addFlexBox {
    display: flex;
}

.flexGrowOne{
    flex-grow: 1;
}

.flexDirectionRow{
    flex-direction: row;
}

.flexDirectionColumn{
    flex-direction: column;
}

.flexAdd10pxGap{
    gap: 10px;
}

.flexAdd20pxGap{
    gap: 20px;
}

.flexJustifyLeft{
    justify-content: flex-start !important;
}

.fontWeight500{
    font-weight: 500 !important;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.text-red{
    color: #B00020 !important;
}

@media (max-width: 768px) {
    .qs-button-cta.fixed-width-cta-mobile {
        width: 100% !important;
    }
}
.header {
    padding: 10px;
    background-color: #FFFFFF;
}

.logout-button{
    background-color: #000000;
    border: 1pt SOLID #FFFFFF;
    border-radius: 5pt;
    padding: 5pt;
    color: #FFFFFF;
    width: 100px;
    float: right;
    margin-right: 20px;
    display:none;
}
.qs-menu{
    height: 44px;
    /*margin-top: -44px;*/
    box-shadow: 0px 4px 4px rgba(29, 29, 27, 0.16);
    position: sticky;
    top: 0;
}

.qs-menu .content-container{
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 100%;
}

.qs-menu .content-container a{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    height: 44px;
    display: flex;
    align-items: center;
    padding-right: 16px;
    padding-left: 16px;
    text-decoration: none;
}

.sticky {
    position: fixed !important;
    display: inline !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    margin-top: 0px !important;
}

@media (max-width: 768px) {
    .qs-menu .content-container {
        overflow: scroll;
    }

    .qs-menu .content-container a {
        flex-shrink: 0;
    }
}
.qs__hero{
    width: 100%;
    min-height: 250px;
    position: relative!important;
    z-index: 0;
    background-color: #456ca9;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex!important;
    flex-wrap: wrap;
    padding:32px;
    flex-direction: column;
}

.qs__hero.discover, .qs__hero.connect, .qs__hero.both, .qs__hero.wil, .qs__hero.studentapply, qs__hero.discoverNoImage, .qs__hero.connectNoImage, .qs__hero.bothNoImage, .qs__hero.studentapplyNoImage{
    width: 100%;
    height: 310px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0px;
    background-color: white !important;

}

qs__hero.discoverNoImage, .qs__hero.connectNoImage, .qs__hero.bothNoImage, .qs__hero.studentapplyNoImage{
    height: 150px !important;
}

.qs__hero.discover::after, .qs__hero.both::after {
    content: "";
    background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/qs_discover_hero_hires.svg'), url('https://info.topuniversities.com/hubfs/landing%20page%20svgs/QS-white.png');
    background-position: right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1300px;
    margin: auto;
}

.qs__hero.connect::after {
    content: "";
    background-image: url('https://info.topuniversities.com/hubfs/landing%20page%20svgs/hero-header-person-image-connect-v3.png'), url('https://info.topuniversities.com/hubfs/landing%20page%20svgs/QS-white.png');
    background-position: right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1300px;
    margin: auto;
}

.qs__hero.wil::after {
    content: "";
    background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/wil_hero_banner.svg'), url('https://info.topuniversities.com/hubfs/landing%20page%20svgs/QS-white.png');
    background-position: right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1300px;
    margin: auto;
    background-size: 22%, auto;
}

.qs__hero.studentapply::after {
    content: "";
    background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/astronaut%20woman.png'), url('https://info.topuniversities.com/hubfs/landing%20page%20svgs/QS-white.png');
    background-position: right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 1300px;
    margin: auto;
    background-size: 40%, auto;
}

.qs__hero .content-container{
    max-width: 1110px;
    margin-bottom: 0px;
    z-index: 999;
}

.qs__hero .hero-header{
    color: #1D1D1B;
    font-size: 44px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
}

.qs__hero.discover .gradient-overlay, .qs__hero.both .gradient-overlay, .qs__hero.wil .gradient-overlay, 
.qs__hero.discoverNoImage .gradient-overlay, .qs__hero.bothNoImage .gradient-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #F76000 0%, #FECC01 100%);
}

.qs__hero.connect .gradient-overlay, .qs__hero.connectNoImage .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(360deg, #739ED9 0%, #174794 100%);
}

.qs__hero.studentapply .gradient-overlay, .qs__hero.studentapplyNoImage .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(360deg, #FFCC01 0%, #F7A70D 100%);
}

.qs__hero .hero-subheader{
    color: #1D1D1B;
    font-size: 20px;
    font-family: "Red Hat Display", sans-serif;
    line-height: 28px;
}

.qs__hero .hero-black-header{
    background-color: #1D1D1B;
    height: 96px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    margin-top: 24px;
    padding-left: 48px;
}

.qs__hero h2{
    color: white;
    font-size: 32px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 500;
    line-height: 48px;
}

.ticket-area{
    background: WHITE;
    max-width: 1100px;
    margin: auto;
    padding: 16px 48px 0px 48px;
    position: relative;
}

.ticket-area.bottom{
    background: WHITE;
    max-width: 1100px;
    margin: auto;
    border-radius: 0 0 10px 10px;
    padding: 0px 48px 12px 48px;
}

.qs__hero-separator hr {
    margin: 0px 10px 0px 10px;
    border:none;
    background-image: linear-gradient(90deg,#3e3c3c 80%,#fff 20%);
    background-size: 15px 2px;
    height:1px;
}

.qs__hero-separator .dash-wrapper{
    background: WHITE;
    margin-right: 10px;
    margin-left: 10px;
}

.qs__hero-separator .single-border-top{
    height: 15px;
    padding: 10px;
    background:-moz-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -moz-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background:-o-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -o-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -webkit-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background-position:left bottom, right bottom;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-top:-2px;

}

.qs__hero-separator .single-border-bottom-white{
    height: 10px;
    padding: 5px;
    background:-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background:-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background:-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background-position:right top, left top;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-bottom:-2px;
}

.qs__hero-separator .single-border-bottom-lt-blue{
    height: 15px;
    padding: 10px;
    background:-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background:-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background:-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background-position:right top, left top;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-bottom:-2px;
}

.ticket-area .container {
    display: flex;
    gap: 20px;
}

.ticket-area .column {
    flex-basis: 25%;
    padding: 10px;
}

.ticket-area .column-medium,   .column-medium{
    flex-basis: 35%;
    padding: 10px;
}

.ticket-area .column-small, .column-small{
    flex-basis: 15%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.column-20{
    flex-basis: 20%;
    padding: 10px;
}

.column-40{
    flex-basis: 40%;
    padding: 10px;
}

.column-60{
    flex-basis: 60%;
    padding: 10px;
}

.column-80{
    flex-basis: 80%;
    padding: 10px;
}

.ticket-area .fifty-column, .fifty-column {
    flex-basis: 50%;
}

.ticket-area .third-column, .third-column {
    flex-basis: 50%;
}

.event-label{
    color: #5D5D5B;
    font-size: 16px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 500;
    line-height: 24px;
}

.event-label-value{
    color: #1D1D1B;
    font-size: 24px;
    font-family: "Red Hat Display", sans-serif;
    line-height: 36px;
}

.event-label-subvalue{
    color: #797979;
    font-size: 16px;
    font-family: "Red Hat Text", sans-serif;
    line-height: 24px;
}

.flex-add-column{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
}

.timer-text{

    color: #343432;
    font-size: 24px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    line-height: 36px;
}

.event-label-value-red{
    color: #B00020;
    text-align: right;
    font-size: 16px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 500;
    line-height: 24px;
}

.thin{
    font-weight: 300;
}

.addLeftMargin{
    margin-left: 16px;
}

.addLeftMarginSmall{
    margin-left: 8px;
}

.input-container {
    display: flex;
    align-items: center;
    width: 370px;
    border: 1px solid #ccc;
    border-radius: 5px;
    justify-content: flex-end;
    padding: 0px;
}

.input-text-field {
    flex: 1;
    border: none;
    padding: 5px;
    border-radius: 5px 0 0 5px;
    height: 46px;
}

.input-button {
    padding: 12px 16px;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background: #F7A70D;
    color:  #1D1D1B;
    text-align: center;
    font-size: 16px;
    font-family: "Red Hat Text", sans-serif;
    font-weight: 500;
    line-height: 24px;
    width: 140px;
    height: 46px;
}

.justifyFlexEnd{
    justify-content: flex-end;
}

.event-label-value-col1{
    display: none;
}

.event-label-value-col2{
    padding-left: 0px;
}

.event-label-value-col3{
    padding-left: 0px;
}

.addDesktopTopmargin{
    margin-top: 10px;
}

.hideDesktop{
    display: none !important;
}

.hideMobile{
    display: inline !important;
}



@media (max-width: 768px) {

    .smallerMobileHeader{
        font-size: 20pt !important;
        line-height: 24pt !important;
    }

    .addDesktopTopmargin{
        margin-top: 0px;
    }

    .qs__hero.connect .gradient-overlay {
        /*background: linear-gradient(135deg, rgba(23, 71, 148, 0.72) 0%, rgba(115, 158, 217, 0.72) 33.78%, rgba(115, 158, 217, 0.54) 68.76%, rgba(23, 71, 148, 0.72) 100%); */
    }

    .qs__hero.discover .gradient-overlay, .qs__hero.both .gradient-overlay {
       /* background: linear-gradient(135deg, rgba(247, 96, 0, 0.72) 0%, rgba(254, 204, 1, 0.72) 33.78%, rgba(254, 204, 1, 0.54) 68.76%, rgba(247, 96, 0, 0.72) 100%); */
    }

    .qs__hero.discover::after {
        background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/qs_discover_hero_hires.svg');
        background-size: 50%;
        bottom: -90px;
        right: -60px;
    }

    .qs__hero.both::after {
        background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/qs_discover_hero_hires.svg');
        background-size: 40%;
        bottom: -90px;
        right: -60px;
    }

    .qs__hero.connect::after {
        background-image: url('https://qs.topuniversities.com/hubfs/landing%20page%20svgs/qs_connect_hero_hires_small_full_nolegs.png');
        /*background-size: 70%;
        bottom: -90px;*/
        right: -20px;
    }

    .qs__hero.studentapply::after {
        background-size: 60%;
    }

    .qs__hero .hero-subheader{
        max-width: 50%;
    }

    .qs__hero .hero-header{
        font-size: 32px;
        line-height: normal;
    }

    .qs__hero.both .hero-subheader{
        font-size: 18px;
    }

    .qs__hero.connect, .qs__hero.discover, .qs__hero.both {
        height: 220px;
    }

    .qs__hero h2{
        font-size: 24px;
        line-height: 20px;
    }

    .qs__hero .hero-black-header {
        height: 60px;
        margin-top: 16px;
        padding-left: 12px;
    }

    .ticket-area .container {
        gap: 0px;
        flex-direction: column;
    }

    .ticket-area, .ticket-area.bottom {
        padding: 16px;
        padding-top: 0px;
    }

    .ticket-area {
        padding: 16px;
        padding-bottom: 0px;
    }

    .hideMobile{
        display: none !important;
    }

    .hideDesktop{
        display: inline !important;
    }

    .event-label-value {
        font-size: 18px;
        line-height: normal;
    }

    .event-label-value {
        display: flex;
        flex-direction: row;
    }

    .event-label-subvalue {
        font-size: 12px;
        line-height: 16px;
    }

    .event-label-value-col1 {
        flex-basis: 30px;
        padding: 0px;
        display: flex;
        align-items: center;
    }

    .event-label-value-col2 {
        flex-basis: 130px;
        padding: 0px;
        display: flex;
        align-items: center;
    }

    .event-label-value-col3 {
        flex-basis: 200px;
        padding: 0px;
        display: flex;
        align-items: center;
    }

    .footer-links-col ul {
        flex-direction: column;
    }

    .addMobileFlex{
        display: flex;
    }

    .timer-text {
        font-size: 18px;
        line-height: 24px;
    }

    .mobileTimerWidth{
        width: 24px;
        height: 24px;
    }

}
.event-area{
    display: flex;
    align-items: stretch;
}

.event-information-holder{
    display: flex;
    align-items: stretch;
    flex-grow:1;
    gap: 10px;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
}

.event-information-holder-booking-portal{
    display: flex;
    align-items: stretch;
    flex-grow:1;
    gap: 10px;
}

.body-flex{
    display: flex;
    align-items: stretch;
    flex-grow:1;
    gap: 20px;
}
.body-flex .body{
    flex-grow: 1;
}

.body-flex .event-section{
    flex-grow: 1;
    flex-basis: 50%;
}

.two-sections .bottom-radius{
    border-radius: 0px 0px 20px 0px;
}

.two-sections .bottom-radius-two {
    border-radius: 0 0px 0 20px;
}

.two-sections .qs-button-cta.fixed-width-cta {
    width: 100% !important;
}

@media (max-width: 850px) {
    .event-information-holder-booking-portal {
        flex-direction: column;
    }

    .addMobileColumn{
        flex-direction: column;
    }

    .mobileSmallFont{
        font-size: 16pt;
    }
}
.agenda-information-card{

}

.agenda-day-link {
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.pill-div {

}

.pill-div.one-column{
    min-width: 32px;
    margin-right: 16px;
}

.pill-div.half-column{
    min-width: 20px;
    margin-right: 16px;
}

.pill-div .pill.fullHeight{
    height: 100%;
}

.date-div {
    flex-basis: 24%;
}

.time-div {
    flex-basis: 33%;
}

.location-div {
    flex-basis: 40%;
}

.two-sections .date-div {
    flex-grow: 1 !important;
}

.two-sections .time-div {
    flex-grow: 1 !important;
}

.two-sections .location-div {
    flex-grow: 1 !important;
}

.pill-div .pill {
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.pill-div .pill.roundPill{
    border-radius: 999px !important;
}

.pill-div .pill.padding {
    padding: 8px 16px 8px 16px;
}



.pill-div .personal {
    border: 1px SOLID #179900;
    background-color: #F0FEE8;
    color: #179900;
}


.pill-div .networking{
    border: 1px SOLID #754cf6;
    background-color: #f3f1fe;
    color: #754cf6;
}

.pill i{
    margin-left: 10px;
}

@media (max-width: 768px) {
    .pill-mobile {
        height: 24px !important;
        font-size: 12px !important;
        padding: 3px !important;
        border-radius: 4px !important;
    }
}
.content-container {
    width: 1110px;
    margin: auto;
    margin: auto;
}

.qs-card{
    border-radius: 20px;
    overflow: hidden;
    padding: 0px;
    position: relative;
    /*background-color: #FFFFFF;*/
}

.qs-card.smallRadius{
    border-radius: 4px;
}

.qs-card .body.bg-fill-blue {
    background-color: #456CA9 !important;
    color: #FFFFFF;
}

.qs-card .body.bg-fill-cream {
    background-color: #FDE5B6 !important;
}

.qs-card .body.bg-fill-blue-lt {
    background-color: #D5E2F4 !important;
}

.qs-card.fullWidth {
    width: 100% !important;
}

.qs-card.fullHeight {
    height: 100% !important;
}

.qs-card.moveUp {
    position:relative;
    top: -100px;
}

.qs-card.moveUpHigher {
    position:relative;
    top: -100px;
    margin-bottom: -150px;
}

.qs-card.default .header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    height: 100px;
    padding: 0px 32px 0px 32px;
    color: #FFFFFF;
    font-family: Red Hat Text, sans-serif;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 52px;
}

.qs-card.default .program-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    height: 24px;
    background: #D5E2F4;
    border: 1px solid #739ED9;
    border-radius: 4px 4px 0px 0px;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.qs-card .body {
    padding: 32px;
    background-color: #FFFFFF;
}

.qs-card .halfPadding {
    padding: 16px;
}

.qs-card.withShadow, .qs-card .withShadow{
    box-shadow: 0px 4px 4px rgba(29, 29, 27, 0.16);
}

.qs-card .addFlexBox {
    display: flex;
}

.qs-card .addFlexBox.addLogoGap {
    gap: 16px;
}

.qs-card .addFlexBox.add10Gap {
    gap: 10px;
}

.addFlexAlignCenter{
    align-content: center;
    align-items: center;
}

.qs-card .addFlexBoxColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center;

}

.qs-card .addFlexBoxColumnLeftAlign {
    display: flex;
    flex-direction: column;
    text-align:left;

}

.card_logo_div{
    width: 80px;
}

.card_logo_div.medium{
    width: 60px;
}


.card_logo_div.small{
    width: 48px !important;
}

.bookingPortalParticipants .card_logo_div{
    width: 60px;
}

.card_logo_div img{
    width: 100%;
}

.card_name_div{
    width: calc(100% - 80px);
    display:flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.addLogoGap{
    gap: 10px;
}

.card_name_div.usp{
    font-size: 11pt;
    line-height: 16pt;
    font-weight: 300;
}

.country-div{
    display:flex;
    flex-direction: row;
    gap: 10px;
    margin-top:5px;
}

.card_logo_div.small{
    width: calc(100% - 48px);
    display:flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.bookingPortalParticipants .card_name_div .name-div p {
    font-family: 'Red Hat Display', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #1D1D1B;
}

.qs-card-separator-v3 .single-border-bottom-lt-blue{
    height: 15px;
    padding: 10px;
    background:-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background:-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background:-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 6px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 10px, #FFFFFF 11px);
    background-position:right top, left top;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-bottom:-2px;
}

.qs-card-separator-v3 hr {
    margin: 0px 10px 0px 10px;
    border:none;
    border-top: 2px SOLID #B9CFEC;
    background-color:#fff;
    height:0px;
}

.qs-card-separator-v3 .single-border-top{
    height: 15px;
    padding: 10px;
    background:-moz-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -moz-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background:-o-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -o-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 6px), -webkit-radial-gradient(100% 100%, circle, rgba(0,0,0,0) 10px, #FFFFFF 11px);
    background-position:left bottom, right bottom;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-top:-2px;

}

.qs-card-separator-v3 .single-border-bottom-white{
    height: 10px;
    padding: 5px;
    background:-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background:-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background:-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 5px, #FFFFFF 6px);
    background-position:right top, left top;
    -moz-background-size:51% 100%;
    -webkit-background-size:51% 100%;
    background-size:51% 100%;
    background-repeat:no-repeat;
    margin-bottom:-2px;
}

.info-cards-title-margin {
    margin-top: 16px;
    margin-bottom: 16px;
}

.card_col {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    margin:0 -10px;
}


.cards__card {
    align-items: stretch;
    align-self: flex-start;
    /*flex: 1 0 32%;*/
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
    padding:0 10px;
    flex-basis: calc(33.33% - 0px);
}

.cards__card_four {
    align-items: stretch;
    align-self: flex-start;
    /*flex: 1 0 32%;*/
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
    padding:0 10px;
    flex-basis: calc(25% - 0px);
}

.cards__card:last-child {
    flex-grow: 1;
}

.usp_card{
    background-color: white;
    height: 80px;
    margin: 0px 20px;
    border: 1pt SOLID #1d1d1b;
    border-radius: 3px;
    padding: 10px;
}

.qs-card .body a {
    color: #1d1d1b;
    text-decoration: none;
    border-bottom: 2px solid #1d1d1b;
}

.qs-card .agendaPadding{
    padding: 32px 40px 32px 40px;
}

.qs-card .side-bar{
    width: 8px;
    border-radius: 4px;

}

.qs-card .side-bar.personal{
    background-color: #56BB37;
}

.qs-card .side-bar.networking{
    background-color: #754cf6;
}

.qs-card .side-bar.panel{
    background-color: #407ec6;
}

.qs-card .side-bar.presentation{
    background-color: #c64040;
}

.agenda-body{
    padding: 32px 40px 32px 40px;
}

.show-only-mobile{
    display: none;
}

.show-only-desktop {
    display: block;
}

.specialisationList{
    padding: 8px 8px;
    background: #EDEDED;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #1D1D1B;
}

.small-country-text{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #797979;
}

@media (max-width: 480px) {
    .fixMobileButtonSize{
        padding: 0px !important;
    }

    .cards__card_four {
        flex-basis: 100%;
        margin-bottom: 0px;
    }
    .content-container {
        width: 95% !important;
        margin: auto;
        margin: auto;
    }

    .body-flex, .event-information-holder {
        flex-direction: column;
        gap: 0px;
    }

    .event-information-holder {
        flex-wrap: nowrap;
    }

    .two-sections .bottom-radius {
        border-radius: 0 0 0px 0;
    }
    .show-only-mobile{
        display: block;
    }

    .footer-row {
        flex-direction: column;
    }

    .show-only-desktop {
        display: none;
    }

    .date-div, .time-div {
        margin-bottom: 16px;
    }

    .pill-div.one-column {
        width: 5px;
        min-width: 5px;
        max-width: 5px;
        margin-right: 16px;
    }

    .cards__card {
        flex: 1 0 100%;
    }

    .slick-dots {
        bottom: -35px !important;
    }

    .card_col {
        gap: 16px;
    }

    .footer {
        height: auto;
    }

    .footer-links-col ul>li {
        font-size: 12px;
        margin-right: 19px;
    }

    .footer-links-col {
        width: 95%;
    }
    .qs-card .addFlexBox {
        gap: 16px;
    }

    .fix-float-left-on-mobile {
        float:left !important;
    }

    .addColumnOnMobile{
        flex-direction: column;
    }

    .qs-card .agendaPadding {
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {

    .addMobileBottomMargin{
        margin-bottom: 32px;
    }

    .fixMobileButtonSize{
        padding: 0px !important;
    }

    .cards__card_four {
        flex-basis: 100%;
        margin-bottom: 0px;
    }

    .content-container {
        width: 95% !important;
        margin: auto;
        margin: auto;
    }

    .body-flex, .event-information-holder {
       flex-direction: column;
        gap: 0px;
    }

    .event-information-holder {
        flex-wrap: nowrap;
    }

    .two-sections .bottom-radius {
        border-radius: 0 0 0px 0;
    }
    .show-only-mobile{
        display: block;
    }

    .footer-row {
        flex-direction: column;
    }

    .show-only-desktop {
        display: none;
    }

    .date-div, .time-div {
        margin-bottom: 16px;
    }

    .pill-div.one-column {
        width: 5px;
        min-width: 5px;
        max-width: 5px;
        margin-right: 16px;
    }


    .slick-dots {
        bottom: -35px !important;
    }

    .card_col {
        gap: 16px;
    }

    .footer {
        height: auto;
    }

    .footer-links-col ul>li {
        font-size: 16px;
        margin-right: 24px;
    }

    .footer-links-col {
        width: 95%;
    }


}
.mini-event-row{
    display: flex;
    gap: 10px;
}

.mini-event-col{
    width: calc(100% - 320px);
}

.mini-event-register-col{
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mini-event-register-col-thinner{
    width: 200px !important;
}

.sticky-bottom {
    position: fixed !important;
    display: inline !important;
    bottom: 0px !important;
    width: 100% !important;
    z-index: 999999 !important;
}
.body-flex .reg-form-side-bar{
    flex-grow: 1;
    flex-basis: 30%;
}

.body-flex .reg-form-section{
    flex-grow: 1;
    flex-basis: 70%;
}

.max-side-padding{
    padding-left: 158px;
    padding-right: 158px;
}

input::placeholder {
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-size: 16px;
    color: #797979;
}

.qs-card .body .form .qs-forgot-link{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #0A66C2 !important;
    text-decoration: none;
    border-bottom: 0px !important;
}

.small-text{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #797979;
}

.pill-slice {
    width: 100%;
    height: 5px;
    border-radius: 4px;
    margin-top: 12px;
}

.pill-slice.networking{
    background: #6F51ED;
}

.pill-slice.personal{
    background: #56BB37;
}

.form-check-input {
    width: 20px !important;
    height: 20px !important;
}

.form-check-input:checked {
    background-color: #0A66C2 !important;
    border-color: #0A66C2 !important;
}

.button350 {
    width: 350px;
    margin: auto;
}

.back-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    gap: 16px;
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #0A66C2;
    font-family: "Red Hat Text", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #0A66C2;
}

.born-month-col{
    flex-grow: 1;
}

.born-year-col{
    flex-grow: 1;
}


.country-code-col{
    flex-grow: 1;
    flex-basis: 35%;
}

.phone-number-col{
    flex-grow: 1;
    flex-basis: 65%;
}

.progress-pills-div{
    margin-right:16px;
    margin-left: 16px;
}

.progress-pill {
    width: 100%;
    height: 8px;
    box-shadow: 0px 4px 4px rgba(29, 29, 27, 0.16);
    border-radius: 15px;
}

.progress-pill.complete {
    background: #179900;
}

.progress-pill.inprogress{
    background: #FFFFFF;
    border: 1px solid #179900;
}

.progress-pill.notstarted{
    background: #FFFFFF;
}

.progress-text{
    margin-right:16px;
    margin-left: 16px;
}

.progress-small-text {
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1D1D1B;
}

.selection{
    justify-content: center;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #A5A5A4;
    border-radius: 4px;
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #797979;
}

.selection.selected{
    border: 1px solid #0A66C2;
    color: #0A66C2;
    background-color: #2e599f33;
}

.showPointer{
    cursor: pointer;
}

.event-return-link{
    font-family: 'Red Hat Text', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    cursor: pointer;
}

.field-error{
     border: 1px solid #ff0000 !important;
}

.field-error-text{
    color: #ff0000 !important;
    margin-top: 5pt;
    font-size:0.75rem;
    display:none;
}

.error-message-alert{
    background-color: #fbe2e2;
    padding: 8px;
    font-size: 0.8rem;
    border: 1pt SOLID #ff0000;
    border-radius: 5pt;
    color: #ff0000;
    text-align: center;
    font-weight: 700;
    display:none;
}

/* multi select css changes */
.ss-main .ss-multi-selected .ss-add {
    display: none !important;
}

.ss-main .ss-multi-selected {
    border: 0px !important;
    min-height: calc(3.5rem + 2px) !important;
}

.ss-content {
    left: 0px !important;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    max-height: 30px !important;
}

.ss-main .ss-multi-selected .ss-values .ss-disabled {
    align-items: flex-start !important;
    color: #000000 !important;
    opacity: 0.8 !important;
    font-size: 0.75rem !important;
}

.infoBox{
    padding: 5px;
    background-color: #f3f2f2;
    border: 1pt SOLID #888888;
    border-radius: 5px;
    margin-bottom: 16px;
}

.infoBox p{
    font-size: 12pt;
    line-height: 24px;
}

@media (max-width: 767px) {
    .max-side-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}
.event-header-h4{
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #5D5D5B;
}

.invite-section{
    flex-grow: 3;
    display: flex;
    flex-direction: column;
}

.bookings-section{
    flex-grow: 1;
    max-width: 350px;
    min-width: 350px;
}

.dashed-card {
    /*background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/
    padding: 24px;
    display: inline-block;
    width: 100%;
    border: 1px DASHED #9A9A99;
    border-radius: 4px;
}

.booked-card{
    display: flex;
    width: 100%;
    flex-direction: column;
}

.dashed-card-small {
    /*background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");*/
    padding: 16px;
    display: inline-block;
    width: 100%;
    border: 1px DASHED #9A9A99;
    border-radius: 4px;
}

.dashed-card-small p {
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #5D5D5B;
}

.timeslots-main-div{
    border: 1px solid #5D5D5B;
    padding: 16px 24px;
    border-radius: 4px;
}

.timeslots-main-div.selected{
    border: 1pt SOLID #0A66C2;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
}

.timeslots-div{
    display: flex;
    align-items: stretch;
    flex-grow:1;
    gap: 5px;
}

.timeslots-div .timeslots{
    display: flex;
    align-items: stretch;
    flex-grow:1;
    gap: 5px;
}

.timeslots-div .timeslots .slot {
    background-color: #EDEDED;
    border: 1pt SOLID #DBDBDB;
    border-radius: 100px;
    padding: 8px 16px;
    color: #343432;
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    display: flex;
     align-items: center;
}

.confirmed-date{
    background-color: #EDEDED;
    border: 1px solid #9A9A99;
    border-radius: 4px;
    padding: 8px 8px;
    opacity: 1;
}

.confirmed-date.calendar{
    width: 42px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.timeslots-main-div.selected .timeslots .slot{
    opacity: 1;
}

.timeslots-div .timeslots .slot.selected{
    background-color: #0A66C2;
    border: 1pt SOLID #0A66C2;
    color: WHITE;
    font-weight: 500;
}

.timeslots-button .qs-button-cta-small{
    opacity: 0.5;
}

.timeslots-main-div.selected .timeslots-button .qs-button-cta-small{
    opacity: 1;
}

.maximise-button-div{
    display:flex;
    justify-content: center;
    margin-top:-20px;
}

.qs-button-maximise{
    padding: 8px 16px;
    width: 159px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #A5A5A4;
    border-radius: 4px;
}

.confirmation-header{
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #1D1D1B;
}

.confirmation-header svg{
    color: #36BB1C;
    margin-right: 5px;
}

.confirmed-message{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px;
    background: #DAFBE4;
    border-radius: 4px;
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #1D1D1B;
}

.confirmed-message.large{
    font-size: 14px !important;
}

.confirmed-message .confirmed-email-link{
    text-decoration: none !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    color: #0A66C2 !important;
    border-bottom: 0px !important;
}

.opacityHalf{
    opacity: 0.5 !important;
}

.slot-button-div{
    display: flex;
    gap: 10px;
    align-items: center;
}

.calendar-link-booking {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.calendar-link-booking-small {
    display: flex;
    flex-direction: column;
}

.add-calendar-text{
    display:flex;
    justify-content: center;
    font-size: 12px;
    color: #0A66C2;
    margin-bottom: 5px;
}

.calendarSmall{
    width:16px !important;
    height: 16px !important;
    padding: 10px;
}

.specialisationList div a{
    color: #0A66C2 !important;
    border-bottom: 0px !important;
    cursor: pointer !important;
}

.calendar-link-bar{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.flexGrowOne{
    flex-grow: 1;
}

.flexGrowTwo{
    flex-grow: 2;
}

.invite-types-listing{
    display: flex;
    gap:10px;
}

.invite-types-listing .invite-type-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    background: #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #797979;
}

.slot-title{
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1D1D1B;
}

.slot-title span{
    font-weight: 400;
}

.notify-btn-div{
    justify-content: flex-end;
    display: flex;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}