* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    margin: 0;
    color: #231F20;
    text-decoration: none;
    font-family: "museo";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
}

.oom__bold {
    font-weight: 700;
}

b,
strong {
    font-weight: bold;
}

.oom__menu {
    width: 350px;
    height: 100vh;
    box-shadow: 2px 0px 5px 0px #0000001A;
    background: #FFFFFF;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    transition: 0.5s;
}

.oom__menu--toggle {
    background: #ED1A3D;
    width: 29px;
    height: 48px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    right: -14.5px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.oom__menu--toggle::before {
    content: "";
    width: 4.5px;
    height: 4.5px;
    border-top: #FFFFFF solid 2px;
    border-left: #FFFFFF solid 2px;
    transform: rotate(-45deg) translate(1px, 1px);
}

.oom__menu__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.oom__menu__content--identity {
    min-height: 145px;
    width: 100%;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    overflow: hidden;
}

.oom__menu__content--identity__logo {
    width: 97px;
    transition: 0.5s;
}

.oom__menu__content--identity__title {
    font-family:"museo";
    color: #000000;
    font-size: 22px;
    white-space: nowrap;
}

.oom__menu__content--navigator {
    padding: 0px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oom__menu__content--navigator__accordion {
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.oom__menu__content--navigator__accordion--header::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: #231F20 solid 2px;
    border-left: #231F20 solid 2px;
    margin-left: auto;
    transform: rotate(225deg) translate(2.5px, 0px);
}

.oom__menu__content--navigator__accordion--content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #F7F7F7;
    border-radius: 8px;
    margin-left: 24px;
    margin-top: 0px;
    max-height: 0px;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
}

.oom__menu__content--logout {
    margin: auto 24px 32px 24px;
    border-top: #ED1A3D solid 2px;
    display: flex;
    flex-direction: column;
    min-height: 64px;
}

.oom__menu__content--logout--link {
    margin: 16px 32px 0px 8px;
    overflow: hidden;
}

.oom__menu__content--navigator__accordion--header,
.oom__menu__content--navigator__accordion--content--link,
.oom__menu__content--logout--link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.oom__menu__content--navigator__accordion--title--logo,
.oom__menu__content--navigator__accordion--content--link--img,
.oom__menu__content--logout--link--img {
    width: 32px;
    height: 32px;
}

.oom__menu__content--logout--link:hover,
.oom__menu__content--navigator__accordion--content--link:hover,
.oom__menu__content--navigator__accordion--content--link.current,
.oom__menu__content--navigator__accordion--header:hover,
.oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--header {
    background: #231F20;
}

.oom__menu__content--logout--link:hover .oom__menu__content--logout--link--img,
.oom__menu__content--navigator__accordion--content--link:hover .oom__menu__content--navigator__accordion--content--link--img,
.oom__menu__content--navigator__accordion--content--link.current .oom__menu__content--navigator__accordion--content--link--img,
.oom__menu__content--navigator__accordion--header:hover .oom__menu__content--navigator__accordion--title--logo,
.oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--title--logo {
    filter: brightness(0) invert(1);
}

.oom__menu__content--navigator__accordion--header:hover::after {
    border-color: #FFFFFF;
}

.oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--header::after {
    border-color: #FFFFFF;
    transform: rotate(45deg) translate(0px, 2.5px);
}

.oom__menu__content--navigator__accordion--title,
.oom__menu__content--navigator__accordion--content--link--text,
.oom__menu__content--logout--link--text {
    white-space: nowrap;
    transition: 0.5s;
}

.oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--content {
    margin-top: 16px;
}

.oom__menu__content--navigator__accordion--header:hover .oom__menu__content--navigator__accordion--title,
.oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--title,
.oom__menu__content--navigator__accordion--content--link:hover .oom__menu__content--navigator__accordion--content--link--text,
.oom__menu__content--navigator__accordion--content--link.current .oom__menu__content--navigator__accordion--content--link--text,
.oom__menu__content--logout--link:hover .oom__menu__content--logout--link--text {
    color: #FFFFFF;
}

.oom__menu.collapse {
    width: 112px;
}

.oom__menu.collapse .oom__menu__content--identity__title,
.oom__menu.collapse .oom__menu__content--navigator__accordion--title,
.oom__menu.collapse .oom__menu__content--navigator__accordion--content--link--text,
.oom__menu.collapse .oom__menu__content--logout--link--text {
    opacity: 0;
    pointer-events: none;
}

.oom__menu.collapse .oom__menu__content--logout--link {
    margin: 16px 8px 0px 8px;
}

.oom__menu.collapse .oom__menu__content--identity__logo {
    width: 48px;
}

.oom__menu.collapse .oom__menu__content--navigator__accordion--content {
    margin-left: 0;
}

.oom__menu.collapse .oom__menu--toggle::before {
    transform: rotate(135deg) translate(1px, 1px);
}

.oom__main {
    width: 100%;
    min-height: 100vh;
    padding: 35px 30px 35px 398px;
    transition: 0.5s;
}

.oom__main.expand {
    padding: 35px 30px 35px 160px;
}

.oom__main__content {
    width: 100%;
    height: 100%;
}

.oom__main__content__heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oom__main__content__heading--welcome,
.oom__form__heading .oom__form__title {
    font-family:"museo";
    font-size: 32px;
}

.oom__main__content__heading--breadcrump {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.oom__main__content__heading--breadcrump li {
    font-size: 14px;
    color: #B6B6B6;
    font-weight: 700;
}

.oom__main__content__heading--breadcrump li:last-child {
    color: #ED1A3D;
}

.oom__main__content__filters {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 30px 0 20px 0;
}

.oom__main__content__filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 25%;
}

.oom__main__content__filter--select {
    display: flex;
    flex-direction: column;
    position: relative;
}

.oom__main__content__filter--select--selected {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #D0D0D0;
    border-radius: 8px;
    padding: 8px 25px 8px 8px;
    width: 100%;
    cursor: pointer;
}

.oom__main__content__filter--select--selected::after {
    content: "";
    width: 5.6px;
    height: 5.6px;
    border-top: 2px solid #231F20;
    border-left: 2px solid #231F20;
    transform: rotate(-135deg);
    position: absolute;
    right: 12px;
    top: 13px;
}

.selecting .oom__main__content__filter--select--selected::after {
    transform: rotate(45deg) translate(-1px, 2px);
}

.oom__main__content__filter--select--option {
    list-style: none;
    padding: 8px;
    box-shadow: 0px 2px 10px 0px #00000040;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #FFFFFF;
    position: absolute;
    width: 100%;
    top: calc(100% + 8px);
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: 0.5s;
}

.selecting .oom__main__content__filter--select--option {
    opacity: 1;
    pointer-events: auto;
    overflow: auto;
}

.oom__main__content__filter--select--option li {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.oom__main__content__filter--select--option li:hover,
.oom__main__content__filter--select--option .selected {
    background: #E6E6E6;
}

.oom__main__content__filter--select {
    width: 100%;
}

.oom__main__content__map {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 20/10;
    border-radius: 8px;
    background: #000000;
    min-height: 400px;
}

/** Vessel Info Window **/
.vessel-details-status {
    padding: 5px 10px;
    background-color: #2FCB63;
}

.vessel-details-status.online {
    background-color: #2FCB63;
}

.vessel-details-status.offline {
    background-color: #ED1A3D;
}

.vessel-details-status.warning {
    background-color: #EDAD4D;
}

.vessel-details-status.unknown {
    background-color: #A8A8A8;
}

.vessel-details-status span {
    color: #FFFFFF;
    font-weight: bold;
}

.vessel-details {
   display: flex;
   flex-direction: column;
   gap:  10px;	    
   padding:  8px 16px 36px 16px ;
}

.vessel-details__overage,
.vessel-details__speed {
  display: flex;   
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.w50 {
    width: 50%;
}

.gm-style .gm-style-iw-c {
    padding: 0;
}

.gm-style .gm-style-iw-d {
    overflow: auto!important;
}

.gm-style-iw-ch {
    padding: 0;
}

.gm-ui-hover-effect {
    position: absolute!important;
    right: 10px;
    top: 4px;
    width: auto!important;
    height: auto!important;
}

.gm-ui-hover-effect > span {
    margin: 0!important;
    width: 20px !important;
    height: 20px !important;
}

.gm-title.gm-full-width {
    padding: 6px 10px;
}

.address {
    padding: 0 10px;
}

.view-link {
    padding: 10px;
}

.view-link a,
.view-link a span {
    font-size: 16px;
    color: #0096B3!important;
    text-decoration: underline!important;
    outline: none!important;
}

/* Telemetry Statistics */
.oom__main__content__data {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.oom__main__content__data-left {
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.oom__main__content__data_detail.map {
    width: 100%;
}

.oom__main__content__data_detail {
    width: calc(50% - 8px);
    box-shadow: 0px 0px 10px 0px #0000001A;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oom__main__content__data-right {
    width: 30%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
}

.oom__main__content__data-right .oom__main__content__data_detail {
    width: 100%;
}

.oom__box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.oom__box_headings {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 8px;
}

.oom__box_heading {
    width: 33.333%;
}

.oom__box_details {
    display: flex;
    flex-direction: row;
    gap: 10px;
    background: #F7F7F7;
    border-radius: 8px;
    padding: 8px;
}

.oom__box_detail {
    width: 33.33%;
}

.green {
    color: #2FCB63;
}

.red {
    color: #ED1A3D;
}

.oom__view_detail_link {
    color: #0096B3;
    text-decoration: underline;
}

.oom__system-statistic__data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: solid 1px #EAEAEA;
    border-radius: 8px;
}

.oom__system-statistic__data__detail-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    background: #F7F7F7;
    border-radius: 8px;
}

.oom__main__content__data_detail.map .oom__main__content__map {
    aspect-ratio: 5;
    min-height: 250px;
}

.oom__main__content__data.data-usages {
    flex-direction: column;
    gap: 16px;
}

.oom__main__content__data__charts {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.oom__main__content__data__chart {
    width: calc(50% - 8px);
    padding: 20px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    aspect-ratio: 2;
}

.oom__main__content__data__summary {
    width: 100%;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.oom__main__content__data__summary__table {
    display: flex;
    flex-direction: row;
}

.oom__table__box.unscrollable {
    min-width: 350px;
    width: 350px;
}

.oom__table__box,
.oom__table__box table {
    width: 100%;
}

.oom__table__box table,
.oom__table__box th,
.oom__table__box td {
    border: 2px solid #EAEAEA;
    border-collapse: collapse;
}

.oom__table__box th {
    background: #F7F7F7;
}

.oom__table__box th,
.oom__table__box td {
    padding: 8px;
    text-align: left;
}

.oom__table__box.scrollable th,
.oom__table__box.scrollable td {
    min-width: 180px;
    white-space: nowrap;
}

.oom__table__box.scrollable {
    overflow: auto;
    padding-bottom: 16px;
}

.oom__table__box.scrollable table {
    min-width: 1600px;
}

.oom__table__box.scrollable::-webkit-scrollbar {
    padding-top: 10px;
    height: 8px;
    background: gray;
    border-radius: 10px;
}

/* Track */
.oom__table__box.scrollable::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}
 
/* Handle */
.oom__table__box.scrollable::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
.oom__table__box.scrollable::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.oom__table__box.scrollable::-webkit-scrollbar-thumb:horizontal {
    background: #000;
    border-radius: 10px;
}

.oom__vessel__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.oom__vessel__info__map__box {
    padding: 16px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oom__vessel__info__map__status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.oom__vessel__info__map__status .online {
    color: #FFFFFF;
    background: #2FCB63;
    padding: 8px 16px;
    border-radius: 8px;
}

.oom__vessel__map #googlemap {
    aspect-ratio: 5.8;
    min-height: 250px;
}

.oom__vessel__details {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.oom__vessel__detail {
    padding: 16px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    border-radius: 8px;
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oom__vessel__detail.data-usage {
    width: 40%;
}

.oom__vessel__code {
    padding: 8px;
    border-radius: 8px;
    background: #E6E6E6;
    text-align: center;
}

.oom__vessel__detail__data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding: 8px;
    background: #F7F7F7;
    border-radius: 8px;
}

.oom__vessel__detail__data__title {
    width: 40%;
}

.oom__vessel__detail__data__info {
    width: 60%;
}

.oom__vessel__detail__data__info {
    text-align: right;
}

.oom__vessel__data__usage {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding: 8px;
    border-radius: 8px;
    background: #E6E6E6;
}

.oom__vessel__detail__chart__title {
    font-size: 14px;
}

.oom__vessel__usage__limit {
    font-size: 12px;
}

.oom__vessel__manage-serviceline-btn {
    padding: 8px 24px;
    border-radius: 24px;
    background: #ED1A3D;
    color: #FFFFFF;
    width: fit-content;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
}

.oom__vessel__manage-serviceline-btn:hover {
    background: #CA112F;
}

.oom__vessel__wise-usage {
    display: flex;
    gap: 20px;
    flex-direction: row;
    padding: 8px;
    background: #F7F7F7;
    border-radius: 8px;
    justify-content: space-between;
}

.oom__vessel__wise-usage.heading {
    background: #E6E6E6;
}

.oom__vessel__wise-usage p {
    width: 50%;
}

.oom__vessel__wise-usage p.usage {
    text-align: right;
}

.oom__vessel__detail__link {
    color: #0096B3;
    text-decoration: underline;
}

.oom__header__logo__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    box-shadow: 0px 2px 5px 0px #0000001A;
}

.oom__header__logo {
    width: 130px;
    height: auto;
}

.oom__access__section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 32px 96px;
    gap: 160px;
}

.oom__access__image__box,
.oom__access__form__box {
    width: 50%;
}

.oom__access__image__box img {
    width: 100%;
}

.oom__access__form__box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 728px;
}

.oom__access__form_title {
    font-family:"museo";
    font-size: 32px;
}

.oom__access__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.oom__access__form input[type="text"],
.oom__access__form input[type="password"] {
    padding: 16px;
    border: solid 1px #D0D0D0;
    border-radius: 8px;
}

.oom__access__form input[type="submit"],
.oom__access__form__box .oom__back-to-home.red {
    padding: 8px;
    border: solid 2px #ED1A3D;
    background: #ED1A3D;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 24px;
}

.oom__access__form__box .oom__forgot-password,
.oom__access__form__box .oom__back-to-home,
.oom__cancel_btn {
    padding: 8px;
    border: solid 2px #ED1A3D;
    background: #FFFFFF;
    color: #ED1A3D;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 24px;
    text-align: center;
}

.oom__access__form__box .oom__back-to-home:hover,
.oom__access__form input[type="submit"]:hover,
.oom__access__form__box .oom__forgot-password:hover,
.oom__cancel_btn:hover {
    background: #CA112F;
    color: #FFFFFF;
    border-color: #CA112F;
}

#oom__access__notice {
    display: none;
}

.error #oom__access__notice {
    color: #ED1A3D;
    display: block;
}

