/* Placeholder for OEM branding */
* {




  /* cobalt - doca palette - BEGIN */
  /*Texte*/
  --cobalt--ultramarine: #00008c;
  --cobalt--lynch: #666d92;

  /*action*/
  --cobalt--bleu-digital-05: #f2f2ff;
  --cobalt--bleu-digital-10: #e5e5fd;
  --cobalt--bleu-digital-100: #0000ff;
  --cobalt--hover: #3351E0;

  
  --cobalt--grey-10: #EDEDF2;
  --cobalt--grey-20: #DADCE5;
  --cobalt--grey-30: #C2C5D3;
  --cobalt--grey-70: #7d7d88;

  --cobalt--click: #001EAE;
  --cobalt--selected: #0000cc;

  /*backgourd*/
  --cobalt--user-blue:#3970E6;
  --cobalt--light: #F8F8F8;

  /*status*/

  --cobalt--dodger-blue-background:#EFF2FF;

  --cobalt--green-background: #F4FAF6;
  --cobalt--green-icon: #289D15;
  --cobalt--green-text: #4A801A;

  --cobalt--red-background: #FEEFF4;
  --cobalt--red-icon: #D82A2A;
  --cobalt--red-text: #D00000;

  --cobalt--orange-background: #FFF4EC;
  --cobalt--orange-icon: #ED6508;
  --cobalt--orange-text: #df3d14;


  /* cobalt - doca palette - END */

  --primary-1-color: #2b4c9a;
  --primary-2-color: #3f93cd;
  --error-color: var(--cobalt--red-icon);
  --running-color: #00b6e3;
  --success-color: var(--cobalt--green-icon);
  --warning-color: var(--cobalt--orange-icon);

  --disabled-color: #9bbbd9;

  --anim-size: 15px;

  /* color: var(--cobalt--ultramarine); */
  font-family: Montserrat, 'Courier New', Courier, monospace;

}

body {
  background-color: var(--cobalt--light);
  margin: 0;
  min-height: calc(100vh - 80px);
  padding: 0;
  padding-bottom: 80px;
  position: relative;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cobalt--ultramarine);
  margin: 0;
  padding: 0;
}

button, .ekup-button, .ekup-icon-button, input, label, select, textarea {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease
    ;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

textarea {
  height: 130px;
  resize: none;
}

label {
  color: var(--cobalt--ultramarine);
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}
input, select, textarea {
  border-radius: 8px;
  border: 1px solid var(--cobalt--grey-20) ;
  font-size: 14px;
  display: block;
  line-height: 17px;
  margin-bottom: 50px;
  min-height: 16px;
  min-width: 350px;
  outline: none;
  padding: 8px 16px;
}

input:disabled, select:disabled, textarea:disabled
{  
  background-color: var(--cobalt--grey-20);
  color: var(--cobalt--lynch);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--cobalt--bleu-digital-100) ;
}

.input-with-actions {
  align-items: center;
  display: flex;
  /* flex-direction: column; */
  gap: 20px;
  margin-bottom: 20px;
  width: fit-content;
}

.input-with-actions input,
.input-with-actions select,
.input-with-actions textarea {
  margin-bottom: 0px;
}


.input-with-actions a,
.input-with-actions button,
.input-with-actions .ekup-button {
  width: fit-content;
}

.flex-end {
  display: flex;
  align-items: end;
}

body .header {
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  height: 80px;
  padding: 0 50px;
}

body .header .logo {
  flex:1;
  font-size: 2em;
  font-weight: 600;
}

body .container .header .logo  a {
  color: var(--cobalt--bleu-digital-100);
}

body .header .menu ul {
  display: flex;
  gap: 5px;
}

body .header .menu ul li {
  list-style: none;
}

body .header .menu ul li a,
body .header .menu ul li i{
  font-size: 1.05em;
  font-weight: 600;

}

body .header .menu .ekup-button,
body .header .menu .ekup-icon-button {
  border: none;
  --button-hover-shadow-color: var(--button-hover-bg-color)
}

body .header .menu li.separator {
  border-left: 1px solid var(--cobalt--bleu-digital-10);
  margin: 0 20px;
}

.footer {
  background-color: #fff;
  bottom: 0;
  display: flex;
  height: 30px;
  line-height: 30px;
  min-height: auto;
  padding: 10px 50px;
  position: absolute;
  width: calc(100% - 100px);
}

.footer .filler {
  flex: 1;
}

.footer version {
  margin-right: 30px;
}


