body {
  margin: 0; }

.dxeRoot {
  margin-bottom: 10px; }

.modalities-list {
  width: 210px;
  background-color: #474747;
  color: #aca899;
  font-weight: bold;
  padding-left: 5px; }

.dxpc-content {
  background-color: #2F2F2F;
  color: white; }

#LoginButton {
  background-color: var(--color-button-background);
  color: white;
  border-radius: 1px;
  width: 100px;
  border: 1px solid #232323;
  height: 20px; }

#LoginButton:hover {
  background-color: var(--color-button-background-hover);
  color: white;
  cursor: pointer; }

.header .dxpc-content {
  padding-top: 50px !important; }

.docs-modal .dxpc-content {
  background-color: #5D5C5C; }

.docs-modal .docs-modal-content {
  font-size: 1.1em; }

.docs-modal .dxpc-contentWrapper {
  margin-top: -1px; }

.appointment-modal-content {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .appointment-modal-content span {
    font-size: 18px; }
  .appointment-modal-content button {
    margin: 0 auto;
    margin-top: auto;
    cursor: pointer; }

.fileDescription {
  margin-top: 7px; }
  .fileDescription > table {
    display: inline-table; }

.fileDescriptionTextBox {
  display: inline-grid;
  width: 300px; }

.requiredDescription {
  font-size: 12px;
  display: inherit;
  position: relative;
  left: 80px; }

.dxeOutOfRWarn label {
  display: contents;
  color: darkred; }

.appointment-captcha {
  margin-top: 30px; }
  .appointment-captcha tr {
    text-align: center; }
    .appointment-captcha tr td label {
      display: contents; }
    .appointment-captcha tr td span {
      font-size: 18px;
      color: white; }
  .appointment-captcha .captcha-message {
    font-size: 19px;
    margin: 7px 0 0 7px;
    display: block; }
  .appointment-captcha .required-input {
    color: #FFFFFF; }
  .appointment-captcha input {
    width: 148px !important; }

.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  margin-left: 15px;
  font-size: 1.1em;
  font-family: sans-serif;
  width: 550px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }

.styled-table thead tr {
  background-color: darkred;
  color: #ffffff;
  text-align: left; }

.styled-table th,
.styled-table td {
  padding: 12px 15px; }

.styled-table tr {
  border-bottom: 1px solid #dddddd; }

.styled-table tr:nth-of-type(even) {
  background-color: #CECECE;
  color: darkred; }

.styled-table tr:not(:first-child):nth-of-type(odd) {
  color: #000000;
  background-color: #e2e2e2; }

.styled-table tr:last-of-type {
  border-bottom: 3px solid darkred; }

.styled-table tr.active-row {
  font-weight: bold;
  color: darkred; }

.styled-table .dxeProgressBar .dxePBMainCell, .dxeProgressBar td.dxe {
  padding: 2px; }

.styled-table .fileProgress {
  margin-top: 15px; }

*,
:before,
:after {
  box-sizing: border-box; }

body {
  background: #272727; }

.app-form {
  width: 750px; }
  .app-form h1 {
    font-size: 3em;
    font-weight: 300;
    text-align: center;
    color: darkred; }
  .app-form h5 {
    text-align: center;
    text-transform: uppercase;
    color: #bebebe; }
  .app-form hr.sep {
    background: darkred;
    box-shadow: none;
    border: none;
    height: 2px;
    width: 25%;
    margin: 0px auto 45px auto; }
  .app-form .emoji {
    font-size: 1.2em; }

.wrapper {
  width: 79%;
  display: flex;
  justify-content: center; }

.content {
  display: grid;
  margin-bottom: 10px;
  /*grid-template-columns: 1fr 1fr;*/ }
  .content .header {
    /*grid-column: 1/3;*/
    margin-bottom: 20px;
    font-size: 1.1em; }
    .content .header p {
      margin-left: 0;
      letter-spacing: 0.032em; }
  .content .cnp-input, .content .medic-applicant, .content .application-date, .content .modalities, .content .documents-table, .content .appointment-captcha, .content .appointment-submit {
    /*grid-column: 1/3;*/ }
  .content .application-date .dateEdit {
    display: inline-block;
    background-color: #474747; }
    .content .application-date .dateEdit .dxeEditArea {
      background-color: #474747;
      color: #aca899;
      font-weight: bold;
      padding-left: 5px; }
    .content .application-date .dateEdit tbody {
      display: flex; }
      .content .application-date .dateEdit tbody tr {
        flex: 1;
        height: 22px; }
  .content .application-date .dateEdit-validation {
    float: left;
    padding-left: 256px; }
  .content .surname span, .content .name span, .content .cnp-input span, .content .phone span, .content .email span {
    float: left;
    padding-left: 256px; }
  .content .facilities {
    padding-top: 30px; }
    .content .facilities span {
      float: left;
      padding-left: 256px; }
  .content .patient-diagnostic textarea {
    resize: none; }
  .content .patient-diagnostic label {
    transform: translate(0, -31%); }
  .content .modalities select {
    font-weight: bold;
    padding-left: 5px; }
  .content .modalities span {
    float: left;
    padding-left: 256px; }
  .content .documents-table {
    margin-left: -14px;
    margin-bottom: 20px; }
    .content .documents-table .docs-label {
      display: inline-block;
      width: 245px;
      text-align: left;
      color: #FFFFFF;
      font-size: 1.4em;
      margin-left: 50px; }
  .content .images-label {
    text-align: center;
    color: #FFFFFF;
    font-size: 1.4em;
    margin: 12px 0;
    display: inline-block; }
  .content .patient-info, .content .patient-referral {
    /*grid-column: 1/3;*/
    /*display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 35px 45px;*/ }
    .content .patient-info .form-group, .content .patient-referral .form-group {
      grid-row: 2/2;
      width: 260px; }
  .content .patient-info .patientWeight {
    width: 50px; }
  .content .patient-info span {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #FFFFFF; }
  .content .patient-info .patientHeight {
    width: 135px; }
  .content .patient-referral .referralTicket {
    width: 90px; }
  .content .patient-referral span {
    width: 25px;
    display: inline-block;
    text-align: center;
    color: #FFFFFF; }
  .content .patient-referral .referralNumber {
    width: 90px; }
  .content .appointment-submit h6 {
    font-size: 1.1em;
    color: #bebebe;
    width: 459px; }
  .content .TextBox {
    width: 210px; }
    .content .TextBox:not(textarea) {
      height: 23px; }

.group {
  position: relative;
  margin: 5px 0;
  font-size: 1.2em; }
  .group label {
    display: inline-block;
    width: 245px;
    text-align: left;
    color: #FFFFFF; }

#ImagesUploadControl_Cancel {
  display: none; }

.ResetFormBtn {
  visibility: hidden; }

/*textarea {
    resize: none;
}

.patient-info span, .patient-referral span {
    color: $muted-color;
    font-size: 18px;
}

input,
textarea {
    background: none;
    color: $muted-color;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: $width;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid $muted-color;

    &:focus {
        outline: none;
    }

    &:focus ~ label,
    &:valid ~ label {
        top: -13px;
        font-size: 17px;
        color: $hl-color;
    }

    &:focus ~ .bar:before {
        width: $width;
    }
}

// suport for NOT REQUIRED inputs //
input:placeholder-shown ~ label{
    color: $muted-color;
    font-size: 18px;
    top: 10px;
}

input:placeholder-shown:focus ~ label {
    top: -13px;
    font-size: 17px;
    color: $hl-color;
}

input[type="password"] {
    letter-spacing: 0.3em;
}

label {
    color: $muted-color;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: $trans-time ease all;
}

.bar {
    position: relative;
    display: block;
    width: $width;

    &:before {
        content: '';
        height: 2px;
        width: 0;
        bottom: 0px;
        position: absolute;
        background: $hl-color;
        transition: $trans-time ease all;
        left: 0%;
    }
}*/
.btn {
  background: #fff;
  color: #8f8f8f;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .btn:hover {
    color: #858585;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12); }
  .btn.btn-link {
    background: darkred;
    color: #e8cccc; }
    .btn.btn-link:hover {
      background: #720000;
      color: #eed9d9; }
  .btn.btn-submit {
    background: darkred;
    color: #dcb3b3; }
    .btn.btn-submit:hover {
      background: #720000;
      color: #eed9d9; }
  .btn.btn-cancel {
    background: #eee; }
    .btn.btn-cancel:hover {
      background: #e1e1e1;
      color: #858585; }

.btn.pxd {
  padding: 3px 22px; }

.btn-box {
  text-align: center;
  margin: 50px 0; }

html {
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; }

* {
  box-sizing: inherit; }
  *:before, *:after {
    box-sizing: inherit; }

:root {
  --input-color: #99A3BA;
  --input-border: #CDD9ED;
  --input-background: #fff;
  --input-placeholder: #CBD1DC;
  --input-border-focus: darkred;
  --group-color: var(--input-color);
  --group-border: var(--input-border);
  --group-background: #EEF4FF;
  --group-color-focus: #fff;
  --group-border-focus: var(--input-border-focus);
  --group-background-focus: #A75050; }

.form-field {
  display: block;
  width: 100%;
  padding: 8px 16px;
  line-height: 25px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  -webkit-appearance: none;
  color: var(--input-color);
  border: 1px solid var(--input-border);
  background: var(--input-background);
  transition: border .3s ease; }
  .form-field::placeholder {
    color: var(--input-placeholder); }
  .form-field:focus {
    outline: none;
    border-color: var(--input-border-focus); }

.form-group {
  position: relative;
  display: flex;
  width: 100%; }
  .form-group > span,
  .form-group .form-field {
    white-space: nowrap;
    display: block; }
    .form-group > span:not(:first-child):not(:last-child),
    .form-group .form-field:not(:first-child):not(:last-child) {
      border-radius: 0; }
    .form-group > span:first-child,
    .form-group .form-field:first-child {
      border-radius: 6px 0 0 6px; }
    .form-group > span:last-child,
    .form-group .form-field:last-child {
      border-radius: 0 6px 6px 0; }
    .form-group > span:not(:first-child),
    .form-group .form-field:not(:first-child) {
      margin-left: -1px; }
  .form-group .form-field {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    margin-top: 0;
    margin-bottom: 0; }
  .form-group > span {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 25px;
    color: var(--group-color);
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background .3s ease, border .3s ease, color .3s ease; }
  .form-group:focus-within > span {
    color: var(--group-color-focus);
    background: var(--group-background-focus);
    border-color: var(--group-border-focus); }
  .form-group input, .form-group select {
    color: #272727;
    font-size: 16px; }

.btn {
  background: #fff;
  color: #8f8f8f;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .btn:hover {
    color: #858585;
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12); }
  .btn.btn-link {
    background: darkred;
    color: #e8cccc; }
    .btn.btn-link:hover {
      background: #720000;
      color: #eed9d9; }
  .btn.btn-submit {
    background: darkred;
    color: #dcb3b3; }
    .btn.btn-submit:hover {
      background: #720000;
      color: #eed9d9; }
  .btn.btn-cancel {
    background: #eee; }
    .btn.btn-cancel:hover {
      background: #e1e1e1;
      color: #858585; }

.btn-box {
  text-align: center;
  margin: 50px 0; }