@font-face {
    font-family: 'gotham-black';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-Black.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-bold';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-Bold.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-bookitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-BookItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-light';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-Light.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-thin';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-Thin.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-thinitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-ThinItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-ultraitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-UltraItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-xlight';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-XLight.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-xlightitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/Gotham-XLightItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-bolditalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamBoldItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-book';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamBook.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-lightitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamLightItalic.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-medium_1';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamMedium_1.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-medium';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamMedium.otf') format('truetype');
}

@font-face {
    font-family: 'gotham-mediumitalic';
    src:         url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/font/gotham/GothamMediumItalic.otf') format('truetype');
}

body {
    font-family: 'gotham-medium', sans-serif;
}

/* ------------------------------------------------------------------------------------- */
/* scrollbar angepasst */
/* ------------------------------------------------------------------------------------- */
div::-webkit-scrollbar {
    width: 12px;
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(26, 26, 26, 0.3);
    background-color:   #444444;
    border-radius:      10px;
}

div::-webkit-scrollbar-thumb {
    border-radius:      10px;
    background-color:   #555555;
    -webkit-box-shadow: inset 0 0 6px rgba(136, 136, 136, 0.5);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #323232 inset !important;
    -webkit-text-fill-color: #4d4d4d;
}

/* ------------------------------------------------------------------------------------- */
/* bootstrap anpassungen */
/* ------------------------------------------------------------------------------------- */
.btn-danger {
    color: #1a1a1a;
    background-color: #ff454c;
    border-color: #ff454c;
}

.btn-danger:hover {
    color: #1a1a1a;
}

/* link */
a {
    background-color: transparent;
    text-decoration:  none;
    color:            #808080;
    transition:       0.3s;
    text-transform:   uppercase;
    display:          block;
}

a:hover {
    color:           #27ccbc;
    text-decoration: none;
}

.cn2-show {
    display: unset !important;
}

.cn2-display-block {
    display: block;
}

.page-link {
    position:         relative;
    display:          block;
    padding:          .5rem .75rem;
    margin-left:      0;
    line-height:      1.25;
    color:            #686868;
    background-color: #555555;
    border:           0 solid transparent;
}

.page-link:hover {
    background-color: #777777;
}

/* ------------------------------------------------------------------------------------- */
/* select 2 für campaigner 2.0 angepasst */
/* ------------------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single {
    background-color: #323232;
    border:           none;
    border-radius:    0;
    border-bottom:    2px solid #4d4d4d;
}

.select2-container--default .select2-selection--single.error {
    border-bottom: 2px solid #ff454c;
}

.select2-container *:focus {
    outline:       none;
    border-bottom: 3px solid #27ccbc;
}

.select2-search {
    background-color: #323232;
    border:           none;
}

.select2-search input {
    background-color: #323232;
    /*border:           none;*/
    color: #4d4d4d;
}

.select2-results {
    background-color: #323232;
    border:           none;
}

.select2-dropdown {
    border:     none;
    box-sizing: border-box;
    display:    block;
    position:   absolute;
    left:       -100000px;
    width:      100%;
    z-index:    1051;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #323232;
    color:            #888888;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #323232;
}

