body,

html {

  font-family: "Roboto", sans-serif;

  font-size: 14px;

  letter-spacing: 0.5px;

  margin: 0px;

  color: #2c2c2c;

  line-height: normal;

  padding: 0px;

}

body {

  background-color: #f8f8f8;

  padding-bottom:20px;

}

.form-md {

  width: 100%;

  margin-top: 25px;

}



.card-header {

  background-color: rgb(44 44 44);

  font-size: 20px;

  color: white;

}



.card-header:first-child {

  border-radius: 5px 5px 0 0;

}



:root {

  --hue: 223;

  --bg: hsl(var(--hue), 90%, 90%);

  --fg: hsl(var(--hue), 90%, 10%);

  --primary: #f68d2d;

  --trans-dur: 0.3s;

  --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);

  font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));

}



header {

  background-color: #2c2c2c;

  padding: 10px;

  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0/8%);

}

header img {

  width: 180px;

}



.import-form {

  display: none;

}

header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

header .profile {

  position: relative;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 12px;

  cursor: pointer;

  text-align: end;

}

header .profile h3 {

  text-align: end;

  line-height: 1;

  margin-bottom: 4px;

  font-weight: 600;

  color: white;



  font-size: 24px;

}

header .profile p {

  line-height: 1;

  font-size: 14px;

  opacity: 0.6;

  margin: 0;

  color: white;

}



/* menu (the right one) */



.menu {

  position: absolute;

  top: calc(100% + 44px);

  right: 16px;

  width: 180px;

  min-height: 100px;

  background: #fff;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

  opacity: 0;

  transform: translateY(-10px);

  visibility: hidden;

  transition: 300ms;

  z-index: 1111;

}



.menu::before {

  content: "";

  position: absolute;

  top: -10px;

  right: 14px;

  width: 20px;

  height: 20px;

  background: #fff;

  transform: rotate(45deg);

  z-index: -1;

}



.menu.active {

  opacity: 1;

  transform: translateY(0);

  visibility: visible;

}



/* menu links */



.menu ul {

  position: relative;

  display: flex;

  flex-direction: column;

  z-index: 10;

  background: #fff;

  padding-left: 0;

  margin-bottom: 0;

}



.menu ul li {

  list-style: none;

}



.menu ul li:hover {

  background: #eee;

}



.menu ul li a {

  text-decoration: none;

  color: #000;

  display: flex;

  align-items: center;

  padding: 15px 20px;

  gap: 6px;

  font-size: 16px;

}



.menu ul li a i {

  font-size: 1.2em;

}



.drop_box {

  margin: 10px 0;

  padding: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border: 3px dotted #a3a3a3;

  border-radius: 5px;

  position: relative;

}



.drop_box h4 {

  font-size: 18px;

  font-weight: 600;

  color: #2e2e2e;

}



.drop_box p {

  margin: 0 auto;

  margin-top: 10px;

  margin-bottom: 20px;

  font-size: 14px;

  color: #a3a3a3;

  text-align: center;

  max-width: 700px;

}



.drop_box input {

  /* margin: 10px 0;

  width: 100%;

  background-color: #e2e2e2;

  border: none;

  outline: none;

  padding: 12px 20px;

  border-radius: 4px; */

  display: none;

}



.form-md .gl-form-asterisk {

  background-color: inherit;

  color: #e32b2b;

  padding: 0;

  padding-left: 3px;

}

.form-md .gl-form-asterisk:after {

  content: "*";

}

.form-label {

  font-weight: 500;

}

input.form-control,

.form-select {

  font-size: 16px;

  height: 45px;

  border-radius: 5px;

}

input.form-control:focus,

.form-select:focus {

  border: 1px solid #2c2c2c;

  outline: none;

  box-shadow: none;

}



.form-md .btn-primary {

  background-color: #2c2c2c;

  border-color: #2c2c2c;

  border-radius: 5px;

  font-size: 16px;

  margin-top: 27px;

  width: 100%;

}

.form-md .btn-primary:hover,

.form-md .btn-primary.active,

.form-md .btn-primary:focus {

  background-color: #f68d2d;

  border-color: #f68d2d;

  color: #fff;

  box-shadow: none;

}

.form-md .drop_box .btn-primary {

  background-color: #f68d2d;

  border-color: #f68d2d;

  color: #fff;

  box-shadow: none;

  width: max-content;

  margin-top: 0;

}

.form-md .submit-job:hover,

.form-md .submit-job:focus,

.form-md .drop_box .btn-primary:hover,

.form-md .drop_box .btn-primary:focus {

  background-color: #2c2c2c;

  border-color: #2c2c2c;

}



.or {

  display: block;

  height: 1px;

  background-color: black;

  width: 100%;

  margin-top: 20px;

  margin-bottom: 10px;

  position: relative;

}

.or::before {

  content: "OR";

  left: 0;

  right: 0;

  height: 10px;

  background-color: white;

  position: absolute;

  width: 50px;

  margin: 0 auto;

  display: block;

  text-align: center;

  top: -8px;

}



.card-selection-new {

  display: none;

}



.question-heading {

  float: left;

  width: 70%;

  border-radius: 5px;

  background-color: rgb(44 44 44);

  font-size: 20px;

  color: white;

  padding: 0.55rem 1rem;

}

.yes-no {

  float: right;

}

.form-md .submit-job {

  margin-top: 0;

  padding: 0.5rem 1rem;

  background-color: #f68d2d;

  border-color: #f68d2d;

  color: #fff;

  box-shadow: none;

  width: 200px;

  margin-top: 0;

  margin-left: auto;

}

.yes-no .btn {

  margin-top: 0;

  padding: 0.5rem 1rem;

}



.table thead.table-dark tr th {

  padding: 20px 13px;

}

.card-selection img.img-fluid {

  padding: 15px;

  background: white;

}



tr.proccessing td {
    background-color: #00800030;
}