.grid-field-name { color: var(--gridFieldName); }
.grid-field-name.nowrap { white-space:nowrap; }
.message-field.error { color: var(--errorText); font-weight:bold; }
.message-field.error2 { color: var(--errorText2); font-weight: bold; }
.message-field.success { color:var(--successText); font-weight:bold; }
.required-field { color:var(--requiredText); font-weight:bold; }
.required-field.nowrap { white-space:nowrap; }

.info-pane {
    background-color: #e7f6e8;
    border: 1px solid #4f8d51;
    padding: 7px;
    border-radius: 7px
}


.action-button { color: var(--primaryButtonText); background-color: var(--primaryButtonBg); border: 2px solid var(--primaryButtonBg); padding: 3px 22px 3px 22px; font-weight: 600; }
.action-button:hover { cursor: pointer; color: var(--primaryButtonText); background-color: var(--primaryButtonBgHover); border: 2px solid var(--primaryButtonBgHover); transition:all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; }
.action-button.curved { border-radius:7px }

.action-button:disabled { color: var(--collapseMainText); background-color: var(--disabledBg); border: 2px solid var(--disabledBg); padding: 3px 22px 3px 22px; font-weight: 600; }
  .action-button:disabled:hover { cursor: default; }

.action-button.secondary { color: var(--secondaryButtonText); background-color: var(--secondaryButtonBg); border: 2px solid var(--secondaryButtonBg); padding: 3px 22px 3px 22px; font-weight: 600; }
.action-button.secondary:hover { cursor: pointer; color: var(--secondaryButtonText); background-color: var(--secondaryButtonBgHover); border: 2px solid var(--secondaryButtonBgHover); transition:all 0.25s ease-in-out; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; }

.UserInputGen { padding: 3px; border: 2px solid var(--userInputBorder); cursor:pointer; margin: 2px 0px 2px 2px; }
.UserInputGen:hover { padding: 3px; border: 2px solid var(--userInputBgHover); box-shadow: 0 0 5px var(--userInputBgHover); }


.UserInput { 
  padding: 3px; margin: 2px 2px 2px 2px; 
  border: 2px solid var(--userInputBorder);
  color: var(--userInputText);
  background-color: var(--userInputBg);
  -webkit-transition: all 0.30s ease-in-out; 
  -moz-transition: all 0.30s ease-in-out; 
  -ms-transition: all 0.30s ease-in-out; 
  -o-transition: all 0.30s ease-in-out; 
  outline: none;
}
.UserInput:hover { 
  border: 2px solid var(--userInputBgHover);
}

.link-button { color: var(--mainAnchors); background:none!important; border:none; padding:0!important; cursor: pointer; font: inherit; text-decoration: none;}
    .link-button:hover {
        color: var(--mainAnchorsHover);
        text-decoration: underline;
    }
    .link-button.white {
        color: var(--lightText);
    }
    .link-button.white:hover {
        color: #E6F2FF;
        text-decoration: underline;
    }


.LoginBorder { padding: 5px; margin-left: auto; margin-right: auto; padding: 5px; }

