/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

/* Include Fonts */

@font-face {
  font-family: Oswald;
  src: url(fonts/oswald/Oswald-Medium.ttf);
}
@font-face {
  font-family: Arimo;
  src: url(fonts/arimo/Arimo-Regular.ttf);
}

/* General Styling */
.path-student-history .view-student-activity form,
.principal-history .view-header,
.path-principal-teacher-transactions .view-teacher-account-details form,
.path-principal-teacher-transactions .view-teacher-name form {
  display: none;
}
.path-frontpage .page-header {
  display: none;
}
p,
li,
ul,
body,
div {
  font-family: Arimo;
  font-size: 18px;
  color: #222222;
}

p.small {
  font-size: 15px;
}

body {
  margin-top: 0;
}
select,
input {
  width: 100%;
  background: white;
  height: 40px;
  border: 1px solid #e6e6e6;
  padding: 8px;
}
h1 {
  font-family: Oswald;
  font-size: 48px;
  color: #00a0b0;
  text-decoration: none solid rgb(0, 160, 176);
  line-height: 52px;
  text-align: center;
}
h2 {
  color: #222222;
  font-size: 24px;
  font-family: Oswald;
}
span {
  color: #222222;
  font-size: 14px;
  font-family: Arimo;
}
label {
  font-family: Arimo;
  font-size: 18px;
  font-weight: lighter;
}

.input-group span.input-group-addon {
  display: none;
}
.form-inline .form-control,
.input-group .form-control,
.select-wrapper .form-control,
.form-item .form-control,
.form-control {
  width: 220px;
  height: 40px;
  border: solid 1px #e6e6e6;
  border-radius: 0;
  margin-right: 20px;
  font-size: 18px;
}
.form-control {
  box-shadow: none;
}
button,
.btn,
button:hover,
.btn:hover {
  border: solid 2px #cc0000;
  color: #cc0000;
  background: white;
  height: 40px;
  padding: 0 60px;
  border-radius: 30px;
  font-size: 18px;
}

a.button {
  border: solid 2px #cc0000;
  color: #cc0000;
  background: white;
  height: 40px;
  padding: 0 60px;
  border-radius: 30px;
  font-size: 18px;
  display: flex;
  max-width: max-content;
  justify-content: center;
  align-items: center;
}

.form-container .form button:active,
.form-container .form button:hover,
.form-container .form button:focus,
.form-container .form button:visited,
.form-container .form button:focus-within {
  border: solid 2px #cc0000;
  color: #cc0000;
  background: none;
  box-shadow: none;
}
.views-exposed-form .form-control {
  width: 300px;
}

.select-wrapper::after {
  right: 20px;
}

input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Layout  */

#navbar {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  height: 70px;
  align-content: center;
  position: relative;
  z-index: 10;
}
#navbar .container {
  position: relative;
}
button.navbar-toggle {
  position: absolute;
  top: 8px;
  right: 72px;
  color: black;
  border: none;
  cursor: pointer;
  padding: 0;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 6px;
}
.navbar-toggle .icon-bar {
  border: 1px solid;
  width: 24px;
}

#block-cartmenu {
  float: right;
  right: -18px;
  top: -30px;
  position: relative;
}
#block-cartmenu a {
  font-size: 1.7rem;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: black;
}
#block-cartmenu a:after {
  content: url('/files/default/custom-img/cart.svg');
  width: 20px;
  display: block;
}

@media (min-width: 1200px) {
  .container {
    width: 1024px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 1024px;
  }
}
.main-container {
  min-height: 600px;
  margin-top: 32px;
}

.footer {
  height: 160px;
  background-color: #00a0b0;
}

