/* You can add global styles to this file, and also import other style files */
@font-face {
    font-family: 'tst_back_power_extregular';
    src: url('../assets/fonts/tst_regular-webfont.woff2') format('woff2'),
    url('../assets/fonts/tst_regular-webfont.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
}

body, html {
    height: 100%;
    font-family: 'tst_back_power_extregular', 'Kanit', sans-serif;
}
select, input {
    font-family:  sans-serif;
}
body {
    margin: 0;
    padding: 0;
    background-image: url("../assets/images/bg-orange.png"), url("../assets/images/bg-backdrop.jpg");
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index:1;
}

.blinking{
    animation:blinkingText 0.6s infinite;
}
@keyframes blinkingText{
    0%{     color: rgb(247, 239, 7);    }
    49%{    color: rgb(247, 239, 7);    }
    50%{    color: rgba(247, 239, 7, 0); }
    75%{    color: rgba(247, 239, 7, 0); }
    100%{   color: rgb(247, 239, 7);  }
}





#subTitleYellow {
    font-family: 'Kanit';
    color: #fff200;
}

#title1, #title3 {
    font-family: 'Kanit';
    color: #c0070c;
    text-shadow: 2px 2px #ffffff;
}

#title2 {
    font-family: 'Kanit';
    color: #28a745;
    text-shadow: 2px 2px #ffffff;
}

#RoundedRectangle1 {
    left: 16px;
    right: 16px;
    top: 172px;
    position: absolute;
    width: 353px;
    height: 53px;
    z-index: 17;
}
#RoundedRectangle2 {
    left: 16px;
    right: 16px;
    top: 260px;
    position: absolute;
    width: 353px;
    height: 53px;
    z-index: 17;
}
#RoundedRectangle3 {
    left: 16px;
    right: 16px;
    top: 348px;
    position: absolute;
    width: 353px;
    height: 53px;
    z-index: 17;
}
#RoundedRectangle4 {
    left: 16px;
    right: 16px;
    top: 436px;
    position: absolute;
    width: 353px;
    height: 53px;
    z-index: 17;
}
#RoundedRectangle5 {
    left: 16px;
    right: 16px;
    top: 524px;
    position: absolute;
    width: 353px;
    height: 53px;
    z-index: 17;
}

#send {
    left: 138px;
    top: 552px;
    position: absolute;
    width: 110px;
    height: 110px;
    z-index: 17;
}

#sendText {
    left: 14px;
    top: 38px;
    position: absolute;
    width: 83px;
    height: 31px;
    z-index: 18;
}

#sendCarIcon {
    left: 24px;
    top: 65px;
    position: absolute;
    width: 62px;
    height: 17px;
    z-index: 18;
}

#layerForm select, input{
    height: 53px;
}

#carlogo {
    width: 70%;
}

