@import url('components/button-popup.css');
@import url('components/alerts.css');
@import url('components/fab-btn.css');
@import url('components/top-nav.css');
@import url('components/bottom-nav.css');

@import url('components/custom-modal.css');

/* Fonts */
@font-face {
  font-family: "Mark Pro";
  src: url("../fonts/Mark Pro Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mark Pro";
  src: url("../fonts/Mark Pro Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --text-50: #100a0a;
  --text-100: #1f1414;
  --text-200: #3e2828;
  --text-300: #5d3c3c;
  --text-400: #7c5050;
  --text-500: #9c6363;
  --text-600: #af8383;
  --text-700: #c3a2a2;
  --text-800: #d7c1c1;
  --text-900: #ebe0e0;
  --text-950: #f5efef;

  --background-50: #0d0d0d;
  --background-100: #1a1a1a;
  --background-200: #333333;
  --background-300: #4d4d4d;
  --background-400: #666666;
  --background-500: #808080;
  --background-600: #999999;
  --background-700: #b3b3b3;
  --background-800: #cccccc;
  --background-900: #e6e6e6;
  --background-950: #f2f2f2;

  --primary-50: #fdece7;
  --primary-100: #fbdad0;
  --primary-200: #f8b5a0;
  --primary-300: #f48f71;
  --primary-400: #f16a41;
  --primary-500: #ed4512;
  --primary-600: #be370e;
  --primary-700: #8e290b;
  --primary-800: #5f1c07;
  --primary-900: #2f0e04;
  --primary-950: #180702;

  --secondary-50: #f7eded;
  --secondary-100: #efdcdc;
  --secondary-200: #e0b8b8;
  --secondary-300: #d09595;
  --secondary-400: #c17171;
  --secondary-500: #b14e4e;
  --secondary-600: #8e3e3e;
  --secondary-700: #6a2f2f;
  --secondary-800: #471f1f;
  --secondary-900: #231010;
  --secondary-950: #120808;

  --accent-50: #fce9e9;
  --accent-100: #f8d3d3;
  --accent-200: #f1a7a7;
  --accent-300: #ea7b7b;
  --accent-400: #e34f4f;
  --accent-500: #dd2222;
  --accent-600: #b01c1c;
  --accent-700: #841515;
  --accent-800: #580e0e;
  --accent-900: #2c0707;
  --accent-950: #160303;

  --warning-950: #281704;
  --warning-900: #502d08;
  --warning-800: #734b0c;
  --warning-700: #956910;
  --warning-600: #b88714;
  --warning-500: #daa618;
  --warning-400: #efb53f;
  --warning-300: #f3c86f;
  --warning-200: #f7da9f;
  --warning-100: #fbedcf;
  --warning-50:  #fdf7e8;

  --danger-950: #170606;
  --danger-900: #2f0d0d;
  --danger-800: #561919;
  --danger-700: #7d2626;
  --danger-600: #a43232;
  --danger-500: #c93e3e;
  --danger-400: #d05c5c;
  --danger-300: #dc8585;
  --danger-200: #e7adad;
  --danger-100: #f3d6d6;
  --danger-50:  #f9ebeb;

  --success-50: #011307;
  --success-100: #02260f;
  --success-200: #034c1e;
  --success-300: #05732d;
  --success-400: #08bf4a;
  --success-500: #0ae659;
  --success-600: #3bec7a;
  --success-700: #6cf19c;
  --success-800: #9df6bd;
  --success-900: #cdfadf;
  --success-950: #e6fdef;

}

*{
  transition: .5s ease;
}

body {
  font-family: 'Mark Pro';
  font-weight: 400;

  background-color: var(--background-50);
  color: var(--text-900);

  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5 {
  font-family: 'Mark Pro';
  font-weight: 700;
}

html {
  font-size: 100%;
} /* 16px */

h1 {
  font-size: 4.210rem; /* 67.36px */
}

h2 {
  font-size: 3.158rem; /* 50.56px */
}

h3 {
  font-size: 2.369rem; /* 37.92px */
}

h4 {
  font-size: 1.777rem; /* 28.48px */
}

h5 {
  font-size: 1.333rem; /* 21.28px */
}



/* -------------------------------- Assistant Tickets Modal -------------------------------- */

.redirect-ticket-container {
  display: flex;
  width: 100%;
  padding: 1.2rem 0;
  /* margin: .5rem 0; */
  border: 1px solid transparent;
  cursor:pointer;
  transition: .25s ease !important;
}

.redirect-ticket-container:hover {
  background: var(--background-200);
}

.redirect-ticket-container:not(:last-child) {
  border-bottom: 1px solid var(--background-400);
}

input[type="radio"]:checked + .redirect-ticket-container {
  border: 1px solid var(--primary-200);
  background: var(--background-300);
}

.redirect-ticket-number {
  width: 10%;
  text-align: left;
  font-weight: 700;
  padding-left: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.redirect-ticket-name {
  width: 25%;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.redirect-ticket-phase {
  width: 35%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.redirect-ticket-status {
  width: 15%;
  text-align: right;
  padding-right: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  text-align: center;
}

/* .redirect-ticket-status.done {
    background-color: var(--success-400);
} */

.redirect-ticket-payment {
    width: 15%;
    text-align: right;
    padding-right: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.redirect-ticket {
    padding: 0.5rem;
    border-radius: .3rem;
    width: 100%;
    text-align: center;
}

.redirect-ticket.paid {
    background: var(--success-400);
}

.redirect-ticket.not-paid {
    background: var(--danger-400);
}



.input[type="text"], .select, .search-bar {
    width: calc(51% - 0.5rem);
    margin: 0.5rem auto;
    margin-top: 0;
    background: var(--background-100);
    color: var(--text-900);
    border: 1px solid var(--background-200);
    border-radius: .75rem;
    padding: 1rem 0.5rem;
}

input.lighter{
    background: var(--background-200) !important;
}

.select {
    /* keep your bg */
    background:
    /* arrow layer */
    url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>\<path d='M3 4.5l3 3 3-3'/></svg>") no-repeat right 12px center / 12px 12px,
    var(--background-100);
    /* hide native arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
}

.redirect-modal-select {
    width: 25%;
    padding: 1rem;
    margin: 0 !important;
    border-radius: .5rem;
    color: var(--text-950);
}

/* -------------------------------- End Assistant Tickets Modal -------------------------------- */