body {
    font-family: 'Bai Jamjuree', sans-serif !important;
    background-image: url(img/bg2.png);
    /*background-color: url()*/
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: white;
}
.P_c{
    /*font-size: 12px;*/
    /*margin-top: 1rem;*/
    /*padding-top: 1rem;*/
    color: red;
    text-align: justify;
}
#file_download{
    width: 60px;
}
.P_imgdownload{
    background-color: white;
    margin-top: 1rem;
    padding: 10px;
    margin-bottom: 1rem;
    border-radius: 5px;
}
.P_cardhomework{
    background-color:   rgba(255, 255, 255,0.1);
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    /*padding-left: 5px;*/
    /*border-radius: 10px;*/
     border-style: solid;
  /*border-width: 2px;*/
  /*border-radius: 5px;*/
  /*border-color: #333;*/
  /*border-left-style: none;*/
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
  border-left-color: #333;
  border-left-width: 10px;


}
/*.P_cardhomework:hover{
    background-color: #003333;
    color:#009966;
}
/*.P_cardhomework:hover #greenna{
    color: forestgreen;

}*/*/

.P_frame {
    border-radius: 10px;

}

.P_Allintable {
    background-color: #333;
    color: white;
    text-align: right;
    padding-right: 1rem;
    padding-left: 1rem;

    margin-top: -1rem;
}

.P_namethaina {

    background-color: #333;
    color: white;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 2rem;
    /*margin-bottom: 1rem;*/
    /*border-radius: 10px;*/
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem
}

.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem
}

.bd-callout p:last-child {
    margin-bottom: 0
}

.bd-callout code {
    border-radius: .25rem
}

.bd-callout+.bd-callout {
    margin-top: -.25rem
}

.bd-callout-info {
    border-left-color: #5bc0de
}

.bd-callout-info h4 {
    color: #5bc0de
}

.bd-callout-warning {
    border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
    color: #f0ad4e
}

.bd-callout-danger {
    border-left-color: #d9534f
}

.bd-callout-danger h4 {
    color: #d9534f
}

.P_PaddingTop {
    padding-top: 1rem;
}

.P_view {
    padding: 1rem;
    margin-top: 1rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: 5px solid #ff3333;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    /*background-color: #AAAAAA;*/
}

.P_threeject {
    font-size: 18px;
    color: #333;
    line-height: 2rem;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #ced4da;
    padding: 1rem;
}

.btn-link {
    text-decoration: none !important;
    color: orange !important;
    font-weight: bold;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

a {
    text-decoration: none !important;
}

.P_formNA {
    padding-left: 1rem;
    padding-right: 1rem;
}

.P_Manageuser {
    margin-left: 15%;
    margin-right: 5rem;
    height: auto;
    /*background-color: red;*/
    width: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 5rem;
    border-radius: 10px;
    margin-bottom: 3rem;
}

.P_Manageuser1 {
    text-transform: uppercase;
    height: 5rem;
    /*color: white;*/
    /*background-color: white;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.5rem;
    padding-top: 20px;
    padding-bottom: 15px;
    padding-left: 2rem;
    font-weight: bold;

}

.P_Manageuser2 {
    /*padding-top: 1rem;*/
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.P_margintop {
    margin-top: 1rem;
}

#hidename {
    /*name nav*/
}

#showname {
    display: none;
    padding-bottom: 1rem;
    font-size: 30px;
    line-height: 3rem;
    /*margin-bottom: 5rem;*/
}

nav>.nav.nav-tabs {
    margin-top: 1rem;
    border: none;
    color: #fff;
    background: #272e38;
    border-radius: 0;

}

nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {

    border: none;
    padding: 18px 25px;
    color: #fff;
    background: #333;
    border-radius: 0;

    /*  border-top:5px solid red;*/
}

nav>div a.nav-item.nav-link:not(selector) {
    border: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #fff;
    color: #333;
    border-radius: 0;
    transition: background 0.20s linear;

}

.tab-content {
    background: #fff;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top: 5px solid #ff3333;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
    margin-bottom: 10px;
}












