.selectize-control .selectize-input, .selectize-control .selectize-dropdown, .selectize-control .option {background:#7A8891 !important; color:white; height:40px; line-height:38px; padding-top:0; padding-bottom:0;} .selectize-control.single .selectize-input:after {border-color: white transparent transparent transparent !important; border-width: 10px 4px 0 4px !important; margin-top:-5px !important;} .selectize-control {float:left; width:105px; margin-right:10px;} .selectize-control:last-child {margin:0;} #bestellenBox .crow {margin-bottom:40px;} #bestellenBox .crow .ccol {} #bestellenBox .crow .ccol.n1 {width:740px; float:left;} #bestellenBox .crow .ccol.n2 {width:360px; float:right; background:#e7eaeb; padding:20px;} #bestellenBox h3 {margin:0; text-align:left; margin-bottom:20px;} #bestellenBox h4 {text-align:left; font-size:1.3em; font-weight:bold; margin:0; border-bottom:solid 1px #ddd; padding-bottom:12px; color:#333; margin-bottom:20px;} #bestellenBox h4:hover {text-decoration:underline;} #bestellenBox strong {margin-bottom:12px; display:block;} #bestellenBox select {background:#7A8891} #bestellenBox .scrow {} #bestellenBox .scrow h4 {cursor:pointer;} #bestellenBox .scrow .sscolBox {padding-bottom:20px; border-bottom:solid 1px #ddd; margin-bottom:30px; display:none;} #bestellenBox .scrow.n1 .sscolBox {display:block;} #bestellenBox .scrow .sscolTable {margin-bottom:40px; display:none;} #bestellenBox .scrow .sscolTable table td {width:260px; padding:3px 0;} #bestellenBox .message {margin-bottom:20px; padding:8px 20px 10px; display:none;} #bestellenBox.bestellen .message { background:#176477; color:white;} #bestellenBox .scrow .sscol.n1 strong {margin:0;} #bestellenBox .scrow .sscol.n4 strong {font-weight:normal;} #bestellenBox .scrow .sscol.n4 .volgende strong {font-weight:bold;} #bestellenBox .total span {border:0; height:40px; line-height:38px; padding-left:8px; width:100%; display:inline-block; color:white; background:#176477;} #bestellenBox .scrow.n1 .sscrow.n2 {} #bestellenBox .scrow.n1 .sscrow.n2 .sscol {float:left; width:106px; margin-right:15px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 {width:300px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 img {float:left; width:70px; margin-right:15px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 strong {display:block;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 p {float:left; width:210px; margin:0;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n4 {float:right; width:180px; margin:0;} #bestellenBox .volgende {display:block; background:#7A8891; color:white; height:40px; line-height:37px; margin-top:15px;padding:0 8px;} #bestellenBox .volgende:hover {background:#455159;} #bestellenBox .volgende strong {display:inline-block; font-weight:bold;} #bestellenBox .volgende img {float:right; display:inline-block; margin-top:10px;} #bestellenBox .scrow.n2 .sscol, #bestellenBox.offerte .scrow.n3 .sscol {width:355px; float:left;} #bestellenBox .scrow.n2 .sscol.n2, #bestellenBox.offerte .scrow.n3 .sscol.n2 {float:right;} #bestellenBox .scrow.n2 .sscol label, #bestellenBox.offerte .scrow.n3 .sscol label {display:block; font-weight:normal;} #bestellenBox .scrow.n2 .sscol input, #bestellenBox.offerte .scrow.n3 .sscol input {width:100%; padding:8px 8px;} #bestellenBox .scrow.n2 .sscol > div, #bestellenBox.offerte .scrow.n3 .sscol > div {margin-bottom:20px;} #bestellenBox .scrow.n2 .sscol > div:last-child, #bestellenBox.offerte .scrow.n3 .sscol > div:last-child {margin-bottom:20px;} #bestellenBox .scrow.n2 div:nth-child(3) {} #bestellenBox .scrow.n2 div:nth-child(3) div, #bestellenBox.offerte .scrow.n3 div:nth-child(3) div {float:left;width:165px;} #bestellenBox .scrow.n2 div:nth-child(3) div:last-child, #bestellenBox.offerte .scrow.n3 div:nth-child(3) div:last-child {float:right;} #bestellenBox .scrow.n2 .haalAdres, #bestellenBox.offerte .scrow.n3 .haalAdres {background:#7a8891; color:white; padding:8px; width:160px; font-weight:bold; margin-top:43px; height:40px; line-height:38px;} #bestellenBox .scrow.n2 .haalAdres span, #bestellenBox.offerte .scrow.n3 .haalAdres span {display:inline-block; margin-top:1px; vertical-align:top; height:auto; line-height:initial;} #bestellenBox .scrow.n2 .naarDitBox, #bestellenBox.offerte .scrow.n3 .naarDitBox {clear:both;} #bestellenBox .scrow.n2 .volgende, #bestellenBox.offerte .scrow.n3 .volgende {display:inline-block; width:150px; float:right; margin:0; width:170px;} #bestellenBox .radioBtn {border:0; background:#7a8891; color:white; padding:7px; padding-right:20px; margin-right:20px; height:40px;} #bestellenBox .radioBtn i {width:15px; height:15px; border-radius:15px; display:inline-block; border:solid 1px #2e383e; background:white; margin-right:10px; vertical-align:top; margin-top:3px;} #bestellenBox .radioBtn.active i {background:#2e383e; border:0;} #bestellenBox .radioBtn span {display:inline-block; vertical-align:top;; margin-top:-1px;} #bestellenBox .scrow.n2 .sscol.set2, #bestellenBox .scrow.n2 .naarDitBox.set2 {display:none;} #bestellenBox .scrow.n3 .volgende {float:right; width:180px;} #bestellenBox .scrow.n4 .sscol > div {float:none; margin-bottom:20px;} #bestellenBox .scrow.n4 .sscol > div:after {clear:both; content:""; display: block;} #bestellenBox .scrow.n4 label {display:block; font-weight:normal;} #bestellenBox .scrow.n4 .sscol {float:left; width:320px; margin-right:40px;} #bestellenBox .scrow.n4 .sscol.n2 > div:first-child {margin-top:85px;} #bestellenBox .scrow.n4 .betalenLine {clear:both;} #bestellenBox .scrow.n4 .betalenLine .volgende {width:160px; float:right;} #bestellenBox .scrow.n4 .sscolTable {margin-bottom:10px; border-bottom:solid 1px #ddd; padding-bottom:15px;} #bestellenBox .scrow.n4 .sscolTable table {width:100%;} #bestellenBox .scrow.n4 .sscolTable table td {width:100%;} #bestellenBox .scrow.n4 .sscolTable .volgende {width:220px; float:right;} /*Column 2*/ #bestellenBox .ccol.n2 .crow {width:100%; margin-bottom:12px;} #bestellenBox .ccol.n2 h4 {border:0; margin-bottom:0; padding:0; margin-bottom:15px;} #bestellenBox .ccol.n2 header {padding:0 10px; background:none; color:#777; border:solid 1px #7A8891; height:40px; line-height:36px;} #bestellenBox .ccol.n2 header strong {display:inline-block; margin:0; float:right; cursor:pointer;} #bestellenBox .ccol.n2 header .edit {display:none;} #bestellenBox .ccol.n2 .crow.done header {background:#176477; color:white; border:0;} #bestellenBox .ccol.n2 .crow.active header {background:#7a8891; color:white;} #bestellenBox .crow .tableBox {border:solid 1px #85abb4; padding:10px 20px 20px; color:#7a8891; display:none;} #bestellenBox .crow .tableBox tr td:first-child {width:200px;} #bestellenBox .crow .tableBox tr td strong {margin-bottom:0;} #bestellenBox .crow .tableBox .address {margin-bottom:20px;} /* Offerte */ #bestellenBox.offerte .scrow.n1 .sscrow.n2 {position:relative;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .sscol.n2 {width:225px; float:right;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .volgende {clear:both; display:block; width:225px; margin:0; right:0; float:right; margin-top:10px;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .ssscol {float:left; margin-right:15px; width:105px;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .ssscol.n2 {margin-right:0;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .bottomLink {position:absolute; bottom:0; left:0; margin:0; padding:0; margin-bottom:30px;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .sscolTable table td, #bestellenBox.offerte .scrow.n2 .sscrow.n2 .sscolTable table td {width:130px;} #bestellenBox.offerte .scrow.n2 .sscrow.n2 .ccrow {margin-bottom:20px;} #bestellenBox.offerte .scrow.n2 .sscrow.n2 .ccrow input, #bestellenBox.offerte .scrow.n2 .sscrow.n2 .ccrow textarea {width:100%; padding:5px 8px;} #bestellenBox.offerte .scrow.n2 .sscrow.n2 .ccrow textarea {height:100px;} #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol {float:left;} #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol.n2 {margin-left:150px;} #bestellenBox.offerte .scrow.n2 .gewensteBox .selectize-control {width:auto; display:inline-block;} #bestellenBox.offerte .scrow.n2 .gewensteBox .selectize-control .selectize-input {width:55px;} #bestellenBox.offerte .scrow.n2 .gewensteBox .selectize-control div {float:none; width:auto; height:auto; margin-bottom:0;} #bestellenBox.offerte .scrow.n2 .gewensteBox .selectize-control.year .selectize-input {width:70px;} #bestellenBox.offerte .ccol.n2 .crow.n2 .tableBox td {width:100px;} #bestellenBox.offerte .crow .tableBox .address {margin-bottom:0;} #bestellenBox.offerte .message {padding:0;} #bestellenBox.offerte .message a {text-decoration:underline;} #bestellenBox.offerte .zakelijkBtn {display:block; margin-bottom:20px; display:none;} /*TMP*/ /* #bestellenBox .scrow .sscolBox {display:block;} #bestellenBox .scrow .sscolTable {display:block;} #bestellenBox .crow .tableBox {display:block;} */ /* #bestellenBox.offerte .scrow .sscolBox {display:block;} #bestellenBox.offerte .scrow .sscolTable {display:block;} #bestellenBox.offerte .crow .tableBox {display:block;} */ @media(max-width:1199px) { .selectize-control {float:none; width:100%;} /*TMP*/ /* #bestellenBox > .crow {border:solid 1px blue;} #bestellenBox .crow .ccol {border:solid 1px red;} #bestellenBox .scrow.n1 .sscrow .sscol {border:solid 1px red;} #bestellenBox .scrow.n2 .sscol {border:solid 1px red;} */ #bestellenBox .crow .ccol.n1 {width:570px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol {width:118px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n3 {margin-right:0;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n4 {float:left; margin-top:20px; clear:both;} #bestellenBox .scrow.n2 .sscol, #bestellenBox .scrow.n2 .sscol.n2, #bestellenBox.offerte .scrow.n3 .sscol, #bestellenBox.offerte .scrow.n3 .sscol.n2 {float:none; width:400px;} #bestellenBox .radioBtn {display:block; margin-bottom:20px;} #bestellenBox .scrow.n2 .volgende, #bestellenBox .scrow.n3 .volgende, #bestellenBox.offerte .scrow.n3 .volgende {float:none;} #bestellenBox .scrow.n4 .sscol {width:180px; float:none;} #bestellenBox .scrow.n4 .betalenLine .volgende {float:none;} #bestellenBox .scrow.n4 .sscol.n2 > div:first-child {margin-top:0;} #bestellenBox .scrow.n4 .betalenLine .volgende {width:180px;} #bestellenBox .scrow.n4 .sscolTable .volgende {float:none;} #bestellenBox.offerte .scrow.n4 .selectize-control {width:100px;} #bestellenBox .scrow.n2 .haalAdres, #bestellenBox.offerte .scrow.n3 .haalAdres {margin-top:0;} #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol.n2 {margin-left:100px; width:200px;} #bestellenBox.offerte .gewensteBox .gcol.n2 .radioBtn {display:inline-block; margin-right:10px;} } @media(max-width:991px) { #bestellenBox .crow .ccol.n1 {width:490px;} #bestellenBox .crow .ccol.n2 {width:280px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol {float:none !important; margin-top:20px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n4 {width:200px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 {margin-top:0;} #bestellenBox .crow .tableBox {padding:5px 10px;} #bestellenBox .crow .tableBox tr td:first-child {width:150px;} #bestellenBox.offerte .scrow.n1 .sscrow.n2 .bottomLink {position:static; left:initial; top:initial; clear:both; text-align:left; margin-top:20px; display:block;} #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol, #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol.n2 {float:none; margin:0;} #bestellenBox.offerte .scrow.n2 .gewensteBox .gcol.n2 {margin-top:20px;} } @media(max-width:860px) { #bestellenBox .crow .ccol.n1 {width:400px;} } @media(max-width:767px) { #bestellenBox .crow .ccol.n1 {width:330px;} #bestellenBox .crow .ccol.n2 {width:230px;} #bestellenBox .crow .tableBox tr td:first-child {width:110px;} #bestellenBox .scrow.n2 .sscol, #bestellenBox .scrow.n2 .sscol.n2, #bestellenBox.offerte .scrow.n3 .sscol, #bestellenBox.offerte .scrow.n3 .sscol.n2 {width:100%;} #bestellenBox .scrow.n2 div:nth-child(3) div:first-child, #bestellenBox.offerte .scrow.n3 div:nth-child(3) div:first-child {margin-bottom:20px;} #bestellenBox .scrow.n2 div:nth-child(3) div:last-child, #bestellenBox.offerte .scrow.n3 div:nth-child(3) div:last-child {float:none;} #bestellenBox.offerte .scrow.n2 .gewensteBox .selectize-control .selectize-input {width:80px;} } @media(max-width:620px) { #bestellenBox .crow .ccol.n1, #bestellenBox .crow .ccol.n2 {float:none; width:320px; margin:0 auto;} /* #bestellenBox .scrow.n1 .sscrow.n2 .sscol, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n3, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n4 {margin-left:auto; margin-right:auto;} */ #bestellenBox .crow .tableBox tr td:first-child {width:180px;} } @media(max-width:380px) { #bestellenBox .crow .ccol.n1, #bestellenBox .crow .ccol.n2 {width:260px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n4 {width:100%;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 img, #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 p {float:none;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 img {display:block; width:150px; margin:0 auto 20px;} #bestellenBox .scrow.n1 .sscrow.n2 .sscol.n1 p {width:100%;} #bestellenBox .crow .tableBox tr td:first-child {width:140px;} #bestellenBox .scrow.n2 div:nth-child(3) div {width:100%;} #bestellenBox .radioBtn, #bestellenBox .scrow.n2 .haalAdres, #bestellenBox .scrow.n2 .volgende, #bestellenBox .scrow.n3 .volgende, #bestellenBox .scrow.n4 .sscol, #bestellenBox .scrow.n4 .betalenLine .volgende, #bestellenBox .scrow.n4 .sscolTable .volgende {width:100%; text-align:left;} #bestellenBox.offerte .gewensteBox .gcol.n2 .radioBtn {text-align:left; width:80px;} #bestellenBox.offerte .zakelijkBtn {text-align:left; width:110px;} }