/* Layer im Dokument-Fluss */
#cookiesettings {
    margin: 40px 0 0 0 !important;
    position: relative;
    z-index: 1000 !important;
    display: flex;
    width: 100%;
    max-width: 665px; /* 640 */
    margin: 0 auto;
    padding: 30px 20px 24px 20px;
    /*background-color: rgba(197,193,159,0.3);*/
    /*border: 1px solid rgba(0,0,0,0.2);*/
    /*box-shadow: 0 0 4px rgba(0,0,0,0.3);*/

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c9e7ff+0,e7d8ff+100 */
    background: #c9e7ff; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #c9e7ff 0%, #e7d8ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #c9e7ff 0%,#e7d8ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #c9e7ff 0%,#e7d8ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9e7ff', endColorstr='#e7d8ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
    hyphens: auto;
}

/* Schwebender Layer */
#cookiesettings.layer {
    position: absolute;
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    z-index: 1;
    /*top: 50%;*/
    top: 20px;
    left: calc(50% - 20px);
    /*transform: translate(-50%, -50%);*/
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* Ueberlagernde schwarze Flaeche */
.black {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
}

#cookiesettings > div:first-child {
    width: 100%;
}

#cookiesettings h2 {
    max-width: calc(100% - 40px);
    margin: 0 0 24px 0;
    padding: 0;
    display: inline-block;
    border: none;
    font-size: 20px;
    font-weight: 500;
    /*border: 1px solid red;*/
}

#cookiesettings a:not(#closesettings) {
    display: inline-/*block*/;
    margin: 1em 0 0 0;
}

#cookiesettings a,
#cookiesettings a:hover,
#cookiesettings a:active,
#cookiesettings a:visited {
   -webkit-transition: all 250ms;
   -moz-transition:    all 250ms;
   -o-transition:      all 250ms;
   -ms-transition:     all 250ms;
    transition:        all 250ms;
    text-decoration: none;
    word-wrap: break-word; /* Lange Links umbrechen */
    color: white;
    border-bottom: 2px dotted yellowgreen;
}

#cookiesettings a:hover {
    color: yellowgreen;
    border-bottom: 2px dotted white;
}

#cookiesettings form {
    float: left;
    margin: 8px 0 0 0;
    /*border: 1px solid red;*/
}

#cookiesettings button[type="submit"],
#cookiesettings input[type="button"],
#cookiesettings input[type="submit"] {
    width: 100%;
    /*margin: 0 0 24px 0;*/
    margin: 0; /* 24px jetzt bei .notice */
    padding: 16px;

    /*display: inline-block;
    word-wrap: break-word;*/

    /*font-family: 'Questrial', sans-serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.06em;
    font-size: 15px;*/

    font-size: 16px;
    font-weight: 400;
    color: white;
    background: yellowgreen;
    outline: none; /* sorry */

   -webkit-transition: all 250ms;
   -moz-transition:    all 250ms;
   -o-transition:      all 250ms;
   -ms-transition:     all 250ms;
    transition:        all 250ms;
}

#cookiesettings button[type="submit"]:hover:not(:disabled),
#cookiesettings input[type="button"]:hover:not(:disabled),
#cookiesettings input[type="submit"]:hover:not(:disabled) {
    color: black;
    background: #d7ed34;
    cursor: pointer;
   -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

/* User hat Aenderungen vorgenommen */
#cookiesettings #sendbutton.changed {
    background-color: firebrick;
}

#cookiesettings #sendbutton.changed:hover,
#cookiesettings #sendbutton.changed:active {
    color: white;
    background-color: #d30027;
}

/* Hinweis unter Send-Button */
#cookiesettings .notice {
    float: left;
    margin: 1em 0 0 0;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 300;
}

#cookiesettings .notice a {
    color: black;
}

#cookiesettings .notice > span {
    font-weight: 400;
}

/*#cookiesettings input[type="button"]:disabled,
#cookiesettings input[type="submit"]:disabled,*/
#cookiesettings input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
    /*background-color: rgba(128,128,128,0.3);*/
    /*color: /*dark*//*grey;
    color: rgba(0,0,0,0.4);*/
}

/*#cookiesettings input[type="checkbox"]:disabled:checked + label {
    font-weight: 500;
}*/

/* https://codepen.io/valerypatorius/pen/oXGMGL/ */
#cookiesettings input[type="checkbox"] {
    display: none;
}

#cookiesettings label {
    margin: 0;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    /*align-items: flex-start; /* center */
    padding: 15px 15px 15px 15px;
    /*background-color: #424e59;*/
    background-color: rgba(0,0,0,0.7);
    color: white;
    cursor: pointer;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none;   /* Chrome/Safari/Opera */
   -khtml-user-select: none;    /* Konqueror */
   -moz-user-select: none;      /* Firefox */
   -ms-user-select: none;       /* IE/Edge */
    user-select: none;          /* non-prefixed version, currently not supported by any browser */
    transition: background-color 250ms;
}

