#operationTable {
    background: none;
    max-width: 100%;
    overflow-x: scroll;
}

#operationTable form {
    position: relative;
}

.hb-operation {
    font-size: 10px;
    border-collapse: collapse;
    border-spacing: 0 15px;
    width: 100%;
    margin: 16px 0;
}

.hb-operation th {
    padding: 16px 20px;
    font-size: 14px;
    text-align: center;
    width: 30px;
    z-index: 1;
    position: sticky;
    top: 0;
    /*box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);*/
    background: #dcdcdc;
}

/* Table Actions */
.hb-operation th.th-actions-wrapper p {
    padding: 12px;
}

.hb-operation th.th-action {
    padding: 20px 0;
}

.hb-operation th.th-action,
.hb-operation td.td-action{
    position: -webkit-sticky;
    position: sticky;
    background-color: #E6E6E6;
    border-left: 1px solid #cecece;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
}

.hb-operation th.th-action.first,
.hb-operation td.td-action.first {
    right: 196px;
    z-index: 1;
    /*box-shadow: 0 -2px 5px 2px rgba(0, 0, 0, 0.17);*/
}

.hb-operation th.th-action.second,
.hb-operation td.td-action.second {
    right: 98px;
    z-index: 1;
}

.hb-operation th.th-action.third,
.hb-operation td.td-action.third{
    right: 0;
    z-index: 1;
}

.hb-operation th.th-action.left-first,
.hb-operation td.td-action.left-first {
    left: 0px;
    z-index: 2;
    /*box-shadow: 0 -2px 5px 2px rgba(0, 0, 0, 0.17);*/
}

.hb-operation th.th-action.left-second,
.hb-operation td.td-action.left-second {
    left: 98px;
    z-index: 2;
}

.hb-operation th.th-action.left-third,
.hb-operation td.td-action.left-third{
    left: 196px;
    z-index: 2;
}

/* end table Actions */

.hb-balance th {
    padding: 5px;
}

.hb-operation td {
    border-right: 1px solid #cecece;
    padding: 0 5px;
    text-align: center;
    font-size: 14px;
}
.hb-operation input {
    text-align: center;
    font-size: 14px;
    width: 100%;
    height: 25px;
    background: none;
    border: none;
}

.hb-operation tr:nth-child(even) {
    background-color: #e7e7e7
}

.hb-operation.hb-balance tr:hover {
    /*background-color: #a3a3a3*/
    background-color: #8BC34A;
}

/*.hb-operation td:hover {
    background-color: #cecece
}*/

.component-setup-table {
    font-size: 10px;
    border-collapse:separate;
    border-top: 1px solid #afafaf;
    background: white;
    width: 100%;
    margin: 16px auto;
    border-radius: 0;
}

md-dialog .component-setup-table {
    width: 70%;
}

.component-setup-table th {
  padding: 10px 0px;
  font-size: 14px;
  text-align: center;
  width: 30px;
  z-index: 1;
  top: 0;
  /* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
  background: #dcdcdc;
}

/* FTP */
#ftp-form .md-list-item-text {
    display: block;
    width: 100%;
}

#ftp-form input {
    width: 100%;
}

.setup-section-container {
    background: #f7f7f7;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d8d8d8;
}

/* Estados de reservatório */

.setup-reservatory-state {
}

.setup-reservatory-state-content {
    padding: 16px;
    background: white;
    border: 1px solid #b1b1b1;
}

.setup-reservatory-state-content .md-list-item-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*.setup-reservatory-state .md-list-item-text {*/
/*    display: block;*/
/*}*/

.setup-reservatory-state .md-secondary-container {
    display: block;
    width: 100%;
    text-align: right;
    margin-top: 20px;
}

.reservoir-state-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    border-bottom: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
}

@media screen and (max-width: 767px) {
    .reservoir-state-list {
        padding: 0;
    }

    .reservoir-state-list .reservoir-state-item-actions button {
        padding: 0;
        width: 24px;
    }

    .setup-reservatory-state-content .md-list-item-text {
        display: block;
    }

    .hb-operation th.th-action.first,
    .hb-operation td.td-action.first {
        z-index: 1;
        position: inherit;
        /*box-shadow: 0 -2px 5px 2px rgba(0, 0, 0, 0.17);*/
    }

    .hb-operation th.th-action.second,
    .hb-operation td.td-action.second {
        z-index: 1;
        position: inherit;
    }

    .hb-operation th.th-action.third,
    .hb-operation td.td-action.third{
        z-index: 1;
        position: inherit;
    }

    .hb-operation th.th-action.left-first,
    .hb-operation td.td-action.left-first {
        z-index: 2;
        position: inherit;
        /*box-shadow: 0 -2px 5px 2px rgba(0, 0, 0, 0.17);*/
    }

    .hb-operation th.th-action.left-second,
    .hb-operation td.td-action.left-second {
        z-index: 2;
        position: inherit;
    }

    .hb-operation th.th-action.left-third,
    .hb-operation td.td-action.left-third{
        z-index: 2;
        position: inherit;
    }
}

