/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* Colors Buttons */
.bg-primary{
    background-color: #0080bd!important;
}

.form-control-lg {
    font-size: 0.8rem;
    border-radius: 1rem;
}

.active > .page-link, .page-link.active {
    background-color: #0080bd!important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: #0080bd!important;
}

.input-group .btn {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#searchbar:hover {
    background-color: #e2e5ed!important;
    /*border-color: #c6cbdc!important;*/
    /*width: 50%;*/
    /*transition: width .1s ease-in;*/
}
#searchbarRef:hover {
    background-color: #e2e5ed !important;
    /*width: 50%;*/
    /*transition: width .1s ease-in;*/
}

#infoSuppliers {
    width: 300px!important;
}
#wishlistCanvas {
    width: 500px!important;
}
#stockControl {
    width: 600px!important;
    top: 48px!important;
}

#offcanvasRightComparationProducts{
    top: 48px!important;
}
#offcanvasRightSimulationProducts{
    top: 48px!important;
}
/*#wishlistCanvas {*/
/*    width: 300px!important;*/
/*}*/

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #405189!important;
    border: 1px solid #405189!important;
}

/* Canvas Suppliers Dates */
#offcanvasScrollingDates {
    width: 330px !important;
}
.offcanvas-header{
    padding: 1rem 1rem 0 1rem;
}

/* FOOTER */
.footer {
    height: auto;
}

/*MENU CATALOGUE*/
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {

    .navbar .has-megamenu{position:static!important;}

    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
    /*.navbar {height: 3rem!important;}*/
}
/* ============ desktop view .end// ============ */


/* ============ mobile view ============ */
@media(max-width: 991px){
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
        overflow-y: auto;
        max-height: 90vh;
        margin-top:10px;
    }
}
/* ============ mobile view .end// ============ */
.nav-item:active {color:yellow;}

/*.nav-link:hover{*/
/*    background-color: #0179b1;*/
/*}*/
.lien {
    display: inline-block;
    position: relative;
}

.lien::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.lien:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* spinner error_suppliers*/
.spinner-grow {
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: 0em;
}

.navbar-toggler{
    color:#fff!important;
}

/*scroll filter*/
.accordion-content {
    height: 250px;
    overflow-y: scroll;
}
.subcategory{
    line-height: 2;
    font-size: 14px;
}
.no-record {display:none;}

.global-loader {
    background: rgba(255, 255, 255, .6);
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9990;
}
.global-loader {
    position: absolute;
}
.top-15{
    top: 15%!important;
}
.sticky-menu-category{
    position: sticky;
    top: 0;
    z-index: 999;
}
.sticky-filters{
    position: sticky;
    top: 50px;
    z-index: 10;
}
.hidden-table{
    display: none!important;
}
.sku{
    font-weight: 700;
    color: #040707;
    letter-spacing: 0.15rem;
}
.ocean{
    font-weight: 700;
    color: #175f91;
}


/* LOGO ANIMATION */
.image {
    position: absolute;
}

.image img {
    position: absolute;
    /*top: 25%;*/
    /*left: 4%;*/
    width: 80px;
}

.spin {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 2px solid #358bc5;
    border-radius: 100%;
    animation: spin 0.75s infinite linear;
}

.spin::before,
.spin::after {
    left: -2px;
    top: -2px;
    display: none;
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner,
.spinner::before,
.spinner::after {
    display: inline-block;
    border-color: transparent;
    border-top-color: #358bc5;
    animation-duration: 1.2s;
}

.spinner::before {
    transform: rotate(120deg);
}

.spinner::after {
    transform: rotate(240deg);
}

@media (max-width:480px) {
    .spin {
        width: 80px;
        height: 80px;
    }
    .image img {
        position: absolute;
        top: 0;
        left: 0;
    }
    .loader-center{
        position: absolute;
        left: 40%!important;
        top: 60%;
    }
}

.loader-center{
    position: absolute;
    left: 47%;
    top: 60%;
}

/* Header buttons*/
.navbar-header .btn-topbar {
    height: 35px;
    width: 35px;
}
.topbar-badge {
    right: -18px;
}

[data-layout="horizontal"] .container-fluid, [data-layout="horizontal"] .layout-width {
    max-width: 100%;
    margin: 0 auto;
}
[data-layout=horizontal] .page-content {
    margin-top: 0px!important;
}
.truncate {
    max-width: 600px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animation Notifications */

.notif-badge--outline::after,
.notif-badge--outline::before{
    background-color: transparent;
    border: 1px solid lightcoral;
}

@keyframes animabadge{
    50% {
        opacity: .9;
        transform: scale(0);
    }
    100%{
        transform: scale(3);
        opacity: 0;
    }
}

/* Animation Notifications */
.notif-badge::after,
.notif-badge::before{
    top:0px;
    right: 1px;
    display: block;
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    animation: animabadge 1.5s ease-out infinite;
    z-index: -1;

}
.notif-badge::before{
    animation-delay: .5s;
}

.notif-badge--outline::after,
.notif-badge--outline::before{
    background-color: transparent;
    border: 1px solid lightcoral;
}

@keyframes animabadge{
    50% {
        opacity: .9;
        transform: scale(0);
    }
    100%{
        transform: scale(3);
        opacity: 0;
    }
}

/* Alert Stock badge */
/* Animation Notifications */
.alert-badge::after,
.alert-badge::before{
    top: 2px;
    right: 6px;
    display: block;
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    animation: animabadge 1.5s ease-out infinite;
    z-index: -1;

}
.alert-badge::before{
    animation-delay: .5s;
}

/* Border Animation */



.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
}

.notification {
    position: relative;
}
.notification .indicator {
    position: absolute;
    z-index: 2;
    top: -2px;
    right: 0.35em;
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid white;
    border-radius: 50%;
    background-color: #FFA726;
}
.notification.animated .indicator, .notification.animated-2 .indicator, .notification.animated-3 .indicator {
    transform: scale(0);
    animation: popsInIndicator 2s 0.7s ease-in-out forwards infinite;
}
@keyframes popsInIndicator {
    0%, 25% {
        transform: translateY(50%) scale(0);
    }
    38% {
        transform: translateY(-70%) scale(1.7);
    }
    50%, 100% {
        transform: translateY(0) scale(1);
    }
}
.notification.animated .bell {
    position: relative;
    z-index: 1;
    animation: ringTheBell 2s 0.7s ease-in-out forwards infinite;
    transform-origin: 50% 0.2em;
}
@keyframes ringTheBell {
    15% {
        transform: scale(1.2) translateY(-10%);
    }
    20%, 30% {
        transform: rotate(-20deg) scale(1.2) translateY(-10%);
    }
    25% {
        transform: rotate(20deg) scale(1.2) translateY(-10%);
    }
    35% {
        transform: rotate(0deg) scale(1.2) translateY(-10%);
    }
    50%, 100% {
        transform: scale(1) translateY(0);
    }
}
.notification.animated-2 .bell {
    position: relative;
    z-index: 1;
    animation: ringTheBell-2 2s 0.7s ease-in-out forwards infinite;
    transform-origin: 50% 0.2em;
}
@keyframes ringTheBell-2 {
    15% {
        transform: scale(1.2) translateY(-10%);
    }
    20%, 30% {
        transform: rotate(-20deg) scale(1.2) translateY(-10%);
        color: #E56A54;
    }
    25% {
        transform: rotate(20deg) scale(1.2) translateY(-10%);
        color: #E56A54;
    }
    35% {
        transform: rotate(0deg) scale(1.2) translateY(-10%);
        color: #E56A54;
    }
    50%, 100% {
        transform: scale(1) translateY(0);
        color: rgba(0, 0, 0, 0.54);
    }
}
.notification.animation-wave-ripple:before, .notification.animation-wave-ripple:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    animation: waveRipple 2s 0.7s ease-in-out forwards infinite;
}
@keyframes waveRipple {
    5% {
        transform: scale(0);
        box-shadow: 0 0 0 0 #e56a54;
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 0.4em rgba(229, 106, 84, 0);
    }
    100% {
        transform: scale(0);
        box-shadow: none;
    }
}
.notification.animation-wave-ripple:after {
    animation-delay: 0.9s;
}


