/* BEM - Block Element Modifier */
* {
    padding: 0px;
    border: 0px;
    margin: 0px;
    /*white-space: normal;*/
}

body {
    color: #575756;
    font-family: 'Lato';
    white-space: normal;
}

i {
    padding: 0;
}

/* Layout */
.layout__master {
    float: left;
    width: 100%;
    min-width: 1300px;
}

.layout__container {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
!important padding-top: 20 px;
    padding-bottom: 20px;
}

.layout__border {
    width: 10%;
    margin: 0 auto;
}

.layout__body {
    clear: both;
    margin: 0 auto;
    width: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.component__navigation__buttons {
    font-size: 14px;
    padding: 10px 10px 10px 10px;
    background-color: #FFFFFF;
    cursor: pointer;
    text-align: left;
}

.component__basket-icon {
    background-color: #e50051;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
    margin-left: -8px;
}

.component__steps {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #f7f8fa;
    width: 100px;
    height: 100px;
}

.component__background-studio {
    background-image: url(../images/ravensworth/studio/design-studio.jpg);
}

/*.component__product__*/

.component__promo {
    position: absolute;
    top: 12px;
    right: 20px;
    -webkit-transform: translateY(-50%) translateX(70%);
    transform: translateY(-50%) translateX(70%);
}

.component__navigation__buttons:hover {
    background-color: #f7f8fa;
}

.component__navigation__title {
    font-size: 14px;
    padding: 5px 0px;
    background-color: transparent;
    /*border-bottom: 1px dotted #cdcfd1;*/
    cursor: pointer;
    text-align: left;
}

.component__account__title__no-hover {
    font-size: 14px;
    padding: 5px 0px;
    background-color: #FFFFFF;
    /*border-bottom: 1px dotted #cdcfd1;*/
    cursor: pointer;
    text-align: center;
    cursor: default;
    color: #575756;
    /*width: 100%;*/
}

.component__account__title {
    font-size: 14px;
    padding: 5px 0px;
    /*width: 100%;*/
    /*background-color: #FFFFFF;*/
    background-color: transparent;
    /*border-bottom: 1px dotted #cdcfd1;*/
    cursor: pointer;
    text-align: center;
    color: #575756;
    /*width: 100%;*/
}

.component__admin__title {
    font-size: 14px;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
}

.component__new {
    padding: 2px 5px 2px 5px;
    font-size: 12px;
    background-color: #e50051;
    color: white;
}

.layout__form__admin {
    width: calc((100% / 3) - 30px);
    padding: 10px 15px;
    float: left;
    text-align: center;
}

.layout__form__customers {
    width: calc((100% / 2) - 30px);
    padding: 10px 15px;
    float: left;
    text-align: center;
}

.layout__search-field__admin-orders {
    width: calc((100% / 7) - 20px);
    padding: 10px 10px;
    float: left;
    text-align: center;
}

.layout__search-field__admin {
    width: calc((100% / 7) - 20px);
    padding: 10px 10px;
    float: left;
    text-align: center;
    /*margin: 60px 0;*/
}

.layout__search-field__invoices {
    width: calc((100% / 4) - 20px);
    padding: 10px 10px;
    float: left;
    text-align: center;
    /*margin: 60px 0;*/
}

.layout__search-field__customer {
    width: 24%;
    padding: 10px 0.5%;
    float: left;
    text-align: center;
}

.layout__search-field__insights-8 {
    width: calc((100% / 8) - 20px);
    padding: 10px 10px;
    float: left;
    text-align: center;
}

.layout__search-field__insights-120px {
    width: 120px;
    padding: 10px 10px;
    float: left;
    text-align: center;
}

.layout__search-field__insights-250px {
    width: 250px;
    padding: 10px 10px;
    float: left;
    text-align: center;
}

#layout__navigation {
    background-color: #00859c;
    text-align: right;
    color: #ffffff;
    width: 100%;
}

.layout__main {
    width: calc(85% - 102px);
    position: relative;
    padding: 20px 50px 50px 50px;
    text-align: left;
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #b7e3eb;
    color: #66b1ff;
}


/* Components */

#component__banner {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

.component__banner-title {
    font-size: 65px;
    letter-spacing: 2px;
    font-weight: 600;
    text-align: center;
    text-shadow: black 0px 1px 1px;
    color: #fff;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.component__banner-subtitle {
    font-size: 26px;
    letter-spacing: 2px;
    font-weight: 600;
    text-shadow: black 0px 1px 1px;
    color: #fff;
    position: absolute;
    top: 70%;
    width: 100%;
    text-align: center;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.component__banner-subtitle--dm {
    top: 80%;
}

.component__carousel__title-position {
    letter-spacing: 2px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 75%;
    left: 17%;
    /*-moz-transform: translateY(-50%);*/
    /*-ms-transform: translateY(-50%);*/
    /*-webkit-transform: translateY(-50%);*/
    /*transform: translateY(-30%);*/
}

.component__carousel__title-position--center {
    left: 0;
    right: 0;
}

.component__carousel__header-scale {
    font-size: calc(65px + (70 - 54) * ((100vw - 300px) / (2200 - 300)));
}

.component__carousel__header__subtitle-scale {
    font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (2200 - 300)));
}

.component__carousel__title-scale {
    font-size: calc(38px + (70 - 52) * ((100vw - 300px) / (2200 - 300)));
}

.component__carousel__subtitle-scale {
    font-size: calc(14px + (20 - 10) * ((100vw - 300px) / (2200 - 300)));
}

.grad {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 3px);
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

#component__logo {
    width: 300px;
    height: auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

.component__login {
    position: absolute;
    right: 10px;
    top: 100px;
    width: 400px;
    height: 350px;
    z-index: 100;
    background-color: #FFFFFF;
    padding: 40px 40px 40px 40px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, .16);
    border-radius: 10px;
}

.component__icon-18-left {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 18%;
}

.component__icon-18-right {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 18%;
}

.component__login-dialogue {
    width: 100%;
    /*height: 500px;*/
}