.reservoir-state-list .md-list-item-text {
    display: flex;
    width: 96%;
}

.reservoir-state-list input.item-class {
    width: 60%;
}
.reservoir-state-list input.item-nar {
    width: 30%;
}
.reservoir-state-list input.item-color, #reservoir-color {
    width: 24px!important;
    height: 21px;
}
.reservoir-state-list input {
    margin: 4px 2px;
}

.reservoir-state-item-actions {
    display: flex;
}


/* Comporta */

.hydraulic_curve-wrapper {
    max-width: 100%;
    overflow-x: scroll;
}

.hydraulic_curve-radio-group {
    display: flex;
    width: 100%;
    /*border: 1px solid #dedede;*/
    border-radius: 5px;
    padding: 12px;
}

@media screen and (max-width: 772px) {
    .hydraulic_curve-radio-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Registro de classes de operação */
.class-operation-registry {
    border-collapse:separate;
    border: solid #afafaf 1px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 5px;
    background: white;
}

.class-operation-registry td:not(:first-child) {
    min-width: 80px;
}

.hb-balance th {
  padding: 5px;
}

.component-setup-table td {
  padding: 0px 5px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #ececec;
}

.component-setup-table.reservoir-rating-level td:first-child {
    width: 50px;
}

.component-setup-table.reservoir-rating-level td {
    text-align: left;
}

.component-setup-table input {
  text-align: center;
  font-size: 14px;
  min-width: 20px;
  width: 100%;
  height: 25px;
  background: none;
  border: none;
}
/*
.component-setup-table tr:hover {
  background-color: #f5f5f5
} */

h1.rating-level-dialog-title {
    position: absolute;
    top: 8px;
    font-size: 20px;
    left: 16px;
}

.rating-level-dialog-content {
    text-align: left;
    width: 100%;
    margin-top: 20px;
    font-size: 15px;
    line-height: 12px;
    padding: 20px;
}

.rating-level-dialog-actions {
    position: absolute;
    bottom: 0;
    right: 8px;
}





.hb-sidenav-table th {
    padding: 20px;
    font-size: 14px;
    text-align: center;
    width: 30px;
}

.hb-sidenav-table tr:not(:first-child) {
    background-color: #d0d0d0;
}

.hb-sidenav-table tr:nth-child(even) {
    background-color: #e7e7e7
}

.hb-operation-input-panel {
    height: inherit;
    width: 100%;
    max-height: inherit;
}

.hb-operation-input-panel .item .item-content {
  align-items: center;
  background: #F5F5F5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  justify-content: center;
  margin: 8px 0;
  min-height: 140px;
  min-width: 218px;
  padding: 12px;
}

.hb-operation-input-panel .item .item-content input[type=number] {
    border: 2px solid #ccc;
    border-radius: 4px;
}

.hb-operation-input-panel .option:not(:first-child) {
    margin-left: 2px;
    font-size: 11px;
}

.hb-operation-input-panel input[type=number] {
    width: 100px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 4px;
}

.hb-operation-input-panel input[type=radio] {
    display: none;
    margin: 10px;
}

.hb-operation-input-panel input[type=radio]+label:not(.gu-item) {
    display: inline-block;
    /* margin:-2px; */
    height: auto;
    padding: 5px 10px 5px 10px;
    background-color: #cacaca;
    border-color: #CCC;
    border-radius: 4px;
}


.hb-operation-input-panel input[type=radio]+label.gu-item {
    display: flex;
    height: 24px;
    width: 100%;
    background-color: #cacaca;
    border-color: #CCC;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.hb-operation-input-panel input[type=radio]+label:hover {
    background-color: #6e6e6e;
    cursor: pointer;
}

/*.hb-operation-input-panel input[type=radio]:checked+label {
    background-image: none;
    background-color: #9cd060;
}*/

.hb-operation-input-panel input[type=radio]+label.resop-gu-state-selected {
  display: flex;
  height: 24px;
  width: 100%;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background-image: none;
  background-color: #9cd060;
}


.tabset label:focus {
  outline: none;
}

.tips-dialog {
    max-width: 60%;
    background: white;
    border-radius: 4px;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    width: fit-content;
}

md-switch.md-default-theme.md-checked .md-bar, md-switch.md-checked .md-bar {
    background-color: rgba(18, 42, 78, 0.28);
}

md-switch.md-default-theme.md-checked .md-thumb, md-switch.md-checked .md-thumb {
    background-color: rgb(18, 42, 78);
}
.default-input-radio {
    border: 1px solid darkgrey;
    padding: 15px;
    height: 100%;
}
.default-input-radio input[type=radio] {
    display: inline-block;
    margin: unset;
}

.default-input-radio label {
    display: inline-block;
    /* margin:-2px; */
    height: auto;
    padding: 5px;
    background-color: unset;
    border-color: black;
}

.hb-operation-panel-box {
    /*background: #c5c5c5; */
    z-index: 1;
    margin: 4px;
    /* border-top: 3px solid #2e4d97;  */
    border-radius: 4px; height: inherit;
    /*-webkit-box-shadow: 1px 2px 2px 0px rgba(50, 50, 50, 0.35);*/
    /*-moz-box-shadow: 1px 2px 2px 0px rgba(50, 50, 50, 0.35);*/
	/*box-shadow: 1px 2px 2px 0px rgba(50, 50, 50, 0.35);*/
}

.hb-operation-panel-box .operation-card {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    background: #FFF;
    margin-bottom: 8px;
}

.hb-operation-panel-box .operation-card h1 {
    text-align: center;
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #d2d2d2;
    margin-bottom: 5px;
}

.hb-operation-panel-box.general-properties {
    padding: 24px 8px;
}

.hb-operation-panel-box .operation-fall {
    background: #f5f5f5;
    margin: 16px;
    border-radius: 4px;
    padding: 20px;
}

.hb-operation-panel-box .operation-fall input {
    border: 2px solid #ccc;
    border-radius: 4px;
}

@media screen and (max-width: 767px) {
    .hb-operation-panel-box .operation-fall .layout-row {
        height: fit-content;
        display: flex!important;
        flex-direction: column;
        text-align: center;
        margin-bottom: 16px;
    }

    .hb-operation-panel-box .operation-fall .layout-row input {
        width: 99%;
        height: 28px;
        margin-top: 4px;
    }
}

.hb-operation-panel-box .clock-and-button-send .btn-add-operation {
    background: var(--main-bg-color);
    position: relative;
    overflow: visible;
    color: #FFFFFF
}

.hb-operation-panel-box .clock-and-button-send .btn-add-operation[disabled]{
    background: #CCCCCC!important;
}

.hb-operation-panel-box .clock-and-button-send {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 90px;
}

@media screen and (max-width: 767px) {
    .clock-and-button-send {
        flex-direction: column;
        align-items: flex-end!important;
        margin-right: 8px;
    }
}

/* UGs */
#gu_setup > div {
    max-width: 100%;
    overflow-x: scroll;
}
.ug-list-table {
    min-width: fit-content;
    border-collapse:separate;
    border: solid #afafaf 1px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 5px;
    background: white;
    overflow-x: scroll;
}