@media (min-width: 1367px) {
    #top {
        left: 10px;
        top: 20px;
        position: absolute;
        width: 359px;
        height: 41px;
        z-index:10;
    }
    #top img{
        left: 20px;
        top: 20px;
        position: absolute;
        width: 550px;
        height: 50px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        padding-top: calc(397/1464 * 68%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        right: 30px;
        top: 15px;
        position: absolute;
        width: 384px;
        height: 699px;
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }

    #qrcode {
        left: 750px;
        margin-left: 80px;
        top: 20px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }

    #layerTitle {
        left: 30px;
        top: 110px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 8;
    }
    #title1 , #title3 {
        font-size: 42px;
    }
    #layerTitle2 {
        left: 30px;
        top: 180px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 8;
    }
    #title2 {
        font-size: 42px;
    }
    #carlogo img{
        left: 50px;
        padding-top: 0px;
        position: absolute;
        width: 70%;
        height: auto;
        z-index: 30;
    }
    #qrcode {
        left: 710px;
        top: 80px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }
    #qrcode img{
        width: 153px;
        height: 155px;
    }
    #qrcode h5{
        font-size: 20px;
    }
}
/*จอมากกว่า 1281px*/
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) and (max-width: 1366px) {
    #top {
        left: 48px;
        top: 40px;
        position: absolute;
        width: 507px;
        height: 58px;
        z-index:10;
    }
    #top img{
        left: 10px;
        top: 10px;
        position: absolute;
        width: 550px;
        height: 50px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 80%;
        max-height: 80%;
        padding-top: calc(397/1464 * 80%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        right: 15px;
        top: 30px;
        position: absolute;
        /*width: 384px;
        height: 699px;*/
        width: 345px;
        height: 575px;
        z-index:11;
    }
    #layerForm img
    {
        width: 345px;
        height: 575px;
    }

    #layerForm select, input{
        width: 315px;
        height: 45px;
    }

    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 65px;
        top: 120px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1, #title3 {
        font-size: 36px;
    }
    #layerTitle2 {
        left: 65px;
        top: 180px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 36px;
    }
    #carlogo {
        width: 70%;
    }
    #carlogo img{
        left: 10px;
        margin-top: 0px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 30;
    }
    #qrcode {
        left: 750px;
        top: 80px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }
    #qrcode img{
        width: 153px;
        height: 155px;
    }
    #qrcode h5{
        font-size: 20px;
    }
    #RoundedRectangle1 {
        left: 16px;
        right: 16px;
        top: 162px;
        position: absolute;
        width: 310px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle2 {
        left: 16px;
        right: 16px;
        top: 232px;
        position: absolute;
        width: 310px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle3 {
        left: 16px;
        right: 16px;
        top: 302px;
        position: absolute;
        width: 310px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle4 {
        left: 16px;
        right: 16px;
        top: 372px;
        position: absolute;
        width: 310px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle5 {
        left: 16px;
        right: 16px;
        top: 442px;
        position: absolute;
        width: 310px;
        height: 45px;
        z-index: 17;
    }

    #send {
        left: 118px;
        top: 502px;
        position: absolute;
        width: 110px;
        height: 110px;
        z-index: 17;
    }

    #send img {
        width: 110px;
        height: 110px;
    }

    #sendText {
        left: 14px;
        top: 38px;
        position: absolute;
        width: 83px;
        height: 31px;
        z-index: 18;
    }

    #sendText img{
        width: 83px;
        height: 31px;
    }

    /*#sendCarIcon {
        left: 24px;
        top: 65px;
        position: absolute;
        width: 62px;
        height: 17px;
        z-index: 18;
    }
    #sendCarIcon img{
        width: 62px;
        height: 17px;
    }*/
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1200px) and (max-width: 1280px) {

    input[type="text"] {
          width: 314px;
    }

    #top {
        left: 48px;
        top: 40px;
        position: absolute;
        width: 507px;
        height: 58px;
        z-index:10;
    }
    #top img{
        left: 10px;
        top: 10px;
        position: absolute;
        width: 550px;
        height: 50px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 80%;
        max-height: 80%;
        padding-top: calc(397/1464 * 80%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        right: 15px;
        top: 30px;
        position: absolute;
        /*width: 384px;
        height: 699px;*/
        width: 345px;
        height: 575px;
        z-index:11;
    }
    #layerForm img
    {
        width: 345px;
        height: 680px;
    }

    #layerForm select, input{
        width: 315px;
        height: 45px;
    }

    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 65px;
        top: 120px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1, #title3 {
        font-size: 36px;
    }
    #layerTitle2 {
        left: 65px;
        top: 180px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 36px;
    }
    #carlogo {
        width: 70%;
    }
    #carlogo img{
        left: 10px;
        margin-top: 20px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 30;
    }
    #qrcode {
        left: 720px;
        top: 120px;
        position: absolute;
        width: 150px;
        height: 150px;
        z-index: 30;
    }
    #qrcode img{
        width: 150px;
        height: 150px;
    }
    #qrcode h5{
        font-size: 20px;
        display: none;
    }
    #RoundedRectangle1 {
        left: 16px;
        right: 16px;
        top: 162px;
        position: absolute;
        width: 353px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle2 {
        left: 16px;
        right: 16px;
        top: 232px;
        position: absolute;
        width: 353px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle3 {
        left: 16px;
        right: 16px;
        top: 302px;
        position: absolute;
        width: 353px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle4 {
        left: 16px;
        right: 16px;
        top: 372px;
        position: absolute;
        width: 353px;
        height: 45px;
        z-index: 17;
    }
    #RoundedRectangle5 {
        left: 16px;
        right: 16px;
        top: 442px;
        position: absolute;
        width: 353px;
        height: 45px;
        z-index: 17;
    }

    #send {
        left: 118px;
        top: 502px;
        position: absolute;
        width: 110px;
        height: 110px;
        z-index: 17;
    }

    #send img {
        width: 110px;
        height: 110px;
    }

    #sendText {
        left: 14px;
        top: 38px;
        position: absolute;
        width: 83px;
        height: 31px;
        z-index: 18;
    }
    #sendText img{
        width: 83px;
        height: 31px;
    }

    #sendCarIcon {
        left: 24px;
        top: 65px;
        position: absolute;
        width: 62px;
        height: 17px;
        z-index: 18;
    }
    #sendCarIcon img{
        width: 62px;
        height: 17px;
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    #top {
        left: 48px;
        top: 60px;
        position: absolute;
        width: 507px;
        height: 58px;
        z-index:10;
    }
    #top img{
        left: 10px;
        top: 10px;
        position: absolute;
        width: 550px;
        height: 50px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 80%;
        max-height: 80%;
        padding-top: calc(397/1464 * 90%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        right: 0px;
        top: 40px;
        position: absolute;
        width: 384px;
        height: 699px;
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 65px;
        top: 140px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1, #title3 {
        font-size: 32px;
    }
    #layerTitle2 {
        left: 65px;
        top: 200px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 32px;
    }
    #carlogo img{
        left: 10px;
        margin-top: 40px;
        position: absolute;
        width: 90%;
        height: auto;
        z-index: 30;
    }
    #qrcode {
        left: 640px;
        top: 140px;
        position: absolute;
        width: 113px;
        height: 113px;
        z-index: 30;
    }
    #qrcode img{
        width: 113px;
        height: 113px;
    }
    #qrcode h5{
        font-size: 20px;
        display: none;
    }
}

