/* This is where the style of buttons, for example, comes in */
.portrait-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color-dark-gray); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.portrait-overlay-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 315px; */
    gap: 16px;
  
}

.portrait-overlay h1 {
  color: white;
  font-size:40px; 
  text-align: center;
}

.vector-login,.vector-sign-up{
  background-image: url(../assets/icons/vector-horizontal.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 5px;
  width: 150px;
}

.portrait-overlay-vector{
  height: 3px;
  width: 360px;
  background-color: var(--blue);
  border-radius: 16px;
}

.name-color-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  aspect-ratio: 1 / 1;
  border: 2px solid #ffffff;
  color: white;
  background-color: var(); /*background color from style.css */
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-400);
  line-height: 14.4px;
  border-radius: 50%;
}

textarea,
input,
select,
button {
  border: unset;
  cursor: pointer;
}

/* all properties for buttons */
button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

button:disabled:hover,
button[disabled]:hover {
  background-color: var(--primary-color-gray);
  cursor: not-allowed;
  scale: unset;
  box-shadow: unset;
  border: var(--border-buttons-gray);
  scale: unset;
}

.close-btn,
.close-button-popup,
.close-button {
  display: grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1 /1;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.close-btn {
  position: absolute;
  top: 48px;
  left: 750px;
}

.close-button-popup {
  position: absolute;
  top: 60px;
  right: 60px;
}

.close-btn:hover,
.close-button-popup:hover,
.close-button:hover {
  background-color: #f0f0f0;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 24px;
}

.action-box {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.action-box span {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  width: 55px;
}

.action-box:hover span {
  color: var(--blue);
  font-weight: var(--font-weight-700);
}

.edit-icon,
.delete-icon {
  width: 24px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-icon img,
.delete-icon img {
  display: block;
}

.action-box.edit:hover .edit-icon img {
  content: url('../assets/icons/editblue.svg');
  transform: translateY(0.6px);
}

.action-box.delete:hover .delete-icon img {
  content: url('../assets/icons/delete.svg');
}

.button-cancel-white-gray:hover img {
  content: url('../assets/icons/x-mark-blue.svg');
}

/* button primary gray */
.button-primary-gray {
  white-space: nowrap;
  border-radius: var(--border-radius-buttons);
  background-color: var(--primary-color-gray);
  box-shadow: none;
  color: white;
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-16);
  padding: 15px 24px 15px 24px;
  font-weight: var(--font-weight-400);
  border: var(--border-buttons-gray);
}

.button-primary-gray:hover {
  background-color: var(--blue);
  box-shadow: var(--box-shadow-button);
  border: var(--border-buttons-blue);
}

/* button primary dark gray */
.button-primary-dark-gray {
  white-space: nowrap;
  border-radius: var(--border-radius-buttons);
  background-color: var(--primary-color-dark-gray);
  box-shadow: none;
  color: white;
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-16);
  padding: 15px 24px 15px 24px;
  font-weight: var(--font-weight-400);
}




.button-primary-dark-gray:hover {
  background-color: var(--blue);
  box-shadow: var(--box-shadow-button);
}

/* button cancel white gray */
.button-cancel-white-gray {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  border-radius: var(--border-radius-buttons);
  border: var(--border-buttons-gray);
  background-color: white;
  box-shadow: none;
  color: var(--primary-color-gray);
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-18-21);
  padding: 16px;
  font-weight: var(--font-weight-400);
}

.button-cancel-white-gray:hover {
  scale: var(--scale-hover);
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--box-shadow-button);
}

/* button create task gray */
.button-create-task-gray {
  display: flex;
  align-items: center;
  border: var(--border-buttons-gray);
  gap: 4px;
  white-space: nowrap;
  border-radius: var(--border-radius-input-fields);
  background-color: var(--primary-color-gray);
  box-shadow: none;
  color: white;
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-18-21);
  padding: var(--font-size-12-16);
  font-weight: var(--font-weight-700);
}

.button-create-task-gray:hover {
  scale: var(--scale-hover);
  color: white;
  box-shadow: var(--box-shadow-button);
  background-color: var(--blue);
  border: var(--border-buttons-blue);
}

/* button add new contact gray */
.button-add-new-contact-gray {
  display: flex;
  align-items: center;
  border: var(--border-buttons-gray);
  gap: 16px;
  white-space: nowrap;
  border-radius: var(--border-radius-input-fields);
  background-color: var(--primary-color-gray);
  box-shadow: none;
  color: white;
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-18-21);
  padding: 12px 16px 12px 16px;
  font-weight: var(--font-weight-700);
}

.button-add-new-contact-gray:hover {
  scale: var(--scale-hover);
  color: var(--blue);
  box-shadow: var(--box-shadow-button);
  border: var(--border-buttons-blue);
}

/* button add task gray */
.button-add-task-gray {
  border: var(--border-buttons-gray);
  gap: 16px;
  white-space: nowrap;
  border-radius: var(--border-radius-input-fields);
  background-color: var(--primary-color-gray);
  box-shadow: none;
  color: white;
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-21);
  padding: 12px 16px 12px 16px;
  font-weight: var(--font-weight-700);
}

.button-add-task-gray:hover {
  scale: var(--scale-hover);
  color: var(--blue);
  box-shadow: var(--box-shadow-button);
  border: var(--border-buttons-blue);
}