.component__product__images {
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.component__product__buttons {
    width: 200px;
    height: 200px;
    cursor: pointer;
    margin: 10px 10px;
    float: left;
    padding: 20px;
}

.component__product__titles {
    width: 170px;
    height: 44px;
    padding: 5px 10px;
    text-align: center;
}

.component__product__card {
    float: left;
    margin: 10px;
    width: calc(100% / 3 - 20px);
}

.component__product__card-small {
    float: left;
    margin: 10px;
    width: calc(100% / 6 - 20px);
}

.component__product__card {
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px;
}

.component__product__card-body {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.component__product__card-body .component__product__card-overlay {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.component__product__card-body:hover .component__product__card-overlay {
    opacity: 0.7;
}

.component__product__card-overlay-text {
    position: absolute;
    text-align: center;
    width: 80%;
    padding: 0 auto;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    top: 80%;
    line-height: 30px;
    font-size: 24px;
}

.component__product__card-body:hover .component__product__card-overlay-text {
    top: 50%;
    left: 50%;
    opacity: 1;
}

.component__product__card-subtitle-text {
    height: 80px;
    line-height: 80px;
    padding: 5px 10px;
    text-align: center;
    color: #00859c;
    background-color: #f7f8fa;
    font-size: 21px;
    font-weight: 700;
    margin-top: -3px;
}

.component__product__card-small-subtitle-text {
    height: 40px;
    line-height: 22px;
    padding: 5px 4px;
    text-align: center;
    color: #00859c;
    background-color: #f7f8fa;
    font-size: 16px;
    font-weight: 700;
    margin-top: -3px;
}

.component__message-base {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    float: left;
    font-size: 14px;
    margin: 10px 0px;
    text-align: center;
    width: calc(100% - 20px);
    letter-spacing: 1px;
    white-space: pre-line;
}

.component__message-fail {
    /*@extend .component__message-base;*/
    color: #A94442;
    background-color: #F2DEDE;
}

.component__message-success {
    /*@extend .component__message-base;*/
    color: #00859c;
    background-color: #c9eaf0;
}

.component__pdfupload {
    width: 805px;
    height: 710px;
}

.component__upload-portal {
    border-radius: 10px;
    border: 1px solid #D3D3D3;
    width: 500px;
    /*height: 100%;*/
    margin: 0 auto;
    padding: 5% 4%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.component__upload-dropzone {
    border: 4px dashed #d6d5d5;
    color: #000000;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
    padding: 8% 8%;
}

.component__upload-progress__icon__leading {
    width: 106px;
    height: 106px;
    padding-top: 10px;
    padding-left: 10px;
}

.component__upload-portal__leading {
    border-radius: 10px;
    width: 400px;
    height: 100%;
    margin: 0 auto;
    padding: 4% 3%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.component__upload-portal__leading-dropzone, .component__upload-portal__supporting-dropzone {
    border: 4px dashed #d6d5d5;
    color: #000000;
    text-align: center;
    border-radius: 10px;
    margin-top: 6%;
    padding: 13% 8%;
}

.component__upload-portal__leading-dropzone.dragover, .component__upload-portal__supporting-dropzone.dragover {
    border-color: #00859c;
}

.component__upload-cloud {
    width: 100px;
    height: auto;
}

.component__upload-dropzone.dragover {
    border-color: #00859c;
}

.component__footer__titles {
    font-family: 'lato', Arial, Helvetica, sans-serif;
    font-size: 21px;
    margin-bottom: 6px;
    letter-spacing: 1px;
    font-weight: 800;
    color: #ffffff;
}

.component__footer__subtitles {
    font-size: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    opacity: 0.8;
    line-height: 1.5;
}

.component__footer__terms-and-conditions {
    font-size: 12px;
    opacity: 0.5;
}

.component__map {
    width: 90%;
    height: 400px;
}

.component__customerhub {
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.component__chart-main {
    width: 100% !important;
    height: 50% !important;
    display: inline-block !important;
}

.component__chart-padding-30px {
    padding-top: 30px;
}

.component__chart-float-left {
    float: left;
}

.component__chart-float-center {
    float: center;
}

.component__thumbnails-leading {
    position: relative;
    float: left;
    width: 100%;
}

.component__thumbnails__supporting-container {
    position: relative;
    float: left;
    width: 46%;
    margin-bottom: 6px;
    margin-left: 3px;
    margin-right: 3px;
}

.component__thumbnails__supporting-container-dialog {
    position: relative;
    float: left;
    width: 46%;
    margin: 2%;
}

.component__thumbnails-supporting {
    position: relative;
    float: left;
    width: 100%;
}

.component__forms-7 {
    width: calc(100% / 7 - 20px);
    margin-right: 20px;
    float: left;
    text-align: left;
}

.component__forms-6 {
    width: calc(100% / 6 - 20px);
    margin-right: 20px;
    float: left;
    text-align: left;
}

.component__forms-5 {
    width: calc(100% / 5 - 20px);
    margin-right: 20px;
    float: left;
    text-align: center;
}

.component__forms-4 {
    width: calc(100% / 4 - 20px);
    margin-right: 20px;
    float: left;
    text-align: left;
}

.component__forms-3 {
    width: calc(100% / 3 - 20px);
    margin-right: 10px;
    float: left;
    text-align: left;
}

.component__forms-3__border {
    width: calc(100% / 3 - 22px);
    margin-right: 20px;
    float: left;
    text-align: left;
}

.component__product-3 {
    width: calc(100% / 3 - 20px);
    margin: 10px;
    float: left;
    text-align: left;
    cursor: pointer;
}

.component__forms-2 {
    width: calc(100% / 2 - 25px);
    margin-right: 20px;
    float: left;
    text-align: left;
}

.component__200px__columns-2 {
    width: calc(100% / 2 - 40px);
    margin-right: 20px;
    float: left;
    text-align: left;
    height: 200px;
    /*padding: 30px 0px;*/
}

.component__columns-2 {
    width: calc(100% / 2 - 40px);
    margin-right: 20px;
    float: left;
    text-align: left;
    /*padding: 30px 0px;*/
}

.component__columns-2__no-padding {
    width: calc(100% / 2 - 10px);
    /*margin-right: 5px;*/
    float: left;
    text-align: left;
    /*padding: 30px 0px;*/
}

.component__columns-3 {
    width: calc(100% / 3);
    /*margin-right: 20px;*/
    float: left;
    /*text-align: left;*/
    /*padding: 30px 0px;*/
}

.component__columns-3__no-padding {
    width: calc(100% / 3 - 22px);
    float: left;
}

.component__columns-4 {
    width: calc(100% / 4);
    /*margin-right: 20px;*/
    float: left;
    /*text-align: left;*/
    /*padding: 30px 0px;*/
}

.component__columns-4__10px-padding {
    width: calc(100% / 4 - 20px);
    /*margin-right: 20px;*/
    float: left;
    /*text-align: left;*/
    padding: 0px 10px;
}

.component__columns-5 {
    width: calc(100% / 5);
    /*margin-right: 20px;*/
    float: left;
    /*text-align: left;*/
    /*padding: 30px 0px;*/
}

.component__columns-6 {
    width: calc(100% / 6 - 10px);
    /*margin-right: 20px;*/
    float: left;
    /*text-align: left;*/
    /*padding: 30px 0px;*/
}

.component__forms__fields {
    width: 100%;
    float: left;
    text-align: left;
    margin-bottom: 10px;
    /*color: #00859c;*/
}

.component__forms__fields__labels {
    width: 100%;
    float: left;
    text-align: left;
    margin: 5px 0px;
    overflow: hidden;
    color: #00859c;
}

.component__form__values {
    padding: 10px 0px 10px 0px;
}

.component__navigation-width {
    width: calc(100% / 8);
}

.component__basket-tab {
    font-size: 16px;
    font-weight: bold;
    float: left;
    text-align: left;
    background-color: #FFFFFF;
    padding: 20px 0px 11px 0px;
    color: #00859c;
    border-bottom: 4px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
    /*width: 200px;*/
    /*margin-bottom: 40px;*/
}

.component__basket-tab:hover {
    border-bottom: 4px solid #4dbbce;
}

.component__basket-tab:hover #dropdownBasket {
    /*background-color: #FFFFFF;*/
    display: block;
}

.component__basket-tab #dropdownBasket {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    height: auto;
    right: 15%;
    top: 65px;
    z-index: 1000;
    width: 250px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .16);
}

.component__navigation-tab {
    font-size: 16px;
    font-weight: bold;
    float: left;
    background-color: #FFFFFF;
    padding: 20px 0px 11px 0px;
    color: #00859c;
    border-bottom: 4px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
    /*margin-bottom: 40px;*/
}

.component__navigation-tab:hover {
    border-bottom: 4px solid #4dbbce;
}

/*#navigationProducts {*/
/*opacity: 0.0;*/
/*-webkit-transition: all 300ms ease-in-out;*/
/*-moz-transition: all 300ms ease-in-out;*/
/*-ms-transition: all 300ms ease-in-out;*/
/*-o-transition: all 300ms ease-in-out;*/
/*transition: all 300ms ease-in-out;*/
/*}*/

.component__navigation-tab:hover #dropdownProducts {
    /*background-color: #FFFFFF;*/
    display: block;
}

.component__navigation-tab #dropdownProducts {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    color: #575756;
    width: 40%;
    height: auto;
    left: 12%;
    top: 158px;
    padding: 30px;
    z-index: 1000;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .16);
}

.component__navigation-tab:hover #dropdownAccount {
    background-color: #FFFFFF;
    display: block;
}

.component__navigation-tab #dropdownAccount {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    width: 200px;
    height: auto;
    /*right: calc(0% + 20%);*/
    right: calc(10% + 150px + 82.97px);
    top: 70px;
    z-index: 1000;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .16);
}

.component__navigation-tab:hover #dropdownAdmin {
    background-color: #FFFFFF;
    display: block;
}

.component__navigation-tab #dropdownAdmin {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    right: 15%;
    top: 65px;
    z-index: 1000;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .16);
    overflow: auto;
    padding: 20px;
    width: 500px;
}

/*.component__im-new-btn-div {
    top: 0;
    width: 120px;
    right: 0;
    margin-top: 100px!important;
    margin-right: 50px!important;
}*/

.component__im-new-btn {
    background-color: #00859c;
    border-color: #00859c;
    font-weight: bold;
    font-size: 24px;
    color: #ffffff;
    height: 100px;
    width: 100px;
}

.component__im-new-btn img {
    margin-top: -10px;
    margin-left: -10px;
}

.component__im-new-btn:hover {
    background-color: #00859c;
    border-color: #00859c;
    color: #ffffff;
    cursor: auto;
}

.component__im-h3-steps {
    display: inline-block;
    position: relative;
    padding-left: 20px;
}

.component__im-footer {
    font-size: 12px;
    opacity: 0.5;
}

/*#dropdownProducts {*/
/*opacity: 0.0;*/
/*-webkit-transition: all 300ms ease-in-out;*/
/*-moz-transition: all 300ms ease-in-out;*/
/*-ms-transition: all 300ms ease-in-out;*/
/*-o-transition: all 300ms ease-in-out;*/
/*transition: all 300ms ease-in-out;*/
/*}*/

