/* Minification failed. Returning unminified contents.
(446,31): run-time error CSS1046: Expect comma, found '153'
(446,39): run-time error CSS1046: Expect comma, found '/'
 */

/* ---------------------- FONT DECLARATIONS _start ---------------------- */
@font-face {
    font-family: 'CFAstyStd-Medium';
    src: url('css/fonts/CFAstyStd-Medium.eot?#iefix') format('embedded-opentype'), url('css/fonts/CFAstyStd-Medium.otf') format('opentype'), url('css/fonts/CFAstyStd-Medium.woff') format('woff'), url('css/fonts/CFAstyStd-Medium.ttf') format('truetype'), url('css/fonts/CFAstyStd-Book.svg#CFAstyStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'CFAstyStd-Bold';
    src: url('css/fonts/CFAstyStd-Bold.eot?#iefix') format('embedded-opentype'), url('css/fonts/CFAstyStd-Bold.otf') format('opentype'), url('css/fonts/CFAstyStd-Bold.woff') format('woff'), url('css/fonts/CFAstyStd-Bold.ttf') format('truetype'), url('css/fonts/CFAstyStd-Book.svg#CFAstyStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'StagSans-Medium';
    /*src: url('css/fonts/StagSans-Medium.otf') format('opentype');*/
    src: url('css/fonts/StagSans-Medium.eot?#iefix') format('embedded-opentype'), url('css/fonts/StagSans-Medium.otf') format('opentype'), url('css/fonts/StagSans-Medium.woff') format('woff'), url('css/fonts/StagSans-Medium.ttf') format('truetype'), url('css/fonts/StagSans-Bold.svg#StagSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}


@font-face {
    font-family: 'StagSans-Bold';
    src: url('css/fonts/StagSans-Bold.eot?#iefix') format('embedded-opentype'), url('css/fonts/StagSans-Bold.otf') format('opentype'), url('css/fonts/StagSans-Bold.woff') format('woff'), url('css/fonts/StagSans-Bold.ttf') format('truetype'), url('css/fonts/StagSans-Bold.svg#StagSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StagSans-Semibold';
    src: url('css/fonts/StagSans-Semibold.eot?#iefix') format('embedded-opentype'), url('css/fonts/StagSans-Semibold.otf') format('opentype'), url('css/fonts/StagSans-Semibold.woff') format('woff'), url('css/fonts/StagSans-Semibold.ttf') format('truetype'), url('css/fonts/StagSans-Semibold.svg#StagSans-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'CFAstyStd';
    src: url('css/fonts/CFAstyStd-Book.eot?#iefix') format('embedded-opentype'), url('css/fonts/CFAstyStd-Book.otf') format('opentype'), url('css/fonts/CFAstyStd-Book.woff') format('woff'), url('css/fonts/CFAstyStd-Book.ttf') format('truetype'), url('css/fonts/CFAstyStd-Book.svg#CFAstyStd-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StagSans';
    src: url('css/fonts/StagSans-Book.eot?#iefix') format('embedded-opentype'), url('css/fonts/StagSans-Book.otf') format('opentype'), url('css/fonts/StagSans-Book.woff') format('woff'), url('css/fonts/StagSans-Book.ttf') format('truetype'), url('css/fonts/StagSans-Book.svg#StagSans-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    line-height: normal;
}


html, body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
    flex: 1 1 auto;
}

a {
    text-decoration: none !important;
}

header a,
footer a {
    display: inline-block;
}

img {
    width: 100%;
}

#Footer {
    min-height: 60px;
    background-color: #FF3333;
    color: #fff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: auto;
    padding: 10px 0;
    bottom: 0;
    flex-direction: column;
    font-family: "Arial";
}

.footerContent {
    margin: auto;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
}


.Header {
    position: relative;
    width: 100%;
    background: transparent linear-gradient(360deg, #FF3333 0%, #8D1C1C 100%) 0% 0% no-repeat padding-box;
    z-index:10;
}

.bookPageContent {
    display: flex;
    flex-direction: column;
    margin:auto;
}

.internalHeader, .prevFooterContent {
    max-width: 250px;
    width: 100%;
    z-index: 2;
}

.mmIcon {
    width: 180px;
}

.bubbles {
    background: url('css/images/left-side-bubbles.svg'),url('css/images/right-side-bubbles.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
    background-size: contain;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    padding: 28px 0;
}




.backBtn {
    background-color: rgba(0,0,0,0.4);
    width: 40px;
    height: 47px;
    border-radius: 0px 0px 30px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:transform 0.2s ease-in;
}

    .backBtn:hover {
        transform: translateY(0);
    }


/*---------------------GLOBAL ENDS HERE-------------------*/

.materialSelectionPageContent {
    max-width: 250px;
    margin: 0 auto;
}


.materialSelectionHeader h1 {
    font-family: 'CFAstyStd-bold';
}

.materialSelectionHeader p {
    font-family: 'CFAstyStd-medium';
}


.selectionButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 90px;
}


.prevFooter {
    background-color: #C52B2B;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.prevFooterContent {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    margin: auto;
    padding-top: 15px;
}


.prevFooterText {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .prevFooterText span {
        display: block;
        font-family: "Arial";
        color: white;
        font-weight: Bold;
    }

.mmIconFooter {
    border-right: none;
    padding-right: 0;
    width: 180px;
}


.AreaPage {
    position: relative;
}

.AreaContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 250px;
    width: fit-content;
    margin: auto;
}

.bookList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


.selectedAreaHeader {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: "StagSans-Semibold";
    margin-bottom: 28px;
}

    .selectedAreaHeader h2 {
        flex: 1;
    }

.bookCoverImg {
    height: 162px;
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0px 3px 20px #0000004D;
}

    .bookCoverImg img {
        height: 100%;
        border-radius: 15px;
    }


.bookCard {
    width: 250px;
    min-height: 242px;
    background: #EEEEEE 0% 0% no-repeat padding-box;
    border-radius: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
    padding: 25px;
    box-sizing: border-box
}

.bookBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    height: 100%;
    border-radius: 15px;
}

.bookGrade {
    color: black;
    font-family: 'StagSans-Bold';
}

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

.bookImageOuterContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EEEEEE;
    border-radius: 30px;
    width: 250px;
    height: 298px;
}


.bookImage img {
    height: 100%;
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0px 3px 20px #0000004D;
}


.bookCard:hover .bookCoverImg {
    transform: scale(1.05);
}

.bookCard:hover {
    background: #DEDEDE;
}

.LvlBookTitle {
    font-family: 'StagSans-Medium';
    font-weight:normal;
    color: black;
}

/*--------------BookPage-------------*/

.bookPage {
    position: relative;
    margin: 0 auto;
    max-width: 250px;
}

.bookContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-bottom: 50px;
}

.bookName {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
    font-family: "CFAstyStd-bold";
}

.isLockedContent {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.actionButton {
    max-width: 423px;
    width: 100%;
    background: transparent linear-gradient(180deg, #FF3333 0%, #BB2727 100%);
    border-radius: 8px;
    color: #fff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "StagSans-Medium";
    text-transform: capitalize;
    cursor: pointer;
}

    .actionButton:hover {
        background: #FF3333;
    }

.actionButtonText {
    flex: 1;
    padding: 13px;
    border-right: 2px solid #fff;
    line-height: normal;
}


.actionIconContainer {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.actionIcon {
    display: flex;
    max-width: 25px;
    transition: transform 0.3s ease;
}

.actionButton:hover .actionIconContainer .actionIcon {
    transform: scale(1.3);
}

.downloadMsg {
    display: flex;
    font-family: 'CFAstyStd-Medium';
    font-size: 16px;
    gap: 10px;
    max-width: 423px;
}

.downloadMsg p {
    margin-top:3px;
}

.downloadMsgIcon {
    background-color: rgb(153 153 153 / 65%);
    padding: 7px;
    flex: 0 0 30px;
    border-radius: 30px;
    height: 30px;
    display: flex;
}

#downloadMsgIcon {
    width: 16px;
}
/*===================AREA BUTTONS STARTS HERE=======================*/
.areaBtn {
    position: relative;
    transition: 0.3s ease;
    max-width: 383px;
    width: 100%;
}

    .areaBtn.disabled {
        transform: scale(1);
        cursor: default;
        opacity: .5;
    }

.studentAreaBox, .teacherAreaBox {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    z-index: 1;
    position: relative;
    transition: 0.3s ease;
}

.teacherAreaBox {
    border: 4px solid #69A6C1;
}

.studentAreaBox {
    border: 4px solid #7BBF91;
}


    .studentAreaBox h2, .teacherAreaBox h2 {
        color: black;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: "StagSans-Semibold";
        z-index: 1;
        text-align: center;
    }


    .studentAreaBox .areaIcon, .teacherAreaBox .areaIcon {
        top: -50px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0)
    }



    .studentAreaBox:hover {
        transform: scale(1.05);
        transition: 0.3s ease;
        background-color: #CAF9D8;
    }

.areaBtn:not(.disabled):hover .teacherAreaBox {
    transform: scale(1.05);
    transition: 0.3s ease;
    background-color: #F5FCFF;
}


#studentHoverImg, #teacherHoverImg {
    z-index: -1;
    transition: all 0.2s ease-in;
    opacity: 0;
    position: absolute;
    display: none;
    max-width: 150px
}

#studentHoverImg {
    top: -45px;
    left: 260px;
    opacity: 0;
    transform: translate3d(-10px, 50px, 0) scale(1) rotate3d(0, 0, 1, -60deg);
    transition: transform 0.3s, opacity 0.3s;
}



.areaBtn:not(.disabled):hover #studentHoverImg {
    opacity: 1;
    transform: translate3d(80px, -10px, 0) scale(1.05) rotate3d(0, 0, 1, 0deg);
}




#teacherHoverImg {
    top: -63px;
    left: -67px;
    transform: translate3d(120px, 50px, 0) scale(1) rotate3d(0, 0, 1, 60deg);
    transition: transform 0.3s, opacity 0.3s;
}

.areaBtn:not(.disabled):hover #teacherHoverImg {
    opacity: 1;
    transform: translate3d(-10px, -10px, 0) scale(1.05) rotate3d(0, 0, 1, 0deg);
}