/* button delete white */
.button-delete-white {
  border: var(--border-buttons-gray);
  gap: 4px;
  white-space: nowrap;
  border-radius: var(--border-radius-buttons);
  background-color: white;
  box-shadow: none;
  color: var(--primary-color-gray);
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-21);
  padding: 15px 24px 15px 24px;
  font-weight: var(--font-weight-400);
}

.button-delete-white:hover {
  scale: var(--scale-hover);
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--box-shadow-button);
}

/* button clear white */
.button-clear-white {
  display: flex;
  align-items: center;
  border: var(--border-buttons-gray);
  gap: 4px;
  white-space: nowrap;
  border-radius: var(--border-radius-input-fields);
  background-color: white;
  box-shadow: none;
  color: var(--primary-color-gray);
  transition: var(--transition-hover-effect);
  font-size: var(--font-size-18-21);
  padding: var(--font-size-12-16);
  font-weight: var(--font-weight-400);
}

.button-clear-white:hover {
  scale: var(--scale-hover);
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: var(--box-shadow-button);
}

.button-clear-white-img-box,
.button-cancel-white-gray-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  aspect-ratio: 1 / 1;
}

.button-clear-white-img-box img {
  display: block;
}

.button-cancel-white-gray img {
  display: block;
}

.button-clear-white img.button-clear-white-hover-img {
  display: none;
}

.button-clear-white:hover img.button-clear-white-standard-img {
  display: none;
}

.button-clear-white:hover img.button-clear-white-hover-img {
  display: block;
}

/* button save gray */
.button-save-gray {
  gap: 4px;
  background-color: var(--primary-color-gray);
  color: white;
  box-shadow: none;
  padding: 15px 24px 15px 24px;
  border-radius: var(--border-radius-buttons);
  white-space: nowrap;
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-16-21);
  transition: var(--transition-hover-effect);
  border: var(--border-buttons-gray);
}

.button-save-gray:hover {
  scale: var(--scale-hover);
  background-color: var(--blue);
  box-shadow: var(--box-shadow-button);
  border: var(--border-buttons-blue);
}

/* all properties for input */

.form {
  width: 100%;
  margin-top: 16px;
  gap: var(--form-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-base-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--input-gap);
}

.input-base {
  color: black;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-20);
  width: 100%;
  height: clamp(43px, 42px + 0.3125vw, 48px);
  padding: 12px 21px 12px 21px;
  border-radius: var(--border-radius-input-fields);
  border: var(--border-input-fields);
}

.input-base-icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  right: 21px;
  transform: translateY(-48%);
  width: 24px;
  aspect-ratio: 1 / 1;
  object-fit: scale-down;
}

.input-base[type='email']:focus-visible,
.input-base[type='password']:focus-visible,
.input-base[type='text']:focus-visible,
.input-base[type='date']:focus-visible {
  outline: none;
  border: 1px solid var(--blue);
  opacity: 1;
}


.input-base[type='text']:invalid:not(:placeholder-shown),
.not-valide-error {
  outline: none;
  border: 1px solid var(--red);
  opacity: 1;
}


.error-message-name,
.error-message-confirm-password,
.error-message-log-in,
.error-message-email,
.error-message-email-not-valide-sign-up,
.error-message-email-not-valide-login,
.error-message-password-sign-up,
.error-message-password-log-in {
  position: absolute;
  top: 100%;
  left: 0;
  color: red;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  white-space: nowrap;
}

.error-message-name {
  display: none;
}

.error-message-confirm-password {
  display: none;
}

.error-message-log-in {
  display: none;
}

.error-message-email {
  display: none;
}

.error-message-email-not-valide-sign-up{
  display: none;
}

.error-message-email-not-valide-login{
  display: none;
}

.error-message-password-sign-up{
  display: none;
}

.error-message-password-log-in{
  display: none;
}

.input-base::placeholder {
  transform: translateY(-1px);
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-16-20);
  color: var(--light-gray-placeholder);
}

.arrow-left-sign-up {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 60px;
  left: clamp(35px, 26px + 2.8125vw, 80px);
}

.arrow-left,
.arrow-left-sign-up {
  width: 35px;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  cursor: pointer;
}

.arrow-left{
margin-top: 10px;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: center;
}



.arrow-left img,
.arrow-left-sign-up img {
  width: 21px;
}

.arrow-left:hover,
.arrow-left-sign-up:hover {
  background-color: var(--light-gray-bg);
}

.arrow-left:hover img,
.arrow-left-sign-up:hover img {
  transform: scale(1.1);
}

.popup-overlay-small-gray {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
  animation: overlay-fade-in 300ms ease-in-out forwards;
  z-index: 999;
  display: none;
}

@keyframes overlay-fade-in {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.popup-small-gray {
  transform: translateY(50vh);
  animation: popup 300ms ease-in-out forwards;
  animation-delay: 0s;
  position: absolute;
  background-color: var(--primary-color-gray);
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: 0px 0px 4px 0px #00000026;
  z-index: 1000;
}

@keyframes popup {
  from {
    transform: translateY(50vh);
  }

  to {
    transform: translateY(0);
  }
}

.popup-small-gray span {
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-20);
  line-height: 120%;
  color: white;
}

.portrait-overlay{
  display: none;
}

@media (max-width: 768px) and (orientation: landscape) and (pointer: coarse) {
  .portrait-overlay{
    display: flex;
  }
}

@media only screen and (max-width: 375px){
  .arrow-left-sign-up {
    position: absolute;
    top: 20px;
  }

  .arrow-left-sign-up {
    width: 32px;
  }
  
  .arrow-left-sign-up img {
    width: 19px;
  }

}