@charset "UTF-8"; /* usage: sass z-werk-default.scss ../GUI/basics/formate.css */ /*form elements*/ /*table*/ /* SEPAssistant SCSS TODO: sämtliche styles auf Nutzung durchforsten, ggfs. neue SCSS Dateien erzeugen npm install -g sass usage: sass z-werk-default.scss ../GUI/basics/formate.css */ #sa-dre-table-container { overflow: auto; flex: 1 1 auto; width: 100%; max-height: 90vh; } #sa-dre-table-container table { width: 100%; font-size: 80%; position: relative; } #sa-dre-table-container tr:nth-child(odd) { background-color: #fafffa; } #sa-dre-table-container tr:nth-child(even) { background-color: #dff2e2; } #sa-dre-table-container td:not(:last-child), #sa-dre-table-container th:not(:last-child) { border-right: 2px solid rgba(0, 0, 0, 0.1); } #sa-dre-table-container th { background-color: rgb(84, 101, 84); color: rgb(217, 221, 217); position: sticky; top: 0px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5); padding: 0.2em 0.6em; } #sa-dre-table-container td { padding: 0.1em 0.6em; outline: none; } #sa-dre-table-container tr.invalid td { background-color: rgba(255, 56, 56, 0.15); } #sa-dre-table-container tr.invalid td.invalid { background-color: rgba(255, 56, 56, 0.7); } #sa-dre-importresulttable { overflow: auto; max-height: 50vh; } #sa-dre-importresulttable table { width: 100%; position: relative; } #sa-dre-importresulttable table th { background-color: rgb(84, 101, 84); color: rgb(217, 221, 217); position: sticky; top: 0px; box-shadow: 0em 0.2em 0.1em 0em rgba(0, 0, 0, 0.2); padding: 0.2em 0.6em; font-weight: normal; } #sa-dre-importresulttable table td { padding: 0.1em 0.6em; } #sa-dre-importresulttable table tr:nth-child(odd) { background-color: #d3dfe1; } #sa-dre-importresulttable table tr.invalid:nth-child(odd) { background-color: rgba(250, 120, 120, 0.3647058824); } #sa-dre-importresulttable table tr.invalid:nth-child(even) { background-color: rgba(250, 168, 120, 0.4117647059); } .history-table td.link { cursor: pointer; } #datarecords td, .history-table td, .history-main-table td, .data-edit-table td { border-left: 1px solid #A2A3A2; border-right: 1px solid #A2A3A2; padding: 0.2em 0.4em; } #datarecords tr.odd, .history-table tr.odd, .history-main-table tr.odd, .data-edit-table tr.odd { background-color: #c8fac8; } #datarecords tr.even, .history-table tr.even, .history-main-table tr.even, .data-edit-table tr.even { background-color: #dcfadc; } #datarecords thead tr, .history-table thead tr, .history-main-table thead tr, .data-edit-table tr:first-child { background-color: #646564; color: #FAFAFB; } #datarecords thead td, .history-table thead td, .history-main-table thead th, .data-edit-table th { padding: 0.5em; position: relative; /* um icons in den köpfen zu ermöglichen */ } .history-main-table td:not(:last-child) { cursor: pointer; } .history-main-table tr.odd:hover, .history-main-table _ tr.even:hover { background-color: #148828; color: #F6F6F6; } .data-edit-table th.sortable { cursor: pointer; } .data-edit-table th.sortdesc { background-repeat: no-repeat; background-image: url(../images/icon-arrow_up.png); cursor: pointer; vertical-align: bottom; background-position: 95% center; } .data-edit-table th.sortasc { background-repeat: no-repeat; background-image: url(../images/icon-arrow_down.png); cursor: pointer; vertical-align: bottom; background-position: 95% center; } .data-edit-table tr.invalid.odd { background-color: #fa7878; } .data-edit-table tr.odd td.invalid { background-color: #ff7878; } .data-edit-table tr.invalid.even { background-color: #faA878; } .data-edit-table tr.even td.invalid { background-color: #ffA878; } .data-edit-table .add-row { background-color: blue; } html { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body { color: #424a42; background-color: #c7d8c9; padding: 0px; margin: 0px; height: 100vh; overflow: hidden; display: flex; font-size: 16px; outline: none; } @media (min-width: 60em) { body { font-size: 12pt; } } p { line-height: 1.7em; } button, input, textarea, select { font-family: inherit; font-size: inherit; } table { border-collapse: collapse; } input { box-sizing: border-box; } .hidden { display: none !important; visibility: hidden !important; } .sa-sm { font-size: 90%; } .sa-bold { font-weight: 700; } @media (min-width: 60em) { .sa-mobile { display: none; } } @media (max-width: 60em) { .sa-desktop { display: none; } } #sa-logo { flex: 0 0 auto; width: 14em; height: 3.8em; background-image: url(../img/logo.png); background-color: #647564; background-size: 100%; background-position: center; background-repeat: no-repeat; } #sa-small-menu { display: flex; position: absolute; right: 0em; background-color: rgba(100, 101, 100, 0.9); color: #FAFAFB; border-bottom-left-radius: 0.1em; padding: 0.1em; z-index: 20; } @media (min-width: 60em) { #sa-small-menu { display: none; } } #sa-small-menu .item { padding: 0.3em 0.8em; } #sa-small-menu .item:first-child { border-right: 0.1em solid #FAFAFB; } #sa-small-menu .item:last-child { border-left: 0.1em solid #FAFAFB; } #sa-small-menu .item:hover { background-color: rgba(250, 250, 251, 0.8); color: #646564; } #sa-mainbar { display: none; width: 14em; height: 100vh; overflow: hidden; background-color: #646564; box-shadow: 0.2em 0em 1em #565656; margin-right: 1em; flex: 0 0 auto; flex-direction: column; justify-content: space-between; } @media (min-width: 60em) { #sa-mainbar { display: flex; } } #sa-complete-navsection { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; justify-content: stretch; } #sa-mainnavsection { flex: 1 0 auto; } #sa-helpnavsection { border-top: 0.4em solid #b2c1b5; flex: 0 auto; } .sa-mainbarfooter { font-size: 90%; color: #c7d8c9; padding: 0.2em; background-color: #647564; flex: 0 0 auto; } .sa-mainbarfooter div:not(:first-child) { border-top: 1px dashed #c7d8c9; } .sa-navitem { border-bottom: 0.2em solid #b2c1b5; text-decoration: none; padding: 1em; display: block; text-align: left; color: #EAEAEA; cursor: pointer; flex: 0 0 auto; } .sa-navitem:hover { background-color: #409140; color: #FAFFFF; } .sa-navitem.selected { background-color: #F7F4F7; color: #647564; } #sa-hidden { display: none; } .sa-accordion-content { display: none; width: 100%; background-color: rgba(211, 223, 225, 0.5); opacity: 0.8; padding: 0em; } .sa-accordion-caption { width: 100%; background-color: #d3dfe1; padding: 0.1em 0.5em; cursor: pointer; display: flex; } .sa-accordion-caption div { pointer-events: none; } .sa-accordion-caption::after { font-family: "FontAwesome"; font-weight: 400; content: "\f0d8"; margin-left: 0.5em; display: block; } .sa-accordion-caption.opened::after { content: "\f0d7"; } .sa-form-row { display: flex; flex-direction: row; justify-content: space-between; } .sa-form-row .sa-form-entity:not(:last-child) { margin-right: 1em; } .sa-form-row .sa-form-entity { flex: 1 1 auto; } .sa-form-entity { display: flex; flex-direction: column; margin-bottom: 0.7em; } label, .sa-form-label { flex: 0 0 auto; font-style: italic; padding-left: 0.2em; font-size: 95%; } .sa-form-value { display: flex; } .sa-ia-container { display: none; padding: 0em; color: #424a42; background-color: #d3dfe1; overflow-y: auto; outline: none; } .sa-ia-container.absolute { position: absolute; z-index: 5; height: auto; box-shadow: rgba(0, 0, 0, 0.4) 2px 4px 6px 2px; border-radius: 0.1em; } .sa-ia-flex { display: flex; justify-content: stretch; flex-direction: column; height: 100%; } .sa-ia-contenthelp { font-size: 80%; font-style: italic; border-bottom: 1px solid #424a42; padding: 0.2em 0.5em; background-color: rgba(86, 86, 86, 0.2); } .sa-ia-contenthelp-error { color: rgb(255, 56, 56); } .sa-ia-title { color: #c7d8c9; background-color: #424a42; padding: 0.2em 0.5em; display: none; } .sa-ia-browse-ctr { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; max-height: 30vh; background-color: rgba(86, 86, 86, 0.06); } .sa-ia-browseresult { cursor: pointer; font-size: 90%; margin-top: 0.5em; padding: 0.2em; } .sa-ia-browseresult:not(:first-child) { border-top: 1px solid #c7d8c9; } .sa-ia-browseresult:hover { color: #d3dfe1; background-color: #424a42; } #sa-content-fullview, #sa-content-container { padding-right: 1em; height: 100%; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; } #sa-content-fullview { display: none; } @keyframes contentPaneDisplay { 0% { left: 100vw; } 70% { left: -5em; } 100% { left: 0em; } } .sa-content-pane { display: none; height: 100%; flex-direction: column; position: relative; } .sa-content-pane h1 { padding-left: 0.5em; padding-bottom: 0.5em; margin: 0em; font-size: 110%; margin-bottom: 0.5em; font-weight: 600; color: #424a42; } .sa-content-pane h1:before { font: bold normal normal 1em FontAwesome; content: "\f105"; margin-right: 0.2em; color: #148828; } .sa-cp-section { position: relative; margin-left: 0.5em; display: flex; flex-direction: column; flex: 0 0 auto; justify-content: stretch; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 0.2em solid #FFFFFF; } @media (min-width: 60em) { .sa-cp-section { padding-left: 1em; } } .sa-cp-section-row { display: flex; flex-direction: row; margin-bottom: 1em; align-items: start; } .sa-cp-section-left { width: 30em; min-width: 15em; flex: 1 1 auto; } @media (min-width: 60em) { .sa-cp-section-left { flex: 0 0 auto; } } .sa-cp-section-right { display: none; margin-left: 3em; } @media (min-width: 60em) { .sa-cp-section-right { display: block; flex: 1 1 auto; } } .sa-exitfullscreen-button { position: absolute; right: 1em; top: 1em; padding: 0.7em; box-shadow: 2px 2px 3px 0px rgba(86, 86, 86, 0.5); z-index: 10; } .sa-cp-section-fullscreen-button { position: absolute; right: 0em; top: -3em; padding: 0.7em; box-shadow: 2px 2px 3px 0px rgba(86, 86, 86, 0.5); } @media (max-width: 60em) { .sa-cp-section-fullscreen-button { display: none; } } .sa-exitfullscreen-button::after, .sa-cp-section-fullscreen-button::after { font-family: "FontAwesome"; font-size: 100%; } .sa-cp-section-fullscreen-button::after { content: "\f065"; } .sa-exitfullscreen-button::after { content: "\f066"; } #sa-fullscreen { position: absolute; padding: 1%; height: 100%; width: 98%; background-color: #c7d8c9; display: none; overflow: auto; } .sa-cp-help { color: #4e4e4e; font-family: serif; font-size: 105%; } .sa-important { font-weight: 900; } .sa-tab-group { display: flex; flex-direction: row; } .sa-tab-group .sa-tab { color: #EAEAEA; background-color: #646564; padding: 0.4em 1em; margin: 0px 1px; border-top-right-radius: 0.6em; border-top-left-radius: 0.2em; cursor: pointer; } .sa-tab-group .sa-tab:hover { background-color: #148828; } .sa-tab-group .sa-tab.selected { color: #148828; background-color: #EAEAEA; } #sa-pl-newproject { width: 100%; display: flex; } #sa-pl-newprojectname { flex: 1 1 auto; } #sa-pl-newprojectbtn { flex: 0 0 auto; margin-left: 1em; } .sa-pl-recentitem, .sa-fse-history-item { display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 1em; cursor: pointer; } .sa-fse-history-item-delete:hover, .sa-fse-history-item-load:hover, .sa-pl-recentdelete:hover, .sa-pl-recentload:hover, .sa-pl-recentdownload:hover { color: rgb(240, 240, 240); background-color: #148828; } .sa-fse-history-item-load, .sa-fse-history-item-delete, .sa-pl-recentload, .sa-pl-recentdelete, .sa-pl-recentdownload { padding: 0.5em 1em; color: #148828; flex: 0 1 auto; } .sa-fse-history-item-load, .sa-pl-recentload { flex: 1 1 auto; } .sa-fse-history-item-name, .sa-pl-recentitem-name { font-weight: 600; } .sa-fse-history-item-infos, .sa-pl-recentitem-infos { font-style: italic; } .sa-fse-history-item-delete, .sa-pl-recentdelete { border-left: 1px dashed rgb(240, 240, 240); } .sa-dre-read-option-view { background-color: #EAEAEA; padding: 0.5em 0.5em; border: 0.1em solid #626362; border-radius: 0.2em; margin-bottom: 0.5em; margin-left: 1em; overflow: hidden; } .sa-dre-filter-item { margin-left: 1em; flex: 1 1 auto; position: relative; margin-bottom: 0.4em; } .sa-dre-filter-item label { font-style: normal; font-size: 80%; } .sa-dre-filter-options { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: -1em; } @media (min-width: 60em) { #sa-dre-filter-selector { display: none; } } @media (max-width: 60em) { #sa-dre-filter-options { display: none; } } h2 { font-size: 90%; margin: 0em; margin-top: 0em; margin-bottom: 0.5em; font-weight: 600; color: #606160; } h3 { font-size: 80%; margin: 0em; margin-top: 0em; margin-bottom: 0.3em; } p:not(:last-child) { margin: 0em; margin-bottom: 1em; } table.form-table td { padding: 0.2em; } table.form-table td.applicant-help { padding-left: 2em; } .btnTableHelp { padding: 0px; margin: 0px; position: absolute; display: block; width: 0.8em; top: 0px; right: 0px; } a { text-decoration: none; padding: 0.2em; color: #419040; outline: none; } .sa-license-institution { cursor: pointer; } .sa-license-institution:hover { background-color: #148828; text-decoration: none; } .sa-action-block:hover, .sa-action:hover, .action:hover { color: #FAFAFB; background-color: #148828; text-decoration: none; } .sa-pl-recentitem, .sa-fse-history-item, .sa-action-block, .sa-action { border-radius: 0.1em; border: 1px solid rgba(20, 136, 40, 0.27); background-color: rgb(240, 240, 240); color: #148828; font-weight: 500; padding: 0.2em 0.2em; transition: background-color 1s, color 1s; } .sa-action, .sa-action-block, .action { cursor: pointer; } .sa-license-institution::after, .sa-action::after, .sa-action-block::after, .action::after { font-family: "FontAwesome"; content: "\f192"; font-size: 50%; position: relative; top: -1em; right: -0.1em; } .sa-action:hover, .action:hover, .sa-action-block:hover { background-color: #419040; color: #F6F6F6; } .sa-action-block { display: block; padding: 0.5em 1em; box-sizing: border-box; width: 100%; } a.bold { font-weight: 600; } a.invers:hover { color: #419040; background-color: #F6F6F6; } a.invers { font-weight: 900; background-color: #419040; color: #F6F6F6; padding: 1px 5px; } a.anker { border: 0px; } .keyword { font-weight: 600; color: #424a42; } #ProjectType { width: 100%; } .indentcontent { padding: 1em; } div.invisiblesub { display: none; } .help { margin-left: 2em; color: #505050; font-family: serif; } ._div.ErrorWindow { background-color: gainsboro; left: -5px; top: -5px; padding: 5px 10px; border: 1px solid #b4b4b4; font-family: serif, "Times New Roman"; font-size: 100%; } td.absolute { position: relative; } .input-icon-ctr { position: relative; } div.inputok { position: absolute; right: 0px; top: 0px; width: 0px; height: 0px; } div.inputwarning { background-image: url(../img/icon-warning.png); position: absolute; right: 0px; top: 0px; width: 10px; height: 14px; } div.inputwarning:hover { background-image: url(../img/icon-warning-hover.png); } div.inputerror { background-image: url(../img/icon-error.png); position: absolute; right: 0px; top: 0px; width: 10px; height: 14px; } div.tderror { background-image: url(../img/icon-error.png); position: absolute; right: 5px; top: 0px; width: 10px; height: 14px; margin-right: -6px; margin-top: -2px; } div.tderror:hover { background-image: url(../img/icon-error-hover.png); } .sa-fse-sepafileprint { font-size: 90%; } .sa-fse-sepafileprint h1 { font-size: 100%; font-weight: 700; } .sa-fse-sepafileprint p { margin: 0px; padding: 0px; } .sa-fse-sepafileprint table { width: 100%; } .sa-fse-sepafileprint th { border: 1px solid #424a42; padding: 0em 0.2em; } .sa-fse-sepafileprint td { border: 1px solid #424a42; padding: 0em 0.2em; } .sa-fse-sepafileprint section { background-color: rgba(255, 255, 255, 0.2); padding: 0.2em; margin-bottom: 0.5em; } .sa-fse-sepafileprint section h1 { font-size: 90%; } .sa-fse-sepafileprint section div { margin-bottom: 0.5em; } .sa-fse-sepafileprint section div h1 { margin-top: 0.5em; margin-bottom: 0em; font-size: 80%; } #sa-dialog { background-color: rgb(211, 211, 211); color: rgb(35, 70, 35); padding: 0em; border-radius: 0.1em; box-shadow: 0.3em 0.3em 2em 0.1em #565656; opacity: 1; justify-content: space-between; overflow: hidden; flex-direction: column; max-width: 50em; margin: auto; max-height: 100%; } #sa-dialog .form-table { width: 90%; margin-bottom: 1em; } #sa-dialog .form-table input { width: 100%; } #sa-dialog h1 { padding: 0.1em; padding-right: 0.5em; margin: 0em; text-align: right; color: white; background-color: rgb(35, 70, 35); font-size: 110%; } #sa-dialog p { line-height: 1.5em; } #sa-dialog .sa-dialog-caption { margin: 0px; } @media (max-width: 60em) { #sa-dialog { height: 100%; } } .sa-text-warning { font-weight: bold; color: rgb(180, 0, 0); } #sa-dialog-content { overflow: auto; padding: 1em; display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-between; } .info-dlg { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; } .info-dlg-content { padding: 0.5em; display: flex; flex-direction: column; flex: 1 1 auto; } .sa-form-content, .info-dlg-left { overflow: auto; display: flex; flex-direction: column; justify-content: space-between; } .sa-form-actions, .info-dlg-right { flex: 0 0 auto; display: flex; justify-content: flex-end; margin-top: 2em; } .sa-form-error { border: dashed 2px RGB(180, 0, 0); } .sa-form-error-info { background-color: rgba(255, 56, 56, 0.28); display: none; flex: 1 1 auto; padding: 0.5em; margin-right: 1em; border-radius: 0.2em; border: 1px solid rgba(255, 56, 56, 0.28); } form.editor { margin: 0px; } #sa-modal-back { display: none; padding: 0px; border: silver 1px solid; position: fixed; z-index: 30; width: 100%; height: 100vh; top: 0px; left: 0px; margin: 0px; background-color: rgba(120, 120, 120, 0.7); } #sa-messagebox { z-index: 3; } #sa-messagebox-content { padding: 2em; margin: auto; color: white; font-size: 110%; background-color: #148828; overflow-y: auto; } .sa-messagebox-bottom { width: 100%; max-height: 40%; border-top: 0.2em solid rgb(84, 101, 84); position: absolute; bottom: 0em; } .sa-messagebox-right { height: 100%; max-width: 40%; border-top: none; border-left: 0.2em solid rgb(84, 101, 84); right: 0; top: 0; } .sa-messagebox-left { height: 100%; max-width: 40%; border-top: none; border-left: 0.2em solid rgb(84, 101, 84); left: 0; top: 0; } #PrintDialog { z-index: 2; margin: 5%; width: 90%; } #PrintDialogContent { background-color: #efefef; padding: 10px; border: 1px solid silver; box-shadow: 2px 2px 10px 4px rgba(119, 119, 119, 0.75); width: 48px; height: 48px; background-image: url(../img/wait.gif); position: relative; top: -50%; left: -50%; } btnHelp { min-height: 1.2em; min-width: 1em; border: 1px solid rgba(34, 58, 37, 0.3); display: inline; cursor: pointer; padding: 0em 0.2em; color: #c7d8c9; background-color: rgba(34, 58, 37, 0.5); border-radius: 0.1em; margin-left: 0.2em; } btnHelp:hover { background-color: white; color: rgb(34, 58, 37); } btnHelp::after { font: bold normal normal 1em FontAwesome; font-weight: 400; content: "\f128"; margin-left: 0.5em; } .sammelauftrag-container table td.link { cursor: pointer; } .sammelauftrag-container h2 { margin-left: 2em; margin-top: 1em; } .sammelauftrag-container .header { background-color: #fac8c8; color: #323232; padding: 4px; padding-top: 10px; } /* standard controls */ select, input, textarea { padding: 0.5em 0.5em; border: none; border-bottom: 2px solid rgb(100, 100, 100); background-color: rgba(255, 255, 255, 0.85); outline-color: #148828; color: #148828; width: 100%; outline: none; } select.valid, input.valid { border-color: rgb(180, 250, 180); } select.invalid, input.invalid { border-color: rgb(250, 120, 120); } input.enabled, textarea.enabled { background-color: #fafafa; border: 1px solid rgb(100, 100, 100); padding: 1px; } input.disabled, textarea.disabled { background-color: transparent; border: 1px solid transparent; padding: 1px; overflow: hidden; } /* select Design */ select { cursor: pointer; } /* checkbox Design */ input[type=radio], input[type=checkbox] { display: none; } input[type=checkbox] + label { width: 100%; height: 2em; border-radius: 0.2em; border: 2px solid #F6F6F6; background-color: rgb(240, 240, 240); display: inline-block; content: ""; transition: background-color 0.5s linear; overflow: hidden; cursor: pointer; margin: 0em; padding: 0.1em; box-sizing: border-box; flex: 1 1 auto; } input[type=radio] + label { border-radius: 0.2em; border: 2px solid #F6F6F6; background-color: rgb(240, 240, 240); display: block; transition: background-color 0.5s linear; overflow: hidden; cursor: pointer; padding: 0.4em 0.5em; text-align: right; padding-left: 2em; color: #424a42; } input[type=checkbox] + label:hover { border-color: #148828; } input[type=radio] + label:hover { border-color: #148828; } input[type=checkbox] + label::before { width: 40%; height: 100%; border: 2px solid #148828; border-radius: 0.2em; background-color: #b2c1b5; display: block; content: ""; transition: margin 0.5s cubic-bezier(0, 0, 0.15, 0.96); box-shadow: 0px 0px 1em #aaa; box-sizing: border-box; } input[type=radio] + label::before { border: 2px solid #148828; border-radius: 0.2em; background-color: #b2c1b5; display: block; content: ""; transition: margin 0.5s cubic-bezier(0, 0, 0.15, 0.96); box-sizing: border-box; display: inline; padding: 0.1em; font-weight: 400; font-family: "FontAwesome"; content: "\f00c"; font-size: 120%; color: #FAFAFB; position: absolute; left: 0.2em; top: 0.2em; } input[type=radio]:checked + label::before, input[type=checkbox]:checked + label::before { background-color: #2b8718; } input[type=checkbox]:checked + label::before { margin-left: 60%; } /* textarea */ textarea { width: 100%; overflow: auto; } /* one and only button design */ /* in der button group werden alle buttons möglichst gleich groß gemacht */ .sa-table-buttons, .button-group { display: flex; flex: 1 1 auto; } .button-group > button { flex: 1 1 auto; } .button-group > button:not(:first-child) { margin-left: 1em; } button { margin: 0em; padding: 0.8em 1em; text-align: center; border: 0.1em solid #148828; background-color: rgb(240, 240, 240); color: #148828; border-radius: 0.3em; cursor: pointer; outline: none; } button.icon { padding: 0.4em; width: 3em; flex: 0 1 auto; } .sa-table-button { padding: 0.6em 1em; margin: 0.2em 0em; text-align: center; font-size: 120%; border: none; border-radius: unset; background-color: rgba(240, 240, 240, 0); color: #148828; cursor: pointer; outline: none; } .sa-table-button:not(:last-child) { border-right: 0.1em solid #148828; } i { pointer-events: none; } button:hover { border-color: rgb(240, 240, 240); background-color: #148828; color: #F6F6F6; } button:disabled { border: 0.1em solid rgba(50, 50, 50, 0.5); background-color: rgba(120, 120, 120, 0.5); color: rgba(50, 50, 50, 0.5); cursor: not-allowed; } button:disabled:hover { border: 0.1em solid rgba(50, 50, 50, 0.5); background-color: rgba(120, 120, 120, 0.5); color: rgba(50, 50, 50, 0.5); } button.selected { color: rgb(240, 240, 240); background-color: #148828; border: 0.1em solid #148828; } button.viewmode { border-top-right-radius: 1em; border-top-left-radius: 0.1em; width: 10em; padding: 0.4em 0.6em; font-weight: 800; font-size: 90%; } button.pagenr { margin-right: 0.1em; margin-bottom: 0.1em; padding: 0.2em 0.2em; font-size: 90%; font-weight: 800; width: 3em; } .button-actions-group { display: flex; flex-direction: row; justify-content: space-between; } button.actions { border: none; padding: 0.2em 0.2em; margin: 0.2em; flex: 0 0 auto; } /* product-table for available SEPAmacher products */ table.products { font-size: 90%; } table.products td, table.products th { border: 1px solid #148828; padding: 1em; text-align: center; } table.products td:first { text-align: left; } table.products th { background-color: rgb(240, 240, 240); color: #148828; cursor: pointer; white-space: nowrap; } table.products th:hover:not(:first-child) { background-color: #148828; color: #F6F6F6; } table.products td.odd { background-color: #fafffa; } table.products td.even { background-color: #dff2e2; } /* Tooltipstyle Help and Error Message Windows */ #sa-tooltip { position: absolute; z-index: 2; background-color: rgba(211, 211, 102, 0.95); padding: 1.5em 1em; overflow-y: auto; margin-top: 30vh; max-height: 60vh; overflow-y: auto; } @media (min-width: 60em) { #sa-tooltip { border-radius: 0.1em; box-shadow: 0.3em 0.3em 1em 0.1em #565656; margin-top: 0; max-width: 50%; max-height: 80%; } } #INPUTHINTWINDOW { position: absolute; z-index: 2; background-color: #d2e6a6; padding: 0.5em 1em; max-width: 25%; overflow-y: auto; border-radius: 0.2em; box-shadow: 0.2em 0.1em 0.5em #565656; } .info-table-licenseinfo { margin-bottom: 1em; } .info-table-licenseinfo td { padding: 0.2em 0.5em; } .info-table-licenseinfo td:first-child { text-align: right; } @keyframes helpTopics { 0% { left: 10em; } 70% { left: -2em; } 100% { left: 0em; } } #EulaView p, #HelpView p { line-height: 1.5em; font-size: 90%; margin-bottom: 0.5em; margin-top: 0em; } #EulaView p ~ ul, #HelpView p ~ ul { margin-top: -0.3em; margin-bottom: 0em; } #EulaView li::before, #HelpView li::before { font-family: FontAwesome; content: "\f061"; margin-right: 0.2em; color: #148828; position: relative; left: 0em; animation-name: helpTopics; animation-duration: 2s; } #EulaView li, #HelpView li { line-height: 1.5em; font-size: 90%; list-style: none; margin-bottom: 0.4em; } .sa-keyword-list { display: flex; flex-wrap: wrap; justify-content: space-around; } .sa-keyword-list div { border-radius: 0.2em; border: 2px solid #F6F6F6; background-color: rgb(240, 240, 240); padding: 0.2em; color: #424a42; margin: 0.2em; flex: 1 1 auto; }