/******************************************************************************
 *
 * CodeMeter License Central WebDepot
 * design.css
 *
 * color definitions are located in scheme.css.
 * include scheme.css prior to this file
 *
 * (c) 2012 - 2023: 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 {
    background: var(--header-bgcolor);
}

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

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

h3 {
    color: var(--text-color);
    font-size: 130%;
    font-weight: normal;
    line-height: 130%;
    padding: 13px 0px 3px 0px;
}

a {
    color: var(--primary-color-100);
    text-decoration: none;
}

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

/******************************************************************************
 * Page layout
 *****************************************************************************/
div.header {
    height: var(--heightheader);
    margin: 0px;
    box-shadow: 0 4px 8px rgba(32,32,32,.3);
}

div.maincontent {
    min-height: calc(100vh - var(--heightfooter) - var(--heightheader) - 2 * var(--mainpadding));
    background: var(--canvas-color);
    margin: 0px;
    padding: var(--mainpadding) 0px;
}

.footer {
    font-size: 80%;
    margin: 0px 20px;
    height: var(--heightfooter);
    padding: 0px;
}

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

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

img.logo {
    left: 0px;
    top: 24px;
    width: 332px;
    height: 30px;
}

/* List of navigation elements*/
ul.mainnavigation {
	top:	99px;
	position: absolute;
	width: 95.2%;
	height: 40px;
	padding: 				0px 0px;
	margin: 				0px 20px;    
}

/*
li.main_navigation_active {
    border-bottom: var(--primary-color-200) 8px solid;
}
*/

