html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
img, input, button, textarea,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
table, thead, tbody, tfoot, th, tr, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary,
time, mark, audio, video {
  appearance: none;
  background: transparent;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 100%;
  line-height: 120%;
  list-style: none;
  margin: 0;
  outline: 0;
  padding: 0;
  resize: none;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block; }

input, select {
  vertical-align: middle; }

input[type=search]::-ms-clear {
  display: none;
  height: 0;
  width: 0; }

input[type=search]::-ms-reveal {
  display: none;
  height: 0;
  width: 0; }

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none; }

/*
--------------------------------------------------
html is set to 62.5% so that all REM measurements are 10px based
e.g. 2.7rem = 27px
--------------------------------------------------
*/
html {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 62.5%;
  /* Text may be inflated in this exact proportion - mobile devices */
  text-size-adjust: 100%; }

body {
  letter-spacing: .01em;
  line-height: 1; }

a {
  text-decoration: none; }

/*
--------------------------------------------------------------------------------
Grid system based on three columns
--------------------------------------------------------------------------------
*/
/*
.half, .third, .two-thirds {
  float: left;
  position: relative;
  
}
*/
.half {
  width: 50%; }

.third {
  width: 33.333%; }

.two-thirds {
  width: 66.666%; }

.quarter {
  width: 25%; }

.three-quarters {
  width: 80%; }

