:root {
	--default-header-font-size: 24px;
	--default-subHeader-font-size: 20px;
	--default-font-size: 18px;
	--ok-btn_background: #80ffc4;
	--ok-btn_font_color: #000;
	--close-btn_background: #80ffc4;
	--close-btn_font_color: #000;
	--save-btn_background: #0000fd;
	--save-btn_font_color: #fff;
	--search-btn_background: #80ffc4;
	--search-btn_font_color: #000;
	--cancel-btn_background: #ff2727;
	--cancel-btn_font_color: #fff;
	--selected-btn_background: #0000fd;
	--selected-btn_font_color: #fff;
	--box-shadow: 2px 2px 8px 1px #5a5a5a;
	--button-border: 1px solid rgb(118, 118, 118);
	--button-border-color: rgb(118, 118, 118);
	--normal-discount-font-size: 15px;
	--small-discount-font-size: 12px;
}
*{
    box-sizing: border-box;	
}

.main_vjcalendarLayer {
	align-items: flex-start !important;
    padding: 10px 10px 0 10px;
	overflow-x: hidden !important;
}

.vjcalgrid {
    display: flex;
	align-items: center;
    flex-direction: column;
	width:100%;
}

.vjcalgridWrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vjcalgridContainer {
    display: grid;
    grid-template-columns: min-content auto min-content;
    gap: 10px;
    position: relative;
}

.vjcalgridContainer .vjcalgridLeft{
    visibility: hidden;
}

.vjcalgridContainer .vjcalgridMiddle{
    visibility: hidden;
    position: absolute;
}

.vjcalgridContainer .vjcalgridRight{
    visibility: hidden;
    position: absolute;
}
.vjcalgridContainerFrame {
    background: rgb(225 224 185 / 71%);
    padding: 10px;
    border-radius: 6px;	

}

.calContainer {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
    align-content: flex-start;    
	gap: 10px;
	justify-content: center;
}

.vjcalendar {
    display: flex;
    flex-direction: column;
    row-gap: 10px;    margin-left: auto;
    margin-right: auto;
    width: 320px;
	font-size: var(--default-font-size);
    font-family: "Lato", sans-serif;
}

.vjcalTimeStarted {
    background: #00a700;
    color: #fff;
}

.vjcalTimeEnded {
    background: #d20000;
    color: #fff;
}

.vjcalendar .itemSelected{
	background: #270cff !important;
	color: #fff !important;
}

.vjcalendarLayer{
	display: none;
    flex-direction: column;
    position: fixed;
    flex-wrap: wrap;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #00000045;
    overflow: visible;
	flex-flow: wrap;
    overflow: auto;
	z-index: 22222222;
}


.vjcalendarLayer2{
    display: none;
}

.datePickerBoxContainer .vjcalendarLayer, .datePickerBoxContainer .vjcalendarLayer2,
.showInfoBoxContainer .vjcalendarLayer2{
    display: none;
    position: fixed;
    flex-wrap: wrap;
    flex-direction: column;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #00000045;
    overflow: visible;
	flex-flow: wrap;
    overflow: auto;
}

.vjcalendar .fullWidth{
	width: 100%;
}

.vjcalendar .loadHTML{
	position: fixed;
    z-index: 2;
}

.vjcqqqqqalendarLayer{
    z-index: 88888888;
}

.vjcqqqqqalendarLayer2{
    z-index: 88888889;
}

@keyframes changeColor {
  0% {
    background-color: rgb(248 130 255);
	color: #000;
  }
  
  50% {
    background-color: rgb(0 150 15);
	color: #fff;
  }
  
  100% {
    background-color: rgb(248 130 255);
	color: #000;
  }
}

.vjcalendar .textLabel{
	font-weight: bold;
	color: #000;
	margin-bottom: 4px;
}

.vjcalendar .textLabel2{
	font-weight: bold;
	color: #000;
}	

.overLapped{
    animation: changeColor ease;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-fill-mode: both;
}

.vjcalendar .def_edit, .select_box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	outline: none;
	border-color: #66FF99;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 1px #808080;
	margin: 1px;
	min-height: 26px;
	border-radius: 4px;
	padding: 6px;
	font-weight: normal;
	font-size: var(--default-font-size);
	font-family: "Lato", sans-serif;
}

.vjcalendar .calendarBox, .vjcalendar .calendarBox2{
	display: flex;
    flex-direction: column;
    align-items: center;	
    max-height: 95%;
	max-width: 1000px;
	background: #fff;
	position: relative;
	justify-content: center;
}

