:root {
    --orange: #FF7A00;
    --pink: #FF5EB3;
    --blue: #6E52FF;
    --violet: #9327FF;
    --babyblue: #00BEE8;
    --body-background-grey: #f5f5f5;
    --ligh-tgreen: #1FD7C1;
    --dark-orange: #FF745E;
    --brown: #FFA35E;
    --pink: #FC71FF;
    --med-orange: #FFC701;
    --med-blue: #0038FF;
    --emailblau: #007CEE;
    --neon-green: #C3FF2B;
    --yellow: #FFE62B;
    --light-red: #FF4646;
    --light-orange: #FFBB2B; 
    --deep-grey: #2A3647;
    --deepest-grey: #091931;
    --button-hover: #29ABE2;
    --links-grey: #cdcdcd;
    --black: #000000;
    --white: #ffffff;
}

body {
    width: 100%;
    margin: 0;
    background-color: var(--body-background-grey);
}

*{
    font-family: 'Inter';
}

svg {
    max-width: 32px;
    max-height: 32px;
}

/* input,
button {
    border: unset;
    font-size: 16px;
} */

.container {
    max-width: 1920px;
    display: flex;
    height: 85vh;
    margin-left: 230px;
}

.sidebar {
    width: 456px;
    padding: 20px;
    height: 100%;
    /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.548); */
    overflow-y: auto;
}

.add-contact-btn {
    display: flex;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--white);
    background-color: var(--deepest-grey);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    align-items: center;
    justify-content: center;

}

.add-contact-btn:disabled {
    cursor: not-allowed;
    background-color: var(--deep-grey);
}

.add-contact-btn:disabled:hover {
    background-color: var(--deep-grey);
}

.add-contact-btn:hover {
    background-color: var(--button-hover);
}

.add-contact-btn svg{
    margin-left: 16px;
}

.alphabet-list {
    margin-top: 20px;
    /* margin-bottom: 180px; */
}

.alphabet {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgb(133, 127, 127, 0.2);
    padding: 20px;
    color: var(--deep-grey)

}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 10px;

}

.contact-item:hover {
    background-color: rgba(175, 171, 171, 0.2);
    cursor: pointer;
}

.contact-item.active {
    background-color: #091931;
    color: #ffffff;
}

.contact-container {
    position: relative;
    overflow: hidden;
    margin-top: 54px;
}

.contact-details {
    position: relative;
    right: -100%;
    transition: right 0.75s ease-in-out;
    display: flex;
}

.contact-details.show {
    right: 0;
    margin-top: 40px;
    margin-left: 40px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 14px;
}

.contact-details .avatar {
    margin-bottom: 16px;
    font-size: 21px;
    height: 120px;
    width: 120px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-left: 32px;
}

.contact-name {
    font-size: 20px;
    font-weight: 400;
    color: var(--black);
}

.contact-email {
    font-size: 16px;
    color: var(--emailblau);
    font-weight: 400;
    line-height: 19.2px;
   
}

.contact-details {
    position: relative;
    right: -100%;
    transition: right 0.5s ease-in-out;
    display: flex;
}

.contact-details.show {
    right: 0;
    margin-top: 40px;
    margin-left: 40px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 14px;
}

.contact-details-big .avatar {
    font-size: 47px;
    height: 120px;
    width: 120px;
    font-weight: 500;
    line-height: 56.4px;
    border-radius: 50%;
}

