html {
    /*   '* 2.3' should be kept same with the '* 2.3' at max-width of page-body-block  */
    /*  12.8px and 7.2px mean one percent of 1280*720 which is the minimum size of screen  */
    font-size: calc(max(1vh, 7.2px) * (5 / 3) * 0.5 + min(max(1vw, 12.8px), max(1vh, 7.2px) * 2.3) * (15 / 16) * 0.5);
    font-family: "Lato", sans-serif;
    overflow-x: auto;
}

body {
    height: 100vh;
    margin: 0;
}

.body_wrapper {
    background: #000000;
}

.page-body-block {
    position: relative;
    margin: 0 auto;
    flex: 1;
    display: grid;
    grid-template-columns: 30% auto;
    min-height: 720px;
    height: 100vh;
    width: auto;
    min-width: calc(max(100vh, 720px) * 1.5);
    max-width: calc(max(100vh, 720px) * 2.3);
}

.page-body-block .left-panel {
    display: grid;
    grid-template-rows: min-content auto auto min-content;
    background-color: #FFFFFF;
}

.around-grid-padding {
    padding: 1em;
}

.left-panel .topbar {
    height: fit-content;
    display: flex;
    align-self: center;
    justify-content: space-between;
}

.left-panel .topbar .forticloud-brand-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.left-panel .topbar .forticloud-brand-container img.forticloud-logo {
    width: 10rem;
}

.left-panel .topbar .monitor-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.large-logo-container {
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.large-logo-container .large-logo {
    height: 9rem;
    padding: 1.5rem;
}

.large-logo-container .brand-name {
    padding-bottom: 1.5rem;
}

.left-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.left-panel-footer a {
    display: flex;
}

.left-panel-footer img {
    width: 6rem;
}

.left-panel-footer .version-text {
    color: #2B2E3499;
}

.legal-footer {
    height: 3rem;
    width: 100%;
    align-self: end;
    background-color: #F2F4F6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    color: #000000;
}
.legal-footer .legal-info {
    display: flex;
    flex-direction: row;
}
.legal-footer .legal-info a {
    padding: 0 0.5rem;
    text-decoration: none;
    color: #000000;
}
.legal-footer .legal-info a.vertical-border {
    border-right: 1px solid #000000;
}
.legal-footer .legal-info a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.left-panel-content {
    display: grid;
    grid-template-rows: max-content auto;
}

.left-panel-button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}
.left-panel-button-group button {
    width: 100%;
    border-radius: 5px;
    padding: 0;
}
.left-panel-button-group button a {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    padding: 0.8rem 0;
    text-decoration: none;
}
.left-panel-button-group button a:hover {
    text-decoration: none;
}

.left-panel-button-group button.login-button {
    border: none;
    background-color: #464646;
}
.left-panel-button-group button.login-button a {
    color: #FFFFFF;
}
.left-panel-button-group button.login-button:hover {
    background-color: #000000;
    cursor: pointer;
}

.left-panel-button-group button.register-button {
    border: 1px solid #464646;
    background-color: #FFFFFF;
}
.left-panel-button-group button.register-button a {
    color: #464646;
    background: none;
}
.left-panel-button-group button.register-button:hover {
    color: #000000;
    border: 1px solid  #000000;
    box-shadow: 0 1px 3px 0 rgba(43, 46, 52, 0.3);
    cursor: pointer;
}

.left-panel-text-group {
    display: flex;
    flex-direction: column;
}
.left-panel-text-group a {
    color: #307FE2;
    text-decoration: none;
}
.left-panel-text-group a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.fixed-swipe-pager {
    position: absolute;
    left: 30%;
    top: 40%;
    z-index: 100;
}

.fixed-swipe-pager .swipe-pager-img {
    width: 1.5rem;
}

.fixed-swipe-pager .pager-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    row-gap: 1.5rem;
}

.fixed-swipe-pager .pager-group div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-swipe-pager .pager-group div div {
    background-color: #e0e0e0;
    border-radius: 50%;
}
.fixed-swipe-pager .pager-group div div:hover {
    cursor: pointer;
    background-color: #b9b9b9;
}

.fixed-swipe-pager .pager-group div.selected div {
    background-color: #307FE2;
}

.slide-swiper-wrapper {
    overflow: hidden;
    transition-property: transform;
    touch-action: pan-x;
}

.intro-content-wrapper {
    background: url("../assets/land-bg1.png") center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.intro-content-grid {
    padding-top: 16rem;
    padding-left: 6rem;
    width: 37rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.intro-option-list {
    height: fit-content;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 30rem;
}

.intro-option-list .item {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.service-content-wrapper {
    background: url("../assets/land-bg2.png") center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.service-content {
    margin: 5rem 6rem;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.two-by-two-grid-container {
    flex: 1;
    display: grid;
    grid-template-rows: 30% auto;
    grid-template-columns: 40% auto;
    color: #ffffff;
}

.two-by-two-grid-container-spacing {
    gap: 6rem 8rem;
    padding-top: 1rem;
    padding-left: 0;
}

.service-option-list {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.service-content .item {
    height: 2.5rem;
    display: flex;
    align-items: start;
    column-gap: 1rem;
    position: relative;
}

.service-content .sub-title-text {
    line-height: 2rem;
    border-bottom: 1px solid rgba(28, 192, 202, 0.4);
}

.service-content-block {
    height: fit-content;
    width: 23rem;
}

.service-subtitle {
    color: #1CC0CA;
}

.release-content-wrapper {
    background: url("../assets/land-bg3.png") center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.release-content-grid {
    color: #FFFFFF;
    margin-left: 6.8rem;
    margin-top: 9.4rem;
    display: flex;
    flex-direction: column;
    row-gap: 8rem;
}

.release-content {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.release-content-title {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.downloads-content {
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
}

.downloads-content-title {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.downloads-item {
    height: 2.7rem;
}

.downloads-item img{
    cursor: pointer;
    height: 100%;
}

button.icon-button-with-content {
    background-color: #FFFFFF;
    border: none;
    width: 27rem;
    min-width: fit-content;
}
button.icon-button-with-content a {
    text-decoration: none;
    color: #000000;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
    font-family: "Lato", sans-serif;
}
button.icon-button-with-content:hover {
    cursor: pointer;
    border: none;
}
button.icon-button-with-content span {
    display: flex;
    align-items: center;
}

.content-text-line-height {
    line-height: 1.3rem;
}

.content-text {
    font-size: 1.1rem;
}

.content-text2-line-height {
    line-height: 1.3rem;
}

.content-text2 {
    font-size: 1rem;
}

.title-text {
    font-size: 2.6rem;
}

.sub-title-text-line-height {
    line-height: 1.3rem;
}

.sub-title-text {
    font-size: 1.4rem;
}

.footer-text {
    font-size: 10px;
}

.bold-font {
    font-weight: 600;
}

img.icon-img {
    width: 1.5rem;
}

.large-row-gap {
    row-gap: 2.3rem;
}

.md-row-gap {
    row-gap: 2.3rem;
}

.md-col-gap {
    column-gap: 1rem;
}

.text-padding {
    padding: 1.2rem;
}

.swiper-circle {
    height: 0.8rem;
    width: 0.8rem;
}

.swiper-circle div {
    height: 0.7rem;
    width: 0.7rem;
}

.selected.swiper-circle div, .swiper-circle div:hover {
    height: 0.8rem;
    width: 0.8rem;
}

.login-button-text {
    font-size: 0.9rem;
}