#cookiesettings label:hover {
    background-color: rgba(0,0,0,0.6);
}

#cookiesettings label:not(:last-of-type) {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#cookiesettings label div:first-child {
    width: 60px;
}

#cookiesettings label div:last-child {
    /*flex-grow: 1;*/
    width: calc(100% - 60px);
    padding: 1px 0 2px 10px;
}

/*#cookiesettings label div:last-child p {
    line-height: 1 !important;
    margin-bottom: 10px;
}*/

#cookiesettings label div:last-child em {
    /*float: left; /* Zeilenabstand gewähren */
    display: block;
    margin: 7px 0 4px 0;
    font-size: 14px;
    line-height: 1.5 !important;
    font-weight: 300;
    color: rgba(255,255,255,0.6);
}

#cookiesettings input[type="checkbox"] + span {
    margin: 0;
    /* Groesse wie Android-Checkboxes */
    width: 57px;
    height: 27px;
    border-radius: 27px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.2);
    display: inline-block;
    transition: background-color 250ms;
}

#cookiesettings input[type="checkbox"] + span:hover {
    cursor: pointer;
}

#cookiesettings input[type="checkbox"] + span:before {
    content: '';
    margin: 4px 4px 0 4px;
    width: 19px;
    height: 19px;
    border-radius: 19px;
    background-color: #8b97a3; /* #8394a3 */
    /*background-color: rgba(255,255,255,0.4);*/
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    display: block;
    transition: all 250ms;
}

#cookiesettings input[type="checkbox"]:checked + span {
    box-shadow: inset 0 0 5px rgba(255,255,255,0.4);
    background-color: yellowgreen;
    transition: all 250ms;
}

#cookiesettings input[type="checkbox"]:checked + span:before {
    margin: 4px 4px 0 34px;
    background-color: white;
}

#cookiesettings input[type="checkbox"]:disabled + span {
    cursor: not-allowed;
    background-color: rgba(255,255,255,0.4);
}

#cookiesettings input[type="checkbox"]:disabled:checked + span:before {
    background-color: rgba(255,255,255,0.8);
}

/* ----------------------------------------------------------------------------- */


@media all and (max-width: 640px) {

    /* Schwebender Layer */
    #cookiesettings.layer {
        width: 100% !important;
        margin: 0 !important;
        top: 0;
        left: 0;
        transform: none;
    }

    #cookiesettings label {
        flex-direction: column;
    }

    #cookiesettings label div:first-child {
        width: 100%;
    }

    #cookiesettings label div:last-child {
        width: 100%;
        padding-left: 0;
    }

}

/* ============================================================================= */


/* https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/ */
#cookiesettings textarea,
#cookiesettings input.text,
#cookiesettings input[type="text"],
#cookiesettings input[type="button"],
#cookiesettings input[type="submit"],
#cookiesettings .input-checkbox {
   -webkit-appearance: none;
    border-radius: 0;
}

/* ============================================================================= */


#msg {
    display: none;
    color: darkred;
    line-height: 1.2;
    margin: 0 0 10px 0;
}

#msg p {
    font-weight: 400;
}

#msg strong {
    font-weight: 500;
}

#msg em {
    font-weight: 600;
}

/* ============================================================================= */


#closesettings {
    position: absolute;
    z-index: 1;
    right: 26px;
    top: 28px;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 2px solid rgba(0,0,0,0.5) !important;
    cursor: pointer;
    /*opacity: 0.3;*/
    display: none;
}

#closesettings:hover {
    /*border-color: #333;*/
    transform: rotate(90deg);
    /*opacity: 1;*/
}

#closesettings:hover:before, #closesettings:hover:after {
    /*background-color: yellowgreen;*/
    background-color: rgba(0,0,0,0.8);
}

#closesettings:before, #closesettings:after {
    position: absolute;
    left: 13px;
    top: 6px;
    content: ' ';
    height: 16px;
    width: 2px;
    background-color: rgba(0,0,0,0.5);
    /*background-color: rgba(123,46,36,0.8);*/
   -webkit-transition: all 250ms;
   -moz-transition:    all 250ms;
   -o-transition:      all 250ms;
   -ms-transition:     all 250ms;
    transition:        all 250ms;
}

#closesettings:before {
    transform: rotate(45deg);
}

#closesettings:after {
    transform: rotate(-45deg);
}

/* ============================================================================= */


/* Thanks to: Alexander Haniotis @ https://codepen.io/haniotis/pen/KwvYLO */
.checkmark {
  position: relative;
  top: 20px;
  margin: 0 auto 20px auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: white;
  stroke-miterlimit: 10;
  box-shadow: inset 0 0 0 #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* ----------------------------------------------------------------------------- */


@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}