/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 1, 2016, 2:03:59 PM
    Author     : yyk
    version    : 1.0.0
    last update: Sept 24, 2017 10:13:30 PM
*/

.my-container{
    padding: 20px;
    /*    display: table;
        table-layout: fixed;
        height: 100%;
        width: 100%;*/
}

.wrap-text {
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
}

.icon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-cctv:before {
    content: "\e900";
}

.item-div {
    margin-bottom: 15px;
}

.item-detail{
}

.cursor-pointer{    
    cursor:pointer;
}

.item-border{
    background-color: white;
}

.border-active{
    border: 1px green solid;    
}

.border-inactive{
    border: 1px orange solid;
}

.item-gallery{
    width:100%;
    height:100%;
}

.animation-fading{
    animation:fading 1s;
    -webkit-animation:fading 1s;
    -o-animation:fading 1s;
    -moz-animation:fading 1s;
}

@keyframes fading
{
    0%{opacity:0}
    100%{opacity:1}
}

.detail-message {
    max-height: 100px;
    transition: all 1s linear;
    -webkit-transition: max-height 1s linear;
    -moz-transition: max-height 1s linear;
    -ms-transition: max-height 1s linear;
    -o-transition: max-height 1s linear;
}

.detail-message.enlarged {
    max-height: 100000px;
    transition: all 1s linear;
    -webkit-transition: max-height 1s linear;
    -moz-transition: max-height 1s linear;
    -ms-transition: max-height 1s linear;
    -o-transition: max-height 1s linear;
}

.row-centered {
    text-align:center;
}

.row-topped {
    vertical-align: top;
}

.row-bottomed {
    vertical-align:bottom;
}

.col-lefted {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:center;
    /* inline-block space fix */
    margin-right: -4px;
}

.col-righted {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:right;
    /* inline-block space fix */
    margin-right: -4px;
}

.col-centered {
    display:inline-block;
    float:none;
    vertical-align: middle;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right: -4px;
}

.bg-white{
    background-color: white;
}

.delete-button{
    cursor:pointer;
}

fieldset {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 10px;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
    box-shadow:  0px 0px 0px 0px #000;
}

legend {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

.vision-container{
    border: 1px  #ddd !important;
    border-radius: 50%;
    background-color: #1677c3;
    color: #dde3f0;
    text-align: center;
}

.item-detail-image{
    width: 100%;
}

.item-detail-container{
    padding: 10px;
}

.arrow{
    position: absolute;
    border: solid black 1px;
    border-radius: 50%;
    padding:5px;
}

.arrow-left{
    top: 40%; 
    left: 0%;
}

.arrow-right{
    top: 40%; 
    right: 0%;
}

/*cart*/

.border-bottom{
    border-bottom: black 1px solid;
    padding-top: 10px;
    padding-bottom: 10px;
}

.never-show-button{
    cursor: pointer;
}


td.details-control {
    /*	background: url('../images/details_open.png') no-repeat center center;
            cursor: pointer;*/
}
tr.shown td.details-control {
    /*background: url('../images/details_close.png') no-repeat center center;*/
}

.home-image{
    width: 100%;
}

.home-image:hover{
    opacity: 0.5;
}

.navbar-brand{
    padding: 5px 15px 5px 15px;
}

div.DTED_Lightbox_Wrapper{
    z-index: 9999;
}

.DTE_Field_InputControl select{
    width: 100%;
}

.sub_data_table{
    padding-left:1%
}

.dataTables_wrapper{
}

.complete_order{
    background: orange; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, orange, yellow, white); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, yellow, white); /* For Opera 11.6 to 12.0 */
    background: -moz-linear-gradient(right, orange, yellow, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange, yellow, white); /* Standard syntax */
}

/*.box-header{
    cursor: zoom-out;
}

.box-header.minimized{
    cursor: zoom-in;
}*/

.highlight{
    background-color: grey;
    font-size: large;
    padding: 5px;
    color: white;
}

.editor-datetime{
    z-index: 10000!important;
}

/*.inner{
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.15);
}*/

.inner-left{
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.15);
}

.icon-left{
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.15);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.child td::before{
    display:block;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before{
    position: static;
}

.sidebar-menu li > .pull-left-container{
    /*    position: absolute;
        right:10px;
        top:50%;
        margin-top:-7px;*/
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
    padding-left: 10px!important;
}

.carousel-image{
    width: 100%;
}

.demo-item-container{
    border: 2px red solid;
}

.carousel-inner>div.demo-item{
    margin:10px;
}

.demo-item{    
    border-radius: 50%;
    box-shadow: 0px 0px 10px 5px rgba(255,165,0,0.5);
}

.hover_img_container {
    position:relative; 
}

.hidden_img {
    position:absolute; 
    display:none; 
    z-index:99; 
}

.hover_img_container:hover .hidden_img { 
    display:block; 
}

.col_padding_container{
    padding-top: 15px;
    padding-bottom: 15px;
}

.title_content{
    background-color: white;
    /*    opacity: 0.8;
        filter:alpha(opacity=80);*/
}

.title_content:hover{
    /*    opacity: 1;
        filter:alpha(opacity=100);*/
}

.icon_title{
    text-align: center;
    color:black;
    font-size:20px;
}

.custom-progress-bar{
    padding-top: 30px;
    font-size: 30px;
}

.control-label.text-left{
    text-align: left;
}

.holder{
    z-index: 9998;
    position: absolute;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 5px;
    background-color: green;
    color: white;
    animation: zooming 1s infinite;
    -webkit-animation: zooming 1s infinite;
    -o-animation: zooming 1s infinite;
    -moz-animation: zooming 1s infinite;
}

.holder::before {
    z-index: 9998;
    content: "";
    position: absolute;
    top: -19px;
    width: 0px;
    height: 0px;
    border-bottom: 20px solid green;
    border-right: 13px solid transparent;
    border-left: 5px solid transparent;
}

@keyframes zooming {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.1;
    }
}

