*.icon-white {
    color: white
}

*.icon-silver {
    color: silver
}

*.icon-green {
    color: green
}

*.icon-dark {
    color: gray
}

.entity-table {
    text-align: center
}

.entity-table-body {
    font-size: 1rem;
    font-weight: 500;
}

.users-create-user {
    display: inline-block;
    position: relative;
    font-size: 1.1rem;
    font-weight: 500;
}

.manage-entity-menu {
    position: relative;
}

.create-new-entity:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 2%;
    top: -70%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 12px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}

.create-new-entity.articles:hover::after{
    left: 2%;
    right:-81%;
}

/*для shipping rate вкладки окремі атрибути положення підсказки бо вона довга */
.create-new-entity.shipping:hover::after {
    right: -179%;
    left: 9%;
    top: -68%;
}

.create-new-entity.productCreation:hover::after{
    right:-160%;
}

.create-new-entity.productCreation:hover::after{
    right:-160%;
}

.create-new-entity.menu:hover::after{
    right: 87%;
    left: 1%;
    top: -64%;
}

.export-csv:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 27%;
    top: -70%; /* Положение подсказки */
    right: -4%;
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 12px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}

.export-excel:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 54%;
    top: -70%;
    right: -34%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 12px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}

.export-pdf:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 80%;
    top: -70%;
    right: -56%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 12px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}

.export-csv:hover.category::after{
    right: -7%;
}

.export-excel:hover.category::after{
    right: -37%;
}

.export-pdf:hover.category::after{
    right: -60%;
}

.export-csv:hover.brand::after{
    right: 2%;
}

.export-excel:hover.brand::after{
    right: -28%;
}

.export-pdf:hover.brand::after{
    right: -50%;
}

.export-csv:hover.customers::after{
    right: 2%;
    left: 3%;
}

.export-excel:hover.customers::after{
    right: -38%;
    left: 39%;
}

.export-pdf:hover.customers::after{
    right: -68%;
    left: 73%;
}

.entity-table-body .cell {
    position: relative;
}
/*
.entity-table-body-edit:hover::after {
    content: attr(data-title); !* Выводим текст *!
    position: absolute; !* Абсолютное позиционирование *!
    left: -18%;
    top: -33%; !* Положение подсказки *!
    z-index: 1; !* Отображаем подсказку поверх других элементов *!
    background: rgba(230, 246, 255, 0.96); !* Полупрозрачный цвет фона *!
    font-family: Arial, sans-serif; !* Гарнитура шрифта *!
    font-size: 13px; !* Размер текста подсказки *!
    padding: 5px 10px; !* Поля *!
    border: 1px solid #333; !* Параметры рамки *!
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}*/

/*.entity-table-body-delete:hover::after {
    content: attr(data-title); !* Выводим текст *!
    position: absolute; !* Абсолютное позиционирование *!
    left: 9%;
    top: -33%; !* Положение подсказки *!
    z-index: 1; !* Отображаем подсказку поверх других элементов *!
    background: rgba(230, 246, 255, 0.96); !* Полупрозрачный цвет фона *!
    font-family: Arial, sans-serif; !* Гарнитура шрифта *!
    font-size: 13px; !* Размер текста подсказки *!
    padding: 5px 10px; !* Поля *!
    border: 1px solid #333; !* Параметры рамки *!
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}*/

/*.entity-table-body-enable:hover::after {
    content: attr(data-title); !* Выводим текст *!
    position: absolute; !* Абсолютное позиционирование *!
    left: -106%;
    top: 2%;
    right: 68%; !* Положение подсказки *!
    z-index: 1; !* Отображаем подсказку поверх других элементов *!
    background: rgba(230, 246, 255, 0.96); !* Полупрозрачный цвет фона *!
    font-family: Arial, sans-serif; !* Гарнитура шрифта *!
    font-size: 13px; !* Размер текста подсказки *!
    padding: 5px 10px; !* Поля *!
    border: 1px solid #333; !* Параметры рамки *!
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}*/

.filter-search:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 68%;
    top: -21%;
    right: 16%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 13px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}
.products-search-button:hover::after{
    left: 53%;
    top: 25%;
    right: 42%;
}
.orders-search-button:hover::after{
    left: 23%;
    top: -70%;
    right: 72%;
}
.filter-clear-search:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 86%;
    top: -21%;
    right: -11%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(230, 246, 255, 0.96); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 13px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
    opacity: 1;
    transition: 1s;
    font-weight: 600;
}
.products-clear-search-button:hover::after{
    left: 58%;
    top: 25%;
    right: 34%;
}
.orders-clear-search-button:hover::after{
    left: 30%;
    top: -70%;
    right: 61%;
}
    /*при наведені на випадаюче меню юзера міняється колір*/