body .menu ul li  a.active {
  background-color: var(--cobalt--bleu-digital-10);
}

#application-loader {
  align-items: center;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999;
}

.app-name {
  color: var(--cobalt--bleu-digital-100);
  font-size: 4em;
  font-weight: 500;

}

#application-loader .app-name {
  margin-top: -70px;
  margin-bottom: 100px;
}

.circular-loader {
  height: 50px;
  position: relative;
  width: 50px;
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.circular-loader-spinner {
  --border-width: 5px;

  border: var(--border-width) solid var(--cobalt--bleu-digital-10);
  border-top: var(--border-width) solid var(--cobalt--bleu-digital-100);
  border-right: var(--border-width) solid var(--cobalt--bleu-digital-100);
  border-radius: 50%;
  height: calc(100% - var(--border-width) - var(--border-width));
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: calc(100% - var(--border-width) - var(--border-width));
}

.header .notification-button.new {
  animation: warning-highlight 1s linear infinite;
  ;
}

.header .notification-button i {
  position: relative;
}

.header .notification-button i .notification-counter {
  background-color: var(--error-color);
  border-radius: 100px;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 2px;
  position: absolute;
  right: -6px;
  top: -8px;
  height: 12px;
  width: 12px;
  text-align: center;
  line-height: 12px;
}

.header .action-icons-small .notification-button {
  color: var(--primary-2-color) !important;
  background-color: transparent;
}

.progress {
  background-color: var(--cobalt--bleu-digital-10);
  border: 1px solid var(--cobalt--bleu-digital-10);
  border-radius: 8px;
  height: 4px;
  overflow: hidden;
}

.progress .progress-bar {
  background-color: var(--cobalt--bleu-digital-100);
  height: 100%;
  transition: width 1s ease;
}

.table-primary {
  overflow-x: auto;
  white-space: nowrap;
  
  table {
    color: var(--cobalt--ultramarine);
    width: 100%;
    border-collapse: collapse;

    a {
      color: var(--cobalt--bleu-digital-100);
      text-decoration: underline;
    }

    tr {
      border-bottom: 2px solid var(--cobalt--bleu-digital-10);
      
      th {
        text-align: start;
        padding: 15px 5px;
        border-bottom: 2px solid var(--cobalt--bleu-digital-10);
      }
      
      td {
        padding: 15px 5px;
      }
    }
    
    tr:last-child {
      border-bottom: none;
    }
  }
}


.pagination-footer {
  font-weight: 500;
  font-size: 14px;
  color: var(--cobalt--ultramarine);
  border-top: 2px solid var(--cobalt--bleu-digital-10);

  .page-size-container {
    padding: 24px;
    text-align: center;
    border-right: 2px solid var(--cobalt--bleu-digital-10);
  }

  select {
    color: var(--cobalt--ultramarine);
    min-width: 45px;
    border: none;
    padding: 0;
    font-weight: 600;
  }

  button {
    border: none;
    --button-hover-shadow-color: var(--button-hover-bg-color)
  }

  button:disabled {
    color: var(--cobalt--grey-30);
    --button-hover-shadow-color: none;
    background-color: transparent;
    cursor: default;
  }
}

.tabs {
  background-color: #FFF;
  /* border-bottom: 1px solid var(--cobalt--bleu-digital-10); */
  margin-bottom: 30px;
}

.tabs ul {
  display: flex;
}
.tabs ul li {
  align-items: center;
  border-bottom: 2px solid var(--cobalt--bleu-digital-10);
  color: var(--cobalt--ultramarine);
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: 15px;
  padding: 20px;
}

.tabs ul li.active {
  border-bottom-color: var(--cobalt--bleu-digital-100);
  color: var(--cobalt--bleu-digital-100);
}

.tabs-secondary {
  background-color: #FFF;
  margin-bottom: 30px;
  border: 2px solid var(--cobalt--bleu-digital-10);
  border-radius: 5px;
  width: fit-content;
  padding: 2px;
}

.tabs-secondary ul {
  display: flex;
}
.tabs-secondary ul li {
  align-items: center;
  color: var(--cobalt--ultramarine);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: 15px;
  padding: 10px 15px;
  
  a {
    font-weight: normal;
    font-size: 14px;
    color: var(--cobalt--grey-70);
  }
}

.tabs-secondary ul li.active {
  background-color: var(--cobalt--bleu-digital-100);
  
  a {
    color: var(--cobalt--light);
  }
}

.log-details-modal {
  
  .content {
    padding: 30px;
    max-height: 450px;
    overflow: auto;
  }

  .log-details-expandable {
    background-color: var(--cobalt--grey-10);
    border-radius: 10px;

    .expandable {
      border-bottom: 1px solid var(--cobalt--grey-20);
    }

    .expandable.last-element {
      border-bottom: none;
    }
  }
  
  .expand-icon {
    font-size: 22px;
  }
  
  .actions-container {
    border-top: 1px solid var(--cobalt--bleu-digital-10);
  }
}



.settings-container {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  /* grid-auto-rows: 1fr; */
}

.settings-container h3 {
  margin-bottom: 20px;
}


.settings-container input, textarea {
  display: inline-block;
  margin-bottom: 15px;
  min-width: 150px;
  width: calc(100% - 32px);
}

.settings-container select {
  display: inline-block;
  margin-bottom: 15px;
  min-width: 150px;
  width: 100%;
}

.advancedoptions li {
  margin-bottom: 25px;
}

.advancedoptions li .input-row {
  align-items: center;
  display: flex;
  gap: 25px;
  margin-bottom: 10px;
}

.advancedoptions li .input-row input {
  margin: 0;
}

.advancedoptions li .longdescription {
  margin-left: 20px;
}

.sftp-tab .input-row {
  margin-bottom: 15px;
}

.sftp-tab input {
  display: inline-block;
  margin-bottom: 0;
  min-width: 0;
}

body .body > .content {
  margin: 10px 100px;
}


body .body > .content .page-title {
  align-items: center;
  color: var(--cobalt--ultramarine);
  display: flex;
  gap: 25px;
  margin: 50px 0;
}

body .body > .content .page-title h2 {
  flex: 1;
  font-size: 2.3em;
  font-weight: 500;
  margin: 0;
}

body .body > .content .page-title > i {
  background-color: #fff;
  background-color: var(--cobalt--bleu-digital-10);
  border-radius: 20px;
  font-size: 1.3em;
  height: 30px;
  line-height: 30px;
  margin-right: 20px;
  text-align: center;
  width: 30px;
}

body .body > .content .page-title .ekup-button,
body .body > .content .page-title .ekup-button i {
  font-size: 15px;
  line-height: 2.3em;
}

.actions-container {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.card {
  --card-shadow-color:  rgba(0, 0, 0, 0.24);

  background-color: #fff;
  border-radius: 10px;
  box-shadow:var(--card-shadow-color) 0px 3px 8px;
  padding: 20px 32px;
}


.checkbox-container .checkbox {
  align-items: center;
  border: 1px solid var(--cobalt--lynch);
  border-radius: 4px;
  display: flex;
  height: 16px;
  justify-content: center;
  transition: background-color 0.1s ease-in, box-shadow 0.3s ease;
  width: 16px;
}

.checkbox-container input[type="radio"] + .checkbox-label .checkbox {
  border-radius: 20px;
}

.checkbox-container input:checked + .checkbox-label .checkbox {
  background-color: var(--cobalt--user-blue);
  border-color: var(--cobalt--user-blue);
}


.checkbox-container input[type="checkbox"], 
.checkbox-container input[type="radio"] {
  display: none;
}

.checkbox-container .checkbox i {
  color: transparent;
}

.checkbox-container input:checked + .checkbox-label .checkbox i {
  color: #fff;
}

.checkbox-container input[type="radio"] + .checkbox-label .checkbox i
{
  font-size: 8px;
}

.checkbox-container .checkbox-label {
  align-items: center;
  cursor: pointer;
  display: flex;
}

.checkbox-container .checkbox-label > :nth-child(2) {  
  flex: 1;
  margin-left: 10px;
}

.checkbox-container .checkbox-label:hover .checkbox {
  border-color: var(--cobalt--user-blue);
  box-shadow: var(--cobalt--user-blue) 0px 3px 8px;
}

.expandable  {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s ease-out;
}

.expandable.expand {
  grid-template-rows: 1fr;

}

.expandable .inner {
  overflow: hidden;
}

@keyframes delay-overflow {
  0% { overflow: hidden; }
  99% { overflow: hidden; }
  100% { overflow: initial; }
}

/** HOME PAGE -- BEGIN **/

.home .statepadding {
  align-items: center;
  background-color: var(--cobalt--user-blue);
  border-radius: 15px;
  color: #fff;
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  padding: 30px 40px;
}

.home .statepadding > .state {
  flex: 1;
}

.home .statepadding .task-state-info {
  display: flex;
  gap: 4px;
}

.home .tasks .tasklist {
  /* columns: 3; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.home .tasks .tasklist .task {
  break-inside: avoid;
}

.home .tasks .tasklist .task .task-title {
  align-items: center;
  color: var(--cobalt--ultramarine);
  display: flex;
  gap: 15px;
}

.home .tasks .tasklist .task .task-title h3 { flex: 1;}

.home .tasks .tasklist .task .task-info {
  border-top: 1px solid var(--cobalt--bleu-digital-10);
  color: var(--cobalt--ultramarine);
  margin-top: 15px;
  padding-top: 15px;
  
}

.home .tasks .tasklist .task .task-info dt {
  font-weight: 600;
}
.home .tasks .tasklist .task .task-info dd {
  margin-left: 0;
  margin-bottom: 15px;
}

.home .tasks .tasklist .task .task-info .task-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}


.captcha .details {
  align-items: center;
  display: flex;
  flex-direction: column;
}

/** HOME PAGE -- END **/

/** ADD PAGE -- BEGIN **/
.addwizard ul,
.restorewizard ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  padding: 0;
  width: max-content;
}

.addwizard ul li,
.restorewizard ul li {
  cursor: pointer;
}

.addwizard ul li.selected ,
.restorewizard ul li.selected {
  --card-shadow-color:  var(--cobalt--user-blue);
}

.addwizard .checkbox-container .checkbox-label > :nth-child(2),
.restorewizard .checkbox-container .checkbox-label > :nth-child(2)
{
  margin-left: 40px;
}

.addwizard ul li  label,
.restorewizard ul li  label {
  color: var(--cobalt--ultramarine);
  font-weight: 600;
}

.addwizard ul li .subtext,
.restorewizard ul li .subtext{
  color: var(--cobalt--lynch);
  font-weight: 400;
}

/* .restorewizard h3 {
  text-align: center;
  text-transform: uppercase;
  margin: 30px 0;
  position: relative;
}

.restorewizard h3::before, 
.restorewizard h3::after {
  background-color: var(--cobalt--ultramarine);
  content: ' ';
  height: 1px;
  position: absolute;
  top: calc(50% - 1px);
  width: 40%;
} */

/* .restorewizard h3::before {
  left: 5%;
}
.restorewizard h3::after {
  right: 5%;
} */

/* .add, .restore {
  display: flex;
  margin: 0;
  gap: 20px;
} */

.steps-container {
  display: flex;
  gap: 20px;
}

.steps-legend {
  align-self: flex-start;
  min-width: 300px;
  position: sticky;
  top: 10px;
  width: 300px;
}

.steps-legend ol {
  list-style: none;
  position: relative;
}

.steps-legend li {
  color: var(--cobalt--grey-20);
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  position: relative;
}

.steps-legend li:last-child {
  height: auto;
}

.steps-legend li:not([disabled],.active){
  cursor: pointer;
}

.steps-legend li:not([disabled],.active):hover > span {
  display: block;
  font-size: 1.1em;
}


.steps-legend li:not(:last-child)::before {
  content: ' ';

  background-color: var(--cobalt--grey-20);
  height: 100%;
  width: 4px;
  position: absolute;
  left: -22px;
}
.steps-legend li.complete::before {
  background-color: var(--cobalt--bleu-digital-100);
}


.steps-legend li > span::before {
  content: ' ';
  background-color: var(--cobalt--grey-20);
  border-radius: 10px;
  height: 16px;
  left: -28px;
  /* margin-right: 7px; */
  position: absolute;
  width: 16px;
}

.steps-legend li.active > span::after {
  content: ' ';
  background-color: #fff;
  border-radius: 10px;
  height: 8px;
  left: -24px;
  margin-right: 20px;
  position: absolute;
  width: 8px;
  top: 4px;
}


.steps-legend li.active {
  color: var(--cobalt--bleu-digital-100);
}

.steps-legend li.complete {
  color: var(--cobalt--bleu-digital-100);
  cursor: pointer;
}
.steps-legend li.active > span::before,
.steps-legend li.complete > span::before {
  background-color: var(--cobalt--bleu-digital-100);
}

.steps-boxes {
  flex: 1;
}

.steps-boxes .step {
  display: none;
}

.steps-boxes .step.active {
  display: block;
}

/* .add .steps-boxes .step h2 {
  font-size: 1.8em;
  margin-bottom: 50px;
} */

.add .steps-boxes .step h4 {
  margin-top: 50px;
  margin-bottom: 20px;
}

#simplefilterlist {
  list-style: none;
}

#simplefilterlist input, #simplefilterlist select {
  flex:1;
  margin: 0;
  margin-bottom: 10px;
  min-width: 150px;
}