.select2-container--default .select2-results__option--selected {
    background-color: #323232;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:       #686868;
    line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #686868;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border:            none;
    /*border-color: #888 transparent transparent transparent;*/
    /*border-style: solid;*/
    /*border-width: 5px 4px 0 4px;*/
    height:            15px;
    left:              1px;
    margin-left:       -4px;
    margin-top:        -2px;
    position:          absolute;
    top:               7px;
    width:             15px;
    background-repeat: no-repeat;
    background-color: #323232;
    background-size:   contain;
    background-image:  url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/img/right_arrow.png');
    -webkit-transform: rotate(90deg);
    transform:         rotate(90deg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:       #686868;
    line-height: 28px;
    width:       200px;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #333333;
    cursor:           default;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border:        1px solid #aaa;
    border-radius: 7px;
}


/* ------------------------------------------------------------------------------------- */
/* sweet alert anpassungen */
/* ------------------------------------------------------------------------------------- */

/* sweet alert */
.swal-modal {
    width:                    478px;
    opacity:                  0;
    pointer-events:           none;
    background-color:         #777777;
    text-align:               center;
    border-radius:            5px;
    position:                 static;
    margin:                   20px auto;
    display:                  inline-block;
    vertical-align:           middle;
    -webkit-transform:        scale(1);
    transform:                scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin:         50% 50%;
    z-index:                  10001;
    transition:               opacity .2s, -webkit-transform .3s;
    transition:               transform .3s, opacity .2s;
    transition:               transform .3s, opacity .2s, -webkit-transform .3s;
    color:                    black;
}

/* success */
.swal-icon--success:after, .swal-icon--success:before {
    content:           "";
    border-radius:     50%;
    position:          absolute;
    width:             60px;
    height:            120px;
    background:        #777777;
    -webkit-transform: rotate(45deg);
    transform:         rotate(45deg);
}

.swal-icon--success__hide-corners {
    width:             5px;
    height:            90px;
    background-color:  #777777;
    padding:           1px;
    position:          absolute;
    left:              28px;
    top:               8px;
    z-index:           1;
    -webkit-transform: rotate(-45deg);
    transform:         rotate(-45deg);
}

.swal-icon--success__ring {
    width:         80px;
    height:        80px;
    border:        4px solid #a5dc86;
    border-radius: 50%;
    box-sizing:    content-box;
    position:      absolute;
    left:          -4px;
    top:           -4px;
    z-index:       2
}


/* ------------------------------------------------------------------------------------- */
/* list-group-item */
/* ------------------------------------------------------------------------------------- */

.list-group-item {
    position:         relative;
    display:          block;
    padding:          .75rem 1.25rem;
    margin-bottom:    -1px;
    background-color: #27ccbc;
    border:           1px solid #444;
    color:            #101010;
}


/* ------------------------------------------------------------------------------------- */
/* badge */
/* ------------------------------------------------------------------------------------- */

.badge-primary {
    color:            #101010;
    background-color: #cccccc;
}


/* ------------------------------------------------------------------------------------- */
/* selectable */
/* ------------------------------------------------------------------------------------- */

.selectable-field li {
    white-space:   nowrap;
    padding:       0.4em;
    font-size:     20px;
    border-radius: 7px;
}


/* ------------------------------------------------------------------------------------- */
/* query-builder */
/* ------------------------------------------------------------------------------------- */

.query-builder .rules-group-container {
    min-height:         20px;
    padding:            19px;
    margin-bottom:      10px;
    background-color:   rgb(41 210 194 / 28%);
    border:             1px solid #e3e3e3;
    border-radius:      14px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow:         inset 0 1px 1px rgb(0 0 0 / 5%);
    width:              100%;
}


/* ------------------------------------------------------------------------------------- */
/* glyphicon */
/* ------------------------------------------------------------------------------------- */

/* Mimic .fa */
.glyphicon {
    display:                 inline-block !important;
    font:                    normal normal normal 14px/1 FontAwesome !important;
    font-size:               14px !important;
    font-size:               inherit !important;
    text-rendering:          auto !important;
    -webkit-font-smoothing:  antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Mimic .fa-check-square-o */
.glyphicon-check:before {
    content: '\f046';
}

/* Mimic .fa-plus */
.glyphicon-plus:before {
    content: '\f067';
}

/* Mimic .fa-plus-circle */
.glyphicon-plus-sign:before {
    content: '\f055';
}

/* Mimic .fa-random */
.glyphicon-random:before {
    content: '\f074';
}

/* Mimic .fa-times */
.glyphicon-remove:before {
    content: '\f00d';
}

/* Mimic .fa-sort */
.glyphicon-sort:before {
    content: '\f0dc';
}

/* Mimic .fa-square-o */
.glyphicon-unchecked:before {
    content: '\f096';
}

/* Mimic .fa-warning */
.glyphicon-warning-sign:before {
    content: '\f071';
}

.modal-text {
    padding: 0 16px 16px 16px;
    margin:  0;
    color:   white;
}



/* ==========================================================================
   CampaignDashBoard
   ========================================================================== */

.cn2-landing-bg {
    position:                fixed;
    top:                     0;
    left:                    0;
    width:                   100%;
    height:                  100%;
    z-index:                 -100;
    margin:                  0;
    padding:                 0;
    background:              url('https://cnerbackendtest.voegeli.ch/resource/ui/http/client02/img/landing/voegeli_fruehling.jpg') no-repeat center center fixed;
    background-color:        white;
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    -o-background-size:      cover;
    background-size:         cover;
}

.cn2-landing-navbar {
    height: 150px;
}

.cn2-landing-navbar-nav {
    margin-right: 10px !important;
    margin-left:  auto;
}

.cn2-landing-navbar-item {
    margin-left:  10px;
    margin-right: 10px;
}

.cn2-landing-navbar-item-link {
    background-color: transparent !important;
    color:            #f2f2f2 !important;
    white-space:      nowrap;
}

.cn2-landing-navbar-item-link.right {
    display: inline;
}

.cn2-landing-navbar-item-link.right.hight {
    font-size: 10px;
}

.cn2-landing-navbar-item-link.right.hight.switch-left {
    position: relative;
    left:     -65px;
    top:      -10px;
}

.cn2-landing-navbar-logo {
    height:      60px;
    margin-left: 50px;
}

.cn2-landing-logo-container {
    overflow: hidden;
    position: absolute;
    left:     0;
    bottom:   0;
    height:   calc(100vw / 4);
    width:    calc(50vw);
}

.cn2-landing-logo {
    position: absolute;
    left:     -60px;
    bottom:   -60px;
    height:   calc(100vw / 4);
}

.cn2-landing-login-aside-container {
    position:      absolute;
    right:         50px;
    top:           calc(100vh / 4);
    width:         300px;
    height:        500px;
    margin-top:    auto !important;
    margin-bottom: auto !important;
}

@media screen and (max-width: 992px) {
    .cn2-landing-login-aside-container {
        top: calc(100vh / 6);
    }
}

.cn2-landing-login-aside-back {
    position:      absolute;
    width:         260px;
    height:        500px;
    border-radius: 30px;
    right:         0;
    left:          auto;
    background-color: #27ccbc;
}

.cn2-landing-login-aside-login {
    position:      absolute;
    width:         260px;
    height:        430px;
    border-radius: 30px;
    left:          0;
    bottom:        0;
    background-color: #f2f2f2;
}

/*start reset */
.cn2-reset-password-center {
    position:        absolute;
    top:             50%; /* position the top  edge of the element at the middle of the parent */
    left:            50%; /* position the left edge of the element at the middle of the parent */
    transform:       translate(-50%, -50%);
    margin:          auto;
    padding:         16px;
    justify-content: center;
    border-radius:   30px;
    background-color: #f2f2f2;
}

.cn2-reset-password-center .input-field {
    font-size:     12px;
    padding:       6px;
    border:        none;
    /*display:       inline-block;*/
    width:         100%;
    height:        25px;
    border-bottom: 1px solid #ccc;
    margin:        auto;
    background-color: #f2f2f2;
    color: #4d4d4d;
}

#btnReset {
    margin-top:       16px;
    background-color: #27ccbc;
    color:            Black;
}

.green {
    color: green;
}

.red {
    color: red;
}


.cn2-reset-password-center .cn2-title {
    font-size:  14pt;
    margin:     8px;
    text-align: center;
}

.cn2-reset-password-center input:focus {
    outline: none;
}


/*ende reset */
.cn2-landing-login-aside-login-question {
    font-size: 10px;
    margin:    70px 20px 0 20px;
}

.cn2-landing-login-aside-login-title {
    font-size: 20px;
    margin:    -5px 20px 5px 20px;
    height:    30px;
}

.cn2-landing-login-aside-login-input {
    font-size:     12px;
    padding:       4px 4px 4px 0;
    display:       inline;
    border:        none;
    border-bottom: 1px solid #ccc;
    width:         220px;
    margin:        5px 20px 20px 20px;
    background-color: #f2f2f2;
    color: #4d4d4d;
}

input.cn2-landing-login-aside-login-input {
    -webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset !important;
    -webkit-text-fill-color: #4d4d4d;
}

.cn2-landing-login-aside-login-input.login-width {
    width: 220px;
}

.cn2-landing-login-aside-login-input.password-width {
    width:        180px;
    margin-right: 8px;
}

.cn2-landing-login-aside-login-input:focus {
    outline:            none;
    -webkit-box-shadow: 0 1px 0 0 #27ccbc;
    box-shadow:         0 1px 0 0 #27ccbc;
}

.cn2-landing-login-aside-login-no-password {
    font-size: 10px;
    margin:    30px 20px 0 20px;
    cursor:    pointer;
    display:   inline;
}

.cn2-landing-login-aside-login-submit {
    position:      relative;
    left:          -5px;
    display:       inline;
    padding:       3px;
    width:         15px;
    height:        15px;
    border-radius: 100%;
    background-color: #4d4d4d;
}

.cn2-landing-login-aside-login-submit-img {
    position:   relative;
    width:      15px;
    height:     20px;
    top:        -2px;
    left:       1px;
    border:     none;
    background: transparent;
}

.cn2-landing-login-aside-login-submit-btn {
    /*background-color: */
 /*;*/
    display:       inline;
    border:        none;
    border-radius: 100%;
    /*background: transparent;*/
    background-color: #4d4d4d;

}

.cn2-landing-login-aside-login-submit-btn:hover {
    cursor: pointer;
}

@media only screen and (max-width: 764px) {
    .cn2-reset-password-center {
        margin: auto;
        width:  80%;
    }
}

@media only screen and (max-width: 600px) {
    .cn2-reset-password-center {
        margin: auto;
        width:  96%;
    }
}

.plan-container {
    margin-bottom: 10rem;
}


.plan-container .heighlight-text {
    position:      absolute;
    right:         -25px;
    top:           25px;
    transform:     rotate(45deg);
    padding-left:  50px;
    padding-right: 50px;
    background:    white;
    z-index:       1;
}

.plan-container .plan-name {
    background-color:        #27CCBC;
    padding:                 40px 10px 20px 10px;
    border-top-right-radius: 1rem;
    border-top-left-radius:  1rem;
}


.plan-container .plan-name h4 {
    color: #fff !important;
}

.plan-container .plan-name i {
    color:        #fff !important;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
}

.plan-container .plan-name .plan-logo {
    width:         5.5rem;
    margin-bottom: 0.5rem;
}


.plan-container .plan-name.first i {
    color:        #fff !important;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
    width:        100%;
    position:     relative;
    z-index:      1;
}

.plan-container .plan-name.second i {
    color:        #fff !important;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
    width:        50%;
    position:     relative;
    z-index:      1;
}

.plan-container .plan-name.third i {
    color:        #fff !important;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
    width:        33%;
    position:     relative;
    z-index:      1;
}

.plan-container .plan-name.second i:first-child {
    -webkit-transform: rotate(-30deg);
    -moz-transform:    rotate(-30deg);
    -ms-transform:     rotate(-30deg);
    -o-transform:      rotate(-30deg);
    transform:         rotate(-30deg);
    text-align:        right;
}

.plan-container .plan-name.second i:nth-child(2) {
    -webkit-transform: rotate(30deg);
    -moz-transform:    rotate(30deg);
    -ms-transform:     rotate(30deg);
    -o-transform:      rotate(30deg);
    transform:         rotate(30deg);
    text-align:        left;
}

.plan-container .plan-name.third i:first-child {
    -webkit-transform: rotate(-30deg);
    -moz-transform:    rotate(-30deg);
    -ms-transform:     rotate(-30deg);
    -o-transform:      rotate(-30deg);
    transform:         rotate(-30deg);
    text-align:        right;
}

.plan-container .plan-name.third i:nth-child(3) {
    -webkit-transform: rotate(30deg);
    -moz-transform:    rotate(30deg);
    -ms-transform:     rotate(30deg);
    -o-transform:      rotate(30deg);
    transform:         rotate(30deg);
    text-align:        left;
}


@media screen and (max-width: 992px) {
    .plan-container .plan-name.second i:nth-child(1),
    .plan-container .plan-name.third i:nth-child(1),
    .plan-container .plan-name.second i:nth-child(2),
    .plan-container .plan-name.third i:nth-child(3) {
        -webkit-transform: rotate(0deg);
        -moz-transform:    rotate(0deg);
        -ms-transform:     rotate(0deg);
        -o-transform:      rotate(0deg);
        transform:         rotate(0deg);

    }

    .plan-container .plan-name h4 {
        float:     left;
        width:     100%;
        font-size: 35px;
    }
}

@media screen and (max-width: 1200px) {

    .plan-container .plan-name h4 {
        float:     left;
        width:     100%;
        font-size: 30px;
    }
}


.plan-container .plan-seperator {
    background-color: #27CCBC;
}

.plan-container .plan-content span i {
    margin-left:  40%;
    margin-right: 40%;
    font-size:    15px;

}

.plan-container .plan-price {
    padding:          1rem 0;
    background-color: #373737;
}

.plan-container .plan-price h5 {
    color:       #fff;
    font-weight: normal;
}

.plan-container .plan-content {
    background-color:           #F2F2F2;
    padding:                    10px 30px;
    text-align:                 left;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius:  1rem;
}

.plan-container .plan-content ul {
    list-style:   none;
    padding-left: 0px;
}

.plan-container .plan-content ul li {
    list-style: none;
}

.plan-container .plan-content span {
    width:      25%;
    text-align: right;
    float:      right;

}


.plan-container .plan-content span i {
    margin-left:  25%;
    margin-right: 0;
    font-size:    15px;
    float:        right;

}

@media screen and (max-width: 992px) {
    .plan-container .plan-content span i {
        margin-left:  40%;
        margin-right: 0;
        font-size:    15px;
        float:        right;

    }
}

.plan-container .card {
    border-color:     #27CCBC;
    border-width:     0px;
    background-color: #27CCBC !important;
}

.plan-container .card .card-header {
    background-color: #27CCBC;
    color:            #ffffff;
    font-size:        25px;
    text-transform:   uppercase;
    text-align:       center;
    min-height:       99px;
    display:          flex;
    justify-content:  center;
    align-items:      center;
}

.plan-container .card .card-body {
    background-color:           #F2F2F2;
    border-bottom-left-radius:  .8rem;
    border-bottom-right-radius: .8rem;
}


.plan-container .card .card-body .card-title {
    color:          #27CCBC;
    font-size:      20px;
    text-transform: uppercase;
}

.plan-container .card .card-body ul {
    padding-inline-start: 20px;
}


.highlight {
    border-left:  #27CCBC solid thick;
    border-right: #27CCBC solid thick;
}

.highlight-last {
    border-left:   #27CCBC solid thick;
    border-right:  #27CCBC solid thick;
    border-bottom: #27CCBC solid thick;
}

#plans .nav-tabs {
    background-color: transparent !important;
    margin-top:       4rem;
}