/* Links */
a:link {
    color: #ffffff;
    text-decoration: none;
}

a:visited {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

a:active {
    color: #ffffff;
    text-decoration: none;
}

a.link__colour-teal:link {
    color: #00859c;
    text-decoration: none;
}

a.link__colour-teal:visited {
    color: #00859c;
    text-decoration: none;
}

a.link__colour-teal:hover {
    color: #00859c;
    text-decoration: none;
}

a.link__colour-teal:active {
    color: #00859c;
    text-decoration: none;
}

a.link__colour-black:link {
    color: #575756;
}

a.link__colour-black:visited {
    color: #575756;
}

a.link__colour-black:hover {
    color: #575756;
}

a.link__colour-black:active {
    color: #575756;
}

a.link__colour-grey:link {
    color: #606266;
}

a.link__colour-grey:visited {
    color: #606266;
}

a.link__colour-grey:hover {
    color: #606266;
}

a.link__colour-grey:active {
    color: #606266;
}

a.link__colour-red:link {
    color: #e50051;
}

a.link__colour-red:visited {
    color: #e50051;
}

a.link__colour-red:hover {
    color: #e50051;
}

a.link__colour-red:active {
    color: #e50051;
}

/* Positioning */
.layout__position-left {
    float: left;
    overflow: hidden;
}

.layout__position-text-top {
    vertical-align: text-top;
}

.layout__position-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.d-flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.layout__position-top {
    vertical-align: top;
}

.p-0 {
    padding: 0 !important;
}

.fs-0 {
    flex-shrink: 0;
}

.layout__position-center {
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
}

.layout__position-right {
    float: right;
    overflow: hidden;
}

.layout__position__absolute {
    position: absolute;
}

.layout__position__relative {
    position: relative;
}

.layout__overflow-hidden {
    overflow: hidden;
}

.layout__display-inline-block {
    display: inline-block;
}

.layout__position-top-minus-5 {
    top: -5px;
}

.layout__position-top-minus-10 {
    top: -10px;
}

/* widths */
.layout__width-5 {
    width: 5%;
}

.layout__width-10 {
    width: 10%;
}

.layout__width-15 {
    width: 15%;
}

.layout__width-16 {
    width: 16%;
}

.layout__width-20 {
    width: 20%;
}

.layout__width-25 {
    width: 25%;
}

.layout__width-30 {
    width: 30%;
}

.layout__width-33 {
    width: 33%;
}

.layout__width-35 {
    width: 35%;
}

.layout__width-40 {
    width: 40%;
}

.layout__width-48 {
    width: 48%;
}

.layout__width-50 {
    width: 50%;
}

.layout__width-55 {
    width: 55%;
}

.layout__width-58 {
    width: 58%;
}

.layout__width-60 {
    width: 60%;
}

.layout__width-65 {
    width: 65%;
}

.layout__width-70 {
    width: 70%;
}

.layout__width-75 {
    width: 75%;
}

.layout__width-80 {
    width: 80%;
}

.layout__width-85 {
    width: 85%;
}

.layout__width-90 {
    width: 90%;
}

.layout__width-95 {
    width: 95%;
}

.layout__width-100 {
    width: 100%;
}

.layout__width-100-minus-20px {
    width: calc(100% - 20px);
}

.layout__width-100-minus-400px {
    width: calc(100% - 400px);
}

.layout__width-200-minus-20px {
    width: calc(200% - 20px);
}

.layout__width-20px {
    width: 20px;
}

.layout__width-30px {
    width: 30px;
}

.layout__width-35px {
    width: 35px;
}

.layout__width-40px {
    width: 40px;
}

.layout__width-45px {
    width: 45px;
}

.layout__width-50px {
    width: 50px;
}

.layout__width-60px {
    width: 60px;
}

.layout__width-70px {
    width: 70px;
}

.layout__width-75px {
    width: 75px;
}

.layout__width-100px {
    width: 100px;
}

.layout__width-126px {
    width: 126px;
}

.layout__width-150px {
    width: 150px;
}

.layout__width-170px {
    width: 170px;
}

.layout__width-200px {
    width: 200px;
}

.layout__width-230px {
    width: 230px;
}

.layout__width-250px {
    width: 250px;
}

.layout__width-300px {
    width: 300px;
}

.layout__width-350px {
    width: 350px;
}

.layout__width-370px {
    width: 370px;
}

.layout__width-400px {
    width: 400px;
}

.layout__width-460px {
    width: 460px;
}

.layout__width-500px {
    width: 500px;
}

.layout__width-600px {
    width: 600px;
}

.layout__width-700px {
    width: 700px;
}

.layout__width-800px {
    width: 800px;
}

.layout__width-900px {
    width: 900px;
}

.layout__width-1000px {
    width: 1000px;
}

.layout__width-1100px {
    width: 1100px;
}

.layout__width-1200px {
    width: 1200px;
}

.layout__width-1400px {
    width: 1400px;
}

.layout__max-width-250px {
    max-width: 250px;
}

/* heights */
.layout__height-auto {
    height: auto;
}

.layout__height-80 {
    height: 80%;
}

.layout__height-100 {
    height: 100%;
}

.layout__height-30px {
    height: 30px;
}

.layout__height-35px {
    height: 35px;
}

.layout__height-50px {
    height: 50px;
}

.layout__height-75px {
    height: 75px;
}

.layout__height-90px {
    height: 90px;
}

.layout__height-100px {
    height: 100px;
}

.layout__height-126px {
    height: 126px;
}

.layout__height-150px {
    height: 150px;
}

.layout__height-250px {
    height: 250px;
}

.layout__height-300px {
    height: 300px;
}

.layout__height-400px {
    height: 400px;
}

.layout__height-450px {
    height: 450px;
}

.layout__height-500px {
    height: 500px;
}

.layout__height-600px {
    max-height: 600px;
}

.layout__height-800px {
    height: 800px;
}

.layout__height-900px {
    height: 900px;
}

.layout__height-1000px {
    height: 1000px;
}

.layout__height-1300px {
    height: 1300px;
}

.layout__height-3040px {
    height: 3040px;
}

/* left */
.layout__left-minus-25px {
    left: -25px;
}

/* sticky */
.layout__position-sticky-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.layout__position-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
}

/*.test*/
/*{*/
/*position:fixed;*/
/*right:50px;*/
/*top:150px;*/
/*}*/

.rifatimagetest {
    /*width: 200px;*/
    /*height: 100px;*/
    background-position: center;
    /* Make the background image cover the area of the <div>, and clip the excess */
    background-size: cover;
}

