/* 
 * ---------------------------------------- *
 * Name: 	Primary Styles                  *
 * Author:	Matt O'Neill                    *
 * ---------------------------------------- *
 */

/* global
   ============================ */

html { font-size: 10px; height: 100%; }
body { background: #ccc; font-family: 'Raleway',sans-serif; background-color: #ffffff; font-size: 10px; color: #5C5C5C; height: 100%; }

a,
input.app-button,
a:visited { color: #010d30; text-decoration: none; -webkit-transition: background 0.2s ease, text-decoration 0.2s ease, color 0.2s ease; -moz-transition: background 0.2s ease, text-decoration 0.2s ease, color 0.2s ease; -o-transition: background 0.2s ease, text-decoration 0.2s ease, color 0.2s ease; transition: background 0.2s ease, text-decoration 0.2s ease, color 0.2s ease; }
a:hover { text-decoration: underline; color: #010d30; }
a:hover,
a:active { outline: 0; }
ul { list-style: none; }
ul,
ol { padding: 0; margin: 0; }

h1 { font-size: 40px; font-size: 3rem; color: #010d30; margin-top: 0; float: left; width: 100%; }
h1, h2, h3, h4, .app-button, input[type="submit"] { font-family: 'Raleway',sans-serif; font-weight: 400; }

#main { float: left; width: 100%; position: relative; }
.wrapper { margin: 0 1.5% 0 1.5%; }
/*.wrapper { margin: 0 30px 0 31px; }*/

/* buttons */
.button,
a.button { display: inline-block; text-decoration: none; cursor: pointer; font-size: 14px; background: #2f2f2f; color: #fff; padding: 14px 20px; line-height: 1em; -webkit-transition: width 0.2s ease; -moz-transition: width 0.2s ease; -o-transition: width 0.2s ease; transition: width 0.2s ease; position: relative; }
.button:hover,
a.button:hover { text-decoration: none; background: #464646; color: #fff; }
.button span { display: block; color: #fff; }

a.link { text-decoration: underline; font-size: 1.4rem; line-height: 1.4rem; color: #010d30; }

.cta-input { position: relative; float: left; width: 100%; }
.cta-input div.go { position: absolute; right: -2px; width: 0; opacity: 0; height: 100%; background: #fff; cursor: pointer; -webkit-transition: width 0.4s ease, opacity 0.2s ease; -moz-transition: width 0.4s ease, opacity 0.2s ease; -ms-transition: width 0.4s ease, opacity 0.2s ease; -o-transition: width 0.2s ease; transition: width 0.4s ease, opacity 0.2s ease; }
.cta-input.active div.go { width: 50px; opacity: 1; }
.cta-input span.ico { position: absolute; right: 50%; top: 50%; margin-top: -10px; margin-right: -12px; width: 20px; height: 20px; display: block; }

.small-link { font-size: 14px; font-size: 1.4rem; }

.orders .cta-input div.go { right: 2px; top: 1px; }

.area .panel { margin-top: 20px; }
.area .panel:first-of-type { margin-top: 0; }
.area .panel > .wrapper > .inner { width: 94%; padding: 10px 3% 20px; }
.panel { padding: 20px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #fff; -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.1); -ms-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.1); box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.1); }
.panel h2 { margin: 0; margin-bottom: 10px; }

p.intro { width: 100%; float: left; margin: 0; margin-bottom: 15px; }
.has-intro-text h1 { margin-bottom: 10px; }

/* grids
   ---------------------------- */
.row { margin-bottom: 10px; }

.form-row { margin-bottom: 10px; float: left; width: 100%; }
.thirds > div { width: 33%; float: left; }

.two-thirds { width: 66.6%; float: left; }
.half { width: 49%; margin-left: 2%; float: left; }
.half:first-child { margin-left: 0; }
.third { width: 33%; float: left; }
.quarter { width: 25%; float: left; }
.fifth { width: 20%; float: left; }

/* columns
   ---------------------------- */
.col-2 { margin-top: 40px; }
.col-2:first-child { margin-top: 0; }
.col-2 > article { width: 48%; margin-left: 2%; float: left; }
.col-2 > article:first-child { margin-left: 0; }
.col-3 > article { width: 32.33%; margin-left: 1%; float: left; }
.col-3 > article:first-child { margin-left: 0; }
.col-4 > article { width: 24.25%; margin-left: 1%; float: left; }
.col-4 > article:first-child { margin-left: 0; }
.col-4 > article.float-right { float: right; }

/* neutral */
.color-neutral { color: #2f2f2f; }

/* information */
.in-order { background: #ffdead !important; color: #000; }
.in-order a,
.in-order div { color: #000; }

/* warning */
.is-set,
.is-sold { background: #cb4d4d !important; color: #fff; }
.is-set a,
.is-sold a,
.is-sold div { color: #fff; }
                   
/* themes
   ---------------------------- */
.theme.orange,
.theme.blue,
.theme.green,
.theme.purple,
.theme.black,
.theme.yellow { }

.theme.orange .theme-background { background: #EC8359 !important; color: #fff; }
.theme.blue .theme-background { background: #596DC0 !important; color: #fff; }
.theme.green .theme-background { background: #34B279 !important; color: #fff; }
.theme.purple .theme-background { background: #73438E !important; color: #fff; }
.theme.black .theme-background { background: #636363 !important; color: #fff; }
.theme.cyan .theme-background { background: #0097a7 !important; color: #fff; }

.theme.orange .theme-color { color: #EC8359 !important; }
.theme.blue .theme-color { color: #596DC0 !important; }
.theme.green .theme-color { color: #34B279 !important; }
.theme.purple .theme-color { color: #73438E !important; }
.theme.black .theme-color { color: #636363 !important; }
.theme.cyan .theme-color { color: #0097a7 !important; }

/* icons
   ---------------------------- */

/* master */
.ico { background-size: contain; background-repeat: no-repeat; }
.ico.diamond { background-image: url(/Assets/images/diamond.svg); }
.ico.jewellery { background-image: url(/Assets/images/jewellery.svg); }
.ico.set-jewellery { background-image: url(/Assets/images/set-jewellery.svg); }
.ico.profile { background-image: url(/Assets/images/profile.svg); }
.ico.payments { background-image: url(/Assets/images/actions/calculator.svg); width: 30px!important; }

/* categories */
.category-ico { }
#dashboard .category-ico { width: 70px; height: 70px; background-repeat: no-repeat; background-size: contain; }
.screen-title .category-ico { width: 32px; height: 32px; background-repeat: no-repeat; background-size: contain; }
.category-ico.appointment { background-image: url('/Assets/images/categories/appointment.svg'); }
.category-ico.appointment.white { background-image: url('/Assets/images/categories/appointment-white.svg'); }
.category-ico.contacts { background-image: url('/Assets/images/categories/contacts.svg'); }
.category-ico.contacts.white { background-image: url('/Assets/images/categories/contacts-white.svg'); }
.category-ico.stock { background-image: url('/Assets/images/categories/stock.svg'); }
.category-ico.stock.white { background-image: url('/Assets/images/categories/stock-white.svg'); }
.category-ico.orders { background-image: url('/Assets/images/categories/orders.svg'); }
.category-ico.orders.white { background-image: url('/Assets/images/categories/orders-white.svg'); }
.category-ico.metrics { background-image: url('/Assets/images/categories/metrics.svg'); }
.category-ico.metrics.white { background-image: url('/Assets/images/categories/metrics-white.svg'); }
.category-ico.config { background-image: url('/Assets/images/categories/config.svg'); }
.category-ico.website { background-image: url('/Assets/images/categories/website.svg'); }

.action-ico.email { background-image: url('/Assets/images/actions/email.svg'); }
.action-ico.tel { background-image: url('/Assets/images/actions/telephone.svg'); }
.action-ico.post { background-image: url('/Assets/images/actions/post.svg'); }

/* navigation */
.ico.dashboard { background-image: url(/Assets/images/categories/navigation/diamond.svg); }
.ico.contacts { background-image: url(/Assets/images/categories/navigation/contacts.svg); }
.ico.appointment { background-image: url('/Assets/images/categories/appointment-white.svg'); }
.ico.stock { background-image: url(/Assets/images/categories/navigation/stock.svg); }
.ico.orders { background-image: url(/Assets/images/categories/navigation/orders.svg); }
.ico.metrics { background-image: url(/Assets/images/categories/navigation/metrics.svg); }
.ico.config { background-image: url(/Assets/images/categories/navigation/config.svg); }
.ico.logout { background-image: url(/Assets/images/categories/navigation/logout.svg); }

/* status' */
.status-ico { width: 32px; height: 32px; background-repeat: no-repeat; background-size: contain; }
.status-ico.sml { width: 24px; height: 24px; }
.status-ico.restricted { background-image: url('/Assets/images/status/restricted.svg'); }
.status-ico.workinprogress { background-image: url('/Assets/images/status/workinprogress.svg'); }
.status-ico.ready { background-image: url('/Assets/images/status/ready.svg'); }
.status-ico.complete { background-image: url('/Assets/images/status/complete.svg'); }
.status-ico.invoice { background-image: url('/Assets/images/status/invoice.svg'); }
.status-ico.quote { background-image: url('/Assets/images/status/quote.svg'); }
.status-ico.delivery { background-image: url('/Assets/images/status/delivery.svg'); }
.ico.valid { background-image: url(/Assets/images/forms/valid.svg); }

/* notifications */
.notification { padding: 20px 2%; width: 96%; background: #f9f9f9; }
.notification .inner { margin-top: 3px; }
.notification .ico { width: 32px; height: 32px; background-repeat: no-repeat; background-size: contain; float: left; margin-right: 16px; }
.notification.info { background: #499273; color: #fff; }
.notification.warning { background: #cb4d4d; color: #fff; }
.notification.caution { background: #ffdead; color: #000; }
.notification.info a,
.notification.warning a { color: #fff; text-decoration: underline; }
.notification.caution a { color: #000; text-decoration: underline; }
.notification.info .ico,
.notification.warning .ico { background-image: url(/Assets/images/forms/alert.svg); }
.notification.caution .ico { background-image: url(/Assets/images/forms/alert-dark.svg); }
.inline-notification { font-size: 0.9em; padding-left: 12px; }

/* actions */
.ico.next { background-image: url(/Assets/images/actions/next.svg); }
.ico.save { background-image: url(/Assets/images/actions/save.svg); }

.warning,
.imminent { color: #cb4d4d; }


#full-bg-image { opacity: 0.6; background-size: cover; background-image: url(/Assets/images/CONTENT_IMAGES/loose-diamonds.jpg); width: 100%; height: 100%; position: fixed; background-repeat: no-repeat; }

/* site header
   ---------------------------- */
header#site-header { background: #fff; width: 100%; height: 70px; color: #010d30; position: relative; }
header#site-header h2 { font-weight: 300; font-size: 28px; font-size: 2.8rem; float: left; margin: 0; line-height: 70px; line-height: 7rem; }
header#site-header .logo { color: #010d30; font-weight: 400; text-decoration: none; -webkit-font-smoothing: antialiased; }
header#site-header .logo:hover { }

header#site-header .align-right { float: right; }
header#site-header .global-nav { height: 70px; }
header#site-header .global-nav > div { float: left; padding-top: 20px; height: 50px; margin-left: 20px; padding-left: 20px; }
header#site-header .global-nav > div:first-child { margin-left: 0; }

header#site-header .global-nav .area-info { }
header#site-header .global-nav .area-info .category-ico { width: 32px; height: 32px; float: left; margin-right: 12px; }
header#site-header .global-nav .area-info h3 { float: left; margin: 0; }

/* primary navigation
   ---------------------------- */

nav#primary-nav { position: relative; background: #2a2e39; font-size: 18px; font-size: 1.8rem; top: 0; left: -284px; bottom: 0; display: block; float: left; width: 100%; max-width: 284px; height: 100%; -moz-transition: all 300ms; -webkit-transition: all 300ms; transition: all 300ms; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhMmUzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjM0NDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #2a2e39 0%, #323443 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a2e39), color-stop(100%,#323443)); background: -webkit-linear-gradient(left, #2a2e39 0%,#323443 100%); background: -o-linear-gradient(left, #2a2e39 0%,#323443 100%); background: -ms-linear-gradient(left, #2a2e39 0%,#323443 100%); background: linear-gradient(to right, #2a2e39 0%,#323443 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2e39', endColorstr='#323443',GradientType=1 ); }
nav#primary-nav a:hover { color: #fff !important; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -ms-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; }
nav#primary-nav > header { height: 70px; background: #1e202c; margin-bottom: 20px; position: relative }
nav#primary-nav > header .inner { padding-left: 10px; padding-top: 12px; }
nav#primary-nav > header .inner .profile { width: 45px; height: 45px; float: left; margin-right: 10px; border-radius: 23px; background: rgba(255,255,255,0.2); }
nav#primary-nav span.edit-profile { position: absolute; right: 10px; bottom: 3px; }
nav#primary-nav span.edit-profile a { float: left; color: rgba(255,255,255,0.6) }
nav#primary-nav span.edit-profile:hover a { color: rgba(255,255,255,1) }
nav#primary-nav > header h2 { margin: 0; margin-top: 10px; font-size: 22px; font-size: 2.2rem; }
nav#primary-nav > div.section { padding: 6px 0; padding-left: 66px; position: relative; }
nav#primary-nav > div.section span.ico { display: block; width: 16px; height: 16px; position: absolute; left: 24px; top: 20px; }
nav#primary-nav > div.section.utility span.ico { left: -41px; top: 14px; }
nav#primary-nav > div.section h3 { color: #9b9ba3; font-size: 18px; font-size: 1.8rem; margin: 0; padding: 10px 0; }
nav#primary-nav > div.section h3 > a { color: #9b9ba3; text-decoration: none; }
nav#primary-nav > div.section ul { display: none; padding: 0; list-style: none; }
nav#primary-nav > div.section ul li { cursor: pointer; padding: 2px 0; padding-left: 5px; position: relative; }
nav#primary-nav > div.section.utility ul li { padding: 10px 0; }
nav#primary-nav > div.section ul li > a { color: #9b9ba3; font-weight: normal; font-size: 14px; font-size: 1.4rem; }
nav#primary-nav > div.section ul li.active > a { color: #fff; font-weight: normal; font-size: 16px; font-size: 1.6rem; }
nav#primary-nav > div.section ul li.active:hover a,
nav#primary-nav > div.section ul li.active:hover h3 a { color: #fff; }
nav#primary-nav > div.section ul li:hover a { text-indent: 100px; text-decoration: none; }
nav#primary-nav > div.section ul li:before { font-family: "ico"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 12px; text-align: center; font-variant: normal; font-size: 0.75em; text-transform: none; line-height: 1em; }

nav#primary-nav > div.section ul li.timeline:before { content: '\e805'; }
nav#primary-nav > div.section ul li.events:before { content: '\e802'; }
nav#primary-nav > div.section ul li.calendar:before { content: '\e800'; }
nav#primary-nav > div.section ul li.settings:before { content: '\e803'; }
nav#primary-nav > div.section ul li.logout:before { content: '\e804'; }

nav#primary-nav > div.section.utility { background: #1e202c; margin-top: 20px; }
nav#primary-nav > div.section.utility ul { display: block; }
nav#primary-nav > div.section.utility ul a,
nav#primary-nav > div.section.utility ul input { color: #fff; font-size: 18px; font-size: 1.8rem; }
nav#primary-nav > div.section.utility ul input { background: none; border: none; outline: none; padding: 0; }

body.menu-active nav#primary-nav { left: 0px; }
body.menu-active nav#primary-nav ul { left: 0px; opacity: 1; }

div#content { position: relative; width: calc(100% - 284px); background: #f6f6f6; font-size: 18px; font-size: 1.8rem; top: 0; left: 0; height: 100%; overflow: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: left 300ms; -webkit-transition: left 300ms; transition: left 300ms; /*-webkit-box-shadow: -2px 0 4px 0 rgba(100, 100, 100, 0.50); -moz-box-shadow: -2px 0 4px 0 rgba(100, 100, 100, 0.50); box-shadow: -2px 0 4px 0 rgba(100, 100, 100, 0.50);*/ }


/* hamburger */
#hamburger { margin-right: 20px; display: none; font-size: 12px; float: left; position: relative; overflow: hidden; margin: 0; padding: 0; margin-left: 10px; margin-top: 14px; width: 40px; height: 40px; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: 0; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; }
#hamburger:focus { outline: none; }
#hamburger span { display: block; position: absolute; top: 19px; height: 4px; background: #e8e8e8; }
#hamburger span::before,
#hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: #e8e8e8; content: ""; }
#hamburger span::before { top: -10px; }
#hamburger span::after { bottom: -10px; }

#hamburger span { -webkit-transition: background 0 0.3s; transition: background 0 0.3s; }
#hamburger span::before,
#hamburger span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0; }
#hamburger span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
#hamburger span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }

#hamburger.menu-active span { background: none; }
#hamburger.menu-active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#hamburger.menu-active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
#hamburger.menu-active span::before,
#hamburger.menu-active span::after { -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s; }

/* breadcrumb
   ---------------------------- */
#breadcrumb { float: right; width: 50%; }
#breadcrumb > ul { float: right; font-size: 14px; font-size: 1.4rem; line-height: 50px; line-height: 5rem; }
#breadcrumb > ul > li { float: left; }

/* page level
   ============================ */

/* basic layout
   ---------------------------- */
#basic-layout { }
#basic-layout #content { width: 100%; }

/* screen title
   ---------------------------- */
.screen-title { display: none; width: 100%; background: #dcdcdc; height: 50px; border-top: 5px #777 solid; margin-bottom: 20px; }
.screen-title h2 { font-size: 24px; font-size: 2.4rem; margin: 0; font-weight: 400; float: left; width: 50%; line-height: 50px; line-height: 5rem; }
.screen-title .category-ico { float: left; width: 40px; margin-top: 9px; margin-right: 10px; }

/* login form
   ---------------------------- */
#login-form,
#send-code-form, #verify-code-form, #verify-phone-number-form, #lockout,
#forgot-password-form, #forgot-password-confirmation,
#reset-password-form, #reset-password-confirmation,
#change-password-form { padding: 0; max-width: 500px; margin: 0 auto; margin-top: 5%; z-index: 1; position: relative; }
.change-password-container { opacity: 0.6; background-size: cover; background-image: url(/Assets/images/CONTENT_IMAGES/loose-diamonds.jpg); width: 100%; height: 100%; background-repeat: no-repeat; }
.forgot-password-link { padding-left: 10px; font-size: 14px; font-weight: 400; text-decoration: none; float: left; width: 50%; line-height: 50px; }
/* dashboard
   ---------------------------- */
#dashboard { width: 100%; z-index: 1; position: relative; }
#dashboard > article.tile { width: 33.33%; float: left; height: 300px; overflow: hidden; position: relative; }
#dashboard > article.tile.third { width: 33.33%; }
#dashboard > article.tile.two-thirds { width: 66.66%; }

#dashboard > article.tile > header { float: left; width: 92%; padding: 10px 4%; position: absolute; background: rgba(0, 0, 0, 0.04); /*height: 49px*/ }
#dashboard > article.tile > header h3 { margin: 0; color: #fff; float: left; }
#dashboard > article.tile > header .ico-tray { float: right; width: 80px; margin-top: 2px; }
#dashboard > article.tile > header .ico-tray > div { opacity: 0.7; width: 26px; height: 26px; margin-left: 5px; background: rgba(255, 255, 255, 0.4); float: right; border-radius: 13px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
#dashboard > article.tile > header .ico-tray > div > span { margin-left: 6px; margin-top: 6px; display: block; width: 14px; height: 14px; float: left; opacity: 0.8; }
#dashboard > article.tile > section { width: 92%; padding: 10px 4%; height: 180px; padding-top: 110px; color: #fff; float: left; position: relative; -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; }
#dashboard > article.tile > section > img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: -1; min-height: 100%; }
#dashboard > article.tile > section span.bg { width: 100%; height: 100%; position: absolute; opacity: 0.75; top: 0; left: 0; z-index: -1; }
#dashboard > article.tile > section .category-ico { float: left; width: 60px; margin-right: 10px; -webkit-transition: width 200ms, height 200ms; -moz-transition: width 200ms, height 200ms; -ms-transition: width 200ms, height 200ms; -o-transition: width 200ms, height 200ms; transition: width 200ms, height 200ms; }
#dashboard > article.tile > section h2 { color: #ffffff; float: left; margin: 0; margin-left: 10px; height: 50px; padding-top: 10px; -webkit-transition: font-size 200ms; -moz-transition: font-size 200ms; -ms-transition: font-size 200ms; -o-transition: font-size 200ms; transition: font-size 200ms; }
#dashboard > article.tile > section h2 > span { display: block; height: 2px; background: #fff; margin: 0; margin-top: 10px; width: 0; -webkit-transition: 700ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -moz-transition: 700ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -ms-transition: 700ms cubic-bezier(0.230, 1.000, 0.320, 1.000); -o-transition: 700ms cubic-bezier(0.230, 1.000, 0.320, 1.000); transition: 700ms cubic-bezier(0.230, 1.000, 0.320, 1.000); }
#dashboard > article.tile > section > header { float: left; width: 100%; }
#dashboard > article.tile > section > article.links { float: left; width: 100%; opacity: 0; transition: opacity 0.2s; }
#dashboard > article.tile > section > article.links > div { width: 70px; height: 80px; float: left; transition: width 300ms; }
#dashboard > article.tile > section > article.links > ul { float: left; width: calc(94% - 70px); position: relative; bottom: -20px; transition: bottom 0.8s; }
#dashboard > article.tile > section > article.links > ul > li { float: left; width: 100%; margin-bottom: 10px; }
#dashboard > article.tile.two-thirds > section > article.links > ul > li { width: 44%; }
#dashboard > article.tile > section > article.links > ul > li,
#dashboard > article.tile > section > article.links > ul > li > a { height: 24px; color: #ffffff; text-decoration: none; padding-left: 6%; line-height: 18px; line-height: 1.8rem; font-size: 18px; font-size: 1.8rem; }
#dashboard > article.tile > section > article.links > ul > li:before { content: ""; border-color: transparent #fff; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1%; top: 1.4rem; position: relative; }
#dashboard > article.tile > section > article.links > ul > li > a:hover { text-decoration: underline; }

#dashboard > article.tile > section:hover h2 > span { width: 100%; }
#dashboard > article.tile > section.has-links:hover { padding-top: 60px; height: 230px; }
#dashboard > article.tile > section.has-links:hover .category-ico { width: 50px; height: 50px; }
#dashboard > article.tile > section.has-links:hover h2 { font-size: 24px; font-size: 2.4rem; }

#dashboard > article.tile > section.has-links:hover > article.links { opacity: 1; transition: opacity 1s; }
#dashboard > article.tile > section.has-links:hover > article.links > div { width: 60px; height: 80px; }
#dashboard > article.tile > section.has-links:hover > article.links > ul { bottom: 0; }

/* areas
   ---------------------------- */
.area { padding-top: 20px; }
.area h1 { width: auto; margin-bottom: 6px; }
.area > .wrapper { }
.area,
.area > div.columns { width: 100%; }
.area > div.columns > div.col { }
.area > div.columns > div article { width: 100%; margin-bottom: 20px; float: left; }
.area > div.columns > div article > header { float: left; width: 100%; }
.area > div.columns > div article > div { background: #dcdcdc; float: left; width: 100%; }
.area > div.columns > div article .inner { margin: 15px; }
.area > div.columns > div article .inner h3 { margin: 0; font-family: 'Arial'; }

.banner-actions { position: relative; margin-top: 20px; float: left; width: 100%; z-index: 0; }
.banner-actions h2 { margin: 10px 0; font-size: 2.4rem; line-height: 3rem; }
.modal-overlay-open .banner-actions,
.modal-app-screen-open .banner-actions { z-index: -1; }
.banner-actions article { line-height: 30px; line-height: 3rem; }

.banner-actions.system .panel .wrapper article { margin-right: 30px; float: left; }
/* stock */
.area > div.columns > div article .inner .price { float: right; }
#stock-area { }
.area .sub-heading { float: right; }
.area .sub-heading h4 { margin-bottom: 0; }
.area .sub-heading h3 > strong { font-size: 2.6rem; font-family: 'Arial'; }
.area .sub-heading h3 { float: left; margin-right: 15px; }
.area .sub-heading h3 a { font-size: 2.3rem; font-family: 'Arial'; color: #5C5C5C; }

#stock-area .search-stock h2 { float: left; border: none; }

/* filter
   ---------------------------- */
.filter h2,
.filter label,
.filter .stylish-select { color: #555; }

/* listing
   ---------------------------- */
.search .first-search { width: 25%; margin: 0 auto; cursor: pointer; background: #fff; padding: 5% 4% 5% 5%; }
.search .first-search h3,
.search .first-search img { float: left; }
.search .first-search h3 { margin: 0; margin-left: 20px; line-height: 4.5rem; }
.search.has-searched .first-search { display: none; }
.search .filter { display: none; }
.search.has-searched .filter { display: block; }
.search div.pager { display: none; }
.search.has-searched div.pager { display: block; }

section.listing { position: relative; }
section.listing > .panel { margin-left: 20px; margin-right: 20px; }
section.listing .results { padding-top: 0; margin-top: 0; }
section.listing .results .dynamic { float: left; width: 100%; }
section.listing .results .no-result { margin-top: 20px; }
section.listing#stock-listing .results .dynamic > div.no-result:first-child { margin-top: 80px; }
section.listing .results .no-result h2 { text-align: center; }
section.listing div.row { float: left; width: 100%; height: 250px; margin-bottom: 1.25%; }
section.listing div.row > article { position: relative; height: 100%; background: #ffffff; border-radius: 7px; box-shadow: 0px 2px 9px 3px rgba(100, 100, 100, 0.1); margin-left: 1.25%; width: 32.5%; float: left; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
section.listing div.row > article:first-child { margin-left: 0; }
section.listing div.row > article:hover { cursor: pointer; background: #f9f9f9; box-shadow: 0px 2px 9px 4px rgba(100, 100, 100, 0.3); }
section.listing article { position: relative; }
section.listing div.row > article a { text-decoration: none; float: left; width: 100%; }
section.listing div.row > article a > header,
section.listing div.row > article a div.main,
section.listing div.row > article a > footer { }

section.listing div.row > article a div.main.inner { height: 82px; margin: 20px; }
section.listing div.row > article a div.inner { margin: 20px; height: 24px; }
section.listing div.row > article a div.main.inner > div { overflow: hidden; font-size: 16px; font-size: 1.6rem; margin-top: 10px; }
section.listing div.row > article a div.main.inner > div:first-child { margin-top: 0; }
section.listing div.row > article a div.main.inner > div div.action-ico { margin: 0; width: 16px; height: 16px; float: left; margin-top: 2px; margin-right: 10px; }

section.listing div.row > article a > header { border-bottom: 1px solid #e9e9e9; }
section.listing div.row > article a > header h3 { margin: 0; float: left; }
section.listing div.row > article a > header span.id { font-size: 14px; font-size: 1.4rem; float: right; line-height: 294px; line-height: 2.9rem; color: #2f2f2f; }
section.listing div.row > article a > footer { border-top: 1px solid #e9e9e9; }
section.listing div.row > article a > footer .history > div { float: left; width: 30%; }
section.listing div.row > article a > footer div.inner { height: 54px; }

section.listing article span.overlay { background: rgba(255, 255, 255, 0.65); width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; -ms-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }
section.listing article span.overlay.add > span,
section.listing article span.overlay.edit > span { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; }
section.listing article span.overlay.add > span { background: url(/Assets/images/actions/add.svg); }
section.listing article span.overlay.edit > span { background: url(/Assets/images/actions/edit.svg); }
section.listing article:not(.selected):hover span.overlay { opacity: 1; }

section.listing article.selected:hover span.overlay { cursor: default; }

section.listing .results { padding: 0 }
section.listing.infinite .results { max-height: 414px; overflow-y: auto; }

section.listing .results > div.loading-mask { display: none; }
section.listing .results > div.loading-mask > .spinner { top: 30%; }

#quote-builder section.listing article:not(.selected):hover span.overlay { opacity: 0; }
#quote-builder section.listing#stock-listing .results .listing-view-mode-toggle { /*display: none;*/ top: 35px; }
#quote-builder .total-cost-price,
#quote-builder [data-total="Total Cost Price"] { display: none; }

/* selectable listing */
section.listing article.selected { opacity: 0.3; }

/* pager */
div.pager { }
section.listing div.pager { width: 200px; margin: 0 auto; padding: 20px 0; height: 30px; margin-top: -45px; }
#contact-search section.listing div.pager { width: auto; margin-top: 0; }
#order-listing section.listing div.pager { width: auto; margin-top: 0; }
.item-builder section.listing div.pager { margin-top: 0; }
section.listing div.pager > .count { text-align: center; margin-bottom: 10px; position: relative; color: #555; }
section.listing div.pager > .count > span[data-action="clear-filters"] { position: absolute; right: 0; top: 0; cursor: pointer; font-size: 11px; font-size: 1.1rem; }
section.listing div.pager > .count > span[data-action="clear-filters"].disabled { opacity: 0.2; }
section.listing div.pager > .count > span[data-action="clear-filters"]:hover { text-decoration: underline; }
section.listing div.pager > div.controls div.before,
section.listing div.pager > div.controls div.after { width: 10%; float: left; }
section.listing div.pager > div.controls div.before > span,
section.listing div.pager > div.controls div.after > span { width: 28%; margin-left: 4%; border-radius: 3px; color: #fff; background: #010d30; float: left; padding: 10%; text-align: center; cursor: pointer; }
section.listing div.pager > div.controls div.before > span:first-child,
section.listing div.pager > div.controls div.after > span:first-child { margin-left: 0; }
section.listing div.pager > div.controls div.before > span.disabled,
section.listing div.pager > div.controls div.after > span.disabled { cursor: default; opacity: 0.2; }
section.listing div.pager > div.controls div.indeces { width: 80%; float: left; text-align: center; }
section.listing div.pager > div.controls div.indeces > span { width: 6%; margin-left: 2%; border-radius: 3px; color: #363636; background: #ccc; padding: 1.25% 0; text-align: center; cursor: pointer; display: none; }
section.listing div.pager > div.controls div.indeces > span.dots { display: inline-block; }
section.listing div.pager > div.controls div.indeces > span.show { display: inline-block; }
section.listing div.pager > div.controls div.indeces > span:hover { background: #ccc; }
section.listing div.pager > div.controls div.indeces > span.current { color: #fff; }
section.listing div.pager > div.controls div.indeces > span:first-child { margin-left: 0; }

section.listing div.pager > div.controls div.before > span,
section.listing div.pager > div.controls div.indeces > span,
section.listing div.pager > div.controls div.after > span { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

section.listing .load-more { display: none; float: left; height: 40px; line-height: 40px; width: 100%; text-align: center; cursor: pointer; }
section.listing .load-more:hover { background: #ccc; color: #000; }
section.listing .load-more > .trigger { float: none; }


/* search filters
   ---------------------------- */
.search-filter span.search-icon { background: url(/Assets/images/actions/search-white.svg) left no-repeat; width: 30px; height: 30px; margin-right: 20px; display: inline-block; }
.search-filter span.search-icon-normal { background: url(/Assets/images/actions/search.svg) left no-repeat; width: 30px; height: 30px; margin-right: 20px; display: inline-block; }
.search-filter { }
.search-filter > div { padding-bottom: 10px; }
.search-filter.contacts div.form .form-field > div { float: left; width: 49.25%; margin-left: 1.25%; }
.search-filter div.form .form-field:first-child > div { margin-left: 0; }
.search-filter div.form .form-field a.submit { background: #dcdcdc; height: 44px; outline: none; border: none; font-size: 1.4rem; float: right; color: #2f2f2f; }
.search-filter .form-field.third { margin-left: 2%; width: 32%; }
.search-filter .form-field.third:first-child { margin-left: 0 }

.search-filter .form-field.quarter { margin-left: 1.33%; width: 24%; }
.search-filter .form-field.quarter:first-child,
.search-filter .form-field.quarter:first-of-type { margin-left: 0 }

/* contact filters
 ---------------------------- */
.search-filter.contacts h2 { margin: 0; margin-bottom: 10px; }
.search-filter.contacts div.add-contact,
.search-filter.contacts div.find-contact { float: left; margin-left: 0; margin-top: 16px; }
.search-filter.contacts div.find-contact { width: 100%; padding-right: 0; }
.search-filter.contacts div.find-contact h2 { float: left; margin-right: 2%; width: 30%; }
.search-filter.contacts div.find-contact .form { float: left; width: 68%; }
.search-filter.contacts div.find-contact > h2 > span,
.search-filter.contacts div.add-contact > h2 > span { width: 25px; height: 25px; margin-right: 10px; display: inline-block; }
.search-filter.contacts div.add-contact > h2 > span { background: url(/Assets/images/actions/add.svg) left no-repeat; }
.search-filter.contacts div.find-contact > h2 > span { background: url(/Assets/images/actions/search.svg) left no-repeat; }
.search-filter.contacts div.add-contact { width: 35.28%; margin-right: 0; }
.search-filter.contacts .add-contact div.form .form-field > div { width: 75%; }
.search-filter.contacts .add-contact div.form .form-field.add-button div { width: 22.5%; margin-left: 2.5%; background: #dcdcdc; margin-top: 35px; height: 44px; line-height: 44px; text-align: center; }
.search-filter.contacts .add-contact div.form .form-field.add-button div a { background: #dcdcdc; }

/* order filters */
.search-filter.orders .id-name-search { width: 32%; }
.search-filter.orders .checkbox-filters { width: 64%; margin-left: 2%; }

/* stock filters
   ---------------------------- */
#find-products #exclude-set-items { display: none; }

/* contact listing
   ---------------------------- */
.contacts.listing .results { margin-top: 20px; padding-top: 20px; }
#order-listing .listing .results { position: relative; }

.contacts.listing hgroup.supplier { float: left; margin-top: -8px; }
.contacts.listing hgroup.supplier h4 { font-size: 12px; margin: 0; }

/* stock listing
   ---------------------------- */
#stock-listing { }

#stock-listing .results .dynamic img { left: 50%; margin-left: -50px; margin-bottom: 20px; position: relative; cursor: pointer; }
#find-products section.listing#stock-listing .dynamic-header { width: 96%; padding: 0 1%; }
section.listing#stock-listing .dynamic { position: relative; }

section.listing#stock-listing .results header.table-cells { position: absolute; z-index: 1; width: 100%; height: 60px; line-height: 60px; background: #fff; font-weight: bold; border-bottom: 1px solid #e2e2e2; }
section.listing#stock-listing .results header.table-cells { color: #010d30; }
section.listing#stock-listing .results .table-cells { font-size: 13px; font-size: 1.3rem; color: #777; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div,
section.listing#stock-listing .results .table-cells > div { float: left; border-left: 1px solid #e2e2e2; width: 75px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 3px; text-align: center; }
section.listing#stock-listing .results article .table-cells > div { float: left; border-left: none; width: 75px; }
section.listing#stock-listing .results .table-cells > div.diamond-collection { width: 100%; }

section.listing#stock-listing .results .table-cells span.ico { width: 16px; height: 16px; display: block; position: absolute; left: 10px; top: 16px; }
section.listing#stock-listing .results .table-cells span.ico.set-jewellery { width: 24px; height: 24px; top: 11px; background-image: url(/Assets/images/set-jewellery-white.svg); }

section.listing#stock-listing .results .table-cells > .diamond-collection > div.id,
section.listing#stock-listing .results .table-cells > div.id { width: 50px; margin-left: 15px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.shape,
section.listing#stock-listing .results .table-cells > div.shape { width: 100px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.measurements,
section.listing#stock-listing .results .table-cells > div.measurements { width: 125px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.location,
section.listing#stock-listing .results .table-cells > div.location { width: 100px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.posycufl,
section.listing#stock-listing .results .table-cells > div.posycufl { width: 122px; position: relative; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.posycufl > div,
section.listing#stock-listing .results .table-cells > div.posycufl > div { float: left; width: 30px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.colclawei,
section.listing#stock-listing .results .table-cells > div.colclawei { width: 147px; position: relative; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.colclawei > div,
section.listing#stock-listing .results .table-cells > div.colclawei > div { float: left; width: 48px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.price,
section.listing#stock-listing .results .table-cells > div.price { width: 275px; position: relative; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div.price > div,
section.listing#stock-listing .results .table-cells > div.price > div { float: left; width: 90px; }
section.listing#stock-listing .results .table-cells > .diamond-collection > div:first-child,
section.listing#stock-listing .results .table-cells > div:first-child { border-left: none; }
section.listing#stock-listing .results .table-cells > div.set-bool { width: 40px; }

section.listing#stock-listing .results .table-cells.jewellery { }
section.listing#stock-listing .results .table-cells.jewellery > div.type,
section.listing#stock-listing .results .table-cells.jewellery > div.metal,
section.listing#stock-listing .results .table-cells.jewellery > div.design { width: 130px; }

.auth__is-not-admin .cost-price { display: none; }
.auth__is-not-admin .margin { display: none; }

section.listing#stock-listing .results article.product article.product { background: #2a2e39; }
section.listing#stock-listing .results .dynamic .table-cells.product { font-weight: 500; color: #fff; }
section.listing#stock-listing .results .table-cells.product > div.id { width: 110px; }
section.listing#stock-listing .results .table-cells.product > div.comments { width: 350px; text-align: left; padding-left: 15px; }

section.listing#stock-listing .results div.row { margin-bottom: 0; height: auto; position: relative; }
section.listing#stock-listing .results div.row > article { height: auto; width: 100%; margin-left: 0; }

section.listing#stock-listing .results article { width: 100%; font-family: 'Arial'; }
section.listing#stock-listing .results article .table-cells { line-height: 50px; border-bottom: 1px solid #e2e2e2; }
section.listing#stock-listing .results article a { float: left; width: 100%; }
section.listing#stock-listing .results article a:hover { background: #fafafa; }

#stock-area section.listing#stock-listing .results .dynamic-header .table-cells { display: block; }
section.listing#stock-listing .results .dynamic-header { }
section.listing#stock-listing .results .dynamic > article:first-child,
section.listing#stock-listing .results .dynamic > div:first-child { margin-top: 60px; }

section.listing#stock-listing .results article.product > .row { margin: 2% 1%; width: 98%; background: #f6f6f6; }
section.listing#stock-listing .results article.product article.jewellery,
section.listing#stock-listing .results article.product article.diamond { margin-left: 1%; width: 99%; }

/* listing view modes */
section.listing#stock-listing .results .listing-view-mode-toggle { width: 80px; position: absolute; right: 180px; top: -25px; z-index: 1; }
section.listing#stock-listing .results .listing-view-mode-toggle > div { float: left; margin-left: 10px; width: 20px; height: 20px; cursor: pointer; }
section.listing#stock-listing .results .listing-view-mode-toggle > div:first-child { margin-left: 0; }
section.listing#stock-listing .results .listing-view-mode-toggle > div.disabled { opacity: 0.2; }

section.listing#stock-listing .results.diamond-filter .dynamic .table-cells.jewellery,
section.listing#stock-listing .results.diamond-filter .dynamic .table-cells.product { opacity: 0.1; }
section.listing#stock-listing .results.jewellery-filter .dynamic .table-cells.diamond,
section.listing#stock-listing .results.jewellery-filter .dynamic .table-cells.product { opacity: 0.1; }

#find-products section.listing#stock-listing .results header.table-cells.jewellery,
#find-products section.listing#stock-listing .results header.table-cells.diamond { width: 100%; }
section.listing#stock-listing .results .dynamic-header .table-cells.product { display: block; }
section.listing#stock-listing .results.jewellery-filter .dynamic-header .table-cells.jewellery { display: block; }
section.listing#stock-listing .results.jewellery-filter .dynamic-header .table-cells.product { display: none; }
section.listing#stock-listing .results.diamond-filter .dynamic-header .table-cells.diamond { display: block; }
section.listing#stock-listing .results.diamond-filter .dynamic-header .table-cells.jewellery { display: none; }
section.listing#stock-listing .results.diamond-filter .dynamic-header .table-cells.product { display: none; }
#find-products section.listing .row span.overlay { }
#find-products section.listing .row span.overlay > span { width: 32px; height: 32px; }
#find-products section.listing .row:hover > span.overlay { opacity: 1; }
#find-products section.listing article:hover span.overlay { opacity: 0; }

/* item builder
   ---------------------------- */
#set-jewellery { }

#set-jewellery .item-builder { padding-bottom: 80px; }

#contact-select header > .col .ico,
.confirm header > .col .ico,
.selected-items header > .col .ico { float: left; width: 40px; height: 40px; margin-top: 2px; margin-right: 10px; background-repeat: no-repeat; }
.confirm header > .col .ico { width: 30px; margin-right: 20px; }

.item-builder .confirm,
.stock-item-selection .selected-items { padding: 15px 0; margin-bottom: 10px; border-top: 1px solid #010d30; }
.stock-item-selection .selected-items:first-child { border-top: none; }
.stock-item-selection .selected-items .table-header.item { background: none; border-bottom: 1px solid #ccc; font-size: 1.6rem; font-weight: 600; }
.stock-item-selection .selected-items .table-header.item > div.is-set { background: none!important; color:#5C5C5C }
.item-builder .confirm header,
.stock-item-selection .selected-items header { float: left; width: 100%; }
#contact-select header > .col,
.item-builder .confirm header > .col,
.stock-item-selection .selected-items header > .col { float: left; width: 72%; }
#contact-select header > .col:first-child,
.item-builder .confirm header > .col:first-child,
.stock-item-selection .selected-items header > .col:first-child { margin: 6px; margin-right: 2%; width: 25%; }
.item-builder .confirm header h2,
.stock-item-selection .selected-items header h2 { margin: 0; }
.item-builder .confirm header .app-button.search,
.stock-item-selection .selected-items header .app-button.search { float: left; margin-top: 2px; }
.stock-item-selection .selected-items .item { float: left; width: 100%; background: #eee; height: auto; line-height: 50px; position: relative; border-bottom: 1px solid #fff; }
.stock-item-selection .selected-items .item > div { float: left; text-align: center; }
.stock-item-selection .selected-items .item > div.sale-price,
.stock-item-selection .selected-items .item > div.edit-row { float: right; display: block; }
.stock-item-selection .selected-items .item.product > div,
.stock-item-selection .selected-items .item.jewellery > div,
.stock-item-selection .selected-items .item.diamond > div { width: 12.5%; font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.stock-item-selection .selected-items .item.diamond > div.certification-number { width: 20%; text-align: left; overflow: visible; }
.stock-item-selection .selected-items .item.jewellery > div.is-set,
.stock-item-selection .selected-items .item.diamond > div.is-set { width: 10%; }
.stock-item-selection .selected-items .item.jewellery > div { width: 14%; }
.stock-item-selection .selected-items .item.jewellery > div.wide { width: 20%; }
.stock-item-selection .selected-items .item.product { height: auto; }
.stock-item-selection .selected-items .item.product > div.description { width: 70%; line-height: 28px; padding: 10px 0; }
.stock-item-selection .selected-items .item.jewellery > div.description,
.stock-item-selection .selected-items .item.diamond > div.description { width: 95%; padding-left: 5%; font-size: 14px; }
.stock-item-selection .selected-items .item > div.remove { width: 15px; height: 15px; position: absolute; right: 10px; top: 17px; background: url(/Assets/images/close-dark.svg); cursor: pointer; }
.stock-item-selection .selected-items .selection { float: left; width: 100%; font-family: 'Arial'; }
.stock-item-selection .selected-items .item .description { text-align: left; }
/*.stock-item-selection .selected-items .item.diamond .description { width: 70%; }*/

.item-builder .submit { height: 43px; width: 100%; }
.item-builder .confirm .summary-header .complete { float: left; padding-right: 40px; position: relative; }
.item-builder .confirm .summary-header .complete > span { position: absolute; right: 10px; top: 19px; width: 10px; height: 10px; background: url(/Assets/images/chevron-white.svg); -webkit-transition: transform 0.5s; -moz-transition: transform 0.5s; -ms-transition: transform 0.5s; -o-transition: transform 0.5s; transition: transform 0.5s; }
.item-builder .confirm .summary-header .complete.open > span { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.item-builder .confirm .summary-header .totals { float: right; }
.item-builder .confirm .summary-header .totals > div { float: left; margin-left: 30px; }
.item-builder .confirm .summary-header .totals > div:first-child { margin-left: 0; }
.item-builder .confirm .summary-header .totals > div div.value { font-size: 40px; font-size: 4rem; color: #010d30; margin-left: 10px; font-family: Helvetica, Arial; }

/*.item-builder .confirm .summary-header .total-value,
.item-builder .confirm .summary-header .total-sale-price { float: right; height: 50px; line-height: 50px; margin-bottom: 20px; }
.item-builder .confirm .summary-header .total-value .price,
.item-builder .confirm .summary-header .total-sale-price .price { font-size: 40px; font-size: 4rem; color: #010d30; margin-left: 10px; font-family: Helvetica, Arial; }*/
.item-builder .confirm .editable-display { padding-right: 160px; float: right; margin-right: 20px; }
.item-builder .confirm .editable-display label { line-height: 5rem; }
.item-builder .confirm .editable-display .display-value,
.item-builder .confirm .editable-display input { width: 100px; position: absolute; top: 0; right: 10px; height: 30px; }
.item-builder .confirm .editable-display input { bottom: 10px; top: auto; }
.item-builder .confirm .stylish-select { color: #555555; }

.item-builder .confirm .mon-form.full-form .form-field:not(.error) { background-color: #fff; }
.item-builder .confirm .mon-form.full-form .form-section > div > div.form-field { float: left; width: 45%; display: block; box-sizing: content-box; }
.item-builder .confirm .mon-form.full-form .form-section > div > div.form-field:first-child { margin-left: 0; }
.item-builder .search-filter .controls { display: none; }
.item-builder .search-filter[data-filter-view="Product"] .controls { display: block; }
.item-builder .selected-items .error-message { opacity: 0; float: left; padding: 11px 20px; background: #811; color: #fff; margin-left: 20px; transition: opacity 2.5s; }
.item-builder .selected-items .error-message.active { opacity: 1; transition: opacity 0.4s; }

.confirm .mon-form .form-section > div { width: 100%; padding: 10px 0 20px; }

/* add stock
   ---------------------------- */
#add-stock.tabber { position: relative; }
#add-stock.tabber > .controls { float: left; width: 100%; position: absolute; right: 20px; top: 20px; }

#add-stock .panel { padding-top: 0; }

/* ORDER MANAGEMENT
   ============================ */

/* create-quote
   ---------------------------- */
#create-quote { }
#create-quote .item-builder { position: relative; }

#contact-select.panel { margin-top: 0; }

#create-quote .form .submit { width: auto; }

#contact-select { }
#contact-select .row > div { float: left; margin-left: 10px; }
#contact-select .row > div:first-child { margin-left: 0; }
#contact-select header .row > div { font-weight: 600; font-size: 2rem; }

.cost-price,
.sale-price,
.sale-price-converted,
.margin { display: none; }

/* confirm order
   ---------------------------- */
#order-confirmation { }
#order-confirmation #quick-summary { }
#order-confirmation #quick-summary article > div { width: 100%; float: left; margin-bottom: 5px; }
#order-confirmation #quick-summary article > div > div { float: left; width: 60%; }
#order-confirmation #quick-summary article div.key { width: 40%; font-weight: 600; }
#order-confirmation #quick-summary article > div ul { }
#order-confirmation #quick-summary article > div ul > li { float: left; padding: 4px 3% 3px; width: 43%; border: 1px solid #fff; background: #eee; font-family: 'Arial'; }
#order-confirmation #quick-summary article.wider-key > div > div { width: 73%; }
#order-confirmation #quick-summary article.wider-key > div > div.key { width: 27%; }
#order-confirmation #email-details { margin-top: 0 }

#order-confirmation #quick-summary .print.ring-size-display { float: left; width: 100%; margin-bottom: 20px; }
#order-confirmation #quick-summary .print.ring-size-display > div { float: left; }
#order-confirmation #quick-summary .print.ring-size-display > div:first-child { margin-right: 10px; }

/* order listing
   ---------------------------- */
.order-list .results ul > li,
.order-list .results ul > li .order-list-item > a { float: left; width: 100%; padding-top: 10px; padding-bottom: 2px; position: relative; }
.order-list .order-list-item { float: left; width: 98%; padding: 0 1%; }
.order-list .order-list-item:hover:not(header) { background: #f2f2f2; }
.order-list .results ul > li .order-list-item { padding-top: 7px; padding-bottom: 7px; }
.order-list header.order-list-item { font-weight: bold; }
.order-list .order-list-item div { float: left; margin-left: 2%; }
.order-list .order-list-item div:first-child { margin-left: 0; }
#order-listing .order-list .order-list-item div.id { width: 7%; }
#order-listing .order-list .order-list-item div.name { width: 15%; }
#order-listing .order-list .order-list-item div.description { width: 25%; }
#order-listing .order-list .order-list-item div.status { width: 7%; text-align: center; }
#order-listing .order-list .order-list-item div.status div.status-ico { display: inline-block; float: none; }
#order-listing .order-list .order-list-item div.due { width: 10%; }
#order-listing .order-list .order-list-item div.amount { width: 13%; }
#order-listing .order-list .order-list-item span.status-ico.delivery { display: block; position: absolute; right: 0; top: 13px; }


#metric-reporting .dynamic > ul { border-bottom: 1px solid #ccc; float: left; width: 100%; }
#metric-reporting .order-list li:nth-child(odd) .order-list-item { background: #f7f7f7; }
#metric-reporting .order-list li .order-list-item:hover:not(header) { background: #eaeaea; }
#metric-reporting .order-list .order-list-item div { margin-left: 3%; }
#metric-reporting .order-list .order-list-item div.id { width: 5%; margin-left: 0; }

.order-list .order-list-item div.description { width: 35%; overflow: hidden; }
.order-list .order-list-item div.location { width: 8%; }
.order-list .order-list-item div.buyer { width: 15%; }
.order-list .order-list-item div.date { width: 10%; }
.order-list .order-list-item div.staff { width: 5%; }
.order-list .order-list-item div.amount { width: 12%; text-align: right; }
#metric-reporting .order-list .order-list-item div.notes { font-weight: 300; color: #464646; margin-left: 8%; width: 92%; margin-top: 8px; margin-bottom: 10px; font-size: 1.7rem; line-height: 2.6rem; }
#metric-reporting .period-total { float: right; margin-right: 4%; margin-top: 20px; }
#metric-reporting .period-total .num { font-weight: 600; } 
/* payment report */
#metric-reporting .order-list .order-list-item div.paymentdate { width: 20%; margin-left: 0; }
#metric-reporting .order-list .order-list-item div.paymentvalue { width: 10%; margin-left: 0; }
#metric-reporting .order-list .order-list-item div.paymentmachine { width: 20%; margin-left: 0; }
#metric-reporting .order-list .order-list-item div.paymentype { width: 10%; margin-left: 0; }
#metric-reporting .order-list .order-list-item div.paymentorder { width: 10%; margin-left: 0; }
#metric-reporting .order-list .order-list-item div.paymentbuyer { width: 20%; margin-left: 0; }

/* outstanding balances */
#metric-reporting #outstanding-balance-report {  }
#metric-reporting #outstanding-balance-report .order-list-item > a > div { display: table-cell; padding: 10px; }
#metric-reporting #outstanding-balance-report .order-list-item > a { padding: 10px 0; float: left; width: 100%; }
#metric-reporting #outstanding-balance-report .order-list-item div {  }
#metric-reporting #outstanding-balance-report .order-list-item div.total-price,
#metric-reporting #outstanding-balance-report .order-list-item div.deposit,
#metric-reporting #outstanding-balance-report .order-list-item div.payments,
#metric-reporting #outstanding-balance-report .order-list-item div.oustanding-balance { width: 15%; }

/* modal filters
   ---------------------------- */
/* @temp */
/*.filter-modal { opacity: 1 !important; visibility: visible !important; transform: scale(1)!important}*/

.filter-modal { color: #fff; }
.filter-modal .filter-modal-content { width: 100%; max-width: none; margin-top: 30px; }
.filter-modal h2 { font-size: 40px; font-size: 4rem; margin-bottom: 2rem; }
.filter-modal .form-field { width: 23.5%; margin-left: 2%; float: left; }
.filter-modal .form-field:first-child { margin-left: 0; }
.filter-modal .stylish-form { }
.filter-modal .mon-form .row { height: 91px; }

.filter-modal .stylish-form .stylish-text,
.filter-modal .stylish-form .stylish-date,
.filter-modal .stylish-form .stylish-textarea,
.filter-modal .stylish-form .stylish-email,
.filter-modal .stylish-form .stylish-number,
.filter-modal .stylish-form .stylish-password,
.filter-modal .stylish-form .stylish-select { background: none; text-align: center; text-decoration: none; float: left; width: 98%; padding: 5px 1%; border: 2px solid #fff; color: #fff; font-size: 24px; font-size: 2.4rem; }

.filter-modal .stylish-form .stylish-select > span.selected { padding-top: 4px; }
.filter-modal .stylish-form .stylish-select > span > span.ico { top: 21px; background-image: url(/Assets/images/chevron-white.svg); }

.filter-modal .stylish-form .stylish-text input,
.filter-modal .stylish-form .stylish-date input,
.filter-modal .stylish-form .stylish-number input { background: none; color: #fff; line-height: 51px; line-height: 5.1rem; }
.filter-modal .stylish-form .stylish-text > span,
.filter-modal .stylish-form .stylish-password > span,
.filter-modal .stylish-form .stylish-number > span { background: none; border: none; }

.filter-modal .mon-form.stylish-form #exclude-set-items .stylish-ds { height: 52px; width: 52px; }
.filter-modal .mon-form.stylish-form #exclude-set-items div.stylish-ds > span { background: transparent; border: 2px solid #fff; }
.filter-modal .mon-form.stylish-form #exclude-set-items div.stylish-ds > span > span.ico { background-image: url(/Assets/images/forms/checkbox-true-white.svg); margin-left: 17px; margin-top: 17px;}

.filter-modal .stylish-form .ui-slider.ui-slider-horizontal { background: #999; height: 6px; margin-top: 24px; }
.filter-modal .stylish-form .ui-slider-range { background: #fff; height: 6px; }
.filter-modal .stylish-form .ui-slider-handle { background: #fff; height: 27px; width: 10px; margin-top: -5px; margin-left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.filter-modal .stylish-form .ui-slider-handle:first-of-type { margin-left: 0; }

/* range textboxes */
.filter-modal .form-field .field.range { }
.filter-modal .form-field .custom-range-value { line-height: 52px; margin-left: 25px; }
.filter-modal .form-field .field.range > div { float: left; width: 40%; margin-left: 10%; }
.filter-modal .form-field .field.range > div:first-child { margin-left: 0; }
.filter-modal .form-field .field.range > .stylish-text { }
/*.filter-modal .form-field .field.range > div.separator { width: 10%; margin: 0 1.6%; text-align: center; padding-top: 14px; font-size: 16px; font-size: 1.6rem; }*/

/* range sliders */
.filter-modal div[data-type="range"] { width: 60%; float: left; }
.filter-modal div[data-type="range"] + .stylish-text { width: 34%; margin-left: 2%; float: right; border: none; font-size: 22px; font-size: 2.2rem; margin-top: 2px; }

/* actions */
.filter-modal .actions { float: right; position: absolute; bottom: 81px; right: 0; }
.filter-modal .actions .results-count { float: left; margin-right: 20px; line-height: 55px; line-height: 5.5rem; }
.filter-modal .actions .filter-action { margin-right: 20px; line-height: 42px; line-height: 4.2rem; float: right; border: 2px solid #fff; color: #fff; font-size: 24px; font-size: 2.4rem; text-align: center; padding: 5px 20px; cursor: pointer; }
.filter-modal .actions .filter-action:first-child { margin-right: 0; }
.filter-modal .actions .filter-action:hover { background: rgba(255,255,255,0.1); }

/* progressive form
   ---------------------------- */
.mon-form.progressive {  }
.mon-form.progressive .form-section { float: left; width: 100%; }
.mon-form .form-section > header { margin-bottom: 1px; color: #fff; background-color: #2a2e39; width: 96%; padding: 0 2%; -webkit-transition: background 0.7s ease; -moz-transition: background 0.7s ease; -ms-transition: background 0.7s ease; -o-transition: background 0.7s ease; transition: background 0.7s ease; }
.mon-form .form-section > header > h3 { float: left; }
.mon-form .form-section > header > .section-edit { float: left; margin-top: 26px; margin-left: 12px; text-decoration: underline; font-size: 14px; font-size: 1.4rem; display: none; }
.mon-form .form-section > header > div.ico { float: right; width: 20px; height: 20px; margin-top: 26px; -webkit-transition: transform 0.7s ease; -moz-transition: transform 0.7s ease; -ms-transition: transform 0.7s ease; -o-transition: transform 0.7s ease; transition: transform 0.7s ease; }
.mon-form .form-section > header > div.ico.indicator { background: url(/Assets/images/chevron-white.svg); }
.mon-form .form-section > header > div.ico.valid { background: url(/Assets/images/forms/valid-white.svg); float: left; margin-left: 20px; display: none; }
.mon-form .form-section.active > header > div.ico.indicator { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.mon-form .form-section div.row,
.mon-form .form-section div.actions { float: left; width: 98%; padding: 10px 3% 20px; background-color: #fff; box-sizing: border-box; }
.mon-form .form-section.active div.row { display: block; }
.mon-form .form-section > div.button { float: left; }

.mon-form .form-section .highlight-form-section { border: 1px solid #ccc; float: left; width: 100%; }

.mon-form.full-form.small .form-field.full,
.mon-form.full-form.small .form-field.full.error { width: 70%; margin: 0 auto; float: none; }
.mon-form.full-form .form-section div.row { float: left; width: 100%; padding-bottom: 20px;   }
.mon-form.full-form .form-field { float: left; }

.mon-form.full-form .form-field {  width: 49%; margin-left: 2%; z-index: -1; -webkit-transition: background,color 0.4s ease; -moz-transition: background,color 0.4s ease; -ms-transition: background,color 0.4s ease; -o-transition: background,color 0.4s ease; transition: background,color 0.4s ease; }
.mon-form.full-form .form-field:first-child { margin-left: 0; }
.mon-form.full-form .form-field.full { width: 100%; margin: 0; }
.mon-form.progressive .form-field label { float: left; width: 100%; }

.mon-form.progressive .form-field .field { position: relative; }
.mon-form.full-form .form-field span.disabled-mask { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: 0.6 }
.mon-form.full-form .form-field.disabled span.disabled-mask { display: block; }

.mon-form.progressive .form-field > div > div.stylish-select { width: calc(100% - 2px); }
.mon-form .form-field > div > div.stylish-textarea,
.mon-form .form-field > div > div.stylish-textarea > span { height: 140px; }

.mon-form .form-field sub { white-space: nowrap; line-height: 37px; line-height: 3.7rem; }

.mon-form.full-form .actions { margin: 10px 0; }
.mon-form.full-form .actions .submit, .mon-form.days-of-week .actions .submit { margin-left: 10px; }
.mon-form.full-form .actions .submit:first-child, .mon-form.days-of-week .actions .submit:first-child { margin-left: 0; }
.mon-form.full-form .actions .submit > a, .mon-form.days-of-week .actions .submit > a { float: left; }
.mon-form.full-form aside.rail .actions .submit { margin: 20px; float: none; }
.mon-form.full-form aside.rail .actions .submit > a { float: none; }

.mon-form .alt-label { display: none; }

aside.rail > div { float: left; width: 100%; }
aside.rail .summary > header { padding: 0 5%; background: #2a2e39; color: #fff; }
aside.rail .results { background-color: #f9f9f9; float: left; width: 100%; padding: 8% 5% 6%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background,color 0.4s ease; -moz-transition: background,color 0.4s ease; -ms-transition: background,color 0.4s ease; -o-transition: background,color 0.4s ease; transition: background,color 0.4s ease; }
aside.rail .results > div { font-size: 13px; font-size: 1.3rem; width: 100%; float: left; margin-bottom: 7px; }
aside.rail .results > div > h3 { float: left; width: 38%; margin: 0; font-weight: bold; }
aside.rail .summary > .results > div > span { float: left; width: 60%; margin-left: 2%; overflow: hidden; }

#history aside.rail .history-differences > header { padding: 0 5%; background: #2a2e39; color: #fff; }
#history aside.rail .results { padding: 1% 5% 1% 15%; }
#history aside.rail .results > div > h3 { width: 20%; } 
#history aside.rail .results > div > div { float: left; width: 20%; padding-left: 2%; }
#history aside.rail .results > div > div.border-right { border-right-style: dashed; }
#history aside.rail .results > div.changed > div { background-color: #ccc;}

#history .results li.selected .order-list-item { background: #f2f2f2; }
#history .results li.order .order-list-item { background: #fafafa;}
#history .results .order-list-item .audit-type, #history header.order-list-item .audit-type { width: 12%;}
#history .results .order-list-item .audit-row, #history header.order-list-item .audit-row { width: 16%; }
#history .results .order-list-item .info { font-size: 12px; line-height: 27px; }
#history .order-list .results ul > li .order-list-item > div.trigger { float: left; width: 100%; padding-top: 10px; padding-bottom: 2px; position: relative; cursor: pointer; }
#history .order-list .results ul > li.order .order-list-item > div.trigger { cursor: default; }
#history .order-list .no-results { float: left; width: 98%; padding: 1% 1%; }

#history .results .load-results  {display: block; padding: 1% 5% 1% 1%; background: #f2f2f2; color: #fff; text-align: center; }

aside.rail .items-summary ul { float: left; }
aside.rail .items-summary ul li { margin-bottom: 5px; }
aside.rail .items-summary ul .status-ico { float: right; width: 16px; height: 16px; margin-left: 15px; }

#appointment-summary .results div ul { padding-top: 15px; }
#appointment-summary .results div i { line-height: 22px; }

aside.rail header { padding: 0 5%; background: #2a2e39; color: #fff; }
aside.rail .actions h2 { margin-top: 10px; }
aside.rail .actions .body { background-color: #f9f9f9; }
aside.rail .actions .body > div,
aside.rail .actions .body .app-button { display: block; margin: 20px; }
aside.rail .actions .body > div > .app-button { margin: 0 }

.mon-form.progressive .form-section.valid > header > .section-edit:hover  { cursor: pointer; }

/* validation */
.mon-form .form-section.errors > header { background: #cb4d4d; color: #fff; }
.mon-form .form-section .form-field.error { border: none; background: #cb4d4d; color: #fff; padding: 3%; width: 43%; }
.mon-form .form-section .form-field.error .selected { color: #cb4d4d; }
.mon-form.full-form .form-field.full.error { padding: 3%; width: 94%; }
.mon-form.progressive .form-section.valid > header { background: #499273; color: #fff; }
.mon-form.progressive .form-section.valid > header > .section-edit,
.mon-form.progressive .form-section.errors > header > .section-edit,
.mon-form.progressive .form-section.valid > header > div.ico.valid { display: block; }

.mon-form .form-section .form-field .err-msgs > div { font-size: 1.4rem; white-space: nowrap; color: #fff; background: url(/Assets/images/forms/alert.svg) no-repeat left; padding-left: 35px; }
.mon-form .form-section .form-field .err-msgs .field-validation-error { color: #cb4d4d; margin-top: 10px; float: left; }


/* textbox dropdown
   ---------------------------- */
.textbox-dropdown { position: relative; }
.textbox-dropdown .textbox { position: absolute; left: 0; width: 90%; z-index: 1 }
.textbox-dropdown .textbox .stylish-text > span { text-align: left; left: 7.5px; top: 0.5px; position: relative; opacity: 0.6; }
.textbox-dropdown .dropdown:hover { cursor: pointer; }
.textbox-dropdown .dropdown .stylish-select .selected { height: 28px; }
.textbox-dropdown .dropdown .stylish-select .selected .text { display: none; }
.textbox-dropdown .dropdown .option-hidden { display: none; }
.textbox-dropdown .dropdown .option-selected { background: #010d30; color: #fff }

/* user create
   ---------------------------- */
.user-create form,
.add-detail form { max-width: 600px; margin: 0 auto; float: none; }
.add-detail .mon-form { float: left; width: 100%; }
.add-detail form .panel,
.user-create form .panel { float: left; padding: 0 }

/* add contact
   ---------------------------- */
.add-contact,
.edit-contact,
.two-col-form { width: 100%; margin-bottom: 30px; }

/*.add-contact form,
.edit-contact form,
.add-stock form,
.two-col-form form,
#edit-stock .form.mon-form,                todo obsolete?   
.add-contact form + .rail,
.edit-contact form + .rail,
.two-col-form form + .rail,
.add-stock form + .rail { float: left; width: 100%; }
#edit-stock .form.mon-form + .rail { float: left; width: 100%; }

.add-contact form,
.add-stock form,
.edit-contact form,
.two-col-form form { width: 70%; }
#edit-stock .form.mon-form
.add-contact form + .rail,
.edit-contact form + .rail,
.add-stock form + .rail,
.two-col-form form + .rail { width: 30%; margin-left: 0; }
#edit-stock .form.mon-form + .rail { width: 30%; margin-left: 0; }*/

.content-area { float: left; width: 70%; }
.content-area + aside.rail{ float: left; width: 30%; margin-left: 0; }


.two-col-form { padding-top: 0; }

/* areas
   ============================ */
/* general */

.mod .app-button { float: right; }
.mod .inner:after,
.mod .inner:before { content: ""; display: table; }
.mod .inner:after { clear: both; }
.mod .inner { zoom: 1; }
.mod h3 { float: left; }

/* users - user listing module 
   ---------------------------- */
.mod.brief-list { margin-bottom: 30px; }
.mod.brief-list h2 { color: #010d30; }
.mod.brief-list div.list header.item { font-weight: 600; width: 100%; }
.mod.brief-list div.list > .inner { height: 200px; overflow-y: auto; float: left; width: 100%; }
.mod.brief-list div.list > .inner.auto { height: auto; }
.mod.brief-list div.list .item { float: left; width: 100%; position: relative; border-bottom: 1px solid #ccc; }
.mod.brief-list div.list.detail .item > div { width: 49%; }
.mod.brief-list div.list .item > div { float: left; width: 32%; margin-left: 2%; margin: 3px 0; padding: 6px 0 12px; }
.mod.brief-list.four-column div.list .item > div { width: 25%; }
.mod.brief-list div.list .item > div.small, div.field.small { font-size: 14px; }
.mod.brief-list div.list .item > div:first-child { margin-left: 0; }
.mod.brief-list div.list .item > a.edit { width: 16px; height: 16px; position: absolute; right: 22px; top: 14px; background-image: url('/Assets/images/actions/edit.svg'); background-repeat: no-repeat; cursor: pointer; }

/* add users
   ---------------------------- */
.mod.add-user { }
.mod.add-user .form-field { width: 15%; margin-left: 2%; float: left; }
.mod.add-user .form-field > .app-button { float: left; margin-top: 36px; height: 20px; line-height: 20px; }
.mod.add-user .form-field:first-child { margin-left: 0; width: 81%; }

/* currencies */
.mod.currencies { }
.mod.currencies.brief-list div.list .item > div,
.mod.stock-price-adjust.brief-list div.list .item > div { border-bottom: none; padding-bottom: 8px; margin-left: 0; }
.mod.stock-price-adjust.brief-list div.list .item,
.mod.currencies.brief-list div.list .item { line-height: 4.2rem; }
.mod.currencies.brief-list div.list .item div.stylish-text,
.mod.stock-price-adjust.brief-list div.list .item div.stylish-text { width: 75%; float: left; }
.mod.currencies.brief-list div.list .item div a.ico,
.mod.stock-price-adjust.brief-list div.list .item div a.ico { display: block; width: 24px; height: 24px; float: left; margin-top: 10px; margin-left: 10px; cursor: pointer; }
.mod.currencies.brief-list div.list .item div.stylish-text > input { }

/* stock price adjust */
.mod.stock-price-adjust {}



/* find stock
   ---------------------------- */
div.cost-margin-toggle { display: none; cursor: pointer; float: right; width: 20px; height: 20px; margin-right: 20px; background-image: url('/Assets/images/actions/calculator.svg'); margin-top: 5px; }
.auth__is-not-admin div.cost-margin-toggle,
.auth__is-not-admin .has-searched div.cost-margin-toggle { display: none; }
.has-searched div.cost-margin-toggle { display: block; }
.modal-app-screen div.cost-margin-toggle { position: absolute; right: 60px; top: 30px; z-index: 1; display: block; }
.mod-header-cta { float: right; cursor: pointer; }
.mod-header-cta > div { float: left; }
.mod-header-cta > div.ico { width: 30px; height: 30px; background-repeat: no-repeat; }
.mod-header-cta > div.label { margin-left: 10px; margin-top: 3px; }

.mod-header-cta.filter > div.ico { background-image: url('/Assets/images/actions/filter.svg'); }

/* reporting
   ---------------------------- */
#metric-reporting .heading span.ico { width: 30px; height: 30px; float: left; margin-right: 15px; margin-top: 2px; }
#metric-reporting .heading { margin-top: 30px; }
#metric-reporting .heading:first-of-type { margin-top: 0; }
#metric-reporting .heading h2 { float: left; }
#metric-reporting .table h3 { margin-bottom: 10px; }

#metric-reporting .table > header {  }

.table { display: table; width: 100%; border-collapse: collapse; }
.table > header,
.table > div.table-row { display: table-row; width: 100%; float: none; line-height: 3rem; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; }
.table > header { font-weight: 700; line-height: 5rem; border-bottom: 1px solid #222; }
.table > header > div,
.table > div.table-row > div { display: table-cell; padding: 10px; }

.table.thirds > header > div,
.table.thirds > div.table-row > div { width: 33.3%; }
.table.quarters > header > div,
.table.quarters > div.table-row > div { width: 25%; }

.search-filter.orders .filter-submit { float: left; width: 100%; margin-top: 20px; }
.search-filter.orders .filter-submit .app-button { float: left; }
section.listing .search-filter.orders div.row { height: auto; }

.order-list .results { position: relative; margin-top: 20px; }
.order-list .results .loading-mask { display: none; }

/* appointment
   ---------------------------- */


#conflicts-message { color: #cb4d4d; font-size: 1.6rem; }
#conflicts-message div { color: #cb4d4d; display: block; }
#conflicts-message div ul { font-size: 1.4rem; }
#available-message { font-size: 1.4rem; padding-top: 46px; }
#available-message .text { padding-left: 10px; line-height: 15px; }
#available-message .ico.valid { display: block; float: left; height: 15px; width: 15px; margin-right: 10px; }

#appointment-calendar a.app-button.secondary.print-action { padding: 8px 30px; }
#appointment-calendar .wrapper.print-wrapper div { float: right; display: block; margin-right: 4%; }

/* autocomplete
---------------------------- */
.mon-form.full-form .form-field.contacts-autocomplete .field { width: 85%; }
#contacts { color: #aaa; }
#clear-contact { margin-left: 10px; display: block; float: left; line-height: 39px; cursor: pointer; font-size: 14px; }

.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; max-height: 200px; overflow-y: auto; overflow-x: hidden; }
.ui-autocomplete.ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; }
.ui-autocomplete.ui-menu .ui-menu { position: absolute; }

.ui-autocomplete.ui-widget-content .ui-state-hover,
.ui-autocomplete.ui-widget-content .ui-state-focus,
.ui-autocomplete .ui-button:hover,
.ui-autocomplete .ui-button:focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; }
.ui-autocomplete.ui-menu .ui-menu-item { margin: 0; cursor: pointer; padding: 3px 1em 3px .4em; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
.ui-autocomplete.ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px .4em; }
.ui-autocomplete.ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }

.ui-autocomplete.ui-menu .ui-state-focus,
.ui-menu .ui-state-active { margin: -1px; }
.ui-autocomplete.ui-widget-content { border: 1px solid #ddd; background: #fff; color: #333; }
.ui-autocomplete.ui-front { z-index: 100; }

.ui-autocomplete .ui-menu-icons { position: relative; }
.ui-autocomplete .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; }

.ui-autocomplete.ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; }
.ui-autocomplete.ui-menu .ui-menu-icon { left: auto; right: 0; }

.ui-autocomplete.ui-menu .ui-menu-item { padding: 10px 10px 13px 9px; font-size: 1.4rem; }

/* timepicker
   ---------------------------- */
.ui-timepicker-wrapper { width: 24.5em; font-size: 14px; margin-left: 1px; }

/*  async url component
    --------------------------- */
.async-url-component { border: 3px solid #ddd; padding: 23px; border-radius: 12px; position: relative; }
.async-url-component .spinner { top: 46%; }
.async-url-component .loading-mask { border-radius: 12px; display: none; }
.async-url-component__heading h3 { font-weight: 600; }
.async-url-component__action { width: 50%; margin-top: 12px;  }
.async-url-component__action .async-url-component__trigger { transition: ease-in-out opacity 0.1s; }
.async-url-component.async-operation-pending .async-url-component__action .async-url-component__trigger { opacity: 0.2 }
.async-url-component.async-operation-pending .loading-mask { display: block; }

/* tabber
   ---------------------------- */
.tabber { width: 100%; float: left; }
.tabber > .controls { float: left; width: 100%; }
.tabber > .controls .pager-items { border: 1px solid #222; float: right; }
.tabber > .controls .pager-items > div { cursor: pointer; font-size: 22px; font-size: 2.2rem; color: #010d30; border-left: 1px solid #222; line-height: 46px; line-height: 4.6rem; float: left; padding: 0 30px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.tabber > .controls .pager-items > div:first-child { border: none; }
.tabber > .controls .pager-items > div.active { background: #010d30; color: #fff; }
.tabber > .controls .pager-items > div:hover:not(.active) { background: #f9f9f9; color: #222; }

.filter-modal .tabber { }
.filter-modal .tabber > .controls { position: absolute; right: 80px; top: 23px; }
.filter-modal .tabber > .controls .pager-items { border: 1px solid #fff; float: right; }
.filter-modal .tabber > .controls .pager-items > div { border-left-color: #fff; color: #999; padding: 0 22px; }
.filter-modal .tabber > .controls .pager-items > div.active { background: #f9f9f9; color: #222; }
.filter-modal .tabber > .controls .pager-items > div:hover:not(.active) { background: #f9f9f9; color: #222; }

.no-js .tabber .panel { display: block; }

/* tokens */
.available-tokens { float: left; width: 100%; margin-top: 10px; }
.available-tokens ul { display: table; width: 100%; }
.available-tokens ul > li  { display: inline-table; padding: 0.5%; width: 24%;  }

/* widgets
   ---------------------------- */
/* digital clock */
.jSC,
.jSC .digital,
.jSC .digital > div { display: inline; }
.jSC .digital > div { display: inline-block; width: 15px; }

/* mon-forms
   ---------------------------- */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { line-height: 4.5rem; font-size: 1.8rem; color: #e2e2e2; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; }
input:-moz-placeholder,
textarea:-moz-placeholder { line-height: 4.5rem; font-size: 1.8rem; color: #e2e2e2; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; }
input::-moz-placeholder,
textarea::-moz-placeholder { line-height: 4.5rem; font-size: 1.8rem; color: #e2e2e2; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { line-height: 4.5rem; font-size: 1.8rem; color: #e2e2e2; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; -ms-transition: color 0.3s; transition: color 0.3s; }

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { color: rgba(0,0,0,0.3); }
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { color: rgba(0,0,0,0.3); }
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { color: rgba(0,0,0,0.3); }
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { color: rgba(0,0,0,0.3); }

.mon-form label { display: block; font-size: 18px; font-size: 1.8rem; margin-bottom: 10px; font-weight: 600; }
.mon-form label span.normal { font-weight: 100; }
.mon-form label.hidden { display:none }

.date-picker-trigger { position: relative; }
.confirm header > .col .date-picker-trigger .ico,
.date-picker-trigger .ico { background: url(/Assets/images/actions/date.svg); width: 25px; height: 25px; margin-right: 0; position: absolute; right: 10px; top: 9px; display: block; cursor: pointer; }
/* stylish form overrides */

/* general stylish forms */
.stylish-form .stylish-text,
.stylish-form .stylish-text > span,
.stylish-form .stylish-password,
.stylish-form .stylish-password > span,
.stylish-form .stylish-date,
.stylish-form .stylish-date > span,
.stylish-form .stylish-number,
.stylish-form .stylish-number > span,
.stylish-form .stylish-textarea,
.stylish-form .stylish-textarea > span,
.stylish-form .stylish-select { background: #fff; height: 42px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }

.stylish-form .stylish-ds > input[type="checkbox"],
.stylish-form .stylish-ds > input[type="radio"] { left: 0; }

/* text */
.stylish-form .stylish-text > input,
.stylish-form .stylish-number > input,
.stylish-form .stylish-password > input,
.stylish-form .stylish-date > input { line-height: 42px; line-height: 4.2rem; height: 44px; }
.stylish-form .stylish-date > input { width: 100%; }
.stylish-form .stylish-text > input.search { height: 42px; }

/* dual states */
.mon-form.stylish-form div.stylish-ds { width: 40px; height: 40px; }
.mon-form.stylish-form div.stylish-ds > span { background: #fff; border: 1px solid #ccc; left: 0; }
.mon-form.stylish-form div.stylish-ds > span > span.ico { width: 18px; height: 18px; margin-left: 11px; margin-top: 11px; background: url(/Assets/images/forms/checkbox-true.svg); display: none; }
.stylish-form .stylish-ds[data-type="checkbox"] > span.checked { background: #ffffff; }
.mon-form.stylish-form div.stylish-ds > span.checked > span.ico { display: block; }

/* dropdown */
.stylish-form .stylish-select > ul { top: 100%; left: -1px; }
.stylish-form .stylish-select > ul li { padding: 8px 10px 8px 17px; color: #555; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.stylish-form .stylish-select > ul li:hover { background: #010d30; color: #fff; }
.stylish-form .stylish-select > span > span.ico { width: 12px; height: 12px; position: absolute; top: 15px; right: 10px; background: url(/Assets/images/chevron.svg) right no-repeat; background-size: 12px 12px; }
.stylish-form .stylish-select > span.selected { padding: 8px 30px 10px 10px; }

/* checkbox list for */
.stylish-form .stylish-select.checkbox-dropdown { }
.stylish-form .stylish-select.checkbox-dropdown .stylish-ds[data-type="checkbox"] { }
.stylish-form .stylish-select.checkbox-dropdown .stylish-ds[data-type="checkbox"] > span { border-color: #222; }
.stylish-form .stylish-select.checkbox-dropdown label { height: 42px; line-height: 42px; margin-bottom: 0; }
.stylish-form.appointment-reason-form .stylish-select.checkbox-dropdown label { padding-left: 48px; }

.appointment .form.provider { float: left; width: 33%; }


/* web components
   ---------------------------- */
.range-slider { background: #f2f2f2; }
.range-slider .ui-slider-range { background: #ddd; }
.range-slider .ui-slider-handle { background: #222; cursor: move; }

.ui-datepicker { background: #fff; -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); -ms-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); }
.ui-datepicker-calendar,
.ui-datepicker-header { }
.ui-datepicker-prev,
.ui-datepicker-next { background: #010d30; width: 40px; height: 40px; display: block; color: #fff; cursor: pointer !important; }
.ui-datepicker-prev { float: left; }
.ui-datepicker-next { float: right; }
.ui-icon { background-image: url('/Assets/images/actions/next-white.svg'); margin-top: 13px; margin-left: 14px; }
.ui-icon-circle-triangle-w { -webkit-transform: scaleX(-1); margin-right: 14px; }

.ui-datepicker-title { text-align: center; font-size: 1.4rem; margin-top: 10px; font-weight: bold; }

.ui-datepicker-calendar th,
.ui-datepicker-calendar td { padding: 12px; font-size: 1.4rem; }
.ui-datepicker-calendar td:not(.ui-datepicker-unselectable) { cursor: pointer; }
.ui-datepicker-calendar td:hover:not(.ui-datepicker-unselectable):not( .ui-state-disabled):not(.ui-datepicker-current-day) { background: #f2f2f2; }
.ui-datepicker-calendar td a { width: 100%; float: left; text-align: center; text-decoration: none; }
.ui-datepicker-calendar td.ui-datepicker-current-day { background: #010d30; }
.ui-datepicker-calendar td.ui-datepicker-current-day a { color: #fff !important; }
.ui-datepicker-calendar td.ui-datepicker-unselectable { opacity: 0.3 }

.ui-datepicker-today { background: #e9e9e9; }

/* misc */
.add-cluster { }
.add-cluster > a,
.add-cluster > div,
.add-cluster > input { float: left; }
.add-cluster input,
.add-cluster > div { width: 70%; margin-right: 5%; }
.add-cluster a.app-button { width: 15%; padding: 11px 5%; }

/* helper classes
   ============================ */
.hidden { display: none; }
.show { display: block; }
.invisible { opacity: 0; }
.inactive { opacity: 0.5; }
.strong { font-weight: bold; }
.num { font-family: 'Arial'; }
.nowrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.relative { position: relative }
.float-left { float: left; }
.float-right { float: right; }

.shadow { -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); -ms-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.4); }
.shadow-dark { -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.8); -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); }

.ra { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.ra-sml { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.ra-sml.ra-top { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; }

.borders { border: 1px solid #dadada; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); }
.border-top { border-top: 1px solid #dadada; margin-top: 10px; padding-top: 10px; }

/* easing */
.bg-ease-slow { -webkit-transition: background 0.5s, c 0.5s; -moz-transition: background 0.5s, c 0.5s; -ms-transition: background 0.5s, c 0.5s; -o-transition: background 0.5s, c 0.5s; transition: background 0.5s, color 0.5s; }
.bg-ease-fast { -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; -ms-transition: background 0.2s, color 0.2s; -o-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }

.fade { -moz-transition: opacity 1s; -o-transition: opacity 1s; -webkit-transition: opacity 1s; transition: opacity 1s; }

.disabled { opacity: 0.3; }

.editable-display { position: relative; }
.editable-display .display-value { position: absolute; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.editable-display.editmode .display-value { visibility: hidden; opacity: 0; }
.editable-display input { position: absolute; visibility: hidden; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.editable-display.editmode input { visibility: visible; opacity: 1; }

/* #region buttons */
.app-button,
a.app-button,
input.app-button { white-space: nowrap; text-align: center; background: #010d30; padding: 14px 20px; text-decoration: none; cursor: pointer; outline: none; border: none; color: #fff; line-height: 1.4; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; }
.app-button.secondary,
a.app-button.secondary { background: #5c5c5c; }
.app-button.next,
a.app-button.next { background-image: url(/Assets/images/actions/next-white.svg); background-repeat: no-repeat; background-size: 16px; background-position: 94% 19px; padding-right: 36px; }

a.app-button.history { background: #2d5742; }
.submit:hover a.app-button.history { background: #162b21; }

.app-button:hover { text-decoration: none;   }
.app-button.secondary:hover,
.submit-trigger:hover + .app-button.secondary,
.validation-mask-custom:hover .app-button.secondary,
.app-button.soft-confirm[data-prompt="Confirm"] { background-color: #010d30; }

input.app-button { width: 100%; }

.app-button[data-prompt="Confirm"],
.app-button[data-confirm],
.app-button.warning { background: #cb4d4d }

/* #endregion */

.validation-mask-custom {  }
.validation-mask-custom > span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: transparent; cursor: pointer; }
/*.validation-mask-custom > span#sold-items-check { z-index: 4; }*/

/* #region loader */
@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0); }
    40% { -webkit-transform: scale(1.0); }
}

@keyframes bouncedelay {
    0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); }
    40% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}

.modal-app-screen-open .focus-mask { z-index: 1; opacity: 1; }
.mask,
.loading-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,.75); z-index: 2; }
.spinner { width: 40px; height: 40px; position: absolute; top: 41%; left: 50%; margin-top: -20px; margin-left: -20px; }
.container1 > div,
.container2 > div,
.container3 > div { width: 10px; height: 10px; background-color: #010d30; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.spinner .spinner-container { position: absolute; width: 100%; height: 100%; }
.container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); }

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
/* #endregion */

/* #region prompts */
.prompt-modal,
.filter-modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(1,13,48,0.93); z-index: 3; }
.scale { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }
.prompt-modal.scale.open,
.filter-modal.scale.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

.prompt-content { height: 200px; width: 80%; max-width: 600px; text-align: center; position: absolute; left: 50%; margin-left: -300px; top: 50%; margin-top: -100px; }

.prompt-modal .prompt-content > h2 { width: 100%; font-size: 40px; font-size: 4rem; color: #fff; margin: 0; }
.prompt-modal .prompt-content > h2.align-calibrate { margin-top: -12%; } /* grim - adjust vertical position for tall modal prompts */
.prompt-modal .prompt-content > div { margin-top: 20px; display: inline-block; }
.prompt-modal .prompt-content > div > a,
.prompt-modal .prompt-content > div > div { text-decoration: none; cursor: pointer; margin-left: 20px; float: left; width: 190px; padding: 20px 30px; border: 2px solid #fff; color: #fff; font-size: 24px; font-size: 2.4rem; -webkit-transition: background 300ms; -moz-transition: background 300ms; -ms-transition: background 300ms; -o-transition: background 300ms; transition: background 300ms; }
.prompt-modal .prompt-content > div > a.small,
.prompt-modal .prompt-content > div > div.small { width: 44px; }
.prompt-modal .prompt-content > div > div.form { width: 100%; padding: 0; padding-bottom: 2rem; border: 0; margin-bottom: 2rem; border-bottom: 2px solid #fff; }
.prompt-modal .prompt-content > div > div.form > div { text-align: left; margin-bottom: 1.5rem; float: left; width: 100%; }
.prompt-modal .prompt-content > div > div.form input { text-align: left; background: none; text-decoration: none; float: left; width: 98%; padding: 5px 1%; border: 2px solid #fff; color: #fff; font-size: 24px; font-size: 2.4rem; }
.prompt-modal .prompt-content > div > div.form input,
.prompt-modal .prompt-content > div > div.form label { float: left; width: 47%; margin-left: 2% }
.prompt-modal .prompt-content > div > div.form label { margin-left: 0 }
.prompt-modal .prompt-content > div > div.form:hover { background: none; }

.prompt-modal .prompt-content > div > a:first-child,
.prompt-modal .prompt-content > div > div:first-child { margin-left: 0; }
.prompt-modal .prompt-content > div > a:hover,
.prompt-modal .prompt-content > div > div:hover { background: rgba(255,255,255,0.1); }

/* #region modal-app-screen */

.modal-app-screen { position: fixed; height: 70%; width: 100%; z-index: 1; background: #fff; left: 0; -webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 1); -ms-box-shadow: 0px 1px 2px rgba(50, 50, 50, 1); box-shadow: 0px 1px 2px rgba(50, 50, 50, 1); }
body.menu-active .modal-app-screen { /*width: calc(100% - 284px);*/ width: 100%; /*left: 284px;*/ left: 0; }
.modal-app-screen.slide { -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; }
.modal-app-screen.bottom { bottom: -70%; }
.modal-app-screen.bottom.open { bottom: 0; }

/* todo move this*/
.modal-app-screen section.listing div.pager { border: none; }
.area .modal-app-screen .panel { margin-top: 0; }

div.close-modal { position: absolute; right: 28px; top: 34px; z-index: 1; width: 28px; height: 28px; background: url(/Assets/images/close.svg) no-repeat; cursor: pointer; }
div.close-modal.dark { background: url(/Assets/images/close-dark.svg); }
/* #endregion */

@media screen and (max-height: 30.5em) {
    .overlay nav { height: 70%; font-size: 34px; }
    .overlay ul li { min-height: 34px; }
}
/* #endregion */

/* #region accordions */
[data-accordion].hidden { display: none; }
[data-accordion-trigger-for] { }
[data-accordion-trigger-for].open { }

/* #endregion */

/* responsive 
   ============================ */

@media screen and (max-width: 1400px) {
    section.listing#stock-listing .results .table-cells > .diamond-collection > div.measurements,
    section.listing#stock-listing .results .table-cells > div.measurements { display: none; }

    nav#primary-nav { max-width: 225px; }
    div#content { width: calc(100% - 225px); }
}


@media screen and (max-width: 1024px) {

    div#content { width: calc(100% - 225px); position: fixed; }
    body.menu-active div#content { left: 225px; }
    nav#primary-nav { position: fixed; }


    #hamburger { display: block; }
    .wrapper { width: 100%; margin: 0; }

    .screen-title { margin-bottom: 0; }
    .screen-title > .wrapper { width: calc(100% - 20px); margin: 0 10px; }

    #dashboard { border-spacing: 0; width: 100%; margin: 0; }
    #dashboard > div.row > article.tile { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; font-size: 14px; font-size: 1.4rem; }
}


@media screen and (max-width: 865px) {
}

@media screen and (max-width: 700px) {
    #dashboard,
    #dashboard .div.row { display: block; }
    #dashboard > div.row > article.tile { width: 100%; display: block; float: left; }
}

@media screen and (max-width: 600px) {

    section.listing div.pager .indeces { display: none; }
}

@media screen and (max-width: 480px) {
}

/* print
   ============================ */
.print { display: none; }

@media print {

    @page { size: portrait; }

    .bg-colour-adjust { -webkit-print-color-adjust: exact; }

    /* generic */
    html { font-size: 8px; }

    .shadow,
    .panel { -webkit-box-shadow: none !important; -ms-box-shadow: none !important; box-shadow: none !important; }
    .print { display: block; }
    .print-hide { display: none!important; }
    nav#primary-nav,
    #site-header,
    #site-footer,
    section.banner-actions { display: none; }

    div#content { width: 100%; position: relative; left: 0; }

    /* specific */
    body[data-print-mode="print-production"] section#email-details { display: none; }
    body[data-print-mode="print-production"] .area .panel > .wrapper > .inner { width: 100%; padding: 10px 0 20px; }
    body[data-print-mode="print-production"] .selected-items:first-child { border-top: 1px solid #010d30; }
    body[data-print-mode="print-production"] .selected-items .ico { display: none; }
    body[data-print-mode="print-production"] .selected-items h2 { font-size: 2rem; }
    body[data-print-mode="print-production"] .stock-item-selection .selected-items .item { margin: 0; font-size: 1.4rem; line-height: 3rem; min-height: 30px; height: auto; padding: 0; }
    body[data-print-mode="print-production"] .stock-item-selection .selected-items .item.table-header { font-weight: bold !important; margin-bottom: 10px; }
    body[data-print-mode="print-production"] .stock-item-selection .selected-items { padding: 0; }
    body[data-print-mode="print-production"] .stock-item-selection .selected-items .item .description.nowrap { width: 26%; white-space: normal; overflow: auto; text-align: left; font-size: 1.4rem; line-height: 2.2rem; }

    body[data-print-mode="print-invoice"] { }

    body[data-print-mode="print-calendar"] .fc-center { font-size: 14px; padding: 5px; }
    body[data-print-mode="print-calendar"] .fc-day-header { font-size: 18px; padding: 5px; line-height: 40px;}
    body[data-print-mode="print-calendar"] .fc-content { font-size: 14px; padding: 10px; }
    body[data-print-mode="print-calendar"] .fc-title { float: left; }
    body[data-print-mode="print-calendar"] .pending .fc-content, 
    body[data-print-mode="print-calendar"] .pending .fc-event-dot { background-color: #ccc !important; border: 1px solid #ddd; -webkit-print-color-adjust: exact; }
    body[data-print-mode="print-calendar"] .confirmed .fc-content, 
    body[data-print-mode="print-calendar"] .confirmed .fc-event-dot { background-color: #34B279 !important; border: 1px solid #ddd; -webkit-print-color-adjust: exact; }
    body[data-print-mode="print-calendar"] .system .fc-content, 
    body[data-print-mode="print-calendar"] .system .fc-event-dot { background-color: #cb4d4d !important; border: 1px solid #ddd; -webkit-print-color-adjust: exact; }
    body[data-print-mode="print-calendar"] #content,
    body[data-print-mode="print-calendar"] #main,
    body[data-print-mode="print-calendar"] table { page-break-inside: auto; position: relative; overflow: visible !important; border: none !important; }
    body[data-print-mode="print-calendar"] tr { page-break-inside: avoid; page-break-after: auto; }
    body[data-print-mode="print-calendar"] .fc-divider.fc-widget-header { display: none; }
    body[data-print-mode="print-calendar"] .fc-day-grid-event .fc-content { white-space: normal !important;}
}