#plans .nav-tabs .nav-link,
#plans .nav-tabs .nav-item .nav-link {
    /*color:#ffffff !important;*/
    background-color: #f2f2f2 !important;
    border-color:     #f2f2f2 !important;
}

#plans .nav-tabs .nav-link.active,
#plans .nav-tabs .nav-item.show .nav-link {
    color:            #ffffff !important;
    background-color: #27CCBC !important;
    border-color:     #27CCBC !important;
}

.btn-green {
    background-color: #27CCBC;
    color:            #ffffff;
}

.btn-outline-green {
    border:           #27CCBC solid 3px;
    background-color: transparent;
    color:            #373737;
}


.thumbnail img {
    width: 100%;
}





/* ==========================================================================
   MainPanel01
   ========================================================================== */

#panel-content {
    transition: margin-left .5s, margin-right .5s;
}

.cn2-nav-item-a.user {
    text-align:   center;
    margin-right: 30px;
}

ul.select2-results {
    max-height: 800px;
}

.select2-choices {
    min-height: 250px;
    max-height: 800px;
    overflow-y: auto;
}

.select2-dropdown {
    min-width: 200px;
}

.select2-results__options {
    min-height: 200px;
    /*max-height: 500px;*/
    overflow-y: auto;
    min-width: 200px;
}

/*.select2-selection {*/
/*    min-width: 200px;*/
/*}*/

/* ==========================================================================
   IntroPanel01
   ========================================================================== */

.intro-site-welcome-text-container {

}

.intro-site-welcome-text {
    height:           390px;
    margin-top:       3rem;
    margin-bottom:    auto;
    background-color: #1a1a1a;
}

.intro-site-welcome-text-01 {
    width:         1400px;
    margin-left:   auto;
    margin-right:  auto;
    margin-bottom: -40px;
    overflow:      hidden;

    font-family: 'gotham-black', sans-serif;
    font-size: 110pt;
    color:         #333;
    font-weight:   bolder;
}

.intro-site-welcome-text-02 {
    width:               1400px;
    margin-left:         auto;
    margin-right:        auto;
    margin-bottom:       50px;
    overflow:            hidden;

    font-family: 'gotham-black', sans-serif;
    font-size: 110pt;
    color:               #333;
    font-weight:         bolder;

    /*-webkit-text-fill-color: #000;*/

    -webkit-text-stroke: 2px #27ccbc;

    /*text-shadow:  1px  1px 1px #27ccbc,*/
    /*1px -1px 1px #27ccbc,*/
    /*-1px  1px 1px #27ccbc,*/
    /*-1px -1px 1px #27ccbc;*/
    /*text-shadow: 0 0 50px #27ccbc;*/
}

.intro-site-welcome-text-01 a {
    width:           1400px;
    margin-left:     auto;
    margin-right:    auto;
    margin-bottom:   -20px;
    overflow:        hidden;

    font-family: 'gotham-bold', sans-serif;
    font-size: 110pt;
    color:           #333;
    font-weight:     bolder;
    text-decoration: none;
}

