@import url('font.css');
@import url('fontawesome.css');

/*** 

====================================================================
    Reset
====================================================================

 ***/

* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    font-family: 'KhmerOSBattambang-Bold';
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

@media (max-width: 767px) {
    * {
        line-height: 1.6;
    }
    .app-icon {
        width: 5vh;
    }
}


/*** 

====================================================================
    Global Settings
====================================================================

 ***/

body {
    line-height: 1.8em;
    background: #ffffff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #2b2b2b;
}

a:hover {
    text-decoration: none;
    outline: none;
    color: #003091;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: white;
    position: relative;
    margin: 0px;
    background: none;
    line-height: 1.6em;
    font-family: 'KhmerOSBattambang-Bold';
}


/*** 

====================================================================
    General Class
====================================================================

 ***/

.calendar-content .thead td {
    font-family: 'Khmer OS Moul';
    font-size: 1.3vw;
}

.table td,
.table th {
    padding: .80rem .50rem .80rem .50rem;
    vertical-align: top;
    border-top: 0px solid rgba(6, 53, 101, 0.8313725490196079);
    border-bottom: 0.9vh solid rgba(6, 53, 101, 0.8313725490196079);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid rgba(6, 53, 101, 0.8313725490196079);
}

.thead td {
    border-bottom: 0px solid rgba(6, 53, 101, 0.8313725490196079);
}

.calendar-content thead {
    background-color: rgba(255, 0, 0, 0.3411764705882353);
}

.calendar-content-bottom thead {
    /*background-color: rgba(255, 0, 0, 0.3411764705882353);*/
}

.calendar-datetime .time {
    font-family: 'Digital-7';
    line-height: 1;
}

.calendar-content-bottom .table td {
    font-family: 'KhmerOSSiemreap';
    padding:0.5vw !important;
}

.td-description {
    text-align: left;
    background-color: rgba(39, 0, 35, 0);
}

/*.tbody td {
    font-size: 1vw;
}*/

.td-description {
    font-size: 2vw;
}

.tbody th {
    font-size: 1vw;
    font-family: 'KhmerOSBattambang-Bold';
}

.tbody .lead-name {
    font-family: 'Khmer OS Moul';
    font-size: 2vw !important;
}

.td-meeting {
    padding-top: 80px;
}

.calendar-content .td-time {
    font-family: 'KhmerOSSiemreap';
    /*font-size: 1.2vw;*/
}

.tbody .meeting-ground {
    font-size: 1.7vw;
    font-family: 'KhmerOSSiemreap';
}

.tbody .meeting-room {
    background-color: rgba(41, 49, 80, 0.18);
    font-size: 1.3vw;
}

.tbody .building {
    background-color: rgba(65, 78, 95, 0.23);
}

.tbody .status {
    background-color: rgba(39, 0, 35, 0);
}

.tbody .td-datetime {
    background-color: rgba(65, 78, 95, 0.23);
    
}
.tbody .building, .status{
    font-size: 1.7vw;
}
.calendar-content .td-datetime, .meeting-ground{
    font-size: 1.7vw;
}
.calendar-content-bottom .table td,
.table th {
    padding: .75rem .50rem .50rem .75rem;
    vertical-align: top;
    border-top: 0px solid rgba(255, 255, 255, 0.8313725490196079);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8313725490196079);
}

.calendar-content-bottom .thead .head-title-news {
    border-bottom: 0px solid rgba(255, 255, 255, 0.8313725490196079);
}

.calendar-content-bottom .table .wrap-app-icon {
    background-color: rgba(181, 181, 181, 0.06);
    border-bottom: 0px solid rgba(255, 255, 255, 0.8313725490196079);
}

.bg-img-respon {
    background-color: #0f1597;
    /*background-image: url('../img/flag-background.png');*/
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
}
.tbody .head-lead-by {
    font-family: 'KhmerOSSiemreap', 'Regular';
}

.tbody .lead-position {
    font-family: 'KhmerOSSiemreap', 'Regular';
}
.tbody .head-lead-by, .lead-position, .td-time{
    font-size: 1.7vw;
}
.calendar-datetime h5 {
    font-size: 2vw;
}

.calendar-datetime h1 {
    font-size: 3vw;
}

.calendar-content {
    background-color: rgba(0, 0, 0, 0.16);
    width: 100%;
}

.app-icon {
    width: 5vh;
}

.tbody .news-source {
    font-size: 0.8vw;
    /*font-family: 'Helvetica';*/
    font-family: 'KhmerOSSiemreap', 'Regular';
    color: #ffffff73;
}
.tbody .desktop-news-title{
    font-size: 1.3vw;
    font-family: 'KhmerOSSiemreap', 'Regular';
}
.calendar-content .available {
    background-color: rgba(255, 100, 100, 0.3411764705882353);
}
.table {
    margin-bottom: 0rem;
}
.calendar-content-bottom .thead .head-title-news {
    font-size: 2.5vh;
}
.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.tb-desktop .desktop-Content-meeting{
    font-size: 1.3vw;
    width: 70vw;
}

.desktop-location {
    width:15vw;
}

.desktop-room, .desktop-status {
    width:10vw;
}
.desktop-datetime{
    width:15vw;
}
.desktop-datetime, .desktop-Content-meeting, .desktop-room, .desktop-location, .desktop-status{
    font-size: 1.8vw !important;
}
.tb-desktop .thead  tr td{
    padding: .50rem .50rem .50rem .50rem;
}
.tb-desktop{
    z-index:99;
}
.header-banner{
    width:85%;
}
.app-mpwt{
    padding-right: .40vw;
}

.header-content-bottom{
    background-color:red;
}
.app{
    width:30%;
    padding-left: 5px;
}
.app1{
    background-color: rgba(255, 0, 0, 0.3411764705882353);
    padding-left: 5px;
    border-bottom: 0.8vh solid rgb(96, 12, 84)!important;
}
.app2{
    background-color: rgba(255, 0, 0, 0.21);
    padding-left: 5px;
    border-left:1px solid black;
    border-bottom: 0.8vh solid rgb(96, 12, 84)!important;
}
.app3{
    background-color: rgba(255, 0, 0, 0.21);
    padding-left: 5px;
    border-left:1px solid black;
    border-bottom: 0.8vh solid rgb(96, 12, 84)!important;
}
.calendar-content-bottom table tr th{
    padding-left: 1rem;

}
/*** 

====================================================================
    Maquee Text animat
====================================================================

 ***/
.marquee1 {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.marquee1 .news-title {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: marquee1 40s linear infinite;
 -webkit-animation: marquee1 40s linear infinite;
 animation: marquee1 40s linear infinite;
    animation-delay: 1s;
}
/* Move it (define the animation) */
@-moz-keyframes marquee1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
.marquee1 .news-title:hover {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
 }



.marquee2 {
width:100%;
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.marquee2 .news-title {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: marquee2 40s linear infinite;
 -webkit-animation: marquee2 40s linear infinite;
 animation: marquee2 40s linear infinite;
    animation-delay: 15s;
}
/* Move it (define the animation) */
@-moz-keyframes marquee2 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee2 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee2 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
.marquee2 .news-title:hover {
 -moz-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 animation-play-state: paused;
 }



/*** 

====================================================================
    Padding,Margin Class
====================================================================

 ***/
.ptop-5 {
    padding-top: 5px;
}
.ptop-10 {
    padding-top: 10px;
}
.ptop-15 {
    padding-top: 15px;
}

.ptop-20 {
    padding-top: 20px;
}

.ptop-25 {
    padding-top: 25px;
}

.ptop-30 {
    padding-top: 30px;
}

.ptop-35 {
    padding-top: 35px;
}

.ptop-40 {
    padding-top: 40px;
}
.pbot-5 {
    padding-bottom: 5px;
}.pbot-10 {
    padding-bottom: 10px;
}
.pbot-15 {
    padding-bottom: 15px;
}

.pbot-20 {
    padding-bottom: 20px;
}
.mtop-10 {
    margin-top: 10px;
}
.mtop-25 {
    margin-top: 25px;
}
.mtop-20 {
    margin-top: 20px;
}
.mbot-25 {
    margin-bottom: 25px;
}
.mbot-20 {
    margin-bottom: 20px;
}
.p-t-b{

}
.news-thumnail{
    border-radius:0.2vw;
    width:4.5vw;
    margin-top:0.7vh;
}
.wrap-title{
    margin-left:5.5vw;margin-top:0.3vh;
}
/*** 

====================================================================
    Colors Class
====================================================================

 ***/

.calendar-colorwhite {
    color: white !important;
}
.calendar-content-bottom{
    background-color: rgba(0, 0, 0, 0.16);
}

/*** 

====================================================================
    @Media Screen web
====================================================================

 ***/

@media (min-width: 769px) {
    .calendar-justify-content-end {
        display: flex!important;
        justify-content: flex-end!important;
    }
    .tbody .lead-name {}
    .status {
        line-height: 3;
    }
    
}

@media (max-width: 769px) {
    .app-icon {
        width: 6vh;
    }
    .tbody td {
        font-size: 2.5vw;
    }
    .td-description {
        font-size: 2.8vw !important;
    }
    .calendar-content .td-time {
        font-size: 2vw;
    }
    .tbody .meeting-ground {
        font-size: 2vw;
    }
    .calendar-content-bottom .tbody td {
        font-size: 3vw;
    }
    .calendar-datetime h5 {
        font-size: 2.5vw;
    }
    .calendar-datetime h1 {
        font-size: 4.5vw;
    }
    .calendar-content .thead td {
        font-size: 2.5vw;
    }
    .calendar-content-bottom .thead .head-title-news {
        font-size: 2.5vh;
    }
    .table td,
    .table th {
        padding: .20rem .10rem .20rem .30rem;
    }
    .tbody .news-source {
        font-size: 2vw;
    }
    .calendar-content-bottom .table .wrap-app-icon {
        padding: .75rem .0rem .75rem .0rem;
    }
    .tbody .head-lead-by {
        font-size: 2.5vw;
        font-family: 'KhmerOSSiemreap', 'Regular';
    }
    .tbody .lead-position {
        font-size: 2.5vw;
        font-family: 'KhmerOSSiemreap', 'Regular';
    }
    .tbody .lead-name {
        font-family: 'Khmer OS Moul';
        font-size: 2.5vw !important;
    }
    .mobile-pbot-20{
        padding-bottom:20px;
    }
    .mobile-mtop-20{
        margin-top: 20px;
    }
    .tbody .desktop-news-title{
        font-size: 16px !important ;
    }
    .news-thumnail{
        border-radius:0.2vw;
        width:50px;
        margin-top:0.7vh;
    }
    .wrap-title{
        margin-left:60px;margin-top:0.3vh;
    }
    .calendar-content-bottom .tb-mobile .tbody .news-source {
        font-size: 12px !important;
    }
}
@media (min-width: 1280px) and (min-height: 2500px){
    .md-fixed-bottom{
        position: absolute;
        bottom: 0px;
        width: 100vw;
        background-color: #01081d42;
    }
    .app-icon {
        width: 3vh;
    }
    .wrap-body {
        height:100%;
    }
}
@media (max-width: 1537px) {
    .wrap-body {
        height:;
    }
}
@media (max-width: 992px) {
    .app-icon {
        width: 6vh;
    }
}
@media (min-width: 993px) {
    .app-icon {
        width: 5vh;
    }
}
@media (max-width: 1200px) {
    .wrap-body {
        opacity: 0.9;
        height: auto;
    }
}
@media (min-width: 3000px) {
    .app-icon {
        width: 7vh;
    }
}
@media (max-height: 660px) and (min-width: 1200px){
    .lg-color {
        background-image: radial-gradient(circle, #0067ff, #184cce, #17329f, #0c1a73, #00034a);
    }
}

/*** 

====================================================================
    @Media Screen mobile
====================================================================

 ***/
.tb-mobile .td-datetime{
    width:10%;
}
.xs-position, .xs-room, .xs-status{
    font-size: 2vw;
    font-family: 'KhmerOSSiemreap', 'Regular';
}
.xs-lead-name{
    font-family: 'Khmer OS Moul';
    font-size: 2vw !important;
}
.tb-mobile td {
    padding: .75rem .30rem .75rem .30rem;
}
.calendar-content .tb-mobile .td-description{
    font-size: 2.5vw !important;
}
.tbody .xs-leader-name {
    font-family: 'Khmer OS Moul';
    font-size: 1.5vw !important;
}
.tb-mobile .td-datetime{
    font-size: 2vw;
}
.calendar-content .tb-mobile .thead td{
    font-size: 2vw;
}
.calendar-content .tb-mobile .td-time {
    font-family: 'KhmerOSSiemreap';
    font-size: 2vw;
}
.wrap-mobile-app{
    padding:20px;
}
.tb-mobile .app-icon{
    width: 8vh;
}
.calendar-content-bottom .tb-mobile .tbody td {
    font-size: 2.2vw;
}
.calendar-content-bottom .tb-mobile .tbody .news-source {
     font-size: 1.8vw;
}

/*** 
====================================================================
    Screen LCD
====================================================================
 ***/
@media (min-width: 1280px){
    #content-colum-overflow{
        height:auto;
        overflow: hidden; 
    }
    #content-bottom-colum-overflow{
        height:auto;
        overflow: hidden; 
    }
    .break{
        height: 6vh;
        /* background-color: #051160; */
        z-index: 99;
        margin-top: -5.5vh;
        position: relative;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000342+100&0+1,1+89 */
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 1%,rgb(0, 9, 128) 89%,rgb(6, 47, 105) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 1%,rgb(0, 9, 128) 89%,rgb(6, 47, 105) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 1%,rgb(0, 9, 128) 89%,rgb(6, 47, 105) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000342',GradientType=0 ); /* IE6-9 */
        }
}
.mpwt-app{
    float:right;
}
.player{
    z-index: 99;
}