/*------------------------------------------start Basisstyles für 100%------------------------------------------*/
[class^="icon-"], [class*=" icon-"] {
    font-family: 'vodafone-Style' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.transition {
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.full_height {
    height: 100%;
}

/*Button default*/
.btn,
.alertable-ok,
.introjs-button,
.introjs-nextbutton {
    background: #0d0d0d;
    border: 2px solid #0d0d0d;
    outline: 0;
    padding: 4px 16px;
    margin: 3px;
    box-shadow: none;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none !important;
    color: #fff;
    cursor: pointer;
    min-width: 100px;
    line-height: 1.125em;
    font-weight: 700;
    text-align: center;
}

a.cke_dialog_ui_button_ok {
    color: #fff !important;
    background: #0d0d0d !important;
    border: 2px solid #0d0d0d !important;
}

.btn:hover,
.alertable-ok:hover, .alertable-ok:focus, .alertable-ok:active,
.introjs-button:hover,
.introjs-nextbutton:hover {
    background: #313131;
    border-color: #313131;
    color: #fff;
}

a.cke_dialog_ui_button_ok:hover {
    color: #fff !important;
    background: #313131 !important;
    border: 2px solid #313131 !important;
}

button i.fx:before,
input[type="button"] i.fx:before,
.btn i.fx:before {
    color: #fff;
    margin: 0 5px 0 0;
}

button:hover i.fx:before,
input[type="button"]:hover i.fx:before,
.btn:hover i.fx:before {
    color: #fff;
}

.btn:focus,
.alertable-ok:focus,
.introjs-button:focus,
.introjs-nextbutton:focus {
    background: #313131;
    border: 2px solid #313131;
}

v
.btn-highlighted {
    background: #e60000;
    border: 2px solid #e60000;
    outline: 0;
    padding: 4px 16px;
    margin: 3px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none !important;
    color: #fff;
    cursor: pointer;
    min-width: 100px;
    line-height: 1.125em;
    font-weight: 700;
    text-align: center;
}

.btn-highlighted:hover {
    transition: all .2s cubic-bezier(0.47,0,0.745,0.715);
    background: #c40000;
    border-color: #c40000;
}

/*Button primary*/

.empty.multible-actions .btn,
.btn-primary {
    background: #0d0d0d;
    border: 2px solid #0d0d0d;
    outline: 0;
    padding: 4px 16px;
    margin: 3px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none !important;
    color: #fff;
    cursor: pointer;
    min-width: 100px;
    line-height: 1.125em;
    font-weight: 700;
    text-align: center;
}

    .empty.multible-actions .btn:hover,
    .btn-primary:hover {
        transition: all .2s cubic-bezier(0.47,0,0.745,0.715);
        background: #313132;
        border-color: #313132;
        color: #fff;
    }

    .btn-primary:focus {
        background: #313132;
        border: 1px solid #313132;
    }

/*Button secondary*/
.content-settings .right-area .captcha .btn,
.btn-secondary,
.alertable-cancel,
.introjs-prevbutton,
a.cke_dialog_ui_button {
    background: #fff;
    border: 2px solid #333;
    outline: 0;
    padding: 4px 16px;
    margin: 3px;
    box-shadow: none;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none !important;
    color: #333;
    cursor: pointer;
    min-width: 100px;
    line-height: 1.125em;
    font-weight: 700;
    text-align: center;
}

    .content-settings .right-area .captcha .btn:hover,
    .btn-secondary:hover,
    .alertable-cancel:hover, .alertable-cancel:focus, .alertable-cancel:active,
    .introjs-prevbutton:hover,
    a.cke_dialog_ui_button:hover {
        transition: all .2s cubic-bezier(0.47,0,0.745,0.715);
        background: #313131;
        border: 2px solid #313131;
        color: #fff;
    }

    .btn-secondary i.fx:before {
        color: #313132;
    }

    .btn-secondary:hover i.fx:before {
        color: #fff;
    }

    .btn-secondary:focus,
    .alertable-cancel:focus,
    .introjs-prevbutton:focus {
        background: #313131;
        border: 2px solid #313131;
    }

.ui-layout-pane {
    background: none;
    padding: 0 !important;
    border: none !important;
}

#east.ui-layout-pane {
    background-color: #f4f4f4;
}

.slimScrollBar {
    width: 8px !important;
}

.loading {
    background: url(../../img/vodafone/ajax/loading.svg) no-repeat -6px -6px;
    color: #666;
    display: inline-block;
    min-height: 26px;
    padding-left: 30px;
}

.colour-1 .loading,
.colour-10 .loading {
    width: calc(100% - 230px);
}

tr.gridrow div.loading,
div.gridrow div.loading {
    padding: 0;
    background-position: center center;
}

li.gridrow div.loading {
    position: relative;
    height: auto;
    width: auto;
    background: url('../../img/vodafone/ajax/loading.svg') no-repeat center center;
    padding: 0;
}

.loading-indicator {
    background: url('../../img/vodafone/ajax/loading.svg');
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

.loading-indicator-overlay {
    background: #FFF url('../../img/vodafone/ajax/loading.svg') no-repeat center center;
    opacity: .6;
    filter: alpha(opacity=60);
}

#filtercontainer {
    position: relative;
    display: block;
    z-index: 2;
    padding: 0;
}

#messageListContainer {
    position: absolute;
    top: 40px;
    left: 20px;
    right: 0;
    bottom: 47px;
    width: calc(100% - 40px);
}

#messageList {
    background: #fff;
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 0;
}

    #messageList .loading {
        width: 60%;
        min-width: 200px;
        margin: 0 40%;
    }

    #messageList table.north .cg2 {
        width: 280px !important;
    }

    #messageList table.north .cg3 {
        width: 50px !important;
    }

    #messageList table.north .cg4 {
        width: 70px !important;
    }

    #messageList table.north .cg5 {
        width: auto !important;
    }

    #messageList table.north .cg6 {
        width: 30px !important;
    }

#objectList {
    background: #fff;
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0;
}

.colour-3 #objectList {
    height: calc(100% - 50px) !important;
}

#objectList ul {
    float: left;
    padding-bottom: 25px;
    margin: 0;
}


#addressListContainer, #DashboardContainer {
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll; /* immer sichtbar */
    top: 0;
    left: 0;
    right: 0; /* scrollbalken breite */
    bottom: 0;
    width: 100%; /* damit scrollbalen nicht abgezogen wird */
}

#addressList {
    padding-bottom: 46px; /* platz für pagination */
}

#paginationContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 10px 6px 5px;
    z-index: 99;
    background-color: #fff;
    box-shadow: 10px 10px 10px 7px;
}

/*------------------------------------------end Basisstyles für 100%------------------------------------------*/
/*------------------------------------------start Basisangaben------------------------------------------*/
body {
    color: #333;
    font: normal 1rem/1.5em "Vodafone", Helvetica Neue,Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
}


@font-face {
    font-family: 'Vodafone';
    src: url("../../fonts/VF-Font/eot_vodafonerg-webfont.eot");
    src: url("../../fonts/VF-Font/eot_vodafonerg-webfont.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/woff_vodafonerg-webfont.woff") format("woff"),url("../../fonts/VF-Font/ttf_vodafonerg-webfont.ttf") format("truetype"),url("../../fonts/VF-Font/svg_vodafonerg-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vodafone';
    src: url("../../fonts/VF-Font/eot_vodafonergbd-webfont.eot");
    src: url("../../fonts/VF-Font/eot_vodafonergbd-webfont.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/woff_vodafonergbd-webfont.woff") format("woff"),url("../../fonts/VF-Font/ttf_vodafonergbd-webfont.ttf") format("truetype"),url("../../fonts/VF-Font/svg_vodafonergbd-webfont.svg") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VodafoneExtra';
    src: url("../../fonts/VF-Font/eot_vodafonelt-webfont.eot");
    src: url("../../fonts/VF-Font/eot_vodafonelt-webfont.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/ttf_vodafonelt-webfont.ttf") format("truetype"),url("../../fonts/VF-Font/svg_vodafonelt-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

.clear {
    clear: both;
    height: 0;
    line-height: 0em;
}

.floatright {
    float: right;
    margin: 5px 0 5px 5px;
}

.floatleft {
    float: left;
    margin: 5px 5px 5px 0;
}

.textOverflow {
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('bindings/bindings.xml#ellipsis');
}

/*Linkdefinition*/
a {
    color: #333;
    cursor: pointer;
    text-decoration: underline;
}

    a:hover {
        color: #e60000;
        text-decoration: underline;
    }

        a:hover .fx::before {
            color: #e60000;
        }

:link, :visited, :active, :hover {
    outline: none !important;
}

button::-moz-focus-inner {
    border: 0;
}
/*Inputfelder*/
input, textarea, select {
    font: 1rem "Vodafone", Helvetica Neue,Helvetica,Arial,sans-serif;
    background: none;
    border: 0;
    color: #333;
    border-radius: 0;
    border-bottom: 1px solid #333;
    margin: 0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #aaa;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #aaa;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #aaa;
}

input[type="submit"],
input[type="button"] {
    cursor: pointer;
    -webkit-appearance: none;
}

textarea {
    resize: vertical;
}

input, textarea {
    padding: 9px 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    outline: none;
}

select {
    padding: 5px 30px 5px 4px;
    line-height: 1.563em;
    margin-top: 3px;
    margin-bottom: 3px;
    background-image: url(../../img/vodafone/messaging/svg/arrow_mini_down.svg);
    background-position: 100% 50%;
    background-size: 24px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    cursor: pointer;
}

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

/*Styles für Checkboxen und Radiobuttons*/
input[type=checkbox],
input[type=radio] {
    position: absolute;
    left: -1000em;
}

#listview a.checkall input[type="checkbox"],
#listview a.checkbox input[type="checkbox"] {
    visibility: hidden;
}

input[type=checkbox] + label:before,
#listview a.checkall, #listview a.checkbox,
input[type=radio] + label:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../../img/vodafone/cloud/checkbox-sprite.png") no-repeat 0 0;
    cursor: pointer;
    vertical-align: middle;
}

    input[type=checkbox]:hover + label:before,
    #listview a.checkall:hover,
    #listview a.checkbox:hover {
        background-position: 0 -50px !important;
    }

    #listview a.checkall.checked,
    #listview a.checkbox.checked,
    input[type=checkbox]:checked + label:before {
        background-position: -86px -23px !important;
    }

input[type=checkbox]:disabled + label:before {
    background-position: -86px -73px !important;
}

input[type=checkbox]:checked:disabled + label:before {
    background-position: -86px -23px !important;
}

input[type=radio]:hover + label:before {
    background-position: 0 -147px !important;
}

input[type=radio] + label:before {
    background-position: 0 -97px !important;
}

input[type=radio]:checked + label:before {
    background-position: -86px -120px !important;
}

input[type=radio]:disabled + label:before {
    background-position: -86px -169px !important;
}

input[type=radio]:checked:disabled + label:before {
    background-position: 0 -147px !important;
}

input[type=checkbox]:focus + label:before,
input[type=radio]:focus + label:before {
    outline: none;
}

input:focus, select:focus {
    outline: none;
}

#listview #messageListContainer .gridrow.selected a.checkbox {
    background-position: 0px -50px !important;
}

    #listview #messageListContainer .gridrow.selected a.checkbox.checked {
        background-position: -86px -23px !important;
    }

.comboboxMicro,
.inputMicro,
.textareaMicro {
    width: 13%;
}

.comboboxTiny,
.inputTiny,
.textareaTiny {
    width: 30%;
}

.comboboxSmall,
.inputSmall,
.textareaSmall {
    width: 50%;
}

.comboboxMedium,
.inputMedium,
.textareaMedium {
    width: 70%;
}

.comboboxLarge {
    width: 92%;
}

.inputLarge,
.textareaLarge {
    width: 90%;
}

.comboboxXLarge,
.inputXLarge,
.textareaXLarge {
    width: 100%;
}

/*Schriften*/

@font-face {
    font-family: 'Vodafone';
    src: url("../../fonts/VF-Font/VodafoneRg.eot");
    src: url("../../fonts/VF-Font/VodafoneRg.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/VodafoneRg.woff") format("woff"),url("../../fonts/VF-Font/VodafoneRg.ttf") format("truetype"),url("../../fonts/VF-Font/VodafoneRg.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'VodafoneBold';
    src: url("../../fonts/VF-Font/vodafonergbd-webfont.eot");
    src: url("../../fonts/VF-Font/vodafonergbd-webfont.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/vodafonergbd-webfont.woff") format("woff"),url("../../fonts/VF-Font/vodafonergbd-webfont.ttf") format("truetype"),url("../../fonts/VF-Font/vodafonergbd-webfont.svg") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'VodafoneExtra';
    src: url("../../fonts/VF-Font/VodafoneLt.eot");
    src: url("../../fonts/VF-Font/VodafoneLt.eot#iefix") format("embedded-opentype"),url("../../fonts/VF-Font/VodafoneLt.woff") format("woff"),url("../../fonts/VF-Font/VodafoneLt.ttf") format("truetype"),url("../../fonts/VF-Font/VodafoneLt.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

/*diverse Grundelemente*/
h1 {
    color: #e60000;
    font: 44px/1.125 "Vodafone",Arial,sans-serif;
    padding: 8px 0;
    margin-bottom: 30px;
}

h2 {
    font: 400 30px/1.158 "VodafoneExtra",Arial,sans-serif;
    color: #333;
    padding: 8px 0;
}

h3 {
    font: 700 20px/1.176 "Vodafone",sans-serif;
    color: #333;
    padding: 8px 0;
}

h4 {
    font: 700 16px/1.333 "Vodafone",sans-serif;
    color: #333;
    padding: 8px 0;
}

h5 {
    font: 700 14px/1.3 "Vodafone",sans-serif;
    color: #333;
    padding: 8px 0;
}

h6 {
    font: 700 14px/1.3 "Vodafone",sans-serif;
    color: #666;
    padding: 8px 0;
}

hr {
    background: #fff;
    border-top: 0;
    border-bottom: 1px solid #e4e4e4;
    border-left: 0;
    border-right: 0;
    margin: 8px 0;
    height: 1px;
    min-height: 1px;
}

p {
    margin: 10px 0;
}

ul li a, ul li {
    vertical-align: middle;
}

table thead th {
    text-align: left;
}
/*------------------------------------------end Basisangaben------------------------------------------*/
/*------------------------------------------start Fehlermeldungen------------------------------------------*/
.error {
    color: #E60000 !important;
    font-weight: normal;
    width: auto;
}

    .error a {
        text-decoration: underline;
        color: #E60000 !important;
        cursor: pointer;
    }

.img-info {
    display: block;
    color: #333;
    background: url(../../img/default/alertInfo.gif) no-repeat 0px 2px;
    text-decoration: none;
}

    .img-info:hover {
        color: #333;
        text-decoration: none;
    }

    .img-info span {
        padding-left: 20px;
    }
/*------------------------------------------end Fehlermeldungen------------------------------------------*/
/*------------------------------------------start header------------------------------------------*/
.contacts-dialog-menu {
    border-right: 1px solid #ddd !important;
}

#content,
#center,
#center-center,
#center-north {
    z-index: unset !important;
    background: none !important;
}

#center-north {
    height: 0 !important;
}

#center {
    top: 104px !important;
    max-height: calc(100% - 104px);
}

#center-center {
    height: 100%;
    overflow: auto;
    padding: 0;
}

#center-east {
    background: #f4f4f4 !important;
}

.colour-1 #center-center,
.colour-10 #center-center {
    margin-left: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

.folder-navigation .slide-in-left {
    background: #f4f4f4;
    position: absolute !important;
    min-width: 200px;
    width: 100%;
    padding: 0 0 47px 0 !important;
    margin-top: 0 !important;
    z-index: 9;
    height: 100%;
    overflow: hidden;
    max-height: calc(100% - 47px) !important; /* Bündig anliegend */
    box-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

    .folder-navigation .slide-in-left .loading {
        display: inline-block;
        text-align: center;
        margin: 4% auto 0 14%;
    }

.displaywidth-4 .folder-navigation .slide-in-left {
    min-width: 250px;
}

.colour-1 .folder-navigation,
.colour-10 .folder-navigation {
    display: none;
}

.colour-1 #center-west,
.colour-10 #center-west {
    display: none !important;
    visibility: hidden !important;
    width: 0px !important;
}

.hamburger-box {
    position: relative;
    width: 30px;
    height: 20px;
    top: 1px;
    padding: 15px 10px;
    z-index: 10;
    display: none;
    cursor: pointer;
    background: #fff;
    border-radius: 3px 0 0 3px;
    /*box-shadow: -1px -1px 3px rgba(51, 51, 51, .6);*/
}

.hamburger-list-style,
.hamburger-list-style:after,
.hamburger-list-style:before {
    position: absolute;
    width: 4px;
    height: 1px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: 4px;
    background-color: #666;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
    position: absolute;
    width: 8px;
    height: 1px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: 4px;
    background-color: #666;
}

    .hamburger-list-style:before,
    .hamburger-inner:before {
        top: -4px;
    }

    .hamburger-list-style:after,
    .hamburger-inner:after {
        bottom: -5px;
    }

    .hamburger-list-style:after,
    .hamburger-list-style:before,
    .hamburger-inner:before {
        display: block;
        content: "";
    }

.hamburger-inner {
    top: 17px;
    display: block;
    left: 28px;
    margin-top: 0px;
}

.hamburger-box .hamburger-list-style {
    top: 50%;
    display: block;
    left: 12px;
    margin-top: -2px;
}

.is-active i.fx.icon-arrow_back {
    transform: rotate(180deg);
    position: relative;
    top: -1px;
    top: -1px;
}

.is-active .hamburger-inner {
    left: 16px;
}

.colour-1 #center-center,
.colour-10 #center-center {
    padding: 0 !important;
}

.colour-1 .slide-in-left,
.colour-10 .slide-in-left {
    display: none;
}

#north {
    height: 101px !important;
}

#west-center {
    overflow: hidden;
}


#west {
    width: 110px !important;
}

.colour-1 #west,
.colour-10 #west {
    width: 0 !important;
}

.panel-center {
    /*background: #fff;*/
    box-shadow: none;
    max-height: 100%;
    height: 100%;
    /*overflow: auto;*/
    margin: 0;
    border-radius: 0;
    border: 0;
}

.colour-1 .panel-center,
.colour-10 .panel-center {
    background: #f4f4f4;
}


.head-right {
    background: #e60000;
    height: 45px;
    margin-right: 20px;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 1px 3px rgba(51, 51, 51, .6);
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 17px;
}

.rhombus {
    margin: 0;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 100;
    height: 60px;
}

    .rhombus a {
        display: inline-block;
        width: 60px;
        height: 60px;
    }

        .rhombus a.logo img {
            width: 34px;
            margin: 13px 13px 13px 13px;
        }

.m-rhombus img {
    width: 32px;
    margin: 2px 3px 4px 0;
}

.footer-center {
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16px;
    padding: 16px 0;
    width: 190px;
    text-align: left;
    z-index: 1;
}

    .footer-center a {
        background: none;
        text-decoration: none;
        padding: 2px 6px;
        font-size: 0.688em;
    }

        .footer-center a:hover {
            text-decoration: underline;
        }

/*headermenüs*/
.logo .homeMenu,
a.icon {
    background-image: url("../../img/vodafone/common/sprite-fecb00.png");
    background-repeat: no-repeat;
    background-color: #f00;
    display: inline-block;
    height: 30px;
    padding: 8px 0 7px 0;
    width: 29px;
}

.logo .homeMenu {
    background-position: 12px 8px;
}

.logo:hover .homeMenu {
    background-position: -40px 8px;
}

.logo .homeMenu_active,
.logo:hover .homeMenu_active,
.logo .homeMenu_active:hover {
    background-position: -90px 8px;
}


.head-right .topMenu a.icon {
    background-position: -3px -52px;
}

    .head-right .topMenu a.icon:hover {
        background-position: -55px -52px;
    }

    .head-right .topMenu a.icon.active {
        background-position: -102px -52px;
    }

