body {
    min-width: 900px;
}

ul.list-group {
    margin: 0;
}

textarea {
    resize: none;
}

select:disabled {
    background-color: #222 !important;
    color: #aaa;
    -moz-appearance: none;
    -webkit-appearance: none;
}

select:disabled:-ms-expand {
    display: none;
}

input:disabled {
    background-color: #222 !important;
    color: #aaa;
}

label {
    font-weight: normal;
}

iframe#download-iframe {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 0;
    border: none;
}

iframe#pdf-viewer {
    position: absolute;
    top: 0px;
    left: 10px;
    border: 0;
    padding: 0;
    margin: 0;
    width: calc(100% - 10px);
    height: 100%;
    z-index: 1;
}

/* #docs-pdf-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #222;
    z-index: 2;
}

#docs-pdf-cover>div {
    text-align: center;
    width: 20em;
    height: 100px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#docs-pdf-cover.cover-down {
    z-index: 0;
} */

.abs-center {
    text-align: center;
    width: 20em;
    height: 100px;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
}


.ro-docs-empty-message {
    text-align: center;
    width: 20em;
    height: 100px;
    font-size: 20px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ro-docs-empty-icon {
    font-size: 50px;
}

.pager a {
    background-color: #666 !important;
}

.pager>li {
    cursor: pointer;
    user-select: none;
}

.pager>.disabled a {
    background-color: #444 !important;
    color: #777;

}

table.table>thead>th {
    padding: 8px 8px 8px 8px;
    border-bottom: 3px solid #444;
}

table.table>tbody>tr {
    cursor: pointer;
    border-bottom: 1px solid #444;
}

table.table>tbody>tr:last-child {
    border-bottom: 0;
}

thead.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #444;
}
.text-link {
    color: #0ce3ac;
    text-decoration-line: underline;
    /* text-underline-offset: 4px;
    text-decoration-style: dotted; */
    cursor: pointer;
}
.text-link:hover {
    color: #0ce3ac;
    /* text-decoration-line: underline; */
    padding: 4px;
    margin: -4px;
    border-radius: 3px;
}

.tooltip-text {
    position: relative;
    display: inline-block;
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-style: dotted;
    cursor: pointer
}

.tooltip-text:hover {
    background-color: rgb(2, 28, 21);
    padding: 5px;
    margin: -5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

.tooltip-text .tooltip-content {
    font-weight: normal;
    visibility: hidden;
    width: 240px;
    background-color: rgb(2, 28, 21);
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
    pointer-events: none;

    position: absolute;
    z-index: 1;
    bottom: calc(100% - 2px);
    left: -20px;
}

.tooltip-text:hover .tooltip-content {
    visibility: visible;
}






.hint-link {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.hint-link.active {
    text-decoration-color: red;
}

.hint-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px;
    margin: -4px;
    border-radius: 3px;
    cursor: help;
    text-decoration-color: red;
}

#hint-marker {
    position: absolute;
    display: none;
    border: 2px dotted red;
    z-index: 9999;
    animation: blinker 0.5s linear infinite;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

#login-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15%;
    border: 0;
    box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.75);
    background-color: #023a33;
    width: 550px;
    border-radius: 5px !important;
}

#login-panel .error {
    color: #ff3366;
}


#login-panel .panel-body {
    padding: 0;
}

#login-panel .tab-pane {
    padding: 20px;
    background-color: #022a23;
    border-radius: 5px !important;
}

#login-panel .nav-tabs {
    padding: 0px 20px 0px 20px;
}

#login-panel .nav-tabs li.active {
    background-color: #022a23;
}

#login-panel .nav-tabs li a {
    color: #ddd;
}

#login-panel .nav-tabs li.active a {
    background-color: transparent;
    color: #fff;
}

#announcement {
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    background-color: #c33;
    color: #fff;
    line-height: 50px;
    font-size: 18px;
    padding: 0px 20px 0px 20px;
}

#announcement>.ok {
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 50px;
    width: 100px;
    background-color: #a55;
    cursor: pointer;
}

#announcement>.ok:hover {
    background-color: #b66;
}

.label {
    padding-bottom: 0.2em;
}

.panel {
    box-shadow: 0;
    border-radius: 0 !important;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5) !important;
}

.panel .panel-header {
    border-radius: 0 !important;
}

#docs-accordion .panel {
    margin-bottom: 1em;
}

#docs-accordion .panel .panel-heading {
    height: 45px;
    font-size: 18px;
    line-height: 25px;
    cursor: pointer;
    display: flex;
}

#docs-accordion .panel .panel-heading.disabled {
    cursor: auto;
    color: #aaa;
    text-decoration: none !important;
}

#docs-accordion .panel .panel-heading:hover {
    text-decoration: underline;
}

#docs-accordion .panel .badge {
    padding: 3px 10px 3px 10px;
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    margin-right: 1em;
}

#docs-accordion .panel .badge.disabled {
    background-color: #aaa;
}

#docs-accordion .panel .panel-body {
    padding: 0;
    overflow: hidden;
    height: 0px;
}

#docs-accordion .panel .panel-body.open {
    height: auto;
}

#docs-accordion .doc {
    margin-bottom: 1px;
    background-color: #555;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
}

#docs-accordion .doc:hover {
    background-color: #666;
}

#pdf-canvas {
    width: 100%;
    height: 100%;
}

.ro-pre {
    white-space: pre;
}

.ro-inline-fixed {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ro-logo-drop {
    height: 50px;
}

.ro-logo-service {
    color: #83c4db;
    font-size: 34px;
    line-height: 36px;
    height: 50px;
    font-family: 'Panton Bold';
    white-space: nowrap;
    padding-top: 9px;
    padding-left: 5px;
}

.ro-png-icon {
    display: inline-block;
    vertical-align: top;
    height: 1em;
    width: 20px;
    margin-top: calc((-20px + 1.3em) / 2);
}

.ro-png-icon-pdf:before {
    content: url(/images/pdf-20.png);
}

.ro-png-icon-csv:before {
    content: url(/images/csv-20.png);
}

.ro-png-icon-zip:before {
    content: url(/images/zip-20.png);
}

.ro-icon {
    font-size: 22px;
    line-height: 22px;
    display: inline-block;
    vertical-align: top;
}

.input-group {
    width: 100%;
}

.input-group-addon {
    width: 45px;
}

.input-group-addon.addon-button {
    background-color: #dd5522;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
}

.input-group-addon.addon-button:hover {
    background-color: #ee6633;
}

.input-group-addon.addon-button.disabled {
    background-color: #444;
    color: #777;
}

.upper {
    z-index: 10;
}

.lower {
    z-index: 1;
}

.dropdown-left-manual {
    right: 0;
    left: auto;
    padding-left: 1px;
    padding-right: 1px;
}

#layout-topbar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 70px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.20);
    background-color: #023a33;
    z-index: 600;
}

.ro-text-low {
    color: #999;
}

.ro-text-yellow {
    color: #e5e859;
}

.ro-text-green {
    color: #69d76a;
}

.ro-text-red {
    color: #ff0000;
}

.ro-text-rosa {
    color: #F8BBFF;
}

.ro-text-lblue {
    color: #00C9FF;
}

.ro-text-orange {
    color: #FF8000;
}

.ro-text-header {
    font-size: 24px;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
}

.ro-text-ttl {
    color: #cc7788;
}

