/* Css Details */

/* Main */
html * {
    -webkit-font-smoothing: antialiased;
}

@-ms-viewport {
    width: device-width;
}

[tabindex='-1']:focus {
    outline: 0 !important;
}

/* Main Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Toggle */
.tab-pane .toggle {
    min-width : 121px !important;
    min-height: 38px !important;
}

.toggle-price {
    margin: 5px;
}

.toggle-stock {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: px;
}

.sortable-drag {
    opacity: 1 !important
}

.selected .square {
    text-align   : center;
    background   : linear-gradient(60deg, #45B39D, #5D6D7E);
    position     : absolute;
    width        : 18px;
    height       : 18px;
    max-width    : 18px;
    right        : 0%;
    transition   : all .15s ease;
    transform    : translate(-15%, -50%);
    border-radius: .375rem;
}

.selected .square .material-icons.checkmark::before {
    font-family: 'Material Icons';
    content    : "check";
    position   : absolute;
    right      : 0%;
    transform  : translate(-5%, -90%);
    font-weight: 500;
    color      : #fff;
    font-size  : 16px;
}

.selected .card-product .card-product-content .card-avatar {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2) !important;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(156, 39, 176, .6) !important;
}

.selected .card-product {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2) !important;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(156, 39, 176, .6) !important;
}

.selected .card-product .card-product-content {
    background-color: hsla(0, 0%, 100%, .2) !important;
}

.selected .card-product .card-product-content .card-stock-code {
    color: rgba(255, 255, 255, 0.775);
}

.selected .card-product .card-product-content .card-title {
    color: #fff;
}

.selected .card-product .card-product-content .card-price {
    color: #fff;
}

.selected .card-product .card-product-content ins {
    color: #fff;
}

.selected .card-product .card-product-content .button-vagonic .btn.btn-icon{
    color: rgba(255, 255, 255, 0.775);
    background-color: transparent;
    border-color: transparent;
}

.selected .card-product .card-product-content .button-vagonic .btn.btn-icon:hover{
    background-color: rgba(200,200,200,.2);
}


.card-body del {
    font-size: 12px;
}

.card-body ins {
    font-size  : 12px;
    font-weight: 700;
    color      : #7b1fa2;
}

.square {
    text-align   : center;
    position     : absolute;
    width        : 18px;
    height       : 18px;
    max-width    : 18px;
    right        : 0%;
    transition   : all .15s ease;
    transform    : translate(-15%, -50%);
    border-radius: .375rem;
}

.footer {
    padding   : 2.5rem 0;
    background: transparent;
}

.copyright {
    font-size: 1rem;
}

.copyright p a{
    color: #7b1fa2 !important;
}

