/* ------------------------------ */
/* ------------------------------ */
/* FORM */
.Form {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   box-shadow: 0px 0px calc(5px * var(--scale)) calc(1px * var(--scale)) var(--border-color);
   border-radius: calc(25px * var(--scale));
}

.Form .header {
   position: relative;
   display: flex;
   width: 100%;
   height: calc(130px * var(--scale));
   padding: calc(50px * var(--scale));
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: calc(25px * var(--scale)) calc(25px * var(--scale)) 0px 0px;
   color: var(--text-primary);
   font-size: calc(var(--font-large) * var(--scale));
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: left;
}

.Form .header-name {
   position: absolute;
   display: block;
   top: calc(60px * var(--scale));
   right: calc(50px * var(--scale));
   width: auto;
   height: calc(15px * var(--scale));
   color: var(--placeholder);
   font-size: calc(var(--font-x-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}

.Form .body {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: calc(25px * var(--scale));
   width: 100%;
   height: auto;
   padding: calc(25px * var(--scale));
   overflow: visible;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-top: none;
   border-radius: 0px 0px calc(25px * var(--scale)) calc(25px * var(--scale));
}

.Form .Overview {
   gap: calc(25px * var(--scale));
}

.Form .Overview .item {
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   box-shadow: none;
}

.Form .field {
   position: relative;
   display: grid;
   grid-template-columns: 40% 60%;
   gap: 0px;
   width: 100%;
   min-height: calc(70px * var(--scale));
   overflow: visible;
}

.Form .field-name {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: calc(25px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: 1;
   text-align: left;
}

.Form .field-input {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   overflow: visible;
}

.Form .textarea,
.Form .textfield {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: calc(25px * var(--scale));
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-radius: calc(70px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: 1;
   text-align: left;
}

.Form .textarea {
   height: calc(200px * var(--scale));
   border-radius: calc(25px * var(--scale));
   line-height: 1.75;
   resize: none;
}

.Form .textfield.i {
   text-indent: calc(20px * var(--scale));
}

.Form .prefix {
   position: absolute;
   display: block;
   top: calc(26px * var(--scale));
   left: calc(40% + (25px * var(--scale)));
   width: auto;
   height: calc(15px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-regular);
}

.Form .length {
   position: absolute;
   display: block;
   bottom: calc(1px * var(--scale));
   right: calc(2px * var(--scale));
   width: calc(68px * var(--scale));
   height: calc(68px * var(--scale));
   padding: calc(25px * var(--scale)) 0px;
   background-color: var(--background-primary);
   border-radius: calc(68px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-x-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: 1.2;
   text-align: center;
}

.Form .textarea:focus,
.Form .textfield:focus {
   outline: calc(3px * var(--scale)) solid var(--primary-color);
}

.Form .select {
   position: relative;
   display: grid;
   grid-template-columns: 40% 60%;
   width: 100%;
   min-height: calc(70px * var(--scale));
   overflow: visible;
}

.Form .selectfield {
   display: block;
   width: calc(100% - 0px);
   height: calc(70px * var(--scale));
   padding: calc(25px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(70px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: 0.8;
}

.Form .selectfield::after {
   content: var(--entity-menu);
   position: absolute;
   top: calc(25px * var(--scale));
   right: calc(25px * var(--scale));
}

.Form .selectfield+.options-menu {
   position: absolute;
   display: none;
   top: calc(78px * var(--scale));
   left: 40%;
   width: 60%;
   max-height: calc(212px * var(--scale));
   overflow: auto;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-radius: calc(25px * var(--scale));
   z-index: 5;
}

.Form .selectfield+.options-menu>.option {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: calc(25px * var(--scale));
   padding-bottom: calc(18px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
}

.Form .selectfield+.options-menu>.option:hover {
   background-color: var(--background-secondary);
   color: var(--text-primary);
   cursor: pointer;
}

.Form .errors {
   display: none;
   width: calc(100% - 0px);
   height: auto;
   padding: calc(25px * var(--scale));
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: calc(25px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-small) * var(--scale));
   font-weight: var(--font-regular);
   line-height: normal;
   text-align: left;
   margin-bottom: 0px;
}

.Form .submit {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: calc(20px * var(--scale));
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-radius: calc(70px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-medium) * var(--scale));
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}

.Form .btn {
   display: block;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: calc(20px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(70px * var(--scale));
   color: var(--text-primary);
   font-size: calc(var(--font-x-small) * var(--scale));
   font-weight: var(--font-bold);
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}