/* custom-styles.css */




.setting-item-path{
    margin-bottom:10px;
}


.wtdp-settings-frame {
    border: 1px solid #ccc; /* Frame border color */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Padding inside the frame */
    background-color: #f9f9f9; /* Background color of the frame */
}

.wtdp-admin-settings-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.wtdp-settings-group {
    flex: 1;
    max-width: 700px; 
}

.wtdp-settings-group-show {
    flex: 1;
    max-width: 230px;
    min-width: 200px;
}

.wtdp-settings-group-size {
    flex: 1;
    max-width: 330px;
    min-width: 300px;
}

.wtdp-settings-group-color {
    flex: 1;
    max-width: 400px;
    min-width: 330px;
}

.wtdp-form-group {
    flex-basis: 100%; /* For the save button */
    margin-top: 2px;
}

.wtdp-form-label-container {
    display: flex; /* Use flexbox for label and input alignment */
    justify-content: space-between; /* Aligns items to the left and right */
    width: 100%; /* Full width to take available space */
}

label {
    flex: 1; /* Label takes up space but allows input to align right */
    margin-right: 10px; /* Adds space between label and input */
    text-align: left; /* Aligns text of the label to the left */
}

.settings-container {
    display: flex; /* Enables Flexbox layout */
    justify-content: space-between; /* Spaces out the two containers */
}

.form-table-container {
    flex: 1; /* Takes up available space on the left */
    margin-right: 20px; /* Adds space between table and map */
}

#map-container {
    flex: 1; /* Takes up available space on the right */
    margin-top: 10px;
}

#map {
    height: 400px; /* Set a height for the map */
    width: 100%; /* Make sure the map takes full width of its container */
}

.wtdp_messages {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers element */
    width: 60%; /* Adjust width for better fit */
    background: linear-gradient(90deg, #fd2b5c 0%, rgba(255, 94, 58, 1) 100%);
    color: white;
    font-size: 1.5em;
    text-align: center;
    padding: 15px 20px; /* Extra padding for balance */
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.2); /* Larger shadows for depth */
    font-weight: bold;
    height: auto; /* Automatic height to adjust based on content */
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    border-radius: 15px;
    perspective: 1000px; /* Adds subtle 3D perspective */
}


.graph-dimensions {
    display: flex;
    justify-content: space-between; /* Space between settings */
}

.dimension-item {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    align-items: flex-start; /* Align items to the left */
    margin-right: 30px; /* Space between items */
}

.dimension-input-group {
    display: flex; /* Flexbox for input and select */
    align-items: center; /* Center align items vertically */
}

.dimension-input-group input {
    margin-right: 5px; /* Space between input and select */
    width: 70px; /* Set a fixed width for the input */
}

.dimension-input-group select {
    margin-left: 5px; /* Space between input and select */
}

.dimension-item label {
    margin-bottom: 5px; /* Space between label and input/select */
}

#graph_colors .setting-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#graph_colors .setting-item label {
    margin-right: 10px;
    min-width: 150px; 
    text-align: left;
    font-size: 14px;
}

#graph_colors .setting-item input[type="color"] {
    margin-left: auto;
}

p.submit {
    text-align: left;
    max-width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 0px;
}

.flex-container {
    display: flex;
    align-items: flex-start; /* Align items at the start of the container */
    gap: 10px; /* Add space between the textarea and the shortcode output */
}

.weather-latest-shortcode {
    flex: 1;
    width: 100%; 
    padding-left: 20px;
}

.weather-forecast-shortcode {
    flex: 1;
    border-left: 1px solid #ccc; /* Add a separator between the sections */
    margin-right: 20px;
}

.notice-warning {
    display: none !Important;
}

.header-container {
    display: flex;
    align-items: center; /* Align icon and text vertically */
}

.weather-icon {
    width: 100px; /* Set width to 100 pixels */
    height: 100px; /* Set height to 100 pixels */
    margin-right: 15px; /* Space between the icon and the heading */
    margin-left: 10px; /* Space on the left of the icon */
}

.settings-h2 {
    font-size: 1.3em;
    font-weight: 600;
    margin: 1em 0;
    background-color: #ff9021;
    padding: 20px;
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.settings-h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 1em 0;
    background-color: #e17e1a;
    padding: 10px;
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}



.weather-graph {
    flex: 1; /* Allow the divs to grow and take equal space */
    width: 99% !Important;
    background-color: #f5f5f5;
    padding: 20px;
}

.weather-latest-css {
    width: 100%; /* Ensure the textarea takes full width of its container */
}

.weather-forecast-css {
    width: 100%; /* Ensure the textarea takes full width of its container */
}

#graph_settings1 {
    display: flex;
    flex-direction: column;
    width: 350px;
}

#graph_settings1 label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 100%;
    max-width: 333px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

#graph_settings {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between each checkbox */
}

#graph_settings label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 100%;
    max-width: 333px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

#graph_graph {
    align-items: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 98%;
    transition: background-color 0.3s ease;
    cursor: pointer;
    margin-top: 10px;
}

#graph_colors {
    align-items: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 100%;
    max-width: 333px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    margin-top: 10px;
}



/* Set specific styles for color inputs */
input[type="color"] {
    max-width: 200px; /* Set max-width for color inputs */
    width: 100px;
}
/* Set specific styles for number inputs */
input[type="number"] {
    max-width: 70px; /* Set max-width for number inputs */
    width: 70px;
    text-align: right;
}
/* Set specific styles for text inputs */
input[type="text"] {
    max-width: 400px; /* Set max-width for text inputs */
    text-align: right;
}
/* Set specific styles for checkboxes */
input[type="checkbox"] {
    cursor: pointer;
    /* Change cursor to pointer when hovering */
}
/* Set specific styles for select elements */
select {
}


.button-primary-save {
    background: #fd2b5c;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    padding: 8px 12px 8px 12px;

}

