/*Variables*/
:root {
    --release-notes-col-width: 45px;
    --release-notes-point-major-size: 40px;
    --release-notes-point-minor-size: 15px;

    --release-notes-point-extended-view: 60px;
}
.release-notes-wrap{
    position: relative;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
    padding: var(--size-16);
}
.nhn-dev-portal-release-notes-major-version{
    padding-left: 9px;
}
/*List*/
.nhn-dev-portal-release-notes-intro{
    width: 100%;
    margin-bottom: var(--size-24);
}
.nhn-dev-portal-release-notes-intro-text {
    max-width: 1100px;
}
/*Entries*/
.release-notes-entries{
    width: 100%;
}
.release-notes-list-header{
    margin-bottom: var(--size-12);
}
.release-notes-entry{
    position: relative;
    clear: both;
}
.nhn-dev-portal-release-notes-col-right{
    position: relative;
    padding-left: 25px;
}
.nhn-dev-portal-release-notes-col-right button {
    position: relative;
    float: left;
    top: -4px;
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    padding: 0 0 0 var(--size-16);
}
.release-notes-first-child.nhn-dev-portal-release-notes-col-right button {
    position: relative;
    float: left;
    max-width: calc(100% - 140px);
}
.release-notes-list-release-date {
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 125px;
    padding-left: 5px;
    top: -1px;
}
.release-notes-info-text-container {
    width: calc(100% - var(--release-notes-point-extended-view));
}
.release-notes-features-filler-container {
    width: var(--release-notes-point-extended-view);
    height: var(--release-notes-point-extended-view);
}
.release-notes-features-container {
    width: calc(100% - var(--release-notes-point-extended-view));
}
.release-notes-feature-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 40px;
    margin-top: 3px;
}
/*Graphics*/
.nhn-dev-portal-release-notes-col-left {
    position: absolute;
    width: var(--release-notes-col-width);
    height: var(--release-notes-col-width);
}
.release-notes-col-left-minor {
    left: -30px;
}
.release-notes-col-left-minor .release-notes-point{
    left: 24px;
}
.release-notes-col-left-minor .release-notes-point {
    width: var(--release-notes-point-minor-size);
    height: var(--release-notes-point-minor-size);
    border-radius: 100%;
}
.release-notes-line-minor {
    position: absolute;
    background-color: transparent;
    height: 1px;
    width: 35px;
    top: 6px;
    border-bottom: solid 2px;
}
.release-notes-col-left-end .release-notes-point {
    position: relative;
    float: left;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid;
    left: 1px;
}
.nhn-dev-portal-release-notes-col-right {
    min-height: var(--release-notes-col-width);
    border-left: solid 2px;
    top: 2px;
}
.release-notes-last-child.nhn-dev-portal-release-notes-col-right{
    border-left: none;
}

.release-notes-point{
    position: relative;
}
.release-notes-info-icon-container {
    width: var(--release-notes-point-extended-view);
    height: var(--release-notes-point-extended-view);
    border-radius: 300px;
}
.nhn-dev-portal-release-notes-description img {
    max-width: 100%;
    height: auto;
}

/*Panel*/
.release-notes-entry-data{
    display: none; /*This line can be removed when backend api is fixed and used to fetch panel data*/
}
#release-notes-details-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 1100;
}
#release-notes-details-panel{
    position: fixed;
    top: 0;
    height: 100vh;
    width: 950px;
    right: 0;
    z-index: 1200;
    transition: right 0.2s ease;
}
    #release-notes-details-panel.panel-closed {
        right: -1000px;
    }
