@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&family=Noto+Serif+JP&family=Noto+Serif+SC&display=swap');

* {
    box-sizing: border-box;
}

/* tabbar 幅広対応：広がり過ぎないように */
div.tabbar {
    display: flex;
    justify-content: center;
}
ons-tab.tabbar__item {
    max-width: 300px;
}

/* Tabbar material 修正*/
button.tabbar--material__button {
    color: #999;
}

:checked+.tabbar--material__button {
    color: #2979ff;
}

/* 幅広でのtab中央表示時に不具合があり、非表示にする */
.tabbar--material__border {
    display: none !important;
}

hr {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: none;
}

ons-progress-bar {
    display: none;
    position: fixed;
    z-index: 10;
    width: 100%;
}

ons-list-title.list-title {
    padding: 20px 0px 10px 5px;
}

/* ProgressBarと同時に用いる、視覚的な変化なしで全画面を覆い二重操作を防止するModal */
#TransparentModalForProgressBar {
    background-color: transparent;
}

#SplashModal {
    background-color: #fff;
}

/* Safari対策で */
#SplashModal .modal__content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10002 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#SplashModal .LogoBox {
    width: 70%;
    height: 70%;
}

#SplashModal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.1;
    transition: all 1s ease-in-out;
}

/* TransparentModalForProgressBarより上に表示されるように */
ons-toast {
    z-index: 10002 !important;
}

.SingleColumnContainer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.WideContainer {
    max-width: 1000px;
    padding-top: 20px;
}

.SingleColumnContainer_Narrow {
    max-width: 350px;
}

#LessonIframe {
    border: 0;
    background-color: #fff;
}

.LanguageButtonBox {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 10px 0px;
}

.LanguageButtonBox ons-button {
    text-align: center;
}

.QuizBox {
    padding: 10px 0px;
}

.QuizButtonBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 5px;
}

.QuizButton {
    text-align: center;
    background-color: transparent;
    color: #0076ff;
    border: #0076ff 1px solid;
}

.QuizResult_Correct {
    display: none;
    padding: 10px;
    text-align: center;
    color: green;
}

.QuizResult_Incorrect {
    display: none;
    padding: 10px;
    text-align: center;
    color: darkred;
}

ons-button[disabled="true"] {
    color: #555;
    background-color: #999;
}

.Content_Cat_Label {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
    text-align: left;
}

.SMP_StudentList_Container {
    margin: 20px 0px 10px;
}

.SMP_Teacher_Name {
    padding: 10px 5px;
    font-size: 20px;
}

.SMP_StudentCard_Box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.StudentListCard .StudentIconBox {
    text-align: center;
    font-size: 30px;
    color: #777;
    padding: 15px 0px;
}

.StudentListCard .DataRow {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    padding: 5px 0px;
}

.ButtonBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
    margin-top: 20px;
}

.EditProgress_Container {
    padding: 10px 0px;
}

.Button_Container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    padding: 10px 0px;
    margin-top: 20px;
}

#CurriculumInfoList .center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#CurriculumInfoList .right {
    display: flex;
    align-items: flex-start;
}

#CurriculumInfoList .CurriculumName {
    margin: 10px 0px 15px 0px;
}

#CurriculumInfoList .LessonListBox {
    width: 100%;
}

.ButtonContainer {
    max-width: 500px;
    margin: 20px auto;
    display: grid;
    gap: 10px;
    text-align: center;
}

#LessonListPage .CurrentCategory {
    font-size: 20px;
}

#LessonListPage .LessonList {
    margin: 10px 0px;
}

#LessonListPage .LessonInfoRow {
    display: grid;
    grid-template-columns: 50px 50px 50px 1fr;
}

#LessonEditFormPage .LessonEditForm_Row {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    margin: 15px 0px;
}

.DeleteButton_Container {
    display: flex;
    justify-content: flex-end;
}

.list-item__right {
    gap: 10px;
}

#WebTestListPage .WebTestInfoRow {
    width: 100%;
    display: grid;
    grid-template-columns: 80px 1fr 70px;
}
#WebTestListPage .WebTestInfoRow .CorrectAnswer {
    text-align: center;
}

#WebTestEditFormPage .WebTestEditForm .Form_Label {
    width: 100px;
}
#WebTestEditFormPage .WebTestEditForm .Form_Label_OX {
    width: 100px;
    justify-content: center;
}

