/* 
    ======================================= 
    fonts
    =======================================
    */

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700;800&display=swap');




    /* 
    ======================================= 
    main
    =======================================
    */

    body{
        background-color: #f9f9f9 !important;
    }


    #wrapper{
        min-width: 0px !important;
        padding-bottom: 50px;
        background-color: #f9f9f9 !important;

    }




    /* 
    ======================================= 
    layout
    =======================================
    */



    .landing-header{
        color:#3db9f7;
        font-size: 26px;
        font-weight: 400;
        margin-top: 0px;
    }

    .landing-intro{
        color:#666;
        padding: 0px 0px 10px 0px;
        font-size: 14px;
    }


    .landing-subsection-header{
        color:#3db9f7;
        font-size: 22px;
        font-weight: 400;
    }

    .landing-subsection-description{
        color:#666;
        font-size: 14px;
        padding-bottom: 15px;
    }


    .landing-section-box{
        padding:10px;
        margin:15px auto 15px auto;
        border-radius: 15px;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0,3,5,0.25);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0,3,5,0.25);
        box-shadow: 0px 2px 5px 0px rgba(0,3,5,0.25);
        background-color: #fff;
    }


    .landing-section-box-padding{
        padding:15px;
    }



    .landing-section-wrapper-box{
        padding:10px 20px 10px 20px;
        border-radius: 10px;
        border: 1px solid #ddd;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: #f3f3f3;
    }


    .landing-section-divider{
        padding:20px;
        
    }



    /* 
    ======================================= 
    user level
    =======================================
    */


    .user-welcome-name{
        font-size: 20px;
        font-weight: 600;
        color: #666;
    }

    .user-level-wrapper{

    }

    .user-level-name{
        font-weight: 600;
        font-size: 16px;
        color: #3db9f7;
    }


    .user-view-count{
        font-weight: 600;
        font-size: 13px;
        color: #666;
    }


    .user-togo{
        /*
        font-weight: 400;
        font-size: 13px;
        color: #666;
        font-style: italic;
        margin-top: 15px;
        padding: 15px 0px 0px 0px;
        border-top: 1px solid #ccc;
        */
        color:#fff;
        font-weight: 500;
        font-size: 13px;
        background-color: #3b98c7;      
        border-radius: 20px;
        align-items: center;
        padding: 10px 20px 12px 20px;
        margin: 20px auto 0px auto;
        webkit-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        -moz-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
    }

    .user-badge{
        padding: 25px 0px 15px 0px;
    }

    .user-badge-image{
        max-width:80px;
        max-height:80px;
    }




    .container-progressbar{
        position:relative;
        padding: 0px 20px 0px 20px;
        max-width: 200px;
        height: 5px;
        margin: 10px auto 0px auto;
    }




    /* 
    ======================================= 
    asset card
    =======================================
    */



    .asset-card-wrapper{
        color: #666;
        background-color: #fff;
        border: 1px solid #c7c7c7;
        border-radius: 10px;
        padding: 12px 15px;
        margin: 10px;
        font-size: 14px;
        min-height: 360px;
        min-width: 220px;
        max-width: 250px;
        webkit-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        -moz-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        position: relative;
    }



    .asset-card{
        /*width: 185px;*/
        border: none;
        background-color: #fff;
        min-height: 295px;
    }



    .asset-card-body{
        padding: 0px 0px 5px 0px !important;
    }


    .asset-card-thumb-wrapper{
        min-height: 120px;
        position: relative;
    }

    .asset-card-wrapper .card-title{
        margin-top: 5px;
        margin-bottom: 0px !important;
    }

    .asset-card-wrapper .card-footer{
        background-color: #fff !important;
        border: none !important;
    }


    .asset-card-with{
        font-size: 12px;
        font-weight: 500;
        color: #666;
        display: none;
    }


    .asset-card-length{
        position: absolute;
        bottom: 0px;
        z-index: 5000;
        color: #fff;
        /* background-color: #ccc; */
        background-color: rgb(169 169 169 / 90%);        
        text-align: right;
        padding-right: 5px;
        font-size: 12px;
        width: 100%;
    }



    .asset-card-description{
        font-size: 12px;
        font-weight: 400;
        color: #666;
        line-height: 15px;
    }

    .asset-card-footer{
        position: absolute;
        /* bottom: 10px; */
        width: 80%;
        top: 86%;
        left: 50%;
        transform: translate(-50%, -50%);
    }



    .asset-card-status-wrapper{
        margin-top: 10px;
    }


    .asset-card-status-box{
        color:#fff;
        background-color: #666;
        height: 25px;        
        border-radius:15px;
        align-items: center;
        width: max-content;
        padding: 2px 10px 3px 10px;
        margin-right: 2px;
        margin-left: 2px;
        webkit-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        -moz-box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
        box-shadow: 0px 2px 4px 0px rgba(0,3,5,0.10);
    }


    .asset-card-status-icon{
        padding-right: 5px;
    }


    .asset-card-status-text{
        color:#fff;
        font-weight: 600;
        font-size: 11px;
        font-family:'Sarabun', sans-serif;
        padding-right: 5px;
    }


    .asset-card-status-viewed{
        background-color: #3b98c7;
    }

    .asset-card-status-new{
        background-color: #3db9f7;
    }





    /* ======================================= */





    a.landing-button{
        padding: 10px 15px 10px 15px;
        font-size: 12px !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 5px;
        border:none !important;
        width: 100%;
        text-align: center;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 5px;
    }


    a.link-display{
        font-weight: 600 !important;
    }






    /* ======================================================= */




    .discussionboard-wrapper{
        position: relative;
        z-index: 1;
        /*background: #FFFFFF;*/
        /*margin: 30px auto 0px auto;*/
        padding: 10px;
        text-align: left;
        /*-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);*/
        /*-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);*/
        /*box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);*/
        /*border:1px solid #ccc;*/
    }


    .discussionboard-header{
        font-size: 18px;
        font-weight: 600;
        color: #666;
    }

    .discussionboard-description{
        font-size: 14px;
        font-weight: 400;
        color: #666;
    }



    .discussionboard-message-box{
        display: none;
        color: #3b98c7;
        /* background-color: #3db9f7; */
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        padding: 10px;
        margin-bottom: 15px;
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
        margin-top: 10px;
        line-height: 16px;
        font-style: italic;
        
    }


    .discussionboard-form-holder-reply{
        padding:10px 0px 0px 0px;
    }


    .discussionboard-form-error{
        display: none;
        color:#fff;
        background-color: #1985E0;
        font-size: 14px;
        text-align: center;
        padding:10px;
        margin-bottom: 15px;
        
    }


    .discussionboard-input-msg{
        color: #666;
        background-color:#fff;
        border: 1px solid #ccc;
        padding:15px;
        font-size: 13px;
        font-weight: 700;
        margin:0px 0px 0px 0px;
        
    }

    .discussionboard-input{
        color: #666;
        background-color:rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid #ccc;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        padding:10px 10px 2px 5px;
        font-size: 13px;
        font-weight: 700;
        margin:0px;
        
    }

    .discussionboard-input-sub-wrapper{
        display: none;
    }


    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #aaa;
        opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #aaa;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: #aaa;
    }

    .discussionboard-submit{
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 1rem 0;
        font-family: inherit;
        -webkit-appearance: none;
        -webkit-transition: background-color .25s ease-out,color .25s ease-out;
        transition: background-color .25s ease-out,color .25s ease-out;
        font-size: 12px;
        text-align: center;   
        border-radius: 5px;
        padding: 15px 20px 15px 20px !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: bold;
        background-color: #11568a;
        text-decoration: none;
        cursor: pointer;
    }


    .discussionboard-submit:hover,
    .discussionboard-submit:active,
    .discussionboard-submit:focus {
        background-color: #3db9f7;
        text-decoration: none;
    }


    .discussionboard-wrapper-link-commentform{
        padding: 20px;
        border: 1px solid #ccc;
        margin:0px 0px 15px 0px;
    }


    /* ======================================================= */


    .contact-header{
        font-size: 18px;
        font-weight: 600;
        color: #666;
    }

    .contact-description{
        font-size: 14px;
        font-weight: 400;
        color: #666;
    }


    /* ======================================================= */


    .thread-wrapper{
        
    }

    .thread-block{
        padding:10px;
        font-size: 12px;
        border-bottom:1px solid #ccc;
    }


    .thread-break{
        margin-bottom:20px;
    }



    .discussionboard-load-wrapper{
        display: none;
    }


    .thread-reply-tothis{
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 5px 0;
        font-family: inherit;
        -webkit-appearance: none;
        -webkit-transition: color .25s ease-out,color .25s ease-out;
        transition: color .25s ease-out,color .25s ease-out;
        font-size: 12px;
        text-align: center;   
        padding: 5px 0px 5px 0px !important;
        border: none !important;
        font-weight: bold;
        color: #3db9f7;
        text-decoration: none;
    }


    .thread-reply-tothis:hover,
    .thread-reply-tothis:active,
    .thread-reply-tothis:focus {
        color: #3db9f7;
        text-decoration: none;
    }
    

    .thread-link-commentform{
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 5px 0;
        font-family: inherit;
        -webkit-appearance: none;
        -webkit-transition: color .25s ease-out,color .25s ease-out;
        transition: color .25s ease-out,color .25s ease-out;
        font-size: 12px;
        text-align: center;   
        padding: 5px 0px 5px 0px !important;
        border: none !important;
        font-weight: bold;
        color: #3db9f7;
        text-decoration: none;
    }


    .thread-link-commentform:hover,
    .thread-link-commentform:active,
    .thread-link-commentform:focus {
        color: #3db9f7;
        text-decoration: none;
    }



    .discussionboard-optional-message{
        padding: 15px 0px 0px 0px;
        color: #666;
        font-size: 12px;
        font-style: italic;
    }


    .thread-user{

    }

    .thread-user-email{
        color: #999;
    }

    .thread-date{
        color: #999;
    }





    /* ======================================================= */





    /* Small devices (landscape phones) */
    @media (min-width: 576px) { 


    }

    /* Medium devices (tablets) */
    @media (min-width: 768px) { 


    }

    /* Large devices (desktops) */
    @media (min-width: 992px) { 


    }

    /* Extra large devices (large desktops) */
    @media (min-width: 1200px) { 

        

    }



    /* ======================================================= */