/*
Theme Name: Bard Katrijn
Theme URI: https://wp-royal-themes.com/themes/item-bard-free/
Template: bard
Author: Katrijn
Author URI: https://wp-royal-themes.com/
Description: Adjustments on Bard to not have footers,…
Tags: blog,e-commerce,food-and-drink,one-column,two-columns,three-columns,grid-layout,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,flexible-header,full-width-template,custom-menu,custom-logo,featured-images,footer-widgets,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 0.1.1687077135
Updated: 2023-06-18 10:32:15
*/
/* Booking Tool Styles */
.slot-button {
    display: inline-block;
	background-color: #ffffff; /* Button background color */
    color: #bea698; /* Button text color */
    border: 1px solid #bea698; /* Border width, style, and color */
    margin: 5px;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.slot-button.selected {
    background-color: #ffc0d1;
    color: white;
}

.slot-button.booked {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-style: dashed;
}
.slot-button.greyed-out {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-style: dashed;
}

.woocommerce-info::before {
    display: none;
}

.woocommerce-info-custom {
    background-color: #ffc0d1;
    padding: 20px;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #333; 
    /* Add any other styles you want to apply */
}

.woocommerce-MyAccount-navigation{
	display:none;
	
}

.woocommerce-account {
	width: 100% !important;
}
.woocommerce-MyAccount-content {
	width: 100% !important;
}

.woocommerce-info {
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #bea698;
    font-size: 12px;
    color: #bea698;
    /* Add any other styles you want to apply */
}

/* Style for the button with ID 'orderkc_form_submit' */
.custom-button {
    background-color: #ffffff; /* Button background color */
    color: #bea698; /* Button text color */
    border: 1px solid #bea698; /* Border width, style, and color */
    padding: 10px 20px; /* Button padding */
    font-size: 11px; /* Button font size */
	font-weight: bold;
	font-family: 'Montserrat';
    text-transform: uppercase; /* Uppercase button text */
    border-radius: 5px; /* Rounded button corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effect */
}
.custom-button:active,
.custom-button:focus {
    background-color: #ffc0d1;
    /* pink when clicked or focused */
}

.custom-button-reverse {
    background-color: #bea698;
    /* Button background color */
    color: #ffffff;
    /* Button text color */
    border: 1px solid #bea698;
    /* Border width, style, and color */
    padding: 10px 20px;
    /* Button padding */
    font-size: 11px;
    /* Button font size */
    font-weight: bold;
    font-family: 'Montserrat';
    text-transform: uppercase;
    /* Uppercase button text */
    border-radius: 5px;
    /* Rounded button corners */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Smooth transition for hover effect */
}
	
.custom-button:hover {
    background-color: #ffc0d1; /* Button background color on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

/* Style for the button container if needed */
.formgroupkc-submit {
    text-align: center; /* Center the button in its container */
    margin-top: 20px; /* Add space above the button container */
}
/* Container styles */
/* Targeting the form container */
body .custom-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Target the form itself */
body .custom-login-form {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
}

/* Style the form input fields inside the wrapper */
body .custom-login-inputs input[type="text"],
body .custom-login-inputs input[type="password"] {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Login Button */
body .custom-login-inputs input[type="submit"] {
    width: 100%;
    padding: 15px;
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}

body .custom-login-inputs input[type="submit"]:hover {
    background-color: #005a8c;
}

/* Optional Footer for links */
body .custom-login-footer {
    text-align: center;
    margin-top: 15px;
}
body .custom-login-footer a {
    color: #0073aa;
    text-decoration: none;
}

body .custom-login-footer a:hover {
    text-decoration: underline;
}

.user-bookings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em
}

.user-bookings-table th,
.user-bookings-table td {
    border: none;
    border-bottom: 1px solid #ddd; /* Only bottom border for row separation */
    padding: 8px;
    text-align: left;
}


/* class om de fietsnummer bordjes te maken */
.numberCircle {
    border-radius: 50%;
    width: 140px;
    height: 140px;
    padding: 8px;

    border: 10px solid #bea698;
    color: #bea698;
    text-align: center;

    font: 48px Arial, sans-serif;
}
.numberCircle:before {
content: '';
display: inline-block;
padding-top: 100%;
/* cause here we have a square and width for percentage vertical (padding/margin) is the reference , height:100%; or height:24px; will do as well */
vertical-align: middle;
}