/* variables __________________________________ */
:root {
    --primary-color: white;
    --primary-color--contrast-text: var(--secondary-color);    
    --primary-color--dark: #3d3d3d;
    --primary-color--light: white;


    --secondary-color: #3d3d3d;
    --secondary-color--light: #dadada;
    --secondary-color--contrast-text: var(--primary-color);
    

    --body--color: var(--primary-color--contrast-text);
    --body--background: var(--primary-color);

    /* body-header */
    --body__header--background: var(--body--background);

    /* main-nav */
    --main-nav--color: var(--secondary-color--contrast-text);
    --main-nav--background: var(--secondary-color);

    /* breakpoints */
    --breakpoint--small: 533px;
    --breakpoint--medium: 900px;    
    

    /* tables */

    --table--color: inherit;
    --table--background: transparent;

    --table--accent-color: inherit;
    --table--accent-background: var(--secondary-color--light);

    --table__header--color: var(--secondary-color--contrast-text);
    --table__header--background: var(--secondary-color);


    /* body--login */

    --body--login-color: var(--secondary-color--contrast-text);
    --body--login-background: var(--secondary-color);

    --body--login__button-color: var(--secondary-color);
    --body--login__button-background: var(--secondary-color--contrast-text);
}

/* imports __________________________________ */

/* Lato (google-font) */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');



/* General __________________________________ */
/* Template und Componenten übergreifendes css */

html{
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: var(--primary-color--dark);    
}

body{
    margin: 0;    
    background-color: var(--body--background);
    color: var(--body--color);    
}

*{
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p{
    margin-top: 0;
    margin-bottom: 0;
}

a{
    text-decoration: none;
    color: inherit;
}



@media (min-width: 900px){
    .template{
        width: 800px;
        margin: 0 auto;   
    }
}

.template__header .headline{
    font-size: 1.5em;
}


/* body login */

.body--login{
    color: var(--body--login-color);
    background: var(--body--login-background);
}
.body--login .button--style1{
    color: var(--body--login__button-color);
    background: var(--body--login__button-background);
}


/* button styling __________________________________ */

/* .button{

} */

.anchor-button{
    display: inline-block;
}

.button, .anchor-button{
    cursor: pointer;
}

/* button--style1 */
.button--style1, .anchor-button--style1{
    /* reset default button style */
    appearance: none;
    border: transparent;

    font-size: 12px;

    background-color: var(--secondary-color);
    color: var(--secondary-color--contrast-text);    
    

    padding: 0.5rem 1rem; 
    border-radius: 3px;

    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);

    transition: 0.3s box-shadow ease;
}
.button--style1 i, .anchor-button--style1 i{
    margin-right: 0.25em;
}


/* button--style1 hover */
.button--style1:hover, .anchor-button--style1:hover{
    box-shadow: 0px 3px 6px rgba(0,0,0,0.4);   
}


/* body__header __________________________________ */

.body__header{
    background: var(--body__header--background);

    display: grid;
    grid-template-columns:  12rem 1fr;
    grid-template-areas: "logo user-profile";    

    padding: 1em;        

    position: relative;
    z-index: 2;
}

.header__logo{
    width: 140px;
    height: auto;
    grid-area: logo;    
    align-self: center;    
    white-space: nowrap;
}

.header__logo h1{
    font-size: 19px;
}

.header__user-signout{
    grid-area: user-profile;
    justify-self: end;
    text-align: right;
}
.header__user-signout button {
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1em;
    border: none;
    background-color: transparent;
    display: inline-block;
}
.user-signout__user-name{
    font-weight: 700;
}



/* main-nav __________________________________ */

.main-nav{
    color: var(--main-nav--color);
    background: var(--main-nav--background);
    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
    margin-bottom: 2rem;
}

.main-nav .nav__list{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0.75em;
}

.main-nav .list-item{
    margin-right: 2em;
    font-size: 16px;
    font-weight: 700;    
}


/* Template table-template __________________________________ */

.table-template .template__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1em;
}

.table-template{
    margin-bottom: 2em;
}


/* Template send-select __________________________________ */

.template.send-select .form--group-select{
    border-bottom: 1px solid;
    padding: 0 0 1em;
}


/* table __________________________________ */

.table--style1{
    border-spacing: 0;
    font-size: 12px;
    color: var(--table--color);
    background: var(--table--background);
}

.table--style1 .table-row--header{
    color: var(--table__header--color);
    background-color: var(--table__header--background);
}


.table--style1 th, .table--style1 td{
    padding: 9px;
    text-align: left;
}

.table--style1 td{    
    border-bottom: 1px solid ;
}

.table--style1 td:nth-last-child(2n){
    color: var(--table--accent-color);
    background: var(--table--accent-background);
}

