html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

strong {
    font-weight: bold;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #F5F5F5;
}

.content { -webkit-animation:fadein 0.7s; animation:fadein 0.7s }
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }

a {
    text-decoration: none;
    color: #856BC9;
}

.clearfix{
    content: "";
    display: table;
    clear: both;
}

.center {
    text-align: center;
}

textarea, input, button, select { 
    outline: none; 
    font-family: 'Lato', sans-serif;
}

textarea {
    padding-top: 10px;
}

/***********************/

body {
    background-color: #F1F0F5;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

header {
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-bottom: 2px solid #E5E5E5;
}

.logo {
    margin: 15px 0 0 20px;
    display: block;
    width: 163px;
    height: 29px;
}

.logo img {
    float: left;
}

.logo .desc {
    float: left;
    padding: 17px 0 0 5px;
    color: #B3B3B3;
}

nav {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    width: 330px;
}

nav a {
    float: left;
    display: block;
    padding: 21px 0;
    width: 110px;
    height: auto;
    font: 600 15px/18px 'Lato', sans-serif;
    text-align: center;
    color: #968EA9;
}

nav a.active {
    color: #8770DB;
    box-shadow: inset 0 -2px 0 0 #8773D8;
}

/* LAYOUT */

.wrapper {
    margin: 0 auto;
    padding-top: 100px;
    width: 1170px;
}

.col-3:first-of-type {
    margin: 0;
}

.col-3 {
    margin-left: 30px;
    float: left;
    width: 270px;
}

.col-4 {
    margin-left: 30px;
    float: left;
    width: 370px;
}

.col-5 {
    margin-left: 30px;
    float: left;
    width: 470px;
}

.title {
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 26px;
    color: #5B5766;
}

/* FIELDS */

.input-box,
.select-box {
    padding-left:14px;
    padding-right:14px;
    width: 100%;
    height: 36px;
    background: #fff;
    box-shadow: inset 0px 0px 0px 1px #D0CAE1;
    border-radius: 4px;
    border: none;
    font: 400 14px/18px 'Lato', sans-serif;
}

.select-box {
    background: #fff url('i/dropdown-arrow.svg') no-repeat right 10px top 15px;
}

select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* PRODUCTS */

.products .title {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 22px;
}

.products .tabs {
    margin-top: 20px;
    content: "";
    display: table;
    clear: both;
}

.products .tabs a {
    float: left;
    position: relative;
    display: block;
    width: 125px;
    height: 36px;
    text-align: center;
    font-size: 14px;
    line-height: 34px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    z-index: 0;
}

.products .tabs .suggested.active {
    color: #4C4025;
}

.products .tabs .suggested .star {
    position: absolute;
    top: 9px;
    left: 10px;
    display: block;
    width: 14px;
    height: 14px;
    background-color: #000;
    -webkit-mask:  url('i/suggested-star.svg') no-repeat 50% 50%;
    mask: url('i/suggested-star.svg') no-repeat 50% 50%;  
}

.products .tabs .suggested.active .star {
    background-color: #332B19;
}

.products .tabs .suggested i {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 15px;
    height: 15.5px;
    box-shadow: inset 0 0 0 1px #856BC9;
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
    padding: 0.5px 0 0 1px;
}

.products .tabs .suggested.active i {
    box-shadow: inset 0 0 0 1px #332B19;
}

.products .tabs a:first-of-type {
    border-radius: 4px 0 0 4px;
}

.products .tabs a:last-of-type {
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
}

.products .tabs .active {
    z-index: 1;
    background-color: #FFD97E;
    box-shadow: none;
    color: #000;
}

.search-filter {
    margin-top: 10px;
    position: relative;
    width: 100%;
    height: 36px;
}

.search-bar {
    float: left;
    margin-right: 44px;
    padding-left: 32px;
    width: calc(100% - 44px);
    font: 400 14px/14px 'Lato', sans-serif;
    color: #968FA8;
    background: #fff url('i/search.svg') no-repeat 8px 8px;
}

.filter-button {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 36px;
    height: 36px;
    background-color: #fff;
/*    background: #fff url('i/filters.svg') no-repeat 9px 11px;*/
    box-shadow: inset 0px 0px 0px 1px #D0CAE1;
    border-radius: 4px;   
}

.filter-button i {
    display: block;
    padding: 9px;
    width: 18px;
    height: 18px;
    background-color: #D0CAE0;
    -webkit-mask:  url('i/filters.svg') no-repeat 50% 50%;
    mask: url('i/filters.svg') no-repeat 50% 50%;
}

.filter-button:hover i {
    background-color: #000;
}
    

.brands-list {
    margin-top: 10px;
}

.brand-item {
    display: block;
    margin-bottom: -1px;
    padding: 12px;
    width: calc(100% - 24px);
    height: 16px;
    background-color: #fff;
    box-shadow: inset 0px 0 0px 1px #D0CAE1;
    border-radius: 0;
    font: 400 14px/14px 'Lato', sans-serif;
    color: #856EC6;
}

.brand-item span {
    padding-left: 5px;
    color: #D0CAE0;
}

.brand-item:first-of-type {
    border-radius: 4px 4px 0 0;
}

.brand-item:last-of-type {
    border-radius: 0 0 4px 4px;
}

.brand-item.active {
    background-color: #856EC6;
    box-shadow: none;
    font-weight: bold;
    color: #fff;
}

.fragrances-list {
    margin-top: 10px;
}

.fragrance-item {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: -1px;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: inset 0px 0px 0px 1px #D0CAE1;
    border-radius: 0;
}

.fragrance-item .fragrance-image {
    position: absolute;
    top: 12px;
    left: 12px;
    display: block;
    width: 34px;
    height: 34px;
    background-color: #fff;
/*    box-shadow: inset 0px 0px 0px 1px #D0CAE1;*/
    border: 1px solid #D0CAE1;
}

.fragrance-item.active .fragrance-image {
    border: 1px solid #856EC6;
}

.fragrance-item .fragrance-image img {
    width: 100%;
    height: 100%;
}

.fragrance-item .fragrance-name {
    margin: 12px 0 0 62px;
    font: 400 15px/18px 'Lato', sans-serif;
    color: #856EC6;
}

.fragrance-item.active .fragrance-name {
    font-weight: bold;
    color: #fff;
}

.fragrance-item .fragrance-desc {
    margin: 4px 0 0 62px;
    font: 400 12px/15px 'Lato', sans-serif;
    color: #968FA8;
}

.fragrance-item.active .fragrance-desc {
    color: #fff;
}

.fragrance-item:first-of-type {
    border-radius: 4px 4px 0 0;
}

.fragrance-item:last-of-type {
    border-radius: 0 0 4px 4px;
}

.fragrance-item.active {
    background-color: #856EC6;
    box-shadow: none;
}

.fragrance-details {
    position: relative;
    margin-top: -20px;
    padding: 20px 20px 110px 20px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: inset 0px 0px 0px 1px #D0CAE1;
}

.fragrance-details .field-name {
    display: block;
    padding-bottom: 5px;
    font: 400 14px/17px 'Lato', sans-serif;
    color: #5B5766;
}

.fragrance-details .fragrance-name .input-box {
    padding-left: 34px;
    background: #fff url('i/name.svg') no-repeat 8px 8px;
}

.fragrance-details .subfield-name {
    display: block;
    padding: 10px 0 5px 0;
    font: 400 12px/15px 'Lato', sans-serif;
    color: #5B5766;
}

.field-name i {
    display: inline-block;
    margin: 0 0 -2px 2px;
    width: 14px;
    height: 14px;
    background: url(i/suggested-star.svg) no-repeat 0 0;
}

.fragrance-details > form > div {
    position: relative;
    padding-top: 20px;
    overflow: hidden;
}

.fragrance-launch-date input {
    width: 166px;
}

.fragrance-details .fragrance-launch-date .input-box,
.datepicker {
    padding-left: 34px;
    background: #fff url('i/date.svg') no-repeat 8px 8px;
}

.fragrance-details .fragrance-family .input-box,
.fragrance-details .fragrance-family .select-box {
    padding-left: 34px;
    background-color: #fff;
    background: url('i/family.svg'), url('i/dropdown-arrow.svg');
    background-repeat: no-repeat no-repeat;
    background-position: 8px 8px, 97% 14px;
}

.ui-datepicker {
    display: none;
    z-index: 2 !important;
    margin-top: 8px;
    padding: 30px;
    background: #fff;
    border: 1px solid #D0CAE0;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.15);
    border-radius: 4px 4px 4px 4px;
}

.ui-datepicker:before {
    position: absolute;
    left: 14px;
    top: -8px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 8px solid #D0CAE0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.ui-datepicker:after {
    position: absolute;
    left: 15px;
    top: -7px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em;
}

.ui-datepicker-header {
    position: relative;
    width: 100%;
}

.ui-datepicker .ui-datepicker-prev {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
}

.ui-datepicker .ui-datepicker-prev span {
    display: block;
    width: 12px;
    height: 12px;
    background: url('i/arrow-left.svg') no-repeat 0 0;
}

.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

.ui-datepicker .ui-datepicker-next span {
    display: block;
    width: 12px;
    height: 12px;
    background: url('i/arrow-right.svg') no-repeat 0 0;
}

.ui-datepicker-title {
    font: 400 16px/12px 'Lato', sans-serif;
    text-align: center;
    color: #2D2B33;
}

.ui-datepicker-calendar {
    margin-top: 15px;
    font: 400 14px/27px 'Lato', sans-serif;
    color: #856BC9;
}

.ui-datepicker-calendar td a {
    display: block;
    width: 28px;
    height: 28px;
    text-align: center;
}

.ui-datepicker-calendar thead th span {
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
/*    font-weight: bold;*/
    color: #968EA9;
}

.ui-datepicker-calendar .ui-state-highlight {
    background: #856EC6;
    border-radius: 14px;
    color: #fff;
}

/*
.ui-datepicker:before {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    top: -20px;
    left: 10px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    box-shadow: inset 0 0 1px #ccc;
}
*/

.fragrance-notes {
    float: left;
    padding: 10px;
    width: 408px;
    border: 1px dashed #D0CAE0;
    border-radius: 4px;
}

.fragrance-three-notes {
    overflow: hidden;
}

.fragrance-top-notes,
.fragrance-middle-notes,
.fragrance-base-notes {
    clear: both;
    overflow: hidden;
}
    
.fragrance-notes > span {
    margin: 0 5px 5px 0;
    padding: 0 25px 0 10px;
    cursor: pointer;
    display: block;
    float: left;
    background-color: #F9F8FD;
    box-shadow: inset 0 0 0 1px #856EC6;
    border-radius: 3px;
    font: 400 14px/28px 'Lato', sans-serif;
    color: #856EC6;
}
.fragrance-notes > span:hover{
  opacity:0.7;
}
.fragrance-notes > span:after{
    position:absolute;
    content:"x";
    padding:2px 5px;
    margin-left:3px;
    font: 400 12px/24px 'Lato', sans-serif;
}
.fragrance-notes > input{
    margin: 0;
    padding: 9px 0 5px 5px;
    width: 100px;
    background: none;
    border: none;
    font: 400 12px/12px sans-serif;
}

.fragrance-three-notes textarea {
    margin-top: 10px;
    height: 100px;
}

.ui-button {
    float: left;
    margin: 0 0 10px 10px;
    width: 100px;
    height: 100px;
    background-color: #F9F8FD;
    box-shadow: inset 0 0 1px 0 #856EC6;
    border-radius: 4px;
    font: 400 13px/14px 'Lato', sans-serif;
    color: #856EC6;
}



.ui-button:first-of-type,
.ui-button:nth-of-type(5) {
    margin: 0;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-tabs-nav {
    clear: both;
}

.ui-tabs-tab {
    float: left;
    width: auto;
}

.ui-tabs-tab a {
    position: relative;
    display: block;
    margin-left: -1px;
    padding: 10px 12px 12px 12px;
    font: 400 14px/14px 'Lato', sans-serif;
    color: #968FA8;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    outline: none;
}

.ui-tabs-tab:first-of-type a {
    margin: 0;
    border-radius: 4px 0 0 4px;
}

.ui-tabs-tab:last-of-type a {    
    border-radius: 0 4px 4px 0;
}

.ui-state-active a,
.square-buttons .ui-state-active {
    background: #856EC6;
    box-shadow: none;
    color: #ffffff;
    z-index: 2;
}

.square-buttons .ui-button {
    cursor: pointer;
    position: relative;
    height: 25px;
    padding: 75px 0 0 0;
    text-align: center;
    font-size: 12px;
}

.square-buttons .ui-button:hover {
    box-shadow: inset 0 0 0 1px #856EC6;
}

.square-buttons .ui-button .ui-icon {
    position: absolute;
    top: 10px;
    left: 20px;
    display: block;
    width: 60px;
    height: 60px;
    background: #ccc;
}

.square-buttons .weak .ui-icon {
    background: url('i/weak-default.svg') no-repeat 13px 10px;
}

.square-buttons .moderate .ui-icon {
    background: url('i/moderate-default.svg') no-repeat 13px 10px;
}

.square-buttons .long-lasting .ui-icon {
    background: url('i/long-lasting-default.svg') no-repeat 13px 10px;
}

.square-buttons .very-long-lasting .ui-icon {
    background: url('i/very-long-lasting-default.svg') no-repeat 13px 10px;
}

.square-buttons .weak.ui-state-active .ui-icon {
    background: url('i/weak-active.svg') no-repeat 13px 10px;
}

.square-buttons .moderate.ui-state-active .ui-icon {
    background: url('i/moderate-active.svg') no-repeat 13px 10px;
}

.square-buttons .long-lasting.ui-state-active .ui-icon {
    background: url('i/long-lasting-active.svg') no-repeat 13px 10px;
}

.square-buttons .very-long-lasting.ui-state-active .ui-icon {
    background: url('i/very-long-lasting-active.svg') no-repeat 13px 10px;
}

.square-buttons .silage-soft .ui-icon {
    background: url('i/silage-soft-default.svg') no-repeat 0 0;
}

.square-buttons .silage-moderate .ui-icon {
    background: url('i/silage-moderate-default.svg') no-repeat 0 0;
}

.square-buttons .silage-heavy .ui-icon {
    background: url('i/silage-heavy-default.svg') no-repeat 0 0;
}

.square-buttons .silage-enormous .ui-icon {
    background: url('i/silage-enormous-default.svg') no-repeat 0 0;
}

.square-buttons .silage-soft.ui-state-active .ui-icon {
    background: url('i/silage-soft-active.svg') no-repeat 0 0;
}

.square-buttons .silage-moderate.ui-state-active .ui-icon {
    background: url('i/silage-moderate-active.svg') no-repeat 0 0;
}

.square-buttons .silage-heavy.ui-state-active .ui-icon {
    background: url('i/silage-heavy-active.svg') no-repeat 0 0;
}

.square-buttons .silage-enormous.ui-state-active .ui-icon {
    background: url('i/silage-enormous-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-small .ui-icon {
    background: url('i/bottle-small-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-medium .ui-icon {
    background: url('i/bottle-medium-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-large .ui-icon {
    background: url('i/bottle-large-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-xlarge .ui-icon {
    background: url('i/bottle-xlarge-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-xxlarge .ui-icon {
    background: url('i/bottle-xxlarge-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-custom .ui-icon {
    background: url('i/bottle-custom-default.svg') no-repeat 0 0;
}

.square-buttons .bottle-small.ui-state-active .ui-icon {
    background: url('i/bottle-small-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-medium.ui-state-active .ui-icon {
    background: url('i/bottle-medium-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-large.ui-state-active .ui-icon {
    background: url('i/bottle-large-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-xlarge.ui-state-active .ui-icon {
    background: url('i/bottle-xlarge-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-xxlarge.ui-state-active .ui-icon {
    background: url('i/bottle-xxlarge-active.svg') no-repeat 0 0;
}

.square-buttons .bottle-custom.ui-state-active .ui-icon {
    background: url('i/bottle-custom-active.svg') no-repeat 0 0;
}

.square-buttons .winter .ui-icon {
    background: url('i/winter-default.svg') no-repeat 0 0;
}

.square-buttons .spring .ui-icon {
    background: url('i/spring-default.svg') no-repeat 0 0;
}

.square-buttons .summer .ui-icon {
    background: url('i/summer-default.svg') no-repeat 0 0;
}

.square-buttons .autumn .ui-icon {
    background: url('i/autumn-default.svg') no-repeat 0 0;
}

.square-buttons .winter.ui-state-active .ui-icon {
    background: url('i/winter-active.svg') no-repeat 0 0;
}

.square-buttons .spring.ui-state-active .ui-icon {
    background: url('i/spring-active.svg') no-repeat 0 0;
}

.square-buttons .summer.ui-state-active .ui-icon {
    background: url('i/summer-active.svg') no-repeat 0 0;
}

.square-buttons .autumn.ui-state-active .ui-icon {
    background: url('i/autumn-active.svg') no-repeat 0 0;
}

.ui-slider-horizontal {
    height: 10px;
    border: none;
    background: #F9F8FD;
    border-radius: 6px;
}

.slider {
    position: relative;
    overflow: hidden;
    clear: both;
    height: 50px;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    height: 10px;
    font-size: .7em;
    display: block;
    border: none;
    background-position: 0 0;
    background: #856EC6;
    border-radius: 6px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    margin: -5px 0 0 -5px;
    width: 20px;
    height: 20px;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
    background: #856EC6;
    border-radius: 10px;
    border: none;
}

.slider #amount {
    font: 600 13px/16px 'Lato', sans-serif;
    color: #968FA8;
    border: none;
}

.main-accord {
    overflow: hidden;    
}

/*
.fragrance-images .image,
.fragrance-images .dz-preview {
*/

.fragrance-images .image {
    float: left;
    cursor: pointer;
    position: relative;
    margin: 10px 10px 10px 0;
    width: 98px;
    height: 98px;
/*    box-shadow: inset 0 0 1px 0 #856EC6;*/
    border: 1px solid #D0CAE0;
    border-radius: 4px;
    overflow: hidden;
}

.fragrance-images .image:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 98px;
    height: 98px;
    background: rgba(255,255,255,0.5);
}

.fragrance-images .image-delete {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 12px;
    height: 12px;
    background: url(i/image-delete.svg) no-repeat 0 0;
}

.fragrance-images .image-zoom {
    cursor: pointer;
    position: absolute;
    top: 35px;
    right: 35px;
    display: block;
    width: 30px;
    height: 30px;
    background: url(i/image-zoom.svg) no-repeat 0 0;
}

.fragrance-images .image:hover .image-delete,
.fragrance-images .image:hover .image-zoom {
    z-index: 1;
}

.fragrance-images .image:last-of-type {
    margin: 10px 0 10px 0;
}

.fragrance-images .image img {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.fragrance-images .image:hover {
    border: 1px solid #856EC6; 
}

.fragrance-banners .banners-grid {
    margin-top: 15px;
}

.fragrance-banners .banners-grid img {
    width: 100%;
}

.fragrance-news .add-button {
    margin-bottom: 20px;
    float: none;
    position: relative;
    width: 60px;
}

.add-news {
    position: relative;
    margin: 25px 0 20px 0;
    padding: 20px;
    background: #F8F7FA;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 4px;
}

.add-news:before {
    position: absolute;
    left: 36px;
    top: -8px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 8px solid #D0CAE0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.add-news:after {
    position: absolute;
    left: 37px;
    top: -6px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 7px solid #F8F7FA;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.add-news label {
    display: block;
    padding: 10px 0 5px 0;
    font-size: 14px;
    color: #5B5666;
}

.add-news textarea {
    padding-top: 10px;
    height: 80px;
    font-size: 14px;
}

.add-news textarea::placeholder {
    color: #968EA9;
}

.add-news label:first-of-type {
    padding-top: 0;
}

.add-news .datepicker {
    float: left;
    width: 166px;
} 

.add-news .ghost-button {
    float: left;
    margin-left: 10px;
    width: 183px;
    height: 36px;
    line-height: 34px;
    text-align: center;
} 

.add-news .button-violet {
    float: left;
    margin-top: 10px;
}

.newsfeed-update.add-news {
    display: none;
    position: absolute;
    top: 200px;
    left: 0;
    right: -740px;
    margin: 25px auto 20px auto;
    width: 390px;
    z-index: 2;
    border: 1px solid #D0CAE0;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.15);
    border-radius: 4px 4px 4px 4px;
    
}

.button-hidden {
    display: block;
    margin-top: 3px;
    margin-left: -14px;
    width: 90%;
    height: 30px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 30px;
    color: #968FA8;
    border: 1px solid #fff;
    border-radius: 3px;
}

.button-hidden:hover {
    background: #F9F7FC;
    border: 1px solid #856EC6;
    color: #856EC6;
    background: url(i/update.svg) no-repeat right 10px top 8px;
}

.desc {
    font: 400 12px/16px 'Lato', sans-serif;
    color: #968FA8;
}

.ghost-button {
    padding: 7px 10px;
    height: 16px;
    background: transparent;
    box-shadow: inset 0 0 1px 0 #D0CAE0;
    border-radius: 4px;
    font: 400 13px/14px 'Lato', sans-serif;
    color: #968FA8;
}

.add-button {
    position: absolute;
    top: 14px;
    right: 0;
}

.drag-n-drop-area {
    margin-top: 10px;
    padding: 40px;
    width: calc(100% - 80px);
    background-color: #F8F7FA;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 4px;
    font-style: 14px;
    line-height: 18px;
    color: #5B5766;
    text-align: center;
}

.drag-n-drop-area a {
    color: #856EC6;
    border-bottom: 1px solid #856EC6;
}

.fragrance-save-details {
    position: fixed !important;
    bottom: 0;
    margin: 20px -20px 0 -20px;
    padding: 0 !important;
    width: 470px;
    height: 86px;
    background-color: #F1F0F5;
}

.fragrance-save-details-content {
    padding: 20px;
    width: 430px;
    height: 32px;
    background-color: #F9F8FA;
    border-radius: 0 0 5px 5px;
    box-shadow: inset 0 0 0 1px #D0CAE0;
}

.save-button {
    display: inline-block;
    padding: 0 16px 2px 16px;
    background-color: #3AC299;
    border-radius: 4px;
    font-style: 16px;
    line-height: 34px;
    color: #fff;
}

.fragrance-save-details-content span {
    margin: 0 0 0 15px;
    font-style: 14px;
    line-height: 17px;
    color: #968EA9;
}

.profile-button {
    position: absolute;
    top: 14px;
    right: 0;
    margin: 0 20px 0 0;
    padding: 0 20px 0 0;
    height: 46px;
}

.profile-button.active {
    box-shadow: inset 0 -2px 0 0 #8773D8;
}

.profile-button i {
    position: absolute;
    top: 12px;
    right: 0;
    display: block;
    width: 12px;
    height: 12px;
/*    background: url('i/dropdown-arrow.svg') no-repeat 0 0;*/
 
    background-color: #D0CAE0;
    -webkit-mask: url(i/dropdown-arrow.svg) no-repeat 0 0;
    mask: url(i/dropdown-arrow.svg) no-repeat 0 0;
}

.profile-button .useravatar {
    float: left;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
}

.profile-button .useravatar img {
    width: 100%;
    height: 100%;
}

.profile-button .username {
    float: left;
    padding: 0 0 0 5px;
    font-style: 15px;
    line-height: 28px;
    color: #856BC9;
}

.add-fragrance-button {
    float: right;
}

.search-filter:before {
    content: "";
    display: table;
    clear: both;
}

.filter-button.active {
    background: #FFD97E;
    box-shadow: none;
}

.filter-button.active i {
    background: #000;
}

.brands-filter,
.fragrances-filter {
    display: none;
    position: relative;
    margin-top: 10px;
    padding: 15px;
    background: #FFD97E;
    border-radius: 4px;
    overflow: hidden;
}

.brands-filter:after,
.fragrances-filter:after {
    position: absolute;
    right: 11px;
    top: -7px;
    width: 0;
    height: 0;
    content: '';
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFD97E;
}

.brands-filter label,
.fragrances-filter label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

.fragrances-filter-item {
    float: left;
    margin-left: 5px;
    width: 110px;
}

.fragrances-filter-item:first-of-type {
    margin: 0;
}

.fragrances-filter .button-violet {
    margin-top: 17px;
}


/*BRANDS*/

.table {
    display: table;
}

.table-name {
    margin-bottom: 20px;
    font-size: 18px;
    color: #2D2B33;
}

.counter {
    position: relative;
    padding: 4px 8px;
    display: inline-block;
    font-size: 14px;
    color: #856BC9;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 3px;
    background: #fff;
}

.products .counter {
    margin-left: 7px;
    padding: 4px 10px;
}

.products .counter:after {
    position: absolute;
    left: -4px;
    top: 9px;
    width: 0;
    height: 0;
    content: '';
    border-right: 5px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.products .counter:before {
    position: absolute;
    left: -5px;
    top: 8px;
    width: 0;
    height: 0;
    content: '';
    border-right: 6px solid #D0CAE0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.table-header {
    display: table-row;
    height: 40px;
}

.table-header {
    height: 20px;
    font-weight: 600;
    font-size: 12px;
    color: #5B5766;
}
.table-row {
    position: relative;
    display: table;
    height: 40px;
    background: #fff;
    box-shadow: inset 0 -1px 0 0 #D0CAE1,
                inset -1px 0 0 0 #D0CAE1,
                inset 1px 0 0 0 #D0CAE1;
    font-size: 14px;
    line-height: 38px;
}

.table-row:nth-of-type(2n) {
    background: #F9F7FC;
}

.table-row:nth-of-type(2),
.brands-and-fragrances .table-row:nth-of-type(3) {
    box-shadow: inset 0 1px 0 0 #D0CAE1,
                inset 0 -1px 0 0 #D0CAE1,
                inset -1px 0 0 0 #D0CAE1,
                inset 1px 0 0 0 #D0CAE1;
    border-radius: 4px 4px 0 0;
}

.table-row:last-of-type {
    border-radius: 0 0 4px 4px;
}

.table-col {
    float: left;
    display: table-cell;
}

.table-col.checkbox {
    width: 80px;
}

.table-col.company-name {
    width:  200px;
    color: #968FA8;
}

.table-col.brand-name {
    width:  460px;
    color: #856EC6;
}

.table-col.brand-name span {
    padding-left: 5px;
    color: #968FA8;
}

.table-col.newsfeed-update {
    width:  200px;
    color: #968FA8;
}

.table-col.actions {
    width:  230px;
}

.action-edit {
    float: left;
    display: inline-block;
    margin: 6px 4px;
    padding: 0;
    width: 24px;
    height: 24px;
    background: url(i/edit.svg) no-repeat 3px 3px;
}

.action-delete {
    float: left;
    display: inline-block;
    margin: 6px 4px;
    padding: 0;
    width: 24px;
    height: 24px;
    background: url('i/delete.svg') no-repeat 3px 3px;
}

.action-confirm {
    margin: 6px 0 0 6px;
    display: inline-block;
    width: 90px;
    height: 26px;
    background: #3AC299;
    border-radius: 3px;
    font-size: 13px;
    line-height: 24px;
    color: #fff;
    text-align: center;
}

.action-confirmed {
    margin: 6px 0 0 6px;
    display: inline-block;
    width: 90px;
    height: 26px;
    background: transparent;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #3AC299;
    font-size: 13px;
    line-height: 24px;
    color: #3AC299;
    text-align: center;
}

.checkbox label input {
  display: none;
}

.checkbox label span {
    cursor: pointer;
    margin: 11px 0 0 11px;
    height: 16px;
    width: 16px;
    border: 1px solid #D0CAE0;
    border-radius: 2px;
    display: inline-block;
    position: relative;
}

.checkbox label:hover span {
    border: 1px solid #856EC6;
}

[type=checkbox]:checked + span:before {
    content: url(i/checkmark.svg);
    position: absolute;
    top: 3.2px;
    left: 3.9px;
}

.toolbar {
    width: 100%;
    margin-bottom: 20px;
    content: "";
    display: table;
    clear: both;
}

.toolbar .select-all {
    padding: 0 30px 0 0;
    margin-right: 10px;
    float: left;
    display: block;
    width: auto;
    height: 36px;
    box-shadow: inset 0 0 0 1px #D0CAE1;
    border-radius: 4px;
}

.toolbar .select-all.checkbox label span {
    margin: 9px 0 0 9px;
}


.toolbar .choose-company {
    float: left;
    width: 201px;
}

.toolbar .search-bar {
    float: left;
    margin-left: 10px;
    width: 300px;
}

.button-violet {
    float: right;
    display: block;
    padding: 0 15px;
    height: 36px;
    background: #856EC6;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
}

.button-default {
    float: right;
    display: block;
    padding: 0 15px;
    height: 36px;
    background: #F9F7FC;
    box-shadow: inset 0 0 0 1px #856EC6;
    border-radius: 4px;
    color: #856EC6;
    font-weight: 400;
    font-size: 14px;
    line-height: 34px;
}

.button-default.suggested {
    margin-left: 10px;
}


/* DASHBOARD */

.row {
    margin-bottom: 10px;
    width: 100%;
    content: "";
    display: table;
    clear: both;
}

.widget {
    position: relative;
    float: left;
    margin-left: 10px;
    height: 90px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 4px;
}

.widget:first-of-type {
    margin: 0;
}

.widget.company {
    width: 370px;
}

.widget.brands-updated,
.widget.brands-to-update,
.widget.fragrances-updated,
.widget.fragrances-to-update {
    width: 190px;
}

.widget.longevity,
.widget.silage,
.widget.notes,
.widget.accords,
.widget.images,
.widget.videos,
.widget.banners {
    width: 158.5px;
}

.metric {
    padding: 20px 0 0 70px;
}

.metric:nth-of-type(1) {
    padding: 15px 0 0 80px;
}

.metric .label {
    font-size: 12px;
    color: #7F7F7F;
}

.metric .label-bottom {
    font-size: 12px;
    color: #2D2B33;
}

.metric .value {
    font-weight: 200;
    font-size: 36px;
    color: #2D2B33;
}

.metric .value span {
    font-weight: 400;
    font-size: 18px;
    color: #968FA8;
}

.metric.small {
    padding: 20px 0 0 82px;
}

.metric.small .value {
    margin-top: 2px;
    font-size: 24px;
}

.metric.small .value span {
    font-size: 12px;
}

.metric.small .label-bottom {
    margin-top: 2px;
}

.company .metric {
    float: left;
    padding: 24px 0 0 24px;
}

.company .metric .value {
    font-weight: 400;
    font-size: 24px;
}

.widget .icon {
    position: absolute;
    top: 21px;
    left: 21px;
    width: 40px;
    height: 47px;
    
}

.widget.brands-updated .icon .icon-base,
.widget.brands-to-update .icon .icon-base {
    display: block;
    width: 40px;
    height: 47px;
    background: url(i/dashboard-brand-icon.svg) no-repeat 0 0;
}

.widget.brands-updated .icon .icon-state,
.widget.brands-to-update .icon .icon-state,
.widget.fragrances-updated .icon .icon-state,
.widget.fragrances-to-update .icon .icon-state {
    position: absolute;
    top: 28px;
    left: 18px;
    display: block;
    width: 20px;
    height: 20px;
}

.widget.brands-updated .icon .icon-state,
.widget.fragrances-updated .icon .icon-state {
    background: url(i/dashboard-icon-state-checkmark.svg) no-repeat 0 0;
}

.widget.brands-to-update .icon .icon-state,
.widget.fragrances-to-update .icon .icon-state {
    background: url(i/dashboard-icon-state-cross.svg) no-repeat 0 0;
}

.widget.fragrances-updated .icon .icon-base,
.widget.fragrances-to-update .icon .icon-base {
    display: block;
    width: 40px;
    height: 47px;
    background: url(i/dashboard-fragrance-icon.svg) no-repeat 0 0;
}

.widget canvas {
    position: absolute;
    top: 13px;
    left: 13px;
}

.widget.brands-and-fragrances {
    padding: 30px;
    width: calc(100% - 60px);
    height: auto;
    content: "";
    display: table;
    clear: both;
}

.widget.brands-and-fragrances .table {
    float: left;
}

.widget.brands-and-fragrances .table .table-header .table-col {
    color: #5B5666;
}

.widget.brands-and-fragrances .table-col:first-of-type {
    padding-left: 15px;
}

.widget.brands-and-fragrances .table.fragrances {
    margin-left: 20px;
}

.widget.brands-and-fragrances .table .brand {
    width: 150px;
}

.widget.brands-and-fragrances .table.brands .table-row .brand,
.widget.brands-and-fragrances .table.fragrances .table-row .fragrances {
    font-weight: 600;
    color: #856BC9;
}

.widget.brands-and-fragrances .table.brands .table-row .brand.custom {
    background: url(i/brand-custom.svg) no-repeat right 0 top 11px;
}

.widget.brands-and-fragrances .table.fragrances .table-row:hover {
    cursor: pointer;
}

.widget.brands-and-fragrances .table.fragrances .table-row .open-product-details {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 38px;
}

.widget.brands-and-fragrances .table .fragrances {
    width: 180px;
}

.widget.brands-and-fragrances .table.brands .fragrances {
    width: 80px;
    text-align: center;
}

.widget.brands-and-fragrances .table .updated {
    margin: 0 20px;
    width: 50px;
    text-align: center;
}

.widget.brands-and-fragrances .table-row .updated .score {    
    margin: 8px auto;
    padding: 0 5px;    
    height: 24px;
    box-shadow: inset 0 0 0 1px #3AC299;
    border-radius: 3px;
    line-height: 22px;
    text-align: center;
    color: #3AC299;
}

.widget.brands-and-fragrances .table-row.active {
    background: #856EC6;
}

.widget.brands-and-fragrances .table.brands .table-row.active .brand,
.widget.brands-and-fragrances .table.brands .table-row.active .fragrances {
    color: #fff;
}

.widget.brands-and-fragrances .table-row.active .updated .score {
    box-shadow: inset 0 0 0 1px #fff;
    color: #fff;
}

.widget.brands-and-fragrances .table .notes,
.widget.brands-and-fragrances .table .main-accord,
.widget.brands-and-fragrances .table .longevity,
.widget.brands-and-fragrances .table .silage,
.widget.brands-and-fragrances .table .bottle-sizes,
.widget.brands-and-fragrances .table .images,
.widget.brands-and-fragrances .table .videos,
.widget.brands-and-fragrances .table .banners {
    width: 70px;
    text-align: center;
}

i.checkmark {
    margin: 13px auto;
    display: block;
    width: 12px;
    height: 12px;
    background: url(i/checkmark-12x12.svg) no-repeat 0 0;
}

i.cross {
    margin: 13px auto;
    display: block;
    width: 12px;
    height: 12px;
    background: url(i/cross-12x12.svg) no-repeat 0 0;
}

.new-brand {
    position: relative;
    background: #fff !important;
    box-shadow: inset 0 1px 0 0 #856EC6,
                inset 0 -1px 0 0 #856EC6, 
                inset -1px 0 0 0 #856EC6, 
                inset 1px 0 0 0 #856EC6 !important;
    
}

.new-brand .new-brand-cancel {
    position: absolute;
    right: 13px;
    top: 13px;
    display: block;
    width: 12px;
    height: 12px;
    background: url(i/image-delete.svg) no-repeat 0 0;
}

.new-brand .company-name select {
    padding: 10px 0;
    font-weight: 600;
    font-size: 14px;
    color: #856BC9;
}

.new-brand .brand-name #brands {
    padding: 10px 0;
    width: 440px;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
}

.new-brand .brand-name #brands::placeholder {
    color: #2D2B33;
}

.new-brand .newsfeed-update .button-default {
    margin-top: 6px;
    margin-left: -14px;
    float: left;
    height: 29px;
    line-height: 27px;
}

.ghost-button:hover,
.button-default:hover {
    background: #856EC6;
    color: #fff;
}

.new-brand .newsfeed-update .add-news {
/*    display: none;*/
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #D0CAE0;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.15);
    border-radius: 4px 4px 4px 4px;
}

.ui-autocomplete:before {
    position: absolute;
    left: 14px;
    top: -8px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 8px solid #D0CAE0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.ui-autocomplete:after {
    position: absolute;
    left: 15px;
    top: -7px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.ui-autocomplete .ui-menu-item {
    font-size: 16px;
    line-height: 32px;
    color: #856BC9;
}

.ui-widget.ui-widget-content {
/*    border: 1px solid #c5c5c5;*/
}
.ui-widget-content {
/*    border: 1px solid #dddddd;*/
    background: #ffffff;
    color: #333333;
}

.dashboard .button-violet {
    float: none;
    margin: 20px auto 0 auto;
    width: 140px;
    text-align: center;
}

/* PROFILE */

.profile {
    width: 770px;
}

.title {
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 26px;
}

.white-containter {
    padding: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 4px;
    overflow: hidden;
}

.profile-information,
.personal-data {
    float: left;
    padding: 30px;
    width: 420px;
    height: 385px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #D0CAE0;
    border-radius: 4px;
}

.personal-data {
    margin-left: 10px;
    width: 220px;
}

.profile-information .general-info {    
    content: "";
    display: table;
    clear: both;
    margin-bottom: 30px;
}

.profile-information .avatar {
    float: left;
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 50px;
    overflow: hidden;
}

.profile-information .avatar img {
    width: 100%;
    height: 100%;
}

.profile-information .name {
    margin: 28px 0 0 20px;
    float: left;
}

.profile .name .value {
    font-size: 24px;
}

.profile .label {
    margin-bottom: 4px;
    font-size: 12px;
    color: #808080;
}

.profile .value {
    font-size: 18px;
    color: #2D2B33;
}

.profile-item {
    float: left;
    margin-bottom: 20px;
    width: 210px;
}

.representing-brands {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

.ghost-button {
    display: block;
    padding: 0 15px;
    height: 32px;
    background: transparent;
    box-shadow: inset 0 0 0 1px #856EC6;
    border-radius: 4px;
    color: #856EC6;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
}

.profile .ghost-button {
    float: left;
    margin-top: 10px;
}

.profile .value.pass-mask {
    font-size: 32px;
    margin-bottom: -15px;
}


/*CONTACTS*/

.contacts .title {
    margin-bottom: 10px;
}

.contacts .desc {
    margin-top: 10px;
    font-size: 14px;
}

.contacts .desc a:hover {
    padding-bottom: 1px;
    border-bottom: 1px solid #856BC9;
}

.contact-form {
    float: left;
    width: 710px;
}

.contact-form form {
    padding: 0 0 20px 0;
}

.contact-form form label {
    margin: 25px 0 10px 0;
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    color: #5B5666;
}

.contact-form form textarea {
    height: 120px;
}

.contact-form form input {
    width: 360px;
}

.contact-form .button-violet {
    float: left;
}

.contacts-add-ons {
    float: left;
    margin-left: 30px;
    width: 310px;
}

.contacts-add-ons .buttons a {
    margin-bottom: 10px;
    width: calc(100% - 30px);
    text-align: center;
}

/* SUPPLIER */

.profile.suppliers {
    padding-top: 30px;
    margin-bottom: 30px;
}

.supplier-item {
    content: "";
    display: table;
    clear: both;
    padding-bottom: 10px;
    margin-top: 25px;
    border-bottom: 1px solid #D0CAE0;
}

.supplier-item:last-of-type {
    border: none;
}

.supplier .name,
.supplier-item .name {
    margin: 0 0 20px 0;
}

.supplier .profile-item,
.supplier-item .profile-item {
    width: 176px;
}

.supplier-item .address {
    width: 100%;
}

/* LOGIN */

.login {
    background: #F1F0F5 url(i/brands-background.png) repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.login .logo {
    margin: 160px auto 30px auto;
    content: "";
    display: table;
    clear: both;
}

.login .wrapper {
    margin: 0 auto;
    padding: 30px;
    width: 410px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.login label {
    display: block;
    padding: 0 0 5px 0;
    font-size: 16px;
    color: #856BC9;
}

.login .input-box {
    margin-bottom: 10px;
}

.login .button-violet,
.login .button-default {
    margin-top: 5px;
    width: calc(100% - 30px);
    text-align: center;
}

/* REGISTRATION */

.registration .desc {
    font-size: 14px;
}

.registration .button-default,
.registration .button-violet {
    float: left;
    width: 170px;
}

.registration .button-violet {
    margin-left: 10px;
}

.progress-bar {
    margin: -10px auto 15px auto;
}

.progress-bar .step {
    float: left;
    margin-left: 4px;
    width: 26px;
    height: 3px;
    background: #D0CAE0;
}

.progress-bar .step.active {
    background: #856EC6;
}

.password {
    position: relative;
}

/*input[type="password"] {*/
.password-hidden {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 15px;
    background: url(i/password-hidden.svg) no-repeat 0 0;
}

.country-code {
    float: left;
    width: 100px;
    border-radius: 4px 0 0 4px;
}

.phone-number {
    margin-left: -1px;
    float: left;
    width: 160px;
    border-radius: 0 4px 4px 0;
}

.tip {
    padding: 0 0 15px 25px;
    font-size: 16px;
    line-height: 20px;
    color: #968EA9;
    background: url(i/tip.svg) no-repeat 0 1px;
}

.additional-tip {
    padding-top: 10px;
    font-style: italic;
    font-size: 16px;
    line-height: 20px;
    color: #CAC6D4;
}

.registration .link {
    float: left;
    display: block;
    padding: 0 20px;
    line-height: 34px;
}

.registration .clearfix .button-violet {
    margin: 0;
}

.registration .clearfix .button-default {
    margin: 0 0 0 10px;
}

.registration .desc:last-of-type {
    margin: -15px 0 15px 0;
}

.step-3 .button-violet,
.step-3 .button-default {
    margin: 0 !important;
    width: calc(100% - 30px);
    
}

.step-3 .button-default {
    margin-top: 10px !important;
}

.step-3 .desc {
    margin-top: 15px !important;
}

.step-3 .tabs a {
    margin-bottom: 10px;
    float: left;
    display: block;
    width: 90px;
    height: 36px;
    background: #fff;
    border: 1px solid #856EC6;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
}

.step-3 .tabs a.active {
    background: #856EC6;
    color: #fff;
}

.step-3 .tabs a:first-of-type {
    border-radius: 4px 0 0 4px;
}

.step-3 .tabs a:last-of-type {
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
}

/* DROPDOWN */

.profile-button:hover {
    cursor: pointer;
}


.profile-button:hover i {
    background-color: #856BC9;
}

.profile-dropdown {
    margin-top: 7px;
    padding: 15px 30px;
    display: none;
    position: absolute;
    top: 60px;
    right: 5px;
}
.profile-dropdown:after {
    position: absolute;
    left: auto;
    right: 15px !important;
    top: -7px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.profile-dropdown:before {
    position: absolute;
    left: auto;
    right: 14px !important;
    top: -8px;
    width: 0;
    height: 0;
    content: '';
    border-bottom: 8px solid #D0CAE0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.profile-dropdown a {
    display: block;
    width: 180px;
    line-height: 36px;
}

.profile-dropdown-profile {
    padding-left: 26px;
    background: url(i/profile.svg) no-repeat 0 10px;
}

.profile-dropdown-suppliers {
    padding-left: 26px;
    background: url(i/suppliers.svg) no-repeat 0 10px;
}

.profile-dropdown-contacts {
    padding-left: 26px;
    background: url(i/contacts.svg) no-repeat 0 14px;
}

.profile-dropdown-logout {
    padding-left: 26px;
    background: url(i/logout.svg) no-repeat 0 10px;
}

.dropzone-container {
    position: relative;
    width: 100%;
    min-height: 100px;
}

.fragrance-details .fragrance-video,
.fragrance-details .fragrance-banners,
.fragrance-details .fragrance-news {
    margin-top: 10px;
}

.dropzone {
    position: relative;
    cursor: pointer;
    margin-top: 10px;
    padding: 20px;
    width: calc(100% - 44px);
    min-height: 50px;
    border: 2px dashed #D0CAE0;
    border-radius: 5px;
    background-color: #F8F7FA;
}

.dropzone:hover {
    border-color: #856EC6;
}

.dz-success-mark,
.dz-error-mark {
    display: none;
}

.dz-preview {
    margin-left: 12px;
    float: left;
    width: 120px;
}

.dz-preview:nth-of-type(2) {
    margin: 0;
}

.dz-size {
    display: none;
}

.dz-filename {
    padding-top: 5px;
    width: 120px;
    font-size: 13px;
    line-height: 16px;
    color: #5B5666;
}

.dz-remove {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}

/*
.dropzone-tip {.
    position: absolute;
    top: 0;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 260px;
    font-size: 14px;
    line-height: 18px;
    color: #5B5766;
    z-index: 0;
}*/


input[type=file] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

input[type=file] + label {
    cursor: pointer;
    display: inline-block;
    
    margin-left: 10px;
    padding: 0 15px;
    height: 36px;
    background: transparent;
    box-shadow: inset 0 0 0 1px #856EC6;
    border-radius: 4px;
    color: #856EC6;
    font-weight: 400;
    font-size: 14px;
    line-height: 34px;
}

input[type=file] + label:hover {
    background-color: #856EC6;
    color: #fff;
}

input[type=file]:focus + label {
    font-weight: 600;
}