@font-face {
    font-family: csPrakas;
    src: url('/css/fonts/CS_Prakas/CSPraKas.ttf');
}
@font-face {
    font-family: sukhumvitSet;
    src: url('/css/fonts/SukhumvitSet/SukhumvitSet-Medium.ttf');
}
html, body{
    margin:0;
    padding:0;
    height:100%;
}
.navbar-margin{
    margin: 0px;
}
.bg-navbar{
    background-color: #ffffff;
}
.logo-navbar{
    width: 25%;
}
.font-color-menu{
    color: #065979 !important;
    font-family: sukhumvitSet;
}
.font-color-menu.active{
    color: #009BD3 !important;
    font-family: sukhumvitSet;
}
.font-color-menu:hover{
    color: #009BD3 !important;
    font-family: sukhumvitSet;
}
.font-color-menu-right{
    padding: 0px !important;
    color: #065979 !important;
    font-family: sukhumvitSet;
}
.font-color-menu-right.active{
    padding: 0px !important;
    color: #009BD3 !important;
    font-family: sukhumvitSet;
}
.font-color-menu-right:hover{
    padding: 0px !important;
    color: #009BD3 !important;
    font-family: sukhumvitSet;
}
.border-menu{
    margin-left: 20px;
}
.border-menu-right{
    margin-top: 5px;
    margin-left: 20px;
}
.sub-menu{
    color: #009BD3 !important;
}
.sub-menu:hover{
    background-color: #009BD3 !important;
    color: #FFFFFF !important;
}
.bg-copyright{
    background-color: #0B324E;
    color: #FFFFFF;
    font-family: sukhumvitSet;
    padding: 10px;
    text-align: center;
}
.row-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.bg-footer{
    background-color: #065879;
    padding: 20px;
}
.logo-footer {
    width: 70%;
}
.img-logo-footer {
    text-align: center;
}
.contact-footer{
    padding: 10px;
    color: #FFFFFF;
    font-family: sukhumvitSet;
}
.img-ads{
    height: 300px;
    width: 100%;
}
.bg-ads{
    padding: 0px;
    /*    background: url('/images/home/ads.png') no-repeat;
        height: 400px;*/
}
.icon-playstore{
    width: 50%;
}
.font-playstore{
    position: absolute;
    color: #FFFFFF;
    margin-left: 650px;
    margin-top: 60px;
    font-size: 40px;
}
.link-icon-playstore{
    position: absolute;
    margin-top: -130px;
    margin-left: 800px;
}
.home-aboutus{
    color: #009BD3;
    font-family: sukhumvitSet;
    text-align: center;
}
.home-aboutus-detail{
    padding: 20px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: center;
    font-family: sukhumvitSet;
    font-size: 16px;
    line-height: 1.8pc;
}
.col-aboutus-row{
    padding: 20px;
    margin-left: 100px;
    margin-right: 100px;
    display: inline-flex;
}
.col-aboutus-title{
    color: #009BD3;
    text-align: center;
}
.col-aboutus{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: sukhumvitSet;
    line-height: 1.8pc;
}
.bg-news{
    background: url('/images/register/bg.png') no-repeat;
}
.home-news-readmore {
    float: right;
    color: #CACACA;
    font-size: 16px;
    margin-right: 20px;
}
.home-news-readmore:hover {
    float: right;
    color: #FFFFFF;
    background-color: #065879;
    font-size: 16px;
    margin-right: 20px;
}
.home-news-title {
    color: #009BD3;
    font-family: sukhumvitSet;
    text-align: center;
}
.block-carousel-news{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    background-color: #FFFFFF;
    padding: 20px;
}
.carousel-slide-news{
    margin: 20px;
}
.thumbnail-news {
    display: block;
    padding: 0px; 
    margin-bottom: 0px; 
    line-height: 1.42857143;
    background-color: #fff;
    border: 0px solid #ddd; 
    border-radius: 0px; 
    -webkit-transition: border .2s ease-in-out; 
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.font-date-news{
    color: #25A4D7 !important;
}
.block-activity{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}
.li-block-activity{
    padding: 0px;
}
.caption-activity-title {
    height: 3em;
    white-space: normal;
    overflow: hidden;
    font-family: sukhumvitSet;
}
.caption-activity-detail {
    height: 7em;
    white-space: normal;
    overflow: hidden;
    font-family: sukhumvitSet;
}
.font-activity-news {
    color: #25A4D7 !important;
    text-align: right;
}
.bg-sub-head{
    background-color: #065879;
}
.sub-head{
    margin: 0px;
    padding: 10px;
    margin-left: 50px;
    color: #FFFFFF;
    font-family: sukhumvitSet;
}
.sub-head-font{
    color: #7ADFFE;
}
.maintenance-title {
    color: #009BD3;
    font-family: sukhumvitSet;
    text-align: center;
    margin-bottom: 30px;
}
.maintenance-table-title{
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    text-align: center;
    margin: 0 auto;
    width: 70%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #D0ECF6;
    color: #065979;
    font-family: sukhumvitSet;
}
.p-margin{
    margin: 0px;
}
.maintenance-table-detail{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    margin: 0 auto;
    width: 70%;
    padding: 10px;
    margin-bottom: 20px;
    font-family: sukhumvitSet;
}
.contact-container{
    padding-right: 150px;
    padding-left: 150px;
    margin-bottom: 30px;
    min-height: 70%;
}
.maintence-container{
    min-height: 70%;
}
.contact-title{
    font-family: sukhumvitSet;
    color: #169ED4;
}
.contact-sub-title{
    font-family: sukhumvitSet;
    color: #004A6F;
    font-size: 18px;
}
.contact-font{
    font-family: sukhumvitSet;
}
.contact-col-left{
    padding-left: 0px;
}
.faq-question{
    border-bottom: solid 1px #ccc;
    padding: 10px;
    color: #065979;
    cursor: pointer;
}
.faq-question:hover{
    padding: 10px;
    background-color: #169ED4;
    color: #FFFFFF;
}
.faq-question.active {
    padding: 10px;
    background-color: #169ED4;
    color: #FFFFFF;
}
.osl-title-block{
    text-align: center;
    margin-top: 30px;
    background-color: #169ED4;
    color: #FFFFFF;
    font-family: sukhumvitSet;
}
.osl-block{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    text-align: center;
    padding: 20px;
    padding-top: 100px;
    margin-top: 10px;
}
.osl-block-row{
    padding-top: 50px;
}
.osl-img{
    width: 40%;
}
.osl-block-title1{
    font-family: sukhumvitSet;
    margin-top: 20px;
    margin-bottom: 20px;
}
.osl-block-title2{
    font-family: sukhumvitSet;
    margin-top: 70px;
    margin-bottom: 20px;
}
.osl-block-title3{
    font-family: sukhumvitSet;
    margin-top: 45px;
    margin-bottom: 20px;
}
.osl-block-sub-title3{
    font-family: sukhumvitSet;
    color: #35B986;
}
.osl-block-title4{
    font-family: sukhumvitSet;
    margin-top: 55px;
    margin-bottom: 20px;
}
.osl-block-btn{
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    background-color: #169ED4;
    width: 70%;
    color: #FFFFFF;
}
.osl-block-btn:hover{
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    background-color: #065879;
    width: 70%;
    color: #FFFFFF;
}
.osl-block-number{
    padding: 5px;
}
.osl-col-detail{
    text-align: left;
    font-family: sukhumvitSet;
    font-size: 12px;
}
.osl-img-number{
    position: relative;
    width: 40%;
    float: right;
}
.news-block{
    padding: 5px;
}
.news-block:hover{
    padding: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
}
.newsdetail-title{
    color: #009BD3;
    font-family: sukhumvitSet;
}
.newsdetail-detail{
    margin-top: 30px;
}
.newsdetail-title-other{
    color: #009BD3;
    font-family: sukhumvitSet;
    margin-top: 90px; 
}
.oslform-row-title{
    text-align: center;
    font-family: sukhumvitSet;
}
.oslform-font-title{
    font-size: 26px;
}
.oslform-row-form{
    padding: 20px;
    padding-bottom: 0px;
    font-family: sukhumvitSet;
}
.oslform-row-payment{
    margin-bottom: 10px;
}
.oslform-fill-payment{
    padding-left: 5px;
    padding-right: 5px;
}
.oslform-fill-place{
    padding: 0px;
}
.oslform-rgcheck-row{
    margin-bottom: 10px;
}
.oslform-edu-font{
    font-size: 10px;
    color: #878787;
}
.oslform-warning-font{
    color: red;
}
.oslform-btn{
    margin-left: 5px;
    margin-right: 5px;
}
.register-fill-row{
    margin-bottom: 15px;
}
.register-container{
    padding-left: 250px;
    padding-right: 250px;
    background: url('/images/register/bg.png') no-repeat;
}
.register-panel{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #FFFFFF;
}
.login-fill-row{
    margin-top: 30px;
    margin-bottom: 15px;
}
.login-subfill-row{
    padding-left: 200px;
    padding-right: 200px;
}
.forgotpass-btn{
    text-align: right;
    color: red;
    font-family: sukhumvitSet;
    cursor: pointer;
}
.login-warning-font{
    font-family: sukhumvitSet;
    color: #004975;
}
.login-warning-row{
    margin-top: 5px;
    margin-bottom: 5px;
}
.login-btn{
    background: #FF9D02; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FFDD00, #FF9D02); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFDD00, #FF9D02); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFDD00, #FF9D02); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFDD00, #FF9D02); /* Standard syntax (must be last) */
    color: #ffffff;
    font-family: sukhumvitSet;
}
.register-btn{
    background: #0246FF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#13B7FF, #0246FF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#13B7FF, #0246FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#13B7FF, #0246FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#13B7FF, #0246FF); /* Standard syntax (must be last) */
    color: #ffffff;
    font-family: sukhumvitSet;
}
.register-btn:hover{
    background: #0246FF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#13B7FF, #0246FF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#13B7FF, #0246FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#13B7FF, #0246FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#13B7FF, #0246FF); /* Standard syntax (must be last) */
    color: #ffffff;
    font-family: sukhumvitSet;
}
.modal-forgotpassword-head{
    font-family: sukhumvitSet;
    color: #009BD2;
    padding: 15px;
}
.modal-forgotpassword-footer{
    padding: 15px;
}
.forgotpassword-submit{
    background-color: #169ED4;
    font-family: sukhumvitSet;
    color: #FFFFFF;
    width: 60%;
}
.forgotpassword-submit:hover{
    background-color: #169ED4;
    font-family: sukhumvitSet;
    color: #FFFFFF;
    width: 60%;
}
.guest-container{
    padding-right: 150px;
    padding-left: 150px;
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 70%;
}
.guest-sub-menu{
    border: solid 1px #ccc;
    padding: 10px;
    color: #065979;
    cursor: pointer;
    font-family: sukhumvitSet;
}
.guest-sub-menu.active{
    border: solid 1px #169ED4;
}
.guest-sub-menu:hover{
    border: solid 1px #169ED4;
}
.guest-sub-menu-icon{
    width: 20%;
    margin-right: 10px;
}
/* sub menu */
.navigation {
    width: 300px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
    /*  display: block;
      background-color: #CCC;
      text-decoration: none;
      padding: 10px;
      color: #000;*/
    display: block;
    background-color: #FFFFFF;
    text-decoration: none;
    padding: 10px;
    color: #065979;
    border: solid 1px #ECEBED !important;
    font-family: sukhumvitSet;
    margin-top: -1px;
    z-index: 0;
    position: relative;
}

/* add hover behaviour */
.mainmenu a:hover {
    /*background-color: #C5C5C5;*/
    border: solid 1px #169ED4 !important;
    z-index: 10;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
    display: block;
    max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
    background-color: #FFFFFF;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
    /*background-color: #666;*/
    border: solid 1px #169ED4;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}
.guest-block{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    font-family: sukhumvitSet;
}
.guest-edit-font{
    float: right;
    color: #000000;
    font-size: 14px;
}
.guest-sub-block{
    padding: 20px;
}
.modal-changepass-head{
    font-family: sukhumvitSet;
    color: #009BD2;
    padding: 15px;
    text-align: center;
}
.modal-changepass-footer{
    text-align: center;
    padding: 15px;
}
.changepassword-submit{
    background-color: #169ED4;
    font-family: sukhumvitSet;
    color: #FFFFFF;
    width: 30%;
}
.changepassword-submit:hover{
    background-color: #169ED4;
    font-family: sukhumvitSet;
    color: #FFFFFF;
    width: 30%;
}
.ray-font{
    padding-top: 15px;
}
.ray-border{
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    width: 100px;
    height: 50px;
}
.ray-result{
    text-align: center;
    padding-top: 15px;
}
.custom-table{
    width: 100%;
    text-align: center;
}
.side-sub-menu{
    padding: 0px;
    width: 100%;
}
.side-sub-menu-block{
    padding: 10px !important;
}
.side-sub-menu-block:hover{
    background-color: #088AB2 !important;
    color: #FFFFFF !important;
}
.ray-font-select{
    margin-right: 15px;
    padding-top: 5px;
}
.ray-select{
    display: inline-flex;
}
.osl-table{
    width: 50%;
    margin: 0 auto;
}
.message-icon{
    width: 2%;
    float: right;
    margin-right: 150px;
}
.notify-badge{
    position: absolute;
    right: 140px;
    top: 55px;
    background: red;
    text-align: center;
    border-radius: 50px 50px 50px 50px;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
}
.list-message{
    margin: 0 auto;
    font-family: sukhumvitSet;
}
.list-message-block{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
.extend-payment-block{
    margin: 0 auto;
    margin-bottom: 10px;
}
.extend-payments-block{
    padding: 20px;
}
.extend-name-block{
    padding: 5px;
}
.btn-add-formosl{
    cursor: pointer;
    width: 60%;
}
#add-osl-form{
    margin-bottom: 30px;
}
.btn-remove-osl{
    width: 3%;
    position: absolute;
    margin-left: -80px;
    margin-top: 60px;
    cursor: pointer;
}
.btn-generator{
    cursor: pointer;
    width: 50%;
}
.oslform-container{
    padding-right: 100px;
    padding-left: 100px;
    margin-bottom: 30px;
    min-height: 70%;
}
.oslform-source{
    display: inline-flex;
}
.oslform-source-unit{
    margin-left: 10px;
}
.text-year-osl{
    width: 40%;
}
.summary-block{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    margin-top: 30px;
    padding: 30px;
}
.summary-sub-block{
    margin: 0 auto;
}
.summary-btn-print{
    width: 50%;
}
.list-tab-message{
    background-color: #ECEBED;
}
.list-tab-message:hover{
    background-color: #169ED4;
    color: #FFFFFF;
}
.footer-bottom {
    /*position: absolute;*/
    right: 0;
    bottom: 0;
    left: 0;
}
.font-login-count{
    font-family: sukhumvitSet;
}
.rso-sub-menu{
    white-space: unset !important;
}
.list-message-table{
    overflow-x: hidden;
    height: 450px;
}
/*.footer-bottom {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}*/
/* Global */


img { max-width:100%; }

/*.thumbnails li> .fff .caption { 
    background:#fff !important; 
    padding:10px
}*/

ul.thumbnails { 
    margin-bottom: 0px;
    padding: 0px;
}



/* Thumbnail Box */
.caption-news{
    margin: 20px;
}
.caption-news p {  
    color: #000000;
    font-family: sukhumvitSet;
}
.caption-news-detail{
    height: 4em;
    white-space: normal;
    overflow: hidden;
}


/* Carousel Control */
.control-box {
    text-align: right;
    margin-right: 20px;
}
.carousel-control{
    background: #666;
    border: 0px;
    border-radius: 0px;
    display: inline-block;
    font-size: 34px;
    font-weight: 200;
    line-height: 18px;
    opacity: 0.5;
    padding: 4px 10px 0px;
    position: static;
    height: 30px;
    width: 15px;
}
li { list-style-type:none;}

/*::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }*/
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
#table-scroll-list-skc{
    /*width: 1010px;*/
    overflow-x: scroll;
    /*height: 400px;*/
    font-size: 16px;
}
#table-scroll-list-skc:hover{
    overflow-x: scroll;
    /*position: fixed;*/
}
#table-scroll-list{
    /*width: 1010px;*/
    overflow-x: scroll;
    /*height: 400px;*/
    font-size: 16px;
}
#table-scroll-list:hover{
    overflow-x: scroll;
    /*position: fixed;*/
}
#table-scroll{
    /*width: 1010px;*/
    overflow-x: scroll;
    /*height: 400px;*/
    font-size: 16px;
}
#table-scroll:hover{
    overflow-x: scroll;
    /*position: fixed;*/
}
.Tm::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}
.Tm::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.Tm::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
.Tm::-webkit-scrollbar-corner {
    background-color: transparent;
}
.Tm::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
}
th.tbl1 { min-width: 130px; }
th.tbl2 { min-width: 100px; }
th.tbl4 { min-width: 80px; }
th.tbl5 { min-width: 220px; }

@page {
    size: A4;
    margin: 0;
}
@media print {
    html, body {
        width: 210mm;
        height: 297mm;        
    }
    .contact-container{
        padding-right: 20px;
        padding-left: 20px;
        margin-right: auto;
        margin-left: auto;
    }
    .logo-print{
        width: 80%;
    }
    .summary-block {
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        padding: 0px;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
    .icon-prints{
        display: none
    }
    /*    .printOsl-logo{
            text-align: center;
        }*/
    .row-inline{
        display: inline-flex;
        width: 100%;
    }
    .col-4{
        width: 33%;
    }
    .col-2{
        width: 16%;
    }
}
/* Mobile Only */
@media (max-width: 767px) {
    .page-header, .control-box {
        text-align: center;
    } 
}
@media (max-width: 479px) {
    .caption {
        word-break: break-all;
    }
}