body.login-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000;
  background-color: #E8E8E8;
}

.chosen-container .chosen-results li {
  min-height: 38px;
  height: initial;
}

.page-login-register {
  background-color: #E8E8E8;
  min-height: 100vh;
}
.page-login-register #page-logo {
  max-width: 770px;
  width: 770px;
}
.page-login-register #page-logo img {
  height: initial;
  width: 200px;
}
.page-login-register #page-main {
  background: #F7F7F7;
  border: 1px solid #D2D2CF;
  border-radius: 5px;
  max-width: 770px;
  width: 770px;
}
.page-login-register.page-login #page-logo {
  width: 470px;
  max-width: 470px;
}
.page-login-register.page-login #page-main {
  width: 470px;
  max-width: 470px;
}
.page-login-register.page-login #page-main .field {
  margin: 1.5rem 0 1rem;
}
.page-login-register.page-login #page-main .content-inset .signup-google {
  margin: 0;
  margin-bottom: 1rem;
}
.page-login-register.page-login #page-main .content-inset .signup-google a {
  width: 100%;
}
.page-login-register.page-login #page-main .content-inset .register-button {
  color: #79B320;
  font-size: 1rem;
  margin: 0;
}
.page-login-register.page-login #page-main .content-inset .register-button:hover {
  text-decoration: underline;
}
.page-login-register.page-login #page-main .content-inset .button-default {
  width: 100%;
  height: 50px;
  font-size: 1rem;
  margin: 2rem 0 1rem;
}
.page-login-register.page-login #page-main .content-inset hr {
  margin: 0.5rem 0 1rem;
}
.page-login-register .content-register, .page-login-register .content-inset {
  padding: 2em;
  font-size: 1rem;
}
.page-login-register .content-register h1, .page-login-register .content-inset h1 {
  font-weight: bold;
  font-size: 2.5rem;
  margin-top: 0;
}
.page-login-register .content-register hr, .page-login-register .content-inset hr {
  margin: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.page-login-register .content-register h1, .page-login-register .content-inset h1 {
  color: #B6B6B6;
}
.page-login-register .content-register .not-register, .page-login-register .content-inset .not-register {
  text-align: right;
}
.page-login-register .content-register .not-register .float-right, .page-login-register .content-inset .not-register .float-right {
  float: initial !important;
}
.page-login-register .content-register .another-login, .page-login-register .content-inset .another-login {
  color: #9b9b9b;
  margin: 2rem 0;
  text-align: center;
  position: relative;
}
.page-login-register .content-register .another-login:before, .page-login-register .content-inset .another-login:before {
  content: "";
  position: absolute;
  height: 0.5px;
  width: 46%;
  background: rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.page-login-register .content-register .another-login:after, .page-login-register .content-inset .another-login:after {
  content: "";
  position: absolute;
  height: 0.5px;
  width: 46%;
  background: rgba(0, 0, 0, 0.1);
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.page-login-register .content-register .signup-google, .page-login-register .content-inset .signup-google {
  text-align: center;
  margin: 2rem 0 3rem;
  font-size: 1rem;
}
.page-login-register .content-register .signup-google a, .page-login-register .content-inset .signup-google a {
  background-color: #4285f4;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
  width: 48%;
  padding: 0;
  font-weight: bold;
  border-radius: 1px;
  border: 1px solid transparent;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}
.page-login-register .content-register .signup-google a div, .page-login-register .content-inset .signup-google a div {
  padding: 15px;
  background-color: #fff;
  float: left;
  border-radius: 1px;
}
.page-login-register .content-register .signup-google a div img, .page-login-register .content-inset .signup-google a div img {
  height: 18px;
  width: 18px;
  display: block;
}
.page-login-register .content-register .field, .page-login-register .content-inset .field {
  margin: 1.5rem 0 2rem;
}
.page-login-register .content-register .field .field-label, .page-login-register .content-inset .field .field-label {
  float: initial;
  width: initial;
  line-height: initial;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
}
.page-login-register .content-register .field .field-input, .page-login-register .content-inset .field .field-input {
  margin: 0;
  float: initial;
  width: 100%;
}
.page-login-register .content-register .field .field-error, .page-login-register .content-inset .field .field-error {
  margin: 0;
  width: 100%;
}
.page-login-register .content-register .field .field-error-smaller, .page-login-register .content-inset .field .field-error-smaller {
  width: 100%;
}
.page-login-register .content-register .with-indent, .page-login-register .content-inset .with-indent {
  margin-left: 0 !important;
  width: initial !important;
}
.page-login-register .content-register .form-actions, .page-login-register .content-inset .form-actions {
  margin-left: 0 !important;
}
.page-login-register .content-register .form-actions .button-default, .page-login-register .content-inset .form-actions .button-default {
  margin: 0;
  padding: 10px 30px;
  font-size: 1.25em;
}

@media only screen and (max-width: 767px) {
  .page-login-register {
    padding: 0 15px !important;
    height: inherit !important;
  }
  .page-login-register .content-register {
    padding: 1em;
  }
}
/* Students */
@media only screen and (max-width: 767px) {
  .toolbar.volunteer-list .toolbar-left {
    width: 100%;
  }
  .toolbar.volunteer-list .toolbar-item {
    width: 100% !important;
  }
  #student_options {
    padding: 10px 0;
    margin: 0 auto;
  }
  .field .field-input input[type=text] {
    width: 100%;
  }
  .field .field-input .with-space-b.with-space-a {
    display: block;
    margin: 10px 0;
  }
  .field .field-input .field-input-checkbox {
    float: initial;
    padding: 0;
    border: none;
  }
  .field .field-input.field-input-group {
    margin-top: 5px !important;
  }
  .field .field-input .button {
    display: block !important;
    margin: 5px 0;
  }
  .field .field-label.field-label-right {
    padding: 0;
  }
  .content-inset .grid-input input[type=radio] {
    opacity: 0;
  }
  .content-inset .field-input-group.with-grid-input {
    width: 100%;
  }
  .token-other .token-other-input {
    float: initial;
    padding: 0;
  }
  .token-other .token-other-input input[name=other] {
    width: 100%;
  }
  .table .table-content.with-head .table-row .resources-long-text {
    height: initial;
  }
  .table .table-content.with-head .table-row .timeslots {
    padding-left: 105px;
    display: block;
  }
  .table .table-content.with-head .table-row .px-10:before {
    content: attr(data-label) " ";
    float: left;
    font-style: italic;
    font-weight: bold;
    padding-right: 15px;
    color: #76B243;
    min-width: 100px;
  }
  .checkin-skills-list {
    display: flex;
    flex-wrap: wrap;
  }
  .checkin-skills-list .checkin-skills {
    max-width: 50%;
    flex: 0 0 50%;
    position: relative;
    width: 100%;
  }
  .table-organization {
    display: block;
  }
  .table-organization .px-10 {
    flex: initial;
    max-width: initial;
  }
  .table-organization .f-full .d-flex {
    display: block;
  }
  .table-organization .f-full .d-flex .px-10 {
    flex: initial;
    max-width: initial;
  }
  .table-organization .f-full .d-flex .px-10 span {
    padding-left: 115px;
    display: block;
  }
  .table-organization .f-full .d-flex .px-10:empty {
    display: none;
  }
}
table, .table {
  padding-bottom: 0;
}

.button-comment {
  width: 0;
  padding: 10px 0 !important;
}

.height0 {
  height: 0;
}

.field .field-text {
  width: 25%;
}
.field .field-input-width {
  width: 75%;
  margin-left: 25%;
}

@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .hidden-sp {
    display: none !important;
  }
  .tabs-destination .table .table-head {
    display: block !important;
  }
  .tabs-destination .table .table-row .gutter-s:before {
    content: none !important;
  }
  .table-row .gutter-s p {
    color: #76B243;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0;
  }
  .table-row .gutter-s .chosen-single {
    margin: 5px 0;
  }
  .field .field-label {
    float: inherit;
    display: block;
    width: 100%;
  }
  .field .field-input {
    float: inherit;
    display: block;
    margin: 0;
    width: 100%;
    margin-top: 5px;
  }
  .col-organization {
    width: 85% !important;
  }
  .horizontal-divider {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  .height0 {
    height: auto;
  }
  /*============Title Bar============*/
  .table-content .table-row .col:empty {
    display: none;
  }
  #titlebar {
    padding: 5px 10px;
    height: 115px;
  }
  #titlebar a {
    padding: 10px 5px;
  }
  #titlebar .titlebar-left {
    float: inherit;
  }
  #titlebar .titlebar-title {
    padding: 10px 0;
    float: inherit;
  }
  #titlebar .titlebar-right {
    margin: 0 auto;
    float: inherit;
    text-align: center;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
  #titlebar .titlebar-item {
    float: inherit;
    display: inline-block;
  }
  .gutter-s.remove-button {
    text-align: center;
  }
  .with-header {
    top: 115px !important;
  }
  /*============Banner============*/
  #banner {
    height: auto;
    position: static;
  }
  .banner-text {
    margin-bottom: 10px;
  }
  /*============ToolBar============*/
  .toolbar .toolbar-left {
    display: block;
  }
  .toolbar-left .toolbar-item-s {
    margin: 0;
  }
  .toolbar .toolbar-item {
    display: block;
    float: inherit;
    margin: 3px;
  }
  .toolbar.with-banner {
    height: auto;
  }
  .toolbar .toolbar-left .toolbar-item > .toolbar-item {
    display: none;
  }
  .toolbar .toolbar-left, .toolbar .toolbar-right {
    margin: 0;
  }
  .toolbar-left .toolbar-item-s {
    float: none;
    margin: 5px 0;
  }
  body .ui-tooltip {
    display: none !important;
  }
  /*============Chosen============*/
  .chosen-container .chosen-results li {
    height: auto;
  }
  /*============Select============*/
  select {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    padding: 0.6em 1.4em 0.5em 0.8em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
    border-radius: 0.5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
  }
  select::-ms-expand {
    display: none;
  }
  select:hover {
    border-color: #888;
  }
  select:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
  }
  select option {
    font-weight: normal;
  }
  /*============Table============*/
  .table-content .table-row .col {
    padding: 3px 0 !important;
  }
  .token-status {
    height: auto;
    padding: 0 10px;
    line-height: 30px;
    min-width: 80px;
  }
  table tbody.with-head td:before, .table .table-content.with-head .col:before {
    min-width: 105px;
  }
  .text-align-center, .text-align-c, .text-align-right, .text-align-r {
    text-align: left !important;
  }
  .icon-center {
    text-align: center;
  }
  .table-content .table-row .col.reflection {
    width: 100% !important;
    height: auto;
  }
  span.reflection-status {
    display: inline-block;
    margin: 0;
    min-width: 80px;
    height: auto;
    line-height: 30px;
    padding: 0;
  }
  .field-mobile-max-width {
    width: 100%;
  }
}