.P_shadows {
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

/*login page*/
.P_RightLogin {
    background-color: rgba(255, 255, 255, 0.90);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: auto;
    color: #ff9933;
    padding-bottom: 2rem;
}

.P_leftLogin {
    height: auto;
    font-size: 3rem;
    background-color: #ff9933;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

#P_signin {
    text-align: right;
    font-size: 50px;
    margin-top: 5rem;
}

input[type=text].userlogin,
input[type=Password].userlogin {
    background-color: #ffd7b3;
    width: 100%;
    height: 3rem;
    margin-top: 10px;
    margin-bottom: 10px;
    border: none;
    /*border-radius: 10px;*/
    padding-left: 2rem;
    padding-right: 2rem;
}

input[type=text].userlogin:focus,
input[type=Password].userlogin:focus {
    border: 3px solid #555;
    /*border-radius: 10px;*/
}

input[type=text].userlogin {
    background-image: url('img/user.png');
    background-size: 30px;
    background-position: 9px 10px;
    background-repeat: no-repeat;
    padding-left: 50px;
}

input[type=Password].userlogin {
    background-image: url('img/password.png');
    background-size: 30px;
    background-position: 9px 10px;
    background-repeat: no-repeat;
    padding-left: 50px;
}

.P_login {
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 25%;
    margin-right: 25%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

/*end login page*/

/*name user*/
.P_head {
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
    min-height: 3rem;
    height: auto;
    padding-left: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;

    width: 40%;
    border-radius: 10px;
    padding-bottom: 5px;
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

#menu1 {
    padding-top: 0.75rem;
    /*padding-left: 5px;*/
    /*padding-bottom: 0.3rem;*/
}

#menu2 {
    margin-right: 1rem;
    height: 3rem;

}

/*end name user*/



/*subject*/
.P_subject {
    /*height: 100%;*/
    height: auto;
    min-height: 87vh;
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: rgba(255, 255, 255, 0.10);
    margin-top: 5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;

    border-radius: 15px;
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
    padding-top: 1rem;
    /*padding-bottom: 1rem;*/
}



.P_Use {
    margin-top: 2rem;

    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

.P_Pic {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #ff9933;
    padding: 2rem;
}

.P_Pic img {
    height: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
    display: none;
}

.P_Detailss {
    background-color: rgba(255, 255, 255, 0.9);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nameeng {
    padding-top: 2rem;
    font-size: 3rem;
    /*font-weight:bold;*/
    text-transform: uppercase;

}

.namethai {

    font-size: 1rem;
    font-weight: bold;

}

.P_rowmenu {
    margin-top: 5rem;
    /*background-color: red;*/
    margin-bottom: 3rem;


}

.P_But {
    margin-top: 1rem;
}






.P_subject1 {
    /*background-color: green;*/
    margin-left: 1rem;
    margin-top: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: auto;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-radius: 15px;
    margin-left: 5px;
    margin-right: -10px;
}

.P_A {
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    /*width:470px;*/
    height: auto;
    margin-left: 1rem;
    margin-right: 1rem;

    margin-top: 20px;
    margin-bottom: 20px;
    /*  border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;*/
    box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
}

.P_B {
    width: 220px;
    height: auto;
    background-color: #ff9933;
    padding-top: 20px;
    border-bottom-left-radius: 10px;

}

.P_D {
    width: 220px;
    height: 390px;
    background-color: white;
    padding-top: 40px;
    padding-left: -10px;
    border-bottom-right-radius: 10px;


}


.P_C {
    height: auto;
    /*background-color: gray;*/
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.P_studentID {

    /*display: none;*/
}

.footer {
    position: fixed;
    bottom: 0rem;
    height: 20px;
    text-align: center;
    width: 100%;
    /*padding-top: 1rem;*/
    /*padding-bottom: 1rem;*/
    color: #ffd7b3;
    font-size: 14px;

}

/*book*/
.book {
    transform-style: preserve-3d;
    position: relative;
    height: 300px;
    cursor: pointer;
    backface-visibility: visible;

}

.front,
.back,
.page1,
.page2,
.page3,
.page4,
.page5,
.page6 {
    transform-style: preserve-3d;
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
}

.front {
    background-image: url("img/book1.png");
    background-size: auto 300px;
}

.back {
    background: navy;
}

.front,
.page1,
.page3,
.page5 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
}

.back,
.page2,
.page4,
.page6 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
}

.page1 {
    background: #efefef;
}

.page2 {
    background: #efefef;
}

.page3 {
    background: #f5f5f5;
}

.page4 {
    background: #f5f5f5;
}

.page5 {
    background: #fafafa;
}

.page6 {
    background: #fdfdfd;
}

.book:hover .front {
    transform: rotateY(-160deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page1 {
    transform: rotateY(-150deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page2 {
    transform: rotateY(-30deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page3 {
    transform: rotateY(-140deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page4 {
    transform: rotateY(-40deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page5 {
    transform: rotateY(-130deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .page6 {
    transform: rotateY(-50deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book:hover .back {
    transform: rotateY(-20deg) scale(1.1);
}

/**/
.book1 {
    transform-style: preserve-3d;
    position: relative;
    height: 300px;
    cursor: pointer;
    backface-visibility: visible;

}

.front1,
.back1 {
    transform-style: preserve-3d;
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
}

.front1 {
    background-image: url("img/book2.png");
    background-size: auto 300px;
}

.back1 {
    background: orange;
}

.front1,
.back1 {
    transform-style: preserve-3d;
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
}


.book1:hover .back1 {
    transform: rotateY(-20deg) scale(1.1);
}




.book1:hover .front1 {
    transform: rotateY(-160deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page1 {
    transform: rotateY(-150deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page2 {
    transform: rotateY(-30deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page3 {
    transform: rotateY(-140deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page4 {
    transform: rotateY(-40deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page5 {
    transform: rotateY(-130deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .page6 {
    transform: rotateY(-50deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book1:hover .back1 {
    transform: rotateY(-20deg) scale(1.1);
}

/**/
/**/
.book2 {
    transform-style: preserve-3d;
    position: relative;
    height: 300px;
    cursor: pointer;
    backface-visibility: visible;

}

.front2,
.back2 {
    transform-style: preserve-3d;
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center;
    transition: transform .5s ease-in-out, box-shadow .35s ease-in-out;
}

.front2 {
    background-image: url("img/book3.png");
    background-size: auto 300px;
}

.back2 {
    background: gray;
}

.front2 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
}

.back2 {
    border-bottom-right-radius: .5em;
    border-top-right-radius: .5em;
}



.book2:hover .front2 {
    transform: rotateY(-160deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page1 {
    transform: rotateY(-150deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page2 {
    transform: rotateY(-30deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page3 {
    transform: rotateY(-140deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page4 {
    transform: rotateY(-40deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page5 {
    transform: rotateY(-130deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .page6 {
    transform: rotateY(-50deg) scale(1.1);
    box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.book2:hover .back2 {
    transform: rotateY(-20deg) scale(1.1);
}

/**/

#hidefile {
    display: none !important;
}

@media print {
    body {
        display: none !important;
    }
}

@media only screen and (max-width: 1550px) {
    .P_Manageuser {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (max-width: 1240px) {
    #hidename {
        display: none;
    }

    #showname {
        display: block;
    }
}

@media only screen and (max-width: 1200px) {
    .P_subject {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .P_login {
        margin-left: 15%;
        margin-right: 15%;

    }

    .P_Manageuser1 {}

}
@media only screen and (max-width: 1000px) {

#chartna{
    display: none;

}
#chartjaa{
    display: block !important;
}

@media only screen and (max-width: 993px) {
    .P_Manageuser2 {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }

    #hidename {
        display: none;
    }

    .P_head {
        width: auto;
        margin: 1rem;
    }

    .P_subject {
        background-color: rgba(255, 255, 255, 0.25);
    }


    .P_RightLogin {

        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        margin-top: 1rem;
        /*margin-left: 1rem;*/
        box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
    }

    .P_leftLogin {
        box-shadow: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);
        border-radius: 10px;
        /*margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
        width: auto;*/
    }

    .P_login {

        margin-left: 5px;
        margin-right: 5px;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        padding-top: 5px;
        margin-top: 1rem;
        margin-bottom: 2rem;

        /*border-bottom-left-radius: 10px;*/

    }



    .P_A {
        width: 440px;
        /*  margin-right: auto;
      margin-left: auto;*/
    }

    .P_Pic img {
        display: block;
    }

    .book,
    .book1,
    .book2 {
        display: none;
    }

    .nameeng {
        font-size: 2rem;
        font-weight: bold;
        padding-left: 1rem;
    }

    .namethai {
        padding-left: 1rem;
    }

}

@media only screen and (max-width: 766px) {
    #showfile {
        display: none !important;
    }
    #hidefile{
        display: block !important;
    }
    .P_Allintable {
        margin-top: 0rem;
    }

    .P_namethaina {
        font-size: 1.8rem;
    }

    .P_Use {
        width: auto;

    }

    .P_Pic {
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;

    }

    .P_Detailss {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
    }

    /*body{
        background-color: #333;
        background-image: none;
      }*/
    .P_A {
        width: 420px;
    }

    .front,
    .front1,
    .front2,
    .back,
    .back1,
    .back2,
    .book,
    .book1,
    .book2,
    .page1,
    .page2,
    .page3,
    .page4,
    .page5,
    .page6 {
        width: 190px;
        height: 280px;
    }
}
@media only screen and (max-width: 400px) {
    #menu55 {
        display: none;
    }
    .P_Manageuser2 {
/*        margin-left: 1rem;
        margin-right: 1rem;*/
        padding-left: 5px;
        padding-right: 5px;
    }
    .P_view{
       /* margin-left: 5px;
        margin-right: 5px;*/
        padding-left: 10px;
        padding-right: 10px;
    }
    .nameeng{
        font-size: 18px;

    }
    .namethai{
        font-style: italic;
    }
    .P_namethaina{
        font-size: 18px;
        font-style: italic;
    }
    .P_Pic img{
        width: 190px;
        height: auto;

    }
    .P_Manageuser1{
        font-size: 20px;
        height: 4rem;
    }

    }