/*------------------------------------------end header------------------------------------------*/
/*------------------------------------------start fixed Menu------------------------------------------*/
.menu-fixed-style {
    background: #fff;
    min-width: 200px;
    width: 100%;
    position: absolute;
    float: left;
    bottom: 0;
    z-index: 100000;
    font-size: 26px;
}

.displaywidth-4 .menu-fixed-style {
    min-width: 250px;
}

.menu-fixed-style .inner-container {
    min-width: 400px;
    white-space: nowrap;
}

.menu-fixed-style a {
    padding: 10px;
    display: inline-block;
    float: left;
    width: 30px;
    text-align: center;
}


.colour-20 .menu-fixed-style a.mf9,
.colour-2 .menu-fixed-style a.mf1,
.colour-4 .menu-fixed-style a.mf4,
.colour-3 .menu-fixed-style a.mf3,
.colour-9 .menu-fixed-style a.mf2,
.colour-7 .menu-fixed-style a.mf8,
.colour-5 .menu-fixed-style a.mf7 {
    background: #f4f4f4;
    text-align: center;
}

    .menu-fixed-style a:hover i.fx:before,
    .colour-20 .menu-fixed-style a.mf9 i.fx:before,
    .colour-2 .menu-fixed-style a.mf1 i.fx:before,
    .colour-4 .menu-fixed-style a.mf4 i.fx:before,
    .colour-3 .menu-fixed-style a.mf3 i.fx:before,
    .colour-9 .menu-fixed-style a.mf2 i.fx:before,
    .colour-7 .menu-fixed-style a.mf8 i.fx:before,
    .colour-5 .menu-fixed-style a.mf7 i.fx:before {
        color: #e60000 !important;
    }

    .colour-5 .menu-fixed-style a.mf7 i.fx::before,
    .colour-9 .menu-fixed-style a.mf2 i.fx::before,
    .colour-20 .menu-fixed-style a.mf9 i.fx::before,
    .colour-5 .menu-fixed-style a.mf7,
    .colour-9 .menu-fixed-style a.mf2,
    .colour-20 .menu-fixed-style a.mf9,
    .menu-fixed-style a:hover,
    .menu-fixed-style a:hover i.fx::before {
        color: #e60000;
    }

/*inner Contextmenu from fixed menu*/

nav[role="navigation"] {
    display: inline-block;
}

nav #menuToggle {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    padding: 0px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    width: 50px;
}

    nav #menuToggle a {
        text-decoration: none;
        color: #232323;
        float: none;
        width: 100%;
    }

        nav #menuToggle a:hover {
            color: #e60000;
        }

    nav #menuToggle span {
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-top: 5px;
        margin-left: 6px;
        position: relative;
        background: #595959;
        border-radius: 3px;
        z-index: 1;
        transform: rotate(90deg);
        float: left;
    }

.menu-fixed-style #menu {
    position: absolute;
    top: 0px;
    margin: 0px;
    right: 0px;
    z-index: 999;
    width: 150px;
    padding: 0;
    padding-top: 0;
    background: #ebebeb;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    display: none;
}

    .menu-fixed-style #menu li {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: initial;
    }

        .menu-fixed-style #menu li a {
            width: 100%;
            height: 30px;
            text-decoration: none;
            text-align: left;
            background: none;
            font-size: 1rem;
        }


nav #menuToggle .setactive {
    background: #fff;
    height: auto;
    padding: 18px 0 0px 8px;
    margin: 0;
    top: 0;
    width: calc(50px - 8px);
    position: relative;
    right: 0;
    transform: inherit;
    height: calc(50px - 22px);
    cursor: pointer;
}


nav #menuToggle.active .setactive,
nav #menuToggle:hover .setactive,
nav #menuToggle:focus .setactive {
    background: #ebebeb;
}

    nav #menuToggle.active .setactive span,
    nav #menuToggle:hover .setactive span,
    nav #menuToggle:focus .setactive span {
        opacity: 1;
        background: #e60000;
    }
/*------------------------------------------end fixed Menu------------------------------------------*/
/*------------------------------------------start Hauptmenu------------------------------------------*/
.my-faq {
    display: inline-block;
    cursor: pointer;
}

    .my-faq .flyout {
        position: absolute;
        top: 64px;
        right: 40px;
        margin: 0;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
        display: none;
        -moz-box-shadow: 0 1px 3px rgba(51, 51, 51, .2);
        -webkit-box-shadow: 0 1px 3px rgba(51, 51, 51, .2);
        box-shadow: 0 1px 3px rgba(51, 51, 51, .2);
    }

    .my-faq.is-active .flyout {
        background: #fff;
        -webkit-transition: -webkit-transform .2s ease;
        -ms-transition: -ms-transform .2s ease;
        transition: transform .2s ease;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        display: block;
        top: 52px;
        right: 60px;
        margin: 0;
        transition-property: all;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        width: 200px;
        z-index: 160;
        padding: 10px 14px;
    }

    .my-faq .flyout li {
        list-style: none;
        border-bottom: 1px solid #fff;
        margin: 0;
        padding: 0;
    }

        .my-faq .flyout li a {
            padding: 5px 6px;
            display: inline-block;
            width: calc(100% - 12px);
            text-decoration: none;
            color: #333;
        }

            .my-faq .flyout li a:hover,
            .my-faq .flyout li a:active,
            .my-faq .flyout li a:focus {
                background: #fff;
                color: #e60000;
            }

            .my-faq .flyout li a i {
                margin: 0 9px 0 0;
            }

                .my-faq .flyout li a i::before {
                    color: #333 !important;
                    font-size: 24px;
                }

        .my-faq .flyout li:hover i::before {
            color: #e60000 !important;
        }

.meta-nav {
    position: relative;
    top: 0;
    right: 0;
    z-index: 150;
}

    .meta-nav i.fx {
        vertical-align: top;
        padding: 0 14px;
    }

        .meta-nav i.fx:before {
            font-size: 28px;
            color: #fff;
        }

    .meta-nav .live-link i.fx.icon-arrow_forward {
        transform: rotate( -45deg );
    }

    .meta-nav div.my-faq {
        display: inline-block;
        padding: 16px 0 0 0;
        text-decoration: none;
        color: #333;
        height: 44px;
    }

    .meta-nav a {
        display: inline-block;
        padding: 16px 0 0 0;
        text-decoration: none;
        color: #333;
        height: 44px;
        width: 56px;
        overflow: hidden;
    }

        .meta-nav a:hover,
        .meta-nav div.my-faq:hover,
        .meta-nav div.my-faq.is-active {
            background: #820000;
        }

            .meta-nav div.my-faq.is-active i.fx::before {
                color: #fff;
            }

    .meta-nav span.meta-inner {
        position: absolute;
        right: 0;
    }

        .meta-nav span.meta-inner:focus .fx:before,
        .meta-nav span.meta-inner:focus .fx:before {
            color: #fff;
        }

    .meta-nav a.checkOut {
        display: inline-block;
        background-size: 18px;
        background-repeat: no-repeat;
        background-position: 0 10px;
        height: 44px;
    }

    .meta-nav a span,
    .meta-nav div span {
        display: none;
        font-size: 12px;
        color: #fff;
        text-align: center;
        position: relative;
        top: -2px;
    }

    .meta-nav a:hover span,
    .meta-nav div:hover span {
        display: none;
    }

    .meta-nav ul.flyout a {
        height: auto;
        width: auto;
    }

        .meta-nav ul.flyout a i {
            padding: 0;
        }

.main-menu > div {
    width: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
}


.my-profile .btn {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 58px;
    background: none;
    padding: 15px;
    margin: 0;
    box-shadow: none;
}

    .my-profile .btn i.icon-settings {
        display: none;
        visibility: hidden;
    }

    .my-profile .btn i.icon-user:before {
        color: #fff;
        margin: 0 0 0 10px;
        font-size: 30px;
    }

    .my-profile.is-active .btn, .my-profile .btn:hover {
        background: url(../../img/directbox/pixel.png) 0 0 repeat;
    }

.my-profile .btn {
    border: 0;
}

.my-profile .flyout {
    background: #fff;
    position: absolute;
    top: 60px;
    right: 0;
    margin: 0;
    width: 250px;
    z-index: 6000;
    display: none;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
    box-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

    .my-profile .flyout:before,
    .my-profile .flyout::before {
        content: "";
        position: absolute;
        z-index: 1;
        display: block;
        width: 0;
        top: -10px;
        left: 0; /* Hälfe der Dreiecksweite minus Hälfte der Sprechblase */
        margin-left: 46%; /* Hälfte der Sprechblase */
        border-style: solid;
        border-width: 0;
        border-color: #fff transparent;
    }

.my-profile.is-active .flyout {
    opacity: 1;
    display: block;
    animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
}

@keyframes growDown {
    0% {
        transform: scaleY(0)
    }

    100% {
        transform: scaleY(1)
    }
}

.my-profile .flyout li {
    list-style: none;
    border-bottom: 1px solid #fff;
    margin: 0;
    padding: 0;
}


    .my-profile .flyout li a {
        padding: 6px 2px 6px 9px;
        display: inline-block;
        width: calc(100% - 11px);
        text-decoration: none;
        color: #333;
    }

        .my-profile .flyout li a:hover,
        .my-profile .flyout li a:active,
        .my-profile .flyout li a:focus {
            color: #e60000;
        }

        .my-profile .flyout li a i {
            margin: -3px 8px 0 0;
        }

        .my-profile .flyout li a.checkOut {
            position: relative;
            width: calc(100% - 58px);
            padding: 4px 16px;
            margin: 14px;
            background: #0d0d0d;
            color: #fff;
            border-radius: 6px;
            text-align: center;
            font-weight: bold;
        }

            .my-profile .flyout li a.checkOut i {
                display: none;
                visibility: hidden;
            }

            .my-profile .flyout li a.checkOut:hover {
                background: #313131;
            }

    .my-profile .flyout li button {
        width: 100%;
        border: 0;
        background: none;
        color: #333;
        text-align: left;
        padding: 6px 2px 6px 9px;
    }

        .my-profile .flyout li button:active,
        .my-profile .flyout li button:hover,
        .my-profile .flyout li button:hover i.fx:before {
            color: #e60000;
            cursor: pointer;
        }

            .my-profile .flyout li button:active i.fx:before {
                color: #e60000;
            }

        .my-profile .flyout li button i.fx:before {
            color: #333;
            margin-right: 8px;
            position: relative;
            top: -2px;
        }

        .my-profile .flyout li button i.icon-arrow_mini_up,
        .my-profile .flyout li button i.icon-arrow_mini_down {
            position: absolute;
            right: 5px;
        }

.my-profile .flyout #hiddenHelp,
.my-profile .flyout #hiddenSecure {
    display: none;
}

    .my-profile .flyout #hiddenSecure.showSecure,
    .my-profile .flyout #hiddenHelp.showHelp {
        display: block;
    }

.my-profile .indicator {
    display: none;
    position: absolute;
    top: 12px;
    right: 14px;
    width: 15px;
    height: 15px;
    border-radius: 7.5px;
    background-color: #427d00;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2274.219%2C28.953%2042.97%2C60.202%2027.344%2C44.579%2019.532%2C52.391%2042.97%2C75.828%2082.029%2C36.764%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E);
}

.my-profile .user-details .user-pic {
    display: none;
    visibility: hidden;
}

.my-profile .user-details > a {
    pointer-events: none;
}


.my-profile .user-details h1 {
    font-size: 1em;
    float: left;
    color: #fff;
    max-width: 200px;
    margin: 0;
    padding: 6px 0 6px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-profile .user-details h2 {
    display: none;
    visibility: hidden;
}

#search-container {
    padding: 4px;
    position: absolute;
    right: 145px;
    z-index: 999;
    top: 65px;
    border-radius: 3px;
    width: 290px;
    border: 1px solid #ccc;
    background-color: #fff;
}

    #search-container a[data-command="opensearch"] {
        display: none;
    }

@media only screen and (max-width: 1023px) {
    #search-container:not(.open) {
        width: 35px;
        height: 25px;
        border-color: #fff;
        background: none;
        border: 0;
        right: 60px;
    }

    #search-container.open {
        width: calc(100% - 300px);
        right: 10px;
    }

        #search-container.open #extended-search .search-folder input,
        #search-container.open #extended-search .search-date input {
            width: calc(100% - 40px);
        }

    #search-container:not(.open) input[name="search"] {
        display: none;
    }

    #search-container:not(.open) a[data-command="search"],
    #search-container:not(.open) a[data-command="extended-search"],
    #search-container:not(.open) a[data-command="clear"] {
        display: none !important;
    }

    #search-container:not(.open) a[data-command="opensearch"] {
        display: inline-block;
    }
}

@media only screen and (max-width: 480px) {
    #search-container.open {
        width: calc(100% - 130px);
    }
}

/* start suchen in Dokumente */
#searchcontainer {
    position: relative;
    padding: 0;
    margin: 0;
}

.colour-3 #searchcontainer > input,
.colour-2 #searchcontainer > input {
    border: 0;
}

.colour-9 #searchcontainer > input {
    margin-left: 30px;
    width: calc(100% - 30px);
    border: 0;
}

#searchcontainer input {
    background-color: #fff;
    background-image: none;
    margin: 0;
    width: 100%;
    display: block;
    box-shadow: none;
    padding: 4px 0 3px 3px;
}

#searchcontainer ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #7E868A !important;
    opacity: 1; /* Firefox */
}

#searchcontainer :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #7E868A !important;
}

#searchcontainer ::-ms-input-placeholder { /* Microsoft Edge */
    color: #7E868A !important;
}

#searchcontainer a.search-btn {
    position: absolute;
    right: 5px;
    top: 1px;
    text-decoration: none;
}

#search-container a[data-command="clear"] {
    display: none;
    right: 35px;
}


    #search-container a[data-command="clear"] .fx.icon-cross::before {
        font-size: .9em;
        top: 5px;
    }

#search-container a[data-command="clear"] {
    display: none;
    right: 35px;
}


    #search-container a[data-command="clear"] .fx.icon-cross::before {
        font-size: .9em;
        top: 5px;
    }


#searchcontainer a.search-btn i:before,
#searchcontainer a.search-btn i::before {
    top: 0;
    position: relative;
}

/*start erweiterte Suche*/
#searchcontainer span.btn {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 500;
    box-shadow: none;
    margin: 0;
    height: auto;
    border-radius: 0;
    background: none;
    border: 0;
    min-width: auto;
}

    #searchcontainer span.btn:hover {
        background: none;
    }

    #searchcontainer span.btn i:before {
        color: #333;
    }

#searchcontainer .my-searchtmpl {
    position: absolute;
    right: 0;
    top: 30px;
    background: #fff;
    box-shadow: 0 0 5px #888;
    padding: 10px;
}

    #searchcontainer .my-searchtmpl .tmpl-inner .btn {
        margin: 10px 0;
        width: calc(100% - 40px);
        font-weight: normal;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner label {
        display: none;
        padding: 11px 5px;
        margin-top: 3px;
        margin-bottom: 3px;
        width: 30%;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner h5 {
        margin-bottom: 0;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner .radio-inner {
        width: 100%;
        float: left;
    }

        #searchcontainer .my-searchtmpl .tmpl-inner .radio-inner label {
            width: auto;
            display: inline-block;
            color: #333;
        }

    #searchcontainer .my-searchtmpl .tmpl-inner .col-6 > span {
        display: none;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-folder input,
    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-date input {
        width: 222px;
        float: left;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12 a.checkbox {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(../../img/vodafone/cloud/checkbox-sprite.png) no-repeat 0 0;
        cursor: pointer;
        vertical-align: middle;
    }

        #searchcontainer .my-searchtmpl .tmpl-inner .col-12 a.checkbox input[type="checkbox"] {
            visibility: hidden;
            position: absolute;
            left: -1000em;
        }

        #searchcontainer .my-searchtmpl .tmpl-inner .col-12 a.checkbox:hover {
            background-position: 0 -50px !important;
        }

        #searchcontainer .my-searchtmpl .tmpl-inner .col-12 a.checkbox.checked {
            background-position: -86px -23px !important;
        }

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-folder img,
    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-date img {
        padding: 0 !important;
        top: 0;
        margin: 10px 0 10px 4px !important;
        background-position: center center;
        background-size: 100%;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner input,
    #searchcontainer .my-searchtmpl .tmpl-inner select {
        width: 100%;
        margin: 6px 0;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner input {
        padding: 9px 6px;
    }

/*Erweriterung für die Tag-Suche*/
#searchcontainer .tag-editor {
    margin: 0;
    padding: 0;
}

    #searchcontainer .tag-editor .tag-editor-spacer {
        width: 0;
    }

    #searchcontainer .tag-editor .tag-editor-tag {
        margin: 0;
        padding: 0;
    }

        #searchcontainer .tag-editor .tag-editor-tag input {
            margin: 0;
            width: 100% !important;
        }

    #searchcontainer .tag-editor li {
        position: relative;
        width: 100%;
    }

        #searchcontainer .tag-editor li.ui-sortable-handle:first-child {
            display: none;
        }

#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-tags span {
    margin: 20px 0 0 0;
    display: block;
}

#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-tags,
#searchcontainer .tag-editor li div.tag-editor-tag.active,
#searchcontainer .tag-editor li div.tag-editor-tag.active input,
#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-revision,
#searchcontainer .my-searchtmpl .tmpl-inner .col-12.buttonbar {
    width: 100%;
}

#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-subfolder {
    width: calc(100% - 2px);
}

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-subfolder input[type=checkbox] {
        position: relative;
        display: inline;
        left: auto;
        right: auto;
        width: 14px;
        height: 14px;
    }

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-subfolder span {
        padding: 0;
        display: inline-block;
    }

#searchcontainer .my-searchtmpl .tmpl-inner h1,
#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-headline {
    display: none;
    visibility: hidden;
}

#searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-revision {
    padding: 20px 0;
}

    #searchcontainer .my-searchtmpl .tmpl-inner .col-12.search-revision i.fx::before {
        color: #0766b6;
    }

#searchcontainer .my-searchtmpl .tmpl-inner .col-12.buttonbar {
    text-align: right;
}

/* delete icon */
#searchcontainer .tag-editor .tag-editor-delete {
    background: #e0eaf1;
    cursor: pointer;
    padding-right: 0;
    border-radius: 0;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 0;
    overflow: hidden;
    width: 24px;
}

    #searchcontainer .tag-editor .tag-editor-delete i {
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        background: url(../../img/vodafone/Icons/svg/cross.svg) 0 0 no-repeat;
        position: relative;
        top: 4px;
        left: 3px;
    }


#searchcontainer .tag-editor .tag-editor-tag.active + .tag-editor-delete,
#searchcontainer .tag-editor .tag-editor-tag.active + .tag-editor-delete i {
    display: none;
}

#searchcontainer .tag-editor li input {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #333;
}

#searchcontainer .tag-editor li.placeholder {
    border-bottom: 1px solid #333;
    width: 100%;
    padding: 7px 2px;
    margin: 6px 0;
}

#searchcontainer .tag-editor li[class*='flag_'] {
    margin-right: 5px;
    width: auto;
}

    #searchcontainer .tag-editor li[class*='flag_'] div {
        background: none !important;
    }

        #searchcontainer .tag-editor li[class*='flag_'] div.tag-editor-spacer {
            width: 0 !important;
        }

/*Tag hinzufügen: Colorlist in den Einstellungen*/
.colorlist span {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-bottom: 8px;
    border: 1px solid #f1f1f1;
}

    .colorlist span.selected {
        box-shadow: 0 1px 3px rgba(51, 51, 51, .6);
        border: 1px solid #fff;
    }

/*Tags Farben*/
.flag_0 {
    background-color: #00930a;
}

