/*--------------------------------------------------
  Global rules
  --------------------------------------------------*/
html {
    font-family: "Siemens Sans Professional", sans-serif;
    text-decoration: none;
    color: #000028;
    height: auto;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 14px;
    line-height: 16px;
    background-color: #FFFFFF;
    background-image: url('../img/greyscale_new.png');
    background-repeat: repeat-y;
    background-position: 0 0;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/*--------------------------------------------------
  Elements
  --------------------------------------------------*/
a {
    color: #000028;
    background: transparent;
}

a.fa {
    height: 16px;
    color: #4C4C68;
    text-decoration: none;
}

#id_reboot,
#id_shutdown {
    width: 130px;
}

input[type='submit'],
input[type='reset'],
input[type='button'],
button {
    display: inline-block;
    outline: none;
    overflow: visible;
    padding: 2px 10px;
    color: #FFFFFF;
    background: #007993 100%;
    border: 1px solid #007993;
    text-align: center;
    text-decoration: none;
    height: 32px;
    min-width: 100px;
    cursor: pointer;
    font-family: "Siemens Sans Professional", sans-serif;
}

input[type='submit'][disabled],
input[type='reset'][disabled],
input[type='button'][disabled],
button[disabled] {
    background-color: #B3B3BE;
    border: 1px solid #B3B3BE;
}

input[type='submit']:hover:not([readonly]):not([disabled]),
input[type='reset']:hover:not([readonly]):not([disabled]),
input[type='button']:hover:not([readonly]):not([disabled]),
button:not(.refresh-icon):not(#edit_table):not(#export):not(#roles_plus_icon):not(#roles_minus_icon):not(.selected_lang):not(.not_selected_lang):hover:not([readonly]):not([disabled]) {
    color: #FFFFFF;
    background-color: #196269;
}

input[type='submit']:focus,
input[type='reset']:focus,
input[type='button']:focus,
button:focus:not(.refresh-icon) {
    outline: none;
    border: 1px solid #199FFF;
}

p, .p {
    margin: 2ex 0 2ex 0;
}

.hspace {
    display: inline-block;
    width: 30px;
}

hr {
    border: none;
    height: 1px;
    color: #CCCCCC;
    background-color: #AAAAAA;
    margin: 25px 0;
}

.disabled {
    font-weight: bold;
}

.offline {
    font-weight: bold;
    color: red;
}

.online {
    font-weight: bold;
    color: limegreen;
}

