/* Color Scheme
orange
#fa6900
Blue
#0091fa
rgba(0,145,250)
Cream
#f9f9f9
Purple
#B000FA
*/

.mdl-layout__header {
  background-color: white !important;
}

.eplogo {
  width: 176px;
  height: 44px;
  margin-left: -90px !important;
}

header>div.mdl-layout__header-row>nav>a {
  color: #fa6900 !important;
}

header>div.mdl-layout__header-row>.mdl-button>.material-icons {
  color: #fa6900 !important;
  /*font-size: 30px !important;*/
}

#login-modal {
  color: #fa6900 !important;
  cursor: pointer !important;
  /* Add this line to set the cursor to a pointer */
}

/* Used in login process*/
.page-content {
  background-color: #f9f9f9 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
h5 {
  color: #0091fa !important;
}
/* Background colour for mypage*/
.main-section {
  background-color: #f8f9fa;
  min-height: calc(100vh - 150px) !important;
}


.mdl-mini-footer {
  color: #f9f9f9 !important;
  background-color: #0091fa !important;
}
.mdl-mini-footer__link-list {
  margin: 0 !important;
  padding: 0 !important;

}

/*login modal popup*/
.dialog {
  z-index: 10;
  border: none;
  border-radius: 5px;
  margin: auto !important;
  margin-top: 150px !important;
  width: 330px;
  font-family: "Noto Sans JP", sans-serif !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  background: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
.dialog > .mdl-card__title {
  color: #f9f9f9 !important;
  background-color: #fa6900  !important;
  margin: -16px -14px -12px -14px !important;
  border-radius: 5px 5px 0 0;
  font-weight: 800 !important;
}
.dialog > .mdl-card__title > .mdl-card__title-text {

  font-weight: 400 !important;
}


/*login modal popup*/
#confirm-dialog {
  z-index: 10;
  border: none;
  border-radius: 5px;
  margin: auto !important;
  width: 60% !important;
  font-family: "Noto Sans JP", sans-serif !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  background: #fff;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}

.mdl-card__title {
  color: #f9f9f9 !important;
  background-color: #fa6900 !important;
 }
/* For buttons*/
.dialog>.mdl-card__actions {
  display: flex;
  align-items: center;
}

#forgot-password,
#login-switch {
  color: #0091fa !important;
}

#sign-in,
#login {
  background-color: #0091fa !important;
}

#modify-register {
  color: #0091fa !important;
  background-color: transparent;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  line-height: 36px !important;
}

#modify-register:hover {
  background-color: #ccc !important;
}

#confirm-submit {
  color: #fff !important;
  background-color: #960f8e !important;
}

.confirm-card-actions .mdl-button {
  border: none;
  border-radius: 2px;
  height: 36px;
  margin-left: auto !important;
  margin-right: auto !important;
  min-width: 64px;

  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  text-align: center;
  left: 10%;
}

/* MyPAGE */
#charts_and_stuff {
  width: 95% !important;
}

#categoryPicker_demand_div>div>label {
  display: none !important;
}

#categoryPicker_demand_div * {
  outline: none !important;
  border: none !important;
}

#categoryPicker_demand_div *:focus,
#categoryPicker_demand_div *:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

#demandDatePickerWrapper {
  user-select: none;
  display: flex !important;
  justify-content: flex-end !important;
}
/*Prevent black outline*/
#demandDatePicker {
  outline: none !important;
  border: none !important;
}

#demandDatePicker:focus,
#demandDatePicker:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

#demandDatePickerWrapper *,
#demandDatePickerWrapper *:focus,
#demandDatePickerWrapper *:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-inline-block {

  display: inline-block !important;
  background: #ddd !important;

  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.accordion-header {
  cursor: pointer !important;
  font-size: 14px !important;
  margin-top:8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: bold !important;
  color: #0091fa !important;
}
/*Color change when accordian opened*/
.active,
.accordion:hover {
  color: #0091fa;
}
/*Formatting of tables in accordian*/
.cost-table {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.mdl-layout {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.mdl-layout::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

dialog {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

dialog::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

/**** Mobile layout ****/
@media (max-width: 480px) {
  #cta-desktop, #hero-section-image, #second_image {
    display: none;
  }



  .mdl-grid {
    display: block;
  }
}

/* Tablet layout */
@media (min-width: 488px) and (max-width: 1024px) {
  .mdl-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
}

/* Desktop layout */
@media (min-width: 1024px) {

}

#mini-footer {
  font-size: 14px;
  font-weight: 400;
  line-height: 8px;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  color: #9e9e9e;
  position: fixed !important;
  width: 100%;
  bottom: 0;
  height: 60px !important;
  padding: 0 !important;
  z-index: 1;
}
/*Important for button centering*/
.mdl-button-footer {
  font-size: 12px;
  margin: auto !important;
}

.tablet_menu {
  /*Sticky and set on top left of screen. 1-col width*/
  position: sticky;
  position: fixed;
  top: 0;
  border-radius: 3px;
  height: 250px !important;
  margin-top: 150px !important;
  width: 50px !important;
  margin-left: 0px !important;
  background-color: #fa6900 !important;
}

.tablet_menu>.mdl-grid>.mdl-button {
  color: white !important;
}

#dashboard_div_demand, #dashboard_invoices, #dashboard_contracts {
  margin-bottom: 62px !important;
}