/* animation logo loader 2 */
.loader {
    position: absolute;
    height: 48px;
    width: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.loader div {
    display: inline-block;
    vertical-align: middle;
}

.loader .logo {
    border-radius: 50%;
    height: 48px;
    width: 48px;
    position: relative;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-animation: overlay-animate 2s alternate infinite ease-in-out;
    animation: overlay-animate 2s alternate infinite ease-in-out;
}

.loader .logo::before {
    content: '';
    position: absolute;
    right: 22px;
    top: 2px;
    width: 200px;
    height: 44px;
    background: #fff;
}

.loader .logo img {
    height: 100%;
    width: 100%;
    z-index: 99;
    position: relative;
    transition: inherit;
    animation: logo-animate 2s alternate infinite ease-in-out;
}

.loader .name {
    font-family: sans-serif;
    font-size: 2.5rem;
    /*color: #fff;*/
    /*text-shadow: 0 0 8px #000*/
}

@keyframes overlay-animate {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
    }
}

@keyframes logo-animate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

td {
    white-space: nowrap;
}

/* Shine TEXT */
.shine {
    background: #175f91 -webkit-gradient(linear, left top, right top, from(#175f91), to(#175f91), color-stop(0.5, #fff)) 0 0 no-repeat;
    background-size: auto;
    background-clip: border-box;
    -webkit-background-size: 150px;
    color: rgba(23, 95, 145, 0.66);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.03);
}

.chrome {
    background: #000 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
    -webkit-background-size: 200px;
    color: rgba(0, 0, 0, 0.5);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

@-webkit-keyframes shine {
    0%, 10% {
        background-position: -1000px;
    }
    20% {
        background-position: top left;
    }
    90% {
        background-position: top right;
    }
    100% {
        background-position: 1000px;
    }
}

/* Text Wave */
.sku-logo{
    margin-left: -13%;
    font-weight: 700;
}
.text-wave {
    position: relative;
    margin-left: 12.5%;
}

.text-wave span {
    color: #fff;
    font-weight: 700;
    position: absolute;
    transform: translate(-50%, -50%);
}

.text-wave span:nth-child(1) {
    color: #175f91;
    /*-webkit-text-stroke: 2px #8338ec;*/
}

.text-wave span:nth-child(2) {
    color: #23abe2;
    animation: animate 4s ease-in-out infinite;
}

@media (max-width:480px) {
    .text-wave{
        margin-left: 18.5%;
    }
}

@keyframes animate {
    0%,
    100% {
        clip-path: polygon(
                0% 45%,
                16% 44%,
                33% 50%,
                54% 60%,
                70% 61%,
                84% 59%,
                100% 52%,
                100% 100%,
                0% 100%
        );
    }

    50% {
        clip-path: polygon(
                0% 60%,
                15% 65%,
                34% 66%,
                51% 62%,
                67% 50%,
                84% 45%,
                100% 46%,
                100% 100%,
                0% 100%
        );
    }
}

/* Print Modal */
/*@media screen {*/
/*    #printSection {*/
/*        display: none;*/
/*    }*/
/*}*/

/*@media print {*/
/*    body * {*/
/*        visibility:hidden;*/
/*    }*/
/*    #printSection, #printSection * {*/
/*        visibility:visible;*/
/*    }*/
/*    #printSection {*/
/*        position:absolute;*/
/*        left:0;*/
/*        top:0;*/
/*        width:100%;*/
/*        height:100%;*/
/*    }*/
/*    .modal-dialog {*/
/*        max-width: 100%;*/
/*        width: 100%;*/
/*    }*/
/*    .modal-body {*/
/*        overflow: visible !important;*/
/*    }*/
/*    .modal-body img{*/
/*        height:auto;*/
/*        width:180px!important;*/
/*    }*/
/*}*/
/* Custom buttons DataTables*/
div.dt-button-collection {
    width: 400px;
}

div.dt-button-collection button.dt-button {
    display: inline-block;
    width: 32%;
}
div.dt-button-collection button.buttons-colvis {
    display: inline-block;
    width: 49%;
}
div.dt-button-collection h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 100;
    border-bottom: 1px solid #9f9f9f;
    font-size: 1em;
}
div.dt-button-collection h3.not-top-heading {
    margin-top: 10px;
}
/* container LandingPage */
.container-xxl {
    max-width: 1320px;
}