/*===================AREA BUTTONS ENDS HERE=======================*/

.digitalMaterial {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.headerSection {
    font-family: "CFAstyStd-Bold";
    font-size: 16px;
}

.bookDescription p {
    font-family: "CFAstyStd";
}

.accessKeyContainer {
    background: #EEEEEE;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 10px 20px 25px 20px;
    display: none;
    box-sizing: border-box;
    position: relative;
}

    .accessKeyContainer p {
        font-family: "StagSans";
        font-size: 12px;
        margin: 5px 0;
    }

.pin-input {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    position: relative;
    border: 3px solid transparent;
    box-sizing: border-box;
}

#wrongAccessKey {
    position: absolute;
    top: 30px;
    color: red;
    left: 8px;
    display: none;
}

#helpMessage {
    display: none;
}


.fields {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 3px solid transparent;
    width: 100%;
    height: 31px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
}


.pin-segment {
    width: 100%;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}


    .pin-segment:focus {
        border-color: #007BFF;
    }


.pinSubmit {
    outline: none;
    border: none;
    padding: 11px;
    background: transparent linear-gradient(180deg, #FF3333 0%, #BB2727 100%) 0% 0% no-repeat padding-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    transition: opacity .3s ease;
}

    .pinSubmit:hover {
        opacity: .8;
        transition: opacity .3s ease;
    }

.pinSubmitIcon {
    display: flex;
}

.error {
    border: 3px solid red;
    border-radius: 8px;
}

.popupInfo {
    display: block;
}

.popupInfoContainer {
    position: absolute;
    bottom: 50px;
    left: 180px;
    cursor: pointer;
    display: none;
}

    .popupInfoContainer p {
        position: absolute;
        top: 18px;
        left: 13px;
    }

.similarBooks {
    width: 100%;
    min-height: 500px;
    height: 100%;
}

.bookInfo {
    max-width: 250px;
    width: 100%;
}

.bookName {
    margin-top: 30px;
}

.woohoooo {
    margin-top: 15px;
    font-family: 'CFAstyStd-Medium';
    font-size: 16px;
}


#company {
    vertical-align: bottom;
    font-size: 0;
    margin-bottom: 1px;
    width: 118px;
}

