.grid-a.filter-icon-show .head-table .col .cmd-filter{
  opacity: 1 !important;
}

.grid-a.filter-icon-show .head-table .col .text {
  margin-left: 18px;
}

.grid-a.filter-icon-show .head-table .col .sorting-marker{
  top: 8px;
  left: 4px;
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url('/media/icons/sort.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.grid-a.filter-icon-show .head-table .col .sorting-marker.sorting-desc{
  opacity: 1 !important;
  background-image: url('/media/icons/arrow-up.png') !important;
}

.grid-a.filter-icon-show .head-table .col .sorting-marker.sorting-asc{
  opacity: 1 !important;
  background-image: url('/media/icons/arrow-down.png') !important;
}

.hidden-field{
  display: none;
}

.sms-code-container {
  display: flex;
  gap: 10px;
}
  
.sms-code-input {
  width: 40px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 5px;
  outline: none;
}
  
.sms-code-input:focus {
  border-color: #0ADA51;
}

.w90per{
  width: 90%;
}

.w90per .multiline .text{
  display: block;
  word-wrap: break-word;
  white-space: normal;
  width: calc(100% - 12px);
}

.title.long-title .text{
  display: block;
  word-wrap: break-word;
  white-space: normal;
}

.grid-tariff .head-table{
  display: none !important;
}

.tariff-check-hidden{
  display: none !important;
}

.actions-pane.view-a:has(> .content > .button > .image-actions){
  padding: 0 !important;
}

.button:has(> .image-actions){
  padding: 4px !important;
  border-radius: 4px;
  background-color: var(--base-color);
  --base-color: #FFFFFF;
}

.actions-pane .image-actions{
  width: 32px;
  height: 32px;
  position: relative;
  display: inline-block;
  background-color: var(--base-color);
  background-image: none !important;
}

.actions-pane .image-actions::before{
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  background-image: 
    radial-gradient(circle 4px at 10px 10px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 10px 0px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 0px 10px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 20px 10px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 10px 20px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 17px 3px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 17px 17px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 3px 17px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 2px at 3px 3px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  
}

.actions-pane .image-actions::after {
  content: '';
  left: 16px;
  top: 10px;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #000;
  background-image: 
    radial-gradient(circle 3px at 7px 7px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 7px 0px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 0px 7px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 14px 7px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 7px 14px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 12px 2px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 12px 12px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 2px 12px, var(--base-color) 100%, transparent 0), 
    radial-gradient(circle 1.5px at 2px 2px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.actions-pane .image-actions:hover::before{
  animation: rotationBack 3s linear infinite;
}

.actions-pane .image-actions:hover::after{
  animation: rotationBack 4s linear infinite reverse;
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }

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

.navigation .html > .nav > .item.level1.shown {
  background-size: 20px, 0, 0, 0 !important;
}

.navigation .html > .nav > .item.level1.active {
  background-size: 20px, 0, 0, 0 !important;
}