/* Paytrail stuff */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');


#paytrail_image {
 max-width: 1000px;
 width: 100%;
}



#Paytrail_container {
 font: 400 100%/1.4 "Poppins",sans-serif;
 font-family: "Poppins",sans-serif;
 font-size: 16px;
 line-height: 24px;
 background-color: #f7f7f8;
 color: #59595c;
 padding: 20px;
 
}

#Paytrail_container fieldset {
 border: 0;
 margin: 30px 0;
}

#Paytrail_container span a {
 text-decoration: underline!important;
}

#Paytrail_container h2 {
 color: #23232a;
 float: none;
 font-size: 40px;
 font-weight: 700;
 letter-spacing: inherit;
 line-height: 48px;
 margin: 0;
 padding:0;
 text-transform: none;
}

#Paytrail_container legend {
 font-size: 16px;
 line-height: 20px;
 margin: 0;
 color: #23232a;
 font-weight: 700;
}

.paytrail_form {
 border: none;
 background-color: #ffffff;
 border-radius: 8px;
 padding: 0.75em;
 cursor: pointer;
 box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.12),0px 1px 2px -1px rgba(0, 0, 0, 0.12);
 vertical-align: middle;
 display: inline-block;
 margin: 5px 5px 5px 0;
 overflow: hidden;
}

.paytrail_form:hover {
 box-shadow: 0 0 0 2px #f7f7f8,0 0 0 4px #76767a;
}



/* Change customer styles */

#customer_changed_info {
box-shadow: 0 2px 7px -3px rgba(0,0,0,.85);
padding: 5px;
text-align: center;
position: fixed;
top: 0;
z-index: 300;
width: 33%;
height: auto;
max-width: 400px;
margin: 0 auto;
left: 33%;
right: 33%;
background-color: #fff;
z-index: 1002;
}


#customer_changed_info h2 {
 font-size: 17px;
 float: inherit;
 margin: 0 0 5px 0;
 padding-bottom:0;
 padding-top: 5px;
}

#customer_changed_info p {
 padding: 0;
}

#customer_changed_info a.button_general {
 display: inline-block;
 margin: 5px 0 0 0;
}

#customer_changed_info_slide_area {

}

#customer_changed_info_company_name {
 text-align:center;
 margin:0;
}

#customer_changed_info_contact_person_name {
 text-align: center;
 margin: 0;
}

#customer_changed_info_navigation {
 float:left;
 width:100%;
}

#customer_changed_window_to_complete_left,
#customer_changed_window_to_left,

#customer_changed_window_to_right, 
#customer_changed_window_to_complete_right {
 clear: inherit;
 cursor: pointer;
 float: left;
 width: 15%;
}

#customer_changed_toggle {
 clear: inherit;
 cursor: pointer;
 float: left;
 width: 40%;
}



#customer_changed_window_to_complete_right {
 text-align: left;
}

#customer_changed_window_to_complete_left {
 text-align: right;
}

.copy_basket_container {
 background-color: #f9f9f9;
 display: inline-block; 
 line-height: 20px;
 margin-top: 10px;
 padding: 5px; 
 width: 170px;
}
.copy_basket_container * {
 cursor: pointer;
}



/* Change customer styles ends */

/* Shoppingbasket styles */

#basket_continue {
 float: left;
 width: 100%;
 background-color: #ebebeb;
 padding: 15px;
}

.line_extra.extra_text {
 padding-left: 5px;
} 

.lines_summary_line label {
 background-color: #f9f9f9!important;
 
}

.lines_summary_value {
 background-color: #f9f9f9!important;
 
}

a.separate {
 cursor: pointer;
 margin-right: -5px;
}

.change_orderrow_quantity {
 margin-top: -7px;
}



.basket-contents {
 font-style: normal;
 font-weight: normal;
 clear: both;
 display: none;
 position: absolute;
 width: 399px;
}

#shopping-basket .basket-contents {
 display: none;
}


/*
#shopping-basket:hover .basket-contents,
.basket-contents:hover {
display:block;
}
*/

.box-flat {
 background: #fff;
 box-shadow: 0px 2px 2px #CCC;
 padding: 10px;
}

.box-flat2 {
 background: #fff;
 box-shadow: 0px 2px 2px #CCC;

}