.online_icon {
    background: url("/static/img/connection_online_16px.svg") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.offline_icon {
    background: url("/static/img/connection_offline_16px.svg") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.down-arrow-icon {
    background: url("/static/img/arrow_down_16px.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.up-arrow-icon {
    background: url("/static/img/arrow_up_16px.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.up-arrow-icon.menu,
.down-arrow-icon.menu {
    float: right;
}

.down-disabled-icon {
    background: url("/static/img/device_cb_ticked.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.up-disabled-icon {
    background: url("/static/img/server_cb_ticked.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.both-disabled-icon {
    background: url("/static/img/not_ticked_var_1.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.none-disabled-icon {
    background: url("/static/img/server_device_cb_ticked.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.none-disabled-green-icon {
    background: url("/static/img/server_device_cb_ticked_lightgreen.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.ui-group-blue-icon {
    background: url("/static/img/server_device_cb_ticked_UIblue.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
    float: right;
    cursor: pointer;
}

.left-arrow-white {
    background: url("/static/img/back_16px_default_white.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}


.right-arrow-white {
    background: url("/static/img/next_16px_default_white.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.up-arrow-white {
    background: url("/static/img/back_16px_default_white.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


.down-arrow-white {
    background: url("/static/img/next_16px_default_white.png") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.arrow-button-license {
    margin: 8px 0;
    min-width: 68px;
}

.arrow-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
}

.arrow-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*--------------------------------------------------
  Messages
  --------------------------------------------------*/

div.field-error-box {
    background-image: url('/static/img/errormsg-arrow.png');
    background-repeat: no-repeat;
    background-position: left center;
    cursor: hand; /* for IE */
    cursor: pointer;
    display: none;
    padding-left: 6px;
    z-index: 200;
    display: inline-flex;
    position: absolute;
}

div.field-error-box-msg {
    display: block;
    border-top: 1px solid #D72339;
    border-right: 1px solid #D72339;
    border-bottom: 1px solid #D72339;
    background-color: #FCCCD7;
    padding: 5px 24px 5px 5px;
    line-height: 16px;
    float: left;
    min-width: 300px;
    max-width: 600px;
}

div.field-error-box-x {
    color: #D72339;
    display: inline;
    font-weight: bold;
    right: 5px;
    position: absolute;
}

div.field-hint-box {
    background-image: url('/static/img/hintmsg-arrow.png');
    background-repeat: no-repeat;
    background-position: left center;
    cursor: hand; /* for IE */
    cursor: pointer;
    display: none;
    padding-left: 6px;
    position: relative;
    z-index: 200;
    display: inline-block;
    margin-left: -16px;
    vertical-align: middle;
}

div.field-hint-box-msg {
    display: block;
    border-top: 1px solid #B3B3BE;
    border-bottom: 1px solid #B3B3BE;
    border-right: 1px solid #B3B3BE;
    background-color: #FFFFFF;
    padding: 5px 15px 5px 5px;
    max-width: 606px;
    min-width: 150px;
    line-height: 16px;
    float: left;
}

.sinema-messages .error-box-msg,
.sinema-messages .info-box-msg,
.sinema-messages .warning-box-msg,
.sinema-messages .success-box-msg {
    padding: 16px 24px 16px 14px;
    max-width: 610px;
    min-width: 150px;
    display: -ms-grid;
    display: grid;
    align-items: center;
    -ms-grid-columns: 30px 1fr;
    grid-template-columns: 24px 1fr;
    margin-bottom: 30px;
}

.sinema-messages .error-box-msg {
    border-left: 4px solid #D72339;
    border-top: 1px solid #D72339;
    border-right: 1px solid #D72339;
    border-bottom: 1px solid #D72339;
    background-color: #FCCCD7;
}


.sinema-messages .warning-box-msg {
    background-color: #FFF3C1;
    border-left: 4px solid #E9C32A;
    border-right: 1px solid #CCCCD4;
    border-top: 1px solid #CCCCD4;
    border-bottom: 1px solid #CCCCD4;
}

.sinema-messages .info-box-msg,
.sinema-messages .success-box-msg {
    background-color: #CCE5EF;
    border-left: 4px solid #007EB1;
    border-right: 1px solid #CCCCD4;
    border-top: 1px solid #CCCCD4;
    border-bottom: 1px solid #CCCCD4;
}


/*For IE */
.sinema-messages .messages-inner-wrapper {
    -ms-grid-column: 2;
    grid-column: 2;
    margin-left: 14px;
}

/*--------------------------------------------------
  Header Section
  --------------------------------------------------*/
div.skip-link a {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    color: #007993;
    top: 5px;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
    padding-top: 10px;
    box-sizing: unset;
}

div.skip-link a:focus {
    height: 25px;
    width: 200px;
    font-weight: bold;
    border: 2px solid #007993;
    outline: none;
}

.header-wrapper {
    min-width: 920px;
    background-color: #FFFFFF;
}

.top-header {
    display: flex;
    justify-content: space-between;
    height: 48px;
}

.sub-header {
    align-items: center;
    background: #23233C;
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    padding-left: 20px;
    padding-right: 20px;
    color: #FFFFFF;
}

.header-divider {
    border-left: 1px solid #FFFFFF;
    margin: 3px 10px 3px 10px;
}


/* Tooltip container */
.tooltip-sub-header-line {
    position: relative;
    display: flex;
    align-items: center;
}

.tooltip-sub-header-line:focus {
    outline: none;
    border: 1px solid #199FFF;
}

/* Tooltip text */
.tooltip-sub-header-line .security-tooltip-warning-message {
    visibility: hidden;
    width: 180px;
    border: 1px solid #D72339;
    background-color: #FCCCD7;
    color: #000028;
    padding: 1px;
    border-radius: 3px;
    margin-left: 12px;
    margin-top: 32px;
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-sub-header-line:focus .security-tooltip-warning-message,
.tooltip-sub-header-line:hover .security-tooltip-warning-message {
    visibility: visible;
}

.tooltip-sub-header-line .security-tooltip-warning-message ul {
    margin: auto;
    padding-inline-start: 30px;
}

.tooltip-sub-header-line .security-tooltip-warning-message.inline {
    position: initial;
    display: flex;
    width: max-content;
    margin-top: 0;
    padding: 0;
}

.tooltip-sub-header-line .security-tooltip-warning-message.inline label {
    margin: 0;
    padding: 0 3px 0 3px;
}

.user-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    margin-right: 4px;
    background: url('/static/img/user_white_16px.svg') no-repeat;
}

#roles_plus_icon,
#roles_minus_icon {
    min-width: 16px;
}

#roles_plus_icon:focus,
#roles_minus_icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.plus-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url('/static/img/plus_16px_default.svg') no-repeat;
    border: none;
}

.plus-icon.disabled {
    background: url('/static/img/plus_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.plus-icon:hover {
    background: url('/static/img/plus_16px_hover.svg') no-repeat;
}

.plus-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.minus-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url('/static/img/minus_16px_default.svg') no-repeat;
    cursor: pointer;
    border: none;
}

.minus-icon.disabled {
    background: url('/static/img/minus_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.minus-icon:hover {
    background: url('/static/img/minus_16px_hover.svg') no-repeat;
}

.minus-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.info-icon-darkblue {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    background: url('/static/img/info_24px_default.png') no-repeat;
}

.info-action-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/info_16px_default.svg') no-repeat;
}

.info-action-icon.disabled {
    background: url('/static/img/info_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.info-action-icon:hover {
    background: url('/static/img/info_16px_hover.svg') no-repeat;
}

.info-action-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.edit-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/edit_16px_default.svg') no-repeat;
}

.edit-icon:hover {
    background: url('/static/img/edit_16px_hover.svg') no-repeat;
}

.edit-icon.disabled {
    background: url('/static/img/edit_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.edit-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.phone-icon {
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url('/static/img/sms_16px_default.svg') no-repeat;
}

.phone-icon:hover {
    background: url('/static/img/sms_16px_hover.svg') no-repeat;
}

.phone-icon.disabled {
    background: url('/static/img/sms_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.phone-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.exchange-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/communication_16px_default.svg') no-repeat;
}

.exchange-icon:hover {
    background: url('/static/img/communication_16px_hover.svg') no-repeat;
}

.exchange-icon.disabled {
    background: url('/static/img/communication_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.exchange-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.restore-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/restore_16px_default.svg') no-repeat;
}

.restore-icon:hover {
    background: url('/static/img/restore_16px_hover.svg') no-repeat;
}

.restore-icon.disabled {
    background: url('/static/img/restore_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.restore-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.delete-icon {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/delete_16px_default.svg') no-repeat;
}

.delete-icon:hover {
    background: url('/static/img/delete_16px_hover.svg') no-repeat;
}

.delete-icon.disabled {
    background: url('/static/img/delete_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.delete-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.certificate-pem-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/certificatepem_16px_default.svg') no-repeat;
}

.certificate-pem-icon:hover {
    background: url('/static/img/certificatepem_16px_hover.svg') no-repeat;
}

.certificate-pem-icon.disabled {
    background: url('/static/img/certificatepem_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.certificate-pem-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.download-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/download_16px_default.svg') no-repeat;
}

.download-icon:hover {
    background: url('/static/img/download_16px_hover.svg') no-repeat;
}

.download-icon.disabled {
    background: url('/static/img/download_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.download-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.refresh-icon {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/refresh_16x16_default.svg') no-repeat;
    border: none;
}

#renew_icon {
    min-width: 16px;
}

.refresh-icon:hover {
    background: url('/static/img/refresh_16x16_hover.svg') no-repeat;
}

.refresh-icon.disabled {
    background: url('/static/img/refresh_16x16_inactive.svg') no-repeat;
    pointer-events: none;
}

.refresh-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.certificate-pkcs12-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/certificatepkcs12_16px_default.svg') no-repeat;
}

.certificate-pkcs12-icon.disabled {
    background: url('/static/img/certificatepkcs12_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.certificate-pkcs12-icon:hover {
    background: url('/static/img/certificatepkcs12_16px_hover.svg') no-repeat;
}

.certificate-pkcs12-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.activate-icon {
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url('/static/img/activate_16px_default.svg') no-repeat;
}

.activate-icon.disabled {
    background: url('/static/img/activate_16px_inactive.svg') no-repeat;
    cursor: pointer;
    pointer-events: none;
}

.activate-icon:hover {
    background: url('/static/img/activate_16px_hover.svg') no-repeat;
}

.activate-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.deactivate-icon {
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url('/static/img/deactivate_16px_default.svg') no-repeat;
}

.deactivate-icon.disabled {
    background: url('/static/img/deactivate_16px_inactive.svg') no-repeat;
    pointer-events: none;

}

.deactivate-icon:hover {
    background: url('/static/img/deactivate_16px_hover.svg') no-repeat;
}

.deactivate-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.group-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/change_group_membership_16px_default.svg') no-repeat;
}

.group-icon.disabled {
    background: url('/static/img/change_group_membership_16px_inactive.svg') no-repeat;
    pointer-events: none;
}

.group-icon:hover {
    background: url('/static/img/change_group_membership_16px_hover.svg') no-repeat;
}

.group-icon:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.logout {
    padding-left: 16px;
    padding-right: 16px;
}

.logout:hover {
    background-color: #37374D;
}

.logout:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.logout-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/logout_16px_white.png') no-repeat;
    vertical-align: sub;
}

.logout a {
    text-decoration: none;
    color: inherit;
}

.username {
    align-items: center;
    display: flex;
    padding-right: 16px;
    padding-left: 16px;
}

.username:hover {
    background-color: #37374D;
}

.product-name {
    font-size: 24px;
    line-height: 50px;
    color: #66667E;
    white-space: nowrap;
    float: right;
    margin-right: 20px;
    font-weight: bold;
}

.sub-header-right {
    display: flex;
}

.logo {
    display: inline;
    float: left;
    margin: 5px 109px 5px 20px;
}

.language-select-menu {
    right: 0;
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    color: #FFFFFF;
    min-width: 255px;
    box-shadow: 2px 2px lightgrey;
    z-index: 1;
}

.language-select-menu button:hover {
    background-color: #37374D;
}

.language-select-menu button {
    font-size: 14px;
    background-color: #23233C;
    text-align: left;
    width: 100%;
    height: 36px;
    border: none;
}

.correct-icon {
    background: url(/static/img/ok_16px_hover.png) no-repeat;
    float: right;
    width: 15px;
    height: 15px;
}

.language-selector {
    padding-right: 16px;
    padding-left: 16px;
    position: relative;
    display: inline-block;
    color: #FFFFFF;
}

.language-selector:focus .language-select-menu,
.language-selector:hover .language-select-menu {
    display: block;
}

.language-selector:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.language-selector:focus .language-select-menu {
    outline: none;
    border: 1px solid #199FFF;
}

.language-selector:active .language-select-menu {
    background: #000028;
}

.language-selector:hover {
    background: #37374D;
}

.language-selector select {
    border: 0;
    outline: 0;
    background: white none;
}

.language-selector option {
    border: 0;
    outline: 0;
    width: 40px;
}

.online-help {
    align-items: center;
    display: flex;
    padding-left: 16px;
    padding-right: 16px;
}

.online-help:hover {
    background-color: #37374D;
}

.online-help a {
    align-items: center;
    display: flex;
}

.online-help-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/static/img/help_16px_white.png) no-repeat;
    margin-top: 0;
}

.online-help-icon:hover {
    background-color: #37374D;
    margin-top: 0;
}

.hint-msg:hover {
    background-color: #FFFFFF;
}

.hint-msg a {
    align-items: center;
    display: flex;
}

.hint-msg-icon {
    width: 24px;
    height: 24px;
    background: url(/static/img/help_24px_grey.png) no-repeat;
    margin-top: 0;
}

.hint-msg-icon:hover {
    background-color: #FFFFFF;
    margin-top: 0;
}

#id_help:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.clock {
    font-family: "Siemens Sans Professional", sans-serif;
}

.clock-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.clock-container:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.visually-hidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*--------------------------------------------------
  Side Navigation
  --------------------------------------------------*/
.sidebar {
    position: relative;
    float: left;
    width: 300px;
    background-color: #F3F3F0;
}

.menu {
    padding: 0;
    font-weight: bold;
    list-style-type: none;
    line-height: 30px;
}

.menu > .title {
    padding: 4px 16px 4px 30px;
    margin: 0;
    cursor: hand; /* for IE */
}

.menu > .title:hover {
    background: #E8E8E3;
}

.menu > .title:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.menu > li.expanded::before {
    content: '';
    display: block;
    width: 40px;
}

.menu li .fa-caret-up,
.menu li .fa-caret-down,
.menu li .fa-caret-right {
    float: right;
    padding-top: 8px;
}

.menu > .title a {
    width: 100%;
    height: 100%;
    display: inline-block;
}

.menu li.abort {
    background-image: none;
}

.menu a {
    width: 100%;
    line-height: 20px;
    text-decoration: none;
}

.submenu {
    padding: 0;
    font-weight: normal;
    list-style-type: none;
}

.submenu > li.active {
    background-color: #FFFFFF;
    border-left: 5px solid #007993;
    padding-left: 45px;
}

.submenu > li.active:focus,
.submenu > li.active:focus-within {
    background-color: #FFFFFF;
    border-left: 5px solid #007993;
    padding-left: 45px;
}

.submenu > li {
    padding: 4px 50px;
    margin: 0;
}

.submenu > li a.active {
    color: #007993;
    font-weight: bold;
}

.submenu > li:hover:not(.active) {
    background: #E8E8E3;
}

.submenu > li:focus {
    outline: none;
    border: 1px solid #199FFF;
}

/*--------------------------------------------------
  Title Bar and Tabs
  --------------------------------------------------*/
.main {
    margin-left: 300px;
    margin-bottom: 50px;
    position: relative;
    padding: 30px;
}

.tabs {
    line-height: 32px;
    height: 33px;
    overflow: auto;
    margin-bottom: 30px;
    border-bottom: 1px solid #CCCCD4;
    overflow: visible;
}

.tabs:empty {
    display: none;
}

.tabs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.tabs li {
    padding: 0;
    display: inline;
    float: left;
    height: 100%;
}

.tabs a,
.tabs span {
    display: inline-block;
    text-align: center;
    min-width: 100px;
    padding: 0 20px;
    color: #000028;
    text-decoration: none;
    background-color: #E8E8E3;
    border: 1px solid #CCCCD4;
}

.tabs a.active,
.tabs span.active {
    background-color: #FFFFFF;
    color: #007993;
    font-weight: bold;
    border-bottom: 1px solid #FFFFFF;
}

.tabs a:hover {
    background-color: #C2FFEE;
    color: #007993;
}

.tabs a:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.tabs a.active:hover {
    background-color: #FFFFFF;
}

/*--------------------------------------------------
  Widget Styles
  --------------------------------------------------*/
input[type='text'],
input[type='number'],
input[type='password'],
input[type='email'],
textarea {
    width: 230px;
    height: 32px;
    background-color: #EBF7F8;
    border: 1px solid #CCCCD4;
    padding: 0 12px;
}

input[type='text'][disabled],
input[type='number'][disabled],
input[type='password'][disabled],
input[type='email'][disabled],
textarea[disabled] {
    cursor: default;
    background-color: #EBEBEE;
    color: #66667E;
}

#id_ip_address[readonly],
#id_netmask[readonly],
#id_gateway[readonly],
#id_ipv6_address[readonly],
#id_ipv6_prefix_length[readonly],
#id_ipv6_gateway[readonly],
#id_vni_start_id[readonly],
#id_vni_port[readonly],
#id_client_start_mac[readonly]
#id_token_expire_time[readonly],
#id_time_based_system_token_expire_time[readonly],
#id_address[readonly],
#id_upload_folder[readonly],
#id_username[readonly],
#id_password[readonly],
#id_timeout[readonly],
#id_port[readonly],
#id_password1[readonly],
#id_password2[readonly],
#id_read_community_string[readonly],
#id_password3[readonly],
#id_password4[readonly],
#id_pp_form-min_password_length[readonly],
#id_pp_form-min_numeric_character[readonly],
#id_pp_form-min_special_character[readonly],
#id_pp_form-min_lowercase_letter[readonly],
#id_pp_form-min_uppercase_letter[readonly],
#id_bfp_form-failed_logins_before_blocked[readonly],
#id_bfp_form-ip_address_block_period[readonly],
#id_interval[readonly] {
    background-color: #EBEBEE;
    color: #66667E;
}

#src_client_filename[disabled],
#src_client_file_sha256[disabled] {
    cursor: default;
    background-color: #FFFFFF;
    color: #66667E;
}

input[type='text'][readonly],
input[type='number'][readonly],
input[type='password'][readonly],
input[type='email'][readonly],
textarea[readonly] {
    cursor: default;
    background-color: #FFFFFF;
    color: #66667E;
}

input[type='text']:focus:not([readonly]):not([disabled]),
input[type='number']:focus:not([readonly]):not([disabled]),
input[type='password']:focus:not([readonly]):not([disabled]),
input[type='email']:focus:not([readonly]):not([disabled]),
textarea:focus:not([readonly]):not([disabled]) {
    outline: none;
    border: 1px solid #199FFF;
}

input[type='text'][readonly]:focus,
input[type='number'][readonly]:focus,
input[type='password'][readonly]:focus,
input[type='email'][readonly]:focus,
textarea:focus {
    outline: none;
    border: 1px solid #CCCCD4;
}

input[type='text']:hover:not([readonly]):not([disabled]),
input[type='number']:hover:not([readonly]):not([disabled]),
input[type='password']:hover:not([readonly]):not([disabled]),
input[type='email']:hover:not([readonly]):not([disabled]),
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred:hover,
textarea:hover:not([readonly]):not([disabled]) {
    outline: none;
    border: 1px solid #00D7A0;
    background-color: #C2FFEE;
}

input[name='number_of_tickets_to_return'] {
    width: 65%;
}

textarea {
    width: 400px;
    height: 150px;
}

.error-display-flex-center > input[type='text'],
.error-display-flex-center > input[type='number'],
.error-display-flex-center > input[type='password'],
.error-display-flex-center > input[type='email'],
.error-display-flex-center > div > input[type='text'],
.error-display-flex-center > div > input[type='number'],
.error-display-flex-center > div > input[type='password'],
.error-display-flex-center > div > input[type='email'],
.error-display-flex-center > textarea {
    background-color: #FCCCD7;
    border: 1px solid #D72339;
}

.search-icon {
    background: url('/static/img/search_16px_default.png') no-repeat 8px center;
}

#id_search_field {
    padding-left: 32px;
}

#id_contact-connection_type {
    width: 237px;
}

#id_contact-provider {
    width: 237px;
}

#id_ticket_number {
    width: 250px;
}

input[type='checkbox'] {
    display: inline-block;
    vertical-align: middle;
    margin-left: initial;
    height: 16px;
    width: 16px;
}

input[type='checkbox']:checked {
    accent-color: #007993;
    cursor: pointer;
}

input[type='checkbox'][disabled] {
    background-color: #EBEBEE;
    color: #66667E;
}

input[type='checkbox']:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.action-disabled {
    color: #A8A8A8;
}

.log-search {
    min-width: 680px;
    height: 90px;
    padding: 30px 20px 30px 20px;
    background: #F3F3F0 100%;
    display: flex;
    flex-direction: column;
}

/*--------------------------------------------------
  Tabular View
  --------------------------------------------------*/

.generic-list {
    margin: 20px 0 20px 0;
}

.generic-list.table-layout {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.generic-list.table-layout td:not(.actions-td) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.indented {
    margin: 20px 0 30px 80px;
}

.table-wrapper {
    overflow-x: auto;
}

.generic-list th,
.generic-list td {
    text-align: left;
    padding: 4px 8px;
    height: 20px;
    vertical-align: middle;
    border: 1px solid #CCCCD4;
}

.generic-list th a:focus,
.generic-list td a:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.generic-list th input[type='checkbox'],
.generic-list td input[type='checkbox'] {
    margin-left: revert;
}

.generic-list thead th a,
.generic-list thead td a {
    width: 90%;
    display: inline-block;
    text-decoration: none;
}

.generic-list.table-layout tbody td {
    vertical-align: top;
}

.generic-list tbody tr:hover {
    background-color: #F3F3F0;
}

.generic-list tbody tr.selected {
    background: #73BAC9;
}

.generic-list tr:nth-child(even) {
    background-color: #F0F4F8;
}

.generic-list.reverse-color-order tbody tr:nth-child(odd) {
    background-color: #F0F4F8;
}

.generic-list.reverse-color-order tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

.form th:not(.generic-list th):not(.form-section-header-left) {
    padding-top: 16px;
    text-align: right;
    font-weight: normal;
    white-space: nowrap;
}

.form td:not(.generic-list td) {
    padding-left: 16px;
    padding-top: 16px;
}

.form-without-padding-left {
    margin-bottom: 16px;
}

.form-without-padding-left td:not(.generic-list td) {
    padding-top: 16px;
}

/* Remove IE arrow */
select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none; /* Safari, Chrome and Opera */
    -moz-appearance: none; /* Firefox */
    height: 32px;
    width: 256px;
    cursor: pointer;
    border: 1px solid #CCCCD4;
    background: #EBF7F8 url(/static/img/down-arrow.svg) no-repeat calc(100% - 12px) center;
    background-size: 12px;
    padding: 0 2rem 0 12px;
}

select#level,
select#category,
select#user_log {
    width: 230px;
}

select:disabled {
    cursor: default;
    background-color: #EBEBEE;
    color: #66667E;
}

select:focus {
    outline: none;
    border: 1px solid #199FFF;
}

select:hover:not([readonly]):not([disabled]) {
    outline: none;
    border: 1px solid #00D7A0;
    background-color: #C2FFEE;
}

select option {
    background-color: #F3F3F0;
}

select option:hover {
    background-color: #66667E;
    color: #FFFFFF;
}

select option[disabled] {
    color: #66667E !important;
    cursor: default;
}

/*--------------------------------------------------
  Content Pano
  --------------------------------------------------*/
.content {
    min-width: 680px;
}

.toolbar {
    margin-bottom: 30px;
    display: block;
    height: 110px;
    background: #F3F3F0 100%;
    padding-top: 14px;
}

.toolbar form {
    padding: 0 32px 0 16px;
}

.log-search .filter {
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.log-search .filter .dropdown {
    width: 100px;
}

.error-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('/static/img/error_24px.svg') no-repeat;
}

.info-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('/static/img/info_24px.svg') no-repeat;
}

.warning-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/static/img/warning_16px.svg') no-repeat;
}