/*จอมากกว่า 992px  1024=ipad แนวนอน*/
@media (min-width: 992px) and (max-width: 1024px) {
    #top {
        left: 48px;
        top: 60px;
        position: absolute;
        width: 507px;
        height: 58px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 70%;
        max-height: 70%;
        padding-top: calc(397/1464 * 100%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        right: 0px;
        top: 50px;
        position: absolute;
        width: 384px;
        height: 699px;
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 55px;
        top: 130px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1, #title3 {
        font-size: 30px;
    }
    #layerTitle2 {
        left: 55px;
        top: 180px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 30px;
    }
    #carlogo img{
        left: 10px;
        margin-top: 25px;
        position: absolute;
        width: 85%;
        height: auto;
        z-index: 30;

    }
    #qrcode {
        left: 230px;
        top: 560px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }
}

/*768px ipad แนวตั้ง */
@media (min-width: 577px) and (max-width: 991.68px) {
    #top {
        left: 10px;
        top: 20px;
        position: absolute;
        width: 359px;
        height: 41px;
        z-index:10;
    }
    #top img{
        left: 25px;
        top: 20px;
        position: absolute;
        width: 180%;
        height: 180%;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        padding-top: calc(397/1464 * 160%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm{
        left: 220px;
        /*margin-left: auto;
        margin-right: auto;*/
        top: 690px;
        position: absolute;
        width: 400px;
        height: 700px;
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 40px;
        top: 135px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1 , #title3{
        font-size: 38px;
    }
    #layerTitle2 {
        left: 40px;
        top: 200px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 38px;
    }
    #carlogo {
        width: 100%;
    }
    #carlogo img{
        left: 0px;
        top: 3px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 30;
    }
    /*#qrcode {
        left: 650px;
        top: 190px;
        position: absolute;
        width: 120px;
        height: 123px;
        z-index: 30;
    }*/

    #qrcode {
        left: 650px;
        top: 190px;
        position: absolute;
        width: 113px;
        height: 113px;
        z-index: 30;
    }
    #qrcode img{
        width: 113px;
        height: 113px;
    }
    #qrcode h5{
        font-size: 20px;
        display: none;
    }

}