.invoice-summary-table, .contract-summary-table {
  width: 100% !important;

 margin: 8px !important;
 padding: 8px !important;
}
/* For 404 page */
.error {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the content vertically */
  align-items: center; /* Centers the content horizontally */
  height: 100%; /* Ensure the content does not stretch vertically */
  min-height: auto; /* Prevent minimum height from forcing vertical stretch */
}

.error>.mdl-card__title-text {
  margin: 10px 0; /* Add some space between the text elements */
  font-size: 16px !important;
}

.error-spacer {
  flex-grow: 1; /* Fills the remaining space, pushing content upwards */
}






.download-button-container {
  flex-shrink: 0 !important;
  text-align: right !important;
  padding-left: 10px !important;
}
.download-button-container > .mdl_button {
  color: #0091fa
}
.download-invoice-button {
  cursor: pointer !important;
  color: #0091fa !important;
}
/*
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
*/

/*
.three-card>.mdl-card__media {
  background-color: rgba(0, 145, 250, 0.1) !important;
}

.three-card>.mdl-card__media>img {
  width: 100% !important;
  height: 100% !important;
  margin: auto !important;
  display: block !important;
  max-width: 100px;
}

.three-card>.mdl-card__title-three {
  background-color: rgba(0, 145, 250, 0.1) !important;
  color: rgba(0, 145, 250) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  margin: auto;
  padding: 8px;
  text-align: center !important;
  width: 100%;
}

.three-card>.mdl-card__supporting {
  background-color: rgba(0, 145, 250, 0.1) !important;
  display: -webkit-flex !important;
  display: flex !important;
  align-items: center !important;
  height: 100px;
  padding: 8px;
}

.three-card>.mdl-card__actions {
  background-color: rgba(0, 145, 250, 0.1) !important;
}
*/

/*
body>div>div>header>div.mdl-layout__drawer-button>i {
  margin-top: 25% !important;
  margin-bottom: 25% !important;
}

div.mdl-drawer.is-visible {
  background-color: #f9f9f9 !important;

}

div.mdl-layout__drawer.is-visible>nav>a {
  color: #fa6900 !important;
}

div.mdl-layout__drawer .mdl-layout-title {
  margin-left: 20px;
}
*/

/*
#hero-section {
  margin-top: 0 !important;
  padding: 0 !important;
}


  margin-bottom: 12px;
}

.intro-card {
  padding: 80px !important;
}

.cta {
  background-color: #0091fa;
  color: #ccc !important;
}

.cta>.mdl-cell {
  background-color: #0091fa !important;
}

div.cta.mdl-grid.mdl-cell--12-col>div.mdl-cell {
  background-color: #0091fa !important;
  min-height: auto !important;
}

body>div>div>main>div>div.cta.mdl-grid.mdl-cell--12-col>div.mdl-cell.mdl-cell--9-col.mdl-cell--6-col-tablet.mdl-card>h3 {
  color: #ccc !important;
}

main>div>div>main>div>div.cta.mdl-grid.mdl-cell--12-col>div.mdl-cell.mdl-cell--9-col.mdl-cell--6-col-tablet.mdl-card>h3 {
  color: #f9f9f9;
  font-weight: 600 !important;
  font-size: 34px;
  text-align: center !important;

}
*/

/*
.page-content-image {
  background-color: #f9f9f9 !important;
  width: 250px;
  height: 250px;
  margin-left: 50px !important;
  margin-right: 50px !important;
  margin-bottom: 500px !important;
  margin-bottom: 500px !important;
}
*/

/*
#usage-download {
  color: #fff !important;
  background-color: #3f51b5;
  border-radius: 2px;
  position: relative;
  min-width: 150px;
  padding: 0 16px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  margin: 20px;
  text-align: center;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -0%);
  line-height: 36px;
}
*/
/*
#usage-upload {
  color: #fff !important;
  background-color: #3f51b5;
  border-radius: 2px;
  position: relative;
  min-width: 150px;
  padding: 0 16px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  margin: 20px;
  text-align: center;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -0%);
  line-height: 36px;
}
*/
/*
#enrol-submit {
  color: #fff !important;
  background-color: #960f8e !important;
  border-radius: 2px;
  position: relative;
  min-width: 150px;
  padding: 0 16px;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  margin: 20px;
  text-align: center;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -0%);
  line-height: 36px;
}
*/