.spinner-animation {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url('/static/img/busy_animation_16x16_bg_white.gif') no-repeat;
}

.full-page-spinner {
    display: inline-block;
    width: 72px;
    height: 72px;
    background: url('/static/img/busy_animation_72x72_on_white.gif') no-repeat;
}

.vspace {
    height: 18px;
}

.center-content {
    display: flex;
    text-align: center !important;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.display-flex-container,
.action-buttons-container {
    display: flex;
    align-items: center;
}

.reverse-row {
    display: flex;
    flex-direction: row-reverse;
}

.display-flex-container.space-between {
    justify-content: space-between;
}

.display-inline-flex-gap-wrapper,
.action-buttons-wrapper {
    align-items: center;
    display: inline-flex;
    gap: 16px;
    position: relative;
}

.margin_top_16px {
    margin-top: 16px;
}

.display-flex-gap-wrapper._8px {
    align-items: center;
    display: flex;
    gap: 8px;
}

.display-flex-gap-wrapper._8px:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.display-inline-flex-gap-wrapper.top,
.display-inline-flex-gap-wrapper.inside {
    margin-bottom: 16px;
}

.display-inline-flex-gap-wrapper.group {
    gap: 4px;
    padding-right: 16px;
}

.left-aligned-head {
    text-align: left !important;
}

.max-content {
    width: max-content;
}

.display-inline-flex-gap-wrapper.bottom {
    margin-bottom: 16px;
    gap: normal;
}

.display-inline-flex-gap-wrapper.user-log-status {
    margin-top: 16px;
    margin-bottom: 16px;
}

.display-inline-flex-wrapper {
    display: inline-flex;
    align-items: center;
}

.display-inline-flex-wrapper.space-between {
    justify-content: space-between;
    width: 100%;
}

.display-inline-flex-wrapper.float-right {
    float: right;
}

.display-inline-flex-wrapper.bottom {
    margin-bottom: 16px;
}

.action-icons-wrapper {
    align-items: center;
    display: flex;
    gap: 8px;
    position: relative;
}

.actions {
    margin-bottom: 30px;
}

.form td.actions {
    padding-top: 20px;
}

/*--------------------------------------------------
  Jquery Customizations
  --------------------------------------------------*/
.loader-background {
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
    display: none;
    position: fixed;
    z-index: 100;
    display: block;
    text-align: center;
}

.loader-img {
    margin-top: 25%;
}

.hidden,
.dialog-content-wrapper,
#id_yes_cancel_reset,
#hide-all-access,
#hide-device-access,
#direct_connected_subnet_template,
#routed_subnet_template,
#node-template,
#dialog-message,
#confirm-message,
#confirm-save,
#activation-message,
#tmp-user-deactivation-message,
#backup_password_change_warning,
#block-user,
#max-communication,
#certificate_accept_refuse_dialog,
#reset_container_accept_refuse_dialog {
    display: none;
}