#searchcontainer .tag-editor .flag_0 .tag-editor-tag,
#searchcontainer .tag-editor .flag_0,
.detail-container .flag_0 {
    background: none;
    color: #00930a;
}

.flag_1 {
    background-color: #3377a8;
}

#searchcontainer .tag-editor .flag_1 .tag-editor-tag,
#searchcontainer .tag-editor .flag_1,
.detail-container .flag_1 {
    background: none;
    color: #3377a8;
}

.flag_2 {
    background-color: #005693;
}

#searchcontainer .tag-editor .flag_2 .tag-editor-tag,
#searchcontainer .tag-editor .flag_2,
.detail-container .flag_2 {
    background: none;
    color: #005693;
}

.flag_3 {
    background-color: #933000;
}

#searchcontainer .tag-editor .flag_3 .tag-editor-tag,
#searchcontainer .tag-editor .flag_3,
.detail-container .flag_3 {
    background: none;
    color: #933000;
}

.flag_4 {
    background-color: #95c11f;
}

#searchcontainer .tag-editor .flag_4 .tag-editor-tag,
#searchcontainer .tag-editor .flag_4,
.detail-container .flag_4 {
    background: none;
    color: #95c11f;
}

.flag_5 {
    background-color: #e7c219;
}

#searchcontainer .tag-editor .flag_5 .tag-editor-tag,
#searchcontainer .tag-editor .flag_5,
.detail-container .flag_5 {
    background: none;
    color: #e7c219;
}

.flag_6 {
    background-color: #666;
}

#searchcontainer .tag-editor .flag_6 .tag-editor-tag,
#searchcontainer .tag-editor .flag_6,
.detail-container .flag_6 {
    background: none;
    color: #666;
}

.flag_7 {
    background-color: #e30613;
}

#searchcontainer .tag-editor .flag_7 .tag-editor-tag,
#searchcontainer .tag-editor .flag_7,
.detail-container .flag_7 {
    background: none;
    color: #e30613;
}

.flag_8 {
    background-color: #ff9000;
}

#searchcontainer .tag-editor .flag_8 .tag-editor-tag,
#searchcontainer .tag-editor .flag_8,
.detail-container .flag_8 {
    background: none;
    color: #ff9000;
}

.flag_9 {
    background-color: #9c2aa0;
}

#searchcontainer .tag-editor .flag_9 .tag-editor-tag,
#searchcontainer .tag-editor .flag_9,
.detail-container .flag_9 {
    background: none;
    color: #9c2aa0;
}

.flag_10 {
    background-color: #ac1e1d;
}

#searchcontainer .tag-editor .flag_10 .tag-editor-tag,
#searchcontainer .tag-editor .flag_10,
.detail-container .flag_10 {
    background: none;
    color: #ac1e1d;
}

.flag_11 {
    background-color: #007c92;
}

#searchcontainer .tag-editor .flag_11 .tag-editor-tag,
#searchcontainer .tag-editor .flag_11,
.detail-container .flag_11 {
    background: none;
    color: #007c92;
}

.flag_12 {
    background-color: #fadd72;
}

#searchcontainer .tag-editor .flag_12 .tag-editor-tag,
#searchcontainer .tag-editor .flag_12,
.detail-container .flag_12 {
    background: none;
    color: #fadd72;
}

.flag_13 {
    background-color: #494949;
}

#searchcontainer .tag-editor .flag_13 .tag-editor-tag,
#searchcontainer .tag-editor .flag_13,
.detail-container .flag_13 {
    background: none;
    color: #494949;
}

.flag_14 {
    background-color: #aaa;
}

#searchcontainer .tag-editor .flag_14 .tag-editor-tag,
#searchcontainer .tag-editor .flag_14,
.detail-container .flag_14 {
    background: none;
    color: #aaa;
}

.flag_15 {
    background-color: #e89f02;
}

#searchcontainer .tag-editor .flag_15 .tag-editor-tag,
#searchcontainer .tag-editor .flag_15,
.detail-container .flag_15 {
    background: none;
    color: #e89f02;
}

.flag_16 {
    background-color: #2f4a59;
}

#searchcontainer .tag-editor .flag_16 .tag-editor-tag,
#searchcontainer .tag-editor .flag_16,
.detail-container .flag_16 {
    background: none;
    color: #2f4a59;
}

.flag_17 {
    background-color: #ba4750;
}

#searchcontainer .tag-editor .flag_17 .tag-editor-tag,
#searchcontainer .tag-editor .flag_17,
.detail-container .flag_17 {
    background: none;
    color: #ba4750;
}

.flag_18 {
    background-color: #7a5000;
}

#searchcontainer .tag-editor .flag_18 .tag-editor-tag,
#searchcontainer .tag-editor .flag_18,
.detail-container .flag_18 {
    background: none;
    color: #7a5000;
}

.flag_19 {
    background-color: #7e102c;
}

#searchcontainer .tag-editor .flag_19 .tag-editor-tag,
#searchcontainer .tag-editor .flag_19,
.detail-container .flag_19 {
    background: none;
    color: #7e102c;
}

.flag_20 {
    background-color: #e84c3d;
}

#searchcontainer .tag-editor .flag_20 .tag-editor-tag,
#searchcontainer .tag-editor .flag_20,
.detail-container .flag_20 {
    background: none;
    color: #e84c3d;
}

/*Icons für Tagging*/

.icon-flag[class*='flag_'] {
    background: none !important;
}

.icon-flag.flag_0:before {
    color: #00930a;
}

.icon-flag.flag_1:before {
    color: #3377a8;
}

.icon-flag.flag_2:before {
    color: #005693;
}

.icon-flag.flag_3:before {
    color: #933000;
}

.icon-flag.flag_4:before {
    color: #95c11f;
}

.icon-flag.flag_5:before {
    color: #e7c219;
}

.icon-flag.flag_6:before {
    color: #666;
}

.icon-flag.flag_7:before {
    color: #e30613;
}

.icon-flag.flag_8:before {
    color: #ff9000;
}

.icon-flag.flag_9:before {
    color: #9c2aa0;
}

.icon-flag.flag_10:before {
    color: #ac1e1d;
}

.icon-flag.flag_11:before {
    color: #007c92;
}

.icon-flag.flag_12:before {
    color: #fadd72;
}

.icon-flag.flag_13:before {
    color: #494949;
}

.icon-flag.flag_14:before {
    color: #aaa;
}

.icon-flag.flag_15:before {
    color: #e89f02;
}

.icon-flag.flag_16:before {
    color: #2f4a59;
}

.icon-flag.flag_17:before {
    color: #ba4750;
}

.icon-flag.flag_18:before {
    color: #7a5000;
}

.icon-flag.flag_19:before {
    color: #7e102c;
}

.icon-flag.flag_20:before {
    color: #e84c3d;
}

/*Styling Tags im rechten Seitenbereich*/
#propertyview .detail .detail-container i[class*='flag_'] {
    display: inline-block;
    margin-right: 5px;
}

#propertyview .detail .detail-container div[class*='flag_'] {
    border-radius: 30px;
    display: inline-block;
    padding: 3px 0;
    margin: 2px 0;
    cursor: pointer;
}

/*End erweiterte Suche*/
#tree-container #accountList {
    margin: 0;
    padding: 0;
}

    #tree-container #accountList > li {
        list-style: none;
        margin: 0;
    }

    #tree-container #accountList li span.account-title {
        display: block;
        padding: 7px 4px 0 17px;
        cursor: pointer;
        position: relative;
        height: 33px;
    }

        #tree-container #accountList li span.account-title:hover {
            background: #ebebeb;
            text-decoration: none;
        }


    #tree-container #accountList .active {
        border-right: 0;
    }

        #tree-container #accountList .active span.account-title,
        #tree-container #accountList .active span.account-title:hover {
            color: #333;
            background: #ebebeb;
            font-weight: bold;
            min-height: 25px;
        }

    #tree-container #accountList span.account-title-txt {
        display: inherit;
        width: 84%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #tree-container #accountList li span.account-title i {
        color: #aaa;
    }

    #tree-container #accountList li:hover span.account-title i,
    #tree-container #accountList .active span.account-title i {
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
        color: #333;
    }

    #tree-container #accountList span.account-title i {
        font-size: 1.4em;
        position: absolute;
        color: #333;
        right: 20px;
        top: 6px;
    }

    #tree-container #accountList li.active span.account-title i {
        right: 18px;
        color: #333;
    }

    #tree-container #accountList li span.account-title i.icon-first {
        position: absolute;
        left: 3px;
        display: none;
        right: auto;
        transform: rotate(0deg);
    }

    #tree-container #accountList li span.account-title i.icon-arrow_s_up {
        position: absolute;
        left: auto;
        right: 12px;
        top: 10px;
        transform: rotate(180deg);
    }


    #tree-container #accountList li.active span.account-title i.icon-arrow_s_up,
    #tree-container #accountList li:hover span.account-title i.icon-arrow_s_up {
        right: 12px;
        top: 8px;
        transform: rotate(0deg);
    }

.main-menu {
    background: #900;
    position: relative;
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0;
    border-top: 0;
    opacity: 1;
    z-index: 10;
    left: 0;
    box-shadow: 0 1px 3px;
}

    .main-menu.introjs-fixParent {
        z-index: unset;
    }

    .main-menu .mainMenu {
        position: relative;
        min-height: 60px;
        margin-left: 64px;
        width: calc(100% - 250px);
    }

        .main-menu .mainMenu ul {
            width: 100%;
            margin: 0;
            font-size: 1.2em;
            padding: 0;
            position: relative;
            opacity: 1;
            top: 0;
            -webkit-transform: translateY(-120%);
            -moz-transform: translateY(-120%);
            -o-transform: translateY(-120%);
            -ms-transform: translateY(-120%);
            transform: translateY(-120%);
            display: block;
        }

            .main-menu .mainMenu ul li {
                list-style: none;
                color: #fff;
                float: left;
                border: 0;
                margin: 0;
                text-align: center;
                text-decoration: none;
            }

                .main-menu .mainMenu ul li a {
                    -webkit-box-sizing: content-box;
                    -moz-box-sizing: content-box;
                    -ms-box-sizing: content-box;
                    -o-box-sizing: content-box;
                    box-sizing: content-box;
                    display: block;
                    margin: 0;
                    padding: 0;
                    color: #fff;
                    text-decoration: none;
                    text-transform: uppercase;
                    position: relative;
                    border-bottom: 2px solid #900;
                }

                .main-menu .mainMenu ul li i {
                    display: none;
                }

                .main-menu .mainMenu ul li a i {
                    display: none;
                }

                    .main-menu .mainMenu ul li a i:before {
                        display: block;
                        width: 80px;
                        height: 80px;
                        font-size: 3.6em;
                        margin: 0 auto 10px auto;
                        border-radius: 100%;
                        padding: 32px 17px 0 15px;
                    }

                .main-menu .mainMenu ul li a div {
                    padding: 16px 20px 13px 20px;
                    white-space: nowrap;
                }

    .main-menu .arrow-container {
        display: none;
        position: absolute;
        height: 25px;
        width: 20px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #ebebeb;
        border-bottom: solid 1px white;
    }

    .main-menu .arrow {
        position: absolute !important;
        padding: 0 !important;
        content: '';
        width: 28px !important;
        height: 28px;
        top: 8px;
        right: 14px;
        background-image: url("../../img/vodafone/common/ols-search.svg") !important;
        background-size: 140px 1148px;
        background-position: -5.6px -711.2px;
        transform: rotate(-90deg);
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        transition: -webkit-transform .4s;
        transition: transform .4s;
        background-color: transparent !important;
    }

    .main-menu .mainMenu ul li a .arrow.sub-menu {
        transform: rotate(0deg);
        top: 9px;
        right: 13px;
    }

    .main-menu .mainMenu ul li a span {
        padding: 0;
        font-weight: normal;
    }

        .main-menu .mainMenu ul li a span.notes_active,
        .main-menu .mainMenu ul li a:first-child:hover span {
            border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

            .main-menu .mainMenu ul li a:first-child:hover span,
            .main-menu .mainMenu ul li a span.More_active:hover,
            .main-menu .mainMenu ul li a span.calendar_active:hover,
            .main-menu .mainMenu ul li a span.adress_active:hover,
            .main-menu .mainMenu ul li a span.messages_active:hover,
            .main-menu .mainMenu ul li a span.notes_active:hover,
            .main-menu .mainMenu ul li a span.documents_active:hover,
            .main-menu .mainMenu ul li a:hover {
                border-bottom-color: #fff;
            }

.colour-20 .main-menu .mainMenu ul li a.task,
.colour-1 .main-menu .mainMenu ul li a.home,
.colour-2 .main-menu .mainMenu ul li a.messages,
.colour-3 .main-menu .mainMenu ul li a.adress,
.colour-4 .main-menu .mainMenu ul li a.calendar,
.colour-5 .main-menu .mainMenu ul li a.favorites,
.colour-6 .main-menu .mainMenu ul li a.shop,
.colour-7 .main-menu .mainMenu ul li a.settings,
.colour-9 .main-menu .mainMenu ul li a.documents,
.colour-10 .main-menu .mainMenu ul li a.note {
    padding-top: 0;
    border-bottom: 2px solid #fff;
    color: #fff;
}

    .colour-0 .main-menu .mainMenu ul li a.task .arrow,
    .colour-1 .main-menu .mainMenu ul li a.home .arrow,
    .colour-2 .main-menu .mainMenu ul li a.messages .arrow,
    .colour-3 .main-menu .mainMenu ul li a.adress .arrow,
    .colour-4 .main-menu .mainMenu ul li a.calendar .arrow,
    .colour-5 .main-menu .mainMenu ul li a.favorites .arrow,
    .colour-6 .main-menu .mainMenu ul li a.shop .arrow,
    .colour-7 .main-menu .mainMenu ul li a.settings .arrow,
    .colour-9 .main-menu .mainMenu ul li a.documents .arrow,
    .colour-10 .main-menu .mainMenu ul li a.note .arrow {
        background-position: 521.2px -712.2px;
    }

.main-menu.is-active .mainMenu ul {
    -webkit-transition: -webkit-transform .2s ease;
    -ms-transition: -ms-transform .2s ease;
    transition: transform .2s ease;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    z-index: 5000;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    display: block;
    width: auto;
    height: auto;
    box-shadow: 0 1px 3px rgba(51, 51, 51, .6);
}

.main-menu .mainMenu .closing-panel {
    display: none;
}

.main-menu.is-active .mainMenu .closing-panel {
    display: block;
}

.main-menu.is-active .mainMenu ul li {
    border-bottom: 1px solid #eee;
    background: #f4f4f4;
    width: 14.2857%;
    padding: 20px 0;
    margin: 0;
}

.main-menu.is-active .mainMenu .nav-slideout ul li {
    background: #f4f4f4;
    border-bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-menu.is-active .mainMenu ul li a span {
    color: #333;
    padding: 0 0 20px;
    width: 100%;
    white-space: nowrap;
}

/*Slideout*/
.nav-slideout {
    background: #f4f4f4;
    box-shadow: 0 1px 3px rgba(51, 51, 51, .6);
    left: 0;
    position: absolute !important;
    right: 0;
    top: 45px;
    z-index: 5000;
}

    .nav-slideout .items {
        background: #f4f4f4;
        border-right: 0 none;
        float: left;
        font: 400 0.9em/20px "VodafoneRgBold",Arial,sans-serif;
        margin: 0;
        max-width: 25%;
        padding: 20px 0;
        width: 25%;
    }

        .nav-slideout .items ul li {
            list-style: none;
            color: #333;
            float: none;
            margin: 0;
            text-align: left;
            text-decoration: none;
        }

        .nav-slideout .items h2 {
            font-size: 1.3em;
            font-weight: bold;
            text-shadow: none;
            padding-top: 15px;
            padding-left: 10px;
            z-index: 50000;
            position: relative;
        }

        .nav-slideout .items ul li a {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -o-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            color: #333;
            text-decoration: none;
            padding: 2px 10px;
            width: 100%;
            position: relative;
        }

    .nav-slideout ul li a:first-child:hover span,
    .nav-slideout ul li a span.More_active:hover,
    .nav-slideout ul li a span.calendar_active:hover,
    .nav-slideout ul li a span.adress_active:hover,
    .nav-slideout ul li a span.messages_active:hover,
    .nav-slideout ul li a span.notes_active:hover,
    .nav-slideout ul li a span.documents_active:hover,
    .nav-slideout ul li a:hover {
        text-decoration: underline;
        color: #333;
    }

    .nav-slideout ul li a .arrow-container {
        background-position: 133.5px -712.2px;
        height: 41px;
        width: 58px;
    }

    .nav-slideout ul li a .arrow {
        background-position: 133.5px -712.2px;
    }

    .nav-slideout ul li a:hover .arrow {
        background-position: 240.2px -712.2px;
    }

.main-menu ul li a span.more_active {
    background-color: #f4f4f4;
    color: #333;
}

.nav-slideout ul li a span.calendar_active,
.nav-slideout ul li a span.adress_active,
.nav-slideout ul li a span.messages_active,
.nav-slideout ul li a span.notes_active,
.nav-slideout ul li a span.documents_active {
    text-decoration: underline;
}

.nav-slideout .items ul li a span {
    display: inline-block;
    padding: 3px 0;
    border-right: 0;
}

.closing-panel {
    text-align: center;
    padding: 1em;
    background: #efefef;
    border-top: 1px solid #d1d1d1;
    z-index: 5000;
    position: relative;
}

    .closing-panel button {
        background: #fff;
        padding: 0;
        border-radius: 3px;
        cursor: pointer;
        border: 1px solid #bebebe;
        box-shadow: 0 1px 3px rgba(51, 51, 51, .6);
    }

        .closing-panel button:hover {
            background: #f4f4f4;
        }

.c-hamburger {
    background: #900;
    width: 40px;
    height: 40px;
    position: relative;
    padding: 11px 18px;
    margin: 0;
    display: none;
    cursor: pointer;
    top: 0;
    border-radius: .2em;
}

    .c-hamburger i {
        height: 2px;
        position: absolute;
        left: 17px;
        top: 0;
        width: 25px;
        background: #FFF !important;
        -webkit-transition: -webkit-transform .2s ease,opacity .2s ease;
        -moz-transition: -moz-transform .2s ease,opacity .2s ease;
        -o-transition: -o-transform .2s ease,opacity .2s ease;
        -ms-transition: -ms-transform .2s ease,opacity .2s ease;
        transition: transform .2s ease,opacity .2s ease;
        pointer-events: none;
    }

    .c-hamburger .c-hamburger-1 {
        top: 22px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
    }

    .c-hamburger .c-hamburger-2 {
        top: 30px;
    }

    .c-hamburger .c-hamburger-3 {
        top: auto;
        bottom: 14px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
    }

.nav-slideout {
    width: 60% !important;
    top: 58px;
    background: #f4f4f4;
}

.main-menu.is-active .nav-slideout ul {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
/*------------------------------------------end Hauptmenu------------------------------------------*/
/*------------------------------------------start content------------------------------------------*/
/*Breadcrumb*/
.breadcrumb {
    padding: 0 0 20px 120px;
}

    .breadcrumb a {
        color: #333;
    }

    .breadcrumb b {
        color: #333;
    }

    .breadcrumb span b {
        color: #e60000;
    }

.m-rhombus {
    display: none;
    background-color: #900;
}

.Info-Content {
    padding: 0 15px;
}

    .Info-Content p {
        margin: 0 0 10px 0;
    }

/*Buttons*/
.disabledButton, .disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity: 0.5;
    cursor: default;
}

.delete {
    text-align: left;
    margin-right: 10px;
}

    .delete img {
        position: relative;
        top: 3px;
    }

/*Liste mit Zahlenauflistung*/
.orderedList {
    counter-reset: orderedList;
    clear: both;
    margin: 15px 0;
    padding: 0 0 0 34px;
}

    .orderedList li {
        list-style-position: inside;
        list-style-type: none;
        margin: 0 0 16px 0;
    }

        .orderedList li:before {
            counter-increment: orderedList;
        }

        .orderedList li span {
            display: inline-block;
            margin-left: 12px;
            width: 93%;
        }

    .orderedList.ol1 li:before {
        content: "1." counter(orderedList) " ";
    }

    .orderedList.ol2 li:before {
        content: "2." counter(orderedList) " ";
    }

    .orderedList.ol22 li:before {
        content: "2.2." counter(orderedList) " ";
    }

    .orderedList.ol3 li:before {
        content: "3." counter(orderedList) " ";
    }

    .orderedList.ol4 li:before {
        content: "4." counter(orderedList) " ";
    }

    .orderedList.ol5 li:before {
        content: "5." counter(orderedList) " ";
    }

    .orderedList.ol6 li:before {
        content: "6." counter(orderedList) " ";
    }

    .orderedList.ol7 li:before {
        content: "7." counter(orderedList) " ";
    }

    .orderedList.ol8 li:before {
        content: "8." counter(orderedList) " ";
    }

    .orderedList.ol9 li:before {
        content: "9." counter(orderedList) " ";
    }

    .orderedList.ol5 .innerUl {
        margin: 20px 0 0 0;
    }

        .orderedList.ol5 .innerUl li:before {
            content: normal;
        }

        .orderedList.ol5 .innerUl li {
            list-style-type: disc;
        }

            .orderedList.ol5 .innerUl li span {
                display: inline;
            }

    .orderedList.ol22 {
        margin-top: 20px;
    }

.entry-content {
    background: #fff;
    max-width: 950px;
    margin: 0 auto;
}

    .entry-content h2 a,
    .entry-content h3 a,
    .entry-content h4 a {
        text-decoration: none;
    }

        .entry-content h2 a:hover,
        .entry-content h3 a:hover,
        .entry-content h4 a:hover {
            color: #333;
            cursor: default;
        }

    .entry-content:after,
    .entry-content::after {
        content: "";
        clear: both;
        display: table;
    }

#content-region {
    background: none;
}

/*Formulare*/
.cg1 {
    width: 140px;
}

.cg2 {
    width: 5px;
}

.cg3 {
    width: 475px;
}

.cg4 {
    width: auto;
}

.overView table, .preView table, .editView table {
    table-layout: fixed;
    text-align: left;
}

.overView, .preView {
    background: #fff;
    max-width: 770px;
    padding: 10px;
    margin: 0 0 4px 0;
}

.editView {
    background: #f4f4f4;
    max-width: 770px;
    padding: 10px;
    margin: 0 0 4px 0;
}

    .editView:after,
    .editView::after {
        content: "";
        clear: both;
        display: table;
    }

.overView:after,
.overView::after,
.preView:after,
.preView::after {
    content: "";
    clear: both;
    display: table;
}

.preView table tbody tr td, .editView table tbody tr td, .overView table tbody tr td {
    padding: 3px 0;
    vertical-align: top;
}

    .preView table tbody tr td div.txt, .preView table tbody tr td span.txt, .editView table tbody tr td span.txt {
        padding: 3px 0 0 0;
        display: inline-block;
        min-height: 29px;
    }

    .preView table tbody tr td.rspan, .overView table tbody tr td.rspan, .editView table tbody tr td.rspan {
        padding: 0;
    }

.overView table tbody div.txt, .preView table tbody div.txt {
    min-height: 32px;
}

.overView table tbody tr td.rspan table.inner .cg1 {
    width: 40px;
}

.overView table.tarifDescription tbody tr td.rspan table.inner .cg1 {
    width: 380px;
}

.overView table.exportPanel tbody tr td.rspan table.inner .cg1 {
    width: 360px;
}

.overView table .cg1 {
    width: 98%;
}

.overView table .cg2 {
    width: auto;
}


/*sticky*/
table.infoPanel .FAQContent i {
    font-style: normal;
    line-height: 1.55 !important;
    font-family: "Vodafone", Helvetica Neue,Helvetica,Arial,sans-serif !important;
}

table.infoPanel .FAQContent a {
    text-decoration: underline;
}

table.infoPanel .FAQContent h2 {
    font: 700 20px/1.176 "Vodafone",sans-serif;
    color: #333;
    padding: 8px 0;
}

table.infoPanel pre {
    white-space: pre-line;
}

table.infoPanel .cg1 {
    width: 0;
}

table.infoPanel .cg2 {
    width: 100%;
}

table.infoPanel .cg3 {
    width: 0;
}

.preView table.infoPanel, .editView table.infoPanel {
    width: 100%;
}

/*Rating*/
.ratingStar, .ratingStarReadOnly {
    width: 24px;
    height: 24px;
    margin: 0 2px 4px 0;
    padding: 0 !important;
    float: left;
    background-repeat: no-repeat;
}

.favoriteCard .ratingStarReadOnly,
.edit-mode .ratingStarReadOnly {
    cursor: pointer;
}

.emptyRatingStar i:before,
.emptyRatingStar i::before,
.savedRatingStar i:before,
.savedRatingStar i::before {
    color: #5a5b5f;
}

.filledRatingStar i:before,
.filledRatingStar i::before {
    color: #eb9700;
}

/*start Dokumente*/
#details div {
    margin: 0 10px;
}

    #details div label {
        display: inline-block;
        font-weight: bold;
        width: 50%;
    }

    #details div span {
        display: inline-block;
        min-width: 50%;
    }