.ro-btn-xs {
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5) !important;
    width: 30px;
}

.ro-label {
    font-size: 14px;
    line-height: 14px;
    height: 25px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    display: inline-block;
    padding: 4px 8px 4px 8px;
    border-radius: 5px;
    margin: 0;
    vertical-align: top;
    transition: background-color 0.4s linear;
}

.ro-label-button {
    border: 1px solid #666;
}

.ro-label-button:hover {
    background-color: #555;
}

.ro-document-button {
    background-color: #2255dd;
}

.ro-document-button:hover {
    background-color: #3366ff;
}

.ro-bmk-document-button {
    background-color: #2255dd;
}

.ro-bmk-document-button:hover {
    background-color: #3366ff;
}

.ro-label-expand {
    border: 1px solid #666;
}

.ro-label-expand>.ro-label-hidden {
    display: none;
}

.ro-label-expand:hover {
    background-color: #666;
}

.ro-label-expand:hover>.ro-label-hidden {
    display: inline;
}

.ro-label-artnum {
    background-color: #115511;
    border: 1px solid #226622;
    display: flex;
}

.ro-label-yellow {
    background-color: #e5e859;
    color: black;
    border: 1px solid #868735;
}

.ro-label-green {
    background-color: #69d76a;
    color: black;
    border: 1px solid #3a7a3bf2;
}

.ro-label-rosa {
    background-color: #F8BBFF;
    color: black;
    border: 1px solid #7a5c7d;
}

.ro-label-lblue {
    background-color: #00C9FF;
    color: black;
    border: 1px solid #025d77;
}

.ro-label-orange {
    background-color: #FF8000;
    color: black;
    border: 1px solid #7d3f01;
}

.ro-label-white {
    background-color: white;
    color: black;
    border: 1px solid rgb(135, 134, 134)
}

.ro-label-ttl {
    background-color: transparent;
    border: 1px solid #777;
}

.ro-label-maint {
    background-color: transparent;
    border: 1px solid #777;
}




.ro-drawing-pos {
    min-width: 38px;
    height: 25px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #dddd00;
    padding: 0px 3px 0px 3px;
    color: #bbbb00;
    display: inline-block;
}

.ro-drawing-pos.active {
    color: #000033;
    background-color: #dddd00;
}

.ro-drawings-button {
    min-width: 120px;
    text-align: center;
    border-color: #dadb3a !important;
    background-color: #333 !important;
    color: #dadb3a !important;
    border-width: 1px;
    outline: none !important;
    margin-right: 10px;
}

.ro-eplan-drawings-button {
    position: absolute;
    top: -10px;
    right: 0px;
    height: 45px;
    line-height: 45px;
    background-color: #2255dd;
    color: #fff;
    border: 0;
    padding: 0px 20px 0px 20px;
    margin: 0;
}

.ro-bmks-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 0 !important;
    background-color: #333;
}

.ro-bmks-item:hover {
    background-color: #3f3f3f;
}

.ro-bmks-item.selected {
    background-color: #444 !important;
    border: 1px solid #999;
    cursor: auto;
}

.ro-bmks-item.selected .ro-drawing-pos.active {
    background-color: #00dd00 !important;
}

.bmk-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0px 0px 0px 10px;
}

.bmk-title>.bmk {
    color: #dddd00;
}

.bmk-drawing {
    display: inline-block;
    height: 25px;
    line-height: 23px;
    padding: 0px 10px 0px 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px solid #dddd00;
    border-radius: 3px;
    cursor: pointer;
    color: #dddd00;
}

.bmk-drawing:hover {
    background-color: #666;
}

.bmk-drawing.disabled {
    color: #999;
    cursor: auto;
    background-color: transparent !important;
}

.bmk-drawing.selected {
    background-color: #dddd00;
    color: #000;
}

.bmk-part {
    position: relative;
    height: 35px;
    display: flex;
    padding-left: 10px;
    align-items: center;
    margin-top: -5px;
    margin-bottom: 5px;
}

.bmk-part>div {
    margin-right: 10px;
}