/* Scrolling */
.layout__scrolling__right {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Padding top right bottom left*/
.layout__padding-clear {
    clear: both;
    margin: 0 auto;
}

.layout__padding-10px {
    padding: 10px;
}

.layout__padding-20px {
    padding: 20px;
}

.layout__padding__top-25 {
    padding-top: 2.5%;
}

.layout__padding__top-0px {
    padding-top: 0px;
}

.layout__padding__top-5px {
    padding-top: 5px;
}

.layout__padding__top-6px {
    padding-top: 6px;
}

.layout__padding__top-10px {
    padding-top: 10px;
}

.layout__padding__top-20px {
    padding-top: 20px !important;
}

.layout__padding__top-25px {
    padding-top: 25px;
}

.layout__padding__top-30px {
    padding-top: 30px !important;
}

.layout__padding__top-40px {
    padding-top: 40px;
}

.layout__padding__top-50px {
    padding-top: 50px;
}

.layout__padding__top-70px {
    padding-top: 70px;
}

.layout__padding__top-100px {
    padding-top: 100px;
}

.layout__padding__top-200px {
    padding-top: 200px;
}

.layout__padding-100-0 {
    padding: 100px 0px;
}

.layout__padding__bottom-6px {
    padding-bottom: 6px;
}

.layout__padding__bottom-20px {
    padding-bottom: 20px;
}

.layout__padding__left-10px {
    padding-left: 10px;
}

.layout__padding__left-20px {
    padding-left: 20px;
}

.layout__padding__left-40px {
    padding-left: 40px;
}

.layout__padding__left-50px {
    padding-left: 50px;
}

.layout__padding__right-2 {
    padding-right: 2%;
}

.layout__padding__right-20px {
    padding-right: 20px;
}

.layout__padding__right-25px {
    padding-right: 25px;
}

.layout__padding-10px {
    padding: 10px;
}

.layout__padding-10px-0 {
    padding: 10px 0px;
}

.layout__padding-20px {
    padding: 20px;
}

.layout__padding-20px-0 {
    padding: 20px 0px;
}

.layout__padding-2 {
    padding: 2%;
}

.layout__padding-4 {
    padding: 4%;
}

.layout__padding-5-15 {
    padding: 15%;
}

.layout__padding-20 {
    padding: 20%;
}

.layout__padding-0-20-40-20 {
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 40%;
}

.layout__padding__right-2 {
    padding-right: 2%;
}

.layout__padding__right-5 {
    padding-right: 5%;
}

.layout__padding__right-10px {
    padding-right: 10px;
}

.layout__padding__right-30px {
    padding-right: 30px;
}

.layout__padding__right-60px {
    padding-right: 60px;
}

.layout__padding-5 {
    padding: 5px;
}

.layout__padding-2-0 {
    padding: 2px 0;
}

.layout__padding-5-0 {
    padding: 5px 0;
}

.layout__padding-8-0 {
    padding: 8px 0;
}

.layout__padding__top-8 {
    padding-top: 8px;
}

.layout__padding-5-10 {
    padding: 5px 10px;
}

.layout__padding-15-0 {
    padding: 15px 0;
}

.layout__padding-20-0 {
    padding: 20px 0;
}

.layout__padding-50-0 {
    padding: 50px 0;
}

.layout__padding-20-0-40-0 {
    padding: 20px 0 40px 0;
}

.layout__padding-10-4 {
    padding: 10px 4%;
}

.layout__padding-10-2 {
    padding: 10px 2%;
}

.layout__padding-5px {
    padding: 10px;
}

.layout__padding-0-3 {
    padding: 0 3%;
}

.layout__padding__right-5 {
    padding-right: 5%;
}

.layout__padding-margin-0 {
    padding: 0;
    margin: 0;
}

.layout__padding-2-2 {
    padding: 2% 2%;
}

.layout__padding-2-4 {
    padding: 2% 4%;
}

.layout__padding-2-5 {
    padding: 2% 5%;
}

.layout__padding-2-0 {
    padding: 2% 0;
}

.layout__padding-25-0 {
    padding: 25px 0;
}

.layout__padding__bottom-20 {
    padding-bottom: 20px;
}

.layout__padding__bottom-10px {
    padding-bottom: 10px;
}

.layout__padding__bottom-25px {
    padding-bottom: 25px;
}

.layout__padding-30-10 {
    padding: 30px 10px;
}

.layout__padding-60px-0 {
    padding: 60px 0;
}

.layout__padding-40px-0 {
    padding: 40px 0;
}

.layout__padding-30px {
    padding: 30px;
}

.layout__padding-0-20 {
    padding: 0 20px;
}

.layout__padding-0-10 {
    padding: 0 10px;
}

.layout__padding-5px-20px {
    padding: 5px 20px;
}

.layout__padding-0-40px {
    padding: 0 40px;
}

.layout__padding-0-50px {
    padding: 0 50px;
}

.layout__padding-20px-40px {
    padding: 20px 40px;
}

/* Margin */

.layout__margin-8-0 {
    margin: 8px 0;
}

.layout__margin-10-0 {
    margin: 10px 0;
}

.layout__margin-20-0 {
    margin: 20px 0;
}

.layout__margin-40-0 {
    margin: 40px 0;
}

.layout__margin__top-2 {
    margin-top: 2%;
}

.layout__margin-20px {
    margin: 20px;
}

.layout__margin__top-4 {
    margin-top: 4px;
}

.layout__margin__top-15p {
    margin-top: 15%;
}

.layout__margin__top-10 {
    margin-top: 10px;
}

.layout__margin__top-20 {
    margin-top: 20px;
}

.layout__margin__top-30 {
    margin-top: 30px;
}

.layout__margin__top-40 {
    margin-top: 40px;
}

.layout__margin__top-50 {
    margin-top: 50px;
}

.layout__margin__top-30px-10px {
    margin-top: 30px;
    margin-bottom: 10px;
}

.layout__margin__bottom-6 {
    margin-bottom: 6px;
}

.layout__margin__bottom-10 {
    margin-bottom: 10px;
}

.layout__margin__bottom-20 {
    margin-bottom: 20px;
}

.layout__margin__top-20px {
    margin-top: 20px;
}

.layout__margin__bottom-25px {
    margin-bottom: 25px;
}

.layout__margin__bottom-30 {
    margin-bottom: 30px;
}

.layout__margin__bottom-40 {
    margin-bottom: 40px;
}

.layout__margin__left-minus-40 {
    margin-left: -40px;
}

.layout__margin__left-50 {
    margin-left: 50px;
}

.layout__margin-10-0 {
    margin: 10px 0;
}

.layout__margin-15-0 {
    margin: 15px 0;
}

.layout__margin-15 {
    margin: 15px;
}

.layout__margin-15-0-20-0 {
    margin: 15px 0 20px 0;
}

.layout__margin-25-0 {
    margin: 25px 0;
}

.layout__margin-30-0 {
    margin: 30px 0;
}

.layout__margin-2-05 {
    margin: 2% 0.5%;
}

.layout__margin-0-20 {
    margin: 0 20px;
}

.layout__margin-0-10 {
    margin: 0 10px;
}

.layout__margin-0-5 {
    margin: 0 5px;
}

.layout__margin-60-0 {
    margin: 60px 0;
}

.layout__margin__top__bottom-60 {
    margin-top: 60px;
    margin-bottom: 60px;
}

.layout__margin__top-60 {
    margin-top: 60px;
}

.layout__margin-0-5 {
    margin: 0 5px;
}

.layout__margin__right-2 {
    margin-right: 2%;
}

.layout__margin__right-10px {
    margin-right: 10px;
}

.layout__margin__right-20px {
    margin-right: 20px;
}

.layout__margin__right-40px {
    margin-right: 40px;
}

.layout__margin__right-150px {
    margin-right: 150px;
}


.layout__margin__right-280px {
    margin-right: 280px;
}

.layout__margin-10px-10px-10px-0px {
    margin: 10px 10px 10px 0px;
}

/* Border */
.layout__border__none {
    border: none;
}

.layout__border__all-1px {
    border: 1px solid #000000;
}

.layout__border__all-2px-f4f4f4 {
    border: 2px solid #f4f4f4;
}

.layout__border__top-1px-white {
    border-top: 1px solid #FFFFFF;
}

.layout__border__all-1px-grey {
    border: 1px solid #e4e4e4;
}

.layout__border__all-1px-teal {
    border: 1px solid #4dbbce;
}

.layout__border__all-2px-grey {
    border: 2px solid #e4e4e4;
}

.layout__border__all-1px-dashed {
    border: 1px dashed #000000;
}

.layout__border__right-1px {
    border-right: thin solid #000000;
}

.layout__border__top-1px {
    border-top: 1px dotted #4dbbce;
}

.layout__border-2px-red {
    border: 2px solid #e50051;
}

.layout__border__top-bottom-2px {
    border-top: 2px solid #cdcfd1;
    border-bottom: 2px solid #cdcfd1;
}

.layout__border__top-1px-909399 {
    border-top: 1px dotted #cdcfd1;
}

.layout__border__top-2px-909399 {
    border-top: 2px dotted #cdcfd1;
}

/* admin borders */

.layout__border__right-1px-dotted-cdcfd1 {
    border-right: 1px dotted #cdcfd1;
}

.layout__border__bottom-1px-dotted-cdcfd1 {
    border-bottom: 1px dotted #cdcfd1;
}

.layout__border__left-1px-dotted-cdcfd1 {
    border-left: 1px dotted #cdcfd1;
}

.layout__border__top-1px-dotted-cdcfd1 {
    border-top: 1px dotted #cdcfd1;
}

.layout__border__all-1px-dotted-cdcfd1 {
    border: 1px dotted #cdcfd1;
}

.layout__border__right-1px {
    border-right: 1px solid #cdcfd1;
}

.layout__border__left-1px {
    border-left: 1px solid #cdcfd1;
}

.layout__border__right {
    border-right: 1px solid #ccc;
}

.layout__border__top-teal {
    border-top: 2px solid #4dbbce;
}

.layout__border__bottom-light-teal-1px {
    border-bottom: 1px solid #4dbbce;
}

.layout__border__bottom-light-teal {
    border-bottom: 2px solid #4dbbce;
}

.layout__border__bottom-teal {
    border-bottom: 2px solid #00859c;
}

.layout__border__bottom {
    border-bottom: 1px solid #ccc;
}

.layout__border__bottom__top {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    /*margin: 60px 0;*/
    padding: 20px 0px;
}

.layout__border__bottom-none {
    border-bottom: 0px !important;
}

/* word break */
.layout__break-word {
    word-break: break-word !important;
}

/* visibility */
.is__hidden-desktop {
    display: none;
}

.is__visible-desktop {
    display: block;
}

.layout__display-block {
    display: block;
}

.layout__display-none {
    display: none;
}

/* display */
.layout__display-flex {
    display: flex;
}

/* Texts */
.text__align-left {
    text-align: left !important;
}

.text__align-center {
    text-align: center !important;
}

.text__align-right {
    text-align: right !important;
}

.text__direction-left-to-right {
    text-align: left;
    direction: ltr !important;
}

.text__wordwrap {
    white-space: nowrap;
}

.text__transform-caps {
    text-transform: capitalize;
}

.text__transform-upper {
    text-transform: uppercase;
}

.text__white_space-pre {
    white-space: pre;
}


.text__white_space-normal {
    white-space: normal;
}

.text__white_space-pre-line {
    white-space: pre-line;
}

.text__truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text__colour-pink {
    color: #e084a2;
}

.text__break-word {
    word-break: break-word;
}

.text__colour-red {
    color: #e50051;
}

.text__colour-green {
    color: #32CD32;
}

.text__colour-light-teal {
    color: #4dbbce;
}

.text__colour-teal {
    color: #00859c;
}

.text__colour-teal-important {
    color: #00859c !important;
}

.text__colour-black {
    color: #000000;
}

.text__colour-grey {
    color: #606266;
}

.text__colour-light-grey {
    color: #f7f8fa;
}

.text_colour-909399 {
    color: #909399;
}

.text__colour-white {
    color: #ffffff;
}

.text__colour-a6667b {
    color: #a6667b;
}

.text__colour-ee2321 {
    color: #ee2321;
}

.zoom {
    transition: transform .4s; /* Animation */
    margin: 0 auto;
}

.zoom:hover {
    transform: scale(3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/*el-message*/
.rifat-test-transition {
    color: #000000;
    /*min-width: 380px;*/
    width: 600px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ee2321;
    position: fixed;
    left: 50%;
    top: 40px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #ffffff;
    /*-webkit-transition: opacity .3s,top .4s,-webkit-transform .4s;*/
    /*transition: opacity .3s,top .4s,-webkit-transform .4s;*/
    /*transition: opacity .3s,transform .4s,top .4s;*/
    /*transition: opacity .3s,transform .4s,top .4s,-webkit-transform .4s;*/
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 20px 20px 0 rgba(0, 0, 0, 0.19);
}

/* text size */
h1 {
    font-size: 40px;
}

h2 {
    font-family: 'lato', Arial, Helvetica, sans-serif;
    font-size: 36px;
    margin-bottom: 5px;
    /*letter-spacing: 1px;*/
    font-weight: bolder;
}

h3 {
    font-family: 'lato', Arial, Helvetica, sans-serif;
    font-size: 21px;
    margin-bottom: 5px;
}

h4 {
    font-family: 'lato', Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-bottom: 6px;
    /*letter-spacing: 1px;*/
}

p {
    font-size: 16px;
    color: #575756;
}

.text__size-8 {
    font-size: 8px;
}

.text__size-10 {
    font-size: 10px;
}

.text__size-12 {
    font-size: 12px;
}

.text__size-14 {
    font-size: 14px;
    white-space: pre-line;
}

.text__size-14__no-preline {
    font-size: 14px;
}

.text__size-15 {
    font-size: 15px;
}

.text__size-16 {
    font-size: 16px;
}

.text__size-16-important {
    font-size: 16px !important;
}

.text__size-18 {
    font-size: 18px;
}

.text__size-20 {
    font-size: 20px;
}

.text__size-21 {
    font-size: 21px;
}

.text__size-22 {
    font-size: 22px;
}

.text__size-24 {
    font-size: 24px;
}

.text__size-30 {
    font-size: 30px;
}

.text__size-36 {
    font-size: 36px;
}

.text__size-45 {
    font-size: 45px;
}

.text__size-50 {
    font-size: 50px;
}

.text__size-60 {
    font-size: 60px;
}

.text__size-70 {
    font-size: 70px;
}

.text__size-80 {
    font-size: 80px;
}

.text__size-90 {
    font-size: 90px;
}

.text__size-06vw {
    font-size: 0.6vw;
}

.text__line-height-13 {
    line-height: 1.3;
}

.text__line-height-14 {
    line-height: 1.4;
}

.text__line-height-15 {
    line-height: 1.5;
}

.text__line-height-2 {
    line-height: 2;
}

.text__line-height-3 {
    line-height: 3;
}

.text__line-height-20px {
    line-height: 20px;
}

.text__line-height-30px {
    line-height: 30px;
}

.text__style-italics {
    font-style: italic;
}

.text__style-bold {
    font-weight: bold;
}

.text__style-bold-700 {
    font-weight: 700;
}

.text__style-bold-900 {
    font-weight: 900;
}

/* Opacity */
.layout__opacity-05 {
    opacity: 0.5;
}

.layout__opacity-08 {
    opacity: 0.8;
}

.layout__opacity-1 {
    opacity: 1;
}

/* border radius */
.layout__border__radius-3 {
    border-radius: 3px;
}

.layout__border__radius-10 {
    border-radius: 10px;
}

.layout__border__radius__top-20 {
    border-radius: 20px 20px 0px 0px;
}

.layout__border__radius__bottom-20 {
    border-radius: 0px 0px 20px 20px;
}

/* Buttons */
button[type=button] {
    text-align: center;
    /*background-color: #FFFFFF;*/
}

.button__base {
    border-radius: 3px;
    /*min-width: 150px;*/
    font-size: 14px;
    padding: 10px 10px;
}

.button__base__admin {
    border-radius: 3px;
    min-width: 150px;
    font-size: 12px;
    padding: 6px 20px;
}

.button__base__header {
    border-radius: 30px;
    min-width: 100px;
    font-size: 12px;
    padding: 10px 15px;
}

.button__base__header-large {
    border-radius: 3px;
    min-width: 100px;
    font-size: 16px;
    padding: 15px 30px;
    color: #FFFFFF;
}

/* Button Red */
.button-red, .button-red:visited, .button-red:focus, .button-red:active {
    color: #e50051;
    border: thin solid #e50051;
    background-color: transparent;
}

.button-red:hover {
    background-color: #e50051;
    color: #FFFFFF;
    border-color: #e50051;
}

/* Button Red IMA*/
.button-red-ima, .button-red-ima:visited, .button-red-ima:focus, .button-red-ima:active {
    color: #FFFFFF;
    border: thin solid #FFFFFF;
    background-color: #e50051;
}

.button-red-ima:hover {
    background-color: #FFFFFF;
    color: #e50051;
    border-color: #FFFFFF;
}

/* Button Teal */
.button-teal, .button-teal:visited, .button-teal:focus, .button-teal:active {
    color: #4dbbce;
    border: thin solid #4dbbce;
    background-color: #FFFFFF;
}

.button-teal:hover {
    background-color: #4dbbce;
    color: #FFFFFF;
    border-color: #4dbbce;
}

.button-dark-teal, .button-dark-teal:visited, .button-dark-teal:active {
    color: #00859c;
    border: thin solid #00859c;
    background-color: #FFFFFF;
}

.button-dark-teal:hover, .button-dark-teal:focus {
    background-color: #00859c;
    color: #FFFFFF;
    border-color: #00859c;
}

.button-white-grey, .button-white-grey:visited, .button-white-grey:focus {
    color: #FFFFFF;
    border: thin solid #FFFFFF;
    background-color: #00859c;
}

.button-white-grey:active, .button-white-grey:hover {
    background-color: #FFFFFF;
    color: #00859c;
    border-color: #FFFFFF;
}

/* Button Background White */
.button__background-white, .button__background-white:visited, .button__background-white:focus, .button__background-white:active {
    background-color: #00859c;
    color: #FFFFFF;
    border-color: #00859c;
}

.button__background-white:hover {
    background-color: #FFFFFF;
    color: #00859c;
    border-color: #00859c;
}

/* Button Background Red */
.button__background-red, .button__background-red:visited, .button__background-red:focus, .button__background-red:active {
    background-color: #e50051;
    color: #FFFFFF;
    border-color: #ffffff;

    transition: all .3s ease-out;
}

.button__background-red.preserve-bg:hover {
    background-color: #e50051;
    color: #FFFFFF;
    border-color: #ffffff;

    opacity: 0.7;
}

.button__background-red:not(.preserve-bg):hover {
    background-color: #FFFFFF;
    color: #e50051;
    border-color: #ffffff;
}

.button__background-red-border, .button__background-red-border:visited, .button__background-red-border:focus, .button__background-red-border:active {
    background-color: #e50051;
    color: #FFFFFF;
    border-color: #ffffff;
}

.button__background-red-border:hover {
    background-color: #FFFFFF;
    color: #e50051;
    border-color: #e50051;
    cursor: pointer;
}

/* Button Background Tickled Pink */
.button__background-tickled-pink, .button__background-tickled-pink:visited, .button__background-tickled-pink:focus, .button__background-tickled-pink:active {
    background-color: #f176a3;
    color: #FFFFFF;
    border-color: #f176a3;
}

.button__background-tickled-pink:hover {
    background-color: #FFFFFF;
    color: #f176a3;
    border-color: #f176a3;
    cursor: pointer;
}

.button-tickled-pink, .button-tickled-pink:visited, .button-tickled-pink:focus, .button-tickled-pink:active {
    color: #f176a3;
    border: thin solid #f176a3;
    background-color: transparent;
}

.button-tickled-pink:hover {
    background-color: #f176a3;
    color: #FFFFFF;
    border-color: #f176a3;
}

.button__promo {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.button__promo.artwork-preview {
    right: 2.5%;
    top: 20px;
}

.button__promo.checkout {
    right: -80px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.button__promo.account {
    right: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.button__promo.photofixr-checkout {
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.button__promo.selections {
    position: static;
    margin-left: -260px;
    margin-right: 60px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.button__insights {
    display: block;
    float: left;
    margin-top: 37px;
    margin-left: 50px !important;
}

.button__branches {
    display: block;
    float: left;
    margin-top: 37px;
}

.button__download {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Background Colours */
.colour__background-white {
    background-color: #FFFFFF !important;
}

.colour__background__grey-f7f8fa {
    background-color: #f7f8fa;
}

.colour__background__grey-262636 {
    background-color: #262636;
}

.colour__background-light-grey {
    background-color: #f7f8fa;
}

.colour__background-grey {
    background-color: #e4e4e4;
}

.colour__background-teal {
    background-color: #00859c;
}

.colour__background-light-teal {
    background-color: #4dbbce;
}

.colour__background-b7e3eb {
    background-color: #b7e3eb;
}

.colour__background-red {
    background-color: #e50051;
}

.colour__background-pink {
    background-color: #e084a2;
}

.colour__background-lightest-grey {
    background-color: #f5f6f9;
}

.colour__background-dark-grey {
    background-color: #d6d5d5;
    color: #575756;
}

.colour__background-F5F7F7 {
    background-color: #F5F7F7;
}

.colour__background-DCDFE7 {
    background-color: #DCDFE7;
}

.colour__background-30516A {
    background-color: #30516A;
}

.colour__background-transparent {
    background-color: transparent !important;
}

.colour__border-red {
    border-color: #e50051;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

/* Lists */
ul {
    list-style-type: none;
}

li {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1;
    /*padding-top: 8px;*/
    /*padding-bottom: 8px;*/
    /* todo need to see if the padding can be removed */
}

/* Inputs */
input[type=text] {
    box-sizing: border-box;
}

input[type=textarea] {
    padding: 2px 10px;
    margin: 8px 0;
    display: inline-block;
    border: thick solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: calc(14px);
}

input[type=textarea]:focus {
    border: 3px solid #555;
}

input[type=email] {
    box-sizing: border-box;
    -webkit-appearance: none;
    background: #FFFFFF none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

input[type=email]:focus {
    border-color: #409EFF;
    outline: 0;
}

/* Shadows */
.layout__shadow-white {
    background-color: #FFFFFF;
    padding: 20px 40px 40px 40px;
    margin-right: 2%;
    margin-bottom: 40px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .16);
}

.layout__shadow-box {
    background-color: white;
    /*width: 26%;*/
    /*float: right;*/
    padding: 5px 1%;
    margin-right: 0%;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;
    visibility: visible;
}

/* el-badge */
.el-badge__content.is-fixed {
    position: absolute;
    top: 25px;
    right: 8px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
}

.el-badge__content {
    background-color: #e50051;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
}

/* el-step */
.el-step__head.is-finish {
    color: #00859c;
}

.el-step__head.is-process {
    color: #00859c;
}

.el-step__head.is-wait {
    color: #c0c4cc;
}

.el-step__title.is-finish {
    color: #575756;
}

.el-step__title {
    /*font-size: 16px;*/
    line-height: 46px;
}

.el-step__head.is-finish {
    color: #00859c;
    border-color: #00859c;
}

.el-step__line {
    color: #00859c;
}

.el-step__icon.is-text.is-wait {
    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
    background-color: #c0c4cc;
}

.el-step__head.is-wait {
    color: #c0c4cc;
    border-color: #c0c4cc;
}

/* el-switch */
.el-switch__label.is-active {
    color: #00859c;
}

.el-switch__label * {
    line-height: 1;
    font-size: 12px;
    display: inline-block;
}

/* el-form items */
.el-form-item {
    padding: 0;
    /*margin: 0;*/
    margin-bottom: 10px;
}

.el-form-item__content {
    /*margin-bottom: 10px;*/
    text-align: left;
    line-height: initial;
}

.el-form-item__error {
    padding: 0%;
    margin: 0%;
    position: absolute;
    top: 100%;
    right: 0;
    left: unset;
}

/* el-input */
.el-input {
    padding-top: 0px;
}

.layout__border__all-2px-red {
    border: 2px solid #ff0000;
    border-radius: 5px;
}

.el-input.is-disabled .el-input__inner {
    /*background-color: #fcfcfd;*/
    /*border: 2px solid #fcfcfd;*/
    color: #575756;
    cursor: not-allowed;
}

.el-input__inner {
    -webkit-appearance: none;
    background: #FFFFFF none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 35px;
    line-height: 35px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}

.el-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 32px;
}

/* el-input-number */
.el-input-number {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 33px;
}

/* el-menu */
.el-menu.el-menu--horizontal {
    border: none;
}

.el-submenu .el-menu-item {
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    min-width: 200px;
}

.el-menu-item, .el-submenu__title {
    height: 50px;
    line-height: 50px;
    list-style: none;
}

/* custom el-dialog */
.component__dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*padding: 100px;*/
    opacity: 0.8;
    background-color: black;
}

.component__dialog-body {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    /*padding: 100px;*/
    background-color: black;
}

/* el-dialog */
.el-dialog__headerbtn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 24px;
    margin: 0 auto;
}

.el-dialog {
    border-radius: 15px;
    align-items: center;
    /*height: 620px;*/
    /*width: 600px;*/
    /*margin: 50px auto 50px auto !important;*/
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 20px 20px 0 rgba(0, 0, 0, 0.19);
}


.el-dropdown-menu {
    padding: 0 auto;
    margin: 0;
}


/* el-select */
.el-select {
    width: 100%;
}

/* el-date */
.el-date-editor {
    width: 100%;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
}

.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: 100%;
}

/* el-checkboxes */
.el-checkbox__input {
    height: 10px;
    width: 10px;

}

.el-checkbox__inner {
    border-radius: 10px;
    border-color: #bdbdbd;
    padding: 0;
    line-height: 2;
}

.el-checkbox {
    width: 100%;
    padding-top: 5px;
    border-bottom: thin dotted #999999;
    direction: rtl;
    line-height: 2;
}

.el-checkbox__label {
    text-align: left;
    line-height: 2;
}

.el-checkbox__fill {
    color: #00859c;
}

/* el-checkboxes */
.el-checkbox__input {
    height: 10px;
    width: 10px;
    margin-bottom: 10px;
}

.el-checkbox__inner {
    border-radius: 10px;
    border-color: #bdbdbd;
    line-height: 2;
    height: 170%;
    width: 170%;
}

/*.el-checkbox {*/
/*!*width: 98%;*!*/
/*border-bottom: thin dotted #999999;*/
/*direction: rtl;*/
/*line-height: 2;*/
/*}*/

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate {
    border-color: #00859c;
    background-color: #00859c;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #575756;
}

.el-checkbox__label {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: calc(15px);
    padding-left: 0px;
}

.el-checkbox__inner::after {
    padding-top: 2px;
    padding-left: 2px;
}

.el-checkbox__label {
    text-align: left;
    width: 95%;
    line-height: 2;
}

.el-checkbox__fill {
    color: #00859c;
}

/* el-card */
.el-card {
    margin: 10px 10px;
}

.el-card__body {
    padding: 0px;
}

.el-card.is-hover-shadow:hover {
    -webkit-box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .3);
}

/* el-loading */
.el-loading-spinner i {
    color: #00859c;
    font-size: 150px;
}

.el-loading-spinner .el-loading-text {
    color: #00859c;
    margin: 3px 0;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

/* Cursors */
.layout__cursor-pointer {
    cursor: pointer;
}

.layout__margin__left {
    margin-left: 30px;
}

/* el-carousel */
.el-carousel__mask, .el-cascader-menu, .el-cascader-menu__item.is-disabled:hover {
    color: #00859c;
    background: transparent;
}

.el-carousel__arrow--left {
    left: 0px;
}

.el-carousel__item {
    /*width: 60%;*/
    display: inline-block;
    overflow: visible;
    z-index: 0;
}

.el-carousel__arrow--right {
    right: 0px;
}

.el-carousel__arrow {
    font-size: 22px;
    font-weight: 900;
}

.el-carousel__arrow {
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    height: 36px;
    width: 36px;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s;
    border-radius: 50%;
    background-color: rgba(31, 45, 61, .11);
    color: inherit;
    position: absolute;
    top: 50%;
    z-index: 10;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    font-size: 16px;
}

/* chat bot */
.u-userLauncherColor {
    box-shadow: none;
    background-color: #e50051 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-radius: 0px;
!important;
}

.u-userLauncherColor:not([disabled]) {
    box-shadow: none;
    background-color: #e50051 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    border-radius: 0px;
}

.src-component-launcher-WidgetLauncher-wrapper {
    font-size: 1rem;
    color: #fff;
    fill: #fff;
    letter-spacing: 0.4;
    padding: .92857rem 1.57143rem;
    border-radius: 0px;
    bottom: 0;
    letter-spacing: 0.6;
    font-size: 1.07143rem;
}

/* el-breadcrumbs */
.el-breadcrumb {
    cursor: pointer;
}

.el-breadcrumb__separator[class*=icon] {
    margin: 0 16px;
    font-weight: 400;
    color: black;
}

/* el-collapse */
.el-collapse-item {
    background-color: transparent;
    border: none;
}

.el-collapse {
    background-color: transparent;
    border: none;
}

.el-collapse-item__wrap {
    border: none;
}

.el-collapse-item__header {
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #EBEEF5;

}

/* el-button */
.el-button + .el-button {
    margin-left: 0px;
}

.el-button__keep-all {
    word-break: keep-all !important;
}

.el-button__09vh {
    font-size: 0.9vh !important;
}

/* el-radio */
.el-radio {
    width: 98%;
    padding-top: 3%;
    border-bottom: thin dotted #999999;
    direction: rtl;
}

.el-radio-button {
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: inline-block;
}

.el-radio-group {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-size: 0;
}

.el-radio-button:last-child .el-radio-button__inner, .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 4px 4px 4px 4px;
    border-left: none;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner, .el-radio-button__orig-radio:hover + .el-radio-button__inner {
    color: #00859c;
    background-color: #f7f8fa;
    border: 1px solid #4dbbce;
    /*-webkit-box-shadow: -1px 0 0 0 #f4f4f4;*/
    /*box-shadow: -1px 0 0 0 #f4f4f4;*/
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #00859c;
    /*background-color: #409EFF;*/
    /*border-color: #409EFF;*/
    /* -webkit-box-shadow: -1px 0 0 0 #409EFF; */
    /* box-shadow: -1px 0 0 0 #409EFF; */
}

.el-radio-button__inner {
    border: inherit;
    color: #00859c;
    padding: 12px 3px;
!important;
    width: 100%;
    font-size: 16px;
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #00859c;
    background: #00859c;
}

.el-radio__inner::after {
    width: 6px;
    height: 6px;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform .15s ease-in;
    transition: -webkit-transform .15s ease-in;
    transition: transform .15s ease-in;
    transition: transform .15s ease-in, -webkit-transform .15s ease-in;
}

/* twenty twenty slider */
.twentytwenty-container .twentytwenty-overlay {
    background: rgba(0, 0, 0, 0);
}

.twentytwenty-container .twentytwenty-overlay:hover {
    opacity: 0;
}

.twentytwenty-container .twentytwenty-overlay {
    display: none;
}

/* vue carousel */
.VueCarousel-pagination {
    width: 100%;
    text-align: center;
    margin-top: -60px;
    z-index: 1000;
    outline: 0px solid transparent;
!important;
}

.VueCarousel-dot:focus .VueCarousel-dot .VueCarousel-dot--active {
    outline: 0px solid transparent;
!important;
}

.VueCarousel-dot {
    display: inline-block;
    cursor: pointer;
    appearance: none;
    border: none;
    background-clip: content-box;
    box-sizing: content-box;
    padding: 0;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    outline: 0px solid transparent;
}

/* el-tabs */

/*.el-tabs__item {*/
/*padding-top: 0.5%;*/
/*height: 50px;*/
/*text-align: center;*/
/*line-height: initial;*/
/*}*/

.el-tabs {
    /*padding-top: 20px;*/
    /*padding-bottom: 20px;*/
}

.el-tabs__item.is-active {
    background-color: #f1f1f1;
    color: black;
}

.el-tabs__item.is-disabled:hover {
    color: #c0c4cc;
    cursor: default;
}

.el-tabs__item:hover {
    color: black;
}

.el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #00859c;
    z-index: 1;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    list-style: none;
}

.el-tabs--left .el-tabs__item.is-left {
    text-align: center;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-disabled {
    color: #909399
}

.el-tabs--bottom .el-tabs--left .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card .el-tabs__item:nth-child(2) {
    padding-left: 5px;
}

.el-tabs__item {
    padding: 20px 5px;
    height: 230px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*line-height: 20px;*/
    /*display: inline-block;*/
    vertical-align: top;
    list-style: none;
    font-size: 14px;
    /*font-weight: 500;*/
    color: #303133;
    position: relative;
    text-align: center;
    margin-bottom: 1px;
    line-height: 25px;
}

.el-tabs--border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    /*width: 98%;*/
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    color: #00859c;
    background-color: #fff;
    border-right-color: #dcdfe6;
    border-left-color: #dcdfe6;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
    color: #00859c;
}

.el-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
    height: 230px;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    border: 1px solid transparent;
    margin: 1px -1px 0;
    color: #909399;
}

/* el-popover */
.el-popover {
    position: absolute;
    background: #fff;
    min-width: 150px;
    border: 1px solid #ebeef5;
    padding: 12px;
    z-index: 2000;
    color: #303133;
    line-height: 1.6;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.el-popover__title {
    color: #00859c;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 12px;
}

/* el-textarea */
.el-textarea.is-disabled .el-textarea__inner {
    color: #606266;
    cursor: not-allowed;
}

.el-textarea__inner {
    display: block;
    resize: vertical;
    padding: 2px 10px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

/* el-table */
.el-table__row:hover {
    cursor: pointer;
}

.el-table__row.current-row {
    background-color: #eee;
}

.el-table__summary-row {
    background-color: #f5f7fa;
}

.el-table-column__no-pointer {
    cursor: auto;
}

.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    line-height: 20px;
}

.el-table .cell, .el-table th div {
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
}

.el-table td, .el-table th {
    padding: 8px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}

.el-table__vertical-scrollbar {
    overflow-y: scroll;
}

.el-table__09vh {
    font-size: 0.9vh !important;
}

.el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
    padding-bottom: 15px;
}

/* Table */
table {
    border-collapse: collapse;
    width: 100%;
    padding: 0;
}

tr {
    width: 100%
}

td {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    width: 25%;
    vertical-align: top;
    padding: 20px 10px;
}

th {
    border-radius: 5px;
    text-align: center;
    background-color: #d3d3d3;
    height: 20px;
}

.no-hover > td {
    border-top-color: #4dbbce;
}

.no-hover:hover > td {
    background-color: initial !important;
}

/* icons */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
    url('../css/fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../css/fonts/lato-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'pf-glyphs';
    src: url('fonts/pf-glyphs.eot?9jdy3h');
    src: url('fonts/pf-glyphs.eot?9jdy3h#iefix') format('embedded-opentype'),
    url('fonts/pf-glyphs.ttf') format('ttf'),
    url('fonts/pf-glyphs.woff') format('woff'),
    url('fonts/pf-glyphs.svg') format('svg');

    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'pf-glyphs' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icons */

.icon-tick:before {
    content: "\ea10"
}

.icon-photofixr:before {
    content: "\e908"
}

.icon-step-circle:before {
    content: "\e922";
}

.icon-plus:before {
    content: "\ea0a";
}

.icon-promote:before {
    content: "\e809";
}

.icon-video:before {
    content: "\e914";
}

.icon-basket:before {
    content: "\e90a";
}

.icon-minus:before {
    content: "\ea0b";
}

.icon-search:before {
    content: "\e816";
}

.icon-arrow-right:before {
    content: "\e905";
}

.icon-info:before {
    content: "\e603";
}

.icon-brighten-circle:before {
    content: "\e91c";
}

.icon-sky-circle:before {
    content: "\e913";
}

.icon-vibrance-circle:before {
    content: "\e91a";
}

.icon-distortion-circle:before {
    content: "\e918";
}

.icon-add-grass-circle:before {
    content: "\e90d";
}

.icon-remove-circle:before {
    content: "\e923";
}

.icon-brighten:before {
    content: "\e91d";
}

.icon-sky:before {
    content: "\e915";
}

.icon-vibrance:before {
    content: "\e91b";
}

.icon-distortion:before {
    content: "\e919";
}

.icon-add-grass:before {
    content: "\e912";
}

.icon-remove:before {
    content: "\e924";
}

.icon-bin:before {
    content: "\e917";
}

.icon-bin-remove:before {
    content: "\e91e";
}

.icon-twitter:before {
    content: "\e814";
}

.icon-facebook:before {
    content: "\e81b";
}

.icon-admin:before {
    content: "\e805";
}

.icon-upload:before {
    content: "\e90f"
}

.icon-user:before {
    content: "\e802"
}

.icon-photofixr:before {
    content: "\e908"
}

.icon-basket:before {
    content: "\e911"
}

.icon-edit:before {
    content: "\e817"
}

.icon-error:before {
    content: "\e901"
}

.icon-basket:before {
    content: "\e90a"
}

.icon-alert:before {
    content: "\e921"
}

@media only screen and (max-width: 900px) {
    /* Visibility */
    .is__hidden-desktop {
        display: block;
    }

    .is__visible-desktop {
        display: none;
    }
}

@media screen and (max-width: 2050px) {
    .font-12-required {
        word-break: break-word;
        font-size: 12px;
    }

    .font-10-required {
        word-break: break-word;
        font-size: 10px;
    }
}

/* Insights specific */
.insights-table .el-table .cell, .el-table__empty-block {
    font-size: 12px;
}

.insights-table .el-table .caret-wrapper {
    display: block;
    height: 58px;
}

.insights-table .el-table .sort-caret {
    border-width: 11px;
}

.insights-table .el-table__scroll-div {
    width: calc(100% - 15px);
    height: 20px;
}

.insights-table .el-table__scroll-wrapper {
    width: calc(100% - 15px);
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

/* Heatmap */
#heatmap {
    width: 100%;
    height: 800px;
}

#heatmap-table .el-table__row {
    color: white;
}

#heatmap-table .el-table__row:hover {
    color: black;
}

#heatmap-table .el-table .colourScale-6 {
    background: #0063e5;
}

#heatmap-table .el-table .colourScale-5 {
    background: #294fbe;
}

#heatmap-table .el-table .colourScale-4 {
    background: #523c97;
}