/* Single navigation element */
ul.mainnavigation li {
    display: inline;
    float: left;
    list-style: none;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

ul.mainnavigation li a {
    color: var(--text-color);
    display: block;
    padding: 10px 0px 11px 0px;
    text-decoration: none;
    margin-right: 20px;
}

ul.mainnavigation li a:hover {
    color: var(--primary-color-200);
    border-bottom: var(--primary-color-200) 3px solid;
}

ul.mainnavigation li.menu-divider {
    padding: 10px 10px 0 10px;
}

/******************************************************************************
 * WebDepot Styles
 *****************************************************************************/

/* Used for captions above input or select elements */
div.inputcaption {
    font-weight: normal;
}

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

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

div.toggleonlineoffline {
    margin: 0px;
    overflow: visible;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

/* remove later */
div.buttonline {
}

div.acceptline {
    line-height: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
}

div.accepttext {
    display: inline;
    margin-left: 7px;
}

/* 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: 0px 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: 0px center;
    background-repeat: no-repeat;
}

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

/* section for bottom links at overview page*/
div.mainlinks {
    padding-top: 20px;
    vertical-align: bottom;
}

/* General style for tables */
table {
    border-spacing: 0px;
    width: 100%;
}

table td {
    padding: 8px 10px 8px 10px;
    position: relative;
}

table th {
    background-color: var(--table-bgcolor-base);
    text-align: left;
    padding: 8px 10px 8px 10px;
    position: relative;
}

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

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

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

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

table.form td select {
    width: 600px;
}

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;
}

/* Style for all cells table */
table.list {
    width: 100%;
}

table.list td {
    border-bottom: 1px solid var(--border-color);
}

/* Style for table head */
table.list th {
    border-bottom: 1px solid var(--border-color);
}

/* Width of column with checkbox */
.columnselect {
    padding-right: 0px;
    line-height: 16px;
    width: 20px;
}

table.list tr:nth-child(even)
{
    background-color: var(--table-bgcolor-even);
}

table.list tr:nth-child(odd)
{
    background-color: var(--table-bgcolor-base);
}

table.list .noentryfound {
    color: var(--disabled-color);
    text-align: center;
}

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

td.button-group {
    text-align: right;
    white-space: nowrap;
    width: 1px;
    padding: 8px 10px 8px 0;
}

td.button-group-middle {
    padding: 0;
}

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

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

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

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

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

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

.entry div.ventry {
    text-align: center;
    margin-top: 0px;
    overflow: auto;
}
/*
.entry div.binding {
    height: 330px;
}
*/
.entry div.restoretype {
    height: 90px;
}

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

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

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

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

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

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

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

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.comment, input.credentials,
select.choosecontainer, select.product, select.seats, select.form {
    height: 32px;
    margin: 0px;
    padding: 0px 8px;
    vertical-align: top;
}

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

select.selectsmall {
    height: 28px;
    margin: 0px;
    padding: 0px 8px;
    vertical-align: top;
}

input.pickofflinefile {
    width: 100%;
}

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

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

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

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

input.ticket {
    width: 638px;
}

input.comment {
    width: 100%;
}


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

/* Overlay during progress */
div.overlay {
    background: #E8ECEB;
    left: 50%;
    margin-left: -300px;
    position: absolute;
    top: 100px;
    width: 600px;
    z-index: 200;
}

/* Headline of overlay, default h3 */
h3.overlayhead {
    background: #F0F0F0;
    font-size: 100%;
    line-height: 150%;
    padding: 5px 20px 5px 20px;
    margin: 0px;
}

div.overlaycontent {
    background: #FFFFFF;
    margin: 0px;
    padding: 1px 20px 20px 20px;
    position: relative;
}

/* Used for messages on main page, combined with error/warning/success/notice/info */
div.messagebox {
    padding: 0px 20px 20px 20px;
    font-size: 100%;
}

div.indexnotice
{
	padding: 10px 20px;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  margin-top: 10px;
}

/* Used for error message, red with picture */
div.error {
    background: var(--error-bgcolor) url(error.png) no-repeat 24px 24px;
    border: 1px solid #CCCCCC;
    min-height: 59px;
    padding-left: 79px;
}

/* Used for warning message, yellow with picture */
div.warning {
    background: #FFF8E1 url(warning.png) no-repeat 24px 24px;
    border: 1px solid #CCCCCC;
    min-height: 59px;
    padding-left: 79px;
}

/* Used for success message, turquoise with picture */
div.success {
    background: #FFFFFF url(success.png) no-repeat 24px 24px;
    border: 1px solid #CCCCCC;
    min-height: 59px;
    padding-left: 79px;
}

/* Like success message, but without picture */
/* Used if activation was successfull, but receipt failed */
div.notice {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}

/* Used for information message */
div.info {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}

/* Style for error page */
div.errorcaption {
    display: block;
}

div.errortext {
    color: #333333;
    margin-top: 0;
    padding-top: 20px;
}

div.errorcode {
    color: #666666;
}

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

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

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

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

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

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

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

/* 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: 0px;
    width: 0px;
}

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: 0px;
    width: 0px;
}

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

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

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

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

/* 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;
}

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

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

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;
}

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

div.mainheadline {
  padding-left: 20px;
}

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

div.wide {
    width: 2800px;
}

div.contentbox_inner {
    padding: 0px;
    margin: 0px;
}

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

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

div.gridbox {
    margin-top: 0px;
}

div.gridboxentry {
    margin-top: 0px;
    margin-right: 20px;
    display: inline;
    float: left;
}

div.gridboxentry:last-child {
    margin-right: 0px;
    text-align: right;
}

input.credentials {
    width: 300px;
}

input.groupname {
    width: 100px;
}

input.groupdescription {
    width: 600px;
}

div.subline {
    margin-top: 5px;
    font-size: 90%;
}

div.sublineerror {
    background: url(sublineerror.png) no-repeat 0px 2px;
    padding-left: 19px;
    color: var(--error-color);;
}

div.sublineok {
    background: url(sublineok.png) no-repeat 0px 2px;
    padding-left: 19px;
    color: #008800;
}

div.sublinenotice {
    background: url(sublineok.png) no-repeat 0px 2px;
    padding-left: 19px;
    color: #6868D8;
}

div.sublinewaiting {
    background: url(sublinewaiting.png) no-repeat 0px 2px;
    padding-left: 19px;
    color: var(--disabled-color);
}

input.inputwait {
    background: url(sublinewaiting.png) no-repeat;
    background-position: right top;
}

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

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

input.icon, input.icon_small, input.icon_table {
    margin-left: 0px;
    margin-top: 0px;
    background-color: var(--icon-color);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

input.icon {
    width: 26px;
    height: 26px;
    line-height: 22px;
    mask-size: auto 22px;
    -webkit-mask-size: auto 22px;
}

input.icon_small {
    width: 20px;
    height: 20px;
    line-height: 12px;
    mask-size: 16px;
    -webkit-mask-size: 16px;
}

input.icon:hover:enabled, input.icon_small:hover:enabled{
    background-color: var(--icon-color-hover);
}

input.icon:disabled, input.icon_small:disabled {
    background-color: var(--icon-color-disabled);
}

input.icon_table {
    width: 32px;
    height: 18px;
    margin-bottom: -4px;
    line-height: 16px;
    mask-size: auto 14px;
    -webkit-mask-size: auto 14px;
}

input.expand {
    mask-image: url("angle-down-solid.svg");
    -webkit-mask-image: url("angle-down-solid.svg");
    mask-size: 14px;
    -webkit-mask-size: 14px;
}

input.collapse {
    mask-image: url("angle-up-solid.svg");
    -webkit-mask-image: url("angle-up-solid.svg");
    mask-size: 14px;
    -webkit-mask-size: 14px;
}

input.expand_small {
    mask-image: url("plus-solid.svg");
    -webkit-mask-image: url("plus-solid.svg");
    mask-size: 12px;
    -webkit-mask-size: 12px;
}

input.collapse_small {
    mask-image: url("minus-solid.svg");
    -webkit-mask-image: url("minus-solid.svg");
    mask-size: 12px;
    -webkit-mask-size: 12px;
}

input.ok {
    mask-image: url("check-circle.svg");
    -webkit-mask-image: url("check-circle.svg");
    margin-right: 10px;
    margin-left: 0px;
    background-color: var(--primary-color-200);
}

input.not_ok {
    mask-image: url("check-circle.svg");
    -webkit-mask-image: url("check-circle.svg");
    margin-right: 10px;
    margin-left: 0px;
    background-color: #F0F0F0;
}

intput.ok:hover {
    background-color: var(--primary-color-200);
}

input.not_ok:hover {
    background-color: #F0F0F0;
}

input.options {
    mask-image: url("cog-solid.svg");
    -webkit-mask-image: url("cog-solid.svg");
}

input.user {
    mask-image: url("user-circle-solid.svg");
    -webkit-mask-image: url("user-circle-solid.svg");
}

input.refresh {
    mask-image: url("sync-alt-solid.svg");
    -webkit-mask-image: url("sync-alt-solid.svg");
    /* mask-border: var(--border-color); */
}