#Form_Text {
    width: 100%;
}

#FlashCard_TextbookForm_Box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    justify-content: center;
    align-items: center;
    justify-items: left;
}

.FlashCard_TextbookForm_Label {
    color: #777;
}

#FlashCardPage_ButtonContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 30px 0px;
}

#FlashCardPage_ButtonContainer .FlashCardPage_Button {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 25px 0px 20px 0px;
    border: #ccc solid 1px;
    border-radius: 10px;
    background-color: #f3f3f3;
}
#FlashCardPage_ButtonContainer .IconBox {
    position: relative;
}
#FlashCardPage_ButtonContainer .IconBox ons-icon {
    font-size: 30px;
    color: #555;
}

.FlashCard_DeckNameButton {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 25px 15px 20px 15px;
    border: #ccc solid 1px;
    border-radius: 10px;
    background-color: #f3f3f3;
}
.DeckNameButton_TextbookData_Box {
    display: grid;
    gap: 3px;
    padding-top: 10px;
    justify-items: left;
    align-items: center;
    grid-template-columns: 1fr max-content;
    font-size: 13px;
    color: #777;
}
.DeckNameButton_Textbook_Title{
    text-align: left;
}
.DeckNameButton_Textbook_Page_Box {
    display: grid;
    gap: 10px;
    align-items: center;
    grid-template-columns: 20px 1fr;
}

.FlashCardPage_SubjectButtonArea {
    display: grid;
    gap: 20px;
}

.FlashCardPage_SubjectButton {
    grid-template-columns: 40px 70px;
    justify-content: center;
    align-items: center;
}

.FlashCardPage_QuestButtonArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.GreenIcon {
    color: #008000;
}

.GrayIcon {
    color: #aaa;
}

.FlashCard_Quest_Remaining {
    color: #777;
    font-size: 14px;
}

#FlashCard_Achievement__BadgeContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 20px;
}

#FlashCard_Achievement__BadgeContainer .BadgeBox {
    display: grid;
    grid-template-rows: 50px 20px;
    gap: 10px;
}
#FlashCard_Achievement__BadgeContainer .BadgeIcon {
    font-size: 30px;
    color: #fff;
    text-align: center;
}
#FlashCard_Achievement__BadgeContainer .BadgeIcon ons-icon {
    background-color: #008000;
    padding: 10px;
    border-radius: 20px;
}
#FlashCard_Achievement__BadgeContainer .BadgeText {
    color: #777;
    font-size: 12px;
    text-align: center;
}

.DeckTitle {
    color: #777;
    display: block;
    margin-top: 20px;
}

.FlashCardDeckButton_Container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
    text-align: center;
    gap: 20px;
    padding: 10px 0px;
    margin-top: 20px;
}

.FlashCardDeckButton_Container ons-button {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #0080da;
}

.SingleColumnContainer div.FlashCardDeckButton_Container:nth-of-type(2n) ons-button {
    background-color: #6377cc;
}
.SingleColumnContainer div.FlashCardDeckButton_Container:nth-of-type(3n) ons-button {
    background-color: #8e69ce;
}

.FlashCard_Single_Container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px;
}

.FlashCard_Multiple_Container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    grid-auto-rows: 200px;
    justify-content: center;
    gap: 20px;
}

.FlashCard {
    /* border: 1px solid #999; */
    perspective: 1200px;
}

.FlashCard_Inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
}

.FlashCard_Flip {
    transform: rotateY(180deg);
}

.FlashCard_Front, .FlashCard_Back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
    padding: 20px;
}

.FlashCard_Front {
    background-color: #ddd;
    font-family: 'Noto Serif JP', serif;

    display: flex;
    justify-content: center;
    align-items: center;
}
.FlashCard_Back {
    background-color: #88aa88;
    font-family: 'Noto Serif JP', serif;

    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 25px;
    gap: 5px;
    align-items: center;
    align-content: center;
}

.FlashCard_Back {
    transform: rotateY(180deg);
}

.FlashCard_Container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 2fr 3fr;
    gap: 20px;

    justify-content: center;

    width: 100%;
    height: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
}

.FlashCardList_Box {
    overflow-y: auto;
}

.FlashCard_Single_Box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50% 1fr;
    gap: 10px;
}

.CardTypeButton_Selected {
    background-color: #77aa77;
}