.floodgate-table-wrapper {
    max-width: 100%;
    overflow-x: scroll;
}

md-checkbox.md-default-theme.md-checked .md-icon,
md-checkbox.md-checked .md-icon {
    background-color: #122a4e;
}

/* This will disable the md-tabs panel animation */
md-tabs [role="tabpanel"] {
    transition: none;
}

/* Down Arrow Bouncing */
.downArrow{
position: fixed;
bottom: 27%;
right: 20px;
width: 100%;
text-align: center;
background: linear-gradient(360deg, #d4d4d4, transparent);
}
.bounce {
    -moz-animation: bounce 3s infinite;
    -webkit-animation: bounce 3s infinite;
    animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}


.md-button.md-default-theme.md-accent[disabled],
.md-button.md-accent[disabled], .md-button.md-default-theme.md-fab[disabled],
.md-button.md-fab[disabled], .md-button.md-default-theme.md-raised[disabled],
.md-button.md-raised[disabled], .md-button.md-default-theme.md-warn[disabled],
.md-button.md-warn[disabled], .md-button.md-default-theme[disabled],
.md-button[disabled] {
    color: rgba(0,0,0,0.38);
    cursor: default;
    background: #929292 !important;
}

md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before{background-color:rgba(139, 195, 74, 0.36)}
md-checkbox.md-default-theme .md-ink-ripple, md-checkbox .md-ink-ripple {
    color: rgb(139, 195, 74);
}
input[type=date]::-webkit-clear-button, ::-webkit-inner-spin-button /* ::-webkit-calendar-picker-indicator */
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

/* Firefox - disable spin buton (arrows - up/down) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.operation-date .md-default-theme .md-datepicker-input-container.md-datepicker-invalid, .md-datepicker-input-container.md-datepicker-invalid, .md-warn .md-default-theme .md-datepicker-input-container.md-datepicker-focused, .md-warn .md-datepicker-input-container.md-datepicker-focused {
    border-bottom-width: 0px;
}

.operation-date .md-datepicker-input {
    font-size: 14px !important;
}

.operation-date .md-datepicker-input-container {
    width: 100px !important;
}

.setup-details input {
    border-top: none;
    border-right: none;
    border-left: none;
    margin-bottom: 20px;
}

@media(min-width: 1280px)  {
    .operation-date .md-datepicker-input-container {
        width: 120px !important;
    }
}

md-sidenav.md-closed.md-locked-open-add, md-sidenav.md-locked-open, md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove,
md-sidenav.md-locked-open-remove.md-closed, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left,
md-sidenav.md-locked-open.md-closed.md-sidenav-right {
    /*z-index: 0;*/
}

