:root {
  --custom-border: 1px solid #AAA;  	/* кастомизация границ просто для примерра использования переменных в css */
  --custom-border-radius: 5px;
}


.table_wrapper {
    position: absolute;
    left: 40%;
    margin-left: auto;
    margin-right: auto;
    /*transform: translateX(-50%);*/
    top: 30px;   
}


table{
	border-collapse: collapse;
}

th, td {
	padding: 10px;
}

.container{
	border: var(--custom-border);
	border-radius: var(--custom-border-radius);
}

#target_div {
    position: absolute; /* Робить div плаваючим над іншими елементами */
    top: 5px;
    left: 5px;
    z-index: 1000; /* Високий z-index, щоб він був поверх інших елементів */
    border: 0px solid #777; /* Опціонально: Додає рамку для кращої видимості */
    box-sizing: border-box; /* Забезпечує правильний розрахунок розмірів */
    background: #FFF;    
}

.DR_box { /* 	draggable and resizable box 	https://blog.coderfy.io/creating-a-draggable-and-resizable-box		*/
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 15px;
  box-shadow: 0 15px 15px lightgrey;
  overflow: hidden;
  width: fit-content;
  min-width: 20px; 
}

.DR_box-header {
  color: #fff;
  background-color: #999;
  padding: 10px 15px;
  cursor: move !important;
}

.DR_box-body {
  padding: 10px;
}


/**********************************************************/
/* Приховуємо самі чекбокси */
input[type="checkbox"] {
    display: none;
}

/* Загальні стилі для іконок */
label .fa-solid {
    cursor: pointer;
    margin: 12px;
}

/* Клас для неактивного стану */
.unchecked-icon {
    color: #BBB !important;
}

/* Клас для активного стану */
.checked-icon {
    color: #555 !important;
}


/***************** стилізація слайдера **********************/
:root {
  --range-width:  200px;	/* довжина слайдера */
  --range-height: 8px;		/* висота  слайдера */
  --roller-size:  12px;		/* розмір бігунка   */
  --roller-color: #9B9;		/* колір  бігунка   #4CAF50	*/
}

input[type="range"] {
    width: var(--range-width);
    height: var(--range-height);
    -webkit-appearance: none;  /* прибираємо стандартний вигляд в Chrome */
    background: #ddd;
    border-radius: 5px;
    outline: none;
}

/* Стилі для повзунка (бігунка) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 	var(--roller-size);
    height: 	var(--roller-size);
    background: var(--roller-color);
    border-radius: 50%;
    cursor: pointer;
}

/* Стилі для Firefox */
input[type="range"]::-moz-range-thumb {
    width: 	var(--roller-size);
    height: 	var(--roller-size);
    background: var(--roller-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Стилі для відображення значення */
#sliderValue {
    margin-left: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/******************  бічна панель  **************************/
        :root {
            /* Розміри панелі */
            --panel-width: 80%;
            --panel-height: 85%;
            
            /* Розміри вкладки */
            --tab-width: 20px;
            --tab-height: 100px;
            
            /* Кольори */
            --panel-bg-color: #f0f0f0;
            --tab-bg-color: #4a90e2;
            --tab-text-color: white;
            
            /* Відступи */
            --panel-padding: 20px;
            
            /* Анімація */
            --transition-speed: 0.3s;
            
            /* Заокруглення кутів */
            --border-radius: 10px;
            
            /* Тінь */
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        .sliding-panel {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateX(100%) translateY(-50%);
		width: var(--panel-width);
		min-width: 600px;
		min-height: 700px;
		height: var(--panel-height);
		background-color: var(--panel-bg-color);
		box-shadow: -2px 0 10px var(--shadow-color);
		transition: transform var(--transition-speed) ease-in-out;
		border-radius: var(--border-radius);
		z-index: 2000;
        }

        .sliding-panel.open {
	    left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .panel-tab {
            position: absolute;
            left: calc(-1 * var(--tab-width));
            top: 50%;
            transform: translateY(-50%);
            width: var(--tab-width);
            height: var(--tab-height);
            background-color: var(--tab-bg-color);
            cursor: pointer;
            border-radius: calc(var(--border-radius) / 2) 0 0 calc(var(--border-radius) / 2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tab-text-color);
            writing-mode: vertical-rl;
            text-orientation: mixed;
            box-shadow: -2px 0 5px var(--shadow-color);
        }

        .panel-content {
            padding: var(--panel-padding);
            height: 100%;
            box-sizing: border-box;
            background-color: var(--panel-bg-color);
            border-radius: var(--border-radius);
        }

        .overlay2 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            pointer-events: none;
            transition: background-color var(--transition-speed) ease-in-out;
            z-index: 1500;
        }

        .overlay2.active {
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: auto;
        } 


	.button-ok, .button-cancel, .button-save, .button-load {
	  padding: 10px 20px;
	  /*border: none;*/
	  border: 1px solid #777;
	  border-radius: 5px;
	  cursor: pointer;
	}

	.button-ok:hover, .button-cancel:hover, .button-save:hover, .button-load:hover {
	  background-color: #DDD;
	}

	.button-ok::before {
	  content: "\2714";
	  color: green;
	  margin-right: 15px;
	}

	.button-cancel::before {
	  content: "\2716";
	  color: red;
	  margin-right: 15px;
	}

	.button-save::before{
	  content: "\21D3";
	  color: #555;
	  margin-right: 15px;
	}

	.button-load::before{
	  content: "\21D1";
	  color: #555;
	  margin-right: 15px;
	}

	.block {
	  display: inline-block;
	  width: 23%;
	  min-width: 120px;
	  box-sizing: border-box;
	  border: 0px solid blue;
	  text-align: center; /* Вирівнювання тексту по центру */
	  vertical-align: middle; /* Вирівнювання вмісту по вертикалі */
	}

/************************************************************/