:root {

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

    --color-blue4: #29b6f6;

    --color-background-input:#eee;
    --color-input:#000;
    --color-label: #ccc;
    --color-placeholder:#a2a2a2;
    --color-description:#546e7a;
    --color-focus-background:rgba(224,141,24,.2);
    --color-focus-outline:#E08D18;

    --color-active-outline:#E08D18;

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

    --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;
}


.smartform fieldset{
    font-size:20px;
    position:relative;
    display:flex;
    flex-flow: row wrap;
    
    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;
}

.smartform fieldset>label{
    order:1;
text-align:center;
    width:100%;
    margin-right:12px;
}
.smartform fieldset>.field{
    order:2;
    width:100% !important;
}
.smartform fieldset>.field:hover{
    background-color: var(--color-focus-background);
}

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

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


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

.smartform fieldset>label.required::after {
  color: var(--color-field-required);
  font-weight:700;
  content:' *';
}

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

.smartform input, .smartform select, .smartform textarea, .smartform .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);

}

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

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

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

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


/* INPUT RANGE - BEGIN */

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

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

.smartform .range .min {
    left:2%;
}

.smartform .range .max {
    right:2%;
}

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

.smartform 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;
}

.smartform 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;
}

.smartform 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;
}

.smartform 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 */

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

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

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

.smartform .number .min {
    left:2%;
}

.smartform .number .max {
    right:2%;
}

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

/* INPUT NUMBER - END */


/* INPUT RADIO - BEGIN */

.smartform .radio {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    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;
}



.smartform [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);
}

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

.smartform [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 */

.smartform 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;
}
.smartform select {
    overflow:hidden;
    background-color: var(--color-background-input);
    
}


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

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

}

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

/* INPUT SELECT - END */

/* INPUT DATE BEGIN */

.smartform 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 */

.smartform textarea {
    height:200px;
}



/* SUBMIT - BEGIN */


.smartform .submit {
    width:100%;
    display:flex;

    justify-content: center;
    align-items:center;
}

.smartform .submit>input {

  background-color: transparent;
  color: #E08D18;
    padding: 4px 32px;
  font-size:24px;
  text-transform:uppercase;
  border:solid 2px #E08D18;
    font-family: 'Permanent Marker', sans-serif;
  transition: all .3s;

}

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

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

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

/* SUBMIT - END */