@charset "UTF-8";

#loader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #ffffff;
  z-index: 99;
  display: none;
}

#loader.show {
  display: block !important;
}

#loader .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#loader .inner h2 {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  color: #767676;
  margin-top: 15px;
}

#loader .inner .lds-ring {
  display: block;
  position: relative;
  width: 33px;
  height: 33px;
  margin: 0 auto;
}

#loader .inner .lds-ring div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  position: absolute;
  width: 33px;
  height: 33px;
  border: 4px solid #47b972;
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #47b972 transparent transparent transparent;
}

#loader .inner .lds-ring div:nth-child(1) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

#loader .inner .lds-ring div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

#loader .inner .lds-ring div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

@-webkit-keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.pd-wrap.empty-docs-list .container .dropzone {
  height: 448px;
}

.pd-wrap.loading {
  height: 100vh;
  overflow: hidden;
}

.pd-wrap .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pd-wrap .header h2 {
  font-size: 24px;
  line-height: 29px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000000;
  margin: 20px 0;
}

.pd-wrap .header .logout {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #767676;
  padding: 8px 12px;
  border: none;
  outline: none;
  background: inherit;
  cursor: pointer;
}

.pd-wrap .header .logout:hover {
  background: rgba(118, 118, 118, 0.08);
  border-radius: 3px;
}

.pd-wrap .container .dropzone {
  height: 264px;
  border: 2px dashed #ADADAD;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 3px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pd-wrap .container .dropzone h2 {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 7px;
}

.pd-wrap .container .dropzone p {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #2F2F2F;
  text-align: center;
  margin: 0;
}

.pd-wrap .container .dropzone .btn-load-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pd-wrap .container .dropzone .btn-load-file button {
  border: none;
  outline: none;
  cursor: pointer;
}

.pd-wrap .container .dropzone .btn-load-file .select-teams {
  margin-right: 24px;
}

.pd-wrap .container .dropzone .btn-load-file .select-teams .icon {
  width: 24px;
  height: 24px;
  background: url("../assets/img/IconTeams.svg");
  background-size: cover;
  margin-right: 4px;
}

.pd-wrap .container .dropzone .btn-load-file .select-local {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 7px 12px;
  color: #767676;
  background: inherit;
}

.pd-wrap .container .dropzone .btn-load-file .select-local:focus {
  background: rgba(118, 118, 118, 0.08);
  border-radius: 3px;
}

.pd-wrap .error svg {
  margin: 0 0 23px;
}

.pd-wrap .error .info {
  text-align: center;
}

.pd-wrap .error .info .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #E44E48;
  margin: 0 0 8px;
}

.pd-wrap .error .info .description {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #2E2F35;
  margin: 0 auto 16px;
  max-width: 335px;
}

.pd-wrap .error .info .try-again {
  margin: 0 auto;
}

.add-recipients h2 {
  font-size: 24px;
  line-height: 29px;
  color: #2F2F2F;
  margin: 24px 0 12px;
}

.add-recipients p {
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  margin: 0 0 12px;
}

.add-recipients .inner-form {
  position: relative;
}

.add-recipients .btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.add-recipients .btn-group .btn-add-recipient {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #767676;
  padding: 7px 12px;
  background: inherit;
  border: none;
  outline: none;
  cursor: pointer;
}

.add-recipients .btn-group .btn-add-recipient .icon {
  width: 22px;
  height: 16px;
  background: url("../assets/img/AddRecipient.svg");
  background-size: cover;
  margin-right: 5px;
}

.add-recipients .btn-group .btn-continue-recipient {
  margin: 0;
}

.add-recipients .btn-group .btn-continue-recipient:disabled {
  background: #47B972;
  opacity: 0.5;
  cursor: default;
}