[data-layout="horizontal"] .container-fluid, [data-layout="horizontal"] .layout-width {
    max-width: 100%!important;
}

/* progress bar import*/

/* size images products */
/* comparator */
.img-container{
    width: 5rem;
    height: 3rem;
}

.img-container-reports {
    width: 2.5rem;
    height: 2.5rem;
}

/* thumbails wishlist */
.img-container-wish{
    width: 4rem;
    height: 4rem;
}

/* thumbails cart */
.img-container-cart{
    width: 4rem;
    height: 4rem;
}

.img-product{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-container-invoice{
    width: 3rem;
    height: 2rem;
}


figure.zoom {
    background-position: 50% 50%;
    position: relative;
    width: 350px;
    overflow: hidden;
    cursor: zoom-in;
}
figure.zoom img:hover {
    opacity: 0;
}
figure.zoom img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
}
/*Tutorial Progress*/
.shepherd-progress-bar {
    position: absolute;
    left: 2%;
    bottom: 9%;
    font-size: 14px;
    border-radius: 9px;
    height: 20px;
    width: 100%;
    max-width: 180px;
    padding: 3px;
    background: #e6e6e6
}
.shepherd-progress-bar span {
    display: block;
    background: #3288e6;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}

.shepherd-arrow,
.shepherd-arrow:before {
    /*content: "\ea75";*/
    /*font-family: "remixicon";*/
    /*font-size: 24px;*/
    /*z-index: 1;*/
    /*background-color: transparent !important;*/
    /*-webkit-transform: rotate(0deg);*/
    /*        transform: rotate(0deg);*/
    color: #405189!important;

}

.shepherd-header{
    background: #f7b84b!important;
}

/*custom visibility datatables*/
 a.buttons-columnVisibility {
     cursor:pointer;
 }
a.buttons-columnVisibility.active {
    background-color:transparent;
    color:inherit;
}
a.buttons-columnVisibility.active:hover {
    background-color:#f5f5f5;
    color:inherit;
}
a.buttons-columnVisibility:before {
    width:25px;
    font-family:"Glyphicons Halflings";
    content:"✓";
    color:transparent;
    padding-right:10px;
}
a.buttons-columnVisibility.active:before {
    color:inherit;
}
table.dataTable.table-hover>tbody>tr:hover>a {
    background-color: white!important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.01)!important;
}

/* simulation qtty */
.input-step {
    height: 28px!important;
    padding: 0px!important;
}
.input-step input {
    width: 2.5em!important;
}

.hamburger-icon span {
    background-color: white!important;
}

/*quotation table search header */
thead select {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}


/*Animation row low price*/
.rowAnimation{
    animation: mymove 1s infinite;
}

@keyframes mymove {
    from {background-color: yellow;}
    to {background-color: lightgoldenrodyellow;}
}

.navbar-brand-box {
    padding: 0!important;
}

.text-small-tiny{
    font-size: .7em;
}