#details .processing-info {
    background: #F2F2F2;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 5px;
    color: grey;
}

#details {
    padding: 15px;
}

#readingContainer {
    position: relative;
}

#inner-south #readingContainer.repos .empty {
    display: inline-block;
    width: 100%;
    margin: 50px 0 0 0;
}

    #inner-south #readingContainer.repos .empty div:first-child {
        padding: 60px 0 0 0;
    }

    #inner-south #readingContainer.repos .empty > div {
        width: 50%;
        float: left;
    }

.popup-container h2 span {
    color: #6C95A8 !important;
}

/*Startseite*/
#center {
    background: #fff !important;
}

.toggleImg, .toggleImgUp {
    float: right;
    height: 12px;
    margin: 3px 5px 0 5px;
    width: 12px;
}

/*------------------------------------------start Passwortstärke in Einstellungen Sicherheit------------------------------------------*/
.resultMeter, .passwordToshort, .passwordBad, .passwordGood, .passwordStrong {
    background: url('../../img/vodafone/Registry/sprite.gif') no-repeat;
    height: 15px;
}

.resultMeter {
    background-position: 0 0;
}

.passwordToshort, .passwordBad, .passwordGood, .passwordStrong {
    font-size: 0.7em;
    padding-left: 160px;
}

.passwordToshort {
    background-position: 0 -15px;
    color: #333;
}

.passwordBad {
    background-position: 0 -30px;
    color: #333;
}

.passwordGood {
    background-position: 0 -45px;
    color: #009000;
}

.passwordStrong {
    background-position: 0 -60px;
    color: #009000;
}


/*------------------------------------------end Passwortstärke------------------------------------------*/
/*Tooltip*/
.imageTooltip {
    display: none;
    position: absolute;
    z-index: 50;
}

    .imageTooltip .tooltipImagePic {
        padding: 8px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        font-weight: normal;
        line-height: 1em;
        background: #fffbde;
    }

    .imageTooltip .tooltipImage {
        background: transparent url('../../img/vodafone/ContentFrame/tooltipArrow.gif') no-repeat 0 0;
        height: 7px;
        padding: 0 2px 0 8px;
    }

.tooltip {
    display: none;
    position: absolute;
    z-index: 50;
}

    .tooltip .tooltipImage {
        background: transparent url('../../img/vodafone/ContentFrame/tooltipArrow.gif') no-repeat 0 0;
        width: 100%;
        height: 7px;
        padding: 0 2px 0 8px;
    }

    .tooltip .tooltipText {
        padding: 4px 0 4px 8px;
        border: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background: #fffbde;
        width: 100%;
    }

/*Spaltenbreitedefinitionen für die Popup-Fenster*/
.mobile {
    width: 690px;
}
/*allgemeine CSS-Angaben für die Fancybox Adressen und Lesezeichen*/
fieldset a.toggle {
    text-decoration: none;
    color: inherit;
}

fieldset div.input {
    float: left;
    margin: 1% 0;
    width: 60%;
}

fieldset span.label label {
    width: auto;
}

fieldset div.input select {
    margin-right: 2%;
}

fieldset legend {
    color: #333;
    font-weight: bold;
    font-size: 1em;
    width: 100%;
    padding: 15px 0 3px 0;
}

.popup-container:after,
.popup-container::after {
    content: "";
    clear: both;
    display: table;
}

.popup-container .exportContent input,
.popup-container .exportContent span,
.popup-container .exportContent select {
    vertical-align: middle;
}

.popup-container .importContent span select {
    width: calc(100% - 5px);
    margin: 0;
}

.popup-container .importContent label {
    width: 160px !important;
}

.popup-container input,
.popup-container textarea {
    padding: 6px 5px;
}

    .popup-container input.error {
        background: none;
        border: 1px solid #DD3C10;
    }

    .popup-container input[type="checkbox"],
    .popup-container input[type="radio"] {
        border: 0;
        padding: 0;
        margin: 5px;
        width: auto;
        vertical-align: middle;
    }

/*Fancybox Notizen*/
fieldset div#favRating {
    float: left;
    margin: 8px 0;
}

.fileinput-button input {
    border: 0 solid transparent;
    cursor: pointer;
    direction: ltr;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto !important;
}

/*Kontaktbild popup*/

.cropper-face {
    border-radius: 50%;
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}

.popup-container .picContent .img-preview-sm {
    height: 130px;
    border-radius: 50%;
    width: 130px;
}

.picContent {
    width: 600px;
}

    .picContent .img-container {
        background: black;
        float: left;
        max-height: 300px;
        border: 1px solid #000;
        width: 300px;
    }

    .picContent .buttonbar {
        float: left;
        height: auto;
        left: 20px;
        position: relative;
        width: 25px;
        margin: 0;
    }

        .picContent .buttonbar a {
            display: inline-block;
            margin: 5px;
        }

    .picContent .img-preview-sm {
        float: left;
        height: 120px;
        left: 50px;
        position: relative;
        top: 0;
        width: 90px;
    }

    .picContent .img-preview-thumb {
        float: left;
        height: 66px;
        left: 70px;
        position: relative;
        top: 0;
        width: 50px;
    }

    .picContent .img-preview {
        overflow: hidden;
        text-align: center;
    }

/*Tarifübersicht*/

.tariff_overview .section .light {
    background: none;
}

.tariff_overview i.fx.icon-check:before {
    color: #009000;
}

.tariff_overview i.fx.icon-cross:before {
    color: #e60000;
}

.tariff_overview i.fx.icon-info:before {
    color: #666;
}

.tariff_overview table.tariffs tr td {
    width: 50%;
}
    /*CSS kann wieder weg wenn Inhalte über Tarif / Datenbank geregelt werden*/
    .tariff_overview table.tariffs tr td:first-child .tfPriceOld s,
    .tariff_overview table.tariffs tr td:first-child span.freeduration,
    .tariff_overview table.tariffs tr td:first-child span.paymentinfo,
    .tariff_overview table.tariffs tr td:last-child span.freemailerinfo,
    .tariff_overview table.tariffs tr td span.freemailerinfo a {
        display: none;
    }

    /*
    .tariff_overview table.tariffs tr td:first-child .tfPriceOld s,
    .tariff_overview table.tariffs tr td:first-child span.freeduration,
    .tariff_overview table.tariffs tr td:first-child span.paymentinfo,
    .tariff_overview table.tariffs tr td:last-child span.paymentinfo a,
    .tariff_overview table.tariffs tr td:last-child span.freemailerinfo,
    .tariff_overview table.tariffs tr td:first-child span.freemailerinfo span,
    .tariff_overview table.tariffs tr td:last-child span.paymentinfo span,
    .tariff_overview table.tariffs tr td:last-child .tfPrice span.freeduration {
        display: none;
    }*/

    /*CSS kann wieder weg wenn Inhalte über Tarif / Datenbank geregelt werden*/

    .tariff_overview table.tariffs tr td span.paymentinfo div,
    .tariff_overview table.tariffs tr td span.freemailerinfo div {
        min-height: 55px;
        width: 100%;
        padding-top: 15px;
    }

    .tariff_overview table.tariffs tr td span.freemailerinfo .btn {
        width: calc(100% - 4px);
        background-color: #ccc;
        border-color: #ccc;
        border-radius: 3px;
        box-shadow: none;
        margin-bottom: 20px;
    }

    .tariff_overview table.tariffs tr td span.paymentinfo .btn {
        width: calc(100% - 4px);
        background-color: #eb0000;
        border-color: #eb0000;
        color: #fff;
        border-radius: 3px;
        box-shadow: none;
        margin-bottom: 20px;
    }

    .tariff_overview table.tariffs tr td h1 {
        padding: 20px 0;
    }

.tariff_overview table.tariffs .tfItem {
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    padding: 0 28px 28px 28px;
    margin: 0 10px;
    border-radius: 5px;
    padding-top: 50px;
    margin-bottom: 50px;
}

    .tariff_overview table.tariffs .tfItem .tfbadge {
        background: green;
        width: 120px;
        border-radius: 15px;
        padding: 2px 10px;
        color: #fff;
        position: absolute;
        top: 35px;
        margin: 0 0 20px 0;
    }

    .tariff_overview table.tariffs .tfItem .tfc_image {
        float: right;
        position: relative;
        top: -15px;
    }

.tariff_overview table.tariffs tr td span.tfBtn {
    display: block;
    margin: 10px auto;
    text-align: center;
}

.tariff_overview table.tariffs .tfPrice {
    font-weight: bold;
    margin: 0 10px 0 0;
    font-size: 60px;
    color: #333;
    position: relative;
}

.tariff_overview table.tariffs .tfPriceOld {
    color: #e60000;
    font-weight: bold;
    font-size: 20px;
    min-height: 30px;
    position: relative;
    top: 20px;
}

.tariff_overview table.tariffs .priceper {
    font-size: 14px !important;
    color: #999;
    position: relative;
    top: 60px;
    left: -90px;
    font-weight: normal;
}

.tariff_overview table.tariffs .tfPrice span {
    font-size: 40px;
    margin-top: 9px;
    display: inline-block;
}

    .tariff_overview table.tariffs .tfPrice span.freeduration {
        font-size: 14px;
        color: #000;
        width: 140px;
        margin: 20px 0 20px 0;
        position: absolute;
        top: 0;
    }

        .tariff_overview table.tariffs .tfPrice span.freeduration i {
            float: left;
        }

            .tariff_overview table.tariffs .tfPrice span.freeduration i:before {
                color: #e60000;
            }

.tariff_overview table.tariffs .tfInfos {
    display: none;
    visibility: hidden;
}

    .tariff_overview table.tariffs .tfInfos a {
        display: block;
        width: 100%;
        color: #e60000;
        text-decoration: none;
        text-align: center;
        border-top: 1px solid #ccc;
        padding: 15px 0px;
    }

        .tariff_overview table.tariffs .tfInfos a i.fx:before {
            color: #e60000;
        }

        .tariff_overview table.tariffs .tfInfos a i {
            transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
            transform-origin: center;
        }

        .tariff_overview table.tariffs .tfInfos a.open i {
            transform: rotateX(180deg);
        }

.tariff_overview table.tariffs .tfc_info {
    display: block;
    min-height: 180px;
}

    .tariff_overview table.tariffs .tfc_info h2 {
        min-height: 60px;
        /*top: 30px;
        position: relative;*/
    }

    .tariff_overview table.tariffs .tfc_info ul {
        margin: 8px 0;
        list-style-type: none;
        min-height: 120px;
    }

        .tariff_overview table.tariffs .tfc_info ul li {
            list-style: none;
            background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cpolyline%20points%3D%22169%2C42.7%2068.9%2C142.8%2024.5%2C98.3%22%20stroke%3D%22%23318721%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%228%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
            background-size: 24px;
            background-position: 0;
            background-repeat: no-repeat;
            padding: 0 0 0 30px;
            margin: 0 0 8px 0;
        }

.tariff_overview table.tariffs tr td:first-child .tfc_info ul li:last-child {
    background-image: url('../../img/vodafone/Icons/svg/info.svg');
}

.tariff_overview table.tariffs .tfc_info span {
    display: block;
    margin: 0 10px 8px 10px;
}


/*------------------------------------------start Bestellprozess neu------------------------------------------*/
.cloudbar {
    background: url('../../img/vodafone/common/cloudbalken.png') no-repeat scroll 0 0 transparent;
    height: 30px;
    margin: 10px 0;
}

.stepbar {
    background: url('../../img/vodafone/common/prozessbalken.png') no-repeat scroll 0 0 transparent;
    height: 30px;
    margin: 10px 0;
}

    .cloudbar.step2, .stepbar.step2 {
        background-position: 0 0;
    }

    .cloudbar.step2, .stepbar.step2 {
        background-position: 0 -50px;
    }

    .cloudbar.step3, .stepbar.step3 {
        background-position: 0 -100px;
    }

    .cloudbar.step4, .stepbar.step4 {
        background-position: 0 -150px;
    }

    .cloudbar.step5, .stepbar.step5 {
        background-position: 0 -200px;
    }

    .cloudbar.step6, .stepbar.step6 {
        background-position: 0 -250px;
    }

.order #step1 input.comboboxLarge,
.order #step1 input.inputLarge,
.order #step1 input.textareaLarge {
    width: 50%;
}

.order #step2 input.comboboxLarge,
.order #step2 input.inputLarge,
.order #step2 input.textareaLarge {
    width: 50%;
}

.order .footer {
    text-align: right;
}

.order .content.blank {
    background: #fff;
    padding: 0 5px;
}

.order h4 span.error {
    background-position: 0 2px;
    background-image: url('../../img/vodafone/common/unchecked.png');
}

.order span.ok {
    background: url('../../img/vodafone/common/check.png') no-repeat 0 0;
    margin: 0;
    padding: 0 0 0 20px;
}

.order hr {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    border-left: 0;
    border-right: 0;
    margin: 10px 0 0 0;
    padding: 0;
}

.order .note.qe_tooltipp img {
    position: relative;
    top: 7px;
}

.order h1 .note.qe_tooltipp img {
    position: relative;
    top: 18px;
}

.order span.txt {
    display: inline-block;
    margin-top: 5px;
}

    .order span.txt .qe_tooltipp img {
        top: 2px;
    }

.order input[type="checkbox"] {
    margin: 1px 5px 0 1px;
}

.order .btn {
    margin: 20px 0 0;
}

.order .toggle {
    background: url('../../img/vodafone/common/order-arrow.png') no-repeat scroll 0 6px transparent;
    padding: 0 20px 0 0;
    margin: 0 5px 0 0;
}

    .order .toggle.collapsed {
        background: url('../../img/vodafone/common/order-arrow-up.png') no-repeat scroll 0 6px transparent;
        padding: 0 20px 0 0;
        margin: 0 5px 0 0;
    }

.order .content p, .order .content.blank p {
    margin: 8px 0;
    padding: 0;
    width: 75%;
}

.order .content label,
.order .content.blank label,
.order .content.blank .headline span.label {
    width: 155px;
    display: inline-block;
    vertical-align: top;
    min-height: 22px;
    padding: 0;
    margin: 6px 0 0 0;
}

.order .content .indent label {
    vertical-align: inherit;
    margin: 0;
    display: inline;
}

.order .content .headline span.label {
    width: 155px;
    display: inline-block;
    vertical-align: top;
    min-height: 22px;
    padding: 0;
    margin: 0;
}

.order .content .headline span.radio span.label {
    width: 135px;
}


.order div.input {
    margin: 5px 0;
}

.order .headline {
    margin: 0 0 8px 0;
}

    .order .headline span#condition {
        min-height: 25px;
    }

.order label.error.indent {
    margin: 5px 0 0 158px;
}

.order .indent {
    width: 62%;
    margin: 0 0 0 160px;
}

