/*
Note:
    Theme must be loaded before this file.
    They are employed for buttons, headers, etc. unless overridden here for specific use-case.
*/

html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Open Sans", sans-serif;
}

table,
textarea,
input[type="text"],
.panel-line {
    font-family: arial, sans-serif;
}

textarea,
input[type="text"] {
    font-size: 0.8333em;
}

textarea {
    resize: both;
    min-width: 21em;
    min-height: 5em;
}

table {
    border-collapse: collapse;
    width: auto;
}

td,
th {
    border: 1px solid #DDDDDD;
    padding: 0.5em;
}

table thead {
    color: white;
    font-weight: bold;
}

.content {
    margin: 5em;
}

.version-box {
    position: absolute;
    right: 0;
}

.version-box > div {
    font-size: 75%;
    display: inline-block;
    position: relative;
    bottom: 1em;
    right: 1em;
}

.version-title {
    color: gray;
}

.version-tag {
}

.img-button {
    padding: 0.5em;
    margin: 1em 0;
    display: inline-flex;

    /* align-items: flex-end; */
}

.img-button > img {
    color: black;
    vertical-align: -0.1em;
    height: 1.25em;
    padding-right: 0.5em;
}

a {
    color: #337AB7;
    text-decoration: none;
}

.disabled {
    opacity: 0.5;
}

a:focus,
a:hover {
    color: #23527C;
    text-decoration: underline;
}

button.button {
    border-radius: 3px;
}

input[type="submit"].equal-width,
input[type="button"].equal-width {
    min-width: 5em;
    width: 5em;
}

input[type="submit"].img-button.disabled,
input[type="button"].img-button.disabled,
input[type="submit"].button.disabled,
input[type="button"].button.disabled {
    color: currentColor;    /* inherit from theme */
    opacity: 0.5;
    vertical-align: center;
    cursor: not-allowed;
    pointer-events: none;
}

button.button.delete,
input[type="button"].img-button.delete,
input[type="submit"].img-button.delete,
input[type="button"].button.delete,
input[type="submit"].button.delete {
    border: 1px solid #8B3A3A;
    background-color: #CD0000;
    color: white;
    vertical-align: center;
    cursor: pointer;
}

button.button.delete {
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: 0.25em;
}

button.delete:hover,
button.delete:focus,
input[type="button"].img-button.delete:hover,
input[type="button"].img-button.delete:focus,
input[type="submit"].img-button.delete:hover,
input[type="submit"].img-button.delete:focus,
input[type="button"].button.delete:hover,
input[type="button"].button.delete:focus,
input[type="submit"].button.delete:hover,
input[type="submit"].button.delete:focus {
    background-color: #EE6363;
}

input[type="button"].img-button-warning,
input[type="submit"].img-button-warning,
input[type="button"].button-warning,
input[type="submit"].button-warning {
    border: 1px solid #8B3A3A;
    background-color: #CD6600;
    color: white;
    vertical-align: center;
    cursor: pointer;
}

input[type="button"].img-button.warning:hover,
input[type="button"].img-button.warning:focus,
input[type="submit"].img-button.warning:hover,
input[type="submit"].img-button.warning:focus,
input[type="button"].button.warning:hover,
input[type="button"].button.warning:focus,
input[type="submit"].button.warning:hover,
input[type="submit"].button.warning:focus {
    background-color: #FFAA33;
}

input[type="button"].img-button.cancel,
input[type="submit"].img-button.cancel,
input[type="button"].button.cancel,
input[type="submit"].button.cancel {
    border: 1px solid #808080;
    background-color: #A9A9A9;
    color: #444444;
}

input[type="button"].img-button.cancel:focus,
input[type="button"].img-button.cancel:hover,
input[type="submit"].img-button.cancel:focus,
input[type="submit"].img-button.cancel:hover,
input[type="button"].button.cancel:focus,
input[type="button"].button.cancel:hover,
input[type="submit"].button.cancel:focus,
input[type="submit"].button.cancel:hover {
    background-color: #8A8A8A;
}

.img-button,
a.tab:link,
a.tab:visited,
input[type="submit"],
input[type="submit"].button.normal {
    vertical-align: center;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
}

.img-button,
input[type="button"],
input[type="submit"] {
    border-radius: 3px;
}

input[type="button"],
input[type="submit"] {
    height: 2em;
}

.tree input[type="submit"] {
    height: 1.5em;
}

