body {
  padding: 15px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
  max-width: 2400px;
  margin: 0 auto;
  --sb-track-color: #232E33;
  --sb-thumb-color: #9ba0e3;
  --sb-size: 14px;
}
body::-webkit-scrollbar {
  width: var(--sb-size);
}
body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}
body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
}
body.no-padding {
  padding: 0;
  margin: 0;
}
nav {
  display: block;
  margin-bottom: 15px;
  height: 48px;
}
nav .nav-links,
nav .nav-buttons {
  display: flex;
  justify-content: space-between;
  float: right;
  margin: 0;
}
nav .logo {
  display: block;
  float: left;
}
nav .logo img {
  height: 48px;
  width: auto;
}
nav .nav-links {
  width: fit-content;
}
nav .nav-links li,
nav .nav-buttons li {
  display: inline;
  list-style-type: none;
}
nav .nav-links li a,
nav .nav-links li button {
  display: block;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #019DD8;
  border-radius: 10px;
  background-color: #DCF5FF;
  margin-left: 8px;
  font-size: 14px;
  transition: all 0.3s;
}
nav .nav-links li a:hover,
nav .nav-links li button:hover,
nav .nav-links li a.active,
nav .nav-links li button.active {
  background-color: #b2e8fe;
  color: #1d407c;
}
nav .nav-links li button {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-style: none;
}
nav .nav-buttons {
  width: fit-content;
}
nav .nav-buttons li {
  background-color: #3C6CBA;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  margin-left: 8px;
  transition: all 0.3s;
  cursor: pointer;
}
nav .nav-buttons li img {
  height: 24px;
  width: auto;
  margin: 12px;
}
nav .nav-buttons li img#settings {
  height: 24px;
  width: auto;
  margin: 13px 14px 13px 13px;
}
nav .nav-buttons li:hover {
  background-color: #1d407c;
}
.title-bar {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background-image: url('/photos/background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 20%;
  color: white;
  padding: 5px 0;
}
.title-bar.lower {
  background-position: 0 40%;
}
.title-bar select {
  margin-left: 20px;
  height: 40px;
  width: 200px;
  border-radius: 10px;
  border: none;
  background-color: #DCF5FF;
  color: #019DD8;
  padding: 5px;
  margin-top: 3.5px;
}
.title-bar h1 {
  font-size: 18px;
  padding-left: 25px;
  width: fit-content;
  float: left;
}
.title-bar .title-buttons {
  float: right;
  margin-right: 15px;
}
.title-bar .title-buttons.hidden {
  display: none;
}
.title-bar span.user-recuperation {
  font-size: 14px;
  font-weight: bold;
  padding-right: 5px;
}
.title-bar .title-buttons button,
.calendar .filter button,
.statistics .filter button,
.title-bar .title-buttons div.dx-dropdownbox,
.calendar .filter div.dx-dropdownbox,
.statistics .filter div.dx-dropdownbox {
  background-color: #DCF5FF;
  color: #019DD8;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.3s;
  height: 40px;
  margin-top: 3.5px;
}
.title-bar .title-buttons div.dx-dropdownbox:not(.dx-texteditor-empty),
.calendar .filter div.dx-dropdownbox:not(.dx-texteditor-empty),
.statistics .filter div.dx-dropdownbox:not(.dx-texteditor-empty) {
  border-color: #004075;
  border-width: 3px;
  border-style: solid;
}
.calendar .filter input.dx-texteditor-input {
  font-weight: bold;
}
.calendar .filter input.dx-texteditor-input,
.calendar .filter input.dx-texteditor-input::placeholder {
  color: #019DD8;
  text-align: center;
}
.calendar .filter input.dx-texteditor-input::placeholder {
  font-weight: normal;
}
.calendar .filter div.dx-placeholder {
  display: none;
}
.calendar .filter button,
.calendar .filter div.dx-dropdownbox {
  width: 170px;
}
.statistics .filter button {
  width: 120px;
}
.title-bar .title-buttons button:hover {
  background-color: #b2e8fe;
  color: #1d407c;
}
div.main-section {
  display: block;
  margin-bottom: 15px;
  min-height: 100px;
  border-radius: 10px;
}
.login-wrapper {
  display: block;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.login-wrapper .image-design {
  position: absolute;
  left: 0;
  width: 60vw;
  height: 100%;
  background-image: url('/photos/team.png');
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
.login-wrapper .login-form {
  position: absolute;
  right: 0;
  width: 40vw;
  height: 100%;
  background-image: url('/photos/background.png');
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
  box-shadow: -15px 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper .login-form .login-section {
  background-color: white;
  padding: 15px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.29);
}
.login-wrapper .login-form .login-section .logo-login {
  display: block;
  height: 60px;
  width: auto;
  margin-bottom: 25px;
  margin-top: 15px;
}
.login-wrapper .login-form .login-section p {
  width: 100%;
  text-align: left;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.login-wrapper .login-form .login-section a {
  margin-top: 5px;
  color: #3967B7;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 5px;
}
.login-wrapper .login-form .login-section input {
  width: calc(100% - 15px);
  padding: 8px;
  margin: 5px 0 10px 0;
  border-radius: 5px;
  background-color: #DCF5FF;
  border: none;
}
.login-wrapper .login-form .login-section button {
  width: 100%;
  padding: 8px;
  margin: 5px 0 10px 0;
  border-radius: 5px;
  background-color: #3C6CBA;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.login-wrapper .login-form .login-section button:hover {
  background-color: #1d407c;
}
::-moz-selection {
  color: white;
  background: #1d407c;
}
::selection {
  color: white;
  background: #1d407c;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  background-color: #DCF5FF;
  border-radius: 10px;
}
table th {
  padding: 10px 0;
}
table tr td {
  background-color: white;
  text-align: center;
  border: 1px solid #e5f7fd;
}
.timesheet .dx-datagrid .standby {
  color: #CBB4E3;
  font-weight: bold;
}
.timesheet .dx-datagrid .mission {
  color: #3C6CBA;
  font-weight: bold;
}
.timesheet .dx-datagrid .notapproved,
.timesheet .dx-datagrid .notsetup {
  color: #FFC400;
  font-weight: bold;
}
.timesheet .dx-datagrid .approved,
.timesheet .dx-datagrid .synced {
  color: #68AF21;
  font-weight: bold;
}
.timesheet .dx-datagrid .rejected,
.timesheet .dx-datagrid .error {
  color: #E60D0D;
  font-weight: bold;
}
.timesheet-left {
  display: block;
  width: 60%;
  float: left;
}
p.fp_syncRegHint {
  width: 70%;
  font-size: 12px;
  margin-top: 0;
  position: relative;
  left: 30%;
}
.templates .keyvaluepair,
.timesheet-left .keyvaluepair,
#fp_syncRegForm .keyvaluepair {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-radius: 10px;
  position: relative;
}
.templates .keyvaluepair.indented label,
.timesheet-left .keyvaluepair.indented label,
#fp_syncRegForm .keyvaluepair.indented label {
  font-weight: normal;
  margin-left: 20px;
}
.templates .keyvaluepair:hover,
.timesheet-left .keyvaluepair:hover,
#fp_syncRegForm .keyvaluepair:hover,
.templates .keyvaluepair.active,
.timesheet-left .keyvaluepair.active,
#fp_syncRegForm .keyvaluepair.active {
  background-color: #DCF5FF;
}
.templates .keyvaluepair:hover input,
.timesheet-left .keyvaluepair:hover input,
#fp_syncRegForm .keyvaluepair:hover input,
.templates .keyvaluepair.active input,
.timesheet-left .keyvaluepair.active input,
#fp_syncRegForm .keyvaluepair.active input,
.templates .keyvaluepair:hover textarea,
.timesheet-left .keyvaluepair:hover textarea,
#fp_syncRegForm .keyvaluepair:hover textarea,
.templates .keyvaluepair.active textarea,
.timesheet-left .keyvaluepair.active textarea,
#fp_syncRegForm .keyvaluepair.active textarea,
.templates .keyvaluepair:hover select,
.timesheet-left .keyvaluepair:hover select,
#fp_syncRegForm .keyvaluepair:hover select,
.templates .keyvaluepair.active select,
.timesheet-left .keyvaluepair.active select,
#fp_syncRegForm .keyvaluepair.active select {
  background-color: white;
}
.templates .keyvaluepair label,
.timesheet-left .keyvaluepair label,
#fp_syncRegForm .keyvaluepair label {
  font-weight: bold;
  width: 30%;
}
.templates .keyvaluepair input,
.timesheet-left .keyvaluepair input,
#fp_syncRegForm .keyvaluepair input,
.templates .keyvaluepair select,
.timesheet-left .keyvaluepair select,
#fp_syncRegForm .keyvaluepair select,
.templates .keyvaluepair .dx-datebox-date,
.timesheet-left .keyvaluepair .dx-datebox-date,
#fp_syncRegForm .keyvaluepair .dx-datebox-date,
.templates .keyvaluepair .dx-lookup,
.timesheet-left .keyvaluepair .dx-lookup,
#fp_syncRegForm .keyvaluepair .dx-lookup {
  width: 70%;
  background-color: #DCF5FF;
  border: none;
  padding: 6px 5px;
  border-radius: 8px;
}
.templates .keyvaluepair select,
.timesheet-left .keyvaluepair select,
#fp_syncRegForm .keyvaluepair select,
.templates .keyvaluepair input,
.timesheet-left .keyvaluepair input,
#fp_syncRegForm .keyvaluepair input {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  padding: 5px;
  color: black;
}
.templates .keyvaluepair input:disabled,
.timesheet-left .keyvaluepair input:disabled,
#fp_syncRegForm .keyvaluepair input:disabled,
.templates .keyvaluepair select:disabled,
.timesheet-left .keyvaluepair select:disabled,
#fp_syncRegForm .keyvaluepair select:disabled,
.templates .keyvaluepair textarea:disabled,
.timesheet-left .keyvaluepair textarea:disabled,
#fp_syncRegForm .keyvaluepair textarea:disabled {
  background-color: #ECDCFF;
  color: black;
  cursor: not-allowed;
}
.templates .keyvaluepair select,
.timesheet-left .keyvaluepair select,
#fp_syncRegForm .keyvaluepair select {
  width: calc(70% + 10px);
}
.templates .keyvaluepair input.dx-texteditor-input,
.timesheet-left .keyvaluepair input.dx-texteditor-input,
#fp_syncRegForm .keyvaluepair input.dx-texteditor-input {
  width: 100%;
}
.timesheet-left .keyvaluepair #task-container {
  width: calc(70% + 10px);
  display: block;
}
.timesheet-left .keyvaluepair #task-container .task {
  margin-bottom: 5px;
}
.timesheet-left .keyvaluepair .task .dx-datebox-time {
  width: 20%;
  display: inline-block;
}
.timesheet-left .keyvaluepair .task img.arrow {
  height: 10px;
  width: auto;
  margin: 0 5px;
}
.timesheet-left .keyvaluepair .task img.add,
.timesheet-left .keyvaluepair .task img.delete {
  height: 20px;
  width: auto;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  top: 5px;
}
.timesheet-left .keyvaluepair .task img.delete {
  margin-left: 1px;
}
.timesheet-left .keyvaluepair .task input[type="text"] {
  width: calc(60% - 90px);
}
.timesheet-left .keyvaluepair .task input.dx-texteditor-input {
  width: 100%;
}
.timesheet-left .keyvaluepair .task .plus-day {
  color: white;
  background-color: royalblue;
  font-size: xx-small;
  border-radius: 7px;
  padding: 3px;
  display: inline-block;
}
.templates .keyvaluepair textarea,
.timesheet-left .keyvaluepair textarea {
  width: 70%;
  background-color: #DCF5FF;
  border: none;
  padding: 5px;
  border-radius: 8px;
  height: 100px;
  resize: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}