.contact-info-big {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-name-big {
    font-size: 47px;
    font-weight: 500;
    color: var(--black);
    line-height: 56.4px;
    font-family: 'Inter';
}

.contact-email-big {
    font-size: 16px;
    color: var(--emailblau);
    font-weight: 400;
    line-height: 19.2px;
    cursor: pointer;
}

.contact-email-big a {
    text-decoration: none;
}

.contact-email-big a:visited {
    color: var(--emailblau);
}

.contact-email-big a:focus {
    color: var(--emailblau);
}

.contact-email-big a:hover {
    color: var(--emailblau);
}

.contact-details-big {
    display: flex;
    align-items: center;
}

.footer-link {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
}

span.mobile a {
    text-decoration: none;
}

.edit-big {
    background-image: url(../IMGicons/edit.svg);
}

.delete-big {
    background-image: url(../IMGicons/delete.svg);
}    

.edit-big, .delete-big {
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    padding-left: 24px;
    margin-right: 32px;
    font-size: 16px;
    font-weight: 400;
    color: var(--deep-grey);
}

.edit-big {
    padding-left: 34px;
}

.edit-big:visited, .delete-big:visited {
    color: var(--deep-grey);
}

.edit-big:active, .delete-big:active {
    color: var(--deep-grey);
}

.delete-big a, .edit-big a {
    text-decoration: none;
    color: var(--deep-grey);
}

.delete-big:hover, .edit-big:hover {
    text-decoration: none;
    color: var(--babyblue);
    cursor: pointer;
    filter: invert(57%) sepia(81%) saturate(749%) hue-rotate(152deg) brightness(98%) contrast(97%);
}

.flex-card-big {
    display: flex;
    align-items: center;
}

.info-big {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    gap: 59px;
    margin-top: 32px;
    color: var(--black);
}

.phone-big,
.email-big {
    font-weight: 700;
    font-size: 16px;
    line-height: 19.2px;
    margin-top: 32px;
    color: var(--black);
    padding-bottom: 16px;
}


/************************************************/
.main-content {
    flex-grow: 1;
    padding: 40px;
    background-color: #f5f5f5;
}

h1 {
    margin: 0;
    font-size: 61px;
    color: var(--black);
}

h1.mobile,
.subheader-mobile {
    margin-left: 50px;
    color: var(--white);
}

.mobile-underline {
    margin-left: 50px;
    border-bottom: 3px solid var(--button-hover);
    height: 3px;
    width: 90px;
}

p {
    font-size: 18px;
    color: #777;
}

p.subheader-contact {
    font-size: 20px;
    color: #777;
    font-weight: 400;
    font-family: 'Inter';
    line-height: 24px;
    color: var(--black);
}

.vertical-seperator {
    border-left: 3px solid var(--babyblue);
    height: 59px;
    margin: 0 20px;
}

.contact-flex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.button-flex {
    display: flex;
    align-items: center;
    
}

span.subheadline {
    font-weight: 400;
    font-size: 27px;
    color: var(--deep-grey);
}

.help-icon-header {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.help-icon-header:hover {
    width: 28px;
    height: 28px;
}

.user-image-header {
    width: 56px;
    height: 56px;
}

  .spinner {
    --uib-size: 37px;
    --uib-color: black;
    --uib-speed: .9s;
    --uib-bg-opacity: .1;
    height: var(--uib-size);
    width: var(--uib-size);
    transform-origin: center;
    overflow: visible;
  }

  .car {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 15, 85;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: travel var(--uib-speed) linear infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
    transition: stroke 0.75s ease;
  }

  .track {
    stroke: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: stroke 0.75s ease;
  }

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

    100% {
      stroke-dashoffset: -100;
    }
  }

#spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

#overlayEdit,
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(65, 64, 64, 0.2);
    z-index: 999;
  }

  .contactForm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 592px;
    width: 95%;
    background-color: white;
    border-radius: 20px;
    display: flex; 
    overflow: hidden; 
}

p.create-mobile {
    color: var(--white);
}

.contactFormLeft {
    border-top-left-radius: 20px;
    width: 40%;
    height: 100%; 
    background-color: #2A3647;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
}

.contactFormLeft img {
    margin-left: 50px;
}

form.addContact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.contactinputfieldsedit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.joinnnlogocontact {
    height: 66px;
    width: 55px;
    margin-bottom: 10px;
}

.addcontacttext {
    width: 371px;
    height: 129px;
    margin-bottom: 20px;
}

.vector5 {
    width: 90px;
}

.d-none {
    display: none;
}

.d-non {
    display: none;
}

.contactFormRight {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    padding-right: 20px;
    height: 100%;
    width: 60%;
}

.contactFormRight img {
    max-width: 100%;
    height: auto;
    margin-left: 100px;
}

.contactinputfields {
    display: flex;
    flex-direction: column;
    margin-left: 90px;
    align-items: flex-start;
    justify-content: space-between; 
}

.form-group {
    display: ruby;
    margin-bottom: 24px;
}

.inputfiledsname {
    background-image: url('../IMGicons/contacticons/person.png');
    padding: 13px;
    font-size: 20px;
    width: 322px;
    height: 20px;
    border-radius: 10px;
    border-color: rgba(128, 125, 125, 0.1);
    background-repeat: no-repeat;
    background-position: right 10px center; 
   
    transition: border-color 0.75s ease;
}

.inputfiledsname::placeholder { 
    color: rgba(128, 125, 125, 0.5); 
}


