/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* For future development */
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /* For future development */
}



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}
/* END of Medium devices (landscape tablets, 768px and up) */



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    /*     *************     */
    /* Section: Welcome card */
    .welcomeCard{
        max-height: 345px !important;
    }

    /* Background for the welcome card */
    .page-bg-card{
        background-color: rgba(255, 255, 255, 1);
        background-image:
            linear-gradient(
              180deg,
              rgba(178.96, 206.81, 224.07, 0.6) 25.44%, /* Lightened the start */
              rgba(152, 170, 182, 0.5) 55.82%, /* Lightened the middle */
              rgba(44, 94, 125, 0.3) 87.97% /* Lightened the end */
            ),
            url('/static/logo/chess-pieces-top.png');
        background-size: auto, cover;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right top; /* Adjusted to ensure the castle is displayed on the right */
        position: relative;
    }

    /* Container for the content in the welcome card */
    .welcome-card-container{
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }

    /* Background color for the title in the welcome card */
    .welcome-card-title{
        background: linear-gradient(120.43deg, #172B4D 16.13%, #FF7A00 93.38%);
        background-size: 100% 50%;
        -webkit-background-clip: text !important;
        text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        color: transparent;
        background-clip: text;
    }

    /* Description for the welcome card */
    .welcome-card-description{
        font-weight: 650;
    }

    /*     *************      */


    /*        ****************          */
    /*   Section: News, Tips & Tricks   */

    /* Removing the bottom marin on the carousel Next/Previous buttons */
    .carousel-span-next{
        margin-bottom: 0.5rem;
    }

    /* Card box style for an item in the carousel News, Tips and Tricks */
    .news-card-box{
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: #f8f9fa;
        padding-top: 20px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        min-height: 25rem;
    }

    /* Article title automatically hide the text on width overflow */
    .article-title{
        max-width: 94%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /* Article header for an item in the carousel News, Tips and Tricks */
    .article-header{
        padding: 4px 8px;
        font-size: 1.0rem;
        font-weight: 700;
    }

    /* Article date of publication */
    .article-date{
        margin: 0.5rem;
        font-weight: 650;
    }



    /*        ****************          */


    /*        ****************          */
    /*     Section: CVE Statistics      */

    .card-stat{
        padding: 12px 16px;
        margin: 0px 0px;
        background: #F8F9FA;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .stat-header{
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 700;
    }

    .stat-item{
        color: #17254D;
        padding: 0px;
        margin-bottom: 4px;
        font-size: 12px;
        font-family: Open Sans;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 18px */
        letter-spacing: 0.25px;
    }

    .stat-number{
        font-size: 14px;
        font-family: Open Sans;
        font-style: normal;
        font-weight: 600;
        line-height: 180%; /* 25.2px */
        letter-spacing: 0.25px;
        word-wrap: break-word;
    }

    /*        ****************          */

    .icon-img{
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .card-box-shadow{
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .table-description{
        /* Set overflow to hidden to hide overflowing content */
        overflow: hidden;
        /* Prevent text wrapping */
        white-space: nowrap;
        /* Add ellipsis (...) for overflowed text */
        text-overflow: ellipsis;
        /* Define a maximum width */
        max-width: 100%;
    }


    .table-custom {
        width: 100%; /* Ensure table width is 100% of its parent container */
        table-layout: fixed; /* This helps in ensuring that the table respects the width of its container */
    }

    .table-custom .cve-id, .table-custom .cvss-score {
        max-width: 100px; /* Adjust this value based on your needs */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-custom td, .table-custom th {
        word-wrap: break-word;
    }

    .table-cs{

        th{
            color: #172B4D;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            word-wrap: break-word
        }

        td{
            color: #172B4D;
            font-size: 12px;
            font-weight: 400;
            line-height: 15.60px;
            word-wrap: break-word;
        }
    }

    .table-custom2 th, .table-custom2 td {
        padding: 7px 8px; /* Reduces padding inside cells for a more compact look */
        font-size: 1.0rem; /* Adjusts font size for compactness */
        line-height: 1.4; /* Adjusts line height to ensure text is still readable */

        overflow: hidden; /* Set overflow to hidden to hide overflowing content */
        white-space: nowrap; /* Prevent text wrapping */
        text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
        max-width: 100%; /* Define a maximum width */
    }

    .paging_simple_numbers {
        .pagination{
            margin-top: 0;
            margin-bottom: 0;
        }
    }


}
/* END of Large devices (laptops/desktops, 992px and up) */



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1700px)  {

    /*     *************     */
    /* Section: Welcome card */

    /* Background for the welcome card */
    .page-bg-card{
        background-color: rgba(255, 255, 255, 1);
        background-image:
            linear-gradient(
              180deg,
              rgba(178.96, 206.81, 224.07, 0.6) 25.44%, /* Lightened the start */
              rgba(152, 170, 182, 0.5) 55.82%, /* Lightened the middle */
              rgba(44, 94, 125, 0.3) 87.97% /* Lightened the end */
            ),
            url('/static/logo/chess-pieces-top.png');
        background-size: auto, cover;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right top; /* Adjusted to ensure the castle is displayed on the right */
        position: relative;
    }

    /* Background color for the title in the welcome card */
    .welcome-card-title{
        background: linear-gradient(120.43deg, #172B4D 16.13%, #FF7A00 93.38%);
        background-size: 100% 50%;
        -webkit-background-clip: text !important;
        text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        color: transparent;
        background-clip: text;
        font-size: 4rem;
    }

    /* Description for the welcome card */
    .welcome-card-description{
        font-weight: 600;
        padding-right: 5rem !important;
    }

    /*     *************      */


    /*        ****************          */
    /*   Section: News, Tips & Tricks   */

    /* Container for the news carousel */
    .news-carousel-container{
        margin-top: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
        margin-bottom: 2rem;
    }

    /* Titles for the sections/widgets */
    .section-header{
        font-size: 1.25rem !important;
    }

    /* Removing the bottom marin on the carousel Next/Previous buttons */
    .carousel-span-next{
        margin-bottom: 0.5rem;
    }

    /* Card box style for an item in the carousel News, Tips and Tricks */
    .news-card-box{
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: #f8f9fa;
        padding-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        min-height: 25rem;
    }

    /* Article header for an item in the carousel News, Tips and Tricks */
    .article-header{
        padding: 4px 8px;
        font-size: 1.0rem;
        font-weight: 700;
    }

    /* Article date of publication */
    .article-date{
        margin: 0.5rem;
        font-weight: 600;
    }

    /* Article description for an item in the carousel News, Tips and Tricks */
    .article-description{
        overflow-y: auto;
        max-height: 265px;
    }

    /*        ****************          */


    /*        ****************          */
    /*     Section: CVE Statistics      */

    /* Container for the CVE statistics widget */
    .stat-container{
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Card containing CVE statistics */
    .card-stat{
        padding: 12px 16px;
        margin: 0px 0px;
        background: #F8F9FA;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    /* Title for the card containing CVE statistics */
    .stat-header{
        padding: 4px 8px;
        font-size: 16px;
        font-weight: 700;
    }

    /* Label for the item in the CVE statistics widget */
    .stat-item{
        padding: 0px;
        font-size: 14px;
    }

    /* Number for the item in the CVE statistics widget */
    .stat-number{
        font-size: 16px;
    }

    /*        ****************          */

    /* Shadow for the card */
    .card-box-shadow{
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    /* Description column in the table */
    .table-description{
        /* Set overflow to hidden to hide overflowing content */
        overflow: hidden;
        /* Prevent text wrapping */
        white-space: nowrap;
        /* Add ellipsis (...) for overflowed text */
        text-overflow: ellipsis;
        /* Define a maximum width */
        max-width: 100%;
    }


    .table-custom {
        width: 100%; /* Ensure table width is 100% of its parent container */
        table-layout: fixed; /* This helps in ensuring that the table respects the width of its container */
    }

    .table-custom .cve-id, .table-custom .cvss-score {
        max-width: 100px; /* Adjust this value based on your needs */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-custom td, .table-custom th {
        word-wrap: break-word;
    }

    .table-cs{

        th{
            color: #172B4D;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            word-wrap: break-word
        }

        td{
            color: #172B4D;
            font-size: 12px;
            font-weight: 400;
            line-height: 15.60px;
            word-wrap: break-word;
        }
    }

    .table-custom2 th, .table-custom2 td {
        padding: 7px 8px; /* Reduces padding inside cells for a more compact look */
        font-size: 1.0rem; /* Adjusts font size for compactness */
        line-height: 1.4; /* Adjusts line height to ensure text is still readable */

        overflow: hidden; /* Set overflow to hidden to hide overflowing content */
        white-space: nowrap; /* Prevent text wrapping */
        text-overflow: ellipsis; /* Add ellipsis (...) for overflowed text */
        max-width: 100%; /* Define a maximum width */
    }

    .paging_simple_numbers {
        .pagination{
            margin-top: 0;
            margin-bottom: 0;
        }
    }


}
/* END of Extra large devices (large laptops and desktops, 1200px and up) */



/* Ultra wide devices (wide screen monitors/tv , 2600px and up */
@media only screen and (min-width: 2600px) {}
/* END of Ultra wide devices (wide screen monitors/tv , 2600px and up) */


    /*      ***       */
    /* Global styling */

.card {
    overflow: hidden; /* This ensures that anything exceeding the card boundaries is hidden, but try to avoid cutting off content */
}

.linear-gradient{
    background-image: linear-gradient(to right, rgba(252, 84, 2, 0.2), rgba(44, 94, 125, 1), rgba(254, 86, 2, 0.2));
    height: 1.5px !important;
}

/* Article image for an item in the carousel News, Tips and Tricks */
.article-image{
    max-width: 100%; /* Maximum width is 100% of the parent container */
    height: auto; /* Automatically adjust height to maintain aspect ratio */
}

.table th, .table td {
    word-wrap: break-word; /* This ensures long words are broken down to the next line if they're too long */
}

.table> :not(:first-child) {
    border-top: 0;
}

.table thead th {
    padding: 0.5rem;
}

.time-period-row {
    display: flex;
    align-items: center;  /* Vertically center the items */
    justify-content: center; /* Center everything horizontally */
}


#table_canonical_names td {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Keeps the text from overflowing the cell's bounds */
    text-overflow: ellipsis; /* Adds an ellipsis to signify clipped text */
    max-width: 150px; /* Adjust the width as needed */
}

#table_canonical_names {
    padding: 0 40px; /* Adds 20px padding to the left and right sides of the table */
}

.word-wrap-cell {
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}
.table-responsive {
    overflow-y: auto; /* Vertical scroll when necessary */
    overflow-x: hidden; /* Hide horizontal scroll */
    height: 150px; /* Fixed height to encapsulate content */
}
th, td {
    vertical-align: middle; /* Center content for readability */
    padding: 8px; /* Moderate padding to balance content */
    border-top: 1px solid #dee2e6; /* Consistent with Bootstrap's table border */
}

.modal-body {
    overflow-x: auto; /* Allows horizontal scrolling if needed */
}
.table-responsive {
    margin-bottom: 0; /* Removes margin if it disrupts layout within modals */
}

  /* Ensure table layout is stable and text doesn't overflow */
  .table td, .table th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 0;
  }

  /* Ensure modal content is scrollable if too long */
  .modal-body {
      overflow-y: auto; /* Enable vertical scrolling if necessary */
  }

  /* Style for clickable table cells */
  .clickable-cell {
      cursor: pointer;
      color: #007bff;
      text-decoration: underline;
  }

/* Ensure that the checkbox is styled properly */
.form-check-input {
    width: 1.25em;
    height: 1.25em;
    border-radius: 0.25em;
    border: 1px solid #d1d3e2;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.form-check-input:checked {
    background-color: #5e72e4;
    border-color: #5e72e4;
}
.btn-light.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    border: none;
    color: gray;
}

.btn-light.btn-sm .fas {
    font-size: 0.75rem;
}

#buttonContainer {
    position: absolute;
    top: 50px; /* Adjust this value to move the buttons up or down */
    right: 6%; /* Adjust this value to move the buttons left or right */
    z-index: 1000;
}

.custom-control {
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
}

.carousel-control-prev {
    left: 2%;
}

.carousel-control-next {
    right: 2%;
}

.badge{
    text-transform: unset;
    border-radius: 30px;
}

.text-bg-secondary {
    color: #fff !important;
}

.tag-color-card {
    display: inline-block;
    width: 50px; /* Adjust the width as needed */
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    text-align: center;
    line-height: 20px; /* Adjust line height to center the text vertically */
    border-radius: 3px;
}

/* General header styles */

h2 {
    font-size: 1rem; /* This corresponds to your desired size for H2 */
    font-weight: 700;
    margin-top: 7px;
}

h3 {
    font-size: 1.5rem; /* This corresponds to your desired size for H3 */
    font-weight: 600;
    margin-bottom: 0.5rem;
}