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

:root {
    /* Colors */
    --grey: rgba(35, 31, 32, 1);
    --light: rgba(64, 56, 58, 1);
    --blue: rgba(0, 164, 225, 1);
    --white: rgba(255, 255, 255, 1);
    --greyed: rgb(187, 169, 173, 1);

    --gradient: linear-gradient(to right, var(--grey) 25%, var(--blue));
    --shadow: 3px 3px 3px 0px var(--grey);

    /* Background */
    --background: url('../images/background.png');

    /* Time */
    --trans: 0.5s;

    /* Pixels */
    --def: 20px;
    --ddef: calc(var(--def) * 2);
    --hdef: calc(var(--def) / 2);
    --qdef: calc(var(--def) / 4);
    --rad: 3px;
    --ifont: 20px;
    --head: 100px;
    --dhead: calc(var(--head) * 2);
    --hhead: calc(var(--head) / 2);

    /* Borders */
    --bblue: 1px solid var(--blue);
    --bwhite: 1px solid var(--white);
    --bgrey: 1px solid var(--grey);
}

html, body {
    /* Global margin and padding */
    margin: 0px;
    padding: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
 
    /* Global coloring and fonts */
    background-color: var(--grey);
    font-family: Roboto;

    /* Displaying */
    display: grid;
}

input, textarea {
    /* Background */
    border: none;
    background: none;

    /* Font */
    font-family: Roboto;
    font-size: var(--def);

    /* Positioning */
    padding: var(--qdef);
}

input:focus, textarea:focus {
    box-shadow: inset 0 0 3px var(--blue);
}

.quickenquiry {
    /* Positioning */
    position: fixed;
    right: 0px;
    top: 100px;
    z-index: 5;
    padding: var(--def);

    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Display flex */
    display: flex;
    flex-direction: row;

    /* Font */
    font-size: var(--def);
    color: var(--white);
}

.quickenquiry img {
    width: 50px;
    max-height: 100%;
}

.quickenquirybutton {
    /* Display flex */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Font */
    color: var(--white);
    text-align: center;

    /* Positioning */
    width: 75px;
}

.quickenquirybutton:hover {
    /* Cursor */
    cursor: pointer;
}

.quickenquiryclose {
    /* Display */
    display: none;
    
    /* Font */
    font-size: 30px;
    color: var(--blue);
    text-align: center;
    line-height: 30px;

    /* Positioning */
    margin-right: var(--def);
    height: 30px;
    width: 30px;

    /* Background */
    background-color: var(--white);
    border-radius: var(--def);
}

.quickenquiryclose:hover {
    /* Cursor */
    cursor: pointer;
}

.quickenquirycontent {
    /* Display */
    display: none;
}

.quickenquirycontent form {
    /* Display grid */
    display: grid;
    grid-template-areas:
        "firstname lastname"
        "company email"
        "phone . "
        "message message"
        "submit submit";
}

.qe_firstname {
    /* Positioning */
    grid-area: firstname;
}

.qe_lastname {
    /* Positioning */
    grid-area: lastname;
}

.qe_company {
    /* Positioning */
    grid-area: company;
}

.qe_phone {
    /* Positioning */
    grid-area: phone;
}

.qe_message {
    /* Positioning */
    grid-area: message;
}

.qe_submit {
    /* Positioning */
    grid-area: submit;
}

.quickenquiry input, .quickenquiry textarea {
    /* Display */
    display: block;

    /* Positioning */
    margin: 2px;

    /* Font */
    color: var(--grey);

    /* Background */
    background-color: var(--white);
    border-radius: var(--rad);
    border: none;
}

.quickenquirymessage {
    /* Font */
    font-size: var(--hdef);

    /* Positioning */
    width: 500px;
}

.container {
    /* Default display style */
    display: grid;
}

.headermain {
    /* Font */
    color: var(--white);
}

.headermain span {
    /* Adjusted font weight for company name */
    font-weight: 700;
}

.headersub {
    /* Font */
    font-weight: 700;
    color: var(--blue);
    text-shadow: -1px -1px 0 var(--grey),
                 -1px 1px 0 var(--grey),
                 1px -1px 0 var(--grey),
                 1px 1px 0 var(--grey);
}