.order .headline .indent {
    display: inline-block;
    margin: 0;
    width: 62%;
}

.order .indent p {
    margin: 0 0 14px 0;
    padding: 0;
    width: 100%;
}

.order .emailcheck-engange {
    margin-left: 160px;
}

.order .textbox {
    border: 1px solid #aaa;
    background: #fff;
    height: 64px;
    padding: 4px;
    margin: 0 0 15px 0;
    overflow: auto;
}

.order .special_list {
    margin: 0;
    padding: 0 0 0 8px;
}

    .order .special_list li {
        line-height: 1.125em;
        list-style-image: url("../../img/vodafone/ContentFrame/special_bullet.gif");
    }

.banner {
    margin: 20px 0;
    padding: 0;
    width: 790px;
}

/*------------------------------------------end Bestellprozess neu------------------------------------------*/

.order label.error /* added by k.p. */ {
    color: #f00;
    display: block;
    margin: 2px 0 0 0;
    text-align: left;
    width: auto;
    min-height: 25px;
}

.order input.error /* added by k.p. */ {
    color: #000 !important;
}

.order .loading-indicator {
    margin: 0 4px 0 0;
}

.order #emailcheck {
    margin: 5px 0;
}

.order #suggestions p {
    /* added by k.p. */
    color: #979797;
    margin: 0;
    padding: 8px 0;
    text-transform: uppercase;
}

.order #suggestions ul {
    /* added by k.p. */
    line-height: 1.250em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

    .order #suggestions ul li span {
        /* added by k.p. */
        float: left;
        overflow: hidden;
        white-space: nowrap;
        width: 420px;
    }

    .order #suggestions ul li input.ui-item-button {
        /* added by k.p. */
        border: 0 none !important;
        color: #333;
        font-weight: bold;
        margin: 0;
        padding: 3px 0;
        text-align: center;
        width: 100px;
        cursor: pointer;
    }

    .order #suggestions ul li {
        list-style: none;
        margin: 0;
        padding: 3px 0;
    }

.order .footer .back {
    float: left;
}

/*-----------------------------------------------start payment-----------------------------------------------*/
.prepay {
    width: 790px;
}

    .prepay h2 {
        padding: 5px 0;
    }

    .prepay .wikitable {
        background: #eee;
        border: 1px solid #ccc;
        width: 100%;
    }
/*-----------------------------------------------end payment-----------------------------------------------*/
/*neue FAQ*/
.faqContainer .back {
    text-align: right;
}

.faqContainer h2 {
    margin: 8px 0;
}

.faqContainer .ui-accordion-content h2 {
    margin: 8px 0;
}
/*start Suche in der FAQ*/

.leading-in p {
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    border-top-color: #ebebeb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    padding: 20px 20px 0 20px;
    position: relative;
    margin-bottom: 0;
}

.faqHeader {
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-top: 0;
    border-bottom-color: #999;
    border-radius: 0 0 5px 5px;
    border-top-color: #ebebeb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    padding: 20px;
    position: relative;
}

    .faqHeader .inner {
        background: none;
        border: 0;
    }

    .faqHeader button {
        float: right;
    }

    .faqHeader .searchArea,
    .faqHeader .selectArea {
        margin-bottom: 10px;
    }

        .faqHeader .selectArea .cat {
            width: 48%;
            margin: 0 18px 0 0;
        }

        .faqHeader .selectArea .subcat {
            width: 50%;
            margin: 0;
        }

        .faqHeader .searchArea label {
            display: inline-block;
            width: 10%;
        }

        .faqHeader .searchArea input {
            width: calc(100% - 18px);
            margin: 0;
        }

/*Online Hilfe*/
.FAQheader {
    background: url("../../img/vodafone/common/tm-grau.png") repeat-x scroll 0 0 transparent;
}

    .FAQheader .logo {
        background: url("../../img/vodafone/common/logo-vodafone.png") no-repeat scroll 0 5px transparent !important;
        border: 0 none;
        display: block;
        height: 40px;
        margin: 0;
        padding: 0;
    }

    .FAQheader .breadcrumb {
        color: #7E868A;
        display: block;
        overflow: hidden;
        padding: 0;
        font-weight: normal;
        background: #fff;
        padding: 8px 0 0 12px;
    }

/*App Download*/
.app-gallery {
    background-color: #f4f4f4;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    line-height: 18px;
    min-height: 180px;
    padding: 30px 0;
    margin: 0 0 25px 0;
}

    .app-gallery p {
        color: #E60000;
        margin: 0 0 20px 0;
    }

    .app-gallery .gallery-frame .image-wrapper:after,
    .app-gallery .gallery-frame .image-wrapper::after {
        content: "";
        clear: both;
        display: table;
    }

    .app-gallery a {
        float: left;
        margin: 0 3px 0;
        border: transparent solid 1px;
    }

        .app-gallery a:hover {
            border: 1px solid #E60000;
        }

.AppInfo {
    background: url('../../img/vodafone/ContentFrame/vodafone-App-Info.png') no-repeat scroll 100% 12px transparent;
    min-height: 400px;
}

    .AppInfo h1 {
        margin: 0;
        padding: 22px 0;
    }

    .AppInfo h2 {
        font-size: 30px;
        padding: 8px 0 0 0;
    }

    .AppInfo .list--gray {
        margin: 25px 0 0 0;
        width: 50%;
        color: #333;
    }

        .AppInfo .list--gray li {
            list-style-image: url('../../img/vodafone/ContentFrame/img-table-positiv.png');
            margin: 0 0 10px 26px;
        }

.stage-area {
    margin: 20px 0;
}

    .stage-area.app-features div.flexbox {
        margin: 0 -20px 20px;
    }

        .stage-area.app-features div.flexbox .flexbox-cell {
            display: table-cell;
            position: relative;
            vertical-align: top;
        }

        .stage-area.app-features div.flexbox .flexbox-row {
            border-collapse: separate;
            border-spacing: 20px 0;
            display: table;
            table-layout: fixed;
            width: 100%;
        }

            .stage-area.app-features div.flexbox .flexbox-row .flexbox-cell {
                padding-bottom: 0;
                text-align: center;
            }

                .stage-area.app-features div.flexbox .flexbox-row .flexbox-cell.flexbox-cell--w33 {
                    width: 33%;
                }

                .stage-area.app-features div.flexbox .flexbox-row .flexbox-cell span {
                    display: inline-block;
                    width: auto;
                    border: 2px solid #666;
                    border-radius: 100%;
                    padding: 40px;
                    margin: 20px auto;
                    text-align: center;
                }

                    .stage-area.app-features div.flexbox .flexbox-row .flexbox-cell span img {
                        width: 50px;
                    }

.AppMarket .box-apple, .AppMarket .box-android {
    display: inline-block;
    width: 46%;
    margin: 0 0 20px 0;
    float: left;
    padding: 2%;
    text-align: center;
}

.AppMarket {
    margin: 15px 0;
    background-color: #f4f4f4;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    line-height: 18px;
    min-height: 180px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

    .AppMarket div.col-half {
        width: 50%;
        float: left;
    }

    .AppMarket .list--gray li {
        color: #333;
        background: url('../../img/vodafone/ContentFrame/img-table-positiv.png') 0 0 no-repeat;
        padding: 0 0 10px 25px;
        margin: 0;
        list-style: none;
    }

    .AppMarket .apple {
        background: url('../../img/vodafone/parallax/download_AppStore.png') no-repeat scroll 0 bottom transparent;
        width: auto;
        height: 70px;
        display: block;
        margin: 5px 5px 20px 0;
        background-size: 100%;
    }

    .AppMarket .android {
        background: url('../../img/vodafone/parallax/download_GooglePlay.png') no-repeat scroll 0 bottom transparent;
        width: auto;
        height: 70px;
        display: block;
        margin: 5px 5px 20px 0;
        background-size: 100%;
    }

/*-----------------------------------------------start registrieren-----------------------------------------------*/
#register #register-intro,
#register #register-data,
#register #register-confirm,
#register #register-result,
#register .editView fieldset.birthday-picker,
#register div.form label.error,
#register fieldset div.input input,
#feedback-container,
#feedback-container div.form label.error,
#feedback-container fieldset div.input input[type="text"],
#feedback-container div.input select,
#feedback-container div.input textarea {
    width: 100%;
}

    #feedback-container div.input .inputSmall {
        margin-right: 0;
        width: 67%;
    }

    #feedback-container div.input .comboboxTiny {
        width: 30%;
    }

    #register .preView fieldset,
    #register .editView fieldset,
    #feedback-container .editView fieldset,
    .register-footer,
    .feedback-footer,
    #password-forget .preView fieldset,
    #password-forget .editView fieldset,
    #password-forget .overView fieldset {
        -padding: 2%;
    }

    #register div.form .label,
    #register div.form label,
    #feedback-container div.form .label,
    #feedback-container div.form label,
    #password-forget div.form .label,
    #password-forget div.form label {
        float: left;
        margin: 13px 2% 0 0;
        width: 23%;
    }

#register #personaldata:after,
#register #personaldata::after,
#register #addressdata:after,
#register #addressdata::after,
#register #birthdata:after,
#register #birthdata::after,
#register #emailaddress:after,
#register #emailaddress::after,
#register #company-slot:after,
#register #company-slot::after,
#register #customQuestion-panel:after,
#register #customQuestion-panel::after,
#register #reg-validation:after,
#register #reg-validation::after {
    content: "";
    clear: both;
}

#register fieldset.toggleInfo legend {
    padding: 0;
}

#password-forget fieldset legend {
    padding: 0;
}

#register fieldset div.headline {
    padding: 1%;
}

#register .toggle {
    background: url('../../img/vodafone/common/order-arrow.png') no-repeat scroll 0 0 transparent;
    padding: 2px 0 0 26px;
}

    #register .toggle.collapsed {
        background: url('../../img/vodafone/common/order-arrow-up.png') no-repeat scroll 0 0 transparent;
    }

#register div.form label[for="city"],
#register div.form label[for="pcode"] {
    width: auto;
    margin-right: 0;
}

#register fieldset div#salutation label,
#register fieldset div#salutation input {
    float: none;
    width: auto;
}

#register div.form input#username {
    width: 40%;
    margin-right: 0;
}

#register div.form .at {
    display: inline-block;
    width: 10%;
    text-align: center;
}

#register div.form select#domainname {
    margin-right: 0;
    width: 40%;
}

#register div.form input#pcode {
    margin-right: 2%;
    width: 30%;
}

#register div.form input#city {
    width: 68%;
    margin-right: 0;
}

#register div.form select.birth-month {
    width: 36%;
}

#register div.form select.birth-day {
    width: 30%;
}

#register div.form select.birth-year {
    width: 30%;
    margin-right: 0;
}

#register div.form .captcha,
#register div.form #suggestionsList,
#register span.note.inline {
    margin-left: 0;
}

#register div.form #suggestions ul {
    margin: 0;
    width: 90%;
}

    #register div.form #suggestions ul li {
        margin: 0;
        list-style: none;
        position: relative;
    }

        #register div.form #suggestions ul li span {
            width: 60%;
            padding: 2% 0;
            display: inline-block;
            margin: 5px 0;
        }

        #register div.form #suggestions ul li input {
            position: absolute;
            right: 0;
        }

#register div.form .captcha,
#register span.note.inline,
#register div.form #emailaddress-check-panel {
    display: block;
    margin-left: 25%;
    width: 60%;
}

#register div.form #emailaddress-check {
    margin: 25px 0;
}

#register div.form .captcha img {
    background-color: #fff;
    border: 1px solid #999;
    padding: 2px;
    margin: 0 0 8px 0;
}

#register div.form .captcha input {
    float: right;
    border-radius: 3px;
    cursor: pointer;
    height: auto;
    margin: 5px 0;
    padding: 10px 20px;
    width: auto;
}

#register div.form fieldset.birthday-picker {
    padding: 0;
}

#register div.form select#country,
#register div.form select#securityQuestion {
    width: 100%;
}

#register span.qe_tooltipp {
    position: relative;
    top: 12px;
    left: 5px;
    cursor: pointer;
}

.right-area span.qe_tooltipp {
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 50;
}

#register #register-intro-fwd,
#register #register-data-fwd,
#register #register-confirm-fwd,
#feedback-container .feedback-footer input {
    float: right;
}

#password-forget .register-footer {
    text-align: right;
}

.register-footer:after,
.register-footer::after {
    content: "";
    clear: both;
}

#register div.form div#reg-data .label {
    margin: 1% 0;
    font-weight: bold;
}

#register .indent {
    display: inline-block;
    margin: 0 0 0 1%;
}

    #register .indent input[type="checkbox"] {
        width: auto;
    }

/*------------------------------------------start Passwortstärke in Einstellungen Sicherheit------------------------------------------*/
#password-level-indicator {
    background: url('../../img/vodafone/Registry/sprite.gif') 0 0 no-repeat scroll transparent;
    float: left;
    height: 15px;
    padding: 0 0 0 160px;
    position: relative;
    text-align: left;
    margin: 15px 0;
}

.passwordToshort, .passwordBad, .passwordGood, .passwordStrong {
    font-size: 12px;
    padding-left: 160px;
}

.passwordToshort {
    background-position: 0 -15px !important;
    color: #333;
}

.passwordBad {
    background-position: 0 -30px !important;
    color: #333;
}

.passwordGood {
    background-position: 0 -45px !important;
    color: #009000;
}

.passwordStrong {
    background-position: 0 -60px !important;
    color: #009000;
}

.password-status {
    height: 16px;
    float: left;
    width: 16px;
}

    .password-status.passwordBad, .password-status.passwordToshort,
    .password-status.passwordGood, .password-status.passwordStrong {
        background: none;
        position: relative;
        top: 12px;
        margin-left: 5px;
    }
/*-----------------------------------------------end registrieren-----------------------------------------------*/
/*SideStepBar*/
.SiteStepBarBg {
    position: relative;
    max-width: 950px;
    background: #dbdbdb;
    margin: 0 auto;
    display: none;
}

    .SiteStepBarBg .sbItem {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

        .SiteStepBarBg .sbItem span {
            font-size: 1rem;
            line-height: 1.7em;
            color: #333;
            display: block;
            padding: 2px 10px 2px 30px;
            position: relative;
        }

    .SiteStepBarBg .sbImage {
        display: none;
    }

    .SiteStepBarBg .sbItem span.sbSelected {
        background: #E60000;
        color: #fff;
    }

    .SiteStepBarBg .resize {
        height: 100%;
    }

    .SiteStepBarBg .sbItem .sbText.sbSelected::after {
        border-left: 15px solid #E60000;
    }

    .SiteStepBarBg .sbItem .sbText::after {
        border-bottom: 15px solid transparent;
        border-left: 15px solid #dbdbdb;
        border-top: 16px solid transparent;
        content: "";
        position: absolute;
        right: -15px;
        top: 0;
        z-index: 1;
    }

    .SiteStepBarBg .sbItem .sbText::before {
        border-bottom: 15px solid transparent;
        border-left: 15px solid #dbdbdb;
        border-top: 16px solid transparent;
        content: "";
        left: 0;
        position: absolute;
        top: 0;
    }

    .SiteStepBarBg .sbItem:first-child .sbText {
        padding: 2px 20px;
    }

        .SiteStepBarBg .sbItem:first-child .sbText::before {
            display: none;
        }

    .SiteStepBarBg .sbItem:last-child .sbText {
        margin: 0;
    }

/*start Stepbar im Bestellprozess*/
.steps {
    margin: 0 0 0 14px;
}

    .steps h2 {
        border-bottom: 1px solid #ccc;
    }

    .steps ul {
        margin: 10px 0 0 0;
        padding: 0;
    }

        .steps ul li {
            height: 30px;
            color: #000;
            list-style: none;
        }

    .steps span.nr {
        background: url("../../img/vodafone/Icons/registration/inactive.png") no-repeat 4px 3px transparent;
        margin: 0;
        padding: 5px 7px;
        color: #333;
    }

    .steps li.active {
        font-weight: bold;
        color: #E60000;
    }

        .steps li.active span.nr {
            background: url("../../img/vodafone/Icons/registration/active.png") no-repeat 4px 3px transparent;
            margin: 0;
            padding: 6px 10px;
            color: #fff;
        }

/*end Stepbar im Bestellprozess*/

/*Domain*/
.domainREGISTERED, .domainPENDING, .domainACTIVE {
    left: -2px;
    position: relative;
    top: -3px;
    width: 20px;
    height: 20px;
}

.domainREGISTERED {
    background: url('../../img/vodafone/Icons/svg/ampel_r.svg') no-repeat 0 0;
}

.domainPENDING {
    background: url('../../img/vodafone/Icons/svg/ampel_y.svg') no-repeat 0 0;
}

.domainACTIVE {
    background: url('../../img/vodafone/Icons/svg/ampel_g.svg') no-repeat 0 0;
}

#revocation {
    font-weight: normal;
    line-height: 1em;
}

    #revocation h2 {
        color: Gray;
    }

    #revocation label {
        margin-left: 6px;
    }

span .progress div {
    display: inline;
}
/*------------------------------------------end content------------------------------------------*/
/*-----------------------------------------------start Ansicht Posteingang-----------------------------------------------*/