.ro-doc-version {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 3px;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-doc-version:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-doc-version.selected {
    background-color: #444 !important;
}

.ro-doc-version.selected .ro-drawing-pos.active {
    background-color: #00dd00 !important;
}


.ro-doc-version .format {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.ro-doc-version .format img {
    width: 20px;
    height: 20px;
    overflow: hidden;
}

.ro-doc-version .available-langs {
    display: flex;
    padding: 0px 10px 0px 10px;
    border-right: 1px solid #222;
}

.ro-doc-version .available-lang {
    width: 20px;
    /* margin-right: 5px; */
    color: #bbb;
    text-align: center;
}

.ro-doc-version .version {
    width: 130px;
    /* padding: 0px 10px 0px 10px; */
    border-right: 1px solid #222;
    flex: 0 0 130px;
}

/* .ro-doc-version .version.active {

} */
.ro-doc-version .size {
    display: block;
    width: 65px;
    padding: 0px 0px 0px 15px;
    text-align: right;
    color: #bbb;
}

.ro-doc-version .version select {
    border: 0 !important;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    padding: 0px 10px 0px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
}

.ro-doc-version .version select option {
    background-color: #444;
    padding: 4px;
    margin: 4px;
}

.ro-doc-version .version select.active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ffffff'><polygon points='20,0 80,0 50,52'/></svg>");
    background-size: 12px;
    background-position-x: calc(100% - 10px);
    background-position-y: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: initial;
}

.ro-doc-version .version select.active:hover {
    background-color: #666;
}

.ro-doc-version .artnum {
    background-color: #115511;
    padding: 0px 10px 0px 10px;
}

.ro-doc-version .cisid.available {
    background-color: #115511;
    padding: 0px 10px 0px 10px;
    min-width: 120px;
}

.ro-doc-version .cisid.ondemand {
    background-color: #777700;
    padding: 0px 10px 0px 10px;
    min-width: 120px;
}

.ro-doc-version .cistitle {
    padding: 0px 10px 0px 10px;
}

.ro-doc-version .part-name {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ro-doc-version .name {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ro-doc-version .download {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 45px;
    background-color: #2255dd;
    color: #fff;
    padding: 0px 20px 0px 20px;
    flex: 0 0 auto;
}

.ro-doc-version .delete {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 45px;
    background-color: #444444;
    color: #fff;
    padding: 0px 20px 0px 20px;
    flex: 0 0 auto;
}


.ro-password-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 2px;
    padding: 0px 0px 0px 15px;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-password-item.title {
    background-color: #444;
    font-weight: bold;
}

.ro-password-item.title .item-button {
    font-weight: normal;
}

.ro-password-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-password-item.title:hover {
    box-shadow: none;
}

.ro-password-item.selected {
    background-color: #444 !important;
}

.ro-password-item.selected .ro-drawing-pos.active {
    background-color: #00dd00 !important;
}

.ro-password-item .item-button {
    padding: 0px 12px 0px 12px;
    border-left: 1px solid #222222;
    background-color: #555;
    cursor: pointer;
    flex: 1 0 120px;
    text-align: center;
}

.ro-password-item .item-button.primary {
    background-color: #2255dd;
}

.ro-password-item .item-button.disabled {
    background-color: #444;
    color: #777;
    cursor: default;
}

.ro-password-item .item-button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-password-item .item-button.disabled:hover {
    box-shadow: none;
}



.ro-changelog-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 2px;
    padding: 0px 0px 0px 15px;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ro-changelog-item.title {
    background-color: #444;
    font-weight: bold;
    cursor: default;
}

.ro-changelog-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-changelog-item.noselect:hover {
    box-shadow: none;
    cursor: default;
}

.ro-changelog-item.title:hover {
    box-shadow: none;
}

.ro-changelog-item.selected {
    background-color: #444 !important;
}

.ro-changelog-item .download {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 45px;
    background-color: #2255dd;
    color: #fff;
    padding: 0px 20px 0px 20px;
    flex: 0 0 auto;
}




.ro-docs-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1px;
    padding: 5px 15px 5px 15px;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 35px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-docs-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-docs-item.selected {
    background-color: #444 !important;
}

.ro-docs-item.selected .ro-drawing-pos.active {
    background-color: #00dd00 !important;
}

.ro-docs-remark {
    margin-bottom: 20px;
    padding: 5px 15px 5px 15px;
    border: 1px solid #444;
    border-radius: 0 !important;
    background-color: #222;
    height: 45px;
    line-height: 35px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ddd;
}

.ro-docs-title {
    margin-bottom: 3px;
    padding: 5px 15px 5px 15px;
    border: 0;
    border-radius: 0 !important;
    background-color: #444;
    height: 45px;
    line-height: 35px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.ro-parts-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 1px;
    padding: 10px 0px 10px 10px;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
}

.ro-parts-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.ro-parts-item.selected {
    background-color: #444 !important;
}

.ro-parts-item.selected .ro-drawing-pos.active {
    background-color: #00dd00 !important;
}

.ro-parts-item * {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ro-maint-item {
    background-color: #222;
    margin: 10px 0px 0px 0px;
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
}

@keyframes glow {
    from {
        background-color: #cc0000;
    }

    to {
        background-color: #663333;
    }
}

.ro-replace-passed {
    border-color: #ff0000;
    background-color: #cc0000;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.ro-replace-urgent {
    border-color: #ff0000;
}

.ro-replace-warning {
    border-color: #ffff00;
}

.ro-replace-ok {
    border-color: #00ff00;
}

.ro-maint-item-text {
    white-space: pre-wrap;
    color: #bbb;
    padding: 5px 0px 0px 0px;
    margin: 0;
    border: 0;
}

.ro-parts-item-upper {
    height: 25px;
    margin-bottom: 10px;
    position: relative;
}

.ro-parts-item-lower {
    height: 25px;
    position: relative;
}

.ro-parts-item-stack {
    height: 25px;
    margin-bottom: 10px;
    position: relative;
}

.ro-parts-item-stack:last-child {
    margin-bottom: 0px;
}

.ro-addtocart {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 35px;
    width: 35px;
}

.ro-addtocart-bmk {
    top: 5px;
    right: 0px;
}

.ro-gotothreed {
    height: 25px;
    width: 30px;
    display: block;
    position: absolute;
    top: 10px;
    right: 50px;
}

.ro-replace-menu-button {
    height: 25px;
    width: 30px;
    display: block;
    position: absolute;
    top: 10px;
    right: 50px;
}

.ro-softlink {
    cursor: pointer;
}

.ro-softlink:hover {
    text-decoration: underline;
}

/*.ro-addtocart-input {
    width:38px;
    border:0 !important;
    margin:0;
    padding:2px 5px 2px 5px;
    height:25px !important;
    font-size:14px;
    line-height:21px;
    text-align:right;
}*/
.ro-addtocart-button {
    border: 0;
    margin: 0;
    padding: 0;
    height: 25px;
    width: 30px;
    font-size: 18px;
}

.ro-gotothreed-button {
    border: 0;
    margin: 0;
    padding: 0;
    height: 25px;
    width: 30px;
    font-size: 16px;
}

.ro-tbl-cell {
    display: inline-block;
    white-space: nowrap;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
}

.ro-tbl-cell-right-margin {
    margin-right: 10px;
}

.ro-tbl-cell-mech-title {
    max-width: calc(100% - 190px);
}


.ro-tbl-cell-maint-title {
    max-width: calc(100% - 500px);
}


.ro-tbl-cell-elec-group {
    max-width: calc(40% - 65px);
    margin-right: 10px;
}

.ro-tbl-cell-elec-title {
    max-width: calc(60% - 65px);
}

.ro-tbl-cell-elec-bmk-title {
    max-width: calc(100% - 90px);
}


.ro-text-elec-group {
    color: #999999;
}


.ro-topbar {
    height: 70px;
    font-size: 18px;
    line-height: 22px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 10px 10px 0px 18px;
}

.ro-topbar-dropdown {
    cursor: pointer;
}

.ro-topbar-item {
    vertical-align: middle;
    padding: 0px 10px 0px 0px;
}

.ro-topbar-icon {
    font-size: 22px;
}

.ro-topbar-separator {
    color: #777;
}

#layout-display {
    position: fixed;
    top: 130px;
    left: 300px;
    right: 0px;
    bottom: 0px;
    display: flex;
    flex-wrap: nowrap;

}

#layout-display.overlap {
    left: 70px;
}

#layout-display.full {
    left: 0px;
}

#layout-display.nonproduction {
    bottom: 40px !important;
}

#menu-machine {
    display: flex;
    margin: 0px 0px 0px 20px;
    padding: 0;
    white-space: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

#menu-machine>* {
    line-height: 60px;
}

#menu-machine-search {
    flex: 0 0 0%;
    margin-right: 20px;
}

#menu-body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 591;
}

.menu-item {
    position: relative;
    display: flex;
    height: 37px;
    padding: 0px 20px 0px 15px;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item * {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item:hover {
    background-color: #023a33;
}

.menu-item.active {
    background-color: #024a43;
    color: #ffffff;
}

.menu-item.section {
    border-top: 1px solid #777;
    /* #021a13; */
}

.menu-item-icon {
    flex: 0 0 40px;
    font-size: 22px;
    text-align: center;
    margin-right: 10px;
    margin-top: 8px;
    height: 37px;
}

.menu-item-icon .ion-icon {
    display: inline-block;
    margin-top: -1px;
}

.menu-item-icon .ion-icon.ion-social-buffer {
    display: block;
    transform: rotate(-115deg);
}

.menu-item-icon .volume {
    display: inline-block;
    background-color: #eee;
    color: #000;
    font-weight: bold;
    height: 21px;
    width: 40px;
    border-radius: 2px;
    font-size: 15px;
    line-height: 15px;
    padding-top: 3px;
    margin: 0;
}

.menu-item-label {
    font-size: 15px;
    padding: 0px 0px 0px 0px;
}

.ro-font-24 {
    font-size: 24px;
    line-height: 24px;
}


#menu-machine-switch {
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    width: 30px;
    height: 32px;
    background-color: #023a33;
    border-radius: 3px;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.20);
    padding: 7px 0px 0px 0px;
    margin: 15px 15px 15px 0px;
    cursor: pointer;
}

#menu-machine-switch:hover {
    background-color: #024a43;
}

#menu-machine-display {
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    display: flex;
    justify-content: left;
    align-items: baseline;
}

#menu-machine-display #machine-id {
    font-size: 24px;
    margin-right: 10px;
}

#menu-machine-display #machine-country {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 15px;
}

#menu-machine-display #machine-country .flag-icon {
    margin-right: 8px;
}