.menu {
    /* Display flex */
    display: flex;
    flex-direction: row;

    /* Background */
    background-color: var(--grey);
}

.menu a:link, .menu a:visited {
    /* Menu link styling */
    display: block;
    color: var(--blue);
    padding: var(--hdef);
    transition: var(--trans);
}

.menu a:hover, .language:hover {
    /* Hover menu link styling */
    background-color: var(--blue);
    color: var(--white);
    border-radius: 5px;
    transition: var(--trans);
}

.language {
    /* Text */
    color: var(--blue);
    text-decoration: underline;
    display: block;
    padding: var(--hdef);
}

.language:hover {
    cursor: pointer;
}

.headerimage {
    /* Header background image */
    background: url(../images/background.png);
    background-repeat: no-repeat;
    background-position: bottom 25% left 50%;
    background-size: cover;
}

main {
    /* Background */
    background-color: var(--white);
    border-radius: var(--rad);

    /* Text */
    padding: var(--def);
    color: var(--grey);

    /* Position */
    min-height: 300px;
}

.disclaimer {
    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Text */
    padding: var(--def);
    color: var(--grey);
    text-align: center;

    /* Position */
    margin-top: 20px;
}

footer {
    /* Display flex */
    display: flex;

    /* Positioning */
    margin-top: var(--def);

    /* Background */
    border-top: var(--bblue);
}

.footerleft, .footermiddle, .footerright {
    /* Font */
    font-size: 15px;

    /* Positioning */
    padding: var(--def);
}

.webshop {
    /* Display flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.webshop a:link, .webshop a:visited {
    /* Font */
    text-decoration: none;
    color: var(--grey);
}

.webshop a:hover {
    /* Font */
    color: var(--blue);
}

.webshop .webshop_category {
    /* Display flex */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;

    /* Font */
    font-size: 25px;
    font-family: Oxygen;

    /* Positioning */
    width: 250px;
    height: 320px;
}

.webshop .webshop_title {
    text-align: center;
}

.webshop img {
    /* Positioning */
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.webshop_navbar {
    /* Display flex */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    /* Background */
    background-color: var(--grey);
    border-radius: var(--rad);

    /* Positioning */
    padding: var(--hdef);
    margin-bottom: var(--def);
}

.webshop_navbar a:link, .webshop_navbar a:visited {
    /* Font */
    color: var(--white);
    text-decoration: none;

    /* Display */
    display: block;

    /* Positioning */
    padding: var(--qdef);

    /* Animation */
    transition: var(--trans);
}

.webshop_navbar a:hover {
    /* Font */
    color: var(--grey);

    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Animation */
    transition: var(--trans);
}

.product_details .title {
    font-size: 30px;
}

.product_details span {
    display: block;
    font-size: var(--def);
    margin-top: var(--def);
}

.product_specifications {
    /* Positioning */
    margin-top: var(--def);
}

article {
    /* Positioning */
    margin-bottom: var(--ddef);

    /* Text */
    text-align: justify;
}

.title {
    /* Text */
    color: var(--blue);
    display: block;

    /* Border */
    border-bottom: 2px solid var(--blue);

    /* Positioning */
    padding: var(--def);
    margin-bottom: var(--def);

    /* Background */
    background-color: var(--grey);
    background: var(--gradient);
    border-radius: var(--rad);
}

.login {
    /* Display flex */
    display: flex;
    flex-direction: column;
    align-content: center;

    /* Font */
    text-align: center;
}

.login form {
    /* Display flex */
    display: flex;
    flex-direction: column;
    align-content: center;
}

.login form input {
    /* Display */
    align-self: center;

    /* Positioning */
    width: 400px;

    /* Background */
    border-bottom: var(--bblue);
}

.accountdetails a:link, .accountdetails a:visited {
    /* Display */
    display: block;

    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);
    box-shadow: var(--shadow);

    /* Font */
    color: var(--grey);
    text-decoration: none;
    text-align: center;

    /* Positioning */
    padding: var(--hdef);
    margin-top: var(--hdef);
    margin-bottom: var(--def);

    /* Animation */
    transition: var(--trans);
}

.accountdetails {
    /* Display */
    display: block;

    /* Positioning */
    margin-bottom: var(--def);
}

.accountdetails table {
    margin: var(--hdef);
}