.templates .keyvaluepair textarea {
  height: 300px;
}
.timesheet-right {
  display: block;
  width: 38%;
  height: calc(100vh - 120px);
  float: right;
}
.timesheet-right .help {
  display: block;
  width: calc(100% - 30px);
  height: calc(100% - 60px);
  background-color: #DCF5FF;
  border-radius: 10px;
  padding: 1px 15px 15px 15px;
  overflow-y: scroll;
}
.templates .buttons,
.timesheet-right .buttons {
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: flex-end;
  align-content: stretch;
  gap: 10px;
}
.templates .buttons {
  width: calc(50% - 30px);
}
#fp_syncRegForm .buttons button,
.templates .buttons button,
.timesheet-right .buttons button {
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s;
  height: 48px;
  flex-grow: 1;
}
.templates .buttons button#cancel,
.timesheet-right .buttons button#cancel {
  background-color: #3C6CBA;
  color: white;
}
.templates .buttons button#cancel:hover,
.timesheet-right .buttons button#cancel:hover {
  background-color: #1d407c;
}
.timesheet-right .buttons button#deny,
#hrCalendarEntryDetails .buttons button#deny,
.timesheet-right .buttons button#delete-entry,
#hrCalendarEntryDetails .buttons button#delete-entry {
  background-color: #304F82;
  color: white;
}
.timesheet-right .buttons button#deny:hover,
#hrCalendarEntryDetails .buttons button#deny:hover,
.timesheet-right .buttons button#delete-entry:hover,
#hrCalendarEntryDetails .buttons button#delete-entry:hover {
  background-color: #15356e;
}
.templates .buttons button#approve,
.timesheet-right .buttons button#approve,
#fp_syncRegForm .buttons button#approve,
.templates .buttons button#submit,
.timesheet-right .buttons button#submit,
#fp_syncRegForm .buttons button#submit {
  background-color: #CBB4E3;
  color: #304F82;
}
.templates .buttons button#approve:hover,
.timesheet-right .buttons button#approve:hover,
#fp_syncRegForm .buttons button#approve:hover,
.templates .buttons button#submit:hover,
.timesheet-right .buttons button#submit:hover,
#fp_syncRegForm .buttons button#submit:hover {
  background-color: #a58ac3;
}
#fp_syncRegForm button {
  width: 150px;
}
/* Button 3 */
.timesheet-left .keyvaluepair .button-cover,
.timesheet-left .keyvaluepair .knobs,
.timesheet-left .keyvaluepair .layer,
.popup .popup-content .content .button-cover,
.popup .popup-content .content .knobs,
.popup .popup-content .content .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.timesheet-left .keyvaluepair .button.b3,
.popup .popup-content .content .button.b3 {
  position: absolute;
  width: 74px;
  height: 27px;
  overflow: hidden;
  margin-top: -3px;
  left: calc(30% - 8px);
}
.timesheet-left .keyvaluepair.indented .button.b3,
.popup .popup-content .content .button.b3 {
  left: calc(30% + 10px);
}
.timesheet-left .keyvaluepair .button.r,
.timesheet-left .keyvaluepair .button.r .layer,
.popup .popup-content .content .button.r,
.popup .popup-content .content .button.r .layer {
  border-radius: 100px;
}
.timesheet-left .keyvaluepair .button.b2,
.popup .popup-content .content .button.b2 {
  border-radius: 2px;
}
.timesheet-left .keyvaluepair .b3 .checkbox,
.popup .popup-content .content .b3 .checkbox {
  position: relative;
  width: 74px !important;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.timesheet-left .keyvaluepair .knobs,
.popup .popup-content .content .knobs {
  z-index: 2;
}
.timesheet-left .keyvaluepair .layer,
.popup .popup-content .content .layer {
  width: 100%;
  background-color: #ecdcff;
  transition: 0.3s ease all;
  z-index: 1;
}
.timesheet-left .keyvaluepair .b3 .knobs:before,
.popup .popup-content .content .b3 .knobs:before {
  content: "NO";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 8px 4px;
  background-color: #a58ac3;
  border-radius: 50%;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
.timesheet-left .keyvaluepair .b3 .checkbox:active + .knobs:before,
.popup .popup-content .content .b3 .checkbox:active + .knobs:before,
.popup .popup-content .content .b3 .checkbox:active ~ .knobs:before {
  width: 46px;
  border-radius: 100px;
}
.timesheet-left .keyvaluepair .b3 .checkbox:checked:active + .knobs:before,
.popup .popup-content .content .b3 .checkbox:checked:active + .knobs:before,
.popup .popup-content .content .b3 .checkbox:checked:active ~ .knobs:before {
  margin-left: -26px;
}
.timesheet-left .keyvaluepair .b3 .checkbox:checked + .knobs:before,
.popup .popup-content .content .b3 .checkbox:checked + .knobs:before,
.popup .popup-content .content .b3 .checkbox:checked ~ .knobs:before {
  content: "YES";
  left: 45px;
  background-color: #304F82;
}
.timesheet-left .keyvaluepair .b3 .checkbox:checked ~ .layer,
.popup .popup-content .content .b3 .checkbox:checked ~ .layer {
  background-color: #3C6CBA;
}
.timesheet-left .keyvaluepair .b3 .checkbox:disabled,
.popup .popup-content .content .b3 .checkbox:disabled {
  cursor: not-allowed;
}
.timesheet-left .keyvaluepair .transport-cost,
.timesheet-left .keyvaluepair .personal-cost {
  width: 20%;
  position: absolute;
  left: calc(30% + 10px);
  top: 3px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}
.timesheet-left .keyvaluepair .transport-description,
.timesheet-left .keyvaluepair .personal-description {
  width: calc(50% - 50px);
  position: absolute;
  left: calc(50% + 30px);
  top: 3px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}
.recup-detailed {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.recup-detailed.hidden,
.recup-simple.hidden {
  display: none;
}
.recup-detailed .recup-left {
  display: block;
  width: 250px;
  float: left;
}
.recup-detailed .recup-left .section,
.recup-detailed .recup-right .section {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  background-color: #DCF5FF;
  border-radius: 10px;
  height: 250px;
}
.recup-detailed .recup-right .section {
  padding: 0 15px 0 15px;
  width: calc(100% - 30px);
}
.recup-detailed .recup-right .section table {
  width: calc(100%);
}
.recup-detailed .recup-right .section table tr {
  height: 40px;
}
.recup-detailed .recup-right .section table .table-type,
.recup-simple table .table-type {
  color: #68AF21;
}
.recup-simple table th,
.recup-simple table td {
  width: 12.5%;
}
.recup-detailed table th,
.recup-detailed table td {
  width: 9%;
}
.recup-detailed table th.longer,
.recup-detailed table td.longer {
  width: 13%;
}
.recup-detailed .recup-right .section table .table-month-1,
.recup-detailed .recup-right .section table .table-month-2,
.recup-detailed .recup-right .section table .table-month-3,
.recup-detailed .recup-right .section table .table-month-4,
.recup-simple table .table-month-1,
.recup-simple table .table-month-2,
.recup-simple table .table-month-3,
.recup-simple table .table-month-4 {
  font-weight: bold;
}
.recup-detailed .recup-left .section p {
  text-align: center;
  font-size: 14px;
  padding: 16.5px 0;
  margin: 0;
  height: 16.5px;
}
.recup-detailed .recup-left .section .week {
  height: 33px;
}
.recup-detailed .recup-left .section .week .day {
  background-color: white;
  border-radius: 50%;
  height: 20px;
  width: 25px;
  float: left;
  margin-left: 9px;
  font-size: 10px;
  text-align: center;
  padding-top: 5px;
}
.recup-detailed .recup-right {
  display: block;
  width: calc(100% - 265px);
  float: right;
}
.recup-toolbar {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  height: 50px;
}
.recup-detailed .recup-detailed-wrapper {
  display: block;
  width: 100%;
  height: calc(100vh - 300px);
  overflow-y: auto;
  margin-top: 15px;
}
.recup-toolbar .date-selector input,
.recup-toolbar .date-selector button {
  padding: 10px 15px;
  border-radius: 5px;
  border: none;
  background-color: #DCF5FF;
  margin: 5px;
  float: left;
}
.recup-toolbar .date-selector button {
  cursor: pointer;
  transition: all 0.3s;
}
.recup-toolbar .date-selector button:hover {
  background-color: #b2e8fe;
}
.recup-toolbar .date-selector p {
  float: left;
  padding: 0;
  margin: 10px;
  width: 150px;
  text-align: center;
}
.recup-toolbar .toolbar-right {
  float: right;
  width: 450px;
  margin: 5px;
}
.recup-toolbar .toolbar-right .totals {
  background-color: #DCF5FF;
  float: right;
  padding: 7px 7px;
  width: fit-content;
}
.recup-toolbar .toolbar-right .totals.row-1 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.recup-toolbar .toolbar-right .totals.row-3 {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.recup-toolbar .toolbar-right input {
  background-color: white;
  border: none;
  float: right;
  text-align: center;
  width: 150px;
}
.recup-toolbar .toolbar-right input.total1 {
  margin-right: 1px;
}
.recup-toolbar .toolbar-right input.total2 {
  margin-left: 1px;
}
.recup-toolbar .toolbar-right p {
  float: right;
  font-size: smaller;
  font-weight: bold;
  padding: 5px 15px;
  margin: 0;
  text-align: left;
  width: 40px;
}
.recup-toolbar .toolbar-right .row-1,
.recup-toolbar .toolbar-right .row-2 {
  padding-bottom: 0;
}
.recup-toolbar .toolbar-right .row-2,
.recup-toolbar .toolbar-right .row-3 {
  padding-top: 0;
}
.recup-toolbar .toolbar-right .row-1 input {
  margin-bottom: 2px;
}
.recup-toolbar .toolbar-right .row-1 input.total1 {
  border-top-left-radius: 5px;
}
.recup-toolbar .toolbar-right .row-1 input.total2 {
  border-top-right-radius: 5px;
}
.recup-toolbar .toolbar-right .row-3 input {
  margin-top: 2px;
}
.recup-toolbar .toolbar-right .row-3 input.total1 {
  border-bottom-left-radius: 5px;
}
.recup-toolbar .toolbar-right .row-3 input.total2 {
  border-bottom-right-radius: 5px;
}
#hrRecupTotal4,
#hrRecupTotal4Header {
  margin-top: 5px;
}
.popup {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(3px);
  pointer-events: all;
  z-index: 1000;
  transition: all 1s;
}
.popup.hidden {
  backdrop-filter: blur(0);
  pointer-events: none;
  transform: translate(0, -80%);
}
.popup .popup-content {
  display: block;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.29);
}
.popup .popup-content .title {
  display: block;
  width: 100%;
  height: 48px;
  background-image: url('/photos/background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 20%;
  color: white;
  padding: 5px 0;
  border-radius: 10px;
}
.popup .popup-content .title h2 {
  font-size: 18px;
  padding-left: 25px;
  width: fit-content;
  float: left;
  margin: 12px 0;
}
.popup .popup-content .title #close {
  float: right;
  margin-right: 20px;
  cursor: pointer;
  height: 20px;
  margin-top: 14px;
}
.popup .popup-content .content {
  display: block;
  width: 100%;
  padding: 15px;
}
.popup .popup-content .content select {
  width: calc(100% - 30px);
  padding: 8px;
  margin: 10px 0 10px 0;
  border-radius: 5px;
  background-color: #DCF5FF;
  border: none;
}
.popup .popup-content .content .permission {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  height: 25px;
}
.popup .popup-content .content .permission .button.b3 {
  margin-top: -22px;
  left: calc(40% + 30px);
}
.popup .popup-content .content .keyvaluepair {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 5px;
  margin-right: 30px;
}
.popup .popup-content .content .keyvaluepair label {
  font-weight: normal;
}
.popup .popup-content .content .keyvaluepair input {
  width: calc(80% - 25px);
  padding: 6px 5px;
  border-radius: 8px;
  background-color: #DCF5FF;
  border: none;
}
.popup .popup-content .content .keyvaluepair .dx-datebox-date {
  width: calc(80% - 25px);
  display: inline-block;
}
.popup .popup-content .content .keyvaluepair .dx-datebox-date input {
  width: 100%;
}
.popup .popup-content .content .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  width: calc(100% - 30px);
  gap: 10px;
}
.popup .popup-content .content .buttons button {
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s;
  height: 40px;
  flex-grow: 1;
}
.popup .popup-content .content .buttons button#popup-cancel {
  background-color: #3C6CBA;
  color: white;
}
.popup .popup-content .content .buttons button#popup-cancel:hover {
  background-color: #1d407c;
}
.popup .popup-content .content .buttons button#popup-confirm {
  background-color: #CBB4E3;
  color: #304F82;
}
.popup .popup-content .content .buttons button#popup-confirm:hover {
  background-color: #a58ac3;
  color: #304F82;
}
.popup .popup-content .content .buttons #popup-timesheet-mission,
.popup .popup-content .content .buttons #popup-timesheet-permanence,
.popup .popup-content .content .buttons #popup-timesheet-standby {
  padding-top: 200px;
  padding-bottom: 35px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  width: 33%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 80px;
}
.popup .popup-content .content .buttons #popup-timesheet-mission {
  background-color: #3C6CBA;
  background-image: url('/logos/location.svg');
}
.popup .popup-content .content .buttons #popup-timesheet-mission:hover {
  background-color: #1d407c;
}
.popup .popup-content .content .buttons #popup-timesheet-permanence {
  background-color: #7aa8f2;
  background-image: url('/logos/office.svg');
}
.popup .popup-content .content .buttons #popup-timesheet-permanence:hover {
  background-color: #3967b7;
}
.popup .popup-content .content .buttons #popup-timesheet-standby {
  background-color: #CBB4E3;
  background-image: url('/logos/phone.svg');
}
.popup .popup-content .content .buttons #popup-timesheet-standby:hover {
  background-color: #a58ac3;
}
.popup .popup-content .content .calendar-entry .user-groups {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.popup .popup-content .content .calendar-entry .user-groups .users,
.popup .popup-content .content .calendar-entry .user-groups .selectors {
  display: block;
  width: 50%;
}
.popup .popup-content .content .calendar-entry .user-groups .users-list {
  width: 80%;
  max-height: 25vh;
  overflow-y: auto;
}
.popup .popup-content .content .calendar-entry .keyvaluepair {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 5px;
}
.popup .popup-content .content .calendar-entry .keyvaluepair label {
  font-weight: bold;
  min-width: 20%;
}
.popup .popup-content .content .calendar-entry .keyvaluepair select,
.popup .popup-content .content .calendar-entry .keyvaluepair input {
  width: calc(80% - 25px);
  padding: 6px 5px;
  margin: 0 5px 0 0;
  border-radius: 8px;
  background-color: #DCF5FF;
  border: none;
}
.popup .popup-content .content .calendar-entry .keyvaluepair select.dx-texteditor-input,
.popup .popup-content .content .calendar-entry .keyvaluepair input.dx-texteditor-input {
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  padding: 5px;
  color: black;
}
.popup .popup-content .content .calendar-entry .keyvaluepair .dx-datebox-datetime {
  width: calc(80% - 25px);
  display: inline-block;
}
.popup .popup-content .content .calendar-entry .keyvaluepair button {
  height: 30px;
  width: 30px;
  padding: 5px 5px;
  margin: 0 5px 0 0;
  border-radius: 10px;
  background-color: #3C6CBA;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.popup .popup-content .content .calendar-entry .keyvaluepair button:hover {
  background-color: #1d407c;
}
.popup .popup-content .content .calendar-entry button#add-date,
.popup .popup-content .content .calendar-entry button.remove-date {
  padding: 8px 20px;
  border-radius: 5px;
  background-color: #3C6CBA;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0px 0 10px 0;
}
.popup .popup-content .content .calendar-entry button.remove-date {
  background-color: #ECDCFF;
  color: black;
  margin: 15px 0 10px 0;
}
.popup .popup-content .content .calendar-entry button.remove-date:hover {
  background-color: #CBB4E3;
}
.popup .popup-content .content .calendar-entry button#add-date:hover {
  background-color: #1d407c;
}
.popup .popup-content .content .calendar-entry .dates {
  max-height: 35vh;
  overflow-y: scroll;
  margin-top: 40px;
}
.popup .popup-content .content .calendar-entry .dates .date {
  margin-bottom: 40px;
}
.popup.wide .popup-content {
  width: 900px;
}
.calendar {
  display: block;
  width: 100%;
}
.calendar .dx-scheduler .dx-scheduler-appointment-content:has(.mission) {
  background-color: #3C6CBA;
}
.calendar .dx-scheduler .dx-scheduler-appointment-content:has(.standby) {
  background-color: #CBB4E3;
}
.calendar .dx-scheduler .dx-scheduler-appointment-content:has(.permanence) {
  background-color: #7aa8f2;
}
.statistics .left {
  display: block;
  width: calc(15% - 30px);
  float: left;
  padding: 15px;
}
.calendar .left {
  display: block;
  float: left;
  width: 200px;
}
.statistics .right,
.calendar .right {
  display: block;
  width: calc(15% - 30px);
  float: right;
  padding: 15px;
  opacity: 1;
  transition: all 1s;
}
.statistics .right {
  max-width: 120px;
}
.calendar .center {
  display: block;
  height: calc(100%);
  width: calc(70% - 200px);
  float: left;
  transition: all 1s;
}
.calendar p {
  margin: 0;
  padding: 0;
}
.calendar .right {
  display: block;
  width: calc(30% - 40px);
  float: right;
  padding: 15px;
}
.calendar .right .keyvaluepair {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 5px;
}
.calendar .right .keyvaluepair label {
  font-weight: bold;
}
.calendar .right .keyvaluepair input {
  width: calc(80% - 25px);
  padding: 6px 5px;
  border-radius: 8px;
  background-color: #DCF5FF;
  border: none;
}
.calendar .right .overview {
  display: block;
  width: 100%;
  margin-top: 15px;
  height: calc(100vh - 300px);
  background-color: #DCF5FF;
  border-radius: 10px;
  overflow-y: scroll;
}
.calendar .right .overview table {
  width: calc(100% - 30px);
  border-collapse: collapse;
  margin: 15px;
}
.calendar .right .overview table tr td {
  border-bottom: 4px solid #dcf5ff;
}
.calendar .right .overview table tr td:first-child {
  border-radius: 10px 0px 0px 10px;
}
.calendar .right .overview table tr td:last-child {
  border-radius: 0px 10px 10px 0px;
}
.calendar .right .overview table tr:hover td {
  background: #b8d1ed;
  cursor: pointer;
}
.calendar .right .overview table tr th {
  background: white;
  padding: 0px;
  margin: 0px;
}
.calendar .right .overview table tr th:first-child {
  border-radius: 10px 0px 0px 10px;
}
.calendar .right .overview table tr th:last-child {
  border-radius: 0px 10px 10px 0px;
}
.calendar .right .overview table tr:first-child {
  border-bottom: 10px solid #dcf5ff;
  border-top: 10px solid #dcf5ff;
}
.calendar .right .overview table tr.selected {
  font-weight: bolder;
}
.calendar .dx-scheduler .dx-scheduler-date-table .dx-scheduler-date-table-cell:not(.dx-scheduler-date-table-other-month).weekend-cell {
  background-color: lightgreen;
}
.calendar .dx-scheduler .dx-scheduler-date-table .dx-scheduler-date-table-cell:not(.dx-scheduler-date-table-other-month).holiday-cell {
  background-color: limegreen;
}
.statistics .filter p,
.calendar .filter p {
  font-weight: bold;
}
.statistics .filter button.active,
.calendar .filter button.active {
  font-weight: bold;
  border-color: #004075;
  border-width: 3px;
  border-style: solid;
}
.calendar .overview th.hidden {
  display: none;
}
.right.filter .filter-section-header {
  text-align: right;
}
.filter-section-header {
  margin-top: 15px;
  margin-left: 8px;
  margin-bottom: 5px;
}
.right.filter .filter-section-link {
  float: right;
  margin-right: -5px;
}
.left.filter .filter-section.types .filter-section-link:nth-child(2) button {
  background-color: #3C6CBA;
  color: white;
}
.left.filter .filter-section.types .filter-section-link:nth-child(3) button {
  background-color: #7aa8f2;
  color: white;
}
.left.filter .filter-section.entries .filter-section-link:nth-child(2) button {
  background-color: #3C6CBA;
  color: white;
}
.left.filter .filter-section.entries .filter-section-link:nth-child(3) button {
  background-color: #7aa8f2;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(2) button {
  background-color: #3c6cba;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(3) button {
  background-color: #d0e9f9;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(4) button {
  background-color: #c4ddf3;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(5) button {
  background-color: #b8d1ed;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(6) button {
  background-color: #acc5e7;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(7) button {
  background-color: #a0b9e1;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(8) button {
  background-color: #94addb;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(9) button {
  background-color: #88a1d5;
  color: white;
}
.left.filter .filter-section.groups .filter-section-link:nth-child(10) button {
  background-color: #7c95cf;
  color: white;
}
#hrStatsChart {
  margin-top: 35px;
}
.dx-datagrid .dx-datagrid-headers table tr td {
  background: #DCF5FF;
  color: black;
  font-weight: 600;
}
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  border: none;
}
.dx-datagrid-headers.dx-datagrid-nowrap.dx-bordered-top-view {
  border: none;
}
.dx-datagrid-rowsview .dx-row:hover td {
  background: #DCF5FF;
  cursor: pointer;
}
.profile-details .title select {
  width: 30%;
  background-color: #DCF5FF;
  border: none;
  padding: 6px 5px;
  border-radius: 8px;
  float: right;
  margin-right: 15px;
  margin-top: 10px;
}
.profile-details .title select:hover,
.profile-details .title select.active {
  background-color: white;
}
.profile-details .title select:focus {
  border: none;
}
.profile-details .left {
  display: block;
  width: 35%;
  float: left;
}
.profile-details .right {
  display: block;
  width: 65%;
  /*height: calc(100vh - 120px);*/
  float: right;
}
.profile-details .clear {
  clear: both;
}
.profile-details .clear .error {
  margin-right: 30px;
}
.profile-details .content {
  font-size: 12px;
}
.popup .popup-content .profile-details .content .keyvaluepair label {
  font-weight: bold;
}
.popup .popup-content .profile-details .content .left .keyvaluepair input {
  background-color: transparent;
  width: 100px;
}
.popup .popup-content .profile-details .content .right .keyvaluepair input {
  width: 150px;
}
.dx-datagrid-headers .dx-datagrid-table {
  border-radius: 10px;
}
.dx-datagrid-headers .dx-datagrid-table colgroup,
.dx-datagrid-headers .dx-datagrid-table tbody,
.dx-datagrid-headers .dx-datagrid-table tbody > tr {
  border-radius: 10px;
}
.dx-datagrid-headers .dx-datagrid-table tbody tr td > div:nth-child(3) {
  background: white;
  width: 100%;
  padding: 5px;
  border-radius: 8px;
}
.dx-datagrid-headers .dx-datagrid-table tbody tr td > div:nth-child(1),
.dx-datagrid-headers .dx-datagrid-table tbody tr td > div:nth-child(2) {
  padding: 7px 0 0 0;
}
.dx-datagrid-headers .dx-datagrid-table tbody tr td:nth-child(1) {
  border-radius: 10px 0px 0px 0px;
}
.dx-datagrid-headers .dx-datagrid-table tbody tr td:last-child {
  border-radius: 0px 10px 0px 0px;
}
#hrUsersGrid .dx-datagrid-rowsview .dx-row,
#hrPermissionsGrid .dx-datagrid-rowsview .dx-row {
  border: 3px solid #dcf5ff;
}
#hrUsersGrid .dx-datagrid .dx-column-lines > td,
#hrPermissionsGrid .dx-datagrid .dx-column-lines > td {
  border: 1px solid #dcf5ff;
}
#hrUsersGrid .dx-scrollable-scrollbar,
#hrPermissionsGrid .dx-scrollable-scrollbar {
  display: none;
}
.dx-datagrid-rowsview {
  border-radius: 0px 0px 10px 10px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 4px solid #dcf5ff !important;
}
.dx-datagrid-rowsview .dx-datagrid-content {
  border-radius: 0px 0px 10px 10px;
  border: none;
}
.dx-datagrid-rowsview .dx-datagrid-content table {
  border-radius: 0px 0px 10px 10px;
  border: none;
}
.dx-datagrid-rowsview .dx-datagrid-content table colgroup,
.dx-datagrid-rowsview .dx-datagrid-content table tbody {
  border-radius: 0px 0px 10px 10px;
  border: none;
}
.dx-datagrid-rowsview .dx-datagrid-content table colgroup tr,
.dx-datagrid-rowsview .dx-datagrid-content table tbody tr {
  border: 4px solid #dcf5ff;
  border-radius: 8px !important;
}
.dx-datagrid-rowsview .dx-datagrid-content table colgroup tr td,
.dx-datagrid-rowsview .dx-datagrid-content table tbody tr td {
  border-color: #dcf5ff;
}
.dx-pager {
  border: none;
}
.dx-pager .dx-page-sizes .dx-selection {
  color: black !important;
  background-color: #dcf5ff !important;
}
.dx-pager .dx-pages .dx-selection {
  color: black !important;
  background-color: #dcf5ff !important;
}
#hrSettingsForm .keyvaluepair {
  margin-bottom: 15px;
}
#hrPopupSettings .popup-content .left {
  width: 50%;
}
#hrPopupSettings .popup-content .left .keyvaluepair {
  justify-content: unset;
}
#hrPopupSettings .popup-content .left .keyvaluepair > div {
  margin-left: 15px;
}
#hrPopupSettings .popup-content .right {
  width: 50%;
}
#hrStatsChart {
  width: 100%;
  height: 60vh;
}
.statistics .center {
  display: block;
  height: 60vh;
  width: 70%;
  float: left;
}
.dx-datagrid-search-panel {
  border: none !important;
  background: #dcf5ff !important;
  border-radius: 10px !important;
}
#delegate {
  cursor: pointer;
}
.dx-texteditor.dx-editor-outlined {
  border: none !important;
}
.user-entry {
  margin-bottom: 3px;
}
.calendar .dx-scheduler .dx-scheduler-date-table .dx-scheduler-date-table-cell:not(.dx-scheduler-date-table-other-month).weekend-cell {
  background-color: #dcf5ff;
}
.notenough {
  color: #e4d8ff;
}
.wrap-text {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.right.hiddenSidebar {
  width: 0px;
  opacity: 0;
}
.center.hiddenSidebar {
  width: calc(100% - 230px);
}
.hidden {
  display: none;
}
.help .imgEdit {
  display: flex;
  justify-content: end;
  cursor: pointer;
}
.help .imgEdit img {
  margin-left: 15px;
  margin-top: 5px;
}
.dx-scheduler-timeline-month .dx-scheduler-header-panel,
.dx-scheduler-timeline-month .dx-scheduler-date-table {
  max-width: 3200px !important;
}
.dx-scheduler-timeline-week .dx-scheduler-header-panel,
.dx-scheduler-timeline-week .dx-scheduler-date-table {
  max-width: 14000px !important;
}
.dx-scheduler-timeline-work-week .dx-scheduler-header-panel,
.dx-scheduler-timeline-work-week .dx-scheduler-date-table {
  max-width: 11000px !important;
}
.dx-scheduler-timeline-work-week .dx-scheduler-date-table-cell,
.dx-scheduler-timeline-day .dx-scheduler-date-table-cell,
.dx-scheduler-timeline-week .dx-scheduler-date-table-cell {
  min-width: 35px !important;
  /* Try values like 30px or 40px */
  width: 35px !important;
}
.add-day {
  position: relative;
  top: 4px;
}