.heading {
    font-size     : .95rem;
    font-weight   : 600;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.nav-item:focus,
.nav-item:active {
    outline   : none !important;
    box-shadow: none;
}

.nav-link:focus,
.nav-link:active {
    outline   : none !important;
    box-shadow: none;
}

div.card {
    border       : 0;
    margin-bottom: 30px;
    margin-top   : 30px;
    border-radius: 6px;
    color        : rgba(0, 0, 0, .87);
    background   : #fff;
    width        : 100%;
    max-width    : 100%;
    box-shadow   : 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

div.card.card-plain {
    background: transparent;
    box-shadow: none;
}

div.card .card-header {
    border-radius: 3px;
    padding      : 1rem 15px;
    margin-left  : 15px;
    margin-right : 15px;
    margin-top   : -30px;
    border       : 0;
    background   : linear-gradient(60deg, #eee, #bdbdbd);
}

.card-plain .card-header:not(.card-avatar) {
    margin-left : 0;
    margin-right: 0;
}

.div.card .card-body {
    padding: 0 !important;
}

div.card .card-header-purple {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(156, 39, 176, .6);
}

div.card .card-header-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(244, 67, 54, .6);
}

div.card .card-header-rose {
    background: linear-gradient(60deg, #e91e63, #CD1C58);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(244, 67, 54, .6);
}

div.card .card-header-logo {
    background: linear-gradient(60deg, #5499C7, #2980B9);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .2), 0 13px 24px -11px rgba(36, 113, 163, .6);
}

.card-nav-tabs .card-header {
    margin-top: -30px !important;
}

.card .card-header .nav-tabs {
    padding: 0;
}

.card-body {
    padding       : 0.7rem !important;
    padding-top   : 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.nav-tabs {
    border       : 0;
    border-radius: 3px;
    padding      : 0 15px;
}

.nav {
    display      : flex;
    flex-wrap    : wrap;
    padding-left : 0;
    margin-bottom: 0;
    list-style   : none;
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
}

.nav-tabs .nav-item .nav-link.active {
    background-color: hsla(0, 0%, 100%, .2);
    transition      : background-color .3s .2s;
}

.nav-tabs .nav-item .nav-link {
    border     : 0 !important;
    color      : #fff !important;
    font-weight: 500;
}

.nav-tabs .nav-item .nav-link {
    color           : #fff;
    border          : 0;
    margin          : 0;
    border-radius   : 3px;
    line-height     : 24px;
    text-transform  : uppercase;
    font-size       : 12px;
    padding         : 10px 15px;
    background-color: transparent;
    transition      : background-color .3s 0s;
}

.nav-link {
    display: block;
}

.nav-tabs .nav-item .material-icons {
    margin        : -1px 5px 0 0;
    vertical-align: middle;
}

.nav .nav-item {
    position: relative;
}

.input-group {
    margin-top: 10px !important;
    max-width : 600px !important;
}

.form-group {
    margin-top: 15px !important;
    max-width : 600px !important;
}

#vagonicSidebar .form-group {
    margin-top: 15px !important;
    margin-bottom: 7px !important;
    max-width : 600px !important;
}

.container-items {
    margin-top: 60px;
    padding-left: 40px;
}

.span-text {
    padding-top: 2px;
}

input[type=text] {
    background-color: #f7f9fc;
    border          : none;
    color           : rgba(63, 72, 76, 0.8);
    min-width       : 120px;
    border          : 1px solid #e4e9f2;
    border-radius   : 5px 5px 5px 5px;
}

input[type=text]::placeholder {
    color: rgba(56, 57, 57, 0.5);
}


input[type=text]:focus {
    border    : 1px solid rgba(63, 72, 76, 0.8) !important;
    outline   : none !important;
    box-shadow: none;
}

.form-control {
    padding    : 21px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.search {
    margin-right   : 15px;
    margin-left: 15px;
    max-width: 270px !important;
}

.checkbox-group {
    max-width : 600px !important;
    margin-top: 15px !important;
}

.material-icons.md-18 {
    font-size : 18px;
    margin-top: 2px;
}

.buttons {
    margin-top: 3px;
    position  : absolute;
    bottom    : 0;
    left      : 0;
    right     : 0;
}

.draggable:hover {
    cursor: move;
}

.settings {
    min-width: 300px !important;
    width    : 500px !important;
}


.logo {
    font-weight: 700;
    font-size  : 16px !important;
    font-family: Roboto Slab,Times New Roman,serif !important;
}

/* ssss */
a {
    -webkit-transition: .3s all ease;
    -o-transition     : .3s all ease;
    transition        : .3s all ease;
    color             : #2f89fc;
}

a:hover,
a:focus {
    text-decoration   : none !important;
    outline           : none !important;
    -webkit-box-shadow: none;
    box-shadow        : none;
}

button {
    -webkit-transition: .3s all ease;
    -o-transition     : .3s all ease;
    transition        : .3s all ease;
}

button:hover,
button:focus {
    text-decoration   : none !important;
    outline           : none !important;
    -webkit-box-shadow: none !important;
    box-shadow        : none !important;
}


.wrapper {
    width: 100%;
}

#vagonicSidebar {
    min-width         : 300px;
    max-width         : 300px;
    min-height: 635px ;
    max-height: 635px ;
    background        : transparent;
    padding-top: 10px;
    border-radius     : 5px 5px 5px 5px;
    -webkit-transition: all 0.3s;
    -o-transition     : all 0.3s;
    transition        : all 0.3s;
    position          : relative;
}

#vagonicSidebar .h6 {
    color: #fff;
}

#vagonicSidebar.active {
    margin-left: -385px;

}

#vagonicSidebar.active .custom-menu {
    margin-right: -120px;
    visibility: visible;

}

#vagonicSidebar.active ~ #content {
    margin-left: 90px !important;
}