.DeckEditForm_Row {
    display: grid;
    grid-template-columns: 5fr 2fr;
}

.DeckEditForm_Row .FormArea {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 4fr 1fr 1fr;
    padding: 10px;
    align-items: center;
}

.DeckEditForm_Row .FormArea .Label {
    text-align: center;
    color: #777;
}

.DeckEditForm_Row .ButtonArea {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    padding: 10px;
    text-align: center;
    align-items: center;
}

.DeckEditForm_Row .ButtonArea .DeleteButton {
    background-color: transparent;
}

.EditForm_Hint {
    margin-top: 50px;
    color: #777;
}


.TeacherEditForm_Row {
    display: grid;
    grid-template-columns: 3fr 2fr;
}

.TeacherEditForm_Row .FormArea {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    align-items: center;
}

.TeacherEditForm_Row .FormArea .Label {
    text-align: center;
    color: #777;
}

.TeacherEditForm_Row .ButtonArea {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    padding: 10px;
    text-align: center;
    align-items: center;
}

.TeacherEditForm_Row .ButtonArea .DeleteButton {
    background-color: transparent;
}


.CardForm_Container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.CardForm_Container .Label {
    color: #777;
}

.CardForm_Container .DeckSelectForm,
.CardForm_Container .CSVUploadForm,
.CardForm_Container .SubmitButton {
    margin: 10px;
    font-size: 16px;
}

#LessonCategoryListPage .Label {
    color: #777;
}

.LessonManagement_CSVButton_Box {
    display: grid;
    gap: 20px;
}

#TeacherStudentLinkPage_StudentList .StudentInfo, 
#TutorStudentLinkPage_StudentList .StudentInfo { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    width: 100%;
}

#Login_Container {
    display: grid;
    gap: 30px;
    min-width: 300px;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0px;
}

#Login_Container .Title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}

#Login_Container > div {
    padding: 30px 20px 20px 20px;
    background-color: #fff;
    border-radius: 10px;
}

#LoginFormBox ons-input {
    width: 100%;
    margin: 10px 0px;
}

#LoginFormBox ons-button {
    margin-top: 20px;
}

#SocialLoginButtonBox {
    display: grid;
    gap: 15px;
    min-width: 300px;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
}

.LoginButton {
    width: 100%;
    height: 3rem;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.LoginButton_Img {
    width: fit-content;
    height: 100%;
}

.LoginButton_Img img {
    height: 100%;
    object-fit: contain;
}

.LoginButton_Text {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.GoogleLogin {
    font-family: 'Roboto', sans-serif;
    background-color: #4285f4;
    border-color: #4285f4;
    color: #fff;
}

.LINELogin {
    font-family: 'Helvetica', sans-serif;
    background-color: #00c300;
    border-color: #00c300;
    color: #fff;
}

.LINELogin .LoginButton_Img {
    border-right: 1px solid #00b300;
}

#MenuPage .page__content {
    display: grid;
    grid-auto-rows: min-content;
    gap: 10px;
}

#MenuPage ons-list-title {
    padding-left: 10px;
}

#MenuPage div.left {
    width: 40px;
    padding: 0;
}

#MenuPage span.notification {
    margin-left: 10px;
}

#MenuPage div.left ons-icon {
    width: 34px;
    text-align: center;
}

.ManagementButtonContainer {
    display: none;
}

#Menu_WebShareButton {
    display: none;
}

#Home_Notice {
    display: none;
    background-color: #eee;
    margin: 40px 0px 20px 0px;
}

#NoticeCarousel {
    border-radius: 0px 0px 10px 10px;
    border: #ccc solid 1px;
    border-top: none;
}

#Home_Notice .Header_Center {
    text-align: center;
}

#Home_Notice__TitleBar {
    display: grid;
    grid-template-columns: 120px 1fr 120px;
    justify-items: center;
    padding: 15px 0px 10px 0px;
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
    border: #ccc solid 1px;
    border-bottom: none;
} 

#Home_Notice__TitleBar > div {
    display: flex;
    align-items: center;
}

#Home_Notice_PrevButton {
    width: 100%;
    justify-content: flex-start;
    padding-left: 15px;
}
#Home_Notice_NextButton {
    width: 100%;
    justify-content: flex-end;
    padding-right: 15px;
}

#Home_Notice_PrevButton .Text, #Home_Notice_NextButton .Text {
    padding: 0px 10px;
    color: #0076ff;
    font-size: 15px;
}