.checkbox-align label {
    display: block;

    /* float: left; */
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-bottom: 1em;
    white-space: nowrap;
}

.checkbox-align input {
    vertical-align: middle;
    margin-top: 0.05em;
}

.checkbox-align label span {
    vertical-align: middle;
}

/* --- Panel Information Box --- */

.panel-body {
    padding: 0.5em;
}

.panel-box {
    background-color: #FFFFFF;
    border: 1px solid;
    border-radius: 4px;
    margin-top: 10px;
    padding: 1px;
}

.panel-heading {
    border-bottom: 1px solid #333333;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 10px 15px;
    font-weight: bold;
}

.panel-message {
    margin: 1em;
    display: inline-flex;
}

.panel-message-text {
    margin-left: 0.25em;
    margin-top: -0.05em;
    text-align: left;
}

.panel-message-text > span {
    white-space: pre-wrap;
}

.subsection {
    background-color: #CCCCCC;
}

.no-border {
    border-style: none;
    border-width: 0;
}

.panel-heading-button {
    float: right;
    margin-top: -3px;
}

.panel-fields {
    padding: 0.5em;
}

.panel-line {
    margin: 0.25em 0.5em;
}

table.panel-line {
    margin: 0.25em 0.5em;
}

table.panel-line th,
table.panel-line td {
    border-width: 0;
    margin: 0.25em;
    white-space: nowrap;
    padding: 0;  /* override global th/td */
}

.panel-line-entry {
    margin: 0.25em 0;
    min-height: 1em;
}

.panel-form-warning > img,
.panel-form-error > img {
    width: 1em;
    height: 1em;
    margin: 0.1em 0.25em 0.15em 0;
}

.panel-form-lock > img {
    width: 1.25em;
    height: 1em;
    margin: 0 -0.1em 0.15em -0.1em;
}

.panel-form-warning,
.panel-form-error,
.panel-form-lock {
    width: auto;
    display: inline-flex;
    float: left;
    text-align: center;
    margin-left: 0.75em;
    margin-top: 0;
}

.panel-form-lock {
    margin-top: 0.1em;
}

.panel-line input[type="button"],
.panel-line input[type="submit"],
.panel-line-entry input[type="button"],
.panel-line-entry input[type="submit"] {
    height: auto;
    float: right;
    margin-left: 1em;
    min-width: 4em;  /* for save/edit buttons alignment when editing one field and others are still in non-edit mode */
}

.panel-line-entry input[type="button"],
.panel-line-entry input[type="submit"] {
    margin-top: -0.1em;
}

/* textual field entry when in edit mode */
.panel-line-entry input[type="password"],
.panel-line-entry input[type="text"],
.panel-line-entry input[type="email"],
.panel-line-entry input[type="url"] {
    -webkit-appearance: none;
    appearance: none;
    height: 1.125em;
    border: solid #666666 1px;
    font-size: 14px;
    margin-bottom: 0.1em;
}

/* textual field entry when in non-edit mode */
.panel-line-entry span {
    /*
    background-color: lightgray;
    border-color: black;
    border-width: 0.15em;
    border-style: inset;
    padding: 0 0.25em;
*/
}

.panel-line-limit-size {
    /* reduce size of the field to allow other fields to preserve 'Edit' button closer to their value
       in case the large value contents within this field makes the table column very wide */
    max-width: 1em;
}

.panel-line-permissions {
    max-width: 100%;
    white-space: normal;
    line-height: 1.5em;
}

.panel-line-checkbox {
    padding-top: 0.1em;
    display: inline-block;
}

.panel-title {
    font-weight: bold;
}

.panel-entry {
    font-weight: bold;
    margin-right: 0.5em;
    margin-top: 0.25em;
}

.panel-entry-title {
    vertical-align: top;
}

.panel-value {
}

.align-text {
    margin-top: 0.1em;
    display: inline-block;
    vertical-align: top;
}

.sync-text {
    margin-left: 0.5em;
}

.italic-text {
    font-style: italic;
}

/* --- Labels --- */

.label {
    display: inline;
    padding: 0.2em 0.5em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    background-color: #5BC0DE; /* info default */
}

.label-danger {
    background-color: #CD0000;
}

.label-warning {
    background-color: #F0AD4E;
}

.label-info {
    background-color: #5BC0DE;
}

.label-success {
    background-color: #4CAF50;
}

.label-null {
    background-color: #808080;
    font-style: italic;
}

