body{
    direction: rtl;
    font-family: "Traditional Arabic";
    background: #f8f9fa linear-gradient( 180deg ,#f9fafb,#f8f9fa) repeat-x!important;
}
.clear-both{
    clear: both;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f2f6fa;
}

#root_ety_ls_table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(30, 189, 9, 0.28); /* Example color */
}


.navbar-default {
    background-color: #1a3578;
    border-color: #ffffff;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-brand:hover{
    color: #ffffff !important;
}
footer{
    padding-top: 5px;
    background-color: #1a3578;
    border-color: #ffffff;
    height: 25px;
    color: #ffffff;
}
.btn-primary{
    background-color: #8ac574;
    border-color: #8ac574;
}

.btn-primary:hover{
    background-color: #d9534f;
    border-color: #d9534f;
}

.header-menu > a{
color: #ffffff !important;
font-weight: bold !important;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
    background-color: #33b5e5;
    border-bottom: solid 3px #880e4f;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover{
    background-color: #33b5e5;
    border-bottom: solid 3px #ffffff;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{
    background-color: #33b5e5;
    border-bottom: solid 3px #880e4f;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
    background-color: #33b5e5;
    border-bottom: solid 3px #880e4f;
}

.part1_big {
    background:none;
//width:403px;
    text-align:justify;
    height: 55px;
}

.part1_big:after {
    content: "";
    display: inline-block;
    width: 100%;
    height:0;
    font-size:0;
    line-height: 0;
    background:red; /* to show it has no dimensions */
}

.part1 {
    background:none;
    width: 300px; /*365px;*/
    text-align:justify;
    height: 30px;
}

.part1:after {
    content: "";
    display: inline-block;
    width: 100%;
    height:0;
    font-size:0;
    line-height: 0;
    background:red; /* to show it has no dimensions */
}

.part2 {
    background:none;
    width: 155px;
    text-align:justify;
    height: 30px;
}

.part2:after {
    content: "";
    display: inline-block;
    width: 100%;
    height:0;
    font-size:0;
    line-height: 0;
    background:red; /* to show it has no dimensions */
}

.part3 {
    background:none;
    width: 310px;
    text-align:justify;
    height: 30px;
}

.part3:after {
    content: "";
    display: inline-block;
    width: 100%;
    height:0;
    font-size:0;
    line-height: 0;
    background:red; /* to show it has no dimensions */
}


#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.content-scroll-window{
    overflow-y: scroll;
    height:calc(100vh - 80px);
}

/*
.fragment-lexicalsheets{
    border-right: 1px solid #ddd;background-color: #f8f3e9;box-shadow: 0px 1px 13px 0px #ccaf41;
}
*/