.ro-machine-picker-item {
    position: relative;
    padding: 10px 20px 10px 20px;
    cursor: pointer;
}

.ro-machine-picker-item * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ro-machine-picker-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

#layout-machinebar {
    position: fixed;
    top: 70px;
    left: 0px;
    right: 0px;
    height: 60px;
    background-color: #022a23;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.20);
    z-index: 591;
}

#layout-menu {
    position: fixed;
    top: 130px;
    left: 0px;
    width: 70px;
    bottom: 0px;
    background-color: #022a23;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.20);
    transition: width ease-in-out 0.2s;
    z-index: 590;
    overflow-y: hidden;
    overflow-x: hidden;
}

#layout-menu * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#layout-menu.open {
    width: 300px;
    overflow-y: auto;
}

#layout-menu.closed {
    width: 0px;
    overflow-y: hidden;
}

#machine-picker {
    position: fixed;
    top: 130px;
    left: 0px;
    width: 300px;
    bottom: 0px;
    background-color: #022a23;
    z-index: 592;
    display: none;
}

#machine-picker.open {
    display: block;
}

#machine-picker-scroller {
    position: absolute;
    top: 250px;
    left: 0px;
    width: 300px;
    height: calc(100% - 290px);
    overflow-y: scroll;
    border-top: 1px solid #555;
}


#machine-picker-type-wrapper {
    margin: 10px 20px 15px 20px;
}

#machine-picker-company-wrapper,
#machine-picker-country-wrapper {
    margin: 10px 20px 15px 20px;
}

#machine-picker-search-wrapper {
    margin: 10px 20px 15px 20px;
}


#ro-display-content {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#ro-display-pdf {
    flex: 1 1 50%;
    display: none;
    flex-wrap: nowrap;
    position: relative;
}

.ro-display-item {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #222;
}

.ro-display-item-first {
    position: relative;
    padding: 20px 15px 20px 20px;
    flex: 1 1 50%;
    /* this enables cramping the area down to next to nothing */
    overflow: hidden;
}

.ro-display-splitter {
    flex: 0 0 10px;
    background-color: #666;
    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.3);
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    cursor: col-resize;
    z-index: 99;
}

.ro-display-splitter-shadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 5px;
    height: 100%;
    background-color: red;
    opacity: 0.5;
    z-index: 999;
    pointer-events: none;
    visibility: hidden;
}

.ro-display-item-second {
    position: relative;
    padding: 20px 20px 20px 15px;
    flex: 1 1 50%;
    /* this enables cramping the area down to next to nothing */
    overflow: hidden;
}

.ro-control-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    height: 45px;
}

.ro-control-wrapper>* {
    flex: 1 1 auto;
    margin-left: 20px;
}

.ro-control-wrapper>*:first-child {
    margin-left: 0;
}

.ro-half-left {
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.ro-half-right {
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 100%;
    top: 0px;
    right: 0px;
}

.ro-form-label {
    display: inline-block;
    border: 1px solid #484747;
    border-radius: 4px;
    background-color: #333;
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    padding-left: 15px;
}

.ro-form-error {
    max-width: 600px;
    color: #ff7766;
    position: absolute;
}

#assembly-selector-wrapper {
    position: relative;
    height: 45px;
}

#partlist-selector-wrapper {
    display: flex;
    position: relative;
    margin-top: 20px;
    height: 45px;
}

#partlist-selector-wrapper>* {
    margin-left: 20px;
}

#partlist-selector-wrapper>*:first-child {
    margin-left: 0px;
}


#partlist-selector {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
}

#partlist-download {
    flex: 1 1 auto;
}

.drawing-selector-wrapper {
    display: flex;
}

.bmk-selector-wrapper {
    display: flex;
}

#mech-drawing-selector,
#elec-drawing-selector {
    flex: 1 1 auto;
}

#mech-drawing-download,
#elec-drawing-download {
    flex: 1 1 auto;
    margin-left: 20px;
}

.passwords-container {
    position: relative;
    margin: 20px 0px 0px 0px;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 20px);
}

.passwords-container .list-group {
    margin-bottom: 20px;
}

.changelog-container {
    position: relative;
    margin: 20px 0px 0px 0px;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 20px);
}

.changelog-container .list-group {
    margin-bottom: 20px;
}