.user-list-controls-wrapper,
.device-list-controls-wrapper {
    display: flex;
    justify-content: space-between;
}

/* Buttons with text */
.text_button,
.text_button.edit_table,
.exact_match {
    align-items: center;
    display: flex;
    gap: 8px;
}

.text_button.export {
    margin-top: 30px;
}

.text_button.export .button-text,
.text_button.edit_table .button-text,
.text_button.button-text {
    vertical-align: super;
    margin-left: 5px;
    color: #007993;
    font-weight: bold;
}

.edit_table button,
.export button {
    background: white;
    color: #007993;
    cursor: pointer;
    border: 1px solid white;
}

.export-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: url('/static/img/export_24x_default.svg') no-repeat;
}

.settings-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: url('/static/img/settings_24x_default.png') no-repeat;
}

.page-wrapper {
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid #CDD9E1;
    display: flex;
}

.num-of-pages {
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0 15px;
}

.current-page {
    width: auto;
    height: 30px;
    line-height: 30px;
    background-color: #CDD9E1;
    text-align: center;
    padding: 0 10px;
}

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

.pagination-actions button {
    height: 32px;
}

.item-per-page-wrapper {
    display: flex;
    margin-left: 20px;
    gap: 4px;
}

.item-per-page-wrapper .text {
    line-height: 30px;
    margin-left: 5px;
}