input.trash {
    mask-image: url("trash-alt-solid.svg");
    -webkit-mask-image: url("trash-alt-solid.svg");
}

input.pencil {
    mask-image: url("pencil-alt-solid.svg");
    -webkit-mask-image: url("pencil-alt-solid.svg");
}

input.info {
    margin-right: 8px;
    background: #0068B4;
    mask-image: url("info.svg");
    -webkit-mask-image: url("info.svg");
}

input.info:hover {
    background: #0068B4;
}

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

div.user_menu {
    position: absolute;
    display: none;
}

div.dropdown {
    margin-top: 0;
    position: absolute;
    z-index: 50;
    background-color: white;
    border: 1px solid black;
}

div.infoboxhead {
    padding: 20px 0px 20px 0px;
    border-top: 1px solid var(--border-color);
    position: relative;
}

div.infoboxbody {
    margin-top: 0px;
    padding: 1px 0px 20px 0px;
}

div.infoboxbottom {
    margin-top: 0px;
    padding: 1px 0px 0px 0px;
    border-bottom: 1px solid var(--border-color);
}

input.continue {
    margin-right: 0px;
    background-image: url("angle-right-solid-normal.svg");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: 20px 20px;
    padding-right: 36px;
}

input.continue:hover:enabled {
    background-image: url("angle-right-solid-hover.svg");
}

input.a1 {
    mask-image: url("angle-down-solid.svg");
    -webkit-mask-image: url("angle-down-solid.svg");
}


input.a2 {
    mask-image: url("angle-left-solid.svg");
    -webkit-mask-image: url("angle-left-solid.svg");
    }


input.a3 {
    mask-image: url("angle-right-solid-hover.svg");
    -webkit-mask-image: url("angle-right-solid-hover.svg");
    }


input.a4 {
    mask-image: url("angle-right-solid-normal.svg");
    -webkit-mask-image: url("angle-right-solid-normal.svg");
    }


input.a5 {
    mask-image: url("angle-right-solid.svg");
    -webkit-mask-image: url("angle-right-solid.svg");
    }


input.a6 {
    mask-image: url("angle-up-solid.svg");
    -webkit-mask-image: url("angle-up-solid.svg");
    }