.add-recipients .form-recipients {
  background: #FFFFFF;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.add-recipients .form-recipients .add-recipient {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.add-recipients .form-recipients .add-recipient .box {
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.add-recipients .form-recipients .add-recipient .box .required {
  color: #e44e48;
}

.add-recipients .form-recipients .add-recipient .box label {
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #767676;
  margin: 0 0 4px;
}

.add-recipients .form-recipients .add-recipient .box input {
  width: 90%;
  background: rgba(118, 118, 118, 0.08);
  -webkit-box-shadow: inset 0px -1px 0px #ADADAD;
          box-shadow: inset 0px -1px 0px #ADADAD;
  padding: 7px 8px;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  border: none;
  outline: none;
}

.add-recipients .form-recipients .add-recipient .box input:focus {
  -webkit-box-shadow: inset 0px -1px 0px #47B972;
          box-shadow: inset 0px -1px 0px #47B972;
}

.add-recipients .form-recipients .add-recipient .box.invalid input {
  -webkit-box-shadow: inset 0px -1px 0px #E44E48;
          box-shadow: inset 0px -1px 0px #E44E48;
}

.add-recipients .form-recipients .add-recipient .box.invalid:after {
  content: "Please enter a valid email address";
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #E44E48;
  margin-top: 4px;
}

.add-recipients .form-recipients .add-recipient .box.non-unique input {
  -webkit-box-shadow: inset 0px -1px 0px #E44E48;
          box-shadow: inset 0px -1px 0px #E44E48;
}

.add-recipients .form-recipients .add-recipient .box.non-unique:after {
  content: "Recipient with this email already exists";
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #E44E48;
  margin-top: 4px;
}

.add-recipients .form-recipients .add-recipient .trash {
  width: 14px;
  position: relative;
  bottom: 5px;
  cursor: pointer;
}

.add-recipients .form-recipients .add-recipient .trash svg {
  position: absolute;
  top: 30px;
}

.add-recipients .forms .trash svg {
  fill: #8d8d8d;
}

.add-recipients .forms .trash svg:hover {
  fill: #e44e48;
}

.add-recipients .forms.single-form .trash svg {
  fill: #c6c6c6;
}

.add-recipients .forms.single-form .trash svg:hover {
  fill: #c6c6c6;
}

.transparent-true {
  opacity: 0;
}

.loading {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1600;
  width: 100%;
  background-image: -webkit-gradient(linear, right top, left top, from(rgb(240, 240, 240)), color-stop(50%, rgb(224, 224, 224)), to(rgb(240, 240, 240)));
  background-image: linear-gradient(to left, rgb(240, 240, 240), rgb(224, 224, 224) 50%, rgb(240, 240, 240));
  background-size: 400px 100%;
  background-position-x: 0;
  -webkit-animation: 1000ms linear 0s infinite normal none running spinBackground;
          animation: 1000ms linear 0s infinite normal none running spinBackground;
}

@-webkit-keyframes spinBackground {
  100% {
    background-position-x: -400px;
  }
}

@keyframes spinBackground {
  100% {
    background-position-x: -400px;
  }
}

.docs .message-error {
  background: #FFFDF3;
  -webkit-box-shadow: 0 0 1px rgba(47, 47, 47, 0.08), 0 0.5px 2px rgba(47, 47, 47, 0.12);
          box-shadow: 0 0 1px rgba(47, 47, 47, 0.08), 0 0.5px 2px rgba(47, 47, 47, 0.12);
  padding: 12px 16px;
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #2F2F2F;
}

.docs .message-error .link {
  color: #249C57;
  text-decoration: none;
  font-weight: 600;
}

.docs .docs-list-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.docs .docs-list-header .inner-search {
  width: 100%;
  position: relative;
  margin: 24px 0;
}

.docs .docs-list-header .inner-search .icon-search {
  position: absolute;
  top: 50%;
  left: 11px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.docs .docs-list-header .inner-search .icon-close {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.docs .docs-list-header .inner-search .input-search {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 2px;
  padding: 10px 36px 12px 36px;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  outline: none;
}

.docs .docs-list-header h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #2F2F2F;
  margin: 24px 0;
}

.docs .docs-list-header .search .btn-search {
  color: #767676;
  background: #E4E4E4;
  border-radius: 3px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.docs .list-documents .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 13px;
  line-height: 16px;
  color: #767676;
  padding: 0 24px;
  margin-bottom: 8px;
}

.docs .list-documents .header .title {
  -ms-flex-preferred-size: 68%;
      flex-basis: 68%;
}

.docs .list-documents .header .status {
  -ms-flex-preferred-size: 18%;
      flex-basis: 18%;
  padding-left: 8px;
}

.docs .list-documents .header .date {
  -ms-flex-preferred-size: 11%;
      flex-basis: 11%;
  padding-right: 14px;
}

.docs .list-documents .list {
  max-height: 390px;
  overflow: auto;
}

.docs .list-documents .list .document {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 24px;
  -webkit-box-shadow: inset 0px -1px 0px #E4E4E4;
          box-shadow: inset 0px -1px 0px #E4E4E4;
  cursor: pointer;
  position: relative;
  background: #fff;
}

.docs .list-documents .list .document.opening {
  background: rgba(118, 118, 118, 0.08);
}

.docs .list-documents .list .document:before {
  content: "";
  width: 16px;
  height: 20px;
  background: url("../assets/img/Doc.svg");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 25px;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

.docs .list-documents .list .document:hover {
  background: rgba(118, 118, 118, 0.08);
}

.docs .list-documents .list .document .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  -ms-flex-preferred-size: 68%;
      flex-basis: 68%;
  position: relative;
  padding-left: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
}

.docs .list-documents .list .document .title:hover + .tooltip {
  display: block;
}

.docs .list-documents .list .document .status {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  -ms-flex-preferred-size: 18%;
      flex-basis: 18%;
  position: relative;
  padding-left: 16px;
}

.docs .list-documents .list .document .status:before {
  content: "\2022";
  font-size: 38px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-9px);
          transform: translateY(-9px);
}

.docs .list-documents .list .document .document-draft {
  color: #767676;
}

.docs .list-documents .list .document .document-waiting_approval {
  color: #F19556;
}

.docs .list-documents .list .document .document-sent {
  color: #336DF3;
}

.docs .list-documents .list .document .document-viewed {
  color: #8F4CA4;
}

.docs .list-documents .list .document .document-completed {
  color: #68B679;
}

.docs .list-documents .list .document .document-voided {
  color: #D4594F;
}

.docs .list-documents .list .document .document-waiting_pay {
  color: #4D995E;
}

.docs .list-documents .list .document .document-paid {
  color: #3A844A;
}

.docs .list-documents .list .document .document-declined {
  color: #89312A;
}

.docs .list-documents .list .document .document-external_review {
  color: #10B3E5;
}

.docs .list-documents .list .document .date {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #767676;
  -ms-flex-preferred-size: 11%;
      flex-basis: 11%;
}

.docs .docs-not-found {
  text-align: center;
  margin: 54px 0;
}

.docs .docs-not-found .image {
  margin-bottom: 15px;
}

.docs .docs-not-found .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #767676;
  margin: 0 0 8px;
}