#simplefilterlist li {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exclude-large-files {
  display: grid;
  gap: 5px;
  grid-template-columns: 110px 90px;
}

.exclude-large-files input {
  min-width: 0;
  text-align: end;
  width: 80px;
}

.exclude-large-files select {
  min-width: 0;
  width: 80px;
}

.schedule-next-run-time {
  display: grid;
  gap: 5px;
  grid-template-columns: 120px 160px 1fr;
  margin-bottom: 40px;
}

.schedule-next-run-time > * {
  margin: 0;
}

.schedule-next-run-time span {
  line-height: 38px;
}

.schedule-next-run-time input[type="time"] {
  min-width: 0px;
  width: 80px;
}
.schedule-next-run-time input[type="date"] {
  min-width: 0px;
  width: 120px;
}

.schedule-frequency {
  display: grid;
  gap: 5px;
  grid-template-columns: 80px 140px;
}

.schedule-frequency input ,
.schedule-frequency select {
  min-width: 0px;
  margin: 0;
  width: 100px;
}
.schedule-frequency input {
  text-align: end;
  width: 40px;
}


.allowed-days {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(7, 1fr);
}

/* .allowed-days > .day {
  align-items: center;
  display: flex;
  flex-direction: column;
} */

.allowed-days > .day label {  
  background-color: var(--cobalt--bleu-digital-100);
  color: #fff;
}

