/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*= require fonts */

body {
    font-family:  "Helvetica Neue LT", "Montserrat", Arial, Helvetica, "Noto Sans", sans-serif;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    color: #FFF;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
}

.styled-form label {
    font-family: 'Montserrat', sans-serif;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
    display: block;
}

.styled-form input {
    width: 100%;
    border-bottom: 1px solid #ffffff2c;
    margin-bottom: 30px;
    padding: 10px 0;
    outline: none;
    box-shadow: none;
}

.styled-form textarea {
    width: 100%;
    border-bottom: 1px solid #ffffff2c;
    margin-bottom: 30px;
    padding: 10px 0;
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 400px;
    outline: none;
    box-shadow: none;
}

.styled-form select {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #ffffff2c !important;
    margin-bottom: 30px;
    padding: 10px 0;
    background-color: transparent;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 0.5L8 7.5L1 0.499999" stroke="white"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: white;
    border-radius: 0;
    outline: none;
}

.styled-form select option {
  background-color: #222 !important;
  color: #fff !important;
}

.styled-form input[type="date"] {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.3125 8.5H3.89583C3.31004 8.5 2.83333 8.97671 2.83333 9.5625V10.9792C2.83333 11.565 3.31004 12.0417 3.89583 12.0417H5.3125C5.89829 12.0417 6.375 11.565 6.375 10.9792V9.5625C6.375 8.97671 5.89829 8.5 5.3125 8.5ZM5.66667 10.9792C5.66667 11.1747 5.50729 11.3333 5.3125 11.3333H3.89583C3.70104 11.3333 3.54167 11.1747 3.54167 10.9792V9.5625C3.54167 9.367 3.70104 9.20833 3.89583 9.20833H5.3125C5.50729 9.20833 5.66667 9.367 5.66667 9.5625V10.9792ZM13.8125 1.41667H12.75V0.354167C12.75 0.158667 12.5913 0 12.3958 0C12.2003 0 12.0417 0.158667 12.0417 0.354167V1.41667H4.95833V0.354167C4.95833 0.158667 4.79967 0 4.60417 0C4.40867 0 4.25 0.158667 4.25 0.354167V1.41667H3.1875C1.43012 1.41667 0 2.84679 0 4.60417V13.8125C0 15.5699 1.43012 17 3.1875 17H13.8125C15.5699 17 17 15.5699 17 13.8125V4.60417C17 2.84679 15.5699 1.41667 13.8125 1.41667ZM3.1875 2.125H13.8125C15.1796 2.125 16.2917 3.23708 16.2917 4.60417V5.66667H0.708333V4.60417C0.708333 3.23708 1.82042 2.125 3.1875 2.125ZM13.8125 16.2917H3.1875C1.82042 16.2917 0.708333 15.1796 0.708333 13.8125V6.375H16.2917V13.8125C16.2917 15.1796 15.1796 16.2917 13.8125 16.2917Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 35px;
  position:relative;
}

.styled-form input[type="date"]::-webkit-inner-spin-button,
.styled-form input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 50;
  transform:scaleX(-1);
  top: 10px;
  width: 110%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  height: 20px;
  opacity: 0;   
}

.styled-form input[type="time"] {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="fi_2088617" enable-background="new 0 0 443.294 443.294" height="512" viewBox="0 0 443.294 443.294" width="512" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"></path><path fill="white" d="m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"></path></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 35px;
  position:relative;
}

.styled-form input[type="time"]::-webkit-inner-spin-button,
.styled-form input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 50;
  transform:scaleX(-1);
  top: 10px;
  width: 110%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  height: 20px;
  opacity: 0;   
}

input[type="submit"], .button {
  --border-width: 2px;
  --border-radius: 22px;
  --color-1: #0089C8;
  --color-2: #00E1FF;
}

/* code */

input[type="submit"], .button {
  color: #fff;
  min-width: 120px;
  padding: 10px 18px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  background: linear-gradient(to right, var(--color-1), var(--color-2)),
    linear-gradient(to right, var(--color-1), var(--color-2));
  background-position: var(--border-radius) 0, var(--border-radius) 100%;
  background-repeat: no-repeat;
  background-size: calc(100% - var(--border-radius) - var(--border-radius))
    var(--border-width);
  border-radius: var(--border-radius);
  border: none;
}

input[type="submit"], .button:before,
input[type="submit"], .button:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--border-radius) + 2px);
  top: 0;
  bottom: 0;
}

input[type="submit"], .button:before {
  left: 0;
  border: var(--border-width) solid var(--color-1);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-right-color: transparent;
}

input[type="submit"], .button:after {
  right: 0;
  border: var(--border-width) solid var(--color-2);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-left-color: transparent;
}
input[type="submit"]:hover, .button:hover {
  background-color: #006ba3;
  transform: scale(1.05);
}

/* needed to make cqw work */
.container {
  container-type: inline-size;
  container-name: main;
}

.ecard-theme-display header{
  position: absolute;
  max-width: 100%;
}
.ecard-theme-display .header-bg-gradient {
  z-index: 1;
}

/* Tagify Custom Styles */
.tagify{    
  width: 100%;
  margin-bottom: 20px;
  border: none!important;
  --tags-border-color: #ffffff2c;
  --tags-hover-border-color: #ffffff60;
  --tags-focus-border-color: #00e1ff;
  --placeholder-color: #ffffff97!important;
  --placeholder-color-focus: #ffffffa3!important;
}


.tagify--outside{
    border: 0;
}

.tagify--outside .tagify__input{
  width: 100%;
  border-bottom: 1px solid #ffffff2c;
  padding: 10px 0;
  order: -1;
}



.tagify__tag {
  background: linear-gradient(135deg, #0089c8, #00e1ff);
  color: white;
  border: none;
  margin-bottom: 10px;
  margin-right: 5px;
  font-size: 11px;
}

.tagify__tag:hover {
  background: linear-gradient(135deg, #006ba3, #00b8d4);
}

.tagify__tag__removeBtn {
  color: white;
}

.tagify__tag__removeBtn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.tagify__input {
  margin:0!important;
}



.theme-preview .lottie-player {
  position: absolute!important;
}