@media (min-width: 414px) and (max-width: 576px) {
    #top {
        left: 10px;
        top: 20px;
        right: 10px;
        position: absolute;
        width: 100%;
        height: 41px;
        z-index:10;
    }
    #top img{
        left: 10px;
        top: 10px;
        right: 10px;
        position: absolute;
        width: 90%;
        height: 45px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        padding-top: calc(397/1464 * 200%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm{
        top: 8px;
        position: relative;
        width: 384px;
        height: 742px;
        z-index:11;
        margin: 0 auto;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 25px;
        top: 90px;
        position: absolute;
        width: 95%;
        height: 45px;
        z-index: 8;
    }
    #title1 {
        font-size: 21px;
    }

    #layerTitle2 {
        left: 25px;
        top: 120px;
        position: absolute;
        width: 95%;
        height: 45px;
        z-index: 8;
    }
    #title2, #title3 {
        font-size: 21px;
    }
    #carlogo {
        width: 90%;
    }
    #carlogo img{
        left: 5px;
        top: 5px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 30;
    }
    #qrcode {
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
        margin-top: 1108px;
        margin-left: auto;
        margin-right: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }
    /* .ng-image-slider .container {
      padding: 0;
    }*/
}

/*จอต่ำกว่า 576 414ตั้ง mate 9 pro  */
@media (min-width: 376px) and (max-width: 413px) {
    #top {
        left: 10px;
        top: 20px;
        position: absolute;
        width: 359px;
        height: 41px;
        z-index:10;
    }
    #top img{
        left: 10px;
        top: 10px;
        position: absolute;
        width: 400px;
        height: 45px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 110%;
        max-height: 110%;
        padding-top: calc(397/1464 * 160%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm{
        left: 10px;
        /*margin-left: auto;
        margin-right: auto;*/
        top: 80px;
        position: relative;
        width: 384px;
        height: 742px;
        /*margin-top: 120px;*/
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 25px;
        top: 90px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1, #title3 {
        font-size: 22px;
    }
    #layerTitle2 {
        left: 25px;
        top: 120px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 22px;
    }
    #carlogo {
        width: 100%;
        /*background-color: #f86403;*/
    }
    #carlogo img{
        left: 10px;
        top: 3px;
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 30;
        /*background-color: #000fff;*/
    }
    #qrcode {
        left: 160px;
        margin-top: 870px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }
    /* .ng-image-slider .container {
      padding: 0;
    }*/
}

/*จอต่ำกว่า 375 */
@media (max-width: 375px){
    #top {
        left: 10px;
        top: 10px;
        position: absolute;
        width: 359px;
        height: 41px;
        z-index:10;
    }
    #top img{
        left: 5px;
        top: 10px;
        position: absolute;
        width: 330px;
        height: 38px;
        z-index:10;
    }
    #layerCarBg img {
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        padding-top: calc(397/1464 * 160%);
        width: auto;
        height: auto;
        z-index:4;
    }
    #layerForm
    {
        left: 0px;
        right: 0px;
        top: 300px;
        position: absolute;
        width: 384px;
        height: 742px;
        /*margin-top: 200px;*/
        z-index:11;
    }
    #layerTextYellow {
        left: 0px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 30px;
        z-index: 27;
    }
    #layerTitle {
        left: 10px;
        top: 70px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title1 ,#title3 {
        font-size: 19px;
    }
    #layerTitle2 {
        left: 10px;
        top: 100px;
        position: absolute;
        width: 100%;
        height: 45px;
        z-index: 8;
    }
    #title2 {
        font-size: 19px;
    }
    #qrcode {
        left: 118px;
        margin-top: 840px;
        position: absolute;
        width: 153px;
        height: 155px;
        z-index: 30;
    }
    #carlogo {
        width: 100%;
        left: -50px;
    }
    #carlogo img{
        left: 0px;
        top: 20px;
        position: absolute;
        width: 98%;
        height: auto;
        z-index: 30;
    }
    .container-fluid {
        width: 375px;
    }

}