@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Sarabun:ital,wght@0,100;0,200;0,300;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

*:focus {
  outline: none !important;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Sarabun', sans-serif !important;
}

ul {
  list-style: none;
  margin-bottom: 0 !important;
}

a, a:hover {
  text-decoration: none !important;
}

button, button:focus {
  border: none;
  outline: none;
  cursor: pointer;
}

h1, h2, h3, h4, h5, p {
  margin-bottom: 0 !important;
  font-family: 'Open Sans', sans-serif !important;
}

.paragraph {
  font-size: 1.5rem;
  color: rgba(19, 19, 20, 0.6);
}

.dash-heading .title {
  color: #e68f29;
  font-size: 2.5rem;
  position: relative;
  font-weight: 700;
  letter-spacing: -1.3px;
}

@media only screen and (max-width: 600px) {
  .dash-heading .title {
    font-size: 2rem;
    margin-top: 2rem !important;
  }
}

.dash-heading .my-breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dash-heading .my-breadcrumb li {
  font-size: 1.6rem;
  color: #131314;
}

.dash-heading .my-breadcrumb li a {
  color: #ff1f59;
  font-weight: 600;
}

.dash-heading .my-breadcrumb .spacing {
  padding: 0 5px;
  font-size: 1.5rem;
  font-weight: 400;
  color: #131314;
}

.card-presence {
  background-color: #fff;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  padding: 2rem 4rem;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.card-presence.--badge {
  padding: 1rem 2rem;
  display: block;
}

.card-presence.--badge h2 {
  font-size: 1.8rem;
}

.card-presence.--badge .box-btn {
  margin: 1.5rem 0 1rem;
}

