/* verication code input */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
}
:root {
  --spacing: 4px;
}
code {
  background: var(--background3);
}

/* @media only screen and (max-width: 600px) { */
  .number-code > div {
    display: flex;
  }
  .number-code > div > input:not(:last-child) {
    margin-right: calc(var(--spacing) * 2);
  }
  .content-area {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    background: var(--background2);
    padding: var(--spacing);
    border-radius: var(--spacing);
    max-width: 100%;
  }
  .content-area p {
    color: var(--text2);
    font-size: 0.8em;
  }
  input.code-input {
    font-size: 18px;
    width: 1px;
    text-align: center;
    flex: 1 0 1em;
    border-radius: 0px;
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: 2px solid #93a2b6;
  }

  input.code-input:focus {
    border-color: #93a2b6 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  input.code-input:-webkit-autofill{
      -webkit-text-fill-color: #000;
  }
/* END Verification Code INput */


.dialog-xm{
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.5);
}
.dialog-content-xm{
  box-shadow: 0 4px 8px 0 rgba(54, 39, 39, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #172D3E;
  padding: 20px;
  width: 80%;
  border-radius: 8px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
@media(min-width: 1200px) {
  .dialog-content-xm {
    width: 35%;
  }
}

@media (max-width:576px){
  .dialog-content-xm{
    top: auto;
    bottom: 10px;
    width: 90%;
  }
}

.dialog-content-xm-text{
top: 50%;
position: absolute;
transform: translateY(-50%);
left: 50px;
}
/* ================================ */

.add-radius{
border-radius: 4px !important;
}
.add-radius-sm{
border-radius: 12px !important;
}
.add-radius-md{
border-radius: 20px !important;
}
.add-radius-lg{
border-radius: 30px !important;
}

@media (max-width:576px){
.button-button-wrp{
  position: fixed;
  bottom: 30px;
  left: 0;
  width: 100%;
}
}

.slide-modal-overlay{
position: fixed;
width: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 7;
top: 0;
left: 0;
height: 100%;
display: none;
}

.slide-modal-body{
position: absolute;
bottom: 0;
width: 100%;
height: 75%;
padding: 16px;
border-radius: 20px 20px 0px 0px;
overflow: auto;
z-index: 8;
display: none;
}

.uppercase {
text-transform: uppercase !important;
}
.capitalize{
text-transform: capitalize !important;
}

@media (min-width: 768px){
.slide-modal-body{
  padding: 20px;
  width: 40%;
  border-radius: 8px;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 8px;
  height: fit-content;
  top: 80px;
}
}


/* swap - badge */
.s-sigil-waiting{
border: 1px solid #717af1;
color: #717af1;
padding: 4px 6px;
text-align: center;
border-radius: 4px;
width: fit-content;
}

.s-sigil-expired{
border: 1px solid #f6a249;
color: #f6a249;
padding: 4px 6px;
text-align: center;
border-radius: 4px;
width: fit-content;
}
.s-sigil-processing{
border: 1px solid #26b46a;
color: #26b46a;
padding: 4px 6px;
text-align: center;
border-radius: 4px;
width: fit-content;
}
.s-sigil-completed{
border: 1px solid #737674;
color: #737674;
padding: 4px 6px;
text-align: center;
border-radius: 4px;
width: fit-content;
}