#vagonicSidebar.active .btn.btn-primary:before {
    content: "\E315";
    color  : white;
    left   : 2px !important;
    bottom: 4px !important;
}

#vagonicSidebar.active .btn.btn-primary:after {
    display: none;
}

#vagonicSidebar ul.components {
    padding: 0;
}

@media (max-width: 991.98px) {
    #vagonicSidebar {
        margin-left: -385px;
    }

    #vagonicSidebar.active {
        margin-left: 0;
    }

    #vagonicSidebar.active .custom-menu {
        visibility: collapse !important;
    }

    #vagonicSidebar .custom-menu {
        margin-right: -70px !important;
    }

    #vagonicSidebar ~ #content {
        margin-left: 90px !important;
    }

    #vagonicSidebar .custom-menu {
        visibility: visible !important;
    }
}

#vagonicSidebar .custom-menu {
    display           : inline-block;
    position          : absolute;
    right             : 0;
    border-radius: 0px 6px 6px 0px !important;
    margin-right      : -35px;
    -webkit-transition: 0.3s;
    -o-transition     : 0.3s;
    transition        : 0.3s;
    visibility: collapse;
}

@media (prefers-reduced-motion: reduce) {
    #vagonicSidebar .custom-menu {
        -webkit-transition: none;
        -o-transition     : none;
        transition        : none;

    }
}

#vagonicSidebar .custom-menu .btn.btn-primary {
    background-color: #9c27b0;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
    border-color: transparent;
    position    : relative;
    color       : #000;
    width       : 36px;
    height      : 36px;
}

#vagonicSidebar .custom-menu .btn.btn-primary:after,
#vagonicSidebar .custom-menu .btn.btn-primary:before {
    position   : absolute;
    top        : 5px;
    left       : 0;
    right      : 0;
    bottom     : 0;
    font-weight: 700;
    font-family: "Material Icons";
    color      : #fff;
}

#vagonicSidebar .custom-menu .btn.btn-primary:after {
    content: "\E314";
    color  : white;
    right  : 2px;
}

.bg-wrap {
    width   : 100%;
    position: relative;
    z-index : 0;
}

.bg-wrap:after {
    z-index   : -1;
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    bottom    : 0;
    content   : '';
    background: #000;
    opacity   : .3;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display          : block;
    position         : absolute;
    top              : 50%;
    right            : 0;
    -webkit-transform: translateY(-50%);
    -ms-transform    : translateY(-50%);
    transform        : translateY(-50%);
}

@media (max-width: 991.98px) {

    #vagonicSidebarCollapse span {
        display: none;
    }
}

#vagonicSidebarCollapseAuto {
    cursor: pointer;
}

#content {
    width             : 100%;
    padding           : 0 !important;
    margin:0 !important;
    -webkit-transition: all 0.3s;
    -o-transition     : all 0.3s;
    transition        : all 0.3s;
}

.nav-pills .nav-item .nav-link {
    line-height: 24px;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 500;
    min-width: 90px;
    color: #555;
    transition: all .3s;
    border-radius: 30px;
    padding: 10px 15px;
    text-align: center;
    border-radius: 4px;
}


.nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) {
    margin-left: 5px;
}