.docs .docs-not-found .description {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #8D8D8D;
  margin: 0;
}

.list-files-teams .title {
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  margin: 20px 0;
}

.list-files-teams .no-documents-yet {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

.list-files-teams .no-documents-yet .img {
  width: 32px;
  height: 40px;
  background: url("../assets/img/Doc.svg");
  background-size: cover;
  margin: 0 auto 12px;
}

.list-files-teams .no-documents-yet .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #8D8D8D;
  margin: 0 0 8px;
}

.list-files-teams .no-documents-yet .description {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #8D8D8D;
  margin: 0 0 16px;
}

.list-files-teams .no-documents-yet .return {
  padding: 7.5px 12px;
  background: #FFFFFF;
  -webkit-box-shadow: 0 0 1px rgba(47, 47, 47, 0.04), 0 2px 4px rgba(47, 47, 47, 0.12);
          box-shadow: 0 0 1px rgba(47, 47, 47, 0.04), 0 2px 4px rgba(47, 47, 47, 0.12);
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: #47B972;
  margin: 0 auto;
  outline: none;
  border: none;
  cursor: pointer;
}

.list-files-teams .no-documents-yet .return:focus {
  background: rgba(118, 118, 118, 0.08);
  border-radius: 3px;
}

.list-files-teams .list-files .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 13px;
  line-height: 16px;
  color: #767676;
  padding: 0 25px;
  margin-bottom: 8px;
}

