@import "../../node_modules/@patternfly/react-styles/css/components/Alert/alert.css";
@import "../../node_modules/@patternfly/patternfly/components/Button/button.css";

body {
    background: var(--pf-global--BackgroundColor--light-300);
}

.ipv4-address {
  display: inline;
}

.ipv4-address input {
  width: 2em;
  background: none;
  border: none;
  text-align: center;
}

.network-number-field {
    width: 4em;
}

.network-ip-settings-row {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;
}

.network-ip-settings-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.network-ip-settings-row table {
    margin-top: 20px;
}

.network-ip-settings-row tr {
  background: #F4F4F4;
    border: 1px solid #BABABA;
}

.network-ip-settings-row tr td {
    padding: 4px;
}

.network-ip-settings-row .pf-m-secondary {
    margin-right: 5px;
}

.network-ip-settings-row tr td .pf-m-secondary {
    margin-right: 4px;
}

/* Fix padding for network graph controls */

#networking-graph-toolbar,
#network-interface-graph-toolbar {
    margin-right: 20px;
}

#networking-rx-graph,
#networking-tx-graph,
#network-interface-tx-graph,
#network-interface-rx-graph {
    height: 120px;
}

th.networking-speed {
    width: 20%;
}

th.networking-spacer {
    width: 10em;
}

th.networking-action {
    width: 28px;
}

td.networking-row-configure {
    text-align: right;
}

#network-interface-hw {
    margin-left: 20px;
    margin-right: 20px;
}

#network-interface-delete {
    margin-right: 20px;
}

td.networking-controls label {
    font-weight: inherit;
}

td.networking-controls input {
    margin-left: 0px;
}

ul.add-button {
    right: 0px;
    left: auto;
    min-width: 0;
    text-align: left;
}

span.inverted-switchbox {
    margin-right: 10px;
}

.network-ip-settings-row td {
    text-align: right;
    padding-right: 0;
}
.network-ip-settings-row td:last-child {
    width: 28px;
}

#network-mtu-settings-dialog label {
    font-weight: normal;
}

#network-mtu-settings-dialog label input[type=radio] {
    position: relative;
    top: 3px;
    margin-right: 0.5em;
}

#network-mtu-settings-input {
    margin-left: 0.5em;
    width: 5em;
    display: inline;
}

#network-mac-settings-dialog label {
    font-weight: normal;
}

#testing-connection-curtain {
    z-index: 2000;
}

#confirm-breaking-change-popup .pficon-warning-triangle-o {
    float: left;
    font-size: 36px;
    margin-top: 6px;
    margin-right: 20px;
}

.modal-title {
    display: inline-block;
}

.modal-header button {
    margin-left: 10px;
}

.modal-header i.fa {
    margin-right: 2px;
}

.popover-content a {
    display: block;
    padding-top: 1em;
}


h1 .onoff-ct {
    margin-left: 1.5em;
    vertical-align: text-bottom;
}

#networking-firewall-summary:hover {
    cursor: pointer;
    background-color: var(--color-ct-list-hover-bg);
}

/* set min-height to the same as max-height, so that the list doesn't shrink
 * when filtering */
#add-services-dialog .dialog-list-ct {
    height: 100vh;
    /* Constrain the list to a maximum size of the viewport height - UI chrome */
    max-height: calc(100vh - 30rem);
    min-height: 13em;
}

@media screen and (min-width: 640px) {
    /* Add a bit more padding in desktop mode */
    #add-services-dialog .dialog-list-ct {
        max-height: calc(100vh - 40rem);
    }
}

#add-services-dialog .list-group-item {
    cursor: default;
}

#add-services-dialog .list-view-pf-main-info {
    padding: 1rem 0;
}

#add-services-dialog .list-view-pf-checkbox {
    margin: 1rem 1rem 1rem 0;
}

#add-services-dialog .list-view-pf-view {
    margin: 0;
}

#add-services-dialog .list-view-pf-description {
    flex: auto;
}

#add-services-dialog .list-group-item-heading {
    font-size: 1.2em;
    margin: 0;
}

#add-services-dialog .list-group-item-text {
    display: flex;
    flex-wrap: wrap;
}

#add-services-dialog .service-ports {
    opacity: 0.75;
}

#add-services-dialog .service-ports:first-of-type {
    margin-right: 1em;
}

#add-services-dialog .spinner-lg {
    /* (Max-height of dialog-list-ct (above) - spinner size + grid gap) / 2 */
    margin: calc(((100vh - 40rem) - 30px + 0.5rem) / 2) auto;
}

#add-services-dialog .toggle-body > .ct-form {
    margin-left: 1rem;
}

#add-services-dialog .toggle-body > .ct-form + label {
    margin-top: 1rem;
}

