/*
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program 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 Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

* {
  font-family: Ubuntu, Segoe, 'Lucidia Grande', sans-serif;
}

.paper {
  background-color: #fafafa;
  @include box-shadow(5px 0 5px -2px #ddd, -5px 0 5px -2px #ddd);
}


h1 {
  font-size: 30pt;
  font-weight: normal;
  padding-bottom: 10px;
}

h2 {
  font-size: 12pt;
  font-weight: normal;
}

.left-column {
  float: left;
  width: 45%;
}

.right-column {
  float: right;
  width: 50%;
}

.hidden {
  display: none;
}

#textsecure-icon {
  width: 50px;
  height: 50px;
}

#setup-qr {
  max-width: 256px;
  margin-top: 1em;
}

#verifyCode,
#code,
#number {
  box-sizing: border-box;
  width: 100%;
  display: block;
  margin-bottom: 0.5em;
}

#request-voice,
#request-sms {
  box-sizing: border-box;
}
#request-sms {
  width: 57%;
  float: right;
}
#request-voice {
  width: 40%;
  float: left;
}

.regionCode {
  width: 100%;
  margin-bottom: 1em;
}

.number-container {
  position: relative;
  margin-bottom: 0.5em;
}
.number-container::after {
  visibility: hidden;
  content: ' ';
  display: inline-block;
  border-radius: 1.5em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 100%;
  margin: 3px 8px;
  text-align: center;
}
.number-container.valid::after {
  visibility: visible;
  content: '✓';
  background-color: #0f9d58;
  color: #ffffff;
}
.number-container.invalid::after {
  visibility: visible;
  content: '!';
  background-color: #f44336;
  color: #ffffff;
}

#error {
  color: white;
  font-weight: bold;
  padding: 0.5em;
  text-align: center;
}
#error   { background-color: #f44336; }
#error:before {
  content: '\26a0';
  padding-right: 0.5em;
}
.narrow {
  box-sizing: border-box;
  margin: 0 auto 5px;
  width: 275px;
  max-width: 100%;
}

#single-device form {
  margin: 2em 0;
}

input.form-control, select.form-control {
  border-radius: 0;
}