.software2-container {
    position: relative;
    margin: 0;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.software2-container .empty {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 20px;
    font-style: italic;
    color: #777;
    margin-left: 20px;
}

.software2-container .header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.software2-container .body {
    width: 100%;
    padding: 0px 20px 0px 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.software2-container .body select {
    margin-bottom: 10px;
}

.software2-container .header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.software2-container .body .section-label {
    margin-bottom: 3px;
    padding: 5px 15px 5px 15px;
    border: 0;
    border-radius: 0 !important;
    background-color: #444;
    height: 45px;
    line-height: 35px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.software2-container .body .file  {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 3px;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.software2-container .body .license  {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 3px;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    background-color: #333;
    height: 45px;
    line-height: 45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.software2-container .body .file:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.software2-container .body .file.selected {
    background-color: #444 !important;
}

.software2-container .available-langs {
    display: flex;
    padding: 0px 10px 0px 10px;
    border-right: 1px solid #222;
}

.software2-container .list-group-item>.license {
    padding: 0px 10px 0px 10px;
    cursor: default !important;
}

.software2-container .available-lang {
    width: 20px;
    /* margin-right: 5px; */
    color: #bbb;
    text-align: center;
}

.software2-container .version {
    padding: 0px 10px 0px 10px;
    width: 180px;
    border-right: 1px solid #222;
    flex: 0 0 180px;
}

.software2-container .size {
    display: block;
    width: 65px;
    padding: 0px 0px 0px 15px;
    text-align: right;
    color: #bbb;
}

.software2-container .format {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.software2-container .format img {
    width: 20px;
    height: 20px;
    overflow: hidden;
}

.software2-container .name {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.software2-container .download {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 45px;
    background-color: #2255dd;
    color: #fff;
    padding: 0px 20px 0px 20px;
    flex: 0 0 auto;
    cursor: pointer;
}


.software-container {
    position: relative;
    margin: 20px 0px 0px 0px;
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 20px);
}

.software-container .list-group-item .download-button {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 45px;
    line-height: 45px;
    padding: 0px 20px 0px 20px;
    background-color: #2255dd;
    color: #fff;
    width: 130px;
    overflow: hidden;
}

.software-container .list-group-item .download-button:hover {
    background-color: #4275ed;
}

.software-container .list-group-item .download-button.disabled {
    background-color: #444;
    color: #666;
    cursor: block;
    pointer-events: none;
}

.software-container .list-group-item select.selectable {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 45px !important;
    line-height: 45px;
    padding: 0px 20px 0px 20px;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #555;
    width: 250px;

}

.parts-container {
    position: relative;
    margin-top: 20px;
    overflow-y: scroll;
    width: 100%;
    height: calc(100% - 130px);
}

.parts-container-elec {
    height: calc(100% - 65px);
}

.parts-container-maint {
    height: calc(100% - 195px);
}


.bmk-container {
    position: relative;
    margin-top: 20px;
    overflow-y: scroll;
    width: 100%;
    height: calc(100% - 70px);
}

.bmk-row {
    display: flex;
    height: 25px;
    line-height: 25px;
    margin-bottom: 10px;
}

.bmk-part-row {
    position: relative;
}

.bmk-drawing-row {
    display: block;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bmk-drawing-link {
    height: 30px;
    line-height: 30px;
    padding: 0px 0px 0px -20px;
}

.bmk-drawing-link:hover {
    background-color: #666;
}

.bmk-col-spacer {
    flex: 10 10 100%;
}

.bmk-col {
    white-space: nowrap;
    margin-right: 20px;
}

.bmk-row>.bmk-col:last-child {
    margin-right: 0;
}

.ro-bmk-group {
    color: #aaa;
    font-style: italic;
}

.docs-container-old {
    position: relative;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    padding: 20px 20px 20px 20px;
}

.docs-container-old .list-group-item {
    position: relative;
    cursor: pointer;
}

.docs-container-old .list-group-item:hover {
    background-color: #3f3f3f;
}

.docs-container-old .list-group-item .download-button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0px 10px 0px 10px;
    background-color: #444;
    color: #fff;
    border-radius: 3px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.docs-container-old .list-group-item .download-button:hover {
    background-color: #555;
}

.cis-container {
    position: relative;
    flex: 1 1 100%;
    padding: 0;
    overflow-y: auto;
}

.docs-container {
    position: relative;
    width: 100%;
    overflow: auto;
    padding: 20px 20px 0px 20px;
}

.docs-container .list-group-item .download-button {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 45px;
    line-height: 45px;
    /* font-size: 18px; */
    padding: 0px 20px 0px 20px;
    background-color: #2255dd;
    color: #fff;
}

.docs-container .list-group-item .download-button:hover {
    background-color: #4275ed;
}

.docs-header {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

.docs-header * {
    border-radius: 0px;
}

.docs-header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.docs-header .docs-zip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 45px;
    background-color: #333;
    margin-left: 20px;
    padding: 0px 10px 0px 10px;
    border: 0px;
}

.docs-header .docs-zip:hover {
    background-color: #555;
}

.docs-header .docs-zip.disabled {
    background-color: #444;
    color: #666;
    cursor: block;
    pointer-events: none;
}

.docs-zip-full {
    cursor: pointer;
}

.docs-zip-full.disabled {
    cursor: block;
    pointer-events: none;
}

.docs-header .docs-zip .ro-png-icon {
    padding: 0;
    margin: 0;
    margin-top: -4px;
}

.docs-header .search {
    max-width: 400px;
    flex: 0 0 auto;
    margin-left: 20px;
}

.docs-header .langs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 45px;
    background-color: #333;
    padding-top: 2px;
    margin-left: 20px;
}

.docs-header .langs .lang {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0px 15px 0px 15px;
}

.docs-header .langs .lang input {
    margin: 0;
    padding: 0;
}

.docs-subtext {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
}

.threed-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
}

#threed-info {
    position: absolute;
    top: 0px;
    left: calc(100% - 500px);
    width: 500px;
    height: 100%;
    padding: 20px 20px 0px 20px;
}

#threed-info .info-table {
    margin-left: 20px;
}


#threed-info .info-table td {
    padding: 5px 5px 5px 5px;
}

#threed-info .info-table tr td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

#threed-info .info-table td.col1 {
    font-style: italic;
}

#threed-info .info-table td.col2 {
}


.ro-internal-text {
    color: #FF8C00;
}

.servicelevels-container {
    display: flex;
    flex-direction: column;
    position: relative;
    align-content: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.servicelevels-header {
    /* width: calc(100% - 20px); */
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 20px 20px 0px 20px;
}

.servicelevels-header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.servicelevels-buttons {
    display:flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-direction: column;
}

.servicelevels-button {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 320px;
    margin: 10px 20px 10px 40px;
    padding: 0px 10px 0px 10px;
    border: 0px;
    box-shadow: 0px 0px 8px 6px rgb(0 0 0 / 40%);
}

.servicelevels-text {
    text-align: justify;
}

.servicelevels-button.servicelevels-help {
    background-color: #555;
}
.servicelevels-button.servicelevels-help:hover {
    background-color: #666;
}

.servicelevels-button.servicelevels-brochure {
    background-color: #555;
}
.servicelevels-button.servicelevels-brochure:hover {
    background-color: #666;
}

.servicelevels-button.servicelevels-contact {
    background-color: #2255dd;
}
.servicelevels-button.servicelevels-contact:hover {
    background-color: #3366ee;
}

.servicelevels-button.disabled {
    cursor: default;
    background-color: #444 !important;
    color: lightgreen !important;
}

.servicelevels-content {
    position: relative;
    display: flex;
    flex-direction: row;
    margin: 20px 0px 20px 20px;
    max-width: 900px;
}

.servicelevels-cabinet {
    display: flex;
    flex-direction: row;
    /* flex: 1 1 auto; */
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
}

.servicelevel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 280px;
    max-width: 320px;
    height: calc(100% - 40px);
    min-height: 580px;
    border: 1px solid #999;
    /* border-radius: 10px; */
    background-color: rgb(2, 38, 31);
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    /* cursor: pointer; */
    transition: transform .1s, background-color 0.1s, border-color 0.1s;
    box-shadow: 0px 0px 8px 6px rgb(0 0 0 / 40%);
}
.servicelevel:last-child {
    margin-right: 20px;
}
/*
.servicelevel:hover {
    background-color: rgb(12,48,41);
} */

.servicelevel.active {
    cursor: default;
    background-color: rgb(22, 58, 51);
    transform: scale(1.02);
    border-color: gold;
    border-width: 2px;
    box-shadow: 0px 0px 8px 8px rgb(0 0 0 / 40%);
}

.servicelevel-drop {
    width: 80%;
    position: relative;
    text-align: center;
    font-size: 60px;
    color: white;
    font-weight: bold;
    height: 200px;
    line-height: 200px;
}

.servicelevel-flag {
    visibility: hidden;
    position: absolute;
    top: 20px;
    left: 20px;
    /* right: 20%; */
    /* font-size: 16px; */
    font-weight: bold;
    padding: 5px 20px 5px 20px;
    text-align: center;
    background-color: #2255dd;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 6px rgb(0 0 0 / 40%);
    z-index: 999;
}

.servicelevel-flag.visible {
    visibility: visible;
}

.servicelevel-content {
    padding-left: 10px;
    padding-right: 10px;
    color: white;
}

.servicelevel-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 5px;
}

.servicelevel-item-title {
    margin-left: 10px;
    /* font-weight: bold; */
}
.servicelevel-item-title-sub {
    font-weight: normal;
}

#servicelevelsModal .question {
    display:flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 20px;
}

#servicelevelsModal .question-text {
    height: 45px;
    line-height: 45px;
    font-size: 18px;
}

#servicelevelsModal .question-answers {
    display: flex;
    flex-direction: row;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
}

#servicelevelsModel .question-answer {
    display: flex;
    flex-direction: row;
    padding-right: 20px;
}




.digital-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.digital-header {
    width: calc(100% - 20px);
    height: 45px;
    display: flex;
    align-items: center;
    margin: 20px 20px 0px 20px;
}