.LoginBkgndBorder { border: 2px solid #D0D5DD; box-shadow: 0 0 5px #D0D5DD; padding: 0px 0px 10px 0px; }
  .LoginBkgndBorder .Title {
    padding: 8px;
    font-weight: 600;
    border-bottom: 2px solid #1d1b31;
    background-color: #000000;
    color: #fff;
  }
  .LoginBkgndBorder .Content { padding: 8px; }
    .LoginBkgndBorder .Content div { padding: 3px; }
    .LoginBkgndBorder .Content button { padding: 6px 20px 6px 20px; width: 100%; font-weight: 600; }

.table-padding > tbody > tr > td { padding:0; }
.table-padding.one > tbody > tr > td { padding:1px; }
.table-padding.two > tbody > tr > td { padding:2px; }
.table-padding.three > tbody > tr > td { padding: 3px; }
.table-padding.five > tbody > tr > td { padding: 5px; }
.table-padding.ten > tbody > tr > td { padding: 10px; }
.table-padding.padright > tbody > tr > td { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; }

.under-line-row { border-bottom: var(--containerHeaderBottom) 1px solid; }
  .under-line-row.white { border-bottom: #ffffff 1px solid; }
  .under-line-row.bottom { border-bottom: var(--containerHeaderBottom) 1px solid; }
    .under-line-row.bottom.thick { border-bottom: var(--containerHeaderBottom) 2px solid; }
    .under-line-row.bottom.three { border-bottom: var(--containerHeaderBottom) 3px solid; }
  .under-line-row.top { border-bottom: 0px; border-top: var(--containerHeaderBottom) 1px solid; }
    .under-line-row.top.thick { border-bottom: 0px; border-top: var(--containerHeaderBottom) 2px solid; }
    .under-line-row.top.three { border-bottom: 0px; border-top: var(--containerHeaderBottom) 3px solid; }


.under-line-table > tbody > tr {
  border-bottom: 1px solid var(--underlineRow);
}
  .under-line-table > tbody > tr > th {
    background: var(--underlineTableHeader);
    border-left: 1px solid var(--underlineRow);
    border-right: 1px solid var(--underlineRow);
    border-top: 1px solid var(--underlineRow);
    border-bottom: 1px solid var(--underlineRow);
    font-weight: bold;
    text-align: left;
    padding: 2px 7px 2px 7px;
  }
  .under-line-table > tbody > tr > td {
    border: 0;
    border-collapse: collapse;
    padding: 2px 7px 2px 7px;
  }
  .under-line-table.five > tbody > tr > td {
    border: 0;
    border-collapse: collapse;
    padding: 5px;
  }
  .under-line-table.alt > tbody > tr:nth-child(odd) {
    background: var(--dataTableAltRow);
  }
.under-line-table > tbody {
  border-left: 1px solid var(--underlineRow);
  border-right: 1px solid var(--underlineRow);
  border-top: 1px solid var(--underlineRow);
  border-bottom: 1px solid var(--underlineRow);
}
  .under-line-table > tbody > tr {
    border-bottom: 1px solid var(--underlineRow);
  }
    .under-line-table.active > tbody > tr:hover {
      border-bottom: 1px solid var(--underlineRow);
      background: var(--tableHoverRow);
    }

.data-table {
  border-collapse: collapse;
  border-spacing: 0;
}

  .data-table > tbody > tr > th {
    padding: 2px 4px 2px 4px;
  }

  .data-table > tbody > tr > td {
    padding: 2px 4px 2px 4px;
  }
    .data-table.three > tbody > tr > td {
        padding: 3px;
    }

  .data-table > tbody {
    border: 1px solid var(--dataTableBorder);
  }

    .data-table > tbody > tr {
      border-bottom: 1px solid var(--dataTableBorder);
    }

      .data-table > tbody > tr > th {
        color: var(--dataTableText);
        background-color: var(--dataTableHeader);
        border: 1px solid var(--dataTableBorder);
        font-weight: 600;
        text-align:left;
      }
        .data-table.sortable > tbody > tr > th {
            cursor: pointer;
            white-space:nowrap;
        }
            .data-table.sortable > tbody > tr > th:hover {
                background-color: var(--tableHoverRow);
            }
      .data-table > tbody > tr > td {
        border-collapse: collapse;
        border: 1px solid var(--dataTableBorder);
      }
      .data-table.alt > tbody > tr:nth-child(odd) {
        background: var(--dataTableAltRow);
      }
    .data-table .select-row {
        cursor: pointer;
    }
    .data-table .select-row:hover {
        background-color: var(--tableHoverRow);
    }

.data-table-minlines { border-collapse: collapse; border-spacing: 0; }
    .data-table-minlines > tbody > tr > td { padding: 2px 4px 2px 4px; }
    .data-table-minlines.three > tbody > tr > td { padding: 3px; }
    .data-table-minlines > tbody { border: 0px; }
    .data-table-minlines > tbody > tr { border-bottom: 0px; }
        .data-table-minlines > tbody > tr > th {
            padding: 1px 2px 1px 2px;
            color: var(--dataTableText);
            background-color: var(--dataTableHeader);
            border-width: 0px;
            font-weight: 600;
            text-align: left;
        }
            .data-table-minlines > tbody > tr > th span {
                border-left: 1px solid var(--dataTableBorder);
                padding: 2px 0px 2px 5px;
                line-height: 14px;
            }
    .data-table-minlines .select-row {
        cursor: pointer;
    }
    .data-table-minlines .select-row:hover {
        background-color: var(--tableHoverRow);
    }
    .data-table-minlines.sortable > tbody > tr > th { cursor: pointer; }
        .data-table-minlines.sortable > tbody > tr > th:hover { background-color: var(--dataTableSortHeader); }
    .data-table-minlines > tbody > tr > td { border-collapse: collapse; border-left: 0px; border-right: 0px; }
    .data-table-minlines.alt > tbody > tr:nth-child(odd) { background: var(--dataTableAltRow); }
    .data-table-minlines > tbody > tr > td:last-child { border-right: 0px; }
    .data-table-minlines > tbody > tr > th:last-child { border-right: 0px; }

th.nosort { cursor: default !important; }
th.nosort:hover { background-color: var(--dataTableHeader) !important; }

.headerSortDown:after,
.headerSortUp:after { content: '  '; position: relative; left: 5px; border: 8px solid transparent; margin-left: auto; margin-right: 2px; float: right; }
.headerSortDown:after { top: 7px; border-top-color: var(--dataTableSortHeaderArrow); }
.headerSortUp:after { bottom: 3px; border-bottom-color: var(--dataTableSortHeaderArrow); }
.headerSortDown,
.headerSortUp { padding-right: 12px; }


.toolbar-container {
    color: var(--toolbarText);
    background-color: var(--toolbarBg);
    border: 1px solid var(--toolbarBorder);
}


.toolbar-panel {
    background-color: var(--toolbarBgHoverBlue);
    border: 1px solid var(--toolbarPanelBorder);
}
    .toolbar-panel.header {
        color: var(--collapseMainText);
        background-color: var(--collapseMainBg);
        padding: 4px 4px 4px 4px;
        font-weight: 600;
    }

.toolbar-header {
    color: var(--toolbarBg);
    background-color: var(--toolbarText);
    border: 0px solid var(--toolbarBorder);
    padding: 4px 4px 4px 6px;
    font-size: .9rem;
    font-weight: 600;
}

.toolbar {
  color: var(--toolbarText);
  background-color: var(--toolbarBg);
  border: 2px solid var(--toolbarBorder);
  padding: 4px 4px 4px 6px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
  .toolbar.top { border-top-left-radius: 7px; }
  .toolbar.curved { border-radius: 7px; }
  .toolbar.square { border-radius: 0px; }
  .toolbar.underline { border-radius: 0px; border-top: 0px; border-left: 0px; border-right: 0px; }
  .toolbar.faded { background-color: var(--toolbarBgFaded); }
  .toolbar.transparent { background-color: transparent; }

.toolbar-button {
  background-color: var(--toolbarBg);
  color: var(--toolbarText);
  border: 1px solid var(--toolbarBorder);
  padding: 4px 4px 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  vertical-align: middle;
  display: flex;
}
.toolbar-button.noflex {
    display: inline-block;
}
  .toolbar-button.transparent {
    background-color: transparent;
    border: 1px solid var(--toolbarBorder);
    padding: 4px 4px 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    vertical-align: middle;
    display: inline-block;
  }

  .toolbar-button.disabled {
    color: var(--toolbarDisabledText);
    background-color: var(--toolbarBgFaded);
    border: 1px solid var(--toolbarBgFaded);
    cursor: default;
  }
  .toolbar-button.noborder {
    border: 0;
  }
  .toolbar-button.noborder:hover {
    border: 0;
  }
  .toolbar-button img { height: 17px; vertical-align: middle; }
  .toolbar-button span { padding-left: 7px; padding-right: 7px; }
  .toolbar-button:hover {
    background-color: var(--toolbarBgHover);
    border: 1px solid var(--toolbarBorderHover);
  }
  .toolbar-button.blue:hover {
    background-color: var(--toolbarBgHoverBlue);
    color: var(--toolbarTextHoverBlue);
    border: 1px solid var(--toolbarBorderHover);
  }
    .toolbar-button.blue.selected {
        background-color: var(--toolbarBgHoverBlue);
        color: var(--toolbarTextHoverBlue);
        border: 1px solid var(--toolbarBorderHover);
    }

a.toolbar-button { color: var(--toolbarText); text-decoration: none; }


.site-link-button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-link-button a {
  border: 1px solid var(--siteLinkBorder);
  border-radius: 7px;
  padding: 3px 6px 3px 6px;
  margin: 3px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  color: var(--siteLinkText);
  text-decoration: none;
}
  .site-link-button a:hover {
    background-color: var(--siteLinkBgHover);
    color: var(--siteLinkTextHover);
  }
  .site-link-button a img { height: 16px; }
  .site-link-button a span { padding-left: 4px; }


.bread-crumb {
  border-top: 1px solid var(--bannerText);
  font-weight: normal;
  font-size: .8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
  .bread-crumb .button a {
    border: 1px solid var(--bannerHoverBg);
    padding: 3px 6px 3px 6px;
    margin: 3px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    color: var(--bannerText);
    text-decoration: none;
  }
    .bread-crumb .button a:hover {
      background-color: var(--bannerHoverBg);
      color: var(--bannerText);
    }

.dialog-panel {
  background-color: var(--dialogPanelBg);
  color: var(--dialogPanelText);
  transition: all 0.5s ease;
  display: none;
}
  .dialog-panel .title-bar {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: var(--dialogPanelTitleBg);
    border-color: var(--dialogPanelBg);
  }
    .dialog-panel .title-bar .dialog-title {
      font-weight: 600;
      width: 100%;
      padding-left: 10px;
    }


.close-btn {
  vertical-align: middle;
  border: none;
  color: inherit;
  background: transparent;
  position: relative;
  width: 32px;
  height: 32px;
  opacity: 1;
  cursor: pointer;
}
  .close-btn:hover { color: var(--toolbarText); }
  .close-btn::before,
  .close-btn::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 25px;
    width: 4px;
    background-color: currentColor;
  }
  .close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
  .close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }


.dialog-chevron {
    display: inline-block;
    border-right: 4px solid var(--dataTableText);
    border-bottom: 4px solid var(--dataTableText);
    margin-left: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
  .dialog-chevron:hover {
    border-right-color: var(--toolbarText);
    border-bottom-color: var(--toolbarText);
  }
#chevron-arrow-left { transform: rotate(135deg); }
#chevron-arrow-right { transform: rotate(-45deg); }

.search-input {
    border: 2px solid var(--userInputBorder);
    background-color: var(--userInputBg);
    transition: all 0.30s ease-in-out;
    display: flex;
    align-items:center;
}
  .search-input:hover {
    border: 2px solid var(--userInputBgHover);
    box-shadow: 0 0 5px var(--userInputBgHover);
  }

  .search-input input {
    padding: 3px;
    border: 0px;
    outline: none;
    background-color: var(--userInputBg);
    color: var(--userInputText);
  }
  .search-input div {
    margin-right: 2px;
    padding: 4px 7px 0px 7px;
    border-radius: 7px;
/*    height: 20px;
    width: 20px;
    border-radius: 20px;
    background: var(--mainContentBg);
    color: white;
    font-weight: bold;*/
    text-align: center;
    cursor: pointer;
  }
    .search-input div:hover {
      background: var(--toolbarBgHover);
    }


.code-table {
  border: 0;
  border-collapse: collapse;
  font-family: Courier New, Courier, monospace;
  font-size: .95rem;
  width: 100%;
}
  .code-table > tbody > tr {
    border-bottom: 1px solid var(--underlineRow);
    /*background: var(--dataTableMainRow);*/
    color: var(--dataTableText);
  }
    .code-table > tbody > tr > td {
      padding: 2px 2px 2px 2px;
    }
    .code-table > tbody > tr:nth-child(odd) {
      background: var(--dataTableAltRow);
    }
  .code-table tbody > tr td:first-child {
    white-space: nowrap;
  }
  .code-table tbody > tr td:nth-child(2) {
    width: 100%;
  }
.code-line-vio > td {
    font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana;
}

.code-line-critical > td {
  background: var(--codeViewerCriticalBg);
}
  .code-line-critical > td:first-child {
    background: var(--codeViewerCriticalBg0);
    font-weight: bold;
  }
  .code-line-critical > td:first-child:hover {
    background: var(--codeViewerCriticalBg0Hover);
    font-weight: bold;
    cursor: pointer;
  }
.code-line-critical.highlight > td {
    background: var(--codeViewerHighlightBg);
}
  .code-line-critical.highlight > td:first-child {
    background: var(--codeViewerHighlightBg0);
    font-weight: bold;
  }


.code-line-other > td {
  background: var(--codeViewerOtherBg);
}
  .code-line-other > td:first-child {
    background: var(--codeViewerOtherBg0);
    font-weight: bold;
    cursor: pointer;
  }
  .code-line-other > td:first-child:hover {
    background: var(--codeViewerOtherBg0Hover);
    font-weight: bold;
    cursor: pointer;
  }


.select-list ul {
    transition: all 0.4s ease;
}
.select-list li {
    white-space: nowrap;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.select-list li:hover {
    background-color: var(--selectListBg);
    border-left: 3px solid var(--selectListBorder);
   }
.select-list .item-selected {
    background-color: var(--selectListBg);
    border-left: 3px solid var(--selectListBorder);
}
li.select-list { white-space: nowrap; border-left: 3px solid transparent; cursor: pointer; }
li.select-list:hover { background-color: var(--selectListBg); border-left: 3px solid var(--selectListBorder); }

.select-item { border-left: 3px solid transparent; }
.select-item:hover { background-color: var(--selectListBg); border-left: 3px solid var(--selectListBorder); cursor:pointer; }
.select-item.highlight { background-color: var(--selectListBg); border-left: 3px solid var(--selectListBorder); }

.tree-parent { }
.tree-parent:hover { background-color: var(--selectListBg); cursor:pointer; }
.tree-parent.highlight { background-color: var(--selectListBg); }


input[type="file"]::before {
  content: "Drag and Drop Files or Browse...  - ";
  font-weight: 600;
  color: var(--fileUploadText);
}
input[type="file"].orderfile::before {
  content: "Load File... ";
  font-weight: 600;
}
input[type="file"].action-button::before {
    content: "Load File... ";
    color: var(--primaryButtonText);
}
input[type="file"]::file-selector-button {
  display:none;
  background-color: var(--fileUploadBg);
  border: 1px solid var(--fileUploadBorder);
  padding: 4px 12px 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--fileUploadText);
}
  input[type="file"]::file-selector-button:hover {
    background-color: var(--fileUploadBgHover);
    color: var(--fileUploadText);
    border: 1px solid var(--fileUploadBorder);
  }
input[type="file"]::-ms-browse:hover {
  background-color: var(--fileUploadBgHover);
  color: var(--fileUploadText);
  border: 1px solid var(--fileUploadBorder);
}
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--fileUploadBgHover);
  color: var(--fileUploadText);
  border: 1px solid var(--fileUploadBorder);
}
.file-upload {
  background-color: var(--fileUploadBg);
  padding: 12px 8px 12px 8px;
  white-space: nowrap;
  border: 1px dashed var(--fileUploadBorder);
  color: var(--fileUploadText);
  cursor: pointer;
}
.file-upload.orderfile {
  border: 1px solid var(--fileUploadBorder);
  padding: 4px 6px 4px 6px;
  border-radius: 4px;
}
  .file-upload:hover {
    background-color: var(--fileUploadBgHover);
    color: var(--fileUploadText);
    border: 1px solid var(--fileUploadBorder);
    cursor: pointer;
  }

    .file-upload.action-button {
        color: var(--primaryButtonText);
        background-color: var(--primaryButtonBg);
        border: 2px solid var(--primaryButtonBg);
        padding: 3px 22px 3px 22px;
    }
        .file-upload.action-button:hover {
            cursor: pointer;
            color: var(--primaryButtonText);
            background-color: var(--primaryButtonBgHover);
            border: 2px solid var(--primaryButtonBgHover);
            transition: all 0.25s ease-in-out;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
        }

        .file-upload.action-button.curved {
            border-radius: 7px
        }




input::file-selector-button {
  font-weight: bold;
  color: var(--fileUploadText);
  padding: 0.5em;
  border: thin solid var(--fileUploadBorder);
  border-radius: 3px;
}

.multi-item-div {
  background-color: var(--toolbarBgFaded);
  border: 1px solid var(--toolbarBorder);
  border-radius: 4px;
  white-space: nowrap;
}
.multi-item-div span {
  padding: 4px 4px 4px 4px;
  white-space: nowrap;
}


.common-row.highlight {
    background: var(--codeViewerHighlightBg);
}

.test-class{

    text-decoration:line-through;
    white-space:normal;
    font-family:initial;
}


/*
input[type="file"].file-upload-orderfile::file-selector-button {
  background-color: var(--mainContentBg);
  border: 1px solid var(--mainContentText);
  padding: 4px 12px 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--mainContentText);
}
  input[type="file"].file-upload-orderfile::file-selector-button:hover {
    background-color: var(--toolbarBgHoverBlue);
    color: var(--mainContentText);
    border: 1px solid var(--mainContentText);
  }
input[type="file"].file-upload-orderfile::-ms-browse:hover {
  background-color: var(--toolbarBgHoverBlue);
  color: var(--mainContentText);
  border: 1px solid var(--mainContentText);
}
input[type="file"].file-upload-orderfile::-webkit-file-upload-button:hover {
  background-color: var(--toolbarBgHoverBlue);
  color: var(--mainContentText);
  border: 1px solid var(--mainContentText);
}
.file-upload-orderfile {
  background-color: var(--mainContentBg);
  padding: 12px 8px 12px 8px;
  white-space: nowrap;
  border: 1px dashed var(--mainContentText);
}
  .file-upload:hover {
    background-color: var(--toolbarBgHoverBlue);
    color: var(--mainContentText);
    border: 1px solid var(--mainContentText);
    cursor: pointer;
  }
*/


/*
.page-link-button { color: #666666; background-color: #f8f8f8; border: 1px solid #cdd7d9; padding: 3px 6px 3px 6px; border-radius: 7px; display: block; }
.page-link-button a { text-decoration: none; display: block; }
.page-link-button:hover { cursor: pointer; color: #333333; background-color: #cdd5f1; border: 1px solid #5F7AD9; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }
.page-link-button .inner { display: flex; }
.page-link-button .inner img { width: 50px; padding-right: 10px; }
.page-link-button .inner .inner-text { width: 100%; }
.page-link-button .inner .title { font-weight: 600; font-size: 1.2rem; border-bottom: 1px solid #cdd7d9; }

.page-link { padding: 3px 0 3px 0; }
.page-link .container { display:flex; }
.page-link .link-text { margin-right: auto; padding-left: 10px; }

.icon-plus {
    --b: 3px; 
    width: 16px; 
    aspect-ratio: 1;
    border: 3px solid #80ad80;
    background: conic-gradient(from 90deg at var(--b) var(--b),#80ad80 90deg,#fff 0) calc(100% + var(--b)/2) calc(100% + var(--b)/2)/ calc(50% + var(--b)) calc(50% + var(--b));
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
}

    .icon-plus:hover {
        border-color: #808080;
        background: conic-gradient(from 90deg at var(--b) var(--b),#808080 90deg,#fff 0) calc(100% + var(--b)/2) calc(100% + var(--b)/2)/ calc(50% + var(--b)) calc(50% + var(--b));
    }


*/



.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

input.visually-hidden:is(:focus, :focus-within) + label {
    outline: thin dotted;
}