*, ::before, ::after {
	--dark-color: #5e5e5e;
	--light-color: #ffffff;
	--grey-color: #ADAFAE;
	--font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bg-success: #4caf50;
	--text-success: #fff;
	--bg-warning: #ffc107;
	--text-warning: #fff;
	--bg-danger: #d13c4b;
	--text-danger: #fff;
	
	--bg-0: #3f51b5;
	--text-0: #fff;
	--bg-1: #d13c4b;
	--text-1: #fff;
	--bg-2: #009688;
	--text-2: #fff;

	--bg-death: #000000;
	--text-death: #ffffff;
	--bg-injury: #ff9800;
	--text-injury: #ffffff;
}
body {
	margin: 0;
	color: var(--dark-color);
  	font-family: var(--font-family);
  	box-sizing: border-box;
}
body * {
	box-sizing: border-box;
}


svg .scales text {
    font-family: var(--font-family);
    fill: var(--dark-color);
}
svg .year-lines line{
	stroke: var(--dark-color);
}
.iframe-holder {
	position: relative;
	overflow: hidden;
}
.iframe-holder.active {
	border: 1px solid #ccc;
	background: linear-gradient(to right, #667eea 0%, #764ba2 50%, #667eea 100%); 
  	background-size: 5000px 100%;
  	animation: bg 4s linear infinite;
  	min-height: 200px;
}
.iframe-holder.active:before {
    text-align: center;
    color: var(--light-color);
    content: 'Загрузка виджета...';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: -1rem;
    z-index: 0;
}

.connected-gradient {
    background:-moz-linear-gradient(90deg, rgba(3, 169, 244, 1) 0%, rgba(156, 39, 176, 1) 100%); 
    background:-webkit-linear-gradient(90deg, rgba(3, 169, 244, 1) 0%, rgba(156, 39, 176, 1) 100%);
    background:-o-linear-gradient(90deg, rgba(3, 169, 244, 1) 0%, rgba(156, 39, 176, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c27b0', endColorstr='#03A9F4', GradientType=0 );
    background:-ms-linear-gradient(90deg, rgba(3, 169, 244, 1) 0%, rgba(156, 39, 176, 1) 100%);
    background:linear-gradient(90deg, rgba(3, 169, 244, 1) 0%, rgba(156, 39, 176, 1) 100%);
    box-shadow: 0px 0px 0px 1px;
	border-radius: 0px;
}

.content h2 {
	background-color: rgba(241, 245, 248, var(--tw-bg-opacity));
}

@keyframes bg{
  0%{
    background-position-x: 0;
  }
  100%{
    background-position-x: 5000px;
  }
}
  
@keyframes rotate-wave {
  0% {transform: translate(-50%, 0) rotateZ(0deg);}
  50% {transform: translate(-50%, -2%) rotateZ(180deg);}
  100% {transform: translate(-50%, 0%) rotateZ(360deg);}
}

ymaps [class*="ground-pane"] ymaps:first-child > ymaps > ymaps {
    filter: grayscale(0.9);
    -webkit-filter: grayscale(0.9);
    -moz-filter: grayscale(0.9);
    -o-filter: grayscale(0.9);
}
.right-panel {
    width: 360px;
    position: absolute;
    top: 0;
    right: -344px;
    bottom: 0;
    background: #fff;
    padding-left: 16px;
    transition: right 0.4s ease-in-out
}
.right-panel.clicked {
    right: 0;
}
.panel-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}
#accident-list {
    margin: 0;
    list-style: none;
    padding-inline-start: 0;
}
.panel-button {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#accident-list li {
    padding:0.5rem;
    font-size: 0.75rem;
}
#accident-list li:nth-child(2n+1){
    background: #f1efef;
}
#accident-list li[data-type-id="0"]{
    border-left: 2px solid #cc000040;
}
#accident-list li[data-type-id="1"]{
    border-left: 2px solid #9fd7ff78;
}
#accident-list li[data-type-id="0"].clicked {
    background: #cc000040 !important;
}
#accident-list li[data-type-id="1"].clicked {
    background: #9fd7ff78 !important;
}
.map .link {
    --tw-text-opacity: 1;
    color: rgba(33, 150, 243, var(--tw-text-opacity));
}