.table--style1 td:last-child{
    padding-right: 0;
    text-align: right;
}

.table--style1 form{
    display: inline;
}

.table--style1 button{
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1em;
    border: none;
    background-color: transparent;
    display: inline-block;
}

.table--style1 a
.table--style1 button
{
    transition: 0.3s ease;
}
.table--style1 a:hover,
.table--style1 button:hover
{
    color: var(--primary-color--dark);
}

/* user group list */
.table-template--newsletter-list th:first-of-type{
    white-space: nowrap;
}

.user-group__list{
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.user-group__list li {
    display: inline-block;
}

.user-group__list li:not(:last-of-type)::after {
    display: inline;
    content: ',';
    margin-right: 0.25em;
}




/* Forms/Inputs __________________________________ */

.form:not(:last-of-type){
    border-bottom: 1px solid var(--primary-color--light);
    margin-bottom: 1em;
}

.form__header{
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid;
}

.input-group{
    margin-bottom: 2em;
}

.input-wrapper{
    margin-bottom: 10px;
}

.input-group__input-wrapper{
    padding-left: 2em;
}

.input-group--ck-editor .document-editor__toolbar, 
.input-group--ck-editor .ck-editor.ck.ck-reset,
.input-group--ck-editor .input-wrapper__error-message{
    padding-left: 2em;
}

.input-wrapper__error-message{
    color: red;
    font-weight: 700;
}

.input-wrapper__error-message + input{
    border-color: red;
}

.input-wrapper__error-message ~ .ck-editor .ck-editor__editable:not(.ck-focused){
    border-color: red !important;
}

.input-group--submit{
    display: flex;
    justify-content: flex-end;
}

label{    
    font-size: 14px;
    margin-bottom: 2px;
    display: block;
}

input{
    width: 100%;
    box-sizing: border-box;    
}

input:focus{
    outline-color: var(--secondary-color);
}

input[type="checkbox"]{
    margin: 3px 0;
}

input, select{
    font-size: 16px;
    padding: 3px;
    border-radius: 2px;
    border: 1px solid #BAB8B8;
}


textarea{
    width: 100%;
    font-size: 16px;
    line-height: 1.3em;
    resize: vertical;
    border: 1px solid #BAB8B8;
}

form button[type="submit"]{
    align-self: flex-end;
}


/* form style1 */

.form--style1{
    width: 331px;
    margin: 0 auto;

    border: 1px solid;
    border-radius: 3px;

    padding: 10px;

    display: flex;    
    flex-direction: column;
}

.form--style1 .button[type="submit"]{
    align-self: flex-end;
}



/* form group-name */

.form--group-name{
    display: flex;
    align-items: flex-end;
}

.form--group-name input[type="submit"]{
    all: unset;
    margin-left: 0.5em;
    cursor: pointer;
}

/* form edit newsletter */
#edit-newsletter .form--edit-newsletter{
    margin-top: 2em;
}


/* form create-newsletter */

.input-group--select-template{
    display: flex;
    flex-wrap: wrap;
}

.input-group__header{
    width: 100%;
    margin-bottom: 1em;
}



/* form user-select */

.form--user-select .user-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .5rem;    
    margin: 0 auto;
    min-width: 320px;
    margin-bottom: 1rem;
    width: 100%;    
    border-bottom: 1px solid;
}

.form--user-select .user-name{
    font-weight: 700;
}

.form--user-select button[type="submit"]{
    float: right;
}


.input-wrapper--checkbox{
    display: grid;
    grid-template-columns: 1.5em 1fr;        
}


.input-wrapper--checkbox-button{
    display: inline-block;    
    user-select: none;        
}

.input-wrapper--checkbox-button input{
    all: unset;
}

