html {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

body {
    padding: 0;
    margin: 0;
    background: rgb(245, 245, 245);
}

h1 {
    margin-top: 0;
    font-weight: bold;
}

h2 {
    margin-top: 0;
    font-weight: bold;
}

h3 {
    margin-top: 0;
    font-weight: bold;
}

*, *::before, *::after {
            box-sizing: border-box;
        }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
 
}

span.balance { white-space: nowrap; }

.balance-overzero {
    background: var(--color-success);
    color: #fff;
    font-size: 12px;
    padding: 0px 8px;
    border-radius: 8px;
    margin-left: 8px;
    background: var(--color-success);
    box-shadow: 0 0 0 5px var(--color-success-background);
}
.balance-subzero {  


    background: var(--color-red);     color: #fff;
    font-size: 12px;
    padding: 0px 8px;
    border-radius: 8px;
    margin-left: 8px;
    background: var(--color-error);
    box-shadow: 0 0 0 5px var(--color-error-background);



}

.filters-block { margin-bottom: calc(var(--grid-gap)*2) }

.operation-amount {

    white-space: nowrap;

    color: #666;

}

.operation-amount.operation-plus { color: var(--color-success); }
.operation-amount.operation-minus { color: var(--color-error); }

.pages { margin-top: calc(var(--grid-gap)) }

.billing-operations .head .cell {

    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: #fafafa;
     padding: calc(var(--grid-gap)) !important;

}

.billing-operations .head .cell:first-child { border-radius: 0 0 8px 8px }

.billing-operations .operation .cell {
        font-size: 14px;
            padding: calc(var(--grid-gap)) !important;
    border-bottom: 1px solid #eee;
}

.billing-operations .row:last-child .cell { padding-bottom: calc(var(--grid-gap)) !important;  }

.billing-operations .row:hover .cell { background: #fafafa }
.billing-operations .row.openlink:hover .cell { cursor: pointer; }

.ui-sortable { cursor: move }
   .ui-autocomplete {    
      max-height: 300px;
      overflow-y: auto;
      /* prevent horizontal scrollbar */
      overflow-x: hidden;
      z-index: 12312312312312 !important;
   }
 
.ui-menu-item-wrapper {
    padding: 8px !important;
    font-size: 14px;
}

.ui-menu-item-wrapper span {
    display: block;
    color: #999;
    font-size: 12px;
}

.ui-state-active { background: #eee !important; border: none !important; color: #000 !important; margin: 0 !important}
 .grey { color: #999 }
 .grey2 { color: rgba(10, 37, 64, 0.7); }
 

.copy { cursor: pointer }
.resend-block { color: var(--color-text-3); }


/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.icon-tippy {
    color: #fff;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;

}

.event-form .counter {
    float: right;
    font-size: 14px;
    text-transform: lowercase;
    color: #ccc;
}

.width50proc { width: 50%; }

.icon-tippy::before {
    content: '?'
}
.smallFancy { width: auto; max-width: 400px; min-width: 400px;  }

.mediumFancy { width: auto; max-width: 700px; min-width: 700px; }

.bigFancy { width: 100%; }


.ui-error { font-size: 14px; color: var(--color-error);  display: none; box-sizing: border-box; padding: calc(var(--grid-gap)/2) 0  }

.display { display: block; }

.input-group {

    position: relative;
    width: 100%;
    max-width: 400px;
    font-size: 14px;
}

.input-group .input, .input-group  .select, .input-group .textarea {

    width: 100%;
    max-width: 400px;
    padding: calc(var(--grid-gap));
    box-sizing: border-box;
    outline: none;
    border: 1px solid #ccc;
    border-radius: calc(var(--grid-gap));
    z-index: 50;
    background: #fff;

}

.input-group  .select option {
 padding: calc(var(--grid-gap));
}

.input-group .placeholder {

    position: absolute;
    top: calc(var(--grid-gap));
    left: calc(var(--grid-gap)/2);
    font-size: 14px;
    padding: 0 calc(var(--grid-gap)/2);
    color: #666;
    transition: 0.3s;
    pointer-events: none;

}

.input-group button, .input-group a.button { width:100% }

.input-group .clear-input {

    position: absolute;
    top: calc(var(--grid-gap));
    right: calc(var(--grid-gap)/2);
    font-size: 14px;
    padding: 0 calc(var(--grid-gap)/2);
    color: #666;
    transition: 0.3s;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}

.input-group .show-password-input {

    position: absolute;
    top: calc(var(--grid-gap));
    right: calc(var(--grid-gap)/2);
    font-size: 14px;
    padding: 0 calc(var(--grid-gap)/2);
    color: #666;
    transition: 0.3s;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}


 

.input-group .input:not(:placeholder-shown) + .placeholder, .input-group .input:focus + .placeholder, .input-group .textarea:not(:placeholder-shown) + .placeholder, .input-group .textarea:focus + .placeholder  {
    top: calc(var(--grid-gap)/-2);
    color: #333;
    background: #fff;
    font-size: 11px;

}

.input-group .input:not(:placeholder-shown) ~ span.clear-input, .input-group .input:focus ~ span.clear-input {
    opacity: 1;
}
.input-group .input:not(:placeholder-shown) ~ span.show-password-input, .input-group .input:focus ~ span.show-password-input {
    opacity: 1;
}

.input-group label.checkbox {
   
  display: grid;
  grid-template-columns: calc(var(--grid-gap)/1) auto;
  gap: calc(var(--grid-gap)/2);
}


 

 
 

.input-group label.checkbox input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #eee;
  /* Not removed via appearance */
  margin: 0;
  margin-top: 4px;
  font: inherit;
  width: 14px;
  height: 14px;
  border: 2px solid #eee;
  border-radius: 2px;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

.input-group label.checkbox input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height:  8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  color: red;
  background: #fff;
  /* Windows High Contrast Mode */
 
}
.input-group label.checkbox input[type="checkbox"]:checked {
     background:  var(--color-background-button);
     border-color: var(--color-background-button);
}
.input-group label.checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);

}

.input-group label.checkbox input[type="checkbox"]:focus {
 
}

.input-group label.checkbox input[type="checkbox"]:disabled {
  
  color: var(--color-text-3);
  cursor: not-allowed;
}

.input-group label.radio {
   
  display: grid;
  grid-template-columns: calc(var(--grid-gap)/1) auto;
  gap: calc(var(--grid-gap)/2);
  padding: calc(var(--grid-gap)/2) 0;
}


.input-group label.radio input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #eee;
  /* Not removed via appearance */
  margin: 0;
  margin-top: 4px;
  font: inherit;
  width: 14px;
  height: 14px;
  border: 2px solid #eee;
  border-radius: 100%;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

.input-group label.radio input[type="radio"]::before {
  content: "";
  width: 8px;
  height:  8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  color: red;
  background: #fff;
  /* Windows High Contrast Mode */
 
}
.input-group label.radio input[type="radio"]:checked {
     background:  var(--color-background-button);
     border-color: var(--color-background-button);
}
.input-group label.radio input[type="radio"]:checked::before {
  transform: scale(1);

}

.input-group label.radio input[type="radio"]:focus {
 
}

.input-group label.radio input[type="radio"]:disabled {
  
  color: var(--color-text-3);
  cursor: not-allowed;
}


.no-display { 
    display: none !important 
}
 
.app-loader__hide {
    opacity: 0;
}
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    background-color: rgb(255 255 255 / 90%);
    transition: opacity 0.3s ease-out;
}

.app-loader__icon {
    animation: jump 1s ease-in-out infinite;
     
    width: 150px;

}

.app-loader__icon-shadow {
    height: 5px;
    width: 100px;
    margin-top: 10px;
    background: #4E76FC;
    border-radius: 100%;
    opacity: 0.5;
    filter: blur(2.5px);
    animation: jumpShadow 1s ease-in-out infinite;
}

@keyframes jump {
  0% {}
  50% {
    transform: translateY(-4px);
  }
  100% {}
}