.text-white{
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* Change the order of the indicators. 
   Return them to the center of the slide. */
.reverse > .carousel-indicators {
    width: auto;
    margin-left: 0;
    transform: translateX(-50%);
}
.reverse > .carousel-indicators li {
    float: right;
    margin: 1px 4px;
}
.reverse > .carousel-indicators .active {
    margin: 0 3px;
}

.img-oval-border {
    height: 100px;
    border-radius: 50%;
}

.img-oval{
    height: 100px;
    padding:15px;
    width:100%;
}

.home-category-img {
    margin: auto 10px auto auto;
    width: 40px;
    height: 40px;
}

.overlay-wrapper{
    position: relative;
}

.home_category_holder {
    list-style-type: none;
}

.home_category_link{    
    color: inherit;
}

.promotion_link{
    color:white;
}

.page_slogan{
    text-align: center;
    width: 100%;
    min-height: 150px;
}

#category_list{
    padding-left: 10px;
}

.home_category_holder_main{
    /*    border: solid black 1px;
        background-color: red;
        color: white;
        padding-left: 10px;
        margin-top:5px;
        border-radius: 0% 50% 50% 0%;*/
}

.image-holder{
    position: relative;
}

.image-in-holder {
    width: 100%;
}

.image-content-wrapper, .image-centent, .image-content-centerize {
    top: 35%;
    left: 0;
}

.image-content-wrapper{
    position: absolute;
}

.image-content{
    display: table;
}

.image-content-centerize{
    display: table-cell;
    vertical-align: middle;
}

.img-center{    
    margin: 0 auto;
}

.product_preview_set{

}

.product_preview_border{
    border: solid black 1px;
    border-radius: 10px;
}

.full-width{
    width: 100%;
}

.margin-10{
    margin:10px;
}

.black-indicator{
    border-color:black!important;
}

.black-indicator.active{
    background-color:black!important;
}

.category_cover{
    margin:5px;
    background-color: white;
    border: solid black 1px;
    border-radius: 0px 50px 0px 0px;
}

.category_cover.active {
    background-color: red;
    color:white!important;
    border-radius: 0px 50px 0px 0px;
}

.main_gallery_slide{
    margin-top: 7px;
    margin-left: 5px;
}

.main_home_category{
    margin: 8px;
}

.error {
    color: red;
    font-style: italic;
}

.bottom-45 {
    bottom: 45px;
}

.btn-wechat{
    background-color: #44b549;
    color: white;
}

.search-form {
    border: 1px black solid;
}

.black-cover{
    background: black;
    opacity: 0.9;
    width: 100%;
    height: 100%;
}

.welcome-back-cover{    
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50000;
    top:0%;
    left: 0%;
}

.center-screen{
    position: fixed;
    top: 30%;
    left: 0%;
    color: white;
    text-align: center;
    z-index: 50002;
}

.text-with-shadow{
    text-shadow: 1px 1px black;
    text-shadow: 1px 1px black;
}

.show-in-black-cover{
    width: 100%;
    height: 100%;
    z-index: 50001;
    position: absolute;
    border-radius: 10px;
    border: .2em solid rgba(255, 255, 0, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.9);
    -o-box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.9);
    animation: highlight 2s infinite ease-in;
    -webkit-animation: highlight 2s infinite ease-in; /* Safari 4.0 - 8.0 */
    -o-animation: highlight 2s infinite ease-in; /* Opera 12+ */
    -moz-animation: highlight 2s infinite ease-in; /* Fx 5+ */
}

.btn-large{
    font-size: 30px;
}

@keyframes highlight {
    0% {
        border-color: rgba(255, 255, 0, 0.8);
        /*transform: scale(1);*/	
    }
    50% {
        border-color: rgba(255, 0, 0, 0.9);
        /*transform: scale(.9);*/	
    }
    100% {
        border-color: rgba(255, 255, 0, 0.8);
        /*transform: scale(1);*/
    }
}

.list-top > li > label{
    vertical-align: text-top;
}

.arrow-list{
    list-style:none;
}

.arrow-list > li::before{
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 22px;
    position: relative;
}

.list-title{
    font-size: 22px;
}

.cart-added{
    background-color: grey!important;
    cursor: not-allowed;
}

.header-expandable {
    cursor: pointer;
}