hr {
    margin: 9px 0;
}

/* Simple and Compact Button Styling */

.export-btn
{
	display: flex;
    justify-content: center;
	padding: 5px 0px 17px 0px !important;
}


#exportandsend {
	
    background-color: #4CAF50; /* Solid green background */
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 38px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exportandsend:hover {
    background-color: #000;
    transform: translateY(-1px);
}

#exportandsend {
    background-color: #2C2C2C;
    transform: translateY(0px);
}



/* Choose Sport  */

.radio {
    display: none;
}




/* Container for Input and Button */
.divInputs {
    margin-bottom: 15px; /* Space between input/button row and the image below */
}

/* pop up Close Button */
button.btn-close:hover
{
color:red !important;
background-color:#cc336600;	
}


/* Email Input Field Styling */
input#inputEmailforsend {
    flex: 1; /* Allow the input field to take available space */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
	
}

/* Hover and Focus Effects for Input Field */
input#inputEmailforsend:hover,
input#inputEmailforsend:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3); /* Green shadow for focus */
    outline: none;
}

/* Send Button Styling */
input#emailSendBtn {
	width:50%;
    background-color: #333; /* Solid green background */
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 15px; /* Compact padding for a balanced look */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-align: center;
	margin-top: 13px;
}

/* Hover Effect for Send Button */
input#emailSendBtn:hover {
    background-color: #000; /* Darker green on hover */
    transform: translateY(-1px); /* Slight lift */
}



/* Court image Download Button */
button#downloadImageBtn
{
	 background-color: #333;
	border-color: #000;
}


button#downloadImageBtn:hover
{
	background-color: #000;
	border-color: #000
}



/* Optional: Focus Outline for Accessibility */
input#emailSendBtn:focus {
    outline: 2px solid #66BB6A;
}



.inputEmailcont
	{
	display: flex;
    flex-direction: column;
    align-items: center;
	}



.modal-dialog
{
	margin-top: 7% !important;
}



/* Main Container */
.court_container {
    max-width: 100%;
    padding: 30px;
    background-color: #f8f9fa;
}

/* Main Flex Container for Layout */
.court_main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Left Panel */
.court_left {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Ensuring smooth corners */
    min-width: 250px;
    width: 330px;
    flex: 0 0 330px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.court_left h2 {
    background-color: #fff;
    color: #333 !important;
    margin: 0;
    padding: 5px 0px;
    font-size: 1.6em;
    text-align: left;
	font-size:26px !important;
}
.court_left_content {
    padding: 15px 15px 5px 15px;
}
.court_left_content h4 {
    
	font-size: 34px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #333;
}

/* Right Panel */

div#court_right_content_forCanvas {
    display: flex;
    justify-content: center;
    margin: 10px 0px 75px 0px;
}

.court_right {
    flex-grow: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px; /* Matching border radius to left panel */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensuring content stays within rounded borders */
}
.court_right h2 {
    background-color: #fff;
    color: #333 !important;
    margin: 0;
    padding: 15px;
    font-size: 42px !important;
    text-align: center;
}

/* Success Message */
.successmsg {
    display: none;
    text-align: center;
    color: #28a745;
    font-size: 18px;
    padding: 48px 0;
}

/* Tennis Section */
#tennis,
.pickleball,
#basketball,
#basketballhalfcourt,
#tennispickleball {
    display: none;
}

/* Divider */
.divider {
    height: 5px;
    background-color: #ddd;
    margin: 5px 0;
}

/* Filter Area - Color Picker Section Fix */
.filterarea {
    display: flex;
    flex-direction: column;
    padding: 5px 15px ;
	width: 100%;
}
.filterarea span {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: large;
    font-weight: 500;
    color: #333;
}
.color-holder {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #aaa;
    cursor: pointer;
    transition: border-color 0.3s;
}
.color-holder:hover {
    border-color: #555;
    opacity: 0.9;
}
.color-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.filterarea input[type="text"] {
    width: 70%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    margin-left: 8px;
    background-color: #f9f9f9;
}

/* Ensure uniform alignment */
.filter_custom,
.filterarea .span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Optional: Styling improvements for labels */
.filterarea span label {
    font-size: 14px;
    color: #333;
}