/* Innovative div container */
.fragment-lexicalsheets {
    background-color: #f8f3e9; /* Base background */
    border-radius: 10px;
    margin: 0 auto;
    /* Create a gradient border using a dual background technique */
    border: 3px solid transparent;
    background-image:
        /* First layer: inner background (same as base) */
            linear-gradient(#f8f3e9, #f8f3e9),
                /* Second layer: gradient border */
            linear-gradient(135deg, #e1e1dd, #ababa6, #939390);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect: slight lift and shadow */
.fragment-lexicalsheets:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}



.bg-gradient-light {
    background-color: #c2cbe5;
    background-image: linear-gradient(180deg, #c2cbe5 10%, #8f8f8f 100%);
    background-size: cover;
}

.bg-gradient-gray {
    color: #383d41;
    background: #e2e3e5 linear-gradient(180deg,#e6e7e9,#e2e3e5) repeat-x;
    border-color: #d6d8db;
}

.bg-gradient-green {
    color: #155724;
    background: #d4edda linear-gradient( 180deg  ,#daf0e0,#d4edda) repeat-x;
    border-color: #c3e6cb;
}

.btn-sequence-tools {
    width:100%;
    margin-top: 2px;
}

.btn-sequence-tools-horizontal{
    margin-left:4px;
    margin-top: 2px;
}

.text-align-right{
    text-align: right;
}

.sequence-other_information_contentContext{
    height: 200px;
    overflow-x: auto;
    text-align: justify;
    padding-left: 5px;
}

span.kwic{
   padding: 2px;
}

span.kwic:hover{
    background-color: #04AA6D;
    color: white !important;
    margin-top: 2px;
    border-radius: 5px;
}


/* Style for the custom dropdown container */
.custom-dropdown {
    position: relative;
    width: 200px; /* Set the desired width */
}

/* Style for the custom input field */
.custom-input {
    width: 100%;
}

/* Style for the custom dropdown content */
.custom-dropdown-content {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    max-height: 100px; /* Set the maximum height */
    overflow-y: auto;
}

/* Style for the dropdown options */
.custom-option, .custom-option-author{
    padding: 8px;
    cursor: pointer;
}

/* Style for the selected option */
.custom-option:hover, .custom-option-author:hover {
    background-color: #f2f2f2;
}
.row-lemma-ls {
    display: flex; /* Use Flexbox to layout the columns */
    height: 85vh; /* Set the height of the row to 100% of the viewport height */
}

.col-ls {
    flex-basis:40%;
    /*flex: 1; /* Flex grow, each column takes equal width */
    overflow-y: auto; /* Enable vertical scrolling for content that overflows */
    padding: 20px; /* Optional padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.col-lemma {
    flex-basis: 60%;
    /*flex: 1; /* Flex grow, each column takes equal width */
    overflow-y: auto; /* Enable vertical scrolling for content that overflows */
    padding: 20px; /* Optional padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}


@media print {
    body * {
        visibility: hidden; /* Hide everything else */
    }
    .modal-content, .modal-content * {
        visibility: visible; /* Only the modal content is visible */
    }
    .modal-content {
        position: absolute;
        left: 0;
        top: 0;
    }
}
.newspaper {
    column-count: 2; /* Number of columns */
    column-gap: 20px; /* Space between columns */
}


/* Define the keyframes for the gradient animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.innovative-blue {
    /* The gradient uses three shades of blue:
       - #3c5ebd: A lighter, vibrant blue
       - #1a3578: The core deep blue
       - #0f1f4f: A darker, more mysterious tone */
    background: linear-gradient(45deg, #3c5ebd, #1a3578, #0f1f4f);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;

    /* Additional modern styling */
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* Table styling */
table.tasks-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* All columns share the available width equally */
}
table.tasks-table th, table.tasks-table td {
    border: 1px solid #ccc;
    padding: 4px 6px;  /* Reduced padding for many columns */
    text-align: center;
    font-size: 12px;   /* Smaller font size to help fit more content */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; /* Align cell content to the top */
}
table.tasks-table td{
    font-size: 14px;   /* Smaller font size to help fit more content */
}
/* Innovative header styling */
table.tasks-table th {
    background: linear-gradient(135deg, #6a11cb 0%, #8e2de2 50%, #2575fc 100%); /* Gradient background */
    color: #fff;
    white-space: normal;   /* Allow header text to wrap */
    word-break: break-word;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Innovative-blue header styling */
table.tasks-table th.innovative-blue-header {
    /* The gradient uses three shades of blue:
       - #3c5ebd: A lighter, vibrant blue
       - #1a3578: The core deep blue
       - #0f1f4f: A darker, more mysterious tone */
    background: linear-gradient(45deg, #3c5ebd, #1a3578, #0f1f4f);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;

    /* Additional modern styling */
    padding: 0px;
    color: #fff;
    text-align: center;
}
/* Striped rows for td cells */
table.tasks-table tbody tr:nth-child(odd) td {
    background-color: #fdfdfd; /* Very light background */
}
table.tasks-table tbody tr:nth-child(even) td {
    background-color: #e9f2f9; /* Light blue-ish stripe */
}

table.tasks-table th, table.tasks-table td {
    white-space: normal;   /* Allow header text to wrap */
    word-break: break-word;
}

table.tasks-table th.wide-col, table.tasks-table td.wide-col {
    width: 200px; /* Adjust this value as needed */
}

table.tasks-table th.wide-med-col, table.tasks-table td.wide-med-col {
    width: 100px; /* Adjust this value as needed */
}

table.tasks-table th.wide-small-col, table.tasks-table td.wide-small-col {
    width: 60px; /* Adjust this value as needed */
}


table.tasks-table .status {
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.9em;
    display: inline-block;
    min-width: 70px;
    text-align: center;
}

table.tasks-table .status.in-progress {
    background-color: #f0ad4e; /* Orange */
}

table.tasks-table .status.completed {
    background-color: #5cb85c; /* Green */
}

table.tasks-table .status.pending {
    background-color: #d9534f; /* Red */
}

/* Innovative input styling */
.innovative-input {
    width: 100%;
    max-width: 400px;
    padding: 2px;
    font-size: 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    /* Create a gradient border effect using a dual background */
    background:
        /* The first layer is the inner background */
            linear-gradient(white, white) padding-box,
                /* The second layer creates the gradient border with an extra color stop for smoothness */
            linear-gradient(135deg, #e1e1dd, #ababa6, #939390) border-box;
    transition: box-shadow 0.3s ease, border 0.3s ease;
}

.innovative-input:focus {
    outline: none;
    /* Add a subtle glow when the input is focused */
    box-shadow: 0 0 8px rgba(37,117,252,0.6);
}

/* Optional: Style the placeholder text */
::placeholder {
    color: #999;
    opacity: 1;
}

/* Innovative select styling */
.innovative-select {
    width: 100%;
    max-width: 400px;
    padding: 2px;
    font-size: 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    /* Create a gradient border effect using a dual background */
    background:
        /* The first layer is the inner background */
            linear-gradient(white, white) padding-box,
                /* The second layer creates the gradient border with an extra color stop for smoothness */
            linear-gradient(135deg, #e1e1dd, #ababa6, #939390) border-box;
    transition: box-shadow 0.3s ease, border 0.3s ease;
}

/* On focus, add a subtle box-shadow */
.innovative-select:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.sort-icon {
    position: absolute;
    right: 5px;
    font-size: 12px;
}

.grid-bar {
    display: flex;
    width: 60px;
    height: 20px;
    gap: 3px;
}

.block {
    flex: 1;
    background: #f5e5e5;
    border-radius: 4px;
}

.block.filled {
    background: #478589;
    box-shadow: 0 0 4px #00f2ff;
}

.lemma-card {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.info-source-tag {
    display: inline-block;
    padding: 0.4em 0.8em;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3b2e58;
    background: linear-gradient(135deg, #f3e7ff, #e1d5ff);
    border: 1px solid #d1bfff;
    border-radius: 999px;
    box-shadow: 0 0 6px rgba(131, 95, 189, 0.3);
    direction: rtl;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.info-source-tag:hover {
    background: linear-gradient(135deg, #e7d3ff, #cbb7ff);
    box-shadow: 0 0 10px rgba(131, 95, 189, 0.5);
    cursor: default;
}

.info-sensitivity-tag {
    display: inline-block;
    padding: 0.4em 0.8em;
    font-size: 0.95rem;
    font-weight: 600;
    color: #7b1c1c; /* deep red-brown for readable contrast */
    background: linear-gradient(135deg, #ffe5e5, #ffd4d4);
    border: 1px solid #ffbaba;
    border-radius: 999px;
    box-shadow: 0 0 6px rgba(200, 80, 80, 0.3);
    direction: rtl;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.info-sensitivity-tag:hover {
    background: linear-gradient(135deg, #ffdada, #ffc2c2);
    box-shadow: 0 0 10px rgba(200, 80, 80, 0.5);
    cursor: default;
}


.sensitivity-wrapper {
    display: inline-flex;      /* keep them on one line */
    align-items: baseline;     /* align text baseline of both items */
    direction: rtl;            /* Arabic direction */
}

/* Optional: ensure the Thymeleaf div behaves like inline text */
.sensitivity-text {
    display: inline;           /* so its baseline is the text baseline */
}