#add-services-dialog .toggle-body > .ct-form > .control-label {
    padding-left: 0;
}

.form-control.error {
    border-color: #cc0000;
}

.form-control.error:hover {
    border-color: #990000;
}

.form-control.error:focus {
    border-color: #990000;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
}

#add-services-dialog .has-error {
    animation: 300ms error-slide-down ease-in-out;
    color: #c00;
    padding: 0;
}

#add-services-dialog .has-error:empty {
    display: none;
}

@keyframes error-slide-down {
    0% {
        line-height: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
    }
    100% {
        line-height: inherit;
        height: auto;
        opacity: 1;
    }
}

#firewall-heading,
#networking-graphs {
    background: var(--color-white);
}

#networking-graphs {
    margin: 0;
    /* Bootstrap uses 20px padding for row children. Compensate. */
    padding: 1rem calc(3rem - 20px);
}

#firewall-heading {
    padding: 1rem 3rem;
}

#networking-graphs .row {
    margin: 0;
}

#firewall-heading {
    margin-bottom: 2rem;
}

#firewall-heading > ol.breadcrumb {
    margin-bottom: 0;
}

#firewall-heading-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

#firewall-heading-title-group {
    display: flex;
    align-items: center;
}

#firewall-heading-title-group h1 {
    margin: 0 2rem 0 0;
}

#zones-listing {
    margin-top: 0;
    padding-top: 0;
}

.zone-section {
    background: var(--color-white);
    border-top: 1px solid var(--color-border-default);
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    margin: 0 0 2rem 0;
    box-shadow: var(--pf-global--BoxShadow--sm);
}

.zone-section > .ct-listing {
    margin-top: 0;
}

.zone-section-heading {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zone-section-buttons {
    display: inline-flex;
    align-content: center;
}

.zone-section-buttons > button {
    margin-left: 2px;
}

.zone-section-targets {
    display: inline-flex;
}

.zone-section-target {
    padding-left: 1rem;
}

.zone-section-heading h4 {
    display: inline-flex;
    padding-right: 1rem;
    font-weight: bold;
}

#delete-confirmation-dialog .fa-exclamation-triangle {
    color: var(--pf-global--warning-color--100);
    font-size: 300%;
    margin-right: 1rem;
}

#delete-confirmation-dialog .delete-confirmation-body {
    display: flex;
}

#add-zone-dialog legend {
    all: unset;
    color: var(--color-subtle-copy);
    display: block;
    font: inherit;
    /* Align with label padding */
    line-height: 1.5;
    padding: 0 0.5rem;
    font-size: var(--pf-global--FontSize--sm);
}

#add-zone-dialog .add-zone-zones {
    display: flex;
    flex-flow: row wrap;
    align-items: last baseline;
    /* Compensate for bottom fieldset padding */
    margin-bottom: -1rem;
}

.add-zone-zones legend {
    line-height: 3 !important;
}

#add-zone-dialog .add-zone-zones > fieldset {
    /* Compensate for label padding */
    margin-left: -0.5rem;
    /* Pad to the side & bottom, so zone groups have space between each other */
    /* In an ideal world, we'd add `gap` in the parent, */
    /* but only Firefox supports `gap` for `flex` thus far. */
    padding: 0 2rem 1rem 0;
}

#add-zone-dialog .add-zone-zones label {
    margin: 0;
    flex-flow: column;
    padding: 0 0.5rem;
    text-transform: capitalize;
    font-size: var(--pf-global--FontSize--sm);
}

/* Move firewalld zones higher in z-index (so lines can go behind) */
.add-zone-zones-firewalld input {
    position: relative;
    z-index: 2;
    width: 16px;
    height: 16px;
}

/* Add lines behind the radio buttons */
.add-zone-zones-firewalld > label::after {
    border-bottom: 1px solid #d1d1d1;
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    left: 0;
}

/* Start line at the midpoint for the first radio */
.add-zone-zones-firewalld > label:first-of-type::after {
    left: 50%;
}

/* End line at the midpoint for the last radio */
.add-zone-zones-firewalld > label:last-of-type::after {
    right: 50%;
}

form.horizontal fieldset {
    flex-direction: row;
}

#add-zone-description-readonly {
    padding: 0.5rem 0 0;
    color: var(--color-subtle-copy);
}

#add-zone-services-readonly legend {
    padding: 0;
    line-height: 1;
}

.add-zone-interfaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    grid-gap: 0 0.5rem;
    padding: 0.5rem 0 0;
    /* 70px seems to be minimum UI padding width */
    /* This is needed for iPhone SE sizes, but does not affect other sizes */
    /* Needs !important to override specificity of "100%" */
    max-width: calc(100vw - 70px) !important;
}

.add-zone-interfaces > label.radio {
    margin: 0;
}
