/*-=-=-=-=-=[ GLOBAL CSS ]=-=-=-=-=-*/
/*
*   Title:          fonts.scss
*   Description:    This file is created to contain all font-face definitions for global.scss.
*/
@font-face {
  font-family: PermanentMarker;
  src: url("/css/fonts/PermanentMarker.ttf");
}
@font-face {
  font-family: GothamLight;
  src: url("/css/fonts/Gotham/Gotham-Light.otf") format("opentype");
}
@font-face {
  font-family: GothamMedium;
  src: url("/css/fonts/Gotham/Gotham-Medium.otf") format("opentype");
}
@font-face {
  font-family: GothamBold;
  src: url("/css/fonts/Gotham/Gotham-Bold.otf") format("opentype");
}
@font-face {
  font-family: GothamRndBold;
  src: url("/css/fonts/Gotham Rounded/GothamRnd-Bold.otf") format("opentype");
}
@font-face {
  font-family: GothamRndMedium;
  src: url("/css/fonts/Gotham Rounded/GothamRnd-Medium.otf") format("opentype");
}
@font-face {
  font-family: GothamRndLight;
  src: url("/css/fonts/Gotham Rounded/GothamRnd-Light.otf") format("opentype");
}
@font-face {
  font-family: Nunito;
  src: url("/css/fonts/Nunito/Nunito-Regular.ttf");
}
@font-face {
  font-family: NunitoLight;
  src: url("/css/fonts/Nunito/Nunito-Light.ttf");
}
@font-face {
  font-family: NunitoSemiBold;
  src: url("/css/fonts/Nunito/Nunito-SemiBold.ttf");
}
@font-face {
  font-family: NunitoBold;
  src: url("/css/fonts/Nunito/Nunito-Bold.ttf");
}
@font-face {
  font-family: RubikLight;
  src: url("/css/fonts/Rubik/Rubik-Light.ttf");
}
@font-face {
  font-family: RubikLight-Italic;
  src: url("/css/fonts/Rubik/Rubik-LightItalic.ttf");
}
@font-face {
  font-family: RubikRegular;
  src: url("/css/fonts/Rubik/Rubik-Regular.ttf");
}
@font-face {
  font-family: RubikMedium;
  src: url("/css/fonts/Rubik/Rubik-Medium.ttf");
}
@font-face {
  font-family: RubikMediumItalic;
  src: url("/css/fonts/Rubik/Rubik-MediumItalic.ttf");
}
@font-face {
  font-family: RubikItalic;
  src: url("/css/fonts/Rubik/Rubik-Italic.ttf");
}
@font-face {
  font-family: RubikBoldItalic;
  src: url("/css/fonts/Rubik/Rubik-BoldItalic.ttf");
}
@font-face {
  font-family: RubikBold;
  src: url("/css/fonts/Rubik/Rubik-Bold.ttf");
}
@font-face {
  font-family: RubikMedium;
  src: url("/css/fonts/Rubik/Rubik-Medium.ttf");
}
@font-face {
  font-family: OpenSans-Light;
  src: url("/css/fonts/OpenSans/OpenSans-Light.ttf");
}
@font-face {
  font-family: OpenSans-LightItalic;
  src: url("/css/fonts/OpenSans/OpenSans-LightItalic.ttf");
}
@font-face {
  font-family: OpenSans-Regular;
  src: url("/css/fonts/OpenSans/OpenSans-Regular.ttf");
}
@font-face {
  font-family: OpenSans-Italic;
  src: url("/css/fonts/OpenSans/OpenSans-Italic.ttf");
}
@font-face {
  font-family: OpenSans-SemiBold;
  src: url("/css/fonts/OpenSans/OpenSans-SemiBold.ttf");
}
@font-face {
  font-family: OpenSans-SemiBoldItalic;
  src: url("/css/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf");
}
@font-face {
  font-family: OpenSans-Bold;
  src: url("/css/fonts/OpenSans/OpenSans-Bold.ttf");
}
@font-face {
  font-family: OpenSans-BoldItalic;
  src: url("/css/fonts/OpenSans/OpenSans-BoldItalic.ttf");
}
@font-face {
  font-family: Roboto-Medium;
  src: url("/css/fonts/Roboto/Roboto-Medium.ttf");
}
#main-container,
#content {
  height: 100%;
}