.allowed-days .day:not(.checked) label {
  background-color: var(--cobalt--bleu-digital-10);
  color: var(--cobalt--lynch);
}


.allowed-days .day label {
  cursor: pointer;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.allowed-days input {
  min-width: 0;
  margin: 0;
  display: none;
}


.imported-backup {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 15px;
}

.imported-backup > * {
  flex: 1;
}

.imported-backup .allowed-days {
  border-radius: 28px;
  font-size: 10px;
  width: 250px;
  overflow: hidden;
}

.imported-backup .allowed-days .day label {
  cursor: default;
  padding: 4px 0;
}


/** ADD PAGE -- END **/

/** IMPORT -- BEGIN **/

.import-job:not(:last-child)
{
  margin-bottom: 20px;
}

.import-job.error {
  border-left: 8px solid var(--error-color);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 10px;
  margin-top: 5px;
}

.import-job.error h4 {
  align-items: center;
  color: var(--error-color);
  display: flex;
  gap: 20px;
}

.import-job.error > ul {
  list-style: inside;
}

.import-job.error > ul > li::marker {
  color: var(--error-color);
}

/** IMPORT -- END **/

/** dialog -- BEGIN **/

.connection-lost-dialog .blocker,
.dialog-container .blocker {
  background-color: rgba(0, 0, 0, 0.24);
  display: flex;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 99;
}

.connection-lost-dialog .info,
.dialog-container .modal-dialog {
  margin: auto;
  max-height: 100%;
  max-width: 800px;
  min-width: 400px;
  overflow-y: auto;
  padding: 0;
}

.connection-lost-dialog .title,
.dialog-container .modal-dialog .title {
  border-bottom: 1px solid var(--cobalt--bleu-digital-10);
  padding: 20px;
}
.connection-lost-dialog .content,
.dialog-container .modal-dialog .content {
  padding: 20px;
}
.connection-lost-dialog .actions-container,
.dialog-container .modal-dialog .actions-container
{
  margin: 0;
  padding: 20px;
  padding-top: 0;
  justify-content: end;
}
/** dialog -- END **/

.notification-area,
notification-area {
  background-color: var(--cobalt--bleu-digital-05);
}

.notification-area
{
  padding: 10px 0;
}

notification-area {
  background-color: var(--cobalt--bleu-digital-05);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  height: 100vh;
  overflow: auto;
  position: fixed;
  right: -488px;
  top: 0;
  transition: right 1.5s ease;
  width: 480px;
  z-index: 101;
}

notification-area.open {
  right: 0;
}

notification-area div.notification-panel-title {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 70px;
  background-color: var(--cobalt--bleu-digital-10);
  color: var(--cobalt--ultramarine);
  display: flex;
  height: 70px;
  justify-content: space-between;
  padding: 0 20px;
}

notification-area div.notification-panel-title a {
  cursor: pointer;
}

notification-area div.notification-panel-title a:hover {
  color: var(--cobalt--hover);
}

notification-area ul.notification {
  margin: 20px;
}

.notification-area ul.notification,
notification-area ul.notification {
  position: initial;
  width: auto;
}

.notification-area ul.notification .item,
notification-area ul.notification .item {
  --notification-color: var(--cobalt--ultramarine);
  --notification-hover-color: var(--cobalt--hover);

  background-color: #fff;
  border-radius: 10px;
  margin: 0;
  margin-bottom: 20px;

  transition: opacity 0.5s ease, max-height 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
}

.notification-area ul.notification .item {
  max-width: 635px;
}

.notification-area ul.notification .item.new,
notification-area ul.notification .item.new {
  box-shadow: var(--notification-color) 0px 3px 8px;

}

.notification-area ul.notification .item.error,
notification-area ul.notification .item.error {
  --notification-color: var(--cobalt--red-icon);
  --notification-hover-color: var(--cobalt--red-text);
}

.notification-area ul.notification .item.warning,
notification-area ul.notification .item.warning {
  --notification-color: var(--cobalt--orange-icon);
  --notification-hover-color: var(--cobalt--orange-text);
}

.notification-area ul.notification .item.success,
notification-area ul.notification .item.success {
  --notification-color: var(--cobalt--green-icon);
  --notification-hover-color: var(--cobalt--green-text);
}

.notification-area ul.notification .item.deleting,
notification-area ul.notification .item.deleting {
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;

  /* animation: disapearing 1s; */
}


.notification-area ul.notification .item .title,
.notification-area ul.notification .item .content,
notification-area ul.notification .item .title,
notification-area ul.notification .item .content {
  background-color: transparent;
  border-color: transparent;
  width: auto;
}

.notification-area ul.notification .item .content
{
  float: none;
  padding: 2px 5px;
  max-width: none;
}

.notification-area ul.notification .item .title,
notification-area ul.notification .item .title {
  align-items: center;
  color: var(--notification-color);
  display: flex;
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}

.notification-area ul.notification .item .title span,
notification-area ul.notification .item .title span {
  flex: 1;
}


.notification-area ul.notification .item .title i, 
notification-area ul.notification .item .title i {
  margin-right: 20px;
}

notification-area ul.notification .item .title .markAsRead {
  cursor: pointer;
}

notification-area ul.notification .item .title .markAsRead:hover {
  color: var(--notification-hover-color);
}

notification-area ul.notification .item .title .markAsRead:hover i::before {
  content: "\ea0e"
}

notification-area .actions-container {
  display: flex;
  justify-content: end;
  margin-top: 25px;
}

notification-area .relative-date,
.notification-area .relative-date {
  color: var(--notification-color);
}
notification-area .relative-date::first-letter,
.notification-area .relative-date::first-letter {
  text-transform: uppercase;
}

.actions-container .ekup-button {
  /* margin-left: 20px;
  margin-right: 20px; */
  display: flex;
  /* gap: 20px; */
  align-items: center;
}

.file-input {
  align-items: center;
  display: flex;
  gap: 15px;
}

.file-input input {
  display: none;
}

.toggle {
  background-color: var(--cobalt--lynch);
  border-radius: 25px;
  cursor: pointer;
  display: block;
  height: 24px;
  margin: 0;
  position: relative;
  width: 40px;
}

.toggle.disabled {
  opacity: 0.5;
}

.toggle::after {
  content: ' ';
  background-color: #fff;
  border-radius: 25px;
  display: block;
  height: 20px;
  left:2px;
  position: absolute;
  width: 20px;
  top:2px;
  transition: left 0.2s ease;
}

.toggle:has(input:checked){
  background-color: var(--cobalt--user-blue);
}

.toggle:has(input:checked):after {
  left:18px;
}

.toggle input {
  display: none;

}

.ekup-button {
  --button-bg-color: var(--cobalt--bleu-digital-100);
  --button-hover-bg-color: var(--cobalt--hover);
  --button-hover-shadow-color: var(--button-bg-color);
  --button-text-color: #fff;

  align-items: center;
  background-color: var(--button-bg-color);
  border: 0;
  border-radius: 100px;
  color: var(--button-text-color);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  line-height: 16px;
  min-width: 0;
  padding: 9px 24px;
  text-align: center;
  width: fit-content;
}

.ekup-icon-button {
  --button-hover-bg-color: var(--cobalt--bleu-digital-10);
  --button-bg-color: #fff;
  --button-border-color: var(--cobalt--ultramarine);
  --button-hover-shadow-color: var(--button-border-color);
  --button-text-color: var(--cobalt--ultramarine);


  background-color: var(--button-bg-color);
  align-items: center;
  border: 1px solid var(--button-border-color);
  border-radius: 20px;
  color: var(--button-text-color);
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 30px;
  justify-content: center;
  line-height: 30px;
  margin: 0;
  padding: 0;
  width: 30px;
}


/* .ekup-button * {
  color: var(--button-text-color);
} */


.ekup-button:hover, .ekup-icon-button:hover {
  background-color: var(--button-hover-bg-color);
  box-shadow: var(--button-hover-shadow-color) 0px 3px 8px;  
}

.ekup-button-secondary {
  --button-border-color: var(--cobalt--bleu-digital-100);
  --button-hover-bg-color: var(--cobalt--bleu-digital-10);
  --button-hover-shadow-color: var(--button-border-color);
  --button-text-color: var(--cobalt--bleu-digital-100);

  background-color: #fff;

  border: 1px solid var(--button-border-color);
}

.menu .ekup-button-secondary {
  --button-border-color: var(--cobalt--ultramarine);
  --button-text-color: var(--cobalt--ultramarine);

}

.ekup-button-ghost {  
  --button-bg-color: none;
  --button-border-color: none;
  --button-hover-bg-color: var(--cobalt--bleu-digital-05);
  --button-hover-shadow-color: none;
  --button-text-color: var(--cobalt--bleu-digital-100);

  border: none;
}

.ekup-error-button {
  --button-hover-bg-color: var(--cobalt--red-text);
  --button-bg-color: var(--cobalt--red-icon)
}

.ekup-error-button.ekup-button-secondary {
  --button-hover-bg-color: var(--cobalt--red-background);
  --button-border-color: var(--cobalt--red-icon);
  --button-text-color: var(--cobalt--red-icon);
}

.ekup-icon-button.ekup-icon-error-button {
  --button-hover-bg-color: var(--cobalt--red-background);

  --button-border-color: var(--cobalt--red-icon);
  --button-text-color: var(--cobalt--red-icon);
}


.ekup-warning-button {
  --button-hover-bg-color: var(--cobalt--orange-text);
  --button-bg-color: var(--cobalt--orange-icon)
}

.ekup-warning-button.ekup-button-secondary {
  --button-hover-bg-color: var(--cobalt--orange-background);
  --button-border-color: var(--cobalt--orange-icon);
  --button-text-color: var(--cobalt--orange-icon);
}

.ekup-success-button {
  --button-hover-bg-color: var(--cobalt--green-text);
  --button-bg-color: var(--cobalt--green-icon)
}


.ekup-success-button.ekup-button-secondary {
  --button-hover-bg-color: var(--cobalt--green-background);
  --button-border-color: var(--cobalt--green-icon);
  --button-text-color: var(--cobalt--green-icon);
}

.ekup-button:disabled, .ekup-button[disabled]  {
  --button-hover-bg-color: transparent;
  --button-hover-shadow-color: transparent;

  background-color: var(--cobalt--grey-20);
  color: var(--cobalt--lynch);
  cursor: not-allowed;
}

.ekup-button i {
  margin-right: 15px;
}

.ekup-button * + i {
  margin-left: 15px;
  margin-right: 0;
}



/* h1, h2 {
  color: var(--primary-2-color)
} */
body .container .body > .content div.add form .buttons, body .container .body > .content div.restore form .buttons
{
  max-width: 635px;
  width: auto;
}

div.connection-lost div.content.buttons,
div.modal-dialog div.content.buttons {
  width: initial;
  float: initial;
  padding-top: initial;
}


.info-bubble {
  position: relative;
}

.info-bubble .info-bubble-message {
  background-color: var(--cobalt--user-blue);
  color: #FFF;
  position: absolute;
  left: 100%;
  top: -3px;
  width: max-content;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
}

.info-bubble .info-bubble-message::before {
  content: ' ';
  background-color: var(--cobalt--user-blue);
  position: absolute;
  left: -5px;
  top: 8px;
  height: 10px;
  width: 10px;
  transform: rotate(45deg);
}

.info-bubble:hover .info-bubble-message {
  opacity: 1;
}

.info-bubble .info-bubble-icon {
  background-color: var(--running-color);
  border-radius: 50%;
  color: #FFF;
  display: inline-block;
  font-size: 10px;
  line-height: 15px;
  height: 15px;
  text-align: center;
  width: 15px;
}


.logo img.mainlogo {
  max-height: 45px;
  width: auto;
}

.backup-status {
  border: 1px solid;
  border-radius: 20px;
  content: ' ';
  display: inline-flex;
  height: 15px;
  width: 15px;
}

.backup-status .lds-ripple div {

  --anim-size: 15px
}

.backup-status-failed {
  background-color: var(--error-color);
}

.backup-status-none {
  background-color: #EEE;
}

.backup-status-paused {
  background-color: #999;
}

.backup-status-running {
  background-color: var(--running-color);
  /* background: linear-gradient(-90deg, var(--running-color), #9bd5e4, var(--running-color));
	background-size: 500% 500%;
	animation: gradient 2s ease infinite; */
}

.backup-status-success {
  background-color: var(--success-color);
}

.backup-status-unknown {
  background-color: var(--warning-color);
}


.filepicker {
  height: auto;
}

.retention-options {
  display: flex;
  gap: 15px;
}

.retention-options > input {
  min-width: 100px;
  width: 100px;
}

.retention-options > select {
  
  min-width: 150px;
  width: 150px;
}

body .container .body > .content div.add .steps .step[disabled],
body .container .body > .content div.add .steps-legend li[disabled],
body .container .body > .content div.restore .steps .step[disabled],
body .container .body > .content div.restore .steps-legend li[disabled] {
  pointer-events: none;
}


.step6 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}

