/*blue*/
/*color: #008eef;*/
/*color: #008eef;*/
/*color: #008eef*/

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    input {
        border: 1px solid grey !important;
    }
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    input {
        border: 1px solid grey !important;
    }
}

/** \framework\layout\content.php */

body {
    font-family: 'Libre Franklin', sans-serif !important;
}

h1, h2, h3 {
    font-weight: 700 !important;
    /*font-style: italic;*/
}

/*.app_page {*/
    /*padding-top: 10px;*/
/*}*/

#buyLoader {
    color: #000;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: 30px;
    margin-left: -30px;
}

i#loading-icon {
    color: #000;
    font-size: 30px;
    position: absolute;
    margin-top: 0;
    margin-left: -35px;
}

article {
    position: relative;
    top: -10px;
}

h1 {
    font-size: 34px;
    color: #008eef;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 17px;
}

p {
    font-size: 14px;
}

#inner_content a {
    /*color: #317624 !important;*/
    text-shadow: 0 0 0 #000;

}

.strikeprice {
    color: #008eef;
    font-size: 12px;
    font-family: 'Libre Franklin', sans-serif;
    position: relative;
    top: -115px;
}

.strikeprice-strike {
    text-decoration: line-through;
}

/**
 * Blog
 */
.item-page img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.item-page table {
    width: 100% !important;
}

/**
 * Various
 */
#soc_div {
    display: none;
}

#page_profile .btn-toolbar {
    display: none;
}

.right {
    text-align: right;
}

div .noimage {
    font-size:35px;
}

.total_amount {
    font-size: 20px;
}


#startpage h1 {
    color: #008eef;

}

/*#startpage h4 {*/
    /*text-align: center;*/
/*}*/

/**
 * Sidebar
 */
.sideBar {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    flex-direction: column;
    justify-content: space-between;

    width: 150px;
    border-right: 1px solid #D7DBDD;
    background-color: #FCFDFD;
    padding: 10px;
    margin-right: 20px;
}
.sideBar__item a {
    color: inherit;
}
.sideBar__item {
    cursor: pointer;
    padding: 5px 10px;
    color: #008eef;
    font-size: 12px;
}

.sideBar__item.selected {
    color: white;
    background-color: #008eef;
    border-radius: 4px;
}


/**
 * DL/DT/DD
 */
dt {
    float: left;
    clear: left;
    width: 160px;
    font-weight: bold;
}
dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}


/**
 * Tabs
 */
.tabs {
    /**
     * Setting display to flex makes this container lay
     * out its children using flexbox, the exact same
     * as in the above "Stepper input" example.
     */
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    flex-wrap: wrap;
    border-bottom: 1px solid #D7DBDD;
}
.tab > a {
    color: #008eef;
    font-size: 12px;
    text-transform: uppercase;
}
.tab {
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    cursor: default;
    text-align: center;
    border-bottom: 2px solid transparent;
}

.tab.is-tab-selected {
    border-bottom-color: #008eef;
}

/**
 * Flex
 */
.flex-row {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

    /*-webkit-box-orient: horizontal;*/
    /*flex-direction: row;*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    /*-webkit-flex-direction: row;*/
    /*-ms-flex-direction: row;*/
    /*flex-direction: row;*/

    justify-content: space-between;
    flex-shrink: 0;

    /*flex-flow: row wrap;*/
}

.flex {
    flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex-shrink: 0;

    /*margin: auto;*/
    /*padding: 20px;*/
}

.big {
    flex: 5 0 0;
}

#page_login .flex:first-child  {
    border-right: 1px dotted grey;
    margin-right: 20px;
    padding-right: 20px;
}

/**
 * Form
 */

.note {
    font-size: 14px;
    color: #802420;
}

.flex-outer {
    list-style-type: none;
    padding: 0;
}

.flex-outer {
    /*max-width: 800px;*/
    margin: 0 auto;
    margin-bottom: 10px;
}

.control-group,
.flex-outer li {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-box-orient: horizontal;
    flex-wrap: wrap;
    align-items: center;
}

/*.flex-inner {*/
    /*padding: 0 8px;*/
    /*justify-content: space-between;*/
/*}*/

.control-group,
.flex-outer > li:not(:last-child) {
    margin-bottom: 20px;
}

input[readonly]{
    color: transparent;
    cursor: default;
    text-shadow : 0 0 0 #000;
}
input[readonly]:focus{
    outline : none;
}

#voucher {
    text-transform: uppercase;
}

.voucher i {
    font-size: 20px;
}

.items {
    position: relative;
}

.upsellLineContainer {
    position: absolute;
    /*z-index: 1;*/
    height: 110%;
}

.upsellLine {
    border-left: 1px dotted #008eef;
    position: absolute;
    height: 100%;
    top: 30px;
    left: 12px;
}

