/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    height: 100%;
    font-size: 14px;
    padding-top: 0px;
    padding-bottom: 0px;
    letter-spacing:1px !important;
 }

*{
    font-family: Arial;
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.hidden {
    display: none;
}

pre {
    font-family: Arial;
    font-size: 16px;
    letter-spacing: 1px !important;
}

a {
    text-decoration:none !important;
}

    .mybreadcrumb{
        color:black !important;
    }

    .mybreadcrumb:hover {
        color: orangered !important;
    }

.modal-header {
    background-color: green;
    color: white;
}

.modal-body {
    max-height: none;
}

.session {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

    
.myCartLink {
    color:black;
    text-decoration: none !important;
}

    .myCartLink:hover{
        color:orangered !important;
    }

    .smallfont{
        font-size:small;
    }

.caticon {
    padding: 5px !important;
}

.caticon img {
        opacity: 0.8;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

.caticon:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }

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

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

.imageFrame {
    width: 100%;
    padding-top: 100%; /* 1:1.3 Aspect Ratio */
    position: relative; /* If you want text inside of it */
    text-align: left;
    font-family:Arial;
    font-weight:bold;
}

.productImg {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1%;
    width: 95%;
    max-height:60%;
    /*height:60%;*/
}

    .productImg:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

.imageshadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.leftPanel {
    padding-right: 10px;
    width:350px !important  ;
}

.rightpanel {
    padding-top: 20px;
    width: 650px !important;
}

.btn-action
{
    min-width :180px !important;
    margin-top:15px;
}

#productimg {
    margin-top: 20px;
    margin-bottom: 20px;
}


#productimg p {
        color: #555;
        font-size: 1em;
        height: 90px;
        max-height: 6.2em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        padding-top: 15px;
    }

    #productimg span {
        color: white;
        background-color:gray;
        font-size: 1em;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        margin-top:25px !important;
        padding-top:10px !important;
        padding-bottom:10px !important;
        position:relative;
        }


.opt_button {
    background-color:silver !important;
    color: black !important;
    border-radius: 5px !important;
    font-size: 1.1em !important;
    min-width:200px !important;
}

.opt_button:hover {
        background-color: green !important;
        color: white !important;
    }

.mycontainer {
    width: 80% !important;
    margin-left:auto;
    margin-right:auto;
}

.nopadding {
    padding: 0 !important;
}

.nomargin {
    margin: 0 !important;
}

/* middlte align image and text 
.well {
    display: flex;
    align-items: center;
}*/

/* company logo */
.companylogo {
    width: 100%;
}

/* hide VIP Box*/
.hideVIPBox
{
    display:none;
}

/*set min height of the page*/
#wrap {
    min-height: 93vh;
    height: auto;
}

/*menubar*/

#menu .navbar-text {
    padding-top: 0;
    padding-bottom: 0px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25em;
    color: black;
}

#menu .nav-link {
    color: black;
    padding-top: 0;
    padding-bottom: 0px;
    margin: 0px 30px;
}

/* button with dividor*/
.btn-nopadding {
    padding: 2px !important;
}

.btn-padding {
    padding: 10px 10px 10px 10px;
}

/* if you want divider to left / logo at right */
.btn-divider-left {
    border-left: 1px solid white; /* set your color here */
}

/* if you want divider to right / logo at left */
.btn-divider-right {
    border-right: 1px solid white; /* set your color here */
}

/* Make the image fully responsive */
.carousel-inner img {
    width: 100%;
    height: 100%;
}


/* Top Bar*/
#topbar {
    background-color: green;
}

    #topbar .nav-link {
        color: white;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom:  0 !important;
        font-size:14px;
    }

    #topbar .nav-link:hover {
        color: orangered;
    }

    #topbar .nav, .nav-item, .navbar-text {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    #topbar .navbar-text    {
        color:white;
    }


/* QR code generator */
#qrCode {
    margin: 15px;
}


/* text fade in*/
.fade-in {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
    -ms-animation: fadeIn ease 5s;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bigScreen {
    display: block !important;
}

.smallScreen {
    display: none !important;
}

* {
    box-sizing: border-box;
}


/* manify glass */
* {
    box-sizing: border-box;
}

.img-magnifier-container {
    width:100%;
    max-width:400px;
    position: relative;
}

.img-magnifier-glass {
    border-color:white !important;
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 300px;
    height: 300px;
    opacity:0;
}

.img-magnifier-glass:hover {
    opacity:1;
}


/* Tablet */
@media all and (max-width: 768px) {
    .body-content {
        padding-left: 0px;
        padding-right: 0px;
    }

 
    #productimg p {
        color: #555;
        font-size: 1em;
        height: 100px;
        max-height: 6.0em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        padding-top: 25px;
    }

    .mycontainer {
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .bigScreen {
        display: none !important;
    }

    .smallScreen {
        display: block !important;
    }

    .caticon {
        padding: 1px !important;
    }

    .navbar{
        margin:0;
        padding:0;
    }

    .modal-body {
        max-height:none;
    }
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: forestgreen; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        color: white;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: orangered;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation 
#main {
    transition: margin-left .5s;
    padding: 20px;
}*/

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }

    .modal-body {
        max-height: none;
    }
}

/* Laptop; small Screen 
@media screen and (max-width:1023px) {
    body {
        height: 100%;
        font-size: 14px;
        padding-top: 0px;
        padding-bottom: 0px;
        letter-spacing: 1px !important;
    }

    pre {
        font-family: Arial;
        font-size: 14px;
        letter-spacing: 1px !important;
    }

    .mycontainer {
        width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-text{
        font-size:14px !important;
    }

 }*/


/*Extra large screens */
@media all and (max-width:1024px) {
    body {
        height: 100%;
        font-size: 14px;
        padding-top: 0px;
        padding-bottom: 0px;
        letter-spacing: 1px !important;
    }

    pre {
        font-family: Arial;
        font-size: 14px;
        letter-spacing: 1px !important;
    }

    .mycontainer {
        width: 80% !important;
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar-text {
        font-size: 16px !important;
    }

    .bigScreen {
        display: none !important;
    }

    .smallScreen {
        display: block !important;
    }

    .modal-body {
        max-height:none;
    }
     
}