/* your styles go here */

/*  Left Nav Bar  */
@import "node_modules/bootstrap/scss/bootstrap";
<link href="~/Content/bootstrap.min.css" rel="stylesheet"/ >

.side-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    width: 200px;
    text-align: left;
    background: #355d9e;
    color: #fff;
    z-index: 999;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    
    /*  Side navbar small ------------------------ */
}

.mCustomScrollbar {
    background: #355d9e;
}
.side-navbar-wrapper {
    background: #355d9e;
}    

.sidenav-header-inner {
    background: #355d9e;
}

.side-menu {
    background: #355d9e;
}

.sidenav-heading {
    background: #355d9e;
}
/*  Top Nav Bar  */
nav.navbar {
    background: #042151;
    padding: .8rem 0;
    /* Navbar Brand --------- */
    /*  Dropdowns ------------ */
    /* Toggle Button ---------- */
}
    /*  Toggle Nav Button  */

    nav.navbar a.menu-btn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: #000000;
        color: #fff;
        text-align: center;
        padding: 0 !important;
    }

/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    float:  right;
}

/* Bottom right text */
.text-block {
    position: relative;
    float: right;
}



.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -16px;
}

.col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}

.col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}

.col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
}

.col-25,
.col-50,
.col-75 {
    padding: 0 16px;
}

.container {
    background-color: #f2f2f2;
    padding: 5px 20px 15px 20px;
    border: 1px solid lightgrey;
    border-radius: 3px;
}

input[type=text] {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

label {
    margin-bottom: 10px;
    display: block;
}

.icon-container {
    margin-bottom: 20px;
    padding: 7px 0;
    font-size: 24px;
}

.btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
}

    .btn:hover {
        background-color: #45a049;
    }

span.price {
    float: right;
    color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
    .row {
        flex-direction: column-reverse;
    }

    .col-25 {
        margin-bottom: 20px;
    }
}

/* Sortable tables */
table.sortable thead {
    background-color: #eee;
    color: #666666;
    font-weight: bold;
    cursor: default;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE"
}