#release-notes-close-panel{
    border: none;
    position: absolute;
    top: var(--size-16);
    right: var(--size-24);
    width: var(--size-48);
    height: var(--size-48);
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
}
#release-notes-close-panel div {
    position: relative;
    height: 70%;
    width: 100%;
    -webkit-mask: url(/icons/xmark.svg) no-repeat center;
    mask: url(/icons/xmark.svg) no-repeat center;
    z-index: 10;
}
#release-notes-details-panel-content-wrapper {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 30px 20px;
    z-index: 5;
}
#release-notes-details-panel-content {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-right: 55px;
    margin-top: 30px;
}
#release-notes-details-panel-content::-webkit-scrollbar {
    width: 8px;
}
#release-notes-details-panel-content::-webkit-scrollbar-track {
    background: var(--color-gray-light);
}
#release-notes-details-panel-content::-webkit-scrollbar-thumb {
    cursor: pointer !important;
    background-color: var(--color-green-middle);
}
#release-notes-details-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-green-secondary);
}
html.night-mode #release-notes-details-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-green-primary);
}
.release-notes-details-panel-title,
.release-notes-details-panel-status,
.release-notes-details-panel-release-date,
.release-notes-details-panel-description {
    position: relative;
    float: left;
    width: 100%;
}
.release-notes-details-panel-title {
    font-size: 28px;
    font-weight: 500;
    box-sizing: border-box;
    padding-right: 20px;
}
.release-notes-details-panel-status,
.release-notes-details-panel-releasedate {
    font-weight: bold;
    font-size: 16px;
    margin-top: 15px;
}
.release-notes-details-panel-status span,
.release-notes-details-panel-releasedate span {
    font-weight: 400;
}
.release-notes-details-panel-description {
    margin-top: 15px;
}
.release-notes-details-panel-description img {
    max-width: 100%;
}

/* Day / Night-mode */
html.day-mode .nhn-dev-portal-release-notes-intro h1 {
    color: var(--color-green-primary);
}
html.day-mode .release-notes-list-header {
    color: var(--color-green-primary);
}
html.day-mode .nhn-dev-portal-release-notes-col-right button {
    color: var(--color-green-primary);
}
html.day-mode .nhn-dev-portal-release-notes-col-right button:hover {
    color: var(--color-green-middle);
}
html.day-mode .release-notes-list-release-date {
    color: var(--color-gray-dark);
}
html.day-mode .release-notes-col-left-minor .release-notes-point {
    background-color: var(--color-green-primary);
}
html.day-mode .release-notes-line-minor {
    border-bottom-color: var(--color-green-primary);
}
html.day-mode .release-notes-col-left-end .release-notes-point {
    border-top-color: var(--color-green-primary);
}
html.day-mode .nhn-dev-portal-release-notes-col-right {
    border-left-color: var(--color-green-primary);
}
html.day-mode #release-notes-details-overlay{
    background-color: rgba(0,0,0,0.4);
}
html.day-mode #release-notes-details-panel{
    background-color: var(--color-white);
}
html.day-mode #release-notes-close-panel{
    background-color: var(--color-green-secondary);;
}
html.day-mode #release-notes-close-panel div {
    background-color: var(--color-gray-black);
}
html.day-mode #release-notes-close-panel:hover {
    background-color: var(--color-green-primary);
}
html.day-mode #release-notes-close-panel:hover div {
    background-color: var(--color-gray-white);
}
html.day-mode #release-notes-details-panel-content-wrapper {
    box-shadow: 2px 0 10px 1px #242424;
}
html.day-mode .release-notes-details-panel-title {
    color: var(--color-green-primary);
}
html.day-mode .release-notes-details-panel-status,
html.day-mode .release-notes-details-panel-release-date {
    color: var(--color-green-dark);
}
html.day-mode .release-notes-details-panel-description{
    color: var(--color-gray-black);
}
html.day-mode .release-notes-details-panel-description th,
html.day-mode .release-notes-details-panel-description td {
    border-color:  #dbdbdb;
}
html.day-mode .release-notes-details-panel-description th:first-child,
html.day-mode .release-notes-details-panel-description td:first-child {
    border-color: #dbdbdb;
}
html.day-mode .release-notes-details-panel-description tr:last-child td{
    border-color: #dbdbdb;
}
html.day-mode .release-notes-details-panel-description th {
    background-color: #f0f0f0;
}
html.day-mode .release-notes-details-panel-description table:not(:has(thead)) > tbody > tr:first-of-type td,
table:not(:has(thead)) > tr:first-of-type td {
    background-color: #f0f0f0;
}
/* ------------------------ */