.success #oom__access__notice {
    color: #2FCB63;
    display: block;
}

/* .error #userid, */
.error #password {
    background: #FFEDF0;
    border-color: #ED1A3D;
}

.success-reset .oom__access__form_title {
    max-width: 400px;
}

.oom__resend-passcode-link {
    color: #0096B3;
}

.router-stats .oom__main__content__data__charts {
    flex-wrap: wrap;
}

.router-stats .vessel-name .oom__main__content__filter--select {
    width: 300px;
}

.router-stats .data-days .oom__main__content__filter--select {
    width: 150px;
}

.terminal-charts .oom__main__content__data_detail.map .oom__main__content__map {
    aspect-ratio: 15/7;
}

.oom__vessel-statistic__data {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: solid 1px #EAEAEA;
    border-radius: 8px;
}

.oom__vessel-statistic__data-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.oom__vessel-statistic__data-top .statistic {
 color: #2FCB63;
}

/* Style the progress element */
.oom__vessel-statistic__data progress {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 12px; /* Rounds the border */
    width: 100%; /* Adjust as needed */
    height: 16px; /* Adjust as needed */
    background-color: #F7F7F7; /* Background color */
    overflow: hidden;
    position: relative;
}

/* Style the progress bar for WebKit browsers */
.oom__vessel-statistic__data progress::-webkit-progress-bar {
    background-color: #F7F7F7; /* Background color */
    border-radius: 12px; /* Ensures consistent rounding */
}

