/**
 * Form style.
 *
 * For pages with forms.
 *
 * @author  Metaverses Nation Agency <mail@metaversesnation.com>
 */

select.input {
    cursor: pointer;
}

input.input, select.input {
    display: inline;
    border: none;
    box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 24%);
    background-color: white;
    color: black;
    margin: 0;
}

input.input.small, select.input.small {
    padding: 5px;
    font-size: 12px;
    width: 100px;
}

input.input.medium, select.input.medium {
    padding: 8px;
    font-size: 20px;
    width: 200px;
}

input.input.large, select.input.large {
    padding: 11px;
    font-size: 40px;
    width: 300px;
}

input.input.width-auto, select.input.width-auto {
    width: auto;
}

input.checkbox-input {
    cursor: pointer;
}

input.checkbox-input.small {
    padding: 5px;
}

input.checkbox-input.medium {
    padding: 8px;
}

input.checkbox-input.large {
    padding: 10px;
}

input.input.width-auto, select.input.width-auto {
    width: auto;
}

input.input.full-width {
    width: 100% !important;
}

textarea.textarea {
    height: auto;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
}

textarea.textarea.no-resize {
    resize: none;
}

textarea.textarea.large {
    height: 200px;
    padding: 9px;
    font-size: 24px;
}

textarea.textarea.medium {
    height: 180px;
    padding: 9px;
    font-size: 16px;
}

textarea.textarea.small {
    height: 160px;
    padding: 9px;
    font-size: 12px;
}

textarea.textarea.very-small {
    height: 140px;
    padding: 9px;
    font-size: 12px;
}

textarea.textarea.mini {
    height: 30px;
    padding: 9px;
    font-size: 12px;
}

@media only screen and (max-width: 768px) {
    input.input.small, select.input.small {
        padding: 5px;
        font-size: 12px;
        width: 50px;
    }
    
    input.input.medium, select.input.medium {
        padding: 8px;
        font-size: 15px;
        width: 150px;
    }
    
    input.input.large, select.input.large {
        padding: 10px;
        font-size: 20px;
        width: 250px;
    }
    
    input.checkbox-input.small {
        padding: 3px;
    }
    
    input.checkbox-input.medium {
        padding: 6px;
    }
    
    input.checkbox-input.large {
        padding: 9px;
    }
    
    textarea.textarea.large {
        height: 180px;
        padding: 7px;
        font-size: 22px;
    }
    
    textarea.textarea.medium {
        height: 160px;
        padding: 7px;
        font-size: 14px;
    }
    
    textarea.textarea.small {
        height: 140px;
        padding: 7px;
        font-size: 10px;
    }
    
    textarea.textarea.very-small {
        height: 120px;
        padding: 7px;
        font-size: 10px;
    }
    
    textarea.textarea.mini {
        height: 20px;
        padding: 9px;
        font-size: 12px;
    }
}