.accountdetails a:hover {
    background: none;
    outline: var(--bblue);
    transition: var(--trans);
}

.accountdetails_grey .title {
    background-color: var(--greyed);
    color: var(--white);
    border-bottom: var(--bwhite);
}

.accountdetails input[type="submit"] {
    display: block;
    background-color: var(--blue);
    border-radius: var(--rad);
    width: 100%;
    margin-bottom: var(--def);
}

.accountdetails input[type="submit"]:hover {
    cursor: pointer;
}

.contactform form {
    /* Display flex */
    display: flex;
    flex-direction: column;

    /* Positioning */
    max-width: 600px;
    margin: 0 auto;
}

.contactform input, .contactform textarea {
    border-bottom: var(--bblue);
}

.contactform input[type="submit"] {
    display: block;
    background-color: var(--blue);
    border-radius: var(--rad);
    width: 100%;
    margin-bottom: var(--def);
}

.contactform input[type="submit"]:hover {
    cursor: pointer;
}

.button a:link, .button a:visited {
    display: block;
    padding: var(--hdef);
    margin-top: var(--hdef);
    background-color: var(--blue);
    border-radius: var(--rad);
    color: var(--grey);
    text-align: center;
    transition: var(--trans);
}

.button a:hover {
    background: none;
    outline: var(--bblue);
    color: var(--blue);
    transition: var(--trans);
}


.tickets {
    /* Display grid */
    display: grid;
}

.tickets .title {
    /* Display grid */
    grid-row: 1 / 2;
}

.tickets .toolbar {
    /* Display */
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;

    /* Background */
    background-color: var(--grey);
    border-radius: var(--rad);

    /* Positioning */
    padding: var(--hdef);

    /* Font */
    color: var(--white);
}

.tickets .toolbar a:link, .tickets .toolbar a:visited {
    /* Font */
    color: var(--blue);
    text-decoration: none;

    /* Animation */
    transition: var(--trans);
}

.tickets .toolbar a:hover {
    /* Font */
    color: var(--white);

    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Animation */
    transition: var(--trans);
}

.tickets .ticket_content {
    /* Display */
    display: flex;
    flex-direction: column;

    /* Positioning */
    padding: var(--hdef);
}

.ticket_content input {
    border-bottom: var(--bblue);
}

.ticket_content textarea {
    height: 200px;
    border-bottom: var(--bblue);
}

.toolbar input[type="file"], .toolbar input[type="checkbox"] {
    /* Display */
    display: none;
}

.toolbar label, .toolbar select {
    /* Font */
    color: var(--blue);

    /* Positioning */
    padding: var(--hdef);
    margin-bottom: var(--hdef);

    /* Background */
    border: var(--bblue);
    background-color: var(--grey);
}

.toolbar label:hover {
    /* Cursor */
    cursor: pointer;
}

#notiflabel {
    /* Background */
    border: 1px solid rgba(0, 255, 0, 1);

    /* Font */
    color: rgba(0, 255, 0, 1);
}

.ticketsummary {
    /* Display Flex */
    display: flex;
    flex-direction: column;

    /* Background */
    border: var(--bgrey);
    border-radius: var(--rad);

    /* Positioning */
    margin-bottom: var(--hdef);
}

.ticketsummary a:link, .ticketsummary a:visited {
    /* Font */
    color: var(--grey);
    text-decoration: none;

    /* Animation */
    transition: var(--trans);
}

.ticketsummary a:hover {
    /* Background */
    background-color: var(--grey);

    /* Font */
    color: var(--white);

    /* Animation */
    transition: var(--trans);
}

.ticketsummary_subject {
    /* Positioning */
    padding: var(--hdef);

    /* Font */
    font-family: 'Oxygen';
    font-weight: bold;
    font-size: 25px;
}

.ticketmessage {
    /* Background */
    border: var(--bgrey);
}

.ticketmessage_text {
    /* Positioning */
    padding: var(--hdef);
}

.ticketmessage_details {
    /* Display flex */
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    /* Background */
    background: linear-gradient(0deg, var(--grey), var(--light));
    
    /* Positioning */
    padding: var(--hdef);
    margin-top: var(--hdef);

    /* Font */
    color: var(--white);
}

.ticketmessage_details span {
    /* Display flex */
    display: flex;
    flex-direction: row;
}

