silverstripe-simple/css/form.css

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Arial, Helvetica, sans-serif !important
}
input:invalid,
textarea:invalid {
    border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
    background-color: #f0dddd
}
form .message {
    padding: 6px 15px;
    border: 1px solid;
}
form .good {
    background-color: #ecf9d0;
    border-color: #8fbe00;
}
form .bad {
    background-color: #f9d0d0;
    border-color: #be0000;
}
.checkbox,
.radio {
    margin-top: 1px
}
#MemberLoginForm_LoginForm_action_dologin,
.Actions .action {
    padding: 6px 20px
}
#MemberLoginForm_LoginForm,
#MemberLoginForm_LostPasswordForm {
    max-width: 500px
}
#ForgotPassword a {
    margin-top: 15px
}
#ForgotPassword {
    margin-top: 6px
}
div.field {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
.ui-widget {
    font-family: Arial, Helvetica, sans-serif
}
form label.left {
    float: left;
    width: 25%;
    padding-right: 5%;
    margin-top: 3px;
    display: block;
    font-size: 13px;
}
.main form .middleColumn {
    float: right;
    width: 70% !important;
}
	.main form .middleColumn .middleColumn {
	    width: 100% !important
	}
.header form .middleColumn {
    float: none;
    width: 100% !important;
}
.listbox option {
    padding: 3px 0
}
form input.text,
form textarea,
form .textajaxuniquetext,
form select {
    width: 98%;
    padding: 6px 1%;
    font-size: 15px;
}
form input.sitetreeurlsegment {
    width: 200px
}
form span.readonly {
    font-size: 16px
}
form input[disabled] {
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}
form .creditCardField input,
form input.currency {
    padding: 5px 1%;
    width: 50px;
}
form input.numeric {
    padding: 5px 1%;
    width: 50px;
}
form #DMYDate-month,
form #DMYDate-day {
    width: 25px
}
form .checkboxset li,
form .optionset li {
    margin-bottom: 5px
}
@media only screen and (max-width: 700px) { 
	.main form .middleColumn {
	    float: right;
	    width: 100% !important;
	    : ;
	}
	.header form .middleColumn {
	    float: none;
	    width: 100% !important;
	    : ;
	}
	form label.left,
	#MemberLoginForm_LoginForm label {
	    margin-bottom: 8px
	}
}
@media only screen and (min-width: 700px) { 
	#MemberLoginForm_LoginForm #Remember,
	#MemberLoginForm_LoginForm .Actions,
	#MemberLoginForm_LostPasswordForm .Actions {
	    padding-left: 30%
	}
}