/* =============================================================
 * MAIN STYLESHEET
============================================================= */
:root {
   /* Branding colors */
   --primary: #324793;
   --secondary: #3E5FA9;
   --light: #F4F6FA;
   --rgb-primary: 50, 71, 147;
   --rgb-secondary: 62, 95, 169;

   /* Gray scale */
   --gray-dark: #3B4556;
   --gray-mid: #80869D;
   --gray: #DDE1EE;
   --gray-light: #F3F4F9;
}

html body {
   font-family: 'Work Sans', sans-serif;
   font-size: .875rem;
   font-weight: 400;
   color: var(--gray-dark);
   letter-spacing: -.35px;
   position: relative;
   background-color: var(--light);
}

hr { background-color: rgba(var(--rgb-primary), .5) !important; }

/* Text */
body h1, body h2, body h3, body h4, body h5, body h6 {
   font-weight: 600;
   margin-bottom: 25px;
}

p { margin-bottom: 1rem ; }

body small { font-size: .8rem; }

body a {
   text-decoration: none;
   color: var(--primary);
   transition: ease-in-out .2s;
}
body a:hover { color: var(--secondary); }

/*
 * LAYOUT
============================================================= */
/* Wrappers */
.wizard { width: 100%; }

.resume-card { transition: opacity .15s linear; }
.resume-card.hide { display: none; }
.resume-card.show { display: block; }

.ticket::before, .ticket::after {
   content: '';
   height: 12px;
   width: 100%;
   position: relative;
   display: block;
}
.ticket::before {
   top: 0px;
   background-image: url('../imgs/ticket-top.png');
   background-repeat: repeat-x;
   background-position: top left;
}
.ticket::after {
   bottom: 0px;
   background-image: url('../imgs/ticket-bottom.png');
   background-repeat: repeat-x;
   background-position: top left;
}

@media ( min-width: 768px ) {
   .wizard { width: 25%; }

   .resume-card {
      margin-top: 40px;
      height: 550px;
   }
}
@media ( min-width: 992px ) {
   .ticket {
      max-width: 475px;
      position: relative;
      z-index: 1;
   }
}

/* Master head */
.masthead, .wizard-bar { height: 70px; }

/* Branding */
.site-brand {
   width: 40px;
   height: 40px;
   object-fit: contain;
}
@media ( min-width: 992px ) {
   .site-brand { width: 140px; }
}

/* Wizard */
.wizard-btn {
   border: 1px solid var(--primary);
   background-color: white;
   border-radius: 5rem;
   color: var(--primary);
   width: 40px;
   height: 40px;
}
.wizard-btn.active { background-color: rgba(var(--rgb-primary), .12); }

@media ( min-width: 992px ) {
   .wizard-btn {
      width: 40px;
      height: 40px;
   }
}

/* Headings & Text */
.tab-pane h1, .tab-pane h2,
.tab-pane h3, .tab-pane h4,
.tab-pane h5, .tab-pane h6 { font-weight: 600; }

.section-title h1 { display: none; }
.section-title h1.active { display: block !important; }

.tab-title { display: none; }

/* List */
.resume-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

.resume-list li {
   padding: .25rem .25rem .25rem 1.5rem;
   position: relative;
}
.resume-list li::before {
   content: '\f00c';
   font-family: 'Font Awesome 5 Free';
   font-weight: bold;
   position: absolute;
   left: 0;
}

.ccList { height: 210px; }

/* Tables */
.table-resume th { font-weight: 600; }
.table-resume td { text-align: end; }

.table-resume tr:last-child th,
.table-resume tr:last-child td {
   font-size: 1.12rem;
   font-weight: bold;
}

/* Images */
.ccBrand-img {
   border: 1px solid rgba(var(--rgb-primary), .12);
   border-radius: .5rem;
   padding: .12rem .25rem;
   width: 64px;
   height: 32px;
   object-fit: contain;
}

.resume-card img { width: 100%; }

@media ( min-width: 992px ) {
   .resume-card img {
      position: absolute;
      right: 0;
      width: 572px;
   }
}

/* Buttons & Links */
.calc-thumb {
   width: 61px;
   height: 61px;
}

.calc-input label { font-weight: 600; }

.calc-input button {
   width: 35px;
   height: 35px;
   border: 1px solid var(--primary);
   background-color: rgba(var(--rgb-primary), .12);
   color: var(--primary);
   transition: ease-in-out .2s;
}
.calc-input button:hover {
   background-color: rgba(var(--rgb-primary), 1);
   color: white;
}
.calc-input input {
   max-width: 70px;
   height: 35px;
   border: 1px solid var(--gray);
   padding: .5rem;
   text-align: center;
}

/* =============================================================
 * BOOTSTRAP OVERRIDES
============================================================= */
/* Forms */
.form-label {
   margin-bottom: 10px;
   font-weight: 600;
}

body .form-control, body .form-select, body .form-check-input {
   border-color: rgba(var(--rgb-primary), .12);
   font-size: .875rem;
}
body .form-control::placeholder { color: var(--gray-mid); }

body .form-check-input:checked {
   background-color: var(--secondary);
   border-color: var(--secondary);
}

body .input-group-text {
   border-right: 0;
   border-color: rgba(var(--rgb-primary), .12);
   background-color: white;
   color: rgba(var(--rgb-primary), .12);
}

/* Cards */
body .card {
   border-color: rgba(var(--rgb-primary), .12);
   border-radius: 0;
}

body .card-header, body .card-footer { background-color: transparent !important; }
body .card-header { border-bottom: 0; }
body .card-footer { border-color: rgba(var(--rgb-primary), .12); }

/* Buttons & Links */
body .btn {
   border-radius: 0;
   border: 2px solid;
   font-weight: 600;
}
body .btn:hover {
   background-color: var(--secondary);
   border-color: var(--secondary);
   color: white;
}

body .btn-primary {
   background-color: var(--primary);
   border-color: var(--primary);
   color: white;
}
body .btn-primary:disabled,
body .btn-primary.disabled {
   background-color: var(--primary);
   border-color: var(--primary);
   opacity: .25;
}

body .btn-secondary {
   background-color: white;
   color: var(--gray-dark);
   border-color: var(--primary);
}

body .btn-link {
   border-color: transparent;
   text-decoration: none;
   color: var(--primary);
   font-weight: 400;
}

/* Tabs */
body .nav-tabs .nav-link {
   border-radius: 0;
   color: var(--primary);
   border-color: transparent;
   font-weight: 600;
   font-size: 1rem;
   padding: .75rem 1rem;
}
body .nav-tabs .nav-link:hover {
   border-color: transparent;
   border-bottom: 4px solid var(--secondary);
}

body .nav-tabs .nav-link.active,
body .nav-tabs .nav-item.show .nav-link {
   color: var(--primary);
   border-color: transparent;
   border-bottom: 4px solid var(--primary);
}

/* Utilities */
body .border-bottom { border-bottom-color: rgba(var(--rgb-primary), .12); }

body .text-light { color: rgba(var(--rgb-primary), .25) !important; }
body .text-primary { color: var(--primary) !important; }

body .fw-bold { font-weight: 600 !important; }

body .shadow { box-shadow: 0 0.5rem 1rem rgba(var(--rgb-primary), 0.15) !important; }
body .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(var(--rgb-primary), 0.075) !important; }