/*
--------------------------------------------------------------------------------
Colors
--------------------------------------------------------------------------------
*/
.black {
  color: #16161F; }

.blue {
  color: #4F5398 !important; }

.gray {
  color: #8C90A2; }

.gray-light {
  color: #D0D2DB; }

.gray-dark {
  color: #4F5260; }

/*
--------------------------------------------------------------------------------
Text and alignments
--------------------------------------------------------------------------------
*/
.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.relative {
  position: relative; }

.visible {
  overflow: visible; }

.block {
  display: block; }

.ib {
  display: inline-block !important; }

.hide {
  display: none !important; }

.fw {
  width: 100%; }

.fh {
  height: 100%; }

.fh-vh {
  height: 100vh; }

.left {
  float: left; }

.right {
  float: right; }

.center {
  margin: auto;
  float: none; }

.img-center {
  margin-left: 50%;
  transform: translateX(-50%); }

.clear:after {
  content: '';
  clear: both;
  display: block; }

.t-center {
  text-align: center; }

.t-left {
  text-align: left; }

.t-right {
  text-align: right; }

.t-justify {
  text-align: justify; }

.upper {
  text-transform: uppercase; }

.cammel {
  text-transform: capitalize; }

.no-upper {
  text-transform: none; }

.lower {
  text-transform: lowercase; }

.t-shadow {
  text-shadow: 0 1px 1px rgba(22, 22, 31, 0.1); }

.lh-150 {
  line-height: 150%; }

.va-m {
  vertical-align: middle; }

.no-margin {
  margin: 0 !important; }

.no-padding {
  padding: 0 !important; }

.pointer {
  cursor: pointer; }

.bold {
  font-weight: bold; }

/*
--------------------------------------------------------------------------------
Widths
--------------------------------------------------------------------------------
*/
.w-25 {
  width: 25rem !important; }

.w-25p {
  width: 25%; }

.maxw-25p {
  max-width: 25%; }

.minw-25p {
  min-width: 25%; }

/*
--------------------------------------------------------------------------------
Draggable elements
--------------------------------------------------------------------------------
*/
.drag {
  cursor: move;
  cursor: grab; }
  .drag:active {
    cursor: grabbing; }

/*
--------------------------------------------------------------------------------
Margins
--------------------------------------------------------------------------------
*/
.mt-5 {
  margin-top: .5rem !important; }

.mt-10 {
  margin-top: 1rem !important; }

.mt-15 {
  margin-top: 1.5rem !important; }

.mt-20 {
  margin-top: 2rem !important; }

.mt-30 {
  margin-top: 3rem !important; }

.mt-40 {
  margin-top: 4rem !important; }

.mt-50 {
  margin-top: 5rem !important; }

.mt-75 {
  margin-top: 7rem !important; }

.mt-100 {
  margin-top: 10rem !important; }

.mt-120 {
  margin-top: 12rem !important; }

.mt-150 {
  margin-top: 15rem !important; }

.mt-200 {
  margin-top: 20rem !important; }

.mr-5 {
  margin-right: .5rem !important; }

.mr-10 {
  margin-right: 1rem !important; }

.mr-15 {
  margin-right: 1.5rem !important; }

.mr-20 {
  margin-right: 2rem !important; }

.mr-30 {
  margin-right: 3rem !important; }

.mr-40 {
  margin-right: 4rem !important; }

.mr-50 {
  margin-right: 5rem !important; }

.mr-75 {
  margin-right: 7rem !important; }

.mr-100 {
  margin-right: 10rem !important; }

.mr-120 {
  margin-right: 12rem !important; }

.mr-150 {
  margin-right: 15rem !important; }

.mr-200 {
  margin-right: 20rem !important; }

.mb-5 {
  margin-bottom: .5rem !important; }

.mb-15 {
  margin-bottom: 1.5rem !important; }

.mb-10 {
  margin-bottom: 1rem !important; }

.mb-20 {
  margin-bottom: 2rem !important; }

.mb-30 {
  margin-bottom: 3rem !important; }

.mb-40 {
  margin-bottom: 4rem !important; }

.mb-50 {
  margin-bottom: 5rem !important; }

.mb-75 {
  margin-bottom: 7rem !important; }

.mb-100 {
  margin-bottom: 10rem !important; }

.mb-120 {
  margin-bottom: 12rem !important; }

.mb-150 {
  margin-bottom: 15rem !important; }

.mb-200 {
  margin-bottom: 20rem !important; }

.ml-5 {
  margin-left: .5rem !important; }

.ml-10 {
  margin-left: 1rem !important; }

.ml-15 {
  margin-left: 1.5rem !important; }

.ml-20 {
  margin-left: 2rem !important; }

.ml-30 {
  margin-left: 3rem !important; }

.ml-40 {
  margin-left: 4rem !important; }

.ml-50 {
  margin-left: 5rem !important; }

.ml-75 {
  margin-left: 7rem !important; }

.ml-100 {
  margin-left: 10rem !important; }

.ml-120 {
  margin-left: 12rem !important; }

.ml-150 {
  margin-left: 15rem !important; }

.ml-200 {
  margin-left: 20rem !important; }

/*
--------------------------------------------------------------------------------
Paddings
--------------------------------------------------------------------------------
*/
.p-10 {
  padding: 1rem !important; }

.p-20 {
  padding: 2rem !important; }

/*
--------------------------------------------------------------------------------
Opacity
--------------------------------------------------------------------------------
*/
.o-10 {
  opacity: .1; }

.o-20 {
  opacity: .2; }

.o-30 {
  opacity: .3; }

.o-40 {
  opacity: .4; }

.o-50 {
  opacity: .5; }

.o-60 {
  opacity: .6; }

.o-70 {
  opacity: .7; }

.o-80 {
  opacity: .8; }

.o-90 {
  opacity: .9; }

@font-face {
  font-family: 'SF UI Text';
  font-style: normal;
  font-weight: normal;
  src: local("SF UI Text"), url("/static/fonts/SFUIText-Regular.woff") format("woff"); }

h1 {
  font-size: 34px;
  letter-spacing: .4px; }
  h1.large-title {
    font-size: 72px; }

h2, .h2 {
  font-size: 28px;
  letter-spacing: .36px; }

h3 {
  font-size: 22px;
  letter-spacing: .35px; }

h4 {
  font-size: 20px;
  letter-spacing: .38px; }

body {
  font-size: 17px;
  letter-spacing: -0.41px; }

.callout {
  font-size: 17px;
  letter-spacing: -0.32px; }

.sub-head {
  font-size: 15px;
  letter-spacing: -0.24px; }

.footnote {
  font-size: 13px;
  letter-spacing: -0.08px; }

.caption1 {
  font-size: 12px;
  line-height: 16px; }

.caption2 {
  font-size: 11px; }

.flex {
  display: flex; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center; }

.flex-sb {
  display: flex;
  justify-content: space-between; }

.flex-vam {
  display: flex;
  align-items: center; }

.flex-wrap {
  display: flex;
  flex-wrap: wrap; }

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

.flex-grow {
  flex-grow: 1; }

.border-avatar {
  color: #4F5398 !important;
  border: double 3px transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #4F5398, #5A78E0);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: bold; }

.border-avatar-large {
  color: #4F5398 !important;
  border: double 6px transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #4F5398, #5A78E0);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: bold;
  font-size: 40px !important; }

body {
  font-family: 'SF UI Text', sans-serif; }

a, button {
  cursor: pointer; }
  a:disabled, button:disabled {
    cursor: default; }

h1 {
  color: #4F5398; }

body, input {
  color: #16161F; }

table tr {
  border-bottom: 1px solid #8C90A2; }

table th, table td {
  text-align: center;
  padding: 20px; }

.page-wrapper {
  display: block;
  max-width: 1028px;
  margin: 20px auto; }

.main-wrapper {
  min-height: calc(100vh - 120px); }

.btn {
  background: #4F5398;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  padding: 10px 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  font-weight: bold; }
  .btn.login-btn {
    width: 117px;
    padding: 10px 0;
    color: white;
    background: #4F5398; }
    .btn.login-btn:hover {
      background: rgba(50, 172, 238, 0.8); }
  .btn.disabled, .btn:disabled {
    cursor: default;
    background: #D0D2DB !important; }

.round-btn {
  font-size: 16px !important;
  line-height: 22px;
  border-radius: 30px !important;
  background: #4F5398 !important;
  color: white !important;
  width: 100px;
  text-transform: capitalize !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); }
  .round-btn.bg-gray {
    background: #8C90A2 !important; }
  .round-btn.disabled, .round-btn:disabled {
    cursor: default;
    background: #D0D2DB !important; }

.delete-team-button {
  background-color: white !important;
  color: #EB5757 !important; }

.filter-select {
  color: #fff !important;
  text-transform: capitalize !important;
  border-radius: 30px !important;
  font-size: 17px !important;
  background: url("/static/images/arrow_down_white.svg") no-repeat;
  background-position: 15% center;
  background-color: #4F5398 !important;
  padding: 10px 25px 10px 45px !important; }

.filter-select-option {
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 5px 30px !important; }
  .filter-select-option.Mui-selected {
    background: none !important;
    color: #4F5398; }

.custom-select {
  background: white;
  border: none;
  padding: 5px; }

.section-chooser {
  font-size: 24px; }
  .section-chooser a {
    position: relative;
    text-align: center;
    min-width: 108px;
    font-weight: bold;
    color: #16161F;
    text-decoration: none; }
    .section-chooser a .section-selected {
      height: 3px;
      width: 108px;
      background: #4F5398;
      position: absolute;
      bottom: -2px;
      margin: 0 auto; }
  .section-chooser hr {
    margin-top: 0px; }

.photo-holder {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  position: relative; }
  .photo-holder .MuiAvatar-root {
    width: 100%;
    height: 100%; }
  .photo-holder .photo-holder-select {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0px; }
    .photo-holder .photo-holder-select:hover {
      background: rgba(0, 0, 0, 0.5) url("/static/images/cam.svg") center no-repeat; }

.basic-form label {
  display: block;
  font-size: 17px;
  color: #16161F;
  font-weight: bold; }

.basic-form .text-input {
  border: 1px solid #D0D2DB;
  border-radius: 10px;
  padding: 15px 10px;
  width: 281px; }
  .basic-form .text-input.large {
    width: 384px; }

.basic-form .error-msg {
  position: absolute;
  bottom: 15px;
  right: 0px;
  transform: translateX(calc(100% - 50px));
  background: url("/static/images/error back.svg");
  color: white;
  padding: 5px 10px 5px 25px;
  font-size: 12px;
  z-index: 10; }

.radio-group .MuiTypography-root.MuiFormControlLabel-label {
  font-size: 12px; }

.radio-item-icon {
  width: 25px;
  height: 25px; }
  .radio-item-icon.checked {
    color: #4F5398; }

.info-message.success .MuiSnackbarContent-root {
  background-color: #4F5398; }

.info-message.error .MuiSnackbarContent-root {
  background-color: #EB5757; }

select.no-boder {
  border: 0;
  background: none;
  font-family: 'SF UI Text', sans-serif; }

.form-header .form-header-buttons {
  display: flex; }
  .form-header .form-header-buttons .round-btn:first-child {
    margin-top: 10px; }
  .form-header .form-header-buttons .round-btn:nth-child(2) {
    margin-top: 10px;
    margin-left: 10px; }
  @media (max-width: 599px) {
    .form-header .form-header-buttons {
      flex-direction: column; } }

.header {
  background-color: white !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05) !important;
  min-height: 72px;
  color: black; }
  .header .user-menu-button {
    height: 36px;
    width: 36px; }
  .header .menu-spacer {
    flex-grow: 1; }
  .header .menu-search-button .MuiSvgIcon-root {
    height: 32px;
    width: 32px; }
  .header .date-input {
    width: 140px; }
    .header .date-input input {
      font-size: 15px !important; }
  .header .menu-search {
    position: relative;
    border-radius: 4px;
    font-size: 24px;
    background-color: rgba(241, 241, 241, 0.29); }
    .header .menu-search .menu-search-icon {
      color: #8C90A2;
      position: absolute;
      top: 8px;
      left: 8px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .header .menu-search .menu-search-icon .MuiSvgIcon-root {
        height: 32px;
        width: 32px; }
    .header .menu-search .menu-search-input {
      font-size: 20px;
      padding: 5px 25px 5px 50px;
      font-weight: bold; }

#user-menu {
  margin-top: 70px; }
  #user-menu .user-menu {
    font-size: 12px;
    font-weight: bold;
    padding: 0 10px;
    width: 218px; }
    #user-menu .user-menu .menu-item {
      padding: 5px;
      margin-bottom: 5px;
      cursor: pointer;
      display: block;
      color: #16161F;
      text-decoration: none; }
      #user-menu .user-menu .menu-item:hover {
        background: #F1F1F1; }
    #user-menu .user-menu hr {
      margin: 5px -10px; }

#team-menu {
  margin-top: 70px;
  margin-left: 2px; }
  #team-menu .team-menu {
    font-size: 12px;
    font-weight: bold;
    padding: 0 10px;
    width: 218px; }
    #team-menu .team-menu a {
      display: block; }
      #team-menu .team-menu a:hover, #team-menu .team-menu a.selected {
        color: #4F5398; }

#date-menu {
  margin-top: 70px;
  font-size: 3px !important; }
  #date-menu .MuiPopover-paper {
    overflow: visible !important; }

.upgrade-btn {
  padding: 6px 18px; }

.main-menu .menu-item {
  margin-bottom: 15px; }
  .main-menu .menu-item .item-icon {
    min-width: 40px; }
  .main-menu .menu-item .item-text .MuiListItemText-primary {
    color: #8C90A2;
    font-size: 12px !important;
    font-weight: bold; }
  .main-menu .menu-item:hover {
    background: #F1F1F1; }
    .main-menu .menu-item:hover .item-text .MuiListItemText-primary {
      color: #4F5398; }

.main-menu-button {
  color: #4F5398 !important; }
  .main-menu-button .main-menu-icon {
    height: 22px;
    width: 22px; }

.post-media-gallery {
  height: auto;
  position: relative; }
  .post-media-gallery .post-media-item {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    line-height: 10px;
    overflow: hidden;
    position: relative; }
    .post-media-gallery .post-media-item .post-media-item-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px; }
      .post-media-gallery .post-media-item .post-media-item-overlay .post-media-play {
        width: 125px;
        height: 125px;
        background: url("/static/images/media_play.svg") center no-repeat; }
  .post-media-gallery .post-media-navigation {
    position: absolute;
    text-align: center;
    bottom: -40px;
    left: 50%;
    overflow: visible;
    white-space: nowrap;
    transform: translate(-50%); }
    .post-media-gallery .post-media-navigation.arrows {
      bottom: -50px; }
    .post-media-gallery .post-media-navigation .navigation-step {
      padding: 3px; }
      .post-media-gallery .post-media-navigation .navigation-step .MuiSvgIcon-root {
        width: 8px;
        height: 8px; }
        .post-media-gallery .post-media-navigation .navigation-step .MuiSvgIcon-root.selected {
          color: #4F5398; }
    .post-media-gallery .post-media-navigation .navigation-arrow .MuiSvgIcon-root {
      width: 24px;
      height: 24px;
      background: #D0D2DB;
      border-radius: 50%;
      color: white; }

.phone-input .country-code {
  text-align: left;
  border-right: 1px solid #4F5260; }

.phone-input .country__control {
  display: none; }

.phone-input .country__menu {
  margin-top: 27px;
  margin-left: -20px;
  min-width: 343px; }

.phone-input .country-code-display {
  align-items: center;
  background: #fff url("/static/images/arrow_down.svg") no-repeat left center;
  background-size: 12px;
  color: #4F5260;
  display: flex;
  left: 0;
  padding-left: 20px;
  padding-right: 25px;
  top: 0; }

.phone-input .input-phone::-webkit-inner-spin-button,
.phone-input .input-phone::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.simple-table {
  width: 100%; }
  .simple-table th {
    padding: 15px 10px;
    color: #8C90A2; }
    .simple-table th:first-child {
      text-align: left; }
  .simple-table td {
    padding: 0;
    vertical-align: middle;
    padding: 10px; }

.engagement-item {
  display: flex; }
  .engagement-item .engagement-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 125px; }
  .engagement-item .engagement-graph {
    flex-grow: 1; }

.home-wrapper {
  width: 500px; }
  .home-wrapper .post-wrapper {
    padding-bottom: 20px;
    border-bottom: 1px solid #8C90A2;
    margin-bottom: 20px; }
  .home-wrapper .post-avatar {
    height: 25px;
    width: 25px; }

.single-post .post-media {
  border-radius: 8px;
  width: 513px; }

.single-post .post-body {
  flex-grow: 1;
  font-size: 12px; }
  .single-post .post-body .post-avatar {
    height: 26px;
    width: 26px; }
  .single-post .post-body hr {
    background: #D0D2DB;
    border: 0.6px solid #D0D2DB; }

.single-post .back-btn {
  background-color: #4F5398;
  color: #fff; }

.question-add-icon {
  width: 35px !important;
  height: 35px !important;
  background: white !important;
  border: 2px solid #D0D2DB !important; }

.question-active {
  padding: 5px !important; }
  .question-active .MuiSvgIcon-root {
    width: 22px;
    height: 22px; }
    .question-active .MuiSvgIcon-root.active {
      color: #4F5398 !important; }

.question-item .question-drag {
  min-width: 20px; }
  .question-item .question-drag .question-drag-icon {
    width: 30px;
    height: 30px; }

.question-item .question-input {
  border: 1px solid #8C90A2;
  border-radius: 10px;
  width: calc(100% - 80px);
  padding: 8px; }

.login-background {
  width: 50%;
  height: 100vh;
  background-image: url("/static/images/login_back.jpg");
  background-size: cover;
  float: left; }

@media only screen and (max-width: 860px) {
  .login-background {
    width: 0; } }

.login-screen {
  color: #4F5260;
  width: 343px; }

.login-menu {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-bottom: 20px; }

.login-logo {
  display: inline-block;
  width: 78px;
  height: 39px;
  background-image: url("/static/images/logo_gray.svg"); }

.pincode-input-text {
  background: #D0D2DB !important;
  border-color: #D0D2DB !important;
  border-radius: 8px;
  font-size: 34px;
  width: 45px !important;
  height: 75px !important;
  margin-right: 7px !important; }
  .pincode-input-text::-webkit-inner-spin-button, .pincode-input-text::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }

.mobile-app {
  width: 100px;
  height: 32px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 4px; }
  .mobile-app.google-play {
    background-image: url("/static/images/google_play_logo.svg"); }
  .mobile-app.app-store {
    background-image: url("/static/images/app_store_logo.svg"); }

.mobile-app-desc {
  font-size: 12px;
  font-weight: bold;
  color: #D0D2DB; }