.basket-contents::before {
 /*content: "\f0d8"; */
 content: url(https://www.retailhosting.fi/rh2_root/Images/arrow-up-sb.png);
 color: #ffffff;
 text-align: right;
 font-size: 35px;
 margin-bottom: -17px;
 margin-top: -35px;
 display: block;
 font-family: fontawesome;
 padding-right: 60px;
}

.basket-contents-header {
 float: left;
 font-size: 20px;
 font-weight: 300;
 padding: 10px 10px 0 10px;
 width: 100%;
}

.basket-contents-header-title {
 float: left;
 padding: 8px;
}

.basket-contents-close {
 float: right;
 padding: 5px 17px 0 0;
}

.container {
 max-height: 521px;
 overflow-y: auto;
 overflow-x: hidden;
 float: left;
}

.sb_line {
 float: left;
 padding: 10px;
 width: 100%;
}

.sb_line.type1 {
 border: 0;
}

.sb_line.type2 {
 border: 0;
}

.basket-contents-image {
 float: left;
}

.basket-contents-qty-code-name {
 float: left;
 max-width: 290px;
 padding-left: 10px;
 padding-top: 10px;
 text-align: left;
}

.shoppingbasket_quantity,
.shoppingbasket_empty {
 z-index: 200;
}

a.open_basket {
 z-index: 150;
 position: relative;
}

.search_content {
 /* position: relative;
 z-index: 100; */
}

.basket-contents-image img {
 max-width: 80px;
}

.basket-contents-footer {
 float: left;
 width: 100%;
}

.total_line {
 float: left;
 width: 100%;
 padding: 10px;
 text-align: right;
 font-size: 14px;
}

.basket-contents-sum,
.basket-contents-qty {
 font-weight: bold;
}

.basket-contents-footer-close {
 border: 1px solid;
 float: left;
 font-size: 13px;
 margin: 10px;
 padding: 10px 20px;
 transition: all .5s;
}

.basket-contents-footer-continue {

 float: right;
 font-size: 13px;
 margin: 10px;
 padding: 10px 20px;
 transition: all .5s;
}


.basket-contents-footer-continue.eng {
font-size: 12px;
}


.basket-contents-footer-close:hover,
.basket-contents-footer-continue:hover {
 opacity: 0.7;
}

.basket_section_line_pay.select_in_page {
 float: left;
 margin-bottom: 15px;
 padding: 15px;
 width: 100%;
 text-align: right;
}

.label_container {
 display: block;
 position: relative;
 padding-right: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 line-height: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 width: inherit;
}

.basket_section_line_pay.select_in_page .label_container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.basket_section_line_pay.select_in_page .label_container .checkmark_monthly::after {
 top: 9px;
 left: 9px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
}

.basket_section_line_pay.select_in_page .checkmark_monthly::after {
 content: "";
 position: absolute;
 display: none;
}


.basket_section_line_pay.select_in_page .checkmark_monthly {
 position: absolute;
 right: 0;
 height: 25px;
 width: 25px;
 background-color: #fff;
 border-radius: 50%;
 border: 1px solid #000;
}

.label_container input:checked ~ .checkmark_monthly {
 background-color: #c11b1d;
}

/* Shoppingbasket styles ends */

/* Order header page */

#order_header_page h2 {
 background-color: #f9f9f9;
 border-bottom: none;
 border-radius: 6px;
 margin-left: 0;
 margin-top: 20px;
 width: 100%;
 padding: 10px 10px 10px 15px;
}

span.search_address_area {
 display: block;
}

.max_length_message {
 color: red;
 display: block;
 text-align: center;
}

/*
#order_header_page .form_row .form_field textarea {
 height: 39px;
 max-width: 210px;
 width: 100%
}
*/


/* sb third page */

.payment h3 {
 padding: 10px 0;
}

/* Menu styles */

.level_2 {
 height: auto!important;
 line-height: inherit!important;
 padding: 10px 0 10px 50px!important;
}

a.level_1 {
 height: auto;
 line-height: inherit;
 padding-top: 10px !important;
 padding-bottom: 10px !important;
}

.arrow_1, .arrow_2 {
 cursor: pointer;
}

