/******************************************************************************
 *
 * CodeMeter License Central WebDepot
 * design.css
 *
 * color definitions are located in scheme.css.
 * include scheme.css prior to this file
 *
 * (c) 2012 - 2024: WIBU-SYSTEMS AG
 * info@wibu.com
 *
 *************************************************************************** */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-Italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/IBMPlexSans-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

/******************************************************************************
 * General Styles
 *************************************************************************** */
html {
    font: normal 14px/140% IBM Plex Sans;
    color: var(--text-color);
}

/* Default setting for body */
body {
}

input, select, textarea {
     border-radius: var(--border-radius);
}

/* Each element takes care about the margin before itself */
p, div, hr, table, ol, ul, label, form {
    margin-top: var(--main-padding);
}

p:first-child, div:first-child, table:first-child, ol:first-child, ul:first-child, label:first-child, form:first-child {
    margin-top: 0;
}

hr {
    border: 1px solid var(--primary-color-050);
}

ul, ol {
    margin-left: var(--main-padding);
}

h3 {
    color: var(--text-color);
    font-size: 130%;
    font-weight: normal;
    line-height: 130%;
    padding: 13px 0 3px 0;
    margin-top: calc(var(--main-padding) * 2);
    border-top: var(--grey-300) solid 1px;
}

h3:first-child {
    margin-top: 0;
    border-top: none;
}

a {
    color: var(--primary-color-050);
    text-decoration: none;
    white-space: nowrap;
}

a:hover {
    color: var(--primary-color-050);
    text-decoration: underline;
}


/******************************************************************************
 * Page layout
 *************************************************************************** */
div.header {
    height: var(--header-height);
    margin: 0;
    background-color: var(--header-background-color);
    color: var(--header-text-color);
}

div.maincontent {
    min-height: calc(100vh - var(--footer-height) - var(--header-height) - 2 * var(--main-padding));
    background: var(--background-color);
    margin: 0;
    padding: var(--main-padding) 0;
}

.footer {
    font-size: 80%;
    margin: 0;
    height: var(--footer-height);
    padding: 0;
    line-height: var(--footer-height);
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
}

div.column {
    margin: auto 40px;
    position: relative;
    min-width: 1500px;
}

/******************************************************************************
 * Header / footer
 *************************************************************************** */

img.logo {
    position: absolute;
    left: 0;
    top: 10px;
    content: var(--logo-src);
    max-width: var(--logo-max-width);
}

div.portalname {
    left: 80px;
    top: 7px;
    line-height: 130%;
    font-size: 130%;
    margin: 0;
    padding: 5px 0 5px 0;
    position: absolute;
}

/* List of navigation elements*/
ul.main_navigation {
    position: absolute;
    font-size: 130%;
    left: 300px;
    margin: 0;
    top: 0;
    border: none;
    line-height: calc(var(--header-height) - 18px);
    height: calc(var(--header-height) - 8px);
}

li.main_navigation_active {
    border-bottom: var(--navigation-bottom-border-color-selected) 8px solid;
}

/* Single navigation element */
ul.main_navigation li {
    display: inline;
    float: left;
    list-style: none;
    text-align: center;
    padding: 10px 16px 0 16px;
}

ul.main_navigation li:hover {
    border-bottom: var(--navigation-bottom-border-color-hover) 8px solid;
}

ul.main_navigation li:has(a:focus-visible) {
    outline: none;
    border-bottom: var(--navigation-bottom-border-color-hover) 8px solid;
}

ul.main_navigation li a:focus-visible {
    outline: none;
}

ul.main_navigation li.no-link {
    border-bottom: none;
}

ul.main_navigation li a {
    color: var(--header-text-color);
    display: block;
    text-decoration: none;
}

ul.main_navigation li:hover a {
    color: var(--navigation-text-color-hover);
}

div.main-search {
    position: relative;
    padding:0;
    margin-right: var(--main-padding);
    top: 0;
    width: 250px;
    border: none;
    display: inline-block;
}

div.main-search input[type="text"] {
    height: 23px;
    width: 245px;
    padding-left: 5px;
}

div.main-search input[type="text"]::placeholder {
    color: var(--grey-100);
}

div.main-search input[type="text"]:focus::placeholder {
    color: transparent;
}

div.main-search input[type="button"] {
    position: absolute;
    top: -4px;
    right: 0;
}

div.content-search {
    width: 35%;
    margin:auto;
}

div.content-search input[type="text"] {
    font-size: 16px;
    width: calc(90% - var(--main-padding));
    height: 32px;
    margin: 0;
    padding: 0 calc(var(--main-padding) / 2 - 2px);
    vertical-align: top;
}