.list-files-teams .list-files .header .name {
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
}

.list-files-teams .list-files .header .sent-by {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  padding-left: 25px;
}

.list-files-teams .list-files .header .shared-on {
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
}

.list-files-teams .list-files .list {
  background: #FFFFFF;
  height: 85vh;
  overflow: auto;
}

.list-files-teams .list-files .list .document {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 24px 28px 24px 24px;
  -webkit-box-shadow: inset 0px -1px 0px #E4E4E4;
          box-shadow: inset 0px -1px 0px #E4E4E4;
  cursor: pointer;
  position: relative;
}

.list-files-teams .list-files .list .document.opening {
  background: rgba(118, 118, 118, 0.08);
}

.list-files-teams .list-files .list .document:hover {
  background: rgba(118, 118, 118, 0.08);
}

.list-files-teams .list-files .list .document:before {
  content: "";
  width: 16px;
  height: 20px;
  background: url("../assets/img/Doc.svg");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 24px;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

.list-files-teams .list-files .list .document .name {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
  position: relative;
  padding-left: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-files-teams .list-files .list .document .name:hover + .tooltip {
  display: block;
}

.list-files-teams .list-files .list .document .sent-by {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  position: relative;
}

.list-files-teams .list-files .list .document .date {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #767676;
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
}

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.message .img {
  display: table;
  margin: 0 auto;
}

.message .inner-info .title {
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #000000;
  margin: 4px 0 12px;
}

.message .inner-info .description {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #000000;
  margin: 0 auto;
  max-width: 326px;
}

.message .inner-info.access-error {
  padding: 0 20px 20px;
}

.message .inner-info.access-error .title {
  margin-bottom: 24px;
}

.message .inner-info.access-error .description {
  max-width: unset;
  margin-bottom: 32px;
}

.error-message {
  width: 100%;
}

.error-message .img {
  min-width: 268px;
  min-height: 165px;
  background: url("../assets/img/Error.svg");
  background-size: cover;
  margin-bottom: 70px;
}

.error-message.file-not-found .img {
  background: url("../assets/img/Shape.svg");
  background-size: cover;
  min-width: 218px;
  min-height: 122px;
}

.mobile-message {
  min-width: 343px;
}

.mobile-message .img {
  min-width: 259px;
  min-height: 250px;
  background: url("../assets/img/mobile.svg") no-repeat;
  background-size: cover;
}

.mobile-message .inner-info .btn-group {
  margin-top: 32px;
  text-align: center;
}

.mobile-message .inner-info .btn-group a {
  display: inline-block;
}

.mobile-message .inner-info .btn-group .google {
  min-width: 154px;
  height: 46px;
  background: url("../assets/img/google-play.png");
  background-size: cover;
  margin-right: 10px;
}

.mobile-message .inner-info .btn-group .apple {
  min-width: 140px;
  height: 46px;
  background: url("../assets/img/apple-store.png");
  background-size: cover;
  margin-left: 10px;
}

#authentication {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#authentication .inner .icon {
  width: 138px;
  height: 34px;
  background: url("../assets/img/Logo.svg");
  margin: 0 auto 20px;
}

#authentication .inner .description {
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #2F2F2F;
  text-align: center;
  max-width: 220px;
  margin: 0 auto 24px;
}

