html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}
/* login page start*/

@font-face {
  font-family: gotham;
  src: url(../fonts/GothaProBol.otf);
}

@font-face {
  font-family: sfui;
  src: url(../fonts/SFUITextRegular.ttf);
}

body {
  margin: 0;
}

.login-page__container {
  overflow: auto;
  background-image:url('../img/background-login-image-mob.jpg');
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
  width: 100%;
  height: 100vh;
  min-height: 450px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.login-page__form {
  max-width: 433px;
}

.login-page__form-title {
  font-size: 36px;
  width: 100%;
  min-height: 50px;
  color: #ffffff;
  font-family: gotham, sans-serif;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.login-page__form-title-2line {
  font-size: 32px;
  width: 100%;
  min-height: 90px;
  color: #ffffff;
  font-family: gotham, sans-serif;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.login-page__form-fields {
  box-sizing: border-box;
  padding: 0 10px;
}

.login-page__form-input {
  border-width: 0;
  width: 100%;
  min-height: 43px;
  border-radius: 3px;
  background-color: #ffffff;
  margin-bottom: 8px;
  padding-left: 16px;
  font-family: sfui, sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 300;
}

.login-page__form-submit-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.login-page__form-submit {
  border-width: 0;
  width: 100%;
  min-height: 43px;
  border-radius: 20px;
  background-color: #0093d7;
  cursor: pointer;
  color: #ffffff;
  font-family: sfui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-page__form-submit:focus {
  outline: none;
  background-color:#A8A8A8;
}

.login-page__form-submit:disabled {
  background-color:#A8A8A8;
}

.login-page__form-submit:hover:enabled {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3cb0fd), to(#3498db));
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.login-page__form-copyright {
  width: 100%;
  color: #ffffff;
  font-family: sfui, sans-serif;
  font-size: 12px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 360px) and (max-width: 766px) {
  .login-page__form-title {
      font-size: 40px;
  }

  .login-page__form-title-2line {
      font-size: 28px;
  }
}

@media screen and (min-width: 767px) {
  .login-page__container {
      background-image:url('../img/background-login-image.jpg');
  }

  .login-page__form-title {
      font-size: 56px;
  }

  .login-page__form-title-2line {
      font-size: 32px;
  }

  .login-page__form-submit {
      width: 213px;
  }
}






/* login page end */

.default-avatar-icon {
    font-size: 167px;
    float: left;
    /* background-image:url('../img/baseline_person_black_48dp.png');
    height: 100%;
    background-position: 52% -24%;
    width: 100%;
    background-size: 138%;
    background-repeat: no-repeat; */
}

.default-input-icon {
  background-image:url('../img/baseline_input_black_18dp.png');
  height: 20px;
  width: 20px;
}

.default-lock_open-icon {
  background-image:url('../img/baseline_lock_open_black_18dp.png');
  height: 20px;
  width: 20px;
}

.user-info-card {
    max-width: 700px;
    width: 100%;
    margin: auto;
}
.user-info-list {
    text-align: left;
}
.demo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.demo-layout .demo-header .mdl-textfield {
  padding: 0px;
  margin-top: 41px;
}
.demo-layout .demo-header .mdl-textfield .mdl-textfield__expandable-holder {
  bottom: 19px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.demo-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
  z-index: -1;
}
.demo-drawer .demo-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 16px;
  height: 151px;
}
.demo-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.demo-navigation {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
  background-color: #c62828;
}
.demo-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 32px;
}

.demo-content {
  max-width: 1608px;
}

.demo-charts {
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
}
.demo-chart:nth-child(1) {
  color: #ACEC00;
}
.demo-chart:nth-child(2) {
  color: #00BBD6;
}
.demo-chart:nth-child(3) {
  color: #BA65C9;
}
.demo-chart:nth-child(4) {
  color: #EF3C79;
}
.demo-graphs {
  padding: 16px 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder, :root .demo-graphs {
  min-height: 664px;
}
_:-ms-input-placeholder, :root .demo-graph {
  max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
  color: #00b9d8;
}
.demo-graph:nth-child(2) {
  color: #d9006e;
}

.demo-cards {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
              -ms-grid-row-align: flex-start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.demo-cards .demo-separator {
  height: 32px;
}
.demo-cards .mdl-card__title.mdl-card__title {
  color: white;
  font-size: 24px;
  font-weight: 400;
}
.demo-cards ul {
  padding: 0;
}
.demo-cards h3 {
  font-size: 1em;
}
.demo-updates .mdl-card__title {
  min-height: 70px;
  background-image: url('images/dog.png');
  background-position: 90% 100%;
  background-repeat: no-repeat;
}
.demo-cards .mdl-card__actions a {
  color: #00BCD4;
  text-decoration: none;
}

.demo-options h3 {
  margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
  margin: 0;
  list-style-type: none;
}
.demo-options li {
  margin: 4px 0;
}
.demo-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}
.demo-options .mdl-card__actions {
  height: 64px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.right-main-menu > li > i {
    vertical-align: middle;
    padding-right: 32px;
}

.maps-settings i {
    vertical-align: middle;
}

.demo-list-three > .mdl-list__item--three-line {
    height: 55px;
}
.site-view-navigation > a {
  border-bottom: 4px solid transparent;
}

.site-view-navigation > a:hover, .site-view-navigation > .is-active {
    border-bottom: 4px solid #b71c1c;
}

.site-view-search {
    border-bottom: 1px solid #b71c1c;
}

.demo-card-wide.mdl-card {
  max-width: 512px;
  width: 100%;
  margin: auto;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
    background: #f7f7f7;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}

.snippet-demo {
    margin: 100px auto;
}

.identity-form {
    color: gray;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    color: gray;
    -webkit-text-fill-color: gray !important;
}

.mdl-textfield__label:after {
    background-color: #3f51b5 !important;
}

.submit-div {
    text-align: center;
}

.copyright {
    display: block;
    margin-top: 15px;
}

.errorlist {
    list-style: none;
    padding: 5px 19px;
    color: #e23924;
}

.pass-change {
    margin-top: 16px;
}

.password-change-card {
    max-width: 500px;
    width: 100%;
    margin: auto;
}
.password-change-card .mdl-card__supporting-text {
    padding-left: 25px;
}

.mdl-button > i {
    font-size: 14px;
    margin-bottom: 3px;
}

.mdl-textfield__input.danger {
    border: 1px solid red;
}