div.level_2 {
 height: 40px !important;
 line-height: 40px !important;
 padding-left: inherit !important;
}


div.level_2 a {
 display: block;
 margin-top: -10px;
 padding-left: 50px !important;
}

.level_2 .arrow_1,
.level_2 .arrow_2 {
 margin-right: inherit;
}

.full_width {
 width: 100%;
}

.productsMenu_container.sticky {
 padding-right: 17px;
}



/* product block */

.tuotenosto .monthly_price {
 font-size: 0.6em;
}

.order_block.monthly a.button_general {
 display: inherit;
}

.button_general.no_order_button {
 display:inline-block;
 border-radius:5px;
 font-weight:normal;
 padding:15px;
}

.structured_banner .order_block.monthly a.button_general {
 width: 110px;
}







/* Product specs page */

button.btn {
background-color: transparent;
 cursor: pointer;
text-transform: none;
border: medium none;
}

#copy_link {
 border: none;
 box-shadow: none;
}

#productName {
 margin-top: 0;
}

.product_specs_icons {
 float:left;
 width:100%;
}

.product_code_specspage,
.product_group_specspage {
 color: #919191;
 float: left;
 font-size: 14px;
 padding-left: 10px;
 width: 100%;
}

.mainpicture.bundle {
 padding-bottom: 10px;
}

.additional_bundle_price .psp_vat_info {
 padding-top: 25px!important;
}

.gallery-thumbnail {
 vertical-align: middle;
 background-size: 80px auto;
 background-repeat: no-repeat;
 background-position: center;
}


.specstable_header {
 padding: 8px!important;
}

.mainpicture {
 height: 270px;
}

.zoom_image_container {

 width: 100%;
 height: 30px;
 float: left;
 margin-top: -10px;
 margin-bottom: 10px;
}

.zoom_image {
 cursor: pointer;
}

#main_video {
 width: 100%;
 height: 100%;
 max-width: 400px;
}

.psp_vat_info {
 float: left;
 padding: 15px 0 0 10px;
}

.button_general.button.iconexport {
 background-color:transparent;
 color:#000;
 margin:inherit;
 padding:20px 15px 20px 0;
 text-transform:none;
}



/* */

/* loader animation */
 
#loader_sb,
#loader_page {
 background: rgba(0, 0, 0, 0) url("https://www.retailhosting.fi/Images/loaderBg.png") no-repeat scroll center top;
 color: #000000;
 font-size: 2em;
 font-weight: 300;
 height: 597px;
 left: 50%;
 margin-left: -254px;
 margin-top: -5%;
 opacity: 0.95;
 padding: 230px 20px 20px;
 position: fixed;
 text-align: center;
 top: 15%;
 width: 508px;
 z-index: 99;
}

#loader_sb {
 display: none;
}



 /* Hiding favorites from the Punchout user */




#customer_control_menu_open_guest {


}



 #customer_control_menu_open_guest {
 background-color: #eaeaea;
 float: left;
 height: 40px;
 margin-right: 0;
 min-width: 40px;
 text-align: center;
 width: 20%;
 }
 
 #customer_control_menu_open_guest.sticky {
 display: none;
 }



#basic-table {
 float: left;
}


.required.highlight, .email.highlight {
 border: 1px solid #f00;
}

.red_text {
 color: #f00;
 display: block;
 font-size: 20px;
 margin: 20px 0;
}

p#ohp_message {
 
}

#sb_notification {

 max-width: 450px;
 margin-left: -270px;
 position: absolute!important;
 right: inherit;
 width: 100%;
 z-index: 200;
}

.sb_add_product_image {
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 max-height: 100px;
 max-width: 100px;
}

.sb_add_text {
 float: left;
 margin-top: 20px;
}

#sb_notification p {
 width: auto;
}

#sb_notification p span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 max-width: 300px;
}



/* Supersearch styles */


#preorder_message {
color: red;
 font-size: 1.5em;
}

#pre_orders {
 font-size: 0.9em;
}

a#to_preorders {
 margin-top: -10px;
 margin-left: 32px;
}

a#to_preorders.sticky {
 
}

#front_page_products a#to_preorders,
#content #to_preorders {
 display: none !important;
} 