.intro-site-welcome-text-02 a {
    width:               1400px;
    margin-left:         auto;
    margin-right:        auto;
    margin-bottom:       50px;
    overflow:            hidden;

    font-family: 'gotham-bold', sans-serif;
    font-size: 110pt;
    color:               #333;
    font-weight:         bolder;

    /*-webkit-text-fill-color: #000;*/

    -webkit-text-stroke: 2px #27ccbc;

    /*text-shadow:  1px  1px 1px #27ccbc,*/
    /*1px -1px 1px #27ccbc,*/
    /*-1px  1px 1px #27ccbc,*/
    /*-1px -1px 1px #27ccbc;*/
    /*text-shadow: 0 0 50px #27ccbc;*/
    text-decoration:     none;

}

@media screen and (max-width: 1300px) {
    .intro-site-welcome-text-01,
    .intro-site-welcome-text-02 {
        font-size: 80pt;
    }
}

@media screen and (max-width: 1000px) {
    .intro-site-welcome-text-01 {
        font-size: 50pt;
    }

    .intro-site-welcome-text-02 {
        font-size:           50pt;
        -webkit-text-stroke: 1px #27ccbc;
    }
}

@media screen and (max-width: 690px) {
    .intro-site-welcome-text-01 {
        font-size: 30pt;
    }

    .intro-site-welcome-text-02 {
        font-size:           30pt;
        -webkit-text-stroke: 1px #27ccbc;
    }
}

.intro-site-welcome-tutorial-link {
    width:        1400px;
    margin-left:  auto;
    margin-right: auto;
}

.intro-site-welcome-skip-tutorial-link {
    width:        1400px;
    margin-left:  auto;
    margin-right: auto;
}

.intro-site-tutorial-link-txt {
    display: block;
    font-family: 'gotham-medium', sans-serif;
}

.intro-site-tutorial-link-img {
    display:    block;
    width:      50px;
    height:     50px;
    margin-top: 5px;
}

.intro-site-skip-link {
    font-family: 'gotham-medium', sans-serif;
    margin-top:    50px;
    margin-bottom: 50px;
}

.cn2-intro-logout-btn {
    position: absolute;
    right:    0;
    top:      0;
    margin:   50px;
}
/* ==========================================================================
   TopNavBar01
   ========================================================================== */

.nav-tabs .nav-link {
    border:                  none;
    border-top-left-radius:  .7rem;
    border-top-right-radius: .7rem;
}

.cn2-topnav {
    height: 69px;
}

.cn2-topnav-item-a {
    white-space:  nowrap;
    height:       50px;
    padding-top:  14px;
    padding-left: 18px;
}

.cn2-topnav-item-a:hover {
    color:            #27ccbc;
    background-color: #222;
}

.cn2-dropdown-menu {
    margin-top: 18px;
}

.cn2-topnav-avatar {
    position:   fixed;
    right:      50px;
    transition: margin-right .5s, left.5s;
    height:     75px;
    padding:    25px 5px 5px 5px;
    z-index:    10;
}

.cn2-topnav-avatar-img {
    transition:    margin-right .5s, left.5s;
    height:        70px;
    width:         75px;
    border-radius: 100%;
    object-fit: cover;
}

.cn2-topnav-avatar-img-arrow {
    transition:    margin-right .5s, left.5s;
    height:        30px;
    width:         30px;
    /*border-radius: 100%;*/
    /*border:        1px solid #222222;*/
    /*background-color: *//*;*/
    position:      relative;
    left:          40px;
    top:           -22px;
}

.cn2-topnav-avatar-img-arrow-img-collaps {
    transition:        margin-right .5s, left.5s;
    height:            30px;
    width:             30px;
    position:          relative;
    left:              4px;
    top:               1px;
    -webkit-animation: roll-180-0 1.1s;
    animation:         roll-180-0 1.1s;
    -webkit-transform: rotate(0);
    transform:         rotate(0);
}

/** @noinspection wird via javascript verwendet. */
.cn2-topnav-avatar-img-arrow-img-expand {
    transition:        margin-right .5s, left.5s;
    height:            30px;
    width:             30px;
    position:          relative;
    left:              4px;
    top:               1px;
    -webkit-animation: roll-0-180 1.1s;
    animation:         roll-0-180 1.1s;
    -webkit-transform: rotate(180deg);
    transform:         rotate(180deg);
}

@-webkit-keyframes roll-0-180 {
    0% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
}

@keyframes roll-0-180 {
    0% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
}

@-webkit-keyframes roll-180-0 {
    0% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
}

@keyframes roll-180-0 {
    0% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
}

.cn2-nav-item-a-mainlink {
    background-color: #1a1a1a !important;
}

.cn2-topnav-item-a {
    background-color: #252525 !important;
}

/* ==========================================================================
   SideBar01
   ========================================================================== */

.sidebar {
    height:           100%;
    width:            50px;
    position:         fixed;
    z-index:          1;
    top:              0;
    background-color: #333333;
    transition:       0.5s;
}

.cn2-nav {
border-right: 3px solid}

.sidebar.left {
    left: 0;
}

.sidebar.right {
    right: 0;
    width: 0;
}

.sidebar a {
    text-decoration: none;
    font-size:       16px;
    color:           #808080;
    display:         block;
    transition:      0.3s;
    text-transform:  uppercase;
}

.sidebar a:hover,
.sidebar a:focus,
.sidebar a.active {
    color: #27ccbc;
}

#panel-content {
    margin-left: 80px;
}

.cn2-sidebar-links {
    overflow-x: hidden;
}

.cn2-nav-item {
    height: 50px;
}

.cn2-nav-item-a {
    white-space:       nowrap;
    height:            50px;
    padding-top:       14px;
    padding-left:      18px;
    opacity:           1;
    -webkit-animation: menu-item-fade-in 1s;
    -moz-animation:    menu-item-fade-in 1s;
    -o-animation:      menu-item-fade-in 1s;
    animation:         menu-item-fade-in 1s;
    letter-spacing:    1px;
}

.cn2-nav-item-a-hidde {
    height:       50px;
    padding-top:  14px;
    padding-left: 18px;
    opacity:      0;
}

.cn2-nav-item-a-submenu {
    font-size:         10px;
    white-space:       nowrap;
    height:            30px;
    padding-top:       14px;
    padding-left:      18px;
    opacity:           1;
    -webkit-animation: menu-item-fade-in 1s;
    -moz-animation:    menu-item-fade-in 1s;
    -o-animation:      menu-item-fade-in 1s;
    animation:         menu-item-fade-in 1s;
}

a.cn2-nav-item-a-submenu {
    font-size: 14px;
    padding:   0 0 0 28px;
}

.cn2-nav-item-a-submenu-hidde {
    font-size:    10px;
    height:       30px;
    padding-top:  14px;
    padding-left: 18px;
    opacity:      0;
}

a.cn2-nav-item-a-submenu-hidde {
    font-size: 14px;
    padding:   0 0 0 28px;
}

.cn2-nav-item-submenu {
    display: none;
}

.nav-item-arrow {
    height: 100px;
}

.nav-item-arrow-a {
    padding-top:    30px;
    padding-bottom: 25px;
}