.upsell-container-relative {
    position: relative;
    /*z-index: 2;*/
    background: #fff;
}


.ritem {
    flex-wrap: nowrap;
}

.rcheckboxContainer {
    position: relative;
    background: white;
    padding: 5px;
}

.rcheckbox {
    height:16px;
    width:16px;
    margin: 0;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}

.item_text {
    width: 230px;
}

.sitem {
    margin-left: 50px;
}

/*.hitem {*/
    /*width: 100%;*/
    /*margin-left: 20px;*/
/*}*/

.rcheckboxLabel {
    display: none;
}

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

    .box {
        padding-top: 15px !important;
    }

    .rcheckboxLabel {
        display: inline-block;
    }

    .upsellLineContainer {
        display: none;
    }

    .action-column {
        display: inline-block !important;
        padding-top: 15px;
    }

    .item_text {
        margin-left: 3px;
        max-width: 200px;
    }

    .ritem {
        flex-flow: column;
    }

    .relement {
        margin-top: 15px;
    }

    .item_text {
        max-width: none;
        width: 100%;
    }
}


/*.flex label,*/
/*.control-label,*/
/*.flex-outer li label {*/
label {
    /*padding: 8px;*/
    font-weight: 300;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.control-label,
.flex-outer > li > label,
.flex-outer li p {
    flex: 1 0 120px;
    -webkit-flex: 1 0 120px;
    -ms-flex: 1 0 120px;
    max-width: 222px;
}

.control-group input:not([type='checkbox']),
.flex-outer li input:not([type='checkbox']),
textarea
{
    flex: 1 0 222px;
    -webkit-flex: 1 0 222px;
    -ms-flex: 1 0 222px;
}

.flex-outer li p {
    margin: 0;
}

.right {
    text-align: right;
}

.control-group input:not([type='checkbox']),
.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea,
.flex-row input
{
    padding: 15px 0 15px 10px;
    border: none;
}

.flex-outer li select {
    padding: 10px;
}

/*.flex-inner li {*/
    /*width: 100px;*/
/*}*/

.flex-outer .single-line-input{
    flex-wrap: nowrap;
}

.flex-outer .single-line-input > input{
    padding: 8px;
}

.single-line-input button {
    padding: 7px;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
.inputbox,
.validate-username,
.validate-password {
    border: 0; background: #fff;
    -webkit-box-shadow: 0 0 0 1px #ccc inset;
    box-shadow: 0 0 0 1px #ccc inset;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
input[type='checkbox'] {
    -webkit-box-shadow: none;
}
/**
 * Button
 */

button, .button {
    cursor: pointer;
    margin-left: auto;
    padding: 8px 16px;
    border: none;
    background: #485056;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 10px;
}

button:last-child, .button:last-child {
    margin-bottom: 0;
}

.btn-primary {
    background: #008eef;
    text-transform: uppercase;
    border-bottom-color: transparent;
    border-radius: 3px !important;
    -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
    background-repeat: repeat-x;
}

.btn-secondary {
    background: #C0C0C0;
    color: #000;
}

.btn-primary:hover {
    background-image: -webkit-linear-gradient(top, #93e0ff 0%, #008eef 100%);
    background-image: linear-gradient(to bottom, #93e0ff 0%, #008eef 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#555', GradientType=0);
}

/*.btn-primary:hover,*/
/*.btn-primary:focus {*/
    /*background-color: #444;*/
    /*background-position: 0 -45px;*/
    /*border-color: #444;*/
/*}*/

.btn-primary:active,
.btn-primary.active {
    background-color: #555;
    border-color: #555;
    -webkit-box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12);
}


/**
 * System-Messages
 */
.notice {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-box-orient: horizontal;
    align-items: center;
    justify-content: space-between;

    border: 1px dotted #008eef;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.notice__section {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-box-orient: horizontal;
    align-items: center;
}

.notice__item + .notice__item {
    margin-left: 5px;
}

/**
 * Splash screen
 */
.centeredPrompt {
    /**
     * Lay out the children of this container with
     * flexbox.
     */
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-box-orient: vertical;

    /**
     * Rotate the main axis so that the children
     * are laid out horizontally, the same as in the
     * above "Side bar" example.
     */
    flex-direction: column;

    /**
     * Align the children in the center, along
     * the main axis. Because the direction is
     * "column" this has a similar effect as setting
     * text-align: center.
     */
    align-items: center;
    -webkit-align-items: center;

    /**
     * Instead of pushing the children apart, as in
     * previous examples, we will group them together
     * in the center of their container.
     */
    justify-content: center;

    min-height: 300px;
    padding: 10px;
    /*margin: auto;*/
}

.centeredPrompt__item + .centeredPrompt__item {
    margin-top: 5px;
}

.centeredPromptIcon {
    font-size: 60px;
    line-height: 0;
}

.centeredPromptLabel {
    color: #86969C;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.centeredPromptDetails {
    color: #86969C;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
}

.icon {
    color: #BCD2DA;
}

#logo-text img {
    margin: 5px 0;
    width: 360px;
}

/**
 * Logout
 */
#logout {
    position: relative;
    text-align: right;
    top: -100px;
}
/**
 * Page Items
 */
#page_items .ritem {
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding: 10px 0 10px 0;
}
#page_items .sitem {
    border-top: 1px dotted #e1e1e1;
    margin-top: 10px;
    padding: 10px 0 10px 0;
}

