/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}


/**Calendar-UI-CSS-Design***/


.header-infopart{width:100%; float: left; margin: 0px; padding: 0px;}

.event-addbnt a {
    background-color: #eb0e6d;
    color: #fff;
    padding: 8px 10px;
    font-weight: 600;
    border-radius: 4px;
    display: inline-block;
}

.event-addbnt {
    width: 160px;
    float: left;
}
.select-fillter {
    display: inline-block;
    width: 260px;
}

select.form-select.select-infobell {
    display: inline-block;
    width: 170px;
}

.select-fillter label {
    font-weight: 600;
    color: #000;
}
.add-eventinfo {
    float: left;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.filter-infobel {
    display: inline-block;
}

.event-point-info {
    display: inline;
}

.event-and-roster {
    display: inline-block;
}

.event-and-roster ul {
    margin: 0px;
    padding: 0px;
}
.event-and-roster ul li {
    list-style: none;
    display: inline;
    padding: 0 5px 0 5px;
    color: #000;
    font-size: 16px;
}

span.color-dot {
    background-color: #D97B0D;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

span.color-dot-roster {
    background-color: #B35BE9;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}
.month-select {
    /* float: left; */
    margin: 0px;
    padding: 0px;
    display: inline-block;
}
.month-select label {
    color: #000;
    font-weight: 600;
    margin: 0 10px 0px 0px;
}


select.form-select.select-month-infobell {
    display: inline-block;
    width: 130px;
}

.month-listinfo {
    display: inline-block;
    width: 220px;
}

.this-month-and-year {
    width: 150px;
   display: inline-block;
}

ul.short-datainfo {
    margin: 0px;
    padding: 0px;
}

ul.short-datainfo li {
    list-style: none;
    display: inline-block;
    margin: 0 5px 0 5px;
}

ul.short-datainfo li a {
    border: solid 1px #ccc;
    color: #717070;
    padding: 12px 20px;
    border-radius: 4px;
}

a.active-result {
    background-color: #4D2A7E;
    color: #fff !important;
  border-color: #4d2a7e !important;
}

.hr {
    background-color: #e9e9e9;
    height: 1px;
    width: 100%;
    margin: 20px 0 20px 0;
}



.icon-search {
    position: absolute;
    top: 8px;
    left: 14px;
}

input.searchbarfild {
    width: 100%;
    height: 44px;
    border: solid 1px #ccc;
    padding: 0 0 0 50px;
}

.all-empl-title {
    text-align: left;
    width: 100%;
    padding: 10px 0 0 0;
}

.all-empl-title h3 {
    font-size: 16px;
    margin: 0px;
    font-weight: 600;
}

.employee-info img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0px 5px 0 0px;
}
.employee-info {
    color: #000;
    font-size: 15px;
    padding: 0 0px 0 0px;
}

th.week-title {
    color: #000 !important;
}
.event-list {
    background-color: #FEF4EA;
    padding: 7px 12px;
    border-left: solid 3px #da8016;
	margin: 0 0 5px 0;
}
.event-list p {
    color: #d97b0d;
    font-weight: 500;
    font-size: 16px;
    margin: 0px;
}
.event-list span {
    color: #181818;
    font-weight: 200;
}


.roster-list {
    background-color: #F6ECFC;
    padding: 7px 12px;
    border-left: solid 3px #B35BE9;
	margin: 5px 0 0px 0;
}
.roster-list p {
    color: #181818;
    font-weight: 500;
    font-size: 16px;
    margin: 0px;
}
.roster-list span {
    color: #181818;
    font-weight: 200;
}


.all-list-views {
    float: right;
}
a.viewmore-list {
    background-color: #eb0e6d;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    padding: 3px 0px 3px 4px;
}
.roster-info table tr td {
    padding: 10px 10px;
}

/***Pupup-ui-design***/

  /* Open Button */
    .open-popup-btn{
        padding:12px 20px;
        background:#4f46e5;
        color:#fff;
        border:none;
        border-radius:8px;
        font-size:16px;
        cursor:pointer;
    }

    /* Popup Background */
    .popup-overlay{
        position:fixed;
        top:0; left:0;
        width:100%; height:100%;
        background:rgba(0,0,0,0.5);
        display:none;
        justify-content:center;
        align-items:center;
        z-index:999;
    }

    /* Popup Box */
    .popup-box{
        background:#fff;
        width:90%;
        max-width:380px;
        padding:20px;
        border-radius:12px;
        animation:popupShow 0.3s ease;
    }

    @keyframes popupShow{
        from{ transform:scale(0.8); opacity:0; }
        to{ transform:scale(1); opacity:1; }
    }

    /* Close Button */
    .close-btn{
        background:#e11d48;
        color:#fff;
        padding:8px 14px;
        border:none;
        border-radius:6px;
        cursor:pointer;
        margin-top:12px;
    }
	
	
	



	
	@media only screen and (min-width : 577px) and (max-width : 767px) {
	
.event-addbnt {
 width: 100px;
}

.select-fillter {
    display: inline-block;
    width: 120px;
}	

.auto-text-setinfo {
    text-align: left !important;
    padding: 10px 0 0 15px;
}

.event-addbnt a {
 padding: 8px 4px;
font-size: 12px;
}
.event-and-roster ul li {
 padding: 0 5px 0 0px;
 font-size: 14px;
}	
.month-listinfo {
 width: 155px;
}
.month-select label {
    margin: 0 2px 0px 0px;
}

select.form-select.select-month-infobell {
    width: 105px;
}
.month-listinfo .filter-btn-button {
    font-size: 15px!important;
    padding: 7px 21px!important;

}
	.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}

	}
	
	
	
	
@media only screen and (min-width : 768px) and (max-width : 991px) {
	
.event-addbnt {
 width: 130px;
}

.select-fillter {
    display: inline-block;
    width: 200px;
}	

.auto-text-setinfo {
    text-align: left !important;
    padding: 10px 0 0 15px;
}

	.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}
	
	
	}
	
	
	@media only screen and (min-width : 992px) and (max-width : 1199px) {
	
.event-addbnt {
 width: 130px;
}

.select-fillter {
    display: inline-block;
    width: 200px;
}	

.auto-text-setinfo {
    text-align: left !important;
    padding: 10px 0 0 15px;
}
	
		.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}


	
	}
	
	
		@media only screen and (min-width : 1200px) and (max-width : 1399px) {
	
    .event-addbnt {
        width: 110px;
    }

.select-fillter {
    display: inline-block;
    width: 120px;
}	

    .auto-text-setinfo {
        text-align: left !important;
        padding: 0px 0 0 15px;
    }

.month-select label {
    display: none;
}	
    .month-listinfo {
        width: 105px;
    }

.event-addbnt a {
padding: 8px 7px;
 font-size: 13px;
}
	
.event-and-roster ul li {
padding: 0 5px 0 0px;
font-size: 13px;
}
select.form-select.select-month-infobell {
 width: 100px;
}

.month-listinfo .filter-btn-button {
    font-size: 14px!important;
    padding: 8px 10px!important;
}

	.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}
	}
	
	
	
	
	