/*.updating-operation {
    background: linear-gradient(90deg, rgba(251,254,252,0) 0%, #bce093 30%, rgba(255,255,255,0) 60%, #bce093 100%);
    background-size: 300%;
    animation: loading-data 1.5s linear infinite;
}*/

@keyframes loading-data {
from {
    background-position: right;
}
to {
    background-position: left;
}
}

.accordion {
  display: inline-block;
  text-align: left;
  margin: 1%;
}
/* .accordion:hover .accordion-content {
  max-height: 800px;
  opacity: 1;
} */
.accordion-content {
  -webkit-transition: max-height 1.2s;
  -moz-transition: max-height 1.2s;
  -ms-transition: max-height 1.2s;
  -o-transition: max-height 1.2s;
  transition: max-height 1.2s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  overflow: hidden;
  opacity: 0.3;
}

/*

md-toast.md-default-theme .md-toast-content, md-toast .md-toast-content {
    color: #000;
    background: white;
} */

#resizable {
    max-height: 100vh;
    padding: 0px;
    min-width: 250px;
}

.ui-widget-content {
    border: none !important;
    background: none !important;
}

#curvaH {
	min-width: 310px;
	max-width: 800px;
	margin: 0 auto;
}

.demo-md-panel {
  min-height: 500px;
}

.demo-dialog-example {
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
  width: fit-content;
}

.demo-dialog-content {
  padding: 0 15px;
  width: 100%;
}

.demo-dialog-content img {
  height: 300px;
  margin: auto;
}

.demo-dialog-button {
  width: 100%;
}

.demo-menu-example {
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
  width: 256px;
}

.demo-menu-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 48px;
  padding: 0 16px;
  position: relative;
  transition: background 0.15s linear;
  width: auto;
}

.demo-menu-item:hover,
.demo-menu-item:focus {
  background-color: rgb(238, 238, 238);
}

.demo-menu-item.selected {
  color: rgb(16, 108, 200);
}

.add-new-structure {
    margin-left: 0px;
    min-height: 117px;
    max-height: fit-content;
    height: max-content;
    padding: 15px;
    border: 1px solid #b1b1b1;
    background: white;
    font-size: 14px;
}

.edit-setup {
    margin-left: 0px;
    min-height: 117px;
    height: max-content;
    padding: 15px;
    border: 1px solid #b1b1b1;
    font-size: 14px;
}

.edit-setup input {
    border-top: none;
    border-right: none;
    border-left: none;
    width: 100%;
    padding: 5px;
}

.add-new-structure input {
    border-top: none;
    border-right: none;
    border-left: none;
    width: 100%;
    padding: 5px;
}

.temp, md-tab-content, md-tabs-content-wrapper, md-tabs  {
    /* position: sticky !important; */
    overflow: hidden;
    min-height: 0px;
    height: 100%;
}

.temp, md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 0px;
}