input.a7 {
    mask-image: url("check-circle-solid.svg");
    -webkit-mask-image: url("check-circle-solid.svg");
    }


input.a8 {
    mask-image: url("check-circle.svg");
    -webkit-mask-image: url("check-circle.svg");
    }


input.a9 {
    mask-image: url("check-solid.svg");
    -webkit-mask-image: url("check-solid.svg");
    }


input.a10 {
    mask-image: url("check-square-regular.svg");
    -webkit-mask-image: url("check-square-regular.svg");
    }


input.a11 {
    mask-image: url("cog-solid.svg");
    -webkit-mask-image: url("cog-solid.svg");
    }


input.a12 {
    mask-image: url("download-solid.svg");
    -webkit-mask-image: url("download-solid.svg");
    }


input.a13 {
    mask-image: url("error.svg");
    -webkit-mask-image: url("error.svg");
    }


input.a14 {
    mask-image: url("file-video-regular.svg");
    -webkit-mask-image: url("file-video-regular.svg");
    }


input.a15 {
    mask-image: url("flag-regular.svg");
    -webkit-mask-image: url("flag-regular.svg");
    }


input.a16 {
    mask-image: url("info.svg");
    -webkit-mask-image: url("info.svg");
    }


input.a17 {
    mask-image: url("minus-solid.svg");
    -webkit-mask-image: url("minus-solid.svg");
    }


input.a18 {
    mask-image: url("plus-solid.svg");
    -webkit-mask-image: url("plus-solid.svg");
    }


input.a19 {
    mask-image: url("question-circle-solid.svg");
    -webkit-mask-image: url("question-circle-solid.svg");
    }


input.a20 {
    mask-image: url("square-regular.svg");
    -webkit-mask-image: url("square-regular.svg");
    }


input.a21 {
    mask-image: url("sync-alt-solid.svg");
    -webkit-mask-image: url("sync-alt-solid.svg");
    }


input.a22 {
    mask-image: url("trash-alt-solid.svg");
    -webkit-mask-image: url("trash-alt-solid.svg");
    }


input.a23 {
    mask-image: url("user-astronaut-solid.svg");
    -webkit-mask-image: url("user-astronaut-solid.svg");
    }


input.a24 {
    mask-image: url("user-circle-solid.svg");
    -webkit-mask-image: url("user-circle-solid.svg");
    }


input.single_user {
    mask-image: url("user-solid.svg");
    -webkit-mask-image: url("user-solid.svg");
    }


input.a26 {
    mask-image: url("user-tie-solid.svg");
    -webkit-mask-image: url("user-tie-solid.svg");
    }

input.multi_user {
    mask-image: url("users-solid.svg");
    -webkit-mask-image: url("users-solid.svg");
    }

input.a28 {
    mask-image: url("warning.svg");
    -webkit-mask-image: url("warning.svg");
    }

input.a29 {
    mask-image: url("save-solid.svg");
    -webkit-mask-image: url("save-solid.svg");
}

input.a30 {
    mask-image: url("sign-out-alt-solid.svg");
    -webkit-mask-image: url("sign-out-alt-solid.svg");
}

input.a31 {
    mask-image: url("times-solid.svg");
    -webkit-mask-image: url("times-solid.svg");
}

.test {
    border: 1px solid lightgrey;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    height: 24px;
    background-color: #F7F7F7;
}

