body{
    margin: 0;
    overflow: hidden;
    background-color: #dddddd;
}
.EnableSelect .Selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
button.GridButton {margin: 0 !important; padding: 0 !important;}
button.ColorButton {margin: 0 !important; padding: 0 !important; min-height: 40px !important; min-width: 40px !important;}
#LoadingMenu{z-index: 10; position: absolute; left: 530px; top: 250px; width: 324px;}
#Controls .item-input .input-label {
    -webkit-flex: 1 0 75px;
    -moz-flex: 1 0 75px;
    -ms-flex: 1 0 75px;
    flex: 1 0 75px;
}
#Controls .item-input input {
    -webkit-flex: 4 0 100px;
    -moz-flex: 4 0 100px;
    -ms-flex: 4 0 100px;
    flex: 4 0 100px;
}
div.list{overflow: hidden;}
a.item:hover{background-color: ghostwhite;}
a.item.item-energized:hover{background-color: #d39211;}
[ng-cloak], .legal {display: none !important;}
div.ionic-body {height: 100%}
.SmallText {font-size: 12px; line-height: normal;}
.SmallerText {font-size: 10px; line-height: normal;}
.item-radio.radio-narrow .item-content {
    padding-top: 9px; padding-bottom: 9px;
}
.item-radio.radio-narrow .radio-icon {
    padding-top: 4px; padding-bottom: 4px;
}
div.illegal {
    color: red;
    position: absolute;
    z-index: 3;
    font-size: 2em;
    font-style: italic;
    font-family: serif;
}
.VCargo {display: inline-block;}
.VCargo.Col1 {width: 55px;}
.VCargo.Col2 {width: 58px;}
.customize-wrapper {position: relative;}
.badge.customize {position: absolute; right: 16px; top: 8px; z-index: 5; cursor: pointer;}
textarea {resize: none;}
div.item input[type="range"] {margin: 0;}
.item.slim {padding-top: 11px; padding-bottom: 11px;}
.item.narrow {padding-top: 7px; padding-bottom: 7px;}
.item.mednarrow {padding-top: 4px; padding-bottom: 4px;}
.item.verynarrow {padding-top: 0px; padding-bottom: 0px;}
div.item div.list-inset {margin-top: 0;}
p.item {white-space: normal;}
p.item.tip {font-style: italic;}
p.item.tip.bold {font-weight: bold;}
span.italic {font-style: italic;}
.content p {padding: 7px;}
canvas { position: absolute; left: 0; }
.dialog-header {padding-top: 44px;}
.ionic-ng-modal .ng-modal-dialog div.ng-modal-close { top: 14px; right: 14px; font-size: 24px; }
.ng-modal-dialog { border-radius: 7px !important; }
.button.notyet {
    background-color: darksalmon !important;
}
input:disabled + .checkbox-icon:before {
    border-color: Silver !important;
}
input:disabled:checked + .checkbox-icon:before {
    background-color: Silver !important;
}

#Controls .item-radio .item-content {
    /* give some room to the left for the checkmark icon */
    padding-right: 16px;
    padding-left: 48px; }

#Controls .item-radio .radio-icon {
    /* checkmark icon will be hidden by default */
    right: auto;
    left: 0; }
#Controls .item-radio input:checked ~ .item-content {
    font-weight: bold;
}


span.text-disabled,label.text-disabled {color: Silver !important; pointer-events: none !important; cursor: default !important;}
div.checkbox.disabled, div.checkbox.disabled i.checkbox-icon {cursor: default;}
a.link-disabled {color: Silver !important; pointer-events: none !important; cursor: default !important;}
.button-group {
    line-height: 31px;
    padding-left: 7px;
}
.button-group > .button {
    display: inline-block;
    overflow: hidden;
    width: auto;
    border-width: 1px 0 1px 1px;
    border-radius: 0;
    float: left;
}
.button-group > .button:first-child {
    border-radius: 4px 0 0 4px; }
.button-group > .button:last-child {
    border-right-width: 1px;
    border-radius: 0 4px 4px 0; }

#Controls {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    width: 324px;
    height: 731px; /* 1px for border */
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    background-color: white
}
#License {
    position: absolute;
    left: 0;
    color: #999999;
    font-family: serif;
    text-align: right;
}
#License a {
    color: #999999;
}
button.button.button-light:hover{background-color: #F8F8F8;}
a.button.tight-button:hover{background-color: ghostwhite;}
a.button.tight-button {
    padding: 0 2px;
    font-size: 10px;
    line-height: 10px;
    min-width: 40px !important;
    min-height: 40px !important;
}
a.button.tight-button .icon {
    line-height: 24px !important;
}
a.button.tight-button .icon:before {
    line-height: 24px !important;
}
div.toolbar a.button.tight-button {
    min-width: 47px !important;
    min-height: 47px !important;
}
div.toolbar .label {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    text-align: center;
}
a.button.tight-button img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    display: block;
    line-height: 29px !important;
}

div.Sidecar {
    line-height: normal;
    text-align: center;
    position: absolute;
    z-index: 1;
}
div.Sidecar.Label {
    height: 15px;
    font-size: 14px;
    bottom: 135px;
}
div.Sidecar.Field {
    height: 35px;
    font-size: 30px;
    bottom: 100px;
}
div.Sidecar.Weight {
    right: 150px;
    width: 130px;
}
div.Sidecar.Space {
    right: 50px;
    width: 100px;
}


div.status {
    position: absolute;
    top: 0;
    left: 0;
    height: 55px;
    font-family: sans-serif;
    text-align: center;
}
div.status .label {
    position: absolute;
    top: 4px;
    height: 16px;
    font-size: 14px;
    overflow: hidden;
    line-height: 100% !important;
}
div.status .field {
    position: absolute;
    top: 20px;
    height: 35px;
    font-size: 30px;
    overflow: hidden;
    line-height: 100% !important;
    /*border: 1px solid black;*/
}
div.status .cost {
    left: 5px;
    width: 125px;
}
div.status .weight {
    left: 132px;
    width: 181px;
}
div.status .space {
    left: 315px;
    width: 80px;
}
div.status .cargo {
    left: 398px;
    width: 80px;
}
div.status .hc {
    left: 480px;
    width: 30px;
}
div.status .acceleration {
    left: 520px;
    width: 80px;
}
div.status .topspeed {
    left: 610px;
    width: 90px;
}
div.status .carrier-weight {
    left: 445px;
    width: 120px;
}
div.status .carrier-space {
    left: 580px;
    width: 120px;
}

div.StockCarDiv {
    width: 680px;
    height: 202px;
    position: relative;
    margin: 0 0 8px 0;
    font-family: sans-serif;
    line-height: normal;
    text-align: center;
}
div.StockCarDiv div, div.StockCar div div {
    position: absolute;
    /*overflow: hidden;*/
}
.StockCarName {
    top: 1px;
    left: 0;
    width: 440px;
    height: 35px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}
.StockCarMine {
    color: green;
}
.StockReviewed {
    color: blue;
}
.StockCarDiagram {
    cursor: pointer;
    border-style: none;
}
img.StockCarDiagram {
    position: absolute;
    top: 1px;
    right: 1px;
}
.StockCar.Label {
    height: 16px;
    font-size: 14px;
}
.StockCar.Field {
    height: 35px;
    font-size: 30px;
}
.StockCar.Label.Row1 {top: 34px;}
.StockCar.Field.Row1 {top: 54px;}
.StockCar.Label.Row2 {top: 90px;}
.StockCar.Field.Row2 {top: 110px;}
.StockCar.Cost {
    left: 0;
    width: 110px;
}
.StockCar.Body {
    left: 113px;
    width: 137px;
}
.StockCar.Body.Field {font-size: 24px;}
.StockCar.Tech {
    left: 0;
    width: 260px;
}
.StockCar.HC {
    left: 263px;
    width: 80px;
}
.StockCar.HC.Tight {
    left: 253px;
    width: 40px;
}
.StockCarDiv .StockCarStars {
    top: 40px;
    left: 295px;
    width: 150px;
    overflow: hidden;
}
.StockCar.Acceleration {
    left: 263px;
    width: 80px;
}
.StockCar.Speed {
    left: 345px;
    width: 100px;
}
.StockCarTags {
    top: 145px;
    left: 0;
    width: 445px;
    height: 58px;
    font-size: 25px;
    color: dimgray;
}
.StockCar.CargoWeight {
    left: 263px;
    width: 100px;
}
.StockCar.CargoSpace {
    left: 365px;
    width: 80px;
}
.StockCarSummary {
    padding: 10px 4px 4px 4px;
}
.StockCarRating {
    padding: 10px 4px 0 4px;
}
.StockCarStars span {
    background: transparent url(/images/sprite_rate.png) 0 0 no-repeat; display: inline-block; height: 23px;
    width: 12px; text-indent: -999em; overflow: hidden;
}
.StockCarStars span.StockCarStarRight {
    background-position: 0 -23px;
    padding-right: 6px;
}
.StockCarStars span.StockCarStarOn { background-position: 0 -92px; }
.StockCarStars span.StockCarStarOn.StockCarStarRight { background-position: 0 -115px; }
.StockCarSignature {
    padding-top: 20px;
    font-style: italic;
}

.CarStockZoomStars a {
    background: transparent url(/images/sprite_rate.png) 0 0 no-repeat;
    display: inline-block;
    height: 23px;
    width: 12px;
    text-indent: -999em;
    overflow: hidden;
    cursor: pointer;
}
.CarStockZoomStars a.StarDisabled {
    cursor: not-allowed;
}
.CarStockZoomStars a.rating-right {
    background-position: 0 -23px;
    padding-right: 6px;
}
.CarStockZoomStars a.rating-zero { background-position: 0 -300px; }
.CarStockZoomStars a.rating-over { background-position: 0 -92px; } /* -46 */
.CarStockZoomStars a.rating-over.rating-right { background-position: 0 -115px; } /* -69 */
.CarStockZoomStars a.rating { background-position: 0 -92px; }
.CarStockZoomStars a.rating.rating-right { background-position: 0 -115px; }
.CarStockZoomStars label {display: none;}

div.InTour {padding: 0 !important;}
button.InTour {
    margin: 0 !important;
    line-height: 35px !important;
    min-height: 40px !important;
}
button.icon-left.InTour:before, button.icon-right.InTour:before {
    line-height: 34px !important;
}
.TourOverlay {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
}
.TourCanvas {
    position: absolute;
    z-index: 32;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.TourDialog {
    z-index: 35;
    position: absolute;
    width: 400px;
    transform: translate(-50%, +0);
    -webkit-transform: translate(-50%, +0);
    -moz-transform: translate(-50%, +0);
    -ms-transform: translate(-50%, +0);
    -o-transform: translate(-50%, +0);
    background-color: #fff;
    box-shadow: 4px 4px 80px #000;
    -webkit-box-shadow: 4px 4px 80px #000;
    -moz-box-shadow: 4px 4px 80px #000;
    -ms-box-shadow: 4px 4px 80px #000;
    -o-box-shadow: 4px 4px 80px #000;
    padding: 10px;
}


.spin::before{
    line-height:100px;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}