#supersearch-filters-container {
 margin-left: -300px;
 max-width: 290px;
 position: absolute;
 top: 123px;
 width: 100%;
 z-index: 100;
}

#supersearch_criteria_list {
 margin-top: -20px;
}

.menu-tree.box-flat {
 font-size: 14px;

}

.menu-tree.box-flat h1 {
 width: 100%;

}

.menu-tree i {
 font-family: FontAwesome;

}

.menu-tree.box-flat a.criteria-link {
 padding: 0px;
 float: inherit;
}

.menu-tree.box-flat a:hover {
 box-shadow: none!important;
 
}
.menu-tree.box-flat ul {
list-style-type: square;

}

.form-left-column {
 float: left;
 /* width: 43%; */
}

.form-right-column {
 background-color: #f9f9f9;
 float: right;
 margin-top: 10px;
 padding: 12px;
 width: 57%;
}

#show-all-criteria {
 width: 100%;
}

#add-criteria {
 font-size: 14px;
 margin-bottom: 20px;
}

#add-criteria .form-wide {
 border: 1px solid #e6eaed;
 overflow: hidden;
 padding: 10px;
 width: calc(100% - 20px);
}

#add-criteria input, label.clickable {
 cursor: pointer;
}

#supersearch_criteria_list p,
#supersearch_criteria_list a {
 padding-left: 15px;
}

.criteria {
 background: #f9f9f9;
 font-size: 14px;
 display: inline-block;
 padding: 6px 10px;
 border-radius: 6px;
 margin: 0 5px 5px 0;
}

.criteria .desktop.inline {
 display: inline!important;
}

input.apply_criterias {
 margin-left: 15px;
}

.criteria-value {
 font-weight: bold;
}
.criteria-remove {
 cursor: pointer;
 display: inline-block;
}

.criteria-close {
 vertical-align: middle;
 font-size: 24px;
 padding-left: 3px;
}


.supersearch_link {
 border: 0px;
 float: right;
 top: -105px;
 font-size: 12px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 padding: 20px;
 position: relative;
 font-weight: 300;
 border-radius: 3px;
}

.supersearch_link:hov {

 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.supersearch_link.freetext {
 top: 0;
}

.button_general.supersearch_link {
 padding: 10px;
}

.supersearch_criteria_name {
 font-weight: bold;
}

/* Language selection */

.language_container {
 background-color: #fff;
 box-shadow: 0 6px 25px -5px rgba(0,0,0,.61);
 border-radius: 3px;
 display: none;
 margin-left: -220px;
 margin-top: 70px;
 min-width: 120px;
 padding: 10px;
 position: fixed;
 z-index: 151;
}


.lang_selection.sticky {
 margin-top: 10px;
}


.flag_img {
 border-radius: 20px;
 box-shadow: 0 6px 25px -5px rgba(0,0,0,.21);
 max-width: 30px;
 
}

.mobile .flag_img {
 max-width: 30px;
}

.mobile .lang_flag_arrow {
 width: inherit;
}

a.lang_flag {
 display: block;
 width: 100%;
 padding: 10px 20px 5px 15px;
 text-align: left;
}

.lang_selection {
 cursor: pointer;
 display: block;
 float: left;
 margin-top: 29px;
 margin-left: 15px;
 padding: 5px;
}

.mobile .lang_selection {
 margin-top: 0;
}

.lang_flag_arrow {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
}

.lang_flag span {
 top: -10px;
 position: relative;
 left: 5px;
}

a#credentials {
 margin-left: 10px;
 display: block;
 cursor: pointer;
}

/* Sales person info */


#sales_person {
 float: right;
 background: #fff;
 box-shadow: 0 2px 7px -3px rgba(0,0,0,.85);
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 10px;
 right: 0;
 margin-top: -120px;
 margin-right: 20px;
 position: relative;
 z-index: 100;
}

#sales_person_img {
 float: left;
}

#sales_person_img img {
 border-radius: 35px;
 max-width: 70px;
}

#sales_person_info {
 float: left;
}

#sales_person_info h3 {
 font-size: 20px;
 margin: 0;
}

#sales_person p {
 
 line-height: 3px;
 padding-left: 10px;
}

 /* Customize the label (the container) */