.vjcalendar .showInfoBoxContainer .calendarBox{
	align-items: baseline;
	width: 100%;
    max-width: 700px;
}

.vjcalendar .showInfoBoxContainer .theImages{
	display: flex;
    justify-content: center;
	margin-bottom: 5px;
}

.vjcalendar .showInfoBoxContainer .vjCalDefaultBox {
	max-height: 373px;
}

.vjcalendar .calendarBox .mainBoxContent{
	display: flex;
    flex-direction: column;   
	width: 100%;
	overflow: hidden;
}

.vjcalendar .showInfoBoxContainer .calendarBox .mainBoxContent{
	padding: 0 16px 16px 16px;
    overflow: auto;
}

.vjcalendar .boxContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vjcalendar .showInfoBoxContainer .boxContent{
	width: 100%;
}

.vjcalendar .showInfoBoxContainer .theColor{
	display: flex;
    gap: 10px;
}

.vjcalendar .showInfoBoxContainer .editItem{
    margin-left: auto;
	background: url(images/edit.webp) no-repeat;
	background-size: contain;
    background-position: center;
    width: 31px;
    height: 31px;
	cursor: pointer;
}

.vjcalendar .delItem{
	background: url(images/recycle-bin.webp) no-repeat;
	background-size: contain;
    background-position: center;
    width: 31px;
    height: 31px;
	cursor: pointer;
}

.vjcalendar .showInfoBoxContainer .info1Container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vjcalendar .showInfoBoxContainer .chkContinue{
	display: none;
}

.vjcalendar .showInfoBoxContainer .timeItems .text{
    background: #f3ff65;
    padding: 4px;
    font-weight: bold;
    border: 1px solid #b7b3b3;
}

.vjcalendar .showInfoBoxContainer .timeItems .time{
    text-align: center;
    padding: 4px;
}

.vjcalendar .horizontal{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.vjcalendar .calendarButtons{
	display: flex;
    gap: 10px;
	margin-top: 20px;
}

.vjcalendar .downArrow {
	width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #000000;
}

.vjcalendar .upArrow{
	width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #000000;
}

.vjcalendar button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--button-font-size);
    min-width: 80px;
	min-height: 36px;
    padding: 5px;
    border: var(--button-border);
    background: rgb(239, 239, 239);
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vjcalendar button:disabled {
	background: #dbd6d6;
}

.vjcalendar button img {
    margin-right: 5px;
}

.vjcalendar button span {
    width: 100%;
}

.vjcalendar ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
	
.vjcalendar button img {
    margin-right: 5px;
}

.vjcalendar .imgBtn span {
    width: 100%;
}

.vjcalendar .checkContainer {
    position: relative;
    width: max-content;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.vjcalendar .checkContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.vjcalendar .checkmark.radio{
	position: absolute;
	top: -2px;
	left: 0;
	border: 1px solid #8a8a8a;
	height: 25px;
	width: 25px;
	background-color: #fff;
	border-radius: 50%;
}

.vjcalendar .checkmark.checkBox {
    position: absolute;
    top: -5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 1px solid #8a8a8a;
}

.vjcalendar .checkContainer .checkmark.radio:after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.vjcalendar .checkContainer .checkmark.checkBox:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
	content: "";
	position: absolute;
	display: none;
}

.vjcalendar .checkContainer input:checked ~ .checkmark:after {
	display: block;
}

.vjcalendar .checkContainer:hover input ~ .checkmark {
	background-color: #ccc;
}

.vjcalendar .checkContainer input:checked ~ .checkmark {
	background-color: #2196F3;
}

.vjcalendar .selectedBtn{
	color: var(--selected-btn_font_color);
	background: var(--selected-btn_background);
}

.vjcalendar .saveBtn{
	color: var(--save-btn_font_color);
	background: var(--save-btn_background);
}

.vjcalendar .confirmBtn{
	color: var(--save-btn_font_color);
	background: var(--save-btn_background);
}

.vjcalendar .cancelBtn{
	color: var(--cancel-btn_font_color);
	background: var(--cancel-btn_background);
}

.boxClose {
    background: red;
    color: #fff;
    padding: 8px;
    position: absolute;
	top: 0;
    right: 0;
	cursor: pointer;
}

.headerSection {
    /* font-weight: bold; */
    background: #b536c6;
    padding: 5px;
    color: #FFF;
}

.datePickerBox .mainBoxContent {
     width: 100%;
}