/*---------------- Hier wurde von Shiyi wegen Ticket POR-1072 geändert ----------------*/
#readingContainer {
    background: #fff;
    padding: 0 0 0 20px;
}

    #readingContainer .content-container {
        height: 100%;
    }

    #readingContainer .subject {
        color: #333;
        font-size: 22px;
        padding: 5px 0 0 0;
        min-height: 40px;
        float: left;
    }

    #readingContainer .content-container .left {
        width: 50px;
    }

    #readingContainer .content-container .right {
        width: calc( 100% - 50px);
    }

        #readingContainer .content-container .right .senderdetail p {
            padding: 0;
            margin: 0;
        }

            #readingContainer .content-container .right .senderdetail p .loading {
                margin: 2px 0 0 0;
            }

            #readingContainer .content-container .right .senderdetail p .sender-adress {
                text-decoration: none;
                display: inline-block;
                color: #333;
            }

            #readingContainer .content-container .right .senderdetail p i.fx {
                margin: 3px 0;
            }

            #readingContainer .content-container .right .senderdetail p .icon-express_reply:before {
                cursor: pointer;
                font-size: 16px;
            }

    #readingContainer .content-container .unsubscribe-newsletter-container .icon-arrow_mini_forward:before {
        cursor: pointer;
        font-size: 16px;
        top: 3px;
        position: relative;
    }

    #readingContainer .content-container .left span.initials {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        height: 40px;
        width: 40px;
        border-radius: 100%;
    }

    #readingContainer .frame {
        padding: 0 !important;
        margin: 0 !important;
    }

    #readingContainer .details {
        border-bottom: 1px solid #ddd;
        padding: 0;
        margin-bottom: 20px;
        max-height: 50%;
        margin-right: 20px;
    }

        #readingContainer .details .sender span, #readingContainer .details .dt span {
            display: inline-block;
            color: #333;
            margin: 0 5px 2px 0;
        }

            #readingContainer .details .sender span.addr {
                color: #333;
            }

        #readingContainer .details .actionBar {
            display: inline-block;
            float: right;
            padding: 12px 0 0 0;
        }

            #readingContainer .details .actionBar span a {
                display: inline-block;
                padding: 0 0 0 20px;
                margin: 0 0 5px 0;
            }

                #readingContainer .details .actionBar span a span {
                    display: none;
                    visibility: hidden;
                }

        #readingContainer .details .quickreply textarea {
            width: calc(100% - 10px) !important;
        }

        #readingContainer .details .quickreply a {
            text-decoration: none;
        }

    #readingContainer .result .info {
        color: #009000;
    }

    #readingContainer .details .toggler textarea {
        width: calc(100% - 10px) !important;
    }

    #readingContainer .details .toggler span {
        display: inline-block;
        margin: 5px 20px 5px 0;
    }

        #readingContainer .details .toggler span a {
            text-decoration: none;
        }

        #readingContainer .details .toggler span i {
            display: none;
            visibility: hidden;
        }

        #readingContainer .details .toggler span.ajax-worker {
            margin: 9px;
        }

    #readingContainer .details .toggler .result {
        background: #d5dee5;
        border: 1px solid #ccc;
        margin: 5px 0 10px 0;
        padding: 6px 5px;
    }

        #readingContainer .details .toggler .result span {
            margin: 0;
        }

    #readingContainer .details .fax-toolbar {
        margin: 10px 0;
    }

        #readingContainer .details .fax-toolbar select {
            margin: 0 20px 0 0;
        }

        #readingContainer .details .fax-toolbar i.fx {
            display: none;
        }

    #readingContainer .details .info-container {
        color: #333;
        margin: 0;
        background: none;
        padding: 0;
        text-align: left;
    }

        #readingContainer .details .info-container .show-all-to,
        #readingContainer .details .info-container .collapse-all-to,
        #readingContainer .details .info-container .show-all-cc,
        #readingContainer .details .info-container .collapse-all-cc {
            float: right;
            width: 25px;
        }

            #readingContainer .details .info-container .show-all-to span,
            #readingContainer .details .info-container .collapse-all-to span,
            #readingContainer .details .info-container .show-all-cc span,
            #readingContainer .details .info-container .collapse-all-cc span {
                display: none;
            }


        #readingContainer .details .info-container p {
            padding: 0;
            margin: 0;
            font-size: .9em;
        }

            #readingContainer .details .info-container p.to,
            #readingContainer .details .info-container p.cc {
                max-height: 23px;
                min-height: 23px;
                overflow: hidden;
                display: inline-block;
                width: calc(100% - 100px);
            }

                #readingContainer .details .info-container p.to span.addr, #readingContainer .details .info-container p.cc span.addr {
                    display: inline-block;
                }

        #readingContainer .details .info-container a:hover, #readingContainer .details .info-container a:focus {
            text-decoration: none;
        }

        #readingContainer .details .info-container p b {
            display: inline-block;
            vertical-align: baseline;
            width: 30px;
        }

        #readingContainer .details .info-container p span.date {
            color: #808080;
            font-weight: bold;
        }

    #readingContainer .details div.attachment-container {
        max-height: 45px;
        min-height: 45px;
        overflow: hidden;
    }


    #readingContainer .details .info-container p {
        padding: 0;
        margin: 0;
        font-size: .9em;
    }

        #readingContainer .details .info-container p b {
            display: inline-block;
            width: 30px;
        }

        #readingContainer .details .info-container p span.date {
            color: #808080;
            font-weight: bold;
        }

    #readingContainer .details span.attachment {
        background: none;
        display: inline-block;
        border: 1px solid #ccc;
        padding: 2px;
        margin: 4px 8px 4px 0;
        width: 150px;
        height: 30px;
    }

        #readingContainer .details span.attachment.ui-state-active,
        #readingContainer .details span.attachment.ui-state-active .fx::before,
        #readingContainer .details span.attachment.ui-state-active a {
            color: #005693;
        }

        #readingContainer .details span.attachment:hover {
            cursor: pointer;
            background-color: #f3f2f1;
        }

        #readingContainer .details span.attachment a {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: larger;
            text-decoration: none;
        }

            #readingContainer .details span.attachment a:hover {
                text-decoration: none;
            }

            #readingContainer .details span.attachment a i {
                padding-right: 4px;
            }

            #readingContainer .details span.attachment a span {
                overflow: hidden;
                text-overflow: ellipsis;
            }

    #readingContainer .details .attachment-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

        #readingContainer .details .attachment-toolbar > span {
            margin-right: 20px;
            font-size: .8em;
        }

            #readingContainer .details .attachment-toolbar > span.attachments-count {
                cursor: auto;
                padding: 3px 0;
            }

            #readingContainer .details .attachment-toolbar > span a {
                display: flex;
                padding: 3px 0;
            }

                #readingContainer .details .attachment-toolbar > span a i.fx {
                    display: none;
                    visibility: hidden;
                }

        #readingContainer .details .attachment-toolbar i {
            margin-right: 4px;
        }

#trusted-container {
    background: #f4f4f4 !important;
    text-align: center !important;
    padding: 13px 10px 10px 10px !important;
}

    #trusted-container a {
        text-decoration: none;
    }

    #trusted-container i.icon-cross:before {
        font-size: 0.9em;
        cursor: pointer;
    }

/*SMS Nachrichten*/
.shortmessage {
    padding: 20px 10px 20px 0;
}

.sms-outgoing-message, .sms-incoming-message {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    padding: 10px;
    position: relative;
}

.sms-outgoing-message {
    background-color: #f4fdd2 !important;
    border: 1px solid #c2c9a8 !important;
}

    .sms-outgoing-message .bottom {
        background: url("../../img/vodafone/ContentFrame/chat-green.png") no-repeat scroll 100% 0 transparent;
        bottom: -15px;
        height: 15px;
        position: absolute;
        right: 0;
        width: 32px;
    }

.sms-incoming-message {
    background-color: #e7eff7 !important;
    border: 1px solid #91b6df !important;
}

    .sms-incoming-message .bottom {
        background: url("../../img/vodafone/ContentFrame/chat-blue.png") no-repeat scroll 0 0 transparent;
        bottom: -15px;
        height: 15px;
        position: absolute;
        left: 0;
        width: 32px;
    }
/*-----------------------------------------------end Ansicht Posteingang-----------------------------------------------*/
/*-----------------------------------------------start Datensicherheit in den Einstellungen-----------------------------------------------*/
.section-download .info-box {
    background: #FBFBFB;
    border: 1px solid #DCDBDB;
    margin: 0 0 10px 0;
    padding: 10px;
    width: calc(100% - 20px);
}

    .section-download .info-box tr:last-child td {
        border-bottom: 1px solid #DCDBDB;
    }

    .section-download .info-box td {
        padding: 5px;
        border-bottom: 1px solid #ededed;
        vertical-align: middle;
        height: 40px;
    }

    .section-download .info-box i:before {
        margin-right: 5px;
        display: inline-block;
    }

    .section-download .info-box a i:before {
        top: 3px;
        vertical-align: unset;
        position: relative;
    }

    .section-download .info-box .btn i:before {
        top: 0;
        vertical-align: top;
    }

    .section-download .info-box tr:nth-child(odd) {
        background-color: #fff;
    }

    .section-download .info-box tr:nth-child(even) {
        background-color: #f9f9f9;
    }
/*-----------------------------------------------start POP3/IMAP-----------------------------------------------*/
.pop3imap .info-box {
    background: #FBFBFB;
    border: #DCDBDB solid 1px;
    margin: 0 0 10px 0;
    padding: 10px;
    position: relative;
    width: calc(100% - 22px);
}

    .pop3imap .info-box .cg1 {
        width: 230px;
    }

    .pop3imap .info-box .cg2 {
        width: 210px;
    }

    .pop3imap .info-box .cg3 {
        width: auto;
    }

    .pop3imap .info-box td {
        padding: 5px;
    }

        .pop3imap .info-box td span {
            word-break: break-word;
        }

    .pop3imap .info-box p {
        width: 75%;
        margin: 0;
        padding: 0;
    }

    .pop3imap .info-box .download-app {
        position: absolute;
        right: 15px;
        top: 15px;
    }

        .pop3imap .info-box .download-app img {
            width: 150px;
        }

.pop3imap ul {
    float: left;
}

    .pop3imap ul li {
        float: left;
        min-width: 150px;
    }

.pop3imap .indent {
    margin-left: 20px;
}
/*-----------------------------------------------end POP3/IMAP-----------------------------------------------*/
/*-----------------------------------------------start wartung-----------------------------------------------*/
.wartung {
    padding: 30px;
    background: #fdfdfd;
    position: relative;
}
/*-----------------------------------------------end wartung-----------------------------------------------*/
/*-----------------------------------------------start Drag and Drop-----------------------------------------------*/
#listview .DragDrop {
    /*background: url(../../img/vodafone/Gui/style15/drag-and-drop-file-upload.png) no-repeat center center;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#inner-east {
    position: relative;
    background: #f4f4f4;
    box-shadow: inset -2px 0 6px -3px #888;
}

#content-east,
#propertyview,
#listview {
    height: 100%;
}

#content-east {
    padding: 0;
}

#propertyview .DragDrop {
    height: 100%;
}

#east-header {
    padding: 0;
    z-index: 50;
}

    #east-header #east-pin-button {
        display: none;
    }

span.ui-layout-button-pin-east {
    display: block;
    position: absolute;
    top: 0;
    right: 40px;
    cursor: pointer;
    margin: 8px;
    width: 19px;
    height: 19px;
}

span.ui-layout-button-pin-up i {
    display: inline-block;
    transform: rotate(90deg);
}

span.ui-layout-button-close {
    display: block;
    position: absolute;
    top: 3px;
    right: 7px;
    cursor: pointer;
    margin: 8px 0;
    width: 24px;
    height: 24px;
    z-index: 100;
}
/*-----------------------------------------------end Drag and Drop-----------------------------------------------*/
#listview li.gridrow .op_h {
    background-color: #f4f4f4;
    color: #333 !important;
    padding: 4px 0 !important;
    min-height: 24px;
}

    #listview li.gridrow .op_h div.option {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }

        #listview li.gridrow .op_h div.option i.fx {
            float: left;
            width: 16.6666%;
        }

            #listview li.gridrow .op_h div.option i.fx:hover:before {
                color: #e60000;
            }

#listview li.gridrow .titleField {
    background-color: #f4f4f4;
    color: #333 !important;
    padding: 8px 8px 8px 30px !important;
}

    #listview li.gridrow .titleField div.title i {
        display: inline-block;
    }

/*neuer ausgeloggter Seitenbereich*/
.contentInner {
    height: auto;
    min-height: 100%;
    position: relative;
}

    .contentInner .contentLeft {
        float: left;
        display: none;
        visibility: hidden;
    }

#wizzard .editView {
    max-width: 100%;
}

.contentInner .contentLeft .data_secure {
    margin: 0;
    padding: 10px;
}

.contentInner .contentLeft .editView {
    background: #fff;
    margin: 0;
}

.contentInner .contentMain:after,
.contentInner .contentMain::after {
    content: "";
    clear: both;
    display: table;
}

.contentInner .contentMain table.infoPanel {
    width: auto;
}

/* neue Adressen- und Lesezeichen Karte*/
.favoriteCard {
    background: #eee;
}

    .favoriteCard .titleField {
        background: none !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        color: #323232;
        padding: 9px 30px;
    }

        .favoriteCard .titleField .title {
            width: calc(100% - 23px);
            font-weight: bold;
            padding: 0 0 0 5px;
        }

    .favoriteCard .checkField {
        position: absolute;
        top: 0;
        left: 0;
        padding: 11px 0 0 8px;
    }

    .favoriteCard .optField {
        position: absolute;
        top: 4px;
        bottom: 0;
        right: 4px;
        width: 24px;
    }

        .favoriteCard .optField:hover {
            background: #f4f4f4;
        }

            .favoriteCard .optField:hover i.fx::before {
                color: #e60000;
            }

        .favoriteCard .optField .op_h {
            visibility: hidden;
            background: none !important;
        }

            .favoriteCard .optField .op_h img {
                margin: 6px 0 0 0;
            }

/* neue Lesezeichen Karte*/
.favoriteCard {
    background: #F4F4F4;
    border: 1px solid #F4F4F4;
    position: relative;
}

#objectList li:hover .favoriteCard,
#objectList li.selected .favoriteCard {
    background: #F4F4F4;
}

.favoriteCard .thumbField {
    width: 194px;
    height: 194px;
}

    .favoriteCard .thumbField .stars {
        left: 33px !important;
    }

/* Neuer Adressdialog / Kalenderdialog / Einstellungen */
.appointmentarea fieldset {
    min-width: 300px;
}

.item-details fieldset {
    position: relative;
    border: 0 !important;
    padding: 0 0 10px 0;
    border-bottom-color: #ccc !important;
    max-width: 790px;
}

    .item-details fieldset i {
        font: inherit;
    }

    .item-details fieldset.log-mode {
        padding: 0;
    }

    .item-details fieldset.edit-mode .areacontent .external-container {
        display: flex;
        flex-wrap: wrap;
    }

        .item-details fieldset.edit-mode .areacontent .external-container .box {
            width: 120px;
            height: 120px;
            background-color: #fff;
            position: relative;
            margin: 10px;
            text-align: center;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-bottom: 1px solid #fff;
        }

            .item-details fieldset.edit-mode .areacontent .external-container .box .label {
                position: absolute;
                bottom: 10px;
                width: 100%;
            }

            .item-details fieldset.edit-mode .areacontent .external-container .box img {
                align-self: center;
                max-width: 60px;
                max-height: 60px;
                margin-top: 20px;
            }

            .item-details fieldset.edit-mode .areacontent .external-container .box:hover {
                border-bottom: 1px solid #e60000;
            }

    .item-details fieldset.edit-mode .areacontent .item.notice {
        display: none;
    }

.item-details .areacontent .item:after,
.item-details .areacontent .item::after {
    content: "";
    clear: both;
    display: table;
}

.right-area .module__block {
    display: flex;
    flex-wrap: wrap;
}

    .right-area .module__block span {
        width: 150px;
    }

.right-area .module__spacer {
    visibility: hidden;
}

.content-settings {
    background: #fff;
    padding: 40px;
}

.content-explained {
    max-width: 790px;
    margin: 0 40px;
    padding-bottom: 40px;
}

.content-settings h1 {
    margin: 0;
    font: 400 30px/1.158 "VodafoneExtra",Arial,sans-serif;
    color: #333;
    padding: 0 0 8px 0;
}

.content-settings h2 {
    font: 700 20px/1.176 "Vodafone",sans-serif;
}

#description-area .edit-mode textarea {
    width: 200px;
}

.item-details fieldset.calendar-remind.edit-mode div.item select[name="remindTime"] {
    min-width: 200px;
}

.fieldset-view p,
.item-details fieldset p {
    min-height: 22px;
    word-break: break-word;
}

    .item-details fieldset p label[for="rbUseEndDate"],
    .item-details fieldset p label[for="rbUseEndInterval"],
    .item-details fieldset p label[for="rbYearlyRecurrenceType"],
    .item-details fieldset p label[for="rbDailyOccurrenceInterval"] {
        padding: 9px 0 0 0;
        display: inline-block;
    }

#favorite-area .item-details fieldset p {
    max-width: 70%;
}

    #favorite-area .item-details fieldset p.rating,
    #favorite-area .item-details fieldset p#favRating {
        max-width: 100%;
    }

.thumbnail {
    position: relative;
    width: 90%;
    margin: 10px;
    overflow: hidden;
    display: block !important;
}

    .thumbnail input {
        border: none;
        background-color: #000;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        z-index: 60;
        cursor: pointer;
        direction: rtl;
        opacity: 0;
        -ms-filter: 'alpha(opacity=100)';
        width: 90px;
        min-height: 120px;
    }

    .thumbnail.thumb-hover .thumbnail-edit {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        z-index: 50;
        max-width: 90px;
        width: 100%;
        height: 119px;
        background: url("../../img/vodafone/Cloud/switch_image.png") no-repeat scroll 100% 100% transparent !important;
    }

.item-details .panel-top {
    position: absolute;
    top: 0;
    right: 0;
    display: block !important;
}

.item-details .panel-bottom {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
}

.item-details .panel-top .btn[data-command=edit] {
    top: 5px;
    right: 5px;
    position: relative;
}

.item-details .panel-bottom .btn[data-command=close],
.item-details .panel-bottom .btn[data-command=cancel] {
    background: #fff url(../../img/vodafone/Icons/svg/cross.svg);
    background-size: 60%;
}

.item-details .panel-bottom .btn[data-command=remove],
.item-details .panel-bottom .btn[data-command=removeSharing] {
    background: #fff url(../../img/vodafone/Icons/svg/bin.svg);
    background-size: 60%;
}

.item-details .panel-bottom .btn[data-command=close],
.item-details .panel-bottom .btn[data-command=cancel],
.item-details .panel-bottom .btn[data-command=remove],
.item-details .panel-bottom .btn[data-command=removeSharing] {
    color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    padding: 6px 18px;
    vertical-align: top;
    border-color: inherit;
    min-width: auto;
}

.item-details .right-area .show-view-mode div.inner {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
}

    .item-details .right-area .show-view-mode div.inner p {
        float: left;
        color: #5b5563;
        margin: 0 5px 0 0;
    }

.item-details .right-area .show-view-mode p.companyname {
    color: #5b5563;
}

.item-details .right-area p.name,
.item-details .right-area p.lastname,
.item-details .right-area p.title {
}

.item-details {
    position: relative;
}

    .item-details .show-edit-mode {
        display: none;
    }

    .item-details .right-area .l,
    .item-details .view-mode .left-area,
    .item-details .left-area {
        width: 24%;
        float: left;
        text-align: right;
        padding-right: 15px;
    }

    .item-details .right-area .l {
        text-align: left;
    }

    .item-details .right-area .r,
    .item-details .right-area {
        display: inline-block;
        text-align: left;
        width: 70%;
    }

.content-settings .right-area {
    width: 60%;
}

    .content-settings .right-area .captcha {
        width: 90%;
        margin: 0 0 10px 0;
    }

        .content-settings .right-area .captcha .btn {
            margin-top: 13px;
            margin-right: 0;
        }

.item-details .right-area .wd li {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
}

.item-details .right-area .expert-mode span {
    margin: 0;
    padding: 0;
}

.item-details .right-area .expert-mode li {
    list-style: none;
}

.item-details .edit-mode .inplace-link,
.item-details .right-area span.link {
    cursor: pointer;
    color: #E60000;
    text-decoration: underline;
    margin: 0;
}


.item-details .edit-mode .togglePanel {
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #ccc;
}


.item-details .edit-mode .profilePanel .full-area-l .right-area {
    width: 29%;
}

.item-details .edit-mode .profilePanel .full-area-r {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 25%;
}

.item-details .edit-mode .profilePanel .right-area .l,
.item-details .edit-mode .profilePanel .right-area .r {
    padding: 0;
    width: 50%;
}

.item-details .view-mode .profilePanel .thumbnail .thumb-image {
    position: absolute;
    right: 137px;
    top: 40px;
    height: 84px;
}

.view-mode .profilePanel .thumbnail input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
}

.edit-mode .profilePanel .full-area-r .thumbnail {
    margin: 0;
    width: 90px;
    min-height: 120px;
}

.edit-mode .profilePanel .full-area-r img.i_opt_delete {
    left: -20px;
    position: absolute;
    top: 0;
}

.item-details .right-area div.show-view-mode a {
    display: inline-block;
    padding: 10px 0;
}

.item-details .headline .right-area {
    display: none;
}

.item-details .allempty .areacontent {
    display: none;
}

.item-details .allempty .headline .right-area {
    display: block;
}

.item-details a[data-action="add"] {
    padding: 10px 5px;
    display: inline-block;
}

.item-details a.disabled {
    pointer-events: none;
    color: #808080;
    text-decoration: none;
}

.appointmentarea h1 {
    font-weight: normal;
    margin-left: 0;
    padding-left: 7px;
    min-height: 20px;
    padding-right: 80px;
    font-size: 1.375em;
    color: #333;
}

.important-note {
    padding: 10px;
    border: 1px solid #fe0000;
    border-left: 5px solid #fe0000;
}

.item-details fieldset.allempty div.right-area {
    margin-left: 24%;
    padding-left: 15px;
}

.content-settings .item div.right-area span {
    display: inline-block;
    vertical-align: middle;
}

.item-details .view-mode .panel-top {
    display: none;
}

.item-details .edit-mode .panel-top {
    display: none;
}

.item-details .view-mode .panel-bottom {
    display: none;
}

.item-details .edit-mode .panel-bottom {
    display: block;
}

