#article_body {
    overflow-x: scroll;
}

#enter_place_tz {
    display: grid;
    justify-content: center;
}

#enter_place_tz .form_label {
    padding-bottom: 5px;
    display: grid;
    grid-auto-flow: column;
    width: fit-content;
    align-items: center;
    font-size: 14px;
}

#enter_place_tz .form_label img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

#enter_place_tz input {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 400px;
    font-size: 14px;
    border-radius: 5px;
    padding: 5px;
}

@media (max-width: 480px) {
    #enter_place_tz input {
      width: 300px;
    }
}

.narrow_dropdown .item {
    display: grid;
    grid-auto-flow: column;
}

.narrow_dropdown .item .label {
    justify-self: left;
}

.narrow_dropdown .item .utc_offset {
    justify-self: end;
    align-self: center;
    color: var(--my-disabled-color);
}

#tool_bar {
    display: grid;
    grid-auto-flow: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    margin-top: 20px;
    font-size: var(--font-size-small);
}

#tool_bar #time_format span {
    border: 1px solid var(--my-font-color);
    padding: 5px;
    cursor: pointer;
}

#tool_bar #time_format span:nth-child(1) {
    border-radius: 5px 0px 0px 5px;
}

#tool_bar #time_format span:nth-child(2) {
    border-radius: 0px 5px 5px 0px;
}

#tool_bar #time_format span.selected {
    background-color: var(--my-font-color);
    color: var(--my-bg-color);
}

#calendar input {
    padding: 5px;
    font-size: var(--font-size-small);
    border-radius: 5px;
    cursor: pointer;
}

#tz_comparision_container {
    overflow-x: scroll;
    display: grid;
    justify-items: center;
}

#tz_comparision {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    width: fit-content;
    grid-gap: 10px;
    margin-top: 30px;
}

#tz_comparision .tz_container {
    font-size: var(--font-size-small);
    display: grid;
    justify-items: center;
}

#tz_comparision .tz_container .tz_metadata {
    margin-bottom: 7px;
    display: grid;
    justify-items: center;
}

#tz_comparision .tz_container .tz_metadata .utc_offset{
    color: var(--my-disabled-color);
}

#tz_comparision .tz_container .tz_metadata .tools {
    display: grid;
    grid-gap: 5px;
    grid-auto-flow: column;
    justify-items: center;
}

#tz_comparision .tz_container .tz_metadata .tools .home {
    width: 17px;
    height: 17px;
}

#tz_comparision .tz_container .tz_metadata .tools img {
    width: 15px;
    height: 15px;
    align-self: center;
    cursor: pointer;
}

#tz_comparision .tz_container .bottom_tools {
    margin-top: 7px;
}

#tz_comparision .tz_container .bottom_tools img {
    cursor: pointer;
}

#tz_comparision .tz_container .bottom_tools .nextpage {
    width: 15px;
    height: 15px;
}

#tz_comparision .tz_container .tz_metadata .place {
    white-space: nowrap;
}

#tz_comparision .tz_container table {
    color: var(--my-bg-color);
    background-color: var(--my-font-color);
    border: 1px solid var(--my-hr-color);
    border-radius: 9px;
    padding: 5px;
}

#tz_comparision .tz_container table tr {
    cursor: pointer;
}

#tz_comparision .tz_container table tr.hovered td {
    border-bottom: 1px solid var(--my-bg-color);
    border-top: 1px solid var(--my-bg-color);
}

#tz_comparision .tz_container table tr td .date {
    margin-left: 5px;
    font-size: 9px;
}

#tz_comparision table tr td {
    text-align: center;
    padding: 5px;
    white-space: nowrap;
}