@font-face {
    font-family: Lato;
    src: url('assets/fonts/Lato-Regular.ttf');
    font-weight: normal;
}

html, body {
    height: 100%;
}

textarea {
    resize: none;
}

body {
    background-color: #fff;
    background-image: url('assets/img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Lato;
}

.logo {
    position: absolute;
    top: 5%;
    left: 5%;
}

.title {
    font-size: 24px;
    text-align: right;
    padding: 40px;
}

.form-payment {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 320px;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 460px;
}
.form-payment.order {
    top: 55%;
}

.isk-label {
	border-bottom-right-radius: 4.8px !important;
	border-top-right-radius: 4.8px !important;
	margin: 0;
	/* 
	 * This label was 2 pixels further to the right by some reason
	 * It was driving me NUTS 
	 */
	position: relative;
	right: 2px;
}

.input-group, button {
    margin: 10px 0 10px 0;
}

.form-group {
	margin: 10px 0 10px 0px;
}

.form-group input, .form-group textarea {
	border-radius: 0;
	border-bottom-right-radius: 4.8px;
	border-top-right-radius: 4.8px;
	border: 0;
	cursor: default;
	pointer-events: none;
}

.info-box {
	background-color: #fff;
	border-radius: 4.8px;
}

.fa-remove {
    color: #a00;
    margin: 0 5px 0 5px;
    margin-right: 10px
}

.form-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: rgba(245, 245, 245, 0.6);
    width: 100%;
    max-width: 620px;
    height: 550px;
    border-radius: 10px;
}
.form-box.order {
    height: 500px;
    top: 40%;
}

.footer {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 460px;
    color: #444;
    text-decoration: none;
}
.form-box.order .footer {
    top: 92%;
}

.footer .fa {
    margin-right: 6px;
}

.footer a {
    text-decoration: none;
    transition: 0.15s all;
    color: #444;
}

.footer a:hover {
    color: #111;
}

.footer .left {
    text-align: left;
}

.footer .right {
    text-align: right;
}

.info-box-last {
    margin-bottom: -10px !important;
}

/* Disable the spinner on number things because it's ugly */
input[type=number] {
    -moz-appearance:textfield;
}
 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.ui-widget-header {
    border: 0;
    background-color: #343a40;
    color: #fff;
}
.ui-icon {
    color: #fff;
}
.ui-corner-all {
    border-radius: 0;
}
.ui-datepicker-prev, .ui-datepicker-next,
.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
    width: 1.8em;
    height: 1.8em;
    top: 2px;
    background-color: #fff;
}

.ui-datepicker-prev, .ui-datepicker-prev.ui-state-hover {
    left: 2px;
}
.ui-datepicker-next, .ui-datepicker-next.ui-state-hover {
    right: 2px;
}

.ui-datepicker-calendar {
    table-layout: fixed;
}
tbody td {
    padding: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, .ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
    color: #000;
    border: 0;
    text-align: center;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
    background-color: #e83e8c;
    color: #fff;
}
.ui-state-active, .ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, .ui-button:active, 
.ui-button.ui-state-active:hover
.ui-state-default .ui-state-active {
    background-color: #007bff;
    color: #fff;
}