.tooltip-toggle {
    cursor: pointer;
    position: relative;
  }
  .tooltip-toggle svg {
    height: 18px;
    width: 18px;
  }
  .tooltip-toggle::before {
    position: absolute;
    right: -5px;
    color: black;
    background-color: yellowgreen;
    border-radius: 5px;
    content: attr(aria-label);
    padding: 5px;
    text-transform: none;
    transition: all 0.5s ease;
    transform: translateY(-115%);
    width: 160px;
    white-space: normal;
    line-height: 2;
    box-shadow: 3px 4px 3px 0px rgba(50, 50, 50, 0.35);
  }
  .tooltip-toggle::after {
    position: absolute;
    top: -25px;
    left: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2B222A;
    content: " ";
    font-size: 0;
    line-height: 0;
    margin-left: -5px;
    width: 0;
  }
  .tooltip-toggle::before, .tooltip-toggle::after {
    font-family: monospace;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    text-align: center;
  }
  .tooltip-toggle:focus::before, .tooltip-toggle:focus::after, .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
    opacity: 1;
    transition: all 0.75s ease;
  }


  /* Tab*/
  .tabset {
    position: absolute;
    right: 10px;
    height: 100%;
    left: 10px;
  }
  .tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
  }
  .tabset .tab-panel {
    display: none;
  }
  .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
  .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
  .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
  .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
  .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
  .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
  }
  .tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    color: #8d8d8d;
  }
  .tabset > label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
  }
  .tabset > label:hover,
  .tabset > input:focus + label {
    color: #122a4e;
  }
  .tabset > label:hover::after,
  .tabset > input:focus + label::after,
  .tabset > input:checked + label::after {
    background: #8BC34A;
  }
  .tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
  }
  .tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
    height: inherit;
  }
  .tab-panels {
    height: inherit;
  }
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  .introducing-itself {
    animation-name: fadeIn;
    animation-duration: 0.7s;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: -26px;
  }
  @media(max-width: 1280px) {
    .introducing-itself{
      margin-bottom: auto;
    }
  }
  @media(max-width: 1125px) {
    .introducing-itself{
      justify-content: flex-start;
      margin-bottom: auto;
    }
  }
  @media(max-width: 700px) {
    .introducing-itself{
      flex-direction: column;
      margin-right: auto;
    }
  }

  @keyframes fadeIn {
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }


  .shake {
    border: 2px solid salmon;
    animation: shake 1s forwards infinite;
  }

  .shake:hover {
    animation: none;
  }

  @keyframes shake {
    0% {
        transform: none;
      }
      50% {
        /* transform: translate(1px, 0px) scale(1); */
      }
      60% {
        /* transform: translate(-2px, 2px) scale(1.05); */
      }
      67.5% {
        /* transform: translate(3px, 0px) scale(1.02); */
      }
      75% {
        /* transform: translate(1px, 2px) scale(1); */
      }
      82.5% {
        /* transform: translate(-3px, 0px) scale(1.04); */
      }
      85% {
        /* transform: translate(0px, 2px) scale(1.03); */
      }
      100% {
        /* transform: translate(0px, 0px) scale(1); */
      }
  }


  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
  }

  .blink {
    width: fit-content;
    height: auto;
    border: 5px solid #000;
    animation: blink 1s infinite;
  }

  @keyframes blink{
    0% {
      border: 5px solid #8bc34a;
    }
    25% {
      border: 5px solid #c3d8ab;
    }
    50% {
      border: 5px solid #f3f3f3;
    }
    75% {
      border: 5px solid #c3d8ab;
    }
    100% {
      border: 5px solid #8bc34a;
    }
  }

  .bar {
    position: absolute;
    width: 50px;
    height: 5px;
    background: #fff;
    transition: all 1s linear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .bar.delay {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
  }
  .top {
    top: -5px;
    left: -5px;
  }
  .right {
    top: 18px;
    right: -28px;
    transform: rotate(90deg);
  }
  .bottom {
    bottom: -5px;
    left: -5px;
  }
  .left {
    top: 18px;
    left: -28px;
    transform: rotate(90deg);
  }
   @-webkit-keyframes h-move {
    0% {
      left: -5px;
    }
    100% {
      left: 200px;
    }
  }
   @keyframes h-move {
    0% {
      left: -5px;
    }
    100% {
      left: 200px;
    }
    }
  .top, .bottom {
    -webkit-animation-name: h-move;
    animation-name: h-move;
  }
   @-webkit-keyframes v-move {
    0% {
    top: -5px;
    }
    100% {
    top:228px;
    }
  }
   @keyframes v-move {
    0% {
      top: -5px;
    }
    100% {
      top:228px;
    }
  }
  .right, .left {
    -webkit-animation-name: v-move;
    animation-name: v-move;
  }

  md-dialog md-dialog-content .md-dialog-content-body {
    font-size: 16px;
  }

  md-progress-linear.md-default-theme[md-mode=buffer].md-warn .md-dashed:before, md-progress-linear[md-mode=buffer].md-warn .md-dashed:before {
    background: radial-gradient(rgb(139, 195, 74) 0,rgb(139, 195, 74) 16%,transparent 42%);
  }

  .transferring-file {
    animation: moveFile 1s infinite;
  }

  @keyframes moveFile {
    0% {
      transform: translateX(0%);
      opacity: 1;
    }
    100% {
      transform: translateX(550%);
      opacity: 0;
    }
  }

  .active-drag-drop-bcolor {
    background: #a9dc6f !important;
  }

  .md-button.md-default-theme.md-accent[disabled], .md-button.md-accent[disabled], .md-button.md-default-theme.md-fab[disabled], .md-button.md-fab[disabled], .md-button.md-default-theme.md-raised[disabled], .md-button.md-raised[disabled], .md-button.md-default-theme.md-warn[disabled], .md-button.md-warn[disabled], .md-button.md-default-theme[disabled], .hb-button .md-button[disabled] {
    background: #a3a3a3 !important;
  }

  .hb-button.resop-send-calc-to-ons {
      background:var(--main-active-bgcolor);
      min-width: 70px;
      margin: 0px;
      padding: 2px;
      text-transform: capitalize;
  }

  .daterangepicker .drp-calendar.left {
    transform: rotate(0);
  }

  .daterangepicker .drp-calendar.right {
    transform: rotate(0);
  }

  .wrap-steps {
    text-align: center;
    position: relative;
    width: fit-content;
  }
  .wrap-steps:before {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    border-top: 2px solid #8bc34a;
    width: 100%;
    transform: translateY(-50%);
  }

  #componentHillCurve .highcharts-container {
    display: flex;
    justify-content: center;
  }

  @media(max-width: 1280px) {
    .input-outpu-tools {
      margin-left: 0px !important;
    }
    .tabset {
      margin-top: 10px;
    }
  }

  @media(max-width: 1200px) {
    .input-outpu-tools {
      margin-left: 0px !important;
    }
  }
  @media(max-width: 1125px) {
    .tabset {
      margin-top: 15px;
    }
  }
  @media(max-width: 960px) {
    #componentHillCurve .highcharts-root {
      width: 100%;
      height: 100%;
    }
    .input-outpu-tools {
      margin-left: 0px !important;
    }
    .tabset {
      margin-top: 15px;
    }
  }

  @media(max-width: 700px) {
    #componentHillCurve .highcharts-root {
      width: 95%;
      height: 95%;
    }
    #componentHillCurve .highcharts-root {
      width: 95%;
      height: 95%;
    }
    .input-outpu-tools{
      margin-top: 8px;
    }
  }

  @media(max-width: 600px) {
    #componentHillCurve .highcharts-root {
      width: 85%;
      height: 100%;
    }
    #meu-input-outpu-tools {
      left: 20px;
    }
    .input-outpu-tools {
      margin-left: 0px !important;
    }
    .tabset {
      margin-top: 15px;
    }
  }

  @media(max-width: 500px) {
    #componentHillCurve .highcharts-root {
      width: 70%;
      height: 70%;
    }
  }

  @media(max-width: 450px) {
    #componentHillCurve .highcharts-root {
      width: 60%;
      height: 60%;
    }
  }

  @media(max-width: 380px) {
    #componentHillCurve .highcharts-root {
      width: 50%;
      height: 50%;
    }
  }

  @media(max-width: 320px) {
    #componentHillCurve .highcharts-root {
      width: 40%;
      height: 40%;
    }
  }

  .input-outpu-tools {
    margin-left: 30px;
  }

  /*@media (max-width: 959px) {
    md-dialog.md-dialog-fullscreen {
      min-width: fit-content !important;
    }
  }*/