a.logo img {
  width: 125px;
}
ul.menu.menu--main.nav.navbar-nav {
  float: right;
  display: flex;
  align-items: center;
  height: 70px;
  margin-right: 24px;
}
ul.menu.menu--main.nav.navbar-nav > li > a {
  background: none;
  color: #222222;
}
ul.menu.menu--main.nav.navbar-nav > li > a:hover {
  background: none;
  color: #00a0b0;
}
.user-icon {
  width: 40px;
  float: right;
  height: 70px;
  display: flex;
  align-items: center;
  float: right;
  cursor: pointer;
}
.dropdown-menu {
  margin-top: -10px;
  padding: 16px;
  border-radius: 0;
  border: none;
}
.dropdown-menu a {
  color: #222222;
  cursor: pointer;
  width: 100%;
  height: 32px;
  display: block;
  position: relative;
}
#block-views-block-edit-profile-icon-block-1 {
  position: absolute;
  right: 0;
  width: 64px;
  float: right;
}
#block-ycar-main-menu-menu {
  width: 200px;
  float: right;
}
@media (max-width: 1430px) {
  .dropdown-menu {
    right: 0;
    left: auto;
  }
}

@media (max-width: 768px) {
  #navbar {
    display: block;
  }
  .logo {
    margin-left: 16px;
  }
  ul.menu.menu--main.nav.navbar-nav {
    display: initial;
    position: relative;
    width: 75%;
    text-align: left;
    height: auto;
    float: none;
  }
  ul.menu.menu--main.nav.navbar-nav li {
    padding: 6px;
    font-size: 20px;
  }
  .navbar-collapse {
    width: 100%;
    background: white;
    position: absolute;
    width: 100%;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }
  #block-views-block-edit-profile-icon-block-1 {
    margin-right: 16px;
  }
}

/* Content */
.three-columns {
  margin-top: 35px;
  margin-bottom: 60px;
}
.three-columns .columns {
  width: 100%;
  border: solid 1px #00a0b0;
  padding: 0 20px 10px;
  float: left;
  min-height: 220px;
}
.three-columns .columns p {
  min-height: 80px;
}
.three-columns-head {
  border-bottom: solid 1px rgb(230, 230, 230);
  padding-bottom: 20px;
}
.three-columns-foot {
  padding-top: 30px;
  float: left;
  width: 100%;
  position: relative;
}
.three-columns-foot span {
  float: left;
  text-align: left;
  position: absolute;
  bottom: 0;
}
.three-columns-foot h2 {
  float: right;
  text-align: right;
  margin: 0;
}
@media (max-width: 992px) {
  .three-columns h2 {
    height: 50px;
  }
  .three-columns-foot span {
    float: none;
    position: relative;
  }
  .three-columns-foot h2 {
    float: none;
    text-align: left;
    margin: 0;
  }
}
.three-columns .student-summery {
  float: left;
  width: 100%;
  margin-top: 40px;
}
.three-columns .student-summery p {
  color: #00a0b0;
}
.three-columns .student-summery p span {
  font-size: 16px;
  float: right;
  color: #00a0b0;
}
.form-container {
  float: left;
  width: 100%;
}
.form-container .form {
  margin-top: 30px;
  margin-bottom: 50px;
  width: max-content;
  position: relative;
  float: left;
}

.teacher-rewards-form {
  max-width: 768px;
}
.form-container .form button {
  position: absolute;
  bottom: 0;
}
.form-container .form .form-item {
  float: left;
  width: 220px;
  margin-right: 20px;
  margin-bottom: 0;
}
.form-container .form .form-item label {
  display: block;
  margin-bottom: 0;
}
.form-container .form .form-item.form-item-transfer-amount {
  width: 120px;
}
.form-container .form .form-item.form-item-transfer-amount input {
  width: 120px;
}

.form-container .student-rewards-transfer-form .form-item {
  width: 190px;
  margin-right: 16px;
}
.form-container .student-rewards-transfer-form select {
  width: 100%;
}
.form-container .student-rewards-transfer-form .form-item-transfer-description {
  width: 216px;
}

