@import url("https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,300;1,400;1,700;1,800&display=swap");

:root {
    --surplus-primary: #f25022;
    --surplus-primary-contrast: #ff3a04;
    --surplus-primary-dark: #d62e00;
    --surplus-primary-darker: #c22a00;
    --surplus-secondary: #66C0AE;
    --surplus-secondary-border: #7cf1da;
    --surplus-secondary-opacity: #66c0aef3;
    --surplus-secondary-contrast: #53d1b8;
    --surplus-secondary-dark: #26b89a;
    --surplus-secondary-darker: #3c9c89;
    --surplus-grid-color: #c3ced5;
    --surplus-sky-blue: #87CEEB;
    --surplus-mint: #3EB489;
    --btn-create: #F25022;
    --btn-print: #66C0AE;
    --btn-save: #DB7F67;
    --btn-disable: #646C75;
    --btn-disapprove: #838E83;
    --btn-approve1: #5E7CE2;
    --btn-approve2: #AA7BC3;
    --btn-approve3: #939F5C;
    --btn-approve4: #5c9f70;
    --btn-posting: #8EA4D2;
    --btn-get-excel: #A581B9;
    --btn-half-serviced: #ADD8E6;
    --btn-full-serviced: #3EB489;
    --btn-disabled-trouble-report: #800000;
    --btn-complete-laundry: #3EB489;
    --btn-enable: #51ad4c;
}

.autocomplete_1 input[type="search"] {
    background-color: #66C0AE40;
}

.autocomplete_2 input[type="search"] {
    background-color: #726DA840;
}

.autocomplete_3 input[type="search"] {
    background-color: #F55D3E40;
}

.autocomplete_4 input[type="search"] {
    background-color: #69595840;
}

.autocomplete_disabled input[type="search"] {
    background-color: #4C474340;
}

.btn-create {
    background-color: var(--btn-create);
    color: white;
}

.btn-print {
    background-color: var(--btn-print);
    color: white;
}

.btn-save {
    background-color: var(--btn-save);
    color: white;
}

.btn-disable {
    background-color: var(--btn-disable);
    color: white;
}

.btn-disapprove {
    background-color: var(--btn-disapprove);
    color: white;
}

.btn-approve1 {
    background-color: var(--btn-approve1);
    color: white;
}

.btn-approve2 {
    background-color: var(--btn-approve2);
    color: white;
}

.btn-approve3 {
    background-color: var(--btn-approve3);
    color: white;
}

.btn-approve4 {
    background-color: var(--btn-approve4);
    color: white;
}

.btn-posting {
    background-color: var(--btn-posting);
    color: white;
}