@keyframes jumpShadow {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.15;
    transform: translateY(4px) scaleX(1.66);
  }
  100% {
    opacity: 0.5;
  }
}


    input  {width: 100%;
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
    border: 2px solid #eee; box-sizing: border-box;  background: #fff;}

        textarea  {width: 100%;
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
    border: 2px solid #eee; box-sizing: border-box;  }
input[type="checkbox"] { width: auto }
input[type="radio"] { width: auto }
    select {width: 100%; box-sizing: border-box; 
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
border: none;
    box-shadow: inset 0px 0px 0px 2px #eee;
    background: #fff;
       outline: none}



.grid { display: grid; }

.grid-gap { grid-gap: var(--grid-gap); }
.grid-12 {  grid-template-columns: repeat(12, [col] 1fr);}
 
.grid-12 {    grid-column: span 12;}
.grid-11 {    grid-column: span 11;}
.grid-10 {    grid-column: span 10; }
.grid-9 {    grid-column: span 9;}
.grid-8 {    grid-column: span 8;}
.grid-7 {    grid-column: span 7;}
.grid-6 {    grid-column: span 6;}
.grid-5 {    grid-column: span 5;}
.grid-4 {    grid-column: span 4;}
.grid-3 {    grid-column: span 3;}
.grid-2 {    grid-column: span 2;}
.grid-1 {    grid-column: span 1;}

.flex { display: flex;    align-items: center;    gap: var(--grid-gap);    justify-content: space-between;    }


.justify-content-start {    justify-content: flex-start; }
.align-items-start { align-items: start; }

.align-self { align-self: auto; }
.align-center { text-align:  center; }


.box-block {

    padding: var(--grid-gap);
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(196, 208, 227, .7);
    margin-bottom: var(--grid-gap);
}

.box-block-disabled { opacity: 0.25 }

.margin-bottom { margin-bottom:  var(--grid-gap); }
.margin-bottom-half { margin-bottom:  calc(var(--grid-gap)/2); }

.border-radius {    border-radius: var(--block-border-radius);}

.padding {padding: calc(2 * var(--grid-gap));}


.wrapper {  margin-left: auto;  margin-right: auto; flex-basis: 100%;    padding: calc(var(--grid-gap) * 2) calc(var(--grid-gap) * 4);    box-sizing: content-box;}
 

 
header {
    display: flex;
    
 
    top: 0;
    width: 100%;
    align-items: center;
    
    z-index: 3;
    user-select: none;
 

}

section  {  padding: calc(2 * var(--grid-gap)) 0; }

 

header .logo {  align-items: center;    gap: var(--grid-gap);    justify-content: space-between;}
header .logo img {  height: 32px; width: auto; }
footer .logo img {  height: 32px; width: auto; }


.box {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
     
    max-width: 400px;
    margin: 0 auto;
    gap: var(--grid-gap);
    border-radius: calc(2*var(--grid-gap));
    box-sizing: border-box;
    padding: calc(2*var(--grid-gap));
    background: var(--color-background-boxes);

        box-shadow: rgba(78, 88, 134, 0.04) 0px 0px 16px;
    
}

.box h2 {
    font-size: 18px;
    margin: 0;
} 
.box p {
    font-size: 14px;
    margin: 0;
}

.invite-box {  padding: calc(var(--grid-gap)); background:  var(--color-highlight); }
a {
    color: var(--color-link);
    text-decoration: none;
}
.saveStatus { color: var(--color-success) }
button { 
    font-size: 14px;
      
    max-width: 400px;
    padding: calc(var(--grid-gap)) calc(var(--grid-gap)*4);
    box-sizing: border-box;
    outline: none;
    border: 1px solid #ccc;
    border-radius: calc(var(--grid-gap));
    z-index: 50;
    background: var(--color-background-button);
    color: var(--color-button-text);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

button.small { 
    font-size: 14px;
      
    max-width: 400px;
    padding: calc(var(--grid-gap)/2) calc(var(--grid-gap)*2);
    box-sizing: border-box;
    outline: none;
    border: 1px solid #ccc;
    border-radius: calc(var(--grid-gap));
    z-index: 50;
    background: var(--color-background-button);
    color: var(--color-button-text);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}


button:hover { 
    background: var(--color-background-button-hover);
}

button:active { 
    background: var(--color-background-button-pressed);
}

 
button.mediumButton {max-width: 200px;}

button.button-loading span {
  visibility: hidden;
  opacity: 0;
}

button.button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

a.button.simpleButtonText {

    background: #fff;
    color: #000;

}
a.button.simpleButtonText:hover {

    background: #ccc;
 

}
a.button.simpleButtonText:active {
    background: #999;
}

a.button.simpleButton {

    background: #eee;
    color: #000;

}
a.button.simpleButton:hover {

    background: #ccc;
 

}
a.button.simpleButton:active {
    background: #999;
}
.align-right { text-align: right }
a.button {
    display: inline-block;
    text-align: center;
    font-size: 14px;
    
    padding: calc(var(--grid-gap));
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: calc(var(--grid-gap));
    z-index: 50;
    background: var(--color-background-button);
    color: var(--color-button-text);
    border: none;
    cursor: pointer;
    white-space: nowrap;

}

a.button:hover { 
    background: var(--color-background-button-hover);
}

a.button-small {
    display: inline-block;
    text-align: center;
    font-size: 13px;
    padding: 4px 16px;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 50;
    background: var(--color-background-button);
    color: var(--color-button-text);
    border: none;
    cursor: pointer;
    white-space: nowrap;

}

a.button:hover { 
    background: var(--color-background-button-hover);
}


.buttons-inline {

    display: flex;
        gap: calc(var(--grid-gap)/2);
        width: 100%;
}
.simpleFooter {
    background: #eee;
    padding: var(--grid-gap);
    border-radius: var(--grid-gap);
    font-size: 14px;
    justify-content: normal;
    color: #999;
}

.simpleFooter a {
    color: rgb(10 13 21);
    text-decoration: none;
}

.stop_functions { padding: var(--grid-gap);
    border: 2px solid  var(--color-red);
    max-width: 800px; margin-bottom: calc(var(--grid-gap)*2);
    border-radius: 4px;
}

.stop_functions p { margin: 0; line-height: 150%; }
 .stop_functions span {     background: var(--color-red);
    /* color: #fff; */
    padding: 0px 8px;
    /* text-transform: lowercase; */
    font-size: 12px;
    /* border: 2px solid var(--color-red); */
    border-radius: 4px;
    white-space: nowrap;
    margin-right: 4px;
    display: inline-block; }
 
:root {
    --grid-gap: 16px;
    --block-border-radius: 16px;
    --text-font-size-1: 16px;
    --text-font-size-2: 20px;
    --text-font-size-0: 18px;
    --header-font-size-0: 36px;
    --heading-font-size-1: 32px;
    --heading-font-size-2: 20px;


    --color-text-main: #222;
    --color-text-second: rgb(111, 111, 111);

    --color-text-3: #999;

    --color-button-text: #fff;
    --color-link: rgb(25, 79, 218);

    --color-background-button: rgb(43, 97, 236);
    --color-background-button-hover: rgb(25, 79, 218);

    --color-background-button-pressed: rgb(23, 69, 187);

    --color-background-boxes: #fff;

    --color-highlight: rgb(211 227 253 / 38%);
    --color-highlight2: #fcf4e2;


    

    --color-error: rgb(204 0 0 / 80%);
    --color-success: rgb(176, 216, 65);

    --color-error-background:rgb(204 0 0 / 20%);
    --color-success-background: rgb(176 216 65 / 20%);
    --color-gray-background: #eee;


    --color-warn: #ff9500;

    --color-red: #e6adad;


    --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

}

 

@media(max-width: 760px) {

    :root {
        --grid-gap: 16px;
        --block-border-radius: 16px;
        --text-font-size-1: 16px;

        --text-font-size-2: 20px;
        --text-font-size-0: 18px;
        --header-font-size-0: 36px;
        --heading-font-size-1: 28px;
        --heading-font-size-2: 24px;

        --header-height: 70px;

    }

    header .logo img {
        margin: 0 auto;
        display: block;
    }

    section.main { padding: calc(var(--grid-gap));  }

    .wrapper { padding: calc(var(--grid-gap) * 1) calc(var(--grid-gap) * 1);    box-sizing: content-box;}
 
    .simpleFooter { 

        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
 
        gap: calc(var(--grid-gap)/2); 
    }
}

.notifyjs-liveinform-base {

    background: #fff;
   padding: calc(var(--grid-gap)/2) calc(var(--grid-gap)*2); 
   border-radius: var(--grid-gap);
       width: auto;
    font-weight: 300;
    font-size: 14px;
}

.notifyjs-liveinform-success {
    background: var(--color-success);
    color: #fff;
}

.notifyjs-liveinform-error {
    background: var(--color-error);
    color: #fff;
}
.notifyjs-liveinform-warn {
    background: var(--color-warn);
    color: #fff;
}
.notifyjs-liveinform-info {
   
}

    .user-role-name { font-size: 12px;  background: rgb(250 219 71 / 30%); padding: 4px 8px; border-radius: 4px; color: #666}
    .shop-list {
        
        display: grid;
        column-gap: var(--grid-gap);
        row-gap: var(--grid-gap);
        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));

    }

    .shop-list-element {
        position: relative;
        cursor: default;
        transition: 0.3sease -out;
        border-radius: 12px;
        background-color: var(--color-bg-hover);
        padding: calc(var(--grid-gap) / 2);
        font-size: 14px;

        padding: calc(var(--grid-gap) / 1);
        font-size: 14px;
    /*background: rgb(211 227 253 / 38%);*/
    cursor: pointer;
    box-shadow: 0 4px 12px hsla(0, 0%, 6%, .08);

    }
.shop-list-element.shop-add {
    background: rgb(211 227 253 / 38%);

}

.shop-list-element.account-add {
    background: rgb(211 227 253 / 38%);

}

.shop-list-element.current-shop { box-shadow: inset 0px 0px 0px 2px var(--color-success); }

    .shop_id { color: #999 }


.root {
    display: grid;
    grid-template-columns: var(--menu-unfold) auto;
    grid-template-rows: minmax(100vh, auto);
}
.root .menu {   width: 280px;
    background: #fff;
    box-shadow: 0 10px 44px 0 rgba(196, 208, 227, .25);
    z-index: 1000;

    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    height: 100vh;

    overflow: hidden;
position: sticky;
    top: 0;
    /* height: auto; */
    scrollbar-width: none;
}

.root .menu .scroll {
    overflow-y: auto;
    scrollbar-width: thin;
}
.root .main { background: #fff; display: flex; min-height: 100vh; justify-content: space-between;  flex-direction: column; }
.root .menu ul {
        padding: 0;
    margin: 0 10px;
}
.root .menu li {
     display: block; margin: 0; padding: 0;
}
.root .menu li a {
    color: #666;
    width: 100%;
    display: block;
    cursor: pointer;
        padding: calc(var(--grid-gap) / 2) calc(var(--grid-gap)) calc(var(--grid-gap) / 2) calc(var(--grid-gap)*25/10);
    display: block;
    
    border-radius: calc(var(--grid-gap)/2);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
}
.root .menu .arrow {
float: right;
    opacity: 0.5;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle/%3E%3Cg data-name='Layer 2' id='Layer_2'%3E%3Cpath d='M16,21a1,1,0,0,1-.71-.29l-8-8a1,1,0,1,1,1.42-1.42L16,18.59l7.29-7.3a1,1,0,0,1,1.42,1.42l-8,8A1,1,0,0,1,16,21Z'/%3E%3C/g%3E%3Cg id='frame'%3E%3Crect class='cls-1' height='32' width='32'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 18px;
    background-repeat: no-repeat;
    -moz-transition: transform 1s;
    -webkit-transition: transform 1s;
    transition: transform .5s;
}
.flip {
    transform: rotate(-180deg);
}
.menu-icon {
    width: 14px;
    height: 14px;
    background-position: center center;
    display: inline-block;
    background-size: 14px;
    background-repeat: no-repeat;
    margin-right:  calc(var(--grid-gap) / 2);
    position: absolute;
    top: calc(var(--grid-gap)*5/8);
    left: calc(var(--grid-gap));
    filter: invert(60%);
}

.dot {
    width: 7px;
    border-radius: 50%;
    height: 7px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;

}

.root .menu ul.sub li .dots {
    position: absolute;
    right: 20px;
    top: 6px;
}
.root .menu .dot {
    width: 7px;
    border-radius: 50%;
    height: 7px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;

}

.dot.error {
    background: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-background);
}

.dot.active {
    background: var(--color-success);
    box-shadow: 0 0 0 3px var(--color-success-background);

}

.dot.inactive {
    background: #ccc;
    box-shadow: 0 0 0 3px var(--color-gray-background);
}

.root.menu .feature {

    background: var(--color-success);

}

.index {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='%23000' fill-rule='evenodd' clip-rule='evenodd' version='1.1' viewBox='0 0 24 24' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='info'/%3E%3Cg id='icons'%3E%3Cpath d='M23.6,10.3L13.2,2.4c-0.7-0.5-1.7-0.5-2.5,0L0.4,10.3C-0.4,10.9,0,12,1,12h1v6.1C2,20.2,3.8,22,6,22h2 c0.6,0,1-0.4,1-1v-4.9C9,15,9.9,14,11,14h2c1.1,0,2,1,2,2.1V21c0,0.5,0.4,1,1,1h2c2.2,0,4-1.8,4-3.9V12h1 C23.9,12,24.3,10.9,23.6,10.3z' id='home' fill='' /%3E%3C/g%3E%3C/svg%3E");
 
}
.tracks {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z' fill='currentColor'/%3E%3Cpath clip-rule='evenodd' d='M12 3C12.5523 3 13 3.44772 13 4V5.07089C16.0657 5.5094 18.4906 7.93431 18.9291 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H18.9291C18.4906 16.0657 16.0657 18.4906 13 18.9291V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V18.9291C7.93431 18.4906 5.5094 16.0657 5.07089 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H5.07089C5.5094 7.93431 7.93431 5.5094 11 5.07089V4C11 3.44772 11.4477 3 12 3ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z' fill='currentColor' fill-rule='evenodd'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Layer_1' style='enable-background:new 0 0 30 30;' version='1.1' viewBox='0 0 30 30' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M20.619,18.457c-0.081,0.081-0.163,0.162-0.244,0.241c-0.547,0.539-1.055,1.044-1.464,1.524C23.523,20.765,26,22.188,26,23 c0,1.019-3.883,3-11,3S4,24.019,4,23c0-0.812,2.477-2.235,7.089-2.778c-0.41-0.48-0.918-0.985-1.464-1.524 c-0.08-0.079-0.162-0.16-0.244-0.241C5.226,19.167,2,20.696,2,23c0,3.282,6.54,5,13,5s13-1.718,13-5 C28,20.696,24.774,19.167,20.619,18.457z'/%3E%3Cpath d='M15,2c-4.418,0-8,3.582-8,8c0,6,7,8,7,12c0,0.552,0.448,1,1,1s1-0.448,1-1c0-4,7-6,7-12C23,5.582,19.418,2,15,2z M15,12 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C17,11.105,16.105,12,15,12z'/%3E%3C/svg%3E");
}

.reviews {
 
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Glyph' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M29.895,12.52c-0.235-0.704-0.829-1.209-1.549-1.319l-7.309-1.095l-3.29-6.984C17.42,2.43,16.751,2,16,2 s-1.42,0.43-1.747,1.122l-3.242,6.959l-7.357,1.12c-0.72,0.11-1.313,0.615-1.549,1.319c-0.241,0.723-0.063,1.507,0.465,2.046 l5.321,5.446l-1.257,7.676c-0.125,0.767,0.185,1.518,0.811,1.959c0.602,0.427,1.376,0.469,2.02,0.114l6.489-3.624l6.581,3.624 c0.646,0.355,1.418,0.311,2.02-0.114c0.626-0.441,0.937-1.192,0.811-1.959l-1.259-7.686l5.323-5.436 C29.958,14.027,30.136,13.243,29.895,12.52z' id='XMLID_328_'/%3E%3C/svg%3E");
}

.check {
 
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.488 21.754c.294.157.663.156.957-.001 8.012-4.304 8.581-12.713 8.574-15.104a.988.988 0 0 0-.596-.903l-8.05-3.566a1.005 1.005 0 0 0-.813.001L3.566 5.747a.99.99 0 0 0-.592.892c-.034 2.379.445 10.806 8.514 15.115zM8.674 10.293l2.293 2.293 4.293-4.293 1.414 1.414-5.707 5.707-3.707-3.707 1.414-1.414z'/%3E%3C/svg%3E");}

.settings {
 
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='info'/%3E%3Cg id='icons'%3E%3Cpath d='M22.2,14.4L21,13.7c-1.3-0.8-1.3-2.7,0-3.5l1.2-0.7c1-0.6,1.3-1.8,0.7-2.7l-1-1.7c-0.6-1-1.8-1.3-2.7-0.7 L18,5.1c-1.3,0.8-3-0.2-3-1.7V2c0-1.1-0.9-2-2-2h-2C9.9,0,9,0.9,9,2v1.3c0,1.5-1.7,2.5-3,1.7L4.8,4.4c-1-0.6-2.2-0.2-2.7,0.7 l-1,1.7C0.6,7.8,0.9,9,1.8,9.6L3,10.3C4.3,11,4.3,13,3,13.7l-1.2,0.7c-1,0.6-1.3,1.8-0.7,2.7l1,1.7c0.6,1,1.8,1.3,2.7,0.7L6,18.9 c1.3-0.8,3,0.2,3,1.7V22c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-1.3c0-1.5,1.7-2.5,3-1.7l1.2,0.7c1,0.6,2.2,0.2,2.7-0.7l1-1.7 C23.4,16.2,23.1,15,22.2,14.4z M12,16c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4s4,1.8,4,4C16,14.2,14.2,16,12,16z' id='settings'/%3E%3C/g%3E%3C/svg%3E");
}

.integrations {
 
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'/%3E%3C/svg%3E");

}
.deliveries {
 
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg enable-background='new 0 0 24 24' height='24px' id='Layer_1' version='1.1' viewBox='0 0 24 24' width='24px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M20.6,5.7c0-0.2-0.1-0.3-0.2-0.4l-8.1-4.7c-0.1-0.1-0.3-0.1-0.5,0L3.6,5.3C3.5,5.4,3.4,5.5,3.4,5.7c0,0.2,0.1,0.3,0.2,0.4 l8.1,4.7c0.1,0,0.2,0.1,0.2,0.1s0.2,0,0.2-0.1l8.1-4.7C20.5,6,20.6,5.8,20.6,5.7z'/%3E%3Cpath d='M10.6,13.2L2.5,8.5C2.3,8.4,2.1,8.4,2,8.5C1.9,8.6,1.8,8.8,1.8,8.9v9.4c0,0.2,0.1,0.3,0.2,0.4l8.1,4.7 c0.1,0,0.2,0.1,0.2,0.1s0.2,0,0.2-0.1c0.1-0.1,0.2-0.2,0.2-0.4v-9.4C10.9,13.4,10.8,13.3,10.6,13.2z'/%3E%3Cpath d='M22,8.5c-0.1-0.1-0.3-0.1-0.5,0l-8.1,4.7c-0.1,0.1-0.2,0.2-0.2,0.4V23c0,0.2,0.1,0.3,0.2,0.4c0.1,0,0.2,0.1,0.2,0.1 s0.2,0,0.2-0.1l8.1-4.7c0.1-0.1,0.2-0.2,0.2-0.4V8.9C22.2,8.8,22.1,8.6,22,8.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.finance {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cpath d='M20.5.305H3.5A3.535,3.535,0,0,0,0,3.805v13a4.5,4.5,0,0,0,3.306,4.174L14.465,23.6a2.929,2.929,0,0,0,2.487-.489A2.863,2.863,0,0,0,18,20.805l0-9.692a4.264,4.264,0,0,0-3.119-4.1L4.056,4.028a.75.75,0,1,1,.4-1.446l3.534.975.012,0H20.5a.75.75,0,1,1,0,1.5H15.265a.25.25,0,0,0-.067.491l.086.024a5.719,5.719,0,0,1,2.9,1.894.254.254,0,0,0,.194.091H20.5a.75.75,0,0,1,0,1.5H19.462a.249.249,0,0,0-.238.327,5.609,5.609,0,0,1,.281,1.731v6.942a.25.25,0,0,0,.25.25H20.5a3.5,3.5,0,0,0,3.5-3.5v-11A3.5,3.5,0,0,0,20.5.305Zm-5,15a2,2,0,1,1-2-2A2,2,0,0,1,15.5,15.305Z'/%3E%3C/svg%3E");
}

.sendings {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.5 18 3.5 4 3.5-4H19c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2H5c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h3.5zM7 7h10v2H7V7zm0 4h7v2H7v-2z'/%3E%3C/svg%3E");
}
.new {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg style='enable-background:new 0 0 36 36;' version='1.1' viewBox='0 0 36 36' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23222A30;%7D .st1%7Bfill:none;stroke:%23222A30;stroke-width:2.0101;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%23171715;%7D .st3%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23222A30;%7D%0A%3C/style%3E%3Cg id='Layer_1'/%3E%3Cg id='icons'%3E%3Cpath class='st0' d='M19.6,2h-3.2c-0.9,0-1.6,0.7-1.6,1.6v11.2H3.6c-0.9,0-1.6,0.7-1.6,1.6v3.2c0,0.9,0.7,1.6,1.6,1.6 h11.2v11.2c0,0.9,0.7,1.6,1.6,1.6h3.2c0.9,0,1.6-0.7,1.6-1.6V21.2h11.2c0.9,0,1.6-0.7,1.6-1.6v-3.2c0-0.9-0.7-1.6-1.6-1.6H21.2V3.6 C21.2,2.7,20.5,2,19.6,2z' id='add_1_'/%3E%3C/g%3E%3C/svg%3E");
}
.reports {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='info'/%3E%3Cg id='icons'%3E%3Cg id='statistics'%3E%3Cpath d='M5,12H3c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-6C7,12.9,6.1,12,5,12z'/%3E%3Cpath d='M13,2h-2C9.9,2,9,2.9,9,4v16c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V4C15,2.9,14.1,2,13,2z'/%3E%3Cpath d='M21,8h-2c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V10C23,8.9,22.1,8,21,8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.root .menu li a:hover {
    background: #fafafa;
}

.root .menu ul.sub li a:hover {
    background: #fafafa;
}
 
.root .menu ul.sub { display: none;     margin: 0 0 0 calc(var(--grid-gap)*15/10); }

.root .menu ul.sub li a {
        padding: calc(var(--grid-gap) / 2) calc(var(--grid-gap)) calc(var(--grid-gap) / 2) calc(var(--grid-gap));
    
}
.root .menu ul.sub li a.selected {
    background: rgb(211 227 253 / 38%) !important;
}

.root .menu li.selected a { background: rgb(211 227 253 / 38%); color: #000 }


.root .menu li.selected a .menu-icon { filter: invert(0%); }

.root .menu li.selected .arrow {   transform: rotate(-180deg); }


.root .menu li.selected ul.sub { display: block }
.root .menu li.selected ul.sub li a { background: #fff; color: #666 }
.root .menu li.selected ul.sub li a:hover { background: #fafafa;   }

.root .menu .logo {
    display: block;
    height: 30px;
    width: 180px;
    background: url('/assets/img/liveinform_logo.svg') center center;
    background-size: 143px 35px;
    background-repeat: no-repeat;
    padding-top: 50px;
    margin: 0 auto;
}

.root .header-block {
      padding: calc(var(--grid-gap)* 2);
    display: flex;
    justify-content: flex-end;
    font-size: 14px;

}

 .icon-direction {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/direction.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

    display: none;

}
.icon-arrow-down {
 display: inline-block;
    height: 16px;
    width: 16px;
    background: url('/assets/img/arrow-down.svg?22') center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    opacity: 0.3;
    cursor: pointer;
 }
 .icon-arrow-top {
 display: inline-block;
    height: 16px;
    width: 16px;
    background: url('/assets/img/arrow-top.svg?2') center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    opacity: 0.3;
    cursor: pointer;
 }
.icon-delete {
 display: inline-block;
    height: 16px;
    width: 16px;
    background: url('/assets/img/delete.svg') center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    opacity: 0.3;
    cursor: pointer;
 }
.icon-drag {
 display: inline-block;
    height: 16px;
    width: 16px;
    background: url('/assets/img/drag-dotts.svg') center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    opacity: 0.3;
    cursor: pointer;
 }

 .icon-reviews-yamaps {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/yamaps.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

  .icon-reviews-yabusiness {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/yabusiness.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

   .icon-reviews-2gis {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/2gis.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

    .icon-reviews-google {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/google.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

    .icon-reviews-zoon {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/zoon.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

     .icon-reviews-site {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/site.svg') center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }

     .icon-reviews-vk {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/vk.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }
    .icon-reviews-avito {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/avito.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }
    .icon-reviews-otzovik {
 display: inline-block;
    height: 32px;
    width: 32px;
    background: url('/assets/img/otzovik.svg') center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
     
    cursor: pointer;
 }


.icon-telegram {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/telegram.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

}

.icon-whatsapp {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/whatsapp.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

}

.icon-email {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/email.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

}

.icon-sms {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/sms.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

}


.icon-call {
 display: inline-block;
    height: 12px;
    width: 12px;
    background: url('/assets/img/call.svg') center center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
     
    margin-right: calc(var(--grid-gap)/2);

}

.event .badges { margin-bottom: var(--grid-gap); display: flex; align-items: center; gap: var(--grid-gap);}

.event  .badges div:last-child { margin-left: auto;  }
.event  .badges div:last-child label { margin: 0 var(--grid-gap) }

.event_type .text { margin-bottom: var(--grid-gap) }

.event_type .subject { margin-bottom: var(--grid-gap); font-weight: bold }


.channel {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    background: #eee;
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    white-space: nowrap;
}

.direction {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    background: #eee;
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
}

.event .delivery {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    box-shadow: inset 0px 0px 0px 2px #eee;
    color: #ccc;
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
}
.event .step {
        font-weight: bold;
    font-size: 14px;
    margin-bottom: calc(var(--grid-gap) / 2);
}

.channel-sms {
    background: #fff100 !important;

}

.channel-email {
    background: #cdedff !important
}

.channel-telegram {
    background: #24A1DE !important;
    color: #fff;
}

.channel-cascade {
    background: #2200ff  !important;
    color: #fff;
}


.channel-sms-title {
    color: #ffbb68  !important;

}

.channel-email-title {
    color: #58c3ff !important
}
.channel-whatsapp-title {
    color: #00a884 !important
}
 
.channel-telegram-title {
    color: #24A1DE !important;
     
}

.channel-cascade-title {
    color: #2200ff  !important;
 
}

 


.channel-call { background: #ffdc85 !important }

.channel-telegram .icon-telegram {
     filter: invert(100%);
}

.channel-whatsapp {
    background: #00a884 !important;
    color: #fff;
}

.channel-whatsapp .icon-whatsapp {
     filter: invert(100%);
}

.table { display: table }
.row { display: table-row; }
.cell { display: table-cell; padding: 0 calc(var(--grid-gap)) calc(var(--grid-gap)) 0; position: relative;  vertical-align: top;}
.table .row:last-child .cell { padding-bottom: 0 }
.table .row .cell:last-child  { padding-right: 0 }


.flexMenu { display: flex; gap: calc(var(--grid-gap)*2); }
.section-menu { width: 160px; }
.section-main { max-width:600px; }

.section-menu .section-menu-item { 
    margin-bottom: calc(var(--grid-gap)/2);
     margin-right: calc(var(--grid-gap)/2);
    border-radius: 4px;
    padding: calc(var(--grid-gap)/2) calc(var(--grid-gap));
    cursor: pointer;
     }

.section-menu .section-menu-item.selected {
    background: rgb(211 227 253 / 38%) !important;
}

.section-menu.horizontal { width: 100%; }

.section-menu.horizontal .section-menu-item {
    background: #eee;
}

.section-menu.horizontal .section-menu-item.selected {
    background: var(--color-link) !important;

    color: #fff;
}

.section-menu.horizontal { margin-bottom:  calc(var(--grid-gap)*2) }


.integration-header { padding: calc(var(--grid-gap) * 1) 0;
  
    border-bottom: 2px solid #eee;
    margin-bottom: calc(var(--grid-gap) * 2);
   font-size: 14px;
   color: #666;

     } 

    .integration-header.flex {
        justify-content: flex-start;
            gap: calc(var(--grid-gap)*2);
     }
.integration-header div div { padding: 2px 0; }

     .integration-header .logo { height: 32px; }

     .integration-header .contacts a { color: #999 }
 .integration-help { max-width: 800px }

.section-menu.horizontal  .section-menu-item { display: inline-block; }
 


 .row-filters { display: flex;
    align-items: center;
    gap: var(--grid-gap);
    flex-wrap: wrap;
}
.form-filters .row-filters { margin-bottom: var(--grid-gap); }
 .form-filters div small { display: block; font-size: 11px; color: #ccc; margin-bottom: 4px; }
.form-filters select, .form-filters  input { padding: calc(var(--grid-gap)/4); font-size: 13px;}

.form-filters button {  padding: calc(var(--grid-gap)/2) calc(var(--grid-gap)*4); font-size: 13px; }
 .filters-block { display: flex;
    align-items: center;
    gap: var(--grid-gap);
    flex-wrap: wrap;
     }


     .filters-block div small { display: block; font-size: 11px; color: #ccc; margin-bottom: 4px; }
.results_count {
    padding: calc(var(--grid-gap));
    text-align: center;
    color: #999;
}
.results_count  span {     color: var(--color-link); }
     .load-more {   }
.load-more a {

    display: block;
    padding: calc(var(--grid-gap)) calc(var(--grid-gap) * 2);
    background: #fafafa;
    border-radius: calc(var(--grid-gap) / 2);
     margin-top: calc(var(--grid-gap));
    text-align: center;
    border: 1px solid #eee;
}
.amount-examples {  margin: var(--grid-gap) 0 }

.amount-examples span { display: inline-block; margin-right: 8px  }
.amount-examples span a { background: #eee; padding: 4px 8px; font-size: 12px; color: #000; border-radius: 4px; }

.payment-methods .payment-group { margin-bottom: var(--grid-gap) }

.payment-methods .payment-group .group-name { font-weight: bold; display:  block; margin-bottom: calc(var(--grid-gap)/2) }

.payment-methods .payment-group .payment-provider {   }
.payment-provider { cursor:pointer; }
.payment-provider:hover .provider-icon { background: #eee }

span.provider-description {
    color: #999;
    font-size: 14px;
    display: block;
    margin-bottom: calc(var(--grid-gap) / 2);
}
.tokens-list .table .row .cell:first-child { width: 40% }
.events-reviews-block {

   background: #fff;
    margin: 0 0 calc(var(--grid-gap) * 2) 0;
    /* border: 1px solid #000; */
    border-radius: 4px;
    cursor: pointer;
    padding: calc(2 * var(--grid-gap));
    background: linear-gradient(148deg, rgb(255 176 0 / 10%), rgb(247 35 235 / 10%));
    position: relative;

}
.events-reviews-block p {   font-size:16px; }
.events-reviews-block a.button {
    background: #fff;
    color: var(--color-background-button-hover);
}
.events-reviews-block h4 {

        margin-top: 0; 
    font-size: 20px;
    margin-bottom: 20px;
}
.events-reviews-block .reviews-on {
    color: var(--color-success);
    font-size: 14px;

    background: var(--color-success);
    font-size: 14px;
    display: inline;
    color: #fff;
    padding: 4px calc(2 * var(--grid-gap));;
    /* font-size: 10px; */
    border-radius: calc(2 * var(--grid-gap));
    /* font-weight: bold; */
    /* text-transform: uppercase; */
    position: absolute;
    top: calc(2 * var(--grid-gap));
    right: calc(2 * var(--grid-gap));
    color: #000;
 }
.events-reviews-block p:last-child { margin-bottom: 0 }


.payment-providers { display: flex;
    align-items: center;
    gap: var(--grid-gap); flex-wrap: wrap;}
.payment-providers  .provider-icon {     width: 180px;
    height: 50px;
    text-align: center;
    padding: calc(var(--grid-gap) / 2);
    border: 1px solid #ccc;
    border-radius: 4px;display: table-cell;
    vertical-align: middle; position:relative; }

    .provider-icon.loading {
        opacity: 0.3;
    }

    .payment-provider .loading span {
  visibility: hidden;
  opacity: 0;
}

.payment-provider .loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: var(--color-link);
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}


   .payment-providers  .provider-icon img { max-height: 30px;
    max-width: 150px;}
 .payment-providers  .provider-icon { position:relative; }

.payment-providers  .provider-icon .exp {position: absolute;
    left: 8px;
    bottom: 8px;
    /* font-weight: bold; */
    font-size: 11px;
    color: #666;}
.contragent-form h4 { font-size: 14px; margin-top: 0; margin-bottom: calc(var(--grid-gap)/2) }
.contragent-form .table { width: 100% }

input:read-only, textarea:read-only { background: #eee }

.access-who {
    font-size: 12px;
    background: var(--color-highlight);
    padding: 4px;
    border-radius: 4px;
    color: #666;
    display: inline-block;
    margin-left: 8px;
}


.access-row { margin-bottom: calc(var(--grid-gap)); padding: var(--grid-gap);
    /* border: 1px solid #eee; */
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(196, 208, 227, .7);justify-content: flex-end;     align-items: start;}
.access-row div:first-child { margin-right: auto;  }
    
.access-row span  {   }
.access-row small {  font-size: 11px; color: #ccc; margin-bottom: 4px; }


.access-row div:last-child { width: 50px; }

.access-row div:nth-last-child(2) { width: 200px; }
 

.access-name { display: block;  margin-bottom: 4px;   }
.access-phone { display: block;  margin-bottom: 4px;font-size: 13px; color: #999 }
.access-email { display: block; margin-bottom: 4px; font-size: 13px; color: #999}

.user-role-name { display: inline-block; margin-bottom: 4px; }
.access-scopes { display: block; margin-bottom: 4px; }

.messenger-connection div  {  white-space: nowrap; }
.messenger-connection small { display: block; font-size: 11px; color: #ccc; margin-bottom: 4px; }
.messenger-state-authorized, .messenger-state-starting {padding: 4px 16px;  border-radius: 4px; font-size: 10px;  text-transform: uppercase; color: #fff; background:  var(--color-success) }

.messenger-state-notauthorized, .messenger-state-blocked { padding: 4px 16px;  border-radius: 4px; font-size: 10px;  text-transform: uppercase; color: #fff; background: var(--color-error) }

.qr-field {width: 256px;
    height: 256px;
    background: #eee;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-bottom: var(--grid-gap);
}


.telegram-status-active {padding: 4px 16px;  border-radius: 4px; font-size: 10px;  text-transform: uppercase;  color: #fff; background:  var(--color-success) }

.telegram-status-inactive, .telegram-status-stopped { padding: 4px 16px;  border-radius: 4px; font-size: 10px; text-transform: uppercase; color: #fff; background: var(--color-error) }

.invite-link {

    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 250px;
    font-size: 14px;
    text-overflow: ellipsis;

}


.payment-providers  .provider-icon .contragent-name {

    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 150px;
    font-size: 14px;
    text-overflow: ellipsis;

}

.payment-providers  .provider-icon .contragent-inn {
    color: #999;
    display: block;
    font-size: 12px;
}

.payment-providers  .provider-icon .bank-name {
    color: #999;
    display: block;
    font-size: 12px;
}
   .provider-description { position: relative; display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 180px;
    font-size: 14px;
    text-overflow: ellipsis;}
    .provider-description .icon-delete { position: absolute;  top: 2px;  right: 0;  height: 12px;
    width: 12px;
    opacity: 0.1;
    background-size: 12px 12px; }

.provider-description .icon-delete:hover { opacity: 0.6 }
.messenger-connection {
    padding: var(--grid-gap);
    /* border: 1px solid #eee; */
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(196, 208, 227, .7);
    margin-bottom: var(--grid-gap);
}
.delivery-tokens {   max-width: 800px; }
.token-settings { 

       padding: calc(var(--grid-gap)* 2);
    /* border-bottom: 1px solid #eee; */
   
    margin: 0 0 calc(var(--grid-gap)* 2) 0;
    /* border: 1px solid #ccc; */
    border-radius: calc(var(--grid-gap)/ 2);
    background: linear-gradient(148deg, rgb(255 176 0 / 10%), rgb(247 35 235 / 10%));
}

.table .icon-delete { margin-left: var(--grid-gap); }
.table .cell h3 {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: calc(var(--grid-gap)/2);
}
.table .cell p {
    font-size: 15px;
    margin: calc(var(--grid-gap)/2) 0;
    color: #666;
}

.table .cell li {
    font-size: 15px;
    margin: calc(var(--grid-gap)/2) 0;
    color: #666;
    margin-left: -20px;
}

ol li { 
    margin: calc(var(--grid-gap)/2) 0;
    
    margin-left: -20px;}

.table.schedule .cell {  vertical-align: middle; padding: 0 calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 2) 0; }
.color-black { color: #000 !important }

.senders-list {     align-items: flex-start !important }
.senders-list .country { margin-bottom:  calc(var(--grid-gap)*2) }
.senders-list p b { color: #000 !important }  
.senders-list .icon-flag { width: 18px; height: 18px; display: inline-block;  margin-bottom: -2px; }
.senders-list .operator { padding-left: calc(var(--grid-gap)); margin-bottom: calc(var(--grid-gap)/2); font-size: 12px; }

.senders-list .operator-status-waiting { color: #ccc }
.senders-list .operator-status-verified { color: var(--color-success) }
.senders-list .operator-status-stopped, .senders-list .operator-status-rejected, .senders-list .operator-status-stopped_temp, .senders-list .operator-status-double, .senders-list .operator-status-need_docs { color: var(--color-error) }

.dns-records.table .row:first-child .cell { font-weight: bold; }

.dns-records.table .cell {      padding: 0 calc(var(--grid-gap)/2) calc(var(--grid-gap)/2) 0;max-width: 250px;     overflow-wrap: break-word; }

.record .record-statuses .success {color: var(--color-success)}
.record .record-statuses .error {color: var(--color-warn)}


.record { margin-bottom: calc(var(--grid-gap));
    position: relative;
    font-size: 14px;  
    border: 2px solid #eee;
    border-radius: 4px;
    padding: calc(var(--grid-gap) / 2);}

    .record div:first-child { position: absolute;
    top: 4px;
    right: 4px;
    background: #eee;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px; }

.record .record-value {max-width: 350px;     overflow-wrap: break-word;}

.record span.what { color: #999 }

.email-domains {     
    background: var(--color-highlight);

        padding: calc(var(--grid-gap) * 2);
    /* border-bottom: 1px solid #eee; */
    margin: calc(var(--grid-gap)) 0;
    /* border: 1px solid #ccc; */
    border-radius: 4px;

      }
.settings-section h3 {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: calc(var(--grid-gap)/2);
}

.settings-section h4 {
    font-weight: bold;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: calc(var(--grid-gap)/2);
}
.settings-section p {
    font-size: 15px;
    margin: calc(var(--grid-gap)/2) 0;
    color: #999;
}

.settings-section div.section-option { margin-bottom: calc(var(--grid-gap)/2) }

.settings-section span.description { color: #666; font-size: 14px; }

.settings-section .shop-logo { margin: calc(var(--grid-gap)/2) 0; padding:  calc(var(--grid-gap)/2) }
.settings-section .shop-logo img { max-width: 200px:  }
.settings-section .shop-logo label {display: block;
    font-size: 14px;
    margin-top: calc(var(--grid-gap));
    color: #999;}

.settings-section input, .settings-section select { max-width: 300px; } 

.settings-section { margin-bottom: calc(var(--grid-gap)*2) }


h1 span.center { text-align: center; display:block; }
label { cursor: pointer; }
.autopayment { max-width: 800px }
.autopayment .cell { width: 50%; }

.autoinvoice { max-width: 800px }
.autoinvoice .cell { width: 50%; }


.autoinvoice .contragents-list div.flex { padding: calc(var(--grid-gap));
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: calc(var(--grid-gap) / 2); align-items: flex-start; justify-content: left;}

 

    .autoinvoice .contragents-list div span.bank {color: #ccc; font-size: 12px}




.autopayment .cards-list div { padding: calc(var(--grid-gap));
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: calc(var(--grid-gap) / 2);  }




.autopayment .cards-list div img { height: 12px; width: auto; display: inline-block; margin-right: calc(var(--grid-gap)/2) }
.autopayment .cards-list .exp { font-size: 12px; color: #ccc }
.autopayment .cards-list .is_expired-1 { color: var(--color-error) }

.fields_list .icon-delete {  float: right }

.autopayment .cards-list .icon-delete {  height: 12px;
    width: 12px;
    opacity: 0.1;
    background-size: 12px 12px; }

.autopayment .cards-list .icon-delete:hover { opacity: 0.6 }

.fail-icon-big {

    text-transform: uppercase;

    box-sizing: border-box;
    display: block;
    height: 128px;
    width: 128px;
    background: url(/assets/img/fail.svg) center center;
    background-size: 128px 128px;
    background-repeat: no-repeat;
    margin: 0 auto var(--grid-gap) auto;
     
}

.success-icon-big {

    text-transform: uppercase;

    box-sizing: border-box;
    display: block;
    height: 128px;
    width: 128px;
    background: url(/assets/img/success.svg) center center;
    background-size: 128px 128px;
    background-repeat: no-repeat;
    margin: 0 auto var(--grid-gap) auto;
     
}
.event .event-menu-icon {

    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    background: #eee;
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    height: 16px;
    width: 16px;
    background: url(/assets/img/menu.svg) center center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    
    vertical-align: middle;
}

.event .event-id { color: #999 }


.events_timeline { border-left: 2px solid #eee; margin-left: calc(var(--grid-gap)/2)} 



.events-filters { margin-bottom: calc(var(--grid-gap));  }
.events-filters div {    margin-bottom: calc(var(--grid-gap)/1); }
.events-filters div label { display: inline-block; border-radius: 4px; padding: 4px 8px; padding: 4px 8px;
  
    border: 1px solid #eee;  }
.events-filters  .filter { display: flex; gap: calc(var(--grid-gap)/2); align-items: center;}
   
    .events-filters div span:first-child { padding: 0; border: 0 }

.event_type { max-width: 80%; padding-left: calc(var(--grid-gap)*2); position: relative}

.event_type .event-badge-icon {width: 24px;
    height: 24px;
    position: absolute;
    left: -15px;
    top: 0;
    border: 2px solid #fff;
    border-radius: 50%; }

.event_type h2 { display: inline; font-size: 18px; margin: 0 0 var(--grid-gap) 0; }

 
.event_type .event, .event_type .event-one-step { 

   
    padding: calc(2 * var(--grid-gap));
    
    background: #fafafa;
    margin: 0 0 calc(2 * var(--grid-gap)) 0;
    
    border-radius: 4px;
    cursor: pointer;
}



    .event_type .event-status-inactive { opacity: 0.2 }

    .event_type .event-delivery-all { background: rgb(227, 235, 255, 40%); }

    .event_type .event:hover { opacity: 1 }

    .event_type .event div:last-child { margin-bottom: 0 }

.event_type  p.description { color: #999; margin: calc(var(--grid-gap)/2) 0 var(--grid-gap) 0;}
.event_type .event .options .params { color: #999  }
.event-badge { text-transform: uppercase;
    font-weight: 600;
    font-size: 12px; 
     background: #eee;   padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
        display: inline-block;
}

.message-badge { text-transform: uppercase;
    font-weight: 600;
    font-size: 12px; 
     background: #eee;   padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}

.event_type .event_new { display: flex;
    gap: calc(var(--grid-gap) / 2);
    align-items: center;
    margin: calc(2 * var(--grid-gap)) 0;
     }
.event_type .event_new a { font-weight: 600;
    /* font-size: 12px; */
    white-space: nowrap;
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666;
    box-shadow: 0 1px 10px 0 rgba(196, 208, 227, .7);
      }
.webhooks-out-form .settings-section input, .webhooks-out-form .settings-section select  { max-width: 100%; width: 100% }
.webhooks-list { max-width: 800px; }
.webhooks-list .table { width:100% }
.webhooks-list .cell { padding-top: calc(var(--grid-gap)*1);  padding-bottom: calc(var(--grid-gap)*1);}
.webhook-url { display: block; max-width: 600px; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; margin-bottom: 10px;     color: #666;
    font-weight: 300;  }
.webhook-status, .webhook-format, .webhook-shops, .webhook-deliveries {
 
    background: #eee;
    color: #000;
 
 
    font-size: 12px;
 
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    /* background: #eee; */
    padding: 4px 16px;
    border-radius: 8px;
    box-sizing: border-box;


}



.webhook-status.active { background: var(--color-success); color: #000}

.webhook-status.stopped { background: #ffaaaa }
.webhook-status.deleted { background: #fafafa;
    color: #999; }
.webhook-status.inactive { background: #fafafa;
    color: #999; }
.message-badge-clicked { background: #6b4aff;     color: #fff; }
.message-badge-finished, .message-badge-delivered { background: #f0ffc6; color: #6c9300 }
 
 
.message-badge-canceled { background: #eee; color: #666 }
.message-badge-undelivered { background: #ffaaaa; color: #e24242 }

.message-badge-error, .message-badge-failed, .message-badge-error, .message-badge-bounced, .message-badge-dropped, .message-badge-spam { background: #ffaaaa; color: #e24242 }
 

.message-badge-opened, .message-badge-read  { background: #a3b5fc;
    color: #4a81f2; }
 

.message-badge-processing, .message-badge-sent, .message-badge-calling { background: #f3e2b4;
    color: #8b5600; }
.message-badge-new { background: #bdefff; color: #2fc7f7 }
 

   
 
 
 
 

 
 
 


.event-badge-new { background: #f0fff1;
    color: #79b27f; }
.event-badge-icon-new { background: #f0fff1; color: #5587e3 }


.event-badge-created { background: #eaf2fc; color: #3b5179 }
.event-badge-icon-created { background: #eaf2fc; color: #3b5179 }

.event-badge-accepted { background: #bdefff; color: #2fc7f7 }
.event-badge-icon-accepted { background: #bdefff; color: #2fc7f7 }

.event-badge-sent { background: #bdefff; color: #2fc7f7  }
.event-badge-icon-sent { background: #bdefff; color: #2fc7f7  }

.event-badge-intermediate { background: #bdefff; color: #2fc7f7  }
.event-badge-icon-intermediate { background: #bdefff; color: #2fc7f7  }

.event-badge-redirected { background: #bdefff; color: #2fc7f7  }
.event-badge-icon-redirected { background: #bdefff; color: #2fc7f7  }

.event-badge-city { background: #bdefff; color: #2fc7f7 }
.event-badge-icon-city { background: #bdefff; color: #2fc7f7 }

.event-badge-ready { background: #f3e2b4; color: #8b5600; background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180));  }
.event-badge-icon-ready { background: #f3e2b4; color: #8b5600 }

.event-badge-ready_door { background: #f3e2b4; color: #8b5600; background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180));  }
.event-badge-icon-ready_door { background: #f3e2b4; color: #8b5600 }

.event-badge-ready_postamat { background: #f3e2b4; color: #8b5600; background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180));  }
.event-badge-icon-ready_postamat { background: #f3e2b4; color: #8b5600 }

 


.event-badge-notification { background: #f3e2b4; color: #ff8248; background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180));  }
.event-badge-icon-notification { background: #f3e2b4; color: #ff8248 }

.event-badge-notification_door { background: #f3e2b4; color: #ff8248;  background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180)); }
.event-badge-icon-notification_door { background: #f3e2b4; color: #ff8248 }

.event-badge-notification_postamat { background: #f3e2b4; color: #ff8248;  background: linear-gradient(142deg,  rgb(243 226 180 / 27%),  rgb(243 226 180)); }
.event-badge-icon-notification_postamat { background: #f3e2b4; color: #ff8248 }


.event-badge-delivered { background: #f0ffc6; color: #6c9300; background: linear-gradient(142deg,  rgb(240 255 198/ 27%),  rgb(240 255 198)); } 
.event-badge-icon-delivered { background: #f0ffc6; color: #6c9300 }


.event-badge-payed { background: #f0ffc6; color: #6c9300 }
.event-badge-icon-payed { background: #f0ffc6; color: #6c9300 }

.event-badge-problem { background: #ffaaaa;    color: #e24242;  background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa);}
.event-badge-icon-problem { background: #ffaaaa;    color: #e24242; }


.event-badge-not_delivered { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-not_delivered { background: #ffaaaa; color: #e24242 }

.event-badge-sent_to_sender { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-sent_to_sender { background: #ffaaaa; color: #e24242 }


.event-badge-ready_for_sender { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-ready_for_sender { background: #ffaaaa; color: #e24242 }


.event-badge-notification_to_sender { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-notification_to_sender { background: #ffaaaa; color: #e24242 }


.event-badge-delivered_to_sender { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-delivered_to_sender { background: #ffaaaa; color: #e24242 }

.event-badge-not_delivered_to_sender { background: #ffaaaa; color: #e24242; background: linear-gradient(142deg, rgb(255 170 170 / 27%), #ffaaaa); }
.event-badge-icon-not_delivered_to_sender { background: #ffaaaa; color: #e24242 }


.event-badge-canceled { background: #eee; color: #666 }
.event-badge-icon-canceled { background: #eee; color: #e24242 }

.event-badge-payment_accepted { background: #000; color: #2fc7f7 }
.event-badge-icon-payment_accepted { background: #000; color: #2fc7f7 }


.event-badge-payment_problem { background: #000; color: #e24242 }
.event-badge-icon-payment_problem { background: #000; color: #e24242 }

.event-badge-payment_payed { background: #000; color: #bbff00 }
.event-badge-icon-payment_payed { background: #000; color: #bbff00 }

.crm-sendings .events_timeline { border: none; margin-left: 0; }

.crm-sendings .events_timeline .event_type .event-badge-icon{ display: none }
.crm-sendings .events_timeline .event_type { max-width: 100%; padding-left: 0; padding-bottom: calc(var(--grid-gap)*2) }

.review-settings-good-texts { padding: calc(var(--grid-gap)*2); background: rgb(176 216 65 / 20%); border-radius: var(--grid-gap); margin-bottom: calc(2*var(--grid-gap)) }

.review-settings-bad-texts { padding: calc(var(--grid-gap)*2); background: rgb(204 0 0 / 5%); border-radius: var(--grid-gap); margin-bottom: calc(2*var(--grid-gap)) }

.review-settings-texts { padding: calc(var(--grid-gap)*2); background: rgb(211 227 253 / 38%); border-radius: var(--grid-gap); margin-bottom: calc(2*var(--grid-gap)) }
.review-settings-texts .settings-section:last-child { margin-bottom: 0 }
.review-settings-good-texts .settings-section:last-child { margin-bottom: 0 }
.review-settings-bad-texts .settings-section:last-child { margin-bottom: 0 }
.reviews_settings input[type="text"] { width: 100%; max-width: none }
.reviews_settings textarea { min-height: 100px }



.reviews_settings .chips_list .chip {

    display: flex;
    width: 100%;
gap: var(--grid-gap); 
margin-bottom: var(--grid-gap); 
align-items: center;




}

.width100 { width: 100%; max-width: none }
.reviews_settings .chips_list .chip div:nth-child(2) { width: 100% }


.reviews_settings .links_list .link {

    display: flex;
    width: 100%;
gap: var(--grid-gap); 
margin-bottom: var(--grid-gap); 
align-items: center;




}
.reviews_settings .links_list .link div:nth-child(3) { width: 100% }
.reviews_settings .links_list .link input::placeholder { color: #ccc}

.bull::before { content: '\2022 '; color: #999 }

.fancyBox h1 { font-size: 24px; }
.sendings-list .cell { padding: calc(var(--grid-gap)); border-bottom: 1px solid #eee; }

.sendings-list .entity-parent div.entity-child { padding: 0 0 5px 0 }
.sendings-list   .message {
    padding: 16px !important;
    background: #fafafa;
    border-radius: 8px;

}
.sendings-list   .message-text { margin-top: 8px;} 
.sendings-list .small { font-size: 13px; }
.sendings-list { font-size: 14px; }

.sendings-list .bold {     font-weight: 500; }

.entity-parent .tracking {white-space: nowrap;
    overflow: hidden;
    max-width: 150px;
 
    text-overflow: ellipsis;
}

.nowrap { white-space: nowrap }

.event-form h3 {

    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0 0 calc(var(--grid-gap) / 2) 0;

}

.event-form h4 {

    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin: 0 0 calc(var(--grid-gap) / 2) 0;

}


.event-form  .steps .step-parent:first-child .icon-arrow-top { display: none }
.event-form  .steps .step-parent:last-child .icon-arrow-down { display: none }

.event-form  .step h2 { font-size: 20px; margin-top: 0}
.event-form  .step { position: relative; padding: var(--grid-gap); border-radius: calc(var(--grid-gap)/2); border: 1px solid #000; margin-bottom: var(--grid-gap) }
.event-form  .step .icon-delete {  position: absolute; top: var(--grid-gap); right: calc(var(--grid-gap)*1) }


.event-form  .step .arrows { position: absolute; top: var(--grid-gap); right: calc(var(--grid-gap)*3) }

.event-form  .step .arrows span { padding: 0 var(--grid-gap); }

 .sortable-active .step .event-one {  display: none }

  .sortable-active .step_new {  display: none }


.event-form .step_new {     display: flex;
    gap: calc(var(--grid-gap) / 2);
    align-items: center;
    margin-bottom: var(--grid-gap);
    padding: 8px;
    /* background: #eee; */
    text-align: center;
    border: 1px solid #ccc;
    padding: var(--grid-gap);
    border-radius: calc(var(--grid-gap) / 2); }
.event-form .step_new a { font-weight: 600;
    /* font-size: 12px; */
    padding: 4px 16px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666;
    box-shadow: 0 1px 10px 0 rgba(196, 208, 227, .7);
      }


.event-form .section { margin-bottom: calc(var(--grid-gap)/1) }

.event-form .section p  { color: #999; margin-top: 0 }

.event-form .event-one .section:last-child {   }

.event-form .section:last-child {  }

.event-form textarea {width: 100%;
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
    border: 2px solid #eee; min-height: 100px;}


    .event-form input {width: 100%;
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
    border: 2px solid #eee;  }

        .event-form select {width: 100%;
    padding: calc(var(--grid-gap) / 2);
    border-radius: 4px;
border: none;
    box-shadow: inset 0px 0px 0px 2px #eee;
       outline: none}

        .event-form .fastconditions {
                background: #fafafa;
    padding: calc(var(--grid-gap));
    margin-bottom: calc(var(--grid-gap) / 2);
    font-size: 14px;
    border-radius: calc(var(--grid-gap) / 2);
        }
        .event-form .fastconditions b { font-size: 14px;
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 600; }
        .event-form .fastconditions a {    display: inline-block;
    padding: 4px 8px;
    background: #eee;
    border-radius: 4px;
    color: #000;
    margin-right: var(--grid-gap);
        }
.event-form .conditions { margin-top: var(--grid-gap); }
          .event-form .conditions small {  font-size: 12px;
    color: #999;
    display: inline-block;
    margin-bottom: 4px;
}

    .event-form .options { display: flex; gap: var(--grid-gap);     }
 .event-form .options .option {width: 100%}
 .event-form .options .last-option { width: auto;
    align-self: self-end; }
 .event-form .options .last-option .icon-delete { height: 40px }
  .event-form .conditions .options { margin-bottom: var(--grid-gap);     }
.event-form div.preview { color: #999 }
.macroses { line-height: 32px; }
  .macroses a { display: inline;
    font-weight: 500;
    /* font-size: 12px; */
    padding: 4px 8px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    color: #666;
    background: #eee;
    margin: 0 4px 0 0;
    white-space: nowrap;
     
 }

 textarea {}

 

.header-block .heading {
    margin-right: auto;
     
}

.header-block .heading h1 { margin: 0; font-weight: bold }

.menu  .shop {
     
    display: flex;
    align-items: center;
    cursor: pointer;



    margin: var(--grid-gap);
    margin-bottom: var(--grid-gap);
    /* border-bottom: 1px solid rgb(211 227 253 / 38%); */
    background: #fafafa;
    border-radius: 8px;
    padding: calc(var(--grid-gap));
    margin-top: 0;
 
}


.menu  .shop div {
    padding-right: var(--grid-gap);
    align-items: center;
}
.shop .shop-name {
    display: block;
    font-size: 14px;
    font-weight: bold;
    max-width: 150px;
    white-space: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop .shop-id {
    font-size: 14px;
    color: #ccc;
}

.menu .user { margin-top: auto; }

.user .user-name {
    display: block;
    font-size: 14px;
    font-weight: bold;
    max-width: 160px;
    white-space: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user .user-role {
      display: block;
    font-size: 14px;
    color: #ccc;
}
.shop-icon {
 
    display: inline-block;
    overflow: visible;
    width: 40px;
    height: 40px;

}

.downarrow-icon {

display: inline-block;
    overflow: visible;
    fill: var(--color-typo-ghost);
    width: 16px;
    height: 16px;

}

.menu  .user-block {
     
    display: flex;
    align-items: center;
    cursor: pointer;


    margin: var(--grid-gap);
    margin-bottom: var(--grid-gap);
    /* border-bottom: 1px solid rgb(211 227 253 / 38%); */
    background: #fafafa;
    border-radius: 8px;
    padding: calc(var(--grid-gap));
    margin-top: 0;

 
}

.menu  .user div {
    padding-right: var(--grid-gap);
    align-items: center;
}

.main-block {
    padding: calc(var(--grid-gap)*4)
}

.main-block { margin-left: calc(var(--grid-gap)*4); max-width: 1000px }

.footer-block {
      padding: calc(var(--grid-gap)* 2);
 margin-top: auto;
    font-size: 14px;
    border-top: 1px solid #eee;
    background: rgb(211 227 253 / 10%);
}
.footer {
    display: grid;
    grid-gap: var(--grid-gap);
    color: #999;
        grid-template-columns: repeat(12, [col] 1fr);
   
   
}
.footer b { font-size: 15px; color: #000;
}

 .footer a { color: #000 }

 .footer a.phone { color: #000;
    font-weight: bold;
    font-size: 18px; }
 .footer span.text { color: #999 }
.footer > div {
    grid-column: span 3;

}
.footer-item { margin-bottom: var(--grid-gap) }
:root {
        --menu-unfold: 300px;
        --color-typo-secondary: rgba(10, 37, 64, 0.7);
        --color-typo-ghost:rgb(211 227 253 / 38%);;

}



@media screen and (min-width: 1024px) {
    .root {
        grid-template-columns: auto minmax(320px, 1fr);
        grid-template-rows: minmax(100vh, auto);
    }
}

 

        .checkbox-input {
            appearance: none;
            width: 1rem !important;
            height: 1rem !important;
            /* border: 1px solid var(--color-link); */
            border-radius: 0.25rem;
            background-color: #fff;
            cursor: pointer;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            margin: 0;
        }

        .checkbox-input:hover:not(:disabled) {
            /* border-color: var(--color-link);*/
        }
/*
        .checkbox-input:focus {
            border-color: var(--color-link);
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
*/
        .checkbox-input:checked {
            background-color: var(--color-link);
            border-color: var(--color-link);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        }

        .checkbox-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .checkbox-input:disabled + span {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .radio-input {
        -webkit-appearance: none;
        appearance: none;
        width: 1rem !important;
        height: 1rem !important;
        border: 1px solid #dee2e6;
        border-radius: 50%;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin: 0;
    }

    /* Стилизация выбранного состояния радиокнопки */
    .radio-input:checked {
        background-color: var(--color-link);
        border-color: var(--color-link);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }

    /* Стилизация отключённого состояния радиокнопки */
    .radio-input:disabled {
        filter: none;
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Стилизация метки радиокнопки при отключённом состоянии */
    .radio-input:disabled ~ .radio-label {
        opacity: 0.5;
        cursor: not-allowed;
    }



/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  border-radius: 20px;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  
  
 
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
 position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;

}

input:checked + .slider {
  background-color: #b0d841;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxMyIgY2xhc3M9InVpLWljb24tY2hlY2tib3ggdWktdHVtYmxlcl9fY29udHJvbC1pY29uLXllcyI+PHBhdGggc3Ryb2tlPSIjMzMzMzMzIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEgN3MyLjkgMi43IDQuNCA0Yy40LjMgMS4xIDEgMS4xIDFMMTYgMSI+PC9wYXRoPjwvc3ZnPg==');
     
        background-size: 10px 10px;
    background-position: left center;
    background-repeat: no-repeat;
    background-position-x: 10px;
}


input:disabled + .slider {
opacity: 0.6;
}

input:focus + .slider {
 
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}


.dropdown-menu {
  position: absolute;
  z-index: 9999999;
  display: none;
  opacity: 0;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: opacity 0.2s, transform 0.2s;
  -webkit-transform: translateY(-20px) scale(0.93);
  transform: translateY(-20px) scale(0.93);
   }
  .dropdown-menu.dropdown-opened {
    opacity: 1;
    -webkit-transform: none !important;
    transform: none !important; }
  .dropdown-menu.fixed {
    position: fixed; }
  .dropdown-menu.dropdown-anchor-left-top, .dropdown-menu.dropdown-anchor-left-center, .dropdown-menu.dropdown-anchor-left-bottom {
    -webkit-transform: translateX(-20px) scale(0.93);
    transform: translateX(-20px) scale(0.93); }
  .dropdown-menu.dropdown-anchor-right-top, .dropdown-menu.dropdown-anchor-right-center, .dropdown-menu.dropdown-anchor-right-bottom {
    -webkit-transform: translateX(20px) scale(0.93);
    transform: translateX(20px) scale(0.93); }
  .dropdown-menu .dropdown-anchor {
    border: 7px solid #fff; }
    .dropdown-menu .dropdown-anchor, .dropdown-menu .dropdown-anchor::after {
      position: absolute;
      content: '';
      display: inline-block; }
    .dropdown-menu .dropdown-anchor::after {
      border: 6px solid #fff; }
  .dropdown-menu.dark .dropdown-anchor, .dropdown-menu.dark .dropdown-anchor::after {
    border-color: #32363F; }
  .dropdown-menu.grey-anchor .dropdown-anchor, .dropdown-menu.grey-anchor .dropdown-anchor::after {
    border-color: #f6f6f6; }
  .dropdown-menu.accent-anchor .dropdown-anchor, .dropdown-menu.accent-anchor .dropdown-anchor::after {
    border-color: #F57C00; }
  .dropdown-menu.dropdown-anchor-top-left:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-top-center:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-top-right:not(.dropdown-overlay-trigger) {
    margin-top: 10px; }
  .dropdown-menu.dropdown-anchor-top-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-right .dropdown-anchor {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    top: -14px; }
    .dropdown-menu.dropdown-anchor-top-left .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-top-center .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-top-right .dropdown-anchor::after {
      border-top-color: transparent;
      border-right-color: transparent;
      border-left-color: transparent;
      margin-top: -5px;
      margin-left: -6px; }
  .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-left .dropdown-anchor {
    left: 15px; }
  .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-center .dropdown-anchor {
    left: calc(50% - 7px); }
  .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-right .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-right .dropdown-anchor, .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-right .dropdown-anchor {
    left: calc(100% - 28px); }
  .dropdown-menu.dropdown-anchor-right-top:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-right-center:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-right-bottom:not(.dropdown-overlay-trigger) {
    margin-left: -10px; }
  .dropdown-menu.dropdown-anchor-right-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%; }
    .dropdown-menu.dropdown-anchor-right-top .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-right-center .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor::after {
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      margin-left: -7px;
      margin-top: -6px; }
  .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-top .dropdown-anchor {
    top: 11px; }
  .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-center .dropdown-anchor {
    top: calc(50% - 7px); }
  .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-bottom .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-bottom .dropdown-anchor, .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-bottom .dropdown-anchor {
    top: calc(100% - 26px); }
  .dropdown-menu.dropdown-anchor-bottom-left:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-bottom-center:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-bottom-right:not(.dropdown-overlay-trigger) {
    margin-top: -10px; }
  .dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    top: 100%; }
    .dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor::after {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      margin-top: -7px;
      margin-left: -6px; }
  .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-left .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-left .dropdown-anchor {
    left: 15px; }
  .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-center .dropdown-anchor {
    left: calc(50% - 7px); }
  .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-right .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-right .dropdown-anchor, .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-right .dropdown-anchor {
    left: calc(100% - 28px); }
  .dropdown-menu.dropdown-anchor-left-top:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-left-center:not(.dropdown-overlay-trigger), .dropdown-menu.dropdown-anchor-left-bottom:not(.dropdown-overlay-trigger) {
    margin-left: 10px; }
  .dropdown-menu.dropdown-anchor-left-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    left: -14px; }
    .dropdown-menu.dropdown-anchor-left-top .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-left-center .dropdown-anchor::after, .dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor::after {
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      margin-left: -5px;
      margin-top: -6px; }
  .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-top .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-top .dropdown-anchor {
    top: 11px; }
  .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-center .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-center .dropdown-anchor {
    top: calc(50% - 7px); }
  .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-bottom .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-bottom .dropdown-anchor, .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-bottom .dropdown-anchor {
    top: calc(100% - 26px); }
  .dropdown-menu.max-height ul {
    max-height: 184px; }
  .dropdown-menu ul {
    min-width: 160px;
    list-style: none;
    background: #FFF;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    overflow: auto;
    padding: 0;
    margin: 0; 
    font-size: 14px;
    border-radius: calc(var(--grid-gap)/2);

}
    .dropdown-menu ul li {
      list-style: none;
      padding: 0;
      margin: 0;
      line-height: 100%; }
      .dropdown-menu ul li > a,
      .dropdown-menu ul li label {
        display: block;
        color: #555;
        text-decoration: none;
        line-height: 100%;
        padding: var(--grid-gap) calc(var(--grid-gap)*2);
        white-space: nowrap;
        transition: all 0.1s; }
        .dropdown-menu ul li > a svg,
        .dropdown-menu ul li label svg {
          height: 14px;
          width: 18px;
          vertical-align: middle;
          margin-left: -2px;
          margin-right: 4px;
          margin-top: -3px; }
          .dropdown-menu ul li > a svg path, .dropdown-menu ul li > a svg polygon,
          .dropdown-menu ul li label svg path,
          .dropdown-menu ul li label svg polygon {
            transition: fill 0.1s;
            fill: #0b0b0b; }
        .dropdown-menu ul li > a span.greenSVG svg path, .dropdown-menu ul li > a span.greenSVG svg polygon,
        .dropdown-menu ul li label span.greenSVG svg path,
        .dropdown-menu ul li label span.greenSVG svg polygon {
          fill: #B7D968; }
        .dropdown-menu ul li > a .flag,
        .dropdown-menu ul li label .flag {
          padding-bottom: 1px; }
        .dropdown-menu ul li > a:not(.grey):hover, .dropdown-menu ul li > a:hover,
        .dropdown-menu ul li label:not(.grey):hover,
        .dropdown-menu ul li label:hover {
          background-color: var(--color-background-button);
          color: #FFF;
          cursor: pointer; }
          .dropdown-menu ul li > a:not(.grey):hover svg path, .dropdown-menu ul li > a:not(.grey):hover svg polygon, .dropdown-menu ul li > a:hover svg path, .dropdown-menu ul li > a:hover svg polygon,
          .dropdown-menu ul li label:not(.grey):hover svg path,
          .dropdown-menu ul li label:not(.grey):hover svg polygon,
          .dropdown-menu ul li label:hover svg path,
          .dropdown-menu ul li label:hover svg polygon {
            fill: #fff; }
        .dropdown-menu ul li > a.active,
        .dropdown-menu ul li label.active {
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          cursor: default;
          pointer-events: none;
          color: #999;
          background: #f6f6f6; }
        .dropdown-menu ul li > a.grey:hover,
        .dropdown-menu ul li label.grey:hover {
          cursor: default; }
        .dropdown-menu ul li > a.disabled, .dropdown-menu ul li > a.disabled:hover, .dropdown-menu ul li > a.disabled:active,
        .dropdown-menu ul li label.disabled,
        .dropdown-menu ul li label.disabled:hover,
        .dropdown-menu ul li label.disabled:active {
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          cursor: default;
          pointer-events: none;
          cursor: default;
          color: #999; }
      .dropdown-menu ul li.title {
        padding: 7.5px 15px;
        background: #f6f6f6;
        color: #999;
        font-family: "Roboto", "Open Sans", sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        border: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px; }
        .dropdown-menu ul li.title.grey {
          background: #999;
          color: #F57C00; }
        .dropdown-menu ul li.title.light {
          background: #f6f6f6;
          color: #fccfa2; }
        .dropdown-menu ul li.title.accent {
          background: #F57C00;
          color: #fccfa2; }
    .dropdown-menu ul li > a:hover small.grey {
      opacity: 0.75;
      color: #fff; }
    .dropdown-menu ul li:first-child.divider {
      display: none; }
  .dropdown-menu.right-aligned {
    text-align: right; }
    .dropdown-menu.right-aligned ul li a svg {
      margin-right: 0;
      margin-left: 4px; }
  .dropdown-menu .divider {
    height: 1px;
    background: #eee;
   
    overflow: hidden; }
  .dropdown-menu.dark.assign-dropdown ul li a {
    color: #fff; }
    .dropdown-menu.dark.assign-dropdown ul li a:hover {
      background: #F57C00;
      color: #fff; }
  .dropdown-menu.dark ul {
    background: #32363F; }
    .dropdown-menu.dark ul li > a,
    .dropdown-menu.dark ul li label {
      color: #939aaa; }
      .dropdown-menu.dark ul li > a svg path,
      .dropdown-menu.dark ul li > a svg polygon,
      .dropdown-menu.dark ul li label svg path,
      .dropdown-menu.dark ul li label svg polygon {
        fill: #778093; }
      .dropdown-menu.dark ul li > a.active,
      .dropdown-menu.dark ul li label.active {
        color: #7f889a;
        background: #393d48; }
        .dropdown-menu.dark ul li > a.active.green,
        .dropdown-menu.dark ul li label.active.green {
          background: #B7D968;
          color: #fff; }
          .dropdown-menu.dark ul li > a.active.green svg path, .dropdown-menu.dark ul li > a.active.green svg polygon,
          .dropdown-menu.dark ul li label.active.green svg path,
          .dropdown-menu.dark ul li label.active.green svg polygon {
            fill: #fff; }
        .dropdown-menu.dark ul li > a.active.accent,
        .dropdown-menu.dark ul li label.active.accent {
          background: #F57C00;
          color: #fff; }
          .dropdown-menu.dark ul li > a.active.accent svg path, .dropdown-menu.dark ul li > a.active.accent svg polygon,
          .dropdown-menu.dark ul li label.active.accent svg path,
          .dropdown-menu.dark ul li label.active.accent svg polygon {
            fill: #fff; }
    .dropdown-menu.dark ul .divider {
      background: rgba(255, 255, 255, 0.08); }

@media screen and (max-width: 420px) {
  .dropdown-menu ul li > a {
    line-height: 32px;
    padding-left: 24px;
    padding-right: 24px; } }



    .skeleton {
    background-color: #e2e5e7;
    
    background-image:           
            linear-gradient(
                90deg, 
                rgba(#fff, 0), 
                rgba(#fff, 0.5),
                rgba(#fff, 0)
            );
    background-size: 40px 100%;  
    background-repeat: no-repeat;  
    background-position: left -40px top 0;  
    animation: shine 1s ease infinite;
}

@keyframes shine {
    to {
    
        background-position: right -40px top 0;
    }
}


.paginationjs {
    line-height: 1.6;
   
    font-size: 14px;
    box-sizing: initial
}

.paginationjs:after {
    display: table;
    content: " ";
    clear: both
}

.paginationjs .paginationjs-pages {
    
}

.paginationjs .paginationjs-pages ul {
    
    margin: 0;
    padding: 0;
        display: flex;
    justify-content: center;
}

.paginationjs .paginationjs-go-button,.paginationjs .paginationjs-go-input,.paginationjs .paginationjs-nav {
    float: left;
    margin-left: 10px;
    font-size: 14px
}

.paginationjs .paginationjs-pages li {
    float: left;
    /*border: 1px solid #eee;*/
    border-right: none;
    list-style: none;
    cursor: pointer;
}

.paginationjs .paginationjs-pages li>a {
    min-width: 30px;
    padding: 5px;
    border-bottom: none;
    height: 28px;
    line-height: 28px;
    display: block;
    background: #fff;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    text-align: center;
    border-radius: 50%;
}

.paginationjs .paginationjs-pages li>a:hover {
    background: #eee
}

.paginationjs .paginationjs-pages li.active {
    border: none
}

.paginationjs .paginationjs-pages li.active>a {
    height: 30px;
    line-height: 30px;
    background: var(--color-background-button-hover);
    color: #fff
}

.paginationjs .paginationjs-pages li.disabled>a {
    opacity: .3
}

.paginationjs .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs .paginationjs-pages li:first-child,.paginationjs .paginationjs-pages li:first-child>a {
      border-radius: 50%;
}

.paginationjs .paginationjs-pages li:last-child {
    /*border-right: 1px solid #eee;*/
    border-radius: 50%;
 
}

.paginationjs .paginationjs-pages li:last-child>a {
   border-radius: 50%;
}

.paginationjs .paginationjs-go-input>input[type=text] {
    width: 30px;
    height: 28px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    padding: 0;
    font-size: 14px;
    text-align: center;
    vertical-align: baseline;
    outline: 0;
    box-shadow: none;
    box-sizing: initial
}

.paginationjs .paginationjs-go-button>input[type=button] {
    min-width: 40px;
    height: 30px;
    line-height: 28px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #eee;
    text-align: center;
    padding: 0 8px;
    font-size: 14px;
    vertical-align: baseline;
    outline: 0;
    box-shadow: none;
    color: #333;
    cursor: pointer;
    vertical-align: middle\9
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-blue .paginationjs-pages li {
    border-color: #289de9
}

.paginationjs .paginationjs-go-button>input[type=button]:hover {
    background-color: #f8f8f8
}

.paginationjs .paginationjs-nav {
    height: 30px;
    line-height: 30px
}

.paginationjs .paginationjs-go-button,.paginationjs .paginationjs-go-input {
    margin-left: 5px\9
}

.paginationjs.paginationjs-small {
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-pages li>a {
    min-width: 26px;
    height: 24px;
    line-height: 24px;
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-pages li.active>a {
    height: 26px;
    line-height: 26px
}

.paginationjs.paginationjs-small .paginationjs-go-input {
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-go-input>input[type=text] {
    width: 26px;
    height: 24px;
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-go-button {
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-go-button>input[type=button] {
    min-width: 30px;
    height: 26px;
    line-height: 24px;
    padding: 0 6px;
    font-size: 12px
}

.paginationjs.paginationjs-small .paginationjs-nav {
    height: 26px;
    line-height: 26px;
    font-size: 12px
}

.paginationjs.paginationjs-big {
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-pages li>a {
    min-width: 36px;
    height: 34px;
    line-height: 34px;
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-pages li.active>a {
    height: 36px;
    line-height: 36px
}

.paginationjs.paginationjs-big .paginationjs-go-input {
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
    width: 36px;
    height: 34px;
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-go-button {
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-go-button>input[type=button] {
    min-width: 50px;
    height: 36px;
    line-height: 34px;
    padding: 0 12px;
    font-size: 16px
}

.paginationjs.paginationjs-big .paginationjs-nav {
    height: 36px;
    line-height: 36px;
    font-size: 16px
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a {
    color: #289de9
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a:hover {
    background: #e9f4fc
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a {
    background: #289de9;
    color: #fff
}

.paginationjs.paginationjs-theme-blue .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button] {
    background: #289de9;
    border-color: #289de9;
    color: #fff
}

.paginationjs.paginationjs-theme-green .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-green .paginationjs-pages li {
    border-color: #449d44
}

.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button]:hover {
    background-color: #3ca5ea
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li>a {
    color: #449d44
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li>a:hover {
    background: #ebf4eb
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li.active>a {
    background: #449d44;
    color: #fff
}

.paginationjs.paginationjs-theme-green .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button] {
    background: #449d44;
    border-color: #449d44;
    color: #fff
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-yellow .paginationjs-pages li {
    border-color: #ec971f
}

.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button]:hover {
    background-color: #55a555
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a {
    color: #ec971f
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a:hover {
    background: #fdf5e9
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active>a {
    background: #ec971f;
    color: #fff
}

.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button] {
    background: #ec971f;
    border-color: #ec971f;
    color: #fff
}

.paginationjs.paginationjs-theme-red .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-red .paginationjs-pages li {
    border-color: #c9302c
}

.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button]:hover {
    background-color: #eea135
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li>a {
    color: #c9302c
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li>a:hover {
    background: #faeaea
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li.active>a {
    background: #c9302c;
    color: #fff
}

.paginationjs.paginationjs-theme-red .paginationjs-pages li.disabled>a:hover {
    background: 0 0
}

.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button] {
    background: #c9302c;
    border-color: #c9302c;
    color: #fff
}

.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button]:hover {
    background-color: #ce4541
}

.paginationjs .paginationjs-pages li.paginationjs-next {
    border-right: 1px solid #eee\9
}

.paginationjs .paginationjs-go-input>input[type=text] {
    line-height: 28px\9;
    vertical-align: middle\9
}

.paginationjs.paginationjs-big .paginationjs-pages li>a {
    line-height: 36px\9
}

.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text] {
    height: 36px\9;
    line-height: 36px\9
}