@media (max-width: 1024px) {
  .student-rewards-transfer-form {
    max-width: 768px;
  }
  .teacher-rewards-form #edit-submit,
  .student-rewards-transfer-form #edit-submit {
    position: relative;
    margin-top: 24px;
  }
  .form-container .student-rewards-transfer-form .form-item {
    width: 150px;
  }

  .form-container
    .student-rewards-transfer-form
    .form-item-transfer-description {
    width: 220px;
  }
}

@media (max-width: 768px) {
  .three-columns .columns {
    margin-top: 24px;
  }
  .teacher-rewards-form {
    max-width: 100%;
  }
  .form-inline .form-control,
  .form-container .form,
  .form-container .form .form-item,
  .input-group .form-control,
  .select-wrapper .form-control,
  .form-item .form-control,
  .form-control {
    width: 100%;
  }
  .form label {
    margin-top: 16px;
  }
  .form-container .form button {
    position: relative;
    margin-top: 24px;
  }
  .form-container .form .form-item.form-item-transfer-amount,
  .form-container .form .form-item.form-item-transfer-amount input {
    width: 100%;
  }
}
/* Table Styling*/

.record-listing .table > thead > tr > th,
.record-listing .table > tbody > tr > th,
.record-listing .table > tfoot > tr > th,
.record-listing .table > thead > tr > td,
.record-listing .table > tbody > tr > td,
.record-listing .table > tfoot > tr > td {
  border: none;
}
.record-listing .table-hover > tbody > tr:hover {
  background: none;
}
.record-listing .table-striped > tbody > tr:nth-of-type(odd) {
  background: none;
}
.record-listing {
  float: left;
  width: 100%;
  margin-top: 20px;
}
.record-listing tr {
  border: none;
  background-color: none !important;
}
.record-listing th {
  font-family: Arimo;
  color: #00a0b0;
  font-size: 18px;
}
.record-listing td {
  font-family: Arimo;
  font-size: 18px;
}

.record-listing.principal-history .view-content,
.shop-report .view-content {
  margin-top: 48px;
}

@media (max-width: 992px) {
  .view-sales-history table {
    font-size: 16px;
  }
}

/* User pages  */

.page-header {
  border: none;
}

.user-register-form .form-item-terms-of-use label {
  font-size: 14px;
}
#user-login-form,
#user-pass,
#user-form {
  width: 360px;
  margin: 0 auto;
  margin-top: 40px;
  border: 1px solid #e6e6e6;
  padding: 48px;
  padding-top: 16px;
}
#user-pass,
#user-form {
  text-align: center;
  border: none;
  padding: 0px;
}
#user-form {
  text-align: left;
}

#user-login-form h1 {
  margin-bottom: 48px;
}
#user-login-form .form-control,
#user-pass .form-control,
#user-form .form-control {
  width: 100%;
}
#user-login-form .form-group,
#user-pass .form-group,
#user-form .form-group {
  margin-bottom: 0;
}
#user-login-form .form-item,
#user-pass .form-item,
#user-form .form-item {
  margin-top: 24px;
}
#user-login-form .small {
  margin-top: 8px;
}
#user-login-form button {
  width: 100%;
  margin-top: 24px;
}
#user-form #edit-actions {
  margin-top: 32px;
  text-align: center;
}
.glyphicon-log-in,
.glyphicon-trash,
.glyphicon-ok {
  display: none;
}

#user-pass p {
  margin-top: 24px;
  margin-bottom: 24px;
}

#edit-current-pass--description {
  display: none;
}

@media (max-width: 480px) {
  #user-login-form,
  #user-pass,
  #user-form {
    width: 100%;
  }
}

/* Admin area */

.view-user-admin-people .form-item {
  display: inline-table;
  margin-bottom: 16px;
  vertical-align: middle;
  width: 50px;
}
.people-view {
  margin-top: 64px;
}
.local-actions .btn {
  display: flex;
  align-items: center;
}
.people-view .view-content {
  margin-top: 48px;
}
.view-user-admin-people .form-select,
#views-form-user-admin-people-page-1 .form-select {
  margin-right: 0;
}
#views-form-user-admin-people-page-1 {
  margin-top: 64px;
}
.view-user-admin-people .form-submit {
  border-color: black;
  color: black;
}

