@import url(//fonts.googleapis.com/css?family=PT+Sans:400italic,400,800,300,600,700);
@import url(//fonts.googleapis.com/css?family=PT+Sans+Narrow:400italic,400,800,300,600,700);
@import url(//fonts.googleapis.com/css?family=Crimson+Text:400i,400,800,300,600,700);
#pnlProductEditor[data-editorproductid="519"] .pnlDesigner_selectPhotosTab #pnlDesigner_thumbs div.msg font,
#pnlProductEditor .editormode_imageselect #pnlDesigner_thumbs div.msg font {
    display: none;
}

/*
 * SCSS Variables //@import 'variables';
 */
/* Screen breaks */
/* misc. */
/* font family */
/* font size */
/* font style */
/* font uppercase */
/* font letter-spacing */
/* font weights */
/* line height */
/* colors */
/* /Variables */
/*
 * SCSS Functions //@import 'functions';
 */
/* /Functions */
/*
 * SCSS Mixins //@import 'mixins';
 */
/*
 * Screen breaks
 */
/* /Mixins */
/* Placeholders */
.project-area .dialogOverlay,
.project-area .pictimeDialog.flexPosition, .project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField, .project-area .loginBook .screen .headerEmail,
.project-area .loginBox .screen .headerEmail, .project-area .loginBox .screen form .checkbox, .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window, .project-area body.login #maincanvas,
.project-area body.login #useraccount, .project-area #mediaDownloadWait .title, .project-area .userlogin icon-elem {
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-area .dialogOverlay,
.project-area .pictimeDialog.flexPosition, .project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField, .project-area .loginBook .screen .headerEmail,
.project-area .loginBox .screen .headerEmail, .project-area .loginBox .screen form .checkbox {
    display: inline-flex;
}

.project-area .userlogin .userloginInner .screens .screen, .project-area .loginBook .screen .disjunction,
.project-area .loginBox .screen .disjunction, .project-area .loginBook .screen .title,
.project-area .loginBook .screen .loginFooter,
.project-area .loginBox .screen .title,
.project-area .loginBox .screen .loginFooter, .mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window, .project-area body.login #maincanvas,
.project-area body.login #useraccount, .project-area .loginBook .screen.twoFactor form .resend, .project-area .loginBook .screen.twoFactorError form .resend, .project-area .loginBook .screen.twoFactorMessage form .resend,
.project-area .loginBox .screen.twoFactor form .resend,
.project-area .loginBox .screen.twoFactorError form .resend,
.project-area .loginBox .screen.twoFactorMessage form .resend, .project-area .loginBook .screen form .local, .project-area .loginBook .screen form .external, .project-area .loginBook .screen:not(.guestBook) form, .project-area .loginBox .screen form, .project-area .loginBox .screen form .local {
    display: flex;
    flex-direction: column;
}

.project-area .userlogin .userloginInner .screens .screen, .project-area .loginBook .screen .disjunction,
.project-area .loginBox .screen .disjunction, .project-area .loginBook .screen .title,
.project-area .loginBook .screen .loginFooter,
.project-area .loginBox .screen .title,
.project-area .loginBox .screen .loginFooter {
    align-items: center;
}

.project-area .dialogOverlay,
.project-area .pictimeDialog.flexPosition, .project-area .gallerySelection .thumbPanel.done:after, .project-area .dialog-2.fullScreen .window, .project-area .userlogin:after, .project-area body.login .projectCover,
.project-area body.login .accountCover,
.project-area body.login .photographerCover, .project-area body.login .projectCover:before,
.project-area body.login .accountCover.projectCover:before,
.project-area body.login .photographerCover.projectCover:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.project-area .dialogOverlay,
.project-area .pictimeDialog.flexPosition {
    position: fixed;
}

/* /Placeholders */
/* Animations */
@keyframes rotate-360 {
    100% {
        transform: rotate(360deg);
    }
}

/* /Animations */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 100vw #FFFFFF inset !important;
}

.svg-icon:not(.fill-icon) {
    stroke: currentColor;
    fill: transparent;
}

.svg-icon.fill-icon {
    fill: currentColor;
}

/*
 * Migration Class
 */
/* font family */
.F1 {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
}

.F2 {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
}

.F3 {
    font-family: "garamond-premier-pro-display", sans-serif;
}

.F4 {
    font-family: "Crimson Text", serif;
}

/* font size */
.S0 {
    font-size: 10px;
}

.S1 {
    font-size: 11px;
}

.S2 {
    font-size: 12px;
}

.S3 {
    font-size: 13px;
}

.S4 {
    font-size: 16px;
}

.S5 {
    font-size: 20px;
}

.S6 {
    font-size: 26px;
}

.S7 {
    font-size: 34px;
}

.S8 {
    font-size: 18px;
}

.S9 {
    font-size: 14px;
}

.S10 {
    font-size: 22px;
}

.S11 {
    font-size: 30px;
}

/* font uppercase */
.U1 {
    text-transform: none;
}

.U2 {
    text-transform: uppercase;
}

/* font letter-spacing */
.L1 {
    letter-spacing: 0.2px;
}

.L2 {
    letter-spacing: 1px;
}

.L3 {
    letter-spacing: 1.5px;
}

.L4 {
    letter-spacing: 0.5px;
}

.L5 {
    letter-spacing: 2px;
}

.L6 {
    letter-spacing: 3.5px;
}

/* font weights */
.W1 {
    font-weight: 300;
}

.W2 {
    font-weight: 400;
}

.W3 {
    font-weight: 500;
}

.W4 {
    font-weight: 700;
}

/* line-height */
.H1 {
    line-height: 150%;
}

.H2 {
    line-height: 18px;
}

.H3 {
    line-height: 135%;
}

/* colors */
.C0 {
    color: #F9F9F9;
}

.CH0:hover {
    color: #F9F9F9;
}

.BC0 {
    background-color: #F9F9F9;
}

.BCH0:hover {
    background-color: #F9F9F9;
}

.C1 {
    color: #FFFFFF;
}

.CH1:hover {
    color: #FFFFFF;
}

.BC1 {
    background-color: #FFFFFF;
}

.BCH1:hover {
    background-color: #FFFFFF;
}

.C2 {
    color: #F2F2F2;
}

.CH2:hover {
    color: #F2F2F2;
}

.BC2 {
    background-color: #F2F2F2;
}

.BCH2:hover {
    background-color: #F2F2F2;
}

.C3 {
    color: #ECECEC;
}

.CH3:hover {
    color: #ECECEC;
}

.BC3 {
    background-color: #ECECEC;
}

.BCH3:hover {
    background-color: #ECECEC;
}

.C4 {
    color: #E0E0E0;
}

.CH4:hover {
    color: #E0E0E0;
}

.BC4 {
    background-color: #E0E0E0;
}

.BCH4:hover {
    background-color: #E0E0E0;
}

.C5 {
    color: #D0D0D0;
}

.CH5:hover {
    color: #D0D0D0;
}

.BC5 {
    background-color: #D0D0D0;
}

.BCH5:hover {
    background-color: #D0D0D0;
}

.C6 {
    color: #BCBCBC;
}

.CH6:hover {
    color: #BCBCBC;
}

.BC6 {
    background-color: #BCBCBC;
}

.BCH6:hover {
    background-color: #BCBCBC;
}

.C7 {
    color: #868686;
}

.CH7:hover {
    color: #868686;
}

.BC7 {
    background-color: #868686;
}

.BCH7:hover {
    background-color: #868686;
}

.C8 {
    color: #444444;
}

.CH8:hover {
    color: #444444;
}

.BC8 {
    background-color: #444444;
}

.BCH8:hover {
    background-color: #444444;
}

.C9 {
    color: #1C1C1C;
}

.CH9:hover {
    color: #1C1C1C;
}

.BC9 {
    background-color: #1C1C1C;
}

.BCH9:hover {
    background-color: #1C1C1C;
}

.C10 {
    color: #FF232B;
}

.CH10:hover {
    color: #FF232B;
}

.BC10 {
    background-color: #FF232B;
}

.BCH10:hover {
    background-color: #FF232B;
}

.C11 {
    color: #F8DADB;
}

.CH11:hover {
    color: #F8DADB;
}

.BC11 {
    background-color: #F8DADB;
}

.BCH11:hover {
    background-color: #F8DADB;
}

.C12 {
    color: #CB1B21;
}

.CH12:hover {
    color: #CB1B21;
}

.BC12 {
    background-color: #CB1B21;
}

.BCH12:hover {
    background-color: #CB1B21;
}

.C13 {
    color: #363636;
}

.CH13:hover {
    color: #363636;
}

.BC13 {
    background-color: #363636;
}

.BCH13:hover {
    background-color: #363636;
}

.C14 {
    color: #555555;
}

.CH14:hover {
    color: #555555;
}

.BC14 {
    background-color: #555555;
}

.BCH14:hover {
    background-color: #555555;
}

.C23 {
    color: #3D893C;
}

.CH23:hover {
    color: #3D893C;
}

.BC23 {
    background-color: #3D893C;
}

.BCH23:hover {
    background-color: #3D893C;
}

.C24 {
    color: #7EA075;
}

.CH24:hover {
    color: #7EA075;
}

.BC24 {
    background-color: #7EA075;
}

.BCH24:hover {
    background-color: #7EA075;
}

.C25 {
    color: #AB4D2E;
}

.CH25:hover {
    color: #AB4D2E;
}

.BC25 {
    background-color: #AB4D2E;
}

.BCH25:hover {
    background-color: #AB4D2E;
}

.C26 {
    color: #B47A67;
}

.CH26:hover {
    color: #B47A67;
}

.BC26 {
    background-color: #B47A67;
}

.BCH26:hover {
    background-color: #B47A67;
}

.C27 {
    color: #000000;
}

.CH27:hover {
    color: #000000;
}

.BC27 {
    background-color: #000000;
}

.BCH27:hover {
    background-color: #000000;
}

.C28 {
    color: #F0DDC0;
}

.CH28:hover {
    color: #F0DDC0;
}

.BC28 {
    background-color: #F0DDC0;
}

.BCH28:hover {
    background-color: #F0DDC0;
}

.C29 {
    color: #EAD0A6;
}

.CH29:hover {
    color: #EAD0A6;
}

.BC29 {
    background-color: #EAD0A6;
}

.BCH29:hover {
    background-color: #EAD0A6;
}

.C30 {
    color: #F5F5F5;
}

.CH30:hover {
    color: #F5F5F5;
}

.BC30 {
    background-color: #F5F5F5;
}

.BCH30:hover {
    background-color: #F5F5F5;
}

.C31 {
    color: #805441;
}

.CH31:hover {
    color: #805441;
}

.BC31 {
    background-color: #805441;
}

.BCH31:hover {
    background-color: #805441;
}

.C32 {
    color: #654131;
}

.CH32:hover {
    color: #654131;
}

.BC32 {
    background-color: #654131;
}

.BCH32:hover {
    background-color: #654131;
}

.C33 {
    color: #CF9D6A;
}

.CH33:hover {
    color: #CF9D6A;
}

.BC33 {
    background-color: #CF9D6A;
}

.BCH33:hover {
    background-color: #CF9D6A;
}

.C34 {
    color: #F4E0B7;
}

.CH34:hover {
    color: #F4E0B7;
}

.BC34 {
    background-color: #F4E0B7;
}

.BCH34:hover {
    background-color: #F4E0B7;
}

.C35 {
    color: #F4E5C6;
}

.CH35:hover {
    color: #F4E5C6;
}

.BC35 {
    background-color: #F4E5C6;
}

.BCH35:hover {
    background-color: #F4E5C6;
}

.C36 {
    color: #8C5524;
}

.CH36:hover {
    color: #8C5524;
}

.BC36 {
    background-color: #8C5524;
}

.BCH36:hover {
    background-color: #8C5524;
}

/* italic */
.I1 {
    font-style: italic;
}

/* /Migration Class */
.parenthesize:before {
    content: '(';
}

.parenthesize:after {
    content: ')';
}

.standard-btn, .standard-btn-light, .standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy),
.project-area .loginBox .screen.twoFactorMessage form button:not(#dummy), .standard-btn-ghost {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

@media (min-width: 651px) {
    .standard-btn, .standard-btn-light, .standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy),
    .project-area .loginBox .screen.twoFactorMessage form button:not(#dummy), .standard-btn-ghost {
        width: 180px;
    }
}

.standard-btn-light {
    color: #444444;
    background-color: #F2F2F2;
    border: none;
}

.standard-btn-light:hover {
    background-color: #ECECEC;
}