.withLove {
    width: 12px;
    display: inline-block;
    opacity: 0.5;
}

/*-----------------------act btn ends here--------------------*/


#iframe {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 575px) {
    .actionIconContainer {
        flex: 0 0 44px;
    }

    .LvlBookTitle {
        font-size: 16px;
    }

    .materialSelectionHeader h1 {
        font-size: 24px;
    }
    .selectedAreaHeader {
        padding-top: 40px;
    }
    .materialSelectionHeader p {
        font-size: 18px;
    }

    .studentAreaBox h2, .teacherAreaBox h2 {
        font-size: 30px;
    }

    .studentAreaBox, .teacherAreaBox {
        height: 170px;
    }

    .selectionButtons {
        margin: 80px auto;
    }

    .footerContent {
        font-size: 12px;
    }

    .selectedAreaHeader h2{
        font-size: 26px;
    }

    .selectedHeaderIcon {
        flex: 0 0 60px;
    }

    .bookGrade {
        font-size: 20px;
    }

    .bookBox {
        gap: 14px;
    }

    .AreaContent, .bookPageContent {
        padding-bottom: 80px;
    }

    .backBtn{
        transform: translateY(-4px);
    }
   

    .backBtnIcon {
        width: 10px;
    }

    .bookImage {
        height: 268px;
    }

    .mmIcon, .mmIconFooter {
        width: 130px;
    }

    .materialSelectionPageContent {
        padding: 40px 0;
    }

    #wrongAccessKey {
        font-size: 12px;
    }

    .accessKeyContainer p {
        font-size: 14px;
    }

    .bookDescription p {
        padding: 20px 0 30px;
    }
    .maxContentWidth {
        max-width: 250px;
    }
}