@-webkit-keyframes menu-item-fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes menu-item-fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.cn2-nav-item-logo {
    height: 50px;
    width:  50px;
}

.cn2-nav-logo-div {
    height:        50px;
    /*padding-left:  12px;*/
    padding-top:   5px;
    margin-bottom: 10px;
    /*background: linear-gradient(to right, #777777, #323232);*/
}

.cn2-nav-logo-div.right {
    margin-top: 50px;
}

.cn2-nav-ul {
    /*padding-left: 18px;*/
}

.cn2-nav-item-switch-icon {
    float:             right;
    height:            35px;
    margin-right:      10px;
    position:          relative;
    left:              28px;
    -webkit-transform: rotate(180deg);
    transform:         rotate(180deg);
}

#switch-arrow {
    height: 100px;
}

/** @noinspection wird via javascript verwendet. */
.cn2-nav-expand-icon {
    -webkit-animation: roll-180-0 1s;
    animation:         roll-180-0 1s;
    -webkit-transform: rotate(0);
    transform:         rotate(0);
    left:              29px;
    position:          relative;
}

/** @noinspection wird via javascript verwendet. */
.cn2-nav-collaps-icon {
    -webkit-animation: roll-0-180 1s;
    animation:         roll-0-180 1s;
    -webkit-transform: rotate(180deg);
    transform:         rotate(180deg);
    position:          relative;
    left:              28px;
}

@-webkit-keyframes roll-0-180 {
    0% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
}

@keyframes roll-0-180 {
    0% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
}

@-webkit-keyframes roll-180-0 {
    0% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
}

@keyframes roll-180-0 {
    0% {
        -webkit-transform: rotate(180deg);
        transform:         rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform:         rotate(0);
    }
}

.cn2-nav-ul-footer {
    position: absolute;
    bottom:   0;
}

.cn2-nav-ul-footer-logout-btn {
    margin: 40px;
    width:  120px;
}

