/*register and login form error message*/
.error{
    color: red;
}

.graphSvg {
    float: left;
}

.textSvg {
    float: left;
}

#playButtonTest {
    margin-top: 1.2%;
    width: 4%;
    align-content: center;
    position: absolute;
    right: 2px;
}

#firstPlayButton {
    margin-top: 0.2%;
    width: 3.5%;
    /*height: 30px;*/
    align-content: center;
    position: absolute;
    right: 1%;
}

#secondPlayButton {
    margin-top: 2.7%;
    width: 3.5%;
    /*height: 30px;*/
    align-content: center;
    position: absolute;
    right: 1%;
}

#firstPlayButton2 {
    margin-top: 0.2%;
    width: 3.5%;
    /*height: 30px;*/
    align-content: center;
    position: static;
    right: 1%;
}

#secondPlayButton2 {
    margin-top: 2.7%;
    width: 3.5%;
    /*height: 30px;*/
    align-content: center;
    position: static;
    right: 1%;
}

.sentenceAndButtonContainer{
    width:100%;
}
.buttonFixer{
    position:relative;
}

.tab-container {
    width: 100px;
    max-width: 1024px;
    margin: auto;
}

/*--->>> Study Page 관련 CSS <<<---*/
.studybg{
    min-height: 100vh;
    height: 105vh;
    width: 100%;
}




@media all and (orientation:portrait)  and (max-width:800px) and (min-width:800px) {
    /*.studybg{
        min-height: 100vh;
        height: 150vh;
        width: 140%;
    }

    #static-header .header-text {
        width: 140%;
        height: 150vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (orientation:portrait) and (min-width:768px) and (max-width:799px) {
    /*.studybg{
        min-height: 100vh;
        height: 120vh;
        width: 105%;
    }

    #static-header .header-text {
        width: 105%;
        height: 120vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}
@media all and (orientation:portrait) and (min-width:801px) and (max-width:1024px) {
    /*.studybg{
        min-height: 100vh;
        height: 120vh;
        width: 105%;
    }

    #static-header .header-text {
        width: 105%;
        height: 120vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (orientation:portrait) and (min-width:413px) and (max-width:768px) {
    /*.studybg{
        min-height: 100vh;
        height: 155vh;
        width: 140%;
    }

    #static-header .header-text {
        width: 140%;
        height: 155vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (orientation:portrait) and (min-width:300px) and (max-width:412px) {
    /*.studybg{
        min-height: 100vh;
        height: 210vh;
        width: 200%;
    }

    #static-header .header-text {
        width: 200%;
        height: 210vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 200%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (orientation:landscape) and (min-width:768px) and (max-width:1366px) {
    /*.studybg{
        min-height: 100vh;
        height: 170vh;
        width: 110%;
    }

    #static-header .header-text {
        width: 110%;
        height: 170vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (orientation:landscape) and  (max-height:413px ) and (min-width:300px) and (max-width:812px) {
   /* .studybg{
        min-height: 100vh;
        height: 400vh;
        width: 125%;
    }

    #static-header .header-text {
        width: 125%;
        height: 400vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (max-device-aspect-ratio:375/759) {
    /*.studybg{
        min-height: 100vh;
        height: 210vh;
        width: 200%;
    }

    #static-header .header-text {
        width: 200%;
        height: 210vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (max-device-aspect-ratio:320/759) {
    /*.studybg{
        min-height: 100vh;
        height: 210vh;
        width: 200%;
    }

    #static-header .header-text {
        width: 200%;
        height: 210vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

@media all and (max-device-aspect-ratio:325/791) {
    /*.studybg{
        min-height: 100vh;
        height: 440vh;
        width: 400%;
    }

    #static-header .header-text {
        width: 400%;
        height: 440vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    /*.studybg{
        min-height: 100vh;
        height: 120vh;
        width: 105%;
    }

    #static-header .header-text {
        width: 105%;
        height: 120vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    /*.studybg{
        min-height: 100vh;
        height: 250vh;
        width: 110%;
    }

    #static-header .header-text {
        width: 110%;
        height: 250vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .studybg{
        min-height: 100vh;
        height: 100%;
        width: 100%;
    }

    #static-header .header-text {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    /*.studybg{
        min-height: 100vh;
        height: 170vh;
        width: 110%;
    }

    #static-header .header-text {
        width: 110%;
        height: 170vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    /*.studybg{
        min-height: 100vh;
        height: 120vh;
        width: 105%;
    }

    #static-header .header-text {
        width: 105%;
        height: 120vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/
    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    /*.studybg{
        min-height: 100vh;
        height: 170vh;
        width: 110%;
    }

    #static-header .header-text {
        width: 110%;
        height: 170vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/

    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    /*.studybg{
        min-height: 100vh;
        height: 120vh;
        width: 105%;
    }

    #static-header .header-text {
        width: 105%;
        height: 120vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/

    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
   /* .studybg{
        min-height: 100vh;
        height: 170vh;
        width: 110%;
    }

    #static-header .header-text {
        width: 110%;
        height: 170vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute;
    }*/

    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {

    /*.studybg{
        min-height: 100vh;
        height: 105vh;
        width: 100%;
    }

    #static-header .header-text {
        width: 100%;
        height: 105vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/

    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}

/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
    /*.studybg{
        min-height: 100vh;
        height: 155vh;
        width: 100%;
    }

    #static-header .header-text {
        width: 100%;
        height: 155vh;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        position: absolute
    }*/

    #static-header .header-text1 {
        width: 100%;
        /*height: 100%;
        background: rgba(0, 0, 0, 0.6);*/
        text-align: center;
        /*position: absolute;*/
    }
}



/*--->>> StudyConversation Page 관련 CSS <<<---*/
.conversation-text{
   /* height: 80%;*/
}

.conversation-sentences{
    margin: 5% 5% 5% 10%;
}