.standard-btn-dark, .project-area .loginBook .screen.twoFactorMessage form button:not(#dummy),
.project-area .loginBox .screen.twoFactorMessage form button:not(#dummy) {
    color: #FFFFFF;
    background-color: #444444;
    border: none;
}

.standard-btn-dark:hover, .project-area .loginBook .screen.twoFactorMessage form button:hover:not(#dummy),
.project-area .loginBox .screen.twoFactorMessage form button:hover:not(#dummy) {
    background-color: #1C1C1C;
}

.standard-btn-ghost {
    color: #444444;
    background-color: #FFFFFF;
    border: 1px solid #444444;
}

.standard-btn-ghost:hover {
    color: #868686;
}

.standard-btn-ghost:hover {
    border-color: #868686;
}

.field.multiSelectField.fieldInvalid .pMSelect:not(.active) .topLine {
    border-color: #ff232b;
}

.field.multiSelectField .pMSelect {
    position: relative;
}

.field.multiSelectField .pMSelect.active .topLine {
    border-bottom: 1px solid #868686;
}

.field.multiSelectField .pMSelect.active .pMSelectPanel {
    display: block;
}

.field.multiSelectField .pMSelect .topLine {
    height: 40px;
    width: calc(100% - 40px);
    line-height: 40px;
    border: 1px solid #d0d0d0;
    padding: 3px 26px 3px 12px;
    position: relative;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.field.multiSelectField .pMSelect .topLine:after {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
    background-position: 0px -180px;
    background-size: auto;
    right: 9px;
    top: 18px;
}

.field.multiSelectField .pMSelect .pMSelectPanel {
    position: absolute;
    width: calc(100% - 2px);
    height: auto;
    max-height: 200px;
    overflow: auto;
    border: 1px solid #868686;
    border-top: none;
    padding-top: 4px;
    display: none;
    background: white;
    z-index: 10000;
}

.field.multiSelectField .pMSelect .pMSelectPanel .checkbox {
    line-height: 32px;
    padding-left: 39px;
    position: relative;
    cursor: pointer;
}

.field.multiSelectField .pMSelect .pMSelectPanel .checkbox:before {
    position: absolute;
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
    background-position: -50px -420px;
    background-size: auto;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 10px;
}

.field.multiSelectField .pMSelect .pMSelectPanel .checkbox:after {
    display: none;
    position: absolute;
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
    background-size: auto;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 10px;
    background-position: -50px -630px;
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    margin: 0;
}

.field.multiSelectField .pMSelect .pMSelectPanel .checkbox.active:after {
    display: block;
}

/*****************************************************************************/
/*                      icons                                           */
/**************************************************************************/
.icon.close-icon-svg {
    background-position: -10px -770px;
}

.icon-ui-sprite-eb.crop-icon-svg {
    background-position: -395px 582px;
}

.icon-client-family.close-icon-svg {
    background-position: -40px -720px;
}

.icon-client-family.error-icon-svg {
    background-position: -160px -760px;
}

/*****************************************************************************/
/*                      icons families                                          */
/**************************************************************************/
.icon-ui-sprite-eb,
.icon-ui-sprite-eb:after,
.icon-ui-sprite-eb:before {
    content: "";
    position: relative;
    width: 40px;
    height: 40px;
    background-image: url(resources/sprites/uispriteb.png?r=r166.5);
}

.icon-client-family {
    position: relative;
    width: 40px;
    height: 40px;
    background-image: url(./resources/sprites/client.svg?r=r166.5);
}

html.project-area, .project-area body.store {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-size-adjust: none;
}

html.project-area.cart, .project-area body.store.cart {
    overflow: auto;
}

body.faceScanMode .fullHeader, body.faceScanMode .photoStreamWrapper {
    display: none !important;
}

.project-area {
    /****************************************** general css ***********************/
    /*.F4 {*/
    /*font-family: 'pro-minion';*/
    /*}*/
    /* font size */
    /* font uppercase */
    /* font letter-spacing */
    /* font weights */
    /* colors */
    /************ Selection Dialogs *****************/
    /* new base */
    /* gallery selection*/
    /* saved design*/
    /************************ pHelper tooltip *********************/
    /********************** Tooltip *******************************/
    /*************** Confirm Tooltip ***************/
    /******************************************************************************/
    /*
	 * Watermarks
		0:  None
		2:  Bottom left corner
		3:  Bottom center
		4:  Bottom right corner
		5:  Center
		6:  Lower left
		7:  Lower right
		8:  Snap bottom right
		9:  Snap bottom left
		10: Tiled
		?:  Footer
	 */
    /* /Watermarks */
    /*
	 * Download Preferences Dialog Box
	 */
    /* /Download Preferences */
    /*
	 * MediaDownload Wait dialog
	 */
    /* /MediaDownload Wait dialog  */
    /*
	 * Download Tooltip & Msg
	 */
    /* /Download Tooltip & Msg */
    /*
	 * General
	 */
    /*****************************************************************************/
    /*                      dialog-2                                            */
    /******************************************************************************/
    /*****************************************************************************/
    /*                      dialog-2                                            */
    /******************************************************************************/
    /*
 * Collection Select
 */
    /* /Collection Select */
}

.project-area body,
.project-area .bodyNoPanel {
    margin: 0;
    padding: 0;
    font-size: 20px;
    direction: ltr;
    font-family: 'PT Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.project-area.noScroll {
    overflow: hidden;
}

.project-area.noScroll--dialog {
    overflow: hidden;
}

.project-area.noScroll body {
    height: 100% !important;
    overflow: hidden !important;
}

.project-area a {
    color: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-decoration: inherit;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .content {
    max-height: 80vh;
    min-height: 40vh;
    width: 880px;
    overflow: auto;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .content .bcUserTermsPopupLogo {
    width: 162px;
    height: 63px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    background-position: center;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .content .bcUserTermsPopupTitle {
    margin-bottom: 40px;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .content .bcUserTermsPopupBody {
    text-align: left;
    width: 800px;
    min-height: 30vh;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .footbar {
    margin: 20px 0 !important;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .footbar button {
    width: 260px !important;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .footbar .bcTermBtnAgree {
    width: 260px;
    height: 40px;
    margin: 40px auto;
    line-height: 40px;
    cursor: pointer;
    background-color: #444444 !important;
    color: #FFFFFF !important;
}

.project-area .simpleAlert.blockCancellation.bcUserTermsPopup .footbar .bcTermBtnAgree:hover {
    background-color: #1C1C1C !important;
}

.project-area a:not([class]),
.project-area a:not([class]):visited.a:not([class]):hover,
.project-area a:not([class]):link,
.project-area a:not([class]):active {
    color: inherit;
}

.project-area a,
.project-area a:visited.a:hover,
.project-area a:link,
.project-area a:active {
    text-decoration: none;
}

.project-area .nicescroll-rails > div {
    background-color: #bcbcbc !important;
    -webkit-transition: all 0.1s;
}

.project-area .nicescroll-rails:hover > div {
    width: 12px !important;
}

.project-area ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.project-area ::-webkit-scrollbar:hover {
    width: 12px !important;
}

.project-area ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #E0E0E0;
}

.project-area ::-webkit-scrollbar-thumb:hover {
    background-color: #D0D0D0;
    width: 12px !important;
}

.project-area * {
    scrollbar-width: thin;
    scrollbar-color: #e2e1e1 #ffffff;
}

.project-area .checkboxWrapper input[type="checkbox"] {
    display: none;
}

.project-area .checkboxWrapper .icon4Before {
    padding-left: 0;
}

.project-area .checkboxWrapper .icon4Before:before {
    position: relative;
    margin: 0;
    margin-right: 10px;
}

.project-area .checkboxWrapper .icon4Before.iconSmall:before {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.project-area .checkboxWrapper .checkbox {
    display: inline-flex;
    align-items: flex-start;
}

.project-area .checkboxWrapper .checkbox.icon4Before:before {
    background-position: 0 -1760px;
}

.project-area .checkboxWrapper .checkbox.icon4Before:hover:before {
    background-position: -20px -1760px;
}

.project-area .checkboxWrapper :checked ~ .checkbox.icon4Before:before {
    background-position: 0 -1780px;
}

.project-area .checkboxWrapper :checked ~ .checkbox.icon4Before:hover:before {
    background-position: -20px -1780px;
}

.project-area .checkboxWrapper .warning {
    color: #FF232B;
    margin-top: 8px;
}

.project-area .checkboxWrapper:not(.showWarning) .warning {
    display: none;
}

.project-area .pCurrencyWrapper {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.project-area .pCurrencyLarge {
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    vertical-align: top;
    height: 100%;
}

.project-area .pCurrencyLarge sub {
    font-size: x-small;
    vertical-align: baseline;
}

.project-area .pCurrency {
    display: inline-block;
}

.project-area .pCurrency:hover {
    position: relative;
}

.project-area .pCurrency:hover:after {
    content: attr(data-name);
    position: absolute;
    top: calc(100% + 2px);
    left: -12px;
    background-color: rgba(28, 28, 28, 0.75);
    padding: 0 10px 0 10px;
    font-size: 11px;
    height: 26px;
    line-height: 26px;
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    color: #fff;
    font-weight: 400;
    letter-spacing: 0.2px;
    z-index: 999999;
}

.project-area .pNarrow {
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.project-area .pGotham {
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    text-transform: uppercase;
}

.project-area .pXGotham {
    font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', sans-serif;
    text-transform: uppercase;
}

.project-area .pUnGotham {
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
    text-transform: none;
}

.project-area .pGotham.pNoHover {
    text-transform: none;
}

.project-area .F1 {
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
}

.project-area .F2 {
    font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', sans-serif;
}

.project-area .F3 {
    font-family: 'garamond-premier-pro-display', sans-serif;
}

.project-area .F4 {
    font-family: 'Crimson Text', serif;
}

.project-area .S0 {
    font-size: 10px;
}

.project-area .S1 {
    font-size: 11px;
}

.project-area .S2 {
    font-size: 12px;
}

.project-area .S3 {
    font-size: 13px;
}

.project-area .S4 {
    font-size: 16px;
}

.project-area .S5 {
    font-size: 20px;
}

.project-area .S6 {
    font-size: 26px;
}

.project-area .S7 {
    font-size: 34px;
}

.project-area .S8 {
    font-size: 18px;
}

.project-area .S9 {
    font-size: 14px;
}

.project-area .S10 {
    font-size: 22px;
}

.project-area .S11 {
    font-size: 30px;
}

.project-area .U1 {
    text-transform: none;
}

.project-area .U2 {
    text-transform: uppercase;
}

.project-area .L1 {
    letter-spacing: 0.2px;
}

.project-area .L2 {
    letter-spacing: 1px;
}

.project-area .L3 {
    letter-spacing: 1.5px;
}

.project-area .L5 {
    letter-spacing: 2px;
}

.project-area .L6 {
    letter-spacing: 3.5px;
}

.project-area .W1 {
    font-weight: 300;
}

.project-area .W2 {
    font-weight: 400;
}

.project-area .W3 {
    font-weight: 500;
}

.project-area .W4 {
    font-weight: 700;
}

.project-area .C0 {
    color: #F9F9F9;
}

.project-area .CH0:hover {
    color: #F9F9F9;
}

.project-area .BC0 {
    background-color: #F9F9F9;
}

.project-area .BCH0:hover {
    background-color: #F9F9F9;
}

.project-area .C1 {
    color: #FFFFFF;
}

.project-area .CH1:hover {
    color: #FFFFFF;
}

.project-area .BC1 {
    background-color: #FFFFFF;
}

.project-area .BCH1:hover {
    background-color: #FFFFFF;
}

.project-area .C2 {
    color: #F2F2F2;
}

.project-area .CH2:hover {
    color: #F2F2F2;
}

.project-area .BC2 {
    background-color: #F2F2F2;
}

.project-area .BCH2:hover {
    background-color: #F2F2F2;
}

.project-area .C3 {
    color: #ECECEC;
}

.project-area .CH3:hover {
    color: #ECECEC;
}

.project-area .BC3 {
    background-color: #ECECEC;
}

.project-area .BCH3:hover {
    background-color: #ECECEC;
}

.project-area .C4 {
    color: #E0E0E0;
}

.project-area .CH4:hover {
    color: #E0E0E0;
}

.project-area .BC4 {
    background-color: #E0E0E0;
}

.project-area .BCH4:hover {
    background-color: #E0E0E0;
}

.project-area .C5 {
    color: #D0D0D0;
}

.project-area .CH5:hover {
    color: #D0D0D0;
}

.project-area .BC5 {
    background-color: #D0D0D0;
}

.project-area .BCH5:hover {
    background-color: #D0D0D0;
}

.project-area .C6 {
    color: #BCBCBC;
}

.project-area .CH6:hover {
    color: #BCBCBC;
}

.project-area .BC6 {
    background-color: #BCBCBC;
}

.project-area .BCH6:hover {
    background-color: #BCBCBC;
}

.project-area .C7 {
    color: #868686;
}

.project-area .CH7:hover {
    color: #868686;
}

.project-area .BC7 {
    background-color: #868686;
}

.project-area .BCH7:hover {
    background-color: #868686;
}

.project-area .C8 {
    color: #444444;
}

.project-area .CH8:hover {
    color: #444444;
}

.project-area .BC8 {
    background-color: #444444;
}

.project-area .BCH8:hover {
    background-color: #444444;
}

.project-area .C9 {
    color: #1C1C1C;
}

.project-area .CH9:hover {
    color: #1C1C1C;
}

.project-area .BC9 {
    background-color: #1C1C1C;
}

.project-area .BCH9:hover {
    background-color: #1C1C1C;
}

.project-area .C10 {
    color: #FF232B;
}

.project-area .CH10:hover {
    color: #FF232B;
}

.project-area .BC10 {
    background-color: #FF232B;
}

.project-area .BCH10:hover {
    background-color: #FF232B;
}

.project-area .C11 {
    color: #F8DADB;
}

.project-area .CH11:hover {
    color: #F8DADB;
}

.project-area .BC11 {
    background-color: #F8DADB;
}

.project-area .BCH11:hover {
    background-color: #F8DADB;
}

.project-area .C12 {
    color: #CB1B21;
}

.project-area .CH12:hover {
    color: #CB1B21;
}

.project-area .BC12 {
    background-color: #CB1B21;
}

.project-area .BCH12:hover {
    background-color: #CB1B21;
}

.project-area .C25 {
    color: #AB4D2E;
}

.project-area .I1 {
    font-style: italic;
}

.project-area .icon, .project-area .iconBefore:before, .project-area .iconAfter:after {
    content: "";
    position: relative;
    width: 40px;
    height: 40px;
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
}

.project-area .pictimeDialog .pnlDialogBox_Content_dark {
    min-width: 190px;
    min-height: 190px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #ddd;
    position: relative;
    color: #888;
    font-size: 16px;
    font-family: 'PT Sans', sans-serif;
}

.project-area .pnlDialogBox_Content_dark.loading .text {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 35px;
}

.project-area .pnlDialogBox_Content_dark.loading img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 26px;
    top: 0;
}

.project-area .messagePage .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    border-bottom: 1px solid #ddd;
}

.project-area .messagePage .header img {
    margin-left: 20px;
    margin-top: 5px;
}

.project-area .messagePage .title {
    color: #333;
    font-size: 24px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 200px;
    right: 0;
    width: 350px;
    height: 40px;
}

.project-area .messagePage .msg {
    color: #888;
    height: 40px;
    font-size: 17px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 280px;
    right: 0;
    width: 350px;
    font-family: 'PT Sans', sans-serif;
    line-height: 30px;
}

.project-area .textField {
    text-align: center;
    padding-top: 16px;
    padding-left: 26px;
    padding-bottom: 3px;
    padding-right: 27px;
    height: 50px;
}

.project-area .textField input {
    border: 1px solid #dddddd;
    width: 100%;
    height: 100%;
    font-size: 15px;
    padding-left: 15px;
    width: calc(100% - 15px);
    text-align: left;
}

.project-area .textField input:focus {
    outline: transparent;
    border: 1px solid #bbbbbb;
}

.project-area .pButton {
    display: inline-block;
    position: relative;
    text-align: center;
    outline: none;
    border: none;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
    box-sizing: border-box;
}

.project-area .pButton:not(:disabled) {
    cursor: pointer;
}

.project-area .pButton > .text {
    margin-left: 10px;
}

.project-area .p#333333 .pButton:not(.pButtonNaked) {
    color: #FFFFFF;
    background-color: #333333;
}

.project-area .p#333333 .pButton:not(.pButtonNaked):hover {
    background-color: #888888;
}

.project-area .pGrayH, .project-area .pGray {
    color: #bbbbbb;
}

.project-area .pGrayH:hover {
    color: #aaaaaa;
}

.project-area .pWhite {
    color: #FFFFFF;
}

.project-area .p#333333H, .project-area .p#333333 {
    color: #333333;
}

.project-area .p#333333H:hover {
    color: #888888;
}

.project-area .pBlack {
    color: #333333;
}

.project-area .pBlackH:hover {
    color: #333333;
}

.project-area .pDarkGrayH, .project-area .pDarkGray {
    color: #aaaaaa;
}

.project-area .pDarkGrayH:hover {
    color: #888888;
}

.project-area .pGrayH, .project-area .pGray {
    color: #bbbbbb;
}

.project-area .pGrayH:hover {
    color: #aaaaaa;
}

.project-area .pLightGray {
    color: #e5e5e5;
}

.project-area .pRed {
    color: #FF232B;
}

.project-area .pGray .pButton:not(.pButtonNaked) {
    color: #333333;
    background-color: #dddddd;
}

.project-area .pGray .pButton:not(.pButtonNaked):hover {
    background-color: #aaaaaa;
}

.project-area .pWhite.pButton:not(.pButtonNaked) {
    background-color: white;
}

.project-area .pWhite.pButton:not(.pButtonNaked):not(:disabled):not(.disabled) {
    color: #444444;
    border: 1px solid #444444;
}

.project-area .pWhite.pButton:not(.pButtonNaked):not(:disabled):not(.disabled):hover {
    background-color: #444444;
    color: white;
}

.project-area .pWhite.pButton:not(.pButtonNaked):disabled {
    color: #BCBCBC;
    border: 1px solid #BCBCBC;
}

.project-area .pWhite .pButton:not(.pButtonNaked) {
    color: #333333;
    background-color: white;
    border: 1px solid #333333;
}

.project-area .pWhite .pButton:not(.pButtonNaked):hover {
    background-color: #333333;
    color: white;
}

.project-area .pButtonLarge {
    width: 200px;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 400;
}

.project-area .pButtonAuto {
    width: 100%;
}

.project-area .pButtonSmall {
    padding: 0 25px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 400;
}

.project-area .pButtonExtraSmall {
    width: 132px;
    height: 36px;
    line-height: 37px;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
}

.project-area .pButtonStandard {
    width: 250px;
    height: 40px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.project-area .pButtonStandard:hover {
    background-color: #ececec;
}

.project-area .pButtonInRow {
    display: inline-block;
    margin: 5px;
}

.project-area .pButtonSmall.pButtonNaked {
    font-size: 13px;
    line-height: 40px;
    vertical-align: middle;
}

.project-area .pButtonLarge.pButtonNaked {
    line-height: 40px;
    vertical-align: middle;
}

.project-area .pButtonNaked {
    padding: 0 5px;
}

.project-area .pButtonLink {
    text-decoration: underline;
}

.project-area .pButton.selecting:after {
    content: ' ';
    position: absolute;
    right: 5px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-image: url(resources/sprites/phtsprite.png?r=r166.5);
    background-position: 0 -180px;
}

.project-area .pTopPanel .pButton {
    margin: 0 10px;
}

.project-area .pTopPanel .pButton.p#333333 {
    margin: 0 5px;
}

.project-area .pTopPanel .fwButtons {
    position: absolute;
    top: 0;
    right: 30px;
    line-height: 70px;
}

.project-area .validationError {
    color: #FF232B;
    font-size: 11px;
    padding-top: 4px;
    text-align: left;
    line-height: 16px;
    margin-bottom: 10px;
}

.project-area .fieldInvalid.fieldInvalid input {
    border: 1px solid #FF232B;
}

.project-area .dialog {
    display: block;
    z-index: 10002;
    position: absolute;
    background-color: white;
    color: #333333;
}

.project-area .dialogCloseIcon {
    position: fixed;
    right: 24px;
    top: 18px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(./resources/sprites/client.svg?r=r166.5);
    background-repeat: no-repeat;
    background-position: -40px -720px;
}

.project-area .dialogClose:hover .dialogCloseIcon {
    background-position: -80px -720px;
    color: #000000;
}

.project-area .dialogContent {
    width: 100%;
    height: 100%;
    position: relative;
}

.project-area .dialogContent > .title {
    height: 80px;
    line-height: 105px;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 24px;
    padding-right: 24px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-area .dialogOverlay,
.project-area .pictimeDialog.flexPosition {
    background-color: rgba(188, 188, 188, 0.9);
    z-index: 9999;
}

.project-area .dialogOverlay.requireActivation,
.project-area .pictimeDialog.flexPosition.requireActivation {
    background-color: rgba(28, 28, 28, 0.65);
}

.project-area .icon4 {
    background-image: url("./resources/sprites/client.svg?r=r166.5");
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    display: block;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label, .project-area .userlogin .userloginInner .screens .screen .selectField,
.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label, .project-area .userlogin .userloginInner .screens .screen .selectField,
.project-area .icon4Before, .project-area .icon4After {
    position: relative;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before, .project-area .userlogin .userloginInner .screens .screen .selectField:after,
.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before, .project-area .userlogin .userloginInner .screens .screen .selectField:after,
.project-area .icon4Before:before, .project-area .icon4After:after {
    content: '';
    display: block;
    background-image: url("./resources/sprites/client.svg?r=r166.5");
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 100%;
    width: 40px;
    height: 40px;
}

.project-area .icon4Before:before {
    left: 0;
}

.project-area .icon4After:after {
    right: 0;
}

.project-area .icon4Before {
    position: relative;
    padding-left: 40px;
}

.project-area .vAlignWrapper:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.project-area .vAlignContainer {
    display: inline-block;
    vertical-align: middle;
}

.project-area .gallerySelection .formPanel {
    overflow: auto;
    position: absolute;
    bottom: 0;
    top: 81px;
}

.project-area .gallerySelection .thumbPanel {
    position: absolute;
    top: 81px;
    bottom: 0;
    right: 0;
    left: 300px;
    border-left: 1px solid #dddddd;
}

.project-area .gallerySelection .thumbPanel.done .selectionAddLikes,
.project-area .gallerySelection .thumbPanel.done .selectionAddScenes,
.project-area .gallerySelection .thumbPanel.done .selectionDiscard,
.project-area .gallerySelection .thumbPanel.done .selectionAll {
    pointer-events: none;
}

.project-area .gallerySelection .thumbPanel.done:after {
    background-color: #FFFFFF;
    content: '';
    opacity: 0.7;
    pointer-events: none;
}

.project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done li {
    pointer-events: none;
}

.project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done .selectionAddLikes {
    pointer-events: none;
}

.project-area .gallerySelection .thumbPanel.loading, .project-area .gallerySelection .thumbPanel.done .selectionDiscard {
    pointer-events: none;
}

.project-area .gallerySelection .thumbPanel .selectionButtons {
    z-index: 1;
    position: relative;
    height: 40px;
    font-size: 13px;
    font-weight: 300;
    color: #aaaaaa;
    border-bottom: 1px solid #dddddd;
    padding-left: 5px;
    text-align: left;
}

.project-area .gallerySelection .thumbPanel .selectionButtons > a, .project-area .gallerySelection .thumbPanel .selectionButtons > span {
    cursor: pointer;
}

.project-area .gallerySelection .thumbPanel .selectionButtons > a:not(.largeSize):not(.normalSize), .project-area .gallerySelection .thumbPanel .selectionButtons > span:not(.largeSize):not(.normalSize) {
    padding-right: 20px;
    line-height: 40px;
    position: relative;
}

.project-area .gallerySelection .thumbPanel .selectionButtons > a:not(.largeSize):not(.normalSize) .optionsPanel, .project-area .gallerySelection .thumbPanel .selectionButtons > span:not(.largeSize):not(.normalSize) .optionsPanel {
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

.project-area .gallerySelection .thumbPanel .selectionButtons > a:hover, .project-area .gallerySelection .thumbPanel .selectionButtons > span:hover {
    color: #333333;
}

.project-area .gallerySelection .thumbPanel .selectionButtons .normalSize {
    background-position: -40px -520px;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 40px;
    top: 0;
}

.project-area .gallerySelection .thumbPanel .selectionButtons .normalSize:hover {
    background-position: -120px -520px;
}

.project-area .gallerySelection .thumbPanel .selectionButtons .largeSize {
    background-position: -40px -560px;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0;
}

.project-area .gallerySelection .thumbPanel .selectionButtons .largeSize:hover {
    background-position: -120px -560px;
}

.project-area .gallerySelection .thumbPanel .selectionAddLikes:before,
.project-area .gallerySelection .thumbPanel .selectionAddScenes:before {
    background-position: -40px -240px;
    height: 40px;
    width: 40px;
    margin-top: -11px;
}

.project-area .gallerySelection .thumbPanel .selectionAddScenes:before {
    background-position: -40px -200px;
}

.project-area .gallerySelection .thumbPanel .selectionAddLikes:hover:before {
    background-position: -120px -240px;
}

.project-area .gallerySelection .thumbPanel .selectionAddScenes:hover:before {
    background-position: -120px -200px;
}

.project-area .gallerySelection .thumbPanel .selectionAll:before {
    background-position: -40px -962px;
    height: 40px;
    width: 40px;
    margin-top: -11px;
}

.project-area .gallerySelection .thumbPanel .selectionAll:hover:before {
    background-position: -120px -962px;
}

.project-area .gallerySelection .thumbPanel .selectionDiscard:before {
    background-position: -40px -480px;
    height: 40px;
    width: 40px;
    margin-top: -11px;
}

.project-area .gallerySelection .thumbPanel .selectionDiscard:hover:before {
    background-position: -120px -480px;
}

.project-area .gallerySelection .thumbPanel .selectPhotos {
    position: absolute;
    top: 52px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.project-area .gallerySelection .thumbPanel .noLikesMsg {
    padding: 22px;
    color: #aaa;
}

.project-area .gallerySelection .thumbPanel .noLikesMsg.hide {
    display: none;
}

.project-area .gallerySelection .selectPhotos .pnlLeft .photoList {
    padding: 0;
}

.project-area .gallerySelection .thumbPanel .helpPanel {
    padding-left: 10px;
    overflow: hidden;
}

.project-area .gallerySelection .thumbPanel .longText {
    width: 300px;
}

.project-area .gallerySelection .thumbPanel .addPhotoPanel .longText {
    width: auto;
}

.project-area .gallerySelection .thumbPanel .helpPanel .titleHeader {
    padding-bottom: 10px;
}

.project-area .gallerySelection .thumbPanel .helpPanel .buttons {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    padding-top: 15px;
}

.project-area .gallerySelection .thumbPanel .helpPanel p {
    line-height: 8px;
}

.project-area .gallerySelection .thumbPanel .helpPanel .buttons > .pButton {
    margin-right: 10px;
    box-sizing: border-box;
}

.project-area .gallerySelection .thumbPanel .helpPanel.addPhotoPanel .buttons {
    margin-top: 22px;
}

.project-area .gallerySelection .thumbPanel .helpPanel .buttons .cancelButton {
    margin-left: 10px;
}

.project-area body.hideEmailOpt .emailConsent {
    display: none;
}

.project-area body.store .login .loginCnt,
.project-area body.gallery .login .loginCnt {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 620px;
}

.project-area body.store .login .loginCnt .logo,
.project-area body.gallery .login .loginCnt .logo {
    display: none;
}

.project-area .pnlCompositionBoxZoom_qualityMessage:before {
    position: absolute;
    right: 0;
    top: 10px;
    content: ' ';
    height: 30px;
    width: 30px;
    background-image: url(resources/sprites/uispriteb.png?r=r166.5);
    background-position: -125px -630px;
}

.project-area .pnlCompositionBoxZoom_qualityMessage:after {
    content: ' ';
    position: absolute;
    right: -5px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.project-area .pnlCompositionBoxZoom_qualityMessage {
    position: absolute;
    top: 35px;
    padding: 5px 5px 5px 5px;
    padding-right: 35px;
    height: 80px;
    width: 120px;
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
    text-align: left;
    background: white;
    border: 1px solid #bbbbbb;
}

.project-area .pTooltip.menu.savedDesignTip > .optionsPanel > .optionsPanelInner {
    overflow: visible;
    width: auto;
    min-height: 212px;
    max-width: 1220px;
}

.project-area .pTooltip.menu.savedDesignTip:not(.albumSelectionOption) > .optionsPanel > .optionsPanelInner {
    min-width: 200px;
    max-width: 1220px;
}

.project-area .pTooltip.menu.savedDesignTip.empty > .optionsPanel > .optionsPanelInner {
    min-height: 80px;
}

.project-area .pTooltip.menu.savedDesignTip > .optionsPanel {
    right: -40px;
    top: 54px;
    min-width: 100px;
}

.project-area .pTooltip.menu.savedDesignTip:not(.notip) > .optionsPanel:after {
    right: 85px;
}

@media (max-width: 1300px) {
    .project-area .pTooltip.menu.savedDesignTip:not(.albumSelectionOption) > .optionsPanel > .optionsPanelInner {
        max-width: 824px;
    }
}

.project-area .savedDesignTip .tooltipTitle {
    padding-right: 50px;
}

.project-area .savedDesignTip .outerProgress {
    -webkit-box-shadow: none;
    border: 1px solid #e5e5e5;
    margin-bottom: 80px;
}

.project-area .savedDesignTip .outerProgress.editing {
    margin-left: 30px;
    -webkit-box-shadow: inset 0px 0px 1px 4px #e5e5e5;
}

.project-area .savedDesignTip .outerProgress.editing.done.continueSelect:hover:after {
    background-color: #333333;
    color: white;
}

.project-area .savedDesignTip .outerProgress.editing.done {
    -webkit-box-shadow: none;
}

.project-area .outerProgress {
    text-align: center;
    margin: 0 auto;
    position: relative;
}

.project-area .outerProgress .text {
    z-index: 11;
}

.project-area .outerProgress .text__wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.project-area .outerProgress .textCenter {
    z-index: 11;
}

.project-area .outerProgress.normal:before, .project-area .outerProgress.big:before {
    content: '';
    display: block;
    border-radius: 50%;
    position: relative;
    z-index: 10;
    box-shadow: inset 0px 0px 1px 4px #e5e5e5;
    top: 0;
    left: 0;
}

.project-area .outerProgress:hover.normal .mask {
    border: 1px solid #e5e5e5;
    opacity: 1;
    background-color: rgba(221, 221, 221, 0);
    display: block;
}

.project-area .outerProgress.normal:before {
    width: 100px;
    height: 100px;
}

.project-area .outerProgress.big:before {
    width: 180px;
    height: 180px;
}

.project-area .outerProgress.sent:before {
    background-color: #dddddd;
    -webkit-box-shadow: none;
}

.project-area .outerProgress.sent:hover {
    color: white !important;
}

.project-area .outerProgress.sent .pProgressWrapper .pProgressCircle {
    border-color: #dddddd;
}

.project-area .outerProgress.sent .text {
    color: white;
}

.project-area .outerProgress.sent .textCenter {
    color: white;
    position: absolute;
    left: 0;
    right: 0;
}

.project-area .outerProgress.floating {
    float: right;
    margin-left: 30px;
    margin-bottom: 60px;
}

.project-area .savedDesignTip .outerProgress .mask {
    background-color: #dddddd;
    width: 100%;
    height: 100px;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.project-area .savedDesignTip .outerProgress:hover > .mask {
    display: none;
}

.project-area .optionsPanelInner .donePanel,
.project-area .selectionsPanel {
    float: none;
    display: inline;
}

.project-area .savedDesignTip.empty .contentPanel {
    height: 30px;
}

.project-area .savedDesignTip .delete {
    pointer-events: all;
}

.project-area .savedDesignTip .delete.exitEdit {
    right: 10px !important;
    left: auto !important;
    top: 25px !important;
}

.project-area .savedDesignTip .delete.icon4 {
    cursor: pointer;
    background-position: 0px -60px;
    position: absolute;
    right: 20px;
    margin: auto;
    width: 20px;
    height: 20px;
}

.project-area .savedDesignTip .delete.icon4:hover {
    background-position: -20px -60px;
}

.project-area .savedDesignTip > .optionsPanel > .optionsPanelInner {
    padding-top: 0 !important;
    width: 360px !important;
    min-width: unset !important;
}

.project-area .savedDesignTip > .optionsPanel > .optionsPanelInner .donePanel {
    display: block;
    max-height: 80vh;
    overflow: auto;
}

.project-area .savedDesignTip__item {
    display: flex;
    cursor: pointer;
    align-items: center;
    height: 70px;
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
}

.project-area .savedDesignTip__item:hover {
    background-color: #F9F9F9;
}

.project-area .savedDesignTip__item .imageCenter {
    min-width: 60px;
    width: 60px;
    height: 60px;
    margin-right: 16px;
}

.project-area .savedDesignTip__item .imageCenter img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.project-area .savedDesignTip__item .label {
    padding-right: 50px;
}

.project-area .savedDesignTip__item.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.project-area .savedDesignTip .contentPanel.savedJobs {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0;
}

.project-area .savedDesignTip .contentPanel.savedJobs .noSavedDesign {
    width: 230px;
    display: none;
    text-align: right;
}

.project-area .savedDesignTip .contentPanel.savedJobs .newSavedDesign {
    white-space: nowrap;
}

.project-area .savedDesignTip .contentPanel.savedJobs .outerProgress.disabled {
    opacity: 0.4;
}

.project-area .savedDesignTip .contentPanel.savedJobs.expand {
    height: 200px;
}

.project-area .savedDesignTip .contentPanel.savedJobs.expand .delete {
    top: 230px;
}

.project-area .pHelperBtn {
    position: relative;
    width: 20px;
    height: 20px;
    background-position: -475px -720px;
    cursor: pointer;
    text-align: left;
    margin-left: 3px;
    align-items: center;
}

.project-area .pHelperBtn:hover {
    background-position: -475px -780px;
}

.project-area .pHelper {
    display: flex;
}

.project-area .pHelper .pSprite {
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
}

.project-area .pHelper .pTooltip.menu > .optionsPanel > .optionsPanelInner {
    padding: 40px;
    background-color: #f2f2f2;
    top: 20px;
    position: relative;
}

.project-area body .accountTip.pTooltip.menu .options {
    padding: 15px 0;
}

.project-area body .accountTip.pTooltip.menu .options .innerOption {
    position: relative;
    height: initial;
    line-height: initial;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    font-size: 13px;
    color: #D0D0D0;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    cursor: default;
    padding: 10px 25px;
}

.project-area body .accountTip.pTooltip.menu .options .innerOption.name {
    font-size: 12px;
    color: #BCBCBC;
}

.project-area body .accountTip.pTooltip.menu .options .innerOption:not(.disabled):not(.name) {
    color: #444444;
    cursor: pointer;
}

.project-area body .accountTip.pTooltip.menu .options .innerOption:not(.disabled):not(.name):hover {
    color: #868686;
}

.project-area .pTooltip.menu .innerOption:not(.pButton) {
    height: 40px;
    line-height: 40px;
}

.project-area .pTooltip.menu .option:not(.pButton) {
    display: block;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
    padding: 20px 25px 3px;
    height: 49px;
    vertical-align: top;
    line-height: 50px;
}

.project-area .pTooltip.menu .option:not(.pButton):focus {
    outline: 0;
}

.project-area .pTooltip.menu .innerOption {
    box-sizing: border-box;
}

.project-area .pTooltip.menu .innerOption:last-child {
    padding-bottom: 25px;
    height: auto;
}

.project-area .pTooltip.menu:not(.accountTip) .innerOption:first-child {
    padding-top: 14px;
    border-top: 1px solid #dddddd;
}

.project-area .pTooltip.menu .option.thick:not(.pButton) {
    height: 69px;
    line-height: 70px;
}

.project-area .pTooltip.menu .option.border:not(.pButton):not(:first-child) {
    border-top: 1px solid #dddddd;
}

.project-area .pTooltip.menu .option:hover {
    color: #333333;
}

.project-area .pTooltip.menu.visible > .clicking,
.project-area .pTooltip.menu.visible > .trigger {
    display: block;
}

.project-area .pTooltip.menu.visible1 > .clicking {
    display: block;
}

.project-area .pTooltip.menu:hover > .hovering {
    display: block;
}

.project-area .pTooltip.menu.noOptions {
    display: none !important;
}

.project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner .option.name {
    white-space: normal;
    height: auto;
    padding-bottom: 20px;
}

.project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner .loading.icon {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    background-image: url(resources/sprites/loadingb.svg?r=r166.5);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.project-area .pTooltip.menu > .optionsPanel > .optionsPanelInner {
    width: 100%;
    margin-top: 0;
    background-color: white;
    border: 1px solid #E0E0E0;
    padding: 36px 0;
    padding-bottom: 0;
    overflow: hidden;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.1);
}

.project-area .accountTip.pTooltip.menu > .optionsPanel > .optionsPanelInner {
    padding: 0;
}

.project-area .pTooltip.menu > .optionsPanel {
    --arrow-offset: 0px;
    top: 100%;
    margin-top: 10px;
    display: none;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    min-width: 180px;
    z-index: 1000;
    text-align: left;
    cursor: default;
}

.project-area .pTooltip.menu:not(.notip):not(.pHelperBtn) > .optionsPanel:after {
    content: ' ';
    position: absolute;
    top: -19px;
    right: 50%;
    right: calc(50% - var(--arrow-offset));
    width: 20px;
    height: 20px;
    background-position: 0 -80px;
    z-index: 1000;
}

.project-area .pTooltip.menu.confirm > .optionsPanel {
    top: 13px;
    right: 0;
    min-width: 155px;
    width: 250px;
}

.project-area .pTooltip.menu.confirm .optionsPanel:after {
    right: -1px;
}

.project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner {
    padding: 25px;
    line-height: 20px;
    width: calc(100% - 50px);
}

.project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner .title {
    text-align: left;
    margin-bottom: 25px;
}

.project-area .pTooltip.menu.confirm > .optionsPanel > .optionsPanelInner .confirmButton {
    margin-right: 10px;
}

.project-area body.account .pnlHeader,
.project-area body.store .pnlHeader {
    position: fixed;
}

.project-area .pnlHeader {
    display: flex;
    justify-content: space-between;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    height: 80px;
    background-color: white;
    position: relative;
}

.project-area .pnlStoreBodyCatalogForm .textBanners,
.project-area .pnlHeader .textBanners {
    top: 100%;
    position: absolute;
    width: 100%;
    height: 100%;
}

.project-area .pnlHeader.filtering {
    margin-bottom: 40px;
}

.project-area .pnlHeader .textBanners {
    font-family: "Crimson Text", serif;
    font-size: 20px;
    letter-spacing: 1px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.04), 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt1 {
    background-color: #f3ede8;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt1 {
    background-color: #e9e0da;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt2 {
    background-color: #eef1ed;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt2 {
    background-color: #d8ddd7;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt3 {
    background-color: #A36B59;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt3 {
    background-color: #8C5D4D;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt4 {
    background-color: #4A5448;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt4 {
    background-color: #363E35;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt5 {
    background-color: #2A3C4F;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt5 {
    background-color: #212F3E;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item.txtbanner_opt6 {
    background-color: #DBBAAE;
}

.project-area .pnlHeader .textBanners:hover .pnlBannerPromotion_Item.txtbanner_opt6 {
    background-color: #CDAEA2;
}

.project-area .pnlStoreBodyCatalogForm .textBanners {
    height: 80px;
}

.project-area body.selectDesignedProduct .scrollingFloatRight li[id="account_li"],
.project-area body.selectDesignedProduct .scrollingFloatRight li.vertical_line,
.project-area body.selectDesignedProduct .scrollingFloatRight li[id="cart_li"] {
    display: none;
}

.project-area .pnlBannerPromotionInnerBox,
.project-area .pnlMainPromotionInnerBox {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.project-area .pnlBannerPromotionInnerBox:hover,
.project-area .pnlMainPromotionInnerBox:hover {
    cursor: pointer;
}

.project-area .pnlBannerPromotionBoxPhotos,
.project-area .pnlMainPromotionBoxPhotos {
    margin: 0;
    width: 4200%;
    height: 100%;
    padding: 0;
}

.project-area .pnlHeader .textBanners .pnlBannerPromotion_Item {
    width: 2.38095%;
}

.project-area .pnlBannerPromotion_Item,
.project-area .pnlStoreCatalogMainPromotion_Item {
    background-size: cover;
    height: auto;
    margin-left: 0;
    padding: 0;
    float: left;
    overflow: hidden;
}

.project-area .pnlBannerPromotion_Item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #444;
    padding: 0 100px;
    box-sizing: border-box;
}

.project-area .pnlBannerPromotion_Item.dark {
    color: #fff;
}

.project-area .pnlBannerPromotion_Item.dark .tear.icon4 {
    background-position: -470px -800px;
}

.project-area .pnlBannerPromotion_Item .tear.icon4 {
    width: 20px;
    margin: 0 45px;
    height: 100%;
    background-position: -470px -880px;
}

.project-area .pnlBannerPromotion_Item .text2 {
    position: relative;
    top: 3px;
    left: -10px;
    padding: 10px;
}

.project-area .pnlBannerPromotion_Item:after,
.project-area .pnlStoreCatalogMainPromotion_Item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    padding-top: calc( 400% / 17);
}

.project-area body.store .pnlHeader {
    z-index: 9999;
}

.project-area .pnlHeader:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #dddddd;
    left: 0;
    position: absolute;
    bottom: -1px;
    /*z-index: 10;*/
    pointer-events: none;
}

.project-area .pnlHeader > * {
    order: 2;
}

.project-area .pnlHeader:not(.accountNav) #navigationMenu {
    order: 1;
}

.project-area .TILE_SIZE {
    height: 225px;
    width: 300px;
    padding: 40px 0;
}

.project-area .hideWhatsNext .whatsNext {
    display: none;
}

.project-area .hideWhatsNext .whatsNextProductBanners {
    display: none;
}

.project-area .fullscreenDialog .block.Image .watermark,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark,
.project-area .photostream2 .block.Image .watermark,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark, .project-area.clonedImage.animating .watermark {
    position: absolute;
    bottom: 0;
    top: auto;
    left: auto;
    z-index: 1;
    min-width: 45px;
    min-height: 21px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark0,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark0,
.project-area .photostream2 .block.Image .watermark.watermark0,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark0, .project-area.clonedImage.animating .watermark.watermark0 {
    display: none;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark2,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark2,
.project-area .photostream2 .block.Image .watermark.watermark2,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark2, .project-area.clonedImage.animating .watermark.watermark2 {
    background-position: bottom left;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark3,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark3,
.project-area .photostream2 .block.Image .watermark.watermark3,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark3, .project-area.clonedImage.animating .watermark.watermark3 {
    left: 0;
    right: 0;
    margin: 0 auto;
    background-position: bottom;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark4,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark4,
.project-area .photostream2 .block.Image .watermark.watermark4,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark4, .project-area.clonedImage.animating .watermark.watermark4 {
    background-position: bottom right;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark5,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark5,
.project-area .photostream2 .block.Image .watermark.watermark5,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark5, .project-area.clonedImage.animating .watermark.watermark5 {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark6,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark6,
.project-area .photostream2 .block.Image .watermark.watermark6,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark6, .project-area.clonedImage.animating .watermark.watermark6 {
    background-position: bottom left;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark7,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark7,
.project-area .photostream2 .block.Image .watermark.watermark7,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark7, .project-area.clonedImage.animating .watermark.watermark7 {
    background-position: bottom right;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark8,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark8,
.project-area .photostream2 .block.Image .watermark.watermark8,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark8, .project-area.clonedImage.animating .watermark.watermark8 {
    right: 0;
    bottom: 0;
    background-position: bottom right;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark9,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark9,
.project-area .photostream2 .block.Image .watermark.watermark9,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark9, .project-area.clonedImage.animating .watermark.watermark9 {
    left: 0;
    bottom: 0;
    background-position: bottom left;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark10,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10,
.project-area .photostream2 .block.Image .watermark.watermark10,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10, .project-area.clonedImage.animating .watermark.watermark10 {
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    background-repeat: repeat;
    background-size: 6vw;
    background-position: 0 0;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark10.size1,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size1,
.project-area .photostream2 .block.Image .watermark.watermark10.size1,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size1, .project-area.clonedImage.animating .watermark.watermark10.size1 {
    background-size: 10vw;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark10.size2,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size2,
.project-area .photostream2 .block.Image .watermark.watermark10.size2,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size2, .project-area.clonedImage.animating .watermark.watermark10.size2 {
    background-size: 14.4vw;
}

.project-area .fullscreenDialog .block.Image .watermark.watermark10.size3,
.project-area .selectPhotos .pnlLeft .photoList ul li .chooseImage .watermark.watermark10.size3,
.project-area .photostream2 .block.Image .watermark.watermark10.size3,
.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.watermark10.size3, .project-area.clonedImage.animating .watermark.watermark10.size3 {
    background-size: 70%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size0 {
    width: 12%;
    height: 5.6%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size0.watermark10 {
    background-size: 12%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size1 {
    width: 20%;
    height: 9.33%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size1.watermark10 {
    background-size: 20%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size2 {
    width: 30%;
    height: 14%;
}

.project-area .pnlCompositionCropBox:not(.emptybox) .watermark.size2.watermark10 {
    background-size: 30%;
}

.project-area .fullscreenDialog .block.Image .watermark.size0 {
    width: 10vw;
    height: 8.3vw;
}

.project-area .fullscreenDialog .block.Image .watermark.size0.watermark10 {
    background-size: 10vw;
}

.project-area .fullscreenDialog .block.Image .watermark.size1 {
    width: 14.4vw;
    height: 12vw;
}

.project-area .fullscreenDialog .block.Image .watermark.size1.watermark10 {
    background-size: 14.4vw;
}

.project-area .fullscreenDialog .block.Image .watermark.size2 {
    width: 24vw;
    height: 20vw;
}

.project-area .fullscreenDialog .block.Image .watermark.size2.watermark10 {
    background-size: 24vw;
}

.project-area #downloadPrefs .content,
.project-area #downloadPrefs .strip,
.project-area #downloadPrefs .strip > span {
    margin: 0;
    padding: 0;
}

.project-area #downloadPrefs .window {
    width: 500px;
    overflow: initial;
}

.project-area #downloadPrefs .strip > span {
    position: relative;
    width: 418px;
}

.project-area #downloadPrefs .releaseform, .project-area #downloadPrefs .termsWrapper {
    text-align: start;
}

.project-area #downloadPrefs .releaseform {
    letter-spacing: 0.2px;
}

.project-area #downloadPrefs .releaseform a {
    text-decoration: underline;
}

.project-area #downloadPrefs .releaseform a:hover {
    color: #BCBCBC;
}

.project-area #downloadPrefs .downloadRes {
    margin: 60px 0 40px;
}

.project-area #downloadPrefs .downloadTo {
    margin: 50px 0 60px;
}

.project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard.active {
    background-color: #ECECEC;
}

.project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard.active:hover {
    background-color: #E0E0E0;
}

.project-area #downloadPrefs .downloadTo .downloadBtnsWrap .pButtonStandard:hover {
    background-color: #F9F9F9;
}

.project-area #downloadPrefs .downloadContinue {
    margin: 40px 0;
}

.project-area #downloadPrefs .releaseform + .termsWrapper {
    margin-top: 24px;
}

.project-area #downloadPrefs .downloadTitle {
    margin: 15px;
}

.project-area #downloadPrefs .downloadTitle.L05 {
    letter-spacing: 0.5px;
}

.project-area #downloadPrefs .downloadTitle.pHelper {
    justify-content: center;
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn {
    margin: auto 3px;
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel {
    margin-right: -160px;
    margin-top: -110px;
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner {
    text-transform: none;
    box-sizing: content-box;
    width: 240px;
    letter-spacing: 1px;
    line-height: 19px;
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription {
    font-size: 13px;
    letter-spacing: 0.2px;
    margin: 16px 0;
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription dt:after {
    content: ':';
}

.project-area #downloadPrefs .downloadTitle.pHelper .pHelperBtn .optionsPanel .optionsPanelInner .productDescription dd {
    margin: 0;
}

.project-area #downloadPrefs .downloadRes .downloadTitle {
    font-weight: 500;
    letter-spacing: 1px;
}

.project-area #downloadPrefs .downloadRes .limitedDownloads {
    margin-top: 10px;
}

.project-area #downloadPrefs .downloadRes.noResBtns .downloadTitle {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.project-area #downloadPrefs .downloadRes.noResBtns .downloadBtnsWrap {
    display: none;
}

.project-area #downloadPrefs .downloadBtnsWrap {
    display: flex;
    width: 100%;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard {
    width: auto;
    flex-grow: 1;
    flex-basis: 0;
    height: 50px;
    padding: 0;
    color: #868686;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 0px 1px #ECECEC;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard:hover {
    color: #444444;
    background-color: #F9F9F9;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active {
    color: #444444;
    background-color: #ECECEC;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active:hover {
    background-color: #E0E0E0;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard.active.icon4Before:before {
    position: static;
    margin: 0 -3px 0 -10px;
    background-position: -240px -1040px;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"] {
    color: #fff;
    background-color: #444444;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"]:hover {
    background-color: #1C1C1C;
}

.project-area #downloadPrefs .downloadBtnsWrap .pButtonStandard[data-type="continue"].icon4Before:before {
    position: static;
    margin: 0 -3px 0 -10px;
    background-position: -240px -1040px;
}

.project-area #downloadPrefs:not(.hasBuyBtn) [data-type="buy"] {
    display: none;
}

.project-area #downloadPrefs:not(.hasDlHighResBtn) [data-type="highres"] {
    display: none;
}

.project-area #downloadPrefs:not(.hasDlLowResBtn) [data-type="lowres"] {
    display: none;
}

.project-area #downloadPrefs:not(.hasExternal) .downloadTo {
    display: none;
}

.project-area #mediaDownloadWait {
    --icon-size: 18px;
}

.project-area #mediaDownloadWait.ready .waiting-panel {
    display: none;
}

.project-area #mediaDownloadWait:not(.ready) .ready-panel {
    display: none;
}

.project-area #mediaDownloadWait .content {
    margin: 0;
    padding: 80px 40px;
}

.project-area #mediaDownloadWait icon-elem {
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0 8px;
}

.project-area #mediaDownloadWait .panel > icon-elem {
    display: none;
}

.project-area #mediaDownloadWait .pButtonStandard {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    width: auto;
    height: 50px;
    padding: 0;
    margin-top: 86px;
    letter-spacing: 2.7px;
    color: #FFF;
    background-color: #444444;
}

.project-area #mediaDownloadWait .pButtonStandard:hover {
    background-color: #1C1C1C;
}