#views-form-user-admin-people-page-1 .select-wrapper,
#views-form-user-admin-people-page-1 .form-select {
  width: 500px;
}

#edit-account .form-radio,
#edit-account .form-checkbox {
  height: 15px;
  width: auto;
}

.user-form #edit-delete {
  margin-top: 32px;
  border-color: grey;
  height: 35px;
  width: auto;
  color: grey;
}

.admin-area-card {
  height: 75px;
  width: 200px;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
.admin-area-cards-container a:hover,
.admin-area-cards-container p:hover {
  text-decoration: none;
}
.admin-area-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.44);
}
.admin-area-card .svg-inline--fa {
  margin-right: 12px;
  color: #00a0b0;
  font-size: 20px;
}
p.back-to {
  margin-bottom: 32px;
}
.admin-area-cards-container {
  width: 700px;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
}
.back-to img {
  transform: rotate(180deg);
  margin-right: 8px;
}

#system-theme-settings #edit-update,
#system-theme-settings h2 {
  display: none;
}

#system-theme-settings .form-type-vertical-tabs:nth-child(4) {
  display: none;
}
#system-theme-settings ul li:nth-child(1) {
  display: none;
}
#system-theme-settings .tabbable {
  margin-top: 24px;
}
#system-theme-settings #edit-theme-settings--content {
  display: none;
}
#system-theme-settings ul li {
  margin-top: 12px;
}
#system-theme-settings ul li span {
  font-size: 17px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  padding: 16px;
  width: 100%;
  display: block;
}
#system-theme-settings ul li a {
  width: 90%;
  padding: 0;
}
#system-theme-settings ul li a:hover {
  background-color: white;
  border: none;
}
#system-theme-settings .form-item-default-logo,
#system-theme-settings .form-item-default-favicon {
  display: none;
}

#user-register-form,
#taxonomy-term-classes-form {
  max-width: 300px;
  position: relative;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 48px;
}

#user-register-form .form-control,
#taxonomy-term-classes-form .form-control {
  width: 300px;
}
#user-register-form .form-group {
  margin-top: 24px;
}

#user-register-form #edit-status--wrapper,
#user-register-form .form-item-notify {
  display: none;
}

#user-register-form #edit-submit {
  margin-top: 24px;
  margin-bottom: 64px;
}
#taxonomy-overview-terms #edit-help,
#taxonomy-overview-terms .tabledrag-toggle-weight {
  display: none;
}
#taxonomy-term-classes-form #edit-relations {
  display: none;
}
#taxonomy-overview-terms #edit-actions {
  display: none;
}

.view-shop {
  margin-top: 48px;
}

.product {
  border: solid 1px #00a0b0;
  padding: 12px 18px;
  min-height: 250px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product h3 {
  margin-top: 0;
}

#vbo-action-form-wrapper {
  max-width: 900px;
  margin: 48px 0;
}

#vbo-action-form-wrapper #edit-multipage {
  display: none;
}

.commerce-product-form .layout-region-product-secondary {
  display: none;
}

.commerce-product-form {
  display: flex;
  justify-content: center;
  width: min-content;
  position: relative;
  margin: 0 auto;
  margin-top: 48px;
}

.commerce-product-form .layout-region-product-footer__content {
  border-top: 0;
}

#commerce-checkout-flow-multistep-default {
  display: flex;
  width: 500px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}

#commerce-checkout-flow-multistep-default div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#commerce-checkout-flow-multistep-default input,
#commerce-checkout-flow-multistep-default button {
  margin-bottom: 16px;
}

#commerce-checkout-flow-multistep-default .checkout-order-summary {
  display: none;
}

#edit-importing-rules--wrapper {
  display: none;
}

#commerce-product-default-add-form #edit-actions-submit {
  display: none;
}

.view-commerce-products .views-field-operations .btn-group {
  width: 250px;
}