.item-per-page-wrapper .dropdown {
    width: 70px;
    display: flex;
}

.position-inline-flex-full {
    display: inline-flex;
    width: 100%;
}

.ui-progressbar-value.ui-widget-header {
    background: #DFE6ED;
}

.license-title {
    font-weight: bold;
    margin-bottom: 20px;
}

.license-body {
    margin-bottom: 20px;
}

.license-step {
    margin-top: 30px;
}

.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-draggable .ui-resizable {
    padding: 0;
    font-family: "Siemens Sans Professional", sans-serif;
}

.ui-dialog-titlebar-close {
    visibility: hidden;
}

#availableColumns,
#visibleColumns {
    width: 220px;
    height: 200px;
    background: #FFFFFF none;
}

select#availableColumns,
select#visibleColumns {
    padding: 0 12px;
}

#availableColumns:focus,
#visibleColumns:focus {
    outline: none;
    border: 1px solid #199FFF;
}

#availableColumns option:not(select),
#visibleColumns option:not(select) {
    padding: 8px 12px;
    background-color: #FFFFFF;
    color: #000028;
}

#availableColumns option:checked,
#visibleColumns option:checked {
    background: #73BAC9 -webkit-linear-gradient(bottom, #73BAC9 0%, #73BAC9 100%);
    -webkit-text-fill-color: #000028;
}

