@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

A:link { text-decoration: none;  outline: none; color: #202020; }
A:visited { text-decoration: none; outline: none; color: #202020; }

html { height: 100%; }
body {
    margin: 0px;
    border: 0px;
    height: 100%;
    padding: 0;
    color: #202020;
    font-family: Manrope, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    line-height: 21px;
    background-color: #fff;
    font-weight: 400
}
body.extraMainbuttonPadding #mainContainer { padding-bottom: 75px; }

/* Clear floating elements */
.clear { display: block; clear: both; }

/* Headers */
h1 { font-family: poppins; font-weight: 500; font-size: 20px; }

/* Input fields */
.core-input { border: 1px solid #eaeaea; padding: 9px 10px; border-radius: 3px; }
.core-button { background-color: #f7f7f7; padding: 12px 15px; border: 0; border-radius: 10px; font-size: 14px; cursor: pointer; }
.core-button-active { background-color: #2ebe3c; color: #fff; }
    .core-button-active img { filter: brightness(0) saturate(100%) invert(100%) sepia(44%) saturate(0%) hue-rotate(264deg) brightness(107%) contrast(100%); }
select { height: 36px; background-color: #fff; border: 1px solid #f1f1f1; font-size: 12px; min-width: 95px; margin: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; padding: 6px 25px 6px 8px; background-image: url('../images/select_arrow.png'); background-size: 10px; background-position: right 12px top 14px; background-repeat: no-repeat; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; overflow: hidden; }
    select::-ms-expand { display: none; }

/* Default colors */
.core-primair-color { color: #2ebe3c }
.core-primair-background { background-color: #2ebe3c }
.core-primair-border { border-color: #2ebe3c }

/* Tags */
.tag { display: inline; padding: 4px 12px; border-radius: 5px; background-color: #999; color: #fff; font-size: 12px; white-space: nowrap; }
    .tag.marginLeft { margin-left: 5px; }
    .tag.marginRight { margin-right: 5px; }
    .tag.red { background-color: #FAD7E0; color: #e0597e; }
    .tag.green { background-color: #EAF7E7; color: #51AB3C; }
    .tag.orange { background-color: #FCE8D6; color: #E98E48; }
    .tag.blue { background-color: #def4ff; color: #00A8FA; }

/* Message container for errors & warnings */
.message-container { position: relative; padding: 20px 30px 20px 30px; margin-bottom: 20px; border: 1px solid #e6e6e6; background-color: #fefefe; -webkit-border-radius: 6px; border-radius: 6px; }
    .message-container.noMargin { margin-bottom: 0; }
    .message-container .title { margin-bottom: 3px; font-weight: bold; }
    .message-container.success { color: #468847; background-color: #dff0d8; border: none; background-image: none; }
        .message-container.success a { color: #468847; }
    .message-container.info { color: #3a87ad; background-color: #d9edf7; border: none; background-image: none; }
        .message-container.info a { color: #3a87ad; }
    .message-container.warning { color: #c09853; background-color: #fbede1; border: none; background-image: none; }
        .message-container.warning a { color: #c09853; }
    .message-container.danger { color: #c95b59; background-color: #f8e6e6; border: none; background-image: none; }
        .message-container.danger a { color: #c95b59; }

/* Default border */
.default-border {  border: 1px solid #eeeeee; border-radius: 7px; padding: 20px; box-shadow: 0px 6px 12px 0px #00000008; }
    .default-border.active-on-hover { cursor: pointer; }
    .default-border.selected, .default-border.active-on-hover:hover { background-color: #f8fff9; border-color: #2EBE3C; }

/* Selectable div */
.selectable-div { cursor: pointer; }

/* Views */
.view-core { position: relative; float: left; width: calc(70% - 100px); padding: 40px 40px 0 40px; }
    .view-core .view-core-details { position: relative; height: 100%; padding: 20px; }
.view-core-branding { position: relative; float: right; width: 30%; background-color: #ffffff; height: 100%; overflow: scroll; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }

/* Language selector */
.view-core .select-language { position: absolute; right: 0; top: 20px; }
    .view-core .select-language .selected-language { position: relative; width: 25px; height: 25px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border-radius: 15px; }
    .view-core .select-language .languages-overview { position: absolute; display: none; right: 0; top: 0; background-color: #fff; width: 150px; background-color: #fff; z-index: 50; border-radius: 10px; padding: 20px; box-shadow: 0px 6px 12px 0px #00000008; }
        .view-core .select-language .languages-overview .title { font-weight: bold; font-size: 11px; }
        .view-core .select-language .languages-overview .language { position: relative; margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
            .view-core .select-language .languages-overview .language .icon { position: relative; float: left; width: 20px; height: 20px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border-radius: 15px; margin-right: 10px; }

/* Header */
.view-core .view-header {  }

/* Brand logo */
.view-core .view-header .logo { position: relative; float: left; width: 300px; margin: 10px 40px 0 10px; }
    .view-core .view-header .logo img { max-width: 100%; max-height: 80px; }

/* Menu core view */
.view-core .view-header .breadcrumbs { position: relative; float: left; margin-top: 30px; }
    .view-core .view-header .breadcrumbs .button { postion: relative; float: left; height: 32px; padding: 10px 5px 0 5px; text-align: center; border-radius: 10px; margin-left: 10px; color: #bfbfbf; }
        .view-core .view-header .breadcrumbs .button.completed { color: #202020; }
        .view-core .view-header .breadcrumbs .button.active { color: #2ebe3c; }
        .view-core .view-header .breadcrumbs .button#menu-start { margin-left: 0; }
        .view-core .view-header .breadcrumbs .button .icon { display: inline-block; width: 20px; height: 20px; margin-right: 10px; }
            .view-core .view-header .breadcrumbs .button .icon img { height: 17px; }
        .view-core .view-header .breadcrumbs .button .title { display: inline-block; margin-top: -10px; vertical-align: 4px; }
    .view-core .view-header .breadcrumbs .arrow { position: relative; float: left; width: 10px; height: 15px; margin: 11px 10px 0 10px; background-image: url('../images/menu-arrow.svg'); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; }
        .view-core .view-header .breadcrumbs .arrow.active { background-image: url('../images/menu-arrow-active.svg'); }

/* Main background */
.main-background-to-view { background-color: #f8f8f8; }

/* Core buttons */
.core-form-buttons { postion: relative; margin-top: 30px; }
    .core-form-buttons .icon { position: absolute; width: 15px; height: 15px; top: 14px; }
    .core-form-buttons #button-prev { position: relative; float: left; }
        .core-form-buttons #button-prev .core-button { padding-left: 45px; padding-right: 25px; }
        .core-form-buttons #button-prev .icon { left: 18px; }
    .core-form-buttons #button-submit { position: relative; float: right; background-image: url('../images/button-next.svg'); }
        .core-form-buttons #button-submit .core-button { padding-right: 45px; padding-left: 25px; }
        .core-form-buttons #button-submit .icon { right: 18px; }

/* Start view */
#view-return-start { position: relative; }
    #view-return-start form { width: 300px; margin-left: calc(50% - 150px); padding: 70px 0; }
    #view-return-start input { width: calc(100% - 20px); }
#view-return-start .info { margin-bottom: 10px; }
#view-return-start .label { margin-top: 15px; margin-bottom: 5px; font-weight: bold; }
#view-return-start .core-button { margin-top: 15px; width: 100%; }

/* Request header */
#request-header { position: relative; margin-bottom: 20px; }
    #request-header h1 { float: left; }
    #request-header .table { position: relative; float: right; }
        #request-header .table .item { position: relative; float: right; margin-left: 30px; text-align: right; }
        #request-header .table .item .label { font-weight: bold; }

/* General view comment */
.general-comment { position: relative; margin-bottom: 15px; }

/* Order view */
#view-order-details { position: relative; }
    #view-order-details #existing-pre-announcements { position: relative; }
    #view-order-details #request-items { position: relative; margin-right: -50px; }
        #view-order-details #request-items .request-item { position: relative; float: left; width: calc(50% - 75px); margin: 10px 20px 10px 0; }
            #view-order-details #request-items .request-item .order-line { position: relative; margin-top: 5px; }
                #view-order-details #request-items .request-item .order-line .image { position: relative; float: left; width: 70px; height: 90px; margin: 5px 30px 0 0; }
                    #view-order-details #request-items .request-item .order-line .image img { width: 100%; border-radius: 5px; }
                    #view-order-details #request-items .request-item .order-line .line-details { position: relative; float: right; width: calc(100% - 100px); }
                        #view-order-details #request-items .request-item .order-line .line-details .item { position: relative; float: left; width: calc(50% - 20px); margin-bottom: 10px; }
                            #view-order-details #request-items .request-item .order-line .line-details .item .label { font-weight: bold; }
                #view-order-details #request-items .request-item .new-return-status { margin-top: 8px; }
                    #view-order-details #request-items .request-item .new-return-status .message-container { padding: 5px 10px; margin-bottom: 0; }
                #view-order-details #request-items .request-item .return-options { border-top: 1px solid #eee; margin-top: 5px; padding-top: 10px; }
                    #view-order-details #request-items .request-item .return-options .return-option { float: left; width: 140px; text-decoration: underline; cursor: pointer; }
                        #view-order-details #request-items .request-item .return-options .return-option .icon { float: left; width: 13px; margin: 2px 8px 0 0; }
                            #view-order-details #request-items .request-item .return-options .return-option .icon img { width: 100%; }
                #view-order-details #request-items .request-item .create-return { position: relative; display: none; float: left; width: calc(30% - 40px); background-color: #fcfcfc; border: 1px solid #dddddd; padding: 15px 20px; border-radius: 7px; }
    #view-order-details #request-items .request-item.create-return { width: calc(100% - 90px); }
        #view-order-details #request-items .request-item.create-return .order-line { width: 47%; }
        #view-order-details #request-items .request-item.create-return .return-options { display: none; }
        #view-order-details #request-items .request-item.create-return .create-return { display: block; }

/* Line header detail view */
#header-line-details { position: relative; margin-bottom: 40px; }
    #header-line-details .image { position: relative; float: left; width: 77px; height: 90px; margin-right: 40px; }
        #header-line-details .image img { width: 100%; border-radius: 5px; }
    #header-line-details .line-details { position: relative; float: left; width: calc(100% - 120px); }
        #header-line-details .line-details .item { position: relative; float: left; width: 200px; margin-bottom: 10px; }
            #header-line-details .line-details .item .label { font-weight: bold; }
        #header-line-details .line-details #select-return-quantity { position: relative; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
            #header-line-details .line-details #select-return-quantity .title { font-weight: bold; margin-bottom: 5px; }
            #header-line-details .line-details #select-return-quantity .return-reason select { width: 100%; }
        #header-line-details .line-details #select-return-reason { position: relative; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
            #header-line-details .line-details #select-return-reason .title { font-weight: bold; margin-bottom: 5px; }
            #header-line-details .line-details #select-return-reason .return-reason select { width: 100%; }

/* Return view */
#view-return-request { position: relative; }
    #view-return-request #request-exchange { margin-top: 25px; }
    #view-return-request #request-exchange .title { font-weight: bold; font-size: 14px; }

/* Exchange view */
#view-exchange-request { position: relative; }
    #view-exchange-request #exchange-type { position: relative; margin-bottom: 30px; }
        #view-exchange-request #exchange-type .item { margin-bottom: 10px; cursor: pointer; }
            #view-exchange-request #exchange-type .item .title { font-weight: bold; font-size: 14px; }
    #view-exchange-request #start-item-exchange { display: none; }
    #view-exchange-request #exchange-items { position: relative; }
        #view-exchange-request #exchange-items .item { padding-top: 10px; padding-bottom: 10px; margin-bottom: 5px; cursor: pointer; }
            #view-exchange-request #exchange-items .item span { color: #a2a2a2; margin-right: 8px; }
            #view-exchange-request #exchange-items .item .image { position: relative; float: left; height: 40px; margin-right: 30px;  }
                #view-exchange-request #exchange-items .item .image img { height: 100%; }
            #view-exchange-request #exchange-items .item .color { position: relative; float: left; width: 180px; padding-top: 9px; }
            #view-exchange-request #exchange-items .item .size { position: relative; float: left; width: 150px; padding-top: 9px; }
            #view-exchange-request #exchange-items .item .stock { position: relative; float: left; width: 150px; padding-top: 9px; }
            #view-exchange-request #exchange-items .item .button { position: relative; float: right; display: none; padding-top: 9px; text-decoration: underline; }
            #view-exchange-request #exchange-items .item:not(.prevent-exchange):hover { background-color: #f8fff9; border-color: #2EBE3C; box-shadow: 0px 6px 12px 0px #00000008; }
                #view-exchange-request #exchange-items .item:not(.prevent-exchange):hover .button { display: block; }
#view-exchange-request #request-return { margin-top: 25px; }

/* Shipping view */
#view-shipping { position: relative; }
    #view-shipping .shipping-items { position: relative; }
        #view-shipping .shipping-items .shipping-item { position: relative; float: left; width: calc(50% - 60px); padding: 25px; margin: 0 15px 15px 0; }
            #view-shipping .shipping-items .shipping-item:nth-child(even) { margin-right: 0; }
            #view-shipping .shipping-items .shipping-item .logo { position: relative; float: left; width: 60px; height: 60px; margin-right: 12px; text-align: center }
                #view-shipping .shipping-items .shipping-item .logo img { max-height: 60px; max-height: 60px; }
            #view-shipping .shipping-items .shipping-item .details { position: relative; float: left; width: calc(100% - 200px); }
                #view-shipping .shipping-items .shipping-item .details .title { font-weight: bold; }
            #view-shipping .shipping-items .shipping-item .price { position: relative; float: right; width: 120px; text-align: right; }

/* Summary view */
#view-return-summary { position: relative; }
    #view-return-summary #summary-details { position: relative; }
        #view-return-summary #summary-details .order-lines { position: relative; margin-bottom: 20px; padding-top: 20px; border-bottom: 1px solid #eee; }
            #view-return-summary #summary-details .order-lines .order-line { position: relative; margin-bottom: 10px; }
                #view-return-summary #summary-details .order-lines .order-line .image { position: relative; float: left; width: 70px; height: 90px; margin-right: 30px; }
                    #view-return-summary #summary-details .order-lines .order-line .image img { width: 100%; border-radius: 5px; }
                #view-return-summary #summary-details .order-lines .order-line .item { position: relative; float: left; width: 300px; }
                #view-return-summary #summary-details .order-lines .order-line .quantity { position: relative; float: left; width: calc(100% - 550px); }
                    #view-return-summary #summary-details .order-lines .order-line .quantity .return-reason { margin-top: 5px; font-size: 10px; background-color: #f6f6f6; padding: 5px 10px; border-radius: 6px; }
                    #view-return-summary #summary-details .order-lines .order-line .quantity .exchange { margin: 5px 0 0 0; padding: 5px 10px; }
                #view-return-summary #summary-details .order-lines .order-line .price { position: relative; float: right; width: 100px; font-size: 15px; }
                #view-return-summary #summary-details .order-lines .order-line .label { font-size: 10px; font-weight: bold; text-decoration: underline; margin-bottom: 7px; }
        #view-return-summary #summary-details #extra-details { position: relative; }
            #view-return-summary #summary-details #extra-details .item { position: relative; font-size: 15px; margin-bottom: 10px; }
                #view-return-summary #summary-details #extra-details .item.line { padding-top: 10px; border-top: 1px solid #eee; }
                #view-return-summary #summary-details #extra-details .item .title { position: relative; float: left; width: calc(100% - 150px); }
                #view-return-summary #summary-details #extra-details .item .value { position: relative; float: right; width: 100px; }
    #view-return-summary #refund-via-giftcard { position: relative; margin-top: 40px; }
        #view-return-summary #refund-via-giftcard h2 { padding-bottom: 20px; border-bottom: 1px solid #eee; }
        #view-return-summary #refund-via-giftcard .introduction { margin-bottom: 20px; }
        #view-return-summary #refund-via-giftcard .container-giftcard { margin-bottom: 10px; }
            #view-return-summary #refund-via-giftcard .container-giftcard .icon { float: left; width: 50px; margin-right: 15px; }
                #view-return-summary #refund-via-giftcard .container-giftcard .icon img { width: 100%; margin-top: 3px; }
            #view-return-summary #refund-via-giftcard .container-giftcard .tag { margin-right: 10px; }
            #view-return-summary #refund-via-giftcard .container-giftcard .title { font-size: 14px; font-weight: bold; }
        #view-return-summary #refund-via-giftcard .container-original-refund { cursor: pointer; }

/* Finished view */
#view-return-finished { position: relative; }
    #view-return-finished #return-details { width: 300px; margin-left: calc(50% - 150px); padding: 70px 0; }
        #view-return-finished #return-details .info { margin-bottom: 10px; }
        #view-return-finished #return-details .label { margin-top: 15px; margin-bottom: 5px; font-weight: bold; }
        #view-return-finished #return-details .core-button { margin-top: 15px; width: 100%; }

/* Pre-anouncements */
#view-pre-announcement { position: relative; }
    #view-pre-announcement #announcement-header { position: relative; margin-bottom: 20px; }
    #view-pre-announcement #announcement-header h1 { float: left; }
    #view-pre-announcement #announcement-header .table { position: relative; float: right; }
    #view-pre-announcement #announcement-header .table .item { position: relative; float: right; margin-left: 30px; text-align: right; }
    #view-pre-announcement #announcement-header .table .item .label { font-weight: bold; }
    #view-pre-announcement .pre-announcement { position: relative; margin-bottom: 20px; }
        #view-pre-announcement .pre-announcement .header-data { position: relative; }
            #view-pre-announcement .pre-announcement .header-data .item { position: relative; margin-bottom: 10px; float: left; width: 140px; }
                #view-pre-announcement .pre-announcement .header-data .item#pre-announcement-id { width: 85px; }
                #view-pre-announcement .pre-announcement .header-data .item#return_nunber { width: 200px; }
                #view-pre-announcement .pre-announcement .header-data .item .label { font-weight: bold; }
        #view-pre-announcement .pre-announcement .order-lines { position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
            #view-pre-announcement .pre-announcement .order-lines .order-line { position: relative; margin-top: 10px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .image { position: relative; float: left; width: 70px; height: 90px; margin-right: 30px; }
                    #view-pre-announcement .pre-announcement .order-lines .order-line .image img { width: 100%; border-radius: 5px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .item { position: relative; float: left; width: 200px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .color { position: relative; float: left; width: 150px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .size { position: relative; float: left; width: 150px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .barcode { position: relative; float: left; width: 150px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .quantity { position: relative; float: left; width: 100px; }
                #view-pre-announcement .pre-announcement .order-lines .order-line .label { font-size: 10px; font-weight: bold; text-decoration: underline; margin-top: 3px; margin-bottom: 7px; }