@media only screen and (min-width: 576px) {
    .actionIconContainer {
        flex: 0 0 44px;
    }

    .LvlBookTitle {
        font-size: 16px;
    }

    #studentHoverImg, #teacherHoverImg {
        display: block;
    }
    .selectedAreaHeader {
        padding-top: 40px;
    }
       
    .mmIcon {
        width: 180px;
    }

    .accessKeyContainer p {
        font-size: 14px;
    }

    .studentsMaterialIcon h2, .teacherMaterialIcon h2 {
        top: 60%;
        font-size: 40px;
    }


    .bookGrade {
        line-height: 27px;
    }

    .bookList {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .bookCard {
        width: 212px;
        min-height: 242px;
    }

    .bookCoverImg {
        height: 162px;
    }

    .bookGrade {
        font-size: 20px;
    }

    .prevFooter {
        min-height: 140px;
        background-color: #C52B2B;
        display: flex;
        flex-direction: row;
    }

    .mmIconFooter {
        margin: 0;
    }

    .actionButtonText {
        padding: 13px;
    }

    #Footer {
        min-height: unset;
    }

    .backBtn {
        transform: translateY(-4px);
    }
    .backBtnIcon {
        width: 10px;
    }


    .actionButton, .accessKeyContainer, .downloadMsg {
        max-width: 250px;
    }

    .bookImageOuterContainer {
        width: 324px;
        height: 386px;
    }

    .bookInfo {
        max-width: 440px;
        width: 100%;
    }

    .bookImage {
        height: 347px;
    }

    .maxContentWidth {
        max-width: 440px;
    }

    .materialSelectionHeader h1 {
        font-size: 24px;
    }

    .materialSelectionHeader p {
        font-size: 18px;
    }

    .studentAreaBox h2, .teacherAreaBox h2 {
        font-size: 30px;
    }

    .studentAreaBox, .teacherAreaBox {
        height: 170px;
    }

    .selectionButtons {
        margin: 80px auto;
    }

    .footerContent {
        font-size: 12px;
    }

    .selectedAreaHeader h2 {
        font-size: 26px;
    }

    .selectedHeaderIcon {
        flex: 0 0 60px;
    }

    .bookBox {
        gap: 14px;
    }

    .AreaContent, .bookPageContent {
        padding-bottom: 80px;
    }

    .materialSelectionPageContent {
        padding: 40px 0;
    }

    #wrongAccessKey {
        font-size: 12px;
    }

    .bookDescription p {
        padding: 20px 0 30px;
    }
}