/* Responsive adjustments */
@media screen and (max-width: 1780px) {
    .court_left {
        flex: 0 0 260px;
    }
    .court_left h2,
    .court_right h2 {
        font-size: 1.4em;
    }
}

/* Court Display */
canvas#pickleballCourt {
    
		border-radius:25px;
	}


/* Mobile Responsive */

@media screen and (max-width: 768px) {
   
	canvas#pickleballCourt {
    width: 100%;
		border-radius:25px;
	}
	
	.court_container
	{
		padding:20px 5px;
		
	}
	
	div#court_right_content_forCanvas
	
	{
		margin: 5% 0;		
	}
	
	
	.court_main {
        display: block;
    }
    .court_left {
        width: 100%;
        margin-bottom: 12px;
    }
    #court_email_popup {
        width: 100%;
        left: 0;
    }
    #court_email_popup form {
        padding: 10px;
    }
	
	.court_left_content h4
	{
		font-size: 26px;
	}
	
	.court_left h2
	{
		font-size: 22px !important;
	}
	
	.court_right h2
	{
		font-size: 32px !important;
	}
	
	
	
	


		
}

/* Export Button */
.export-btn {
    text-align: center;
    padding: 27px 0;
}

/* Canvas Styling */
canvas {
    border: 2px solid #333;
    border-radius: 5px;
}

/* Enhanced Color Picker */
.color-wrapper {
    position: relative;
    width: 250px;
    margin: 5px auto;
}
.color-picker {
    width: 100%;
    background: #f3f3f3;
    height: auto;
    max-height: 250px;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -100px;
    left: -10px;
    z-index: 9;
    overflow-y: auto;
    border-radius: 8px;
    transition: opacity 0.3s;
}
.color-picker ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.color-picker ul li {
    width: 30px;
    height: 30px;
    margin: 5px;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.color-picker ul li:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Additional Color Holder Variants */
.color-holderlines,
.color-holderpickleballlines,
.color-holderoutofbounds,
.color-holderkitchen,
.color-holderbasketballine,
.color-holderbasketballkey,
.color-holdertennis,
.color-holderpickleball1,
.color-holdertennispickleballline,
.color-holdertennispickleballkitchen,
.color-holder.call-picker-pickleball {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 5px;
    border: 1px solid #aaa;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.color-holderlines:hover,
.color-holderpickleballlines:hover,
.color-holderoutofbounds:hover,
.color-holderkitchen:hover,
.color-holderbasketballine:hover,
.color-holderbasketballkey:hover,
.color-holdertennis:hover,
.color-holderpickleball1:hover,
.color-holdertennispickleballline:hover,
.color-holdertennispickleballkitchen:hover,
.color-holder.call-picker-pickleball:hover {
    border-color: #555;
    transform: scale(1.1);
}


hr {
    margin: 9px 0 !important;
}


/* Playing Area */
.color-holder.call-picker-pickleball{
    background: #005490;
}

/* Lines */
.color-holderpickleballlines.call-pickerpickleballlines{
    background: #fff;
}

/* Out of Bounds */
.color-holderoutofbounds.call-pickeroutofboundspickleball{
    background: #415a3c
}

/* Kitchen */
.color-holderkitchen.call-picker-pickleballkitchen{
    background: #38603e;
}



/* Scrollbar Styling */
.color-picker::-webkit-scrollbar {
    width: 5px;
}
.color-picker::-webkit-scrollbar-track {
    background-color: rgba(100, 100, 100, 0.2);
}
.color-picker::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 5px;
}

/* Overlay */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}
.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #2e93e6;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

/* Email Popup Styling */
#court_email_popup {
    width: 40%;
    position: absolute;
    z-index: 999;
    top: 16%;
    left: 33%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
#court_email_popup form {
    padding: 30px;
    border: 1px solid #888;
}
#court_email_popup span#close_popup {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 21px;
    font-weight: bold;
    color: #aaa;
    padding: 5px 15px;
    cursor: pointer;
}
#court_email_popup .divInputs {
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    position: relative;
}
#court_email_popup input#imputEmailforsend {
    padding: 8px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-size: 16px;
    text-align: center;
    background-color: #f2f2f2;
}

/* Animation */
@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }