/* AutoSynergy - Asset Manager 4.0
   ----------------------------------------------------- */

/* Global
   ----------------------------------------------------- */
*, *:before, *:after {box-sizing: border-box;}
body{margin:auto; font-family:product-sans-regular, Helvetica, sans-serif; background:#f5f6fb; font-size: 14px; color:#555; -webkit-text-size-adjust: 100%;}
html, body{width: 100%; height: 100%; }

/* Buttons
   ----------------------------------------------------- */
button{display:inline-block; margin:1% 0; padding:6px 14px; font-family:product-sans-regular, Helvetica, sans-serif; font-size: 13px; border:1px solid #066293; border-radius:3px; background: #066293; color:#fff; cursor:pointer; -webkit-appearance:button; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
button:hover{border:1px solid #ddd; background: #eee; color:#444;}

.btn{display:inline-block; margin:1% 0; padding:6px 14px; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.btn2{display:inline-block; margin:1% 0; padding:6px 14px; border:1px solid #ddd; background: #fff; color:#444; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

.btn-del{border:1px solid #ddd; background: #fff; color:#444;}
.btn-del:hover{border:1px solid #a00; background: #a00; color:#fff;}

/* Inputs
   ----------------------------------------------------- */
input,select,textarea{font-family:product-sans-regular, Helvetica, sans-serif; width:100%; margin:0 0 5px 0; padding:14px; font-size:14px; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:none; border-radius: 5px; border:1px solid #ddd; background: #fff; color:#333; box-sizing: border-box;}
input[type='checkbox']{width:20px; -webkit-appearance: checkbox; padding:0;}
input[type='radio']{width:20px; -webkit-appearance: radio; padding:0;}
select{background:#fff url(//www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:right 10px center; background-size:22px;}
.reg{max-width:300px; padding:12px; background:#fc0 url(//www.autosynergy.co.uk/assets/icons/bg-form-reg.png) 0 0 no-repeat; background-size:contain; font-family:uk-number-plate, Arial; text-align:center; color:#000; font-size:32px; border:0; border-radius:3px; text-transform:uppercase;}
.reg.white{background:#fff url(//www.autosynergy.co.uk/assets/icons/bg-form-reg.png) 0 0 no-repeat; background-size:contain;}

label{display:inline-block; padding:10px 1% 10px 0.5%; cursor: pointer;}

textarea{font-family:product-sans-regular, Helvetica, sans-serif;}

/* Utilities
   ----------------------------------------------------- */
.w-auto{width:auto; padding-right:40px;}
.w-100{width:99.7%;}
.w-50{width:49.65%;}
.w-33{width:32.95%;}
.w-25{width:23%;}

.ui-datepicker-trigger{width:24px; margin:0 3px 0 -32px; cursor: pointer;}
.ui-timepicker-div select{width:auto; padding:6px; background:none; -webkit-appearance:menulist;}
.valign {position:relative;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);}
.valign-contain{position: absolute; top:0; bottom:0; width:100%; height:100%;}

.file-name {display:block; margin:0 0 15px 0; padding:5px 0; color:#666;}

/* Typography
   ----------------------------------------------------- */
h1{font-size:28px; font-family:product-sans-bold, Helvetica, sans-serif; font-weight:normal; display:block; margin:0 0 5px;}
h2{font-size:24px; font-weight:normal; display:block; margin:0 0 5px;}
h3{font-size:22px; font-weight:normal; display:block; margin:0 0 5px;}
h4{font-weight:normal; display:block; margin:0 0 5px;}

/* Links
   ----------------------------------------------------- */
a:link    {color:#444;text-decoration:none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
a:visited {color:#444;text-decoration:none;}
a:hover   {color:#aa0000; text-decoration:none;}


/* Graphic Container / Image Uploader
   ----------------------------------------------------- */
.veh-graphic{position: relative; border:1px solid #eee; width:100%; height:0; padding:0 0 56.47%; background: #f7f7f7; overflow:hidden;}
.veh-graphic .toggle{position: absolute; bottom:0; left:0; padding:4px; font-size: 26px; z-index: 1; color: #a00; cursor: pointer; transition: ease-in-out all 0.2s;}
.veh-graphic .toggle.active {color: #06d6a0;}
.veh-graphic .purge{position: absolute; top:0; left:0; padding:4px; font-size: 26px; z-index: 1; color: #19c759; cursor: pointer;}
.veh-graphic .delete{position: absolute; top:0; right:0; padding:4px; font-size: 26px; z-index: 1; color: #888; cursor: pointer; transition: ease-in-out all 0.2s;}
.veh-graphic .delete:hover{color: #900;}
.veh-graphic img{width:100%;}
.veh-graphic input{width:50%; display:block; margin:15px auto;}

.veh-graphic .layer{position: absolute; top:0; left:0; width:100%; height: 100%; background:#e4e8f1; text-align: center;}
.veh-graphic .layer.loading{z-index: 10;}
.veh-graphic .layer.confirm{z-index: 4; background: #fffafa;}
.veh-graphic .layer.confirm i{font-size: 32px; color:#900;}
.veh-graphic .layer.drop-zone{z-index: 6; background: #fff;}
.veh-graphic .layer.drop-hover{z-index: 7; background: #066293; opacity: 0; color: #fff; pointer-events: none; transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out; font-size: 48px;}
.veh-graphic .layer.drop-hover.visible{opacity:0.9;}
.veh-graphic .layer i{font-size:20px;}
.veh-graphic .layer.success{z-index: 8; background:#f4fdf8; color:#33ad44;}
.veh-graphic .layer.success i {font-size:24px;}
.veh-graphic .layer small{display: block; margin:4px 0;}

/* Tables
   ----------------------------------------------------- */
table {width: 100%; border-collapse: collapse;}
table th, table td {padding: 10px; text-align: left; border-color: #eee;}
table th {background: #066293; color: #fff; border: none; font-weight: lighter; font-size: 16px;}
table td {background: #fff;}

/* Alerts
   ----------------------------------------------------- */
.is-error {color: #cc0023 !important;}
.is-success {color: #19c759 !important;}
.is-warning {color: #f2a33b !important;}

.noty_theme__relax.noty_type__success {background:#eafaf1 !important;}

/* Information List
   ----------------------------------------------------- */
.info-list{margin:0 0 10px; font-size: 12px; width:100%;}
.info-list dt{padding:7px 3px; border-bottom:1px solid #eee;}
.info-list dt:last-child {border-bottom:none;}
.info-list dt span{float:right;}

/* Colours
   ----------------------------------------------------- */
.colours{clear: both; padding:5px 0; overflow: auto; display:flex; flex-direction:row; flex-wrap:wrap;}
.colours li{position:relative; float:left; width: calc(16.66% - 14px); margin:7px 14px 7px 0; padding:10px 10px 20px 10px; border:1px solid #fff; box-sizing: border-box; background: #fff; transition: ease-in-out all 0.2s;}

.colours li h4{margin:10px 2px;}
.colours li .btn-del{float:right;}
.colours li .swatch{width:36px; height:26px; text-align:center; position:relative; top:6px;}
.colours li .swatch div{position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}
.colours li .swatch i{font-size:24px; color:#a00;}
.colours li.add-colour {text-align:center;}
.colours li.add-colour .veh-graphic {height: 100%;}

@media screen and (max-width:2000px){
    .colours li{width: calc(20% - 14px);}
}
@media screen and (max-width:1650px){
    .colours li{width: calc(25% - 14px);}
}
@media screen and (max-width:1300px){
    .colours li{width: calc(33.33% - 14px);}
}
@media screen and (max-width:950px){
    .colours li{width: calc(50% - 14px);}
}

/* Form
   ----------------------------------------------------- */
.form-group {display:block; border-bottom:1px solid #eee; margin:15px 0; padding:15px 0;}
.form-group label {display:block; padding:0 0 15px 0;}
.form-group span {display:block; padding:15px 0; font-size:12px;}