.oom__vessel-statistic__data progress::-webkit-progress-value {
    background-color: #2FCB63; /* Green progress color */
    border-radius: 12px; /* Rounds the progress bar */
    transition: width 0.3s ease; /* Smooth transition for value change */
}

/* Style the progress bar for Mozilla browsers */
.oom__vessel-statistic__data progress::-moz-progress-bar {
    background-color: #2FCB63; /* Green progress color */
    border-radius: 12px; /* Rounds the progress bar */
    transition: width 0.3s ease; /* Smooth transition for value change */
}

.oom__main__content.email-reports,
.oom__email__report__form__box {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.oom__email__report__form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.oom__form__field {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oom__form__field .instruction {
    font-size: 14px;
    color: #B6B6B6;
}

.oom__form__field input,
.oom__form__field select,
.oom__form__field textarea {
    background: #F7F7F7;
    border: solid 1px #D0D0D0;
    padding: 12px;
    border-radius: 8px;
}

.select_box {
    display: flex;
    flex-direction: column;
    position: relative;
}

.select_box::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: #231F20 solid 2px;
    border-left: #231F20 solid 2px;
    transform: rotate(225deg);
    position: absolute;
    right: 10px;
    top: 15px;
    pointer-events: none;
}

.select_box select {
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}

/* For IE10 */
.select_box select::-ms-expand {
    display: none;
}

.oom__form__field.notify-email,
.oom__form__field.report-status {
    width: 100%;
}

.oom__form__field.report-status {
    flex-direction: row;
    padding: 20px 0;
}

.oom__email__report__form input[type="submit"] {
    background: #ED1A3D;
    border: none;
    color: #FFFFFF;
    font-weight: 700;
    padding: 8px 40px;
    border-radius: 24px;
    cursor: pointer;
}

.oom__email__report__form input[type="submit"]:hover {
    background: #CA112F;
}

/** Responsive Media Query **/
@media (max-width: 1680px) { 
    .oom__vessel__detail,
    .oom__vessel__detail.data-usage {
        width: 33.333%;
    }

    .oom__main__content__filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .oom__main__content__filter {
        width: 25%;
    }

    .oom__main__content__filter--select {
        width: 100%!important;
    }
}

@media (max-width: 1560px) { 
    .oom__vessel__detail__data p,
    .oom__vessel__code,
    .oom__vessel__wise-usage p {
        font-size: 15px;
    }

    .oom__vessel__detail__data {
        gap: 10px;
    }
}

@media (max-width: 1480px) { 
    .oom__vessel__detail__data p,
    .oom__vessel__code,
    .oom__vessel__wise-usage p {
        font-size: 14px;
    }

    .oom__vessel__manage-serviceline-btn {
        font-size: 18px;
    }

    .oom__main__content__data-left {
        width: 60%;
    }

    .oom__main__content__data-right {
        width: 40%;
    }
}

@media (max-width: 1480px) { 
    .oom__header__logo {
        width: 100px;
    }

    .oom__access__section {
        gap: 80px;
    }
}

@media (max-width: 1380px) { 
    .oom__form__field.scheduler-name {
        width: 100%;
    }
}

@media (max-width: 1300px) { 
    .oom__vessel__details {
        flex-wrap: wrap;
    }

    .oom__vessel__detail,
    .oom__vessel__detail.data-usage {
        width: calc(50% - 8px);
    }

    .oom__vessel__detail.wise-usage {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    * {
        font-size: 15px;
    }

    .oom__main,
    .oom__main.expand {
        padding: 1px 32px 32px 120px;
    }

    .oom__main::after {
        content: "";
        position: fixed;
        background: #000000;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .oom__main.expand::after {
        opacity: 0;
        pointer-events: none;
    }

    .oom__menu.collapse {
        width: 88px;
    }

    .oom__menu__content--navigator {
        padding: 0px 20px 24px 20px;
    }

    .oom__menu__content--identity {
        padding: 24px 20px;
    }

    .oom__menu.collapse .oom__menu__content--logout {
        margin: auto 20px 32px 20px;
    }

    .oom__menu__content--logout--link,
    .oom__menu.collapse .oom__menu__content--logout--link {
        margin: 16px 0px 0px 0px;
    }

    .oom__menu__content--identity {
        min-height: 145px;
        gap: 10px;
    }

    .oom__menu__content--navigator__accordion.active .oom__menu__content--navigator__accordion--content {
        margin-top: 15px;
    }

    .oom__menu__content--navigator__accordion--content {
        margin-left: 15px;
    }

    .oom__menu--toggle {
        width: 26px;
        height: 42px;
    }

    .oom__menu__content--identity__title {
        font-size: 20px;
    }

    .oom__main__content__filters {
        gap: 15px;
        padding: 20px 0;
    }

    .oom__access__form_title {
        font-size: 28px;
    }
}

@media (max-width: 1024px) {
    .oom__main__content__data {
        flex-direction: column;
    }

    .oom__main__content__data-left,
    .oom__main__content__data-right {
        width: 100%;
    }

    .oom__access__section {
        gap: 40px;
        padding: 20px;
    }

    .oom__header__logo {
        width: 90px;
    }

    .oom__access__form_title {
        font-size: 25px;
    }

    .oom__access__form #login,
    .oom__access__form__box .oom__forgot-password {
        border-width: 1px;
    }
}

@media (max-width: 900px) {
    .oom__main__content__data__chart {
        width: 100%;
    }

    .oom__main__content__data__charts {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .oom__main__content__filters,
    .oom__main__content__filter {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .shipping-organisation .oom__main__content__filter--select,
    .fleet-name .oom__main__content__filter--select,
    .vessel-name .oom__main__content__filter--select,
    .status .oom__main__content__filter--select {
        width: 100%;
        min-width: unset;
    }

    .oom__vessel__detail,
    .oom__vessel__detail.data-usage {
        width: 100%;
    }

    .w50 {
        width: 100%;
    }

    .vessel-details__overage,
    .vessel-details__speed {
        gap: 10px;
    }

    .oom__table__box.scrollable {
        overflow: visible;
        padding-bottom: 0;
    }

    .oom__main__content__data__summary__table {
        overflow: auto;
        padding-bottom: 16px;
    }

    .oom__main__content__data__summary__table::-webkit-scrollbar {
        padding-top: 10px;
        height: 8px;
        background: gray;
        border-radius: 10px;
    }
    
    /* Track */
    .oom__main__content__data__summary__table::-webkit-scrollbar-track {
        background: #f1f1f1; 
        border-radius: 10px;
    }
     
    /* Handle */
    .oom__main__content__data__summary__table::-webkit-scrollbar-thumb {
        background: #888; 
    }
    
    /* Handle on hover */
    .oom__main__content__data__summary__table::-webkit-scrollbar-thumb:hover {
        background: #555; 
    }
    
    .oom__main__content__data__summary__table::-webkit-scrollbar-thumb:horizontal {
        background: #000;
        border-radius: 10px;
    }

    .oom__access__section {
        gap: 20px;
    }

    .oom__access__form,
    .oom__access__form__box {
        gap: 10px;
    }

    .oom__access__form #userid,
    .oom__access__form #password {
        padding: 12px;
    }

    .oom__header__logo {
        width: 75px;
    }

    .oom__header__logo__box {
        padding: 15px;
    }

    .oom__main__content__heading--welcome, 
    .oom__form__heading .oom__form__title {
        font-size: 25px;
    }
}

@media (max-width: 680px) {
    .oom__main__content__data_detail {
        width: 100%;
    }

    .oom__access__section {
        flex-direction: column;
    }

    .oom__access__image__box,
    .oom__access__form__box,
    .oom__form__field {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .oom__menu__content--identity {
        padding: 20px;
    }

    .oom__menu__content--navigator {
        padding: 0px 20px 20px 20px;
    }

    .oom__menu__content--logout {
        margin: auto 20px 20px 20px;
    }

    .oom__menu {
        width: 300px;
    }

    .oom__menu.collapse {
        width: 88px;
    }

    .oom__menu--toggle {
        width: 25px;
        height: 40px;
        right: -12.5px;
    }

    .oom__menu__content--navigator__accordion--title,
    .oom__menu__content--navigator__accordion--content--link--text,
    .oom__menu__content--logout--link--text {
        font-size: 14px;
    }

    .oom__menu__content--navigator__accordion--content {
        margin-left: 16px;
    }

    .oom__main__content__filters,
    .oom__main__content__filter {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .shipping-organisation .oom__main__content__filter--select,
    .fleet-name .oom__main__content__filter--select,
    .vessel-name .oom__main__content__filter--select,
    .status .oom__main__content__filter--select {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 440px) {
    .oom__vessel__detail__data {
        flex-direction: column;
    }

    .oom__vessel__detail__data__title,
    .oom__vessel__detail__data__info {
        width: 100%;
    }

    .oom__vessel__detail__data__info {
        text-align: left;
    }

    .oom__vessel__info__map__status {
        flex-direction: column;
        align-items: flex-start;
    }
}