:root {
	--genre_0: #ffdde1;
	--border_0: #ff3d57;
	--genre_1: #b9ddff;
	--border_1: #2895ff;
	--genre_2: #8cf9cc;
	--border_2: #09b66d;
	--genre_3: #fee7c4;
	--border_3: #fdbf5e;
	--genre_4: #f05d7b; /*#e9b7ff;*/
	--border_4: #bc1234; /*#9400d3;*/
	--genre_5: #dbe1e5;
	--border_5: #8697a8;
	--genre_6: #a0d040;
	--border_6: #4a6318;
	--genre_7: #feff1c;
	--border_7: #ffd700;
	--genre_8: #fe1eff;
	--border_8: #9a009b;
	--genre_9: #a0522d;
	--border_9: #ff8f64;
	--genre_10: #fee7c4;
	--border_10: #fdbf5e;
	--genre_11: #e9b7ff;
	--border_11: #9400d3;
}
.genre_0 {
	color: var(--border_0);
	background-color: var(--genre_0);
}
.genre_1 {
	color: var(--border_1);
	background-color: var(--genre_1);
}
.genre_2 {
	color: var(--border_2);
	background-color: var(--genre_2);
}
.genre_3 {
	color: var(--border_3);
	background-color: var(--genre_3);
}
.genre_4 {
	color: var(--border_4);
	background-color: var(--genre_4);
}
.genre_5 {
	color: var(--border_5);
	background-color: var(--genre_5);
}
.genre_6 {
	color: var(--border_6);
	background-color: var(--genre_6);
}
.genre_7 {
	color: var(--border_7);
	background-color: var(--genre_7);
}
.genre_8 {
	color: var(--border_8);
	background-color: var(--genre_8);
}
.genre_9 {
	color: var(--border_9);
	background-color: var(--genre_9);
}
.genre_10 {
	color: var(--border_10);
	background-color: var(--genre_10);
}
.genre_11 {
	color: var(--border_11);
	background-color: var(--genre_11);
}


.count_0 {
	background-color: var(--border_0);
}
.count_1 {
	background-color: var(--border_1);
}
.count_2 {
	background-color: var(--border_2);
}
.count_3 {
	background-color: var(--border_3);
}
.count_4 {
    color: #fff;
	background-color: var(--border_4);
}
.count_5 {
	background-color: var(--border_5);
}
.count_6 {
	background-color: var(--border_6);
}
.count_7 {
	background-color: var(--border_7);
}
.count_8 {
    color: #fff;
	background-color: var(--border_8);
}
.count_9 {
	background-color: var(--border_9);
}
.count_10 {
	background-color: var(--border_10);
}
.count_11 {
    color: #fff;
	background-color: var(--border_11);
}
.wrapper {
    background-color: #F8FAFD;
    display: grid;
    width: 100%;
    border-top: 1px solid #dedede;
}
.top {
    background-color: #A2D014;
    height: 70px;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #dedede;
    padding-top: 18px;
    position: fixed;
    top: 125px;
    z-index: 3;
}
.top .changeMonth {
    display: flex;
    margin-left: 100px;
}
.top .changeMonth DIV {
    position: relative;
}
.top .changeMonth DIV i {
    position: absolute;
    top: 12px;
    right: 5px;
    display: none;
}
.top .changeMonth input {
    border: 0;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    border-radius: 0;
    height: 40px;
    background-color: #fff;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    width: 170px;
}
.top .changeMonth i.arrow {
    border: 1px solid #dedede;
    width: 40px;
    height: 40px;
    display: grid;
    align-content: center;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}
.top .changeMonth i.fa-angle-left {
    border-radius: 6px 0 0 6px;
}
.top .changeMonth i.fa-angle-right {
    border-radius: 0 6px 6px 0;
}

.multi-select {
    display: inline-block;
    width: 200px;  
    position: fixed;
    top: 143px;
    left: 450px;
    z-index: 9999;
}

