html,
body {
  font-family: Helvetica, Arial, SansSerif;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 200%;
}

* {
  box-sizing: border-box;
}

a,
a:active,
a:focus,
a:hover {
  color: #0088cc;
  text-decoration: none;
}

input,
select {
  font-family: Helvetica, Arial, SansSerif;
  text-align: left;
  font-size: 14px;
  color: black;
  border: 1px solid #c0d1d9;
  border-radius: 2px;
  padding: 10px;

  margin-bottom: 20px;
}

select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}

input::-webkit-date-and-time-value {
  text-align: left;
}

select::-webkit-date-and-time-value {
  text-align: left;
}

button,
.btn {
  border: none;
  background: none;
  /*background-color: #0088cc;*/
  font-size: 16px;
  color: #0088cc;
  border-radius: 40px;
  padding: 12px 24px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-primary {
  border: none;
  background: none;
  background-color: #0088cc;
  font-size: 16px;
  color: white;
  border-radius: 40px;
  padding: 12px 24px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.screen {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
}

.testnet-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  background: red;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.testnet-padding {
  padding-top: 60px;
}

/**/

.label {
  font-weight: bold;
  flex-shrink: 0;
  color: black !important;
}

#multisig_logoutButton {
  padding-left: 0;
  margin-bottom: 30px;
}

#multisig_updateButton {
  padding-left: 0;
}

#multisig_createNewOrderButton {
  margin-top: 30px;
  margin-bottom: 10px;
}

#order_actions {
  margin-bottom: 30px;
}

#order_approveButton {
  justify-content: center;
  margin-bottom: 10px;
}

/* HEADER */

#header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  min-height: 68px;
  padding: 16px;
  margin: 0 auto;
  justify-content: flex-start;
}

#header_logo {
  width: 32px;
  height: 32px;
  background-image: url(../assets/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 8px;
  flex-shrink: 0;
}

#header_title {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 16px;
  cursor: pointer;
  color: #04060b;
}

#header_grow {
  flex-grow: 1;
}

#tonConnectButton {
  flex-shrink: 0;
}

/* START SCREEN */

#startScreen button {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* MAIN SCREEN */

#startScreen,
#importScreen {
  align-items: center;
  justify-content: center;
  height: 80%;
}

#import_input {
  width: 60%;
}

#multisigScreen,
#newOrderScreen,
#orderScreen,
#newMultisigScreen {
  align-items: center;
}

.panel {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  width: 100%;
  max-width: 700px;
}

#newOrderScreen input,
#newOrderScreen select {
  width: 100%;
}

.badge {
  display: inline-block;
  background-color: #0088cc;
  color: white;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  height: 20px;
  line-height: 12px;
  transform: translateY(-2px);
}

/* MULTISIG SCREEN */

#multisigScreen {
}

#multisig_content {
  flex-direction: column;
}

#mainScreen_ordersList {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

#mainScreen_ordersList div {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebebeb;
}

.orderListItem_title {
  color: #0088cc;
}

#multisig_error {
  color: #ec6471;
}

.multisig_lastOrder {
  cursor: pointer;
}

/* ORDER SCREEN */

#deposit_screen {
  align-items: center;
}

#orderScreen {
}

#order_content {
  flex-direction: column;
}

#order_backButton {
  padding-left: 0;
  margin-bottom: 30px;
}

#order_error {
  color: #ec6471;
}

#order_actionsTitle {
  margin-top: 30px;
}

#order_approveNote {
  color: #696969;
  text-align: center;
  justify-content: center;
}

/* new multisig */

.line {
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

#newMultisig_addProposerButton,
#newMultisig_addSignerButton {
  padding-left: 0;
}

/* loading */

#loadingScreen {
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 80%;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loading {
  margin-top: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid #1d98dc;
  border-left: 5px solid transparent;

  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
}

/* NEW MULTISIG */

.address-input {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
}

.address-input-num {
  flex-shrink: 0;
  margin-right: 8px;
}

.address-input input {
  flex-grow: 1;
}