.datePickerBox .boxContent {
	padding: 16px;
	overflow: auto;
}

.showInfoBoxContainer .datePickerBox  .boxContent {
	padding: 0;
	margin-top: 12px;
	overflow: unset;
}

.datePickerBox .boxHeader {
    display: none;
    gap: 10px;
}

.showInfoBoxContainer .datePickerBox .boxHeader {
margin-top: 16px;
}

.datePickerBox .boxSection {
	display: flex;
	gap: 10px;
}

.datePickerBox .boxSection1{
	flex: 1;
}

.datePickerBox .boxSection2{
	flex: 1;
    max-width: 350px;
	margin-top: 54px;
    background: #fcffeb;
    padding: 10px;
    border: 1px solid #aaa;
}

.showInfoBoxContainer .datePickerBox .boxSection2{
    max-width: unset;
	margin-top: 0;
    padding: 10px 10px;
}

.datePickerBox .boxSection1, .datePickerBox .boxSection2{
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.datePickerBox .boxSection2 textarea{
    width: 100%;
}

.datePickerBox .boxSection2 .edtSpecialNotes, .datePickerBox .boxSection2 .specialNotes{
	color: red;
}


.showInfoBoxContainer .extraInfo{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vjcalendar .theBoxShadow {
	box-shadow: var(--box-shadow);
}

.vjcalendar .showItemsBox {
	min-width: 250PX;
    min-height: 140px;
	padding: 10px;
}

.vjcalendar .confirmBox {
	min-width: 250PX;
    min-height: 140px;
}

.vjcalendar .confirmBox .boxContent {
	align-items: center;
}

.vjcalendar .showItemsBox .boxContent{
	align-items: center;
}

.vjcalendar .datePickerBox .identColor {
	width: 40px;
    height: 40px;
}
	


.vjcalendar .datePickerBox  .theColors {
	align-self: flex-start;
	position: relative;
}

.vjcalendar .datePickerBox  .selectColors {
	width: 100%;
	position: absolute;
    bottom: 0;
    position: relative;
	background: #fff;
	min-height: 0;
    padding: 6px;
	width: 208px;
}

.vjcalendar .datePickerBox  .selectColors .imgSelectedColor {
    width: 20px;
    height: 20px;
	min-width: 20px;
    background: red;
}

.vjcalendar .datePickerBox  .selectColors .btn-txt{
	text-transform: capitalize;
}

.vjcalendar .datePickerBox  .selectColors .bottomSection {
    position: absolute;
    bottom: 0;
    position: relative;
}

.vjcalendar .datePickerBox .dropDownColors {
	display: none;
    flex-direction: column;
	position: absolute;
    background: #fff;
    padding: 8px 8px 0;
    border-left: 1px solid;
	border-left-color: var(--button-border-color);
    border-right: 1px solid;
	border-right-color: var(--button-border-color);
    border-bottom: 1px solid;
	border-bottom-color: var(--button-border-color);
	width: 190px;
}

.vjcalendar .datePickerBox  .dropDownColors li {
    display: flex;
    column-gap: 8px;
	padding: 4px 0;
}

.vjcalendar .datePickerBox  .dropDownColors .color {
    width: 20px;
    height: 20px;
}

.vjcalendar .datePickerBox  .dropDownColors li {
	height: 30px;
	cursor: pointer;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(1) .color {
    background: DarkOrchid;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(2) .color {
    background: orange;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(3) .color {
    background: brown;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(4) .color {
    background: MediumSeaGreen;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(5) .color {
    background: DarkOliveGreen;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(6) .color {
    background: SlateBlue;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(7) .color {
    background: red;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(8) .color {
    background: SpringGreen;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(9) .color {
    background: Pink;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(10) .color {
    background: DodgerBlue;
}

.vjcalendar .datePickerBox  .dropDownColors li:nth-child(11) .color {
    background: Fuchsia;
}

.vjcalendar .datePickerBox  .dropDownColors li .text {
	text-transform: capitalize;
}

.vjcalendar .datePickerBox .edtSubject{
    width: 100%;
    max-width: 330px;
}

.vjcalendar .datePickerBox .edtWorkType {
    width: 100%;
    max-width: 250px;
}

.vjcalendar .datePickerBox .edtDescription  {
    width: 100%;
}

.vjcalendar .datePickerBox .sInput.extraInfo  {
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.vjcalendar .datePickerBox .sInput.extraInfo .container  {
    display: flex;
    flex-direction: column;
	gap: 12px;
}

.vjcalendar .datePickerBox .imageSection  {
    display: flex;
    flex-direction: column;
}

.vjcalendar .datePickerBox .imageList {
	display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.vjcalendar .datePickerBox #vjcalFileToUpload {
    display: none;
}

.vjcalendar .datePickerBox .addImage {
    align-items: center;
    align-self: flex-start;
    display: flex;
    justify-content: center;
    height: 36px;
    background: #96ff96;
    border: 1px solid rgb(118, 118, 118);
    border-radius: 6px;
    padding: 10px;
	cursor: pointer;
}

.vjcalendar .datePickerBox .imageSection .thePImage {
    width: 32%;
    height: 60px;
    border: 1px solid #b4a9a9;
    background: #eaeaea;
    max-width: 107px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor: pointer;
}

.vjcalendar .datePickerBox .imageSection .thePImage img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
	display: block;
}

.vjcalendar .datePickerBox .imageSection .thePImage img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.vjcalendar .datePickerBox .deleteItem{
    position: absolute;
    top: 20px;
    right: 38px;
}

.vjcalendar .datePickerBox .workType{
    background: #f3ff65;
    padding: 4px;
    font-weight: bold;
    border: 1px solid #b7b3b3;
    display: inline-flex;
}

.vjcalendar .datePickerBox .ondutyHeader{
	max-width: 340px;
}

.vjcalendar .datePickerBox .lblOnduty{
	display: inline-flex;
    align-items: center;
    background: #4202b5;
    padding: 4px 8px;
    color: #fff;
}

.vjcalendar .datePickerBox .lblOndutyCount{
    margin-left: auto;
    align-self: center;
    font-weight: bold;
    color: red;
}

.vjcalendar .datePickerBox .onDutyContainer{
    display: flex;
	flex-direction: column;
    gap: 2px;
    margin-top: 15px;
	width: 100%;
    max-width: 400px;
}

.vjcalendar .showInfoBoxContainer .onDutyContainer{
    margin-top: 4px;
}

.vjcalendar .datePickerBox .itemContainer{
	display: flex;
	align-items: center;
	gap: 10px;
}

.vjcalendar .datePickerBox .itemContainer .checkmark.radio {
    top: -13px;
}

.vjcalendar .datePickerBox .delBtn {
    background: #0181b2;
    padding: 4px;
    color: #fff;
	border-radius: 6px;
	cursor: pointer;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer{
    position: relative;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer .ulContainer{
	display: none;
    position: absolute;
    padding-bottom: 20px;
    width: calc(100% + 4px);
    max-height: 350px;
    overflow-y: auto;
    z-index: 2;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer .ulContainer2{
    width: calc(100% - 4px);
    position: relative;
    left: 2px;
    top: 2px;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul{
	flex-direction: column;
    width: 100%;
	z-index: 1;
    position: relative;
    background: #fff;
    color: #fff;
    box-shadow: 2px 2px 6px #5a5a5a;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li:nth-child(odd){
    background: #f1f1f1;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li:nth-child(even){
    background: #e4e4e3;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li{
    display: flex;
    align-items: center;    
	width: 100%;
	min-height: 40px;
	color: #000;
    padding: 4px;
	cursor: pointer;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li .container{
	display: flex;	
    flex-direction: column;
    width: 100%;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li .container .cinfo{
	display: flex;	
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li .container .cinfo .cinfo1{
    color: #008021;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li .container .cinfo .cinfo2{
	margin-left: auto;
    color: red;
}

.vjcalendar .datePickerBox .itemContainer .editItemContainer ul li:hover{
 	background-color: #b3d3fd  !important;
    color: #000 !important;
}

.vjcalendar .datePickerBox .itemContainer .itemInput {
    width: 100%;
}

.vjcalendar .datePickerBox .infoDetails {
    background: url(images/info.webp) no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
	width: 31px;
    height: 31px;
	min-height: 31px;
    min-width: 31px;
}

.vjcalendar .datePickerBox .calendarButtons {
	align-self: baseline;
    margin: 20px 40px;
}

.datePickerListBox  .boxContent {
	padding: 20px;
	margin-top: 16px;
}

.dateList{
	display: flex;	
    flex-direction: column;
	align-items: center;
	gap: 10px;
}

.dateList .itemContainer{
	flex: 1;
    display: flex;
    flex-direction: column;
	row-gap: 10px;
    width: 100%;
}

.dateList .item {
    display: flex;
	align-items: normal;
    gap: 10px;
	cursor: pointer;
}

.dateList .item:not(:last-child){
    border-bottom: 1px solid #c3c3c3;
}

.dateList .colordiv {
    width: 20px;
    background: red;
}

.dateList .subject {
    width: 150px;
	text-align: center;
	align-self: center;
}

.lblText {
 font-weight: bold;
}


.dates{
	display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendarContainer{
	box-shadow: 2px 2px 6px #5a5a5a;
	-webkit-border-radius: 12px 12px 12px 12px;
    -moz-border-radius: 12px 12px 12px 12px;
    border-radius: 12px 12px 12px 12px;
}
.calendar_weekdays div {
	justify-content: center;
}

.calendar_weekdays .textContainer{
	display: flex;
    justify-content: center;
}

.calendar_weekdays .text{
	position: absolute;
}


.calendar_days{
}

.calendar_weekdays{
	background: #fff;
}
.calendar_weekdays{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	grid-auto-rows: 40px;
    position: relative;
    width: 100%;
	font-weight: bold;
	background: #fff2ce
}

.calendar_days{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	grid-auto-rows: 16.7%;    
	position: relative;
    width: 100%;
	font-weight: bold;
	background: #fff;
}

.weeks_weekdays{
    background: #d3f2ff;
	min-width: 36px;
}

.calendar_weeks {
	color: #079862;
    min-width: 36px;
	background: #d3f2ff
}

.calendar_weeks div {
    display: flex;
    justify-content: center;
	align-items: center;
	height: 16.7%;
	border-right: 1px solid #bab3b3;
	font-weight: bold;
	cursor: default;
}

.calendar_weekdays div,
.calendar_days .mainDiv,
.calendar_days .blank {
	display: flex;
    align-items: center;
    text-align: center;
    color: #000;
	position: relative;
}

.calendar_days .mainDiv {
    display: flex;
    justify-content: flex-start;
    align-items: self-start;
	cursor: pointer;
    position: relative;
}

.calendar_days .mainDiv,
.calendar_days .blank {
	align-items: self-start;
    justify-content: flex-start;
}

.calendar_days .mainDiv:hover {
	background-color: #dcdcdc !important;
    color: #000 !important;
}

.calendar_days .mainDiv .text,
.calendar_days .blank .text{
	min-width: 24px;
	padding: 2px 2px 0 2px;
}

.calendar_days .subDiv {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.calendar_days .subDiv .subText{
	display:none;
    align-self: center;
    z-index: 1;
    background: #fff;
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px;	
	font-size: 15px;
	color: #000;
}

.calendar_days .subDiv .imageList {
    display: flex;
    align-items: center;
    left: 0;
    height: 100%;
    right: 0;
    position: absolute;
    justify-content: center;
}

.calendar_days .subDiv .imageList .eImage {
    height: 100%;
}

.calendar_days .subDiv .eImage {
	object-fit: scale-down;
	object-position: 0;
    max-height: 100%;
    max-width: 100%;
}

.calendar_content {
	    display: flex;
    -webkit-border-radius: 0px 0px 12px 12px;
    -moz-border-radius: 0px 0px 12px 12px;
    border-radius: 0px 0px 12px 12px;
	    overflow: hidden;
}

.weekdaysContainer{
	display: flex;
	border-bottom: 1px solid #bab3b3;
}

.calendar_days div {
}
.calendar_days div.blank {
    background-color: #E8E8E8;
	color: #a3a2a2;
	cursor: default;
}
.calendar_header,
.calendar_days div.today {
    zoom: 1;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.calendar_days div.today {
    color: #FFFFFF;
}
.calendar_header {
    width: 100%;
    background-color: #054291;
    padding: 4px 0;
    -webkit-border-radius: 12px 12px 0px 0px;
    -moz-border-radius: 12px 12px 0px 0px;
    border-radius: 12px 12px 0px 0px;
}

.yearMonth{
	display: flex;
	gap: 10px;
	height: 34px;
}

.calendar_year{
	display: flex;
	align-items: center;
}

.calendar_month{
	display: flex;
	align-items: center;
}

.calendar_year h1 {
    font-size: 18px;
    color: #FFFFFF;
	padding: 0;
    margin: 0;
	cursor: default;
}
.calendar_month h1 {
    font-size: 18px;
    color: #FFFFFF;
    width: 120px;
	text-align: center;
	padding: 0;
    margin: 0;
	cursor: default;
}

i[class^="monthNav"], i[class^="yearNav"] {
    border-radius: 50px;
    display: flex;
    justify-content: center;	
	color: #FFFFFF;
	width: 26px;
    font-size: 24px;
    font-weight: bold;
	cursor: pointer;
}

.vjcalendar .calendarList {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vjcalendar .calendarList .firstLi {
	display: flex;
    flex-direction: column;
	position: relative;
	box-shadow: 2px 2px 6px #5a5a5a;
    border-radius: 10px;
	overflow: hidden;
    background: #eaeaea;
}

.vjcalendar .calendarList .info {
    display: flex;
    flex-direction: column;
}

.vjcalendar .calendarList .header1 {
	display: flex;
	align-items: center;
	font-weight: bold;
    font-size: var(--default-subHeader-font-size);
    background: white;
    padding: 4px;
}

.vjcalendar .calendarList .header1 .headerRight {
    display: flex;
    margin-left: auto;
	gap: 10px;
}

.vjcalendar .calendarList .header1 .headerRight .edtBtn{
    background: url(images/edit.webp) no-repeat;
    background-size: contain;
    background-position: center;
	width: 31px;
    height: 31px;
}


.vjcalendar .calendarList .header1 .identColor {
    width: 40px;
	align-self: baseline;
    height: 31px;
}

.vjcalendar .calendarList .subContainer {
    display: flex;
}

.vjcalendar .calendarList .subInfoContainer {
    flex: 1;
	padding: 8px;
}

.vjcalendar .calendarList .info1Container {
    row-gap: 6px;
    display: flex;
    flex-direction: column;
}

.vjcalendar .calendarList .info1Container .info1 {
    display: flex;
	flex-direction: column;
    row-gap: 2px;
}
.vjcalendar .calendarList .info1Container2 {
	display: flex;
	column-gap: 10px;
}

.vjcalendar .calendarList .info1Container .hours {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-left: auto;
}

.vjcalendar .calendarList .firstLi .info .info2 {
	display: flex;
    align-self: baseline;
	align-items: baseline;
    width: 100%;
}

.vjcalendar .calendarList .firstLi .info .info3 {
	display: flex;
    align-self: baseline;
	column-gap: 30px;
	align-items: baseline;
    width: 100%;
    min-width: 260px;
}

.vjcalendar .calendarList .firstLi .info .info2 .container{
    display: flex;
    flex-direction: column;
	align-items: center;
	width: 40%;
}

.vjcalendar .calendarList .firstLi .info .info2 .container2{
	display: flex;
    flex-direction: column;
}

.vjcalendar .calendarList .firstLi .info .info2 .container:nth-child(1) .container2{
	align-self: baseline;
}

.vjcalendar .calendarList .firstLi .info .info2 .container:nth-child(2) .container2{
	align-self: align-self: center;
}


.vjcalendar .calendarList .firstLi .info .info2 .container:nth-child(3) .container2{
	align-self: flex-end;;
}


.vjcalendar .calendarList .firstLi .info .info2 .container .text{
    background: #f3ff65;
    padding: 4px;
    font-weight: bold;
    border: 1px solid #b7b3b3;
}

.vjcalendar .calendarList .firstLi .info .info2 .container .time{
    text-align: center;
    padding: 4px;
}

.vjcalendar .calendarList .firstLi .info .descrText{
	min-width: 150px;
	color: #006906;
}

.vjcalendar .calendarList .firstLi .info .info2 .hours .image {
    background: url(images/clock.webp) no-repeat;
    background-size: contain;
    background-position: center;
	width: 31px;
    height: 31px;
}

.vjcalendar .calendarList .firstLi .info .info2 .hours .text {
	text-align: center;
}


.vjcalendar .calendarList .firstLi .info {
	row-gap: 5px;
}

.vjcalendar .calendarList .dateContainer {
    display: flex;
}

.vjcalendar .calendarList .dateContainer .date {
	display: flex;
	flex: 1;
    column-gap: 8px;	
	aawidth: 188px;
}

.vjcalendar .calendarList .dateContainer .time{
	color: red;
    font-weight: bold;
}

.vjcalendar .calendarList .infoTextContainer .infoText{
    background: #f3ff65;
    padding: 4px;
    font-weight: bold;
    border: 1px solid #b7b3b3;
}

.vjcalendar .calendarList .subList{
	display: flex;
	flex-direction: column;
	row-gap: 5px;
	padding: 0 10px 8px;
}

.vjcalendar .calendarList .subListHeader{
    display: flex;
    width: 100%;
}

.vjcalendar .calendarList .subListContainer{
	flex: 1;
}

.vjcalendar .calendarList .subList .subInfo1{
    display: none;
    padding-left: 10px;
}

.vjcalendar .calendarList .subListInfo{
    display: flex;
	align-items: center;
    gap: 10px;
	font-weight: bold;
    font-size: var(--default-subHeader-font-size);
	cursor:pointer;
}

.vjcalendar .calendarList .subList .subInfo1 li{
	padding: 2px;
}

.vjcalendar .calendarList .subList .subInfo1 li:nth-child(odd):not(:first-child){
	background: #c5ceff;
}

.vjcalendar .calendarList .subList .subInfo1 li:nth-child(1){
	display: flex;
    flex-direction: column;
    align-items: baseline;
	font-weight: bold;
    display: flex;
    color: #0027f5;
    column-gap: 10px;
    margin-bottom: 5px;	
}

.vjcalendar .calendarList .subList .resName{
	display: inline-flex;
	background: #0c8205;
	color: #fff;
	padding: 2px;
}

.vjcalendar .lblInCharge{
	font-weight: bold;
    color: #0027f5;
}

.vjcalendar .inChargeContainer{
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vjcalendar .onDutyContainer2{
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
	padding: 2px;
}

.vjcalendar .onDutyContainer2 .name{
	flex: 1;
    max-width: 214px;
}

.vjcalendar .onDutyContainer2:nth-child(even){
    background: #c5ceff;
}


.vjcalendar .inCharge{
	display: inline-flex;
	background: #0c8205;
	color: #fff;
	padding: 2px;
}


.vjcalendar .calendarList .subList .tel{
	align-self: center;
	color: #6b5104;
}

.vjcalendar .calendarList .subList .nameDiv{
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.vjcalendar .calendarList .subList .name{
	flex: 1;
    max-width: 214px;
}

.vjcalendar .calendarList .subList .nameContainer{
	flex: 1;
    max-width: 230px;
}

.vjcalendar .calendarList .subList .subListInfo2{
    display: flex;
	flex-direction: column;
    align-items: flex-end;
    gap: 10px;
	flex: 1;
    font-size: var(--default-subHeader-font-size);
    cursor: pointer;
}

.vjcalendar .calendarList .subList .subInfo2{
    display: none;
    margin-left: auto;
	box-shadow: 2px 2px 6px #5a5a5a;
	max-width: 400px;
    min-width: 250px;
	background: #fff;
}

.vjcalendar .calendarList .subList .lblText{
    background: #b1ffb2;
    padding: 8px;
}

.vjcalendar .calendarList .subList .value{
	padding: 10px;
	white-space: pre-line;
}

.vjcalendar .calendarList .subList .specialNotes{
	color: red;
}

.vjcalendar .calendarList .subList .subListInfo2Container{
    font-weight: bold;
}

.vjcalendar .calendarList .subList .subListInfoContainer,
.vjcalendar .calendarList .subList .subListInfo2Container{
    display: flex;
    align-items: center;
    gap: 5px;
}

.vjcalendar .calendarList .subImageContainer{
    margin: 0 6px;
    max-width: 100px;
    max-height: 124px;
    align-self: baseline;
}

.vjcalendar .calendarList .subImageContainer .thePImage{
    display: flex;
	width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
}

.vjcalendar .calendarList .subImageContainer img{
    max-width: 100%;
    max-height: 100%;
	object-fit: scale-down;
	cursor: pointer;
}

/* The image display form */

.vjCalDefaultBoxLayer {
    display: none;
    position: fixed;
    flex-wrap: wrap;
    flex-direction: column;
    cursor: default;
    z-index: 22222222;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #00000045;
    overflow: visible;
}

.vjCalImageDisplayForm {
    display: flex;
    flex-direction: column;
	justify-content: center;
    max-width: 600px;
	max-height: 90%;
    width: 100%;
    min-width: 240px;
	min-height: 182px;
}

.showInfoBoxContainer .vjCalImageDisplayForm {
	max-height: unset;
	max-width: 560px;
}

.vjCalImageFullDisplayForm {
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 20px);
    max-width: 1100px;
}

.vjCalImageDisplayForm .vjCalDefaultBox,
.vjCalImageFullDisplayForm .vjCalDefaultBox
 {
    box-sizing: border-box;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    background: #d5d5d5;
	max-height: 100%;
}

.vjCalDefaultBoxHeader {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    background: linear-gradient(90deg , #05bc00, #cbffc9);
    color: #fff;
}

.vjCalHeaderText {
    padding: 4px;
    font-weight: bold;
    flex: 1;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.vjCalDefaultBoxHeader .close {
    align-self: normal;
    margin-left: auto;
    margin-top: 2px;
    display: flex;
    margin-bottom: 2px;
    background: url(images/close.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 40px;
    cursor: pointer;
    height: 36px;
}

.vjCalImageDisplayForm .vjCalBoxContent,
.vjCalImageFullDisplayForm .vjCalBoxContent
 {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 0 !important;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
}

.vjCalImageDisplayForm .vjCalCcontent,
.vjCalImageFullDisplayForm .vjCalCcontent{
	display: flex;
    flex-direction: column;
	height: 100%;
    width: 100%;
}

.vjCalImageDisplayForm .vjCalImage{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.vjCalImageFullDisplayForm .vjCalImage {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
	flex: 1;
	max-height: 100%;
}

.vjCalImageDisplayForm .vjCalImageContent {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.vjCalImageFullDisplayForm .vjCalImageContent {
	min-width: 280px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    height: 100%;
	background: #d5d5d5;
}

.vjCalImageDisplayForm .vjCalImageContent img {
    display: flex;
    width: 100%;
    object-fit: contain;
    max-height: 100%;
	cursor: pointer;
}

.vjCalImageFullDisplayForm .vjCalImageContent img {
    display: flex;
    max-width: 100%;
    height: auto;
    max-height: calc(100% - 40px);;
    object-fit: scale-down;
}

.vjCalDefaultBox .vjCalCarousel {
	display: flex;
	visibility: hidden;
    justify-content: center;
	padding:5px;
	width: 100%;
	height: 0;
	max-height: 100px;
	position: relative;
	align-items: center;
	white-space: nowrap;
}


.vjCalDefaultBox .vjCalCarousel .vjCalArrowContainer{
	height: 100%;
    display: flex;
    align-items: center;
	justify-content: center;
    position: absolute;
	align-self: center;
    background: linear-gradient(90deg, #6fffff, #6b6b6bab);
	z-index: 2;
    width: 10%;
    min-width: 44px;
	max-width: 62px;
	cursor: pointer;
}

.vjCalDefaultBox .vjCalCarousel .vjCalArrowContainer:nth-child(1){
    left: 0px;
    background: linear-gradient(90deg, #6fffff, #6b6b6bab);
}

.vjCalDefaultBox .vjCalCarousel .vjCalArrowContainer:nth-child(2){
    right: 0px;
	background: linear-gradient(272deg, #6fffff, #6b6b6bab);
}

.vjCalDefaultBox .vjCalCarousel .vjCalLeft{
	width: 16px;
	height: 16px;
	position: relative;
    left: 6px;
    margin: 10px;
}

.vjCalDefaultBox .vjCalCarousel .vjCalRight{
	width: 16px;
	height: 16px;
    position: relative;
    left: -6px;
    margin: 10px;
}

.vjCalDefaultBox .vjCalCarousel .vjCalCarouselMiddle{
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
	padding: 4px 0;
}

.vjCalDefaultBox .vjCalCarousel .vjCalCarouselMiddle .vjCalImgList{
	display: flex;
    width: 100%;
}

.vjCalDefaultBox .vjCalCarousel .thePImage{
	display: flex;
    flex-direction: column;
    height: 100%;
	padding: 2px 0px;
	margin: 0 2px;
    background: #efefef;
	border: 1px solid #9c9c9c;
    border-radius: 10px;
    overflow: hidden;	
	cursor: pointer;
}

.vjCalDefaultBox .vjCalCarousel .thePImage .container{
    display: flex;
    height: 100%;
	padding: 0 2px;
}
	
.vjCalDefaultBox .vjCalCarousel .thePImage img{
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    max-height: 100%;
}

/* Arrows */
.vjCalArrow {
  border: solid white;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 3px;
}

.vjCalRight {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.vjCalLeft {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

/* Media */
@media (max-width:766px) {
	
	.datePickerBox .boxHeader {
		display: flex;
	}

	.datePickerBox .boxSection2 {		
		display: none;
	}
	
}

@media (min-width:767px) {
	
	.datePickerBox .boxHeader {
		display: none ;
	}

	.datePickerBox .boxSection1 {		
		display: flex !important;
	}

	.datePickerBox .boxSection2 {		
		display: flex !important;
	}
	
}