@keyframes smoothWidth {
    0%{
        width: 0;
    }
    to{
        width: var(--target-width);
    }
}

.t{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toggle-off{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageFilters{
    display: flex;
    gap: 16px;
	margin-bottom: 24px;
}

.display-controls{
    display: flex;
    width: 100%;
    gap: 16px;
}

.searchByServiceBlock .list-counrty__select{
    width: auto;
    margin: 0;
}

.checkboxFilterBlock{
    display: flex;
    align-items: center;
    gap: 16px;
}
.checkboxFilterBlock .checkbox{
    margin: 0;
}
.checkboxFilterBlock .checkbox label{
    margin: 0;
    line-height: 18px;
}
.checkboxFilterBlock .checkbox label:before{
    top: 0;
}

.content-search{
    font-size: 14px;
}

#countryTable,
#servicePriceTable{
    width: 100% !important;
}
#servicePriceTable_wrapper .customLabel {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 8px;
}
#servicePriceTable_wrapper .customLabel::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f67c00;
    opacity: .1;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    z-index: 0;
}
#servicePriceTable_wrapper .price-country-title {
    margin-left: 20px;
    display: flex;
    align-items: center;
    width: unset !important;
}
#servicePriceTable_wrapper .additionalSmsIcon {
    position: absolute;
    bottom: 3px;
    left: 6px;
    height: 16px;
    width: 16px;
}
#servicePriceTable_wrapper tr{
    line-height: 30px;
    position: relative;
}

#servicePriceTable_wrapper table.dataTable thead th,
#servicePriceTable_wrapper table.dataTable thead td{
    padding-left: 5px;
    font-size: 14px !important;
    border-bottom: 1px solid #ddd;
}
#servicePriceTable_wrapper .dataTables_empty .customLabel{
    display: none;
}
.ui-tooltip{
    max-width: max-content;
    max-height: 100px;
    z-index: 999;
}
.ui-tooltip-content{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-height: 100px;
    color: #000;
    background-color: #fff;
    white-space: nowrap;
    padding: 15px 25px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.chosen-container {
    min-width: 50px;
}

.topByService__controls{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.topByService__display{
    display: flex;
    gap: 16px;
}
.topByService__graphs{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.topByService__item {
	display: flex;
}
.topByService__index {
	width: 20px;
}
.topByService__country {
    width: 120px;
	margin-right: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.topByService__item-graph{
    width: 100%;
    gap: 4px;
    display: flex;
    flex-direction: column;
}
.topByService__graph {
    display: flex;
    width: 100%;
    line-height: 16px;
    gap: 8px;
}
.topByService__graph-line-orange{
    --theme-color: var(--orange-color);
}
.topByService__graph-line-blue{
    --theme-color: var(--blue-color)
}
.topByService__graph-line-orange,
.topByService__graph-line-blue{
    height: 16px;
    background-color: var(--theme-color);
    animation: smoothWidth 800ms cubic-bezier(.46,.03,.52,.96) both;
    flex-shrink: 0.9;
}
:is(.topByService__graph-line-orange, .topByService__graph-line-blue):hover {
	box-shadow: 0 2px 4px 0px var(--theme-color);
}
.topByService__legend{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.topByService__legend > div{
    display: flex;
    gap: 12px 
}
.topByService__legend-icon{
    width: 14px;
    height: 14px;
    background-color: var(--theme-color);
    flex-shrink: 0;
    margin-top: 4px;
}

@media (max-width: 1065px){
    .display-controls{
        flex-direction: column;
        gap: 16px;
    }
    .display-controls > div{
        width: 100%;
        margin: 0;
    }
    .niceSelector{
        width: 100% !important;
    }

    .checkboxFilterBlock{
        flex-direction: column;
        gap: 8px;
        align-items: unset;
    }

    .topByService__display{
        flex-wrap: wrap;
    }
    .topByService__display > div{
        width: 100%;
    }
    .topByService__graphs{
        width: 100%;
        order: 2;
    }
    .topByService__legend{
        width: 100%;
        order: 1;
    }
}