/* file: `my-ngx-skeleton-loader-with-theming.component.css`
 *
 * You can find more details about `:host` at
 * Angular Component Style Docs https://angular.io/guide/component-styles#host
 */

 /* HOST */
:host {
    margin-top: 1rem;
}

:host >>> ngx-skeleton-loader .loader {
    border-radius: 5px;
    height: 30px;
}

/* FIN HOST */

/* CARDS */

.card-diagram {
    display: flex;
    justify-content: flex-start;
    height: 100vh;
    background-color: #102027;
    color: white;
}

.card-margin {
    width: 450px;
    margin: 20px 30px;
}

.card-diagram-margin {
    margin: 20px 20px 20px 0px;
}

.card-loading-margin {
    width: 350px;
    margin: 30px 20px;
}

.card-loading-diagram {
    width: 100%;
    margin: 30px 20px;
}

.card-data {
    display: flex;
    flex-direction: column;
    width: 350px;
}

/* FIN CARDS */

/* TEXT */

.text-dark {
    color: #000;
    font-weight: 450;
    font-size: 15px;
}

.text-white {
    color: #FFF;
}

.text-white-opacity {
    color: #FFF;
    font-size: 15px;
    opacity: 95%;
}

.text-circuito {
    padding: 10px 0px;
    font-weight: bold;
}

.text-hr-circuito {
    padding-bottom: 20px;
    border-bottom: 2px solid #FFF;
}

.text-hr {
    padding: 10px 0px;
    border-bottom: 2px solid #FFF;
}

/* FIN TEXT */


/* BUTTONS */

.button-block-circuito {
    width: 100%;
    background-color: #004d40;
    color: white;
    margin-bottom: 2% !important;
}

.button-block {
    width: 100%;
    background-color: #39796b;
    color: white;
}

/* FIN BUTTONS */

/* CARD PANELS */

.panel-bg {
    background-color: #102027;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
    color: white;
}

.mat-select-value-text {
    color: white;
}

.mat-select-arrow {
    color: white;
}

.mat-expansion-panel-body {
    padding: 20px 10px !important;
}

.mat-expansion-panel-spacing {
    margin: 0 !important;
}

.mat-form-field .mat-form-field-underline {
    background-color: white;
}

.mat-expansion-panel-header {
    background-color: #37474f;
    padding: 0px 10px  !important;
    height: 38px;
}

.mat-expansion-panel-header:focus, .mat-expansion-panel-header:hover {
    background: #37474f !important;
}

.mat-expansion-panel-header.mat-expanded:focus, .mat-expansion-panel-header.mat-expanded:hover {
    background: #37474f !important;
}

.mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
    color: white;
}

.mat-expansion-panel-header.mat-expanded {
    height: 38px;
}

/* */

/* PALETA COMPONENTES */

.e-remove-palette {
    overflow: auto;
    background-color: #102027;
}

.e-symbolpalette .e-symbol-hover:hover {
    background: #004d40;
    border-radius: 4px;
}

.e-symbolpalette .e-symbol-selected {
    background: #004d40;
    border-radius: 4px;
}

/* FIN PALETA COMPONENTES */

/* TABLE VIEWPORT */

.data-viewport {
    width: 100%;
    height: 75.5vh;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

.tabla_secuencia {
    width: 100%;
}

.mat-row .mat-cell {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}

.mat-column-secuencia {
    text-align: center;
    font-weight: bold;
}

.item_secuencia {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    text-align: center;
    padding: 15px 20px;
}

.checkbox-seccion {
    margin: 15px 0;
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: #004d40;
}


.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #004d40;
}

.mat-checkbox-frame { 
    border-color: white; 
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #004d40;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #004d40;
}

.seccion-circuito {
    margin: 20px 0px;
    padding: 10px 0px;
}
  

/* FIN TABLE VIEWPORT */


/* NOTA */

.nota {
    display: flex;
    flex-direction: column;
    margin: 20px 10px;
}

.item-nota {
    padding-bottom: 1%;
}

.reglas-nodisponibles {
    color: #f44336;
    opacity: 90%;
    font-weight: bold;
    font-size: 15px;
}

/* FIN NOTA */


/* TOOLTIP */

.tooltip-employee {
    width: 140px;
    margin-bottom: 4%;
    background-color: #263238; 
    color: white; 
    border: 1px solid #000;
    border-radius: 4px; 
    white-space: nowrap;
}

.tooltip-notification {
    width: 50px;
    margin-bottom: 4%;
    background-color: #263238; 
    color: white; 
    border: 1px solid #000;
    border-radius: 4px; 
    white-space: nowrap;
}

.tooltip-flex {
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    padding: 5px 5px;
}

/* TOOLTIP */

.w-100 {
    width: 100%;
}