#availableColumns option:hover,
#visibleColumns option:hover {
    background-color: #F3F3F0;
}

.no-spin-buttons input::-webkit-outer-spin-button,
.no-spin-buttons input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spin-buttons input[type=number] {
    -moz-appearance: textfield;
}

.head1 {
    width: 1em;
}

.head2 {
    width: 2em;
}

.head3 {
    width: 3em;
}

.head4 {
    width: 4em;
}

.head5 {
    width: 5em;
}

.head5.no-wrap {
    white-space: nowrap;
}

.head5-3 {
    width: 5.3em;
}

.head6 {
    width: 6em;
}

.head6.no-wrap {
    white-space: nowrap;
}

.head7 {
    width: 7em;
}

.head7.no-wrap {
    white-space: nowrap;
}

.head8 {
    width: 8em;
}

.head8.no-wrap {
    white-space: nowrap;
}

.head8-5 {
    width: 8.5em;
}

.head9 {
    width: 9em;
}

.head9.no-wrap {
    white-space: nowrap;
}

.head9-5 {
    width: 9.5em;
}

.head10 {
    width: 10em;
}

.head10.no-wrap {
    white-space: nowrap;
}

.head11 {
    width: 11em;
}

.head11.no-wrap {
    white-space: nowrap;
}

.head12 {
    width: 12em;
}

.head12.no-wrap {
    white-space: nowrap;
}

.head13 {
    width: 13em;
}

.head14 {
    width: 14em;
}

.head15 {
    width: 15em;
}

.head15.no-wrap {
    white-space: nowrap;
}

.head16 {
    width: 16em;
}

.head16.no-wrap {
    white-space: nowrap;
}

.head17 {
    width: 17em;
}

.head18 {
    width: 18em;
}

.head18.no-wrap {
    white-space: nowrap;
}

.head19 {
    width: 19em;
}

.head20 {
    width: 20em;
}

.head20.no-wrap {
    white-space: nowrap;
}

.head21 {
    width: 21em;
}

.head22 {
    width: 22em;
}

.head22.no-wrap {
    white-space: nowrap;
}

.head23 {
    width: 23em;
}

.head25 {
    width: 25em;
}

.head25.no-wrap {
    white-space: nowrap;
}

.head30 {
    width: 30em;
}

.head32 {
    width: 32em;
}

.head36 {
    width: 36em;
}

.head50 {
    width: 50em;
}

.head59 {
    width: 59em;
}

.head82 {
    width: 82em;
}

.link-text {
    color: #007993;
    text-decoration: none;
}

.link-text:hover {
    color: #196269;
    cursor: hand;
    text-decoration: underline;
}

.link-text:active {
    color: #196269;
}

.link-text:visited {
    color: #73BAC9;
}

.link-text:disabled {
    opacity: 0.5;
    color: #B3B3BE;
}

.link-text:focus {
    outline: 2px solid #199FFF;
}

.required {
    color: #D72339;
}

#progressbar {
    width: 236px;
}

.form-section-header {
    font-weight: bold;
    text-align: left;
}

.form-section-header-left {
    text-align: left;
}

.form-section-header-left.padding-top_16px {
    padding-top: 16px;
}

.section-divider-wrapper {
    align-items: center;
    display: flex;
    gap: 10px;
}

.section-divider-title {
    word-break: break-word;
    white-space: normal;
    margin-right: 16px;
    font-weight: bold;
    text-align: left;
    max-width: 180px;
}

.password-policy > th > .section-divider-wrapper > .section-divider-title {
    white-space : nowrap;
}

.hr {
    height: 1px;
    background-color: #66667E;
}

.section-divider-first-line {
    flex-grow: 8;
    padding: 1px;
}

.section-divider-second-line {
    flex-grow: 0.4;
    padding: 1px;
}

#down_arrow {
    cursor: pointer;
    border: solid #4C4C68;
    border-width: 0 3px 3px 0;
    display: inline-block;
    margin-top: -5px;
    padding: 4px;
    transform: rotate(45deg);
}

#right_arrow {
    cursor: pointer;
    border: solid #4C4C68;
    border-width: 0 3px 3px 0;
    display: inline-block;
    margin-top: -5px;
    padding: 4px;
    transform: rotate(-45deg);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.user-agreement {
    text-align: justify;
    width: 50%;
    height: 100%;
    border: groove;
    padding: 15px;
    overflow: auto;
    margin-bottom: 16px;
}

.table-td-50px-expansion {
    width: 50px;
}

.table-td-100px-expansion {
    width: 100px;
}

.table-td-150px-expansion {
    width: 150px;
}

.preview-th {
    vertical-align: baseline;
}

.img-logo {
    width: 254px;
    height: 100px;
    border: 1px solid #CCCCD4;
}

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

.show_ticket_numbers_wrapper > div:first-child {
    text-align: left;
}

.show_ticket_numbers_wrapper label.toggle {
    margin-left: auto;
    margin-right: 12px;
}

.info-icon-darkblue.event-log {
    vertical-align: middle;
}

.log-search.user-log {
    height: 160px;
}

#exact_match {
    margin-left: 197px;
}

.log-search-date {
    width: 184px;
}

.search-label {
    margin-left: 52px;
}

.info-icon-darkblue.user-log {
    vertical-align: middle;
}

.node-info.thead-td {
    width: 95%;
}

#protocol-info, #duration-info {
    width: 80%;
}

.filter-div {
    align-items: center;
    display: inline-flex;
    height: 24px;
}

#log_wrapper {
    width: fit-content;
}

#update_warning {
    margin-left: 50px;
    margin-top: 50px;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #B3B3BE;
    border-radius: 4px;
    background-color: #EBEBEE;
}

.table-condensed .btn {
    background-color: #FFFFFF;
    border: none;
}

.box-btn {
    display: inline;
    margin: 0 5px 5px 0;
}

.hg-name {
    font-weight: bold;
    display: inline;
}

.hg-delete {
    font-weight: bold;
    cursor: pointer;
    padding-left: 20px;
}

.shown {
    display: table-row;
}

.subnets-wrapper {
    width: max-content;
}

.local-subnets-wrapper td > textarea, .local-subnets-wrapper td > select {
    width: 176px;
}