#heatmap-table .el-table .colourScale-3 {
    background: #7c2871;
}

#heatmap-table .el-table .colourScale-2 {
    background: #a5154a;
}

#heatmap-table .el-table .colourScale-1 {
    background: #cf0224;
}

/* Credit application dialog */
.credit-application-dialog {
    width: 100%;
    max-width: 1100px;
    margin-top: 20px !important;
}

.credit-application-dialog > .el-dialog__body {
    padding-top: 0px !important;
}

/* Terms of Service dialog */
.terms-of-service .el-checkbox {
    direction: ltr;
    border-bottom: none;
}

.terms-of-service .el-checkbox a {
    color: #1976d2;
    cursor: pointer;
    text-decoration: underline;
}

.terms-of-service .el-checkbox__inner {
    height: 14px;
    width: 14px;
    border: 1px solid #DCDFE6;
    border-radius: 2px;
}

.terms-of-service .el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 14px;
}

.terms-of-service .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate {
    border-color: #409EFF;
    background-color: #409EFF;
}

.terms-of-service .el-checkbox__inner::after {
    padding-top: 0px;
    padding-left: 0px;
}


/* checkout.com */
#payment-form {
    width: 280px;
    margin: 0 auto;
}

.custom-label label {
    display: block;
    height: 10px;
    color: #13395e;
    font-size: 14px;
    font-weight: 500;
    line-height: 10px;
    margin: 8px 0;
}