div.content-search input[type="button"] {
    position: relative;
    margin-top: 3px;
    right: 6%;
}

div.main-icons {
    position: absolute;
    font-size: 130%;
    right: 0;
    margin-top: var(--main-padding);
    padding:0;
    top: 0;
    border: none;
}

div.menu {
    position: absolute;
    z-index: 99;
    border: 1px solid var(--main-button-border-color);
    border-radius: var(--border-radius);
    top: 40px;
}

div.menu-item {
    margin: 0;
    text-wrap: avoid;
    background-color: var(--menu-background-color);
}

div.menu-item a {
    display: block;
    padding: calc(var(--main-padding) / 4) calc(var(--main-padding) / 2);
    color: var(--menu-text-color);
    width: calc(100% - var(--main-padding));
    min-width: 100px;
}

div.menu-item:hover a {
    text-decoration: none;
    color: var(--menu-text-color-hover);
    background-color: var(--menu-background-color-hover);
}

div.tree-nav-grid {
    display: grid;
    grid-template-columns: 200px auto;
}

ul.tree-nav-top {
    list-style: none;
    margin-left: var(--small-padding) !important;
}

ul.tree-nav {
    list-style: none;
    display: none;
}

ul.tree-nav li {
    padding-left: var(--small-padding);
}

div.tree-nav-left {
    padding-top: var(--small-padding);
    background-color: var(--white);
    overflow-x: clip;
    white-space: nowrap;
}

li input.tree-leaf {
    width: 26px;
    cursor: initial;
    background-color: transparent;
    border: none;
}

li input.tree-leaf:hover:enabled, li input.tree-leaf:focus {
    background-color: transparent;
}

/******************************************************************************
 * Boxes
 *************************************************************************** */

div.contentbox {
    padding: 0 20px 20px 20px;
    background: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid var(--white);
    margin-right: auto;
    margin-left: auto;
}

div.contentbox_head {
    padding: 20px 20px 20px 20px;
    background: var(--white);
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
}

div.contentbox_body {
    margin-top: 0;
    padding: 20px 20px 20px 20px;
    background: var(--white);;
    border: 1px solid var(--border-color);
    border-top: none;
}

div.contentbox_toggle {
    line-height: 130%;
    margin: 0;
    right: 20px;
    top: 15px;
    padding: 5px 0 5px 0;
    position: absolute;
}

div.contentbox_grid {
    padding: 0 20px 20px 20px;
    background: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid var(--white);
    margin-right: 0;
    margin-left: var(--main-padding);
    margin-top: 0px;
    width: auto;
}

div.filter input[type="text"]{
    width: 15%;
}

/* Used for messages on main page, combined with error/warning/success/notice/info */
div.messagebox {
    padding: 20px 20px 20px 20px;
    font-size: 100%;
     border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
}

/* Used for error message, red with picture */
div.error {
    background: var(--error-background-color);
    border: 1px solid var(--error-text-color);
}

/* Used for warning message, yellow with picture */
div.warning {
    background: var(--warning-background-color);
    border: 1px solid var(--warning-text-color);
}

/* Used for success message, turquoise with picture */
div.success {
    background: var(--success-background-color);
    border: 1px solid var(--success-text-color);
}

/* Like success message, but without picture */
/* Used if activation was successfull, but receipt failed */
div.notice {
    background: var(--notice-background-color);
    border: 1px solid var(--notice-text-color);
}

/* Used for information message */
div.info {
    background: var(--info-background-color);
    border: 1px solid var(--info-text-color);
}

div.gridbox {
    display: flex;
    flex-direction: row;
}

div.gridboxentry {
    margin-right: 20px;
}


/******************************************************************************
 * Buttons - settings for single buttons
 *************************************************************************** */

div.button-line{
    display: flex;
    justify-content: flex-end;
}

div.accept-line {
    display: flex;
    justify-content: flex-start;
    line-height: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
}

div.accept-text {
    display: inline;
    margin-left: 7px;
    margin-top: 0;
}

div.filter input[type="button"].cancel {
    margin: 0 0 0 calc(var(--main-padding)/2);
    position: relative;
    right: 2.8%;
    mask-size: 12px;
    -webkit-mask-size: 12px;
    padding-bottom: 1px;
}

div.filter input[type="button"].search {
    margin: 0 0 0 calc(var(--main-padding)/2);
    position: relative;
    right: 2.8%;
    mask-size: 15px;
    -webkit-mask-size: 15px;
    padding-bottom: 1px;
}

select.filter-select {
    height: 100%;
    margin-right: 2px;
    padding-left: 5px;
}

/******************************************************************************
 * Input
 *************************************************************************** */