.item-details .view-mode .show-view-mode {
    display: block;
}

.item-details .edit-mode .show-view-mode {
    display: none;
}

.item-details .edit-mode .show-edit-mode {
    display: block;
}

.item-details .view-mode .show-edit-mode {
    display: none;
}

.item-details .edit-mode .show-edit-mode i:hover.fx:before {
    cursor: pointer;
    color: #e60000;
}

.item-details .first-entry,
.item-details .view-hide,
.item-details .allempty .areacontent {
    display: none;
}

/* Tree linkes Menü bei Einstellungen */
#toc {
    height: calc(100% - 5px);
    overflow: auto;
    padding-top: 5px;
    padding-left: 5px;
}

    #toc ul {
        margin: 0 0 0 12px;
        padding: 0;
    }

        #toc ul li {
            list-style: none;
            margin: 0;
            position: relative;
        }

            #toc ul li ul li {
                list-style: none;
                margin: 5px 0;
            }

    #toc li a {
        padding: 8px 0;
        margin: 2px 0;
        display: block;
        text-decoration: none;
    }

        #toc li a:hover {
            text-decoration: none;
            color: #333;
            background: #ebebeb;
        }

        #toc li a i {
            display: none;
        }

        #toc li a.active {
            font-weight: bold;
        }

            #toc li a.active i:before {
                color: #333;
            }

            #toc li a.active:after,
            #toc li a.active::after {
                border-bottom: 0;
                border-left: 0;
                border-top: 0;
                content: "";
                position: relative;
                right: auto;
                top: auto;
                z-index: 1;
            }
/* Neuer Bereich Einstellungen */
.content-settings fieldset label {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.content-settings .view-mode:hover {
    cursor: pointer;
}

.content-settings a.insert,
.content-settings a.i {
    color: #000;
    text-decoration: none;
}

.content-settings .view-mode .fo {
    display: none;
}

.content-settings .edit-mode .fo {
    display: none;
}

.content-settings .view-mode .ajax-success {
    background: #E7FFE6 url('../../img/default/common/check.png') no-repeat 5px 9px;
    margin: 10px 0;
    padding: 6px 6px 6px 25px;
    border: 1px solid #50C24E;
    color: #20701E;
}

.content-settings .edit-mode .ajax-error {
    background: #ffcdcd url('../../img/default/common/unchecked.png') no-repeat 5px 9px;
    margin: 10px 0;
    padding: 6px 6px 6px 25px;
    border: 1px solid #E60000;
    color: #900;
}

.content-settings .panel-bottom {
    display: block;
    height: 100%;
}

.validation-form-error {
    border-color: #E60000;
    background: #ffcdcd;
}

.validation-error {
    color: #E60000;
}

.content-settings .log-date {
    width: calc(25% - 10px);
    float: left;
    padding: 5px;
}

.content-settings .log-mode {
    padding: 0;
}

    .content-settings .log-mode:hover {
        background: none;
    }

    .content-settings .log-mode .log-prio {
        width: calc(15% - 10px);
        float: left;
        padding: 5px;
    }

    .content-settings .log-mode .log-report {
        width: calc(50% - 10px);
        float: left;
        padding: 5px;
    }

    .content-settings .log-mode .log-value {
        text-align: right;
        width: calc(10% - 10px);
        float: left;
        padding: 5px;
    }

.fieldset-view {
    background: #fff;
    position: relative;
    border: 0 !important;
    padding: 5px 0;
}

.profilePanel .comboboxSmall,
.profilePanel .inputSmall,
.profilePanel .textareaSmall {
    width: 42%;
}

.profilePanel .comboboxXLarge,
.profilePanel .inputXLarge {
    width: 88%;
}

.profilePanel .textareaXLarge {
    width: 94%;
}

.profilePanel .comboboxMedium,
.profilePanel .inputMedium,
.profilePanel .textareaMedium {
    width: 54% !important;
}

.profilePanel select[name="day"] {
    width: 20% !important;
}

.profilePanel select[name="month"],
.profilePanel select[name="year"] {
    width: 30% !important;
}

.profilePanel .right-area .inputLarge,
.profilePanel .right-area .comboboxLarge {
    width: 90% !important;
}

.notion-mode .ajax-loader {
    padding: 3px 0 3px 0;
    background-color: #fff;
    text-align: center;
}

.collection-link {
    text-align: center;
    padding: 15px 0;
}

/*_______________________________________________________neuer Startseitenbereich_______________________________________________________*/
.black-link {
    background: url(../../img/vodafone/start/black-link.png) no-repeat 100% 50%;
    color: #2c1e15 !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin: 10px 20px 0 0;
    padding: 0 20px 0 0;
    text-decoration: none !important;
    text-transform: uppercase;
}

.hr {
    background: url(../../img/vodafone/start/hr.png) repeat-x 0 0;
    height: 1px;
    margin: 20px 0;
}

.info {
    background: #FEF5CC;
    padding: 5px 10px;
    margin: 10px 0;
}

.kd-head {
    background: #fff;
    height: 100px;
    position: fixed;
    width: 100%;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid #e3e3e3;
}

.site-wartung .kd-head {
    position: relative;
}

.kd-head .logo {
    display: inline-block;
    padding: 20px 30px;
}

.kd-head .v-brand {
    background: url(../../img/vodafone/start/img-logo-vodafone-brand.png) no-repeat 0 0;
    width: 118px;
    height: 69px;
    position: absolute;
    right: 0;
    top: 4px;
}

.kd-head .mata-nav {
    position: absolute;
    right: 10px;
    top: 20px;
}

    .kd-head .mata-nav li {
        list-style: none;
        float: left;
        border-left: 1px solid #e1e1e1;
        padding-left: 15px;
    }

    .kd-head .mata-nav a {
        display: block;
        background: url(../../img/vodafone/start/mn-sprite.png) no-repeat -2px 0;
        width: 26px;
        height: 26px;
    }

        .kd-head .mata-nav a:hover {
            background: url(../../img/vodafone/start/mn-sprite_e60000.png) no-repeat -2px 0;
        }

        .kd-head .mata-nav a.backlink {
            background-position: -4px 0px;
        }

        .kd-head .mata-nav a.helplink {
            background-position: -3px -360px;
        }

        .kd-head .mata-nav a.start {
            background-position: -2px -2px;
        }

        .kd-head .mata-nav a.homespot {
            background-position: -2px -42px;
        }

        .kd-head .mata-nav a.bill {
            background-position: -3px -81px;
        }

        .kd-head .mata-nav a.contract {
            background-position: -2px -122px;
        }

        .kd-head .mata-nav a.login-p {
            background-position: -3px -320px;
        }

            .kd-head .mata-nav a.login-p.selected {
                background: url(../../img/vodafone/start/mn-sprite_e60000.png) no-repeat -3px -320px;
            }

.site-wartung .kd-content {
    top: 0;
}

.kd-container {
    width: 950px;
    margin: 0 auto;
}

    .kd-container .login-area .editView h2 {
        font-family: Vodafone;
        padding: 8px 0 10px 0;
    }

    .kd-container .login-area .fs .clear {
        height: 0;
    }

.login-area h1 {
    color: #e60000;
    font: 44px/1.125 "Vodafone",Arial,sans-serif !important;
    padding: 8px 0 !important;
    margin: 0;
    width: 60%;
}

#login-container {
    background: url(../../img/vodafone/ContentFrame/tp-1e1e1e.png) repeat 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    max-width: 100%;
}

    #login-container .editView {
        position: fixed;
        right: 150px;
        top: 70px;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: 257px;
    }

.kd-container .login-area .editView {
    width: 388px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 30% auto;
}

    .kd-container .login-area .editView h2 span {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        display: block;
        -moz-binding: url('bindings/bindings.xml#ellipsis');
    }

    #login-container span.txt,
    .kd-container .login-area .editView span.txt {
        display: none;
    }

    #login-container .editView div.txt,
    .kd-container .login-area .editView div.txt {
        margin-top: 10px;
    }

        #login-container .editView div.txt a,
        .kd-container .login-area .editView div.txt a {
            margin-right: 12px;
        }

        #login-container .editView div.txt a {
            display: inline-block;
        }

#login-container .editView h1 {
    display: none;
}

#login-container .editView input[type=text],
#login-container .editView input[type=password],
.kd-container .login-area .editView input[type=text],
.kd-container .login-area .editView input[type=password] {
    max-width: 250px;
    margin: 10px 0 0 0;
}

.kd-container .stage-area {
    margin: 20px 0;
}

    .kd-container .stage-area:after,
    .kd-container .stage-area::after {
        content: "";
        clear: both;
        display: table;
    }

.kd-container #aTV,
.kd-container #aApp {
    border-bottom: 1px solid #c7ced3;
}

    .kd-container #aTV h1,
    .kd-container #aLogin h1,
    .kd-container #aMail h1,
    .kd-container #aApp h1 {
        font: 400 30px/1.158 "VodafoneExtra",Arial,sans-serif;
        color: #333;
        padding: 8px 0 0 0 !important;
        margin: 0 !important;
    }

        .kd-container #aTV h1 a,
        .kd-container #aLogin h1 a {
            text-decoration: none;
        }

    .kd-container #aTV ul {
        width: 48%;
    }

.kd-container div.floatleft,
.kd-container ul,
.kd-container ol {
    font-weight: normal;
    color: #424b51;
    margin: 30px 15px;
}

    .kd-container ul li,
    .kd-container ol li {
        line-height: 1.6em;
    }

.sticky-nav {
    position: absolute;
    width: 36px;
    right: 1px;
    margin: 0;
    padding: 0;
    z-index: 1;
    transition-property: top;
    transition-duration: 0.4s;
    -webkit-transition-property: top;
    -webkit-transition-duration: 0.4s;
}

    .sticky-nav li {
        list-style: none;
        float: left;
        margin: 3px 0;
        padding: 0;
    }

        .sticky-nav li a {
            display: block;
            background: url(../../img/vodafone/start/mn-sprite.png) no-repeat -2px 0;
            padding: 5px;
            width: 26px;
            height: 24px;
        }

    .sticky-nav a.sn-search {
        background-position: 4px -157px;
    }

    .sticky-nav a.sn-cloud {
        background-position: 4px -197px;
    }

    .sticky-nav a.sn-app {
        background-position: 4px -277px;
    }

    .sticky-nav a.sn-mail {
        background-position: 4px -236px;
    }

    .sticky-nav a.sn-top {
        background-position: 2px -395px;
    }

    .sticky-nav a.sn-tv {
        background-position: 2px -437px;
    }

    .sticky-nav a.sn-login {
        background-position: 2px -477px;
    }

    .sticky-nav a.sn-search,
    .sticky-nav a.sn-cloud,
    .sticky-nav a.sn-app,
    .sticky-nav a.sn-mail,
    .sticky-nav a.sn-top,
    .sticky-nav a.sn-tv,
    .sticky-nav a.sn-login {
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        border-right: 0;
    }

        .sticky-nav a.sn-search:hover,
        .sticky-nav a.sn-cloud:hover,
        .sticky-nav a.sn-app:hover,
        .sticky-nav a.sn-mail:hover,
        .sticky-nav a.sn-top:hover,
        .sticky-nav a.sn-tv:hover,
        .sticky-nav a.sn-login:hover {
            background-color: #EBEBEB;
        }
/*Navigation siebar im Hilfebereich*/

.sidebar-nav {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
}

    .sidebar-nav li {
        list-style: none;
        margin: 0;
        padding: 5px 10px !important;
    }

        .sidebar-nav li:hover {
            background: #e4e4e4;
        }

        .sidebar-nav li a {
            text-decoration: none;
            display: block;
            color: #494546;
        }

            .sidebar-nav li a img {
                left: -2px;
                position: relative;
                top: 3px;
            }

/*start von Vodafone gelieferter Footer*/
.vf .footer {
    background: #2e2e2e none repeat scroll 0 0;
    color: #ccc;
    min-height: 200px;
    width: 100%;
}

.vf .footer-wrapper {
    margin: 0 auto;
    width: 950px;
}

.vf .footer-imgRow {
    padding: 40px 0;
}

    .vf .footer-imgRow ul {
        display: table;
        margin: 0 auto;
        width: 100%;
    }

    .vf .footer-imgRow li {
        display: table-cell;
        text-align: center;
        width: 16.6666666%;
    }

    .vf .footer-imgRow img {
        cursor: pointer;
        filter: grayscale(1);
        -webkit-filter: grayscale(1); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

        .vf .footer-imgRow img:hover {
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
        }

.vf .footer-links {
    display: table;
    width: 100%;
}

.vf .footer-col {
    display: table-cell;
    font-size: 0.750em;
    font-weight: 400;
}

    .vf .footer-col li {
        margin: 5px 0;
    }

    .vf .footer-col img {
        float: left;
    }

    .vf .footer-col a {
        color: #ccc;
        text-decoration: none;
    }

        .vf .footer-col a:hover {
            text-decoration: underline;
        }

.vf .footer-heading {
    font-size: 1.000em;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 10px;
}

    .vf .footer-heading a {
        color: #fff;
    }

.vf .footer-socialIcon a {
    display: block;
    height: 30px;
    margin-top: 10px;
}

.vf .footer-socialIcon img {
    float: none;
    margin-right: 10px;
    vertical-align: middle;
}

.vf .footer-socialBar {
    float: right;
    left: -50%;
    padding: 65px 0 55px;
    position: relative;
}

    .vf .footer-socialBar ul {
        left: 50%;
        position: relative;
    }

    .vf .footer-socialBar li {
        display: inline;
        float: left;
        padding-right: 15px;
    }

    .vf .footer-socialBar a {
        display: inline-block;
    }

.vf .footer-copyright {
    font-size: 0.750em;
    margin-top: 20px;
    padding-bottom: 40px;
}

.vf .footer--order {
    background: #f4f4f4 none repeat scroll 0 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-bottom: 30px;
    min-height: 45px;
}

.vf .footer--order-col {
    display: table;
    overflow: hidden;
    padding-top: 15px;
    table-layout: auto;
    width: 100%;
}

.vf .btn a, .vf .btn--submit {
    font-family: 'Arial',Helvetica,Thaoma, sans-serif;
    font-size: 1.000em;
    padding: 6px 18px;
    text-decoration: none;
}

.vf .footer--order li {
    display: table-cell;
    margin-top: 15px;
    position: relative;
    text-align: center;
}

    .vf .footer--order li:first-of-type {
        text-align: left;
    }

    .vf .footer--order li:last-of-type {
        text-align: right;
    }

.vf .divider {
    border-top: 1px solid #ccc;
    margin: 10px 0;
}

.popup-container h2 span {
    color: #E60000 !important;
}

.qlinks {
    background-color: #E4E4E4;
    border-top: 1px solid #ccc;
}

.mainMenu ul.menu_panel .profile, .mainMenu ul.menu_panel .account, .mainMenu ul.menu_panel .rules, .mainMenu ul li a.dropDownList.selected span {
    background-color: #bbb !important;
}

/*linker Menübereich:active*/

.jstree-default a.jstree-checked, #calendarTree .jstree-checked a, .contactGrid .contactSelected, .jstree-default a.jstree-clicked {
    font-weight: bold;
    color: #333 !important;
}

.jstree-default a.jstree-checked, #calendarTree .jstree-checked a, .contactGrid .contactSelected, .jstree-default a.jstree-clicked {
    color: #333 !important;
}

    /*linker Menübereich:hover*/
    .folderGrid .jstree-default .jstree-checked a:hover, .contactGrid .contactSelected:hover, .contactGrid .contactEven:hover, .contactGrid .contactOdd:hover, .contactGrid .contactSelected:hover,
    #vakata-contextmenu.jstree-default-context li:hover, .fg-menu a.ui-state-default:hover, .fg-menu a.ui-state-hover:link, .fg-menu a.ui-state-hover:hover, .fg-menu a.ui-state-hover:visited {
        background-image: none !important;
        background-color: transparent !important;
        border: none !important;
        text-decoration: none;
    }

.mainContent .ui-state-default, .mainContent .ui-widget-content .ui-state-default, .mainContent .ui-widget-header .ui-state-default {
    min-height: 26px;
    border-color: #333;
}

    .mainContent .ui-state-default div, .mainContent .ui-widget-content .ui-state-default div, .mainContent .ui-widget-header .ui-state-default div {
        color: #333;
    }

/*.ui-accordion .ui-state-default a, .ui-accordion .ui-widget-content .ui-state-default a {
    color: #333 !important;
}

.ui-accordion .ui-state-active a, .ui-accordion .ui-state-active a:link, .ui-accordion .ui-state-active a:visited {
    color: #333 !important;
    font-weight: bold;
}
*/
/*------------------------------------------start Versandseite E-Mail------------------------------------------*/
/*end Icons in den PopUps*/

/*start Hilfe Button*/
#toolbar-container .rbPanel div.rbLast .rbIconTextBtn {
    margin: 0 14px 0 0;
}

    #toolbar-container .rbPanel div.rbLast .rbIconTextBtn .rbIcon img, #toolbar-container .rbPanel div.rbLast .rbIconTextBtn:hover .rbIcon img {
        margin-top: 0;
        margin-bottom: 0;
        background: url('../../img/vodafone/common/helpHover.png') no-repeat 0 0 transparent;
    }

    #toolbar-container .rbPanel div.rbLast .rbIconTextBtn:hover {
        background: none;
    }

        #toolbar-container .rbPanel div.rbLast .rbIconTextBtn:hover .rbIcon img {
            background-position: 0 -66px;
        }
/*end Hilfe Button
.user-details {
    padding: 20px;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid #e3e3e3;
    display: none;
}

    .user-details h1 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

    .user-details h2 {
        font-size: 1em;
        margin: 0;
        padding: 0;
    }

    .user-details .user-pic {
        width: 50px;
    }

    .user-details a {
        float: right;
    }
    */
/*neue Login.aspx*/
.login-page {
    background: #ebebeb;
    width: 100%;
    position: relative;
    height: auto;
    min-height: 580px;
}

.login-frame {
    padding: 20px;
    background: #fff;
    max-width: 500px;
    border: 1px solid #cfcfcf;
    margin: 160px auto 40px auto;
}

.login-marker {
    text-align: center;
    margin-bottom: 40px;
}

.loginBox .editView .loginpanel:after,
.loginBox .editView .loginpanel::after {
    content: "";
    clear: both;
    display: table;
}

.loginBox .editView span.txt {
    display: none;
}

.loginBox .editView span.txt {
    display: none;
    padding: 0;
}

.loginBox .editView .username input,
.loginBox .editView .password input {
    padding: 10px 20px;
}

.loginBox input[type='text']:focus + .label,
.loginBox input[type='password']:focus + .label {
    font-size: .8rem;
    top: 4px;
    color: #004c9e;
}

.loginBox input[type='text']:hover,
.loginBox input[type='password']:hover,
.loginBox input[type='text']:active,
.loginBox input[type='password']:active,
.loginBox input[type='text']:focus,
.loginBox input[type='password']:focus {
    border-color: #004c9e;
}

.loginBox .errorContent {
    font-size: .8em;
    padding: 0;
}

.loginBox .btn {
    float: right;
    margin-top: 20px;
}

.loginBox .editView {
    margin: 0;
    padding: 20px;
    background: none;
}

.loginBox div.txt a {
    color: #999;
    font-size: .9em;
}

.loginBox span.keepLoggedIn {
    vertical-align: middle;
    margin: 12px 0 0 0;
    display: inline-block;
}

    .loginBox span.keepLoggedIn label {
        margin-top: 3px;
        display: inline-block;
    }

.login-page .fixed-header {
    padding: 0 0 20px 0;
    background: #fff;
    border-bottom: 1px solid #cfcfcf;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
}

    .login-page .fixed-header a {
        display: inline-block;
    }

        .login-page .fixed-header a.btn {
            position: absolute;
            right: 20px;
            top: 26px;
        }

    .login-page .fixed-header .ico_login {
        background-image: url(../../img/vodafone/common/logo-60x60.png);
        background-position: 100% 100%;
        background-repeat: no-repeat;
        height: 70px;
    }