div.inline {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Style for buttons */
input.majorbutton, input.minorbutton, input.button {
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
}

input.majorbutton, input.button {
    height: 34px;
    line-height: 30px;
}

input.minorbutton {
    cursor: pointer;
    text-align: center;
    height: 28px;
    line-height: 22px;
}

input.majorbutton, input.button {
    background-color: var(--primary-color-400);
    color: var(--white);
    border: 1px solid var(--primary-color-300);
    margin: 0px 10px 0px 0px;
    padding: 0px 20px 0px 20px;
}

input.majorbutton:disabled, input.button:disabled {
    background-color: var(--disabled-bgcolor);
    border: 1px solid var(--disabled-color);
    color: var(--disabled-color);
}

input.majorbutton:hover:enabled, input.button:hover:enabled {
    border: 1px solid var(--primary-color-200);
    background-color: var(--primary-color-200);
    color: var(--white);
}

input.minorbutton {
    background-color: var(--white);
    border: 1px solid var(--primary-color-400);
    color: var(--text-color);

    padding: 0px 12px 0px 12px;
    margin: 0px;
}

input.minorbutton:hover:enabled {
    background-color: var(--primary-color-300);
    border: 1px solid var(--primary-color-200);
}

input.minorbutton:disabled {
    background-color: var(--canvas-color);
    border: 1px solid var(--disabled-bgcolor);
    color: var(--disabled-color);
}

/* Refresh CmConatiner Button */
input.buttonrefresh {
    background: var(--primary-color-200);
    background-image: url(refresh.png);
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    height: 32px;
    margin: 0;
    margin-right: 8px;
    padding: 0;
    padding-right: 0;
    width: 32px;
}

input.buttonrefresh:hover {
    background: #006B70;
    /*background-image:		url(refreshHover.png);*/
    background-position: center center;
    background-repeat: no-repeat;
}

div.overlaybuttons {
    text-align: right;
}

input.loginbutton {
    margin-top: 23px;
    width: 120px;
}

input.main_button {
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
    height: 34px;
    line-height: 28px;
    background-color: var(--main-button-background-color);
    border: 1px solid var(--main-button-border-color);
    color: var(--main-button-text-color);
    margin: 0 0 0 20px;
    padding: 0 20px 0 20px;
}

input.main_button:disabled {
    cursor: default;
    background-color: var(--main-button-background-color-disabled);
    border: 1px solid var(--main-button-border-color-disabled);
    color: var(--main-button-text-color-disabled);
}

input.main_button:hover:enabled, input.main_button:focus {
    background-color: var(--main-button-background-color-hover);
    border: 1px solid var(--main-button-border-color-hover);
    color: var(--main-button-text-color-hover);
}

input.option_button {
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
    height: 28px;
    line-height: 20px;
    background-color: var(--option-button-background-color);
    border: 1px solid var(--option-button-border-color);
    color: var(--option-button-text-color);
    margin: 0 0 0 10px;
    padding: 0 20px 0 20px;
}

input.option_button:disabled {
    cursor: default;
    background-color: var(--option-button-background-color-disabled);
    border: 1px solid var(--option-button-border-color-disabled);
    color: var(--option-button-text-color-disabled);
}

input.option_button:hover:enabled, input.option_button:focus {
    background-color: var(--option-button-background-color-hover);
    border: 1px solid var(--option-button-border-color-hover);
    color: var(--option-button-text-color-hover);
}

input.icon_button {
    cursor: pointer;
    text-align: center;
    height: 26px;
    width: 26px;
    line-height: 20px;
    mask-size: 16px;
    -webkit-mask-size: 16px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--icon-button-icon-color);
    border: none;
    margin: auto 0 auto 10px;
    padding: 0;
}

input.icon_button:disabled {
    cursor: default;
    background-color: var(--icon-button-icon-color-disabled);
}

input.icon_button:hover:enabled, input.icon_button:focus {
    background-color: var(--icon-button-icon-color-hover);
}


div.overlay_background {
    background: #000000;
    height: 100%;
    left: 0px;
    margin: 0px;
    opacity: 0.75;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 199;
}

div.overlay_window {
    background: #E8ECEB;
    left: 50%;
    margin-left: -300px;
    position: fixed;
    top: 100px;
    width: 500px;
    z-index: 200;
}

h3.overlay_head {
    color: var(--text-color);
    font-weight: bold;
    background: white;
    font-size: 130%;
    font-weight: bold;
    line-height: 150%;
    padding: 10px 20px 10px 20px;
    margin-bottom: 1px;
}

div.overlay_content {
    background: #FFFFFF;
    margin: 0px;
    padding: 20px 20px 20px 20px;
    position: relative;
}

div.overlay_footer {
    background: #FFFFFF;
    margin: 0px;
    padding: 20px 20px 20px 20px;
    position: relative;
    text-align: right;
}

div.overlay_buttons {
    text-align: right;
    margin-top: 0;
}

div.buttons {
    text-align: right;
}

div.overlay_input {
    margin: auto;
    /* width: 90%; */
}

div.overlay_input_top {
    padding: 0 0 10px 0 ;
}

input.add_group_button {
    margin-top: 23px;
    margin-left: 0;
}

input[type=text], input[type=password], input[type=email] {
    color: #000000;
    font-size: 100%;
    border: 1px solid #D3D3D3;
    /*border-radius: 4px;*/
    /*padding: 2px 4px;*/
    /* height: 25px; */
}