.card-presence.--badge .box-btn button {
  margin: 1px 0;
  padding: 1rem 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  border-radius: 5px;
  margin-right: 3px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.card-presence.--badge .box-btn button.btn-arr {
  background-color: #00C09D;
}

.card-presence.--badge .box-btn button.btn-arr:hover {
  background-color: #00977c;
}

.card-presence.--badge .box-btn button.btn-dep {
  background-color: #ff1f59;
}

.card-presence.--badge .box-btn button.btn-dep:hover {
  background-color: #f5003f;
}

.card-presence.--presence {
  background-color: #00C09D;
}

.card-presence.--retard {
  background-color: #ed982a;
}

.card-presence.--absence {
  background-color: #ff1f59;
}

.card-presence .iconebg {
  height: 8rem;
  width: 8rem;
  position: absolute;
  right: -20px;
  top: 0;
  opacity: .2;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.card-presence .iconebg img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.card-presence .icone {
  height: 3rem;
  width: 3rem;
}

.card-presence .icone img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.card-presence .box-text {
  padding-left: 2rem;
}

.card-presence .box-text h3 {
  font-size: 2rem;
  color: #fff;
}

.card-presence .box-text .paragraph {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
}

.card-presence:hover .iconebg {
  -webkit-transform: scale(1.05) rotate(-5deg);
          transform: scale(1.05) rotate(-5deg);
  right: -10px;
  opacity: .3;
}

.form-compte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-compte .form--group {
  margin-bottom: 2rem;
}

.form-compte .form--group label {
  color: #131314;
  font-size: 1.7rem;
}

.form-compte .form--group label span {
  color: #ff1f59;
  font-weight: 600;
}

.form-compte .form--group__input {
  width: 100%;
  height: 5rem;
  padding: 2rem;
  color: #131314;
  font-size: 1.6rem;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid rgba(85, 96, 128, 0.2);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.form-compte .form--group__input:focus {
  border: 1px solid rgba(230, 143, 41, 0.4);
}

.input-ghost {
  display: none;
}

.form-sign {
  width: 60%;
}

@media only screen and (max-width: 1200px) {
  .form-sign {
    width: 70%;
  }
}

@media only screen and (max-width: 600px) {
  .form-sign {
    margin-bottom: 3rem;
  }
}

.form-sign .form--group {
  margin-bottom: 2rem;
}

.form-sign .form--group label {
  font-size: 1.6rem;
  font-weight: 600;
  color: #131314;
}

.form-sign .form--group__input {
  width: 100%;
  height: 4rem;
  border-radius: 4px;
  border: 1px solid rgba(19, 19, 20, 0.2);
  padding: 2rem;
  font-size: 1.5rem;
  color: #131314;
}

.form-sign .remember-forgot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
}

.form-sign .remember-forgot .link-forgot {
  font-size: 1.4rem;
  color: #039dd8;
  padding-bottom: 5.4px;
}

.form--group .icone {
  height: 2.2rem;
  width: 2.2rem;
  position: absolute;
  top: 55%;
  right: 2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
}

.form--group .icone img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --------------------
    radio css
-------------------- */
.button-radio-form .radio {
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  text-transform: capitalize;
  vertical-align: middle;
  padding-left: 30px;
  color: #fff;
  cursor: pointer;
  margin-right: 3rem;
}

.button-radio-form .radio .paragraph {
  margin-top: 6px;
}

.button-radio-form .radio + .radio {
  margin-right: 20px;
}

.button-radio-form .radio input[type="radio"] {
  display: none;
}

.button-radio-form .radio span {
  height: 20px;
  width: 20px;
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  border-radius: 50%;
  border: 3px solid #e68f29;
}

.button-radio-form .radio span::after {
  content: '';
  height: 8px;
  width: 8px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  background: #e68f29;
  border-radius: 50%;
  -webkit-transition: .3s ease-in-out 0s;
  transition: .3s ease-in-out 0s;
}

.button-radio-form .radio input[type="radio"]:checked ~ span::after {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

/* --------------------
    checkbox css
-------------------- */
.checkbox {
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  .checkbox {
    padding-right: 20px;
  }
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox .paragraph {
  color: #131314;
  font-size: 1.4rem;
}

.checkbox span {
  display: block;
  height: 18px;
  width: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 3px solid #131314;
}

.checkbox span::after {
  content: '';
  height: 8px;
  width: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  background-color: #131314;
  -webkit-transition: .3s ease-in-out 0s;
  transition: .3s ease-in-out 0s;
}

.checkbox input[type="checkbox"]:checked ~ span::after {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.btn-create {
  padding: .8rem 2.5rem;
  background-color: #00C09D;
  border-radius: 50rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.btn-create:hover {
  background-color: #008d73;
}

.btn-submit {
  padding: 1.4rem 4rem;
  color: #fff;
  font-weight: 500;
  background-color: #00C09D;
  border-radius: 4px;
  font-size: 1.8rem;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.btn-submit:hover {
  background-color: #008d73;
}

.btn-submit.--blue {
  background-color: #039dd8;
}

.btn-submit.--blue:hover {
  background-color: #0278a6;
}

.box-table {
  margin-top: 4rem;
  border-radius: 5px;
  border: 1px dashed rgba(19, 19, 20, 0.1);
}

.box-table.--shadow {
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  border: 1px dashed transparent;
}

.box-table .head-table {
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px dashed rgba(19, 19, 20, 0.1);
}

.box-table .head-table h3 {
  text-transform: uppercase;
  font-weight: 600;
  color: #131314;
  padding: 1rem 0;
}

.box-table .table-responsive {
  padding: 1rem 0 4rem;
}

@media only screen and (max-width: 768px) {
  .box-table .table-responsive {
    width: 70rem;
  }
}

@media only screen and (max-width: 600px) {
  .box-table .table-responsive {
    width: 56rem;
  }
}

.--padlr {
  padding: 0 1rem;
}

@media only screen and (max-width: 768px) {
  .table {
    width: 115rem !important;
  }
}

.table thead {
  font-size: 1.6rem;
  border: none;
}

.table thead tr th {
  border-top: transparent;
}

.table tbody {
  font-size: 1.5rem;
  color: rgba(19, 19, 20, 0.9);
}

.table tbody tr {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.table tbody tr:hover {
  color: #131314 !important;
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
}

.table td {
  border: none !important;
  line-height: 4rem;
}

.table td.doc .fa {
  font-weight: 600;
}

.table td.doc a {
  padding-left: 8px;
}

.table td.action .btn-action {
  padding: 0 3rem;
  border-radius: 50rem;
  color: #fff;
  background-color: #ed982a;
  font-weight: 700;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.table td.action .btn-action:hover {
  background-color: #d27e12;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #13131404 !important;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.table-striped tbody tr:nth-of-type(odd):hover {
  color: #131314 !important;
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
}

@media only screen and (max-width: 600px) {
  div.dataTables_wrapper div.dataTables_filter label {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
}

@media only screen and (max-width: 600px) {
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    text-align: left !important;
  }
}

@media only screen and (max-width: 600px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
}

.myModal {
  background-color: rgba(19, 19, 20, 0.6);
}

.myModal .modal-dialog {
  max-width: 700px;
}

.myModal .content {
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  border: 1px solid transparent;
  overflow: hidden;
}

.myModal .content .title {
  font-size: 2rem;
  color: #fff;
  background-color: #e68f29;
  padding: 2rem;
  font-weight: 600;
  letter-spacing: -1px;
}

.myModal .content .form-modal {
  margin: 1rem 0;
  padding: 2rem;
}

.myModal .content .form-modal .form--group {
  margin-bottom: 2rem;
}

.myModal .content .form-modal .form--group label {
  color: #131314;
  font-weight: 600;
  font-size: 1.7rem;
}

.myModal .content .form-modal .form--group__input {
  padding: 2rem;
  width: 100%;
  height: 4rem;
  padding-left: 2rem;
  color: #131314;
  font-size: 1.6rem;
  border-radius: 5px;
  border: 1px solid rgba(230, 143, 41, 0.3);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.myModal .content .form-modal .form--group__input:focus {
  border: 1px solid rgba(0, 192, 157, 0.4);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.myModal .content .form-modal .form--group__select {
  width: 100%;
  height: 4rem;
  padding-left: 2rem;
  color: #131314;
  font-size: 1.6rem;
  border-radius: 5px;
  border: 1px solid rgba(230, 143, 41, 0.3);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.myModal .content .form-modal .form--group__select:focus {
  border: 1px solid rgba(0, 192, 157, 0.4);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.myModal .content .form-modal .form--group__textarea {
  padding: 1rem 2rem;
  width: 100%;
  height: 8rem;
  padding-left: 2rem;
  color: #131314;
  font-size: 1.6rem;
  border-radius: 5px;
  border: 1px solid rgba(230, 143, 41, 0.3);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.myModal .content .form-modal .form--group__textarea:focus {
  border: 1px solid rgba(0, 192, 157, 0.4);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.myModal .content .box-btn .btn-standard {
  padding: 1rem 4rem;
  border-radius: 4px;
  font-size: 1.6rem;
  color: #fff;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.myModal .content .box-btn .btn-standard.--red {
  background-color: #ff1f59;
}

.myModal .content .box-btn .btn-standard.--red:hover {
  background-color: #eb003d;
}

.myModal .content .box-btn .btn-standard.--green {
  background-color: #00C09D;
}

.myModal .content .box-btn .btn-standard.--green:hover {
  background-color: #008d73;
}

.page-wrapper__topbar {
  height: 6rem;
  position: -webkit-sticky;
  position: sticky;
  background-color: #e68f29;
  top: 0;
  padding: 0 3rem;
  z-index: 90;
  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;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.98)), to(rgba(255, 255, 255, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), url(../images/signal.svg);
  background-size: 5%;
  background-position: center;
  -webkit-box-shadow: 5px 2px 10px 1px #00000018;
          box-shadow: 5px 2px 10px 1px #00000018;
  border-left: 1px dashed rgba(229, 232, 253, 0.3);
}

@media only screen and (max-width: 600px) {
  .page-wrapper__topbar {
    padding: 4rem 1rem;
  }
}

.page-wrapper__topbar--btn {
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 50rem;
  position: relative;
  border: 4px solid #e68f29;
}

.page-wrapper__topbar--btn ul {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.page-wrapper__topbar--btn ul li {
  list-style: none;
  position: absolute;
  background: #e68f29;
  width: 100%;
  height: 4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .5s;
  transition: .5s;
  border-radius: 4px;
}

.page-wrapper__topbar--btn ul li:nth-of-type(1) {
  top: 20%;
}

.page-wrapper__topbar--btn ul li:nth-of-type(2) {
  top: 50%;
}

.page-wrapper__topbar--btn ul li:nth-of-type(3), .page-wrapper__topbar--btn ul li:nth-of-type(4) {
  width: 50%;
  top: 80%;
}

.page-wrapper__topbar--btn ul li:nth-of-type(1), .page-wrapper__topbar--btn ul li:nth-of-type(2), .page-wrapper__topbar--btn ul li:nth-of-type(3) {
  left: 0;
}

.page-wrapper__topbar--btn ul li:nth-of-type(4) {
  right: 0;
}

.page-wrapper__topbar--btn ul.active li:nth-of-type(1) {
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

.page-wrapper__topbar--btn ul.active li:nth-of-type(2) {
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}

.page-wrapper__topbar--btn ul.active li:nth-of-type(3) {
  left: -50%;
  opacity: 0;
}

.page-wrapper__topbar--btn ul.active li:nth-of-type(4) {
  right: -50%;
  opacity: 0;
}

.page-wrapper__topbar--linkRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.page-wrapper__topbar--linkRight .language {
  width: 2rem;
  cursor: pointer;
  margin-right: 2rem;
  position: relative;
}

.page-wrapper__topbar--linkRight .language img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.page-wrapper__topbar--linkRight .language .box-lang {
  position: absolute;
  top: 4rem;
  left: -19px;
  background-color: #fff;
  padding: 2rem;
  width: 15rem;
  border-radius: 5px;
  -webkit-box-shadow: 0px 10px 30px rgba(19, 14, 57, 0.09);
          box-shadow: 0px 10px 30px rgba(19, 14, 57, 0.09);
  z-index: 15;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.page-wrapper__topbar--linkRight .language .box-lang.active {
  top: 3rem;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.page-wrapper__topbar--linkRight .language .box-lang__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.page-wrapper__topbar--linkRight .language .box-lang__item:not(:last-child) {
  margin-bottom: 8px;
}

.page-wrapper__topbar--linkRight .language .box-lang__item .logo-drapeau {
  height: 2rem;
  width: 2rem;
}

.page-wrapper__topbar--linkRight .language .box-lang__item .logo-drapeau img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.page-wrapper__topbar--linkRight .language .box-lang__item .language-country {
  font-size: 1.4rem;
  color: #131314;
  padding-left: 1rem;
  font-weight: 400;
}

.page-wrapper__topbar--linkRight .notification {
  height: 3rem;
  width: 3rem;
  margin-right: 2rem;
  position: relative;
}

.page-wrapper__topbar--linkRight .notification .account {
  background-color: #ff1f59;
  color: #fff;
  height: 15px;
  width: 25px;
  padding: .8rem 1rem;
  border-radius: 5px;
  font-size: 1.2rem;
  font-weight: 700;
  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;
  position: absolute;
  top: 0;
  right: -1rem;
}

.page-wrapper__topbar--linkRight .notification img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.page-wrapper__topbar--linkRight .box-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 2rem;
  position: relative;
  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  .page-wrapper__topbar--linkRight .box-user {
    padding-left: 5px;
  }
}

.page-wrapper__topbar--linkRight .box-user .name {
  font-size: 1.5rem;
  color: #131314;
  text-transform: capitalize;
  padding-right: 1rem;
}

@media only screen and (max-width: 600px) {
  .page-wrapper__topbar--linkRight .box-user .name {
    padding-right: 5px;
    font-size: 1.3rem;
  }
}

.page-wrapper__topbar--linkRight .box-user .user {
  height: 4rem;
  width: 4rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 4rem;
          flex: 0 0 4rem;
  border-radius: 50rem;
  overflow: hidden;
}

.page-wrapper__topbar--linkRight .box-user .user img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.page-wrapper__topbar--linkRight .box-user .user-link {
  border-radius: 8px;
  background-color: #fff;
  min-height: 10rem;
  width: 20rem;
  position: absolute;
  top: 8rem;
  right: 0;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
  padding: 1rem 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  visibility: hidden;
  opacity: 0;
}

.page-wrapper__topbar--linkRight .box-user .user-link.active {
  top: 5rem;
  visibility: visible;
  opacity: 1;
}

.page-wrapper__topbar--linkRight .box-user .user-link .link {
  display: block;
  font-size: 1.5rem;
  color: #131314;
  padding: 1rem 2em;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.page-wrapper__topbar--linkRight .box-user .user-link .link:hover {
  background-color: rgba(229, 232, 253, 0.1);
}

.page-wrapper__topbar--linkRight .box-user .user-link .link .fa {
  padding-right: 1rem;
  font-size: 1.6rem;
  color: #e5e8fd;
}

.sidebar {
  width: 25rem;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  -webkit-transition: all .3s;
  transition: all .3s;
  background-color: #e68f29;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 143, 41, 0.98)), to(rgba(230, 143, 41, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(230, 143, 41, 0.98), rgba(230, 143, 41, 0.98)), url(../images/signal.svg);
  background-size: 20%;
  background-position: center;
  z-index: 1;
}

@media only screen and (max-width: 768px) {
  .sidebar {
    height: 100%;
  }
}

.sidebar__logo {
  height: 6rem;
  background-color: #e68f29;
  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;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 143, 41, 0.98)), to(rgba(230, 143, 41, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(230, 143, 41, 0.98), rgba(230, 143, 41, 0.98)), url(../images/signal.svg);
  background-size: 20%;
  background-position: center;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

.sidebar__logo img {
  height: 5rem;
}

.sidebar__logo .logo-respond {
  display: none;
}

.sidebar__logo .name {
  font-weight: 800;
  color: #fff;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.sidebar__box-link {
  width: 100%;
  position: absolute;
  left: 0;
  top: 7rem;
  overflow-x: hidden;
  height: calc(100vh - 8rem);
}

.sidebar__box-link::-webkit-scrollbar {
  display: none;
}

.sidebar__box-link li {
  width: 100%;
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.sidebar__box-link li .menu_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 1.5rem 2rem 1.5rem 0;
  font-family: 'Kanit', sans-serif !important;
}

.sidebar__box-link li .menu_item .icon {
  height: 2rem;
  min-width: 7rem;
  display: block;
  line-height: 2rem;
  text-align: center;
}

.sidebar__box-link li .menu_item .icon img {
  height: 2rem;
  width: 2rem;
}

.sidebar__box-link li .menu_item .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding-right: 1rem;
  font-weight: 500;
}

.sidebar__box-link li .menu_item .iconArrow {
  height: 1.4rem;
  width: 1.4rem;
}

.sidebar__box-link li .menu_item .iconArrow img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.sidebar__box-link li .menu_item.active {
  background-color: #e0851a;
}

.sidebar__box-link li .menu_item:hover {
  background-color: #e0851a;
}

.sidebar__box-link .subMenu {
  padding-left: 7rem;
  font-size: 1.5rem;
}

.sidebar__box-link .subMenu li {
  padding: .6rem 0;
}

.sidebar__box-link .subMenu li a {
  color: #fff;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.sidebar__box-link .subMenu li a:hover {
  color: #e5e8fd;
  padding-left: 7px;
}

.sidebar.active {
  width: 7rem;
}

@media only screen and (max-width: 768px) {
  .sidebar {
    left: -100%;
    position: fixed;
    padding-top: 6rem;
  }
  .sidebar__logo {
    -webkit-box-shadow: initial;
            box-shadow: initial;
    border-bottom: 1px solid #f0f0f0f3;
  }
  .sidebar__logo .logo-site {
    display: block !important;
  }
  .sidebar__logo .logo-respond {
    display: none !important;
  }
  .sidebar__box-link {
    top: 13rem;
  }
  .sidebar.active {
    left: 0;
    width: 25rem;
  }
}

.sidebar.active .sidebar__logo .logo-site {
  display: none;
}

.sidebar.active .sidebar__logo .logo-respond {
  display: block;
}

.sidebar.active:hover {
  width: 25rem;
}

.sidebar.active:hover .sidebar__logo .logo-site {
  display: block;
}

.sidebar.active:hover .sidebar__logo .logo-respond {
  display: none;
}

.body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.page-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.page-wrapper__page-content .main-content {
  height: calc(100vh - 6rem);
  overflow-x: hidden;
  padding: 2rem;
  /* width */
  /* Track */
  /* Handle */
}

.page-wrapper__page-content .main-content.--pd0 {
  padding: 0 !important;
}

@media only screen and (max-width: 768px) {
  .page-wrapper__page-content .main-content {
    height: 100%;
  }
}

.page-wrapper__page-content .main-content::-webkit-scrollbar {
  width: 1rem;
}

.page-wrapper__page-content .main-content::-webkit-scrollbar-track {
  background: rgba(230, 143, 41, 0.2);
}

.page-wrapper__page-content .main-content::-webkit-scrollbar-thumb {
  background: #e68f29;
  border-radius: 50rem;
}

.preloader {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #e68f29;
  z-index: 9999;
  overflow: hidden;
  opacity: 2s;
  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;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.preloaderFinish {
  left: -100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(2);
          transform: scale(2);
}

/* 3 DOT LOADER */
.box-dot {
  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;
}

.dot-loader {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  -webkit-animation: 1.2s grow ease-in-out infinite;
  animation: 1.2s grow ease-in-out infinite;
}

.dot-loader--2 {
  -webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
  animation: 1.2s grow ease-in-out infinite 0.15555s;
  margin: 0 20px;
}

.dot-loader--3 {
  -webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
  animation: 1.2s grow ease-in-out infinite 0.3s;
}

@-webkit-keyframes grow {
  0%, 40%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes grow {
  0%, 40%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.welcome {
  margin-top: 1rem;
  margin-bottom: 3rem;
  position: relative;
}

.welcome .content {
  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;
}

.welcome .content .msg {
  font-size: 2.5rem;
  color: #e68f29;
  font-weight: 800;
}

.welcome .content .msg .name {
  font-weight: 500;
  color: #131314;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: 2rem;
}

.welcome .content .status {
  padding: 1.5rem 1rem;
  color: #fff;
  font-weight: 800;
  border-radius: 50rem;
  border: 1px dashed rgba(255, 31, 89, 0.5);
}

.welcome .content .status span {
  background-color: #ff1f59;
  padding: 1rem 3rem;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 50rem;
}

.welcome .paragraph {
  font-size: 2rem;
  color: #131314;
  font-weight: 500;
}

.box-calendar {
  margin: 3rem 0;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 1rem;
}

.box-calendar .title {
  padding: 2rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
}

.box-conversation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 6rem);
  background-color: #4d4c4c07;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.98)), to(rgba(255, 255, 255, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), url(../images/signal.svg);
  background-size: 5%;
  background-position: center;
}

.box-conversation .box-list-user {
  background-color: #2d2d2d;
  min-width: 300px;
  max-width: 300px;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-list-user {
    position: absolute;
    left: -100%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 5;
    min-width: 300px;
    max-width: 300px;
  }
  .box-conversation .box-list-user.active {
    left: 0;
  }
}

.box-conversation .box-list-user .top-content {
  padding: 2rem 2rem 1rem 2rem;
}

.box-conversation .box-list-user .top-content .head {
  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;
}

.box-conversation .box-list-user .top-content .head-create {
  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;
}

.box-conversation .box-list-user .top-content .head-create .title {
  font-size: 2.5rem;
  color: #e5e8fd;
}

.box-conversation .box-list-user .top-content .head-create .btn-create {
  background-color: #e68f29;
  height: 4rem;
  width: 4rem;
  color: #e5e8fd;
  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-radius: 8px;
  margin-left: 4rem;
  cursor: pointer;
  position: relative;
}

.box-conversation .box-list-user .top-content .head-create .btn-create:hover .desc {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  right: -13rem;
}

.box-conversation .box-list-user .top-content .head-create .btn-create .fa {
  font-size: 1.5rem;
}

.box-conversation .box-list-user .top-content .head-create .btn-create .desc {
  position: absolute;
  width: 12rem;
  padding: .5rem .8rem;
  font-size: 1.2rem;
  background-color: #e68f29;
  text-align: center;
  border-radius: 6px;
  right: -14rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-conversation .box-list-user .top-content .head .icon-close {
  height: 4rem;
  width: 4rem;
  background-color: rgba(255, 31, 89, 0.4);
  border-radius: 8px;
  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;
  display: none;
  cursor: pointer;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-list-user .top-content .head .icon-close {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

.box-conversation .box-list-user .top-content .head .icon-close .fa {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ff1f59;
}

.box-conversation .box-list-user .top-content .form-search {
  background-color: #252222;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-list-user .top-content .form-search .fa {
  color: #a6a9ba;
  font-size: 1rem;
  padding: 1rem;
}

.box-conversation .box-list-user .top-content .form-search input {
  border: none;
  background-color: transparent;
  height: 4rem;
  width: 100%;
  font-size: 1.1rem;
  color: #a6a9ba;
}

.box-conversation .box-list-user .top-content .form-search input::-webkit-input-placeholder {
  color: #a6a9ba;
}

.box-conversation .box-list-user .top-content .form-search input:-ms-input-placeholder {
  color: #a6a9ba;
}

.box-conversation .box-list-user .top-content .form-search input::-ms-input-placeholder {
  color: #a6a9ba;
}

.box-conversation .box-list-user .top-content .form-search input::placeholder {
  color: #a6a9ba;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-list-user .top-content .form-search input::-webkit-input-placeholder {
    font-size: 1rem;
  }
  .box-conversation .box-list-user .top-content .form-search input:-ms-input-placeholder {
    font-size: 1rem;
  }
  .box-conversation .box-list-user .top-content .form-search input::-ms-input-placeholder {
    font-size: 1rem;
  }
  .box-conversation .box-list-user .top-content .form-search input::placeholder {
    font-size: 1rem;
  }
}

.box-conversation .box-list-user .nav {
  padding: 1rem 2rem;
}

.box-conversation .box-list-user .nav-item {
  margin-right: 1rem;
}

.box-conversation .box-list-user .nav-item .nav-link {
  font-size: 1.5rem;
  background-color: #e68f29;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  color: #e5e8fd;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-conversation .box-list-user .nav-item .nav-link.active {
  background-color: #00C09D;
}

.box-conversation .box-list-user .nav-item .nav-link .fa {
  padding-right: .5rem;
}

.box-conversation .box-list-user .box-user .box-banner-user {
  height: calc(100vh - 20rem);
  overflow-x: hidden;
  /* width */
  /* Track */
  /* Handle */
}

.box-conversation .box-list-user .box-user .box-banner-user:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

.box-conversation .box-list-user .box-user .box-banner-user::-webkit-scrollbar {
  width: 8px;
}

.box-conversation .box-list-user .box-user .box-banner-user::-webkit-scrollbar-track {
  background: transparent;
}

.box-conversation .box-list-user .box-user .box-banner-user::-webkit-scrollbar-thumb {
  background: #e68f29;
  border-radius: 50rem;
  visibility: hidden;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1.5rem 2rem;
  margin: 2px 1rem;
  cursor: pointer;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border-radius: 8px;
  position: relative;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item.active {
  background-color: #252222;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item:hover {
  background-color: #252222;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .photo {
  height: 4rem;
  width: 4rem;
  border-radius: 50rem;
  overflow: hidden;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 4.5rem;
          flex: 0 0 4.5rem;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .photo img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .no-photo {
  height: 4rem;
  width: 4rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 4rem;
          flex: 0 0 4rem;
  border-radius: 50rem;
  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;
  overflow: hidden;
  background-color: rgba(3, 157, 216, 0.4);
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .no-photo span {
  text-transform: uppercase;
  color: #039dd8;
  font-size: 2rem;
  font-weight: 800;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .text {
  padding-left: 1rem;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .text h4 {
  text-transform: capitalize;
  color: #e5e8fd;
  font-size: 1.4rem;
  max-width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .text h4 {
    max-width: 140px;
  }
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .text .paragraph {
  color: rgba(229, 232, 253, 0.5);
  font-size: 1.2rem;
  max-width: 156px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .content .text .paragraph {
    max-width: 133px;
  }
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .hour {
  color: rgba(229, 232, 253, 0.5);
  font-size: 1.1rem;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .unread-message {
  position: absolute;
  display: inline-block;
  right: 24px;
  left: auto;
  top: 40px;
}

.box-conversation .box-list-user .box-user .box-banner-user .chat-list--item .unread-message span {
  color: #ef476f;
  background-color: rgba(239, 71, 111, 0.18);
  border-radius: 50rem;
  font-size: 1rem;
  height: 2.5rem;
  width: 2.5rem;
  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;
}

.box-conversation .box-chat {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.box-conversation .box-chat .banner-top {
  padding: 1.5rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}

.box-conversation .box-chat .banner-top .icon-comment {
  height: 4rem;
  width: 4rem;
  background-color: rgba(3, 157, 216, 0.4);
  border-radius: 8px;
  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;
  margin-right: 2rem;
  position: relative;
  display: none;
  cursor: pointer;
}

@media only screen and (max-width: 992px) {
  .box-conversation .box-chat .banner-top .icon-comment {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

.box-conversation .box-chat .banner-top .icon-comment::after {
  content: "";
  position: absolute;
  border-right: 1px dashed rgba(3, 157, 216, 0.4);
  height: 4rem;
  width: 2rem;
  right: -10px;
}

.box-conversation .box-chat .banner-top .icon-comment .fa {
  font-size: 1.6rem;
  font-weight: 800;
  color: #039dd8;
}

.box-conversation .box-chat .banner-top .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-chat .banner-top .content .photo {
  height: 4rem;
  width: 4rem;
  border-radius: 50rem;
  overflow: hidden;
  margin-right: 1.5rem;
  background-color: rgba(3, 157, 216, 0.4);
  color: #039dd8;
}

.box-conversation .box-chat .banner-top .content .photo img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.box-conversation .box-chat .banner-top .content .name-user {
  text-transform: capitalize;
  color: #131314;
}

.box-conversation .box-chat .chat-conversation {
  height: calc(100vh - 212px);
  overflow-x: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  padding: 2rem;
  /* width */
  /* Track */
  /* Handle */
}

.box-conversation .box-chat .chat-conversation:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

.box-conversation .box-chat .chat-conversation::-webkit-scrollbar {
  width: 8px;
}

.box-conversation .box-chat .chat-conversation::-webkit-scrollbar-track {
  background: transparent;
}

.box-conversation .box-chat .chat-conversation::-webkit-scrollbar-thumb {
  background: #e68f29;
  border-radius: 50rem;
  visibility: hidden;
}

.box-conversation .box-chat .chat-conversation .list-msg li {
  margin: 2rem 0;
  clear: both;
}

.box-conversation .box-chat .chat-conversation .right .conversation-list {
  float: right;
  text-align: right;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.box-conversation .box-chat .chat-conversation .right .conversation-list .avatar {
  margin-left: 1.5rem;
  margin-right: 0;
}

.box-conversation .box-chat .chat-conversation .right .conversation-list .user-chat-content .text-chat .bulle {
  background-color: #e68f29;
  border-radius: 8px 8px 0 8px;
}

.box-conversation .box-chat .chat-conversation .right .conversation-list .user-chat-content .text-chat .bulle::before {
  border-color: transparent #e68f29 #e68f29 transparent;
  left: auto;
  right: 0;
  -webkit-transform: rotate(-86deg);
          transform: rotate(-86deg);
}

.box-conversation .box-chat .chat-conversation .conversation-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-chat .chat-conversation .conversation-list .avatar {
  height: 4rem;
  width: 4rem;
  border-radius: 50rem;
  overflow: hidden;
  margin-right: 1.5rem;
}

.box-conversation .box-chat .chat-conversation .conversation-list .avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content {
  margin-bottom: 2rem;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .bulle {
  padding: 12px 20px;
  background-color: #2d2d2d;
  border-radius: 8px 8px 8px 0;
  color: #fff;
  position: relative;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .bulle::before {
  content: "";
  position: absolute;
  border-color: #2d2d2d transparent transparent #2d2d2d;
  border-style: solid;
  border-width: 5px;
  left: 0;
  right: auto;
  bottom: -10px;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .bulle .paragraph {
  font-weight: 600;
  color: #fff;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .bulle .time-chat {
  font-size: 12px;
  margin-top: 4px;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat {
  padding: 0 5px;
  cursor: pointer;
  position: relative;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .fa {
  font-size: 1.5rem;
  color: rgba(19, 19, 20, 0.5);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .fa:hover {
  color: rgba(3, 157, 216, 0.5);
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .delete {
  position: absolute;
  top: 4rem;
  right: -10rem;
  padding: 1rem 2rem;
  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;
  background-color: #131314;
  border-radius: 8px;
  border: 1px solid rgba(19, 19, 20, 0.5);
  -webkit-box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.5);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .delete.active {
  top: 2rem;
  visibility: visible;
  opacity: 1;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .delete .paragraph, .box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .text-chat .setting-chat .delete .fa {
  color: #fff;
  padding: 0 5px;
}

.box-conversation .box-chat .chat-conversation .conversation-list .user-chat-content .name-chat {
  text-transform: capitalize;
  color: #131314;
}

.box-conversation .box-chat .banner-bottom {
  padding: 1.5rem 2rem;
  background-color: #fff;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .col {
  -webkit-box-flex: 1;
      -ms-flex: 1 0;
          flex: 1 0;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .col-auto {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg div input {
  border: 1px solid rgba(19, 19, 20, 0.4);
  height: 5rem;
  width: 100%;
  font-size: 1.6rem;
  color: #131314;
  background-color: #fff;
  border-radius: 50rem;
  padding: 2rem;
  font-weight: 500;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg div input::-webkit-input-placeholder {
  color: #131314;
  font-weight: 500;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg div input:-ms-input-placeholder {
  color: #131314;
  font-weight: 500;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg div input::-ms-input-placeholder {
  color: #131314;
  font-weight: 500;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg div input::placeholder {
  color: #131314;
  font-weight: 500;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .icon {
  padding: 1.5rem 2rem;
  background-color: transparent;
  border-radius: 8px;
}

@media only screen and (max-width: 600px) {
  .box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .icon {
    padding: 1.5rem 1.2rem;
  }
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .icon:hover .fa {
  color: #039dd8;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .icon .fa {
  color: #039dd8;
  font-size: 1.8rem;
  font-weight: 800;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .submit {
  padding: 1.5rem 2rem;
  background-color: #ed982a;
  border-radius: 8px;
}

@media only screen and (max-width: 600px) {
  .box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .submit {
    padding: 1.5rem 1.5rem;
  }
}

.box-conversation .box-chat .banner-bottom .form-submit-msg .box-icon .submit .fa {
  color: #e5e8fd;
  font-size: 1.4rem;
  font-weight: 800;
}

.box-profil {
  background-color: #fff;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  padding: 3rem 2rem;
  border-radius: 5px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.98)), to(rgba(255, 255, 255, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), url(../images/signal.svg);
  background-size: 5%;
  background-position: center;
}

.box-tabs {
  margin-top: 4rem;
}

.box-tabs .nav-item {
  margin-right: 2rem;
}

.box-tabs .nav-item .nav-link {
  font-size: 1.6rem;
  padding: 1rem 3rem;
  color: #131314;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  font-weight: 600;
  border-radius: 5px;
}

.box-tabs .nav-item .nav-link:hover {
  background-color: rgba(255, 31, 89, 0.1);
}

.box-tabs .nav-item .nav-link.active {
  background-color: #ff1f59;
}

.box-tabs .box-content {
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background-color: #fff;
  margin-top: 2rem;
}

.box-tabs .box-content .head-content {
  padding: 2rem;
  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;
  border-bottom: 1px dashed rgba(19, 19, 20, 0.2);
}

.box-tabs .box-content .head-content .title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -1px;
  padding: 1rem 0;
}

.box-tabs .box-content .content {
  padding: 2rem;
}

.box-tabs .box-content .content .box-bande {
  margin-bottom: 3rem;
}

.box-tabs .box-content .content .box-bande .title {
  color: #131314;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -1px;
  padding-bottom: 1rem;
}

.box-tabs .box-content .content .box-bande .bande {
  background-color: #fafafa;
  padding: 1rem;
  border-radius: 5px;
  border: 1px solid rgba(255, 31, 89, 0.1);
}

.box-tabs .box-content .content .box-bande .bande span {
  color: #131314;
  font-size: 1.5rem;
  font-weight: 600;
}

.--uppercase {
  text-transform: uppercase;
}

.box-timeline {
  padding: 2rem;
}

.box-timeline .timeline {
  position: relative;
  padding: 10px;
  margin: 0 auto;
  overflow: hidden;
  color: #ffffff;
}

.box-timeline .timeline:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  border-right: 2px solid #c4d2e248;
  height: 100%;
  display: block;
}

.box-timeline .timeline-row {
  padding-left: 50%;
  position: relative;
  margin-bottom: 30px;
}

.box-timeline .timeline-row .timeline-content {
  position: relative;
  padding: 20px 30px;
  border-radius: 10px;
}

.box-timeline .timeline-row .timeline-content:before {
  content: "";
  position: absolute;
  top: 20px;
  right: -50px;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  z-index: 100;
  background: #ffffff;
  border: 2px solid #c4d2e263;
}

.box-timeline .timeline-row .timeline-content h4 {
  margin: 0 0 20px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 150%;
}

.box-timeline .timeline-row .timeline-content .grade {
  padding: 8px 0;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: 2rem;
}

.box-timeline .timeline-row .timeline-content p {
  margin-bottom: 30px;
  line-height: 150%;
  color: #fff;
}

.box-timeline .timeline-row .timeline-content .thumbs {
  margin-bottom: 20px;
}

.box-timeline .timeline-row .timeline-content .thumbs img {
  margin-bottom: 10px;
}

.box-timeline .timeline-row:nth-child(even) .timeline-content {
  background-color: #e68f29;
  margin-left: 40px;
  text-align: left;
}

.box-timeline .timeline-row:nth-child(even) .timeline-content:after {
  left: -39px;
  border-right: 18px solid #ff5000;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.box-timeline .timeline-row:nth-child(even) .timeline-content:before {
  left: -50px;
  right: initial;
}

.box-timeline .timeline-row:nth-child(odd) {
  padding-left: 0;
  padding-right: 50%;
}

.box-timeline .timeline-row:nth-child(odd) .timeline-time {
  right: auto;
  left: 50%;
  text-align: left;
  margin-right: 0;
  margin-left: 20px;
}

.box-timeline .timeline-row:nth-child(odd) .timeline-content {
  background-color: #e68f29;
  margin-right: 40px;
  margin-left: 0;
  text-align: right;
}

.box-timeline .timeline-row:nth-child(odd) .timeline-content:after {
  right: -39px;
  border-left: 18px solid #1379bb;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

@media (max-width: 767px) {
  .box-timeline .timeline {
    padding: 15px 10px;
  }
  .box-timeline .timeline:after {
    left: 28px;
  }
  .box-timeline .timeline .timeline-row {
    padding-left: 0;
    margin-bottom: 16px;
  }
  .box-timeline .timeline .timeline-row .timeline-time {
    position: relative;
    right: auto;
    top: 0;
    text-align: left;
    margin: 0 0 6px 56px;
  }
  .box-timeline .timeline .timeline-row .timeline-time strong {
    display: inline-block;
    margin-right: 10px;
  }
  .box-timeline .timeline .timeline-row .timeline-icon {
    top: 52px;
    left: -2px;
    margin-left: 0;
  }
  .box-timeline .timeline .timeline-row .timeline-content {
    padding: 15px;
    margin-left: 56px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .box-timeline .timeline .timeline-row .timeline-content:after {
    right: auto;
    left: -39px;
    top: 32px;
  }
  .box-timeline .timeline .timeline-row:nth-child(odd) {
    padding-right: 0;
  }
  .box-timeline .timeline .timeline-row:nth-child(odd) .timeline-time {
    position: relative;
    right: auto;
    left: auto;
    top: 0;
    text-align: left;
    margin: 0 0 6px 56px;
  }
  .box-timeline .timeline .timeline-row:nth-child(odd) .timeline-content {
    margin-right: 0;
    margin-left: 55px;
  }
  .box-timeline .timeline .timeline-row:nth-child(odd) .timeline-content:after {
    right: auto;
    left: -39px;
    top: 32px;
    border-right: 18px solid #5a99ee;
    border-left: inherit;
  }
}

.avatar-upload {
  position: relative;
  max-width: 200px;
  margin: 0 auto;
}

.avatar-upload .avatar-edit {
  position: absolute;
  right: 32px;
  z-index: 1;
  bottom: 0;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #292838;
  border: 1px solid #e5e8fd;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.avatar-upload .avatar-edit input + label:hover {
  background: #1e1d29;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  font-size: 1.5rem;
  color: #fff;
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 100%;
  border: 3px solid #F8F8F8;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.avatar-upload--create-competition {
  max-width: none;
  margin: 0;
}

.avatar-upload--create-competition .avatar-edit {
  right: 32px;
  bottom: 15px;
}

.avatar-upload--create-competition .avatar-preview {
  height: 30rem;
  width: 100%;
  border-radius: 4px;
  border: 2px solid #F8F8F8;
  overflow: hidden;
}

.avatar-upload--create-competition .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.box-notification .alert {
  background-color: #ff1f59;
  padding: 2rem;
  display: inline-block;
  min-width: 40%;
  border-radius: 5px;
}

.box-notification .alert .paragraph {
  color: #fff;
}

.box-notification .content {
  margin-top: 2rem;
}

.box-notification .content .banner-notif {
  background-color: #fff;
  min-height: 10rem;
  border-radius: 8px;
  border: 1px dashed rgba(19, 19, 20, 0.1);
  padding: 2rem;
  margin-bottom: 2rem;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-notification .content .banner-notif:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
}

.box-notification .content .banner-notif .message {
  padding: 1rem 0;
}

.box-notification .content .banner-notif .message .paragraph {
  color: #131314;
}

.box-notification .content .banner-notif .box-bottom {
  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;
}

.box-notification .content .banner-notif .box-bottom .date {
  text-transform: capitalize;
  color: rgba(230, 143, 41, 0.8);
  font-weight: 600;
}

.box-notification .content .banner-notif .box-bottom .lu-msg {
  color: #ff1f59;
  font-size: 1.5rem;
  font-weight: 600;
}

.box-notification .content .banner-notif .box-bottom .check-icon {
  height: 2rem;
  width: 2rem;
}

.box-notification .content .banner-notif .box-bottom .check-icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.box-notification .content .tags-element-categorie {
  border-radius: 50rem;
  padding: .6rem 1.5rem;
  font-size: 1.6rem;
  cursor: pointer;
  margin: 0 5px 10px 0;
  display: inline-block;
}

.box-notification .content .tags-element-categorie.--info {
  background-color: rgba(3, 157, 216, 0.1);
  color: #039dd8;
}

.box-notification .content .tags-element-categorie.--rappel {
  background-color: rgba(0, 192, 157, 0.1);
  color: #00C09D;
}

.my-pagination {
  padding: 1rem;
  background-color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3rem;
  border-radius: 4px;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
}

.my-pagination .btn-prev-next {
  height: 4rem;
  width: 4rem;
  background-color: #e5e8fd;
  border-radius: 50rem;
  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;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.my-pagination .btn-prev-next:hover {
  background-color: rgba(230, 143, 41, 0.1);
}

.my-pagination .btn-prev-next .fa {
  color: #e68f29;
  font-size: 1.5rem;
}

.my-pagination .number {
  margin: 0 1.5rem;
}

.my-pagination .number span {
  padding: 0 1rem;
  color: #e68f29;
  font-size: 1.7rem;
}

.my-pagination .number span a {
  color: #e68f29;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.my-pagination .number span a:hover {
  color: #039dd8;
}

.my-pagination .number span a.active {
  color: #ff1f59;
  font-weight: 700;
}

.box-drive .head-drive {
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  padding: 1rem 2rem;
  border-radius: 4px;
  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;
}

.box-drive .head-drive .d-breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-drive .head-drive .d-breadcrumb li {
  font-size: 1.5rem;
  color: #131314;
  position: relative;
  padding: 0 1rem;
  font-weight: 600;
}

.box-drive .head-drive .d-breadcrumb li:not(:last-child)::after {
  content: "\2044";
  font-weight: 600;
  color: #131314;
  position: absolute;
  font-size: 1.8rem;
  top: 50%;
  right: -3px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.box-drive .head-drive .d-breadcrumb li h3 {
  font-weight: 700;
  text-transform: uppercase;
}

.box-drive .head-drive .d-breadcrumb li a {
  color: #ff1f59;
}

.box-drive .head-drive .box-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box-drive .head-drive .box-btn .button-upload {
  margin-right: 1rem;
}

.box-drive .content {
  margin: 5rem 2rem;
}

.box-drive .content .card-drive {
  padding: 2rem 1rem;
  border-radius: 4px;
  text-align: center;
  border: 1px dashed rgba(19, 19, 20, 0.2);
  margin-bottom: 2rem;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  position: relative;
}

.box-drive .content .card-drive:hover {
  background-color: #fff;
  -webkit-box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.12);
  border: 1px dashed transparent;
}

.box-drive .content .card-drive .setting {
  padding: 0 5px;
  position: absolute;
  right: 5px;
  top: 9px;
  z-index: 5;
  cursor: pointer;
}

.box-drive .content .card-drive .setting .fa {
  font-size: 2rem;
  color: rgba(19, 19, 20, 0.5);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-drive .content .card-drive .setting .fa:hover {
  color: rgba(3, 157, 216, 0.5);
}

.box-drive .content .card-drive .setting .del-update {
  position: absolute;
  top: 4rem;
  right: -10rem;
  background-color: rgba(19, 19, 20, 0.9);
  border-radius: 4px;
  border: 1px solid rgba(19, 19, 20, 0.5);
  -webkit-box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.5);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.box-drive .content .card-drive .setting .del-update.active {
  top: 2rem;
  visibility: visible;
  opacity: 1;
}

.box-drive .content .card-drive .setting .del-update .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 2rem;
  border-radius: 4px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.box-drive .content .card-drive .setting .del-update .box:hover {
  background-color: #ff1f59 !important;
}

.box-drive .content .card-drive .setting .del-update .box .paragraph, .box-drive .content .card-drive .setting .del-update .box .fa {
  color: #fff;
  padding: 0 5px;
  font-size: 1.3rem;
}

.box-drive .content .card-drive .icone {
  height: 8rem;
  width: 8rem;
  margin: 0 auto 1rem;
}

.box-drive .content .card-drive .icone img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.box-drive .content .card-drive .title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  background-color: rgba(19, 19, 20, 0.5);
  padding: 8px;
  border-radius: 4px;
}

.button-upload {
  position: relative;
  display: inline-block;
}

.button-upload span.label {
  position: relative;
  z-index: 0;
  background: #039dd8;
  cursor: pointer;
  color: #fff;
  padding: 2rem 3rem;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.button-upload span.label:hover {
  background-color: #0278a6;
}

.button-upload #upload {
  display: inline-block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.btn-create-doc {
  padding: 1.8rem 3rem;
  background-color: #0278a6;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.btn-create-doc:active, .btn-create-doc:hover {
  background-color: #039dd8;
  color: #fff;
}

.body-sign {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 100vh;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.98)), to(rgba(255, 255, 255, 0.98))), url(../images/signal.svg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)), url(../images/signal.svg);
  background-size: 5%;
  background-position: center;
}

@media only screen and (max-width: 600px) {
  .body-sign {
    display: block;
  }
}

.body-sign .box-text {
  width: 50%;
  background-color: #e68f29;
  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;
  -webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}

@media only screen and (max-width: 768px) {
  .body-sign .box-text {
    width: 40%;
  }
}

@media only screen and (max-width: 600px) {
  .body-sign .box-text {
    width: 100%;
    -webkit-clip-path: none;
            clip-path: none;
    margin-bottom: 4rem;
  }
}

.body-sign .box-text .content {
  padding: 4rem 12rem 4rem 8rem;
  text-align: center;
}

@media only screen and (max-width: 1200px) {
  .body-sign .box-text .content {
    padding: 4rem 6rem 4rem 4rem;
  }
}

@media only screen and (max-width: 768px) {
  .body-sign .box-text .content {
    padding: 4rem 3rem 4rem 2rem;
  }
}

.body-sign .box-text .content .logo {
  height: 10rem;
}

@media only screen and (max-width: 768px) {
  .body-sign .box-text .content .logo {
    height: 8rem;
  }
}

.body-sign .box-text .content .logo img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.body-sign .box-text .content .paragraph {
  color: #fff;
  font-size: 1.7rem;
  padding-top: 1rem;
}

@media only screen and (max-width: 768px) {
  .body-sign .box-text .content .paragraph {
    font-size: 1.4rem;
  }
}

.body-sign .box-form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  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;
}
/*# sourceMappingURL=main.css.map */