.input-wrapper--checkbox-button label{
    padding: 0.5rem 0.75rem;
    display: inline-block;
    font-size: emcalc(14);
    margin: 0 0.25rem;    
    /* border: 1px solid; */
    border-radius: 3px;
    cursor: pointer;
    background: white;

    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.input-wrapper--checkbox-button:first-child label{
    margin-left: 0;
}
/* 
.input-wrapper--checkbox-button label:after{         
    margin-left: 0.4rem;
    display: inline;
    content: "\f0c8";     
    font-family: "Font Awesome 5 Pro";
} */

.input-wrapper--checkbox-button input[type="checkbox"]:checked + label{
    color: var(--secondary-color--contrast-text);
    background-color: var(--secondary-color);    
}

/* .input-wrapper--checkbox-button input[type="checkbox"]:checked + label:after{
    content:"\f14a";
    font-weight: 700;    
} */



/* radio-button __________________________________ */

.input-wrapper--radio-image-button{
    max-width: 200px;
    text-align: center;
}

.input-wrapper--radio-image-button input{
    all: unset;    
}

.input-wrapper--radio-image-button label{
    padding: 1em;
    display: inline-block;
    font-size: emcalc(14);
    margin: 0 0.25rem;    
    /* border: 1px solid; */
    border-radius: 3px;
    cursor: pointer;
    background: white;

    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.input-wrapper--radio-image-button label:after{         
    margin-left: 0.4rem;
    display: inline;
    content: "\f0c8";     
    font-family: "Font Awesome 5 Pro";
}



.input-wrapper--radio-image-button input[type="radio"]:checked + label{
    color: var(--secondary-color--contrast-text);
    background-color: var(--secondary-color);    
}

.input-wrapper--radio-image-button input[type="radio"]:checked + label:after{
    content:"\f14a";
    font-weight: 700;    
}


.input-wrapper--radio-image-button img{
    width: 100%;
    margin-bottom: 0.5em;
}




/* form user-edit */

.template.edit-user{
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 2rem;
}

.template.edit-user .template__form{
    display: flex;
    flex-direction: column;
}

.template.edit-user .form:not(:last-child){
    border-bottom: 0;    
}



/* old css __________________________________ */

#mainSection {
    width:  980px;
    margin:  auto;
    padding: 10px;
}

#form-elements {
    padding: 10px;
}

#form-elements label{
    width: 110px;
    float: left;
    padding: 5px;

}
#form-elements input[type="text"]{
    padding: 5px;
    border: 1px solid #c8c8c8c8;
    border-radius: 4px;

}
#form-elements textarea {
    height: 110px; 
    width: 300px;
    padding: 5px;
    border: 1px solid #c8c8c8c8;
    border-radius: 4px;
}
.form-elements label{
    width: 110px;
    float: left;
    padding: 5px;

}
.form-elements input[type="text"], .form-elements input[type="email"]{
    padding: 5px;
    border: 1px solid #c8c8c8c8;
    border-radius: 4px;

}
.form-elements{
    padding: 10px;
}
.form-elements textarea {
    height: 110px; 
    width: 300px;
    padding: 5px;
    border: 1px solid #c8c8c8c8;
    border-radius: 4px;
}
#edit-form{
    margin-top: 20px;
    display: none;
}
#mainSection h3 {
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
}
#form-elements1 {
    float: left;
    padding: 40px;
}
.clear {
    clear: both;
}




#error {
    color:red;
    font-weight: bold;
    margin-bottom: 10px;
}

#success {
    color: #288419;
    font-weight: bold;
    margin-bottom: 10px;
}

h2.block-header{
    background-color: #385998;
    color: #fff;
    padding: 10px;
    margin-top: -10px;
    margin-left: -10px;
    width: 400px;
}
#error{
    float: left;
    padding: 10px;
    color: red;
}
#list-newsletter {
    width: 980px;
    margin: auto;
    padding: 10px;
}
#list-newsletter #news-list td{
    padding: 10px;
    background: #f6f6f6;
}
#list-newsletter #news-list th{
    padding: 10px;
    background: #c8c8c8;
}
#edit-newsletter{
    padding: 10px;
    width: 980px;
    margin: auto;
}
#description {
    padding: 10px;
    border: 1px solid grey;
    width: 450px;
    min-height: 200px;
    margin-top: 20px;
    background: white;
}
#heading{
    margin-top: 20px;
    font-size: 20px;
}
#list-users{
    width: 960px;
    margin: auto;
    padding : 10px;
}
#listAllUsers{
    width: 960px;
    margin: auto;
    padding : 10px;
}

.container-createBtn{
    float: right;
    padding: 20px;
}




.fa{
    margin-right: 5px;
    margin-left: 5px;
}
.has-error{
    color: #F00;
}   

.user-item{
    display: block;
}
.user-item__name {
    font-size: 1.1em;
    font-weight: bolder;
}
.user-item__name, .user-item__email {
    display: block;
}

.groups-users{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .5rem;    
    margin: 0 auto;
    min-width: 320px;
    margin-bottom: 1rem;
    width: 100%;
}

.groups-users .user-item{
    display: grid;
    grid-template-columns: 1fr 11fr;
}

#group-user-edit{
    display: flex;
    flex-direction: column;
}

#group-user-submit{
    align-self: flex-end;
}

#signup-form{
    margin-top: 4em;
}

.newsletter-options button{
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1em;
    border: none;
    background-color: transparent;
    display: inline;
}
.newsletter-options__form {
    display: inline-block;
}

#group-edit-name, .group-name-placeholder{
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid;
}

.group-name-placeholder .group-name{
    font-size: 24px;
}

.input-wrapper .textarea {
    white-space: pre;
    overflow-x: scroll;
}

.body__figure.logo{
    width: 500px;
    margin: 0 auto;
}

.body__figure.logo img{
    width: 100%;
}