.digital-header .title {
    font-size: 24px;
    margin-right: 20px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.digital-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.digital-tile {
    position: relative;
    width: 240px;
    height: 240px;
    /* border: 1px solid white; */
    margin-left: 20px;
    margin-top: 20px;
    background-color: #333;
    box-shadow: 0px 0px 12px 6px rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform .1s;
}

.digital-tile .green-hook {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 200px;
    left: 200px;
}

.digital-tile .green-hook img {}

.digital-tile:hover {
    background-color: #444;
    transform: scale(1.06);
}

.digital-tile.selected {
    transform: scale(1.06);
    background-color: #444;
}

.digital-tile img {
    height: 200px;
    /* border: 1px solid black; */
    /* margin: -5px -5px -5px -5px; */
}

.digital-tile .tagline {
    color: #ddd;
    font-size: 16px;
    /* font-weight: bold; */
    font-family: "Panton Bold";
}

#rommelagDigitalDialog {
    width: 700px;
}

.contact-table {
    margin-bottom: 20px;
    width: 400px;
}

.contact-table td {
    padding: 5px 5px 5px 5px;
}

.contact-table tr td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

.contact-table td.col1 {
    font-style: italic;
    text-align: right;
}

.contact-table td.col2 {}

.info-header .info-button {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 45px;
    background-color: #333;
    margin-left: 20px;
    padding: 0px 10px 0px 10px;
    border: 0px;
}

.info-header .info-button:hover {
    background-color: #555;
}

.info-header .info-button.disabled {
    background-color: #444;
    color: #666;
    cursor: block;
    pointer-events: none;
}

.info-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.info-container .info-header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.info-container .info-header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.info-container .info-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-left: 20px;
    margin-right: 20px;
}

.info-container .info-container .info-image {
    display: flex;
    flex-direction: column;
}

.info-container .info-image img {
    width: 400px;
    margin-bottom: 20px;
}

.info-container .info-table {
    margin-left: 20px;
}


.info-container .info-table td {
    padding: 5px 5px 5px 5px;
}

.info-container .info-table tr td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

.info-container .info-table td.col1 {
    font-style: italic;
    border-bottom: 1px solid #555;
}

.info-container .info-table td.col2 {
    border-bottom: 1px solid #555;
}


.modi-container {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    margin: 0px 20px 0px 20px;
}

.mediafile-container {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    margin: 0px 20px 0px 20px;
}

.mediafile-tile {
    width: 240px;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform .1s;
}

.mediafile-tile:hover {
    background-color: #444;
    transform: scale(1.06);
}


.mediafile-img {

}

.mediafile-name {
    font-size: 12px;
}


.mediafile-img-thumb {
    object-fit: contain;
    width: 200px;
    height: 200px;
}

.mediafile-vid-thumb {
    object-fit: contain;
    width: 200px;
    height: 200px;
}

.service-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.service-container .info-header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.service-container .info-header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.rpp-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.rpp-container .info-header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.rpp-container .info-header .title {
    font-size: 24px;
    white-space: nowrap;
    flex: 1 1 auto;
    border-bottom: 1px solid #777;
    padding-bottom: 6px;
}

.rpp-container .info-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-left: 20px;
}

.rpp-container .info-image {
    display: flex;
    flex-direction: column;
}

.rpp-container .info-image img {
    width: 400px;
}

.rpp-container .info-table {
    margin-left: 20px;
}

.rpp-container .info-table td {
    padding: 5px 5px 5px 5px;
}

.rpp-container .info-table tr td:first-child {
    white-space: nowrap;
    vertical-align: top;
}

.rpp-container .info-table td.col1 {
    font-style: italic;
}

.rpp-container .info-table td.col2 {}


.docs-wrapper {
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 85px;
    left: 0px;
    width: 100%;
    height: calc(100% - 85px);
    padding: 0px 20px 0px 20px;
}

.ro-parts-maint-list {
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0;
}

.ro-rpp-birnle {
    position: absolute;
    top: 18px;
    right: 20px;
}

.ro-rpp-birnle-top {
    position: absolute;
    top: 10px;
    right: 20px;
}

.ro-hover-icon {
    font-size: 18px;
    text-align: center;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.ro-hover-icon:hover {
    color: #3377ff;
}

.ro-print-button:hover {
    color: rgba(88, 240, 33, .7);
    transition: all .2s ease
}

.ro-print-button:before {
    content: "\f118";
    font-size: 28px;
    line-height: 28px;
    /*height:24px;*/
    display: block;
    text-align: center;
    font-family: 'Ionicons';
}

.ro-autozoom-button:hover {
    color: rgba(88, 240, 33, .7);
    transition: all .2s ease
}

.ro-autozoom-button:before {
    /* ion-arrow-move */
    content: "\f263";
    font-size: 28px;
    line-height: 28px;
    /*height:24px;*/
    display: block;
    text-align: center;
    font-family: 'Ionicons';
}

.ro-rotate-button:hover {
    color: rgba(88, 240, 33, .7);
    transition: all .2s ease
}

.ro-rotate-button:before {
    /* ion-arrow-move */
    content: "\f21c";
    font-size: 28px;
    line-height: 28px;
    /*height:24px;*/
    display: block;
    text-align: center;
    font-family: 'Ionicons';
}

.ro-trash {
    cursor: pointer;
    color: #ddd;
}

.ro-trash:hover {
    color: #fff;
}

#maint-windows-dialog,
#stats-dialog {
    min-width: 900px;
}

#user-management-dialog,
#access-management-dialog,
#group-management-dialog,
#price-promise-dialog,
#servicelevelsDialog,
#annex1-dialog {
    min-width: 60%;
}

#group-management-options-dialog #address-input {
    height: 100px;
}

#group-management-options-dialog #machines-input {
    height: 150px;
}

#group-management-options-dialog #shortnames-input {
    height: 100px;
}

#annex1-iframe {
    width:100%;
    margin:0;
    border:0;
    padding:0;
    min-height: 100%;
}

#annex1-dialog .modal-body {
    padding:0;
    margin:0;
    overflow:hidden;
    height: 700px;
}

#replace-part-dialog {
    min-width: 900px;
}

#maint-window-options-dialog {
    max-width: 400px;
    min-width: auto;
    width: auto;
}

#welcome-modal-body .input-group-addon {
    min-width: 250px;
    text-align: right;
}

#self-management-dialog {
    min-width: 800px;
}

#selfmgmt-modal-body .input-group-addon {
    min-width: 200px;
    text-align: right;
}

#price-promise-modal-body .input-group-addon.addon-450 {
    min-width: 450px;
    text-align: right;
}

.pp-form-container {
    display: flex;
    flex-direction: row;
}

.pp-form-text {
    flex: 0 0 auto;
    margin-right: 40px;
    width: 350px;
}

.pp-form-input {
    flex: 1 1 auto;
}

.pp-upload-container {
    display: flex;
    flex-direction: column;
}

.pp-upload-title {
    height: 45px;
    line-height: 45px;
    padding-left: 20px;
    background-color: #444;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pp-upload-area {
    padding: 20px;
    border-bottom: 1px dashed #555;
    border-left: 1px dashed #555;
    border-right: 1px dashed #555;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    height: 300px;
    line-height: 260px;
}

.pp-upload-area.dragover {
    background-color: #555;
    border-color: #fff;
}

.modal-content {
    background-color: #333;
}

.modal-footer .message {
    font-style: italic;
    color: #aaa;
}

.modal-body-p {
    margin-bottom: 20px;
}

.modal-dialog {
    margin-top: 90px;
}

.modal-dialog.tall {
    height: calc(100% - 180px);
}

.modal-dialog.tall .modal-content {
    height: 100%;
}