@media only screen and (min-width: 768px) {

    .mmIcon {
        width: 274px
    }

    .bubbles {
        padding: 47px 0;
    }


    .bookCard {
        width: 284px;
        min-height: 346px;
    }

    .bookCoverImg {
        height: 221px;
    }

    .LvlBookTitle {
        font-size: 24px;
    }

    .bookGrade {
        font-size: 24px;
    }

    .backBtn {
        transform: translateY(-5px);
    }
    .backBtn {
        width: 63px;
        height: 70px;
    }

    .backBtnIcon {
        width: 15px;
    }

    #Footer {
        flex-direction: row;
    }

    .bookList {
        justify-content: unset;
    }

    .bookContainer {
        gap: 34px;
        flex-direction: row;
        align-items: flex-start;
    }

    .bookImageOuterContainer {
        width: 200px;
        height: 248px;
    }


    .bookImage {
        height: 182px;
    }

    .bookName {
        font-size: 26px;
        margin-top: 0;
    }

    .headerSection {
        font-size: 18px;
    }

    .bookCoverImg {
        height: 221px;
    }

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

    .actionButton, .accessKeyContainer {
        font-size: 16px;
    }

    .bookCard {
        width: 284px;
        min-height: 346px;
    }

    .prevFooterContent {
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        text-align: start;
        gap: 30px;
    }

    .prevFooterContent {
        padding-top: 0;
    }

    #Footer {
        height: 60px;
    }

    .footerContent {
        text-align: start;
        flex-direction: row;
        align-items: center;
    }

    .mmIconFooter {
        border-right: 4px solid white;
        padding-right: 25px;
    }

    .maxContentWidth {
        max-width: 584px;
    }

    .materialSelectionHeader h1 {
        font-size: 32px;
    }

    .materialSelectionHeader p {
        font-size: 20px;
    }

    .studentAreaBox h2, .teacherAreaBox h2 {
        font-size: 36px;
    }

    .studentAreaBox, .teacherAreaBox {
        height: 180px;
    }

    .selectedAreaHeader h2 {
        font-size: 30px;
    }

    .selectedHeaderIcon {
        flex: 0 0 87px;
    }

    .bookBox {
        gap: 20px;
    }

    .AreaContent, .bookPageContent {
        padding-bottom: 143px;
    }
    .selectedAreaHeader {
        padding-top: 70px;
    }

    .materialSelectionPageContent {
        padding: 60px 0;
    }
}



@media only screen and (min-width: 992px) {
    .bookDescription p {
        padding: 20px 0 50px;
    }

    .bookCard {
        width: 368px;
        min-height: 356px;
    }

    .bookCoverImg {
        height: 227px;
    }

    .bookImage {
        height: 232px;
    }

    .bookImageOuterContainer {
        width: 256px;
        height: 318px;
    }

    bookName {
        font-size: 30px;
    }

    .bookInfo {
        max-width: 384px;
    }

    .actionButton {
        max-width: 320px;
        width: 100%;
        font-size: 19px;
    }

    .accessKeyContainer, .downloadMsg {
        max-width: 320px
    }

    .pin-input {
        width: 100%;
        flex-direction: row;
        gap: 8px;
    }

    .pinSubmit {
        width: 53px;
    }

    .pin-segment {
        font-size: 19px;
    }

    .fields {
        height: 40px;
    }

    #wrongAccessKey {
        top: 40px;
    }

    .maxContentWidth {
        max-width: 752px;
    }

    .selectionButtons {
        margin: 100px auto;
    }

    .actionIconContainer {
        flex-basis: 50px;
    }
}





@media only screen and (min-width: 1200px) {

    .mmIcon {
        width: 353px;
    }

    .bookCard {
        width: 292px;
        min-height: 356px;
    }

    .bookImageOuterContainer {
        width: 369px;
        height: 460px;
    }

    .bookImage {
        height: 336px;
    }

    .actionButton {
        font-size: 28px;
        max-width: 423px;
    }

    .actionIcon {
        max-width: 32px;
    }

    .actionButtonText {
        padding: 15px;
    }

    .actionIconContainer {
        flex-basis: 65px;
    }

    .accessKeyContainer, .downloadMsg {
        max-width: 423px;
    }

    .bookInfo {
        max-width: 490px;
    }

    .pin-segment {
        font-size: 24px;
    }

    .accessKeyContainer p {
        font-size: 18px;
    }

    .pinSubmit {
        height: 53px;
    }

    .fields {
        height: 53px;
        width: 320px;
    }

    #wrongAccessKey {
        top: 54px;
        font-size: 16px;
    }

    .maxContentWidth {
        max-width: 908px;
    }

    .materialSelectionHeader h1 {
        font-size: 36px;
    }

    .materialSelectionHeader p {
        font-size: 24px;
    }

    .studentAreaBox h2, .teacherAreaBox h2 {
        font-size: 40px;
    }

    .studentAreaBox, .teacherAreaBox {
        height: 250px;
    }
}