.node-list-wrapper {
    padding-left: 173px;
}

.license-passive {
    color: grey;
}

#wakeup-dt-chosen {
    font-weight: bold;
    background: #DFE6ED;
}

#available-columns, #visible-columns {
    text-align: left;
}

#id_right_arrow_white,
#id_up_arrow_white {
    margin-bottom: 16px;
}

.edit_table_dialog th,
.edit_table_dialog td {
    padding-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
}

.flex_direction_column {
    display: flex;
    flex-direction: column;
}

.display-inline-flex-gap-wrapper.edit_table_action_buttons {
    margin-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
}


#no-button,
#cancel-button,
#close-button,
#reset-button,
#id_cancel,
#id_cancel_upload,
#id_cancel_reboot,
#id_cancel_shutdown,
#id_refuse {
    background-color: #FFFFFF;
    border: 1px solid #007993;
    color: #007993;
}

#no-button:hover,
#cancel-button:hover,
#close-button:hover {
    background-color: #C2FFEE;
    border: 1px solid #196269;
    color: #196269;
}

#no-button:focus,
#cancel-button:focus,
#close-button:focus {
    outline: none;
    border-color: #199FFF;
}

.heading {
    font-weight: normal;
}

.display-block {
    display: block;
}

.white-space-nowrap {
    white-space: nowrap;
}

.fa.fa-clipboard {
    cursor: pointer;
    outline: none;
    border: none;
    font-size: 1.3em;
    color: #007993;
}

.fa.fa-clipboard:hover {
    color: #196269;
}

.fa.fa-clipboard:focus {
    box-shadow: 0 0 0 2px #199FFF;
}

.col_5 {
    width: 5%
}

.col_5-3 {
    width: 5.3%
}

.col_5-6 {
    width: 5.6%
}

.col_6 {
    width: 6%
}

.col_6-2 {
    width: 6.2%
}

.col_6-6 {
    width: 6.6%
}

.col_6-7 {
    width: 6.7%
}

.col_6-8 {
    width: 6.8%
}

.col_7-7 {
    width: 7.7%
}

.col_8 {
    width: 8%
}

.col_8-1 {
    width: 8.1%
}

.col_8-3 {
    width: 8.3%
}

.col_8-5 {
    width: 8.5%
}

.col_8-8 {
    width: 8.8%
}

.col_9-4 {
    width: 9.4%
}

.col_10 {
    width: 10%
}

.col_10-6 {
    width: 10.6%
}

.col_11 {
    width: 11%
}

.col_11-4 {
    width: 11.4%
}

.col_12 {
    width: 12%
}

.col_13-5 {
    width: 13.5%
}

.col_12-4 {
    width: 12.4%
}

.col_13-5 {
    width: 13.5%
}

.col_14 {
    width: 14%
}

.col_14-1 {
    width: 14.1%
}

.col_15 {
    width: 15%
}

.col_15-5 {
    width: 15.5%
}

.col_16 {
    width: 16%
}

.col_16-2 {
    width: 16.2%
}

.col_16-4 {
    width: 16.4%
}

.col_16-8 {
    width: 16.8%
}

.col_17 {
    width: 17%
}

.col_17-4 {
    width: 17.4%
}

.col_18 {
    width: 18%
}

.col_18-1 {
    width: 18.1%
}

.col_19 {
    width: 19%
}

.col_19-1 {
    width: 19.1%
}

.col_19-2 {
    width: 19.2%
}

.col_19-8 {
    width: 19.8%
}

.col_20 {
    width: 20%
}

.col_20-5 {
    width: 20.5%
}

.col_20-5 {
    width: 20.5%
}

.col_20-7 {
    width: 20.7%
}

.col_20-8 {
    width: 20.8%
}

.col_21-2 {
    width: 21.2%
}

.col_21-3 {
    width: 21.3%
}

.col_21 {
    width: 21%
}

.col_22 {
    width: 22%
}

.col_22-3 {
    width: 22.3%
}

.col_23 {
    width: 23%
}

.col_23-7 {
    width: 23.7%
}

.col_23-8 {
    width: 23.8%
}

.col_24 {
    width: 24%
}

.col_25 {
    width: 25%
}

.col_25-1 {
    width: 25.1%
}

.col_25-2 {
    width: 25.2%
}

.col_26 {
    width: 26%
}

.col_26-5 {
    width: 26.5%
}

.col_27 {
    width: 22.3%
}

.col_27-8 {
    width: 27.8%
}

.col_28 {
    width: 28%
}

.col_28-3 {
    width: 28.3%
}

.col_28-4 {
    width: 28.4%
}

.col_29 {
    width: 29%
}

.col_29-9 {
    width: 29.9%
}

.col_30_1 {
    width: 30%
}

.col_30 {
    width: 33%
}

.col_31 {
    width: 31%
}

.col_31-3 {
    width: 31.3%
}

.col_31-4 {
    width: 31.4%
}

.col_33 {
    width: 33%
}

.col_33-8 {
    width: 33.8%
}

.col_35 {
    width: 35%
}

.col_39 {
    width: 39%
}

.col_40-7 {
    width: 40.7%
}

.col_47-4 {
    width: 47.4%
}

.col_50-5 {
    width: 50.5%
}

.col_50-9 {
    width: 50.9%
}

.col_52 {
    width: 52%
}

.col_52-6 {
    width: 52.6%
}

.col_63 {
    width: 63%
}

.col_65 {
    width: 65%
}

.col_66-2 {
    width: 66.2%
}

.col_67-3 {
    width: 67.3%
}

.col_68 {
    width: 68%
}

.col_68-7 {
    width: 68.7%
}

.col_68-9 {
    width: 68.9%
}

.col_69 {
    width: 69%
}

.col_69-5 {
    width: 69.5%
}

.col_70 {
    width: 70%
}

.col_71-7 {
    width: 71.7%
}

.col_72 {
    width: 72%
}

.col_72-2 {
    width: 72.2%
}

.col_73-5 {
    width: 73.5%
}

.col_74 {
    width: 74%
}

.col_74-2 {
    width: 74.2%
}

.col_74-8 {
    width: 74.8%
}

.col_74-9 {
    width: 74.9%
}

.col_76-2 {
    width: 76.2%
}

.col_76-3 {
    width: 76.3%
}

.col_77-7 {
    width: 77.7%
}

.col_78-8 {
    width: 78.8%
}

.col_79-2 {
    width: 79.2%
}

.col_79-5 {
    width: 79.5%
}

.col_80 {
    width: 80%
}

.col_80-9 {
    width: 80.9%
}