#Home_Notice__TitleBar ons-icon {
    color: #0076ff;
}

#Home_Notice ons-carousel-item {
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
}

#Home_Notice__ButtonBar {
    padding: 30px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Home_Notice__ButtonBar > ons-button {
    padding-left: 30px;
    padding-right: 30px;
}


#HomePage_ButtonContainer {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    margin: 30px 0px;
}

#HomePage_ButtonContainer .IconBox {
    position: relative;
}
#HomePage_ButtonContainer .IconBox .notification {
    position: absolute;
    top: -5px;
    left: 18px;
}
#Home_MyPage__Badge, #Menu_MyPage__Badge {
    display: none;
}

#HomePage_ButtonContainer .IconBox ons-icon {
    font-size: 30px;
    color: #555;
}

#HomePage_ButtonContainer .HomePage_Button {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 25px 0px 20px 0px;
    border: #ccc solid 1px;
    border-radius: 10px;
    background-color: #f3f3f3;
}

#HomePage_Button_Classroom.HomePage_Button, #Menu_Classroom {
    display: none;
}

#HomePage_Button_MessagePage.HomePage_Button, #Menu_Message {
    display: none;
}

#StudentAccountManagementPage .StudentEditForm_Row {
    display: grid;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    padding: 20px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.CancelButton_Container {
    display: flex;
    justify-content: flex-start;
    padding: 20px;
}

.DeleteButton {
    color: #aa5555;
    text-decoration: underline;
}

#CancelSocialMemberButton {
    display: none;
}

#MyInfo_Card {
    margin-bottom: 30px;
}

#MyInfo_Card .subtitle {
    color: #555;
    font-size: 14px;
}

#MyInfoForm {
    margin: 20px 0px;
}

#MyInfoForm ons-list-item div.Label {
    color: #555;
}

#MyInfoForm ons-list-item div.center {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding-right: 20px;
    min-height: 60px;
}

#MyInfo_Card ons-input[type="text"] {
    width: 100%;
}

#MyInfo_ButtonContainer {
    padding: 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FlashCard_CheckMark__Hidden {
    color: transparent;
}
.FlashCard_CheckMark__Show {
    color: #008000;
}

#Menu_Notice, #HomePage_Button_NoticePage.HomePage_Button {
    display: none;
}

.MessageListContainer {
    padding: 0px;
    padding-bottom: 80px;
}

#MessagePage .MessageSendArea {
    padding: 5px 10px;
    position: fixed;
    bottom: 0px;
    left: auto;
    width: 100%;
    max-width: 800px;
    border-top: #ccc 1px solid;
    background-color: #f3f3f3;
}

.MessageSendArea ons-input {
    display: inline-block;
    position: relative;
    width: calc(100% - 60px);
}

.MessageSendArea input {
    vertical-align: middle;
    position: relative;
    width: 98%;
}

#MessageList ons-list-item .center {
    display: grid;
    gap: 5px;
}

#MessageList ons-list-item .center .Message {
    border-radius: 5px;
    padding: 10px;
    max-width: 85%;
}

#MessageList ons-list-item .center .Meta {
    font-size: 10px;
    color: #999;
}

#MessageList ons-list-item div.OtherMessage {
    justify-items: start;
}

#MessageList ons-list-item div.MyMessage {
    justify-items: end;
}

#MessageList ons-list-item div.OtherMessage .Message {
    background-color: #ccc;
}

#MessageList ons-list-item div.MyMessage .Message {
    background-color: #88cccc;
}

#Message_SendButton[disabled="true"] {
    background-color: transparent;
}

#SSEWaitMessage {
    display: none;
}

div.DialogContent {
    width: 300px;
    display: grid;
    gap: 20px;
    padding: 30px;
    text-align: center;
}

#FlashCard_Quiz__Container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    display: grid;
    gap: 15px;
    grid-template: min-content 1fr min-content / 1fr;
    padding: 10px 15px 10px 15px;
}

#FlashCard_Quiz__Container .QuizBody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px 15px 10px 15px;
}

#FlashCardQuiz_QuizBody {
    display: flex;
    justify-content: center;
    align-items: center;
}

#FlashCard_Quiz__Container .QuizChoices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px 15px 10px 15px;
}

#FlashCard_Quiz__Container .FlashCardQuiz_QuizChoice {
    text-align: center;
    padding: 20px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#FlashCard_Quiz__Container .QuizMeta {
    color: #777;
}