.btn-get-excel {
    background-color: var(--btn-get-excel);
    color: white;
}

  .opensans {
    font-family: "Open Sans", sans-serif;
  }
  
  #monthly {
    margin: 50px;
    width: 100vw;
    height: 500px;
    display: flex;
    overflow-x: auto;
  }
  
  .orange-color-bg {
    background-color: var(--surplus-primary);
    border-color: transparent;
  }
  
  .orange-color-text {
    color: var(--surplus-primary);
  }
  
  /* change btn color to orange  */
  .btn-primary.orange-color {
    color: #fff;
    background-color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .btn-primary.orange-color:hover {
    color: #fff;
    background-color: var(--surplus-primary-dark);
    border-color: var(--surplus-primary-dark);
  }
  .btn-primary.orange-color.focus,
  .btn-primary.orange-color:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  .btn-primary.orange-color.disabled,
  .btn-primary.orange-color:disabled {
    color: #fff;
    background-color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .btn-primary.orange-color:not(:disabled):not(.disabled).active,
  .btn-primary.orange-color:not(:disabled):not(.disabled):active,
  .show > .btn-primary.orange-color.dropdown-toggle {
    color: #fff;
    background-color: var(--surplus-primary-darker);
    border-color: transparent;
  }
  .btn-primary.orange-color:not(:disabled):not(.disabled).active:focus,
  .btn-primary.orange-color:not(:disabled):not(.disabled):active:focus,
  .show > .btn-primary.orange-color.dropdown-toggle:focus {
    background-color: var(--surplus-primary-darker);
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  
  /* .btn-primary.orange-color:hover, */
  .btn-primary.orange-color:focus,
  .btn-primary.orange-color:active,
  .btn-primary.orange-color.active,
  .open .dropdown-toggle.btn-default {
    background-color: var(--surplus-primary-darker);
  
    color: #fff;
  
    border-color: transparent;
  }

  /* change btn color outline to orange  */
  .btn-outline-primary.orange-color {
    background-color: #fff;
    color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .btn-outline-primary.orange-color:hover {
    color: #fff;
    background-color: var(--surplus-primary-dark);
    border-color: var(--surplus-primary-dark);
  }
  .btn-outline-primary.orange-color.focus,
  .btn-outline-primary.orange-color:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  .btn-outline-primary.orange-color.disabled,
  .btn-outline-primary.orange-color:disabled {
    background-color: #fff;
    color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .btn-outline-primary.orange-color:not(:disabled):not(.disabled).active,
  .btn-outline-primary.orange-color:not(:disabled):not(.disabled):active,
  .show > .btn-outline-primary.orange-color.dropdown-toggle {
    background-color: #fff;
    color: var(--surplus-primary-darker);
    border-color: var(--surplus-primary-darker);
  }
  .btn-outline-primary.orange-color:not(:disabled):not(.disabled).active:focus,
  .btn-outline-primary.orange-color:not(:disabled):not(.disabled):active:focus,
  .show > .btn-outline-primary.orange-color.dropdown-toggle:focus {
    background-color: #fff;
    /* color: var(--surplus-primary-darker); */
    border-color: var(--surplus-primary-darker);
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  
  /* .btn-outline-primary.orange-color:hover, */
  .btn-outline-primary.orange-color:focus,
  .btn-outline-primary.orange-color:active,
  .btn-outline-primary.orange-color.active,
  .open .dropdown-toggle.btn-default {
    color: var(--surplus-primary-darker);
  
    background-color: #fff;
  
    border-color: var(--surplus-primary-darker);
  }
  

  /* change text color orange  */
  .text-warning.orange-color {
    background-color: transparent;
    color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .text-warning.orange-color:hover {
    background-color: transparent;
    color: var(--surplus-primary-dark);
    border-color: var(--surplus-primary-dark);
  }
  .text-warning.orange-color.focus,
  .text-warning.orange-color:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  .text-warning.orange-color.disabled,
  .text-warning.orange-color:disabled {
    background-color: transparent;
    color: var(--surplus-primary);
    border-color: var(--surplus-primary);
  }
  .text-warning.orange-color:not(:disabled):not(.disabled).active,
  .text-warning.orange-color:not(:disabled):not(.disabled):active,
  .show > .text-warning.orange-color.dropdown-toggle {
    background-color: transparent;
    color: var(--surplus-primary-darker);
    border-color: transparent;
  }
  .text-warning.orange-color:not(:disabled):not(.disabled).active:focus,
  .text-warning.orange-color:not(:disabled):not(.disabled):active:focus,
  .show > .text-warning.orange-color.dropdown-toggle:focus {
    background-color: transparent;
    color: var(--surplus-primary-darker);
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 38, 0.5);
  }
  
  /* table change color  */
  table.table-bordered.orange-color{
    border:0px solid var(--surplus-primary);
    border-top: 1px solid var(--surplus-primary);
    margin-top:20px;
  }
  table.table-bordered.orange-color > thead > tr > th{
    border:1px solid var(--surplus-primary);
    border-bottom: 2px;
  }
  table.table-bordered.orange-color > tbody > tr > td{
    border:1px solid var(--surplus-primary);
  }

  /* table change color  */
  table.table-bordered.green-color{
    border:1px solid var(--surplus-secondary);
    margin-top:20px;
  }
  table.table-bordered.green-color > thead > tr{
    border: 1px solid var(--surplus-secondary);
  }
  table.table-bordered.green-color > thead > tr > th{
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    border: none solid var(--surplus-secondary);
    border-bottom: 2px solid var(--surplus-secondary);
    font-weight: 12px;
  }
  table.table-bordered.green-color > tbody > tr > td{
    padding: 5px;
    border: none solid var(--surplus-secondary);
  }
  table.table-bordered.green-color > tbody > tr{
      border-bottom: 1px solid var(--surplus-secondary);
  }

  .button-filter:hover{
      color: white;
  }

  .input-green-color{
    border:2px solid #FF0000;
  }

table.table-bordered.grid-border {
    border: 1px solid var(--surplus-grid-color);
    margin-top: 20px;
}

table.table-bordered.grid-border > thead > tr > th {
    border-top: 1px solid var(--surplus-grid-color);
    border-bottom: 1px solid var(--surplus-grid-color);
}

table.table-bordered.grid-border > tbody > tr > td {
    padding: 5px;
     border-top: 1px solid var(--surplus-grid-color);
    border-bottom: 1px solid var(--surplus-grid-color);
}

custom-node. {
    border: 2px solid black;
    text-align: center;
    background-color: white;
    height: 200px;
    width: 200px;
}

.colored-node .port {
    width: 30px;
    height: 30px;
}

.custom-port-color {
    background-color: #A27B5C;
}

.btn-half-serviced {
    background-color: var(--btn-half-serviced);
    color: white;
}

.btn-full-serviced {
    background-color: var(--btn-full-serviced);
    color: white;
}

.btn-disabled-trouble-report {
    background-color: var(--btn-disabled-trouble-report);
    color: white;
}

.custom-aggregate-row {
    background-color: #000000;
    color: white;
}

.bg-mint {
    background-color: var(--surplus-mint) !important;
    color: white;
}
.custom-aggregate-row-blue {
    background-color: #1f497d;
    color: white;
}

.bg-sky-blue {
    background-color: var(--surplus-sky-blue) !important;
    color: black;
}

.btn-complete-laundry {
    background-color: var(--btn-complete-laundry);
    color: white;
}
.btn-enable {
    background-color: var(--btn-enable);
    color: white;
}