/*===========================
      01.COMMON css 
===========================*/

/* @import url(fontawesome-all.min.css); */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Poppins:300,400,500,600,700&display=swap");

body {
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: var(--writeColor2);
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
}

.noVisibility{
    visibility: hidden;
}

.noDisplay{
    display: none;
}

.flexBreak {
    flex-basis: 100%;
    width: 100%; /* optional, aber hilfreich */
}

.iconWidth20{
    width: 20px;
}

.noTextSelect{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-moz-selection { /* Code for Firefox */
    color: var(--buttonWriteColor);
    background: var(--primaryHoverColor);
    border-radius: none;
}

::selection {
    color: var(--buttonWriteColor);
    background: var(--primaryHoverColor);
    border-radius: none;
}

::-webkit-scrollbar{
    display: block;
    height: 7px;
    width: 7px;
    cursor: pointer;
}
::-webkit-scrollbar-thumb{ /* Foreground */
    background: var(--writeColor3);
    cursor: pointer;
    border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--writeColor2);
}
::-webkit-scrollbar-track{ /* Background */
    background: transparent;
}

img {
  max-width: 100%;
}

input{
    border: none;
}

/* input::placeholder, textarea::placeholder{
    color: #999aa09f;
} */

input[type="color"]::-moz-color-swatch {
    border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

span.link{
    color: var(--primaryColor);
    font-weight: 600;
    cursor: pointer;
    transition: 0.4s;
}

span.link:hover{
    color: var(--primaryHoverColor);
}

span.highlight{
    color: var(--primaryHoverColor);
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--writeColor2);
  margin: 0px;
}

p.infoLogin{
    margin-top: 10px;
    font-weight: 600;
}

p.errorMessage{
    margin: 10px 0;
}

p.errorMessage.fixHeight{
    height: 55px;
}

.boldHover{
    transition: 0.4s;
    cursor: pointer;
}

.boldHover:hover{
    color: var(--primaryHoverColor);
}

/* Adapted especially for contenteditable parts */
[contenteditable] {
    -webkit-user-select: text;
	user-select: text;
    pointer-events: text;
	outline: none;
    background-color: var(--secondaryColor);
    /* border-radius: 0px !important; */
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 3px;
}

[contenteditable].small {
    background-color: var(--secondaryColor);
    padding: 5px 15px;
}

[contenteditable].courseEditable, [contenteditable].courseEditableHeader, [contenteditable].coachEditable, [contenteditable].groupAgeEditable, [contenteditable].achievementEditable, [contenteditable].courseEditableGroup{
    -webkit-user-select: text;
	user-select: text;
    pointer-events: text;
    
    outline: none;
    border: none;
    background-color: transparent;
    padding: 0px;
    transition: 0.4s;
    cursor: pointer;
}

.achievementEditable, .groupInputName{
    min-width: 100%;
}


.toast {
    position: fixed;
    top: 40px;
    left: calc(50vw - 250px);
    width: 500px;
    min-height: 60px;
    padding: 20px 35px 20px 25px;
    z-index: 100000;
    border-radius: 10px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.42);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.42);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.42);
    background-color: var(--backgroundColor1);

    overflow: hidden;
  }
  
  .toast .toast-content {
    display: flex;
    align-items: center;
  }
  
  .toast-content .check {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    min-width: 35px;
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    font-size: 20px;
    border-radius: 50%;
  }
  
  .toast-content .message {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
  }
  
  .message .text {
    font-size: 16px;
    font-weight: 400;
    color: var(--writeColor2);
  }
  
  .message .text.text-1 {
    font-weight: 600;
    color: var(--writeColor1);
  }

  .message .text span{
      color: var(--primaryColor);
      font-weight: bold;
  }
  
  .toast .close {
    position: absolute;
    color: var(--writeColor2);
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    transition: 0.4s;
  }
  
  .toast .close:hover {
    color: var(--primaryColor);
  }
  
  .toast .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
  
  }
  
  .toast .progress:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primaryColor)
  }
  
  .progress.active:before {
    animation: progress 3s linear forwards;
  }
  
  @keyframes progress {
    100% {
      right: 100%;
    }
  }


.courseManagerBooking{
    font-weight: bold;
    color: var(--primaryColor);
    cursor: pointer;
    transition: 0.4s;
}

.courseManagerBooking:hover{
    color: var(--primaryHoverColor);
}


