input.touched:required:invalid, .invalid-input {
    border-color: red;
    border-radius: var(--border-radius);
    border-width: 1px;
    border-style: solid;
}

input:focus:invalid {
    border-color: unset;
}

.checkbox-message {
    margin-left: 7px;
}
/******************************************************************************
 * Review needed
 *************************************************************************** */

/*
td.split, th.split, td.button, th.button {
    text-align: right;
    white-space: nowrap;
    width: 1px;
}

td.left-button {
    padding-right: 0;
}

td.right-button input{
    margin-left: 5px;
}
*/

div.cmcontainer {
    display: inline;
    padding-left: 20px;
}

div.unknown {
    background: url(unknown.png) no-repeat left center;
}

div.found {
    background: url(found.png) no-repeat left center;
}


/* container and binding table */
.entrytable {
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

.entry {
    background: var(--primary-color-300);
    border: 1px solid var(--primary-color-200);
    color: var(--text-color);
}

.entry:hover {
    background: var(--primary-color-100);
    border: 1px solid var(--primary-color-100);
    color: var(--white);
}

.entry a {
    color: var(--text-color);
    display: block;
    text-decoration: none;
    white-space: break-spaces;
}

.entry a:hover {
    color: var(--white);
}

.entryspace {
    height: 20px;
    width: 20px;
}

.entry div.ventry {
    text-align: center;
    margin-top: 0;
    overflow: auto;
}

.entry div.binding {
    height: 330px;
}

.entry div.restoretype {
    height: 90px;
}

.entry div.entryborder {
    border: 1px solid var(--primary-color-100);
    margin-top: 0;
}

.entry div.ventry img {
    margin: 20px 20px 0 20px;
}

.entry div.ventry div {
    margin: 20px;
    text-align: center;
}

.entry div.hentry {
    display: table;
    margin: 0;
}

.entry div.hentry div {
    display: table-cell;
    padding: 20px;
    vertical-align: top;
    width: auto;
}

.entry div.hentry div.picturesmall {
    padding-right: 0;
    width: 60px;
}

.entry div.hentry div.cmserial {
    padding-right: 0;
    width: 130px;
    text-align: left;
}

/* section for bottom links */
/* remove later */
div.bottomsection {
    border-top: 1px solid #CCCCCC;
    padding-top: 15px;
}

/* bottom links in detail */
div.linkchoosebinding, div.linkchoosecmcontainer, div.linkchoosetransaction, div.linkoverview {
    background-image: url(back.png);
    background-position: 0 center;
    background-repeat: no-repeat;
    display: block;
    margin-top: 5px;
}

div.linkchoosebinding:hover, div.linkchoosecmcontainer:hover, div.linkchoosetransaction:hover, div.linkoverview:hover {
    background-image: url(backHover.png);
    background-position: 0 center;
    background-repeat: no-repeat;
}

div.linkchoosebinding a, div.linkchoosecmcontainer a, div.linkchoosetransaction a, div.linkoverview a {
    display: block;
    padding-left: 20px;
}

/* Other licenses section */
div.otherlicenses {
    display: none;
    padding-left: 20px;
    margin-bottom: 20px;
}

div.plus {
    background: url(plus.png) no-repeat 0 center;
    display: block;
    margin-top: 5px;
}

div.plus a {
    display: block;
    padding-left: 20px;
}

div.plus:hover {
    background: url(plusHover.png) no-repeat 0 center;
}

div.minus {
    background: url(minus.png) no-repeat 0 center;
    display: block;
    margin-top: 5px;
}

div.minus a {
    display: block;
    padding-left: 20px;
}

div.minus:hover {
    background: url(minusHover.png) no-repeat 0 center;
}

input, select {
    border: 1px solid var(--border-color);
}
/* Style for checkbox in license table */
input.checkbox {
    margin-bottom: 2px;
    vertical-align: bottom;
}

/* Style for input fields*/
input.groupname, input.groupdescription, input.ticket, input.pickofflinefile, input.stretched, input.credentials,
select.choosecontainer, select.product, select.seats, select.form {
    height: 32px;
    margin: 0;
    padding: 0 calc(var(--main-padding) / 2 - 2px);
    vertical-align: top;
}

select.choosecontainer, select.product, select.seats, select.form {
    height: 34px;
}

select.selectsmall {
    height: 28px;
    margin: 0;
    padding: 0 calc(var(--main-padding) / 2 - 2px);
    vertical-align: top;
}

input.pickofflinefile {
    width: calc(100% - var(--main-padding));
}

input.nameduser {
    line-height: 18px;
    margin: 0;
    padding: 1px 10px;
    text-align: left;
    width: 200px;
    height: 20px;
}

input.splitamount {
    line-height: 20px;
    margin: 0;
    padding: 3px;
    text-align: center;
    width: 30px;
    height: 20px;
}

input.splitamount:disabled {
    background: #DDDDDD;
    color: #999999;
}

input.error {
    background: var(--error-background-color);
    border: 1px solid var(--error-text-color);
}

div.splitdetails {
    color: #666666;
    font-style: italic;
    font-size: 90%;
    margin: 0;
}

input.ticket {
    width: 638px;
}

input.stretched {
    width: calc(100% - var(--main-padding));
}

div.inputcaption {
    font-weight: bold;
}

div.inputcontent {
    margin-top: 3px;
}

/* do we need this?
div.errortext {
    color: #333333;
    margin-top: 0;
    padding-top: 20px;
}

div.errorcode {
    color: #666666;
}
*/



/* action section */
div.actionframe {
    position: relative;
    min-height: 22px;
}

div.toggleonlineoffline {
    overflow: visible;
    right: 0;
    text-align: right;
    bottom: 0;
}

/* Styles for detailed description of usage of CodeMeter Control Center */
div.plusinline {
    background: url(plus.png) no-repeat right center;
    display: inline;
}

div.plusinline a {
    display: inline;
    padding-right: 20px;
}

div.plusinline:hover {
    background: url(plusHover.png) no-repeat right center;
}

div.minusinline {
    background: url(minus.png) no-repeat right center;
    display: inline;
}

div.minusinline a {
    display: inline;
    padding-right: 20px;
}

div.minusinline:hover {
    background: url(minusHover.png) no-repeat right center;
}

ol.cccdetails {
    display: none;
    list-style-type: lower-alpha;
    margin-top: 0;
}

.progressbar {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 30px;
    padding: 0;
    position: relative;
}

.progressbarslider {
    background: var(--primary-color-100);
    margin-top: 0;
    position: absolute;
}

/* General style progress view */
div.progress {
    display: table;
    position: relative;
    width: 100%;
}

div.pleft {
    border-top: 20px solid #CCCCCC;
    border-bottom: 20px solid #CCCCCC;
    border-left: 20px solid transparent;
    display: table-cell;
    height: 0;
    width: 0;
}

div.pmiddle {
    background: #CCCCCC;
    display: table-cell;
    height: 40px;
    text-align: center;
    vertical-align: middle;
}

div.pright {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #CCCCCC;
    display: table-cell;
    height: 0;
    width: 0;
}

div.pleft_active {
    border-top-color: var(--primary-color-100);
    border-bottom-color: var(--primary-color-100);
}

div.pmiddle_active {
    background: var(--primary-color-100);
    color: #FFFFFF;
}

div.pright_active {
    border-left-color: var(--primary-color-100);
}


/******************************************************************************
 * Overlay
 *************************************************************************** */

/* Background overlay */
div.overlaybackground, div.overlay-background {
    background: #000000;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0.75;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 199;
}

/* Overlay during progress */
div.overlay {
    background: #E8ECEB;
    left: 50%;
    margin-left: -300px;
    position: fixed;
    top: 10%;
    margin-bottom: 100px;
    width: 600px;
    z-index: 200;
    overflow-y: auto;
    max-height: 80%;
}

h3.overlay-head {
    background: var(--dialog-header-background-color);
    color: var(--dialog-header-text-color);
    padding: 10px 20px 10px 20px;
    margin-bottom: 1px;
}

div.overlay-content {
    background: #FFFFFF;
    margin: 0;
    padding: var(--main-padding);
    position: relative;
}

div.overlay-status {
    /*display: none;*/
}

div.overlay-message:first-child {
    padding-top: 0;
    margin-top: 0;
}

div.overlay-content div.messagebox:first-child {
    /*padding-top: 0;*/
    margin-top: 0;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
}

/*
div.input-line {
    display: flex;
    justify-content: flex-end;
}*/

div.input-frame:first-child {
    margin: 0;
}

div.input-frame {
}

div.input-hint {
    margin-top: 3px;
}

/* tables in forms */
table.form {
    width: 100%;
}

table.form td {
    background-color: var(--white);
    padding: 3px 0;
    line-height: 34px;
}

table.form td input {
    height: 32px;
    margin: 0;
    padding: 0 8px;
    vertical-align: top;
}

table.form td select {
    height: 34px;
    margin: 0;
    padding: 0 8px;
    vertical-align: top;
}

table.form td select {
    width: 600px;
    font: normal 14px/140% IBM Plex Sans;
}

table.form td input {
    width: 582px;
}

table.form td .checkbox {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    margin-right: 10px;
}

table.form th:first-child, table.form td:first-child {
    width: 200px;
}

.single-checkbox-frame {
    margin-top: 0;
}