/* General styles */

.placeholder {
    border: 2px dashed #ccc; /* Dashed border for the placeholder */
    border-color: #428bca; 
 }
 
.gripicon {
    color: #808080; /* Sets the color to a medium grey */
    padding-right: 4px; /* Adds padding to the right of the icon */
    cursor: grab; /* Changes the cursor to indicate that the item can be dragged */
}


.copy-button {
    display: none;
    background-color: #262626;
    color: #909993;
    border: none;
    cursor: pointer;
}

/* Show the button when the parent row is hovered */
.sortable-category tr:hover .copy-button {
    display: inline-block;
}

    .category-col {
        width: 270px;
    }

body {
   
    font-family: 'Roboto', sans-serif; /* Material Design uses Roboto font */
    margin: 0;
    padding: 20px;
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text */
}
input, textarea, select {
    background-color: transparent;
    color: #ffffff; /* Light text */
    border: 0px  /* Dark border */
}

.new-empty-field {
    border: none; /* Remove default borders */
    margin-left: 14px;
    border-bottom: 1px solid #808080; /* Apply border only to the left side */
    background-color: transparent;
}


table {
         width: 100%;
        margin: 0px 0;
    background-color: #262626; /* Dark background for tables */
    border-collapse: collapse;
}

th, td {
       padding: 0px;
        text-align: left;
         vertical-align: top; /* Aligns content to the top of the table cells */
    border: none; /* Remove default borders */
}

div {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* Light text color for readability */
    /* Add other styling as needed */
}

pre {
    background-color: #1e1e1e; /* Dark background for pre */
    color: #f8f8f2; /* Light text color */
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

/* Example Syntax Coloring */
.keyword { color: #ff79c6; } /* Pink for keywords */
.string { color: #f1fa8c; } /* Light yellow for strings */
.comment { color: #6272a4; } /* Grey for comments */
.number { color: #bd93f9; } /* Purple for numbers */
/* Add more as needed */

.btn-dark-outline {
    background-color: transparent; /* Dark background */
    color: #ffffff; /* Light text */
    border: 2px solid #ffffff; /* Light border */
    text-align: center;
    text-decoration: none;
    display: inline-block;
 
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    cursor: pointer; /* Change cursor on hover */
}

.btn-dark-outline:hover {
    background-color: #ffffff; /* Light background on hover */
    color: #000000; /* Dark text on hover */
}