#FlashCard_Quiz__Container .QuizMeta .QuizMeta_Row {
    display: flex;
    align-items: center;
}

#FlashCard_Quiz__Container .QuizMeta .QuizMeta_Row div {
    margin: 3px 5px;
}

#FlashCardQuiz_CardDeckName {
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #aaa;
}

.FlashCardQuizChoice_IncorrectButtonColor {
    background-color: #aa555555;
}

.FlashCardQuizChoice_CorrectButtonColor {
    background-color: #00800055;
}

#FlashCard_Quiz__ResultContainer {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px;
    background-color: #efeff4;
}

#FlashCard_Quiz__ResultContainer .FlashCardQuizResult_Title {
    padding-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#FlashCard_Quiz__ResultContainer .FlashCardQuizResult_Content {
    display: grid;
    gap: 10px;
}

.FlashCard_Quiz__ResultRow {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 3fr 3fr;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px #ddd solid;
}

.FlashCard_Quiz__ResultRow > div {
    padding: 0px 5px;
}

.FlashCard_Quiz__Result_isCorrect {
    visibility: hidden;
    color: #008000;
    text-align: center;
}

.TrialCurriculum_Container {
    display: grid;
    gap: 60px;
    /* padding-bottom: 30px; */

    --custom-yellow: #ffd84c;
}

.TrialCurriculum_Container img {
    width: 100%;
    object-fit: contain;
}