.dropdown-item:hover {
    background-color: #abb1b1;
}
.dropdown-menu {
    left: -38%;
}

/*@MEDIA*/
/*щоб медіа правельно працювали їх треба підключати самими останніми.
Якщо ні то всюди треба !important*/

/*тут задаю від 0 до 768px максимум*/
@media only screen and (max-width: 465px) {
    .question-less-details-all-buttons{
        display: flex;
        flex-direction: column;
    }
    .question-less-details-buttons{
        margin-top: 0.5rem;
    }
}
@media only screen and (max-width: 768px) {
    .shipping-rates-add-and-search{
        margin-top: 1.5rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .search_form{
        justify-content: center;
    }
    #page-menu {
        display: flex;
        flex-direction: column;
    }
    #customers-entity-menu{
        display: flex;
        flex-direction: column;
    }
    #customerSearchForm{
        justify-content: center;
    }
    .question-less-details-approve-answer {
        display: flex;
    }
    .question-less-details-buttons{
        display: flex;
    }
}

@media only screen and (max-width: 370px) {
    /*small screen*/
    .full-details {display: none}/*блок буде невидимий */
    .manage-entity-menu {
        position: relative;
    }
     /*Положение подсказки*/
   /* .create-new-entity:hover::after {
        left: 2% !important;
        top: -43% !important;
    }
   .export-csv:hover::after {
        left: 50% ;
        right: -103% ;
        top: -29%;
    }
   .export-excel:hover::after {
        left: 6% !important;
        top: 100% !important;
        right: -42% !important;
    }
    .export-pdf:hover::after {
        left: 52% !important;
        top: 100% !important;
        right: -82% !important;
    }
    .form-inline{
        position: relative;
    }
    .filter-search:hover::after{
        left: 11% !important;
        top: 96% !important;
        right: 58% !important;
    }
    .filter-clear-search:hover::after{
        left: 43% !important;
        top: 96% !important;
        right: 6% !important;
    }*/
    .create-new-entity:hover::after{
        display: none;
    }
    .export-csv:hover::after{
        display: none;
    }
    .export-excel:hover::after{
        display: none;
    }
    .export-pdf:hover::after{
        display: none;
    }
    .filter-clear-search:hover::after{
        display: none;
    }
    .filter-search:hover::after{
        display: none;
    }
    .entity-table-body-enable:hover::after{
        pointer-events: none;
        display: none;
    }
    .less-details-photo-place{
        display: flex;
        align-items: center;
        justify-content: center
    }
   /* .cell {
       !* Для коректного положення підсказки - enable*!
        position: relative;
    }
   .entity-table-body-enable:hover::after {
         !*Положение подсказки*!
        left: -49%;
        top: 106%;
        right: -8%;
    }*/
   /* .entity-table-body-enable:hover::after {
        pointer-events: none;
        display: none
    }*/
    /*.entity-table-body-enable{
        margin-right: 0.4rem;
    }*/
   /*.entity-table-body-edit:hover::after{
        left: 20% !important;
        top: 102% !important;
        right: 33% !important;
    }
    .entity-table-body-delete:hover::after {
        left: 40% !important;
        top: 102% !important;
        right: 6% !important;
    }*/
    /*.entity-table-body-edit:hover::after{
        display: none
    }
    .entity-table-body-delete:hover::after {
        display: none
    }*/
    #product-entity-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-filter-and-buttons-menu{
        display: flex;
        margin-top: 1rem;
    }

}
@media only screen and (min-width: 371px) and (max-width: 424px) {
    /*small screen*/
    .full-details {display: none}/*блок буде невидимий */
    .manage-entity-menu {
        position: relative;
    }
    .create-new-entity:hover::after{
        display: none;
    }
    .export-csv:hover::after{
        display: none;
    }
    .export-excel:hover::after{
        display: none;
    }
    .export-pdf:hover::after{
        display: none;
    }
    .filter-clear-search:hover::after{
        display: none;
    }
    .filter-search:hover::after{
        display: none;
    }
    .entity-table-body-enable{
        pointer-events: none;
        /*margin-right: 0.4rem;*/
    }
    #product-entity-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #productSearchForm{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .less-details-photo-place{
        display: flex;
        align-items: center;
        justify-content: center
    }

   /* .create-new-entity:hover::after {
        left: 2% ;
        top: -43% ;
    }
    .export-csv:hover::after {
        left: 50% ;
        right: -70%;
        top: -37%;
    }
    .export-excel:hover::after {
        left: 6% ;
        top: 100%;
        right: -42%;
    }*/
   /* .export-pdf:hover::after {
        left: 52% !important;
        top: 100% !important;
        right: -82% !important;
    }
    .form-inline{
        position: relative;
    }
    .filter-search:hover::after{
        left: 11% !important;
        top: 96% !important;
        right: 58% !important;
    }
    .filter-clear-search:hover::after{
        left: 43% !important;
        top: 96% !important;
        right: 6% !important;
    }*/

    /* .cell {
         Для коректного положення підсказки - enable
        position: relative;
    }
    .entity-table-body-enable:hover::after {
        left: -49% !important;
        top: 106% !important;
        right: -8% !important;
    }*/

   /* .entity-table-body-edit:hover::after{
        left: 20% !important;
        top: 102% !important;
        right: 33% !important;
    }
    .entity-table-body-delete:hover::after {
        left: 40% !important;
        top: 102% !important;
        right: 6% !important;
    }*/

}
@media only screen and (min-width: 424px) and (max-width: 575px){
    .full-details {display: none}/*блок буде невидимий */
    .manage-entity-menu {
        position: relative;
    }
    .create-new-entity:hover::after{
        display: none;
    }
    .export-csv:hover::after{
        display: none;
    }
    .export-excel:hover::after{
        display: none;
    }
    .export-pdf:hover::after{
        display: none;
    }
    .filter-clear-search:hover::after{
        display: none;
    }
    .filter-search:hover::after{
        display: none;
    }
    .entity-table-body-enable{
        pointer-events: none;
        /*margin-right: 0.4rem;*/
    }
    #product-entity-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #productSearchForm{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .less-details-photo-place{
        display: flex;
        align-items: center;
        justify-content: center
    }
}
@media only screen and (min-width: 575px) and (max-width: 769px) {
    /*small screen*/
    .full-details {display: none}/*блок буде невидимий */
    .hideable-column { display: none}
    .create-new-entity:hover::after{
        display: none;
    }
    .export-csv:hover::after{
        display: none;
    }
    .export-excel:hover::after{
        display: none;
    }
    .export-pdf:hover::after{
        display: none;
    }
    .filter-clear-search:hover::after{
        display: none;
    }
    .filter-search:hover::after{
        display: none;
    }
    .entity-table-body-enable:hover::after{
        display: none;
    }
    #product-entity-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #productSearchForm{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-filter-menu{
        margin-top: 0.5rem;
    }

    /*.manage-entity-menu {
        position: relative;
    }
    .create-new-entity:hover::after {
        !* Положение подсказки.*!
        left: 2%;
        top: -43%;
    }
    .export-csv:hover::after {
        left: 43%;
        right: -57%;
        top: -43%;
    }
    .export-excel:hover::after {
        left: 3% !important;
        top: 101% !important;
        right: -21% !important;
    }
    .export-pdf:hover::after {
        left: 43% !important;
        top: 99% !important;
        right: -55% !important;
    }
    .form-inline{
        position: relative;
    }
    .filter-search:hover::after{
        left: 11% !important;
        top: 96% !important;
        right: 62% !important;
    }
    .filter-clear-search:hover::after{
        left: 37% !important;
        top: 96% !important;
        right: 20% !important;
    }*/
    .less-details-photo-place{
        display: flex;
        align-items: center;
        justify-content: center
    }
    /*.cell {
        !*Для коректного положення підсказки - enable *!
        position: relative;
    }
    .entity-table-body-enable:hover::after {
        !* Положение подсказки.Без !important не працює *!
        left: -24% !important;
        top: 106% !important;
        right: -8% !important;
    }*/
    .entity-table-body-enable{
        margin-right: 0.4rem;
    }
    /*.entity-table-body-edit:hover::after{
        left: 17% !important;
        top: 101% !important;
        right: 44% !important;
    }
    .entity-table-body-delete:hover::after {
        left: 34% !important;
        top: 99% !important;
        right: 20% !important;
    }*/
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    /*medium screen*/
    .less-details {display: none}

    .hideable-column { display: none}

    .edit-delete {
        display: flex ;
        flex-wrap: nowrap ;
    }
    .edit-delete-products {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    #product-entity-menu{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-filter-menu{
        margin-left: 0.5rem;
    }
}
@media screen and (max-width: 991px) {
    #settingsCountryButtons{
        display: flex;
        justify-content: center;
    }
    }
@media screen and (min-width: 1023px) and (max-width: 1335px) {
    /*large screen*/
    div.less-details {display: none}

    .edit-delete {
        display: flex ;
        flex-wrap: nowrap;
    }
  /*  .navbar{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }*/
}
@media screen and (min-width: 1335px) {
    /*large screen*/
    div.less-details {
        display: none
    }

    .navbar-expand-lg{
      flex-flow: row nowrap;
    }

    .edit-delete {
        display: flex ;
        flex-wrap: nowrap;
    }
}