html {
    /* overflow: scroll; */
    
}



body {
    font-family: "PingFang TC", "Microsoft JhengHei", Roboto, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: rgb(228, 230, 235) !important;
    -webkit-overflow-scrolling: touch;
}

a:hover{
    text-decoration: none !important;
}

li, .text-body, .bg-dark p, td{
    color: rgb(228, 230, 235) ;
}


.img1 {
    height: auto;
    width: 100%
}

td {
    vertical-align: middle !important;
}

#news_content hr {
	border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#news_content li{
    padding-top: 5px !important;
}

#news_content ul, #news_content ol{
    padding-bottom: 10px !important;
}

.table-bordered, .table-bordered td, .table-bordered th, .table-bordered tr{
    border-color: #a7a6a6 !important;
    width: auto !important;
    height: auto !important;
}


td>p {
    margin-bottom: 0px !important;
}

.video-padding{
    padding: 520px !important;
}


/* For mobile phones: */
@media only screen and (max-width: 991px) {
    
    .dropdown-menu-dark,
    .dropdown-menu-dark .dropdown-menu {
        color: #fff;
        background-color: #333333; }

    /* links */
    .dropdown-menu-dark a {
        color: #cccccc !important; }

    .dropdown-menu-dark a.dropdown-item:hover,
    .dropdown-menu-dark a.dropdown-item.active,
    .dropdown-menu-dark .dropdown-item:hover > a,
    .dropdown-menu-dark .dropdown-item.active > a,
    .dropdown-menu-dark .dropdown-item > a.active,
    .dropdown-menu-dark a:hover {
        color: #fff !important; 
        font-weight: bold !important;
    }

    /* grid */
    .dropdown-menu-dark .dropdown-divider,
    .dropdown-menu-dark .row.col-border > div,
    .dropdown-menu-dark .row.col-border-sm > div,
    .dropdown-menu-dark .row.col-border-md > div,
    .dropdown-menu-dark .row.col-border-lg > div {
        border-color: #4d4d4d; }

    /* multilevel dropdown inside content : multilevel click issue : [hack|overwriting popper.js] */
    .dropdown-menu-block-md .dropdown-item > .dropdown-menu {
        -webkit-transform: none !important;
                transform: none !important; } 
               
    #header .navbar-collapse.show{
        background-color: #989898 !important;
    }

    .header-text- {
        color: #495057 !important;
    }

    #header .navbar-dark .navbar-collapse.show>.navbar-nav a
    {
        color: #a1a8ae ;
    }

    .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link
    {
        color: white !important;
        font-weight: bold;
    }

    .banner{
        background-position: 50% -50px;
        height: 8rem;
    }

    .w--50-xs{
        width: 50px !important;
    }

    .video-padding{
        padding: 120px !important;
    }
    
}

@media only screen and (max-width: 991px) and (orientation:landscape) {
    .video-padding{
        padding: 200px !important;
    }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .ipad-portrait { color: red; } /* your css rules for ipad portrait */
    .video-padding{
        padding: 220px !important;
    }
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
    .video-padding{
        padding: 280px !important;
    }
}


@media
  only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1200px) ,
  only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1200px),
  only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1200px) ,
  only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1200px),
  only screen and (                min-resolution: 264dpi) and (min-device-width: 1200px) ,
  only screen and (                min-resolution: 2dppx) and (min-device-width: 1200px)
  { 
    .video-padding{
        padding: 500px !important;
    }
}
                         

/* iPad Pro Landscape*/
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {
    .video-padding{
        padding: 390px !important;
    }
}

/* iPad Pro Portrait*/
@media only screen and (min-device-width: 1024px) and (orientation: portrait)  {
    .video-padding{
        padding: 300px !important;
    }
}



.form-control-sm,
.form-label-group ,
.form-control-clean, 
.dropdown-header,
.dropdown-footer,
.dropdown-item,
textarea
{
    color: #cecece !important;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #222222 inset !important;
    caret-color:  rgb(228, 230, 235) ;
}

input:-webkit-autofill {
    -webkit-text-fill-color: rgb(228, 230, 235)  !important;
}


.active ,  .bootstrap-select, .select-form-control  {
    color: white !important;
    font-weight: bold;
}


.banner{
    background-position: 50% -50px;
}

.dropdown-menu{   
    background-color: #3d3d3d !important;
}

.datepicker 
{
    background-color: #ffffff !important;
}

.focused.active
{
    color: black !important;
}

.bg-light-img, input, select, .selected, textarea, .select-form-control1{
    background-image: url('/assets/images/background/bg_light.jpg') !important;
    background-repeat: repeat !important;
    background-color: #222222 !important;
}


.bg-dark-img, .dropdown-item:hover{
    /*background-image: url('/assets/images/background/bg_dark.jpg') !important;*/
    background-repeat: repeat !important;
    background-color: #222222 !important;
}

.bg-dark-img-big{
    background-image: url('/assets/images/background/bg_scroll.jpg') !important;
    background-repeat: repeat !important;
    background-color: #222222 !important;
}

.bg-dark-img-game{
    background-image: url('/assets/images/background/bg_game.jpg') !important;
    background-repeat: repeat !important;
    background-color: #222222 !important;
}


.pswp__bg, .fancybox-bg{
     background: hsla(0, 0%, 7.8%, 0.96) !important;
}

.fancybox-button--close
{
    background: hsla(360, 100%, 100%, 0.7) !important;
    font-size: 25px !important;
}

.pswp__button--arrow--right, .pswp__button--arrow--left{
    top : 90% !important;
    height: 30px !important;
    width: 30px !important;
    font-size: 20px !important;
}


.pswp__button--close{
    height: 30px !important;
    width: 30px !important;
    font-size: 20px !important;
    background-color: black !important;
    color: gray !important;
}

.pswp__counter{
    color: white !important;
}



.modal-content,
.table-dark{
    background-color: #2b2b2b !important;
    height: 100%;
}

.table-sm th,
.table-sm td {
  padding-top: 0.5rem !important; 
  padding-bottom: 0.5rem !important; 
}

.form-control, .bootstrap-select, .border-gray-400, .border {
    border-color: #535455 !important;
}


.mytext{
    color: rgb(228, 230, 235) !important;
    font-weight: normal !important;
}


.select-form-control,
select.form-control:not([size]):not([multiple]) 
{
    background:url('data:image/svg+xml;utf8,<svg width="15" fill="white" viewBox="0 0 129 129" xmlns="http://www.w3.org/2000/svg"><path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/></svg>') no-repeat;
    background-position:center right 15px;
    -moz-appearance:none;   
    line-height: 1.5 !important;
    background-color:#222222 !important;
}