.TrialCurriculum_Box_Title {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

.TrialCurriculum_Header_Box {
    position: relative;
    height: 300px;
}

.TrialCurriculum_Container img.TrialCurriculum_Header_ImgElem {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.TrialCurriculum_Header_BlurBox {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background-color: rgb(255 255 255 / 60%);

    display: grid;
    gap: 20px;
    align-content: end;

    padding: 20px;
}

.TrialCurriculum_Header_Title {
    font-size: 40px;
    font-weight: bold;
}

.TrialCurriculum_Header_NameInnerBox {
    justify-self: end;
}

.TrialCurriculum_Header_Name_SubTitle {
    font-size: 13px;
}

.TrialCurriculum_Header_Name_Title {
    font-size: 25px;
    font-weight: bold;
}

@media screen and (max-width: 850px) {
    .TrialCurriculum_Header_BlurBox {
        left: 0;
        width: 100%;
        height: 170px;

        gap: 10px;
    }

    .TrialCurriculum_Header_Title {
        font-size: 25px;
        font-weight: bold;
    }
    
    .TrialCurriculum_Header_Name_SubTitle {
        font-size: 12px;
    }
    
    .TrialCurriculum_Header_Name_Title {
        font-size: 20px;
        font-weight: bold;
    }
}

.TrialCurriculum_Needs_Box {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;

    padding: 0 10px;
}

.TrialCurriculum_Needs_Img {
    width: 100%;
    max-width: 350px;
}

.TrialCurriculum_Needs_Content {
    width: fit-content;
    display: grid;
    gap: 10px;
}

.TrialCurriculum_Needs_Title {
    background-color: var(--custom-yellow);
    border-radius: 5px;
    justify-self: left;
    align-self: baseline;
    padding: 10px 15px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: bold;
}

.TrialCurriculum_Needs_Text {
    
}

.TrialCurriculum_Solution_Box {
    display: grid;
    gap: 30px;
    padding: 0 10px;
}

.TrialCurriculum_Solution_Grid {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    
    display: grid;
    column-gap: 20px;
    row-gap: 2px;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 20px 40px 1fr 20px;
}

.TrialCurriculum_Solution_Img_1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.TrialCurriculum_Solution_Label_1 {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}

.TrialCurriculum_Solution_PlusMark {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    color: var(--custom-yellow);
    font-size: 30px;
    font-weight: bold;
}

.TrialCurriculum_Solution_Img_2 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.TrialCurriculum_Solution_Label_2 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

.TrialCurriculum_Solution_Img_3 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.TrialCurriculum_Solution_Label_3 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

.TrialCurriculum_Solution_Img_4 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

.TrialCurriculum_Solution_Label_4 {
    grid-column: 3 / 4;
    grid-row: 5 / 6;
}

.TrialCurriculum_TimeSchedule_Box {
    background-color: #fff;
    padding: 30px 10px;

    display: grid;
    gap: 20px;
}

.TrialCurriculum_Timeschedule_Flex {
    display: flex;
    width: 100%;
    max-width: 900px;
    justify-content: center;
    margin: 0 auto;
}

.TrialCurriculum_Timeschedule_Grid {
    display: grid;
    width: 100%;
    min-width: 250px;
    max-width: 500px;
    grid-template-columns: 45px 1fr;
    grid-template-rows: 45px 1fr;
}

.TrialCurriculum_Timeschedule_Step {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    background-color: var(--custom-yellow);
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 50px;
}

.TrialCurriculum_Timeschedule_Step_Label {
    display: block;
    line-height: 1;
    font-size: 11px;
}

.TrialCurriculum_Timeschedule_Step_Number {
    display: block;
    line-height: 1;
    font-size: 18px;
}

.TrialCurriculum_Timeschedule_Bar {
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    justify-self: center;
    align-self: center;
    background-color: var(--custom-yellow);
    
    width: 100%;
    height: 3px;
}

.TrialCurriculum_Timeschedule_TextBox {
    grid-column: 1 / 3;
    grid-row: 2 / 3;

    display: grid;
    gap: 10px;

    position: relative;

    margin: 20px 20px 20px 10px;
    padding: 10px;
    background-color: #ccc;
}

.TrialCurriculum_Timeschedule_TextBox:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 10px;
    border: 10px solid transparent;
    border-bottom: 10px solid #ccc;
}

.TrialCurriculum_Timeschedule_TextBox_Title {
    text-align: center;
    font-weight: bold;
}

.TrialCurriculum_Timeschedule_TextBox_Text {
    text-align: justify;
    font-size: 15px;
}

@media screen and (max-width: 800px) {
    .TrialCurriculum_Timeschedule_Flex {
        flex-direction: column;
        align-items: center;
    }

    .TrialCurriculum_Timeschedule_Bar {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    
        width: 3px;
        height: 100%;
    }

    .TrialCurriculum_Timeschedule_TextBox {
        grid-column: 2 / 3;
        grid-row: 1 / 3;

        margin: 10px 20px 20px 20px;
    }

    .TrialCurriculum_Timeschedule_TextBox:before {
        top: 10px;
        left: -20px;
        border: 10px solid transparent;
        border-right: 10px solid #ccc;
    }
}

.TrialCurriculum_TrialLesson_Box {
    display: grid;
    gap: 30px;
    padding: 0 10px;
}

.TrialCurriculum_TrialLesson_ButtonBox {
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.TrialCurriculum_TrialLesson_Button {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.TrialCurriculum_Button_CTA {
    border: 2px solid var(--custom-yellow);
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    justify-self: center;
    min-width: 250px;
}

#StudentAccountAuthorizationPage_StudentList .center {
    display: flex;
    gap: 10px;
}

.CAME_Text_Title {
    font-size: 20px;
    font-weight: bold;
}

.ProgramCurriculumContainer, .ProgramSyllabusContainer {
    display: grid;
    gap: 20px;
}

.Program_CardListTitle {
    font-size: 2em;
    font-weight: bold;
}

.Program_CardListContainer {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

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

    background-color: #fefefe;
    border-radius: 5px;
    padding: 15px 15px 10px 15px;
}

.Program_Card_Name {
    font-size: 1.3em;
    font-weight: bold;
}

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

.Program_Card_DateRowBox {
    font-size: 0.8em;
    color: #777;
    display: flex;
    gap: 7px;
    align-items: center;
}

.Program_Card_Date_Label {
    color: #fff;
    border-radius: 5px;
    padding: 2px 7px;
}

.Program_CurriculumCard_StartDate_Label {
    background-color: #777;
}

.CurrentCurriculumButton {
    background-color: darkorange;
}

.Program_SyllabusCard_LessonName {
    font-size: 0.8em;
    color: #555;
}

.ProgramLesson_Container {
    display: grid;
    gap: 15px;
}

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

.ProgramLesson_Header_Breadcrumb { 
    font-size: 0.8em;
    color: #555;
}

.ProgramLesson_Header_Seperator {
    color: #777;
}

.ProgramLesson_Header_LessonName {
    color: #333;
}

.StudentAccountAuthorizationForm_Container {
    display: grid;
    gap: 15px;
}

.UpdateAuthorizationButton {
    justify-self: center;
}