.date-and-code {
    display: flex;
    margin-bottom: 8px;
}

.date-and-code > div:nth-child(1) {
    width: 55.715%;
}

.date-and-code > div:nth-child(2) {
    width: 45.719%;
}

.input-container {
    position: relative;
    display: flex;
    height: 40px;
}

.icon-container:last-child {
    right: 0;
}

.icon-container.payment-method {
    right: 0;
}

.input-container.card-number {
    margin-bottom: 8px;
}

.input-container.expiry-date {
    margin-right: 8px;
}

.card-number-frame,
.expiry-date-frame,
.cvv-frame {
    flex: 1 1 auto;
    padding-left: 40px;
}

div + button {
    margin-top: 8px;
}

.icon-container {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 26px;
    margin: 0 7px;
}

.icon-container.payment-method {
    transform: translateY(-50%) rotateY(90deg);
    transition: opacity 0.15s ease-out;
    opacity: 0;
    top: 50%;
}

.icon-container.payment-method.show {
    opacity: 1;
    transition: all 0.4s ease-out;
    transform: translateY(-50%) rotateY(0deg);
}

.icon-container.payment-method img {
    width: 100%;
}

[id$="-error"] {
    display: none;
}

.frame {
    opacity: 0;
}

.frame--activated {
    opacity: 1;
    border: solid 1px #13395e;
    border-radius: 3px;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2);
}

