:root {
    --ink-lightgrey :#ECEFF1;
    --ink-grey:#6A6A6A;
    --ink-darkgrey: #434343;

    --accent-green: #84C200;
    --accent-darkgreen: #439A2D;

    --primary-lightpurple: #E1D9FF;
    --primary-purple: #9C88EB;
    --primary-darkpurple: #4F26A7;


    --font-size-xxs: 0.6rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-sm-2: 0.9rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.4rem;
    --font-size-xxl: 1.5rem;
}

.page-container {
    position: relative;
    min-height: 100vh;
    background:url(../images/img_bg.jpg), #4589C8;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
}

.page-container[data-mode="night"] {
    position: relative;
    min-height: 100vh;
    background:url(../images/img_bg_night.jpg), #364C95;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
} 

.content-wrap {
    padding-bottom: calc(60px + 3rem); 
}
.img-cloud1 {
    max-height: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
    animation: float1 4s ease-in-out infinite;
}
.img-cloud2 {
    max-height: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
    animation: float2 6s ease-in-out infinite;
}
@keyframes float1 {
	0%   { transform: translatey(0px); }
	50%  { transform: translatey(-20px); }
	100% { transform: translatey(0px); }
}
@keyframes float2 {
	0%   { transform: translatey(0px); }
    20%  { transform: translatey(-20px); }
	40%  { transform: translatey(-10px); }
    60%  { transform: translatey(-20px); }
    80%  { transform: translatey(-5px); }
	100% { transform: translatey(0px); }
}

/*
.main-container {
    padding-top: 80px;
}
*/

.pal-banner {
    background-color: #fff;
    border-radius: 25px;
    border: 8pt solid #fff;
    min-height: 140px;
}
.carousel-inner {
    border-radius: 16px;
}
.pal-recommend .lists {
    background-color: #DBF7D5;
    border-radius: 25px;
}
.pal-prep-res .lists {
    background-color: #F6F6D2;
    border-radius: 25px;
}
.pal-teach-res .lists {
    background-color: #FCE5D8;
    border-radius: 25px;
}
.pal-evalu-res .lists {
    background-color: #CFFBFB;
    border-radius: 25px;
}
.pal-selfstudy-res .lists {
    background-color: #FCECF7;
    border-radius: 25px;
}
.pal-report-res .lists {
    background-color: #DDFFEB;
    border-radius: 25px;
}
.pal-addon-res .lists {
    background-color: #F0E5F9;
    border-radius: 25px;
}
.pal-elearning-res .lists {
    background-color: #F0EFFF;
    border-radius: 25px;
}
.pal-grade-res .title,
.pal-prep-res .title,
.pal-teach-res .title,
.pal-evalu-res .title,
.pal-selfstudy-res .title, 
.pal-report-res .title, 
.pal-addon-res .title, 
.pal-elearning-res .title {
    max-height: 50px;
}
.pal-grade-res .sub-title,
.pal-prep-res .sub-title,
.pal-teach-res .sub-title, 
.pal-evalu-res .sub-title,
.pal-selfstudy-res .sub-title
.pal-report-res .sub-title,
.pal-addon-res .sub-title, 
.pal-elearning-res .sub-title {
    text-align: center;
    color: #F0E5F9;
    font-weight: 700;
    font-size: 1.1rem;
}

.pal-news {
    background-color: #FFEBCD;
    border-radius: 25px;
}
.pal-tools {
    background-color: #EBEBFE;
    border-radius: 25px;
}


.item-box a {
    text-decoration: none;
}
.item-box .item-box-img {
    padding: 8px;
    background-color: #FBFBFB;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    width: 100%;
    max-width: 120px;
    margin: auto;
}
.item-box .item-box-text {
    padding-top: 6px;
    text-align: center;
    font-size: var(--font-size-sm-2);
    font-weight: 700;
    color: #000;
}
.item-box:hover .item-box-img  {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.45);
}
.item-box:hover .item-box-img img { 
    transform: scale(1.1);
}