.resop-tooltip {
  height: auto;
}

.divAddUgInputs {
  display: flex;
}

.teste{
  background-color: red;
}

.input-containerButton {
  margin-bottom: 38px;
  min-width: 20%;
  margin-left: 10px;
}

.divAddUgSelects{
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -50px;
}

.selectAddUg{
  width: 40%;
}

.buttonCurve{
  background: #FAFAFA;
	border: 1px solid rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	width: 18%;
	display: flex;
	justify-content: space-around;
	border-radius: 4px;
}

@media(max-width: 768px) {
  .inputAddUg{
    width: 50% !important;
  }

  .divAddUgSelects{
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
  }

  .selectAddUg{
    width: 50% !important;
  }

  .input-containerButton {
    margin-bottom: 5px;
    margin-top: -15px;
  }

  .buttonCurve md-icon{
    margin: 0px 1px !important;
    font-size: 19px !important;
    margin-top: 4px !important;
  }
}
@media(max-width: 360px) {
  .divAddUgInputs{
    display: contents;
  }
  .divAddUgInputs .inputAddUg{
    margin-bottom: -50px;
    width: 100% !important;
  }
  .divAddUgSelects .selectAddUg{
    margin-bottom: -25px;
    width: 100% !important;
  }
  .input-containerButton {
    margin-top: 25px;
  }
  .md-button {
    font-size: 13px;
  }
}
.divIndexadores{
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}

.divIndexadorX{
  display: flex;
  margin: 5px;
  width: 28%;
}
.divIndexadorY{
  display: flex;
  margin: 5px;
  width: 34%;
}
.comments {
  margin: 5px;
  width: 38%;
}
.comments-input {
  resize: none;
  width: 100%;
  min-height: 100px;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border-radius: 4px; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF;
  padding: 12px;
}

.comments-dialog {
	max-width: 600px;
}

.comments-dialog-title {
  display: flex;
  width: 100%;
	margin-top: -10px;
}