.project-area #mediaDownloadWait .title {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.project-area #mediaDownloadWait .message {
    font-weight: 500;
    letter-spacing: 1px;
    margin: 72px 0 46px;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip > .optionsPanel > .optionsPanelInner,
.project-area #galleryHeader .pTooltip.menu.downloadMsg > .optionsPanel > .optionsPanelInner {
    min-width: auto;
    padding: 0;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip > .optionsPanel > .optionsPanelInner {
    min-width: auto;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel {
    height: auto;
    width: 270px;
    margin: 30px;
    padding: 0;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pButtonStandard {
    width: 100%;
    margin: 21px 0;
    position: relative;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pButtonStandard .notification {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 30px;
    width: auto;
    height: 15px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #333333;
    border-radius: 10px;
    color: white;
    font-size: 11px;
    z-index: 1;
    cursor: pointer;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .desc,
.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel a.notification_active {
    float: none;
    margin: 0;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .desc {
    margin-top: 30px;
}

.project-area #galleryHeader .pTooltip.menu.downloadTip .contentPanel .pref {
    margin-top: 10px;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg {
    float: right;
    padding-top: 10px;
    height: 50px;
    right: -30px;
    position: relative;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg > .optionsPanel {
    min-width: 300px;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .text {
    width: 100%;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg.downloadMsg--tooltip .msg {
    padding-left: 25px;
    padding-right: 25px;
    line-height: 18px;
    width: 250px;
    text-align: center;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .contentPanel {
    min-height: auto;
    display: flex;
    padding: 0;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .thumb {
    margin: 22px;
    width: 65px;
    height: 65px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .text {
    width: 220px;
    margin: 25px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .text .numFree {
    margin-top: 4px;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .msg {
    width: 220px;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .links > div {
    display: inline-block;
    margin-top: 15px;
}

.project-area #galleryHeader .pTooltip.menu.downloadMsg .batch {
    margin-left: 25px;
}

.project-area .tieredPricingAI {
    display: inline-flex;
    flex-direction: column;
    font-weight: 700;
    grid-template-columns: max-content 1fr;
    column-gap: 1em;
    /* host element used only for live preview */
    /* every generated row: two cells, fixed 1 em gap */
    /* no extra font/spacing rules */
}

.project-area .tieredPricingAI #summary-output {
    display: inline-flex;
    flex-direction: column;
}

.project-area .tieredPricingAI .summary-row {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 1em;
    align-items: baseline;
}

.project-area .tieredPricingAI .summary-label {
    justify-self: start;
}

.project-area .tieredPricingAI .summary-price {
    justify-self: end;
    white-space: nowrap;
}

.project-area .quickPrints .products .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 20px 0;
}

.project-area .quickPrints .products .navbar .downloadproductnav {
    padding: 0 10px;
    cursor: pointer;
}

.project-area .quickPrints .products .navbar .downloadproductnav.active {
    color: #444444;
}

.project-area .quickPrints .products .downloads {
    margin: 30px auto;
    max-width: 460px;
    display: none;
}

.project-area .quickPrints .products .downloads.active {
    display: block;
}

.project-area .quickPrints .products .downloads .cost {
    text-align: center;
}

.project-area .quickPrints .products .downloads .cost .total {
    display: none;
    line-height: 18px;
}

.project-area .quickPrints .products .downloads .cost .perone {
    margin-top: 15px;
}

.project-area .quickPrints .products .downloads .cost .tiered {
    color: #AB4D2E;
    margin-top: 20px;
    font-size: 14px;
    line-height: 19px;
}

.project-area .quickPrints .products .downloads .dlProds {
    margin: 60px auto;
}

.project-area .quickPrints .products .downloads .dlProds .dlProduct {
    height: 40px;
    margin-top: 20px;
    line-height: 40px;
}

.project-area .quickPrints .products .downloads .dlProds .dlProduct .pButtonStandard {
    width: 280px;
    margin: 0 auto;
}

.project-area #buyMsg.pTooltip {
    position: absolute;
}

.project-area #buyMsg.pTooltip .optionsPanel__cross {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    right: 15px;
    background-image: url(./resources/sprites/client.svg?r=r166.5);
    background-position: 0 -60px;
    cursor: pointer;
}

.project-area #buyMsg.pTooltip .optionsPanel__cross:hover {
    opacity: .5;
    background-position-x: -20px;
}

.project-area #buyMsg.pTooltip .optionsPanel:after {
    content: ' ';
    position: absolute;
    bottom: initial;
    top: calc(100% - 1px);
    right: 50%;
    width: 20px;
    height: 20px;
    background-position: -20px -80px;
    z-index: 1000;
}

.project-area #buyMsg.pTooltip .optionsPanel .optionsPanelInner {
    padding: 0;
    width: 315px;
    height: 130px;
}

.project-area #buyMsg.pTooltip .optionsPanel .optionsPanelInner .msg {
    margin: 36px 40px;
}

.project-area .pTooltipOverlay {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(128, 128, 128, 0.5);
    z-index: 9999;
}

.project-area .pTooltipOverlay + .pTooltip {
    z-index: 99999;
}

.project-area .noPromotionBanner .textBanners {
    display: none;
}

.project-area .forceHide {
    display: none !important;
}

.project-area .mediaViewMode #photoStream {
    margin-top: 80px;
}

.project-area .slideshow-preview-dialog iframe {
    display: block;
}

.project-area .smallIcon,
.project-area .bigIcon,
.project-area .hugeIcon {
    background-image: url("./resources/sprites/galleryuispriteb.png?r=r166.5");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.project-area .smallIcon {
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.project-area .bigIcon {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.project-area .hugeIcon {
    width: 80px;
    height: 80px;
}

.project-area .simpleTooltip:not(#dummy) {
    position: absolute;
    box-sizing: border-box;
    max-width: 240px;
    top: calc( 100% + 10px);
    padding: 12px 14px;
    text-align: left;
    line-height: 150%;
    opacity: 0;
    visibility: hidden;
    pointer-events: all;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    z-index: 9999;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    font-size: 12px;
    color: #F2F2F2;
    background-color: #444444;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    /* Control */
    /* Arrow */
}

.project-area .simpleTooltip:not(#dummy).centerText {
    text-align: center;
}

.project-area .simpleTooltip:not(#dummy).above {
    top: auto;
    bottom: calc( 100% + 10px);
}

.project-area .simpleTooltip:not(#dummy).above:not(.noArrow):after {
    top: auto;
    bottom: -8px;
    border-bottom: none;
    border-top: 10px solid #444444;
}

.project-area .simpleTooltip:not(#dummy).centerPosition {
    left: 50%;
    transform: translateX(-50%);
}

.project-area .simpleTooltip:not(#dummy).show,
.project-area :hover > .simpleTooltip:not(#dummy):not(.manual):not(:hover),
.project-area :hover > .simpleTooltip:not(#dummy):not(.manual):not(.outerHoverOnly),
.project-area :focus > .simpleTooltip:not(#dummy):not(.manual):not(.focusOnly) {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s, opacity 0.5s ease;
}

.project-area .simpleTooltip:not(#dummy):not(.noArrow):after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #444444;
    top: -8px;
    left: 10px;
}

.project-area .simpleTooltip:not(#dummy):not(.noArrow).centerArrow:after {
    left: 50%;
    margin-left: -10px;
}

.project-area .dialog-2:not(#dummy) .window {
    color: #444444;
    background-color: #FFFFFF;
}

.project-area .dialog-2:not(#dummy).standard-style {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
}

.project-area .dialog-2:not(#dummy).standard-style * {
    box-sizing: border-box;
}

.project-area .dialog-2:not(#dummy).standard-style .window {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
}

.project-area .dialog-2:not(#dummy).standard-style .footbar {
    color: #444444;
    border-color: #ECECEC;
}

.project-area .dialog-2:not(#dummy).standard-style .footbar button {
    color: unset;
    font: unset;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background-color: #FFFFFF;
}

.project-area .dialog-2:not(#dummy).standard-style .footbar button:hover {
    background-color: #F9F9F9;
}

.project-area .dialog-2:not(#dummy).simpleAlert .window, .project-area .dialog-2:not(#dummy).simpleError .window, .project-area .dialog-2:not(#dummy).simpleConfirm .window {
    width: auto;
}

@media (min-width: 651px) {
    .project-area .dialog-2:not(#dummy).simpleAlert .window, .project-area .dialog-2:not(#dummy).simpleError .window, .project-area .dialog-2:not(#dummy).simpleConfirm .window {
        min-width: 400px;
    }
}

.project-area .dialog-2:not(#dummy).simpleAlert .window .content .strip div:not(:first-child), .project-area .dialog-2:not(#dummy).simpleError .window .content .strip div:not(:first-child), .project-area .dialog-2:not(#dummy).simpleConfirm .window .content .strip div:not(:first-child) {
    margin-top: 30px;
}

.project-area .dialog-2:not(#dummy).simpleAlert .footbar, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar {
    border: none;
    justify-content: center;
    height: auto;
    margin: 0 30px 40px;
}

.project-area .dialog-2:not(#dummy).simpleAlert .footbar button, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar button {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    letter-spacing: 2px;
    background-color: #ECECEC;
    flex: initial;
    width: 100%;
    height: 40px;
    min-width: 160px;
    margin: 0 10px;
    padding: 0 25px;
}

.project-area .dialog-2:not(#dummy).simpleAlert .footbar button:hover, .project-area .dialog-2:not(#dummy).simpleConfirm .footbar button:hover {
    background-color: #E0E0E0;
}

.project-area .dialog-2:not(#dummy).simpleError .strip:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("./resources/sprites/client.svg?r=r166.5");
    background-position: -20px -620px;
    background-repeat: no-repeat;
    margin: 10px auto;
}

.project-area .dialog-2:not(#dummy).simpleError .strip.done:before {
    width: 40px;
    height: 40px;
    background-image: url("resources/sprites/uispriteb.png?r=r166.5");
    background-position: -395px -760px;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .content, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .content, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .content {
    position: unset;
    flex: unset;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .content .strip, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .content .strip, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .content .strip {
    padding: 0;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar {
    border: none;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar button {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    letter-spacing: 2px;
    color: #FFFFFF;
    background-color: #444444;
    height: 40px;
    margin: 10px;
    padding: 0 25px;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleAlert .window .footbar button, .mobileDevice .project-area .dialog-2:not(#dummy).simpleError .window .footbar button {
    min-width: 160px;
}

.mobileDevice .project-area .dialog-2:not(#dummy).simpleConfirm .window .footbar button {
    min-width: 130px;
}

.project-area .mobileDialog.simpleError .caption {
    margin-bottom: 10px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #AAA;
    font-weight: 400;
}

.project-area .banners {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    color: #444444;
}

.project-area .banners .header {
    text-align: center;
}

.project-area .banners .title {
    text-transform: uppercase;
}

.project-area .banners .subtitle {
    font-family: "Crimson Text", serif;
    font-style: italic;
    text-transform: none;
    font-weight: 400;
    margin-bottom: 48px;
}

.project-area .banners:not(.hasSubtitle) .subtitle {
    display: none;
}

.project-area .banners .banner .text {
    text-transform: uppercase;
    font-weight: 700;
}

.project-area .banners .banner .subtext {
    font-size: 13px;
    color: #444444;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 150%;
}

.project-area .banners {
    letter-spacing: 2px;
}

.project-area .banners .subtitle {
    font-size: 16px;
    margin-bottom: 48px;
}

.project-area .banners.hasSubtitle .title {
    margin-bottom: 32px;
}

.project-area .banners .banner .text {
    font-size: 16px;
}

.project-area .dialog-2 {
    opacity: 0;
    z-index: 1100000;
    transition-duration: 75ms;
    transition: opacity;
    display: block;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(188, 188, 188, 0.9);
}

.project-area .dialog-2.show {
    opacity: 1;
    transition: opacity;
    transition-duration: 300ms;
}

.project-area .dialog-2.show .window {
    transition-duration: 300ms;
}

.project-area .dialog-2 .window {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    z-index: 10000;
    transition: opacity, transform;
    transition-duration: 75ms;
}

.project-area .dialog-2 .content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    text-align: center;
    line-height: 166%;
}

.project-area .dialog-2 .content .strip {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.project-area .dialog-2 .content .strip > span {
    margin-top: 24px;
}

.project-area .dialog-2 .content icon {
    display: block;
}

.project-area .dialog-2 .content .img {
    width: 185px;
    height: 123px;
    margin-top: 40px;
    display: inline-block;
}

.project-area .dialog-2 .footbar {
    height: 60px;
    border-top: 1px solid currentColor;
    display: flex;
    flex-direction: row;
}

.project-area .dialog-2 .footbar button {
    flex: 1;
    align-content: center;
    border: none;
    cursor: pointer;
}

.project-area .dialog-2 .footbar button[disabled] {
    background-color: #D0D0D0;
    color: rgba(236, 236, 236, 0.78);
    cursor: not-allowed;
}

.project-area .dialog-2 .footbar button:not(:last-child) {
    border-right: 1px solid #ECECEC;
}

.project-area .dialog-2 .close-x-button {
    position: fixed;
    z-index: 10001;
}

.project-area .dialog-2.hideCloseBtn .close-x-button {
    display: none;
}

.project-area body.dialog-2-open {
    min-height: 100%;
}

.project-area body.dialog-2-open > *:not(.dialog-2):not(.loadingDialog):not(.couponRegisterMessageDialog):not(#chat-widget-container) {
    filter: blur(5px);
}

.project-area .dialog-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-area .dialog-2.show .window {
    transform: scale(1);
}

.project-area .dialog-2 .window {
    position: fixed;
    transform: scale(0.8);
}

.project-area .dialog-2 .close-x-button {
    top: 40px;
    right: 40px;
}

.project-area .dialog-2.standard-style .window {
    width: 550px;
    height: auto;
    min-height: 15em;
}

.project-area .dialog-2.standard-style .content {
    padding: 40px;
    padding-top: 0;
}

.project-area body > .overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(244, 244, 244, 0.7);
    z-index: 99999999;
}

.project-area body.login.noCover #maincanvas {
    display: flex;
    height: 100vh;
}

.project-area body.login.noCover #maincanvas .userlogin {
    margin: auto;
}

.project-area .userlogin {
    position: relative;
    margin: auto;
    padding: 0;
    text-align: left !important;
}

.project-area .userlogin * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    border-radius: 0;
    text-decoration: inherit;
    letter-spacing: inherit;
    -webkit-appearance: none;
}

.project-area .userlogin *:focus {
    outline: none;
}

.project-area .userlogin.sensitive .notMe {
    display: none !important;
}

.project-area .userlogin .password:not(.showPassActive) span {
    font-size: 16px;
}

.project-area .userlogin icon-elem svg {
    width: var(--icon-size, 40px);
    height: var(--icon-size, 40px);
}

.project-area .userlogin .icon4 {
    background-color: transparent;
}

.project-area .userlogin .icon4.showPass {
    position: absolute;
    right: 4px;
    /* IE fix */
    top: 0;
    bottom: 0;
    margin: auto;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before,
.project-area .userlogin .icon4Before:before {
    position: relative;
    flex-shrink: 0;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label.iconSmall:before,
.project-area .userlogin .icon4Before.iconSmall:before {
    width: 20px;
    height: 20px;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .checkboxField label:before {
    width: 20px;
    height: 20px;
}

.project-area .userlogin .userloginInner .screens .screen .selectField:after,
.project-area .userlogin .icon4After:after {
    position: relative;
    flex-shrink: 0;
}

.project-area .userlogin .userloginInner .screens .screen .iconSmall.selectField:after,
.project-area .userlogin .icon4After.iconSmall:after {
    width: 20px;
    height: 20px;
}

.project-area .userlogin .userloginInner .screens .screen .selectField:after {
    width: 20px;
    height: 20px;
}

.project-area .userlogin:after {
    content: '';
    opacity: 0;
    pointer-events: none;
    background-color: #FFFFFFe6;
    background-image: url("./resources/singles/loading.svg?r=r166.5");
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition-property: opacity;
    transition-delay: 0s, 0.4s;
    transition-duration: 0.4s;
    transition-timing-function: ease;
}

.project-area .userlogin.progress:after {
    opacity: 1;
    pointer-events: auto;
}

.project-area .userlogin .userloginInner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.project-area .userlogin .userloginInner .screens {
    list-style-type: none;
    width: 100%;
    height: 100%;
}

.project-area .userlogin .userloginInner .screens .screen {
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    transition: all 0.4s ease;
}

.project-area .userlogin:not(.fixedScreen) .userloginInner .screens .screen {
    position: absolute;
}

.project-area .userlogin .userloginInner .screens .screen:not(:only-child) {
    transform: translateX(-100%);
}

.project-area .userlogin .userloginInner .screens .screen.active {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
    box-sizing: border-box;
}

.project-area .userlogin .userloginInner .screens .screen.active ~ .screen {
    transform: translateX(100%);
}

.project-area .userlogin .userloginInner .screens .screen button, .project-area .userlogin .userloginInner .screens .screen a, .project-area .userlogin .userloginInner .screens .screen label {
    cursor: pointer;
}

.project-area .userlogin .userloginInner .screens .screen .password, .project-area .userlogin .userloginInner .screens .screen .passField {
    position: relative;
}

.project-area .userlogin .userloginInner .screens .screen .header,
.project-area .userlogin .userloginInner .screens .screen .title,
.project-area .userlogin .userloginInner .screens .screen .passDesc,
.project-area .userlogin .userloginInner .screens .screen .emailField,
.project-area .userlogin .userloginInner .screens .screen .passField {
    width: 100%;
}

.project-area .userlogin .userloginInner .screens .screen .footer {
    line-height: 150%;
}

.project-area .userlogin .userloginInner .screens .screen .poweredBy .logo {
    display: inline-block;
    vertical-align: bottom;
    height: 25px;
    width: 32px;
    background-image: url(resources/sprites/dashboard.svg?r=r166.5);
    background-position: -665px -630px;
}

.project-area .userlogin .userloginInner .screens .screen .title h3 {
    line-height: 150%;
}

.project-area .userlogin .userloginInner .screens .screen .title .banner .brandLogo {
    margin: 0 auto;
    width: 162px;
    height: 63px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.project-area .userlogin .userloginInner .screens .screen .title .galleryVendor {
    white-space: nowrap;
}

.project-area .userlogin .userloginInner .screens .screen .title .galleryList {
    margin: 0 auto;
}

.project-area .userlogin .userloginInner .screens .screen .title .galleryList .galleryTitle {
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

.project-area .userlogin .userloginInner .screens .screen .checkbox,
.project-area .userlogin .userloginInner .screens .screen .checkboxField label {
    display: inline-flex;
}

.project-area .userlogin .userloginInner .screens .screen input[type="checkbox"] {
    display: none;
}

.project-area .userlogin .userloginInner .screens .screen .selectField:after {
    position: absolute;
    right: 0;
    pointer-events: none;
}

.project-area .userlogin .userloginInner .screens .screen .link {
    border: none;
    background: none;
}

.project-area .userlogin .userloginInner .screens .screen .link .noticeable {
    text-decoration: underline;
}

.project-area .userlogin .userloginInner .screens .screen .forgotPassWrap button {
    position: relative;
}

.project-area .userlogin .userloginInner .screens .screen .showPass:not(.active), .project-area .userlogin .userloginInner .screens .screen .showPass:not(.active):hover {
    text-decoration: line-through;
}

.project-area .userlogin .userloginInner .screens .screen .errorMsg {
    line-height: 135%;
}

.project-area .userlogin .userloginInner .screens .screen .pictimeZForm .field {
    height: auto;
}

.project-area body.ptRTL .loginBox {
    /*
	direction:ltr;

	li {
		direction:rtl;
	}
	*/
}

.project-area body.ptRTL .loginBox .screens .screen:not(:only-child) {
    transform: translateX(100%);
}

.project-area body.ptRTL .loginBox .screens .screen.active {
    transform: translateX(0);
}

.project-area body.ptRTL .loginBox .screens .screen.active ~ .screen {
    transform: translateX(-100%);
}

.project-area .loginBook,
.project-area .loginBox {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    background-color: #FFFFFF;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #1C1C1C;
}

.project-area .loginBook input,
.project-area .loginBox input {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
}

.project-area .loginBook .svg-icon:not(.fill-icon),
.project-area .loginBox .svg-icon:not(.fill-icon) {
    stroke: #1C1C1C;
    fill: transparent;
}

.project-area .loginBook .svg-icon.fill-icon,
.project-area .loginBox .svg-icon.fill-icon {
    fill: #1C1C1C;
}

.project-area .loginBook.link:hover,
.project-area .loginBook .link:hover, .project-area .loginBook a:hover,
.project-area .loginBox.link:hover,
.project-area .loginBox .link:hover,
.project-area .loginBox a:hover {
    color: #868686;
}

.project-area .loginBook.link:focus,
.project-area .loginBook .link:focus, .project-area .loginBook a:focus,
.project-area .loginBox.link:focus,
.project-area .loginBox .link:focus,
.project-area .loginBox a:focus {
    color: #868686;
}

.project-area .loginBook .screen .signup a, .project-area .loginBox .screen .signup .loginBook a, .project-area .loginBook .loginBox .screen .footer, .project-area .loginBox .screen .loginBook .footer, .project-area .loginBook .screen .changeUser,
.project-area .loginBook .screen .notYou,
.project-area .loginBook .screen .loginDesc,
.project-area .loginBook .screen .autoBack, .project-area .loginBox .screen .loginBook .changeUser, .project-area .loginBox .screen .loginBook .notYou, .project-area .loginBox .screen .loginBook .loginDesc, .project-area .loginBox .screen .loginBook .autoBack, .project-area .loginBook .screen .passDesc .galleryList, .project-area .loginBox .screen .passDesc .loginBook .galleryList, .project-area .loginBook .screen.twoFactor form .notReceived, .project-area .loginBook .screen.twoFactor form .resend, .project-area .loginBook .screen.twoFactorError form .notReceived, .project-area .loginBook .screen.twoFactorError form .resend, .project-area .loginBook .screen.twoFactorMessage form .notReceived, .project-area .loginBook .screen.twoFactorMessage form .resend, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived, .project-area .loginBox .screen.twoFactor form .loginBook .resend, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived, .project-area .loginBox .screen.twoFactorError form .loginBook .resend, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend, .project-area .loginBook .screens .screen .title h3, .project-area .loginBook .screens .screen .openLogin, .project-area .loginBook .screens .screen form .external .label, .project-area .loginBook .screens .screen .footer,
.project-area .loginBook .screen .signup .loginBox a,
.project-area .loginBox .screen .signup a,
.project-area .loginBox .screen .footer,
.project-area .loginBook .screen .loginBox .changeUser,
.project-area .loginBook .screen .loginBox .notYou,
.project-area .loginBook .screen .loginBox .loginDesc,
.project-area .loginBook .screen .loginBox .autoBack,
.project-area .loginBox .screen .changeUser,
.project-area .loginBox .screen .notYou,
.project-area .loginBox .screen .loginDesc,
.project-area .loginBox .screen .autoBack,
.project-area .loginBook .screen .passDesc .loginBox .galleryList,
.project-area .loginBox .screen .passDesc .galleryList,
.project-area .loginBook .screen.twoFactor form .loginBox .notReceived,
.project-area .loginBook .screen.twoFactor form .loginBox .resend,
.project-area .loginBook .screen.twoFactorError form .loginBox .notReceived,
.project-area .loginBook .screen.twoFactorError form .loginBox .resend,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .resend,
.project-area .loginBox .screen.twoFactor form .notReceived,
.project-area .loginBox .screen.twoFactor form .resend,
.project-area .loginBox .screen.twoFactorError form .notReceived,
.project-area .loginBox .screen.twoFactorError form .resend,
.project-area .loginBox .screen.twoFactorMessage form .notReceived,
.project-area .loginBox .screen.twoFactorMessage form .resend,
.project-area .loginBox .loginBook .screens .screen .title h3,
.project-area .loginBook .screens .screen .title .loginBox h3,
.project-area .loginBox .loginBook .screens .screen .openLogin,
.project-area .loginBook .screens .screen .loginBox .openLogin,
.project-area .loginBox .loginBook .screens .screen form .external .label,
.project-area .loginBook .screens .screen form .external .loginBox .label,
.project-area .loginBox .loginBook .screens .screen .footer,
.project-area .loginBook .screens .screen .loginBox .footer {
    color: #868686;
}

.project-area .loginBook .screen .signup a.link:hover, .project-area .loginBox .screen .signup .loginBook a.link:hover, .project-area .loginBook .loginBox .screen .link.footer:hover, .project-area .loginBox .screen .loginBook .link.footer:hover, .project-area .loginBook .screen .link.changeUser:hover,
.project-area .loginBook .screen .link.notYou:hover,
.project-area .loginBook .screen .link.loginDesc:hover,
.project-area .loginBook .screen .link.autoBack:hover, .project-area .loginBox .screen .loginBook .link.changeUser:hover, .project-area .loginBox .screen .loginBook .link.notYou:hover, .project-area .loginBox .screen .loginBook .link.loginDesc:hover, .project-area .loginBox .screen .loginBook .link.autoBack:hover, .project-area .loginBook .screen .passDesc .link.galleryList:hover, .project-area .loginBox .screen .passDesc .loginBook .link.galleryList:hover, .project-area .loginBook .screen.twoFactor form .link.notReceived:hover,
.project-area .loginBook .screen.twoFactor form .link.resend:hover, .project-area .loginBook .screen.twoFactorError form .link.notReceived:hover,
.project-area .loginBook .screen.twoFactorError form .link.resend:hover, .project-area .loginBook .screen.twoFactorMessage form .link.notReceived:hover,
.project-area .loginBook .screen.twoFactorMessage form .link.resend:hover, .project-area .loginBox .screen.twoFactor form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactor form .loginBook .link.resend:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .link.resend:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.notReceived:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.resend:hover, .project-area .loginBook .screens .screen .title h3.link:hover, .project-area .loginBook .screens .screen .link.openLogin:hover, .project-area .loginBook .screens .screen form .external .link.label:hover, .project-area .loginBook .screens .screen .link.footer:hover,
.project-area .loginBook .screen .signup a .link:hover,
.project-area .loginBox .screen .signup .loginBook a .link:hover,
.project-area .loginBook .loginBox .screen .footer .link:hover,
.project-area .loginBox .screen .loginBook .footer .link:hover,
.project-area .loginBook .screen .changeUser .link:hover,
.project-area .loginBook .screen .notYou .link:hover,
.project-area .loginBook .screen .loginDesc .link:hover,
.project-area .loginBook .screen .autoBack .link:hover,
.project-area .loginBox .screen .loginBook .changeUser .link:hover,
.project-area .loginBox .screen .loginBook .notYou .link:hover,
.project-area .loginBox .screen .loginBook .loginDesc .link:hover,
.project-area .loginBox .screen .loginBook .autoBack .link:hover,
.project-area .loginBook .screen .passDesc .galleryList .link:hover,
.project-area .loginBox .screen .passDesc .loginBook .galleryList .link:hover,
.project-area .loginBook .screen.twoFactor form .notReceived .link:hover,
.project-area .loginBook .screen.twoFactor form .resend .link:hover,
.project-area .loginBook .screen.twoFactorError form .notReceived .link:hover,
.project-area .loginBook .screen.twoFactorError form .resend .link:hover,
.project-area .loginBook .screen.twoFactorMessage form .notReceived .link:hover,
.project-area .loginBook .screen.twoFactorMessage form .resend .link:hover,
.project-area .loginBox .screen.twoFactor form .loginBook .notReceived .link:hover,
.project-area .loginBox .screen.twoFactor form .loginBook .resend .link:hover,
.project-area .loginBox .screen.twoFactorError form .loginBook .notReceived .link:hover,
.project-area .loginBox .screen.twoFactorError form .loginBook .resend .link:hover,
.project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived .link:hover,
.project-area .loginBox .screen.twoFactorMessage form .loginBook .resend .link:hover,
.project-area .loginBook .screens .screen .title h3 .link:hover,
.project-area .loginBook .screens .screen .openLogin .link:hover,
.project-area .loginBook .screens .screen form .external .label .link:hover,
.project-area .loginBook .screens .screen .footer .link:hover, .project-area .loginBook .screen .signup a a:hover, .project-area .loginBox .screen .signup .loginBook a a:hover, .project-area .loginBook .loginBox .screen .footer a:hover, .project-area .loginBox .screen .loginBook .footer a:hover, .project-area .loginBook .screen .changeUser a:hover, .project-area .loginBook .screen .notYou a:hover, .project-area .loginBook .screen .loginDesc a:hover, .project-area .loginBook .screen .autoBack a:hover, .project-area .loginBox .screen .loginBook .changeUser a:hover, .project-area .loginBox .screen .loginBook .notYou a:hover, .project-area .loginBox .screen .loginBook .loginDesc a:hover, .project-area .loginBox .screen .loginBook .autoBack a:hover, .project-area .loginBook .screen .passDesc .galleryList a:hover, .project-area .loginBox .screen .passDesc .loginBook .galleryList a:hover, .project-area .loginBook .screen.twoFactor form .notReceived a:hover, .project-area .loginBook .screen.twoFactor form .resend a:hover, .project-area .loginBook .screen.twoFactorError form .notReceived a:hover, .project-area .loginBook .screen.twoFactorError form .resend a:hover, .project-area .loginBook .screen.twoFactorMessage form .notReceived a:hover, .project-area .loginBook .screen.twoFactorMessage form .resend a:hover, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactor form .loginBook .resend a:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactorError form .loginBook .resend a:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived a:hover, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend a:hover, .project-area .loginBook .screens .screen .title h3 a:hover, .project-area .loginBook .screens .screen .openLogin a:hover, .project-area .loginBook .screens .screen form .external .label a:hover, .project-area .loginBook .screens .screen .footer a:hover,
.project-area .loginBook .screen .signup .loginBox a.link:hover,
.project-area .loginBox .screen .signup a.link:hover,
.project-area .loginBox .screen .link.footer:hover,
.project-area .loginBook .screen .loginBox .link.changeUser:hover,
.project-area .loginBook .screen .loginBox .link.notYou:hover,
.project-area .loginBook .screen .loginBox .link.loginDesc:hover,
.project-area .loginBook .screen .loginBox .link.autoBack:hover,
.project-area .loginBox .screen .link.changeUser:hover,
.project-area .loginBox .screen .link.notYou:hover,
.project-area .loginBox .screen .link.loginDesc:hover,
.project-area .loginBox .screen .link.autoBack:hover,
.project-area .loginBook .screen .passDesc .loginBox .link.galleryList:hover,
.project-area .loginBox .screen .passDesc .link.galleryList:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .link.notReceived:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .link.resend:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .link.notReceived:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .link.resend:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .link.notReceived:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .link.resend:hover,
.project-area .loginBox .screen.twoFactor form .link.notReceived:hover,
.project-area .loginBox .screen.twoFactor form .link.resend:hover,
.project-area .loginBox .screen.twoFactorError form .link.notReceived:hover,
.project-area .loginBox .screen.twoFactorError form .link.resend:hover,
.project-area .loginBox .screen.twoFactorMessage form .link.notReceived:hover,
.project-area .loginBox .screen.twoFactorMessage form .link.resend:hover,
.project-area .loginBox .loginBook .screens .screen .title h3.link:hover,
.project-area .loginBook .screens .screen .title .loginBox h3.link:hover,
.project-area .loginBox .loginBook .screens .screen .link.openLogin:hover,
.project-area .loginBook .screens .screen .loginBox .link.openLogin:hover,
.project-area .loginBox .loginBook .screens .screen form .external .link.label:hover,
.project-area .loginBook .screens .screen form .external .loginBox .link.label:hover,
.project-area .loginBook .screens .screen .loginBox .link.footer:hover,
.project-area .loginBook .screen .signup .loginBox a .link:hover,
.project-area .loginBox .screen .signup a .link:hover,
.project-area .loginBox .screen .footer .link:hover,
.project-area .loginBook .screen .loginBox .changeUser .link:hover,
.project-area .loginBook .screen .loginBox .notYou .link:hover,
.project-area .loginBook .screen .loginBox .loginDesc .link:hover,
.project-area .loginBook .screen .loginBox .autoBack .link:hover,
.project-area .loginBox .screen .changeUser .link:hover,
.project-area .loginBox .screen .notYou .link:hover,
.project-area .loginBox .screen .loginDesc .link:hover,
.project-area .loginBox .screen .autoBack .link:hover,
.project-area .loginBook .screen .passDesc .loginBox .galleryList .link:hover,
.project-area .loginBox .screen .passDesc .galleryList .link:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .notReceived .link:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .resend .link:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .notReceived .link:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .resend .link:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived .link:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .resend .link:hover,
.project-area .loginBox .screen.twoFactor form .notReceived .link:hover,
.project-area .loginBox .screen.twoFactor form .resend .link:hover,
.project-area .loginBox .screen.twoFactorError form .notReceived .link:hover,
.project-area .loginBox .screen.twoFactorError form .resend .link:hover,
.project-area .loginBox .screen.twoFactorMessage form .notReceived .link:hover,
.project-area .loginBox .screen.twoFactorMessage form .resend .link:hover,
.project-area .loginBox .loginBook .screens .screen .title h3 .link:hover,
.project-area .loginBook .screens .screen .title .loginBox h3 .link:hover,
.project-area .loginBox .loginBook .screens .screen .openLogin .link:hover,
.project-area .loginBook .screens .screen .loginBox .openLogin .link:hover,
.project-area .loginBox .loginBook .screens .screen form .external .label .link:hover,
.project-area .loginBook .screens .screen form .external .loginBox .label .link:hover,
.project-area .loginBook .screens .screen .loginBox .footer .link:hover,
.project-area .loginBook .screen .signup .loginBox a a:hover,
.project-area .loginBox .screen .signup a a:hover,
.project-area .loginBox .screen .footer a:hover,
.project-area .loginBook .screen .loginBox .changeUser a:hover,
.project-area .loginBook .screen .loginBox .notYou a:hover,
.project-area .loginBook .screen .loginBox .loginDesc a:hover,
.project-area .loginBook .screen .loginBox .autoBack a:hover,
.project-area .loginBox .screen .changeUser a:hover,
.project-area .loginBox .screen .notYou a:hover,
.project-area .loginBox .screen .loginDesc a:hover,
.project-area .loginBox .screen .autoBack a:hover,
.project-area .loginBook .screen .passDesc .loginBox .galleryList a:hover,
.project-area .loginBox .screen .passDesc .galleryList a:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .notReceived a:hover,
.project-area .loginBook .screen.twoFactor form .loginBox .resend a:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .notReceived a:hover,
.project-area .loginBook .screen.twoFactorError form .loginBox .resend a:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived a:hover,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .resend a:hover,
.project-area .loginBox .screen.twoFactor form .notReceived a:hover,
.project-area .loginBox .screen.twoFactor form .resend a:hover,
.project-area .loginBox .screen.twoFactorError form .notReceived a:hover,
.project-area .loginBox .screen.twoFactorError form .resend a:hover,
.project-area .loginBox .screen.twoFactorMessage form .notReceived a:hover,
.project-area .loginBox .screen.twoFactorMessage form .resend a:hover,
.project-area .loginBox .loginBook .screens .screen .title h3 a:hover,
.project-area .loginBook .screens .screen .title .loginBox h3 a:hover,
.project-area .loginBox .loginBook .screens .screen .openLogin a:hover,
.project-area .loginBook .screens .screen .loginBox .openLogin a:hover,
.project-area .loginBox .loginBook .screens .screen form .external .label a:hover,
.project-area .loginBook .screens .screen form .external .loginBox .label a:hover,
.project-area .loginBook .screens .screen .loginBox .footer a:hover {
    color: #1C1C1C;
}

.project-area .loginBook .screen .signup a.link:focus, .project-area .loginBox .screen .signup .loginBook a.link:focus, .project-area .loginBook .loginBox .screen .link.footer:focus, .project-area .loginBox .screen .loginBook .link.footer:focus, .project-area .loginBook .screen .link.changeUser:focus,
.project-area .loginBook .screen .link.notYou:focus,
.project-area .loginBook .screen .link.loginDesc:focus,
.project-area .loginBook .screen .link.autoBack:focus, .project-area .loginBox .screen .loginBook .link.changeUser:focus, .project-area .loginBox .screen .loginBook .link.notYou:focus, .project-area .loginBox .screen .loginBook .link.loginDesc:focus, .project-area .loginBox .screen .loginBook .link.autoBack:focus, .project-area .loginBook .screen .passDesc .link.galleryList:focus, .project-area .loginBox .screen .passDesc .loginBook .link.galleryList:focus, .project-area .loginBook .screen.twoFactor form .link.notReceived:focus,
.project-area .loginBook .screen.twoFactor form .link.resend:focus, .project-area .loginBook .screen.twoFactorError form .link.notReceived:focus,
.project-area .loginBook .screen.twoFactorError form .link.resend:focus, .project-area .loginBook .screen.twoFactorMessage form .link.notReceived:focus,
.project-area .loginBook .screen.twoFactorMessage form .link.resend:focus, .project-area .loginBox .screen.twoFactor form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactor form .loginBook .link.resend:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .link.resend:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.notReceived:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .link.resend:focus, .project-area .loginBook .screens .screen .title h3.link:focus, .project-area .loginBook .screens .screen .link.openLogin:focus, .project-area .loginBook .screens .screen form .external .link.label:focus, .project-area .loginBook .screens .screen .link.footer:focus,
.project-area .loginBook .screen .signup a .link:focus,
.project-area .loginBox .screen .signup .loginBook a .link:focus,
.project-area .loginBook .loginBox .screen .footer .link:focus,
.project-area .loginBox .screen .loginBook .footer .link:focus,
.project-area .loginBook .screen .changeUser .link:focus,
.project-area .loginBook .screen .notYou .link:focus,
.project-area .loginBook .screen .loginDesc .link:focus,
.project-area .loginBook .screen .autoBack .link:focus,
.project-area .loginBox .screen .loginBook .changeUser .link:focus,
.project-area .loginBox .screen .loginBook .notYou .link:focus,
.project-area .loginBox .screen .loginBook .loginDesc .link:focus,
.project-area .loginBox .screen .loginBook .autoBack .link:focus,
.project-area .loginBook .screen .passDesc .galleryList .link:focus,
.project-area .loginBox .screen .passDesc .loginBook .galleryList .link:focus,
.project-area .loginBook .screen.twoFactor form .notReceived .link:focus,
.project-area .loginBook .screen.twoFactor form .resend .link:focus,
.project-area .loginBook .screen.twoFactorError form .notReceived .link:focus,
.project-area .loginBook .screen.twoFactorError form .resend .link:focus,
.project-area .loginBook .screen.twoFactorMessage form .notReceived .link:focus,
.project-area .loginBook .screen.twoFactorMessage form .resend .link:focus,
.project-area .loginBox .screen.twoFactor form .loginBook .notReceived .link:focus,
.project-area .loginBox .screen.twoFactor form .loginBook .resend .link:focus,
.project-area .loginBox .screen.twoFactorError form .loginBook .notReceived .link:focus,
.project-area .loginBox .screen.twoFactorError form .loginBook .resend .link:focus,
.project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived .link:focus,
.project-area .loginBox .screen.twoFactorMessage form .loginBook .resend .link:focus,
.project-area .loginBook .screens .screen .title h3 .link:focus,
.project-area .loginBook .screens .screen .openLogin .link:focus,
.project-area .loginBook .screens .screen form .external .label .link:focus,
.project-area .loginBook .screens .screen .footer .link:focus, .project-area .loginBook .screen .signup a a:focus, .project-area .loginBox .screen .signup .loginBook a a:focus, .project-area .loginBook .loginBox .screen .footer a:focus, .project-area .loginBox .screen .loginBook .footer a:focus, .project-area .loginBook .screen .changeUser a:focus, .project-area .loginBook .screen .notYou a:focus, .project-area .loginBook .screen .loginDesc a:focus, .project-area .loginBook .screen .autoBack a:focus, .project-area .loginBox .screen .loginBook .changeUser a:focus, .project-area .loginBox .screen .loginBook .notYou a:focus, .project-area .loginBox .screen .loginBook .loginDesc a:focus, .project-area .loginBox .screen .loginBook .autoBack a:focus, .project-area .loginBook .screen .passDesc .galleryList a:focus, .project-area .loginBox .screen .passDesc .loginBook .galleryList a:focus, .project-area .loginBook .screen.twoFactor form .notReceived a:focus, .project-area .loginBook .screen.twoFactor form .resend a:focus, .project-area .loginBook .screen.twoFactorError form .notReceived a:focus, .project-area .loginBook .screen.twoFactorError form .resend a:focus, .project-area .loginBook .screen.twoFactorMessage form .notReceived a:focus, .project-area .loginBook .screen.twoFactorMessage form .resend a:focus, .project-area .loginBox .screen.twoFactor form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactor form .loginBook .resend a:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactorError form .loginBook .resend a:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .notReceived a:focus, .project-area .loginBox .screen.twoFactorMessage form .loginBook .resend a:focus, .project-area .loginBook .screens .screen .title h3 a:focus, .project-area .loginBook .screens .screen .openLogin a:focus, .project-area .loginBook .screens .screen form .external .label a:focus, .project-area .loginBook .screens .screen .footer a:focus,
.project-area .loginBook .screen .signup .loginBox a.link:focus,
.project-area .loginBox .screen .signup a.link:focus,
.project-area .loginBox .screen .link.footer:focus,
.project-area .loginBook .screen .loginBox .link.changeUser:focus,
.project-area .loginBook .screen .loginBox .link.notYou:focus,
.project-area .loginBook .screen .loginBox .link.loginDesc:focus,
.project-area .loginBook .screen .loginBox .link.autoBack:focus,
.project-area .loginBox .screen .link.changeUser:focus,
.project-area .loginBox .screen .link.notYou:focus,
.project-area .loginBox .screen .link.loginDesc:focus,
.project-area .loginBox .screen .link.autoBack:focus,
.project-area .loginBook .screen .passDesc .loginBox .link.galleryList:focus,
.project-area .loginBox .screen .passDesc .link.galleryList:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .link.notReceived:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .link.resend:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .link.notReceived:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .link.resend:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .link.notReceived:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .link.resend:focus,
.project-area .loginBox .screen.twoFactor form .link.notReceived:focus,
.project-area .loginBox .screen.twoFactor form .link.resend:focus,
.project-area .loginBox .screen.twoFactorError form .link.notReceived:focus,
.project-area .loginBox .screen.twoFactorError form .link.resend:focus,
.project-area .loginBox .screen.twoFactorMessage form .link.notReceived:focus,
.project-area .loginBox .screen.twoFactorMessage form .link.resend:focus,
.project-area .loginBox .loginBook .screens .screen .title h3.link:focus,
.project-area .loginBook .screens .screen .title .loginBox h3.link:focus,
.project-area .loginBox .loginBook .screens .screen .link.openLogin:focus,
.project-area .loginBook .screens .screen .loginBox .link.openLogin:focus,
.project-area .loginBox .loginBook .screens .screen form .external .link.label:focus,
.project-area .loginBook .screens .screen form .external .loginBox .link.label:focus,
.project-area .loginBook .screens .screen .loginBox .link.footer:focus,
.project-area .loginBook .screen .signup .loginBox a .link:focus,
.project-area .loginBox .screen .signup a .link:focus,
.project-area .loginBox .screen .footer .link:focus,
.project-area .loginBook .screen .loginBox .changeUser .link:focus,
.project-area .loginBook .screen .loginBox .notYou .link:focus,
.project-area .loginBook .screen .loginBox .loginDesc .link:focus,
.project-area .loginBook .screen .loginBox .autoBack .link:focus,
.project-area .loginBox .screen .changeUser .link:focus,
.project-area .loginBox .screen .notYou .link:focus,
.project-area .loginBox .screen .loginDesc .link:focus,
.project-area .loginBox .screen .autoBack .link:focus,
.project-area .loginBook .screen .passDesc .loginBox .galleryList .link:focus,
.project-area .loginBox .screen .passDesc .galleryList .link:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .notReceived .link:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .resend .link:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .notReceived .link:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .resend .link:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived .link:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .resend .link:focus,
.project-area .loginBox .screen.twoFactor form .notReceived .link:focus,
.project-area .loginBox .screen.twoFactor form .resend .link:focus,
.project-area .loginBox .screen.twoFactorError form .notReceived .link:focus,
.project-area .loginBox .screen.twoFactorError form .resend .link:focus,
.project-area .loginBox .screen.twoFactorMessage form .notReceived .link:focus,
.project-area .loginBox .screen.twoFactorMessage form .resend .link:focus,
.project-area .loginBox .loginBook .screens .screen .title h3 .link:focus,
.project-area .loginBook .screens .screen .title .loginBox h3 .link:focus,
.project-area .loginBox .loginBook .screens .screen .openLogin .link:focus,
.project-area .loginBook .screens .screen .loginBox .openLogin .link:focus,
.project-area .loginBox .loginBook .screens .screen form .external .label .link:focus,
.project-area .loginBook .screens .screen form .external .loginBox .label .link:focus,
.project-area .loginBook .screens .screen .loginBox .footer .link:focus,
.project-area .loginBook .screen .signup .loginBox a a:focus,
.project-area .loginBox .screen .signup a a:focus,
.project-area .loginBox .screen .footer a:focus,
.project-area .loginBook .screen .loginBox .changeUser a:focus,
.project-area .loginBook .screen .loginBox .notYou a:focus,
.project-area .loginBook .screen .loginBox .loginDesc a:focus,
.project-area .loginBook .screen .loginBox .autoBack a:focus,
.project-area .loginBox .screen .changeUser a:focus,
.project-area .loginBox .screen .notYou a:focus,
.project-area .loginBox .screen .loginDesc a:focus,
.project-area .loginBox .screen .autoBack a:focus,
.project-area .loginBook .screen .passDesc .loginBox .galleryList a:focus,
.project-area .loginBox .screen .passDesc .galleryList a:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .notReceived a:focus,
.project-area .loginBook .screen.twoFactor form .loginBox .resend a:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .notReceived a:focus,
.project-area .loginBook .screen.twoFactorError form .loginBox .resend a:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .notReceived a:focus,
.project-area .loginBook .screen.twoFactorMessage form .loginBox .resend a:focus,
.project-area .loginBox .screen.twoFactor form .notReceived a:focus,
.project-area .loginBox .screen.twoFactor form .resend a:focus,
.project-area .loginBox .screen.twoFactorError form .notReceived a:focus,
.project-area .loginBox .screen.twoFactorError form .resend a:focus,
.project-area .loginBox .screen.twoFactorMessage form .notReceived a:focus,
.project-area .loginBox .screen.twoFactorMessage form .resend a:focus,
.project-area .loginBox .loginBook .screens .screen .title h3 a:focus,
.project-area .loginBook .screens .screen .title .loginBox h3 a:focus,
.project-area .loginBox .loginBook .screens .screen .openLogin a:focus,
.project-area .loginBook .screens .screen .loginBox .openLogin a:focus,
.project-area .loginBox .loginBook .screens .screen form .external .label a:focus,
.project-area .loginBook .screens .screen form .external .loginBox .label a:focus,
.project-area .loginBook .screens .screen .loginBox .footer a:focus {
    color: #1C1C1C;
}

.project-area .loginBook .screen .signup a, .project-area .loginBox .screen .signup .loginBook a, .project-area .loginBook .loginBox .screen .footer, .project-area .loginBox .screen .loginBook .footer,
.project-area .loginBook .screen .signup .loginBox a,
.project-area .loginBox .screen .signup a,
.project-area .loginBox .screen .footer {
    color: #BCBCBC;
}

.project-area .loginBook .screen .changePass,
.project-area .loginBook .screen .forgotPass, .project-area .loginBox .screen .loginBook .changePass, .project-area .loginBox .screen .loginBook .forgotPass,
.project-area .loginBook .screen .loginBox .changePass,
.project-area .loginBook .screen .loginBox .forgotPass,
.project-area .loginBox .screen .changePass,
.project-area .loginBox .screen .forgotPass {
    color: #AB4D2E;
    font-weight: 500;
    text-transform: uppercase;
}

.project-area .loginBook .screen .link.changePass:hover,
.project-area .loginBook .screen .link.forgotPass:hover, .project-area .loginBox .screen .loginBook .link.changePass:hover, .project-area .loginBox .screen .loginBook .link.forgotPass:hover,
.project-area .loginBook .screen .changePass .link:hover,
.project-area .loginBook .screen .forgotPass .link:hover,
.project-area .loginBox .screen .loginBook .changePass .link:hover,
.project-area .loginBox .screen .loginBook .forgotPass .link:hover, .project-area .loginBook .screen .changePass a:hover, .project-area .loginBook .screen .forgotPass a:hover, .project-area .loginBox .screen .loginBook .changePass a:hover, .project-area .loginBox .screen .loginBook .forgotPass a:hover,
.project-area .loginBook .screen .loginBox .link.changePass:hover,
.project-area .loginBook .screen .loginBox .link.forgotPass:hover,
.project-area .loginBox .screen .link.changePass:hover,
.project-area .loginBox .screen .link.forgotPass:hover,
.project-area .loginBook .screen .loginBox .changePass .link:hover,
.project-area .loginBook .screen .loginBox .forgotPass .link:hover,
.project-area .loginBox .screen .changePass .link:hover,
.project-area .loginBox .screen .forgotPass .link:hover,
.project-area .loginBook .screen .loginBox .changePass a:hover,
.project-area .loginBook .screen .loginBox .forgotPass a:hover,
.project-area .loginBox .screen .changePass a:hover,
.project-area .loginBox .screen .forgotPass a:hover {
    color: #B47A67;
}

.project-area .loginBook .screen .link.changePass:focus,
.project-area .loginBook .screen .link.forgotPass:focus, .project-area .loginBox .screen .loginBook .link.changePass:focus, .project-area .loginBox .screen .loginBook .link.forgotPass:focus,
.project-area .loginBook .screen .changePass .link:focus,
.project-area .loginBook .screen .forgotPass .link:focus,
.project-area .loginBox .screen .loginBook .changePass .link:focus,
.project-area .loginBox .screen .loginBook .forgotPass .link:focus, .project-area .loginBook .screen .changePass a:focus, .project-area .loginBook .screen .forgotPass a:focus, .project-area .loginBox .screen .loginBook .changePass a:focus, .project-area .loginBox .screen .loginBook .forgotPass a:focus,
.project-area .loginBook .screen .loginBox .link.changePass:focus,
.project-area .loginBook .screen .loginBox .link.forgotPass:focus,
.project-area .loginBox .screen .link.changePass:focus,
.project-area .loginBox .screen .link.forgotPass:focus,
.project-area .loginBook .screen .loginBox .changePass .link:focus,
.project-area .loginBook .screen .loginBox .forgotPass .link:focus,
.project-area .loginBox .screen .changePass .link:focus,
.project-area .loginBox .screen .forgotPass .link:focus,
.project-area .loginBook .screen .loginBox .changePass a:focus,
.project-area .loginBook .screen .loginBox .forgotPass a:focus,
.project-area .loginBox .screen .changePass a:focus,
.project-area .loginBox .screen .forgotPass a:focus {
    color: #B47A67;
}

.project-area .loginBook .screen .headerEmail,
.project-area .loginBox .screen .headerEmail {
    align-items: baseline;
}

.project-area .loginBook .screen .headerEmail .changeUser,
.project-area .loginBook .screen .headerEmail .notYou,
.project-area .loginBox .screen .headerEmail .changeUser,
.project-area .loginBox .screen .headerEmail .notYou {
    margin-left: 16px;
}

.project-area .loginBook .screen .footer,
.project-area .loginBox .screen .footer {
    text-align: center;
    padding: 0;
    background: none;
}

.project-area .loginBook .screen .footer.photographer a,
.project-area .loginBox .screen .footer.photographer a {
    text-decoration: underline;
}

.project-area .loginBook .screen .disjunction,
.project-area .loginBox .screen .disjunction {
    font-weight: 500;
    text-align: center;
}

.project-area .loginBook .screen .title,
.project-area .loginBook .screen .loginFooter,
.project-area .loginBox .screen .title,
.project-area .loginBox .screen .loginFooter {
    text-align: center;
}

.project-area .loginBook .screen .title .email,
.project-area .loginBook .screen .loginFooter .email,
.project-area .loginBox .screen .title .email,
.project-area .loginBox .screen .loginFooter .email {
    font-weight: 500;
}

.project-area .loginBook .screen button:not(.link):not(.icon4),
.project-area .loginBook .screen input:not([type="checkbox"]),
.project-area .loginBook .screen select,
.project-area .loginBook .screen .password,
.project-area .loginBox .screen button:not(.link):not(.icon4),
.project-area .loginBox .screen input:not([type="checkbox"]),
.project-area .loginBox .screen select,
.project-area .loginBox .screen .password {
    width: 100%;
}

.project-area .loginBook .screen button, .project-area .loginBook .screen .link,
.project-area .loginBox .screen button,
.project-area .loginBox .screen .link {
    border: none;
}

.project-area .loginBook .screen form .password,
.project-area .loginBox .screen form .password {
    background-color: #F2F2F2;
    font-weight: 500;
    letter-spacing: 2px;
}

.project-area .loginBook .screen form .errorMsg,
.project-area .loginBook .screen form .pictimeZFormError,
.project-area .loginBox .screen form .errorMsg,
.project-area .loginBox .screen form .pictimeZFormError {
    color: #FF232B;
}

.project-area .loginBook .screen .social,
.project-area .loginBox .screen .social {
    text-align: center;
}

.project-area .loginBook .screen .social .brandWebsite,
.project-area .loginBox .screen .social .brandWebsite {
    color: #444444;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: none;
}

.project-area .loginBook .screen .social .brandWebsite:hover,
.project-area .loginBox .screen .social .brandWebsite:hover {
    color: #BCBCBC;
}

.project-area .loginBook .screen.resetPassword .headerEmail .changeUser,
.project-area .loginBox .screen.resetPassword .headerEmail .changeUser {
    display: none;
}

.project-area .loginBook .screen.twoFactor, .project-area .loginBook .screen.twoFactorError, .project-area .loginBook .screen.twoFactorMessage,
.project-area .loginBox .screen.twoFactor,
.project-area .loginBox .screen.twoFactorError,
.project-area .loginBox .screen.twoFactorMessage {
    height: 100%;
}

.project-area .loginBook .screen.twoFactor icon-elem, .project-area .loginBook .screen.twoFactorError icon-elem, .project-area .loginBook .screen.twoFactorMessage icon-elem,
.project-area .loginBox .screen.twoFactor icon-elem,
.project-area .loginBox .screen.twoFactorError icon-elem,
.project-area .loginBox .screen.twoFactorMessage icon-elem {
    margin: 0 auto;
}

.project-area .loginBook .screen.twoFactor icon-elem[name="sms"], .project-area .loginBook .screen.twoFactorError icon-elem[name="sms"], .project-area .loginBook .screen.twoFactorMessage icon-elem[name="sms"],
.project-area .loginBox .screen.twoFactor icon-elem[name="sms"],
.project-area .loginBox .screen.twoFactorError icon-elem[name="sms"],
.project-area .loginBox .screen.twoFactorMessage icon-elem[name="sms"] {
    --icon-size: 56px;
}

.project-area .loginBook .screen.twoFactor form, .project-area .loginBook .screen.twoFactorError form, .project-area .loginBook .screen.twoFactorMessage form,
.project-area .loginBox .screen.twoFactor form,
.project-area .loginBox .screen.twoFactorError form,
.project-area .loginBox .screen.twoFactorMessage form {
    flex: 1;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.project-area .loginBook .screen.twoFactor form .message, .project-area .loginBook .screen.twoFactorError form .message, .project-area .loginBook .screen.twoFactorMessage form .message,
.project-area .loginBox .screen.twoFactor form .message,
.project-area .loginBox .screen.twoFactorError form .message,
.project-area .loginBox .screen.twoFactorMessage form .message {
    line-height: 150%;
}

.project-area .loginBook .screen.twoFactor form .resend button, .project-area .loginBook .screen.twoFactorError form .resend button, .project-area .loginBook .screen.twoFactorMessage form .resend button,
.project-area .loginBox .screen.twoFactor form .resend button,
.project-area .loginBox .screen.twoFactorError form .resend button,
.project-area .loginBox .screen.twoFactorMessage form .resend button {
    height: 32px;
}

.project-area .loginBook .screen.twoFactor form.showResend .notReceived, .project-area .loginBook .screen.twoFactorError form.showResend .notReceived, .project-area .loginBook .screen.twoFactorMessage form.showResend .notReceived,
.project-area .loginBox .screen.twoFactor form.showResend .notReceived,
.project-area .loginBox .screen.twoFactorError form.showResend .notReceived,
.project-area .loginBox .screen.twoFactorMessage form.showResend .notReceived {
    display: none;
}

.project-area .loginBook .screen.twoFactor form:not(.showResend) .resend, .project-area .loginBook .screen.twoFactorError form:not(.showResend) .resend, .project-area .loginBook .screen.twoFactorMessage form:not(.showResend) .resend,
.project-area .loginBox .screen.twoFactor form:not(.showResend) .resend,
.project-area .loginBox .screen.twoFactorError form:not(.showResend) .resend,
.project-area .loginBox .screen.twoFactorMessage form:not(.showResend) .resend {
    display: none;
}

.project-area .loginBook .screen.twoFactorMessage,
.project-area .loginBox .screen.twoFactorMessage {
    color: #444444;
}

.project-area .loginBook .screen.twoFactorMessage .svg-icon:not(.fill-icon),
.project-area .loginBox .screen.twoFactorMessage .svg-icon:not(.fill-icon) {
    stroke: #444444;
    fill: transparent;
}

.project-area .loginBook .screen.twoFactorMessage .svg-icon.fill-icon,
.project-area .loginBox .screen.twoFactorMessage .svg-icon.fill-icon {
    fill: #444444;
}

.project-area .loginBook .screen.twoFactorMessage form,
.project-area .loginBox .screen.twoFactorMessage form {
    justify-content: start;
}

.project-area .loginBook .screen.twoFactorMessage,
.project-area .loginBox .screen.twoFactorMessage {
    justify-content: center;
    --icon-size:     48px;
}

.project-area .loginBook {
    width: 100%;
}

.project-area .loginBook .screen.error-email input[type="email"], .project-area .loginBox .screen.error-email .loginBook input[type="email"], .project-area .loginBook .screen.error-code input[type="code"], .project-area .loginBox .screen.error-code .loginBook input[type="code"], .project-area .loginBook .screen.error-pass .passField input, .project-area .loginBox .screen.error-pass .passField .loginBook input, .project-area .loginBook .screen.error-all input[type="email"],
.project-area .loginBook .screen.error-all input[type="code"],
.project-area .loginBook .screen.error-all .passField input, .project-area .loginBox .screen.error-all .loginBook input[type="email"], .project-area .loginBox .screen.error-all .loginBook input[type="code"], .project-area .loginBox .screen.error-all .passField .loginBook input {
    background-image: none;
    border-bottom: 1px solid #FF232B;
}

.project-area .loginBook .pHidden {
    display: none !important;
}

.project-area .loginBook .customVendorType {
    display: inline-flex;
}

.project-area .loginBook .customVendorType .textField {
    width: 100%;
}

.project-area .loginBook .closeIcon .iconBefore {
    width: 20px;
    height: 20px;
    margin-top: 20px;
    overflow: hidden;
    cursor: pointer;
}

.project-area .loginBook .closeIcon .iconBefore::before {
    display: block;
    width: 20px;
    height: 20px;
    background-position-x: -20px;
}

.project-area .loginBook .screens {
    background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%), linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%);
    background-size: 7px 1px, 7px 1px;
    background-repeat: repeat-x, repeat-x;
    background-position: left top, left bottom;
}

.project-area .loginBook .screens .screen .title {
    font-family: "Crimson Text", serif;
}

.project-area .loginBook .screens .screen .title .galleryName {
    letter-spacing: 2px;
}

.project-area .loginBook .screens .screen .passField .showPass {
    right: -4px;
}

.project-area .loginBook .screens .screen [type="submit"] {
    border: 1px solid #444444;
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    background-color: #FFFFFF;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project-area .loginBook .screens .screen [type="submit"]:hover {
    background-color: #F9F9F9;
}

.project-area .loginBook .screens .screen [type="submit"]:focus {
    background-color: #F9F9F9;
}

.project-area .loginBook .screens .screen [type="submit"]:hover, .project-area .loginBook .screens .screen [type="submit"]:focus {
    border: 1px solid #868686;
}

.project-area .loginBook .screens .screen form input:not([type="checkbox"]) {
    border: none;
    background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-family: "Crimson Text", serif;
}

.project-area .loginBook .screens .screen form input:not([type="checkbox"])::placeholder {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    color: #868686;
}

.project-area .loginBook .screens .screen form .customVendorType {
    margin: 8px auto;
}

.project-area .loginBook .screens .screen form .multiSelect {
    margin: 8px auto;
}

.project-area .loginBook .screens .screen form .multiSelect .topLine {
    padding-left: 0;
    width: 100%;
    border: none;
    background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-color: white;
}

.project-area .loginBook .screens .screen form .multiSelect .topLine:empty {
    background-color: transparent !important;
}

.project-area .loginBook .screens .screen form .multiSelect label {
    font-family: "Crimson Text", serif;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    color: #868686;
}

.project-area .loginBook .screens .screen form .multiSelect .active .pMSelectPanel {
    display: inline-flex;
    flex-direction: column;
}

.project-area .loginBook .screens .screen form .multiSelect .active .pMSelectPanel .active {
    font-weight: 500;
}

.project-area .loginBook .screens .screen form .multiSelect .multiSelectField {
    position: relative;
}

.project-area .loginBook .screens .screen form .multiSelect .multiSelectField label {
    position: absolute;
    bottom: 8px;
}

.project-area .loginBook .screens .screen form .multiSelect .multiSelectCtrl .pMSelectPanel {
    top: 39px !important;
    border-top: 1px solid #868686 !important;
}

.project-area .loginBook .screens .screen form select {
    border: none;
    background-image: linear-gradient(to right, #1C1C1C 14.28571%, transparent 14.28571%);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-family: "Crimson Text", serif;
}

.project-area .loginBook .screens .screen form select option {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
}

.project-area .loginBook .screens .screen form .fieldInvalid select,
.project-area .loginBook .screens .screen form .fieldInvalid input:not([type="checkbox"]) {
    background-image: linear-gradient(to right, #FF232B 25%, transparent 25%);
    background-size: 7px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    margin-bottom: 4px;
}

.project-area .loginBook .screens .screen form .external .label {
    font-family: "Crimson Text", serif;
}

.project-area .loginBook .screens .screen form .external button {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    background-color: #F2F2F2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-area .loginBook .screens .screen form .external button:hover {
    background-color: #ECECEC;
}

.project-area .loginBook .screens .screen form .external button:focus {
    background-color: #ECECEC;
}

.project-area .loginBook .screen.error-email .loginBox input[type="email"],
.project-area .loginBox .screen.error-email input[type="email"], .project-area .loginBook .screen.error-code .loginBox input[type="code"],
.project-area .loginBox .screen.error-code input[type="code"], .project-area .loginBook .screen.error-pass .passField .loginBox input,
.project-area .loginBox .screen.error-pass .passField input, .project-area .loginBook .screen.error-all .loginBox input[type="email"], .project-area .loginBook .screen.error-all .loginBox input[type="code"], .project-area .loginBook .screen.error-all .passField .loginBox input,
.project-area .loginBox .screen.error-all input[type="email"],
.project-area .loginBox .screen.error-all input[type="code"],
.project-area .loginBox .screen.error-all .passField input {
    border: 1px solid #FF232B;
}

.project-area .loginBox .screen .title .galleryName {
    font-family: "Crimson Text", serif;
    letter-spacing: 2px;
}

.project-area .loginBox .screen .title .galleryVendor {
    font-style: italic;
}

.project-area .loginBox .screen .title h2 {
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.project-area .loginBox .screen form button:not(.link):not(.icon4) {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    background-color: #ECECEC;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-area .loginBox .screen form button:not(.link):not(.icon4):hover {
    background-color: #E0E0E0;
}

.project-area .loginBox .screen form button:not(.link):not(.icon4):focus {
    background-color: #E0E0E0;
}

.project-area .loginBox .screen form .back, .project-area .loginBox .screen form button:not(#dummy)[type="submit"] {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    color: #FFFFFF;
    background-color: #444444;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project-area .loginBox .screen form .back:hover, .project-area .loginBox .screen form button:not(#dummy)[type="submit"]:hover {
    background-color: #1C1C1C;
}

.project-area .loginBox .screen form .back:focus, .project-area .loginBox .screen form button:not(#dummy)[type="submit"]:focus {
    background-color: #1C1C1C;
}

.project-area .loginBox .screen form input:not([type="checkbox"]) {
    border: 1px solid #D0D0D0;
}

.project-area .loginBox .screen form input:not([type="checkbox"]):focus {
    border: 1px solid #444444;
}

.project-area .loginBox .screen form input:not([type="checkbox"])::placeholder {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    color: #868686;
}

.project-area .loginBox .screen .poweredBy {
    letter-spacing: 0.5px;
}

.project-area body.login .projectCover,
.project-area body.login .accountCover,
.project-area body.login .photographerCover {
    background-size: cover;
    background-color: #ECECEC;
}

.project-area body.login .projectCover.projectCover:before,
.project-area body.login .accountCover.projectCover:before,
.project-area body.login .photographerCover.projectCover:before {
    content: "";
    background: #1C1C1C99;
}

.project-area body.login #maincanvas,
.project-area body.login #useraccount {
    min-height: 98vh;
}

.project-area body.login #maincanvas .loginBox,
.project-area body.login #useraccount .loginBox {
    margin: 32px;
    /*
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			*/
}

.project-area .loginDialog .window {
    width: auto;
}

.project-area .loginDialog .window .content {
    line-height: 100%;
}

.project-area .userlogin .icon4.favorites {
    background-position: -240px -1760px;
}

.project-area .userlogin .icon4.showPass {
    background-position: -240px -680px;
}

.project-area .userlogin .icon4.showPass:hover {
    background-position: -200px -680px;
}

.project-area .userlogin .icon4.showPass.active {
    background-position: -240px -720px;
}

.project-area .userlogin .icon4.showPass.active:hover {
    background-position: -200px -720px;
}

.project-area .userlogin .icon4Before.back:before {
    background-position: -20px -1260px;
}

.project-area .userlogin .icon4Before.back:hover:before {
    background-position: -20px -1280px;
}

.project-area .userlogin .icon4Before[data-type="facebook"]:before {
    background-position: 0 -1720px;
}

.project-area .userlogin .icon4Before[data-type="google"]:before {
    background-position: 0 -1680px;
}

.project-area .userlogin .checkbox.icon4Before:before {
    background-position: 0 -1760px;
}

.project-area .userlogin .checkbox.icon4Before:hover:before {
    background-position: -20px -1760px;
}

.project-area .userlogin :checked ~ .checkbox.icon4Before:before {
    background-position: 0 -1780px;
}

.project-area .userlogin :checked ~ .checkbox.icon4Before:hover:before {
    background-position: -20px -1780px;
}

.project-area .userlogin .checkboxField label:before {
    background-position: 0 -1760px;
}

.project-area .userlogin .checkboxField label:hover:before {
    background-position: -20px -1760px;
}

.project-area .userlogin .checkboxField :checked ~ label:before {
    background-position: 0 -1780px;
}

.project-area .userlogin .checkboxField :checked ~ label:hover:before {
    background-position: -20px -1780px;
}

.project-area .userlogin .selectField:after {
    background-position: 0px 0px;
}

.project-area .userlogin .screen button:not(.link):not(.icon4),
.project-area .userlogin .screen input:not([type="checkbox"]),
.project-area .userlogin .screen select,
.project-area .userlogin .screen .checkboxField label,
.project-area .userlogin .screen .password {
    height: 48px;
}

.project-area .userlogin .screen button:not(.link) {
    font-size: 14px;
}

.project-area .userlogin .screen .passDesc {
    font-size: 15px;
    line-height: 166%;
}

.project-area .userlogin .screen .passDesc .passDescTop {
    white-space: pre-line;
}

.project-area .userlogin .screen .passDesc .galleryList {
    font-size: 14px;
}

.project-area .userlogin .screen form .password {
    font-size: 30px;
}

.project-area .userlogin .screen form .errorMsg {
    margin-bottom: 8px;
    margin-right: auto;
}

.project-area .userlogin .screen form .checkbox:before {
    margin-right: 10px;
}

.project-area .userlogin .screen form .policyMessage {
    margin-top: 8px;
    line-height: 135%;
}

.project-area .userlogin .screen form .pictimeZForm .pictimeZFormError {
    font-size: 10px;
}

.project-area .userlogin .screen form .pictimeZForm .checkboxField {
    margin: 8px 0;
}

.project-area .userlogin .screen form .pictimeZForm .checkboxField label:not(#dummy):before {
    margin-right: 10px;
    margin-top: -2px;
}

.project-area .userlogin .screen .social {
    margin-top: 96px;
}

.project-area .userlogin .screen .social .brandWebsite {
    font-size: 14px;
    letter-spacing: 1.5px;
}

.project-area .userlogin .screen .social .socialLinks {
    margin-top: 24px;
}

.project-area .loginBook {
    padding: 8vh 0;
    font-size: 13px;
}

.project-area .loginBook:not(.fixedScreen) {
    height: calc( 504px + 16vh);
}

.project-area .loginBook .screen {
    padding: 8vh;
}

.project-area .loginBook .screen .header {
    margin-bottom: 40px;
}

.project-area .loginBook .screen .title .galleryName {
    font-size: 18px;
}

.project-area .loginBook .screen .title h2 {
    margin-top: 24px;
    font-size: 34px;
}

.project-area .loginBook .screen .title h3 {
    margin-top: 16px;
    font-size: 16px;
}

.project-area .loginBook .screen input:not([type="checkbox"]),
.project-area .loginBook .screen select,
.project-area .loginBook .screen .checkboxField label {
    height: 32px;
}

.project-area .loginBook .screen button:not(.link):not(.icon4),
.project-area .loginBook .screen input:not([type="checkbox"]),
.project-area .loginBook .screen select,
.project-area .loginBook .screen .checkboxField label,
.project-area .loginBook .screen .password {
    margin: 8px auto;
}

.project-area .loginBook .screen .local input:not([type="checkbox"]):not(:first-child) {
    margin-top: 24px;
}

.project-area .loginBook .screen .local button:not(.link):not(.icon4) {
    margin-top: auto;
    margin-top: 24px;
}

.project-area .loginBook .screen form {
    display: flex;
}

.project-area .loginBook .screen form .local, .project-area .loginBook .screen form .external {
    justify-content: flex-end;
    position: relative;
    width: 304px;
    margin: 56px 60px;
}

.project-area .loginBook .screen form .pictimeZForm {
    width: 304px;
    margin-top: 40px;
}

.project-area .loginBook .screen form .pictimeZForm .textField input {
    padding: 0;
}

.project-area .loginBook .screen form .password {
    margin-top: 24px;
}

.project-area .loginBook .screen form .forgotPass {
    margin-top: 16px;
}

.project-area .loginBook .screen form .openLogin {
    margin-top: 8px;
}

.project-area .loginBook .screen form .link.skip {
    margin: 16px auto;
}

.project-area .loginBook .screen form input:not([type="checkbox"]),
.project-area .loginBook .screen form select {
    font-size: 16px;
}

.project-area .loginBook .screen form input:not([type="checkbox"]) option, .project-area .loginBook .screen form input:not([type="checkbox"])::placeholder,
.project-area .loginBook .screen form select option,
.project-area .loginBook .screen form select::placeholder {
    font-size: 13px;
}

.project-area .loginBook .screen form .external .label {
    font-size: 16px;
    margin-bottom: 32px;
}

.project-area .loginBook .screen form .external button:before {
    margin-right: 8px;
}

.project-area .loginBook .screen form .changePass {
    margin: 8px auto 72px;
}

.project-area .loginBook .screen form .allowEmails {
    position: absolute;
    top: 100%;
    margin: 8px 0;
}

.project-area .loginBook .screen form .allowEmails .icon4Before:before {
    margin-top: -2px;
}

.project-area .loginBook .screen .footer {
    margin-top: 40px;
}

.project-area .loginBook .screen:not(.guestBook) form {
    width: 304px;
    margin-top: 56px;
}

.project-area .loginBook .screen.newPassword form {
    width: 384px;
}

.project-area .loginBook .screen.getPassword form, .project-area .loginBook .screen.setPassword form {
    width: 384px;
    margin-top: 96px;
}

.project-area .loginBook .screen.getPassword form [type="submit"], .project-area .loginBook .screen.setPassword form [type="submit"] {
    margin-top: 88px;
}

.project-area .loginBook .screen.getPassword .header, .project-area .loginBook .screen.forgotPassword .header, .project-area .loginBook .screen.setPassword .header {
    width: 384px;
}

.project-area .loginBook .screen.forgotPassword form {
    margin-top: 80px;
}

.project-area .loginBook .screen.forgotPassConfirm h2, .project-area .loginBook .screen.externalError h2 {
    margin-top: 176px;
}

.project-area .loginBook .screen.forgotPassConfirm form, .project-area .loginBook .screen.externalError form {
    margin-top: 72px;
}

.project-area .loginBook .screen.preRegister button[type="submit"], .project-area .loginBook .screen.requestAccess button[type="submit"] {
    margin-top: 24px;
}

.project-area .loginBook .screen.preRegister .footer {
    margin-top: 72px;
}

.project-area .loginBook .screen.requestAccess .footer {
    margin-top: 48px;
}

.project-area .loginBook .screen.confirmPreReg h2, .project-area .loginBook .screen.confirmRequest h2 {
    margin-top: 136px;
}

.project-area .loginBox {
    width: 760px;
    height: 632px;
    font-size: 14px;
}

.project-area .loginBox .screen {
    padding: 40px;
}

.project-area .loginBox .screen .header {
    margin-bottom: 48px;
}

.project-area .loginBox .screen .title .galleryName {
    font-size: 20px;
}

.project-area .loginBox .screen .title h2 {
    margin-top: 48px;
    font-size: 22px;
}

.project-area .loginBox .screen .title h3 {
    margin: 24px 0;
    font-size: 14px;
}

.project-area .loginBox .screen .title .passDesc {
    margin-top: 32px;
}

.project-area .loginBox .screen .poweredBy {
    font-size: 18px;
}

.project-area .loginBox .screen .poweredBy .logo {
    margin-right: 16px;
}

.project-area .loginBox .screen button:not(.link):not(.icon4):not(.icon4Before),
.project-area .loginBox .screen input:not([type="checkbox"]):not(.icon4Before),
.project-area .loginBox .screen select:not(.icon4Before),
.project-area .loginBox .screen .checkboxField label:not(.icon4Before),
.project-area .loginBox .screen .password:not(.icon4Before) {
    margin: 8px auto;
}

.project-area .loginBox .screen form {
    width: 480px;
    margin-top: 48px;
}

.project-area .loginBox .screen form .forgotPass {
    margin-top: 16px;
}

.project-area .loginBox .screen form .link.skip {
    margin: 16px auto 8px;
}

.project-area .loginBox .screen form input:not([type="checkbox"]),
.project-area .loginBox .screen form select {
    padding-left: 16px;
    font-size: 16px;
}

.project-area .loginBox .screen form .disjunction {
    margin: 16px auto;
}

.project-area .loginBox .screen form .external {
    display: flex;
    justify-content: space-between;
    margin: 72px -8px 24px;
}

.project-area .loginBox .screen form .external input:not(#dummy),
.project-area .loginBox .screen form .external button:not(#dummy) {
    margin: 0 8px;
}

.project-area .loginBox .screen form .external input:not(#dummy):before,
.project-area .loginBox .screen form .external button:not(#dummy):before {
    margin-right: 16px;
}

.project-area .loginBox .screen form .forgotPassWrap {
    display: flex;
    justify-content: space-around;
    margin: 40px -8px 24px;
}

.project-area .loginBox .screen form .forgotPassWrap .forgotPass {
    flex: 1 0 auto;
}

.project-area .loginBox .screen form .forgotPassWrap .forgotPass:first-child:not(:last-child):after {
    content: '|';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

.project-area .loginBox .screen form .namedAccessCode {
    display: flex;
    justify-content: space-between;
    margin: 0 -8px;
}

.project-area .loginBox .screen form .namedAccessCode input:not(#dummy) {
    margin: 8px;
}

.project-area .loginBox .screen form .changePass {
    margin: 8px auto 72px;
}

.project-area .loginBox .screen form .allowEmails {
    align-items: center;
    margin: 16px 0;
}

.project-area .loginBox .screen.newPassword form, .project-area .loginBox .screen.newFirstTimePassword form, .project-area .loginBox .screen.externalError form, .project-area .loginBox .screen.galleryPrivate form, .project-area .loginBox .screen.forgotPassword form, .project-area .loginBox .screen.forgotPassConfirm form {
    width: 384px;
}

.project-area .loginBox .screen.newFirstTimePassword .header {
    margin-bottom: 144px;
}

.project-area .loginBox .screen.newFirstTimePassword h2 {
    margin-top: 40px;
}

.project-area .loginBox .screen.newFirstTimePassword .poweredBy {
    margin-top: 144px;
}

.project-area .loginBox .screen.getEmailPhotographer .title {
    margin-top: 8px;
}

.project-area .loginBox .screen.getEmailPhotographer .signup {
    margin-top: 56px;
}

.project-area .loginBox .screen.getEmailPhotographer .footer {
    margin-top: 48px;
}

.project-area .loginBox .screen.getEmailUnique .title {
    margin-top: 40px;
}

.project-area .loginBox .screen.getEmailUnique .title h2 {
    margin-top: 104px;
}

.project-area .loginBox .screen.getEmailUnique form {
    margin-top: 16px;
}

.project-area .loginBox .screen.getEmailUnique form .notMe {
    margin-top: 64px;
}

.project-area .loginBox .screen.getEmailUnique .external {
    margin-top: 88px;
}

.project-area .loginBox .screen.getEmailUnique .poweredBy {
    margin: 32px auto 32px;
}

.project-area .loginBox .screen.getPasswordUnique .header {
    margin-bottom: 80px;
}

.project-area .loginBox .screen.getPasswordUnique h2 {
    margin-top: 24px;
}

.project-area .loginBox .screen.getPasswordUnique.hasPassDesc .header {
    margin-bottom: 48px;
}

.project-area .loginBox .screen.getPasswordUnique.hasPassDesc form {
    margin-top: 32px;
}

.project-area .loginBox .screen.getPasswordUnique.hasPassDescGalleries .header {
    margin-bottom: 32px;
}

.project-area .loginBox .screen.getPassword.hasPassDesc h2 {
    margin-top: 40px;
}

.project-area .loginBox .screen.getPassword.hasPassDesc form {
    margin-top: 32px;
}

.project-area .loginBox .screen.getPassword.hasPassDescGalleries h2 {
    margin-top: 24px;
}

.project-area .loginBox .screen.getPassword .footer, .project-area .loginBox .screen.getPasswordUnique .footer {
    margin-top: 40px;
}

.project-area .loginBox .screen.forgotPassword h3 {
    margin-bottom: 0;
}

.project-area .loginBox .screen.forgotPassword form .notMe {
    margin-top: 64px;
}

.project-area .loginBox .screen.forgotPassConfirm h2, .project-area .loginBox .screen.externalError h2 {
    margin-top: 152px;
}

.project-area .loginBox .screen.externalLogin h2 {
    margin-top: 80px;
}

.project-area .loginBox .screen.externalLogin h3 {
    margin: 32px auto 0;
}

.project-area .loginBox .screen.externalLogin form .back:not(#dummy) {
    margin-top: 16px;
}

.project-area .loginBox .screen.forgotPassConfirm h2 {
    margin-top: 80px;
    margin-bottom: 16px;
}

.project-area .loginBox .screen.getAccessCode h2 {
    margin-top: 56px;
}

.project-area .loginBox .screen.getAccessCode h3 {
    margin: 16px auto 0;
}

.project-area .loginBox .screen.getAccessCode form {
    margin-top: 48px;
}

.project-area .loginBox .screen.getAccessCode form .external {
    margin-top: 48px;
}

.project-area .loginBox .screen.getAccessCode form [type="submit"] {
    margin-top: 24px;
}

.project-area .loginBox .screen.getAccessCode .loginFooter {
    margin-top: 64px;
}

.project-area .loginBox .screen.getAccessCode .loginFooter * {
    margin: 8px 0;
}

.project-area .loginBox .screen.getAccessCode .bannerLogo {
    margin-top: -8px;
}

.project-area .loginBox .screen.getAccessCode .bannerLogo + h2 {
    margin-top: 32px;
}

.project-area .loginBox .screen.optionalSkip .title {
    margin-top: 80px;
}

.project-area .loginBox .screen.optionalSkip .title h2 {
    margin-top: 56px;
}

.project-area .loginBox .screen.optionalSkip form {
    margin-top: 32px;
}

.project-area .loginBox .screen.twoFactor .title h2:not(#dummy), .project-area .loginBox .screen.twoFactorError .title h2:not(#dummy) {
    margin-top: 104px;
}

.project-area .loginBox .screen.twoFactor form, .project-area .loginBox .screen.twoFactorError form {
    margin-top: 60px;
}

.project-area .loginBox .screen.twoFactor form .notReceived,
.project-area .loginBox .screen.twoFactor form .resend, .project-area .loginBox .screen.twoFactorError form .notReceived,
.project-area .loginBox .screen.twoFactorError form .resend {
    margin-bottom: 40px;
}

.project-area .loginBox .screen.twoFactor form icon-elem, .project-area .loginBox .screen.twoFactorError form icon-elem {
    margin-top: 32px;
}

.project-area .loginBox .screen.twoFactorMessage button:not(#dummy) {
    margin-top: 24px;
}

.project-area .loginBox .screen.twoFactorMessage .verified .label {
    margin-top: 24px;
}

.project-area .loginBox.shortBox {
    height: 576px;
}

.project-area .loginBox.shortBox .screen .header {
    margin-bottom: 8px;
}

.project-area .loginBox.shortBox .screen .title h2 {
    margin-top: 80px;
    margin-bottom: 0;
}

.project-area .loginBox.shortBox .screen .external {
    margin: 56px -8px 24px;
}

.project-area .loginBox.shortBox .screen.setPassword .changeUser,
.project-area .loginBox.shortBox .screen.setPassword .notYou {
    display: none;
}

.project-area .loginBox.shortBox .screen.getPassword.hasPassDesc h2 {
    margin-top: 48px;
}

.project-area .loginBox.shortBox .screen.getPassword.hasPassDesc .forgotPassWrap {
    margin-top: 24px;
}

.project-area .loginBox.shortBox .screen.forgotPassConfirm h2, .project-area .loginBox.shortBox .screen.externalError h2 {
    margin-top: 160px;
}

.project-area .loginBox.shortBox .screen.resetExpired h2 {
    margin-top: 104px;
}

.project-area .loginBox.shortBox .screen.resetExpired form {
    margin-top: 32px;
}

.project-area .loginBox.shortBox .screen.resetExpired .resetAbort {
    margin-top: 56px;
}

.project-area .loginBox.shortBox .screen.galleryPrivate h2 {
    margin-top: 120px;
}

.project-area .loginBox.shortBox .screen.galleryPrivate form {
    margin-top: 72px;
}

.project-area .collectionSelect {
    z-index: 2147483639;
}

.project-area .collectionSelect .btn {
    cursor: pointer;
}

.project-area .collectionSelect .dialogContent {
    display: grid;
    grid: 120px auto 100px / 300px auto;
    grid-template-areas: "title optionsPanel" "collections thumbPanel" "collections formPanel";
}

.project-area .collectionSelect .dialogContent > * {
    position: initial;
    justify-items: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    overflow: auto;
}

.project-area .collectionSelect .dialogContent > .title {
    grid-area: title;
    padding: 0 40px;
    border-right: 1px solid #E0E0E0;
}

.project-area .collectionSelect .dialogContent .formPanel {
    grid-area: formPanel;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons {
    padding: 0 30px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard {
    font-family: "Gotham XNarrow SSm A", "Gotham XNarrow SSm B", sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    background-color: #444444;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 10px;
    width: auto;
    height: 40px;
    min-width: 230px;
    padding: 0 20px;
    border: none;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard[disabled] {
    color: #BCBCBC;
    background-color: #868686;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons .pButtonStandard:not([disabled]):hover {
    background-color: #1C1C1C;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons .info {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    font-size: 13px;
    color: #444444;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    margin: 0 20px;
    text-align: right;
}

.project-area .collectionSelect .dialogContent .formPanel .buttons .info * + :last-child {
    font-weight: 700;
}

.project-area .collectionSelect .dialogContent .optionsPanel {
    grid-area: optionsPanel;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 100px 5px 50px;
}

.project-area .collectionSelect .dialogContent .optionsPanel .title {
    margin-right: auto;
}

.project-area .collectionSelect .dialogContent .optionsPanel .title * {
    display: inline-block;
}

.project-area .collectionSelect .dialogContent .optionsPanel .btn {
    margin: 0px 20px;
}

.project-area .collectionSelect .dialogContent .optionsPanel .normalSize {
    cursor: pointer;
    background-position: -40px -520px;
}

.project-area .collectionSelect .dialogContent .optionsPanel .normalSize:hover {
    background-position: -120px -520px;
}

.project-area .collectionSelect .dialogContent .optionsPanel .largeSize {
    cursor: pointer;
    background-position: -40px -560px;
}

.project-area .collectionSelect .dialogContent .optionsPanel .largeSize:hover {
    background-position: -120px -560px;
}

.project-area .collectionSelect .dialogContent .thumbPanel {
    grid-area: thumbPanel;
    overflow: hidden;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos {
    position: initial;
    height: 100%;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft {
    overflow: auto;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 40px;
    padding: 0;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li {
    position: relative;
    margin: 10px;
    padding: 0;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li.phantom {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul li .simpleTooltip {
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
}

.project-area .collectionSelect .dialogContent .thumbPanel .selectPhotos .pnlLeft .photoList ul :after {
    content: '';
    flex: auto;
}

.project-area .collectionSelect .dialogContent .thumbPanel .choose, .project-area .collectionSelect .dialogContent .thumbPanel .empty, .project-area .collectionSelect .dialogContent .thumbPanel .progress {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.project-area .collectionSelect .dialogContent .collections {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", sans-serif;
    font-size: 13px;
    color: #444444;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    grid-area: collections;
    padding: 0 20px 70px;
    border-right: 1px solid #E0E0E0;
}

.project-area .collectionSelect .dialogContent .collections .section {
    margin-top: 15px;
}

.project-area .collectionSelect .dialogContent .collections .title, .project-area .collectionSelect .dialogContent .collections .btn {
    display: flex;
    align-items: center;
    position: relative;
    border: none;
    padding: 0 20px;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
}

.project-area .collectionSelect .dialogContent .collections .title.title, .project-area .collectionSelect .dialogContent .collections .btn.title {
    font-weight: 700;
    letter-spacing: 1px;
}

.project-area .collectionSelect .dialogContent .collections .title.btn:not(.active):not(.disabled):hover, .project-area .collectionSelect .dialogContent .collections .btn.btn:not(.active):not(.disabled):hover {
    background-color: #F9F9F9;
}

.project-area .collectionSelect .dialogContent .collections .title.active, .project-area .collectionSelect .dialogContent .collections .btn.active {
    background-color: #F2F2F2;
}

.project-area .collectionSelect .dialogContent .collections .title.active:hover, .project-area .collectionSelect .dialogContent .collections .btn.active:hover {
    background-color: #F2F2F2;
}

.project-area .collectionSelect .dialogContent .collections .title.disabled, .project-area .collectionSelect .dialogContent .collections .btn.disabled {
    color: #BCBCBC;
}

.project-area .collectionSelect .dialogContent .collections .title .name, .project-area .collectionSelect .dialogContent .collections .btn .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.project-area .collectionSelect .dialogContent .collections .title .date, .project-area .collectionSelect .dialogContent .collections .btn .date {
    margin-left: 10px;
}

.project-area .collectionSelect .dialogContent .collections .notification {
    margin-left: 20px;
    width: auto;
    height: 15px;
    line-height: 14px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #333333;
    border-radius: 8px;
    color: white;
    font-size: 11px;
}

.project-area .collectionSelect .dialogContent.showChoose .formPanel, .project-area .collectionSelect .dialogContent.showChoose .optionsPanel, .project-area .collectionSelect .dialogContent.showChoose .selectPhotos, .project-area .collectionSelect .dialogContent.showEmpty .formPanel, .project-area .collectionSelect .dialogContent.showEmpty .optionsPanel, .project-area .collectionSelect .dialogContent.showEmpty .selectPhotos, .project-area .collectionSelect .dialogContent.showProgress .formPanel, .project-area .collectionSelect .dialogContent.showProgress .optionsPanel, .project-area .collectionSelect .dialogContent.showProgress .selectPhotos {
    display: none;
}

.project-area .collectionSelect .dialogContent:not(.showChoose) .choose {
    display: none;
}

.project-area .collectionSelect .dialogContent:not(.showEmpty) .empty, .project-area .collectionSelect .dialogContent.showProgress .empty {
    display: none;
}

.project-area .collectionSelect .dialogContent:not(.showProgress) .progress {
    display: none;
}

.project-area .collectionSelect .dialogCloseIcon {
    position: absolute;
    right: 35px;
    top: 35px;
}

.project-area .dynamicAdBlock {
    transition: all 400ms;
    z-index: 2 !important;
}

.project-area .dynamicAdBlock.expanded {
    height: auto !important;
    width: auto !important;
    z-index: 5 !important;
}

.mobileDevice .project-area .dynamicAdBlock.expanded {
    z-index: 5 !important;
}

.project-area .dynamicAdBlock .dynamicAd {
    transition: all 400ms;
}

.project-area .dynamicAdBlock .dynamicAd iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: White;
}

.project-area .dynamicAdBlock .icon.close {
    position: absolute;
    height: 25px;
    width: 25px;
    top: 10px;
    right: 13px;
    border: none;
    pointer-events: none;
    background-color: transparent;
    background-position: -145px -35px;
}

.project-area .dynamicAdBlock:not(.expanded) .icon.close {
    display: none;
}

.project-area .dynamicAdBlock:after {
    content: none !important;
}

.project-area .footer .social,
.project-area .socialLinks {
    text-align: center;
    width: 260px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.project-area .footer .social div, .project-area .footer .social button,
.project-area .socialLinks div,
.project-area .socialLinks button {
    display: inline-block;
    margin-left: 25px;
    margin-right: 25px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.project-area .footer .social div:first-child, .project-area .footer .social button:first-child,
.project-area .socialLinks div:first-child,
.project-area .socialLinks button:first-child {
    margin-left: 0;
}

.project-area .footer .social div:last-child, .project-area .footer .social button:last-child,
.project-area .socialLinks div:last-child,
.project-area .socialLinks button:last-child {
    margin-right: 0;
}

.project-area .footer .social .twitter,
.project-area .socialLinks .twitter {
    background-position: 0 -800px;
}

.project-area .footer .social .twitter:hover,
.project-area .socialLinks .twitter:hover {
    background-position: 0 -820px;
}

.project-area .footer .social .facebook,
.project-area .socialLinks .facebook {
    background-position: 0 -760px;
}

.project-area .footer .social .facebook:hover,
.project-area .socialLinks .facebook:hover {
    background-position: 0 -780px;
}

.project-area .footer .social .instagram,
.project-area .socialLinks .instagram {
    background-position: 0 -840px;
}

.project-area .footer .social .instagram:hover,
.project-area .socialLinks .instagram:hover {
    background-position: 0 -860px;
}

.project-area .footer .social .email,
.project-area .socialLinks .email {
    background-position: 0 -1480px;
}

.project-area .footer .social .email:hover,
.project-area .socialLinks .email:hover {
    background-position: 0 -1500px;
}

.mobileDevice .project-area .footer .social .twitter, .mobileDevice
.project-area .socialLinks .twitter {
    background-position: -252px -72px;
}

.mobileDevice .project-area .footer .social .facebook, .mobileDevice
.project-area .socialLinks .facebook {
    background-position: -252px -37px;
}

.mobileDevice .project-area .footer .social .instagram, .mobileDevice
.project-area .socialLinks .instagram {
    background-position: -252px -107px;
}

.mobileDevice .project-area .footer .social .email, .mobileDevice
.project-area .socialLinks .email {
    background-position: -253px -667px;
}

.project-area .dialog-2.userBlockedDialog .userBlockedContent,
.project-area .mobileDialog.userBlockedDialog .userBlockedContent {
    text-align: left;
    line-height: 150%;
}

@media (min-width: 651px) {
    .project-area .dialog-2.userBlockedDialog .userBlockedContent,
    .project-area .mobileDialog.userBlockedDialog .userBlockedContent {
        width: 320px;
        padding: 40px;
    }
}

@media (max-width: 650px) {
    .project-area .dialog-2.userBlockedDialog .userBlockedContent,
    .project-area .mobileDialog.userBlockedDialog .userBlockedContent {
        padding: 12px;
    }
}

.project-area .dialog-2.userBlockedDialog .userBlockedContent .errorSubMessage,
.project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorSubMessage {
    margin-top: 32px;
}

.project-area .dialog-2.userBlockedDialog .userBlockedContent .errorUnblockBtn,
.project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorUnblockBtn {
    margin-top: 24px;
    width: 100%;
}

.project-area .dialog-2.userBlockedDialog .userBlockedContent .errorFooterMessage,
.project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorFooterMessage {
    margin-top: 88px;
}

.project-area .dialog-2.userBlockedDialog .userBlockedContent .errorReCaptcha,
.project-area .mobileDialog.userBlockedDialog .userBlockedContent .errorReCaptcha {
    margin-top: 24px;
    width: 220px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

svg.medium {
    width: 30px;
    height: 30px;
}