.nav-pills .nav-item .nav-link.active {
    color: #fff;
    background-color: #9c27b0;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}


.nav-pills.nav-pills-info .nav-item .nav-link.active, .nav-pills.nav-pills-info .nav-item .nav-link.active:focus, .nav-pills.nav-pills-info .nav-item .nav-link.active:hover {
    background-color: #00bcd4;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(0,188,212,.6);
    color: #fff;
}


.nav-pills.nav-pills-success .nav-item .nav-link.active, .nav-pills.nav-pills-success .nav-item .nav-link.active:focus, .nav-pills.nav-pills-success .nav-item .nav-link.active:hover {
    background-color: #4caf50;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(76,175,80,.6);
    color: #fff;
}


.nav-pills.nav-pills-warning .nav-item .nav-link.active, .nav-pills.nav-pills-warning .nav-item .nav-link.active:focus, .nav-pills.nav-pills-warning .nav-item .nav-link.active:hover {
    background-color: #ff9800;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(255,152,0,.6);
    color: #fff;
}


.nav-pills.nav-pills-danger .nav-item .nav-link.active, .nav-pills.nav-pills-danger .nav-item .nav-link.active:focus, .nav-pills.nav-pills-danger .nav-item .nav-link.active:hover {
    background-color: #f44336;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(244,67,54,.6);
    color: #fff;
}

.nav-pills.nav-pills-rose .nav-item .nav-link.active, .nav-pills.nav-pills-rose .nav-item .nav-link.active:focus, .nav-pills.nav-pills-rose .nav-item .nav-link.active:hover {
    background-color: #e91e63;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(233,30,99,.6);
    color: #fff;
}

.nav-pills.nav-pills-main .nav-item .nav-link.active, .nav-pills.nav-pills-main .nav-item .nav-link.active:focus, .nav-pills.nav-pills-main .nav-item .nav-link.active:hover {
    color: #fff;
    background-color: #9c27b0;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}

.nav-pills .nav-item .nav-link:not(.active):hover {
    background-color: rgba(200,200,200,.2);
}

.nav-pills .nav-item i {
    display: block;
    font-size: 25px;
    padding: 10px 0;
}


.nav-pills.flex-column .nav-item+.nav-item {
    margin-top: 5px;
}

.tab-pane{
    font-weight: 400;
}

.button-vagonic .btn{
    margin: 0px;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.button-vagonic .btn {
    position: relative;
    padding: 12px 30px;
    margin: .3125rem 1px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.428571;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: .2rem;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    will-change: box-shadow,transform;
}

.button-vagonic .btn:focus,
:active {
    outline   : none !important;
    box-shadow: none;
}

.button-vagonic .btn.btn-primary {
    color: #fff;
    background-color: #9c27b0;
    border-color: #9c27b0;
    box-shadow: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
}

.button-vagonic .btn.btn-primary:hover {
    color: #fff;
    background-color: #9124a3;
    border-color: #701c7e;
    box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}

/*button styles*/

.button-vagonic .btn.btn-round {
    border-radius: 30px;
}

.button-vagonic .btn .material-icons {
    position: relative; 
    display: inline-block;
    font-size: 1.1rem;
    vertical-align: middle;
    bottom: 1px;
}

.button-vagonic .btn.btn-fab.btn-round {
    border-radius: 50%;
}

.button-vagonic .btn.btn-fab {
    font-size: 24px;
    height: 41px;
    min-width: 41px;
    width: 41px;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 41px;
}

.button-vagonic .btn.btn-primary.btn-link {
    background-color: transparent;
    color: #9c27b0;
    box-shadow: none;
}

 .button-vagonic .btn.btn-primary.btn-link:hover {
    background-color: transparent;
    color: #9c27b0;
    box-shadow: none;
}

/*button colors*/

.button-vagonic .btn.btn-default{
    color: #fff;
    background-color: #999;
    border-color: #999;
    box-shadow: 0 2px 2px 0 hsla(0,0%,60%,.14), 0 3px 1px -2px hsla(0,0%,60%,.2), 0 1px 5px 0 hsla(0,0%,60%,.12);
}

.button-vagonic .btn .btn-default:hover{
    box-shadow: 0 14px 26px -12px hsla(0,0%,60%,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px hsla(0,0%,60%,.2);
}

.button-vagonic .btn .btn-icon{
    color: #555;
    background-color: transparent;
    border-color: transparent;
}

.button-vagonic .btn.btn-icon:hover {
    background-color: rgba(156,39,176,.2);
}

.button-vagonic .btn .btn-list-icon{
    color: #555;
    background-color: transparent;
    border-color: transparent;
}

.button-vagonic .btn .btn-list-icon{
    margin-bottom: 1px;
}

.list-group-item:hover .btn-list-icon:before {
    background-color: transparent;
    content: "\E89E";
    color  : #555;
    left   : 2px !important;
    bottom: 4px !important;
    font-size: 18px;
    font-family: "Material Icons";
}

.list-group-item:hover .btn-list-icon:after {
    display: none;
    content: "\E89E";
    color  : #fff !important;
    font-family: "Material Icons";
}

.list-group-item .btn-list-icon:hover {
    background-color: rgba(190, 112, 217, 0.3);
    color: #fff !important;
}

.list-group .active .btn-list-icon:before {
    background-color: transparent;
    content: "\E89E";
    font-size: 18px;
    color  : #fff !important;
    font-family: "Material Icons";
}

.button-vagonic .btn.btn-info {
    color: #fff;
    background-color: #00bcd4;
    border-color: #00bcd4;
    box-shadow: 0 2px 2px 0 rgba(0,188,212,.14), 0 3px 1px -2px rgba(0,188,212,.2), 0 1px 5px 0 rgba(0,188,212,.12);
}

.button-vagonic .btn.btn-info:hover{
    box-shadow: 0 14px 26px -12px rgba(0,188,212,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,188,212,.2);

}

.button-vagonic .btn.btn-save {
    color: #fff;
    background-color: #0073aa;
    border-color: #0073aa;
    box-shadow: 0 2px 2px 0 rgba(0,188,212,.14), 0 3px 1px -2px rgba(0,188,212,.2), 0 1px 5px 0 rgba(0,188,212,.12);
}

.button-vagonic .btn.btn-save:hover{
    box-shadow: 0 14px 26px -12px rgba(0,188,212,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,188,212,.2);

}

.button-vagonic .btn.btn-success {
    color: #fff;
    background-color: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 2px 2px 0 rgba(76,175,80,.14), 0 3px 1px -2px rgba(76,175,80,.2), 0 1px 5px 0 rgba(76,175,80,.12);
}

.button-vagonic .btn.btn-success:hover{
    box-shadow: 0 14px 26px -12px rgba(76,175,80,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(76,175,80,.2);

}

.button-vagonic .btn.btn-warning {
    color: #fff;
    background-color: #ff9800;
    border-color: #ff9800;
    box-shadow: 0 2px 2px 0 rgba(255,152,0,.14), 0 3px 1px -2px rgba(255,152,0,.2), 0 1px 5px 0 rgba(255,152,0,.12);
}

.button-vagonic .btn.btn-warning:hover{
    box-shadow: 0 14px 26px -12px rgba(255,152,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(255,152,0,.2);

}

.button-vagonic .btn.btn-danger {
    color: #fff;
    background-color: #f44336;
    border-color: #f44336;
    box-shadow: 0 2px 2px 0 rgba(244,67,54,.14), 0 3px 1px -2px rgba(244,67,54,.2), 0 1px 5px 0 rgba(244,67,54,.12);
}


.button-vagonic .btn.btn-danger:hover{
    box-shadow: 0 14px 26px -12px rgba(244,67,54,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(244,67,54,.2);
}

.button-vagonic .btn.btn-rose {
    color: #fff;
    background-color: #e91e63;
    border-color: #e91e63;
    box-shadow: 0 2px 2px 0 rgba(233,30,99,.14), 0 3px 1px -2px rgba(233,30,99,.2), 0 1px 5px 0 rgba(233,30,99,.12);
}

.button-vagonic .btn.btn-rose:hover{
    box-shadow: 0 14px 26px -12px rgba(233,30,99,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(233,30,99,.2);

}

.panel-title {
    margin-left: 15px;
    margin-bottom: 10px;
}

.panel-title a i{
    vertical-align:middle;
}

.panel-group {
    padding: 5px;
}

.list-group{
    min-height: 350px;
    max-height: 350px;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
}

.list-group-collapsed {
    min-height: 240px !important;
    max-height: 240px !important;
}

.list-group .active {
    background-color: rgba(156, 39, 176, .8);
    border-color: rgba(156, 39, 176, .8);
    color: #fff;
}

.list-group .active:hover {
    background-color: rgba(156, 39, 176, .8);
    border-color: rgba(156, 39, 176, .8);
    color: #fff;
}

.list-group-item:hover {
    cursor: pointer;
    background-color: rgba(161, 83, 187, .4);
    border-color:rgba(190, 112, 217, .4);
    color: #555;
}

.list-group-item {
    padding: 0 !important;
}

.list-group-item > a {
    display: block;
    padding: 12px 20px 12px 20px;
    color: #555;
}

.list-group .active a {
    color: #fff ;
}

.div-save {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px 7px 5px 7px;
}

.card-vagonic {
    min-width: 135px !important;
    max-width: 135px !important;
    margin-top: 20px;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 10px;
    min-height      : 233px !important;
    min-height      : 233px !important;
}

.card-vagonic .card-stock-code{
    font-weight: 700 !important;
    font-size: 10px;
    color: #3c4858;
    margin-top: 20px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 7px;
    font-family: Roboto Slab,Times New Roman,serif;
}

.card-vagonic .card-title{
    font-weight: 700 !important;
    font-size: 12px;
    color: #1E1818;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 7px;
    overflow          : hidden;
    display           : -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 32px;
    font-family: Roboto Slab,Times New Roman,serif;
}

.card-vagonic .card-price{
    font-weight: 700 !important;
    font-size: 12px;
    color: #131212;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    font-family: Roboto Slab,Times New Roman,serif;
}

.card-vagonic .card {
    border: 0;
    border-radius: 6px !important;
    color: rgba(0,0,0,.87);
    background: #fff;
    width: 135px;
    min-width: 135px !important;
    max-width: 135px !important;
    padding: 0 !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.card-vagonic .card .card-header {
    border: 0;
    margin: 0 !important;
    border-radius: 6px !important;
    color: rgba(0,0,0,.87);
    background: #fff;
    width: 135px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.card-vagonic .card .card-body{
    padding: 0px !important;
    min-height      : 170px !important;
    min-height      : 170px !important;
}

.card-vagonic .card-description{
    color: #999;
}

.card-vagonic .card.card-product{
    text-align: center;
    margin: 0px;
}
.card-vagonic .card .card-header.card-header-image {
    position: relative;
    width: 135px;
    height: 135px;
    padding: 0;
    z-index: 1;
    border-radius: 0 !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    max-height: 135px !important;
}

.card-vagonic .card .card-header.card-header-image a {
    display: block;
}

.card-vagonic .card .card-header.card-header-image img {
    width: 135px;
    height: 135px;
    border-radius: 0 !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    pointer-events: none;
    box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
}

.card-vagonic .card-product .card-avatar {
    vertical-align: middle;
    border-style: none;
    position: absolute;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    z-index: 2;
    padding: 0;
    left: 50%;
    box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    text-align: center;
    background-color: #C2C4C8;
    transition: all .15s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.card-vagonic .card-product .card-avatar a{
    color: #f7f9fc;
    font-size: 20px;
}

.button-right {
    position: absolute;
    margin-bottom: 2px !important;
    right: 0;
    top: 0;
}

.spinner-border {
    position: absolute;
    top: 40%;
    left: 60%;
    color: #7b1fa2;
    background-color: transparent;
}

.modal-header {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2);
    color: #fff;
}