@media only screen and (min-width : 1399px) and (max-width : 1400px) {

.event-addbnt {
    width: 130px;
}
	
	.auto-text-setinfo {
    text-align: left !important;
    padding: 10px 0 0 15px;
}
	
		.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}
	
	
	}
	
		
@media only screen and (min-width : 1401px) and (max-width : 1700px) {

.select-fillter {
    display: inline-block;
    width: 120px;
}

.event-addbnt {
    width: 120px;
}
	
    .auto-text-setinfo {
        text-align: left !important;
        padding: 0px 0 0 14px;
    }
.event-addbnt a {
 font-size: 13px;
}
label.mobile-desktop {
    display: none;
}

.month-listinfo {
    width: 150px;
}
	
.event-and-roster ul li {
 font-size: 11px;
}

	.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}
	}
	
	
			
@media only screen and (min-width : 1701px) and (max-width : 1800px) {

.select-fillter {
    display: inline-block;
    width: 160px;
}

	.table-box {
    overflow: auto;
    width: 100%;
    box-shadow: 0px 0px 7px 9px #dddddd4d!important;
    border-left: solid 1px #d9d9d9!important;
}
	
	table.table.table-bordered tr th:first-child {
    border-left: none;
}
tr.emp-calendar-row td:first-child {
    border-left: none;
}

}