.icon-recommend {
    max-height: 60px;
}
.text-recommend {
    font-weight: 800;
    font-size:var(--font-size-lg);
}


.icon-news {
    max-height: 30px;
    margin-bottom: 4px;
    xmargin-right: 12px;

}
.text-news {
    font-weight: 800;
    font-size:var(--font-size-lg);
}

@media (min-width: 768px) and (max-width: 1199.98px) { 
    .icon-news {
        max-height: 24px;
        margin-bottom: 4px;
        xmargin-right: 6px;
    }
    .text-news {
        font-weight: 800;
        font-size: 1rem;
        white-space: nowrap;
    }
}

.icon-tools {
    max-height: 30px;
    margin-bottom: 4px;
    xmargin-right: 12px;
}
.text-tools {
    font-weight: 800;
    font-size:var(--font-size-lg);
}


.pal-grade a {
    text-decoration: none;
}
.pal-grade .avatar {
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
    max-width: 120px;
}
.pal-grade a:hover .avatar { 
    transform: scale(1.1);
}  
.pal-grade a:hover .avatar .overlay {
    opacity: 1;
}
.pal-grade .avatar-text { 
    color: #fff;
    text-align: center;
    font-size: var(--font-size-sm-2);
    font-weight: 700;
    padding-top: 4px;
}
.pal-grade  {
    font-weight: 800;
    font-size:var(--font-size-lg);
    text-align: center;
}
.pal-grade .text-grade {
    color: #fff;
}





.pal-common .lists {
    background-color: #D8ECFF;
    border-radius: 25px;
    border: 3pt solid #fff;
}
.pal-common .title-common {
    background-color: #6F92DF;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    align-content: center;
}

@media screen and (min-width: 992px) {
    .pal-common  .title-common {
        border-top-left-radius: 20px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 0px;
    }
}

.pal-common .common-list-wrapper {
    position: relative;
}
.pal-common .button {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0pt solid transparent;

}
.pal-common .button--previous {
    left: 0.5rem;
}
.pal-common .button--next {
    right: 0.5rem;
}

.pal-common .button--next .img-next, 
.pal-common .button--previous .img-previous {
    height: 70%;
}

.pal-common .common-list-wrapper .list {
    display: flex;
    gap: 8px;
    padding: 16px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 0px;
  
    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}
  
.pal-common .common-list-wrapper .item {
    flex-shrink: 0;
    scroll-snap-align: center;
}

.pal-common .common-list-wrapper .list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pal-common .common-list-wrapper .list::-webkit-scrollbar {
    display: none;
}


@media (max-width: 576px) {  
    .pal-common .button--previous {
        display: none;
    }
    .pal-common .button--next {
        display: none;
    }
    .pal-common .common-list-wrapper .list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 4px;
        margin-left: 0px;
        margin-right: 0px;
      
        list-style: none;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .pal-common .common-list-wrapper .item-box .item-box-img {
        padding: 8px;
        background-color: #FBFBFB;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
        border-radius: 25px;
        width: 100%;
        max-width: 87px;
        margin: auto;
    }
}
@media (max-width: 991.98px) {
    .pal-common .button--previous {
        display: none;
    }
    .pal-common .button--next {
        display: none;
    }
    .pal-common .common-list-wrapper .list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px;
        margin-left: 0px;
        margin-right: 0px;
        list-style: none;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .pal-common .common-list-wrapper .item-box .item-box-img {
        padding: 8px;
        background-color: #FBFBFB;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
        border-radius: 25px;
        width: 100%;
        max-width: 89px;
        margin: auto;
    }
}
.pal-common .icon-common {
    max-height: 80px;
    margin-bottom: 6px;
}
.pal-common .text-common {
    font-weight: 800;
    color:#fff;
    font-size:var(--font-size-lg);
}

.pal-snake {
    background-image: url(../images/img_line.png);
    background-repeat: round;
    height: 8px;
}