html{
    background-color:black;
}

.greyout {
    background-color: #ebebeb;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    position: absolute;

    text-align:center;
    padding:65px 0;
    color:red;
    font-weight:700;
}

.container-body {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 95px;
    padding-bottom: 100px !important;
}

.container-body-detail {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 50px;
    padding-bottom: 100px !important;
}

.product-detail-img {
    width: 100%;
    height: 275px;
}

.p-top-1{
    padding-top:10px;
}

.p-bottom-1 {
    padding-bottom: 10px;
}

.p-title{
    font-size:18px;
    font-weight:700;
}

.p-sub-title {
    font-size: 14px;
}

.p-remarks {
    font-size: 14px;
    color:orange;
}


.p-label {
    font-size: 12px;
}

.cursor-pointer{
    cursor:pointer;
}

.btn-darkred {
    background-color: #b24444;
    color: white;
}

.bg-modifier-header{
    background-color:#0f1478;
    color:white;
}

.bg-modifier-desc {
    background-color: #5f8dba;
    color: white;
}

.bg-modifier-desc-active {
    background-color: #92344d;
    color: white;
}

.bg-modifier-footer-qty {
    background-color: #0f1478;
    color: white;
}

.bg-modifier-footer-add {
    background-color: #179f07;
    color: white;
}

.bg-modifier-footer-bin {
    background-color:#b24444;
    color: white;
}

.productmenu-action span {
    font-size: 16pt;
}

.productmenu-action div {
    text-align: center;
    cursor: pointer;
} 

.actionMenu-welcome span{
    font-size:16pt;
}

.actionMenu-welcome div {
    text-align:center;
    cursor:pointer;
} 

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

.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
    color: inherit;
    text-decoration: inherit;
}

.categoryMenu {
    background-color: #566573;
    color: white !important;
    border: 0px;
}

.button_Action {
    background-color: #151B54;
    color:white;
}

.divMenu_Active {
    background-color: #151B54;
}

.scrollmenu {
    //background-color: #fff;
    overflow: auto;
    white-space: nowrap;
    scrollbar-3dlight-color: red yellow;
}

.scrollmenu div {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    cursor:pointer;
    font-size:12pt;
}

.hideContent{
    display:none;
}

.minHeight100{
    min-height:100vh;
}

.fixMiddle{
    max-width:480px;
    margin:0px auto;
}

.body-bg {
    /*background-image: url('https://wallpaperaccess.com/full/1324855.jpg');*/
    background-color:grey;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

body {
    /*padding-top: 50px;
    padding-bottom: 20px;*/
    font-family: Helvetica,Arial;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.leftnavlink
{
    color:black !important;
}

.navbar-inverse {
    background-color: black;
    color: white;
}

.navbar-inverse .navbar-brand
{
    color:white;
}

.navbar-inverse .navbar-nav > li > a
{
    color:white;
}

.table-striped > tbody > tr:nth-of-type(odd){
    background-color:black;
}

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

/* 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;
}*/

.card_padding {
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%;
    border-radius: 5px;*/
    padding: 10px;
}

.card {
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%;
    border-radius: 5px;*/
    margin-bottom:10px;
}

.card:hover {
    /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);*/
}

/*img {
    border-radius: 5px 5px 0 0;
}*/

.cardcontainer {
    /*padding: 2px 16px;*/
    text-align:center;

}

.floattop {
    position: fixed;
    width: 60px;
    height: 60px;
    top: 80px;
    right: 20px;
    background-color: #0C9;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.my-float {
    margin-top: 22px;
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.row-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.row{
    margin-left:0px;
    margin-right:0px;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(0,174,239,.8);
    border-radius: 100%;
    margin-left:-30px;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}