/* BUTTON SIZES */
.btn {
  width: 100%;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: "Open Sans", "Helvetica Neue", "sans-serif";
  font-weight: 600;
  font-size: 16px;
  color: #FFF;
  text-shadow: none !important;
  text-align: center;
  box-shadow: none;
}
.btn.no-text-transform {
  text-transform: none;
}

.btn:hover {
  text-decoration: none;
  background-color: rgba(153, 153, 153, 0.2);
  border-color: transparent;
  outline: none;
  color: #fff;
  box-shadow: none;
}

.btn-danger:hover {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-small {
  height: 34px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: "Open Sans", "Helvetica Neue", "sans-serif";
  font-weight: 600;
  font-size: 14px;
  color: #FFF;
  text-shadow: none !important;
  text-align: center;
}
.btn-small.no-text-transform {
  text-transform: none;
}

/* FAB BUTTONS */
.btn-fab-primary {
  width: 100%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  padding: 0 24px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  font-family: nunito, sans-serif;
  letter-spacing: 2.4px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.btn-fab-primary:hover {
  text-decoration: none;
  box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);
}

/* FAB BTN COLORS */
.btn-fab-red {
  background: #EE4078;
}
.btn-fab-red:hover {
  background: #EE4078;
}

/* BUTTON COLORS */
.btn-blue {
  background-color: #2ABFFF;
}

.btn-blue:hover {
  color: #2abfff !important;
  background-color: rgba(153, 153, 153, 0.2) !important;
}

.btn-white {
  background-color: #fff;
  color: #2abfff;
}

.btn-white:hover {
  background-color: #2abfff;
  color: #fff;
}

.btn-grey {
  background-color: #868387;
}

.btn-grey:hover {
  color: #858386 !important;
  background-color: rgba(153, 153, 153, 0.2) !important;
}

.btn-light-grey {
  background-color: #FAFAFA;
  color: #000;
}

.btn-light-grey:hover {
  color: #FAFAFA !important;
  background-color: rgba(153, 153, 153, 0.2) !important;
}

.btn-red {
  background-color: #FF2A5B;
}

.btn-red:hover {
  background-color: #FF2A5B;
}

.btn-orange {
  background-color: #FFA832;
}

.btn-orange:hover {
  color: #FFA832 !important;
  background-color: rgba(153, 153, 153, 0.2) !important;
}

.btn-black {
  background-color: #2C2C2C;
}

.btn-black:hover {
  color: #2C2C2C !important;
  background-color: rgba(153, 153, 153, 0.2) !important;
}

.btn-transparent {
  background-color: transparent;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
.btn-transparent:hover {
  background-color: #2ABFFF;
  color: #ffffff;
}

.question-moderated-tag {
  color: #5FB968;
}
.question-moderated-tag .button-style {
  background-color: #5FB968;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px;
  color: #FFFFFF;
  border-radius: 4px;
}
.question-moderated-tag.small-icon .material-icons {
  font-size: 14px;
}

/* INPUT */
.input {
  height: 48px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 26px;
  background-color: #FFF;
  color: rgba(0, 0, 0, 0.54);
  font-family: "Open Sans", "Helvetica Neue", "sans-serif";
  padding: 5px 15px 5px 15px;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.6);
}

.input:active,
.input:focus {
  color: rgba(0, 0, 0, 0.87);
  border: 1px solid #2ABFFF;
  box-shadow: none;
}

.input-group-addon {
  background-color: transparent;
}

.input-box {
  border: 2px solid #fff;
  border-radius: 2px;
  padding: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.form-control {
  border-radius: 2px;
}

.has-error .form-control:focus {
  box-shadow: none;
}

/* Badges */
.outsource-pill {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  background-color: #AD4ABC;
  border-radius: 15px;
  text-align: center;
  width: 150px;
  font-weight: 600;
  height: 30px;
  cursor: pointer;
}
.outsource-pill.inline {
  display: inline;
  padding: 3px;
  font-size: 12px;
}
.outsource-pill.inline i {
  font-size: 12px;
}

.toastr-message {
  font-size: 12px;
}

/* Colors for classes */
.color-blueGray {
  background-color: #748F9C;
}

.color-indigo {
  background-color: #516BC0;
}

.color-teal {
  background-color: #09A59A;
}

.color-darkOrange {
  background-color: #FF6F3E;
}

.color-purple {
  background-color: #AD4ABC;
}

.color-amber {
  background-color: #FECA3C;
}

.color-green {
  background-color: #5FB968;
}

.color-pink {
  background-color: #EE4078;
}

.color-cyan {
  background-color: #17C7DB;
}

.color-blue {
  background-color: #1AB9F4;
}

.color-lime-green {
  background-color: limegreen;
}

/* Decorative forms */
.pretty-input {
  background-image: url("/img/icons/text-field-icons.png");
  background-repeat: no-repeat;
  background-position: right 14px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #c4c4c4;
  padding: 8px;
  height: 40px;
  -webkit-background-size: 40px 171px;
  -moz-background-size: 40px 171px;
  -o-background-size: 40px 171px;
  background-size: 40px 171px;
}

.pretty-input[type=email] {
  background-position: right -40px;
}

.pretty-input[type=password] {
  background-position: right -86px;
}

.pretty-input[type=tel] {
  background-position: right -138px;
}

.text-box {
  min-height: 144px !important;
}

.dropbox {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.dropbox img {
  height: 60px;
  padding-top: 5px;
  text-align: center;
}

.w100 {
  width: 100%;
}

.well {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  border-radius: 2px;
}

.material-icons {
  direction: ltr;
  display: inline-block;
  font-family: "Material Icons";
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* TYPOGRAPHY */
body {
  background-color: #F0F2F4;
  font-family: "Open Sans", "Helvetica Neue", "sans-serif";
}

h4, .p3 {
  font-weight: 600;
}

h1, h3 {
  font-weight: 700;
}

h2, .p1 {
  font-weight: 300;
}

h3, h4 {
  text-transform: uppercase;
}

h4, p, .p3 {
  font-size: 14px;
  line-height: 23px;
}

h1 {
  font-size: 32px;
  line-height: 43px;
}

h2 {
  font-size: 24px;
  line-height: 39px;
}

h3 {
  font-size: 18px;
  letter-spacing: 0.8px;
  line-height: 29px;
}

h4 {
  letter-spacing: 0.4px;
}

.p1 {
  font-size: 20px;
  line-height: 32px;
}

.caption {
  font-size: 12px;
  line-height: 19px;
}

.black-txt {
  color: #000;
}

.white-txt {
  color: #fff;
}

.blue-txt {
  white-space: nowrap;
  color: #2ABFFF;
}

.main-blue-txt {
  color: #1AB9F4 !important;
}

.red-txt {
  color: #f65d4d !important;
}

.green-txt {
  color: #5FB968 !important;
}

.purple-txt {
  color: #b16cac !important;
}

.deep-purple-txt {
  color: #7B58C1 !important;
}

.pink-txt {
  color: #FF2A5B !important;
}

.grey-txt {
  color: rgba(0, 0, 0, 0.54) !important;
}

.dark {
  color: rgba(0, 0, 0, 0.5);
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: bold !important;
}

.nowrap {
  white-space: nowrap;
}

.italic {
  font-style: italic;
}

/* Badges */
.badge {
  padding: 5px 10px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 10px;
  line-height: 1;
  text-align: center;
  cursor: default;
}
.badge i {
  margin-right: 3px;
}
.badge i.material-icons {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.badge.outsourced-question {
  background-color: #F6EBF7;
  color: #AD4ABC;
}
.badge.mod-alert {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.student-questions-new {
  background-color: #dff0d8;
  color: #3c763d;
}
.badge.student-questions-vip {
  background-color: #fcf8e3;
  color: #8a6d3b;
}
.badge.student-questions-super {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.question-budget-small {
  background-color: #dff0d8;
  color: #3c763d;
}
.badge.question-budget-medium {
  background-color: #fcf8e3;
  color: #8a6d3b;
}
.badge.question-budget-big {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.question-budget-huge {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.question-quality-baseline {
  background-color: #dff0d8;
  color: #3c763d;
}
.badge.question-quality-good {
  background-color: #fcf8e3;
  color: #8a6d3b;
}
.badge.question-quality-super {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.student-pickiness-not-picky {
  background-color: #dff0d8;
  color: #3c763d;
}
.badge.student-pickiness-very-picky {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.question-time-limit-asap {
  background-color: #F2DEDE;
  color: #a94442;
}
.badge.question-time-limit-normal {
  background-color: #fcf8e3;
  color: #8a6d3b;
}
.badge.question-time-limit-take-time {
  background-color: #dff0d8;
  color: #3c763d;
}
.badge.student-pro {
  background-color: #17C8DB;
  color: white;
}
.badge.student-no-pro {
  background-color: white;
  color: black;
}
.badge.tutor-question-surge {
  background-color: #ED4078;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 10px !important;
}
.badge.tutor-question-surge i.material-icons {
  font-size: 12px !important;
  vertical-align: bottom !important;
}
.badge.user-friendship-relation {
  padding: 2px 6px !important;
  background-color: rgba(0, 0, 0, 0);
  color: #1AB9F4;
  vertical-align: top;
}
.badge.user-friendship-relation i.material-icons {
  font-size: 16px !important;
  vertical-align: bottom !important;
  margin-right: 0px;
}
.badge.user-tutor-relation {
  background-color: #FFBB00;
}
.badge.user-tutor-friends {
  background-color: #1AB9F4;
}
.badge.user-tutor-invited {
  background-color: #1AB9F4;
  color: #FFFFFF;
}
.badge.outsource-icon {
  display: inline-block;
  color: #FFFFFF;
  height: 22px;
  width: 22px;
  border-radius: 100%;
  border: solid white 2px;
  padding: 2px;
}
.badge.outsource-icon.purpleWrapper {
  background-color: #AD4ABC;
}
.badge.outsource-icon .material-icons {
  font-size: 14px;
}

/* SPACING */
.margin-top-xs {
  margin-top: 5px;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-left-xs {
  margin-left: 5px;
}

.margin-bottom-xs {
  margin-bottom: 5px;
}

.padding-top-xs {
  padding-top: 5px;
}

.padding-right-xs {
  padding-right: 5px;
}

.padding-left-xs {
  padding-left: 5px;
}

.padding-bottom-xs {
  padding-bottom: 5px;
}

.margin-top-s {
  margin-top: 15px;
}

.margin-right-s {
  margin-right: 15px;
}

.margin-left-s {
  margin-left: 15px;
}

.margin-bottom-s {
  margin-bottom: 15px;
}

.padding-top-s {
  padding-top: 15px;
}

.padding-right-s {
  padding-right: 15px;
}

.padding-left-s {
  padding-left: 15px;
}

.padding-bottom-s {
  padding-bottom: 15px;
}

.margin-top-m {
  margin-top: 30px;
}

.margin-right-m {
  margin-right: 30px;
}

.margin-left-m {
  margin-left: 30px;
}

.margin-bottom-m {
  margin-bottom: 30px;
}

.padding-top-m {
  padding-top: 30px;
}

.padding-right-m {
  padding-right: 30px;
}

.padding-left-m {
  padding-left: 30px;
}

.padding-bottom-m {
  padding-bottom: 30px;
}

.margin-top-l {
  margin-top: 60px;
}

.margin-right-l {
  margin-right: 60px;
}

.margin-left-l {
  margin-left: 60px;
}

.margin-bottom-l {
  margin-bottom: 60px;
}

.padding-top-l {
  padding-top: 60px;
}

.padding-right-l {
  padding-right: 60px;
}

.padding-left-l {
  padding-left: 60px;
}

.padding-bottom-l {
  padding-bottom: 60px;
}

.margin-top-xl {
  margin-top: 90px;
}

.margin-right-xl {
  margin-right: 90px;
}

.margin-left-xl {
  margin-left: 90px;
}

.margin-bottom-xl {
  margin-bottom: 90px;
}

.padding-top-xl {
  padding-top: 90px;
}

.padding-right-xl {
  padding-right: 90px;
}

.padding-left-xl {
  padding-left: 90px;
}

.padding-bottom-xl {
  padding-bottom: 90px;
}

.no-padding-left {
  padding-left: 0;
}

.no-padding-right {
  padding-right: 0;
}

.no-margin-top {
  margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.no-margin {
  margin: 0;
}

.no-border-left {
  border-left: none !important;
}

.no-border-right {
  border-right: none !important;
}

.no-border-top {
  border-top: none !important;
}

.no-border-bottom {
  border-bottom: none !important;
}

@media (min-width: 768px) {
  /*for medium, guarantee 80px padding (normally 18)*/
  .padding-left-intelligent {
    padding-left: 30px;
  }

  .padding-right-intelligent {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  /*for medium, guarantee 100px padding (normally 22)*/
  .padding-left-intelligent {
    padding-left: 60px;
  }

  .padding-right-intelligent {
    padding-right: 60px;
  }
}
@media (min-width: 1200px) {
  /*for large, guarantee 150px padding (normally 30)*/
  .padding-left-intelligent {
    padding-left: 90px;
  }

  .padding-right-intelligent {
    padding-right: 90px;
  }
}
/**
* Helper class
**/
.pointer {
  cursor: pointer !important;
}

.teal-background {
  background-image: url("/images/v2/Teal_bg.png");
  min-height: 100%;
  background-attachment: fixed;
}

.white-background {
  background-color: #fff;
}

.lock-background {
  background-image: url("/images/v2/lock_texture.jpg");
}

.inlineBlock {
  display: inline-block;
}

.no-underline {
  text-decoration: none;
}
.no-underline:hover, .no-underline:active, .no-underline:focus {
  text-decoration: none;
}

/**
* Margin Maintainer! It was requested that we always maintain a good sized margin to the left and right
* of the containers. This css will override the bootstrap default widths to make this happen
**/
@media (min-width: 992px) {
  /*for medium, guarantee 100px padding (normally 22)*/
  .container.margin-buffer {
    width: 860px;
  }
}
@media (min-width: 1200px) {
  /*for large, guarantee 150px padding (normally 30)*/
  .container.margin-buffer {
    width: 1050px;
  }
}
/**
* Margin to bump everything down below the navbar
**/
.header-height-margin-top {
  border-top: solid transparent 50px;
  box-sizing: border-box;
}

/**
* Margins to bump everything down below the nav bar for TUTOR(these classes are not applicable for Student nav bar) with secondary nav bar
**/
.tutor-nav ~ .header-height-margin-top-sm {
  border-top: solid transparent 100px;
}

.tutor-nav ~ .header-height-margin-top-m {
  border-top: solid transparent 150px;
}

/**
* Margin to bump everything down below the navbar for responsive student nav bar with notebank search
**/
@media (max-width: 565px) {
  .student-nav ~ .header-height-margin-top {
    border-top: solid transparent 95px;
  }
}

/*
Similar to header-height-margin-top
lastRecommendActionInfo is an add-on to the navbar for moderators. This increases the size of the navbar
and thus we give a larger border spacing
*/
.lastRecommendActionInfo ~ .header-height-margin-top {
  border-top: solid transparent 60px;
  box-sizing: border-box;
}

/*
If there are 2 elements with this class (header-height-margin-top),
we will ignore the style for the second one.
An example of use is the suspension red bar that appears at the top of the
black bar of the discuss page.
*/
.header-height-margin-top ~ .header-height-margin-top {
  border: none;
}

.iti-flag {
  background-image: url("/img/iti-flags/flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-image: url("/img/iti-flags/flags@2x.png");
  }
}
/*-=-=-=-=-=[ GLOBAL CSS - END ] =-=-=-=-=-*/

/*# sourceMappingURL=global.css.map */