.comments-dialog-title > div {
    width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.comments-dialog-title > div > div {
   display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: baseline;
    margin-top: -8px;
}

.comments-dialog-title > div > div h2 {
    font-size: 14px; color: black; padding: 0 4px
}

.comments-dialog-button {
  right: -35px;
  top: -10px;
}

.comments-dialog-button-icon {
  margin: 5px 0px;
  font-size: 20px;
  color:#000;
}

.comments-dialog-title > div > h1{
    font-size: 24px;
    margin: 10px 0 0 0;
    padding-bottom: 0;
}

.comments-dialog-container-buttons {
    width: 100%;
	display: flex;
	flex-direction: row;
  justify-content: flex-end;
}

.comments-dialog-container-buttons button {
    max-width: 24%;
    margin-top: 12px;
}

@media screen and (max-width: 500px) {
    .comments-dialog-container-buttons {
        display: flex;
    }

    .comments-dialog-container-buttons button {
        max-width: 50%;
    }
}

.button-save-comment{
  margin: 0px 5px 10px 0px;
  min-height: 0px;
  /* color: rgba(0, 0, 0, 0.6);  */
  color: #8BC34A;
}

.button-cancel-comment{
  margin: 0px 5px 10px 0px; 
  min-height: 0px ; 
  color: rgba(0, 0, 0, 0.6); 
  /* background: #D0D0D0; */
}

.daterangepicker-comments-dialog {
  font-size: 14px !important;
	color: black !important;
  margin-right: -60px;
}

@media(max-width: 1280px) {
  .daterangepicker-comments-dialog {
    margin-right: -40px;
  }
}
@media(max-width: 768px) {
  .divIndexadores{
    flex-flow: wrap;
  }
  .divIndexadorX{
    width: 40%;
  }
  .divIndexadorY{
    width: 55%;
  }
  .divComments{
    width: 100%;
  }
}
@media(max-width: 360px) {
  .divIndexadores{
    flex-flow: column;
  }
  .divIndexadorX{
    width: 100%;
  }
  .divIndexadorY{
    width: 100%;
  }
}
.buttonCommentsBalance{
  margin: 0px;
}
.divHeadBalanceUpTable{
  margin-bottom: 20px;
  background: #e7e7e7;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.15) 9px 10px 4px -4px;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  width: 100%;
}
.divItensHeadBalanceUpTable{
  margin-right: 20px;
  padding: 10px 22px 10px 30px;
  border-radius: 5px;
  background : white;
  border: 2px solid #c7c7c7;
  margin: 5px;
}

.divResultadosEntradaDeDados{
  margin-top: -18px;
  display: flex;
  height: 54px;
}

.divSelectUsinaPeriodo{
  display: flex;
  justify-content: flex-start;
}

.divHeader{
  margin-top: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction:row;
  width: 100%;
}
@media(max-width: 1450px) {
  .divSelectUsinaPeriodo{
    width: 40%;
  }
  .divResultadosEntradaDeDados{
    margin-top: -4px;
  }
}
@media(max-width: 1330px) {
  .divSelectUsinaPeriodo{
    width: 38%;
  }
  .divHeader{
    flex-direction: column;
  }
  .divResultadosEntradaDeDados{
    margin-top: 15px;
  }
}
@media(max-width: 700px) {
  .divHeader{
    flex-direction: column;
    margin-bottom: 90px;
  }
  .divResultadosEntradaDeDados{
    margin-bottom: 5px;
  }
}

@media(max-width: 400px) {
  .divSelectUsinaPeriodo{
    display: flex;
    height: 120px;
    flex-direction: column;
    justify-content: space-between;
  }
  .divResultadosEntradaDeDados{
    margin-bottom: 60px;
  }
}

.resop-md-whiteframe-4dp-md-whiteframe-z2 {
  box-shadow: none !important;
}

/* Diagrama de Operações */
.operations-diagram-header-container {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 15px;
    background: white;
    margin: 15px 0!important;
}

.operations-diagram-header-container .diagram-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px 0 0;
}

.operations-diagram-header-container .diagram-form,
.operations-diagram-header-container .diagram-form input{
    width: 100%;
    display: flex;
}

.operations-diagram-header-container .diagram-form > div {
    width: 50%;
}

@media screen and (max-width: 500px) {
    .operations-diagram-header-container .diagram-form {
        flex-direction: column;
    }

    .operations-diagram-header-container .diagram-form > div {
        width: 100%;
    }
}

#spreadsheet.jexcel_container thead tr:first-child td[data-column="0"]{
    border-bottom: 0;
}

#spreadsheet.jexcel_container thead tr:last-child td[data-x="0"] {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: -6px;
    border-bottom: 8px solid #f3f3f3;
}

#spreadsheet.jexcel_container thead tr:last-child td[data-x="0"],
#spreadsheet.jexcel_container thead tr:last-child td.jexcel_selectall {
    border-top: 0;
}