.inputfiledsemail {
    background-image: url('../IMGicons/contacticons/mail.png');
    padding: 13px;
    font-size: 20px;
    width: 322px;
    height: 20px;
    border-radius: 10px;
    border-color: rgba(128, 125, 125, 0.1);
    background-repeat: no-repeat;
    background-position: right 10px center; 
    transition: border-color 0.75s ease;
}

.inputfiledsemail::placeholder { 
    color: rgba(128, 125, 125, 0.5); 
}


.inputfiledsphone {
    background-image: url('../IMGicons/contacticons/call.png');
    padding: 13px;
    font-size: 20px;
    width: 322px;
    height: 20px;
    border-radius: 10px;
    border-color: rgba(128, 125, 125, 0.1);
    background-repeat: no-repeat;
    background-position: right 10px center; 
   
    transition: border-color 0.75s ease;
}


.contactbuttons {
    display: flex;
    align-items: center;

}

.contactForm {
    max-width: 1220px;
}

.cancelbutton {
    cursor: pointer;
    font-size: 20px;
    width: 120px;
    height: 52px;
    background-color: var(--white);
    border: 1px solid var(--deep-grey);
    border-radius: 10px;
    margin-right: 20px;
    color: black;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.cancelbutton:hover {
    border-color:  var(--babyblue);
    color:  var(--babyblue); 
}

.cancelbuttonEdit {
    cursor: pointer;
    font-size: 20px;
    width: 120px;
    height: 52px;
    background-color: var(--white);
    border: 1px solid var(--deep-grey);
    border-radius: 10px;
    margin-right: 20px;
    color: black;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.cancelbuttonEdit:hover {
    border-color:  var(--babyblue);
    color:  var(--babyblue); 
}

.createbutton {
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    color: white;
    width: 190px;
    height: 52px;
    border-radius: 10px;
    background-color: #2A3648;
    border: unset;
}

.createbutton img {
    margin: 0;
}

.createbutton:hover {
    background-color: var(--babyblue);
    border-color: transparent;
}

.subheader-edit-mobile {
    display: none;
}

.mobile-edit-underline {
    padding-top: 16px;
    border-bottom: 3px solid var(--button-hover);
    height: 3px;
    width: 90px;
    position: relative;
    left: 50px;
}

img.logo-overlay {
    margin-left: 50px;
    width: 54px;
    height: 66px;
    
    padding-bottom: 50px;
}

.saveButton {
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    color: white;
    width: 190px;
    height: 52px;
    border-radius: 10px;
    background-color: #2A3648;
    border: unset;
}

.saveButton img {
    margin: 0;
}

.saveButton:hover {
    background-color: var(--babyblue);
    border-color: transparent;
}

.closeX {
    height: 32px;
    width: 32px;
    position: fixed;
    top: 20px;
    right: 20px;
}

.closeX:hover {
    cursor: pointer;
    filter: invert(84%) sepia(5%) saturate(12%) hue-rotate(314deg) brightness(94%) contrast(103%);
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-right {
    0% {
        transform: translate(1000px, -50%);
        opacity: 0;
    }
    100% {
        transform: translate(0, -50%);
        opacity: 1;
    }
}
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  

.slide-out-right {
	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }

.toast {
    background-color: var(--deepest-grey);
    color: var(--white);
    border-radius: 20px;
    z-index: 99;
    width: 280px;
    height: 60px;
    margin: 0 auto;
    bottom: 80px;
    position: relative;
    display: flex;
    justify-content: center;
}

.toast-text {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px;
}

.error-messagename {
    color: red;
    font-size: 0.9em;
    display: none; /* Standardmäßig ausgeblendet */
    margin-top: 5px;
    white-space: normal; /* Erlaubt Zeilenumbruch */
    word-wrap: break-word;
    width: 300px;
}


.error-messageemail {
    color: red;
    font-size: 0.9em;
    display: none; /* Standardmäßig ausgeblendet */
    margin-top: 5px;
    white-space: normal; /* Erlaubt Zeilenumbruch */
    word-wrap: break-word;
    width: 300px;
}

.error-messagephone {
    color: red;
    font-size: 0.9em;
    display: none; /* Standardmäßig ausgeblendet */
    margin-top: 5px;
    white-space: normal; /* Erlaubt Zeilenumbruch */
    word-wrap: break-word;
    width: 300px;
}




.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-out-bottom {
	-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
  }

@-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }