/* Thai */
/*@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    src: url('../../Content/font-web/Kanit/RPQGAQk3DD66RypwKRnBKQ.woff2') format('woff2');
    unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}*/
/* Vietnamese */
/*@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    src: url('../../Content/font-web/Kanit/dTsnx5aTJLsh5XJEX4lpTw.woff2') format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}*/
/* Latin-ext */
/*@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    src: url('../../Content/font-web/Kanit/2fzaAAzWW07YitDl-NekHg.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}*/
/* Latin */
/*@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
    src: url('../../Content/font-web/Kanit/5NAKUBdE3Nb95aTaJlZOXQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}*/

/******************************************************************************************/

@font-face
{
    font-family: 'Kanit';
    src: url('../../Content/font-web/Kanit/Kanit-Regular.eot'); /* IE9 Compat Modes */
    src: url('../../Content/font-web/Kanit/Kanit-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../Content/font-web/Kanit/Kanit-Regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../../Content/font-web/Kanit/Kanit-Regular.woff') format('woff'), /* Pretty Modern Browsers */
    url('../../Content/font-web/Kanit/Kanit-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../../Content/font-web/Kanit/Kanit-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face
{
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal;
    src: url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.eot?v=4.3.0");
    src: url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../../Content/css/font-awesome-4.1.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

body
{
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'Kanit', sans-serif;
}

/* Set padding to keep content from hitting the edges */
.body-content
{
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt
{
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea
{
    max-width: 280px;
}

/* Commu*/
.img-size-commu
{
    width: 50px;
    height: 50px;
}

.text-style-headercontent
{
    font-size: 16px;
    font-weight: bold;
    color: #1a0dab;
}

.text-style-datecontent
{
    font-size: 12px;
    color: gray;
}

.text-stule-datanotfound
{
    background-color: #f9f9f9;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.question-header
{
    background-color: #f9f9f9;
}

.filename-header
{
    background-color: #f9f9f9;
    border-radius: 5px;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
    width: 1000px;
    padding-left: 5px;
}

.display-media-content
{
    max-width: 100%;
}

.icon-display
{
    font-size: 24px;
    color: green;
    padding-top: 15px;
    padding-bottom: 15px;
}

.icon-display-pdf
{
    font-size: 24px;
    color: red;
    padding-top: 15px;
    padding-bottom: 15px;
}

.icon-display-text
{
    font-size: 24px;
    color: blue;
    padding-top: 15px;
    padding-bottom: 15px;
}

/*.content-display-video
{
    padding-top: 15px;
    padding-bottom: 15px;
}*/

.label-style
{
    font-weight: bold;
    font-size: 14px;
}

.timeline
{
    position: relative;
    margin-top: 4px;
    margin-bottom: 30px;
}

    .timeline .line
    {
        position: absolute;
        width: 4px;
        display: block;
        background: currentColor;
        top: 0px;
        bottom: 0px;
        margin-left: 30px;
    }

    .timeline .separator
    {
        border-top: 1px solid currentColor;
        padding: 5px;
        padding-left: 40px;
        font-style: italic;
        font-size: .9em;
        margin-left: 30px;
    }

    .timeline .line::before
    {
        top: -4px;
    }

    .timeline .line::after
    {
        bottom: -4px;
    }

    .timeline .line::before,
    .timeline .line::after
    {
        content: '';
        position: absolute;
        left: -4px;
        width: 12px;
        height: 12px;
        display: block;
        border-radius: 50%;
        background: currentColor;
    }

    .timeline .panel
    {
        position: relative;
        margin: 10px 0px 21px 20px;
        clear: both;
    }

        .timeline .panel::before
        {
            position: absolute;
            display: block;
            top: 8px;
            left: -24px;
            content: '';
            width: 0px;
            height: 0px;
            border: inherit;
            border-width: 12px;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }

        .timeline .panel .panel-heading.icon *
        {
            font-size: 20px;
            vertical-align: middle;
            line-height: 40px;
        }

        .timeline .panel .panel-heading.icon
        {
            position: absolute;
            left: -59px;
            display: block;
            width: 40px;
            height: 40px;
            padding: 0px;
            border-radius: 50%;
            text-align: center;
            float: left;
        }

    .timeline .panel-outline
    {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

        .timeline .panel-outline .panel-body
        {
            padding: 10px 0px;
        }

        .timeline .panel-outline .panel-heading:not(.icon),
        .timeline .panel-outline .panel-footer
        {
            display: none;
        }

    .timeline .panel-top
    {
        /*position: relative;*/
        margin: 10px 0px 21px 70px;
        clear: both;
    }

    .timeline .panel-heading a:before, .timeline_ .panel-heading a:before {
        font-family: FontAwesome;
        content: "\f078";
        padding-left: 5px;
        float: right;
        color: #999999;
        font-weight: 300;
    }

    .timeline .panel-heading a.collapsed:before, .timeline_ .panel-heading a.collapsed:before {
        content: "\f054";
    }

    .timeline_ h4 i{
        padding: 0.2rem 0 0;
    }

    .delete-action i {
        font-size: 1rem;
    }
.fa-star
{
    color: red;
}

.videoWrapper
{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    width: 90%; /* You can set this width to whatever suits your needs */
    margin: 10px auto;
}

    .videoWrapper video
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 90%;
    }

/*********************************
        Comment List styles
**********************************/
.comment-list .row
{
    margin-bottom: 15px;
}

.comment-list .panel .panel-heading
{
    padding: 4px 15px;
    position: absolute;
    border: none;
    /*Panel-heading border radius*/
    border-top-right-radius: 0px;
    top: 1px;
}

    .comment-list .panel .panel-heading.right
    {
        border-right-width: 0px;
        /*Panel-heading border radius*/
        border-top-left-radius: 0px;
        right: 16px;
    }

    .comment-list .panel .panel-heading .panel-body
    {
        padding-top: 6px;
    }

.comment-list figcaption
{
    /* For wrapping text in thumbnail */
    word-wrap: break-word;
}

/* Portrait tablets and medium desktops */
@media (min-width: 768px)
{
    .comment-list .arrow:after, .comment-list .arrow:before
    {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
    }

    .comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:before
    {
        border-left: 0;
    }

    /***** Left Arrow *****/
    /* Outline effect style */
    .comment-list .panel.arrow.left:before
    {
        left: 0px;
        top: 30px;
        /* Use boarder color of panel */
        border-right-color: inherit;
        border-width: 16px;
    }
    /* Background color effect */
    .comment-list .panel.arrow.left:after
    {
        left: 1px;
        top: 31px;
        /* Change for different outline color */
        border-right-color: #FFFFFF;
        border-width: 15px;
    }
    /***** Right Arrow *****/
    /* Outline effect style */
    .comment-list .panel.arrow.right:before
    {
        right: -16px;
        top: 30px;
        /* Use boarder color of panel */
        border-left-color: inherit;
        border-width: 16px;
    }
    /* Background color effect */
    .comment-list .panel.arrow.right:after
    {
        right: -14px;
        top: 31px;
        /* Change for different outline color */
        border-left-color: #FFFFFF;
        border-width: 15px;
    }
}

.comment-list .comment-post
{
    margin-top: 6px;
}

/* For IPad */
@media (max-width: 1200px)
{
    .navbar-header
    {
        float: none;
    }

    .navbar-left, .navbar-right
    {
        float: none !important;
    }

    .navbar-toggle
    {
        display: block;
    }

    .navbar-collapse
    {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-fixed-top
    {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-nav
    {
        float: none!important;
        margin-top: 7.5px;
    }

        .navbar-nav > li
        {
            float: none;
        }

            .navbar-nav > li > a
            {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .collapse.in
    {
        display: block !important;
    }
}

@media (min-width: 768px)
{
    .navbar-right .dropdown-menu
    {
        right: initial;
    }
}

.grid-buttom
{
    padding-bottom: 25px;
}

.form-group.required .label-style:before
{
    color: #f00;
    content: "*";
}

.pull-right{
    float:right !important;
}

.pull-left {
    float: left !important;
}