
:root {
    --bkd-brand-white: rgba(255, 255, 255, 0.42);
    --bkd-brand-red: rgba(234, 22, 31, 1);
    --bkd-brand-black: rgba(0, 0, 0, 1);
    --bkd-brand-light-sand: rgba(252, 248, 243, 1);
    --bkd-brand-sand: rgba(250, 241, 227, 1);
    --bkd-brand-dark-sand: rgba(247, 233, 210, 1);
    --bkd-brand-sand-hover: rgba(242, 224, 195, 1);
    --bkd-brand-cappuchino: rgba(235, 211, 174, 1);
    --bkd-func-fg-black: rgba(0, 0, 0, 1);
    --bkd-func-fg-grey: rgba(112, 112, 112, 1);
    --bkd-func-fg-light-grey: rgba(112, 112, 112, 0.68);
    --bkd-func-fg-white: rgba(255, 255, 255, 1);
    --bkd-func-bg-anthrazit-hover: rgba(64, 64, 64, 1);
    --bkd-func-bg-anthrazit: rgba(78, 78, 78, 0.95);
    --bkd-func-bg-dark-grey: rgba(112, 112, 112, 1);
    --bkd-func-bg-line-grey: rgba(112, 112, 112, 0.5);
    --bkd-func-bg-grey: rgba(222, 222, 222, 1);
    --bkd-func-bg-light-grey: rgba(242, 242, 242, 1);
    --bkd-func-bg-very-light-grey: rgba(248, 248, 248, 1);
    --bkd-func-bg-white: rgba(255, 255, 255, 1);
    --bkd-func-bg-red: rgba(208, 16, 24, 1);
    --bkd-func-bg-green: rgba(61, 134, 8, 1);
    --bkd-language-switcher-active-border: rgba(234, 22, 31, 0.77);
    --bkd-footer-border: rgba(238, 238, 238, 1);
    --bkd-mobile-nav-shadow: rgba(0, 0, 0, 0.16);
    --bkd-z-index-dropdown: 1;
    --bkd-font-family: "Roboto", sans-serif;
    --bkd-font-size-base: 16px;
    --bkd-font-weight-base: 300;
    --bkd-line-height-base: 1.625;
    --bkd-margin-horizontal-large: 40px;
    --bkd-margin-horizontal-medium: 30px;
    --bkd-margin-horizontal-small: 20px;
  }
  
  html {
    font-size: inherit;
    background: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
  }


#CLX_Root, #CLX_Root > .ember-view, .dialog {
    height: unset !important;
}

#CLX_Root button, #CLX_Root a.textButton {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    width: unset;
    height: unset;
  }

.dialogBody {
    padding: 0;
}

.dialogFooter {
    background-color: transparent;
    padding: 0;
    flex-direction: row !important;
}

.float-right {
    right: 0;
    position: absolute;
}

.btn-primary {
    background-color: var(--bs-btn-bg)  !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
}

.btn-outline-secondary{
    border: 1px solid #000 !important;
}

/* overwrite main.css so the height of the textarea isn't always 5rem */
.readSubscriptionDetails textarea {
    height: auto !important;
    resize: vertical;
}

/* style the table */
.readSubscriptionDetails td:empty::before {
    content: '-';
    display: block;
    width: 100%;
    text-align: center; 
}

.readSubscriptionDetails td, .readSubscriptionDetails th {
    padding: 0.5rem !important;
}

.readSubscriptionDetails .input-colum {
    font-variant-caps: all-petite-caps;
}

/* loadinganimation */
.readSubscriptionDetails .loadingAnimation {
    margin: auto;
}

/* center text */
.readSubscriptionDetails .center-text {
    text-align: center !important;
}

/* show the default cursor for disabled links */
.readSubscriptionDetails a.disabled {
    cursor: default;
}

/* errors */
.readSubscriptionDetails .textarea--error {
    outline-color: red;
    border-color: red;
}

.readSubscriptionDetails .error {
    color: red
}

/* vertically center the info icons */
.readSubscriptionDetails .dialogIcon > svg {
    vertical-align: middle;
}

/* for the list of the excelfields */
.readSubscriptionDetails pre {
    background-color: white;
    margin: 0.8rem 0 0 0;
    padding: 0.6rem;
    border: 1px solid darkgray;
}

/* main.css styles buttons with the disabled attribute
   but not elements with the disabled class */
.readSubscriptionDetails button.disabled * {
    stroke: #aaa !important;
    fill: #aaa !important;
    color: #aaa !important;
}

/* navigation styling */
.readSubscriptionDetails .dialogBody a {
    color: #666;
    font-weight: 400;
}


.readSubscriptionDetails .dialogBody a.active {
    font-weight: 600;
}

/* by default the loadingAnimation is too high */
.readSubscriptionDetails .loadingAnimation {
    min-height: auto; 
}