@import url("./bootstrap.min.css");

/* Desktop */
@media (min-width: 992px) {
  .card {
    margin-top: 5%;
    margin-bottom: 5px;
    max-width: 70%;
  }

  .time-left-progress {
    margin-left: 10%;
    margin-right: 10%;
  }

  #add_form {
    margin-left: 10%;
    margin-right: 10%;
  }

  a .badge {
    font-size: 14px;
  }

  .navbar {
    margin-left: -15px;
    margin-right: -15px;
  }

  #disable_offline {
    margin-left: 10%;
    margin-right: 10%;
  }

  #decryption {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 30px;
  }

  .row {
    margin-bottom: 15px;
  }

  .cr {
    margin-right: 16%;
  }
}

/* Mobile */
@media (max-width: 992px) {
  .card {
    margin-top: -5px;
    border: none;
  }

  a .badge {
    font-size: 15px;
  }

  .navbar {
    margin-left: -16px;
    margin-right: -16px;
  }

  input {
    min-width: 150px;
    margin-bottom: 10px;
  }

  #add {
    margin-top: 10px;
  }

  #decrypt {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .cr {
    margin-right: 5%;
  }

  .button-updown {
    visibility: hidden;
  }
}

.modal {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
}

.modal-dialog {
  margin-top: 5%;
}

#rename_secret {
  margin-right: 10px;
}

.ten-top-margin {
  margin-top: 10px;
}

.cr {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: right;
  color: gray;
}

.cr a {
  color: gray;
  text-decoration: none;
}

.cr a:hover {
  text-decoration: none;
  color: darkgray;
}

.navbar-brand img {
  margin-top: 3px;
}

.navbar {
  padding-left: 20px;
  padding-right: 20px;
}

.token:active {
  background-color: rgb(80, 80, 80);
}

.badge,
.badge:hover {
  color: white;
  text-decoration: none;
  padding: 7px;
}

.token {
  padding: 10px 20px;
}

.button-updown {
  margin-right: 15px;
  margin-top: -3px;
  padding: 3px;
  font-size: 20px;
  border: none;
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-v13-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('../fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url('../fonts/source-sans-pro-v13-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/source-sans-pro-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('../fonts/lato-v23-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local(''), url('../fonts/lato-v23-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('../fonts/lato-v23-latin-700.woff2') format('woff2');
}