/* Text and password field styles
----------*/
.ui-text,
.ui-password {
	box-shadow: inset -2px 2px 6px 0px rgba(0, 0, 0, 0.15);
	margin: 0;
	border: none;
	border-left: 4px solid #CFCFCF;
	outline: none;
	font-size: 13px;
	padding: 9px 5px 9px 5px;
	background: #F4F4F4;
	width: 233px;
	box-sizing: border-box;
}

.ui-text:focus,
.ui-password:focus {
	border-left: 4px solid #5264AE;
}

.ui-text.invalid,
.ui-password.invalid {
	padding: 9px 32px 9px 5px;
	background: #F4F4F4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gsOABEILu06/wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAA7klEQVQ4y7WU3QpBQRDHf0cehRuUxscbcEHylUJ5E0U8jzcRk5JLD+DGnUvcjDqJbc9ZpvZid2b6729mdsFhqtpU1QY/sMghEgFb29ZF5BEilHH4OkDVVusvREazA8SOdqFU34h6MRGMqv1TIlXNAAeg9ObaA7W0VJ+IBi8REYlE5HWZivUtvHRGs3LEr6x/wUQjoOiIF6AbJGQ0S4+cZRqqONEEKHjkiE1l8qlT1SxwAvKeeUegLCL3pETTTyJvUxe3EtBPVDqjWaTo79r66mVZYAbkvnxFrsdZBIbAxrd0Y+AMXIArcEtANfcNfAIvIT/rH5vPOgAAAABJRU5ErkJggg==) right center no-repeat;
}
.ui-text.invalid:focus,
.ui-password.invalid:focus {
	padding: 9px 32px 9px 5px;
	border-left: 4px solid #d34336;
	background: #F4F4F4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gsOAA4yJbvt0wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAA1UlEQVQ4y7WTOQrCUBBAX8TrpBIGl6iYCS4IXsfCBVwKr2NpkdImlnMbKxuLICH+5CdTfWbh8Yb5UBKmEpnKiAai+6d+A95A7AvqlNjEwAiYmcq0NRBwyb2PrYBMJQGGuVRsKpM2jM4FuWOjIFOZAwOAMM2CMM2Cb0l9rIqMTiX9h0ZAprIE+iX9iamMvUCmEgBXh5m9r9EK6DnMzE0lqgoKcjYvRxDAI0yzZR2jdRHk5+rysahq1fnanGqsfVdpdaayAe41rzYK0+zpurq9x4ffujZ+AH6zMUFgegN7AAAAAElFTkSuQmCC) right center no-repeat;
}

/* Select box styles
----------*/
.ui-select {
	margin: 0 3px;
	background: #F4F4F4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gsOACMrYfof/AAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAlUlEQVQ4y2NgGAWjgN6AEcY4f/68NAMDw0EGBgYhJPlfUJoNSewdAwODvaGh4VOyLIJaZsPAwLAXzWAGNIudDQ0Nj5DqIyZkDtSAMjzqy8ixBMNHSD6by8DAkIQmPM/Q0DCZ3DhiwiGezcDAcBqJfxoqRnliwOIrOQYGhs1Qrq+hoeEjmiXJ8+fPs50/f55tNHMOKAAAMzIh9STI0eQAAAAASUVORK5CYII=) right center no-repeat;
	padding: 6px 28px 5px 5px;
	border: none;
	width: auto;
	outline: none;
	font-size: 13px;
	border-bottom: 4px solid #CFCFCF;
	cursor: pointer;
	color: #a9a9a9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ui-select:focus {
	background: #F4F4F4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAYAAAAI0W+oAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gsOAC0NLXS3jwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAlUlEQVQ4y2NgGAWjgN6AEcbwS90ozcDAcJCBgUEISf4XlGZDEnvHwMBgv2m2/1OyLIJaZsPAwLAXzWAGNIudN832P0Kqj5iQOVADyvCoLyPHEgwfIflsLgMDQxKa8LxNs/2TyY0jJhzi2QwMDKeR+KehYpQnBiy+kmNgYNgM5fpumu3/iGZJ0i91I5tf6ka20cw5oAAAFGch9ZAWeycAAAAASUVORK5CYII=) right center no-repeat;
	border-bottom: 4px solid #5264AE;
}

/* Don't show the arrow on multi-selects.
FIXME: Should actually check size attrib. */
.ui-select[multiple] { background-image: none; }

.ui-select > option {
	color: #5264AE;
}
.ui-select > option:disabled {
	color: #a9a9a9;
}

/* Button styles
----------*/
.ui-button {
	border: 0;
	background: #fff;
	padding: 9px;
	box-sizing: border-box;
	font-size: 13px;
	margin: 0 5px;
	cursor: pointer;
}

.ui-button:hover {
	background: #eeeeee;
}
.ui-button:focus {
	background: #CFCFCF;
	outline: none;
}

.ui-button.action {
	box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.26);
}
.ui-button.action:focus {
	box-shadow: 1px 2px 8px 3px rgba(0, 0, 0, 0.26);
}