#authentication .inner .description-login {
  max-width: 235px;
}

.preloader-new-documents-list {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 98;
}

.preloader-new-documents-list .preloader {
  height: 3px;
  width: 300px;
  background: #249C57;
  position: relative;
  left: -100px;
  -webkit-animation: preloader 1.5s linear infinite;
          animation: preloader 1.5s linear infinite;
}

@-webkit-keyframes preloader {
  0% {
    left: -300px;
  }

  100% {
    left: 100%;
  }
}

@keyframes preloader {
  0% {
    left: -300px;
  }

  100% {
    left: 100%;
  }
}

.not-supported-workspace {
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}

.not-supported-workspace svg {
  display: block;
  margin: 0 auto 23px;
}

.not-supported-workspace .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #767676;
  margin: 0 0 8px;
}

.not-supported-workspace .description {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #767676;
  margin: 0 auto 16px;
  max-width: 293px;
}

.addRecipients-form {
  margin: 5px 0;
  padding: 0 32px 0 32px;
}

.addRecipients-form .addRecipients-form__title {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 29px;
  padding: 0 32px 8px 0;
}

.addRecipients-form .addRecipients-form__subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  padding: 0 32px 20px 0;
}

.addRecipientsError {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.addRecipientsError__title {
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #000000;
  margin: 0 0 24px;
}

.addRecipientsError__text {
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  margin-bottom: 32px;
}

.form-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form-controls--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.form-controls .send-btn {
  background: #47B972;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border: none;
  height: 32px;
  min-width: 84px;
  color: #fff;
  padding: 0 8px;
  margin-bottom: 30px;
}

.form-controls .send-btn:hover {
  cursor: pointer;
}

.form-controls .send-btn_disabled {
  opacity: 0.5;
}

.form-controls .send-btn:focus {
  outline: none;
}

.form-controls .addRecipient-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: none;
  background-color: transparent;
  margin-bottom: 30px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #767676;
}

.form-controls .addRecipient-btn:hover {
  cursor: pointer;
}

.form-controls .addRecipient-btn:focus {
  outline: none;
}

.form-controls .addRecipient-btn span {
  margin-left: 10px;
}

.form-inputs {
  padding: 0;
}

.form-inputs .top-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form-inputs .bottom-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form-inputs .bottom-block .wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.form-inputs .border {
  height: 1px;
  width: 100%;
  margin: 10px 0 10px 0;
  background-color: #E4E4E4;
}

.form-inputs .border:last-child {
  display: none;
}

.form-inputs .input-wrapper .input-label {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #2F2F2F;
}

.form-inputs .input-wrapper .email-input,
.form-inputs .input-wrapper .lastName-input,
.form-inputs .input-wrapper .firstName-input {
  height: 32px;
  background: #F4F4F4;
  border-radius: 3px;
  border: none;
  text-indent: 10px;
  width: 100%;
  margin-top: 5px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #2F2F2F;
}

.form-inputs .input-wrapper .email-input:focus,
.form-inputs .input-wrapper .lastName-input:focus,
.form-inputs .input-wrapper .firstName-input:focus {
  outline: none;
  -webkit-box-shadow: inset 0px -1px 0px #47B972;
          box-shadow: inset 0px -1px 0px #47B972;
}

.form-inputs .input-wrapper .firstName-input {
  width: calc(100% - 10px);
  margin-right: 8px;
}

.form-inputs .input-wrapper .input_invalid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 27px;
}

.form-inputs .input-wrapper .is-invalid {
  -webkit-box-shadow: inset 0px -1px 0px #ff0000;
          box-shadow: inset 0px -1px 0px #ff0000;
}