@media only screen and (min-width: 1920px) {
    .bubbles {
        background-size: contain;
    }

    .bookCard {
        width: 353px;
        min-height: 356px;
    }

    .bookContainer {
        justify-content: flex-start;
        gap: 80px;
    }

    .bookImageOuterContainer {
        width: 476px;
        height: 594px;
    }

    .bookName {
        font-size: 30px;
    }

    .headerSection {
        font-size: 20px;
    }


    .bookImage {
        height: 436px;
    }

    .bookGrade {
        font-size: 24px;
    }

    .maxContentWidth {
        max-width: 1460px;
        width: 100%;
        z-index: 2;
    }
}


/*=========== PopUpStyles ==============*/
.popupButtonList {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.buttonStyle {
    background-color: #FFFFFF;
    border: 1px solid #FF3333;
    border-radius: 25px;
    margin: 20px 0;
    padding: 14px 10px;
    width: 140px;
    font-weight: bold;
    font-family: "StagSans";
    color: #FF3333;
    transition: background-color 0.1s ease-in;
    cursor: pointer;
}


    .buttonStyle:hover {
        background-color: #FF3333;
        color: #ffffff;
        transition: background-color 0.1s ease-in;
    }

#popup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.popup-content {
    /*colors*/
    background-color: white;
    box-shadow: 0px 3px 10px #00000059;
    /*size*/
    max-width: 495px;
    width: 80%;
    /*distances*/
    margin: 15% auto;
    padding: 30px 20px;
    /*display*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid #888;
    text-align: center;
}

#popupTitle {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20px;
    font-family: "StagSans-Semibold"
}

#popupMsg {
    font-size: 16px;
    font-family: "StagSans";
    padding-bottom: 40px;
}


.myPopOver {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1070;
    display: block;
    max-width: 380px;
    font-family: 'CFAstyStd-Medium';
    font-style: normal;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 2px 4px 6px #00000080;
    border: 2px solid #4D4D4D;
    border-radius: 3px;
}

    .myPopOver .popover-body {
        padding: 16px;
        color: #212529;
        background-color: #e2e2e2;
    }


    .myPopOver .popover-arrow {
        position: absolute;
        display: block;
        width: 1rem;
        height: .5rem;
        border-width: .5rem .5rem 0;
        border-top-color: #4D4D4D;
    }

        .myPopOver .popover-arrow::after, .myPopOver .popover-arrow::before {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
        }


    /*top starts*/
    .myPopOver .bs-popover-auto[data-popper-placement^=top] > .popover-arrow, .bs-popover-top > .popover-arrow {
        bottom: calc(-.5rem - 1px);
    }

        .myPopOver .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::before {
            bottom: 0;
            border-width: .5rem .5rem 0;
            border-top-color: #4D4D4D;
        }

        .myPopOver .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {
            bottom: 3px;
            border-width: .5rem .5rem 0;
            border-top-color: #e2e2e2;
        }

    /*top ends here*/



    /*Bottom starts here*/
    .myPopOver .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow, .bs-popover-bottom > .popover-arrow {
        top: calc(-.5rem - 1px);
    }

        .myPopOver .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
            top: 0;
            border-width: 0 .5rem .5rem .5rem;
            border-bottom-color: #4D4D4D;
        }

        .myPopOver .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::after {
            top: 3px;
            border-width: 0 .5rem .5rem .5rem;
            border-bottom-color: #e2e2e2;
        }
    /*Bottom ends here*/




    /*right starts here*/
    .myPopOver .bs-popover-auto[data-popper-placement^=right] > .popover-arrow, .bs-popover-end > .popover-arrow {
        left: calc(-.5rem - 1px);
        width: 3px;
        height: 1rem;
    }

        .myPopOver .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::before {
            left: 0;
            border-width: .5rem .5rem .5rem 0;
            border-right-color: #4D4D4D;
        }

        .myPopOver .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {
            left: 3px;
            border-width: .5rem .5rem .5rem 0;
            border-right-color: #e2e2e2;
        }
/*right ends here*/
/*left not in use.*/

@media only screen and (max-width: 575px) {
    .myPopOver {
        font-size: 14px;
    }
}
@media only screen and (min-width: 576px) {

    .myPopOver {
        font-size: 14px;
    }
}

@media only screen and (min-width: 1200px) {
    .myPopOver {
        font-size: 18px;
    }
}