/* Diagrama de Operações */
.operations-diagram-header-container {
    /*border: 1px solid #d8d8d8;*/
    border: 0;
    border-radius: 4px;
    padding: 15px;
    background: white;
    margin: 15px 0 0 0!important;
}

.diagram-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12px;
    padding: 0 20px 0 0;
}

.operations-diagram-header-container .diagram-form,
.operations-diagram-header-container .diagram-form input{
    width: 100%;
    display: flex;
}

.operations-diagram-header-container .diagram-form > div {
    width: 50%;
}

@media screen and (max-width: 500px) {
    .operations-diagram-header-container .diagram-form {
        flex-direction: column;
    }

    .operations-diagram-header-container .diagram-form > div {
        width: 100%;
    }
}

.apply-reservoir-button {
    margin: 0px -5px 10px 0px;
    min-height: 0px;
    overflow: visible;
    color: white;
    background: #122a4e;
}

.apply-reservoir-button.md-button[disabled] {
    background: #122a4e!important;
    color: #fff!important;
    opacity: 0.7;
}

.select-reating-level-color {
    padding: 12px;
}

.select-reating-level-color p {
    font-size: 16px;
    padding: 12px;
}

.select-reating-level-color input {
    max-width: 300px;
    margin-bottom: 16px;
    margin-left: 12px;
}

.select-reating-level-color .diagram-actions label {
    display: inline-block;
    margin: 1px 4px 4px 10px;
    padding: 2px 8px 2px 0;
}

.select-reating-level-color .diagram-actions label .option-level-color {
    width: 24px;
    height: 12px;
    margin-left: 4px;
    margin-top: 2px;
    border: 1px solid #ccc;
}

.select-reating-level-color .diagram-actions label input {
    margin: 1px 4px 0 10px;
}

#spreadsheet.jexcel_container thead tr:first-child td[data-column="0"]{
    border-bottom: 0;
}

#spreadsheet.jexcel_container thead tr:last-child td[data-x="0"] {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: -6px;
    border-bottom: 8px solid #f3f3f3;
}

#spreadsheet.jexcel_container thead tr:last-child td[data-x="0"],
#spreadsheet.jexcel_container thead tr:last-child td.jexcel_selectall {
    border-top: 0;
}

.balance-loading {
    top: 60px;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    padding: 193px;
    font-size: 24px;
}

.details-readings-md-content{
  margin: 15px 15px 0px 15px;
  height: 90%;
}

.resop-operation-details-sidenav {
    background: #f5f5f5;
    max-width: fit-content !important;
    width: fit-content !important;
    position: fixed;
}

@media screen and (max-width: 767px) {
    .resop-operation-details-sidenav {
        max-width: 100%!important;
    }
}

.curve-component-chart-container {
    height: 500px;
    width: 100%;
}

.reservoir-state-diagram-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.reservoir-state-diagram-dialog #ratingLevelMap .highcharts-container {
    min-width: 90%;
}

.curve-component-chart-container > .highcharts-container{
  margin: auto;
}
.div-title-component-border{
  /* border-bottom: 1px solid #d2d2d2; */
	width: 100%;
	margin-bottom: 5px;
}

.div-title-component{
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 5px;
  min-height: 26px;
  width: 100%;
}

.md-button-component-curve-hydraulic{
  margin: 0px 12px;    
  min-width: 36px !important;
  height: 24px !important;
  min-height: 20px !important; 
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-items: center;
}

.div-label-force-component-ug{
  display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	margin-bottom: 3px;
}

.div-label-outflow-component-ug{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-bottom: 3px;
  margin-left: 3px;
}

.label-input-component{
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  min-width: 102px;
}

.internal-operation {
  color: #689F38;
  font-style: italic;
}

.add-joker-structure-section form md-input-container {
	width: 100%;
	margin-top: 8px;
	margin-bottom: 0;
}

.add-joker-structure-section form md-input-container input {
	margin-bottom: 0;
}

.add-joker-structure-section form button {
	min-width: fit-content; 
	background: #2e4d97; 
	padding: 0px 10px;
	color: white;
	float: right;
	margin: 16px;
}

.add-joker-structure-section .joker-curve-radio-group {
	display: flex; 
	align-items: center;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 0 4px;
}

.operation-card .item-content .item-name {
	font-weight: bold; 
	margin: 0;
}

.operation-card .item-content hr {
	margin: 0px 0px 10px 0px;
	border-top: 1px solid #d2d2d2;
	width: 100%;
}

.operation-card .item-content header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 4px;
}

.operation-card .item-content header p {
	margin-bottom: 0;
}

.operation-card.joker-structure input {
	width: 100%;
}


.ons-resume-dialog {
  min-width: 800px;
}

@media screen and (max-width: 767px) {
  .ons-resume-dialog  {
      max-width: 100%!important;
  }
}