/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";
@import "components/ic-typography";
@import "components/ic-forms";
@import "components/buttons";
@import "components/show_hide_opacity";
@import "pages/login/registration_dialog.scss";

* {
  margin: 0px;
  padding: 0px;
}
html, body {
  height: 100%;
  background: $ic-color-light;
  margin: 0;
  padding: 0;
  color: $ic-font-color-dark;
  font-weight: normal;
  @include fontSize(16px);
  font-family: $ic-font-family !important;
  min-width: auto !important;
}

#f1_container {
  display: flex;
  justify-content: center;
  padding: 15px;
}

#f1_card {
  width: 296px;
  height: 100%;
}

.mobileLogin-Header {
  z-index: 1;
  background-image: url("/images/mobile_login/canvas_logo_login.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 156px 108px;
  min-height: 156px;
}
.face {
  margin-top: 15px;
}

.face.back {
  display: none;
}

.flipped .face.back {
  display: block;
}

.flipped .face.front {
  display: none;
}

p {
  margin: 15px 0;
}

.flip-to-back, .flip-to-front {
  margin: 0;
}
.forgotBlock {
  color: var(--ic-brand-primary);
  margin: $ic-sp*2 auto 0;
  text-align: center;
}
input[type="text"], [type="email"], [type="password"] {
  padding: 0px 12px;
  @include fontSize(16px);
}
input::-webkit-input-placeholder {
  color: $ic-color-medium;
}
.error {
  color: $ic-color-danger;
  @include fontSize(14px);
  margin: $ic-sp 0;
  padding: $ic-sp/2;
  text-align: center;
}
.icon_url {
  display: none;
}
.button_box .Button {
  padding-bottom: $ic-sp/2;
}

.enrollment_link {
  bottom: 10px;
  #{direction(left)}: 0;
  #{direction(right)}: 0;
  text-align: center;
}

.ic-Login__banner-title {
  font-size: .9em;
}

.ic-Login__banner-subtitle {
  font-size: .95em;
  font-weight: 600;
}
