﻿input[type=radio] + label {
    padding: 0 0.25em;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui {
	position: relative;
	display: inline-block;
	font-size: 1em;
}

.ui.btn {
	width: 100%;
}

.ui optgroup {
	color: #000 !important;
}

.ui.small {
	font-size: 0.8em;
}
	
.ui button, .ui input, .ui textarea, .ui a, .ui input[type=checkbox], .ui select, input[type=number], input[type=date], input[type=password] {
	font-family: 'Lato', Arial;
	font-size: inherit;
	margin: 0;
	padding: 0.5em 1em;
	outline: none;
	border: none;
	display: inline-block;
	text-decoration: none;
	vertical-align: top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    -webkit-border-radius: 0;
	box-sizing: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
	background: none;
	background: rgba(0,0,0,0);
	line-height: 1.25em;
	width: 100%;
	white-space: normal;
    word-wrap: break-word;
}

.ui textarea {
    white-space: pre !important;
}

.ui button, .ui input, .ui textarea, .ui a, .ui input[type=checkbox] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.ui select {
    appearance: normal;
    -moz-appearance: normal;
    -webkit-appearance: normal;
    -webkit-border-radius: 0;
}

input[type=number] { 
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    -webkit-border-radius: 0;
}

input[type=text] { 
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.ui.date {
    position: relative;
    display: inline;
    margin-right: 20px;
    cursor: pointer;
}

.ui.date label {
    position: absolute;
    top: 0em;
    right: -20px;
    z-index: 1;
}

.ui.date label span {
    color: #003246 !important;
}

.ui.txt.inline, .ui.txt.inline > input {
	display: inline;
    width: auto;
}

.ui.txt.inline > * {
	padding: 0;
	vertical-align: baseline;
	text-align: center;
}

.ui.chk {
	position: relative;
	top: 0.8em;	
	padding: 0;
	margin-left: -1.1em;
	vertical-align: top;
	display: inline-block;
	width: auto;
}

.ui.chk input[type=checkbox] {
	margin-left: 0 !important;
	width: auto;
}

.ui.btn > *:first-child {
	cursor: pointer;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	font-family: 'Lato-Bold', 'Arial Black';
	//text-transform: uppercase;
	-webkit-box-shadow:  1px 1px 0px 0px rgba(1, 1, 1, 0.15);        
	box-shadow:  1px 1px 0px 0px rgba(1, 1, 1, 0.15);
}
	
.ui.txt > input[type=text], .ui.txt > input[type=number], .ui.txt > input[type=date] {
	cursor: text;
}
	
.ui.slt, .ui.txt {
	-webkit-border-radius: 2px;
    border-radius: 2px;
}

.ui.slt {
	padding: 0;
	margin: 0;
}

.ui.slt select {
	border: none;
	outline: none;
	background: #fff;
	vertical-align: top;
}

/*Gray*/
.ui.gray.slt {
	border: 1px solid #a2a2a2;
}

.ui.gray span[class*='icon-'] {
	color: #fff;
}

.ui.btn.gray > *:first-child {
	background: #a2a2a2;
	color: #fff;
}
	
.ui.btn.gray > *:first-child:hover {
	background: #c2c2c2;
	color: #000;
}
	
.ui.btn.gray > *:first-child:active {
	background: #e2e2e2;
}

.ui.txt.gray > input[type=text], .ui.txt.gray > input[type=number], .ui.txt.gray > input[type=date], .ui.txt.gray > textarea {
	background: #a2a2a2;
	color: #fff;
}

.ui.txt.gray > input[type=text]:hover, .ui.txt.gray > input[type=number]:hover, .ui.txt.gray > input[type=date]:hover, .ui.txt.gray > textarea:hover {
	background: #a2a2a2;
}

/*Turquoise*/
.ui.turquoise.slt {
	border: 1px solid #487d92;
}

.ui.turquoise span[class*='icon-'] {
	color: #fff;
}

.ui.btn.turquoise > *:first-child {
	background: #003246;
	color: #fff;
}

.ui.btn.turquoise > *:first-child:hover {
	background: #487d92;
}

.ui.btn.turquoise > *:first-child:active {
	background: #81bdd7;
}
	
.ui.txt.turquoise > input[type=text], .ui.txt.turquoise > input[type=password], .ui.txt.turquoise > input[type=number], .ui.txt.turquoise > input[type=date], .ui.txt.turquoise > textarea {
	background: #487d92;
	color: #fff;
}
	
.ui.txt.turquoise > input[type=text]:hover, .ui.txt.turquoise > input[type=password]:hover, .ui.txt.turquoise > input[type=number]:hover, .ui.txt.turquoise > input[type=date]:hover, .ui.txt.turquoise > textarea:hover {
	background: #487d92;
}

.ui.txt.turquoise.invert > input[type=text], .ui.txt.turquoise.invert > input[type=password], .ui.txt.turquoise.invert > input[type=number], .ui.txt.turquoise.invert > input[type=date], .ui.txt.turquoise.invert > textarea {
	background: #fff;
	color: #003246;
	border: 1px solid #487d92;
}

/*Merlot*/
.ui.merlot.slt {
	border: 1px solid #8b4969;
}

.ui.merlot span[class*='icon-'] {
	color: #fff;
}

.ui.btn.merlot > *:first-child {
	background: #43122a;
	color: #fff;
}

.ui.btn.merlot > *:first-child:hover {
	background: #8b4969;
}

.ui.btn.merlot > *:first-child:active {
	background: #d293b2
}

.ui.txt.merlot > input[type=text], .ui.txt.merlot > input[type=number], .ui.txt.merlot > input[type=date], .ui.txt.merlot > textarea {
	background: #8b4969;
	color: #fff;
}

.ui.txt.merlot > input[type=text]:hover, .ui.txt.merlot > input[type=number]:hover, .ui.txt.merlot > input[type=date]:hover, .ui.txt.merlot > textarea:hover {
	background: #8b4969;
}

/*Blue*/
.ui.blue.slt {
	border: 1px solid #6dbbdd;
}

.ui.blue span[class*='icon-'] {
	color: #fff;
}

.ui.btn.blue > *:first-child {
	background: #487d92;
	color: #fff;
}

.ui.btn.blue > *:first-child:hover {
	background: #6dbbdd;
}

.ui.btn.blue > *:first-child:active {
	background: #257c9c;
}
	
.ui.txt.blue > input[type=text], .ui.txt.blue > input[type=number], .ui.txt.blue > input[type=date], .ui.txt.blue > textarea {
	background: #487d92;
	color: #fff;
}
	
.ui.txt.blue > input[type=text]:hover, .ui.txt.blue > input[type=number]:hover, .ui.txt.blue > input[type=date]:hover, .ui.txt.blue > textarea:hover {
	background: #487d92;
}

.ui.txt.blue.invert > input[type=text], .ui.txt.blue.invert > input[type=number], .ui.txt.blue.invert > input[type=date], .ui.txt.blue.invert > textarea {
	background: #fff;
	color: #003246;
	border: 1px solid #487d92;
}

/*Gray*/
.ui.txt.gray.invert > input[type=text], .ui.txt.gray.invert > input[type=number], .ui.txt.gray.invert > input[type=date], .ui.txt.gray.invert > textarea {
	background: #fff;
	color: #003246;
	border: 1px solid #616161;
}

.amount-label > input.amount, .amount-label > input.sub-total-amount, .amount-label > input.total-amount {
    text-align: right !important;
    padding-right: 4em !important;
}

.amount-label > input.volume {
    text-align: right !important;
    padding-right: 2.5em !important;
}

.amount-label:after {
    position: absolute;
    top: 0.55em;
    right: 1em;
    color: inherit;
    opacity: 0.5;
    content: attr(title);
    z-index: 2;
    display: inline-block;
}

@media only screen and (min-width: 600px) {
	.ui.btn {
		width: auto;
	}
}
