div.tool-display {
    background-color: rgb(144 209 202 / 0.9);
    width: 100%;
    height: 100%;
    margin-top: -10px;
    margin-bottom: -25px;
    padding-bottom: 200px;
}

    div.tool-display h3 {
        margin: auto 0px;
        padding: 1rem;
    }

    div.tool-display div {
        margin: 1.5rem 1rem;
    }

    div.tool-display input[type="number"] {
        padding: 0.5rem 0.75rem;
        border: 1px solid #333333;
        border-radius: 0.375rem;
        background-color:#ffffff;
        font-size: 1rem;
        box-sizing: border-box;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        div.tool-display input[type="number"]:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        div.tool-display input[type="number"]::placeholder {
            color: #aaa;
        }

        div.tool-display input[type="number"]:disabled {
            background-color: #f5f5f5;
            cursor: not-allowed;
        }

    div.tool-display select {
        padding: 0.5rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 0.375rem;
        font-size: 1rem;
        background-color: white;
        color: #333;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        padding-right: 2rem; /* 矢印分のスペース */
        cursor: pointer;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        div.tool-display select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        div.tool-display select:disabled {
            background-color: #f5f5f5;
            color: #999;
            cursor: not-allowed;
        }

    div.tool-display button {
        margin: 1rem 2rem;
        padding: 0.5rem 1rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.375rem;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        div.tool-display button:hover {
            background-color: #0056b3;
        }

        div.tool-display button:active {
            background-color: #004494;
        }

        div.tool-display button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

    div.tool-display table {
        margin: 1rem 2rem;
        width: 600px;
        border-collapse: collapse;
        font-size: 1rem;
        color: #333;
    }

    div.tool-display th, div.tool-display td {
        padding: 0.75rem;
        border: 1px solid #ddd;
        text-align: left;
    }

    div.tool-display th {
        background-color: #DDDDDD;
        font-weight: bold;
    }

    div.tool-display tr:nth-child(odd) {
        background-color: #ffffff;
    }

    div.tool-display tr:nth-child(even) {
        background-color: #E7F2E4;
    }

    div.tool-display tr:hover {
        background-color: #f1f1f1;
        transition: background-color 0.3s ease;
    }
    div.tool-display a {
        color: #007bff;
        text-decoration: none;
        transition: color 0.2s ease, text-decoration 0.2s ease;
    }

        div.tool-display a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        div.tool-display a:visited {
            color: #5a32a3;
        }

        div.tool-display a:active {
            color: #003d80;
        }

@media (max-width: 767px) {
    div.tool-display table {
        margin: 1rem 0px 0px 0px;
        max-width: 800px;
        width: 100%;
        border-collapse: collapse;
        font-size: 1rem;
        color: #333;
    }
}