/* --- Alerts --- */

.alert {
    padding: 20px;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
    display: none;              /* hidden default */
    background-color: #2196F3;  /* info default */
}

.alert-danger {
    background-color: #F44336;
}

.alert-warning {
    background-color: #FF9900;
}

.alert-info {
    background-color: #2196F3;
}

.alert-success {
    background-color: #4CAF50;
}

.alert-visible {
    display: block; /* override hidden default */
}

.alert-title {
    margin: 0;
}

.alert-title-danger {
    color: #660000;
}

.alert-title-warning {
    color: #994400;
}

.alert-title-info {
    color: #FFFFFF;
}

.alert-title-success {
    color: #FFFFFF;
}

.alert-text-container {
    display: inline-flex;
    text-align: center;
}

.alert-text-container > img {
    margin: 0.1em 0.25em 0.15em 0;
}

.alert-text {

}

.alert-button {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.alert-button:hover {
    color: black;
}

.alert-form-warning > img,
.alert-form-error > img {
    width: 1.25em;
    height: 1.25em;
    margin: -0.05em 0.25em 0.15em 0;
}

.alert-form-warning,
.alert-form-error {
    width: auto;
    display: inline-flex;
    float: left;
    text-align: center;
    margin-top: 0.25em;
}

.alert-form-text-locked {
    color: #48453F;
    margin-top: 0.1em;
}

.alert-form-text-warning {
    color: #FF9900;
}

.alert-form-text-error {
    color: #CD0000;
}

.alert-form-align {
    float: left;
    padding: 0 0.5em 0 0;
}

.alert-note {
    width: auto;
    display: inline-flex;
    float: left;
    margin-top: 1em;
    margin-left: 0.1em;
}

.alert-note-text {
    margin-left: 0.25em;
    margin-bottom: -1em;
    margin-top: -1em;
    text-align: left;
}

.icon-error {
    width: 1.25em;
    height: 1.25em;
}

.icon-warning {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.05em;
}

.icon-pending {
    width: 1.5em;
    height: 1.5em;
    padding-right: 0.2em;
    margin-top: 0.1em;
    margin-bottom: -0.1em;
    filter: contrast(0);
}

.icon-check {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.05em;
}

.icon-info {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.05em;
}

.icon-add {
    transform: scale(0.9);
}

.icon-locked {
    width: 1.25em;
    height: 1em;
    margin: 0.25em 0.25em 0 0;
    padding: 0.1em 0.2em 0.1em 0;
    filter: saturate(0) invert(50%);
}

.icon-delete {
    width: 1em;
    height: 1em;
    margin: 0.25em 0.5em 0 0;
    padding: 0.1em;
    filter: saturate(0) invert(80%);
}

.icon-loading {
    width: 1.5em;
    height: 1.5em;
    margin-top: 0.1em;
    margin-left: 0.5em;
}

.icon-color-white {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.status-container {
}

.hidden {
    display: none;
}

.option-container {
    margin-bottom: 1em;
}

.option-section {
    margin-left: 0.5em;
    display: inline-block;
}

.option-text {
}

.permission-apply-container {
    display: inline-block;
    width: 100%;
}

.permission-apply-container > input {
    float: right;
    margin-right: 1.25em;
}

.permission-effective {
    background-color: white;
    padding: 1px 2px 2px;
    font-weight: bold;
    font-size: 1.25em;

    /* make sure current line test button converted to success/failure icon remains aligned with other lines buttons.
       is affected by width of 'permission-effective-button' to align, impacts width of 'permission-title-effective' */
    margin-left: 0.1em;
    margin-right: 0.1em;
}

.permission-effective-tester {
    float: right;
    display: inline-flex;
}

.perm-info-text {
    font-style: italic;
    font-weight: bold;
    font-variant-caps: small-caps;
}

.success {
    color: #2C8F30;
}

.failure {
    color: #880000;
}

input[type="button"].permission-effective-button {
    border-color: #377739;
    border-width: 2px;
    background-color: #DDDDDD;
    color: #377739;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0.2em 0.6em; /* padding must be included in 'permission-title-effective' (2x because left and right) */
    margin: 3px 0.25em;   /* width must be included in 'permission-title-effective' (2x because left and right) */
    cursor: pointer;
}

input[type="button"].permission-effective-button:focus,
input[type="button"].permission-effective-button:hover {
    background-color: #358C39;
    color: #FFFFFF;
}

/* button for display, without any attached action or effect */
input[type="button"].button-no-click,
input[type="button"].button-no-click:active,
input[type="button"].button-no-click:focus,
input[type="button"].button-no-click:hover {
    vertical-align: top;
    background-color: #DDDDDD;
    border-style: solid;
    color: #377739;
    cursor: default;
}

input[type="button"].permission-effective-example {
    margin: 0;  /* reset for within text paragraph */
}

/* --- View users & groups pages  --- */

table.simple-list {
    width: 100%;
}

/* note: use explicit row classes instead of 'tr:nth-child(even)' because generated code doesn't handle it well */
table.simple-list tr.list-row-odd {
    background-color: white;
}

table.simple-list tr.list-row-even {
    background-color: #F2F2F2;
}

table.simple-list tr,
table.simple-list td:first-child:not(.user-info),
table.simple-list th:first-child:not(.user-info) {
    width: 75%;
    text-align: left;
}

table.simple-list td:not(:first-child),
table.simple-list th:not(:first-child) {
    text-align: center;
}

table.simple-list input[type="button"],
table.simple-list input[type="submit"] {
    margin: 0 0.5em;
}

table.simple-list th.user-info,
table.simple-list td.user-info {
    text-align: left;
}

table.simple-list td.user-info:first-child {
    width: 25%;
}

table.simple-list td:last-child {
    width: 10%;
}

/* --- Resource tree rendering  --- */

.tree {
    background: white;
}

.tree-header {
    font-weight: bold;
    padding: 1em 0 2.5em;
}

.tree .collapsible {
    /* cursor: pointer; */

    /* looks better on 'tree-key' element */
    margin-top: -1em;  /* make each new sub-list aligned such as if continuous flat list without extra spacing */
}

.tree .collapsible > ul {
    display: none;      /* collapsed */
    cursor: default;
}

.tree .collapsible.expanded > ul {
    display: block;     /* expanded */
}

/* fake marker area to receive click event handler over 'collapsible::marker' list-item (toggling arrow) */
.collapsible-marker {
    /* make the area offset back (starting from text) over the arrow marker of list-item */
    position: relative;
    left: -1.25em;
    top: 1.25em;

    /* make the marker area large enough to overlap completely the arrow with a little overflow  */
    width: 1.25em;
    height: 1.25em;
    margin-bottom: -0.25em;  /* undo extra height added to align the marker, preserve appearance of line height */
    background-color: transparent;  /* adjust color with alpha value to apply changes to help visualize during edits */
}

.collapsible-marker:hover {
    cursor: pointer;
}

/* leaf nodes will have this style, as not overridden by following ones */
.tree li {
    /* margin-top: 0.25em; */

    /* margin-left: 2em; */

    /* margin-bottom: 0.25em; */
    line-height: 1.5em;
    list-style-type: square;

    /* list-style-position: inside; */

    /* border-bottom: 1px solid #DDDDDD; */
}

/* nodes that have child node(s) will have a expanded menu, default marker style when collapsed */
.tree li.collapsible::marker {
    content: "►\00a0\00a0";
    list-style-type: none;
    font-size: 0.875em;

    /* font-family: monospace; */
}

/* all collapsible nodes inherits from 'li.expanded::marker', 'expanded' added on top of it for expanded marker */
.tree li.collapsible.expanded::marker {   /* note: 'expanded' name is important, must match JS script event to work */
    content: "▼\00a0\00a0";
}

.tree-line {
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.collapsible-tree-item {
    /* margin-top: 0.5em; */
    cursor: pointer;

    /* this ensures that element is on top to capture the click event to toggle collapsed/expanded
       must be applied in combination to 'position' attribute */
    z-index: 10;
}

.tree-line-key-container {
    margin-left: 0;
    margin-right: 20em;
}

.tree-line-fill-container {
    width: max-content;
    margin-right: auto;
    margin-left: 0;
}

.tree-line-item-container {
    margin-right: 0;
    width: max-content;
    white-space: nowrap;
    display: inline-block;
    position: absolute;
    max-width: 55%;
    right: 6em;  /* page border + tab panel border */
}

.tree-line-item-container-scrollable {
    overflow-x: hidden;
    position: relative;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.tree-line-scroll-visible {
    overflow-x: auto;
    min-height: 2.5em;  /* ensure the scroll-bar doesn't hide the title texts */
}

.tree-key {
    display: inline-block;
    position: absolute;
}

.tree-key-value {
}

.tree-item {
    display: inline-block;
    vertical-align: middle;
}

.tree-item-value {
    display: inline-block;
}

.tree-item-label {
    margin-right: 0.5em;
}

.tree-item-buttons {
    float: right;
}

.tree-button.goto-service {
    margin: 0.25em 0 0 -4em;
}

.tree-item-message {
    text-align: left;
    color: gray;
    display: inline-flex;
    float: right;
    margin: 0.25em 0 0 0;
}

.tree-item-message > img {
    width: 1.5em;
    height: 1.5em;
    margin: -0.15em 0 0 0;
}

div.tree-button {
    width: 5em;
    float: right;
    text-align: center;
    margin-bottom: 0.15em;
}

.clear {
    clear: both;
}

.underline {
    border-bottom: 1px solid #DDDDDD;
}

.permission-title {
    /* make text >width employ an ellipsis with scroll that auto apply/remove when using it for too long titles */
    text-overflow: ellipsis;
    overflow: auto;
    text-align: left;
    min-height: 2em;  /* ensure the scroll-bar doesn't hide the title texts */
}

.permission-cell {
    /* ensure that sufficient space is provided to fit all possible permission-name side-by-side
       align with combobox and checkbox, must include both their respective width
    */
    margin-left: 0.5em;  /* spacing with disallowed text to ensure one title doesn't end flush where the next begins */
    width: 10.5em;   /* [width = <desired-width> + permission-entry.width + permission-checkbox.width - margin-left] */

    /* position */
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.permission-title-effective {
    /* when 'effective' permission display is enabled, the extra button to test adds more width between items */
    width: 11.6em;  /* [width = permission-title.width + 2 * permission-effective-button.width] */
}

.permission-entry {
    text-align: left;
    margin-top: 0.05em;
}

.permission-checkbox {
    width: 1.5em;
    text-align: left;
    margin-top: 0.1em;
    margin-right: 0;        /* must be included in 'permission-title' width, affects width of 'permission-effective' */
}

.permission-combobox {
    /* use separate border values to inherit the theme color */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    width: 100%;    /* use as much space as available in 'permission-entry' excluding space for 'permission-checkbox' */
    margin-right: 5em;  /* value must be "big enough" to push checkbox right as much as possible, but < cell width */
}

/* Hide arrow icon in IE browsers */
.permission-combobox::-ms-expand {
    display: none;
}

.tooltip-container {
}

.tooltip-container .tooltip-value {
    border-bottom: 1px dotted black;
}

.tooltip-container .tooltip-text {
    visibility: hidden;
    text-align: center;
    background-color: black;
    color: white;
    border-radius: 5px;
    padding: 2px 4px;
    opacity: 70%;
    width: max-content;

    /* position */
    position: absolute;
    z-index: 1;
    margin-left: 0.5em;
    margin-bottom: 1em;
    margin-top: -0.1em;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
}

/* --- Header breadcrumb --- */

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
}

ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

ul.breadcrumb li + li::before {
    padding: 8px;
    color: #DDDDDD;
    content: ">\00a0";
}

ul.breadcrumb li a {
    color: #DDDDDD;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: white;
    text-decoration: underline;
}

/* --- Header --- */

/* stylelint-disable no-descending-specificity
    Ignore header and body section order to allow specific overrides of other buttons
    and to preserve item within same section grouped together.
*/

/* noinspection CssInvalidFunction */
.header {
    background: black; /* For browsers that do not support gradients */
    background: -webkit-gradient(bottom top, black, gray); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(left bottom, black, gray); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(bottom top, black, gray); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom top, black, gray); /* Firefox 3.6 to 15 */
    background: -ms-linear-gradient(bottom top, black, gray); /* IE10+ */
    background: linear-gradient(to bottom top, black, gray); /* Standard syntax (must be last) */
    padding: 1em 1em 0 1em;
    vertical-align: center;
}

.header-line {
    height: 5px;  /* offset to avoid being partially under Magpie logo */
    border-bottom: 1px solid #DDDDDD;
}

.header-section {
}

.header > div > a {
    color: white;
    font-size: 3em;
    text-decoration: none;
    float: left;
    vertical-align: center;
}

.header > button {
    height: 40px;
    width: 100px;
    float: right;
}

#title-header {
    display: inline-block;
    position: relative;
    left: 0.25em;
}

#image-container {
    float: left;
    position: relative;
    width: 64px;
    height: 64px;
}

#image-background {
    width: inherit;
    height: inherit;
}

#image-background > img {
    width: inherit;
    height: inherit;
}

#image-overlay {
    position: absolute;
    width: inherit;
    height: inherit;
    left: 15px;
    top: 10px;
}

#image-overlay > img {
    width: inherit;
    height: inherit;
}

.language {
    float: left;
}

.logged {
    float: right;
}

/* --- Home --- */

/*  when the screen width is too small, force
    buttons block-stacking with style override,
    otherwise use default side-by-side view.
    60em number from margins and button sizes
*/
@media only screen and (max-width: 60em) {
    .admin-content {
        display: inline;
    }
}

.admin-content {
    width: 100%;
    text-align: center;
}

.admin-button {
    display: inline-block;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0 0 0 / 20%), 0 6px 20px 0 rgba(0 0 0 / 19%);
    width: 10em;
    height: 10em;
    margin: 3em;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    vertical-align: center;
    cursor: pointer;

    /* use separate border values to inherit the theme color */
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    font-weight: bold;
}

.admin-button,
.admin-button:focus,
.admin-button:hover,
.admin-button:active {
    color: #000000;
}

.admin-button > img {
    height: 60%;
    padding: 5%;
}

.button-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

.img-error {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.list-button {
    width: 5em;
}

.error div {
    text-align: center;
}

table.request-details {
    text-align: left;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

table.request-details thead,
table.request-details tbody,
table.request-details td,
table.request-details th {
    text-align: left;
}

table.request-details td:first-child {
    white-space: nowrap;
}

/* stylelint-enable */

/* --- Service tabs --- */

.tabs-panel {
    background: #DDDDDD;
    padding: 1px;
}

.tab-panel-selector {
    /* see 'tab' for below spacing */
    margin-bottom: 0.125em;
    margin-right: 0.125em;
}

.current-tab-panel {
    background: white;
    padding: 1em;
    margin: 0;
    border: 1px solid white;
    min-height: 10em;
}

a.current-tab:link,
a.current-tab:visited {
    color: white;
    padding: 1em 1em 1.4em 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
}

.tab {
    min-width: 6em;  /* make tabs same width regardless of text length, but must be adjusted for longest one */
    border-color: black;

    /* below margins top/left must be opposite to bottom/right of 'tab-panel-selector' to make it look equally spaced */
    margin-top: 0.125em;   /* in case page is not wide enough, avoid wrapped tabs to be sticking top row tabs */
    margin-left: 0.125em;  /* also avoid sticking to previous tab or edge of 'tab-panel-selector' */
}

a.tab:link,
a.tab:visited {
    padding: 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/* --- service configuration languages --- */

.panel-code-language {
    background: #DDDDDD;
    padding: 1px;
}

.code-language-selector {
    margin: 0.1em;
}

.current-code-language {
    background: white;
    padding: 0.5em 1em 0.25em;
    margin: 0;
    border: 1px solid white;
}

.code-language-option {
    min-width: 6em;  /* make tabs same width regardless of text length, but must be adjusted for longest one */
    margin-bottom: 0.1em;   /* in case page is not wide enough, avoid wrapped tabs to be sticking on top of another */
    border-color: black;
}

.input-configuration {

}

.current-option {

}

/* --- service details --- */

table.service-details {
    table-layout: fixed;
}

/* --- field form --- */

.new-item-form {
    margin: auto;
    width: 30%;
    min-width: 500px;
}

table.fields-table {
    width: auto;
}

table.fields-table th,
table.fields-table td {
    border: 0;
    white-space: nowrap;
}

table.fields-table td.centered {
    text-align: center;
}

table.fields-table td.top-align {
    vertical-align: top;
}

table.fields-table td.add-group-fixed-width {
    width: 11.1875em;
}

table.fields-table input[type="radio"] {
    margin-left: 2em;
}

.service-button {
    margin-left: 40%;
}

.service-config-error {
    margin-top: 0.25em;
    margin-left: 0;
    display: inline-flex;
}

.service-config-error > img {
    width: 1em;
    height: 1em;
    margin: 0.1em 0.25em 0.15em 0;
}

/* ---
field form equal width inputs
support different browsers using an higher level container
--- */

select.equal-width,
option.equal-width,
input.equal-width {
    width: 250px;

    /* -webkit-box-sizing: border-box; */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

div.input-container {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
}