.alert-config-row {
  border: 1px solid var(--cobalt--hover);
  padding: 32px;
}


.alert-config-row .input.text {
  padding-bottom: 5px;
}

.alert-config-row .select-notification-levels {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
}

.alert-config-row .select-notification-levels input[type="checkbox"] {
  position: absolute;
  left: -99999px;
}

.alert-config-row .select-notification-levels label {
  cursor: pointer;
  width: auto;
  margin-right: 5px;
}

.alert-config-row label.error {
  /* float: none; */
  width: 100%;
  color: var(--error-color);
}

.alert-config-row .select-notification-levels label.checkbox-level {
  --checkbox-level-background-color: var(--primary-1-color);
  --checkbox-level-border-color: var(--checkbox-level-background-color);
  --checkbox-level-text-color: #fff;

}

.alert-config-row .select-notification-levels label.checkbox-level span {

  background-color: var(--checkbox-level-background-color);
  border-radius: 15px;
  border: 2px solid;
  border-color: var(--checkbox-level-border-color);
  color: var(--checkbox-level-text-color);
  opacity: 1;
  padding: 2px 10px;
}

.alert-config-row .select-notification-levels label.checkbox-level input:not(:checked)+span {
  --checkbox-level-background-color: var(--disabled-color);
  --checkbox-level-text-color: #000;
  opacity: 0.5;
}