.frame--activated.frame--focus {
    border: solid 1px #13395e;
    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15);
}

.frame--activated.frame--invalid {
    border: solid 1px #d96830;
    box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15);
}

.error-message {
    display: block;
    color: #c9501c;
    font-size: 0.9rem;
    margin: 8px 0 0 1px;
    font-weight: 300;
}

#pay-button {
    border: none;
    border-radius: 3px;
    color: #fff;
    font-weight: 500;
    height: 40px;
    width: 100%;
    background-color: #13395e;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4);
    font-size: 18px;
    margin-top: 30px;
}

#pay-button:active {
    background-color: #0b2a49;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4);
}

#pay-button:hover {
    background-color: #15406b;
    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4);
}

#pay-button:disabled {
    background-color: #697887;
    box-shadow: none;
}

#pay-button:not(:disabled) {
    cursor: pointer;
}

.success-payment-message {
    color: #13395e;
    line-height: 1.4;
}

.message-info {
    color: #b35e14;
    font-size: 0.9rem;
    font-family: monospace;
}

#checkoutDialog .el-dialog__header {
    background-color: lightgrey;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 100px;
}

.checkoutTitle {
    position: relative;
    top: -30px;
}

.checkoutPhotofixrLogo {
    width: 65px;
    position: relative;
    left: 125px;
    top: -20px;
    background-color: white;
    border: 3px solid white;
    border-radius: 35px;
}

.checkoutHeaderLine1 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: black;
}

.checkoutHeaderLine2 {
    font-size: 16px;
    text-align: center;
    position: relative;
    top: -10px;
}

/*Helpers section*/
.ml-auto {
    margin-left: auto;
}

.ml-10 {
    margin-left: 10px;
}

.mr-10 {
    margin-right: 10px;
}

.mx-auto {
    margin: 0 auto;
}

.mt-auto {
    margin-top: auto;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.pb-0 {
    padding-bottom: 0;
}

.pl-10 {
    padding-left: 10px;
}

.pb-20px {
    padding-bottom: 20px;
}

.pt-25px {
    padding-top: 25px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.flex-col {
    flex-direction: column;
}

.main-screen {
    min-height: calc(100vh - 20px);
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-auto {
    overflow: auto;
}

.hidden-number-actions ::-webkit-inner-spin-button{
    display: none
}

.product-checkbox {
    display: flex;
    align-items: center;
    white-space: normal;
}

.product-checkbox .el-checkbox__label {
    padding-left: 15px;
}

.products-form {
    max-height: 500px;
    overflow-y: auto;
}