/*** Styles for cart item options, upselling and conversion ***/

.ips-ui-conversiondialog .loading-text {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding-top: 10px;
    text-align: center;
    background-image: url(ips/ui/loading/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

.ips-ui-conversiondialog.loading .loading-text {
    display: block;
}

.ips-ui-conversiondialog.loading .options,
.ips-ui-conversiondialog.loading .product,
.ips-ui-conversiondialog.loading .price {
    visibility: hidden;
}

.ips-ui-conversiondialog .product,
.ips-ui-cartitemoptions .product-option
{
    margin-bottom: 10px;
}

.ips-ui-conversiondialog .product label,
.ips-ui-conversiondialog .price label,
.ips-ui-cartitemoptions .product-option label
{
    font-weight: bold;
    display: inline-block;
}

.ips-ui-conversiondialog .product select,
.ips-ui-cartitemoptions .product-option select
{
    width: 210px;
    margin-left: 10px;
}

.ips-ui-optionsdialog.upselling .product-option
{
    display: none;
}

.ips-ui-optionsdialog.upselling .product-option.upselling
{
    display: block;
}

/*** Styles for Storage function dialogs  **********************/

.ips-storage-functiondialog
{
    max-width: 500px;
}

.ips-storage-functiondialog .parameter
{
    padding: 0 8px 8px 8px;
}

.ips-storage-functiondialog .parameter label
{
    display: inline-block;
    min-width: 80px;
}

.ips-storage-functiondialog .parameter input
{
    display: inline-block;
    margin-left: 8px;
    max-width: 200px;
}

.ips-storage-functiondialog .parameter .description
{
    display: block;
    color: #ccc;
    font-style: italic;
}

.ips-storage-functiondialog .parameter .paramBrowserLink
{
    text-decoration: underline;
}

.ips-storage-functiondialog.waiting .buttons {
    background-image: url(ips/ui/loading/loading11x11.gif);
    background-position:  8px 50%;
    background-repeat: no-repeat;
}

/*** Styles for Storage function options dialogs  **********************/

.ips-storage-functionoptionsdialog .functionOption
{
    border-bottom: 1px solid #d6dbe1;
}

.ips-storage-functionoptionsdialog .functionOption .itemLabel
{
    font-size: 14px;
    width: 500px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

/*** Styles for Storage List **************************************/
.ips-storage-storagelist.loading
{
    background: url(ips/ui/loading/loading.gif) 50% 50% no-repeat;
}

.ips-storage-storagelist .itemLogo
{
    display: block;
    position: relative;
    width: 64px;
    height: 64px;
    float: left;
    margin-left: 25px;
    background: no-repeat center center;
    background-size: contain;
}

.ips-storage-storagelist .commandBar
{
    position: relative;
    height: 50px;
    border-bottom: 1px solid #d6dbe1;
    text-align: center;
    line-height: 50px;
}

.ips-storage-storagelist .commandBar .backBtn {
    display: block;
    float: left;
    width: 30px;
    height: 50px;
    padding: 0;
    border: 0;
    background: url(ips/storage/arrowback.png) 50% 50% no-repeat;
    cursor: pointer;
}

.ips-storage-storagelist .commandBar .itemLogo
{
    margin-top: 5px;
    margin-left: 5px;
    width: 40px;
    height: 40px;
    border: 0;
    background-color: transparent;
}

.ips-storage-storagelist .commandBar .nodeTitle,
.ips-storage-storagelist .commandBar .overviewTitle
{
    font-size: 14px;
    display: block;
    float: left;
    height: 50px;
    overflow: hidden;
}

.ips-storage-storagelist .commandBar .nodeTitle
{
    width: 65%;
}

.ips-storage-storagelist .commandBar .overviewTitle
{
    width: 100%;
}

.ips-storage-storagelist .commandBar .optionsPopupBtn
{
    display: block;
    float: right;
    width: 35px;
    height: 50px;
    padding: 0;
    border: 0;
    background: url(ips/storage/contextmenu.png) 50% 50% no-repeat;
    cursor: pointer;
}


.ips-storage-storagelist .storageListContent
{
    position: relative;
    margin-top: 20px;
    height: 325px;
    overflow: auto;
}

.ips-storage-storagelist .storageListContent ul
{
    list-style-type: none;
    margin:0;
    padding: 0;
}

.ips-storage-storagelist .storageListContent li
{
    height: 64px;
    line-height: 64px;
    border-top: 1px solid #d6dbe1;
    background: #f9f9f9;
    cursor: pointer;
}

.ips-storage-storagelist .storageListContent li.last
{
    border-bottom: 1px solid #d6dbe1;
}

.ips-storage-storagelist .storageListContent li span
{
    display: block;
    float:left;
    height: 64px;
    line-height: 64px;
    width: 60%;
    overflow: hidden;
    margin-left: 15px;
}

.ips-storage-storagelist .storageListContent .emptyContent
{
    padding: 0 8px;
    position: relative;
}

.ips-storage-storagelist .emptyContent .arrow
{
    position: absolute;
    top: 0;
    right: 5px;
    width: 49px;
    height: 146px;
    z-index: 1;
    background: url(ips/storage/infoarrow.png) 0 0 no-repeat;
}

.ips-storage-storagelist .storageListContent .emptyContent .text
{
    position: relative;
    margin-left: 20px;
    width: 80%;
    z-index: 2;
}

.ips-storage-storagelist .storageListContent .emptyContent .text > p
{
    padding: 30px 20px 0 0;
}

.ips-storage-storagelist .storageListContent .emptyContent .text > h1
{
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    margin: 100px 0 0 0;
    padding: 0;
    color: #ccc;
    width: 100%;
    text-align: center;
}

.ips-storage-storagelist .storageListContent .emptyServiceContent .text > h1
{
    color: #000;
    margin: 0;
    text-align: left;
}

/*** Styles for Storage Tabs **************************************/

.ips-ui-storagetabs.loading
{
    background: url(ips/ui/loading/loading.gif) 50% 50% no-repeat;
}

.ips-ui-storagetabs .jade-ui-tabs > .excess-button
{
    display: none;
}

.ips-ui-storagetabs .commandBar
{
    background: #eee;
    height: 26px;
    margin: 5px;
    position: relative;
}

.ips-ui-storagetabs .commandBar .serviceTitle
{
    line-height: 26px;
    padding-left: 5px;
}

.ips-ui-storagetabs .commandBar .optionsMenuBtn
{
    display: block;
    position: absolute;
    right: 5px;
    top: 3px;
    height: 18px;
    width: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 1px solid #88c53a;
    background: #91d040;
    background: -moz-linear-gradient(top, #aded5c 0%, #91d040 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, #aded5c 0%,#91d040 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aded5c 0%,#91d040 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #aded5c 0%,#91d040 100%); /* IE10+ */
    background: linear-gradient(to bottom, #aded5c 0%,#91d040 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aded5c', endColorstr='#91d040',GradientType=0 ); /* IE6-9 */
}

.ips-ui-storagetabs .commandBar .optionsMenuBtn:hover
{
    border-color: #6aa123;
}

.ips-ui-storagetabs .commandBar .optionsMenuBtn.active,
.ips-ui-storagetabs .commandBar .optionsMenuBtn.down
{
    border-color: #6aa123;
    background: #aded5c;
    background: -moz-linear-gradient(top, #91d040 0%, #aded5c 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, #91d040 0%,#aded5c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #91d040 0%,#aded5c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #91d040 0%,#aded5c 100%); /* IE10+ */
    background: linear-gradient(to bottom, #91d040 0%,#aded5c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91d040', endColorstr='#aded5c',GradientType=0 ); /* IE6-9 */
}


.ips-ui-storagetabs .commandBar .optionsMenuBtn .line
{
    display: block;
    width: 12px;
    height: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    content: "";
    margin: 1px 0 2px 3px;
}

.ips-ui-storagetabs .commandBar .optionsMenuBtn .line:first-child
{
    margin-top: 4px;
}


.ips-ui-storagetabs .jade-ui-tree
{
    padding: 2px 5px;
}

.ips-ui-storagetabs .serviceTab > div.loading
{
    background: url(ips/ui/loading/loading.gif) 50% 50% no-repeat;
}

.ips-ui-storagetabs .jade-ui-tree li.expandableIfEmpty > .expander
{
    display: block;
}

.ips-ui-storagetabs .jade-ui-tree li.loading > .expander
{
    display: block;
    background: url(ips/ui/loading/loading11x11.gif) 0 50% no-repeat;
}

.jade-ui-storagetabs-popupmenu .firstSelectedNodeFunction
{
    border-top: 1px solid #bbb;
}

.ips-ui-storagetabs .emptyTreeContent
{
    padding: 0 8px;
    position: relative;
    overflow: hidden;
    min-height: 120px;
}

.ips-ui-storagetabs .emptyTreeContent .text
{
    width: 85%;
    z-index: 2;
}

.ips-ui-storagetabs .emptyTreeContent .arrow
{
    position: absolute;
    z-index: 1;
}

.ips-ui-storagetabs .emptyTreeContent .text > h1
{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    text-align: left;
    line-height: normal;
}

.ips-ui-storagetabs .emptyTreeContent .text > p
{
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    color: #000;
    text-align: left;
    line-height: normal;
    margin: 10px 0 0 0;
}


/** Styles for composition view list */

.ips-composition-viewlist {
    padding: 10px;
}

.ips-composition-viewlistitem {
    font-size: 12px;
    font-family: sans-serif;
    border: solid 5px transparent;
    border-radius: 5px;
    padding: 5px 5px 1.2em 5px;
}

.ips-composition-viewlistitem > .image {
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: contain;
}

.ips-composition-viewlistitem > .image.error {
    background-image: url(ips/ui/error11x11.png);
    background-size: auto;
}

.ips-composition-viewlistitem > .image > img {
    margin: auto;
    display: block;
    height: 100%;
}

.ips-composition-viewlistitem > .label {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.ips-composition-viewlistitem.selected {
    border-color: #4a90d9;
    background-color: #4a90d9;
}

.ips-composition-viewlistitem.selected > .label {
    color: #fff;
}

.ips-composition-viewlistitem > .image.loading {
    background: url(ips/ui/loading/loading.gif) 50% 50% no-repeat;
}

.ips-composition-viewlistitem.warning > .label {
    background: url(ips/ui/warning11x11.png) 99% 50% no-repeat;
}

.ips-composition-viewlistitem.error > .label {
    background: url(ips/ui/error11x11.png) 99% 50% no-repeat;
}


.ips-portfolio-ui-optionselectbox {
    display: inline-block;
}

.ips-portfolio-optionselectbox-popup {
    border: 1px solid #000;
}

.ips-portfolio-ui-optionselector {
    background: white;
    padding: 10px;
}

.ips-portfolio-ui-optionselector > h1 {
    margin: 0;
    font-family: Arial, "sans serif";
    font-size: 20px;
    font-weight: bold;
}

.ips-portfolio-ui-optionselector > p {
    font-family: Arial, "sans serif";
    font-size: 14px;
    margin: 0;
}

.ips-portfolio-ui-listoptionselector > div {
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.ips-portfolio-ui-listoptionselector li {
    display: inline-block;
    position: relative;
    list-style: none;
    padding: 0 40px;
    margin: 10px 0 10px 10px;
    border: solid 5px transparent;
    border-radius: 5px;
    overflow: hidden;
}

.ips-portfolio-ui-listoptionselector li:last-child {
    margin-right: 10px;
}

.ips-portfolio-ui-listoptionselector li.selected {
    border-color: #4a90d9;
    background-color: #4a90d9;
}

.ips-portfolio-ui-listoptionselector li .image-container {
    width: 128px;
    height: 0;
    margin-bottom: 50px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
}

.ips-portfolio-ui-listoptionselector li .image {
    position: absolute;
    left: 0;
    height: 100%;
    bottom: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ips-portfolio-ui-listoptionselector .loading {
    background-image: url(ips/ui/loading/loading.gif);
    background-size: auto;
}

.ips-portfolio-ui-listoptionselector .error {
    background-image: url(ips/ui/error11x11.png);
    background-size: auto;
}

.ips-portfolio-ui-listoptionselector li h1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Arial, "sans serif";
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}

.ips-portfolio-ui-listoptionselector li h1 .delta-price {
    display: block;
    font-size: 12px;
    color: #888;
    height: 1em;
}

/*** Styles for ProblemList  **********************/
.ips-ui-problemlist { /* button */

}

.ips-ui-problemlist.disabled { /* button */

}

.problemlist { /* Popup */
    background: #FEFDEC;
    min-width:250px;
}

.ips-ui-problemlistcollection { /* entry in popup */
    border-bottom: 1px solid #E7E7E7;
    padding: 10px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.direction_south_west .ips-ui-problemlistcollection:last-child {
    /*border-bottom: 6px solid #FFE200;*/
}
.direction_north_east .ips-ui-problemlistcollection:first-child {
    /*border-top: 6px solid #FFE200;*/
}

.ips-ui-problemlistcollection>span{
    display:inline-block;
    height: 25px;
    margin: 0px 5px;
    /*border: 1px solid green;*/
}

.ips-ui-problemlistcollection .icon{
    display:inline-block;
    width:25px;
    height: 25px;
    background: url(ips/ui/problemlist/problem_orange.png) no-repeat center center;
    float: left;
}
.ips-ui-problemlistcollection.type_warning .icon{
    background: url(ips/ui/problemlist/problem_orange.png) no-repeat center center;
}
.ips-ui-problemlistcollection.type_error .icon{
    background: url(ips/ui/problemlist/problem_red.png) no-repeat center center;
}

.ips-ui-problemlistcollection .counter{
    font-weight: bold;
    min-width: 20px;
    text-align: right;
    float: left;
    padding-top: 6px;
    height: 19px;
}

.ips-ui-problemlistcollection .label{
    word-wrap: break-word;
    max-width: 160px;
    cursor: pointer;
    float: left;
    padding-top: 6px;
    height: 19px;
}

.ips-ui-problemlistcollection .next,
.ips-ui-problemlistcollection .prev{
    display:block;
    width:25px;
    height: 25px;
    float:right;
    cursor: pointer;
}

.ips-ui-problemlistcollection .prev{
    background: url(ips/ui/problemlist/arrowback.png) no-repeat center center;
}

.ips-ui-problemlistcollection .next{
    background: url(ips/ui/problemlist/arrow.png) no-repeat center center;
}


/** CartItemPrice */

.ips-ui-cartitemprice .reduction-percent {
    display: none;
}

/** Cropper */

.ips-picedit-cropper.loading {
    background-image: url(ips/ui/loading/loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

/** PictureEditor */

.jade-ui-component.ips-picedit-pictureeditor .loading {
  background: url(ips/ui/loading/loading.gif) 50% 50% no-repeat;
}

/*** EditablePicturePreview ***/

.ips-picedit-editablepictureviewer {
    position: relative;
    overflow: hidden;
}

.ips-picedit-editablepictureviewer .image {
    position: absolute;
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.ips-picedit-editablepictureviewer.fixed-size .image {
    border: 1px solid #ccc;
}

.ips-picedit-editablepictureviewer.cropped .image {
    background-size: cover;
}

.ips-picedit-editablepictureviewer.fixed-size.cropped .image {
    border: none;
}

.ips-picedit-editablepictureviewer .image.loading {
    background-size: initial !important;
}

.ips-picedit-editablepictureviewer .rotation-90 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.ips-picedit-editablepictureviewer .rotation-180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.ips-picedit-editablepictureviewer .rotation-270 {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
}

.ips-picedit-editablepictureviewer .mirrored {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}