/*
header>div.mdl-layout__drawer-button>i {
  color: #fa6900 !important;
}
*/

/*
.faq-content {
  margin-top: 60px !important;
  margin-left: 0 !important;
  height: 100%;
}
*/

/*
div.mdl-layout__drawer.is-visible>nav>a {
  font-weight: 600 !important;
  line-height: 35px;
}
*/

/*
.page-content>.mdl-grid .mdl-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-content>.mdl-grid .mdl-card {
  margin-top: 5px !important;
  background-color: #f9f9f9 !important;
  margin: auto !important;
  max-width: 600px !important;
}
*/
/*
.page-content>.mdl-grid .mdl-card .mdl-card__actions {
  margin: auto !important;
  max-width: 600px !important;
}
*/

/*
h2 {
  font-weight: 600 !important;
  font-size: 34px !important;
  line-height: 54px !important;
  color: #fa6900 !important;
}


#enrolment-button-header {
  background-color: #B000FA;
  color: #f9f9f9;
  opacity: 0.85;
}

#enrolment-button-header:hover {
  background: #B000FA !important;
  opacity: 1;
  font-weight: 800 !important;
}

#enrolment-button {
  background-color: white;
  font-weight: 600 !important;
  color: #B000FA;
  width: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600 !important;
  font-size: 14px;
  height: 35px;

}

#enrolment-button:hover {
  background: #B000FA !important;
  color: white;
  opacity: 1;
  font-weight: 800 !important;
}
*/

/*
div.card-text-1.mdl-card__supporting-text {
  font-weight: 600 !important;
  font-size: 18px;
  line-height: 28px;
  margin: 0;
  color: #0091fa;
}
*/

/*
invoice-container>mdl-card__supporting-text {
  font-weight: 400 !important;
  font-size: 16px;
  line-height: 22px;
  color: black !important;
}
*/

/*
div.card-text-2 {
  font-weight: 400 !important;
  font-size: 16px;
  line-height: 28px;
}
*/

/*
.mdl-card .mdl-button {
  background-color: #0091fa;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30px;
  font-weight: 400 !important;
  font-size: 18px;
  line-height: 28px;
  color: #f9f9f9;
  opacity: 0.85;
}

.mdl-card .mdl-button:hover {
  background: #B000FA !important;
  opacity: 0.85;
}
*/

/*@media*/

/*
  #enrolment-button-header {
    margin-right: 30px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding: 2px !important;
    font-size: 12px !important;
  }*/

  /*about page
#login-dialog>div.login-card.mdl-card__title.mdl-color-text--white>div {
  margin-left: 10% !important;
  margin-right: 10% !important;
  font-weight: 600px !important;
}
*/

/*
#fixed-tab-1>div>div.mdl-card__title.mdl-color-text--primary>div {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-family: "Noto Sans JP", sans-serif !important;
  color: #0091fa;
  font-size: 30px;
  font-weight: 400;
  line-height: normal;

  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
}

.form-group {
  text-align: left !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  box-sizing: border-box;

  display: block;

  margin-left: 35px;
  width: 95% !important;
}

label {
  display: inline-block;
  padding: 5px;
  margin: 5 5 5 0;
  width: 100%;
}

input,
select {
  display: inline-block;
  padding: 5px;
  margin: 5 5 5 0;
  width: 100%;
}

div.mdl-layout__tab-bar.mdl-js-ripple-effect.is-casting-shadow.mdl-js-ripple-effect--ignore-events>a {
  color: #fa6900;
  font-weight: 600 !important;
  background-color: white !important;
}

div.mdl-layout__tab-bar.mdl-js-ripple-effect.is-casting-shadow.mdl-js-ripple-effect--ignore-events>a::after {
  background-color: #fa6900;
}


.mdl-card__title-text {
  margin-left: 10% !important;
  margin-right: 10% !important;
  font-weight: 600px !important;
  color: #fa6900;
}


body>div>div>main>div>div>div.mdl-card__title-text.mdl-grid,
body>div>div>main>div>div:nth-child(1),
body>div>div>main>div>div:nth-child(3),
body>div>div>main>div>div:nth-child(5),
body>div>div>main>div>div:nth-child(7) {
  font-weight: bold !important;
  color: #fa6900 !important;

}

.faq-content {
  margin-top: 32px !important;
}

.faq-content>.accordion>.mdl-card__supporting-text {
  margin-left: 8px !important;
}
*/

/*

.mdl-data-table {
  margin-left: 10% !important;
  margin-right: 10% !important;
  table-layout: fixed;
}

.mdl-card-about__supporting-text {
  margin-left: 10% !important;
  margin-right: 10% !important;
}

.mdl-data-table__cell--non-numeric {
  white-space: normal;
  word-wrap: break-word;
}
*/

/*

.accordion {
  margin-bottom: 6px !important;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  padding: 18px;
  
}





.panel {
  padding: 0 !important;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}
*/