/* _______________________________________________________________________________ INPUTBOXES length */

#body {
 /*   background-color: red; */
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/*
div {
    font-size: medium;
}
 */

.html5_input_text {
    width:auto !important;
    border-radius: 4px; 
    background:white;
    border: solid 1px #bdbdbd;
    box-shadow: none;
    margin-right:20px;
}

.html5_input_text  input[type="text"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    width:auto !important;
}

/*
input[type="text"] {
    color:black !important;
}
 */

div.input_remind {
    box-shadow: none;
}

div.formfield {color: #000000;}

.xcontent {float: left;}
/* ___________________________________________________________________ key.php page */
.page-sections-prophoto-key-php .html5_input_text input[name="email_"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    width:290px !important;
}

.page-sections-prophoto-key-php .html5_input_text input[type="password"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    width:290px !important;
}

.html5_input_text input[name="key"] {width:290px !important;}


/* ___________________________________________________ no mobile number pop-up page */
.Content_Popup div.html5_input_text {width:170px !important;}

.Content_Popup input[name="mobile"] {width:170px !important;}


input.ftextboxhelp {color: #000000;}


/* ----------------------------------------------------------------------------------------------- PAGE DEFAULTS -----*/
HTML {
    min-height: 100%;
}

BODY {
    font-family: Roboto;
    background-color: #EBEBEB;
    margin: 0;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6, div {
    font-family: 'Roboto';
}

A, A:visited, A:link, .xcontent A, .xcontent A:visited, .xcontent a:link {
    text-decoration: none;
    color: #137ac4;
}

A:hover, A:visited:hover, A:link:hover, .xcontent A:hover, .xcontent A:visited:hover, .xcontent A:link:hover {
    text-decoration: none;
    color: #d1ac43;
}

a:focus {
    color: #564b37;
}

div.xpagecontainer {
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.xcontent {
    float: none;
    overflow: visible;
    zoom: 1;
    flex: 1 1 0;
}

div.xpage {
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Used for pages with 800 px size: */
.xcontent-container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
    width: 1152px;
    padding-left: 176px;
    padding-right: 176px;
    padding-top: 32px;
    box-sizing: border-box;
    flex: 1 1 0;
    background-color: white;
}

.xcontent {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
}

.generic_button {
    background: #999;
}

.generic_button:hover {
    background: #9f9f9f;
}

.button_container, .generic_next_button {
    border: none;
    background: #137ac4;
    color: #fff}

.button_container:hover, .button_container:hover, .generic_next_button:hover, .generic_next_button:hover:enabled {
    background: #2b87ca;
    color: #fff}

/* ------------------------------------------------------------------------------------------------------ HEADER -----*/
.page-header {
    padding-top: 32px;
    margin-bottom: 32px;
    color: #fff;
    background-color: white;
}

.page-header-disable-bottom-margin {
    margin-bottom: 0;
}

.page-header-content {
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    padding-bottom: 16px;
}

.page-header-content,  .xcontent-dynamic-width {
    max-width: 1152px;
    width: 100%;
}

.xcontent-full-width {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.page-header-right-content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
}

.page-header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


.page-header-menu {
    margin-right: auto;
    margin-left: auto;
}

.page-header-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

/* Submenu for all header drop downs */
.header-sub-menu {
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    list-style: none;

    right: 0;
    background-color: white;
    white-space: nowrap;
    padding: 27px 43px 27px 43px;
    /* Because of the create template selected image frame, this need to be high */
    z-index: 5;

    box-shadow: 0 12px 28px 0 rgb(0 0 0 / 20%), 0 2px 4px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(255 255 255 / 50%);
}

.header-sub-menu > li {
    padding-top: 10px;
    padding-bottom: 10px;
}


.header-spacer {
    height: 60px;
    background-color: #ced9e2;
    width: 2px;
    margin-left: 35px;
    margin-right: 35px;
    height: 40px;
}

/* ------------------------------------------------------------------------------------------------- DESC / DATA -----*/
.header-data-container {
    display: flex;
    flex-direction: column;
    height: 35px;
    justify-content: space-between;
}

.header-data-container .header-data-description {
    font-size: 12px;
    color: #137ac4;
    margin-bottom: 3px;
    font-weight: bold;
}

a:focus .header-data-container .header-data-description,
a:focus .header-cart .material-icons,
a:focus .header-data-container .header-data {
    color: #564b37;
}

.header-drop-down-button {
    background-color: transparent;
    border: none;
    padding: 0;
}

.header-data-container .header-data,
.header-drop-down-button {
    font-size: 16px;
    font-weight: bold;
    color: #22242a;
}

.header-data-container .header-data .material-icons {
    font-size: 16px;
    position: relative;
    vertical-align: middle;
}

.header-data-container .header-data > a {
    color: #22242a}

.free-shipping-container {
    text-align: center;
    background-color: #dedad1;
    color: black;
    height: 30px;
    line-height: 30px;
}

/* -------------------------------------------------------------------------------------------------------- LOGO -----*/
.logo-container {
    height: 88px;
    margin-right: 32px;
    width: 344px;
}

.logo-container img {
    max-height: 100%;
    max-width: 100%;
}

/* -------------------------------------------------------------------------------------------------------- MENU -----*/
.menu-container {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu-container > li {
    margin-left: 35px;
}

.menu-container li {
    font-size: 14px;
    margin-right: 0;
    position: relative;
}

.menu-container > li > a {
    display: flex;
    align-items: center;
}

.menu-container li a {
    color: #137ac4}

.menu-container li a:focus {
    color: #564b37}

.menu-container li .material-icons {
    font-size: 16px;
}

.menu-container .menu.selected > a, .menu-container .menu:hover > a {
    color: #22242a}


.header-sub-menu .menu.selected > a,
.header-sub-menu .menu:hover > a {
    color: #d1ac43}


.menu-container > li:hover > ul,
.menu-container > li:focus-within > ul
{
    display: block;
}

/* -------------------------------------------------------------------------------------------------------- USER -----*/

.header-logged-in-user {
    font-size: 18px;
    position: relative;
}

.header-logged-in-user:hover .header-sub-menu,
.header-logged-in-user:focus-within .header-sub-menu {
    display: block;
}



/* ---------------------------------------------------------------------------------------------------- LANGUAGE -----*/


.header-current-language {
    position: relative;
}

.header-current-language:hover .header-sub-menu,
.header-current-language:focus-within .header-sub-menu {
    display: block;
}

/* ----------------------------------------------------------------------------------------------- SHOPPING CART -----*/

.header-cart {
    position: relative;
}

.header-cart .material-icons {
    font-size: 35px;
    color: #137ac4;
    margin-left: 35px;
}

.header-cart-quantity {
    position: absolute;
    right: -14px;
    top: -18px;
    height: 34px;
    width: 34px;
    border: 2px solid white;
    line-height: 32px;
    text-align: center;
    font-weight: 500;
    border-radius: 17px;
    background-color: #d1ac43;
    color: #ffffff;
    font-size: 12px;
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------------------------- SHOPPING CART -----*/
footer h2 {
    font-size: 15px;
}

.footer-container {
    background-color: #22242a;    
    color: #fff;
    padding-top: 36px;
    padding-left: 24px;
    padding-right: 24px;
}

.footer-container a {
    color: #fff;
}

.footer-container a:focus {
    /*
    outline: 1px solid white;
    outline-offset: 1px;
     */
}

.footer-container .powered-by {
    color: #ced9e2;
    font-size: 16px;
    text-align: center;
    overflow: hidden;
    position: relative;
    margin-top: 36px;
}

.footer-container .powered-by > span {
    display: inline-block;
    position: relative;
}

.footer-container .powered-by > span:before,  .footer-container .powered-by > span:after {
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    /* Overflow will be hidden by the parent document */
    width: 600px; /* half of limiter*/
    margin: 0 20px;
    color: #ced9e2;
}

.footer-container .powered-by > span:before{
    right: 100%;
}

.footer-container .powered-by > span:after {
    left: 100%;
}

.footer-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-container ul > li {
    margin-bottom: 2px;
}

.footer-container h4, .footer-container h2 {
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: bold;
}

.footer-container .footer-content {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    max-width: 1152px;
    width: 100%;
    justify-content: space-between;
}



@media (max-width: 600px) {
    .footer-container {
        padding-left: 16px;
    }
    .footer-container .footer-content {
        flex-direction: column;
    }
    .footer-container .footer-section {
        margin: 10px 0;
    }
}

/* 

/* -------------------------------------------------------------------------------------------------------- PAGE -----*/
.xcontent .page-headline {
    color: #22242a;
    margin-bottom: 32px;
    position: relative;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    /*text-transform: uppercase;*/
}
/*
.xcontent-container-with-header .page-headline {
    margin-top: 20px;
    margin-bottom: 20px;
}
*/

.consumer .template-list-bulk li {
    width: 300px;
}


.consumer .template-list-bulk > li > a {
    width: 300px;
    height: 300px;
}

.consumer .template-list-bulk > li {
    margin-right: 30px;
    margin-bottom: 30px;
}


.consumer .template-list-category-list button, .consumer .template-list-filters-container button {
    min-height: 2.5em;
}

.page-hader--skip-to-main-content {
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
}

.page-hader--skip-to-main-content:focus {
    clip: unset !important;
    background-color: #ced9e2;;
    color: #22242a;
    height: auto !important;
    left: 2px;
    line-height: 36px;
    margin: 0;
    padding: 0 4px;
    top: 2px;
    width: auto !important;
    z-index: 10000;

}