.ui-button.primary {
	color: rgb(193, 70, 70);
}
.ui-button.primary:not(:disabled):hover,
.ui-button.primary:not(:disabled):focus {
	background: rgb(208, 115, 115);
	color: #fff;
}

.ui-button.action.primary:not(:disabled) { /* XXX: This isn't the best way to disable stuff. */
	background: rgb(193, 70, 70);
	color: #fff;
}
.ui-button.action.primary:not(:disabled):hover,
.ui-button.action.primary:not(:disabled):focus {
	background: rgb(208, 115, 115);
}

.ui-button:disabled,
.ui-button:disabled:hover {
	box-shadow: none;
	cursor: auto;
	background: #eeeeee;
}

/* Radio button styles
----------*/
.ui-radio {
	display: none;
}

.ui-radio + .ui-radio-label {
	position: relative;
	display: inline-block;
	margin: 0;
	min-width: 19px;
	height: 20px;
	text-indent: 28px;
	line-height: 21px;
	cursor: pointer;
	color: rgb(110, 110, 110);
}

.ui-radio + .ui-radio-label::before {
	content: '';
	border-radius: 100%;
	position: absolute;
	transition: 0.2s;
	width: 16px;
	height: 16px;
	border: 2px solid #CFCFCF;
	left: 0;
}

.ui-radio:checked + .ui-radio-label::after {
	content: '';
	border-radius: 100%;
	position: absolute;
	transition: 0.2s;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(193, 70, 70, 0);
	left: 0;
}

.ui-radio:checked + .ui-radio-label::before {
	border: 2px solid transparent;
	background: rgba(193, 70, 70, 1);
}

.ui-radio:checked + .ui-radio-label::after {
	-webkit-animation: radio-ripple 750ms;
    animation: radio-ripple 750ms;
}

@-webkit-keyframes radio-ripple {
    0%   { border: 1px solid rgba(193, 70, 70, 0); }
    40%  { border: 10px solid rgba(193, 70, 70, 0.4); margin: -8px; }
    100% { border: 15px solid rgba(193, 70, 70, 0);   margin: -14px; }
}
@keyframes radio-ripple {
    0%   { border: 1px solid rgba(193, 70, 70, 0); }
    40%  { border: 10px solid rgba(193, 70, 70, 0.4); margin: -8px; }
    100% { border: 15px solid rgba(193, 70, 70, 0);   margin: -14px; }
}

/*.mid .ui-radio + .ui-radio-label::before { border: 2px solid #A5A5A5; }
.mid .ui-radio:checked + .ui-radio-label::before { border: 2px solid transparent; }
.dark .ui-radio-label{ color: rgb(207, 207, 207); }
.dark .ui-radio + .ui-radio-label, .dark h1 { color: rgb(157, 157, 157); }*/

/* Checkbox styles
----------*/
.ui-checkbox {
	display: none;
}

.ui-checkbox + .ui-checkbox-label {
	position: relative;
	display: inline-block;
	margin: 0;
	height: 20px;
	text-indent: 28px;
	line-height: 21px;
	cursor: pointer;
	color: rgb(110, 110, 110);
}

.ui-checkbox + .ui-checkbox-label::before {
	content: ' ';
	position: absolute;
	left: 0;
	width: 16px;
	height: 16px;
	border: 2px solid #CFCFCF;
	transition: 0.2s;
}

.ui-checkbox:checked + .ui-checkbox-label::after {
	content: ' ';
	position: absolute;
	left: 0;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(193, 70, 70, 0);
	transition: 0.2s;
}

.ui-checkbox:checked + .ui-checkbox-label::before {
	border: 2px solid #DFA8A8;
	background: rgba(193, 70, 70, 1);
}

.ui-checkbox:checked + .ui-checkbox-label::after {
	-webkit-animation: checkbox-ripple 750ms;
    animation: checkbox-ripple 750ms;
}

@-webkit-keyframes checkbox-ripple {
    0%   { border: 1px solid rgba(193, 70, 70, 0); }
    40%  { border: 10px solid rgba(193, 70, 70, 0.4); margin: -8px; }
    100% { border: 15px solid rgba(193, 70, 70, 0);   margin: -14px; }
}
@keyframes checkbox-ripple {
    0%   { border: 1px solid rgba(193, 70, 70, 0); }
    40%  { border: 10px solid rgba(193, 70, 70, 0.4); margin: -8px; }
    100% { border: 15px solid rgba(193, 70, 70, 0);   margin: -14px; }
}

/* Basic form styles.
----------*/
.ui-simple-form {
    padding: 0;
    list-style: none;
    margin: 10px;
    display: block;
}
.ui-simple-form > .row {
    display: block;
    margin: 0 0 5px 0;
    padding: 5px 10px;
}
.ui-simple-form > .row:nth-child(even) {
    background-color: #FAFAFA;
}
.ui-simple-form > .row:after {
    content: '';
    display: block;
    clear: both;
}
.ui-simple-form > .row > label:first-child {
    display: inline-block;
    vertical-align: middle;
    width: 151px;
}
.ui-simple-form > .heading {
	font-weight: bold;
	padding: 10px;
	border-bottom: 1px solid #e8e8e8;
	background-color: #f8f8f8;
}