html.night-mode .nhn-dev-portal-release-notes-intro h1 {
    color: var(--color-green-middle);
}
html.night-mode .nhn-dev-portal-release-notes-intro .nhn-dev-portal-release-notes-intro-text{
    color: var(--color-gray-white);
}
html.night-mode .release-notes-list-header {
    color: var(--color-green-middle);
}
html.night-mode .nhn-dev-portal-release-notes-col-right button {
    color: var(--color-gray-white);
}
html.night-mode .nhn-dev-portal-release-notes-col-right button:hover {
    color: var(--color-green-secondary);
}
html.night-mode .release-notes-list-release-date {
    color: var(--color-gray-middle);
}
html.night-mode .release-notes-col-left-minor .release-notes-point {
    background-color: var(--color-green-middle);
}
html.night-mode .release-notes-line-minor {
    border-bottom-color: var(--color-green-middle);
}
html.night-mode .release-notes-col-left-end .release-notes-point {
    border-top-color: var(--color-green-middle);
}
html.night-mode .nhn-dev-portal-release-notes-col-right {
    border-left-color: var(--color-green-middle);
}
html.night-mode #release-notes-details-overlay{
    background-color: rgba(0,0,0,0.7);
}
html.night-mode #release-notes-details-panel{
    background-color: var(--color-gray-dark);
}
html.night-mode #release-notes-close-panel{
    background-color: var(--color-green-primary);;
}
html.night-mode #release-notes-close-panel div {
    background-color: var(--color-gray-white);
}
html.night-mode #release-notes-close-panel:hover {
    background-color: var(--color-green-secondary);
}
html.night-mode #release-notes-close-panel:hover div {
    background-color: var(--color-gray-black);
}
html.night-mode #release-notes-details-panel-content-wrapper {
    box-shadow: none;
}
html.night-mode .release-notes-details-panel-title {
    color: var(--color-green-middle);
}
html.night-mode .release-notes-details-panel-status,
html.night-mode .release-notes-details-panel-release-date {
    color: var(--color-gray-middle);
}
html.night-mode .release-notes-details-panel-description{
    color: var(--color-gray-white);
}
html.night-mode .release-notes-details-panel-description th,
html.night-mode .release-notes-details-panel-description td {
    border-color:  var(--color-green-primary);
    color: var(--color-gray-white);
}
html.night-mode .release-notes-details-panel-description th:first-child,
html.night-mode .release-notes-details-panel-description td:first-child {
    border-color: var(--color-green-primary);
}
html.night-mode .release-notes-details-panel-description tr:last-child td{
    border-color: var(--color-green-primary);
}
html.night-mode .release-notes-details-panel-description table:not(:has(thead)) > tbody > tr:first-of-type td,
table:not(:has(thead)) > tr:first-of-type td {
    background-color: var(--color-green-dark);
}

/*Responsive Design - Breakpoints*/
/*Wide Viewport Content Variables (2160px ->)*/
/*Mobile Viewport Content Variables (<- 1079px)*/

@media only screen and (min-width: 1px) and (max-width: 1079px){
    .release-notes-list-release-date {
        display: none;
    }
    .nhn-dev-portal-release-notes-col-right{
        overflow: auto;
        padding-bottom: 10px;
        padding-left: 24px;
    }
    .release-notes-first-child.nhn-dev-portal-release-notes-col-right a {
        max-width: 100%;
    }
    .nhn-dev-portal-release-notes-col-right button{
        top: -3px;
    }
    #release-notes-details-panel {
        width: 100vw;
    }
    #release-notes-details-panel.panel-closed {
        right: -105vw;
    }
}