.circle {
    background-color:  rgba(0, 0, 0, 0);
    border:            5px solid rgba(0, 183, 229, 0.9);
    opacity:           .9;
    border-right:      5px solid rgba(0, 0, 0, 0);
    border-left:       5px solid rgba(0, 0, 0, 0);
    border-radius:     50px;
    box-shadow:        0 0 35px #2187e7;
    width:             50px;
    height:            50px;
    margin:            0 auto;
    -moz-animation:    spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color:  rgba(0, 0, 0, 0);
    border:            5px solid rgba(0, 183, 229, 0.9);
    opacity:           .9;
    border-left:       5px solid rgba(0, 0, 0, 0);
    border-right:      5px solid rgba(0, 0, 0, 0);
    border-radius:     50px;
    box-shadow:        0 0 15px #2187e7;
    width:             30px;
    height:            30px;
    margin:            0 auto;
    position:          relative;
    top:               -40px;
    -moz-animation:    spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity:        0;
        box-shadow:     0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity:        1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity:        0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity:           0;
        box-shadow:        0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity:           1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity:           0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

/* ==========================================================================
   TabBar01
   ========================================================================== */

.cn2-tab {
    /*height: 100%;*/
    margin-bottom: 10px;
    background-color: #252525;
    /*border-radius: 0 0 30px 30px;*/
}

.cn2-tab-content {
}

.nav-tabs {
    background-color: #1a1a1a;
}

.nav-link {
    background-color: #252525;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #b0b0b0;
    background-color: #323232;
    border-color: #4d4d4d;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: #323232;
    color: #b0b0b0;
}

.nav-tabs .nav-link.disabled {
    color:            #555555;
    background-color: transparent;
    border-color: #323232;
}

.nav-tabs {
    border: none;
}

.po2-tab-title {
    display: inline;
}

.po2-tab-close {
    display:        inline;
    height:         16px;
    margin-left:    20px;
    margin-bottom:  5px;
    margin-right:   -8px;

    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -o-filter:      grayscale(100%);
    -ms-filter:     grayscale(100%);
    filter:         grayscale(100%);
}

.po2-tab-close.active {
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -o-filter:      grayscale(0%);
    -ms-filter:     grayscale(0%);
    filter:         grayscale(0%);
}

/* ==========================================================================
   Window01
   ========================================================================== */

.cn2-window {
    border-radius: 0 20px 20px 20px;
    background-color: #252525;
    margin-bottom: 20px;
}

.cn2-window-header {
    padding:       15px;
    border-radius: 0 20px 0 0;
    height:        80px;
    /*background-color: #0bcb9a;*/
}

.cn2-window-content {
    padding:       50px;
    border-radius: 0 0 20px 20px;
    /*height:           50px;*/
    /*background-color: #0bcb9a;*/
}

.cn2-window-header-title {
    float:       left;
    font-size:   20px;
    margin-top:  10px;
    margin-left: 5px;
}

.cn2-window-header-close {
    float: right;
}

.cn2-window-header-close-img {
    height: 16px;
}

.cn2-window.active {
    color: #808080;
    /*background-color: #4d4d4d;*/
    /*border-color:     #4d4d4d;*/
    background-color: #323232;
    border-color: #323232;
}

.cn2-window.transparent {
    color: #808080;
    /*background-color: #4d4d4d;*/
    /*border-color:     #4d4d4d;*/
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

/* ==========================================================================
   CampaignDashBoard
   ========================================================================== */

.cn2-dashboard-info {
    overflow:   hidden;
    margin-top: 30px;
}

.cn2-dashboard-info.left {
    min-width:           550px;
    background-position: right;
    background-size:     3px 50px;
    background-repeat:   repeat-y;
    margin-right:        30px;
}

.cn2-dashboard-info.center {
    min-width: 390px;
}

.cn2-dashboard-info.right {
    min-width: 180px;
}

.cn2-dashboard-info-activate-piwik-label {
    color: #4d4d4d;
}

.cn2-dashboard-selektion-testmail-button {
    left: -141px;
}

.cn2-dashboard-selektion-testmail-button-hide {
    display: none;
    left:    -141px;
}

/* diagram */
.cn2-diagram {
    padding-top: 50px;
    min-width:   270px;
    height:      350px;
}

.cn2-diagram-legend {
    margin-top:    auto;
    margin-bottom: auto;
    min-width:     270px;
}

.cn2-diagram-legend-container {
    width:     100%;
    padding:   5px;
    display:   flex;
}

.cn2-diagram-legend-dot {
    margin-top:    4px;
    margin-bottom: 4px;
    height:        20px;
    /*background-color: #222222;*/
    border-radius: 100%;
    flex-grow:     1;
    min-width:     20px;
    max-width:     20px;
}

.cn2-diagram-legend-dot-gray01 {
    display:          inline;
    float:            left;
    margin-top:       4px;
    margin-bottom:    4px;
    width:            20px;
    height:           20px;
    background-color: #222222;
    border-radius:    100%;
}

.cn2-diagram-legend-dot-gray02 {
    display:          inline;
    float:            left;
    margin-top:       4px;
    margin-bottom:    4px;
    width:            20px;
    height:           20px;
    background-color: #535353;
    border-radius:    100%;
}

.cn2-diagram-legend-label {
    margin-left: 30px;
    flex-grow:   1;
}

.cn2-info-content {
    margin-top: 35px;
}

.cn2-info {
}

/* info */
.cn2-info-text-container {
    width:     100%;
    height:    40px;
    padding:   5px;
    min-width: 1000px;
}

.cn2-info-text-label {
    display:        inline;
    float:          left;
    text-transform: uppercase;
}

.cn2-info-text-value {
    float:       left;
    margin-left: 10px;
    font-family: 'gotham-bold', sans-serif;
}

@media screen and (max-width: 1200px) {
    .cn2-diagram {
        width:  600px;
        height: 350px;
    }
}

@media screen and (max-width: 760px) {
    .cn2-diagram {
        width: 450px;
    }
}

/* menu */
.cn2-nav-item-a-submenu.campaign-menu {
    margin-top:    10px;
    margin-bottom: 0;
    height:        25px;
}
/* ==========================================================================
   CampaignDashBoard
   ========================================================================== */

.cn2-campaign-empty-screen {
    width: 100%;
}

.cn2-campaign-empty-screen-img {
    width: 80%;
    height: 80%;
    min-width: 500px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cn2-campaign-empty-screen-button {
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
}
/* ==========================================================================
   CampaignOverview
   ========================================================================== */

.cn2-campaign-overview-card-container {
    border-radius: 30px;
    margin:        20px;
    min-width:     268px;
}

.cn2-campaign-overview-card {
    width:         286px;
    height:        auto;
    border-radius: 30px;
}

.cn2-campaign-overview-card-h6 {
    height: 90px;
}

.cn2-campaign-overview-card-img-container {
    border-top-left-radius:  30px;
    border-top-right-radius: 30px;
    width:                   286px;
    height:                  300px;
}

.cn2-campaign-overview-card-img {
    border-top-left-radius:  30px;
    border-top-right-radius: 30px;
    height:                  100%;
    -o-object-fit:           cover;
    object-fit:              cover;
}

.cn2-campaign-overview-card-img-a {
    height: 300px;
}

.cn2-campaign-overview-card-img-a.upload {
    /* box-shadow: 0px 0px 20px 7px #888888; */
    border-radius: 20px;
    padding:       10px;
    border:        3px solid;
}

.cn2-campaign-overview-card-text {
    margin-top: 0;
}

.cn2-campaign-overview-card-container-add {
    width:  328px;
    height: 542px;
    background-color: #1a1a1a;
}

.cn2-campaign-overview-card-add-img {
    width:         100px;
    height:        100px;
    margin-top:    130px;
    margin-bottom: auto;
    margin-left:   115px;
}

.cn2-campaign-overview-card-arrow {
    display:       flex;
    transition:    margin-right .5s, left.5s;
    height:        31px;
    width:         31px;
    border-radius: 100%;
    border:        2px solid #222222;
    background-color: #4d4d4d;
    position:      absolute;
    left:          263px;
    top:           -5px;
}

.cn2-campaign-overview-card-arrow-img {
    transition:        margin-right .5s, left.5s;
    height:            20px;
    width:             20px;
    position:          relative;
    left:              3px;
    top:               1px;
    -webkit-transform: rotate(90deg);
    transform:         rotate(90deg);
}

.cn2-campaign-overview-option-change-img {
    transition: margin-right .5s, left.5s;
}

.cn2-campaign-overview-card-container .cn2-campaign-overview-card-info {
    margin-bottom: 0;
}

.cn2-campaign-overview-img-status {
    height: 1.3rem;
    width:  1.3rem;
}

.cn2-overview-status-ul {
    display: none;
}

.cn2-overview-status-li {
    cursor:           pointer;
    display:          block;
    width:            100%;
    padding:          .25rem 1.5rem;
    clear:            both;
    font-weight:      400;
    text-align:       inherit;
    white-space:      nowrap;
    background-color: transparent;
    border:           0;
}

.cn2-overview-status-li:hover {
    color: #29d2c2;
}

.dropdown-item:hover {
    color:  #29d2c2;
    cursor: pointer;
}

/* ==========================================================================
   CampaignOverview
   ========================================================================== */

/* ==========================================================================
   CreateCampaign
   ========================================================================== */

.cn2-campaign-create {
    margin-top:   100px;
    margin-right: 200px;
    margin-left:  150px;
    border-radius: 20px 20px 20px 20px;
}

.cn2-create-campaign-container {
    margin: 30px;
}

.cn2-create-campaign-row {
    margin-top:    20px;
    margin-bottom: 20px;
}

.cn2-create-campaign-row-col {
    padding-left:  0;
    padding-right: 0;
}

.cn2-create-campaign-row1 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-create-campaign-row2 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-create-campaign-row3 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-create-campaign-row4 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-create-campaign-row1-col1 {
    display:   inline;
    min-width: 300px;
}

.cn2-create-campaign-row1-col2 {
    display:   inline;
    min-width: 300px;
}

.cn2-create-campaign-row2-area {
    padding:       15px;
    border-radius: 30px;
    border:        2px solid #4d4d4d;
    background-color:  #323232;
    width:         100%;
    color:         #686868;
}

.cn2-create-campaign-row2-area:focus {
    border:  3px solid #27ccbc;
    outline: none;
}

.cn2-create-campaign-row3-col1 {
}

.cn2-campaign-create-input {
    font-size:     12px;
    padding:       4px 4px 4px 0;
    display:       inline;
    border:        none;
    border-bottom: 2px solid #4d4d4d;
    width:         100%;
    /*margin:        5px 20px 20px 20px;*/
    margin-left:   20px;
    background-color: #323232;
    color:         #686868;
}

.cn2-campaign-create-input.error {
    border-bottom: 2px solid #ff454c;
}

/*.cn2-campaign-create-input.select {*/
/*    font-size: 14px;*/
/*}*/

.cn2-campaign-create-input:focus {
    outline:       none;
    border-bottom: 3px solid #27ccbc;
}

.cn2-campaign-create-input.inline {
    display: inline;
}

/* select 2 */

.cn2-select {
    width:     100%;
    border:    none;
    color:     #686868;
    cursor:    pointer;
    display:   inline;
    font-size: 12px;
    padding:   4px 4px 4px 0;
    margin:    5px 20px 20px 0;
    background-color: #323232;
}

.cn2-select-text-input {
    font-size:     12px;
    padding:       4px 4px 4px 0;
    display:       inline;
    border:        none;
    border-bottom: 2px solid #4d4d4d;
    width:         220px;
    margin:        5px 20px 20px 20px;
    background-color: #323232;
    color:         #686868;
}

.cn2-select.inline {
    display: inline;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #29d2c2;
}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    user-select: none;
    background-color: #444444;
}
/* ==========================================================================
   CloneCampaign
   ========================================================================== */


.cn2-campaign-clone-container {
    margin-top:   100px;
    margin-right: 200px;
    margin-left:  150px;
    border-radius: 20px 20px 20px 20px;
}

.cn2-clone-campaign-row {
    margin-top:    20px;
    margin-bottom: 20px;
}

.cn2-clone-campaign-row-col {
    padding-left:  0;
    padding-right: 0;
}

.cn2-clone-campaign-row1 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-clone-campaign-row2 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-clone-campaign-row3 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-clone-campaign-row4 {
    padding-top:    20px;
    padding-bottom: 20px;
}

.cn2-clone-campaign-row1-col1 {
    display:   inline;
    min-width: 300px;
}

.cn2-clone-campaign-row1-col2 {
    display:   inline;
    min-width: 300px;
}

.cn2-clone-campaign-row2-area {
    padding:       15px;
    border-radius: 30px;
    border:        2px solid #4d4d4d;
    background-color:  #323232;
    width:         100%;
    color:         #686868;
}


.cn2-clone-campaign-row2-area:focus {
    border:  3px solid #27ccbc;
    outline: none;
}

.cn2-clone-campaign-row3-col1 {
}


.cn2-campaign-clone-input {
    font-size:     12px;
    padding:       4px 4px 4px 0;
    display:       inline;
    border:        none;
    border-bottom: 2px solid #4d4d4d;
    width:         100%;
    /*margin:        5px 20px 20px 20px;*/
    margin-left:   20px;
    background-color: #323232;
    color:         #686868;
}

.cn2-campaign-clone-input.error {
    border-bottom: 2px solid #ff454c;
}

/*.cn2-campaign-clone-input.select {*/
/*    font-size: 14px;*/
/*}*/

.cn2-campaign-clone-input:focus {
    outline:       none;
    border-bottom: 3px solid #27ccbc;
}

.cn2-campaign-clone-input.inline {
    display: inline;
}

/* select 2 */

.cn2-select {
    width:     100%;
    border:    none;
    color:     #686868;
    cursor:    pointer;
    display:   inline;
    font-size: 12px;
    padding:   4px 4px 4px 0;
    margin:    5px 20px 20px 0;
    background-color: #323232;
}


.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #29d2c2;
}

/* ==========================================================================
   CampaignDashBoard
   ========================================================================== */

.cn2-dashboard-info {
    overflow:   hidden;
    margin-top: 30px;
}

.cn2-dashboard-info.left {
    min-width: 550px;
}

.cn2-dashboard-info.center {
    min-width: 390px;
}

.cn2-dashboard-info.right {
    min-width: 180px;
}

/* diagram */
.cn2-diagram {
    padding-top: 50px;
    min-width:   270px;
    height:      350px;
}

.cn2-diagram-legend {
    margin-top:    auto;
    margin-bottom: auto;
    min-width:     270px;
}

.cn2-diagram-legend-container {
    width:   100%;
    padding: 5px;
    display: flex;
}

.cn2-diagram-legend-dot {
    margin-top:    4px;
    margin-bottom: 4px;
    height:        20px;
    /*background-color: #222222;*/
    border-radius: 100%;
    flex-grow:     1;
    min-width:     20px;
    max-width:     20px;
}

.cn2-diagram-legend-dot-gray01 {
    display:          inline;
    float:            left;
    margin-top:       4px;
    margin-bottom:    4px;
    width:            20px;
    height:           20px;
    background-color: #222222;
    border-radius:    100%;
}

.cn2-diagram-legend-dot-gray02 {
    display:          inline;
    float:            left;
    margin-top:       4px;
    margin-bottom:    4px;
    width:            20px;
    height:           20px;
    background-color: #535353;
    border-radius:    100%;
}

.cn2-diagram-legend-label {
    margin-left: 30px;
    flex-grow:   1;
}

.cn2-info-content {
    margin-top: 35px;
}

.cn2-info {
}

/* info */
.cn2-info-text-container {
    width:     100%;
    height:    40px;
    padding:   5px;
    min-width: 1000px;
}

.cn2-info-text-label {
    display:        inline;
    float:          left;
    text-transform: uppercase;
}

.cn2-info-text-value {
    float:       left;
    margin-left: 10px;
    font-family: 'gotham-bold', sans-serif;
}

@media screen and (max-width: 1200px) {
    .cn2-diagram {
        width:  600px;
        height: 350px;
    }
}

@media screen and (max-width: 760px) {
    .cn2-diagram {
        width: 450px;
    }
}

/* menu */
.cn2-nav-item-a-submenu.campaign-menu {
    margin-top:    10px;
    margin-bottom: 0;
    height:        25px;
}
/* ==========================================================================
   EntityForm01
   ========================================================================== */

.po2-entity-form-ul {
    background-color: #323232;
}

.po2-entity-form-separator {
    margin-top: 50px;
}

.po2-tab-a-sub {
    background-color: #4d4d4d !important;
}

.po2-tab-a-sub.active {
    background-color: #27ccbc !important;
    color: #1a1a1a !important;
}

/* ==========================================================================
   CampaignVariables
   ========================================================================== */

.po2-variables {

}

.po2-variables-nav {
    display:   inline;
    min-width: 300px;
    position:  relative;
}

.po2-variables-nav-pages {
    display: block;
    /*background-color: */
 /*;*/
}

.po2-variables-nav-variant {
    display: block;
    /*background-color: */
 /*;*/
}

.po2-variables-nav-variant-undo-icon {
    height:   0;
    position: relative;
    top:      -24px;
    left:     -59px;
    display:  none;
}

.po2-variables-nav-variant-undo-icon.po2-form-hasChanges {
    display: block;
}

.po2-variables-nav-variant.hasChanges {
    background-color: black;
}

.po2-variables-nav-variant-a {
    margin-bottom: 20px;
    font-size:     1.5em
}

.po2-variables-nav-variant-a.active {
    color: #27ccbc;
}

.po2-variables-nav-variablegroups-body {
}

.po2-variables-nav-variablegroups {
}

.po2-variables-nav-variablegroups-button {
    display:       block;
    margin-bottom: 5px;
    border-color: #323232;
    color:         #808080;
    min-width:     200px;
    text-align:    left;
    padding:       6px 20px 6px 20px;
}

.po2-variables-nav-variablegroups-button:focus {
    box-shadow: none !important;
}

.po2-variables-nav-variablegroups-button.active {
    border-color: #27ccbc;
    background-color: #323232 !important;
    color: #27ccbc !important;
}

.po2-variables-content-body {
    display: inline;
    width:   calc(100vw - 600px);
}

.po2-variables-content-body-form {
    width: 100%;
}

.po2-variables-input {
    min-width: 400px;
}

.po2-input-error {
    color: #ff454c;
}

/* ==========================================================================
   Boolean
   ========================================================================== */

.po2-variables-input.boolean {
    /*width: 200px;*/
    /*height: 100px;*/
    /*display: none;*/
    border:  1px solid;
    display: block;
}

.po2-variables-input.boolean.label {
    /*position: relative;*/
    /*display: inline-block;*/
    /*width: 60px;*/
    /*width: 90px;*/
    /*height: 34px;*/
}

.switch {
    position: relative;
    display:  inline-block;
    /*width: 60px;*/
    width:    90px;
    height:   34px;
}

.slider {
    position:           relative;
    cursor:             pointer;
    width:              100px;
    height:             30px;
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    background-color:   #ccc;
    -webkit-transition: .4s;
    transition:         .4s;
}

.slider:before {
    position:           absolute;
    content:            "";
    height:             26px;
    width:              26px;
    left:               4px;
    bottom:             4px;
    background-color:   white;
    -webkit-transition: .4s;
    transition:         .4s;
}

.po2-variables-input input:checked + .slider {
    /*background-color: #2196F3;*/
    background-color: #5bf342;
}

.po2-variables-input input:focus + .slider {
    /*box-shadow: 0 0 1px #2196F3;*/
    box-shadow: 0 0 1px #5bf342;
}

.po2-variables-input input:checked + .slider:before {
    /*-webkit-transform: translateX(26px);*/
    /*-ms-transform: translateX(26px);*/
    /*transform: translateX(26px);*/
    -webkit-transform: translateX(56px);
    -ms-transform:     translateX(56px);
    transform:         translateX(56px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.po2-form .textarea {
    /*min-height: 220px;*/
    resize: vertical;
}

/* ==========================================================================
   Excel
   ========================================================================== */

.po2-excel {

}

.po2-excel-nav {
    margin-bottom: 30px;
}

.po2-excel-nav-a.active {
    background-color: #51ddd0;
}

.po2-excel-control {
    /*border: 1px solid #555555;*/
    min-width: 380px;
    background-image: linear-gradient(to bottom, #111 70%, rgba(255, 255, 255, 0) 0%);
    background-position: right;
    background-size: 3px 50px;
    background-repeat: repeat-y;
    margin-right: 30px;
}

.po2-excel-tablecontent {
    /*border: 1px solid #777777;*/
}

.po2-excel-control-img {
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
    margin-top:    80px;
    margin-bottom: 50px;
    height:        300px;
    border-radius: 20px;
}

.po2-excel-control-img:hover {
    background-color: #242424;
    transition:       color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.po2-excel-control-button-line-body {
    display:      flex;
    margin-left:  auto;
    margin-right: auto;
    width:        250px;
}

.po2-excel-control-button-line {
    position:      relative;
    top:           7px;
    display:       inline-flex;
    border-bottom: 2px solid #555555;
    width:         100px;
    height:        5px;
    margin-left:   auto;
    margin-bottom: auto;
}

.po2-excel-control-button-text {
    display: inline;
}

.po2-excel-control-button {
    display:       block;
    margin-left:   auto;
    margin-right:  auto;
    margin-top:    30px;
    margin-bottom: 20px;
}

.po2-excel-down {
    width: 100%;
}

.po2-excel-up {
    width: 100%;
}

/* ------------------------------------------------------------------------------------- */
/*                                       felder                                          */
/* ------------------------------------------------------------------------------------- */
.selectable-field {
    list-style-type: none;
    margin:          0;
    padding:         0;
    /* width: 60%; */
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action:     none;
    display:          block;
}

.ui-selectee {
    display: inline-flex;
}

.ui-selecting {
    background: #27ccbc !important;
    color:   white;
    display: inline-flex;
}

.selectable-field .ui-selected {
    background: #27ccbc;
    display: inline-flex;
}

.selectable-field li {
    white-space: nowrap;
    padding:     0.4em;
    font-size:   20px;
}

.ui-widget-content {
    border:     1px solid #323232;
    background: #444444;
    color:      #333;
    margin:     2px;
}

/* ------------------------------------------------------------------------------------- */
/*                                      tabellen                                         */
/* ------------------------------------------------------------------------------------- */

.po2-excel-tablecontent-list {
    margin-bottom: 50px;
}

.po2-excel-tablecontent-list-label {
    margin-top:    20px;
    margin-bottom: 10px;
}

/* erste zeile */
.po2-excel-tablecontent-list thead tr:first-child th {
    background-color: #444444;
    border:           none;
}

.po2-excel-tablecontent-list thead tr:first-child th:first-child {
    border-top-left-radius:    20px;
    border-bottom-left-radius: 20px;
}

.po2-excel-tablecontent-list thead tr:first-child th:last-child {
    border-top-right-radius:    20px;
    border-bottom-right-radius: 20px;
}

.po2-excel-tablecontent-list tbody tr:first-child {
    border-top: none;
}

.po2-excel-tablecontent-list tbody tr:first-child td,
.po2-excel-tablecontent-list tbody tr:first-child th {
    border-top: none;
}

/* ------------------------------------------------------------------------------------- */
/*                                    importbutton                                       */
/* ------------------------------------------------------------------------------------- */
.po2-form-input-checkbox.red label {
    cursor:   pointer;
    position: absolute;
    width:    30px;
    height:   30px;
    top:      30px;
    left:     0;
    /* background: #eee; */
    border:   1px solid rgba(204, 36, 92, 0.21);
}

.po2-form-input-checkbox.red label:after {
    opacity:      0.2;
    content:      '';
    position:     absolute;
    width:        25px;
    height:       15px;
    background:   transparent;
    top:          4px;
    left:         2px;
    border:       6px solid #ff454c;
    border-top:   none;
    border-right: none;
    transform:    rotate(-50deg);

}

.po2-form-input-checkbox-input-body {
    display: inline;
}

.po2-form-input-checkbox-formgroup {
    margin-bottom: 50px;
}
/* ==========================================================================
   Tiles01
   ========================================================================== */

.po2-upload-area {
    height: 100%;
    margin: 5px;
}

.po2-upload-area-form {
    height: 100%;
}

.po2-upload-area-form-img {
    width: 100%;
    z-index:  1;
}

.po2-upload-area-form-input {
    position: relative;
    top: -230px;
    left: -15px;
     opacity: 0;
    z-index: 100;
    height: 100%;
    width: 115%;
}

/* ==========================================================================
   TypoModuleIFrame
   ========================================================================== */

.cn2-typo-window {
    min-width: 500px;
}

.cn2-typo-content {
    min-width:  500px;
    overflow-x: auto;
}
/* ==========================================================================
   NtoNEntityForm01
   ========================================================================== */

/* ==========================================================================
   Authorization
   ========================================================================== */

.cn2-authorization-container {
    margin: 30px;
}

.cn2-authorization-buttons {
    margin: 10px;
    padding: 6px 20px 6px 20px;
}

.cn2-authorization-buttons.admin {
    margin: 10px 10px 10px 0;
}

/* ==========================================================================
   Tutorial
   ========================================================================== */

.cn2-tutorial-overview {
    /*margin-top:    10px;*/
    margin-right:  10px;
    margin-left:   10px;
    border-radius: 20px 20px 20px 20px;
}

.cn2-tutorial-overview-card-container {
    border-radius: 30px;
    margin:        20px;
    min-width:     268px;
}

.cn2-tutorial-overview-card-container-opa020 {
    opacity: 0.2;
}

.cn2-tutorial-overview-card-container-opa040 {
    opacity: 0.4;
}

.cn2-tutorial-overview-card-container-opa050 {
    opacity: 0.5;
}

.cn2-tutorial-overview-card-container-opa060 {
    opacity: 0.6;
}

.cn2-tutorial-overview-card-container-opa100 {
    opacity: 1;
}

.cn2-tutorial-overview-card {
    width:            286px;
    height:           200px;
    border-radius:    30px;
    background-color: white;
}

.cn2-tutorial-overview-card-play-div {
    position: absolute;
    width:    100%;
    height:   100%;
}

.cn2-tutorial-overview-card-a {
    width:  100%;
    height: 100%;
}

.cn2-tutorial-overview-card-play-img {
    display:      none;
    margin-left:  auto;
    margin-right: auto;
    padding:      44px 0;
    width:        40%;
}

.cn2-tutorial-overview-card-play-img-show {
    display: block;
}

.cn2-tutorial-overview-card-logo {
    width:         45px;
    margin-left:   -15px;
    margin-top:    -12px;
    margin-bottom: 15px;
}

.cn2-tutorial-overview-card-title {
    color:      #27ccbc;
    text-align: center;
}

.cn2-tutorial-overview-card-subtitle {
    color:      #000000;
    text-align: center;
}

.cn2-tutorial-overview-card-video {
    width:   100%;
    height:  100%;
    outline: -webkit-focus-ring-color auto 0;
}