label.radio_container {
 display: block;
 position: relative;
 padding-left: 45px;
 margin-bottom: 12px;
 cursor: pointer;
 line-height: 25px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Hide the browser's default radio button */
.radio_container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Create a custom radio button */
.radio_container .checkmark {
 position: absolute;
 top: 10px;
 left: 10px;
 height: 25px;
 width: 25px;
 background-color: #eee;
 border-radius: 50%;
 box-shadow: 0 1px 6px -3px rgba(0,0,0,.85);
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .checkmark {
 background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .checkmark:after {
 top: 9px;
 left: 9px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: white;
} 

/* Change password page */



.change_password_page {
 font-size: 14px;
}

.change_password_page p {
 padding-left: 10px;
}

#password_rules {
 display: inline-block;

}

#password_rules ul {
list-style-type: circle;
}

#password_rules ul li {
padding-right: 10px;
}

#password_rules ul li.complete,
#password_rules i {
 color: green;
}

input#pass {

}

.togglePassword {
 cursor: pointer;
 display: inline-block !important;
 padding: 10px!important;
}

#password_rules i {
 font-size: 18px;
}

span.li_container span {
 padding-top: 0;
}

span.li_container {
 width: 100%;
 display: inline-flex;
}

#save_password_button:disabled {
 background-color: #ddd;
 color: white;
 cursor: auto;
}


#feedback_form input,
#feedback_form textarea {
 width: 100%;
 max-width: 270px;
}

.margin_vertical {
 margin-top: 10px;
 margin-bottom: 10px;
}

.float_right {
 float: right;
}


/* Footer */

#toimipisteet {
 float: left;
 margin-bottom: 10px;
}

#toimipisteet span {
 padding: 5px 0 0 30px;
 float: left;
 width: 100%;
}

span.additional_phone,
span.additional_address {
 float: left;
 padding-left: 26px;
 padding-bottom: 10px;
}

strong {
 font-weight: 900;
}

#toggle_text {
 float: left;
 padding-left: 30px;
 padding-bottom: 10px;
 cursor: pointer;
}

#messageFi_ok {
 font-size: 25px;
}


/* favourite product */

.tuotenosto {
 padding-bottom: 10px;
}


.pb_icon_holder {
 display: inline-block;
 margin-top: 10px;
}

#icon_container_favourite {
 float: left;
 font-size: 25px;
 height: 40px;
 margin-right: 5px;
 text-align: center;
 width: 40px;
}

.favourite_product_symbol {
 cursor: pointer;
 padding: 10px;
 border-radius: 20px;
 opacity: .7;
 font-size: 18px;
}

.compare_product_symbol {
 cursor: pointer;
 display: inline-block;
 padding: 7px;
 border-radius: 20px;
 opacity: .7;
 font-size: 15px;
}



.pb_compare_icon {
 width: 30px;
}

.favourite_product_symbol:hover
 {
 box-shadow: 2px 2px 8px 2px rgba(0,0,0,.1);
}

.compare_product_symbol:hover {
 opacity: 0.4;
}


.nostoalue h2 {
 width: 100%;
 border-bottom: 0;
}


.tutustuTuotteeseen {
 min-height: 45px;
 border-top: #f0f0f0 1px solid;
}

.saldo {
 border: none!important;
}

.tutustuTuotteeseen.layout_1 .compare_text {
 display: none;
}

.tutustuTuotteeseen.layout_1 {
 border: none;
 margin-top: 0;
}


.structured_banner .tutustuTuotteeseen.layout_1 {
 margin-top: 15px;
}

span.selected_favourite_product i {
color: red;
}

#menu-favorites-head {
 cursor: pointer;
 font-size: 1.2em;
 text-transform: uppercase;
 width: 100%;
 display: inline-block;
}

.favorites_close {

 float: right;
 font-size: 20px;
}

#total_sum_message,
#total_sum_message2 {
 font-size: 1.5em;
 color: red;
 font-weight: 300;
}


@media (max-width: 1000px) {
 #sb_notification { 
 margin-left: 0;
 right: 10px;
}
 



}

@media (max-width: 480px) {
 #order_header_page .form_row .form_field textarea {
 max-width: inherit;
 
}
 

}