:root {

    --color-field-required: #ab8491;
    --color-field-empty: #90a4ae;

    --color-blue4: #29b6f6;

    --color-background-input:#fff;
    --color-input:#222;
    --color-label: #90a4ae;
    --color-placeholder:#a2a2a2;
    --color-description:#546e7a;
    --color-focus-background:#ececec;
    --color-focus-outline:#0B9BD8;

    --color-active-outline:#0B9BD8;

    --color-option: #444;
    
    --color-required: #F3F3F3;

    --input-range-thumb-size:18px;
}

/* shared forms */

.smartform>form {
    position:relative;
    width:100%;
    max-width:100%;
    height:auto;
    padding-bottom:32px;
}

[data-type="page"], [data-id="formend"]{
    position:relative;
    display:flex;
    flex-flow:column wrap;
    align-items:center;
    justify-content:center;
}

[data-type="group"] {
    position:relative;
    box-sizing: border-box;
    padding:16px;
    margin: 8px 0;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center;
    max-width:100%;
    width:100%;
}

[data-type="group"]> .desc {
    font-size:20px;
}


fieldset{
    font-size:20px;
    position:relative;
    display:flex;
    flex-flow: column nowrap;
    
    padding:4px;
    margin:4px 0;
    width:100%;
    padding-inline-start:0;
    padding-inline-end:0;
    padding-block-start:0;
    padding-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
    padding:8px !important;
    margin:0 !important;
}

fieldset>label{
    order:1;
    font-size: 14px;
    font-weight: 300;
    color: var(--color-label);
}
fieldset>.field{
    order:2;
}


fieldset .desc {
    font-size:12px;
    order:3;
    color:var(--color-description);
}

fieldset .desc a {
    color:var(--color-focus-outline);
}

.field {
    width:100%;
}

::placeholder {
    color: var(--color-placeholder);
    font-size:80%;
}

fieldset>label.required::after {
  color: var(--color-input);
  content:' *';
}

/*.field[required] .sublabel:before {
    content: "*";
    color:#E83737;
}*/

input, select, textarea, .range {
    box-sizing: border-box;
    font-size:20px;
    transition: background .2s ease-in-out;
    border: solid 1px var(--color-label);
    border-radius:3px;
    color: var(--color-input);
    background-color: var(--color-background-input);

}

input:not([type=radio]):not([type=checkbox]):not([type=submit]), select, textarea, .range {
    width:100%;
  font-size:17px ;
}

input, select:not([multiple]), select[multiple]>option, textarea{
    padding-left:8px;
}

input:active, select:active, textarea:active {
    outline-color: var(--color-active-outline);
}

input:focus, select:focus, select[multiple]:focus>option, textarea:focus, .range:focus {
    background-color: var(--color-focus-background);
    outline-color: var(--color-focus-outline);
}


/* INPUT RANGE - BEGIN */

.range {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:34px;
    order:2;
}

.range>span {
    position:absolute;
    top:17px;
    font-size:10px;
    color: var(--color-blue4);
    user-select: none;
    z-index:0;
}

.range .min {
    left:2%;
}

.range .max {
    right:2%;
}

.range .val {
    color:var(--color-blue4);
    top:-10px;
    font-size:14px;
    font-weight:700;
    width:10%;
    text-align:center;
    left:45%;
}

input[type=range] {
    position:absolute;
    top:16px;
    left:3%;
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    cursor: grab;
    background-color: var(--color-blue4);
    width:94%;
    z-index:1;
}

input[type=range]::-webkit-slider-thumb{

    appearance: none;
    height: var(--input-range-thumb-size);
    width: var(--input-range-thumb-size);
    border-radius: 50%;
    background: var(--color-blue4);
    border: none;
    pointer-events: auto;

    transition: 0.1s;
}

input[type=range]::-moz-range-thumb {

    appearance: none;
    height: var(--input-range-thumb-size);
    width: var(--input-range-thumb-size);
    border-radius:  50%;
    background: var(--color-blue4);
    border: none;
    pointer-events: auto;

    transition: 0.1s;
}

input[type=range]::-ms-thumb {
    appearance: none;
    height: var(--input-range-thumb-size);
    width: var(--input-range-thumb-size);
    border-radius:  50%;
    background: var(--color-blue4);
    border: none;
    pointer-events: auto;

    transition: 0.1s;
}

/* INPUT RANGE - END */

/* INPUT NUMBER - BEGIN */

input[type=number] {
    margin-bottom:14px;
}

.number {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:48px;
    order:2;
}

.number>span {
    position:absolute;
    bottom:0;
    font-size:10px;
    color: var(--color-blue4);
    user-select: none;
    z-index:0;
}

.number .min {
    left:2%;
}

.number .max {
    right:2%;
}

input[type=number] {
    margin-bottom:14px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* INPUT NUMBER - END */


/* INPUT RADIO - BEGIN */

.radio {
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;
    align-items:flex-start;
color: var(--color-input);
}

.smartform .entry {
    display:flex;
    position:relative;
    display:flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
    width: min-content;
    padding-right:8px;
}



[type=radio]{
    margin-right:4px;
    appearance: none;
    -webkit-appearance: none;
    height:12px;
    width:12px;
    border-radius: 50%;
    background: var(--color-background-option);
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px var(--color-input);
}

[type=radio]:checked{
color: var(--color-label);
    background: var(--color-input);
    box-shadow: 0 0 0 1px var(--color-input);
}

[type=radio]:checked + label {
  color: var(--color-input);
}

.smartform .entry>label {

        font-size: 15px;

    color: var(--color-label);
    margin:0;
}

/* INPUT RADIO - END */

/* INPUT SELECT - BEGIN */

select:not([multiple]) {
    appearance: none;
    color:var(--color-input);
    background-image: url('/media/com_smartform/images/svg/select_down_arrow_cc.svg');
    background-repeat: no-repeat;
    background-size:14px;
    background-position:calc(100% - 3px) center;

}
select {
    overflow:hidden;
    background-color: var(--color-background-input);
}

select>option{
    color: var(--color-option);
    background-color: var(--color-background-input);
}

select>option:hover {
    background-color: var(--color-focus-background);
}

select[multiple]>option:checked{
    color: var(--color-input);
    background-color: var(--color-background-input);
}

/* INPUT SELECT - END */

/* INPUT DATE BEGIN */

input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url(/media/com_smartform/images/dateblue.png);
    background-repeat: no-repeat;
    background-size:18px;
    background-position:calc(100% - 3px) center;
    cursor:pointer;
}

/* INPUT DATE END */

textarea {
    height:200px;
}



/* SUBMIT - BEGIN */


.submit {
    width:100%;
    display:flex;
    padding:16px;
    justify-content: flex-end;
    align-items:center;
}

.submit>input {

  background-color: #ececec;
  color:#777;
  height:46px;
  width:196px;
  font-size:17px;
  text-transform:uppercase;
  border:none;
  transition: all .3s;

}

.submit>input:hover {
 background-color: var(--color-focus-outline);
 color: #eee;
}

.submitresult {
    width:100%;
    padding:128px 0;
    color: var(--color-label);
}

.resultdelay {
	text-align:center;
	color:var(--color-label);
}
	

/* SUBMIT - END */