.col_82-6 {
    width: 82.6%
}

.col_85 {
    width: 85%
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
    --ck-color-base-background: #EBF7F8;
    --ck-focus-ring: 1px solid #00D7A0;
}

input[type="file"]::file-selector-button {
    font-family: "Siemens Sans Professional", sans-serif;
    border: 0;
    background-color: #007993;
    height: 32px;
    min-width: 110px;
    padding: 2px 10px;
    color: #FFFFFF;
}

input[type="file"]::file-selector-button:hover {
    background-color: #196269;
}

input[type="file" i] {
    font-family: "Siemens Sans Professional", sans-serif;
    color: #000028;
}

input[type="file" i]:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.inline-block-form,
.shown-btn,
.subnet-settings-inline-block tbody,
.node-inline-block,
.subnet-inline-block {
    display: inline-block;
}

table.portgroup {
    border-collapse: initial;
    border: 1px solid lightgray;
    border-radius: 3px;
    margin-bottom: 3px;
    padding-bottom: 20px;
    min-width: 550px;
    padding-left: 10px;
}

.node-inline-block .portgroup-divider .section-divider-wrapper {
    width: 730px !important;
}

.node-subnet-label-height._20px {
    height: 20px;
}

.node-subnet-container {
    display: inline-flex;
    flex-direction: column;
}

.node-subnet-display-wrapper {
    display: grid;
}

.node-subnet-display-wrapper.inline-flex {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.node-subnet-display-wrapper label:focus,
.node-subnet-display-wrapper.node-name label:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.port_icon {
    background: url("/static/img/port_icon.svg") no-repeat;
    background-size: contain;
    display: inline-block;
    width: 16px;
    height: 20px;
}

.port-tooltip {
    position: relative;
    display: flex;
    align-items: center;
}

.port-tooltip:focus {
    outline: none;
    border: 1px solid #199FFF;
}

.port-tooltip-text {
    visibility: hidden;
    width: max-content;
    background-color: #FFFFFF;
    color: #000028;
    text-align: left;
    border-radius: 3px;
    padding: 4px;
    border: 1px solid #B3B3BE;
    margin-left: 20px;
    margin-top: 24px;
    position: absolute;
    white-space: nowrap;
    max-width: none;
    z-index: 1;
}

.port-tooltip:focus .port-tooltip-text,
.port-tooltip:hover .port-tooltip-text {
    visibility: visible;
}

.generic-list.table-layout td.node-subnet-cell {
    overflow: visible;
}

.permission-container {
    display: flex;
    border: none;
    flex-direction: column;
    margin: 0 0;
    padding: 0.35em 0.0em 0.75em;
}

.input-tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.input-tooltip-container input {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.input-tooltip-container:hover .input-tooltip:not(:empty) {
    display: flex;
}

.input-tooltip {
    display: none;
    align-items: center;
    position: absolute;
    background-color: #FFFFFF;
    border: 1px solid #B3B3BE;
    color: #000028;
    height: 32px;
    white-space: normal;
    z-index: 1;
    top: 0;
    left: 100%;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 2px;
    border-radius: 3px;
}

.input-tooltip-text {
    display: inline-block;
    vertical-align: middle;
}

.hostgroups,
.ports {
    display: flex;
    flex-wrap: wrap;
    max-width: 750px;
}

.hostgroup-custom-th {
    width: 200px;
}

.hostgroups .btn.box-btn,
.ports .btn.box-btn {
    margin-bottom: 8px;
    box-sizing: border-box;
}

.form td:not(.generic-list td).error-display-flex-center {
    display: flex;
    align-items: center;
    position: relative;
}

/************ DropDown element (start) **********************/
.custom-select {
    position: relative;
    font-family: "Siemens Sans Professional", sans-serif;
}

.custom-select select {
    display: none; /*hide original SELECT element:*/
}

.custom-select .select-selected {
    height: 32px;
    cursor: pointer;
    border: 1px solid #CCCCD4;
    background: #EBF7F8 url(/static/img/down-arrow-16x10.png) no-repeat calc(100% - 12px) center;
    background-size: 8px;
    padding: 0 2rem 0 12px;
    line-height: 32px;
    width: 256px;
    box-sizing: border-box;
    overflow: hidden;
    outline: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-select .select-selected:not(.disabled-drop-down):focus-visible,
.custom-select .select-items:not(.select-hide) .custom-select-option:focus-visible {
    border: 1px solid #199FFF;
}

.custom-select .select-selected.select-arrow-active {
    background-color: #D1FFF2;
}

.custom-select .select-selected,
.custom-select .select-items .custom-select-option {
    background-color: #EBF7F8;
    cursor: pointer;
    user-select: none;
    height: 32px;
    outline: none;
}

.custom-select .select-items {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    line-height: 32px;
    box-shadow: 4px 8px 12px rgb(0 0 0 / 20%), -4px 8px 12px rgb(0 0 0 / 20%);
    width: max-content;
    min-width: 256px;
}

#select_items_items_per_page {
    min-width: 171px;
}

.select-hide {
    display: none;
}

.custom-select .select-items .custom-select-option.same-as-selected {
    background-color: #66667E;
    color: #F2F2F4;
}

.custom-select .select-items .custom-select-option.currently-selected {
    border: 1px solid #199FFF;
}

.custom-select .select-items .custom-select-option {
    padding: 0 1em 0 12px;
    background-color: #F3F3F0;
    box-sizing: border-box;
    border: 0.1px solid #E1E1DE;
}

.custom-select .select-items .custom-select-option:hover {
    background-color: #E8E8E3;
    color: unset;
}

.custom-select .select-items .custom-select-option.item-disabled {
    color: #ACACB8;
}

.custom-select .select-selected.disabled-drop-down {
    background-color: #EBEBEE;
    color: #66667E;
    pointer-events:none;
}

.vxlan_nodes .custom-select .select-selected {
    width: 100%;
}

.item-per-page-wrapper .dropdown .custom-select .select-selected,
.item-per-page-wrapper .dropdown .custom-select .select-items {
    width: 71px;
}

.authorized_layer2_networks .hostgroups {
    padding-top: 16px;
}


    /* Container styles */
    .container {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    /* Left container styles */
    .left-container {
      width: 48%; /* Adjust the width as needed */
      background-color: #e0e0e0; /* Example background color */
      padding: 10px;
    }

    /* Right container styles */
    .right-container {
      width: 48%; /* Adjust the width as needed */
      background-color: #f0f0f0; /* Example background color */
      padding: 10px;
    }
/************ DropDown element (end) **********************/