/*CSS für den Banner rechts*/
.mobile-banner {
    display: none;
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

    .close:hover {
        opacity: 1;
    }

    .close:before, .close:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #333;
    }

    .close:before {
        transform: rotate(45deg);
    }

    .close:after {
        transform: rotate(-45deg);
    }

/*CSS für die neue Loginpage*/
.vf-desktop {
    display: block;
}

.vf-mobile {
    display: none;
}


/*Website Tour*/
.firstSteps {
    text-align: center;
}

    .firstSteps img {
        width: 100px;
        height: 100px;
        margin: 40px;
    }

    .firstSteps p {
        margin: 20px 0 40px 0;
    }

    .firstSteps .fx {
        margin-bottom: 30px;
        margin-top: 30px;
    }

        .firstSteps .fx:before {
            display: block;
        }


    .firstSteps label {
        display: inline-block;
        margin: 20px 0 0 0;
        cursor: pointer;
    }

    .firstSteps .btn {
        padding: 10px 20px;
        height: auto;
        font-weight: bold;
    }

.contentpane {
    position: absolute;
    min-height: 100vh;
    width: 100%;
    overflow-y: auto;
}

.gujAd {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

#gujWrapper {
    position: relative;
    margin-top: 10px;
    margin-right: 10px;
}

.ad-300 {
    display: block;
    max-width: 300px;
}

.ad-spacer-300 {
    width: calc(100% - 300px - 10px);
}

.ad-160 {
    display: block;
    max-width: 160px;
}

.ad-spacer-160 {
    width: calc(100% - 160px - 10px);
}

.ad-120 {
    display: block;
    max-width: 120px;
}

.ad-spacer-120 {
    width: calc(100% - 120px - 10px);
}

#ivw {
    position: absolute;
    top: -1px;
    left: -1px;
}

/*Styling Eventlog in der Cloud*/
#inner-east .ocr,
#inner-east .eventlog,
#inner-east .fulltext {
    padding: 0 14px 0;
    height: 100%;
}

.colour-9 #inner-east .sidebar {
    height: 100%;
    overflow: hidden;
}

    .colour-9 #inner-east .sidebar .placeholder_sidepanel_content {
        height: calc(100% - 26px);
        overflow: auto;
    }

        .colour-9 #inner-east .sidebar .placeholder_sidepanel_content pre {
            white-space: pre-wrap;
            word-break: break-word;
        }

#inner-east .ocr pre {
    white-space: pre-wrap;
    word-break: break-word;
}

#inner-east .eventlog .icon-arrow_refresh {
    position: absolute;
    right: 18px;
    top: 7px;
    cursor: pointer;
}

    #inner-east .eventlog .icon-arrow_refresh:hover::before {
        color: #e60000;
    }

#inner-east .eventlog h3 {
    color: #333;
    font-size: 1em;
}

#inner-east .eventlog .time-cell {
    text-align: right;
    padding: 5px 10px 5px 0;
    color: #666;
    width: calc(20% - 10px);
    border-top: 1px solid transparent;
}

#inner-east .eventlog .filename-cell {
    width: 30%;
    color: #666;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #eee;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    #inner-east .eventlog .filename-cell a {
        vertical-align: baseline;
    }

#inner-east .eventlog .text-cell {
    width: 80%;
    color: #666;
    padding: 5px;
    border-bottom: 1px solid #eee;
    word-break: break-word;
}

    #inner-east .eventlog .text-cell span {
        color: #000;
        font-weight: bold;
    }

#inner-east .eventlog .load_more_events {
    text-align: center;
    margin: 20px 0;
}

    #inner-east .eventlog .load_more_events a {
        text-decoration: underline;
    }

#inner-east .fulltext h2,
#inner-east .eventlog h2,
.FolderDetailView h2 {
    width: calc(100% - 20px);
    font: 700 16px/1.5 "Vodafone",sans-serif;
}

.retentionPeriodYearsInput {
    width: 50px !important;
}

/*PopUp zu festlegen der Archivierungsdauer*/
.archiving-period input.slider {
    width: calc(100% - 125px);
    box-shadow: none;
}

.archiving-period .retentionPeriodYearsInput {
    width: 50px !important;
    margin: 0;
}

.archiving-period .firstMonthFinancialYearText {
    display: inline-block;
    margin-top: 6px;
    margin-left: 5px;
}

.archiving-period > div {
    width: 20%;
    display: inline-block;
    text-align: right;
}

    .archiving-period > div span {
        display: inline-block;
        margin-top: 6px;
        margin-left: 5px;
    }

/*SPECIAL input fieldset*/
.special-input {
    position: relative;
    z-index: 3;
    margin-top: 8px;
    margin-bottom: 25px;
}

    .special-input .text-field {
        border: none;
        border-bottom: solid 1px #333;
        background-color: transparent;
        padding: 10px 0;
        border-radius: 0;
        width: 100%;
        margin: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        height: auto;
    }

        .special-input .text-field.not-empty ~ label,
        .special-input textarea.text-field.init-state:not(:empty) ~ label,
        .special-input .text-field:focus ~ label,
        .special-input .text-field:not(textarea).init-state:not([value=""]) ~ label {
            top: -3px;
            font-size: .8em;
            color: #333;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            font-weight: 500;
            z-index: 1;
        }

        .special-input .text-field:focus {
            outline: none;
        }

        .special-input .text-field:not(:read-only):focus ~ .focus-border {
            width: 100%;
            -webkit-transition: 0.4s;
            transition: 0.4s;
        }

    .special-input .validation-error {
        position: absolute;
        line-height: 1.2em;
        font-size: .9em;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
    }

    .special-input select {
        padding-left: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .special-input .icon {
        z-index: 3;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 10px;
    }

    .special-input .focus-border {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #eb0000;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .special-input label {
        position: absolute;
        left: 0;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: 0.3s;
        transition: 0.3s;
        z-index: -1;
        color: #979797;
    }

.jstree .badge {
    position: absolute;
    right: 30px;
    padding: 3px 5px;
    margin-top: 3px;
    height: 1em;
    min-width: 1em;
    line-height: 1em;
    border-radius: 1em;
    font-size: 12px;
    text-align: center;
    background-color: #333;
    color: #fff;
}

.jstree .jstree-clicked .badge {
    background: #333;
    font-weight: normal;
}

/*Werbung im rechten Bereich*/
#skyscraper_1 {
    left: calc(100% - 300px) !important;
    top: 0;
    height: calc(100% - 10px);
}

    #skyscraper_1 > div {
        float: left;
    }

/*Designpanel in den Einstellungen verstecken*/
.hide-design-Controller {
    display: none;
    visibility: hidden;
}


/*Styles Scrollbar*/
.sidebar .body-wrapper {
    height: 100%;
    overflow: auto;
    position: relative;
}

    .show-attachment-popup-overlayer .show-attachment-popup .content-container::-webkit-scrollbar,
    .save-attachments-popup .area-container .area .attachments-container::-webkit-scrollbar,
    .fc .fc-scroller::-webkit-scrollbar,
    #fancybox-content .jstree-default > ul::-webkit-scrollbar,
    .popup-container div.inner::-webkit-scrollbar,
    div.contact-edit-overlay .body::-webkit-scrollbar,
    #center-center .dashboard-container-horizontal::-webkit-scrollbar,
    #center-center::-webkit-scrollbar,
    .folder-navigation .slide-in-left::-webkit-scrollbar,
    #readingContainer .details::-webkit-scrollbar,
    .colour-9 #inner-east .sidebar .placeholder_sidepanel_content::-webkit-scrollbar,
    .calendar--module .dialog-wrapper .body::-webkit-scrollbar,
    #fancybox-content #list-container::-webkit-scrollbar,
    #teamdashboard-view::-webkit-scrollbar,
    .sidebar .body-wrapper::-webkit-scrollbar,
    .fc .fc-scroller-liquid::-webkit-scrollbar,
    #kanbanview::-webkit-scrollbar,
    #kanbanview .swimlaneview-wrapper .swimlaneview-list::-webkit-scrollbar {
        width: 8px;
    }

    .show-attachment-popup-overlayer .show-attachment-popup .content-container::-webkit-scrollbar-track,
    .save-attachments-popup .area-container .area .attachments-container::-webkit-scrollbar-track,
    .fc .fc-scroller::-webkit-scrollbar-track,
    #fancybox-content .jstree-default > ul::-webkit-scrollbar-track,
    .popup-container div.inner::-webkit-scrollbar-track,
    div.contact-edit-overlay .body::-webkit-scrollbar-track,
    #center-center .dashboard-container-horizontal::-webkit-scrollbar-track,
    #center-center::-webkit-scrollbar-track,
    .folder-navigation .slide-in-left::-webkit-scrollbar-track,
    #readingContainer .details::-webkit-scrollbar-track,
    .colour-9 #inner-east .sidebar .placeholder_sidepanel_content::-webkit-scrollbar-track,
    .calendar--module .dialog-wrapper .body::-webkit-scrollbar-track,
    #fancybox-content #list-container::-webkit-scrollbar-track,
    #teamdashboard-view::-webkit-scrollbar,
    .sidebar .body-wrapper::-webkit-scrollbar-track,
    .fc .fc-scroller-liquid::-webkit-scrollbar-track,
    #kanbanview::-webkit-scrollbar-track,
    #kanbanview .swimlaneview-wrapper .swimlaneview-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .show-attachment-popup-overlayer .show-attachment-popup .content-container::-webkit-scrollbar-track-piece,
    .save-attachments-popup .area-container .area .attachments-container::-webkit-scrollbar-track-piece,
    .fc .fc-scroller::-webkit-scrollbar-track-piece,
    #fancybox-content .jstree-default > ul::-webkit-scrollbar-track-piece,
    .popup-container div.inner::-webkit-scrollbar-track-piece,
    div.contact-edit-overlay .body::-webkit-scrollbar-track-piece,
    #center-center .dashboard-container-horizontal::-webkit-scrollbar-track-piece,
    #center-center::-webkit-scrollbar-track-piece,
    .folder-navigation .slide-in-left::-webkit-scrollbar-track-piece,
    #readingContainer .details::-webkit-scrollbar-track-piece,
    .colour-9 #inner-east .sidebar .placeholder_sidepanel_content::-webkit-scrollbar-track-piece,
    .calendar--module .dialog-wrapper .body::-webkit-scrollbar-track-piece,
    #fancybox-content #list-container::-webkit-scrollbar-track-piece,
    #teamdashboard-view::-webkit-scrollbar-track-piece,
    .sidebar .body-wrapper::-webkit-scrollbar-track-piece,
    .fc .fc-scroller-liquid::-webkit-scrollbar-track-piece,
    #kanbanview::-webkit-scrollbar-track-piece,
    #kanbanview .swimlaneview-wrapper .swimlaneview-list::-webkit-scrollbar-track-piece {
        background: rgba(0,0,0,0.2);
    }

    .show-attachment-popup-overlayer .show-attachment-popup .content-container::-webkit-scrollbar-thumb,
    .save-attachments-popup .area-container .area .attachments-container::-webkit-scrollbar-thumb,
    .fc .fc-scroller::-webkit-scrollbar-thumb,
    #fancybox-content .jstree-default > ul::-webkit-scrollbar-thumb,
    .popup-container div.inner::-webkit-scrollbar-thumb,
    div.contact-edit-overlay .body::-webkit-scrollbar-thumb,
    #center-center .dashboard-container-horizontal::-webkit-scrollbar-thumb,
    #center-center::-webkit-scrollbar-thumb,
    .folder-navigation .slide-in-left::-webkit-scrollbar-thumb,
    #readingContainer .details::-webkit-scrollbar-thumb,
    .colour-9 #inner-east .sidebar .placeholder_sidepanel_content::-webkit-scrollbar-thumb,
    .calendar--module .dialog-wrapper .body::-webkit-scrollbar-thumb,
    #fancybox-content #list-container::-webkit-scrollbar-thumb,
    #teamdashboard-view::-webkit-scrollbar-thumb,
    .sidebar .body-wrapper::-webkit-scrollbar-thumb,
    .fc .fc-scroller-liquid::-webkit-scrollbar-thumb,
    #kanbanview .swimlaneview-wrapper .swimlaneview-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #666;
    }

        .show-attachment-popup-overlayer .show-attachment-popup .content-container::-webkit-scrollbar-thumb:hover,
        .save-attachments-popup .area-container .area .attachments-container::-webkit-scrollbar-thumb:hover,
        .fc .fc-scroller::-webkit-scrollbar-thumb:hover,
        .popup-container div.inner::-webkit-scrollbar-thumb:hover,
        #fancybox-content .jstree-default > ul::-webkit-scrollbar-thumb:hover,
        div.contact-edit-overlay .body::-webkit-scrollbar-thumb:hover,
        #center-center .dashboard-container-horizontal::-webkit-scrollbar-thumb:hover,
        #center-center::-webkit-scrollbar-thumb:hover,
        .folder-navigation .slide-in-left::-webkit-scrollbar-thumb:hover,
        #readingContainer .details::-webkit-scrollbar-thumb:hover,
        .colour-9 #inner-east .sidebar .placeholder_sidepanel_content::-webkit-scrollbar-thumb:hover,
        .calendar--module .dialog-wrapper .body::-webkit-scrollbar-thumb:hover,
        #fancybox-content #list-container::-webkit-scrollbar-thumb:hover,
        #teamdashboard-view::-webkit-scrollbar-thumb:hover,
        .sidebar .body-wrapper::-webkit-scrollbar-thumb:hover,
        .fc .fc-scroller-liquid::-webkit-scrollbar-thumb:hover,
        #kanbanview::-webkit-scrollbar-thumb:hover,
        #kanbanview .swimlaneview-wrapper .swimlaneview-list::-webkit-scrollbar-thumb:hover {
            background: #333;
        }

/*Tabbar*/
.sidebar .navigation-wrapper {
    height: auto;
    margin: 0 0 0 15px;
}

    .sidebar .navigation-wrapper .navigation-bar {
        border-bottom: solid 1px #ccc;
    }

        .sidebar .navigation-wrapper .navigation-bar ul {
            margin: 0;
        }

            .sidebar .navigation-wrapper .navigation-bar ul li {
                float: left;
                padding: 10px 25px 0 25px;
                position: relative;
                top: 1px;
                cursor: pointer;
                list-style: none;
                border-bottom: solid 1px #ccc;
                margin: 0;
                color: #333;
                font-weight: bold;
            }

                .sidebar .navigation-wrapper .navigation-bar ul li p {
                    margin: 0 0 8px 0px;
                }

                .sidebar .navigation-wrapper .navigation-bar ul li.active {
                    border-bottom: solid 2px #e60000;
                }

                    .sidebar .navigation-wrapper .navigation-bar ul li.active p {
                        color: #e60000;
                    }

/*stickys*/
.sticky {
    color: #333;
    padding: 10px;
    border: 1px solid #fecb00;
    border-left: 5px solid #fecb00;
    background: #fff;
    width: calc(100% - 33px);
    margin: 5px 0 5px 2px;
}

    .sticky h2,
    .empty h2 {
        color: #333;
    }

.empty-message,
#inner-east .ocr-container .sticky,
#inner-east .eventlog .sticky {
    background: #f4f4f4;
    border: 1px solid #f4f4f4;
    padding: 5px 0;
    color: #333;
    width: auto;
}

div.empty span.loading {
    margin: 3% 0;
}

/*leere Meldung Versandformulare*/
.fax-form .empty,
.vml-form .empty,
.sms-form .empty,
.mms-form .empty {
    display: inline-block;
    position: relative;
    top: 40%;
}

/*leere Meldung Listenansicht*/
.empty {
    background: none;
    border: 0;
    border: 0;
    color: #333;
    padding: 10px 5px;
}

    /*leere Meldung Detailspanel*/
    .empty.multible-actions {
        position: absolute;
        top: 50%;
        height: 170px;
        margin-top: -85px;
        text-align: center;
        width: calc(100% - 50px);
    }

.keyboard-shortcuts-popup .keyboard-shortcuts-wrapper {
    margin-top: 15px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 640px;
}

.keyboard-shortcuts-popup .keyboard-shortcuts-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin-right: 20px;
    border-bottom: solid 1px #e2e2e2;
}

.keyboard-shortcuts-popup .keyboard-shortcuts-keys {
    display: flex;
}

.keyboard-shortcuts-popup .keyboard-shortcut-key {
    margin-left: 10px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: solid 1px #d4d4d4;
    border-radius: 5px;
    font-weight: 500;
    background: linear-gradient(white, #f1f1f1);
    box-shadow: 0px 4px 0px 0px #d4d4d4;
}

.vodafone-message {
    padding: 20px;
}

    .vodafone-message h2 {
        font: 700 20px/1.176 "Vodafone",sans-serif;
    }

.shareview-cloud-list.vodafone-message,
.share-fancybox .vodafone-message {
    display: block !important;
}

.shareview-cloud-list,
.share-fancybox .share-container {
    display: none;
}

.save-attachments-popup {
    width: 800px;
    height: 600px;
}

#fancybox-content .save-attachments-popup .area-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 30px;
    height: calc(100% - 80px);
}

.save-attachments-popup .area-container .area {
    height: 100%;
    overflow: hidden;
    position: relative;
}

    .save-attachments-popup .area-container .area .attachments-container {
        overflow: auto;
        height: calc(100% - 76px);
    }

    .save-attachments-popup .area-container .area .overlayer {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background-color: #ffffff60;
        z-index: 20;
        display: none;
    }

    .save-attachments-popup .area-container .area .area-container {
        height: 100%;
        overflow: auto;
    }

.save-attachments-popup .attachment-item {
    display: flex;
    margin-bottom: 10px;
}

    .save-attachments-popup .attachment-item .btn-secondary {
        min-width: auto;
        margin-right: 20px;
    }

    .save-attachments-popup .attachment-item i.fx:before {
        margin: 0;
    }

    .save-attachments-popup .attachment-item .file-number {
        width: 30px;
        min-width: 20px;
        display: flex;
        align-items: center;
    }

    .save-attachments-popup .attachment-item .file-name {
        margin-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%;
    }

    .save-attachments-popup .attachment-item .file-type {
        width: 65px;
        margin-right: 0;
        position: relative;
        left: -1px;
        border-bottom-color: #fff;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.save-attachments-popup .buttons {
    min-height: auto !important;
    text-align: right !important;
}

#fancybox-content .save-attachments-popup .jstree-default > ul {
    height: 100%;
}

.save-attachments-popup .attachment-item .success-info {
    display: none;
    align-items: center;
    margin-left: 10px;
}

    .save-attachments-popup .attachment-item .success-info i {
        margin-right: 5px;
    }

        .save-attachments-popup .attachment-item .success-info i.icon-check:before {
            color: green;
        }

.save-attachments-popup .attachment-item.success-saved .remove-button {
    display: none !important;
}

.save-attachments-popup .attachment-item.success-saved .success-info {
    display: flex;
}


@media only screen and (max-width: 1024px) {
    .save-attachments-popup {
        width: auto;
    }

    #fancybox-content .save-attachments-popup .area-container {
        grid-gap: 0;
    }

    .save-attachments-popup .area-container .area .attachments-container {
        overflow: auto;
        height: calc(100% - 40px);
    }
}

.show-attachment-popup-overlayer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0000002e;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3333;
}

    .show-attachment-popup-overlayer .show-attachment-popup {
        background-color: white;
        box-shadow: 0 0 20px rgb(0 0 0 / 60%);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: end;
        max-height: calc(100% - 116px);
    }

        .show-attachment-popup-overlayer .show-attachment-popup .content-container {
            width: 100%;
            height: calc(100% - 35px);
            margin-top: 20px;
            overflow-y: auto;
        }

            .show-attachment-popup-overlayer .show-attachment-popup .content-container img {
                max-height: 100%;
                max-width: 100%;
            }