.modal-dialog.tall .modal-body {
    height: calc(100% - 140px);
}

#user-management-options-dialog {
    width: 900px;
}

#welcome-dialog {
    width: 800px;
}

#users-modal-body,
#access-modal-body,
#groups-modal-body,
#set-password-modal-body {
    position: relative;
    overflow: hidden;
    padding: 0;
}

#users-filter,
#access-filter,
#groups-filter {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 85px;
    width: 100%;
    padding: 20px 20px 20px 20px;
    margin: 0;
}

#users-scroller,
#access-scroller,
#groups-scroller {
    position: relative;
    top: 85px;
    left: 0px;
    height: calc(100% - 85px);
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0px 20px 0px 20px;
}

#op-hours-settings-dialog {
    width: 600px;
}

.ro-datepicker {
    display: inline-block;
}

.ro-datepicker>.datepicker {
    width: 358px;
}


.ro-popup-datepicker {
    text-align: center;
}

.ro-popup-datepicker td,
.ro-popup-datepicker th {
    padding: 6px 16px 6px 16px !important;
}

.ro-popup-datepicker td:hover,
.ro-popup-datepicker th:hover {
    background-color: transparent !important;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}

.ro-popup-datepicker td.active:hover,
.ro-popup-datepicker th.active:hover {
    background-color: #33608c !important;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}


.ro-maint-windows-datepicker {
    text-align: center;
    margin-top: 20px;
}

.ro-maint-windows-datepicker td,
.ro-maint-windows-datepicker th {
    padding: 6px 16px 6px 16px !important;
}

.ro-maint-windows-datepicker td:hover,
.ro-maint-windows-datepicker th:hover {
    background-color: transparent !important;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}

.ro-maint-windows-datepicker td.active:hover,
.ro-maint-windows-datepicker th.active:hover {
    background-color: #33608c !important;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}

#maint-windows-list>.list-group-item {
    cursor: pointer;
    line-height: 25px;
}

#maint-windows-list>.list-group-item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}

#cart-dialog {
    min-width: 1000px;
}

#cart-indicator {
    cursor: pointer;
    color: #ddd;
}

#cart-indicator:hover {
    color: #fff;
}

#cart-icon {
    position: absolute;
    transition: font-size ease-in-out 0.2s;
    font-size: 26px;
}

#cart-badge {
    display: block;
    margin-left: 26px;
}

.cart-table-cell {
    height: 40px;
    vertical-align: middle;
}

#cart-textarea {
    height: 400px;
    font-family: monospace;
    margin-bottom: 15px;
    /*white-space: nowrap;  overflow: auto;*/
}

#cart .input-group {
    margin-bottom: 15px;
}

#cart .input-group-addon {
    min-width: 200px;
}

#cart-csv {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    width: 0px;
    height: 0px;
}

#feedback-textarea {
    height: 200px;
    margin-bottom: 20px;
}

#artdoc.ro-tbl-cell {
    max-width: 20px;
    text-align: center;
    margin: 0px 0px 0px 0px;
}

#artdoc-elec.ro-tbl-cell {
    max-width: 20px;
    text-align: center;
    margin: 0px 10px 0px 0px;
}

#artmaint.ro-tbl-cell {
    max-width: 20px;
    text-align: center;
    margin: 0px 10px 0px 0px;
}



#drawing-pos-elec.ro-tbl-cell {
    max-width: 110px;
    text-align: left;
    margin: 0px 10px 0px 10px;
    color: #bbbb00;
}

#drawing-grp-elec.ro-tbl-cell {
    max-width: 25%;
    margin: 0px 10px 0px 10px;
    color: #999;
}

#ttl.ro-tbl-cell {
    max-width: 70px;
    text-align: center;
    margin: 0px 10px 0px 10px;
    color: #cc7788;
}

/*
Mech:
  artnum | artdoc | artmaint | drawing-pos | ttl
  70       20       30         10+40+10      10+70+10

Elec:
  artnum | artdoc | drawing-pos-elec | drawing-grp-elec
  70     | 30     | 10+110+10        | 10 + 25% + 10

Maint:
  artnum | artdoc
  70       30

*/

#title.ro-tbl-cell.ro-tbl-cell-elec {
    max-width: calc(100% - 70px - 30px - 130px - 20px - 25%);
    white-space: nowrap;
}

#title.ro-tbl-cell.ro-tbl-cell-maint {
    max-width: calc(100% - 70px - 30px);
    white-space: nowrap;
    margin-left: 10px;
}

.ro-item-amount {
    font-style: italic;
    color: #cccc33;
    margin-right: 4px;
}

.ro-item-manufacturer {
    color: #44ffff;
}

.ro-input {
    background-color: #333;
    color: #fff;
    border: 1px solid #484747 !important;
    transition: background-color ease-in-out 0.3s;
    height: 45px;
}

.ro-input[disabled],
.ro-input[readonly] {
    background-color: #333 !important;
    color: #ccc;
}

.ro-input-inline {
    display: inline-block !important;
}

.ro-input-group-active>.input-group-addon {
    background-color: #FF8C00;
}

.bootbox-input-text {
    background-color: #333;
    color: #fff;
    border: 1px solid #484747 !important;
    transition: background-color ease-in-out 0.3s;
    height: 45px;
}

.bootbox-input-text:focus {
    background-color: #555;
}

.bootbox-input-text.active {
    background-color: #dd4;
    color: black;
}


.ro-cart-amount {
    font-size: 14px;
    padding: 4px 3px 4px 3px;
    height: 22px;
    border: 1px solid #ddd;
    margin: -4px 0px -4px 0px;
    display: inline-block;
}

.ro-cart-modebutton {
    min-width: 180px;
}

.ro-elevated-input {
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

.ro-part-popup-list {
    position: absolute;
    top: 10px;
    background-color: #333;
    border-radius: 4px;
    box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.20);
    z-index: 10;
}

.ro-part-popup-list>ul>li {
    border-bottom: 0;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    border-color: #555;
    background-color: transparent !important;
}

.ro-part-popup-list>ul>li.disabled {
    box-shadow: none !important;
    color: #999;
    cursor: default;
}

.ro-part-popup-list>ul>li:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05);
}


.ro-input:focus {
    background-color: #555;
}

.ro-input.active {
    background-color: #dd4;
    color: black;
}

a#menuitem {
    cursor: pointer;
    display: flex;
}


.drawing-wrapper {
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #333;
    height: calc(100% - 65px);
    border: 0;
    border-radius: 5px;
    margin-top: 20px;
}

.drawing-wrapper-eplan {
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: #333;
    height: calc(100% - 130px);
    border: 0;
    border-radius: 5px;
    margin-top: 20px;
}


#threed-drawing-canvas {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 520px);
    height: calc(100% - 20px);
}

#mech-drawing-canvas,
#elec-drawing-canvas,
#maint-drawing-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 5px;
    background-color: #333;
    border: 0;
    font-size: 24px;
    z-index: 99;
}

#mech-drawing-canvas>div:first-child,
#elec-drawing-canvas>div:first-child,
#maint-drawing-canvas>div:first-child {
    border: 0;
    border-radius: 5px;
    background-color: #333;
}

.canvas-wrap {
    background-color: transparent;
}

canvas[data-viewer-canvas="true"] {
    background-color: transparent;
}

#elec-list-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