input.groupname, input.groupdescription, input#email {
    width: -webkit-fill-available;
    width: -moz-available;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
    /*border-color: 2px thick #009BA3;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(0 155 163 / 25%);
    */
}

label, .label {
    /* color: #54545E; */
    display: block;
    font-weight: bold;
    /* font-size: 90%; */
    /* padding: 5px 5px 3px 5px; */
    margin: 10px 0px 3px 5px;
}

label.overlay-section-title {
    font-size: 100%;
    font-weight: bold;
    margin: 20px 0 5px 0;
    /* font-size: 110%; */
}

label.checkbox-text {
    display: inline;
}

label.role_updated{
    display: inline;
    size: 110%;
}

label.role{
    display: inline;
    size: 110%;
}


div.overlay_content input[type=checkbox] {
    width: 15px;
    height: 15px;
    vertical-align: text-bottom;
    margin: 3px 0;
}

div.overlay_content p {
    margin-top: 0;
    
}

p.overlay-section-title {
    font-weight: bold;
    margin: 0 0 10px 0;
    /* font-size: 110%; */
}

p.overlay-section-title-top, #user_email_label {
    font-weight: bold;
    margin: 0 0 10px 0;
    /* font-size: 110%; */
}

table.list tr.group-table-item:hover {
    background-color: var(--table-hover);
    cursor: pointer;
}

tr.group-table-item td.button {
    padding-left: 0;
}

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

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

div#top-button {
    margin-top: 0;
}

div#bottom-button {
    margin-top: 50px;
}

div.error_message {
    color: var(--error-color);
    font-size: 90%;
    margin: 0;
    padding: 0 0 0 5px;
}

div.info_message {
    color: var(--primary-100);
    font-size: 90%;
    margin: 0;
    padding: 2px 0 0 5px;
}

input.invalid_input {
    border-color: var(--error-color);
    outline: 0;
}

input.invalid_input:focus {
    box-shadow: 0 0 0 0.03rem var(--error-color);
}

input.right-align-menu {
    line-height: calc(var(--heightheader) - 18px);
    height: calc(var(--heightheader) - 8px);
    float: right;
    cursor: pointer;
    text-align: center;
    /* line-height: 20px; */
    /* height: 40px; */
    width: 30px;
    mask-size: 25px;
    -webkit-mask-size: 25px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--icon-button-icon-color);
    border: none;
    margin: 5px 0 auto 0px;
    padding: 10px 20px 10px 20px;
}

input.right-align-menu:disabled {
    cursor: default;
    background-color: var(--icon-button-icon-color-disabled);
}

input.right-align-menu:hover:enabled {      
    background-color: var(--icon-button-icon-color-hover);      
}

div.dropdown-nav {
    margin-top: 0;
}

div.dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 120px;
    /* border: gray; */
    border-radius: 4px;
    right:0;
    top: 40px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 1;
}

div.show {
    display: block;
}

input.active {
    background-color: var(--primary-color-200); 
}

div.dropdown-nav:hover input#account-toggle-button {
    background-color: var(--primary-color-200); 
}

a.dropdown-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

a.dropdown-item:hover {
    background-color: rgb(0 155 163 / 5%); 
}

a.dropdown-item:hover .logout-icon {
    background-color: var(--primary-color-200); 
}

a.dropdown-item:hover .account-dropdown-toggle {
    background-color: var(--primary-color-200); 
}

hr.dropdown-divider {
    height: 0;
    margin-top: 0;
    border-top: 1px solid #ddd;
    overflow: hidden;
}

div.table-divider {
    height: 0;
    margin: 10px 0;
    border-top: 1px solid #ddd;
    overflow: hidden;
}   

td.title {
    font-weight: bold;
}

input.icon#refreshcmcontainers {
    padding: 4px;
    height: 36px;
    width: 36px;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    background-color: var(--primary-100);
    /* background-color: var(--primary-color-300); */
}
input.icon#refreshcmcontainers:hover {
    background-color: var(--primary-150);
    cursor: pointer;
    /* background-color: var(--primary-100); */
    padding-left: 2px;
    height: 37px;
}

input.check-button {
    height: 34px;
}

div#passwordhint {
    margin-top: 3px;
    color: var(--disabled-color);
    font-size: 90%;
}

span.contains {
    color: var(--success);
    font-weight: bold;
}