.form-inputs .deleteRecipient-btn {
  position: relative;
  top: -5px;
  border: none;
  outline: none;
  padding: 0;
  height: 20px;
  background-color: transparent;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #767676;
}

.form-inputs .deleteRecipient-btn:hover {
  cursor: pointer;
}

.form-inputs .error-message {
  color: #ff0000;
  font-size: 13px;
}

.form-inputs .react-autosuggest__suggestions-container {
  position: relative;
  top: -10px;
}

.form-inputs .react-autosuggest__suggestions-container .react-autosuggest__suggestions-list {
  width: 544px;
}

.greeting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.greeting-title {
  width: 360px;
  height: 29px;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  color: #000000;
  text-align: center;
  margin: 50px 0 12px 0;
}

.greeting-text {
  width: 294px;
  height: 34px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #000000;
}

.message-extension {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.message-extension .error-image {
  margin-top: 92px;
}

.message-extension__title {
  margin-top: 92px;
  width: 360px;
  height: 58px;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 29px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: #000000;
}

.message-extension__text {
  margin-top: 12px;
  width: 360px;
  height: 34px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

@font-face {
  font-family: Graphik;
  src: url("../assets/fonts/Graphik.woff2");
}

body {
  font-family: Graphik, Arial, sans-serif;
  margin: 0 auto;
  height: 95vh;
}

body.color-white {
  background: #FFFFFF;
}

body #app {
  height: 100%;
  margin: 0 20px;
}

.back {
  background: inherit;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #767676;
  cursor: pointer;
}

.back svg {
  vertical-align: middle;
  margin-right: 9px;
}

.btn-gray {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #FFFFFF;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  padding: 7px 12px;
  color: #767676;
  border: none;
  outline: none;
  cursor: pointer;
}

.btn-gray:focus {
  background: #F4F4F4;
}

.btn-green {
  padding: 8px 12px;
  background: #47B972;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  color: #FFFFFF;
  border: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  max-width: 173px;
  margin: 0 auto;
}

.btn-green:hover {
  background: #39945B;
}

.log-in,
.btn-logout {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: #767676;
  background: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 4px;
  margin: 19px auto;
}

.btn-logout {
  padding: 8px 12px;
}

.btn-logout:hover {
  background: rgba(118, 118, 118, 0.08);
  border-radius: 3px;
}

.log-in {
  color: #47B972;
}

.l-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: 5em;
  padding: 1em;
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.l-header h1 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.l-article {
  margin: 3em 2em;
}

.l-title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

img.logo {
  width: 100%;
  min-width: 76px;
  height: auto;
}

.tooltip {
  max-width: 70%;
  font-size: 12px;
  line-height: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFFFFF;
  padding: 4px 8px;
  background: #2F2F2F;
  border-radius: 3px;
  z-index: 99;
  position: absolute;
  top: 45px;
  display: none;
}

.react-autosuggest__suggestions-container {
  position: relative;
  top: -10px;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list {
  width: 95%;
  max-height: 215px;
  overflow: auto;
  background: #FFFFFF;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  position: absolute;
  padding: 4px 0;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li {
  list-style: none;
  padding: 11px 12px;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li[aria-selected=true] {
  background: rgba(118, 118, 118, 0.08);
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 30px;
  height: 30px;
  margin-right: 8px;
  background: #F4F4F4;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #ADADAD;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .avatarimg {
  max-width: 100%;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .full-name:hover + .tooltip,
.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .email:hover + .tooltip {
  display: block;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .full-name {
  font-weight: bold;
  font-size: 13px;
  line-height: 16px;
  color: #2F2F2F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .full-name + .tooltip {
  top: 18px;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .email {
  font-weight: normal;
  font-size: 13px;
  line-height: 16px;
  color: #767676;
}

.react-autosuggest__suggestions-container .react-autosuggest__suggestions-list li .contact .inner-info .tooltip {
  top: 35px;
  left: 0;
  word-break: break-word;
  white-space: initial;
  max-width: none;
}