.ticketmessage_details a:link, .ticketmessage_details a:visited {
    /* Display */
    display: block;

    /* Font */
    color: rgba(0, 255, 0, 1);
    text-decoration: none;

    /* Positioning */
    margin-left: var(--hdef);
}

.ticketmessage_details a:hover {
    /* Font */
    color: var(--white);

    /* Animation */
    transition: var(--trans);
}

.toolbar a:link {
    display: block;
    padding: var(--hdef);
}

.ticketmessages textarea {
    /* Positioning */
    width: calc(100% - 10px);
}

.ticketmessages input[type="submit"] {
    /* Positioning */
    width: 100%;
    margin-bottom: var(--hdef);
}

.brandribbon {
    /* Background */
    background-color: var(--white);
    border-radius: var(--rad);

    /* Display flex */
    display: flex;
    flex-direction: row;
}

.brandribbon a {
    /* Display flex */
    flex-basis: 200px;
    flex-grow: 1;
    flex-shrink: 1;

    /* Display */
    display: block;

    /* Positioning */
    max-height: 100px;
}

.brandribbon a img {
    /* Display */
    display: block;

    /* Positioning */
    max-width: 100%;
    max-height: 100px;
    margin: 0 auto;
}

.order_products table {
    /* Background */
    border-spacing: 0px;
    border-collapse: separate;

    /* Positioning */
    margin: 0 auto;
}

.order_products th {
    /* Font */
    text-align: left;
}

.order_products td {
    /* Background */
    border-bottom: 1px solid var(--greyed);

    /* Positioning */
    padding-left: var(--hdef);
}

.order_products td input {
    width: 60px;
    font-size: 15px;
}

td.cart_bottom {
    /* Positioning */
    padding-top: var(--def);

    /* Background */
    border: none;
}

.cart_bottom input[type="submit"], .cart_bottom a:link, .cart_bottom a:visited {
    /* Display */
    display: inline-block;

    /* Background */
    border: var(--bblue);
    border-radius: var(--rad);
    background-color: var(--blue);

    /* Animation */
    transition: var(--trans);

    /* Font */
    color: var(--grey);
    text-decoration: none;
    text-align: center;
}
.cart_bottom input[type="submit"]:hover, .cart_bottom a:hover {
    /* Background */
    background: none;

    /* Cursor */
    cursor: pointer;

    /* Animation */
    transition: var(--trans);

    /* Font */
    color: var(--blue);
    text-decoration: none;
}

.cart_amount {
    /* Display */
    display: block;

    /* Positioning */
    width: 100px;
    padding: var(--hdef);
}

.cart_product {
    /* Positioning */
    width: 400px;
}

.cart_small img {
    /* Positioning */
    width: 30px;
}

.checkout_button span {
    /* Display */
    display: block;
}

.checkout_button label {
    /* Font */
    font-size: 15px;
}

.checkout_button input[type="number"] {
    /* Positioning */
    width: 50px;

    /* Font */
    font-size: 15px;
}

.checkout_button input[type="submit"] {
    /* Display */
    display: inline-block;

    /* Positioning */
    padding: var(--hdef);
    margin-top: var(--def);

    /* Background */
    background-color: var(--blue);
    border: var(--bblue);
    border-radius: var(--rad);

    /* Font */
    color: var(--white);
    text-decoration: none;

    /* Animation */
    transition: var(--trans);
}

.checkout_button input[type="submit"]:hover {
    /* Background */
    background: none;

    /* Font */
    color: var(--blue);

    /* Animation */
    transition: var(--trans);

    /* Cursor */
    cursor: pointer;
}

.contact {
    /* Display flex */
    display: flex;
    flex-direction: row;

    /* Positioning */
    margin-top: var(--def);
}

.contact_left, .contact_right {
    /* Display flex */
    flex-basis: 300px;
    flex-grow: 1;
}

.contact_left {
    /* Positioning */
    margin-right: var(--hdef);
}

.contact_right {
    /* Positioning */
    margin-left: var(--hdef);
}

.contact_message {
    /* Positioning */
    margin-top: var(--def);
}

.contact_message a:link, .contact_message a:visited {
    /* Font */
    text-decoration: none;
    color: var(--white);

    /* Positioning */
    padding: var(--hdef);
    margin-bottom: var(--hdef);

    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Animation */
    transition: var(--trans);
}