.alert-config-row .select-notification-levels label.checkbox-level.checkbox-Success-level {
  --checkbox-level-background-color: var(--success-color);
}

.alert-config-row .select-notification-levels label.checkbox-level.checkbox-Warning-level {
  --checkbox-level-background-color: var(--warning-color);
}

.alert-config-row .select-notification-levels label.checkbox-level.checkbox-Error-level {
  --checkbox-level-background-color: var(--error-color);
}

.alert-config-row .select-notification-levels label.checkbox-level.checkbox-Fatal-level {
  --checkbox-level-background-color: var(--error-color);
}

.alert-config-row .select-notification-levels li {
  display: flex; 
  margin-bottom: 5px;
}



/***   ANIMATION   ***/


.lds-ring {
  display: inline-flex;
  position: relative;
  width: 15px;
  height: 15px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 11px;
  height: 11px;
  margin: 2px;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

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

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

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


/** media query **/

@media (max-width: 1150px) {
  /* .header :not(.action-icons-small) .notification-button { display: none; } */

  .imported-backup .allowed-days {
    border-radius: 8px;
    grid-template-columns: repeat(4, 1fr);
    width: 120px;
  }

  .step6 ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .settings-container {
    grid-template-columns: repeat(2, 1fr);
  }
}



/** animation **/

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

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



@-webkit-keyframes rotating

/* Safari and Chrome */
  {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes warning-highlight {
  0% {
    background-color: var(--cobalt--orange-icon);
  }


  50% {
    background-color: inherit;
  }


  100% {
    background-color: var(--cobalt--orange-icon);
  }
}