#mech-drawing-missing,
#elec-drawing-missing,
#maint-drawing-missing {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 5px;
    background-color: #333;
    border-color: #333;
    font-size: 24px;
    z-index: 100;
}

.drawing-missing-text {
    height: 50%;
    display: inline-block;
}

.loading-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.machine {
    width: 60vmin;
    fill: #023a33;
}

.small-shadow,
.medium-shadow,
.large-shadow {
    fill: rgba(0, 0, 0, 0.05);
}

.small {
    -webkit-animation: counter-rotation 2.5s infinite linear;
    -moz-animation: counter-rotation 2.5s infinite linear;
    -o-animation: counter-rotation 2.5s infinite linear;
    animation: counter-rotation 2.5s infinite linear;
    -webkit-transform-origin: 100.136px 225.345px;
    -ms-transform-origin: 100.136px 225.345px;
    transform-origin: 100.136px 225.345px;
}

.small-shadow {
    -webkit-animation: counter-rotation 2.5s infinite linear;
    -moz-animation: counter-rotation 2.5s infinite linear;
    -o-animation: counter-rotation 2.5s infinite linear;
    animation: counter-rotation 2.5s infinite linear;
    -webkit-transform-origin: 110.136px 235.345px;
    -ms-transform-origin: 110.136px 235.345px;
    transform-origin: 110.136px 235.345px;
}

.medium {
    -webkit-animation: rotation 3.75s infinite linear;
    -moz-animation: rotation 3.75s infinite linear;
    -o-animation: rotation 3.75s infinite linear;
    animation: rotation 3.75s infinite linear;
    -webkit-transform-origin: 254.675px 379.447px;
    -ms-transform-origin: 254.675px 379.447px;
    transform-origin: 254.675px 379.447px;
}

.medium-shadow {
    -webkit-animation: rotation 3.75s infinite linear;
    -moz-animation: rotation 3.75s infinite linear;
    -o-animation: rotation 3.75s infinite linear;
    animation: rotation 3.75s infinite linear;
    -webkit-transform-origin: 264.675px 389.447px;
    -ms-transform-origin: 264.675px 389.447px;
    transform-origin: 264.675px 389.447px;
}

.large {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 461.37px 173.694px;
    -ms-transform-origin: 461.37px 173.694px;
    transform-origin: 461.37px 173.694px;
}

.large-shadow {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 471.37px 183.694px;
    -ms-transform-origin: 471.37px 183.694px;
    transform-origin: 471.37px 183.694px;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@-webkit-keyframes counter-rotation {
    from {
        -webkit-transform: rotate(359deg);
    }

    to {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes counter-rotation {
    from {
        -moz-transform: rotate(359deg);
    }

    to {
        -moz-transform: rotate(0deg);
    }
}

@-o-keyframes counter-rotation {
    from {
        -o-transform: rotate(359deg);
    }

    to {
        -o-transform: rotate(0deg);
    }
}

@keyframes counter-rotation {
    from {
        transform: rotate(359deg);
    }

    to {
        transform: rotate(0deg);
    }
}

#search-dialog.modal-dialog {
    min-width: 800px;
    max-width: 95%;
    width: 1200px;
}

.search-result-container {
    margin-top: 20px;
    max-height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: auto;
}

.search-result-text-wrapper {
    margin-top: 15px;
    width: 100%;
}

.search-result-text {
    cursor: pointer;
}

.search-result-text:hover {
    background-color: #555;
}

.search-result-text td {
    height: 30px;
    line-height: 24px;
    padding: 0px 10px 0px 10px;
}

.search-result-text td:first-child {
    text-align: right;
}

.search-result-text-wrapper>tr th {
    height: 30px;
    line-height: 24px;
    padding: 0px 10px 0px 10px;
}

.search-result-text-wrapper>tr th:first-child {
    text-align: right;
}

.search-result {
    display: flex;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 0px 0px;
    height: 35px;
    line-height: 22px;
    border-radius: 3px;
    cursor: pointer;
}

.search-result:hover {
    background-color: #555;
}

.search-result-separator {
    display: flex;
    padding: 5px 5px 5px 5px;
    margin: 10px 0px 0px 0px;
    height: 35px;
    line-height: 22px;
    font-size: 18px;
    border-top: 1px solid #ddd;
}

.search-result-item {
    flex: 2 1 auto;
    display: flex;
}

.search-result-stype {
    /* font-style: italic; */
    padding: 0px 10px 0px 10px;
    background-color: #555;
    border-radius: 3px;
    color: #ddd;
    margin-right: 10px;
}

.modal.in {
    perspective: 2000px;
}

.modal-dialog.aside.aside-1 {
    transform-style: preserve-3d;
    transform: scale(0.8) rotateY(35deg) translateZ(-640px);
    opacity: 0.7;
}

.modal-dialog.aside.aside-2 {
    transform-style: preserve-3d;
    transform: scale(0.8) rotateY(35deg) translateZ(calc(-640px + 40px));
    opacity: 0.7;
}

.modal-dialog.aside.aside-3 {
    transform-style: preserve-3d;
    transform: scale(0.8) rotateY(35deg) translateZ(calc(-640px + 80px));
    opacity: 0.7;
}


.flex-horizontal-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-horizontal-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#machine-picker-company-wrapper .bootstrap-select.input-group-btn .btn,
#machine-picker-country-wrapper .bootstrap-select.input-group-btn .btn {
    width: 212px;
}

.bootstrap-select .btn.dropdown-toggle {
    background-color: #333;
    border: 1px solid #484747;
}

.bootstrap-select .bs-searchbox {
    padding: 4px 8px 8px 8px;
}

.bootstrap-select .bs-searchbox input {
    background-color: #444;
    color: #fff;
    height: auto;
    border-radius: 3px !important;
    padding: 4px 8px 4px 8px;
    border: 1px solid #666;
}

#machine-picker-company-wrapper .bootstrap-select>.btn,
#machine-picker-country-wrapper .bootstrap-select>.btn {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border: 1px solid #484747;
    height: 45px;
}



.instance-type-banner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    background-color: red;
    color: white;
    text-align: center;
    z-index: 999;
}

.docs-zip-full-svg-wrapper {
    display: inline-block;
    transform: translate(0px, 2px);
}

.docs-zip-full-svg-wrapper>svg {
    display: inline-block;
}

li.selected span.glyphicon.glyphicon-ok.check-mark {
    position: absolute;
    display: block;
    top: 0px;
    left: 2px;
}

.request-access {
    width: 100%;
    padding-left: 28px;
    padding-top: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
}

.request-access-title {
    display: flex;
    flex-direction: row;
}

.request-access-icon {
    font-size: 22px;
    width: 22px;
    flex: 0 0 auto;
}

.request-access-label {
    word-wrap: normal;
    line-height: 34px;
    font-size: 16px;
    font-weight: bold;
}

.request-access-text {
    width: 100%;
    padding-top: 10px;
    overflow-wrap:break-word !important;
    word-break: normal !important;
    white-space: normal !important;
}

#request-access-select {
    width: 100%;
    margin-top: 20px;
}

#request-access-button {
    width: 100%;
    margin-top: 20px;
}

.ro-access-line {
    background-color: initial !important;
    cursor:auto !important;
}

.ro-access-line:hover {
    background-color: initial !important;
    cursor:auto !important;
}

.ro-access-line .approved {
    color: green;
}

.ro-access-line .notapproved {
    color: #999;
}