#page_items .payments img {
    height: 70px;
}

.notavailable img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.payments {
    margin-bottom: 20px;
}

.payments .flex {
    flex: inherit;
}

.total_amount {
    padding-right: 20px;
}

#page_founditem .flex{
    padding-left: 10px;
    padding-right: 10px;
}

#alternate_invoice_address_container {
    display: none;
}

#sepa_container {
    display: none;
}

.lostItemContainer {
    display: none;
}

.payments {
    margin-top: 20px;
}

.payments input {
    margin-bottom: 5px;
}

/**
 * Map
 */
#map{
    display: block;
    width: 95%;
    height: 350px;
    margin: 0 auto;
    -moz-box-shadow: 0px 5px 20px #ccc;
    -webkit-box-shadow: 0px 5px 20px #ccc;
    box-shadow: 0px 5px 20px #ccc;
}
#map h1 {
    font-size: 14px;
    font-weight: bold;
}

.action-column {
    display: flex;
    flex-flow: column wrap;
}

.action-column a{
    flex: 1;
    /*display: block;*/
}

hr {
    border: none;
    height: 1px;
    color: gray; /* old IE */
    background-color: gray; /* Modern Browsers */
}

#upsell-container .upsell-option div {
    margin-left: 23px;
    font-style: italic;
}

#upsell-container .upsell-option {
    margin-bottom: 20px;
}

.editLostInformationsLabel {
    margin: 2px 0 10px 0;
}

.editImgIcon, .editDetailsIcon {
    font-size: 10px;
    margin-top: 2px;
}

.editImgIcon:hover,
.editDetailsIcon:hover
{
    cursor: pointer;
    text-decoration: underline;
}

.editImgUpload, .editDetails {
    display: none;
}

.star{display:none;}

.cartWrapper {
    text-align: right;
    margin-bottom: 20px;
}

.cart {

    background: black;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
}

#currentPrice {
    margin-left: 5px;
}

/*.scroll {*/
    /*width: 100%;*/
    /*!*overflow-y:hidden;*!*/
    /*overflow-x:auto;*/
    /*-webkit-overflow-scrolling:touch;*/
/*}*/

.menu-item.first {
    display: none !important;
}

.widget {
    text-align: center;
    width: 300px;
}

.flex-row {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
}

#jform_gender {
    border: none;
}

.tingle-modal-box__content {
    padding: 15px;
}

.tingle-modal-box__footer {
    padding: 15px;
}

.tingle-modal-box__content div {
    color: #000000;
    font-size: 14px;
}

.error {
    font-size: 12px;
    color: #a40908;
}

.additional {
    visibility: hidden;
}

/*@media (min-width:320px)  { !* smartphones, iPhone, portrait 480x320 phones *! }*/
/*@media (min-width:481px)  { !* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. *! }*/
/*@media (min-width:641px)  { !* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones *! }*/
/*@media (min-width:961px)  { !* tablet, landscape iPad, lo-res laptops ands desktops *! }*/
/*@media (min-width:1025px) { !* big landscape tablets, laptops, and desktops *! }*/
/*@media (min-width:1281px) { !* hi-res laptops and desktops *! }*/

@media only screen and (max-width: 660px) {
    /*.widget {*/
        /*text-align: center;*/
        /*width: 250px;*/
    /*}*/
    /*.widget img {*/
        /*width: 90%;*/
    /*}*/
    /*#startpage .flex-row {*/
        /*-webkit-flex-wrap: nowrap !important;*/
        /*-ms-flex-wrap: nowrap !important;*/
        /*flex-wrap: nowrap !important;*/
    /*}*/
    /*.scroll {*/
        /*width: 100%;*/
        /*overflow-x:auto;*/
        /*-webkit-overflow-scrolling:touch;*/
    /*}*/
    #logout {
        top: 0px;
    }
    #logo-text img {
        width: 100%;
    }
}

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

    #page_founditem .flex{
        padding-left: 0;
        padding-right: 0;
    }

    .strikeprice {
        display: none;
    }

    /*#startpage .flex-row*/
    /*{*/
        /*display: block;*/
    /*}*/
}


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

    #page_login .flex:first-child  {
        border: 0;
        margin-right: 0;
        padding-right: 0;
    }

    #page_login .flex-row {
        display: block;
    }

}

/** **/