input::-webkit-datetime-edit-ampm-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-millisecond-field:focus,
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-second-field:focus,
input::-webkit-datetime-edit-week-field:focus,
input::-webkit-datetime-edit-year-field:focus{
    background-color: transparent;
    outline: none; 
    color: var(--primaryColor);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

input, textarea{
    font-family: "Open Sans", sans-serif;    
}

input[type="time"] {
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-style: normal;
    border: none;

    line-height: 31px;
    font-size: 15px;
    font-weight: 500;
    color: var(--writeColor2);
    background-color: transparent;
    cursor: pointer;
}

input[type="file"]{
    display: none;
}

input[type="text"], input[type="date"], textarea{

    height: 40px;
    line-height: 40px;
    font-size: 17px;

    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;

    background-color: var(--backgroundColor1);
    border-radius: 5px;
    border: none;
    color: var(--writeColor2);

    /* necessary for complete clickable area */
    display: inline-block;
    position: relative; 
    outline: 0;
    padding: 0 10px;
    text-decoration: none;
    width: 90%;
    cursor: pointer;
}

input[type="text"].alt, input[type="date"].alt, textarea.alt{
    background-color: var(--secondaryColor);
}

td input[type="text"], td input[type="date"], td textarea{
    background-color: transparent;
}

td input[type="text"].alt, td input[type="date"].alt, td textarea.alt{
    background-color: transparent;
}


input[type="date"]{
    line-height: 31px;
}

input[type="date"].listInput{
    height: 31px;
    width: 110px;
    min-width: 110px;
    line-height: 13px;
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    text-align: right;
    padding: 6px 0px 0 10px;
    color: var(--writeColor2);
    background-color: transparent;
}

input[type="date"].listInput:focus{
    border: solid 2px transparent;
}

input[type="text"].fullWidth, input[type="date"].fullWidth, textarea.fullWidth{
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
}

textarea{
    height: auto;
    line-height: 24px;
    font-size: 16px;
    color: var(--writeColor2);
    padding: 10px;
}

textarea.options{
    padding: 3px 0 0 0;
    margin: 0;
    resize: none;
    width: 100%;
    height: 10px;
    line-height: 20px;
}

textarea.options:hover{
    color: var(--primaryHoverColor);
}

textarea.options:focus{
    color: var(--primaryColor);
}

textarea.empty{
    min-height: 30px;
    line-height: 20px;
    margin-top: 5px;
}




input[type="number"], input[type="tel"]{
    height: 40px;
    line-height: 40px;

    font-size: 17px;

    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;

    background-color: var(--backgroundColor1);
    border-radius: 5px;
    border: solid 2px transparent;
    color: var(--writeColor1);
    /* necessary for complete clickable area */
    display: inline-block;
    position: relative; 
    outline: 0;
    text-decoration: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: var(--writeColor2);
  margin: 0px;
  padding: 0px;
}

h1, h2, h3, h4{
  font-weight: 600;
  letter-spacing: 0.6px;
}

p.spaceBottom,
h1.spaceBottom,
h2.spaceBottom,
h3.spaceBottom,
h4.spaceBottom,
h5.spaceBottom,
h6.spaceBottom {
  margin-bottom: 10px;
}

h1.spaceBottom2,
h2.spaceBottom2,
h3.spaceBottom2,
h4.spaceBottom2,
h5.spaceBottom2,
h6.spaceBottom2 {
  margin-bottom: 5px;
}

p.spaceTop,
h1.spaceTop,
h2.spaceTop,
h3.spaceTop,
h4.spaceTop,
h5.spaceTop,
h6.spaceTop {
  margin-top: 10px;
}

h1.spaceTopBig,
h2.spaceTopBig,
h3.spaceTopBig,
h4.spaceTopBig,
h5.spaceTopBig,
h6.spaceTopBig {
  margin-top: 20px;
}

h1.spaceTop3,
h2.spaceTop3,
h3.spaceTop3,
h4.spaceTop3,
h5.spaceTop3,
h6.spaceTop3 {
  margin-top: 35px;
}

h1.highlight,
h2.highlight,
h3.highlight,
h4.highlight,
h5.highlight,
h6.highlight {
  color: var(--highlightColor);
}

h1.primary,
h2.primary,
h3.primary,
h4.primary,
h5.primary,
h6.primary {
  color: var(--primaryColor);
}

h1.bold,
h2.bold,
h3.bold,
h4.bold,
h5.bold,
h6.bold {
  font-weight: 900;
}

h1.light,
h2.light,
h3.light,
h4.light,
h5.light,
h6.light {
  font-weight: 500;
}

h1.bigWidth,
h2.bigWidth,
h3.bigWidth,
h4.bigWidth,
h5.bigWidth,
h6.bigWidth {
    width: 130px;
}

h1.bigHeight,
h2.bigHeight,
h3.bigHeight,
h4.bigHeight,
h5.bigHeight,
h6.bigHeight {
    height: 110px;
}


























/*? RIGHT AREA */
.mainArea{
    position: absolute;
    left: 120px;
    display: flex;
    flex-direction: row;
    background-image: linear-gradient(to bottom,var(--backgroundColor2) 0%, var(--backgroundColor3) 100%);
    height: 100vh;
    width: calc(100vw - 120px);
    z-index: 100;
}

.editArea{
    position: relative;
    width: 100%;
    height: 100vh;
    padding-bottom: 20px; 
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}


.editArea .headerBox{
    height: auto;
    margin: 25px 40px;
    padding: 20px 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--backgroundColor1);
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.editArea .headerBox.initial{
    margin-left: calc(23vw - 130px + 40px);
}

.editArea .headerBox .header{
    height: auto;
    max-width: 100%;
}

.editArea .header h2{
    color: var(--writeColor1);
}

.editArea .headerBox .header .headerButtonContainer{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.editArea .headerBox .header .headerButtonContainer .headerButton{
    width: auto;
    min-width: fit-content;
    height: 35px;
    line-height: 31px;
    font-size: 15px;
    font-weight: 600;
    padding: 0 25px;
    margin: 10px 20px 5px 0px;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;
    border: solid 2px transparent;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .headerBox .header .headerButtonContainer .headerButton .icon{
    width: 20px;
}


.editArea .headerBox .header .headerButtonContainer .headerButton:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .headerBox .header .headerButtonContainer .headerButton.primaryManager{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .headerBox .header .headerButtonContainer .headerButton.primaryManager:hover{
    background-color: var(--primaryHoverColor);
}

.editArea .headerBox .header .headerButtonContainer .headerButton.primary{
    border: solid 2px var(--primaryColor);
}

.editArea .headerBox .header .headerButtonContainer .headerButton.primary:hover{
    background-color: var(--secondaryColor);
}





.editArea .content{
    height: auto;
    margin: 0px 40px;
}

.editArea .content .editorElement{
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    margin: 20px 0px;
    padding: 20px 25px;
    background-color: var(--backgroundColor1);
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    transition: 0.4s;
    border: solid 2px transparent;
}

.editArea .content .editorElement.doneSurvey{
    height: auto;
    position: relative;
    flex-direction: column;
}

.editArea .content .editorElement.doneSurvey{
    height: auto;
}

.editArea .content .editorElement.doneSurvey canvas{
    max-height: 260px;
    margin: 15px 0 0 0;
}

.editArea .content .editorElement.doneSurvey table th.surveyText, .editArea .content .editorElement.doneSurvey table td.surveyText{
    max-width: auto;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}



.editArea .content .editorElement.half{
    width: auto;
    max-width: 48%;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.editArea .content .editorElement.half.first{
    margin-right: 3.5%;
}


.editArea .content .editorElement.courseDone{
    background-color: var(--primaryColor);
}

.editArea .content .editorElement.courseUnDone{
    background-color: var(--deniedColor);
}

.editArea .content .editorElement.courseDone h4, .editArea .content .editorElement.courseDone p, .editArea .content .editorElement.courseUnDone h4, .editArea .content .editorElement.courseUnDone p, .editArea .content .editorElement.courseDone td{
    color: var(--backgroundColor1);
}

.editArea .content .editorElement.courseDone table{
    width: fit-content;
    margin-top: 15px;
}

.editArea .content .editorElement.courseDone table tr{
    border-bottom: 1px solid var(--buttonWriteColor);
}

.editArea .content .editorElement.courseDone table tr:first-child{
    border-top:  1px solid var(--buttonWriteColor);
}


.editArea .content .editorElement.courseUnDone span{
    font-weight: bold;
}

.editArea .content .editorElement.selected{
    border: solid 2px var(--primaryColor);
}

.editArea .content .editorInitFlexContainer{
    position: relative;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    margin: 20px 0px 0px calc(23vw - 130px);
    margin-bottom: 20px;
    margin-left: 0;
}

.editArea .content .editorInitElement, .editArea .content .editorElement.init{
    position: relative;
    height: 340px;
    margin: 20px 0px 0px calc(23vw - 130px);
    padding: 20px 25px;
    background-color: var(--backgroundColor1);
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    transition: 0.4s;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editArea .content .editorInitElement.fullLeft, .editArea .content .editorElement.init.fullLeft, .editArea .content .editorInitFlexContainer.fullLeft{
    margin: 20px 0px 0px 0px;
}

.editArea .content .editorInitElement.columnFlex{
    flex-direction: column;
}

.editArea .content .editorElement.init{
    flex-direction: column;
    justify-content: start;
    height: auto;
}

.editArea .content .editorElement.init.longer{
    max-height: 500px;
}

.editArea .content .editorElement.init.fullScreen{
    max-height: 90vh;
    /* height: 90vh; */
}

.editArea .content .editorElement.init.fullScreen .tableContainer{
    max-height: 80vh;
}

.editArea .content .editorElement.init.longer canvas{
    max-height: 367px;
}

.editArea .content .editorElement.init.fullScreen canvas{
    margin-top: 20px;
    max-height: 550px;
    height: 50px;
}

.memberSearchContainer{
    position: relative;
    width: auto;
    height: auto;
    width: 400px;
    max-width: 100%;
}

.memberSearchContainer input.memberSearch{
    background-color: var(--secondaryColor);
    margin: 5px 0;
    width: 100%;
    border-radius: 10px;
}

.memberSearchContainer .closeMemberSearch{
    position: absolute;
    right: 10px;
    width: 30px;
    font-size: 22px;
    text-align: center;
    top: 5px;
    color: var(--writeColor3);
    transition: 0.5s;
    cursor: pointer;
}

.memberSearchContainer .closeMemberSearch:hover{
    color: var(--primaryHoverColor);
}

.editArea .content .editorElement .scrollBoxDashboard{
    overflow-y: auto;
    overflow-x: auto;
    padding-bottom: 10px;
}

.editArea .content .editorInitElement.chart{
    height: 380px;
    position: relative;
    flex-direction: column;
}

.editArea .content .editorInitElement.role{
    height: auto;
    position: relative;
    flex-direction: column;
    justify-content: start;
    height: auto;
    margin-bottom: 20px;
}

.editArea .content .editorInitElement .roleClubContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    height: auto;
    gap: 20px;
    width: 100%;
}

.editArea .content .editorInitElement .roleClubContainer .roleImage{
    width: 150px;
    height: 150px;
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
}

.editArea .content .editorInitElement .roleClubContainer .roleTextBox{
    width: 100%;
    padding: 0;
}

.editArea .content .editorInitElement .roleClubContainer .roleInnerFlex{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    margin: 10px 0;
    overflow-x: auto;
}

.editArea .content .editorInitElement .roleClubContainer .roleTextBox button{
    height: 35px;
    line-height: 34px;
    font-size: 15px;
    font-weight: 500;
    padding: 0 25px;
    margin: 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;
    font-family: var(--textFontFamily);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.editArea .content .editorInitElement .roleClubContainer .roleTextBox button.switch{
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    font-weight: 600;
    margin-top: 10px;
}

.editArea .content .editorInitElement .roleClubContainer .roleTextBox button.switch:hover{
    background-color: var(--secondaryHoverColor);
}



.editArea .content .editorElement.init.fullScreen .tableContainer{
    max-height: 80vh;
}

.editArea .content .editorInitElement .chartTitleBox, .editArea .content .editorElement.init .chartTitleBox{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.editArea .content .editorInitElement .chartTitleBox i:hover, .editArea .content .editorElement.init .chartTitleBox i:hover{
    color: var(--primaryHoverColor);
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorInitElement .chartTitleBox h5, .editArea .content .editorElement.init .chartTitleBox h5{
    width: calc(100% - 200px);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}



.editArea .content .editorInitElement.half{
    width: auto;
    margin: 0;
    margin-left: calc(27vw - 130px);
    margin-bottom: 20px;
}

.editArea .content .editorInitElement.chart canvas{
    height: 100%;
    width: 100%;
    margin: 10px 0 40px 0;
}



.editArea .content .editorInitElement.chart.survey{
    height: auto;
}

.editArea .content .editorInitElement.chart.survey canvas{
    max-height: 260px;
    margin: 15px 0 0 0;
}


.dropbtn {
    height: 27px;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    padding: 0 20px;
    line-height: 27px;
    border: none;
    border-radius: 10px;
    background-color: var(--secondaryColor);
    cursor: pointer;
    transition: 0.4s;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--secondaryColor);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 10px;
}

/* Links inside the dropdown */
.dropdown-content h6 {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border-radius: 10px;
}

/* Change color of dropdown links on hover */
.dropdown-content h6:hover {
    background-color: var(--secondaryHoverColor);
    transition: 0.4s;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content{
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: var(--secondaryHoverColor);
}























.editArea .content .editorInitElement .backgroundImageInitial{
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
}

.editArea .content .editorInitElement .textContainerInitial{
    position: relative;
    width: 24vw;
}

.editArea .content .editorInitElement h4{
    font-size: 27px;
    padding-bottom: 5px;
}

.editArea .content .editorInitElement .initButton{

    width: fit-content;
    height: 45px;
    line-height: 45px;
    font-size: 17px;
    font-weight: 600;
    padding: 0 25px;
    margin: 10px 20px 10px 0px;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorInitElement .initButton .icon{
    width: 20px;
}

.editArea .content .editorInitElement .initButton:hover{
    background-color: var(--secondaryHoverColor);
}


.editArea .content .editorElement h3{
    color: var(--primaryColor);
}

.editArea .content .editorElement p.articleIntro{
    font-size: 17px;
    line-height: 27px;
    font-weight: 400;
    color: var(--writeColor2);
}

.editArea .content .editorElement p.articleIntro.url{
    font-size: 15px;
    line-height: 27px;
    font-weight: 400;
    padding-right: 65px;
    color: var(--writeColor2);
    word-break: break-all;
}

.iconInside{
    position: relative;
    height: auto;
}

.iconInside.flex{
    width: 100%;
}


pre.codeSnippet{
    position: relative; 
    background: var(--secondaryColor); 
    padding: 10px; 
    margin-top: 20px;
    border-radius: 10px; 
    overflow-x: auto; 
}

.iconInside .icon, .iconInside.flex .icon{
    position: absolute;
    top: 0px;
    right: 20px;
    width: 30px;
    height: 48px;
    font-size: 20px;
    padding: 5px 0;
    transition: 0.4s;
    cursor: pointer;
}

.iconInside.flex .icon{
    right: 0px;
    font-size: 17px;
}

.iconInside .icon:hover, .iconInside.flex .icon:hover{
    color: var(--primaryColor);
}

.editArea .content .editorElement .contentButtonContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    min-width: fit-content;
}

.editArea .content .editorElement .contentButtonContainer.overflow{
    overflow-x: auto;
    max-width: 100%;
    flex-wrap: nowrap;
}


.iconFlex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.iconInput{
    width: 100%;
    min-width: 100%;
    height: 35px;
    padding: 0 40px 0 10px;
    font-size: 14px;
    border-radius: 10px;
    background-color: var(--secondaryColor);
    color: var(--writeColor2);
}

.iconFlexButton{
    width: 150px;
    min-width: 150px;
    text-align: center;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 10px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.4s;
}

.iconFlexButton:hover{
    background-color: var(--secondaryHoverColor);
}


.editArea .content .editorElement .contentButtonContainer.spaceTop{
    margin-top: 10px;
}

.editArea .content .editorElement .contentButtonContainer.paddingSides{
    padding: 0px 10px;
}

.editArea .content .editorElement .contentButtonContainer .contentButton{
    width: auto;
    min-width: fit-content;
    font-weight: 600;
    height: 35px;
    line-height: 35px;
    font-size: 15px;

    padding: 0 25px;
    margin: 10px 20px 10px 0px;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement .contentButtonContainer .contentButton.memberOverview{
    color: var(--writeColor2);
    cursor: auto;
}


.editArea .content .editorElement .contentButtonContainer.jobTime{
    justify-content: space-between;
}

.editArea .content .editorElement .contentButtonContainer.jobTime .contentButton{
    margin: 0;
    height: 40px;
    line-height: 40px;
}

.editArea .content .editorElement .contentButtonContainer.jobTime .contentButton.time{
    color: var(--writeColor2);
    padding: 0;
    background-color: transparent;
    cursor: auto;
}




.editArea .content .editorElement .contentButtonContainer .contentButtonInfo span{
    font-weight: bold;
}

.editArea .content .editorElement .contentButtonContainer .contentButton:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.noHover:hover, .editArea .content .editorElement .contentButtonContainer .contentButton.memberOverview:hover{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.disabled{
    color: var(--writeColor3);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.selected{
    color: var(--buttonWriteColor);
    background-color: var(--primaryColor);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.sameSize{
    width: 190px;
    text-align: center;
}

.editArea .content .editorElement .contentButtonContainer .contentButton.sameSize2{
    width: 240px;
    text-align: center;
}

.editArea .content .editorElement .contentButtonContainer .contentButton.feedback{
    color: var(--highlightColorYellow);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.feedback.selected{
    color: var(--buttonWriteColor);
    background-color: var(--highlightColorYellow);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.feedbackPlus{
    color: var(--highlightColorPink);
}

.editArea .content .editorElement .contentButtonContainer .contentButton.feedbackPlus.selected{
    color: var(--buttonWriteColor);
    background-color: var(--highlightColorPink);
}


.editArea .content .editorElement .contentButtonContainer .contentButton .icon{
    width: 20px;
}

.editArea .content .editorElement .contentButtonContainer .contentButton.textonly{
    background-color: transparent;
    color: var(--writeColor2);
    padding-left: 10px;
}

.editArea .content .editorElement .contentButtonContainer .contentButton.textonly:hover{
    color: var(--primaryColor);
}










/* TABLE */
.editArea .content .editorElement .tableContainer, .editArea .content .editorInitElement .tableContainer{
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    padding-right: 10px;
}

.editArea .content .editorElement .tableContainer.date{
    max-height: 40vh;
    text-align: center;
}

.editArea .content .editorElement .tableContainer.date table td{
    white-space: nowrap;
}

.editArea .content .editorElement .tableContainer.oneHeight{
    height: 60vh;
}
.editArea .content .editorElement .tableContainer.oneHeightMax{
    max-height: 85vh;
}




.editArea .content .editorElement table, .editArea .content .editorInitElement table{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

.editArea .content .editorElement table td, .editArea .content .editorElement table th, .editArea .content .editorInitElement table td, .editArea .content .editorInitElement table th{
    border: none;
    padding: 10px 10px;
}

.editArea .content .editorElement table td, .editArea .content .editorElement table th, .editArea .content .editorInitElement table td{
    border-top: solid 1px var(--buttonWriteColor);
}

.editArea .content .editorElement table.minWidth td, .editArea .content .editorElement table.minWidth th, .editArea .content .editorElement table td.minWidth, .editArea .content .editorElement table th.minWidth{
    min-width: 160px;
}

.editArea .content .editorElement table td.memberAge, .editArea .content .editorElement th.memberAge{
    min-width: 100px;
}

.editArea .content .editorElement table td.empty{
    padding: 12px 8px;
}

.editArea .content .editorElement table th, .editArea .content .editorInitElement table th{
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement table th.dateSize{
    text-align: center;
    padding: 0 0 10px 0;
}

.editArea .content .editorElement table th span.light{
    font-weight: 600;
    font-size: 14px;
}


.editArea .content .editorElement table th.dateHeader{
    color: var(--primaryColor);
    padding-bottom: 3px;
}

.editArea .content .editorElement table th.gradeHeader,.editArea .content .editorInitElement table th.gradeHeader{
    font-size: 16px;
}


.editArea .content .editorElement table th.coachesDashboard{
    max-width: 180px;
    min-width: 180px;
    text-align: center;
    padding: 0;
}

.editArea .content .editorElement table tr, .editArea .content .editorInitElement table tr{
    border-bottom: 2px solid var(--buttonWriteColor);
    border-top: 2px solid var(--buttonWriteColor);  
}

.editArea .content .editorElement table tr.alt, .editArea .content .editorInitElement table tr.alt{
    background-color: var(--secondaryColor);
    border-radius: 10px;
}

.editArea .content .editorElement table tr.alt2, .editArea .content .editorInitElement table tr.alt2{
    background-color: var(--primaryFadeColor);
    border-radius: 10px;
    border-bottom: 2px solid var(--buttonWriteColor);
    border-top: 2px solid var(--buttonWriteColor);
}



.editArea .content .editorElement table td.background, .editArea .content .editorInitElement table td.background{
    background-color: var(--backgroundColor1);
}

.editArea .content .editorElement table td.alt.background, .editArea .content .editorInitElement table td.alt.background{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement table td.alt2.background, .editArea .content .editorInitElement table td.alt2.background{
    background-color: var(--primaryFadeColor);
}

.editArea .content .editorElement table tr.alt3, .editArea .content .editorInitElement table tr.alt3{
    background-color: var(--primaryFadeColor);
    border-radius: 10px;
}

.editArea .content .editorElement table tr.alt3 td.background, .editArea .content .editorInitElement table tr.alt3 td.background{
    background-color: var(--primaryFadeColor);
}

.editArea .content .editorElement table tr.alt4, .editArea .content .editorInitElement table tr.alt4{
    background-color: var(--primaryFadeColor);
    border-radius: 10px;
}

.editArea .content .editorElement table tr.alt4 td.background, .editArea .content .editorInitElement table tr.alt4 td.background{
    background-color: var(--primaryFadeColor);
}

.editArea .content .editorElement table tr.rowHighlight, .editArea .content .editorInitElement table tr.rowHighlight{
    background-color: #b388eb50;
    border-radius: 10px;
}


.editArea .content .editorElement table tr td:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.editArea .content .editorElement table tr td:last-child {border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.editArea .content .editorElement table tr td:first-child {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.editArea .content .editorElement table tr td:last-child {border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;}

.editArea .content .editorInitElement table tr td:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.editArea .content .editorInitElement table tr td:last-child {border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.editArea .content .editorInitElement table tr td:first-child {border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
.editArea .content .editorInitElement table tr td:last-child {border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;}




.editArea .content .editorElement table th, .editArea .content .editorInitElement table th{
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: -2px;
    background-color: var(--backgroundColor1);
    padding-top: 12px;
    padding-bottom: 8px;
    text-align: left;
    font-size: 16px;
    z-index: 999990;
    cursor: pointer;
    transition: 0.4s;
}



.editArea .content .editorElement table th.coachesDashboard.second{
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
}


.editArea .content .editorElement table th.coachesDashboard.third{
    font-size: 16px;
    padding-bottom: 10px;
    padding-left: 8px;
    top: 22px;
}
    
.editArea .content .editorElement table th.coachesDashboard:hover, .editArea .content .editorElement table th.coachesDashboard.second:hover, .editArea .content .editorElement table th.coachesDashboard.third:hover{
    color: var(--writeColor2);
}

.editArea .content .editorElement table .fix, .editArea .content .editorInitElement table .fix{
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    z-index: 999991;
}

.editArea .content .editorElement table th.fix, .editArea .content .editorInitElement table th.fix{
    z-index: 999992;
}


.editArea .content .editorElement table th:hover{
    color: var(--primaryHoverColor);
}

.editArea .content .editorElement table th.noHover:hover{
    color: var(--writeColor2);
}

.editArea .content .editorElement table td.center, .editArea .content .editorElement table th.center, .editArea .content .editorInitElement table td.center, .editArea .content .editorInitElement table th.center{
    text-align: center;
}

.editArea .content .editorElement table td.flexLine{
    white-space: nowrap;
}

.editArea .content .editorElement table td.flexLine button{
    margin-left: 10px;
}

.editArea .content .editorElement table td.flexLine button:first-child{
    margin-left: 0px;
}

.editArea .content .editorElement table td.flexLine2{
    text-align: center;
}

.editArea .content .editorElement table td.flexLine2 button{
    margin-top: 10px;
}

.editArea .content .editorElement table td.flexLine2 button:first-child{
    margin-top: 0px;
}

.editArea .content .editorElement table td.center input[type="number"]{
    text-align: center;
    margin: 0;
    padding: 0;
}

.editArea .content .editorElement table td.right, .editArea .content .editorElement table th.right{
    text-align: right;
}

.editArea .content .editorElement table td, .editArea .content .editorInitElement table td{
    font-family: var(--textFontFamily);
    font-size: 15px;
}

.editArea .content .editorElement table td.birth{
    min-width: 90px;
}

.editArea .content .editorElement table td.pointer{
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorElement table td.pointer:empty:before{
    content: 'fehlt';
    color: var(--deniedColor);
}
.editArea .content .editorElement table td span:empty:before{
    content: 'fehlt';
    color: var(--deniedColor);
}

.editArea .content .editorElement table td.pointer2{
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorElement table th.flex{
    max-width: 550px;
    width: 550px;
}


.editArea .content .editorElement table td.flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 550px;
}


.editArea .content .editorElement table td.pointer:hover{
    color: var(--primaryHoverColor);
}


.editArea .content .editorElement table td input{
    font-family: var(--textFontFamily);
    background-color: transparent;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    width: 140px;
    padding-left: 0px;
    transition: 0.4s;
    border-radius: 5px;
    color: var(--writeColor2);
}

.editArea .content .editorElement table td input.center{
    text-align: center;
    padding: 0;
}

.editArea .content .editorElement table td input.settingLength{
    min-width: 240px;
}

.editArea .content .editorElement table td input.small{
    max-width: 90px;
    min-width: 90px;
}

.editArea .content .editorElement table td input.teachingID{
    max-width: 30px;
    min-width: 30px;
    text-align: right;
    padding: 0 3px 0 0;
}

.editArea .content .editorElement table td input.club{
    min-width: 250px;
}

.editArea .content .editorElement table td.teachingSampleCategory{
    min-width: 160px;
}

.editArea .content .editorElement table td.teachingSample{
    min-width: 450px;
}

.editArea .content .editorElement table td.teachingSample2{
    min-width: 750px;
}

.editArea .content .editorElement table td.teachingSampleExpectation{
    min-width: 350px;
}



.editArea .content .editorElement table td input.big{
    min-width: 200px;
    font-weight: bold;
}

.editArea .content .editorElement table td input.big2{
    min-width: 300px;
    font-weight: bold;
}

.editArea .content .editorElement table td .lightUp, .editArea .content .editorElement table td.lightUp{
    background-color: var(--primaryColor);
    transition: 0.2s;
}

.editArea .content .editorElement table td.lightUp2, .editArea .content .editorElement table td.lightUp2{
    color: var(--highlightColorYellow);
    transition: 0.2s; 
}


.editArea .content .editorElement table th.gradeSize1, .editArea .content .editorElement table td.gradeSize1, .editArea .content .editorElement table td.gradeSize1 input, .editorInitElement .content .editorElement table td.gradeSize1{
    max-width: 85px;
    min-width: 85px;
    padding: 0;
    text-align: center;
}

.editArea .content .editorElement table th.gradeSizeResult, .editArea .content .editorElement table td.gradeSizeResult, .editArea .content .editorElement table td.gradeSizeResult input{
    color: var(--writeColor3);
}

.editArea .content .editorElement table th.gradeSize0, .editArea .content .editorElement table td.gradeSize0, .editArea .content .editorElement table td.gradeSize0 input{
    max-width: 85px;
    min-width: 85px;
    padding: 0;
    text-align: center;
}

.editArea .content .editorElement table td.gradeSize0 input{
    height: 20px;
}

.editArea .content .editorElement table td.gradeSize0 span{
    color: var(--writeColor3);
    margin: 0;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorElement table td.gradeSize0 span:hover{
    color: var(--primaryHoverColor);
}


.editArea .content .editorElement table th.gradeSize2, .editArea .content .editorElement table td.gradeSize2, .editArea .content .editorElement table td.gradeSize2 input{
    max-width: auto;
    min-width: 100px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.editArea .content .editorElement table td.gradeSize2, .editArea .content .editorElement table td.gradeSize2 input{
    color: var(--writeColor3);
}

.editArea .content .editorElement table th.notEditable{
    color: var(--writeColor3);
}

.editArea .content .editorElement table th.gradeSize4, .editArea .content .editorElement table td.gradeSize4, .editArea .content .editorElement table td.gradeSize4 input{
    max-width: auto;
    min-width: 180px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.editArea .content .editorElement table th.gradeSize3, .editArea .content .editorElement table td.gradeSize33{
    width: 170px;
    min-width: 170px;
}

.editArea .content .editorElement table th.gradeSize35, .editArea .content .editorElement table td.gradeSize35{
    width: 200px;
    min-width: 200px;
}

.editArea .content .editorElement table th.gradeSize44, .editArea .content .editorElement table td.gradeSize44{
    width: 250px;
    min-width: 250px;
}

.editArea .content .editorElement table th.gradeSize45, .editArea .content .editorElement table td.gradeSize45{
    width: 720px;
    min-width: 720px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
}

.editArea .content .editorElement table th.gradeSize5, .editArea .content .editorElement table td.gradeSize5, .editArea .content .editorElement table td.gradeSize5 input{
    max-width: auto;
    min-width: 220px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.editArea .content .editorInitElement table th.gradeSize5, .editArea .content .editorInitElement table td.gradeSize5{
    max-width: auto;
    min-width: 130px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.editArea .content .editorInitElement table th.surveyText, .editArea .content .editorInitElement table td.surveyText{
    max-width: auto;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}


.editArea .content .editorElement table th.gradeSize5.center, .editArea .content .editorInitElement table {
    text-align: center;
}

.editArea .content .editorElement table th.gradeSize6, .editArea .content .editorElement table td.gradeSize6, .editArea .content .editorElement table td.gradeSize6 input{
    max-width: auto;
    min-width: 300px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.editArea .content .editorElement table th.gradeSize7, .editArea .content .editorElement table td.gradeSize7, .editArea .content .editorElement table td.gradeSize7 input{
    max-width: auto;
    min-width: 350px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.editArea .content .editorElement table th.memberSize2, .editArea .content .editorElement table td.memberSize2, .editArea .content .editorElement table td.memberSize2 input{
    max-width: auto;
    min-width: 120px;
    text-align: center;
}

.editArea .content .editorElement table th.memberSize2.right, .editArea .content .editorElement table td.memberSize2.right, .editArea .content .editorElement table td.memberSize2.right input{
    text-align: right;
}
.editArea .content .editorElement table th.memberSize22, .editArea .content .editorElement table td.memberSize22, .editArea .content .editorElement table td.memberSize22 input{
    max-width: 80px;
    min-width: 80px;
    text-align: left;
}

.editArea .content .editorElement table th.memberSize3, .editArea .content .editorElement table td.memberSize3, .editArea .content .editorElement table td.memberSize3 input{
    max-width: auto;
    min-width: 160px;
    text-align: left;
}

.editArea .content .editorElement table th.memberSize4, .editArea .content .editorElement table td.memberSize4, .editArea .content .editorElement table td.memberSize4 input{
    max-width: auto;
    min-width: 180px;
    text-align: left;
}

.editArea .content .editorElement table th.memberSize5, .editArea .content .editorElement table td.memberSize5, .editArea .content .editorElement table td.memberSize5 input{
    max-width: auto;
    min-width: 230px;
    text-align: left;
}

.editArea .content .editorElement table th.fixSize1{
    min-width: 400px;
    max-width: 400px;
    width: 400px;
}

.editArea .content .editorElement table th.fixSize2{
    min-width: 85px;
    max-width: 85px;
    width: 85px;
}

.editArea .content .editorElement table th.fixSize3{
    min-width: 150px;
    max-width: 150px;
    width: 150px;
}


.editArea .content .editorElement table td span.dateSub{
    font-size: 13px;
}


.editArea .content .editorElement table td input:hover{
    background-color: var(--secondaryHoverColor);
    padding: 0 5px;
}

.editArea .content .editorElement table td input.noHover:hover, .editArea .content .editorElement table td input.noHover:focus{
    background-color: transparent;
    cursor: auto;
}

.editArea .content .editorElement table td input:focus{
    background-color: var(--secondaryHoverColor);
    padding: 0 5px;
    border: solid 2px var(--primaryColor);
}
.editArea .content .editorElement table td input.center:hover, .editArea .content .editorElement table td input.center:focus{
    padding: 0;
}

/* .editArea .content .editorElement table td input:placeholder-shown{
    background-color: var(--highlightColorYellow);
    background-color: #8093f131;
    padding-left: 10px;
}

.editArea .content .editorElement table td.gradeSize1 input:placeholder-shown, .editArea .content .editorElement table td.gradeSize0 input:placeholder-shown{
    padding: 0;
    margin: 0;
    border-radius: 5px;   
}

.editArea .content .editorElement table td input.brightPlaceholder:placeholder-shown{
    background-color: var(--secondaryHoverColor);
    caret-color: var(--primaryColor);
    padding-left: 10px;
} */

.editArea .content .editorElement table td.gradeSize1 input.brightPlaceholder:placeholder-shown, .editArea .content .editorElement table td.gradeSize0 input.brightPlaceholder:placeholder-shown{
    padding: 0;
    margin: 0;
    border-radius: 5px;   
}


.editArea .content .editorElement table td input.none, .editArea .content .editorElement table td.none{
    color: var(--writeColor3);
}

.editArea .content .editorElement table td.none .custom-select div.select-selected{
    background-color: #6b69691f;
}


.editArea .content .editorElement table td input.error, .editArea .content .editorElement table td.error{
    color: var(--deniedColor);
}

.editArea .content .editorElement table td.error .custom-select div.select-selected{
    background-color: #f75e591f;
}

.editArea .content .editorElement table td input.done, .editArea .content .editorElement table td.done{
    color: var(--highlightColorBlue);
}

.editArea .content .editorElement table td.done .custom-select div.select-selected{
    background-color: #8093f131;
}

.editArea .content .editorElement table td input.done2, .editArea .content .editorElement table td.done2{
    color: var(--highlightColorYellow);
}

.editArea .content .editorElement table td.done2 .custom-select div.select-selected{
    background-color: #b388eb31;
}

.editArea .content .editorElement table td input.done3, .editArea .content .editorElement table td.done3{
    color: var(--highlightColorYellow);
}

.editArea .content .editorElement table td input[type="time"]{
    width: auto;
    padding: 0 5px;
    border-radius: 5px;
}

.editArea .content .editorElement table td input[type="time"]:focus{
    color: var(--writeColor2);
}

.editArea .content .editorElement table td.gradeStartingNumber input[type="number"]{
    width: 50px;
    text-align: center;
    padding: 0;
    border-radius: 5px;
}
.editArea .content .editorElement table td.gradeStartingNumber input[type="number"]:focus{
    padding: 0;
}

.editArea .content .editorElement table tr.teachingSelection{
    cursor: pointer;   
}

.editArea .content .editorElement table th.teachingCheckbox .icon{
    width: 30px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    margin-top: 3px;
}

.editArea .content .editorElement table td.teachingCheckbox .icon{
    width: 40px;
    min-width: 40px;
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorElement table td.teachingCheckbox .icon.selected, .editArea .content .editorElement table td.teachingCheckbox .icon.selected:hover{
    color: var(--primaryColor);
}

.editArea .content .editorElement table tr.teachingSelection:hover .icon{
    color: var(--primaryHoverColor);
}
















.editArea .content .editorElement table td.check, .editArea .content .editorElement table td.check input{
    color: var(--deniedColor);
}

.editArea .content .editorElement table td button, .editArea .content .editorElement table th button, .editArea .content .editorInitElement table th button, .editArea .content .editorInitElement table td button{
    font-weight: 500;
    text-align: center;
    white-space: nowrap;

    border: none;
    padding: 0 25px;
    font-size: 15px;
    height: 31px;
    line-height: 27px;
    vertical-align: middle;

    /* font-family: var(--textFontFamily); */

    border-radius: 15px;
    color: var(--writeColor2);
    background-color: transparent;
    cursor: pointer;
    z-index: 5;

    border: 2px solid transparent;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: 0.4s;
}

.editArea .content .editorElement table td button:hover, .editArea .content .editorElement table th button:hover, .editArea .content .editorInitElement table td button:hover, .editArea .content .editorInitElement table th button:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement table td button.edit, .editArea .content .editorElement table th button.edit{
    color: var(--primaryColor);
    margin-right: 10px;
}


.editArea .content .editorElement table th button.edit{
    visibility: hidden;
    height: 10px;
}

.editArea .content .editorElement table td button.edit:hover{
    background-color: var(--secondaryHoverColor);
    color: var(--primaryColor);
}

.editArea .content .editorElement table td button.edit.error, .editArea .content .editorElement table td button.reject{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement table td button.edit.error:hover, .editArea .content .editorElement table td button.reject:hover{
    background-color: var(--deniedColor);
}

.editArea .content .editorElement table td button.noHover:hover{
    background-color: transparent;
    cursor: auto;
}

.editArea .content .editorElement table td button.disabled, .editArea .content .editorInitElement table td button.disabled{
    color: var(--writeColor3);
}




.editArea .content .editorElement table td button.edit2, .editArea .content .editorElement table th button.edit2{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    margin-right: 10px;
}

.editArea .content .editorInitElement table td button.edit2, .editArea .content .editorInitElement table th button.edit2{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor); 
}

.editArea .content .editorElement table th button.edit2{
    visibility: hidden;
}

.editArea .content .editorElement table td button.edit2:hover, .editArea .content .editorInitElement table td button.edit2:hover{
    background-color: var(--primaryHoverColor);
    color: var(--buttonWriteColor);
}


.editArea .content .editorElement table td.small, .editArea .content .editorElement table th.small{
    width: 50px;
    padding: 0 5px;
}

.editArea .content .editorElement table td button.small, .editArea .content .editorElement table th button.small{
    width: 50px;
    padding: 0 5px;
}

.editArea .content .editorElement table td.editButtons, .editArea .content .editorElement table th.editButtons{
    min-width: fit-content;
    white-space: nowrap;
    padding: 0;
    padding-right: 25px;
    text-align: left;
}

.editArea .content .editorElement table td.editButtons{
    padding-left: 5px;
}

.editArea .content .editorElement table th.editButtons.max{
    max-width: 100px;
    width: 100px;
}

.editArea .content .editorElement table th.editButtons{
    text-align: center;
}

.editArea .content .editorElement table td.editButtons button, .editArea .content .editorElement table th.editButtons button{
    width: auto;
    padding: 0 10px;
    border-radius: 10px;
    margin: 0;
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement table td.editButtons button:hover, .editArea .content .editorElement table th.editButtons button:hover{
    background-color: #abaebd90;
}

.editArea .content .editorElement table td.editButtons button.error, .editArea .content .editorElement table th.editButtons button.error{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement table td.editButtons button.error:hover, .editArea .content .editorElement table th.editButtons button.error:hover{
    background-color: var(--deniedColorHover);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement table td.editButtons button.newMarker, .editArea .content .editorElement table th.editButtons button.newMarker{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement table td.editButtons button.newMarker.not, .editArea .content .editorElement table th.editButtons button.newMarker.not{
    background-color: var(--secondaryHoverColor);
    color: var(--writeColor2);
}

.editArea .content .editorElement table td.editButtons button.addMarker{
    background-color: var(--secondaryHoverColor);
    color: var(--writeColor2);
}

.editArea .content .editorElement table td.editButtons button.addMarker:hover{
    background-color: #abaebd90;
}

.editArea .content .editorElement table td.editButtons button.addMarker.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement table td.editButtons button.addMarker.selected:hover{
    background-color: var(--primaryHoverColor);
}

.editArea .content .editorElement table td.editButtons button.addMarker.alt{
    background-color: #abaebd60;
}


.editArea .content .editorElement table td.editButtons button i{
    width: 20px;
} 

.editArea .content .editorElement table td.editButtons button.disabled{
    color: var(--writeColor3);
} 

.editArea .content .editorElement table td.editButtons button.disabled:hover{
    background-color: var(--secondaryHoverColor);
}



.editArea .content .editorElement table td button.selected, .editArea .content .editorElement table th button.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}


.editArea .content .editorElement table td button.selectedDenied, .editArea .content .editorElement table th button.selectedDenied{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}


.editArea .content .editorElement table td button.light0, .editArea .content .editorInitElement .roleClubContainer .roleTextBox button.light0, .editArea .content .editorElement table td button.light0.noHover:hover{
    background-color: #abaebd60;
    color: var(--writeColor2);
}
.editArea .content .editorElement table td button.light0:hover{
    background-color: #abaebd90;
}

.editArea .content .editorElement table td button.light0xx, .editArea .content .editorInitElement .roleClubContainer .roleTextBox button.light0xx, .editArea .content .editorElement table td button.light0xx.noHover:hover{
    background-color: #abaebd60;
    color: var(--writeColor3);
}
.editArea .content .editorElement table td button.light0xx:hover{
    background-color: #abaebd60;
}

.editArea .content .editorElement table td button.light1, .editArea .content .editorInitElement .roleClubContainer .roleTextBox button.light1{
    background-color: #8093f160;
    color: var(--writeColor2);
}
.editArea .content .editorElement table td button.light1:hover{
    background-color: #8093f190;
}
.editArea .content .editorElement table td button.light2, .editArea .content .editorInitElement .roleClubContainer .roleTextBox button.light2{
    background-color: #b388eb60;
    color: var(--writeColor2);
}
.editArea .content .editorElement table td button.light2:hover{
    background-color: #b388eb90;
}
.editArea .content .editorElement table td button.light3, .editArea .content .editorInitElement .roleClubContainer .roleTextBox button.light3{
    background-color: #72ddf760;
    color: var(--writeColor2);
}
.editArea .content .editorElement table td button.light3:hover{
    background-color: #72ddf790;
}




.editArea .content .editorElement table td button.lightDenied{
    background-color: #f7aef860;
    color: var(--writeColor2);
}
.editArea .content .editorElement table td button.lightDenied:hover{
    background-color: #f7aef890;
}

.editArea .content .editorElement table td button.size6{
    width: 170px;
    padding: 0;
}



.editArea .content .editorElement table td.moduleSize, .editArea .content .editorElement table th.moduleSize{
    width: 15px;
    min-width: 15px;
    max-width: 15px;
    padding: 0;
}

.drag-over {
    background-color: var(--secondaryHoverColor) !important;
    color: var(--buttonWriteColor);
}



.editArea .content .editorElement table .moduleMarker{
    position: relative;
    width: 15px;
    min-width: 15px;
    height: 30px;
    border-radius: 5px;
}

.editArea .content .editorElement table .moduleMarker.feedback{
    background-color: var(--highlightColorYellow);
}

.editArea .content .editorElement table .moduleMarker.feedbackPlus{
    background-color: var(--highlightColorPink);
}

.editArea .content .editorElement table .moduleMarker.none{
    background-color: var(--secondaryHoverColor);
}


.editArea .content .editorElement .regOptionContainer{
    width: 100%;
    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: auto;
}

.editArea .content .editorElement .regOptionContainer table input{
    width: 300px;
}

.editArea .content .editorElement .regOptionContainer table td{
    white-space: nowrap;
}

.editArea .content .editorElement .regOptionContainer table td button{
    font-weight: 400;
    font-size: 15px;
}

.editArea .content .editorElement table td.longInput, .editArea .content .editorElement table td.longInput input{
    width: 100%;
    text-align: left;
}


.editArea .content .editorElement table td.settingsAchievements, .editArea .content .editorElement table td.settingsAchievements input{
    width: auto;
    text-align: left;
}

.editArea .content .editorElement table td.settingsAchievements.small, .editArea .content .editorElement table td.settingsAchievements.small input{
    width: 280px;
    text-align: left;
}

.editArea .content .editorElement table td.settingsGradeScheme, .editArea .content .editorElement table td.settingsGradeScheme input{
    width: 300px;
    text-align: left;
}

.editArea .content .editorElement table td.settingsGradePercent{
    width: 300px;
    min-width: 100px;
    margin-right: 140px;
}
.editArea .content .editorElement table td.settingsGradePercent input{
    width: 50px;
    padding: 0 5px 0 0;
    text-align: right;
}





/* Custom Select */
table tr .custom-select{
    position: relative;
    width: 100%;
    min-width: 150px;
}

table tr .custom-select.w200{
    min-width: 200px;
}


table tr .custom-select select {
    display: none; /*hide original SELECT element: */
}
  
table tr .custom-select .select-selected {
    height: 35px;
    line-height: 32px;
    padding-right: 10px;
    border: none;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--secondaryHoverColor);
    padding-left: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table tr td.center .custom-select .select-selected {
    padding-left: 0px;
}

table tr td.center .custom-select .select-selected {
    text-align: center;
}

  
  /* Style the arrow inside the select element: */
table tr .select-selected:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 10px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: var(--writeColor2) transparent transparent transparent;
    transition: 0.3s;
}
  
  /* Point the arrow upwards when the select box is open (active): */
table tr .select-selected.select-arrow-active:after {
    border-color: transparent transparent var(--writeColor2) transparent;
    top: 7px;
}
  
/* style the items (options), including the selected item: */
table tr .select-selected {
    border: none;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    background-color: var(--backgroundColor1);
    border-radius: 0px;
}
table tr .select-items div{
    color: var(--writeColor2);
    border-left: 1px solid var(--secondaryHoverColor);
    border-right: 1px solid var(--secondaryHoverColor);
    border-bottom: 1px solid var(--secondaryHoverColor);

    background-color: var(--backgroundColor1);
    height: auto;
    min-height: 30px;
    line-height: 20px;
    padding: 5px 10px 5px 10px;
    border-radius: 0px;
    transition: 0.4s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table tr .select-items div:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


table tr.alt .select-selected{
    background-color: var(--secondaryColor);
}
table tr.alt .select-items div{
    background-color: var(--secondaryColor);
    border-left: 1px solid var(--secondaryHoverColor);
    border-right: 1px solid var(--secondaryHoverColor);
    border-bottom: 1px solid var(--secondaryHoverColor);
    padding-left: 10px;
}

table tr td.center .select-items div, table tr.alt td.center .select-items div{
    padding-left: 0px;
}

table tr.alt .select-items div:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

  
/* Style items (options): */
table tr .select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: left;
    width: auto;
}

table tr td.center .select-items {
    text-align: center;
}
table tr td.center .select-items div{
    padding-left: 0px;
}


  /* Hide the items when the select box is closed: */
table tr .select-hide {
    display: none;
  }

table tr .select-items div:hover, table tr .select-items div:hover .same-as-selected {
    background-color: var(--secondaryColor);
}

table tr.alt .select-items div:hover, table tr.alt .select-items div:hover .same-as-selected {
    background-color: var(--backgroundColor1);
}




/* Custom Select */
table tr .custom-selectTraining{
    position: relative;
    width: 100%;
    min-width: 180px;
}

table tr .custom-selectTraining select {
    display: none; /*hide original SELECT element: */
}
  
table tr .custom-selectTraining .select-selectedTraining {
    height: 35px;
    line-height: 32px;
    padding-right: 10px;
    border: none;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--secondaryHoverColor);
    padding-left: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table tr td.center .custom-selectTraining .select-selectedTraining {
    padding-left: 0px;
}

table tr td.center .custom-selectTraining .select-selectedTraining {
    text-align: center;
}

  
  /* Style the arrow inside the select element: */
table tr .select-selectedTraining:after {
    position: absolute;
    content: "";
    top: 15px;
    right: 10px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: var(--writeColor2) transparent transparent transparent;
    transition: 0.3s;
}
  
  /* Point the arrow upwards when the select box is open (active): */
table tr .select-selectedTraining.select-arrow-activeTraining:after {
    border-color: transparent transparent var(--writeColor2) transparent;
    top: 7px;
}
  
/* style the items (options), including the selected item: */
table tr .select-selectedTraining {
    border: none;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    background-color: var(--backgroundColor1);
    border-radius: 0px;
}
table tr .select-itemsTraining div{
    color: var(--writeColor2);
    border-left: 1px solid var(--secondaryHoverColor);
    border-right: 1px solid var(--secondaryHoverColor);
    border-bottom: 1px solid var(--secondaryHoverColor);

    background-color: var(--backgroundColor1);
    height: 30px;
    line-height: 20px;
    padding: 5px 10px 5px 10px;
    border-radius: 0px;
    transition: 0.4s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
table tr .select-itemsTraining div:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

table tr.alt .select-selectedTraining{
    background-color: var(--secondaryColor);
}
table tr.alt .select-itemsTraining div{
    background-color: var(--secondaryColor);
    border-left: 1px solid var(--secondaryHoverColor);
    border-right: 1px solid var(--secondaryHoverColor);
    border-bottom: 1px solid var(--secondaryHoverColor);
    padding-left: 10px;
}

table tr td.center .select-itemsTraining div, table tr.alt td.center .select-itemsTraining div{
    padding-left: 0px;
}

table tr.alt .select-itemsTraining div:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

  
  /* Style items (options): */
table tr .select-itemsTraining {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: left;
    width: auto;
}

table tr td.center .select-itemsTraining {
    text-align: center;
}
table tr td.center .select-itemsTraining div{
    padding-left: 0px;
}

/* Hide the items when the select box is closed: */
table tr .select-hideTraining {
    display: none;
  }

table tr .select-itemsTraining div:hover, table tr .select-itemsTraining div:hover .same-as-selectedTraining {
    background-color: var(--secondaryColor);
}

table tr.alt .select-itemsTraining div:hover, table tr.alt .select-itemsTraining div:hover .same-as-selectedTraining {
    background-color: var(--backgroundColor1);
}


span.adminDatemMarker{
    background-color: #f7aef860;
    padding: 0 17px;
    height: 31px;
    line-height: 31px;
    border-radius: 15px;
}




















/* Media Container elements */
.editArea .content .editorElement .mediaTableContainerContent{
    max-height: 60vh;
    overflow-x: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: 15px;
}

.editArea .content .editorElement .mediaTableContainerContent.oneLength{
    height: 60vh;
}


.editArea .content .editorElement .mediaContainer{
    position: relative;
    width: 100%;
    min-width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 10px;
    border-left: 2px solid transparent;
}

.editArea .content .editorElement .mediaContainer.start{
    justify-content: start;
    gap: 20px;
}

.editArea .content .editorElement .mediaContainer.gradePadding{
    padding: 0px 10px 10px 10px;
    justify-content: start;
}

.editArea .content .editorElement .mediaTableContainerContent.oneLength .mediaContainer{
    justify-content: start;
    gap: 10px;
}

.editArea .content .editorElement .mediaContainer.short{
    width: 80%;
}

.editArea .content .editorElement .mediaContainer.fullWidth{
    padding: 7px 0px;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
}

.editArea .content .editorElement .mediaContainer.club{
    padding: 0;
    justify-content: start;
    overflow-x: auto;
}

.editArea .content .editorElement .mediaContainer.club button{
    margin-right: 35px;
}

.editArea .content .editorElement .mediaContainer.alt{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .mediaContainer.dateWidth{
    min-width: 640px;
}

.editArea .content .editorElement .mediaContainer.headerSelection{
    flex-wrap: wrap;
    justify-content: start;
}   

.editArea .content .editorElement .mediaContainer.headerSelection button{
    margin: 0px 20px 15px 0px;
}

.editArea .content .editorElement .mediaContainer.courseSelection{
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-bottom: 20px;
}


.editArea .content .editorElement .mediaContainer.courseSelection button{
    margin: 0 15px;
}

.editArea .content .editorElement .mediaContainer.spaceBottom{
    margin-bottom: 15px;
}

.editArea .content .editorElement .mediaContainer.spaceTop{
    margin-top: 15px;
}

.editArea .content .editorElement .mediaContainer p{
    padding: 0;
    margin: 0;
    height: 31px;
    font-family: var(--textFontFamily);
    font-size: 15px;
    line-height: 32px;
    font-weight: 500;
    width: 30%;
    color: var(--writeColor2);
    border-radius: 10px;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.editArea .content .editorElement .mediaContainer p.noCursor{
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.required:empty{
    background-color: var(--deniedColor);
    transition: 0.4s;
}

.required:empty:hover{
    background-color: var(--deniedColorHover);
}


.editArea .content .editorElement .mediaContainer input[type="text"].inputText, .groupHeaderContainer input[type="text"].inputText{
    position: relative;
    background-color: transparent;
    padding: 0 0 0 10px;
    padding: 0;
    margin: 0;
    height: 31px;
    font-size: 15px;
    line-height: 32px;
    font-weight: 600;
    width: auto;
    max-width: 420px;
    min-width: 420px;
    color: var(--writeColor2);
    border-radius: 10px;
    transition: 0.4s;
}

.editArea .content .editorElement .mediaContainer input[type="text"].inputText.w210{
    width: 210px;
    min-width: 210px;
}


.editArea .content .editorElement .mediaContainer input[type="text"].inputText.w300{
    width: 300px;
    min-width: 300px;
}

.editArea .content .editorElement .mediaContainer input[type="text"].inputText.internalHeader{
    font-weight: bold;
    font-size: 17px;
    color: var(--primaryColor);
    cursor: auto;
}

.editArea .content .editorElement .mediaContainer input[type="text"].inputText:focus, .groupHeaderContainer input[type="text"].inputText:focus{
    color: var(--primaryColor);
    background-color: var(--secondaryColor);
    padding: 0 10px;
}

/* .editArea .content .editorElement .mediaContainer input[type="text"].inputText:placeholder-shown, .groupHeaderContainer input[type="text"].inputText:placeholder-shown{
    background-color: var(--highlightColorYellow);
    caret-color: var(--buttonWriteColor);
    padding-left: 10px;
} */

.groupHeaderContainer input[type="text"].inputText.header{
    font-family: "Poppins", sans-serif;
    width: auto;
    font-size: 18px;
    color: var(--primaryColor);
    height: 35px;
    line-height: 35px;
    margin: 3px 0px 0px 0px;
}

.groupHeaderContainer input[type="text"].inputText.header.denied{
    color: var(--writeColor2);
}












.editArea .content .editorElement .mediaContainer p::first-line{
    line-height: 32px;  
}

.editArea .content .editorElement .mediaContainer p.date{
    font-size: 16px;
    height: 35px;
    line-height: 35px;
}

.editArea .content .editorElement .mediaContainer p.smallWidth{
    width: 110px;
    min-width: 110px;
}



.editArea .content .editorElement .mediaContainer p.verySmallWidth{
    width: 70px;
    min-width: 70px;
    text-align: right;
}

.editArea .content .editorElement .mediaContainer p.appInfoWidth{
    width: 75px;
    min-width: 75px;
    text-align: center;
}






.editArea .content .editorElement .mediaContainer p.normalWidth{
    width: 140px;
    min-width: 140px;
}

.editArea .content .editorElement .mediaContainer p.largeWidth{
    width: 180px;
    min-width: 180px;
}

.editArea .content .editorElement .mediaContainer p.gradeWidth{
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.editArea .content .editorElement .mediaContainer p.gradeOverallHeader{
    font-weight: bold;
    color: var(--writeColor3);
}

.editArea .content .editorElement .mediaContainer p.gradeOverall{
    color: var(--writeColor3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.editArea .content .editorElement .mediaContainer p.highlightHeader{
    color: var(--primaryColor);
}

.editArea .content .editorElement .mediaContainer span.oneWidth{
    width: 110px;
}


.editArea .content .editorElement .mediaContainer p.bigWidth{
    width: 210px;
    min-width: 210px;
}

.editArea .content .editorElement .mediaContainer p.bigWidth2{
    width: 220px;
}

.editArea .content .editorElement .mediaContainer p.bigWidth3{
    width: 300px;
}

.editArea .content .editorElement .mediaContainer p.bigWidth3.inner{
    width: 280px;
}

.editArea .content .editorElement .mediaContainer p.headerSmall{
    font-size: 17px;
    font-weight: 900;
    text-align: center;
    color: var(--highlightColorYellow);
}

.editArea .content .editorElement .mediaContainer .bigWithFlex{
    position: relative;
    width: 210px;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.editArea .content .editorElement .mediaContainer .bigWithFlexInner{
    position: relative;
    width: 210px;
    min-width: 210px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editArea .content .editorElement .mediaContainer .bigWithFlexInner p.dash{
    width: 100px;
    text-align: center;
    background-color: var(--secondaryColor);
    margin: 5px 0;
    height: 27px;
    line-height: 27px;
}

.editArea .content .editorElement .mediaContainer .bigWithFlexInner p.dash.noBack{
    background-color: transparent;
    cursor: auto;
}



.editArea .content .editorElement .mediaContainer .bigWithFlex p{
    height: 24px;
    line-height: 24px;
}





.editArea .content .editorElement .mediaContainer p.bigWidth3.inner2{
    width: 260px;
}


.editArea .content .editorElement .mediaContainer p.lineBreak{
    height: auto;
    padding: 5px 0;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.editArea .content .editorElement .mediaContainer .flexBoxInner{
    min-width: 500px;
    max-width: 500px;
}

.editArea .content .editorElement .mediaContainer p.ultraBigWidth{
    width: 450px;
    min-width: 450px;
}

.editArea .content .editorElement .mediaContainer p.ultraFlexBigWidth{
    width: 650px;
}



.editArea .content .editorElement p.settingsDescription{
    margin: 0 0 10px 0;
    padding: 0;
    word-break: normal;
}

.editArea .content .editorElement p.settingsDescription.details{
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
}

.editArea .content .editorElement p.settingsDescription.details:hover{
    color: var(--primaryColor);
}


.editArea .content .editorElement .settingsDescriptionButtonBox{
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.editArea .content .editorElement button.settingsDescription{
    font-weight: 500;
    text-align: center;
    white-space: nowrap;

    border: none;
    margin-top: 10px;
    padding: 0 45px;
    font-size: 16px;
    height: 35px;
    line-height: 31px;
    border-radius: 15px;
    color: var(--writeColor2);
    background-color: var(--secondaryColor);
    cursor: pointer;
    z-index: 5;

    margin-right: 15px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;    
}

.editArea .content .editorElement button.settingsDescription.smallerRadius{
    border-radius: 10px;
    padding: 0;
    width: 100%;
    margin-top: 22px;
}


.editArea .content .editorElement button.settingsDescription:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement button.settingsDescription.selected, .editArea .content .editorElement button.settingsDescription.selected:hover{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement button.settingsDescription.selectedDenied, .editArea .content .editorElement button.settingsDescription.selectedDenied:hover{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement .iconSpace{
    width: auto;
    margin-left: 15px;
}

.editArea .content .editorElement .iconSpace:hover{
    color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .mediaContainer.clearanceSelection{
    border-left: 2px solid var(--primaryColor);
    border-radius: 0;
    min-width: fit-content;
}


/* Association */
.editArea .content .editorElement .mediaContainer.clearanceSelectionAssociation{
    border-radius: 0;
    max-width: 100%;
    border-left: 2px solid var(--primaryColor);
}

.editArea .content .editorElement .mediaContainer.clearanceSelectionAssociation.clearanceHeader{
    background-color: var(--backgroundColor1);
}

.editArea .content .editorElement .mediaContainer.clearanceSelectionAssociation.inner{
    padding-left: 30px;
}

.editArea .content .editorElement .mediaContainer.clearanceSelectionAssociation.inner2{
    padding-left: 50px;
}

.editArea .content .editorElement .mediaContainer p.enlarged{
    font-weight: 700;
    color: var(--primaryColor);
}






.editArea .content .editorElement .mediaContainer div.clearance{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 140px;
    min-width: 140px;
}

.editArea .content .editorElement .mediaContainer div.clearance button{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    width: 100%;
    text-align: center;
    padding: 0;
}

.editArea .content .editorElement .mediaContainer .buttonCombineContainer{
    font-weight: 500;
    text-align: center;
    white-space: nowrap;

    border: none;
    width: 500px;
    height: 32px;
    line-height: 32px;

    font-size: 19px;
    font-weight: 700;
    padding: 0;
    color: var(--primaryColor);


    background-color: transparent;
    cursor: pointer;
    z-index: 5;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.4s;
}

.editArea .content .editorElement .mediaContainer .buttonCombineContainer.base{
    color: var(--writeColor2);
}

.editArea .content .editorElement .mediaContainer p.pointer{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement .mediaContainer p.header{
    font-size: 19px;
    font-weight: 700;
    padding: 0;
    color: var(--primaryColor);
}

.editArea .content .editorElement .mediaContainer p.header.base{
    color: var(--writeColor2);
}

.editArea .content .editorElement .mediaContainer p.header.padding{
    padding: 0 0 0 10px;
}


.editArea .content .editorElement .mediaContainer p.highlight{
    color: var(--primaryColor);
}

.editArea .content .editorElement .mediaContainer p.check{
    color: var(--deniedColor);
}


.editArea .content .editorElement .mediaContainer p.clearanceOpen{
    font-weight: bold;
}

.editArea .content .editorElement .mediaContainer .buttonSelectPrimary:hover{
    background-color: var(--primaryHoverColor);
}

.editArea .content .editorElement .mediaContainer p.center{
    text-align: center;
}

.editArea .content .editorElement .mediaContainer p.smallFont{
    font-size: 14px;
}

.editArea .content .editorElement .mediaContainer p.smallSpaceBottom{
    margin-bottom: 10px;
}



.editArea .content .editorElement .mediaContainer.settings{
    padding: 10px 0px;
    border-left: 0;
    border-right: 0;
}

.editArea .content .editorElement .mediaContainer.settings p{
    width: 100%;
}


.editArea .content .editorElement .mediaContainer.settings div{
    position: relative;
    width: 47%;
    min-width: 47%;
}

.editArea .content .editorElement .mediaContainer.settings input{
    position: relative;
    width: 100%;
    min-width: 100%;
    border-radius: 10px;
    margin-top: 5px;
    border: 2px solid transparent;
    transition: 0.3s;
}

.editArea .content .editorElement .mediaContainer.settings input:focus{
    border: 2px solid var(--primaryColor);
}

.basicSettingInfo{
    position: absolute;
    top: -5px;
    font-size: 15px;
    line-height: 15px;
    color: var(--deniedColor);
}


.editArea .content .editorElement .mediaContainer.settings div.fullWidth{
    position: relative;
    width: 100%;
    min-width: 100%;
}
.editArea .content .editorElement .mediaContainer.settings div.educationSelect{
    position: relative; 
    display: flex; 
    flex-wrap: wrap;
    flex-direction: row;
    overflow-x: auto;
    width: 100%; 
    padding: 10px 0 10px 0;
}

.editArea .content .editorElement .mediaContainer.flexWrap{
    position: relative; 
    display: flex; 
    flex-wrap: wrap;
    flex-direction: row;
    overflow-x: auto;
    width: 100%; 
}

.editArea .content .editorElement .mediaContainer.flexWrap button{
    margin-bottom: 15px;
    margin-right: 12px;
}

.editArea .content .editorElement .mediaContainer.settings div.educationSelect.doneCourseCoaches{
    padding: 0px;
}

.editArea .content .editorElement .mediaContainer.settings div.educationSelect button{
    margin-right: 20px;
    margin-bottom: 15px;
}



.editArea .content .editorElement .mediaContainer.settings input[type="number"], .editArea .content .editorElement .mediaContainer.settings input[type="tel"]{
    width: 100%; 
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    padding: 5px 15px;
    margin: 5px 0 0 0;
    font-weight: 400;
    text-align: left;
}







.editArea .content .editorElement .mediaContainer p.small2Width{
    width: 95px;
    min-width: 95px;
    padding-left: 15px;
}





/* Media Container Button options */
.editArea .content .editorElement .mediaContainer button{
    font-weight: 500;
    text-align: center;
    white-space: nowrap;

    border: none;
    padding: 0 25px;
    font-size: 16px;
    height: 31px;
    line-height: 31px;
    border-radius: 15px;
    color: var(--writeColor2);
    background-color: transparent;
    cursor: pointer;
    z-index: 5;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: 0.4s;
}

.editArea .content .editorElement .mediaContainer button.small{
    font-size: 14px;
    line-height: 25px;
}

.editArea .content .editorElement .mediaContainer button.selected2{
    background-color: var(--highlightColorYellow);
    color: var(--buttonWriteColor);
}
.editArea .content .editorElement .mediaContainer button.selected2:hover{
    background-color: var(--highlightColorYellow);
}

.editArea .content .editorElement .mediaContainer button.edit{
    color: var(--primaryColor);
    margin-right: 10px;
}

.editArea .content .editorElement .mediaContainer button.edit:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .mediaContainer button.edit.error, .editArea .content .editorElement .mediaContainer button.reject{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement .mediaContainer button.edit.error:hover, .editArea .content .editorElement .mediaContainer button.reject:hover{
    background-color: var(--deniedColor);
}



.editArea .content .editorElement .mediaContainer button.alt{
    background-color: var(--backgroundColor1);
    background-color: transparent;
}

.editArea .content .editorElement label:hover, .editArea .content .editorElement .mediaContainer button:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .mediaContainer button.disabled{
    color: var(--writeColor3);
    background-color: transparent;
}

.editArea .content .editorElement .mediaContainer button.table{
    border-radius: 10px;
    height: 45px;
    line-height: 45px;
    font-size: 17px;
}



.editArea .content .editorElement .mediaContainer button.main{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .mediaContainer button.main2{
    background-color: var(--backgroundColor1);
}

.editArea .content .editorElement .mediaContainer button.main2.noHover2:hover{
    background-color: var(--backgroundColor1);
}

.editArea .content .editorElement .mediaContainer button.main3{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .mediaContainer button.main3.noHover3:hover{
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .mediaContainer button.main:hover, .editArea .content .editorElement .mediaContainer button.main2:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .mediaContainer button.disabled:hover{
    background-color: transparent;
}

.editArea .content .editorElement .mediaContainer button.noHover:hover{
    background-color: transparent;
}

.editArea .content .editorElement .mediaContainer button.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement .mediaContainer button.selected:hover{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement .mediaContainer button.selectedDenied{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.editArea .content .editorElement .mediaContainer button.lessPadding{
    padding: 0 20px;
}

.editArea .content .editorElement .mediaContainer button.fixWidth{
    padding: 0;
    width: 160px;
}









.editArea .content .editorElement .mediaContainer p.collection{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editArea .content .editorElement .mediaContainer input[type="time"]{
    background-color: transparent;
    width: 80px;
    min-width: 80px;

    border-radius: 10px;
    line-height: 31px;
    height: 31px;
    font-size: 15px;
    font-weight: 600;
    color: var(--writeColor2);

    text-align: center;
    padding: 0 15px;
}

.editArea .content .editorElement .mediaContainer input[type="number"], .editArea .content .editorElement .mediaContainer input[type="tel"], .editArea .content .editorElement .mediaContainer input[type="time"].settings{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;

    background-color: var(--secondaryColor);
    width: 80px;
    min-width: 80px;
    padding: 0;
    margin: 0 5px;

    border-radius: 10px;
    line-height: 31px;
    height: 31px;
    font-size: 15px;
    font-weight: 600;
    color: var(--writeColor2);
}

.editArea .content .editorElement .mediaContainer input[type="number"].small, .editArea .content .editorElement .mediaContainer input[type="tel"].small, .editArea .content .editorElement .mediaContainer input[type="time"].small.settings{
    width: 50px;
}




/* Clearance for check */
.editArea .content .editorElement .mediaContainer .buttonSelect{
    background-color: var(--secondaryColor);

    padding: 0;
    margin-top: 3px;

    height: auto;
    height: 30px;

    width: 110px;
    min-width: 110px;
    text-align: center;
}

.editArea .content .editorElement .mediaContainer .buttonSelect.alt{
    background-color: var(--backgroundColor1);
}

.editArea .content .editorElement .mediaContainer .buttonSelect:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .mediaContainer .buttonSelectPrimary{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    
    padding: 0;
    margin-top: 3px;

    height: 30px;
    width: 110px;
    min-width: 110px;
    text-align: center;
}







/* Image container */
.mediaCardContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.mediaCardContainer .mediaCard{
    width: 240px;
    min-width: 240px;
    height: auto;
    border-radius: 20px;
    margin: 10px 35px 15px 0px;
}

.mediaCardContainer .mediaCard .image{
    border-radius: 15px;
    width: 100%;
    height: 135px;
    margin-bottom: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
}

.mediaCardContainer .mediaCard .image:hover{
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}


.mediaCardContainer .mediaCard video{
    border-radius: 15px;
    width: 100%;
    height: 135px;
    max-height: 135px;
    margin-bottom: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
}

.mediaCardContainer .mediaCard video:hover{
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.mediaCardContainer .mediaCard .image .videoIcon, .mediaCardContainer .mediaCard .image .titleImageIcon{
    position: relative;
    text-align: center;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    background-color: var(--backgroundColor1);
    color: var(--primaryColor);
    transition: 0.4s;
}

.mediaCardContainer .mediaCard .image .titleImageIcon{
    float: right;
    margin-right: 20px;
}

.mediaCardContainer .mediaCard .image .titleImageIcon.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.mediaCardContainer .mediaCard .image .videoIcon .icon, .mediaCardContainer .mediaCard .image .titleImageIcon .icon{
    font-size: 20px;
}

.mediaCardContainer .mediaCard .settings{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mediaCardContainer .mediaCard .settings button{
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;

    border: none;
    margin: 5px 0;
    width: 30%;

    font-size: 16px;
    height: 35px;
    line-height: 31px;
    border-radius: 15px;
    color: var(--writeColor2);
    background-color: transparent;

    cursor: pointer;
    z-index: 5;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.mediaCardContainer .mediaCard .settings button.disabled{
    color: var(--writeColor3);
}

.mediaCardContainer .mediaCard .settings button .icon{
    font-size: 35px;
    line-height: 35px;
}

.mediaCardContainer .mediaCard .settings button .icon.small{
    font-size: 22px;
    line-height: 35px;
}

.mediaCardContainer .mediaCard .settings button:hover{
    color: var(--primaryColor);
}

.mediaCardContainer .mediaCard .settings button.disabled:hover{
    background-color: transparent;
    color: var(--writeColor3);
}








.editArea .content .editorElement .groupHeaderContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.editArea .content .editorElement .groupHeaderContainer .groupHeaderInner{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editArea .content .editorElement .groupHeaderContainer .groupHeaderInner .groupAmount{
    height: 35px;
    line-height: 35px;
    margin: 3px 20px 10px 0px;
    padding: 0 20px;
    border-radius: 5px;
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .groupHeaderContainer .groupHeaderInner .groupCategory{
    width: auto;
    min-width: 200px;
    height: 35px;
    line-height: 35px;
    margin: 3px 20px 10px 0px;
    padding: 0 20px;
    border-radius: 5px;
    background-color: var(--secondaryColor);
    cursor: pointer;
    transition: 0.4s;
}

.editArea .content .editorElement .groupHeaderContainer .groupHeaderInner .groupCategory:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .groupHeaderContainer .groupIcon{
    height: 35px;
    line-height: 35px;
    width: 35px;
    text-align: center;
    font-size: 19px;
    margin: 3px 20px 10px 0px;
    border-radius: 5px;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    transition: 0.4s;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement .groupHeaderContainer .groupIcon:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .groupHeaderContainer .groupIcon.disabled{
    color: var(--writeColor3);
}

:hover.editArea .content .editorElement .groupHeaderContainer .groupIcon.disabled{
    background-color: var(--secondaryColor);
}



/* Row Box elements */
.rowBox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.rowBox.qrcode{
    justify-content: start;
    margin: 20px 0;
}

.rowBox .inner{
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.rowBox .inner.addMail{
    width: auto;
    margin-right: 30px;
    min-width: 300px;
}

.rowBox .inner.addMailText{
    min-width: 650px;
    display: block;
}

.rowBox .inner.ultraSpaceBottom{
    padding-bottom: 146px;
}

.rowBox .inner.complete{
    width: 100%;
}

.rowBox .inner.first{
    width: 70%;
    margin-right: 30px;
}

.rowBox.qrcode .inner.first{
    width: 30%;
    margin-right: 50px;
}

.rowBox .inner.first2{
    width: 30%;
    min-width: 300px;
    margin-right: 50px;
}

.rowBox .inner.second{
    margin-right: 10px;
}

.rowBox .inner.second2{
    position: relative;
    width: 60%;
    height: 370px;
    max-height: 370px;
}

.rowBox .inner.second2 .homepagePreview{
    position: absolute;
    top: 40px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 130%;
    min-height: 130%;
    
    border: none;
    border-radius: 15px;
    cursor: pointer;
    border: solid 4px var(--backgroundColor1);

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);

    zoom: 0.75;
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}








.rowBox .inner.fullWidth{
    width: 100%;
}

.rowBox.qrcode .inner.second{
    width: 70%;
}

.rowBox .inner label.group{
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    background-color: var(--secondaryColor);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    cursor: pointer;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.rowBox .inner label.group:hover{
    background-color: var(--secondaryHoverColor);
}

.rowBox .inner label.group i{
    line-height: 150px;
    font-size: 60px;
    color: var(--writeColor2);
}



/* qr code */
.rowBox .inner img.qrcode{
    width: 195px;
    min-width: 195px;
    height: 195px;
    padding: 8px;
    margin: 0;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--backgroundColor1);
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.rowBox .inner img.qrcode:hover{
    background-color: var(--backgroundColor1);
}

.rowBox .twoElementContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    gap: 20px;
}

.rowBox .twoElementContainer .innerElement{
    width: 47%;
}

.rowBox .twoElementContainer .innerElement.settings{
    width: 60%;
}

.rowBox .twoElementContainer .innerElement.settings.modal{
    width: 100%;
}

.rowBox .twoElementContainer .innerElement.big{
    width: 45%;
}

.rowBox .twoElementContainer .innerElement.small{
    width: 52%;
}


.rowBox .twoElementContainer .innerElement .optionFlex{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
}

.rowBox .twoElementContainer .innerElement .optionFlex p{
    line-height: 37px;
}

.rowBox .twoElementContainer .innerElement .optionFlex p .icon{
    cursor: pointer;
    color: var(--writeColor3);
    transition: 0.4s;
}

.rowBox .twoElementContainer .innerElement .optionFlex p .icon:hover{
    color: var(--primaryHoverColor);
}

.rowBox .twoElementContainer .innerElement .optionFlex input.optionInput{
    width: 130px;
    background-color: var(--secondaryColor);
    border-radius: 10px;
    text-align: right;

    color: var(--writeColor2);
    padding: 0 10px;
}


/* .rowBox .twoElementContainer .innerElement .optionFlex input.optionInput::placeholder{
    color: #999aa09f;
} */

.rowBox .twoElementContainer .innerElement .optionFlex input.optionInput.mail{
    font-size: 16px;
    width: 250px;
}

.rowBox .twoElementContainer .innerElement .optionFlex .choseBox{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
    padding: 5px 0;
}

.rowBox .twoElementContainer .innerElement .optionFlex .choseBox button{
    width: 90px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    border: none;
    height: 35px;
    line-height: 33px;
    border-radius: 15px;
    color: var(--writeColor2);
    background-color: var(--secondaryColor);
    cursor: pointer;
    transition: 0.4s;
}

.rowBox .twoElementContainer .innerElement .optionFlex .choseBox button:hover{
    background-color: var(--secondaryHoverColor);
}


.rowBox .twoElementContainer .innerElement .optionFlex .choseBox button.selected, .rowBox .twoElementContainer .innerElement .optionFlex .choseBox button.selected:hover{
    color: var(--buttonWriteColor);
    background-color: var(--primaryColor);
}

.rowBox .twoElementContainer .innerElement .optionFlex .choseBox button.selectedDenied, .rowBox .twoElementContainer .innerElement .optionFlex .choseBox button.selectedDenied:hover{
    color: var(--buttonWriteColor);
    background-color: var(--deniedColor);
}

.editArea .content .editorElement .flexBoxLine{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}


.editArea .content .editorElement .flexBoxLine .typeItem{
    padding: 0 20px;
    min-width: fit-content;
    height: 35px;
    line-height: 31px;
    border: solid 2px transparent;
    background-color: var(--secondaryColor);
    transition: 0.4s;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement .flexBoxLine .typeItem:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .flexBoxLine .typeItem.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}




.rowBox .twoElementContainer .innerElement .typeFlex, .modalTypeFlex{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    height: auto;
    margin-top: 5px;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}


.rowBox .twoElementContainer .innerElement .typeFlex .typeItem, .modalTypeFlex .typeItem{
    padding: 0 20px;
    min-width: fit-content;
    height: 35px;
    line-height: 31px;
    border: solid 2px transparent;
    background-color: var(--secondaryColor);
    transition: 0.4s;
    font-size: 15px;
    margin-right: 20px;
    border-radius: 10px;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rowBox .twoElementContainer .innerElement .typeFlex .typeItem:hover, .modalTypeFlex .typeItem:hover{
    background-color: var(--secondaryHoverColor);
}

.rowBox .twoElementContainer .innerElement .typeFlex .typeItem.shown, .modalTypeFlex .typeItem.shown{
    border: solid 2px var(--writeColor2);
}

.rowBox .twoElementContainer .innerElement .typeFlex .typeItem.selected, .modalTypeFlex .typeItem.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.rowBox .twoElementContainer .innerElement .typeFlex .typeItem.selectedDenied, .modalTypeFlex .typeItem.selectedDenied{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}

.rowBox .twoElementContainer .innerElement .letterAmount{
    font-size: 15px;
    color: var(--writeColor3);
}

.rowBox .twoElementContainer .innerElement .letterAmount span{
    width: 25px;
    text-align: right;
}

.rowBox .twoElementContainer .innerElement .regionFlex{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.rowBox .twoElementContainer .innerElement .regionFlex button{
    width: 50px;
    border-radius: 8px;
    height: 32px;
    margin-top: 10px;
    border: none;
    font-size: 18px;
    color: var(--primaryColor);
    cursor: pointer;
    transition: 0.4s;
}

.rowBox .twoElementContainer .innerElement .regionFlex button:hover{
    background-color: var(--secondaryHoverColor);
}


.dividerLineThin{
    border-top: solid 1px var(--writeColor3);
    margin-top: 20px;
    padding-top: 20px;
}

.dividerLineThin.bigMargin{
    margin-top: 40px;
    padding-top: 40px;
}

.dividerLineThin.doneSurvey{
    margin-top: 20px;
    padding-top: 40px;
}



/* Table */
.editArea .content .editorElement .registration{
    margin-top: 20px;
    overflow-x: auto;
    width: 100%;
}


.editArea .content .editorElement .registration.noSpace{
    margin: 0;
}

.editArea .content .editorElement .registration.lessSpace{
    margin: 10px 0 0 0;
}


.editArea .content .editorElement .widthLimit{
    max-width: 60%;
}

.editArea .content .editorElement .registration table{
    width: 100%;
    border-collapse: collapse;
}


.editArea .content .editorElement .registration table input{
    width: 200px;
}

.editArea .content .editorElement .registration table input.long{
    width: 400px;
}


.editArea .content .editorElement table .prizeField span, .prizeField span{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3px;
    width: 80px;
    line-height: 30px;
}

.editArea .content .editorElement table .prizeField span input, .prizeField span input{
    width: 70px;
    padding: 0;
    margin: 0;
    text-align: right;
}

.editArea .content .editorElement table .prizeField span input:hover, .editArea .content .editorElement table .prizeField span input:focus{
    padding: 0 3px 0 0;
}

.editArea .content .editorElement table .prizeField span div, .prizeField span div{
    min-width: 15px;
}

.editArea .content .editorElement .registration table td{
    white-space: nowrap;
}

.editArea .content .editorElement .registration table td input[type="text"].addMailFileEditable{
    width: 100%;
}

.editArea .content .editorElement .registration table td.w200{
    width: 350px;
}


.editArea .content .editorElement .registration table th.ageCluster{
    text-align: center;
    width: 200px;
}

.editArea .content .editorElement .registration table td.ageCluster{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.editArea .content .editorElement .registration table td.ageCluster button, .editArea .content .editorElement .registration table td.ageCluster input[type="number"], .editArea .content .editorElement .registration table td.ageCluster input[type="text"]{
    width: 120px;
    min-width: 120px;
    padding: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    width: 120px;
}
.editArea .content .editorElement .registration table td.ageCluster button.alt{
    text-align: center;
    width: 100%;
    padding: 0 10px;
}
.editArea .content .editorElement .registration table td.ageCluster button.error{
    background-color: var(--deniedColor);
    color: var(--buttonWriteColor);
}



.editArea .content .editorElement .registration table td.ageCluster p{
    line-height: 30px;
}

.editArea .content .editorElement .registration table td.ageCluster.hide, .editArea .content .editorElement .registration table td.ageCluster p.hide, .editArea .content .editorElement .registration table td button.hide{
    visibility: hidden;
}

.editArea .content .editorElement .registration table td.ageCluster.long button{
    width: 160px;
}

/* .editArea .content .editorElement table input::placeholder{
    color: var(--buttonWriteColor);
} */



.editArea .content .editorElement table td span.smallDate{
    font-size: 12px;
    line-height: 10px;
}

.editArea .content .editorElement table td span.onLeave{
    color: var(--deniedColor);
    font-weight: 600;
}




/* SETTINGS Flex Container */
.settingFlexContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    gap: 25px;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding: 0 20px 20px 10px;
}


.settingFlexContainer.modules{
    justify-content: space-between;
}

.settingFlexContainer .cardElement{
    height: 225px;
    width: 250px;
    min-width: 250px;
    border-radius: 20px;
    background-color: var(--secondaryColor);

    text-align: center;
    cursor: pointer;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.22);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    transition: 0.4s;
}

.ghostSorting {
    opacity: 0.4;
}


.settingFlexContainer .cardElement.newSelection{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.settingFlexContainer .cardElement:last-child{
    margin-right: 0;
}

.settingFlexContainer .cardElement .backgroundImage{
    height: 165px;
    width: 100%;
    background-color: var(--backgroundColor2);
    background-size: cover;
    background-position: center;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.settingFlexContainer .cardElement .backgroundImage .icon{
    font-size: 90px;
    color: var(--primaryColor);
    line-height: 165px;
}

.settingFlexContainer .cardElement h5, .settingFlexContainer .cardElement h6{
    line-height: 22px;
    color: var(--writeColor2);
}

.settingFlexContainer .cardElement h6{
    font-family: var(--textFontFamily);
    font-size: 15.5px;
    font-weight: 600;
    padding: 8px 10px 0px 10px;
}

.settingFlexContainer .cardElement h5.lineBreak, .settingFlexContainer .cardElement h6.lineBreak{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.settingFlexContainer .cardElement.manager h5, .settingFlexContainer .cardElement.manager h6{
    color: var(--highlightColorBlue);
}

.settingFlexContainer .cardElement.feedback h5, .settingFlexContainer .cardElement.feedback h6{
    color: var(--highlightColorYellow);
}

.settingFlexContainer .cardElement.feedbackPlus h5, .settingFlexContainer .cardElement.feedbackPlus h6{
    color: var(--highlightColorPink);
}


.settingFlexContainer .cardElement:hover{
    background-color: var(--secondaryHoverColor);
}

.settingFlexContainer .cardElement.selected{
    background-color: var(--primaryColor);
}

.settingFlexContainer .cardElement.manager.selected{
    background-color: var(--highlightColorBlue);
}

.settingFlexContainer .cardElement.feedback.selected{
    background-color: var(--highlightColorYellow);
}

.settingFlexContainer .cardElement.feedbackPlus.selected{
    background-color: var(--highlightColorPink);
}

.settingFlexContainer .cardElement.selected h5, .settingFlexContainer .cardElement.selected h6{
    color: var(--buttonWriteColor);
}

.settingFlexContainer .cardElement.selected .backgroundImage .icon{
    color: var(--buttonWriteColor);
}






/* Small variant */
.settingFlexContainer .cardElement.small{
    height: 160px;
    width: 170px;
}

.settingFlexContainer .cardElement.small .backgroundImage{
    height: 120px;
}

.settingFlexContainer .cardElement.small .backgroundImage .icon{
    font-size: 70px;
    line-height: 120px;
}

.settingFlexContainer .cardElement.small.icon{
    line-height: 160px;
}

.settingsModuleContainer{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.settingsModuleContainer .backgroundImageIcon{
    height: 110px;
    min-width: 150px;
    max-width: 150px;
    margin: 0 20px 10px 0;
    border-radius: 20px;
    background-color: var(--highlightColorBlue);
    color: var(--buttonWriteColor);
    text-align: center;
    line-height: 110px;
    font-size: 70px;
}

.settingsModuleContainer .backgroundImageIcon.alt{
    background-color: var(--highlightColorYellow);
}
.settingsModuleContainer .backgroundImageIcon.alt2{
    background-color: var(--highlightColorPink);
}


.settingsModuleContainer .backgroundImage{
    height: 130px;
    min-width: 150px;
    max-width: 150px;
    background-color: var(--backgroundColor1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    margin: 0 20px 10px 0;
    border-radius: 20px;
}

.settingsModuleContainer .backgroundImageMail{
    height: 110px;
    min-width: 150px;
    max-width: 150px;
    background-color: var(--backgroundColor2);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    border-radius: 20px;
    margin: 5px 20px 10px 0;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
}

.settingsModuleContainer .backgroundImageMail.association{
    background-color: var(--backgroundColor1);
    background-size: 90%;
    background-position: center center;
}

.settingsModuleContainer .buttonBox{
    margin-left: 50px;
    min-width: fit-content;
}


.settingsModuleContainer button{
    z-index: 5;

    width: 170px;
    margin: 0 20px 0 40px;
    border: 2px solid transparent;

    height: 35px;
    line-height: 32px;
    font-size: 15px;
    font-weight: 600;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    font-family: var(--textFontFamily);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.settingsModuleContainer button.alone{
    margin-bottom: 40px;
}


.settingsModuleContainer button:hover{
    background-color: var(--secondaryHoverColor);
}

.settingsModuleContainer button.selected{
    border: 2px solid var(--primaryColor);
}

.settingsModuleContainer button.selected:hover{
    border: 2px solid var(--primaryColor);
    background-color: var(--secondaryColor);
}

.settingsModuleContainer button.selectedManager{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.settingsModuleContainer button.selectedManager:hover{
    background-color: var(--primaryHoverColor);
    color: var(--buttonWriteColor);
}

.settingsModuleContainer p.validDate{
    width: 170px;
    margin: 0px 20px 0 40px;
    text-align: center;
    line-height: 22px;
    font-weight: 500;
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    border-radius: 10px;
    padding: 7px 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.settingsModuleContainer p.validDate span{
    font-weight: bold;
}

/* SETTINGS Modules */
.moduleFeatureContainer{
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: auto;
    width: 45%;
    margin: 15px 0;
    padding: 0 10px;


    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.moduleFeatureContainer.last{
    margin-left: 9%;
}

.moduleFeatureContainer.smallSpaceTop{
    margin-top: 5px;
}

.moduleFeatureContainer.fullWidth{
    width: 100%;
}

.moduleFeatureContainer h5{
    margin-bottom: 10px;
    font-weight: 500;
    width: fit-content;
}

.moduleFeatureContainer h5.pointer{
    cursor: pointer;
}

.moduleFeatureContainer h5 .icon{
    width: 30px;
    text-align: center;
}

.moduleFeatureContainer h5 .icon.manager, .moduleFeatureContainer h5.manager.hover:hover{
    color: var(--highlightColorBlue);
}

.moduleFeatureContainer h5 .icon.feedback, .moduleFeatureContainer h5.feedback.hover:hover{
    color: var(--highlightColorYellow);
}

.moduleFeatureContainer h5 .icon.feedbackPlus, .moduleFeatureContainer h5.feedbackPlus.hover:hover{
    color: var(--highlightColorPink);
}

.moduleFeatureContainer h5 .icon.opt{
    font-size: 27px;   
    width: 33px;
}

.moduleFeatureContainer h5 .icon.opt.check, .moduleFeatureContainer h5.opt.check.hover:hover{
    color: var(--primaryColor);
    user-select: none;
    cursor: pointer;
}

.moduleFeatureContainer h5.manager.hover, .moduleFeatureContainer h5.feedback.hover, .moduleFeatureContainer h5.feedbackPlus.hover{
    cursor: pointer;
}

.moduleFeaturePrizeContainer{
    width: fit-content;
    height: auto;
    border-top: solid 3px var(--writeColor3);
    padding: 10px 30px 10px 10px;
}

.moduleFeaturePrizeContainer h4{
    font-size: 27px;
    font-family: var(--textFontFamily);
    font-weight: 900;
    line-height: 35px;
    cursor: pointer;
}

.moduleFeaturePrizeContainer h4.manager, .moduleFeaturePrizeContainer h4.manager.noHover:hover{
    color: var(--highlightColorBlue);
}

.moduleFeaturePrizeContainer h4.feedback, .moduleFeaturePrizeContainer h4.feedback.noHover:hover{
    color: var(--highlightColorYellow);
}

.moduleFeaturePrizeContainer h4.feedbackPlus, .moduleFeaturePrizeContainer h4.manager.feedbackPlus:hover{
    color: var(--highlightColorPink);
}

.moduleFeaturePrizeContainer h4.disabled, .moduleFeaturePrizeContainer h4.hover{
    color: var(--writeColor3);
}

.moduleFeaturePrizeContainer h4.manager.hover:hover{
    color: var(--highlightColorBlue);
}

.moduleFeaturePrizeContainer h4.feedback.hover:hover{
    color: var(--highlightColorYellow);
}

.moduleFeaturePrizeContainer h4.feedbackPlus.hover:hover{
    color: var(--highlightColorPink);
}

.moduleFeaturePrizeContainer h4 span{
    font-size: 17px;
    font-weight: 500;
}


.moduleMailTemplateContainerOuter{
    width: 100%;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 20px;
    padding-bottom: 20px;
}

.moduleMailTemplateFrame{
    width: 400px;
    height: 260px;
    flex: 0 0 auto;
    border-radius: 20px;
    margin: 0;
    cursor: pointer;
    border: solid 4px var(--backgroundColor1);

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.15);
    transition: 0.4s;
}

.moduleMailTemplateFrame:hover{
    -webkit-box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.moduleMailTemplateFrame.selected{
    border: solid 4px var(--primaryColor);
    background-color: var(--primaryColor);
    -webkit-box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 8px 5px 18px 0px rgba(110, 112, 113, 0.32);
}














/*? MINIMIZE */
.minimizeContainer{
    position: absolute;
    bottom: 10px;
    right: 40px;
    background-color: var(--backgroundColor1);
    padding: 10px 30px;
    border-radius: 12px;
    cursor: pointer;
    transition: .6s;
    z-index: 99999999;
}

.minimizeContainer:hover{
    background-color: var(--secondaryHoverColor);
}


.minimizeContainer i{
    margin-left: 10px;
}

.minimizeContainer.miniHighlight{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    height: 100vh;
    bottom: 0;
    right: 0;
    line-height: 100vh;
    padding: 0 8px 0 5px;
    border-radius: 0;
}

.minimizeContainer.miniHighlight:hover{
    background-color: var(--primaryHoverColor);
}


.minimizeContainer.miniHighlight i{
    margin: 0;
}


/*? PREVIEW AREA */
.actionsArea{
    width: 460px;
    min-width: 460px;
    height: 100vh;
    max-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.actionsArea.hide{
    display: none;
}

.actionsArea h4.selection{
    margin-top: 5px;
    margin-bottom: 5px;
}

.actionsArea h4.selection:first-child{
    margin-top: 0;
}

.actionsArea .preview{
    margin: 10px 40px 10px 0px;
    padding: 20px 25px;
    height: auto;
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--backgroundColor1);
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.footer{
    margin: 25px 40px 10px 0px;
    padding: 20px 25px;

    height: auto;
    max-height: 60vh;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: var(--backgroundColor1);
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.footer .scrollBox{
    width: 100%;
    height: fit-content;
    max-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-right: 15px;
    margin-bottom: 20px
}


.actionsArea .actionButton{
    font-weight: 600;
    text-align: center;
    white-space: nowrap;

    border: none;
    font-size: 17px;
    height: 45px;
    line-height: 45px;
    border-radius: 10px;
    cursor: pointer;
    z-index: 5;

    width: 100%;
    /* margin: 15px 0; */
    margin-bottom: 15px;

    background-color: var(--secondaryColor);
    color: var(--primaryColor);

    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: 0.4s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.actionsArea .actionButton.line{
    position: relative;
    border: 2px solid transparent;
    line-height: 42px;
    height: 45px;
}

.actionsArea .actionButton:hover{
    background-color: var(--secondaryHoverColor);
}

.actionsArea .actionButton.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.actionsArea .actionButton.line.selected{
    background-color: var(--secondaryColor);
    border: 2px solid var(--primaryColor);
    color: var(--primaryColor);
}

.actionsArea .actionButton.disabled{
    color: var(--writeColor3);
    background-color: var(--secondaryColor);
}

.actionsArea .actionButton.selected:hover{
    background-color: var(--primaryHoverColor);
}

.actionsArea .actionButton.line.selected:hover{
    background-color: var(--secondaryColor);
    border: 2px solid var(--primaryColor);
    color: var(--primaryColor);
}

.actionsArea .actionButton.inline2{
    display: inline-block;
    padding: 0 20px;
    width: 48%;
}

.actionsArea .actionButton.inline2.initTutorial{
    text-align: left;
    padding-left: 15px;
}


.actionsArea .actionButton.inline2:nth-of-type(even){
    margin-left: calc(4% - 5px);
}

.actionButton.small{
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
}

.actionButton.spaceBottom{
    margin-bottom: 10px;
}


.actionContainerFlex{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.actionContainerFlex .actionButton{
    width: 48%;
}





.backButton{
    font-weight: 600;
    text-align: left;
    white-space: nowrap;

    border: none;
    font-size: 17px;
    height: auto;
    line-height: auto;
    cursor: pointer;
    margin: 20px 0 0 0;
    color: var(--writeColor2);

    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: 0.4s;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.backButton .icon{
    width: 15px;
} 

.backButton:hover{
    color: var(--primaryColor);
}

.actionsArea .preview .previewFlexInner{
    height: auto;
    max-height: 33vh;
    padding-right: 10px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.actionsArea .preview .previewFlexInner.long{
    max-height: 40vh;
}




.actionsArea .preview label{
    color: var(--writeColor2);
    margin-top: 7px;
}


.actionsArea .preview input[type="text"], .actionsArea .preview input[type="number"],  .actionsArea .preview input[type="tel"], .actionsArea .preview input[type="date"], .actionsArea .preview textarea{
    background-color: var(--secondaryColor);
    color: var(--writeColor2);
    height: 45px;
    line-height: 45px;
    font-size: 17px;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 0;
    width: 100%;
}

.actionsArea .preview input[type="date"]{
    line-height: 25px;
}

.actionsArea .preview input[type="text"].spaceTop,
.actionsArea .preview input[type="number"].spaceTop,
.actionsArea .preview input[type="tel"].spaceTop, 
.actionsArea .preview input[type="date"].spaceTop{
    margin-top: 10px;
}


.actionsArea .preview input[type="text"]:hover,
.actionsArea .preview input[type="number"]:hover, 
.actionsArea .preview input[type="tel"]:hover, 
.actionsArea .preview input[type="date"]:hover{
    background-color: var(--secondaryHoverColor);
}

.actionsArea .preview input[type="text"]:focus,
.actionsArea .preview input[type="number"]:focus,
.actionsArea .preview input[type="tel"]:focus, 
.actionsArea .preview input[type="date"]:focus{
    border: none;
}

.actionsArea .preview textarea{
    height: auto;
    width: 100%;
}













.actionsArea .preview .previewBox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}

.actionsArea .preview .buttonBox{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.actionsArea .preview .buttonBox .iconButton{
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 15px;
    margin: 15px auto;
    font-size: 45px;
    text-align: center;
    color: var(--primaryColor);
    background-color: var(--secondaryColor);
    cursor: pointer;
    transition: 0.4s;
}

.actionsArea .preview .buttonBox .iconButton:hover{
    background-color: var(--secondaryHoverColor);
}

.actionsArea .preview .buttonBox .iconButton.selected{
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
}

.actionsArea .preview .container{
    position: relative;
    width: fit-content;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.actionsArea .preview .container img{
    display: block;
    height: 500px;
    width: auto;
}

.actionsArea .preview .container .inner{
    position: absolute;
    top: 14.1px;
    left: 15px;
    width: 218px;
    height: 469px;
    padding-bottom: 20px;
    background-color: var(--backgroundPreviewColor1);

    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}


.actionsArea .preview .container .inner .previewHeader{
    position: relative;
    height: 140px;
    min-height: 140px;
    width: 100%;
    border-bottom-right-radius: 30px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.actionsArea .preview .container .inner .previewHeader h5{
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding-left: 16px;
    padding-right: 16px;
    color: var(--highlightColor);
}

.actionsArea .preview .container .inner .intro{
    font-size: 11px;
    line-height: 13px;
    margin: 10px;
    padding: 0;
    color: var(--writePreviewColor2);
}

.actionsArea .preview .container .inner .text p{
    color: var(--writePreviewColor2);
    font-size: 11px;
    line-height: 13px;
    margin: 0 10px;
    padding: 0;
}

.actionsArea .preview .container .inner .text h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 10px 0px 10px;
    padding: 0;
    text-transform: none;
    color: var(--highlightColor);
}

.actionsArea .preview .container .inner .text blockquote{
    border-left: 4px solid var(--highlightColor);
    margin: 10px;
    padding: 0 0 0 10px;
    color: var(--writePreviewColor1);
    font-size: 11px;
    line-height: 13px;
}

.actionsArea .preview .container .inner .text ol{
    list-style-type: decimal;
}

.actionsArea .preview .container .inner .text ul{
    list-style-type: disc;
}

.actionsArea .preview .container .inner .text ol, .actionsArea .preview .container .inner .text ul {
    font-size: 11px;
    line-height: 15px;
    color: var(--writePreviewColor2);
    padding-left: 20px;
    margin:  0 0 0 20px;
}

.actionsArea .preview .container .inner .linkButton{
    text-align: center;
    white-space: nowrap;
    border: none;

    font-size: 12px;
    font-weight: 500;

    height: auto;
    width: auto;
    border-radius: 10px;

    margin: 10px 10px 20px 10px;
    padding: 5px;

    background-color: var(--highlightColor);
    color: var(--buttonWriteColor);

    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;


    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.actionsArea .preview .container .inner .linkButton.secondary{
    background-color: var(--backgroundPreviewColor1);
    color: var(--highlightColor);
    font-weight: 600;
}

.actionsArea .preview .container .inner .linkButton.secondary.alt{
    background-color: var(--backgroundPreviewColor2);
    color: var(--highlightColor);
    font-weight: 600;
}

.actionsArea .preview .container .inner .linkButton.secondary.disabled{
    color: var(--writeColor3);
}

.actionsArea .preview .container .inner .linkButton.lessSpaceBottom{
    margin-bottom: 5px;
}








.actionsArea .preview .container .inner.collection{
    background-color: var(--backgroundPreviewColor1);
}

.actionsArea .preview .container .inner .previewCollectionBox{
    position: relative;
    height: 80px;
    width: 100%;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: var(--backgroundPreviewColor1);
    z-index: 1;
}

.actionsArea .preview .container .inner .previewCollectionBox.autoHeight{
    height: auto;
}


.actionsArea .preview .container .inner .previewCollectionBox2{
    position: relative;
    margin-top: -20px;
    height: 20px;
    width: 100%;
    background-color: var(--backgroundPreviewColor2);
}

.actionsArea .preview .container .inner .previewCollectionBox3{
    position: relative;
    height: auto;
    margin-top: 25px;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: var(--backgroundPreviewColor2);
    z-index: 1;
}

.actionsArea .preview .container .inner .previewCollectionBox4{
    position: relative;
    height: 20px;
    min-height: 20px;
    width: 100%;
    background-color: var(--backgroundPreviewColor2);
}

.actionsArea .preview .container .inner .previewCollectionBox5{
    position: relative;
    margin-top: -20px;
    height: 20px;
    min-width: 20px;
    width: 100%;
    border-top-right-radius: 20px;
    background-color: var(--backgroundPreviewColor1);
}

.actionsArea .preview .container .inner .previewCollectionBox5.course{
    height: 20px;
}

.actionsArea .preview .container .inner .previewCollectionBox3.spaceTop{
    margin-top: 20px;
}

.actionsArea .preview .container .inner .previewCollectionBox3 h5, .actionsArea .preview .container .inner .previewCollectionBox5.course h5, .actionsArea .preview .container .inner .previewCollectionBox h5{
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--highlightColor);
}

.actionsArea .preview .container .inner .previewCollectionBox h5{
    margin-top: 10px;
}

.actionsArea .preview .container .inner h5.preview{
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--highlightColor);
    padding-left: 12px;
    padding-right: 12px;
    margin: 7px 0 0 0;
    width: 100%;
}

.actionsArea .preview .container .inner .previewCollectionBox3 h5 span, .actionsArea .preview .container .inner .previewCollectionBox5.course h5 span, .actionsArea .preview .container .inner h5.preview span, .actionsArea .preview .container .inner .previewCollectionBox h5 span{
    color: var(--writePreviewColor2);
}



/* Team and Group boxes */
.actionsArea .preview .container .inner .groupScrollBox{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px;
    height: auto;
    overflow-x: auto;
}


.actionsArea .preview .container .inner .groupArticleBox{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 60px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
}

.actionsArea .preview .container .inner .groupArticleBox p{
    margin-top: 5px;
    font-size: 10px;
    line-height: 14px;
    color: var(--writePreviewColor2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}


.actionsArea .preview .container .inner .groupArticleBox .groupArticle{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--backgroundPreviewColor1);
    background-color: var(--backgroundPreviewColor1);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.actionsArea .preview .container .inner .groupArticleBox .groupArticle .icon{
    color: var(--highlightColor);
    line-height: 57px;
    font-size: 40px;
}

.actionsArea .preview .container .inner .groupArticleBox .groupArticle.selected{
    border: 2px solid var(--highlightColor);
}





/* Checkboxes */
.actionsArea .preview .container .inner input[type="checkbox"]{
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    opacity: 0;
    z-index: -1;
}

.actionsArea .preview .container .inner input[type="checkbox"] + label{
    text-decoration: none;
    color: var(--writePreviewColor2);
    cursor: pointer;
    display: inline-block;

    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    padding-left: 23px;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    position: relative;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin: 5px 12px 10px 12px;
}
    

.actionsArea .preview .container .inner input[type="checkbox"] + label:before{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.actionsArea .preview .container .inner input[type="checkbox"] + label:before{
    border-radius: 5px;
    background-color: var(--backgroundPreviewColor2);
    border: none;
    content: '';
    display: inline-block;
    font-size: 12px;
    height: 15px;
    width: 15px;
    line-height: 15px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
} 
        
.actionsArea .preview .container .inner input[type="checkbox"].select + label:before{
    border: solid 1px var(--highlightColor);
} 

.actionsArea .preview .container .inner input[type="checkbox"]:checked + label:before{
    background-color: var(--highlightColor);
    content: '\f00c';
    color: var(--buttonWriteColor);
}

.actionsArea .preview .container .inner input[type="checkbox"]:focus + label:before{
    border-color: var(--highlightColor);
}

.actionsArea .preview .container .inner input[type="checkbox"] + label:before {
    border-radius: 5px;
}










.actionsArea .preview .articleCollectionSelection{
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    height: auto;
    max-height: 50vh;
    min-height: 200px;
    margin: 10px 0 15px 0;
}

.actionsArea .preview .articleCollectionSelection.small{
    max-height: 40vh;
}

.actionsArea .preview .articleCollectionSelection.spaceTop{
    margin-top: 20px;
}
















/* Preview options */
.actionsArea .preview button.selection{
    width: 100%;
    height: 40px;
}

.actionsArea .preview button.wizard{
    margin: 10px;
    color: var(--buttonWriteColor);
}

.actionsArea .preview button.wizard:hover{
    background-color: var(--backgroundColor1);
    color: var(--highlightColor);
}

.actionsArea .preview button.smallSpaceBottom{
    margin-bottom: 5px;
}

.actionsArea .preview button.spaceBottom{
    margin-bottom: 15px;
}

.actionsArea .preview button.bigSpaceBottom{
    margin-bottom: 55px;
}

.actionsArea .preview button.primary, .actionsArea .preview button.primary:hover{
    background-color: var(--highlightColor);
    color: var(--buttonWriteColor);
}

.actionsArea .preview button.spaceTop{
    margin-top: 15px;
}

.actionsArea .preview button.searchCancelButton{
    width: 100%;
    margin: 5px 0 5px 0;
}






/* Club Settings coach card */
.coachCard{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 45%;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.4s;
}

.coachCard:hover{
    background-color: var(--secondaryHoverColor);
}

.coachCard.selectedLight{
    background-color: var(--highlightColorPink);
}

.coachCard.selected{
    background-color: var(--primaryColor);
}

/* .coachCard.selected .textBox h5, .coachCard.selected .textBox p{
    color: var(--buttonWriteColor);
} */

.coachCard .coachImage{
    width: 80px;
    min-width: 80px;
    height: 80px;
    background-color: var(--secondaryColor);
    background-position: center;
    background-size: cover;
    border-radius: 9px;
    text-align: center;
}

.coachCard .coachImage .icon{
    font-size: 50px;
    color: var(--primaryColor);
    line-height: 80px;
}

.coachCard .textBox{
    padding: 3px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    width: auto;
}

.coachCard .textBox.modal{
    justify-content: start;
}

.coachCard .textBox p, .coachCard .textBox h5{
    line-height: 18px;
    margin-bottom: 3px;
    margin: 0;
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.coachCard .textBox p.noEllipsis{
    -webkit-line-clamp: 2;
    height: auto;
    word-break: normal;
}

.coachCard .textBox.modal p.noEllipsis{
    -webkit-line-clamp: 2;
    height: auto;
    word-break: break-all;
    padding-bottom: 5px;
}

.coachCard .textBox h5{
    padding-bottom: 3px;
}

.coachCard .textBox .icon{
    width: 25px;
    text-align: center;
}

.coachCard .feedbackIcon{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 35px;
    height: 35px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 20px;
    background-color: var(--fadeOutBackgroundSolid);
    text-align: center;
    cursor: pointer;
    line-height: 35px;
    transition: 0.5s;
}




/* Setting description */
.actionsArea .preview .help{
    margin-top: 15px;
}

.actionsArea .preview .help h5{
    line-height: 35px;
    cursor: pointer;
}

.actionsArea .preview .help h5.selected{   
    color: var(--primaryColor);
}


.actionsArea .preview .help h5:hover, .actionsArea .preview .help h5.selected:hover{
    color: var(--primaryColor);
}


.actionsArea .preview .help h5 .icon{
    width: 19px;
}

.actionsArea .preview .help .content{
    padding: 0 0 0 5px;
    margin-bottom: 10px;
}

.actionsArea .preview .help .content p{
    font-size: 0.95em;
    line-height: 1.5em;
}

.actionsArea .preview .help .content p span{
    font-weight: 700;
}



/* EVENTS for ACTION ELEMENT */
.actionsArea .eventsCard{
    position: relative;
    width: 100%;
    height: 65px;
    background-color: var(--secondaryColor);
    border-radius: 10px;
    padding: 0;

    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 0;

    cursor: pointer;
    transition: 0.4s;
}

.actionsArea .eventsCard:hover{
    background-color: var(--secondaryHoverColor);
}

.actionsArea .eventsCard .close{
    position: absolute;
    right: 0;
    top: 3px;
    width: 30px;
    height: 20px;
    font-size: 16px;
    border-top-right-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
    transition: 0.4s;
}

.actionsArea .eventsCard .close:hover{
    color: var(--primaryColor);
}

.actionsArea .eventsCard .colorBadge{
    position: relative;
    min-width: 10px;
    max-width: 10px;
    height: 100%;
    margin: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 5;
}

.actionsArea .eventsCard .colorBadge.color0{ /* info = 3, good = 2, bad = 1, open = 0 */
    background-color: var(--highlightColorBlue);
}

.actionsArea .eventsCard .colorBadge.color1{ /* info = 3, good = 2, bad = 1, open = 0 */
    background-color: var(--highlightColorPink);
}

.actionsArea .eventsCard .colorBadge.color2{ /* info = 3, good = 2, bad = 1, open = 0 */
    background-color: var(--highlightColorYellow);
}

.actionsArea .eventsCard .colorBadge.color3{ /* info = 3, good = 2, bad = 1, open = 0 */
    background-color: var(--primaryColor);
}



.actionsArea .eventsCard .image{
    position: relative;
    height: 65px;
    min-height: 60px;
    width: 70px;
    max-width: 70px;
    margin-right: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.actionsArea .eventsCard .icon{
    width: 40px;
    height: auto;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.actionsArea .eventsCard .icon.color0{
    color: var(--highlightColorBlue);
}

.actionsArea .eventsCard .icon.color1{
    color: var(--highlightColorPink);
}

.actionsArea .eventsCard .icon.color2{
    color: var(--primaryColor);
}

.actionsArea .eventsCard .icon.color3{
    color: var(--highlightColorYellow);
}



.actionsArea .eventsCard .text{
    position: relative;
    padding: 0 5px 0 0;
    margin: 0;
}

.actionsArea .eventsCard .text p{
    padding: 0;
    margin: 0;
    line-height: 17px;
    font-size: 13.5px;
}

.actionsArea .eventsCard .text p.title{
    min-width: 100%;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 0 3px 0;
    margin: 0;
    line-height: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}








/* Groups */
.editArea .content .editorElement .groupScrollBox{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    overflow-x: auto;
    /* margin-bottom: 10px; */
    padding: 10px 20px 0px 10px;
}

.editArea .content .editorElement .groupVerticalBox{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90px;
    max-height: 300px;
    margin-right: 30px;
}

.editArea .content .editorElement .groupArticleBox{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90px;
    margin-right: 20px;
    cursor: pointer;
    text-align: center;
}

.editArea .content .editorElement .groupArticleBox .markSentPrevious{
    position: absolute;
    top: -3px;
    left: -4px;
    font-size: 22px;
    color: var(--primaryColor);
    z-index: 1;
}

.editArea .content .editorElement .groupArticleBox p{ 
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.editArea .content .editorElement .groupArticleBox .groupArticle{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid var(--backgroundColor1);
    background-color: var(--backgroundColor1);
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.editArea .content .editorElement .groupArticleBox .groupArticle .icon{
    color: var(--primaryColor);
    line-height: 85px;
    font-size: 50px;
}

.editArea .content .editorElement .groupArticleBox .groupArticle.secondary{
    border: 2px solid var(--highlightColorBlue);   
}

.editArea .content .editorElement .groupArticleBox:hover .groupArticle{
    border: 2px solid var(--primaryHoverColor);   
}

.editArea .content .editorElement .groupArticleBox:hover p{
    color: var(--primaryHoverColor);
}

.editArea .content .editorElement .groupArticleBox.active .groupArticle{
    border: 2px solid var(--primaryColor);   
}

.editArea .content .editorElement .groupArticleBox.active p{
    color: var(--primaryColor);
}

.editArea .content .editorElement .groupArticleBox p.categoryTag{
    height: auto;
    width: 100%;
    background-color: var(--primaryColor);
    color: var(--buttonWriteColor);
    font-weight: 14px;
    padding: 3px 5px;
    border-radius: 5px;
}


/* Group edit box */
.editArea .content .editorElement .groupEditBox{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.editArea .content .editorElement .groupEditBox .outer{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.editArea .content .editorElement .groupEditBox .outer.spaceRight{
    margin-right: 10px;
}


.editArea .content .editorElement .groupEditBox .inner{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.editArea .content .editorElement .groupEditBox .inner p{
    min-width: 400px;
    max-width: 400px;
}

.editArea .content .editorElement .groupEditBox .inner .element{
    width: auto;
    height: 45px;
    padding: 0 25px;
    margin: 0 10px 0 0;
    text-align: center;
    border-radius: 10px;
    background-color: var(--secondaryColor);
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.editArea .content .editorElement .groupEditBox .inner .element:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement .groupEditBox .inner .element .icon{
    color: var(--primaryColor);
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
}

.editArea .content .editorElement .groupEditBox .inner .number{
    width: 80px;
    height: 45px;
    line-height: 45px;

    padding: 0 20px;
    margin-right: 10px;
    text-align: center;
    border-radius: 10px;
    background-color: var(--secondaryColor);
    margin: 0 10px 0 0;
    font-size: 20px;
    color: var(--writeColor2);
    font-weight: 600;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.editArea .content .editorElement .groupEditBox .inner .deleteButton{
    font-weight: 600;
    text-align: center;
    white-space: nowrap;

    border: none;
    padding: 0 25px;

    font-size: 17px;
    height: 45px;
    line-height: 45px;

    border-radius: 10px;
    color: var(--primaryColor);
    background-color: var(--secondaryColor);   
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}

.editArea .content .editorElement .groupEditBox .inner .deleteButton:hover{
    background-color: var(--secondaryHoverColor);
}







.editArea .content .editorElement .groupEditBox .inner button{
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    border: none;
    padding: 0 25px;
    /* min-width: 200px; */
    font-size: 16px;
    height: 35px;
    line-height: 31px;
    border-radius: 15px;
    color: var(--highlightColor);
    cursor: pointer;
    z-index: 5;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: all 0.4s ease-out 0s;
    -moz-transition: all 0.4s ease-out 0s;
    -ms-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    background-color: var(--backgroundColor1);   
}











































































/* TODO: Wizard Zeug */
/* Courses */
.flexBoxLevels{
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    margin-bottom: 15px;
}

.courseCoachesLine{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}

.courseCoachesLine .name{
    width: auto;
    max-width: 30%;
    margin-right: 15px;
}

.flexOptionsInputContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: -15px 0 7px 0;
}

.flexOptionsInputContainer > *{
    margin: 15px 0 7px 0;
}

.flexOptionsInputContainer .innerFlex{
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
}

.flexOptionsInputContainer.spaceBottom{
    margin: 0 0 15px 0;
}

.flexOptionsInputContainer .innerFlex.small{
    width: 39%;
}

.flexOptionsInputContainer .innerFlex.small2{
    width: 27%;
}

.flexOptionsInputContainer .innerFlex.big{
    width: 56%;
}

.flexOptionsInputContainer .innerFlex.big2{
    width: 67%;
}

.flexOptionsInputContainer .innerFlex input{
    width: 100%;
}

.flexOptionsInputContainer .innerFlex input[type="number"], .flexOptionsInputContainer .innerFlex input[type="tel"]{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}


.flexDateContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: start;
    width: 100%;
    overflow-x: auto;
}

.flexDateContainer .dateBlock{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 140px;
    height: 80px;
    border-radius: 10px;
    background-color: var(--backgroundColor1);
    margin-right: 25px;
    text-align: center;
}

.flexDateContainer .dateBlock h5{
    color: var(--highlightColor);
}











/* Wizard */
.courseWizard{
    padding: 15px 15px;
    margin: 10px 0 15px 0;
    border-radius: 15px;
    background-color: var(--primaryColor);
}

.courseWizard h4{
    color: var(--buttonWriteColor);
}

.courseWizard p{
    color: var(--buttonWriteColor);
}



































/*? LEFT MODAL */

.menuArea{
    position: absolute;
    width: 23vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--backgroundColor1);
    transition: width 0.5s;
    z-index: 1000;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
}

.menuArea.toggle{
    width: 120px;
}



.menuArea .user{
    position: relative;
    height: 150px;
    min-height: 150px;
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.menuArea .user .profileImage{
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 20px;
    background-color: var(--backgroundColor1);

    background-position: center center;
    background-size: cover;
    text-align: center;

    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);

    transition: 0.4s;
    cursor: pointer;
}

.menuArea .user .profileImage .icon{
    font-size: 70px;
    line-height: 120px;
    color: var(--writeColor1);
    transition: 0.4s;
}

.menuArea.toggle .user .profileImage{
    width: 80px;
    min-width: 80px;
    height: 80px;
}

.menuArea.toggle .user .profileImage .icon{
    font-size: 40px;
    line-height: 80px;
}


.menuArea .user .coachData{
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    opacity: 1;
    transition-delay: 0.2s;
    transition-timing-function: linear;
    margin-right: 10px;
    margin-top: 10px;
}

.menuArea.toggle .user .coachData{
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s;
    transition-timing-function: linear;
}

.menuArea .user .coachData .main{
    width: calc(23vw - 185px);
    line-height: 27px;
    margin-bottom: 10px;
    font-size: 20px;
}

.menuArea .user .coachData .main.firstColor{
    color: var(--writeColor1);
}









/*? MENU  */
.menuArea .menu{
    position: relative;
    height: 80vh;
    min-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.menuArea .menu .header{
    padding: 0px 20px;
    height: auto;
    margin: 10px 0;
}

.menuArea .menu .header .inner{
    display: flex;
    flex-direction: row;
    justify-content: start;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 20px;
    transition: 0.4s;
}

.menuArea .menu .header .inner .icon{
    font-size: 35px;
    line-height: 60px;
    width: 80px;
    min-width: 80px;
    color: var(--writeColor1);
    text-align: center;
}

.menuArea .menu .header .inner.alt .icon{
    color: var(--primaryHoverColor);
}


.menuArea .menu .header .inner .textBox{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 8px 20px 5px 0;
    opacity: 1;
    transition: 0.4s;
}

.menuArea.toggle .menu .header .inner .textBox{
    opacity: 0;
}

.menuArea .menu .header .inner .textBox h4, .menuArea .menu .header .inner .textBox .icon{
    line-height: 18px;
    color: var(--writeColor1);
    padding-bottom: 3px;
}
.menuArea .menu .header .inner.alt .textBox h4, .menuArea .menu .header .inner.alt .textBox .icon{
    color: var(--primaryHoverColor);
}

.menuArea .menu .header .inner .textBox h6{
    color: var(--writeColor2);
}

.menuArea .menu .header .inner:hover{
    background-color: var(--secondaryHoverColor);
}

.menuArea .menu .header .inner.selected{
    background-color: var(--primaryColor);
}

.menuArea .menu .header .inner.selected h4, .menuArea .menu .header .inner.selected h6, .menuArea .menu .header .inner.selected .icon{
    color: var(--buttonWriteColor);
}








/* Card view  */
.menuArea .menu .articles{
    display: none;
    padding: 0 20px;
    height: auto;
}

.menuArea .menu .articles .header{
    padding: 0;
}

.menuArea .menu .articles .header .inner{
    background-color: var(--secondaryColor);
    height: 45px;
    padding: 0;
}

.menuArea .menu .articles .header .inner .textBox{
    padding: 8px 20px 5px 0;
}

.menuArea .menu .articles .header .inner .textBox h4, .menuArea .menu .articles .header .inner .icon{
    color: var(--primaryColor);
}
.menuArea .menu .articles .header .inner .icon{
    font-size: 21px;
    line-height: 45px;
}


.menuArea .menu .articles .header .inner:hover{
    background-color: var(--secondaryHoverColor);
}












/*? Support  */
.supportContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 60px;
    padding: 10px 0;
}

.supportContainer .supportElement{
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 20px;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.25);
    cursor: pointer;
}

.supportContainer .supportElement .supportIcon{
    font-size: 40px;
    line-height: 70px;
    transition: 0.4s;
}

.supportContainer .supportElement:hover .supportIcon{
    color: var(--primaryColor);
}



/* association result */
.editArea .content .editorElement .resultContainerAssociationOuter{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px 0;
    width: 100%;
}

.editArea .content .editorElement .resultContainerAssociation{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
}

.editArea .content .editorElement .resultContainerAssociation .innerContainer{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 5px 0;
    width: 100%;
}

.editArea .content .editorElement .resultContainerAssociation .innerContainer p{
    width: 200px;
    height: 30px;
    line-height: 30px;
}

.editArea .content .editorElement .resultContainerAssociation .innerContainer input[type="text"].mailColorInput, .editArea .content .editorElement .resultContainerAssociation .innerContainer input[type="text"].spaceInput{
    border: none;
    width: 140px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    margin: 0;
    cursor: pointer;
    background-color: var(--secondaryColor);
}

.editArea .content .editorElement .resultContainerAssociation .innerContainer .sizeLimit{
    width: 250px;
    height: 30px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.editArea .content .editorElement .resultContainerAssociation .innerContainer input[type="text"].textInput{
    width: 250px;
    background-color: var(--secondaryColor);
}


.editArea .content .editorElement .resultContainerAssociation .innerContainer input[type="color"].mailColorBox {
	-webkit-appearance: none;
    border: none;
    background-color: transparent;
    width: 80px;
    height: 30px;
    border-radius: 5px;
    margin: 0;
    cursor: pointer;
}


.editArea .content .editorElement label.associationImage{
    width: 200px;
    height: 200px;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    background-color: var(--secondaryColor);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    cursor: pointer;
    -webkit-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    -moz-box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    box-shadow: 4px 5px 18px 0px rgba(110, 112, 113, 0.32);
    cursor: pointer;
}


.editArea .content .editorElement label.associationImage:hover{
    background-color: var(--secondaryHoverColor);
}

.editArea .content .editorElement label.associationImage i{
    line-height: 200px;
    font-size: 90px;
    color: var(--writeColor2);
}

.editArea .content .editorElement input[type="text"].testMailContainer{
    background-color: var(--secondaryColor);
    margin-top: 10px;
    width: 400px;
}

/* ? /////////////////////////////////  SCREEN SIZES WIDTH   /////////////////////////////////*/

@media only screen and (max-width: 1765px){
    .editArea .content .editorElement .mediaContainer p.ultraFlexBigWidth{
        width: 450px;
    }

    .editArea .content .editorElement .mediaContainer.clearanceSelection{
        border-left: 4px solid var(--primaryColor);
        border-right: none;
        border-radius: 0;
    }

    /* Initial editor elements */    
    .editArea .content .editorElement .textContainerInitial{
        width: 70%;
    }
}


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

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 26px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 16px;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: 15px;
        line-height: 22px;
    }

    /* Width and intial setup */
    .menuArea{
        width: 27vw;
    }

    .menuArea .user .coachData .main{
        width: calc(27vw - 185px);
    }

    .editArea .headerBox.initial{
        margin-left: calc(27vw - 130px + 40px);
    }

    /* Initial editor elements */ 
    .editArea .content .editorInitElement, .editArea .content .editorElement.init{
        height: auto;
        margin-left: calc(27vw - 130px);
    }

    .editArea .content .editorInitElement.half{
        width: auto;
        margin: 0;
        margin-left: calc(27vw - 130px);
        margin-bottom: 20px;
    }

    .editArea .content .editorInitElement .backgroundImageInitial{
        display: none;
    }


    .editArea .content .editorInitElement .textContainerInitial{
        width: 100%;
    }

    .editArea .content .editorInitElement.chart canvas{
        margin: 10px 0 30px 0;
    }

    .rowBox .twoElementContainer .innerElement{
        width: 100%;
        min-width: 300px;
    }
}

/* Special for settings area */
@media only screen and (max-width: 1601px){

    .editArea .content .editorElement.half{
        width: 100%;
        max-width: 100%;
    }

    .editArea .content .editorElement .mediaContainer p.ultraFlexBigWidth{
        width: 350px;
    }

    .editArea .content .editorInitElement.chart canvas{
        margin: 10px 0 50px 0;
    }
}

/* Special for registration */
@media only screen and (max-width: 1520px){    
    .rowBox .twoElementContainer .innerElement .optionFlex input.optionInput.mail{
        width: 220px;
    }

    .rowBox .twoElementContainer .innerElement.settings{
        width: 100%;
    }
}


@media only screen and (max-width: 1280px){    
    .editArea .content .editorElement .widthLimit{
        max-width: 100%;
    }

}



/* Double entries in coach course selection */
.doubleEntry{
    color: var(--deniedColor) !important;
}



/* Snow Editor */
.ql-container.ql-snow{
    border: none;
    height: auto;
}

.ql-editor{
    font-family: var(--textFontFamily);
    min-height: 120px;
    height: auto;
    padding: 10px 15px;
    max-height: 70vh;
}

.ql-editor.ql-blank{
    padding: 10px 15px;
}

.ql-editor.ql-blank::before {
    color: #999aa09f;
    font-style: normal;
    font-size: 15px;
}

.ql-editor.plain{
    padding: 10px 0;
    min-height: auto;
    max-height: auto;
}

.ql-toolbar.ql-snow{
    font-family: var(--textFontFamily);
    border: none;
    background-color: var(--secondaryColor);
    border-radius: 10px;
}


.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{
    stroke: var(--primaryColor);
}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{
    fill: var(--primaryColor);
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--primaryColor);
}


.ql-editor li:last-of-type{
    margin-bottom: 20px;
}

.ql-editor .ql-ui{
    position: relative;
    background-color: transparent;
    padding: 0 15px;
}

.ql-editor li > .ql-ui:before {
    display: inline-block;
    margin-left: -0.5em;
    margin-right: .3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
}


.ql-editor li{
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 2px;

  text-indent: -45px;   /* zieht die erste Zeile etwas nach links */
  padding-left: 40px;   /* rückt restliche Zeilen ein */
}

.ql-editor li span{
    display: inline;
}


/* ? /////////////////////////////////  SCREEN SIZES HEIGHT   /////////////////////////////////*/
/* @media only screen and (max-height: 900px){ */
@media only screen and (max-height: 2000px){

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 26px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 16px;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: 15px;
        line-height: 22px;
      }

    
    [contenteditable].small {
        padding: 4px 10px;
    }
    
    .contenteditableLook{
        padding: 6px 10px;
    }
    
    .contenteditableLookSmall{
        padding: 4px 10px;
    }


    /* Inputs and buttons */
    input[type="text"], input[type="date"], input[type="number"], input[type="tel"], textarea{
        height: 32px;
        line-height: 32px;
        font-size: 15px;
        padding: 10px 15px;
    }

    textarea{
        height: auto;
        line-height: 20px;
    }

    .editArea .headerBox .header .headerButtonContainer .headerButton{
        height: 35px;
        line-height: 30px;
        font-size: 15px;
    }

    .editArea .content .editorElement .contentButtonContainer .contentButton{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .editArea .content .editorElement .mediaContainer button.table{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .actionsArea .actionButton{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .actionsArea .actionButton.line{
        line-height: 30px;
        height: 35px;
    }

    .actionsArea .preview input[type="text"], .actionsArea .preview input[type="number"], .actionsArea .preview input[type="tel"], .actionsArea .preview input[type="date"], .actionsArea .preview textarea{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .editArea .content .editorElement .groupEditBox .inner .element{
        height: 35px;
    }

    .editArea .content .editorElement .groupEditBox .inner .element .icon{
        font-size: 22px;
        line-height: 35px;
    }
    
    .editArea .content .editorElement .groupEditBox .inner .number{
        width: 80px;
        height: 35px;
        line-height: 35px;
        font-size: 18px;
    }

    .editArea .content .editorElement .groupEditBox .inner .deleteButton{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .editArea .content .editorElement p.articleIntro{
        font-size: 15px;
        line-height: 25px;
    }
    
    .editArea .content .editorElement p.articleIntro.url{
        font-size: 15px;
        line-height: 25px;
    }

    /* Special for registration */
    @media only screen and (max-width: 1520px){    

        .editArea .content .editorElement p.articleIntro.url{
            font-size: 14px;
            line-height: 25px;
        }
    }

    /* Preview and Action area */
    .actionsArea{
        width: 450px;
        min-width: 450px;
    }

    .actionsArea .preview .buttonBox .iconButton{
        width: 60px;
        height: 60px;
        line-height: 60px;
        margin: 10px auto;
        font-size: 35px;
    }

    .actionsArea .preview .container img{
        height: 400px;
    }
    
    .actionsArea .preview .container .inner{
        top: 11.5px;
        left: 12px;
        width: 174px;
        height: 375px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .actionsArea .preview .container .inner .previewHeader{
        position: relative;
        height: 140px;
        min-height: 140px;
        width: 100%;
        border-bottom-right-radius: 30px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    
    .actionsArea .preview .container .inner .previewHeader h5{
        font-size: 14px;
        font-weight: 500;
    }
    
    .actionsArea .preview .container .inner .text h2 {
        font-size: 13px;
        font-weight: 500;
    }
    
    .actionsArea .preview .container .inner .text blockquote{
        border-left: 3px solid var(--highlightColor);
        margin: 10px;
        padding: 0 0 0 10px;
        color: var(--writePreviewColor1);
        font-size: 11px;
        line-height: 13px;
    }

    
    .actionsArea .preview .container .inner .text ol, .actionsArea .preview .container .inner .text ul {
        padding-left: 10px;
        margin:  0 0 0 20px;
    }
}


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

    /* Width and intial setup */
    .menuArea{
        width: 300px;
    }

    p{
        font-size: 14px;
    }

    .menuArea .menu{
        padding-bottom: 50px;
    }

    .menuArea .user .profileImage{
        width: 90px;
        min-width: 90px;
        height: 90px;
        border-radius: 10px;
        margin-right: 10px;
    }

    .menuArea .user .profileImage .icon{
        font-size: 50px;
        line-height: 90px;
    }

    .menuArea .user .coachData .main{
        line-height: 20px;
        margin-bottom: 5px;
        font-size: 15px;
        width: calc(300px - 135px);
        word-break: normal;
    }

    .menuArea .user .coachData .main.firstColor{
        font-size: 17px;
    }

    .editArea .headerBox.initial{
        margin-left: calc(300px - 130px + 40px);
    }

    .editArea .content .editorInitElement, .editArea .content .editorElement.init{
        margin-left: calc(300px - 130px);
    }

    .editArea .content .editorInitElement.half{
        margin-left: calc(300px - 130px);
    }


    .menuArea .menu .header .inner{
        border-radius: 10px;
    }
    .menuArea .menu .header .inner .icon{
        font-size: 25px;
        line-height: 55px;
        width: 60px;
        min-width: 60px;
        padding-left: 0px;
        transition: 0.4s;
    }

    .menuArea .menu .header .inner .textBox{
        padding-left: 0;
    }

    .menuArea .menu .header .inner .textBox h4, .menuArea .menu .header .inner .textBox .icon{
        line-height: 18px;
        font-size: 16px;
    }

    .menuArea .menu .header .inner .textBox h6{
        font-size: 12px;
    }

    .menuArea.toggle .menu .header .inner .icon{
        font-size: 33px;
        min-width: 80px;
        padding-left: 0px;
    }

    .editArea .header h2{
        font-size: 25px;
    }


    .editArea .content .editorInitElement.chart canvas{
        margin: 10px 0 40px 0;
    }

    .backButton{
        font-size: 15px;
    }

    /* Preview and Action area */
    .actionsArea{
        width: 300px;
        min-width: 300px;
    }

    .actionsArea h4{
        font-size: 16px;
    }

    .actionsArea h4.selection{
        margin-top: 0px;
        margin-bottom: 5px;
    }

    .footer{
        padding: 20px 25px 10px 25px;
        height: auto;
        max-height: auto;
        min-height: fit-content;
    }

    .actionsArea .actionButton{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        margin: 0 0 10px 0;
    }

    .actionsArea .actionButton.line{
        line-height: 30px;
        height: 35px;
    }

    .actionsArea .actionButton.inline2{
        width: 100%;
    }
    .actionsArea .actionButton.inline2:first-child{
        margin-right: 0;
    }

    .actionsArea .actionButton.inline2:nth-of-type(even){
        margin-left: 0;
    }

    .editArea .headerBox .header .headerButtonContainer .headerButton{
        height: 35px;
        line-height: 30px;
        font-size: 15px;
    }

    .editArea .content .editorElement .contentButtonContainer .contentButton{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .editArea .content .editorElement .mediaContainer button.table{
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .editArea .content .editorElement .mediaContainer p.ultraFlexBigWidth{
        width: 250px;
    }

    .rowBox .twoElementContainer .innerElement.big{
        width: 600px;
    }
    
    .rowBox .twoElementContainer .innerElement.small{
        width: 100%;
    }

    .editArea .content .editorElement h4{
        font-size: 18px;
        margin-bottom: 5px;
    }

    .editArea .content .editorElement h3{
        font-size: 18px;
    }
    .editArea .content .editorElement input{
        margin: 0;
    }


    .rowBox .twoElementContainer .innerElement .regionFlex button{
        margin-top: 0px;
    }





    /* Settings */    
    .settingFlexContainer .cardElement .backgroundImage{
        width: 100%;
    }
    
    .settingFlexContainer .cardElement .backgroundImage .icon{
        font-size: 72px;
        line-height: 130px;
    }

    /* Preview & action */
    .actionsArea .preview .buttonBox .iconButton{
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 10px;
        font-size: 35px;
    }

    .actionsArea .preview .container img{
        height: 400px;
    }


    .actionsArea .preview .container .inner{
        position: absolute;
        top: 11px;
        left: 12px;
        width: 174px;
        height: 377px;
        background-color: var(--backgroundPreviewColor1);
    
        border-bottom-left-radius: 19px;
        border-bottom-right-radius: 19px;
        border-top-left-radius: 19px;
        border-top-right-radius: 19px;
    }

    .actionsArea .preview .previewFlexInner{
        height: auto;
        max-height: 27vh;
    }

    .actionsArea .preview .buttonBox{
        display: none;
    }

    .actionsArea .eventsCard{
        height: 55px;
    }

    .actionsArea .eventsCard .image{
        height: 55px;
        min-height: 55px;
        width: 40px;
        max-width: 40px;
        margin-right: 10px;
    }

    .actionsArea .eventsCard .text p{
        line-height: 14px;
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
    }
    
    .actionsArea .eventsCard .text p.title{
        font-size: 12px;
        font-weight: 600;
    }

    .actionsArea .eventsCard .close{
        display: none;
    }



    .actionsArea .preview .help h5{
        line-height: 23px;
        font-size: 15px;
        margin-bottom: 7px;
    }

    .memberSearchContainer .closeMemberSearch{
        right: 10px;
        width: 30px;
        font-size: 20px;
        top: 2px;
    }

}





/*===== All Preloader Style =====*/
.preloader {
    /* Body Overlay */
    position: fixed;
    top: 0;
    left: 0;
    display: table;
    height: 100%;
    width: 100%;
    /* Change Background Color */
    background: #fff;
    z-index: -1;
  }


  .preloader .loader {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .preloader .loader .ytp-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    margin-left: -32px;
    z-index: 18;
    pointer-events: none;
  }
  .preloader .loader .ytp-spinner .ytp-spinner-container {
    pointer-events: none;
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
    -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
    -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
    -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
    animation: ytp-spinner-linspin 1568.23529647ms linear infinite;
  }
  .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }
  .preloader
    .loader
    .ytp-spinner
    .ytp-spinner-container
    .ytp-spinner-rotator
    .ytp-spinner-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    right: 50%;
  }
  .preloader
    .loader
    .ytp-spinner
    .ytp-spinner-container
    .ytp-spinner-rotator
    .ytp-spinner-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    left: 50%;
  }
  .preloader .loader .ytp-spinner-circle {
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 100%;
    border-style: solid;
    /* Spinner Color */
    border-color: var(--primaryColor) var(--primaryColor) #eceff8;
    border-radius: 50%;
    border-width: 6px;
  }
  .preloader .loader .ytp-spinner-left .ytp-spinner-circle {
    left: 0;
    right: -100%;
    border-right-color: #eceff8;
    -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }
  .preloader .loader .ytp-spinner-right .ytp-spinner-circle {
    left: -100%;
    right: 0;
    border-left-color: #eceff8;
    -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  }
  
  /* Preloader Animations */
  @-webkit-keyframes ytp-spinner-linspin {
    to {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes ytp-spinner-linspin {
    to {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes ytp-spinner-easespin {
    12.5% {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    25% {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
    }
    37.5% {
      -webkit-transform: rotate(405deg);
      -moz-transform: rotate(405deg);
      -ms-transform: rotate(405deg);
      -o-transform: rotate(405deg);
      transform: rotate(405deg);
    }
    50% {
      -webkit-transform: rotate(540deg);
      -moz-transform: rotate(540deg);
      -ms-transform: rotate(540deg);
      -o-transform: rotate(540deg);
      transform: rotate(540deg);
    }
    62.5% {
      -webkit-transform: rotate(675deg);
      -moz-transform: rotate(675deg);
      -ms-transform: rotate(675deg);
      -o-transform: rotate(675deg);
      transform: rotate(675deg);
    }
    75% {
      -webkit-transform: rotate(810deg);
      -moz-transform: rotate(810deg);
      -ms-transform: rotate(810deg);
      -o-transform: rotate(810deg);
      transform: rotate(810deg);
    }
    87.5% {
      -webkit-transform: rotate(945deg);
      -moz-transform: rotate(945deg);
      -ms-transform: rotate(945deg);
      -o-transform: rotate(945deg);
      transform: rotate(945deg);
    }
    to {
      -webkit-transform: rotate(1080deg);
      -moz-transform: rotate(1080deg);
      -ms-transform: rotate(1080deg);
      -o-transform: rotate(1080deg);
      transform: rotate(1080deg);
    }
  }
  @keyframes ytp-spinner-easespin {
    12.5% {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    25% {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
    }
    37.5% {
      -webkit-transform: rotate(405deg);
      -moz-transform: rotate(405deg);
      -ms-transform: rotate(405deg);
      -o-transform: rotate(405deg);
      transform: rotate(405deg);
    }
    50% {
      -webkit-transform: rotate(540deg);
      -moz-transform: rotate(540deg);
      -ms-transform: rotate(540deg);
      -o-transform: rotate(540deg);
      transform: rotate(540deg);
    }
    62.5% {
      -webkit-transform: rotate(675deg);
      -moz-transform: rotate(675deg);
      -ms-transform: rotate(675deg);
      -o-transform: rotate(675deg);
      transform: rotate(675deg);
    }
    75% {
      -webkit-transform: rotate(810deg);
      -moz-transform: rotate(810deg);
      -ms-transform: rotate(810deg);
      -o-transform: rotate(810deg);
      transform: rotate(810deg);
    }
    87.5% {
      -webkit-transform: rotate(945deg);
      -moz-transform: rotate(945deg);
      -ms-transform: rotate(945deg);
      -o-transform: rotate(945deg);
      transform: rotate(945deg);
    }
    to {
      -webkit-transform: rotate(1080deg);
      -moz-transform: rotate(1080deg);
      -ms-transform: rotate(1080deg);
      -o-transform: rotate(1080deg);
      transform: rotate(1080deg);
    }
  }
  @-webkit-keyframes ytp-spinner-left-spin {
    0% {
      -webkit-transform: rotate(130deg);
      -moz-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
      -o-transform: rotate(130deg);
      transform: rotate(130deg);
    }
    50% {
      -webkit-transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
    to {
      -webkit-transform: rotate(130deg);
      -moz-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
      -o-transform: rotate(130deg);
      transform: rotate(130deg);
    }
  }
  @keyframes ytp-spinner-left-spin {
    0% {
      -webkit-transform: rotate(130deg);
      -moz-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
      -o-transform: rotate(130deg);
      transform: rotate(130deg);
    }
    50% {
      -webkit-transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
    to {
      -webkit-transform: rotate(130deg);
      -moz-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
      -o-transform: rotate(130deg);
      transform: rotate(130deg);
    }
  }
  @-webkit-keyframes ytp-right-spin {
    0% {
      -webkit-transform: rotate(-130deg);
      -moz-transform: rotate(-130deg);
      -ms-transform: rotate(-130deg);
      -o-transform: rotate(-130deg);
      transform: rotate(-130deg);
    }
    50% {
      -webkit-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -o-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    to {
      -webkit-transform: rotate(-130deg);
      -moz-transform: rotate(-130deg);
      -ms-transform: rotate(-130deg);
      -o-transform: rotate(-130deg);
      transform: rotate(-130deg);
    }
  }
  @keyframes ytp-right-spin {
    0% {
      -webkit-transform: rotate(-130deg);
      -moz-transform: rotate(-130deg);
      -ms-transform: rotate(-130deg);
      -o-transform: rotate(-130deg);
      transform: rotate(-130deg);
    }
    50% {
      -webkit-transform: rotate(5deg);
      -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      -o-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    to {
      -webkit-transform: rotate(-130deg);
      -moz-transform: rotate(-130deg);
      -ms-transform: rotate(-130deg);
      -o-transform: rotate(-130deg);
      transform: rotate(-130deg);
    }
  }


/* TABLETS */
@media only screen and (max-width: 1035px){

    .editArea .content .editorElement .contentButtonContainer{
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: auto;
        width: 100%;
    }

    .editArea .content .editorElement .mediaContainer.headerSelection{
        flex-wrap: nowrap;
        min-width: auto;
        overflow-x: auto;
        padding-bottom: 0px;
        margin-bottom: 20px;
    }
}