:root{
    --weiß:                     rgb(241, 241, 241);
    --schwarz:                  rgb(31, 31, 31);
    --schwarz-transparent:      rgba(31, 31, 31, 0.5);
    --schwarz-sehr-transparent: rgba(31, 31, 31, 0.25);
    --hell-transparent:         rgba(208, 227, 196, 0.5);
    --hell-sehr-transparent:    rgba(208, 227, 196, 0.25);
    --normal:                   rgb(178, 209, 158);
    --dunkel:                   rgb(144, 190, 116);
    --font-w-regular:           400;
    --font-w-semi:              600;
    --borderbig:                6em;
    --borderreg:                3em;
    --bordersmall:              1em;
    --borderverysmall:          .75em;
    --font-s-gigantic:          3em;
    --font-s-verybig:           2.5em;
    --font-s-big:               1.5em;
    --font-s-regular:           1em;
    --font-s-small:             .75em;
    --font-s-verysmall:         .5em;
}
/* styles for desktop devices */
@media only screen and (min-width: 992px) {
    :root {
        --margin-login:         10% 35% 10% 35%;
        --margin-nav:           0em 15em 2em 15em;
        --margin-promo:         0 20em 0 20em;
        --margin-promo-header:  0 10em 0 10em;
        --width-table:          65%;
        --width-profile:        40%;
        --padding-nav:          1em;
        --font-tab:             1em;
        --svg-size:             1em;
        --camp-head:            1.5em;
        --font-s-regbig:        1.25em;
        --font-s-table-var:     1.25em;
        --font-s-p:             1em;
        --icon-size:            8em;
        --example-width:        50%;
        --bordervar:            1em;
        --campaign-overall-grid:repeat(auto-fill, minmax(20em, 1fr));
        --faq-grid:             1fr 1fr;
        --faq-gap:              5% 10%;
        --question-min-height:  22em;
    }
    body {
        font-size:              16px;
    }
}
/* styles for tablet devices */
@media only screen and (min-width: 651px) and (max-width: 991px) {
    :root {
        --margin-login:         10% 25% 10% 25%;
        --margin-nav:           2em 4em 2em 4em;
        --margin-promo:         0 10em 0 10em;
        --margin-promo-header:  0;
        --width-table:          85%;
        --width-profile:        65%;
        --padding-nav:          .75em;
        --font-tab:             1.25em;
        --svg-size:             1.5em;
        --camp-head:            2em;
        --font-s-regbig:        1.25em;
        --font-s-table-var:     1em;
        --font-s-p:             1em;
        --icon-size:            8em;
        --example-width:        50%;
        --bordervar:            1em;
        --campaign-overall-grid:1fr 1fr;
        --faq-grid:             1fr;
        --faq-gap:              5%;
    }
    body {
        font-size:              14px;
    }
}
/* styles for mobile devices */
@media only screen and (max-width: 650px) {
    :root {
        --margin-login:         10%;
        --margin-nav:           2em;
        --margin-promo:         0;
        --margin-promo-header:  0;
        --width-table:          90%;
        --width-profile:        90%;
        --padding-nav:          1.5em .5em;
        --font-tab:             1em;
        --svg-size:             2em;
        --camp-head:            2.5em;
        --font-s-regbig:        1em;
        --font-s-table-var:     .75em;
        --font-s-p:             1.25em;
        --icon-size:            12em;
        --example-width:        90%;
        --bordervar:            3em;
        --campaign-overall-grid:1fr;
        --faq-grid:             1fr;
        --faq-gap:              2.5%;
        --faq-min-height:       100em;
    }
    body {
        font-size:              12px;
    }
}
body{
    font-family:                Poppins, sans-serif;
    background-color:           var(--weiß);
    text-align:                 center;
}
html, body {
    height:                     100%;
    margin:                     auto;
}
main {
    position:                   relative;
    min-height:                 100vh;
    padding-top:                2em;
    margin-bottom:              10em;
}
footer {
    height:                     10em;
    width:                      100%;
    margin:                     auto;
    bottom:                     -10em;
    left:                       0;
    background-color:           var(--hell-sehr-transparent);
    display:                    flex;
    justify-content:            space-around;
    align-items:                center;
}
footer a {
    text-decoration:            none;
    color:                      var(--schwarz);
    font-size:                  var(--font-s-regular);
    font-weight:                var(--font-w-semi);
}
footer a:hover {
    color:                      var(--dunkel);
}
.tabs {
    display:                    flex;
    justify-content:            space-around;
    background-color:           var(--hell-transparent);
    padding:                    var(--padding-nav);
    border-radius:              var(--borderbig);
    margin:                     var(--margin-nav);
}
.tabs a {
    text-decoration:            none;
    color:                      var(--schwarz);
    font-size:                  var(--font-tab);
    font-weight:                var(--font-w-semi);
}
.tabs a.active {
    color:                      var(--dunkel);
}
.tabs a:hover {
    color:                      var(--dunkel);
}
.headline{
    margin-top:                 2.5%;
    color:                      var(--schwarz);
    font-size:                  var(--font-s-verybig);
    font-weight:                var(--font-w-semi);
}
.overall {
    display:                    flex;
    justify-content:            space-around;
    align-items:                center;
    padding:                    1%;
    background-color:           var(--normal);
    border-radius:              var(--borderbig);
    margin:                     var(--margin-nav);
    margin-top:                 2em;
}
.overall div {
    text-align:                 center;
    text-decoration:            none;
    align-content:              center;
    color:                      var(--schwarz);
    font-size:                  var(--font-s-regular);
}
.overall div h3 {
    margin:                     auto;
    font-size:                  var(--font-s-regular);
}
.overall div p {
    margin:                     auto;
    font-size:                  var(--font-s-table-var);
}
h1 {
    font-size: var(--font-s-gigantic);
}
.subtext {
    line-height: 1.7;
    font-size: var(--font-s-p);
}
.date-picker {
    display:                    flex;
    justify-content:            center;
    align-items:                center;
}
.date-picker div {
    background-color:           var(--hell-transparent);
    padding:                    1em;
    border-radius:              var(--borderbig);
    text-align:                 center;
    text-decoration:            none;
    color:                      var(--schwarz);
    font-size:                  var(--font-s-regular);
    margin:                     0 1% 0 1%;
}
.default {
    text-align:                 center;
    justify-content:            space-around;
    margin-top:                 3em;
    margin-bottom:              3em;
}
.wrapper {
    padding:                    1.5em;
    margin:                     var(--margin-login);
}
table {
    width:                      var(--width-table);
    color:                      var(--schwarz);
    border-spacing:             0 1em;
    border-collapse:            separate;
    margin:                     auto;
    font-size:                  var(--font-s-table-var);
}
th {
    font-weight:                var(--font-w-semi);
    background-color:           var(--weiß);
}
tr td {
    background-color:           var(--hell-transparent);
    padding:                    2%;
}
tr:nth-child(n+2) td:first-child {
    border-top-left-radius:     var(--bordersmall);
    border-bottom-left-radius:  var(--bordersmall);
}
tr:nth-child(n+2) td:last-child {
    border-top-right-radius:    var(--bordersmall);
    border-bottom-right-radius: var(--bordersmall);
}
.campaign-overall {
    display:                    grid;
    grid-template-columns:      var(--campaign-overall-grid);
    width:                      100%;
    box-sizing:                 border-box;
    gap:                        2%;
    padding:                    4em;
    justify-content:            center;
    align-items:                center;
}
.box {
    text-decoration:            none;
    border:                     3px solid transparent;
    background-color:           var(--hell-transparent);
    border-radius:              var(--bordersmall);
    padding:                    2%;
    margin:                     2%;
    min-width:                  18em;
    min-height:                 12em;
    box-sizing:                 border-box;
    display:                    flex;
    flex-direction:             column;
    justify-content:            space-between;
}
.box:hover {
    text-decoration:            none;
    background-color:           var(--hell-transparent);
    border:                     3px solid var(--dunkel);
}
.payout {
    margin:                     auto;
    padding:                    .5em 0 .5em 0;
    font-size:                  var(--camp-head);
    font-weight:                var(--font-w-semi);
    color:                      var(--dunkel);
}
.description {
    font-size:                  var(--font-s-regular);
    font-weight:                var(--font-w-regular);
    color:                      var(--schwarz);
    text-align:                 left;
    margin:                     0 1em 0 1em;
}
.campaign-details {
    display:                    flex;
    flex-direction:             column;
    align-items:                center;
    height:                     100%;
}
.campaign-details h3 {
    margin:                     auto;
    padding:                    .5em 0 .5em 0;
    font-size:                  var(--camp-head);
    font-weight:                var(--font-w-semi);
    color:                      var(--schwarz);
}
.campaign-view {
    text-decoration:            none;
    border:                     3px solid transparent;
    background-color:           var(--hell-transparent);
    border-radius:              var(--bordersmall);
    padding:                    2%;
    width:                      100%;
    height:                     100%;
    box-sizing:                 border-box;
    display:                    flex;
    flex-direction:             column;
    justify-content:            space-between;
    align-items:                center;
}
.campaign-single {
    padding:                    var(--margin-nav);
}
.campaign-single a.button {
    margin-bottom:              1em;
    padding-top:                1%;
    padding-bottom:             1%;
    min-height:                 10%;
    min-width:                  80%;
    border:                     3px solid transparent;
    border-radius:              var(--borderbig);
    color:                      var(--schwarz);
    background-color:           var(--normal);
    font-size:                  var(--font-s-big);
    font-weight:                var(--font-w-semi);
    text-decoration:            none;
    justify-content:            center;
    align-items:                center;
}
.campaign-single a.button:hover {
    background-color:           var(--dunkel);
}
.campaign-single a.link {
    min-height:                 3.75em;
    min-width:                  80%;
    justify-content:            center;
    align-content:              center;
    border-radius:              var(--borderbig);
    border:                     3px solid transparent;
    background-color:           var(--weiß);
    text-decoration:            none;
    font-size:                  var(--font-s-regbig);
    font-weight:                var(--font-w-regular);
    color:                      var(--schwarz);
    margin-bottom:              1em;
}
.campaign-single a.link:hover {
    border-color:               var(--dunkel);
}
.svg {
    resize:                     both;
    width:                      var(--svg-size);
    height:                     var(--svg-size);
}
.logo {
    resize:                     both;
    width:                      12.57em;
    height:                     3em;
}
.info-container {
    width:                      100%;
    padding:                    1em 3em 0 3em;
    box-sizing:                 border-box;
    display:                    flex;
    justify-content:            space-between;
}
.impressum {
    text-align:                 left;
    padding:                    var(--margin-nav);
    padding-top:                2em;
}
.homepage-content {
    display:                    flex;
    flex-wrap:                  wrap;
    padding-top:                5em;
    padding-bottom:             5em;
    align-items:                center;
    justify-content:            center;
    text-align:                 left;
    margin:                     var(--margin-nav);
    gap:                        5em;
}
.homepage-text {
    flex:                       1;
}
.notification {
    display:                    inline-block;
    position:                   absolute;
    background-color:           var(--normal);
    color:                      var(--schwarz);
    padding:                    .5em 1em;
    border-radius:              .5em;
    text-align:                 center;
    transform:                  translate(-50%, -125%);
    opacity:                    0;
    transition:                 opacity 0.5s ease-in-out;
    z-index:                    1000;
}
.notification.show {
    opacity:                    1;
}
.profile-section {
    padding:                    1em 0 5em 0;
    background-color:           var(--weiß);
}
.profile-section h2 {
    margin-bottom:              .75em;
}
form {
    margin-bottom:              2em;
}
.social-account-row,
.user-details-row {
    width:                      var(--width-profile);
    display:                    flex;
    margin:                     0 auto .75em;
    justify-content:            space-between;
}
.user-details-row {
    width:                      var(--width-profile);
    display:                    flex;
    flex-direction:             column; /* Stack elements vertically */
    margin:                     0 auto; /* Add margin bottom for spacing between rows */
}
.social-account-row select,
.social-account-row input,
.user-details-row select,
.user-details-row input {
    background-color:           white;
    width:                      100%;
    padding:                    .75em;
    border-radius:              var(--borderverysmall);
    border:                     1px solid var(--schwarz-sehr-transparent);
}
.social-account-row select,
.user-details-row select{
    -moz-appearance:            none; /* Firefox */
    -webkit-appearance:         none; /* Safari and Chrome */
    appearance:                 none;
    background-image:           url('../../casamedia/style/icon/arrow_down.svg');
    background-size:            2em 2em;
    background-repeat:          no-repeat;
    background-position:        calc(100% - 0.75rem) center !important;
}
.social-account-row select{
    border-radius:              .75em 0 0 .75em;
}
.social-account-row input{
    border-radius:              0 .75em .75em 0;
}
.user-details-row select,
.user-details-row input {
    background-color:           white;
    width:                      100%; /* Make inputs take full width of their container */
    padding:                    .75em;
    border-radius:              var(--borderverysmall);
    border:                     1px solid var(--schwarz-sehr-transparent);
    box-sizing:                 border-box; /* Ensure padding doesn't affect width */
    margin-bottom:              .5em;
}
.user-details-row label {
    font-size:                  var(--font-s-regular);
    margin-bottom:              0.25em; /* Spacing between label and input */
}
.social-account-row button,
.user-details-row button {
    background-color:           #e74c3c;
    color:                      var(--weiß);
    margin-left:                1em;
    padding:                    .5em 1em;
    border:                     none;
    border-radius:              var(--borderverysmall);
    cursor:                     pointer;
}
.social-account-row button:hover,
.user-details-row button:hover {
    background-color:           #c0392b;
}
button[type="submit"] {
    background-color:           #2ecc71;
    color:                      var(--weiß);
    padding:                    .5em 1em;
    border:                     none;
    border-radius:              var(--borderverysmall);
    cursor:                     pointer;
}
button[type="submit"]:hover {
    background-color:           #27ae60;
}
button#add-social-account {
    background-color:           #3498db;
    color:                      var(--weiß);
    padding:                    .5em 1em;
    border:                     none;
    border-radius:              var(--borderverysmall);
    cursor:                     pointer;
    margin-top:                 10px;
}
button#add-social-account:hover {
    background-color:           #2980b9;
}
.logout-button {
    text-decoration:            none;
    background-color:           var(--schwarz-sehr-transparent);
    color:                      var(--schwarz);
    padding:                    1em 3em;
    border:                     none;
    border-radius:              var(--borderverysmall);
    cursor:                     pointer;
    font-size:                  var(--font-s-big);
}
.logout-button:hover {
    text-decoration:            none;
    color:                      var(--schwarz);
    background-color:           var(--schwarz-transparent);
}
.applogo {
    resize:                     both;
    width:                      2em;
    height:                     2em;
}
input.invalid-placeholder::placeholder,
select.invalid-placeholder option[value=""]:checked {
    color:                      red;
}
input.invalid-placeholder,
select.invalid-placeholder {
    border:                     1px solid red;
    color:                      red;
}
.payoutInformationButton {
    padding:                    .5em 1em;
    background-color:           var(--hell-transparent);
    color:                      var(--schwarz);
    border:                     none;
    cursor:                     pointer;
    border-radius:              var(--borderverysmall);
}
.payoutInformationButton:hover {
    text-decoration:            none;
    background-color:           var(--dunkel);
}
.table-head {
    margin:                     0;
    padding:                    0;
    font-size:                  var(--font-s-table-var) !important;
    font-weight:                var(--font-w-semi);
}
.big-header {
    margin:                     0;
    padding:                    0;
    font-size:                  var(--font-s-verybig);
    font-weight:                var(--font-w-semi);
}
.example-briefing {
    width:                      100%;
    justify-content:            center;
}
.briefing-slide {
    resize:                     both;
    width:                      22.5em;
    height:                     40em;
    padding:                    1em;
}
.banner {
    padding:                    6.25em 0 3.125em;
    margin:                     var(--margin-nav);
}
.btn-primary {
    background-color:           var(--dunkel);
    color:                      var(--weiß);
    border-color:               var(--dunkel);
}
.btn {
    padding:                    1rem 2rem;
    border-radius:              var(--borderreg);
    font-weight:                var(--font-w-semi);
}
.section-titel {
    margin-bottom:              1.5em;
}
.btn-link {
    color:                      var(--dunkel);
}
.icon {
    resize:                     both;
    width:                      1.5em;
    height:                     1.5em;
}
.social-grid {
    grid-template-columns:      1fr 1fr;
    display:                    grid;
    box-sizing:                 border-box;
    gap:                        10%;
    justify-content:            center;
    align-items:                center;
}
.social-icon {
    resize:                     both;
    width:                      var(--icon-size);
    height:                     var(--icon-size);
    border-radius:              var(--bordervar);
    padding:                    1em;
    background-color:           var(--weiß);
    box-shadow:                 rgba(149, 157, 165, 0.2) 0 .5em 1.5em;
}
.new-bgr {
    background-color:           var(--hell-sehr-transparent);
}
.img-shadow {
    box-shadow:                 rgba(149, 157, 165, 0.2) 0 .5em 1.5em;
    border-radius:              var(--bordersmall);
}
.width-variable {
    width:                      var(--example-width);
}
.faq-grid {
    grid-template-columns:      var(--faq-grid);
    display:                    grid;
    box-sizing:                 border-box;
    gap:                        var(--faq-gap);
    justify-content:            center;
    align-items:                center;
    margin:                     var(--margin-nav);
    min-height:                 var(--faq-min-height);
}
.question-shadow {
    box-shadow:                 rgba(149, 157, 165, 0.2) 0 .5em 1.5em;
    border-radius:              var(--bordersmall);
    padding:                    2em;
    min-height:                 var(--question-min-height);
}
.loadingScreen {
    z-index:                    5;
    height:                     100vh;
    background-color:           var(--weiß);
    padding-top:                5em;
}
.loadingScreen > img {
    animation: rotateForever    2s infinite;
}
@keyframes rotateForever {
    from {
        transform:              rotate(360deg);
    }
}
.promo-code {
    display:                    inline-block;
    padding:                    1em 2em;
    font-size:                  var(--font-s-regular);
    font-weight:                bold;
    background-color:           white;
    border:                     1px solid var(--schwarz-sehr-transparent);
    border-radius:              var(--borderverysmall);
    user-select:                none;
    cursor:                     pointer;
}
.info{
    display:                    none;
    background-color:           white;
    font-size:                  var(--font-s-small);
    font-weight:                normal;
    padding:                    .5em;
    border-radius:              var(--borderverysmall);
}
.info-icon:hover ~ .info{
    display:                    block;
}