.contact_message a:hover {
    /* Background */
    background: none;
    outline: var(--bblue);

    /* Font */
    color: var(--blue);

    /* Animation */
    transition: var(--trans);
}

.contact_message a.sendquotation {
    /* Display */
    display: block;

    /* Positioning */
    padding: var(--def);

    /* Font */
    color: var(--grey);
    text-align: center;

    /* Background */
    background-color: rgba(0, 255, 0, 1);
}

.contact_message a.sendquotation:hover {
    /* Background */
    background: none;
    outline: 1px solid rgba(0, 255, 0, 1);

    /* Font */
    color: rgba(0, 255, 0, 1);
}

.contact_message a.cancelquotation {
    /* Font */
    color: var(--grey);

    /* Background */
    background-color: rgba(255, 0, 0, 1);
}

.contact_message a.cancelquotation:hover {
    /* Background */
    background: none;
    outline: 1px solid rgba(255, 0, 0, 1);

    /* Font */
    color: rgba(255, 0, 0, 1);
}

.search {
    /* Display flex */
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.search input {
    /* Background */
    border-bottom: 1px solid var(--blue);
}

.search input[type="Submit"] {
    /* Background */
    background-color: var(--blue);
    border-radius: var(--rad);

    /* Font */
    color: var(--white);

    /* Positioning */
    width: 100px;

    /* Animation */
    transition: var(--trans);
}

.search input[type="Submit"]:hover {
    /* Background */
    background: none;
    outline: var(--bblue);

    /* Font */
    color: var(--blue);

    /* Cursor */
    cursor: pointer;

    /* Animation */
    transition: var(--trans);
}

.search_results {
    /* Positioning */
    margin-top: var(--def);
}

.search_results span {
    /* Display */
    display: block;

    /* Background */
    border-bottom: var(--bblue);

    /* Positioning */
    margin-bottom: var(--hdef);

    /* Font */
    font-family: Oxygen;
    font-size: var(--def);
    font-weight: bold;
    color: var(--blue);
}

.search_result {
    /* Positioning */
    margin-bottom: var(--def);
}

.search_result table {
    /* Positioning */
    width: 100%;
    
    /* Table */
    table-layout: fixed;
    border-spacing: 0px;
    border-collapse: separate;
}

.search_result th {
    /* Font */
    text-align: left;

    /* Background */
    border-bottom: var(--bblue);
}

.search_result .s4 {
    /* Positioning */
    width: 25%;
}

.trmarkup:hover {
    /* Background */
    background-color: var(--greyed);

    /* Cursor */
    cursor: pointer;
}

.accountdetails table {
    /* Table */
    border-collapse: collapse;
    border-spacing: 0px;
    table-layout: fixed;

    /* Positioning */
    width: calc(100% - 20px);
}

.quotesummaryid {
    /* Positioning */
    width: 50px;
    padding: 5px;
}

.quotesummarytime {
    /* Positioning */
    width: auto;
    padding: 5px;
}

tr.quotesummary:hover {
    /* Background */
    background-color: var(--greyed);

    /* Cursor */
    cursor: pointer
}

td.accountticket {
    /* Positioning */
    width: 25%;
    padding: 5px;
}

.cookienotice {
    /* Display */
    display: block;
    position: fixed;
    z-index: 7;

    /* Positioning */
    top: 0px;
    width: 100vw;
    padding: 5px;

    /* Background */
    background-color: rgba(0, 164, 225, 0.3);

    /* Font */
    text-align: center;
    color: var(--white);
}

.cookienotice:hover {
    /* Cursor */
    cursor: pointer;
}

.thumbnails img {
    /* Background */
    border: var(--bblue);

    /* Positioning */
    padding: var(--hdef);
    margin-right: var(--hdef);
    max-height: 100px;
}

.thumbnails img:hover {
    /* Cursor */
    cursor: pointer;
}

.ticket_message_customer {
    /* Display */
    display: block;

    /* Font */
    font-weight: bold;

    /* Positioning */
    padding: var(--hdef);
}

.ticket_message_user {
    /* Display */
    display: block;

    /* Font */
    font-weight: bold;
    color: var(--blue);

    /* Positioning */
    padding: var(--hdef);
}