.multi-select__btn {
    border: 1px solid #dedede;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: grid;
    align-content: center;
    position: relative;
    padding-left: 10px;
}
.multi-select__btn i {
    position: absolute;
    top: 12px;
    right: 10px;
}
.multi-select__menu {
    position: fixed;
    top: 190px;
    left: 200;
    min-width: 220px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    padding: 8px 0;
    display: none;
    z-index: 9999;
}
.multi-select__menu label {
    align-items: center;
    gap: 15px;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 20px 1fr;
    font-size: 14px;
    padding: 0 10px;
    height: 30px;
}
.multi-select__menu label:hover {
    background-color: #dedede;
}
.multi-select.open .multi-select__menu {
    display: block;
}
.multi-select__menu label INPUT {
    scale: 1.5;
}


.jourL {
	color: #556575;
	font-weight: bolder;
	font-size: 14px;
	height: 50px;
	text-align: center;    
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-content: center;
    position: sticky;
    top: 195px;
    z-index: 3;
    width: 100%;
    background-color: #F8FAFD;
    border-bottom: 1px solid #dedede;
}
#cal {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 65px;
}
.cal {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);  
    z-index: 2;
    
}
.cal .date {
	border-bottom: 1px solid #EAEBEE;
	border-left: 1px solid #EAEBEE;
	position: relative;
	background-color: #fff;
	padding: 2px 2px 0 2px;
    text-align: right;
    overflow: relative;
    z-index: 2;
    min-height: 150px;
}
.cal .date .num {
	color: #556575;
	font-weight: bolder;
	font-size: 14px;
}
.cal .date .num SPAN {
	border-radius: 50%;
	color: #000;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
}
.cal .date.ojdd .num SPAN {
	background-color: #A2D014;
}
.cal .date.vide .num {
	color: #94a3b1;
}
.cal .date.vide {
	background-color: #eeeeee;
	background: repeating-linear-gradient(-45deg, #f8f8f8, #f8f8f8 5px, #eeeeee 5px, #eeeeee 10px);
}
.cal .date .res {    
  	flex-grow: 1;
    padding: 5px 5px 30px 5px;
}

#cal .date .res {
	--sb-track-color: #ffffff;
	--sb-thumb-color: #82a710;
	--sb-size: 5px;
}
#cal .date .res::-webkit-scrollbar {
	width: var(--sb-size);
}
#cal .date .res::-webkit-scrollbar-track {
	background: var(--sb-track-color);
	border-radius: 3px;
}
#cal .date .res::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 3px;
}
@supports not selector(::-webkit-scrollbar) {
	#cal .ddte .res {
		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
	}
}

.cal .date a {
	width: 100%;
	padding: 0 0 0 5px;
	color: #000;
	font-weight: 500;
	line-height: 15px;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 10px;
    text-align: left;
    margin-bottom: 2px;
    font-size: 12px;
    height: 40px;
    border-radius: 4px;
    
}
.cal .date a .title {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.cal .date a em {
	font-style: normal;
}
.cal .date a .countUsers{
    height: 40px;                 
    display: grid;
    place-items: center;         
    align-self: center;     
    font-weight: 600;
    border-radius: 0 6px 6px 0;
}
.popover {
    position: fixed;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    
    width: 150px;
    padding: 10px 12px;

    background: #1f1f1f;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.popover::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 12px;

    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #1f1f1f transparent transparent;
}
.popover.is-open {
    opacity: .95;
    pointer-events: auto;
    transform: translateY(0);
}

.countUsers {
    cursor: help;
    transition: transform .15s ease, opacity .15s ease;
}

.countUsers-wrapper:hover .countUsers {
    transform: scale(1.05);
    opacity: .85;
}
.partPopover {
    list-style: none;
    margin: 0;
    padding: 0;
}
.partPopover LI {
    display: grid;
    grid-template-columns: 1fr 30px;
    line-height: 30px;
}
.partPopover LI SPAN:last-child {
    text-align: right;
}
.partPopover LI:not(:last-child) {
    border-bottom: 1px solid #fff;
}