@import url("/icons.css");
@import url("/loading_bar.css");
*,
*:before,
*:after {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
font-size: 100%;
outline: 0;
}
*::selection {
background: transparent;
}
*::-moz-selection {
background: transparent;
}
input[type=text]::selection,
input[type=password]::selection,
.selectable *::selection {
background: #8fdaff;
}
input[type=text]::-moz-selection,
input[type=password]::-moz-selection,
.selectable *::-moz-selection {
background: #8fdaff;
}
html {
height: 100%;
font-size: 100%;
background-color: #f0eee6;
will-change: background-color;
transition: background-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
overflow-x: hidden;
overflow-y: scroll;
}
body {
padding: 0;
margin: 0;
color: #3F464C;
line-height: 1;
}
html,
body {
overscroll-behavior-y: contain;
}
iframe {
border: 0;
width: 100%;
}
.oldData,
.hidden {
display: none;
}
h1,
h2,
h3,
h4,
h5,
p,
span,
div,
hr,
br,
nav,
header,
section,
menu {
margin: 0;
padding: 0;
border: 0;
}
input {
margin: 0;
padding: 0;
}
select {
color: #3F464C;
}
hr {
padding: 0;
border-top: 1px solid #d5d5d5;
margin: 1rem -1rem;
}
.radioBtnBox {
opacity: 1;
transition: opacity 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
padding: 0 0 0 1.8rem;
}
.radioBtnBox hr {
margin: 1rem -1rem 1rem 0;
}
p.led {
background-repeat: no-repeat;
background-position: center left;
background-size: 1rem;
padding-left: 1.5rem;
}
p.led.green {
background-image: url("/ic_led_green.gif");
}
p.led.gray {
background-image: url("/css/rd/icons/ic_led_gray.gif");
}
input[type="button"]:not(.icon),
input[type="submit"]:not(.icon),
input[type="reset"]:not(.icon),
button:not(.icon) {
min-width: 5.5rem;
min-height: 1.75rem;
overflow: hidden;
padding: 0 1rem;
margin: 0.15rem 0 0.15rem 0.5rem;
background-color: #e9edf0;
border: 1px solid #d8dfe3;
border-radius: 0.25rem;
color: #4269a4;
cursor: pointer;
will-change: border, background-color, color, padding;
transition: border 100ms,
background-color 100ms,
color 100ms,
padding 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
input[type="button"]:not(.icon).first,
input[type="submit"]:not(.icon).first,
input[type="reset"]:not(.icon).first,
button:not(.icon).first,
input[type="button"]:not(.icon):first-Child,
input[type="submit"]:not(.icon):first-Child,
input[type="reset"]:not(.icon):first-Child,
button:not(.icon):first-Child {
margin: 0;
}
input[type="button"]:not(.icon):active,
input[type="submit"]:not(.icon):active,
input[type="reset"]:not(.icon):active,
button:not(.icon):active {
background-color: #bcccd4;
border: 1px solid #b0bec5;
}
input[type="button"]:not(.icon):disabled,
input[type="submit"]:not(.icon):disabled,
input[type="reset"]:not(.icon):disabled,
button:not(.icon):disabled {
background-color: #e0e0de;
border: 1px solid #d8dfe3;
color: #969693;
cursor: default;
}
input[type="button"]:not(.icon).wait,
input[type="submit"]:not(.icon).wait,
input[type="reset"]:not(.icon).wait,
button:not(.icon).wait {
background-image: url(/css/rd/animations/anim_waitCircleWhite_backgroundBlue.gif);
background-position: center left 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
padding-left: 2.25rem;
}
@media (max-width: 63.9375em) {
input[type="button"]:not(.icon),
input[type="submit"]:not(.icon),
input[type="reset"]:not(.icon),
button:not(.icon) {
min-width: 5.5rem;
min-height: 2.125rem;
}
}
@media (max-width: 63.9375em) {
html {
background-color: #fff;
}
body {
height: calc( 100% - 6.25rem);
}
.radioBtnBox {
padding: 0 0 0 1.8rem;
}
}
@media (min-width: 127.5em) {
html {
font-size: 0.79vw;
}
}
.disableNode {
opacity: 0.5;
}
.disableNode .disableNode,
.disableNode .disableNode .disableNode {
opacity: 1;
}
.disableNode a {
color: #000000;
text-decoration: none;
pointer-events: none;
cursor: default;
}
main .disabled {
color: #888888;
}
header {
height: 6.25rem;
width: 100%;
position: fixed;
backface-visibility: hidden;
top: 0;
left: 0;
z-index: 100;
background-color: #006ec0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
header.logout {
height: 6.25rem;
}
.blueBarLogo {
height: 6.25rem;
background-image: url("/logo_fritzDiamond.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 7rem;
-webkit-box-flex: 0 0 14.5rem;
-moz-box-flex: 0 0 14.5rem;
-webkit-flex: 0 0 14.5rem;
-ms-flex: 0 0 14.5rem;
flex: 0 0 14.5rem;
margin: 0 1.5rem 0 0;
cursor: pointer;
overflow: hidden;
}
header .lnk {
padding: 1.5rem 1rem 0 1rem;
color: #fff;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.blueBarRightBox {
height: 3.75rem;
min-width: 1rem;
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-align-self: top;
-moz-box-align-self: top;
-webkit-align-self: top;
-ms-align-self: top;
align-self: top;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.blue_bar_title {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-align-self: center;
-moz-box-align-self: center;
-webkit-align-self: center;
-ms-align-self: center;
align-self: center;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
margin: 0;
padding-left: 1.05rem;
font-size: 1.85rem;
font-weight: bold;
text-align: left;
color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: default;
height: 3rem;
line-height: 3.25rem;
will-change: all;
transition: all 150ms;
}
.blue_bar_title.fade {
line-height: 0;
color: transparent;
}
.blueBarLnk {
display: block;
color: #ffffff;
-webkit-box-flex: 0 0 8rem;
-moz-box-flex: 0 0 8rem;
-webkit-flex: 0 0 8rem;
-ms-flex: 0 0 8rem;
flex: 0 0 8rem;
text-align: right;
-webkit-box-align-self: center;
-moz-box-align-self: center;
-webkit-align-self: center;
-ms-align-self: center;
align-self: center;
margin: 0;
cursor: pointer;
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
overflow: hidden;
font-size: 1.05rem;
line-height: 3.75rem;
text-decoration: none;
}
@media (max-width: 69.9375em) {
.blueBarLnk.liveTv {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
color: transparent;
padding: 0;
margin: 0;
}
}
.blueBarUser {
-webkit-box-flex: 0 0 11rem;
-moz-box-flex: 0 0 11rem;
-webkit-flex: 0 0 11rem;
-ms-flex: 0 0 11rem;
flex: 0 0 11rem;
font-size: 0.95rem;
line-height: 3.75rem;
padding: 0 2rem 0 1rem;
cursor: pointer;
overflow: hidden;
-webkit-box-ordinal-group: 9999;
-moz-box-ordinal-group: 9999;
-ms-flex-order: 9999;
-webkit-order: 9999;
order: 9999;
background-image: url("/ic_dots_vertical_white.svg");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 0.5rem;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}
@media (max-width: 63.9375em) {
header,
header.logout {
height: 3.75rem;
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
.internalTab header,
.mainTab header {
box-shadow: none;
}
.blueBarLogo {
height: 3.75rem;
background-image: url("/css/rd/icons/ic_bars_vertical_white.svg");
background-size: 2rem;
-webkit-box-flex: 0 0 4rem;
-moz-box-flex: 0 0 4rem;
-webkit-flex: 0 0 4rem;
-ms-flex: 0 0 4rem;
flex: 0 0 4rem;
margin: 0;
}
.hideMenu .blueBarLogo {
-webkit-box-flex: 0 0 0;
-moz-box-flex: 0 0 0;
-webkit-flex: 0 0 0;
-ms-flex: 0 0 0;
flex: 0 0 0;
height: 0;
width: 0;
}
.blueBarRightBox {
height: 3.75rem;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.blue_bar_title {
font-size: 1.25rem;
font-weight: normal;
padding: 0;
}
.blue_bar_title.hide {
color: transparent;
}
.cache .blue_bar_title {
padding: 0 0 0 1.55rem;
background-image: url("/css/rd/animations/anim_waitCircleWhite_backgroundBlue.gif");
background-position: 0 1.1rem;
background-size: 1rem;
background-repeat: no-repeat;
}
.blueBarLnk {
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
color: transparent;
}
.blueBarLnk,
.blueBarLnk.myfritz {
padding: 0;
margin: 0;
}
.blueBarUser {
line-height: 3.75rem;
}
}
@media (max-width: 31.1875em) {
.blueBarUser {
-webkit-box-flex: 0 0 0;
-moz-box-flex: 0 0 0;
-webkit-flex: 0 0 0;
-ms-flex: 0 0 0;
flex: 0 0 0;
font-size: 0;
max-width: 0;
}
}
@media (min-width: 64em) {
.blueBarLogo.logout {
background-image: url("/logo_fritzDiamond.svg");
background-position: center right;
background-repeat: no-repeat;
background-size: 7rem;
color: transparent;
height: 6.25rem;
cursor: default;
-webkit-box-flex: 0 0 10.75rem;
-moz-box-flex: 0 0 10.75rem;
-webkit-flex: 0 0 10.75rem;
-ms-flex: 0 0 10.75rem;
flex: 0 0 10.75rem;
}
.logout .blue_bar_title {
padding-left: 6.05rem;
}
}
@media (max-width: 47.4375em) {
.blueBarLogo.logout {
height: 3.75rem;
}
}
#userMenuBox,
#menuBox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: column;
-moz-box-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 15.5rem;
background-color: #f0eee6;
position: fixed;
backface-visibility: hidden;
top: 0;
left: 0;
z-index: 110;
will-change: left, right;
transition: left 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
right 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.hideMenu #menuBox {
left: -17.5rem;
}
#userMenuBox {
z-index: 1020;
top: 0;
left: auto;
right: -17.5rem;
background-color: transparent;
}
#userMenuBox.show {
right: 0;
}
.menuArea {
height: auto;
background-color: #fff;
border-right: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
overflow-y: auto;
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: column;
-moz-box-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border: 0;
margin: 1.25rem 0.5rem 0 0;
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
#menuBox .footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem 0.45rem;
text-align: center;
z-index: -1;
}
#menuBox .footer a {
display: inline-block;
margin: 0.3rem 0.4rem;
text-decoration: none;
color: #969693;
font-size: 85%;
}
#userMenuBox .menuArea {
text-align: left;
box-shadow: -0.23rem 0 0.7rem 0 rgba( 100, 100, 100, 0.4);
-webkit-box-justify-content: space-between;
-moz-box-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
margin: -0.5rem 0 0 0;
transition: margin 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
#userMenuBox.foot,
#userMenuBox .menu_part {
border-top: 1px solid #d5d5d5;
}
.menue {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: column;
-moz-box-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.menue.foot {
overflow: hidden;
background-color: #F5F4F0;
border-top: 1px solid #d5d5d5;
}
.menu_item {
display: block;
padding: 0;
height: 0;
line-height: 0;
margin: 0;
color: transparent;
cursor: pointer;
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-position: left 0.4rem center, right 0.47rem center;
background-repeat: no-repeat;
background-size: 1.65rem, 0.93rem;
font-size: 1.125rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
will-change: height, padding, color;
transition: height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
padding 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.menu_item.show {
padding: 0 0 0 2.58rem;
height: 2.3rem;
line-height: 2.4rem;
color: #3F464C;
}
.menu_item.icon_expert {
background-image: url("/elem_switch_on.svg");
background-position: right 0.47rem top 60%;
background-repeat: no-repeat;
background-size: 3rem;
border-bottom: 1px solid #d5d5d5;
border-top: none;
}
.menu_item.icon_expert.show {
border-top: 1px solid #d5d5d5;
}
.wiz .menu_item.icon_expert.show {
padding: 0;
height: 0;
line-height: 0;
color: transparent;
border-top: none;
}
.menu_item.icon_expert.off {
background-image: url("/css/rd/elements/elem_switch_off.svg");
}
.menu_item .timer {
float: right;
padding: 0 0.5rem;
font-size: 0.975rem;
background-color: rgba(0, 0, 0, 0.08);
will-change: background-color;
transition: background-color 100ms;
}
.menu_item .timer:active {
background-color: rgba(0, 0, 0, 0.2);
}
.icon_audio {
background-image: url("/css/rd/icons/ic_gearWheels_gray.svg");
}
.icon_audio.open {
background-image: url("/css/rd/icons/ic_gearWheels_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_wizOv {
background-image: url("/ic_wizard_gray.svg");
}
.icon_wizOv.selected {
background-image: url("/ic_wizard_white.svg");
}
.icon_diag {
background-image: url("/ic_magnifyingGlass_hartbeat_gray.svg");
}
.icon_diag.open {
background-image: url("/ic_magnifyingGlass_hartbeat_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_dect {
background-image: url("/ic_phoneInCradle_gray.svg");
}
.icon_dect.open {
background-image: url("/ic_phoneInCradle_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_fworld {
background-image: url("/css/rd/icons/ic_circlesConnected_gray.png");
}
.icon_info {
background-image: url("/css/rd/icons/ic_circle_info_gray.png");
}
.icon_lan {
background-image: url("/ic_dualMonitor_gray.svg");
}
.icon_lan.open {
background-image: url("/ic_dualMonitor_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_edit_plc {
background-image: url("/css/rd/icons/ic_house_smallDoor_gray.svg");
}
.icon_edit_plc.open {
background-image: url("/css/rd/icons/ic_house_smallDoor_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_edit_plc.selected {
background-image: url("/css/rd/icons/ic_house_smallDoor_white.svg");
}
.icon_sh {
background-image: url("/css/rd/icons/ic_house_powerSymbol_gray.svg");
}
.icon_sh.open {
background-image: url("/css/rd/icons/ic_house_powerSymbol_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_sh.selected {
background-image: url("/css/rd/icons/ic_house_powerSymbol_white.svg");
}
.icon_repMode {
background-image: url("/css/rd/icons/ic_repmode_gray.svg");
}
.icon_repMode.open {
background-image: url("/css/rd/icons/ic_repmode_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_repMode.selected {
background-image: url("/css/rd/icons/ic_repmode_white.svg");
}
.icon_inet {
background-image: url("/ic_globe_gray.svg");
}
.icon_inet.open {
background-image: url("/ic_globe_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_overview {
background-image: url("/ic_house_bigDoor_gray.svg");
}
.icon_overview.selected {
background-image: url("/ic_house_bigDoor_white.svg");
}
.icon_sys {
background-image: url("/ic_dotInCircle_gray.svg");
}
.icon_sys.open {
background-image: url("/ic_dotInCircle_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_tel {
background-image: url("/ic_telephoneReceiver_gray.svg");
}
.icon_tel.open {
background-image: url("/ic_telephoneReceiver_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_wlan {
background-image: url("/ic_wlanBars_gray.svg");
}
.icon_wlan.open {
background-image: url(/ic_wlanBars_gray.svg),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_dvb {
background-image: url("/css/rd/icons/ic_monitorShowsTriangle_gray.svg");
}
.icon_dvb.open {
background-image: url("/css/rd/icons/ic_monitorShowsTriangle_gray.svg"),
url("/css/rd/icons/ic_triangleOpen_up_black.svg");
}
.icon_dvb.selected {
background-image: url("/css/rd/icons/ic_monitorShowsTriangle_gray.svg");
}
.submenu {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: column;
-moz-box-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#userMenuBox .menu_item.show {
padding: 0 0 0 0.7rem;
line-height: 2.3rem;
font-size: 1rem;
}
#userMenuBox .submenu .menu_item,
.submenu .menu_item {
padding: 0 0 0 3.35rem;
height: 0;
line-height: 0;
color: transparent;
z-index: -1;
font-size: 1rem;
}
#userMenuBox .submenu.open .menu_item.show,
.submenu.open .menu_item.show {
height: 2.3rem;
line-height: 2.4rem;
color: inherit;
z-index: inherit;
}
.submenu.open .menu_item:active,
.menu_item:active {
background-color: #ccd1d4;
will-change: all;
transition: all 100ms;
}
#userMenuBox.menu_item.disabled:active,
#userMenuBox .menu_item.disabled {
color: #A0A4A8;
background-color: #f4f4f4;
}
.submenu.open .menu_item.selected,
.menu_item.selected {
background-color: #268edf;
color: #fff;
cursor: pointer;
}
.menu_item.with_sub.selected {
font-weight: bold;
color: #3F464C;
background-color: transparent;
}
.logoBox {
background-color: #006ec0;
width: 100%;
padding: 0;
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-box-flex: 0 0 6.25rem;
-moz-box-flex: 0 0 6.25rem;
-webkit-flex: 0 0 6.25rem;
-ms-flex: 0 0 6.25rem;
flex: 0 0 6.25rem;
}
#userMenuBox .logoBox {
padding: 0;
box-shadow: -0.23rem -0.23rem 0.7rem 0 rgba( 0, 0, 0, 0.2);
-webkit-box-flex: 0 0 3.25rem;
-moz-box-flex: 0 0 3.25rem;
-webkit-flex: 0 0 3.25rem;
-ms-flex: 0 0 3.25rem;
flex: 0 0 3.25rem;
}
.logoArea {
background-image: url("/logo_fritzDiamond.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 7rem;
height: 6.25rem;
cursor: pointer;
font-size: 1.25rem;
color: transparent;
padding: 0 0 0 4.625rem;
margin: 0 1rem 0 0;
will-change: color;
transition: color 250ms;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 3.75rem;
}
#userMenuBox .logoArea {
font-family: 'Source Sans Pro', Arial, sans-serif;
background-image: url("/ic_triangleOpen_right_white.svg");
background-position: right 0.5rem center;
background-size: 0.6rem;
height: 3.75rem;
line-height: 3.75rem;
vertical-align: middle;
overflow: hidden;
font-size: 1rem;
margin: 0;
padding: 0 2rem 0 1rem;
color: #ffffff;
cursor: pointer;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 63.9375em) {
.menuArea {
margin: 0 0 5.25rem 0;
box-shadow: none;
}
#userMenuBox .menuArea {
margin: 0;
}
#menuBox {
left: -16rem;
}
#menuBox.show {
left: 0;
z-index: 1000;
}
.hideMenu #menuBox {
left: -17.5rem;
}
#menuBox .footer {
padding: 0.5rem 0.3rem;
}
#userMenuBox .logoBox,
.logoBox {
-webkit-box-flex: 0 0 3.75rem;
-moz-box-flex: 0 0 3.75rem;
-webkit-flex: 0 0 3.75rem;
-ms-flex: 0 0 3.75rem;
flex: 0 0 3.75rem;
}
.logoArea {
background-position: left 0.5rem center;
background-size: 3.75rem;
height: 3.75rem;
line-height: 3.75rem;
cursor: pointer;
color: #fff;
}
#userMenuBox .logoArea {
height: 3.75rem;
line-height: 3.75rem;
}
.menu_item.show {
height: 2.7rem;
line-height: 2.8rem;
}
.submenu .menu_item.show {
height: 0;
line-height: 0;
}
.submenu.open .menu_item.show {
height: 2.7rem;
line-height: 2.8rem;
}
.menu_item.icon_expert {
background-position: right 0.47rem top 53%;
}
}
main {
display: block;
position: relative;
top: 0;
margin: 6.25rem 1rem 1rem 16rem;
padding: 1rem;
min-height: 22rem;
will-change: margin-left, padding, height;
transition: margin-left 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
padding 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
text-align: left;
line-height: 1.25rem;
background-color: #ffffff;
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
main * {
opacity: 1;
transition: opacity 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
main > div {
overflow: hidden;
}
main.no_content {
height: 20rem;
background-image: url("/css/rd/animations/anim_waitCircleBlue_backgroundBright.gif");
background-position: center;
background-repeat: no-repeat;
background-size: 2.25rem;
}
main.no_content * {
opacity: 0;
}
.mainTab main {
padding-top: 3.1rem;
}
.mainBtn main {
padding-bottom: 3.8rem;
}
@media (max-width: 63.9375em) {
.hideMenu main,
main {
margin: 3.75rem 0 0 0;
padding: 0.75rem 0.5rem 1rem 0.5rem;
border: 0 solid #fff;
min-height: 100%;
width: 100%;
box-shadow: none;
top: 0;
}
.mainTab main {
padding-top: 3.1rem;
}
.mainBtn main {
padding-bottom: 3.8rem;
}
main.no_content {
height: 85%;
}
}
div#uiLuatime {
margin-top: 1rem;
}
table#uiScanResult,
table#uiScanResult .cut_overflow {
white-space: pre;
}
main a {
color: #4269a4;
text-decoration: none;
outline: none;
vertical-align: baseline;
cursor: pointer;
}
main a:hover {
text-decoration: underline;
}
main a.download.icon {
vertical-align: middle;
}
main a.download:hover {
text-decoration: none;
}
main img {
outline: none;
}
main a img {
border-width: 0;
vertical-align: middle;
}
main a img.linkimg {
vertical-align: text-bottom;
}
main textarea {
resize: none;
}
main p {
margin: 0.375rem 0 0.375rem 0;
}
main h2,
main h3,
main h4,
main h5 {
margin: 0;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
}
main h2 {
font-size: 1.25rem;
}
main h3 {
color: #003365;
margin-bottom: 0.125rem;
margin-top: 0.3125rem;
font-size: 1.15rem;
}
main h4 {
font-size: 1rem;
margin-bottom: 0.3125rem;
}
main h4.homelua {
font-size: 1rem;
margin-bottom: 0.125rem;
}
main h5 {
font-size: 1rem;
font-weight: normal;
margin-top: 0.3125rem;
}
main li {
font-size: 0.95rem;
}
main .no_link {
text-decoration: none;
color: #3f464c;
}
main .txt_center {
text-align: center;
}
main .no_link img {
border: 0;
}
main .text_led {
position: relative;
top: 0.125rem;
}
main .cut_overflow {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
main span.cut_overflow {
display: inline-block;
}
main .connection_type {
white-space: nowrap;
}
main .connection_type div {
position: relative;
white-space: nowrap;
padding: 0 0 0 1.23rem;
}
main .connection_type img {
position: absolute;
top: 0;
left: 0;
}
main .subtitle,
main .hintMsg,
main div.hint h4 {
font-weight: bold;
}
main div.hint h4 {
margin: 0;
padding-bottom: 0;
}
main div.hint {
margin: 1rem 0;
}
main div.hint strong {
margin-right: 0.5rem;
}
main div.hint.strong {
padding: 0.5rem 0.75rem;
background-color: #eeeeee;
}
main .ErrorMsg {
color: #ff0000;
}
main .WarnMsg {
color: #cc0000;
}
main .WarnMsgBold {
font-weight: bold;
color: #cc0000;
}
main .attention {
font-weight: bold;
}
main .LuaSaveVarError {
color: #ff0000;
border: 1px solid #ff0000;
padding: 1rem 0.3125rem;
width: 90%;
margin: 1rem auto;
}
main .LuaSaveVarError .icon_help {
background-image: url("/css/rd/icons/ic_help_blue.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 1rem;
text-decoration: none;
width: 1.1rem;
display: inline-block;
}
main .clear_float {
clear: both;
}
main button.icon {
min-width: 2.625rem;
height: 1.625rem;
vertical-align: middle;
overflow: hidden;
background-color: #f7f7f5;
cursor: pointer;
border-radius: 0.25rem;
border: 1px solid #bcccd4;
margin: 0.2rem 0.25rem;
background-position: center center;
background-repeat: no-repeat;
background-size: 2rem;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
}
main button.icon.fonbook {
padding: 0 0 2px 0;
}
main button.icon:active {
border: 1px solid #7e97a3;
background-color: #e0e0de;
}
main button.icon:disabled {
background-color: #e8e8e6;
cursor: default;
border: 1px solid #d8dfe3;
opacity: 0.5;
box-shadow: none;
}
main button.icon.edit {
background-image: url(/css/rd/icons/ic_pencil_blue.svg);
}
main button.icon.feedback {
background-image: url(/css/rd/icons/ic_feedback.svg);
}
main button.icon.delete {
background-image: url("/css/rd/icons/ic_cross_red.svg");
}
main button.icon.book {
background-image: url("/css/rd/icons/ic_fonbook.gif");
}
main button.icon.eject_usb {
background-image: url("/css/rd/icons/ic_eject_usb.gif");
background-size: 1rem;
}
main .cnt_char {
font-size: 0.9rem;
color: #444444;
}
main #uiViewHomeDiv {
color: #3f464c;
}
main #foot_menu_box {
clear: both;
margin: 1rem 0.5rem;
font-size: 1rem;
text-align: right;
color: #003365;
}
main #foot_menu_box a {
margin: 0;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
main table {
border: 1px solid #c6c7be;
background-color: #ffffff;
border-collapse: collapse;
}
main table.grid {
background-color: transparent;
border: none;
}
main table a {
color: #4269a4;
}
main .tborder {
border: 1px solid #c6c7be;
}
main tr,
main th,
main td {
border: 0;
vertical-align: middle;
text-align: left;
font-size: 0.95rem;
}
main td {
overflow: hidden;
text-overflow: ellipsis;
}
main td.fix {
white-space: nowrap;
}
main .overview_tabs tr,
main .overview_tabs th,
main .overview_tabs td {
font-size: 1rem;
}
main th {
font-weight: bold;
}
main .table_no_border {
border: 0;
background-color: #faf8f2;
}
main .net_edit_first_row {
width: 11.25rem;
}
main .net_edit_notfirst_row {
width: 7.5rem;
}
main div.zebra > div:nth-child(even) {
background-color: #ffffff;
}
main div.zebra a {
color: #4269a4;
}
main table.OnlyHead {
width: 100%;
table-layout: fixed;
}
main table.OnlyHead table {
table-layout: fixed;
}
main table.OnlyHead th {
background-color: #eeeeee;
padding: 0.125rem 0.25rem;
}
main table.zebra,
main table.zebra_reverse,
main table.js_zebra {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
main table.noborder {
border: none;
margin: 0;
}
main table.zebra tr:nth-child(odd) th,
main table.zebra tr:nth-child(odd) td {
background-color: #f7f7f5;
}
main table.zebra tr:nth-child(even) th,
main table.zebra tr:nth-child(even) td {
background-color: #ffffff;
}
main table.zebra_reverse th,
main table.zebra th,
main table.zebra_reverse td,
main table.zebra td {
padding: 0.125rem 0.25rem;
}
main table.zebra_reverse tr:nth-child(odd) th,
main table.zebra_reverse tr:nth-child(odd) td {
background-color: #ffffff;
}
main table.zebra_reverse tr:nth-child(even) th,
main table.zebra_reverse tr:nth-child(even) td {
background-color: #f7f7f5;
}
main table.zebra tr.zebraOdd th,
main table.zebra tr.zebraOdd td {
background-color: #f7f7f5;
}
main table.zebra tr.zebraEven th,
main table.zebra tr.zebraEven td {
background-color: #ffffff;
}
main table.zebra_reverse tr.zebraOdd th,
main table.zebra_reverse tr.zebraOdd td,
main table.js_zebra tr.zebraOdd th,
main table.js_zebra tr.zebraOdd td {
background-color: #ffffff;
}
main table.zebra_reverse tr.zebraEven th,
main table.zebra_reverse tr.zebraEven td,
main table.js_zebra tr.zebraEven th,
main table.js_zebra tr.zebraEven td {
background-color: #f7f7f5;
}
main table.zebra tr:nth-child(odd) td.reverse,
main table.zebra tr.zebraOdd td.reverse {
background-color: #ffffff;
}
main table.zebra tr:nth-child(even) td.reverse,
main table.zebra tr.zebraEven td.reverse {
background-color: #f7f7f5;
}
main th.hint,
main td.hint {
text-align: center;
}
main th.buttonrow,
main td.buttonrow {
text-align: right;
width: 3rem;
}
main td.buttonrow.warn {
text-align: center;
}
main td.buttonrow div.empty_btn {
height: 1.5rem;
}
main th.iconrow,
main td.iconrow {
text-align: center;
width: 1.5rem;
background-position: center 0.5rem;
}
main .thead .sort_up,
main .thead .sort_down,
main .thead .sort_no {
background-image: url("/css/rd/icons/ic_sort_no.gif");
background-repeat: no-repeat;
background-position: right center;
background-size: 0.8rem;
width: 1rem;
display: inline-block;
}
main .thead .sort_up {
background-image: url("/css/rd/icons/ic_sort_up.gif");
}
main .thead .sort_down {
background-image: url("/css/rd/icons/ic_sort_down.gif");
}
main .thead .sortable {
cursor: pointer;
}
main .thead th.iconrow_ext,
main .thead td.iconrow_ext {
text-align: center;
width: 3.125rem;
}
main th.btncolumn,
main td.btncolumn {
text-align: right;
white-space: nowrap;
}
main tr.emptylist {
height: 1.875rem;
}
main tr.emptylist td {
text-align: center;
}
main .telbook_pic_icon {
background-image: url("/css/rd/icons/ic_person_colored.gif");
background-repeat: no-repeat;
background-position: center center;
}
main tr.separator td {
text-align: center;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
main tr.separator td p {
margin: auto;
margin-top: -1.125rem;
height: 1.25rem;
}
main tr.separator td span {
background-color: #ffffff;
padding: 0 0.625rem;
}
main tr.separator td hr {
color: #90A6A5;
background-color: #90A6A5;
width: 93%;
}
main td.separator {
text-align: center;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
main td.separator p {
margin: auto;
margin-top: -1.125rem;
height: 1.25rem;
}
main td.separator span {
background-color: #ffffff;
padding: 0 0.625rem;
}
main td.separator hr {
color: #90A6A5;
background-color: #90A6A5;
width: 93%;
}
main table.js_zebra tr.tsep td {
background-color: #d7e9f7;
color: #7b90a0;
height: 1.625rem;
padding-left: 0.3rem;
}
main .icon_tam,
main .icon_person,
main .icon_device,
main .globe_green,
main .globe_gray,
main .globe_online,
main .globe_green_guest,
main .globe_online_guest,
main .plc_green,
main .plc_gray,
main .connected_via,
main .app_cam,
main .app_blocked,
main .downstream,
main .upstream,
main .led_green,
main .led_red,
main .led_gray,
main .led_green_guest,
main .led_wait,
main .dev_blocked,
main .no_symbol {
background-image: url("/css/rd/icons/ic_globe_green.gif");
background-repeat: no-repeat;
background-position: 0.1rem 0.2rem;
background-size: 1rem;
height: auto;
border: 0;
padding: 0;
margin: 0;
}
main .no_symbol {
background-image: url("");
}
main .plc_green {
background-image: url("/css/rd/icons/ic_house_smallDoor_blue.svg");
}
main .plc_gray {
background-image: url("/css/rd/icons/ic_house_smallDoor_gray.svg");
}
main .icon_tam {
background-image: url("/ic_tam_answer.svg");
}
main .icon_person {
background-image: url("/css/rd/icons/ic_person_colored.gif");
}
main .icon_device {
background-image: url("/ic_telephoneInCradle.gif");
}
main .globe_gray {
background-image: url("/ic_globe_gray.svg");
}
main .globe_online {
background-image: url("/ic_globe.gif");
}
main .globe_green_guest {
background-image: url("/css/rd/icons/ic_globe_guest.gif");
}
main .globe_online_guest {
background-image: url("/css/rd/icons/ic_globe_guest.gif");
}
main .app_cam {
background-image: url("/css/rd/icons/ic_appcam.png")
}
main .app_blocked,
main .dev_blocked {
background-image: url("/css/rd/icon/ic_blocked.png")
}
main .downstream {
background-image: url("/css/rd/icons/ic_triangleOpen_down_gray.svg");
}
main .upstream {
background-image: url("/css/rd/icons/ic_triangleOpen_up_gray.svg");
}
main .led_green,
main .led_red,
main .led_gray,
main .led_green_guest {
background-image: url("/ic_led_green.gif");
}
main .led_wait {
background-image: url("/css/rd/animations/anim_waitCircleWhite_backgroundBlue.gif");
}
main .led_green_guest {
background-image: url("/css/rd/icons/ic_led_green_guest.gif");
}
main .led_red {
background-image: url("/css/rd/icons/ic_led_red.gif");
}
main .led_gray {
background-image: url("/css/rd/icons/ic_led_gray.gif");
}
main .switch_on,
main .switch_off {
background-image: url("/elem_switch_on.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: 4rem;
height: 1.375rem;
width: 4rem;
border: 0;
padding: 0;
margin: 0;
}
main .switch_off {
background-image: url("/css/rd/elements/elem_switch_off.svg");
}
main .call_in,
main .call_out,
main .call_in_fail,
main .call_no,
main .call_current,
main .call_direction_out,
main .call_direction_in,
main .call_rejected,
main .wlan_rssi0,
main .wlan_rssi1,
main .wlan_rssi2,
main .wlan_rssi3,
main .wlan_rssi4,
main .wlan_rssi5,
main .wlan_rssi_guest0,
main .wlan_rssi_guest1,
main .wlan_rssi_guest2,
main .wlan_rssi_guest3,
main .wlan_rssi_guest4,
main .wlan_rssi_guest5,
main .wlan_own_mac {
background-image: url("/ic_telephoneReceiver_arrow_blue.svg");
background-repeat: no-repeat;
background-position: 0.1rem 0.2rem;
background-size: 1.1rem;
height: 1rem;
width: 1rem;
border: 0;
padding: 0;
margin: 0;
}
main .call_out {
background-image: url("/ic_telephoneReceiver_arrow_green.svg");
}
main .call_in_fail {
background-image: url("/ic_telephoneReceiver_square_red.svg");
}
main .call_rejected {
background-image: url("/ic_telephoneReceiver_cross_red.svg");
}
main .call_no {
background-image: none;
}
main .call_current {
background-image: url("/ic_telephoneReceiver_doubleArrow_green.svg");
}
main .call_direction_out {
background-image: url("/css/rd/icons/ic_call_current_outgoing.gif");
background-position: left;
padding-left: 1rem;
}
main .call_direction_in {
background-image: url("/css/rd/icons/ic_call_current_incoming.gif");
background-position: left;
padding-left: 1rem;
}
main .zebra .call_direction_out,
main .call_direction_out {
background-image: url("/css/rd/icons/ic_call_current_outgoing.gif");
background-position: left;
padding-left: 1rem;
}
main .zebra .call_direction_in,
main .call_direction_in {
background-image: url("/css/rd/icons/ic_call_current_incoming.gif");
background-position: left;
padding-left: 1rem;
}
main .wlan_rssi0,
main .wlan_rssi1,
main .wlan_rssi2,
main .wlan_rssi3,
main .wlan_rssi4,
main .wlan_rssi5,
main .wlan_rssi_guest0,
main .wlan_rssi_guest1,
main .wlan_rssi_guest2,
main .wlan_rssi_guest3,
main .wlan_rssi_guest4,
main .wlan_rssi_guest5,
main .wlan_own_mac {
background-position: center center;
}
main .wlan_rssi0 {
background-image: url("/css/rd/icons/ic_wlanRSSI_00.svg");
}
main .wlan_rssi1 {
background-image: url("/css/rd/icons/ic_wlanRSSI_01.svg");
}
main .wlan_rssi2 {
background-image: url("/css/rd/icons/ic_wlanRSSI_02.svg");
}
main .wlan_rssi3 {
background-image: url("/css/rd/icons/ic_wlanRSSI_03.svg");
}
main .wlan_rssi4 {
background-image: url("/css/rd/icons/ic_wlanRSSI_04.svg");
}
main .wlan_rssi5 {
background-image: url("/css/rd/icons/ic_wlanRSSI_05.svg");
}
main .wlan_rssi_guest0 {
background-image: url("/css/rd/icons/ic_wlan_rssi0_guest.png");
}
main .wlan_rssi_guest1 {
background-image: url("/css/rd/icons/ic_wlan_rssi1_guest.png");
}
main .wlan_rssi_guest2 {
background-image: url("/css/rd/icons/ic_wlan_rssi2_guest.png");
}
main .wlan_rssi_guest3 {
background-image: url("/css/rd/icons/ic_wlan_rssi3_guest.png");
}
main .wlan_rssi_guest4 {
background-image: url("/css/rd/icons/ic_wlan_rssi4_guest.png");
}
main .wlan_rssi_guest5 {
background-image: url("/css/rd/icons/ic_wlan_rssi5_guest.png");
}
main .wlan_own_mac {
background-image: url("/css/rd/icons/ic_antennaAndPerson.gif");
}
main .ethernet,
main .lan,
main .wlan,
main .plc,
main .user,
main .vpn,
main .active .lan,
main .active .wlan,
main .active .plc,
main .active .user,
main .active .vpn {
background-repeat: no-repeat;
background-position: 0.1rem 0.1rem;
}
main .ethernet,
main .lan {
background-image: url("/css/rd/icons/ic_lan_gray.svg");
}
main .wlan {
background-image: url("/ic_wlanBars_gray.svg");
}
main .plc {
background-image: url("/css/rd/icons/ic_house_smallDoor_gray.svg");
}
main .user {
background-image: url("/css/rd/icons/ic_person_gray.svg");
}
main .vpn {
background-image: url("/css/rd/icons/ic_key_old_gray.svg");
}
main .active .ethernet,
main .active .lan {
background-image: url("/css/rd/icons/ic_lan_blue.svg");
}
main .active .wlan {
background-image: url("/ic_wlanBars_blue.svg");
}
main .active .plc {
background-image: url("/css/rd/icons/ic_house_smallDoor_blue.svg");
}
main .active .user {
background-image: url("/css/rd/icons/ic_person_blue.svg");
}
main .active .vpn {
background-image: url("/css/rd/icons/ic_key_old_blue.svg");
}
main input[type=text],
main input[type=password] {
border: 1px solid #b0bec5;
height: 1.625rem;
}
main .formular {
margin: 0;
padding-left: 1.5rem;
padding-right: 0;
}
main .formular.small_indent {
padding-left: 0.3125rem;
}
main span.error,
main input.error,
main select.error,
main div.error input {
background-color: #ffcccc;
}
main input.change {
background-color: #F8F8C0;
}
main input.changedisabled {
padding: 1px;
}
main .formular .formular.grid label:not(input + label),
main .formular.grid label:not(input + label) {
width: 12.5rem;
}
main .formular .formular.grid select {
width: 12.5rem;
}
main .formular.grid select {
width: 12.5rem;
}
main span.iconwithtext,
main a.textlink,
main .formular input + a,
main .fakeTextInput,
main .readOnlyField,
main label,
main input,
main select {
display: inline-block;
margin: 0.25rem 0;
}
main label.suffix {
margin-left: 0.5rem;
}
main .reverse input {
text-align: right;
}
main span.iconwithtext,
main a.textlink,
main .formular input + a,
main label {
line-height: 1.5rem;
}
main a.textlink {
vertical-align: top;
}
main p > a.textlink {
vertical-align: top;
margin: 0;
line-height: initial;
display: inline-block;
}
main label,
main input,
main label + select {
vertical-align: top;
/*middle; ARA01 15.06.2016*/
}
input[type="checkbox"],
input[type="radio"] {
height: 1.5rem;
width: 0.8125rem;
}
main label input,
main label select {
margin: 0 0.5rem;
}
main select {
max-width: 95%;
}
main .formular select.numbers.fixed {
min-width: 5rem;
}
main .formular select.numbers,
main .formular input.numbers,
main .fakeTextInput.numbers,
main .readOnlyField.numbers {
text-align: right;
}
main .formular select.inner,
main .formular input.inner {
vertical-align: baseline;
}
main .formular select.inner {
display: inline;
}
main .formular input.ip {
vertical-align: baseline;
}
main .formular p {
margin: 0;
margin-top: 0.375rem;
margin-bottom: 0.375rem;
}
main .formular p.form_input_explain,
main .formular p.form_checkbox_explain,
main .formular p.form_radio_explain,
main .formular label + input + p {
margin-top: 0;
}
main .formular input + a {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
main .formular ol {
padding-left: 1.5rem;
}
main .formular label {
width: 12.5rem;
margin-right: 0.375rem;
max-width: 100%;
}
main .formular .formular label {
width: 10.9375rem;
}
main .formular .formular .formular label {
width: 9.375rem;
}
main .formular .form_input_note {
margin-left: 13.05rem;
margin-top: 0;
margin-bottom: 0.1rem;
}
main .ErrorMsg .formular .form_input_note {
text-align: center;
margin: 0.625rem 0 0.625rem 0;
}
main .formular .form_input_explain,
main form .form_input_explain {
padding-left: 1.5rem;
}
main form .form_checkbox_explain,
main .formular .form_checkbox_explain {
padding-left: 1.375rem;
}
main .formular .form_radio_explain {
padding-left: 1.0625rem;
}
main .formular .formular .form_input_note {
margin-left: 11.5625rem;
}
main .formular .formular .formular .form_input_note {
margin-left: 10rem;
}
main .close.formular label {
width: auto;
margin-left: 0;
}
main .close .formular label {
width: auto;
margin-left: 0;
}
main .close .formular .formular label {
width: auto;
margin-left: 0;
}
main .close .formular .form_input_note {
margin-left: 0;
}
main .narrow .formular label,
main .narrow.formular label {
width: 9.375rem;
}
main .narrow .formular .formular label {
width: 7.8125rem;
}
main .narrow .formular .formular .formular label {
width: 6.25rem;
}
main .narrow .formular .form_input_note {
margin-left: 10rem;
}
main .narrow .formular .formular .form_input_note {
margin-left: 8.4375rem;
}
main .narrow .formular .formular .formular .form_input_note {
margin-left: 6.875rem;
}
main .wide .formular label {
width: 15.625rem;
}
main .wide .formular .formular label {
width: 14.0625rem;
}
main .wide .formular .formular .formular label {
width: 12.5rem;
}
main .wide .formular .form_input_note {
margin-left: 16.25rem;
}
main .wide .formular .formular .form_input_note {
margin-left: 14.6875rem;
}
main .wide .formular .formular .formular .form_input_note {
margin-left: 13.125rem;
}
main .ultrawide .formular label {
width: 20rem;
}
main .ultrawide .formular .form_input_note {
margin-left: 20.625rem;
}
main .extremwide .formular label {
width: 18.75rem;
}
main .extremwide .formular .formular label {
width: 17.1875rem;
}
main .extremwide .formular .formular .formular label {
width: 15.625rem;
}
main .extremwide .formular .form_input_note {
margin-left: 19.375rem;
}
main .extremwide .formular .formular .form_input_note {
margin-left: 17.8125rem;
}
main .extremwide .formular .formular .formular .form_input_note {
margin-left: 16.25rem;
}
main .formular span + label,
main input + label {
margin-left: 0.5rem;
}
main .formular label + label,
main .formular .noBreakGroup > label,
main .formular .formular .noBreakGroup > label,
main .formular .formular .formular .noBreakGroup > label,
main .formular span + label,
main .formular input + label,
main .formular .formular input + label,
main .formular .formular .formular input + label,
main .narrow.formular span + label,
main .narrow .formular span + label,
main .narrow .formular label + label,
main .narrow .formular input + label,
main .narrow .formular .formular input + label,
main .narrow .formular .formular .formular input + label,
main .extremwide.formular span + label,
main .extremwide .formular label + label,
main .extremwide .formular span + label,
main .extremwide .formular input + label,
main .extremwide .formular .formular input + label,
main .extremwide .formular .formular .formular input + label,
main .wide.formular span + label,
main .wide .formular label + label,
main .wide .formular span + label,
main .wide .formular input + label,
main .wide .formular .formular input + label,
main .wide .formular .formular .formular input + label {
width: auto;
max-width: 91%;
vertical-align: top;
}
.noBreakGroup {
display: inline-block;
white-space: nowrap;
}
main input + span {
vertical-align: middle;
}
main .widetext input[type=text],
main .widetext input[type=password],
main .widetext select {
width: 18.75rem;
}
main .formular .explain {
padding-bottom: 0.3125rem;
}
main label.highlighted {
font-weight: bold;
}
main .widetext span.as_label {
vertical-align: middle;
display: inline-block;
width: 10.9375rem;
margin: 0.0625rem 0.35rem 0.5rem 0;
padding: 0.1875rem 0;
}
main .widetext label.ha_tab_head {
width: 15.625rem;
}
main .formular .as_input select {
width: 8.875rem;
}
main .hide {
display: none;
}
main optgroup {
color: #aaa;
}
main optgroup option {
color: #3f464c;
}
main div.status {
margin: 1rem 0;
}
main p.topstatus {
text-align: center;
}
main p.osVersion,
main p.aktFirmware {
text-align: left;
margin: 0.1875rem 0 0.625rem 1.5625rem;
}
main p.osVersion {
font-weight: bold;
margin: 0.625rem 0 0.1875rem 1.5625rem;
}
main p.innerbutton {
text-align: right;
max-width: 100%;
}
main .btn_form {
text-align: right;
}
main .btn_form label {
margin-right: 0.625rem;
}
main hr {
background-color: #90a6a5;
height: 1px;
}
main hr.long {
position: relative;
left: -0.625rem;
width: 110%;
}
main #device_table {
border: 1px solid #c6c7be;
margin-top: 0.625rem;
background-color: #eeeeee;
}
main #device_table div {
padding: 0.3125rem;
margin: 0;
border: 0;
}
main #devices_table_usb span {
padding: 0;
margin: 0;
margin-right: 0.25rem;
border: 0;
}
main .ShowBtnRight {
position: relative;
top: -0.25rem;
float: right;
}
main .fakeTextInputBtn {
float: right;
}
main .ShowLinkRight {
position: relative;
top: 0.1875rem;
float: right;
}
main #uiViewMyFritzBox .ShowLinkRight {
position: relative;
top: 0;
float: initial;
display: inline-block;
margin: 0 0 0.625rem 1.35rem;
}
main #uiViewMyFritzBox .smaller .ShowLinkRight {
position: relative;
top: 0.1875rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
main .fakeLabel {
display: inline-block;
position: relative;
top: -0.25rem;
width: 12.5rem;
margin-right: 0.375rem;
}
main .narrow .fakeLabel {
width: 7.8125rem;
}
main .wide .fakeLabel {
width: 15.625rem;
}
main .extremwide .fakeLabel {
width: 18.75rem;
}
main .fakeTextInput {
width: 95%;
max-width: 22.5rem;
min-height: 1.6rem;
/*Wichtig da es auch leere fakefelder geben kann, welche sonst keine Höhe hätten.*/
font-weight: normal;
color: #000000;
margin-left: 0;
margin-right: 0.625rem;
padding: 0.125rem 0.125rem 0.0975rem 0.125rem;
border: 1px solid #a9a9a9;
overflow: hidden;
vertical-align: top;
}
main .widetext .fakeTextInput {
max-width: 18.75rem;
}
main .fakeTextInput.small {
max-width: 18.375rem;
}
main .fakeTextInput.tiny {
max-width: 6.25rem;
}
main .fakeTextInput.auto {
width: auto;
max-width: none;
padding-right: 1rem;
}
main .fakeTextInput.textAlign {
margin: -0.1875rem 0 0 0;
}
main .readOnlyField {
width: 95%;
max-width: 22.5rem;
min-height: 1.6rem;
/*Wichtig da es auch leere fakefelder geben kann, welche sonst keine Höhe hätten.*/
font-weight: normal;
color: #000000;
margin-left: 0;
margin-right: 0.625rem;
padding: 0.125rem 0.125rem 0.0975rem 0.125rem;
overflow: hidden;
vertical-align: top;
border: solid 1px #eeeeee;
background-color: #f5f4f0;
}
main .readOnlyField.small {
max-width: 18.375rem;
}
main .readOnlyField.tiny {
max-width: 6.25rem;
}
main .readOnlyField.auto {
width: auto;
max-width: none;
padding-right: 1rem;
}
main .fakeTextInput.labeledText {
color: inherit;
border: 0;
}
main .usb_dev_col {
min-width: 9.375rem;
}
main .usb_typ_col {
min-width: 7.5rem;
}
main .floatleft {
float: left;
}
main .CssPin {
color: #003365;
margin-left: 0.3125rem;
margin-right: 0.3125rem;
}
main span.postfix,
main span.prefix {
vertical-align: baseline;
}
main span.postfix {
margin-left: 0.25rem;
}
main span.prefix {
margin-right: 0.25rem;
}
main label.pwd_prefix {
display: none;
}
main label.prefix.pwd_prefix {
visibility: hidden;
display: inline-block;
}
main ul.hintlist {
font-size: inherit;
margin-left: 0;
padding-left: 1.5625rem;
}
main ul.hintlist li {
font-size: inherit;
padding-bottom: 0.1875rem;
}
main .nocancel {
}
main span.provnote {
display: inline-block;
padding-left: 0.625rem;
}
main .inline_box {
display: inline-block;
}
main span.iconwithtext img,
main span.iconwithtext span {
vertical-align: middle;
margin: 0 0.25rem 0 0;
}
main div.wait {
text-align: center;
}
main div.wait p.waitimg {
text-align: center;
}
main div.wait p.waitimg img {
width: 20.3125rem;
height: 0.3125rem;
}
.busy {
position: relative;
}
.busycontainer {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.7);
flex-direction: column;
justify-content: center;
}
.busy .busycontainer {
display: inline-flex;
align-items: center;
}
.busy .busycontainer img {
width: 30%;
height: 0.3125rem;
}
main .busy[data-busy] table.zebra tr:nth-child(2n) th,
main .busy[data-busy] table.zebra tr:nth-child(2n) td {
background-color: transparent;
}
.busy [data-busy] > table,
.busy[data-busy] > table {
position: absolute;
}
main .buttonsarea {
text-align: right;
}
main .buttonsarea button {
margin: 0.3125rem;
}
main .textarea {
text-align: left;
margin-bottom: 0.3125rem;
font-size: 1rem;
}
main .refresh_button {
background-image: url("/css/rd/icons/ic_refresh_blue.png");
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 1.125rem;
height: 1.125rem;
min-width: 0;
vertical-align: middle;
cursor: pointer;
}
main .flat_ddl {
border: 1px solid #C6C7BE;
-webkit-appearance: none;
-moz-appearance: none;
background: #FFFFFF url("/css/rd/icons/ic_triangle_down_blue.svg") no-repeat 90% center;
width: 5rem;
text-indent: 0.3125rem;
text-overflow: "";
border-radius: 0.1875rem;
padding: 0.1875rem;
}
main .flat_ddl:hover {
background-color: #EEEEEE;
}
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
position: absolute;
bottom: 0;
right: 0;
z-index: 80;
width: 100%;
height: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
will-change: height, left;
transition: height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
left 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
border-top: 1px solid #d5d5d5;
padding: 0 0.9rem;
}
#btn_form_foot,
div.btn_form_foot,
.bottomMenu.show {
height: auto;
}
#btn_form_foot,
div.btn_form_foot {
margin: 0;
}
#btn_form_foot button,
#btn_form_foot button:first-Child,
div.btn_form_foot button,
div.btn_form_foot button:first-Child,
.bottomMenu div {
height: 2rem;
min-width: 6.5rem;
background-color: #268edf;
color: #ffffff;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
padding: 0.86rem 1rem 0 1rem;
will-change: margin,
width,
background-color,
color;
transition: margin 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
width 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
background-color 100ms,
color 100ms;
margin: 0.6rem 0.3rem;
border-radius: 0;
}
.stickyBottom #btn_form_foot,
.stickyBottom div.btn_form_foot,
.stickyBottom .bottomMenu {
position: fixed;
backface-visibility: hidden;
left: 16rem;
z-index: 87;
width: calc(100% - 17rem);
background-color: rgba(255, 255, 255, 0.8);
}
#btn_form_foot button,
#btn_form_foot button:first-Child,
div.btn_form_foot button,
div.btn_form_foot button:first-Child {
border: 0;
padding: 0 1rem;
}
#btn_form_foot button.highlighted,
div.btn_form_foot button.highlighted,
.bottomMenu div.btn.highlighted {
background-color: #006ec0;
}
#btn_form_foot button.highlighted:active,
div.btn_form_foot button.highlighted:active,
.bottomMenu div.btn.highlighted:active,
#btn_form_foot button:active,
div.btn_form_foot button:active,
.bottomMenu div.btn:active {
background-color: #57758c;
}
#btn_form_foot button:disabled,
div.btn_form_foot button:disabled,
.bottomMenu div.btn:disabled {
background-color: #d5d5d5;
color: #969693;
cursor: default;
}
#btn_form_foot button.left,
div.btn_form_foot button.left,
.bottomMenu div.btn.left {
position: absolute;
left: 0.9rem;
}
@media (max-width: 63.9375em) {
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
background-color: rgba(255, 255, 255, 0.8);
padding: 0;
}
.stickyBottom #btn_form_foot,
.stickyBottom div.btn_form_foot,
.stickyBottom .bottomMenu,
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
position: fixed;
backface-visibility: hidden;
left: 0;
width: 100%;
}
#btn_form_foot button,
#btn_form_foot button:first-Child,
div.btn_form_foot button,
.bottomMenu div {
height: 2.25rem;
}
}
@media (max-width: 31.1875em) {
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
padding: 0 0.125rem;
}
.stickyBottom #btn_form_foot,
.stickyBottom div.btn_form_foot,
.stickyBottom .bottomMenu,
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
position: fixed;
backface-visibility: hidden;
left: 0;
width: 100%;
}
#btn_form_foot button,
#btn_form_foot button:first-Child,
div.btn_form_foot button,
div.btn_form_foot button:first-Child,
.bottomMenu div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0.5rem 0.125rem;
padding: 0 0.3rem;
min-width: 0;
max-width: 60%;
height: 2.25rem;
}
#btn_form_foot button.left,
div.btn_form_foot button.left,
.bottomMenu div.btn.left {
position: initial;
left: 0;
}
}
main div.disableContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 88;
background-image: url("/css/rd/animations/anim_waitCircleWhite_backgroundBlue.gif");
background-position: center;
background-repeat: no-repeat;
background-size: 2.25rem;
background-color: rgba(0, 0, 0, 0.20);
}
.stickyBottom main div.disableContent {
position: fixed;
backface-visibility: hidden;
left: 16rem;
width: calc(100% - 17rem);
}
@media (max-width: 63.9375em) {
.stickyBottom main div.disableContent,
main div.disableContent {
position: fixed;
backface-visibility: hidden;
left: 0;
width: 100%;
}
}
#disablePage {
position: fixed;
backface-visibility: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align-items: center;
-moz-box-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-box-justify-content: center;
-moz-box-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
top: -10%;
left: -10%;
z-index: -1;
width: 120%;
height: 120%;
background-color: rgba(0, 0, 0, 0);
}
#disablePage.activ.userMenu {
z-index: 900;
background-color: rgba(0, 0, 0, 0.75);
}
#disablePage.activ.logout,
#disablePage.logout {
z-index: 9999;
background-color: rgba(0, 0, 0, 0.75);
cursor: pointer;
}
#disablePage div {
display: none;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
color: #fff;
font-size: 3rem;
text-align: center;
padding: 5rem 1rem;
}
#disablePage a {
display: block;
position: fixed;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#disablePage.logout div {
display: block;
width: 80%;
margin: auto;
padding: 1rem;
}
@media (max-width: 63.9375em) {
#disablePage.activ.userMenu,
#disablePage.activ {
z-index: 900;
background-color: rgba(0, 0, 0, 0.75);
}
#disablePage.activ.logout,
#disablePage.logout {
background-color: rgba(0, 0, 0, 0.75);
}
}
.contextHelp {
position: fixed;
backface-visibility: hidden;
top: 3.45rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
padding: 0;
z-index: 102;
overflow: hidden;
cursor: pointer;
will-change: height, width, right;
transition: height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
width 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
right 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.contextHelp.hide {
height: 0;
width: 0;
}
.contextHelp div {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
background-image: url("/css/rd/icons/ic_help_white.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 1.8rem;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
cursor: pointer;
}
@media (max-width: 63.9375em) {
.contextHelp {
position: fixed;
backface-visibility: hidden;
right: -4rem;
z-index: 1010;
width: 3.5rem;
height: 3.5rem;
will-change: right, height, width;
transition: right 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
width 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.contextHelp.show {
right: 2rem;
}
.contextHelp div {
background-size: 3rem;
}
}
.tab_menu {
position: fixed;
backface-visibility: hidden;
z-index: 90;
top: 6.125rem;
left: 16rem;
width: calc( 100% - 17rem);
height: 0;
background-color: transparent;
will-change: background-color, height;
transition: background-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
overflow: hidden;
padding: 0 0.875rem;
}
.tab_menu::-webkit-scrollbar {
display: none;
}
.tab_menu.show {
height: 2.33rem;
background-color: #268edf;
}
.stickyTop .tab_menu.show {
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
.internal_tab > div:nth-child(1),
.tab_menu > div:nth-child(1) {
width: 100%;
height: 6rem;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.tabScroll > div:nth-child(2),
.tabScroll > div:nth-child(3),
.internal_tab > div:nth-child(2),
.internal_tab > div:nth-child(3),
.tab_menu > div:nth-child(2),
.tab_menu > div:nth-child(3) {
height: 0;
width: 0;
opacity: 0;
cursor: pointer;
background-image: url("/ic_triangleOpen_left_white.svg");
background-position: center;
background-size: 0.6rem;
background-repeat: no-repeat;
will-change: width, height, opacity;
transition: opacity 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
width 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
height 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.tabScroll > div {
background-position: center;
background-size: 0.6rem;
background-repeat: no-repeat;
}
.tabScroll > div:nth-child(2),
.tabScroll > div:nth-child(3) {
position: absolute;
top: 0;
left: 0;
height: 2.3rem;
width: 2.3rem;
opacity: 1;
background-color: #006ec0;
}
.tabScroll > div:nth-child(3) {
background-image: url("/ic_triangleOpen_right_white.svg");
left: auto;
right: 0;
}
.tabScroll > div:nth-child(2).hide,
.tabScroll > div:nth-child(3).hide {
height: 0;
width: 0;
opacity: 0;
}
.tab_menu a,
.tab_menu div.tab {
display: none;
height: 2.3rem;
min-width: 6rem;
color: transparent;
font-size: 1rem;
padding: 0;
margin: 0;
-webkit-box-flex: 0 0 0;
-moz-box-flex: 0 0 0;
-webkit-flex: 0 0 0;
-ms-flex: 0 0 0;
flex: 0 0 0;
text-align: center;
border-bottom: 3px solid transparent;
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
}
.tab_menu a.show,
.tab_menu div.tab.show {
display: inline-block;
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0.42rem 1.5rem 0 1.5rem;
margin: 0 0.25rem;
color: rgba(255, 255, 255, 0.5);
background-color: #006EC0;
}
.tab_menu a.show:hover,
.tab_menu div.show:hover {
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
}
.tab_menu a.show.selected,
.tab_menu div.show.selected {
color: rgba(255, 255, 255, 1);
border-bottom: 3px solid #f8ec17;
height: 2.2rem;
}
@media (max-width: 63.9375em) {
.tab_menu {
padding: 0 0.5rem;
}
.stickyTop .tab_menu.show,
.tab_menu {
position: fixed;
backface-visibility: hidden;
top: 3.75rem;
left: 0;
width: 100%;
box-shadow: none;
}
.mainTab .tab_menu.show {
background-color: #006ec0;
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
}
.breadcrumb {
position: fixed;
backface-visibility: hidden;
top: 3.25rem;
left: 16rem;
margin: 0;
padding: 0 4rem 0 0;
width: calc( 100% - 17rem);
height: 3rem;
background-color: #268edf;
color: #fff;
z-index: 101;
overflow: hidden;
will-change: left;
transition: left 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.breadcrumb.manuTitle {
padding-left: 0.93rem;
font-size: 1.05rem;
}
.stickyTop .breadcrumb {
box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
.mainTab .breadcrumb,
.mainTab .stickyTop .breadcrumb {
box-shadow: none;
}
.breadcrumb > div {
height: 6rem;
line-height: 3.1rem;
font-size: 1.125rem;
padding: 0 1.085rem;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
white-space: nowrap;
will-change: padding;
transition: padding 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.cache .breadcrumb > div {
padding: 0 1.085rem 0 2.75rem;
background-image: url("/css/rd/animations/anim_waitCircleWhite_backgroundBlue.gif");
background-position: 1.25rem 1.1rem;
background-size: 1rem;
background-repeat: no-repeat;
}
.breadcrumb div div {
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 0 0 1.2rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.breadcrumb div div:first-Child {
padding: 0;
}
.arrow_box {
position: relative;
background-color: transparent;
border: 0 solid transparent;
height: 3rem;
line-height: 3.1rem;
cursor: default;
background-image: url("/ic_triangleOpen_right_white.svg");
background-position: 0.4rem 55%;
background-size: 0.5rem;
background-repeat: no-repeat;
}
.arrow_box:first-child,
.arrow_box:first-child {
background-image: none;
}
@media (max-width: 63.9375em) {
.stickyTop .breadcrumb,
.hideMenu .breadcrumb,
.breadcrumb {
position: fixed;
backface-visibility: hidden;
top: 0;
left: 0;
margin: 0 0 0 4rem;
padding: 0;
height: 3.75rem;
width: calc( 100% - 15rem);
z-index: 110;
background-color: #006ec0;
box-shadow: none;
}
.hideMenu .breadcrumb {
margin: 0 0 0 1rem;
pointer-events: none;
}
.breadcrumb.hide {
color: transparent;
z-index: 99;
}
.breadcrumb > div {
font-size: 1.15rem;
height: 5.5rem;
line-height: 3.75rem;
padding: 0;
-webkit-box-align-items: initial;
-moz-box-align-items: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
}
.printView .breadcrumb > div {
padding: 0 1.085rem;
}
.arrow_box {
border: none;
cursor: pointer;
height: 3.75rem;
line-height: 3.75rem;
background-position: 0.4rem 50%;
}
.arrow_box:after {
margin-top: -0.25rem;
border-left-color: #006ec0;
}
.arrow_box:before {
margin-top: -0.5rem;
}
}
@media (max-width: 31.1875em) {
.stickyTop .breadcrumb,
.hideMenu .breadcrumb,
.breadcrumb {
width: calc( 100% - 6.5rem);
}
}
.modalMsgBoxOverlay {
position: fixed;
backface-visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align-items: center;
-moz-box-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-box-justify-content: center;
-moz-box-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
will-change: background-color, z-index;
transition: background-color 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000),
z-index 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.modalMsgBoxOverlay.show {
z-index: 9999;
background-color: rgba(0, 0, 0, 0.75);
}
.modelMsgBox {
-webkit-box-flex: 0 0 90%;
-moz-box-flex: 0 0 90%;
-webkit-flex: 0 0 90%;
-ms-flex: 0 0 90%;
flex: 0 0 90%;
min-height: 1rem;
max-height: 1rem;
max-width: 1rem;
border: 1px solid #d5d5d5;
background-color: #ffffff;
color: #3f464c;
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.modelMsgBox a {
color: #4269a4;
text-decoration: none;
outline: none;
vertical-align: baseline;
}
.modelMsgBox a:hover {
text-decoration: underline;
}
.show .modelMsgBox {
min-height: 2rem;
max-height: 90%;
max-width: 35rem;
opacity: 1;
}
.modelMsgBox .head {
font-weight: bold;
border-bottom: 1px solid #d5d5d5;
margin: 0 0 1.25rem 0;
padding: 0.5rem 1.25rem;
background-color: #edede6;
}
.modelMsgBox .head.wait {
padding-left: 2rem;
background-image: url("/css/rd/animations/anim_waitCircleBlue_backgroundBright.gif");
background-position: center left;
background-repeat: no-repeat;
background-size: 1.25rem;
text-align: left;
}
.modelMsgBox hr {
margin: 1rem 1.25rem;
}
.modelMsgBox .hide {
display: none;
}
.modelMsgBox ol {
padding: 0.125rem;
padding-left: 1.5rem;
}
.modelMsgBox span.tfa_code {
display: inline-block;
font-weight: bold;
border: 1px solid #d5d5d5;
padding: 0.125rem;
margin-left: 0.5rem;
}
.modelMsgBox img.icon {
vertical-align: text-bottom;
height: 1.375rem;
}
.buttonsarea {
text-align: right;
padding: 0.5rem 1.25rem 1rem 1.25rem;
margin-top: 1rem;
}
.buttonsarea button {
min-width: 8rem;
min-height: 1.75rem;
overflow: visible;
color: #4269a4;
margin: 0 0 0.5rem 1rem;
}
.modelMsgBox .textarea {
padding: 0 1.25rem;
margin: 1rem 0;
}
.refresh_button {
background-image: url("/css/rd/icons/ic_refresh_blue.png");
background-position: center center;
background-repeat: no-repeat;
border: none;
width: 1.25rem;
height: 1.25rem;
min-width: 0;
vertical-align: middle;
cursor: pointer;
}
.flat_ddl {
border: 1px solid #C6C7BE;
-webkit-appearance: none;
-moz-appearance: none;
background: #FFFFFF url("/css/rd/icons/ic_triangle_down_blue.svg") no-repeat 90% center;
width: 5rem;
text-indent: 0.3125rem;
text-overflow: "";
border-radius: 0.1875rem;
padding: 0.1875rem;
}
.flat_ddl:hover {
background-color: #EEEEEE;
}
.modelMsgBox div.readOnlyField {
width: 50%;
max-width: 22.5rem;
min-height: 1.6rem;
font-weight: normal;
color: #000000;
background-color: #f5f4f0;
margin-left: 0;
margin-right: 0.625rem;
padding: 0.125rem 0.125rem 0.0975rem 0.125rem;
border: solid 1px #eeeeee;
overflow: hidden;
vertical-align: top;
display: inline-block;
}
.modelMsgBox input.gauth_error {
border: 1px solid #ff0000;
}
.modelMsgBox input.gauth_code_input {
text-align: center;
}
.modelMsgBox input.gauth_code_input + button[type="submit"] {
min-width: 2rem;
}
@media (max-width: 63.9375em) {
.modalMsgBoxOverlay.show {
background-color: rgba(0, 0, 0, 0.75);
}
}
.flexlist {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flexbox-wrap: wrap;
flex-wrap: wrap;
}
.list {
flex-flow: row wrap;
-moz-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
column-count: 2;
column-gap: 0.5rem;
column-width: 21rem;
-moz-column-count: 2;
-moz-column-gap: 0.5rem;
-moz-column-width: 21rem;
-webkit-column-count: 2;
-webkit-column-gap: 0.5rem;
-webkit-column-width: 21rem;
padding-top: 0.5rem;
}
.list.no_column {
column-count: 1;
column-gap: 0;
-moz-column-count: 1;
-moz-column-gap: 0;
-webkit-column-count: 1;
-webkit-column-gap: 0;
}
.flexlist .flexitem {
-webkit-box-flex: 1 1 18rem;
-moz-box-flex: 1 1 18rem;
-webkit-flex: 1 1 18rem;
-ms-flex: 1 1 18rem;
flex: 1 1 18rem;
margin: 0.3rem;
white-space: nowrap;
min-width: 18rem;
}
.list .item {
display: block;
border: solid transparent 1px;
margin: auto;
font-size: 95%;
padding-left: 0.5rem;
}
.list .item.fixed {
margin: 0.1rem 0.1rem;
height: 1.9rem;
border: none;
overflow: hidden;
padding: 0.5rem;
}
.list .item.wrap {
white-space: wrap;
}
.list > a {
padding-left: 0.5rem;
}
.list .row {
width: 100%;
padding: 0;
margin: 0.5rem 0;
}
a.toggleLinkImportant,
a.toggleLink {
background-image: url("/css/rd/icons/ic_triangle_down_blue.svg");
background-size: 0.93rem;
background-position: right;
background-repeat: no-repeat;
padding-right: 1rem;
}
a.toggleLinkImportant {
background-image: url("/css/rd/icons/ic_triangle_down_red.svg");
color: #ff0000;
}
a.toggleLink.disabled {
background-image: url("/css/rd/icons/ic_triangle_down_gray.svg");
}
a.toggleLink.open {
background-image: url("/css/rd/icons/ic_triangle_up_blue.svg");
}
a.toggleLinkImportant.open {
background-image: url("/css/rd/icons/ic_triangle_up_red.svg");
}
a.toggleLinkImportant.open span.open,
a.toggleLinkImportant:not(.open) span:not(.open),
a.toggleLink.open span.open,
a.toggleLink:not(.open) span:not(.open) {
display: none;
}
.printView,
.print {
will-change: all;
transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
html.printView {
background-color: #fff;
}
html.printView,
.printView input,
.printView textarea,
.printView keygen,
.printView select,
.printView button {
font-family: Arial, sans-serif;
}
.printView body {
height: auto;
}
.printView header {
position: absolute;
height: 4rem;
box-shadow: none;
background-color: #ffffff;
color: #000000;
}
.printView #menuBox,
.printView #userMenuBox,
.printView .logoBox,
.printView .blueBarLogo,
.printView .contextHelp,
.printView .tab_menu,
.printView .blueBarLnk,
.printView .blueBarUser {
height: 0;
width: 0;
flex: 0;
overflow: hidden;
}
.printView .blueBarRightBox {
-webkit-box-align-self: center;
-moz-box-align-self: center;
-webkit-align-self: center;
-ms-align-self: center;
align-self: center;
}
.printView .blue_bar_title,
.printView .blue_bar_title.hide {
color: #000000;
padding-left: 0;
}
.printView .breadcrumb {
position: absolute;
width: 100%;
top: 4rem;
left: 0;
margin: 0;
background-color: #ffffff;
color: #000000;
box-shadow: none;
cursor: pointer;
pointer-events: none;
}
.printView main * {
color: #000000;
}
.printView main,
.printView .mainTab main {
top: 6.75rem;
padding: 1rem 1rem 4rem 1rem;
box-shadow: none;
width: 100%;
height: 100%;
margin: 0;
}
.printView a {
pointer-events: none;
cursor: default;
text-decoration: none;
}
.printView div.scroll_area {
height: auto;
max-height: 100%;
min-height: 10rem;
}
.printView .buttonrow,
.printView .btncolumn,
.printView main #content h3,
.printView main #content h4,
.printView main #content h5,
.printView main #content span,
.printView main #content a,
.printView main #content img,
.printView main #content button,
.printView main #content hr,
.printView main #content p,
.printView main #content table,
.printView main #content label,
.printView main #content input,
.printView main #content select {
display: none;
}
.printView main #content table.printBlock,
.printView main #content .printBlock table,
.printView main #content table.print {
display: table;
}
.printView .buttonrow.print,
.printView .btncolumn.print {
display: table-cell;
}
.printView main #content h3.print,
.printView main #content h4.print,
.printView main #content h5.print,
.printView main #content span.print,
.printView main #content a.print,
.printView main #content img.print,
.printView main #content button.print,
.printView main #content hr.print,
.printView main #content p.print,
.printView main #content label.print,
.printView main #content input.print,
.printView main #content select.print,
.printView main #content h3.printBlock,
.printView main #content h4.printBlock,
.printView main #content h5.printBlock,
.printView main #content span.printBlock,
.printView main #content a.printBlock,
.printView main #content img.printBlock,
.printView main #content button.printBlock,
.printView main #content hr.printBlock,
.printView main #content p.printBlock,
.printView main #content label.printBlock,
.printView main #content input.printBlock,
.printView main #content select.printBlock,
.printView main #content .printBlock h3,
.printView main #content .printBlock h4,
.printView main #content .printBlock h5,
.printView main #content .printBlock table span,
.printView main #content .printBlock span,
.printView main #content .printBlock a,
.printView main #content .printBlock img,
.printView main #content .printBlock button,
.printView main #content .printBlock hr,
.printView main #content .printBlock p,
.printView main #content .printBlock label,
.printView main #content .printBlock input,
.printView main #content .printBlock select {
display: inline;
}
.printView button,
.printView #btn_form_foot button,
.printView div.btn_form_foot button,
.printView .bottomMenu div {
background-color: #ffffff;
border: 1px solid #000000;
color: #000000;
}
.printView main #content *.noPrint {
display: none;
}
.printView main table.zebra tr:nth-child(even) th,
.printView main table.zebra tr:nth-child(even) td,
.printView main table.zebra tr:nth-child(odd) th,
.printView main table.zebra tr:nth-child(odd) td {
background-color: #ffffff;
}
.printView .stickyBottom #btn_form_foot,
.printView .stickyBottom div.btn_form_foot,
.printView .stickyBottom .bottomMenu,
.printView #btn_form_foot,
.printView div.btn_form_foot,
.printView .bottomMenu {
position: relative;
border: none;
}
.printView .breadcrumb div div {
padding: 0;
}
.printView .breadcrumb div div:before {
content: ">";
padding: 0 0.3rem;
}
.printView .breadcrumb div div:first-Child:before {
content: "";
padding: 0;
}
@media (max-width: 63.9375em) {
main .formular {
padding-left: 0.75rem;
}
}
@media (max-width: 31.1875em) {
main .formular {
padding-left: 0.4rem;
}
main .widetext input[type=text],
main .widetext input[type=password],
main input[type=text],
main input[type=password],
main textarea {
width: 95%;
}
main .widetext .noBreakGroup input[type=text],
main .widetext .noBreakGroup input[type=password],
main .noBreakGroup input[type=text],
main .noBreakGroup input[type=password],
main .noBreakGroup .fakeTextInput.tiny,
main .noBreakGroup .fakeTextInput.small,
main .noBreakGroup .fakeTextInput,
main .noBreakGroup .readOnlyField,
main .noBreakGroup textarea {
width: auto;
}
main .formular .formular .form_input_note,
main .formular .form_input_note {
margin-left: 1rem;
}
main input[type='checkbox'] + label,
main .formular input[type='checkbox'] + label,
main .formular .formular input[type='checkbox'] + label,
main .formular .formular .formular input[type='checkbox'] + label,
main .narrow .formular input[type='checkbox'] + label,
main .narrow .formular .formular input[type='checkbox'] + label,
main .narrow .formular .formular .formular input[type='checkbox'] + label,
main .extremwide .formular input[type='checkbox'] + label,
main .extremwide .formular .formular input[type='checkbox'] + label,
main .extremwide .formular .formular .formular input[type='checkbox'] + label,
main .wide .formular input[type='checkbox'] + label,
main .wide .formular .formular input[type='checkbox'] + label,
main .wide .formular .formular .formular input[type='checkbox'] + label,
main input[type='radio'] + label,
main .formular input[type='radio'] + label,
main .formular .formular input[type='radio'] + label,
main .formular .formular .formular input[type='radio'] + label,
main .narrow .formular input[type='radio'] + label,
main .narrow .formular .formular input[type='radio'] + label,
main .narrow .formular .formular .formular input[type='radio'] + label,
main .extremwide .formular input[type='radio'] + label,
main .extremwide .formular .formular input[type='radio'] + label,
main .extremwide .formular .formular .formular input[type='radio'] + label,
main .wide .formular input[type='radio'] + label,
main .wide .formular .formular input[type='radio'] + label,
main .wide .formular .formular .formular input[type='radio'] + label {
max-width: 87%;
}
main .noBreakGroup input[size],
main .noBreakGroup input.inner,
main .formular .noBreakGroup input[size],
main .formular .noBreakGroup input.inner,
main .formular .noBreakGroup select.inner,
main .formular .formular .noBreakGroup input[size],
main .formular .formular .noBreakGroup input.inner,
main .formular .formular .noBreakGroup select.inner,
main .formular .formular .formular .noBreakGroup input[size],
main .formular .formular .formular .noBreakGroup input.inner,
main .formular .formular .formular .noBreakGroup select.inner {
width: auto;
}
.buttonsarea {
padding: 1rem;
}
main .buttonsarea button {
margin: 1rem 0 0 0;
width: 100%;
min-height: 2rem;
}
}
@media print {
main table,
main .tborder {
border-color: transparent;
}
#btn_form_foot,
div.btn_form_foot,
.bottomMenu {
display: none;
}
}