@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
body{
margin: 0;
padding: 0;
width: 100%;
font-family:Raleway;
color: black;
font-size: 13px;
}
.page-header{
padding-bottom: 0px;
margin: 0px 0 0;
border-bottom: 1px solid #e9e9e9;
position: relative;
z-index: 10;
}
.login-page{
 background:#ffffff;
height: 100vh;
}
.login-page img{
 width: 200px
}
.login-page label{
color:#21242b;
 background: white;
 text-align:left
}
.nice-login-pass{
font-size: 1.1em
}
.login-page input[type=submit] {
padding: 15px 20px
}
.wrapper-nice-login.login-form{
 border: none !important
}
.login-page .js-form-item-name{}




ul.nice-menu a {
  padding: 0.3em 10px 0.3em 10px !important;
}
ul.nice-menu-down {
float: left;
width: 100%;
padding-left: 15px;
}
.logo{
width: 18%;
float: left;
position: fixed;
height: 80px;
background: white;
  }
#block-management-system-sitebranding {
background: #21242b;
width: 90%;
margin: 10px auto;
border-radius:10px;
padding: 0 0 10px 0
}
.anonymous-site-branding{
 position:absolute;
 left:50%;
 top: 120px;
 display:flex;
 align-items: center;
 flex-direction: column;
}
.anonymous-site-branding img{
width: 50px;
}
.logo a {font-size: 13px;
color: #ffffff;
display: flex;
justify-content: center;}
.logo img {
width: 20%;
height: 60px;
object-position: center;
object-fit:cover;
border-radius: 30px
}
.menu-wrapper{
width: 82%;
background: #ffffff;
height: 60px;
float: right;
position:fixed;
margin: 0 18%;
z-index: 2
}
.menu{
width: 100%;
float: right;
margin: 10px 0;
background-color: #21242b;
height: 50px;
border-radius: 10px;
}
.menu-container{
width: 75%;
float: left;
}
#block-management-system-notificationwidgetblock{
 padding-right:5px;
}
.login-menu .views-field.views-field-nothing img{
 background: white;
 border-radius: 50px;
 margin-right: 10px;
}
.login-menu{
width: 12%;
height: 50px;
list-style:none;
float: right;
}
.login-menu li{
list-style:none
}
.login-menu {
 color: #00ff16;
 height: 50px;
 font-size: 14px;
 padding-top: 2px;
 display: inline-flex;
 align-items: center;
 align-content: center;
 flex-direction: row;
 position:relative;
}
.login-user, #block-management-system-useraccountmenu a{color: #00ff16;height: 50px;font-size: 14px;}
.user-nav{
 display: inline-flex;
 align-content: center;
 align-items: center;
}
.user-nav-img{
 margin-right: 10px;
 background: white;
 border-radius: 50px;
}
#block-management-system-useraccountmenu{
 position: absolute;
 right: 30px;
 top: 0px;
 font-size: 16px;
}
ul.nice-menu li {
background-color: #21242b00;
display: flex;
align-items: center;
}
ul.nice-menu-down ul {
top: 46px;
padding: 0 20px;
}
.menuparent ul li {
background: #21242b;
left: -20px;
width: 180px;
 
}
.menu-container li a, .menu-container li span {
color: white;
height: 42px;
display: flex;
align-items: center;
align-content: center;
width: fit-content;
padding: 0 20px
}
.menu-container li a:hover {
background: #4a0202;
text-decoration: none;
}
ul.nice-menu-down li.menuparent {
background-position: 100%;
background: none;
}
li.menuparent ul li{
 padding: 0 ;
}
li.menuparent ul li a{
 padding: 0 0 0 20px;
} 
.menu .svg-inline--fa{
position: relative;
top: -2px;
margin-right: 2px
}
.tabs-menu ul{
display: inline-flex;
margin: 0;
top: -8px;
padding: 0;
}
.tabs-menu li {
list-style: none;
}
.tabs-menu li a{
padding: 10px;
border: 1px solid #e9e9e9;
border-radius: 10px;
margin-right: 5px;
box-shadow: #0000002b 0px 1px 8px;
}
.tabs-menu li a:hover{
background: #dcdcdc;
color: red;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.bef-exposed-form{
margin: 0;
padding: 0;
display: flex;
}
.views-exposed-form.bef-exposed-form label{
display: flex;
 background: white;
 color: black;
width: fit-content
}
.views-exposed-form.bef-exposed-form  .js-form-type-textfield{
  width:300px 
}
.views-exposed-form.bef-exposed-form  .js-form-type-date{
 margin-top: 20px
}
.views-exposed-form.bef-exposed-form  .form-text{
 width: 100%;
 border-radius: 5px;
}
.menu .is-active  {
background: #fff;
color: red;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.user-container {
width: 20%;
position: absolute;
right: 0px;
font-size: 13px;
display: flex;
align-content: center;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
}
#block-management-system-tabs{
height: 31px;
border-bottom: 1px solid #e9e9e9;
border-radius: 10px;
}
.primary-tabs ul{display: 
flex;position: absolute;
left: -40px;
}
.primary-tabs ul li {
list-style: none;
display: flex;
align-items: center;
}
.primary-tabs ul li a{
list-style: none;
padding: 5px 20px 5px 20px;
}
.primary-tabs ul li .is-active{
background: #f5f5f5;
}
.primary-tabs ul li a.is-active {
border-radius: 10px;
border-right: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
}
.main, .form-main{
width: 100%;
margin: 50px 0;
}
.content{
width: 82%;
  margin: 10px auto;
  float: right;
  overflow-x: hidden;
     height: 100%;

}
.left--sidebar{
float: left;
background: #f9f9f9;;
width: 17%;
color: black;
font-size: 14px;
position: fixed;
margin: 50px 0 0 0;
height: 100vh;
border-right: 1px solid #e9e9e9;
overflow-y:scroll;-ms-overflow-style: none;  /* IE and Edge */scrollbar-width:none;  /* Firefox */}
.left--sidebar::-webkit-scrollbar {
  display: none;
 padding: 0 0 60px 0;
}
#block-management-system-views-block-administration-sidebar-menu{
width: 80%;
margin: 10px auto
}
#block-management-system-views-block-administration-sidebar-menu h2{
font-size: 18px
}
.left--sidebar li  {
margin: 7px 0px;
list-style: none
}
.left--sidebar li a {
color: red;
text-decoration: none;
}
.left--sidebar h2{
  margin: 5px ;
}
.whos-online-container{
 overflow: scroll
}
.navigation-sidebar ul, #block-management-system-views-block-user-page-block-2{
margin: 0;
padding: 0 0 0 20px;
}
#block-management-system-views-block-user-page-block-2{
margin-top: 20px;
padding: 10px 0 0 10px;
background: #d3d3d30a;
}
#block-management-system-pagetitle{
width: 100%;
padding: 10px 20px;
color: grey;
}
.page-buttons{
width: 50%;
display: flex;
justify-content: flex-end;
}
button, .submit-button, .button{
appearance: button;
background-color: #21242b;
border: 0 solid #e5e7eb;
border-radius: 10px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: flex;
margin: 0;
outline: 2px solid transparent;
padding: 0.5rem 1.5rem;
text-align: center;
text-transform: none;
transition: all .1s cubic-bezier(.4, 0, .2, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
box-shadow: #0000002b 0px 1px 8px;
margin:0 5px;
}
.onpage-btn{
position: absolute;
left: 85%;
height: 40px;
display: flex;
align-content: center;
align-items: center;
}
.form-actions{
display: flex
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
input[type=submit], .button--danger{
padding: 10px;
margin: 3px 10px ;
}
.form-action{
width: fit-content;
margin: 10px 0
}
.button:active, .submit-button:active {
background-color: #f3f4f6;
box-shadow: #0000002b 0px 1px 8px;;
transform: translateY(0.125rem);
}
.button:focus, .submit-button:focus {
box-shadow: #0000002b 0px 1px 8px;;
}
a{
text-decoration:none;
color: #ff0002;
}
a:hover{
text-decoration:none;
color: #21242b;
}
h1,h2, h3, h4, h5, h6{
font-weight: 500;
margin: 0;
}
h1{
font-size: 2.2rem;
}
h2{
font-size: 2.0rem;    
}
h3{
 font-size: 1.4rem;  
}
h4{
font-size: 1.2rem;    
}
h5{
 font-size: 1rem;   
}
h6{
 font-size: 0.6rem;   
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border-spacing: 0;
border-collapse: separate;
border-radius: 10px;
border: 1px solid #e9e9e9;
}
td, th {
text-align: center;
font-size: 14px;
padding: 8px 0 8px 0;
}
th{
background: #21242b;
color: #ffffff;
}


.profile-wrapper {
  max-width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.profile-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

section h3 {
  margin-top: 0.4rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}


.ief-entity-operations{
display: flex
}
.minified-table td{
margin:0;
padding: 0;
}
.minified-table .button, .minified-btn{
margin: 2px;
padding: 5px 10px;
text-align: center;
width: fit-content;
display: inline-flex;
}
.minified-table p{
margin:0;
padding: 0;
}
 sm-table td{
 padding: 0;
 margin: 0;
}
.sm-table .js-form-type-textfield, .sm-table .js-form-type-number {
margin: 0;
padding: 0 ;
box-shadow: 0px 0px 0px;
}
 .sm-table .form-number, .sm-table .form-text{
border-radius: 0px;
border: 1px solid #8080804f;
}
 .sm-table .form-number{
 padding: 0 5px;
 width: 90px
}
.sm-table .form-text{

}
.yet-to-arrive, 
.departed, 
.occupied{
color: white;
height: 33px;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
}
.yet-to-arrive{
background: red;
}
.departed{
background: lightblue;
}
.occupied{
background: green;
}
legend{
display: none;
}
#block-management-system-content {
width: 100%;
margin: auto;
}
 #block-management-system-content::after{
 content: "";
display: table;
clear: both;
}
form {
padding: 10px;
}
.editablefields-form{
 width: 100%;
 display: inline-flex;
}
.change-state #edit-moderation-state-0-current{
 display: inline-flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
.change-state .js-form-item-moderation-state-0-state{
 display: inline-flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
}
.change-state  #edit-moderation-state-0-current label{
 padding: 0;
 width: 100px;
 margin: 0;
 }
.change-state .js-form-item-moderation-state-0-state label{
 padding: 0;
 padding: 0 5px;
 margin: 0;
 }
.change-state .form-select{
 margin: 0;
 padding: 10px;
 width: 110px
}
.change-state input[type=submit]{
height: 40px;
margin-top: 25px;
}
.payrollform .js-form-type-select, 
.payrolleditform .js-form-item-month,
.payrolleditform .js-form-type-textfield{
background: #ffffff;
color: black;
border-radius: 10px;
margin: 0 10px 10px 0;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: none;
}
#node-maintenance-form .field--widget-image-image,
#node-maintenance-arusha-form .field--widget-image-image,
#node-maintenance-stone-town-form .field--widget-image-image{
 margin-bottom: 10px
}
.payrollform .form-select,
.payrolleditform .form-text{
text-align: center;
box-shadow: 0px 0px 0px;
border: 1px solid #8080804f;
border-radius: 0;
}
#user-register-form .form-item-mail,
#user-register-form .form-item-name{
 box-shadow: none;
 width: 46%;
 float:inline-start;
 display: flex;
 flex-direction: column;
 align-items: center;
 color: black;
 background: white
}
#edit-mail, #edit-name,
#edit-pass-pass1, #edit-pass-pass2{
width: 90%;
border-radius: 10px;
border: 1px solid #e9e9e9;
box-shadow: #0000002b 0px 1px 8px;;
margin-bottom: 5px
}
#edit-mail--description,
#edit-name--description, 
.password-suggestions{
 font-size: 11px;
 width: 70%
}
#edit-pass{
 width: 100%;
 display:inline-block;
}
.form-item-pass-pass1,
.form-item-pass-pass2{
 display: flex;
 flex-direction: column;
 width: 48%;
 float: left;
 text-align:center
}
.password-strength__meter{
 width: 80%;
 background: #89ff00;
}
.password-strength__indicator {
 background-color: red;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
#edit-pass--description{
 display: block;
}
#edit-status--wrapper{
 margin-bottom: 20px;
 box-shadow: #0000002b 0px 1px 8px;;
padding: 10px 20px;
 border-radius: 10px
}
#edit-status{
 display: flex;
 justify-content: space-evenly;
}
#edit-roles{
box-shadow: #0000002b 0px 1px 8px;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
#user-register-form  .js-form-type-checkbox{
box-shadow: none;
border-radius: 10px;
padding: 10px 10px 5px 15px;
display: flex;
align-items: flex-start;
flex-direction: row;
}
form label{
font-size:13px;
background: #21242b;
padding: 10px 20px;
border-radius: 10px 0 0 10px;
color: white;
}
.hidden, 
.field_gross_incom{
display: none;
}
.form-container{
  display: flex;
  margin: auto;
}
#volunteer-names .form-wrapper,
#volunteer-personal-details .form-wrapper
{
width: 30%
}
#edit-field-volunteer-widget-0-inline-entity-form-group-intolerence-to {box-shadow: #0000002b 0px 1px 8px;border-radius: 10px;display: inline-flex;height: 50px;align-items: center;align-content: center;margin-top: 10px;}
#edit-field-volunteer-widget-0-inline-entity-form-group-intolerence-to summary {font-size: 14px;color: white;background: #21242b; padding: 0 10px;float: left;height: 50px;border-radius: 10px 0 0 10px;display: flex;flex-direction: row;align-items: center;align-content: center;justify-content: center;}
#edit-field-volunteer-widget-0-inline-entity-form-group-intolerence-to .form-details-wrapper{width: 100%;float:right;height: 50px;}
#edit-field-volunteer-widget-0-inline-entity-form-group-intolerence-to .form-wrapper{width: 100% !important;height: 50px;}
#edit-field-volunteer-0-inline-entity-form-field-remarks-for-abroad-medical-wrapper{
display: none;
margin-top:10px
}
#edit-field-volunteer-0-inline-entity-form-field-remarks-for-abroad-medical-wrapper label{
 background: white;
 color: #20232a;
 margin: 0;
 padding: 0;
}
#edit-field-travel-buddy-wrapper{
 width: 600px;
}
.field--type-file{
 margin-top: 20px;
 width: 57%;
}
.field--type-file label{
margin: 0;
padding-top: 15px
}
.field--type-file summary{
color: white;
background: #21242b; 
display: none;
}
.field--type-file  .form-details-wrapper{
width: 100%;
}
.form-managed-file{
dislay: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: center;
margin-left: 20px;
}
#edit-field-volunteer-0-inline-entity-form-field-intolerence-wrapper label{
color:black;
 background: white;
 margin: 0;
 padding:0
}
#edit-field-volunteer-0-inline-entity-form-field-intolerence-wrapper .js-form-type-checkbox {
  box-shadow: none;
  border-radius: 10px;
  padding: 0;
  position: relative;
  bottom: 0;
  display: block;
  float: left;
 margin: 15px 11px;
}
#volunteer-intolerance{
 border: 1px solid lightgrey;
 padding: 10px;
 border-radius: 10px;
 width: fit-content;
 margin: unset;
}
#edit-field-rooms-wrapper,
#edit-field-beds-wrapper{
 display: none;   
}
#edit-field-hostel-wrapper.form-wrapper{
width: 40%
}
.form-grid{
display: flex;
margin: auto;
border: 1px solid #e9e9e9;
flex-direction: row;
justify-content: space-around;
margin: 2px 0;
}
.inline-form-container{
padding: 10px;
box-shadow: #0000002b 0px 1px 8px;;
border-radius: 10px 
}
.container-inline{display: inline-flex;flex-direction: row;}
.field-group-container{
 background: #dee8ff;
margin: 10px auto;
padding: 5px 20px;
}
#edit-salary,
.form-item-salary{
 width: 70px; 
}
.payroll-btn, 
.payroll-delete-btn{
 position: fixed;
 bottom: 5px;
 right: 30px;
 z-index: 3;
}
.payroll-btn{
right: 30px;
}
.payroll-delete-btn{
right: 120px
}
.js-form-type-textfield,
.js-form-type-select,
.js-form-type-tel,
.js-form-type-email,
.js-form-type-number,
.js-form-type-entity-autocomplete,
.form-item-manufacture-date,
.form-item-purchase-date{
color: white;
border-radius: 10px;
width: 100%;
margin: 20px 10px 10px 0;
}
.form-item-field-assigned-to {
display: flex;
align-content: center;
align-items: center;
}
.field--type-datetime fieldset{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
 border: none;
}
.field--type-datetime{
color: white;
border-radius: 10px;
margin: 10px 10px 10px 0;
 display: flex;

}
.field--type-datetime h4{
 font-size: 13px;
 padding: 0 5px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 font-weight: bold;
 background: #21242b;
 border-radius: 10px 0 0 10px;
 height: 40px;
 margin-top: 10px;
}
.js-form-type-checkbox{
box-shadow: #0000002b 0px 1px 8px;
 border-radius: 10px;
 padding: 10px 10px 5px 15px;
 position: relative;
 bottom: 18px;
 display: flex;
 align-items: flex-start;
 flex-direction: row;
}
.field--widget-image-image, 
.field--widget-file-generic{
border-radius: 10px;
  border: 1px solid lightgray;
  background: white;
 border-radius: 10px;
}
.field--widget-image-image [role=button], 
.field--widget-file-generic [role=button]{
 }
.image-widget{
 display: flex;
 align-content: center;
 align-items: center;
}
#edit-field-arrival-wrapper{
}
.field--type-datetime legend{
font-size: 13px;
border: none;
font-weight: bold;
color: white;
align-items: center;
background: #21242b;
display: flex;
float: left;
height: 40px;
width: 100px;
justify-content: center;
border-radius: 10px 0 0 10px;
}
#edit-field-arrival-wrapper #edit-field-arrival-0-value,
#edit-field-departure-wrapper #edit-field-departure-0-value,
.field--name-field-departure div,
.field--name-field-arrival div{
  flex-direction: row;
  flex-wrap: nowrap;
  width: 300px;
  display: inline-flex;
}
#edit-field-arrival-0-value-time,
#edit-field-departure-0-value-time,
.field--name-field-depart,
.field--name-field-arri{
position: relative;
cursor: text;
font-size: 13px;
line-height: 20px;
padding: 0 16px;
height: 40px;
background-color: #fff;
border-radius: 0 10px 10px 0;
color: rgb(35, 38, 59);
overflow: hidden;
transition: all 100ms ease-in-out;
border: none;
width: 70%;
box-shadow: #0000002b 0px 1px 8px;
}
.field--name-field-departure div,
.field--name-field-arrival div {
}
.js-form-item-address{
   margin: 20px 0;
}
.form-text, .form-tel, 
.form-email, #edit-field-salary-0-value,  .form-select,
#edit-field-account-number-0-value,
.form-number, .form-date{
position: relative;
cursor: text;
font-size: 13px;
line-height: 20px;
padding: 0 16px;
height: 40px;
background-color: #fff;
border-radius: 0 10px 10px 0;
color: rgb(35, 38, 59);
overflow: hidden;
transition: all 100ms ease-in-out;
border: none;
width: 60%;
box-shadow: #0000002b 0px 1px 8px;
}
#edit-title-0-value{
width: 300px;
}
#edit-field-arrival-0-value .form-date,
#edit-field-departure-0-value .form-date,
#edit-field-arrival-0-value .form-time,
#edit-field-departure-0-value .form-time,
#edit-field-extra-tour-0-inline-entity-form-field-arrival-0-value .form-date,
#edit-field-extra-tour-0-inline-entity-form-field-departure-0-value .form-date,
#edit-field-extra-tour-0-inline-entity-form-field-arrival-0-value .form-time,
#edit-field-extra-tour-0-inline-entity-form-field-departure-0-value .form-time{
border-radius: 0;
width: 100%;
}
#edit-field-arrival-0-value .form-date,
#edit-field-departure-0-value .form-date,
#edit-field-extra-tour-0-inline-entity-form-field-arrival-0-value .form-date
#edit-field-extra-tour-0-inline-entity-form-field-departure-0-value .form-date {
border-radius: 0 0 0 10px ;
}

#edit-field-arrival-0-value .form-time,
#edit-field-departure-0-value .form-time,
#edit-field-extra-tour-0-inline-entity-form-field-arrival-0-value .form-time,
#edit-field-extra-tour-0-inline-entity-form-field-departure-0-value .form-time{
border-radius: 0 10px 10px 0;
height: 40px;
}
.form-date{
border-radius: 0 10px 10px 0;
height: 40px;
margin-op: 10px;
width: 100%;
}
#edit-field-program-wrapper, #edit-field-acc-project-wrapper {
  display: inline-flex;
}
#bank-container, 
#referee-container{
display: none;
}
#edit-field-date-of-employment-wrapper h4,
#edit-field-date-of-birth-wrapper h4{
  font-size: 13px;
  font-weight:700;
  background: #21242b;
  padding: 10px 10px;
  border-radius: 10px 0 0 10px;
 }
.form-textarea{
width: 80%;
}
#edit-body-0-format,
#edit-field-volunteer-0-inline-entity-form-field-remarks-for-abroad-medical-0-format, .field--name-body .js-filter-wrapper{
display: none
}
.js-form-type-managed-file{
  display: flex;
  flex-direction: row;
  align-content: left;
}
.js-form-type-managed-file .description{
font-size: 12px;
}
.field--name-field-is-the-employee-tanzanian{
position: relative;
top: 30px;
left: 30px;
}
.system-container{
 box-shadow: #0000002b 0px 1px 8px;;
padding: 20px 10px;
overflow: hidden;
margin-bottom: 10px;
}
.details-container::after{
display: flex;
 content: "";
display: table;
clear: both;
}
.photo-container {
width: 24.5%;
text-align:center;
height: fit-content;
float: left
}
.photo-container img{
  border-radius: 50px;
}
.view-details-container{
  width: 74%;
 float: right
}
.system-row{
  display:flex;
  border-bottom:1px solid #e9e9e9;
  padding: 5px 0;
}
.system-row-title{
font-weight: 700;
padding: 0 10px 0 20px;
}
.attachments-container{
border: 1px solid #e9e9e9;
margin: 20px 0 0 0;
padding: 20px 0
}
.view-employee-bank{
width: 25%;
float: left;
}
.view-employment-details, .referee-table{
width: 74%;
 float:right; 
}
.pager__items.js-pager__items.calendar-view-pager {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.pager__next a,
.pager__previous a{
background: #21242b;
padding: 10px 20px;
border-radius: 10px;
color: white;
text-decoration: none;
font-weight: 600;
}
.pager__next a:hover,
.pager__previous a:hover{
background: #000000;
color: white
}
.pager__current {
padding: 0 20px;
border-radius: 10px;
font-size: 16px;
font-weight: 700
}
.ief-form .js-form-submit{
width: fit-content;
display: inline-flex;
flex-direction: row;
}

label[for=comment]{
background: #fcf7ec;
padding: 10px;
position: relative;
top: -14px;
left: 4px
}
textarea{
 box-shadow: #0000002b 0px 1px 8px;; 
}
.submit-button{
float: right;
margin: 0 140px 20px 0;
}
.payroll-submit{
 float: right;   
 margin: 0;
}
#calendar {
width: 100%;
margin: 0 auto;
}
.response {
height: 40px;
}
.success {
background: #cdf3cd;
padding: 10px 60px;
border:1px solid #e9e9e9;
display: inline-block;
}
/*
.fc .fc-button-group>* , .fc-today-button{
 display: flex;
    align-content: center;
    align-items: center
}
.fc-event, .fc-event-dot {
background-color: #091284;
}
*/
.display-wrapper #block-management-system-transfertitle{
padding: 10px 0 0 20px;
}
.ds-2col-stacked-fluid > .group-right {float: right !important;width: 30% !important;border: 1px solid #e9e9e9;padding: 0;margin: 0 0 5px 0;border-radius: 10px;}
.ds-2col-stacked-fluid > .group-left {
float: left !important;
width: 70% !important;
padding: 0 5px 0 0;
margin: 0 0 5px 0;
}
.ds-2col-stacked-fluid > .group-footer {
clear: both;
border: 1px solid #e9e9e9;
margin: 0 0 10px 0;
padding: 10px;
border-radius: 10px;
}
.ds-2col-stacked-fluid > .group-footer h2 {
font-size: 20px
}
.ds-2col-stacked-fluid > .group-right h2{
font-size: 14px;
text-align: center
}
.ds-2col-stacked-fluid > .group-right img{
width: 30px;
height: 30px
}
.field--name-comment-body .form-wrapper{
display: none;
}
.js-comment{
 position: relative;
}
.mark,mark{
background: red;
color: white;
padding: 10px 6px;
border-radius: 50px;
position: absolute;
left: 20%;
top: 35px;
font-size: 12px;
text-transform: capitalize;
box-shadow: #565656a1 0px 1px 3px;
font-weight: 600;
text-shadow: 0px 1px 2px #585858;
}
.comment-wrap{
 box-shadow: #0000002b 0px 1px 8px;
 padding: 5px 10px;
 margin: 10px;
 position: relative;
 border-radius: 10px;
 display: flex;
}
.comment-header{
width: 25%;
}
.author-details{
display: inline-flex;
align-items: center;
justify-content: center;
}
.author-details a{
padding-left: 5px
}
.comment-wrap img{
width: 30px;
height: 30px;
}
.comment .status{
top: 10px;
 left:0;
}
.comment-body{
padding: 10px;
border: 1px solid #d3d3d366;
width: 75%;
border-radius: 10px;
}
.comment-form-wrap{
 position: fixed;
 background: #ffffff;
 top: 200px;
 bottom: 0;
 width: 60%;
 height: 250px;
 border-radius: 10px;
 box-shadow: #0000007d 0px 1px 8px;
 display: none;
}
.add-comment-title{
 padding: 5px 20px;
 background: #21242b;
 color: white;
 border-radius: 10px  10px 0 0 ;
 display: flex;
justify-content: space-between;
}
.comment-task-correspondence-form{
 margin: 0;
}
#comment-button{
 position: fixed;
 bottom: 0;
 left: 80%;
 height: 40px;
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
}
.stock-container {
border: 1px solid #e9e9e9;
padding: 10px 20px;
margin: 0 0 20px 0;
border-radius: 10px;
}
.stock-container summary{
font-size: 20px;
font-weight: 600;
}
.form-content{
width: 80%;
margin: 20px auto;
padding: 0 0px 0px 0;
background: white;
}
.form-page-header{
background: #482307;
color: #f9f2e3;
height: 50px;
padding: 0 30px
}
.form-buttons{
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.tabs {
width: 100%;
margin: 0 0 19px 0;
border-radius: 10px;
border-bottom: 1px solid #e9e9e9;
}
.tab {
color: #fff;
background-color: black;
border-radius: 5px 5px 0px 0px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.tab:hover {
  background-color: #a5b4fc;
}
.tab.active {
  background-color: #c7d2fe;
}
.login{
width: 100%;
position: fixed;
margin: 100px 0;
}
.login h1{
text-align: center;
}
.login-form{
width: 40%;
margin: auto;
}
.login-wrapper{
margin: 50px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.login-form{
 width: 30%;
 margin: auto;
}

.login-form .js-form-type-textfield,
.nice-login__login__pass{
    margin: 0 5px;
    background: #ffffff;
    padding: 0 0px;
    border-radius: 10px;
    margin: 0px 10px 20px 0;
    width: 100%;
    margin: 20px 0;
    box-shadow: none;
}
 .login-form .form-text {
    position: relative;
    cursor: text;
    font-size: 13px;
    padding: 0;
    height: 40px;
    background-color: white;
    border-radius: 10px;
    color: rgb(35, 38, 59);
    overflow: hidden;
    transition: all 100ms ease-in-out;
    border: none;
    width: 100%;
    box-shadow: #0000002b 0px 1px 8px;
 }
.submit-button.login-btn{
text-align: center;
float: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin: auto;
width: 30%;
}
.payroll-date{
width: 20%;
display: inline-flex;
}
.main-dashboard{
width: 95%;
float: right;
margin: 10px 0;
}
.rightside-bar{float: right;margin: 32px 4px 0 0;width: 20%;display: inline-block;}
.bar-container{border: 1px solid #e9e9e9;
    padding: 10px 0 30px 0;
    text-align: center;
    box-shadow: #0000002b 0px 1px 8px;;
    border-radius: 10px;
}
.item-container{
  font-size: 13px;
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: baseline;
  flex-wrap: nowrap;
  }
.item-title{
font-weight: 600
}
.bar-container a{
  font-size: 13px;
  text-decoration: none;
  color: #f2f2f2;
  background:  #482307;
  padding: 2px 10px 5px;
  position: relative;
  top: 5px;
  border-radius: 10px;
  box-shadow: #0000002b 0px 1px 8px;;
}
.table-action {
  width:10%
  }
#bookings-table th{
background: white;
color:#482307;
width: 13%;
border: 1px solid #e9e9e9;
text-align:left;
padding: 6px 10px
}
.hostel-column{
  background: grey !important;
  color: white !important;
}
.room-column{
  background: #d6d6d6 !important;
  color: black !important;
}
.calendar-column th, .calendar-column{
background: #87766b !important;
color: white !important;
}
.payroll-date-wrapper{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  margin: 5px 0 0 0;
  flex-wrap: nowrap;
  align-content: center;
}
.payroll-date {
  border: 1px solid #e9e9e9;
  box-shadow: #0000002b 0px 1px 8px;;
  padding: 5px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
}
.payroll-page-date{
  display: flex;
  font-size: 30px;
  justify-content: center;
}
.sum-row{
  border: none
}
.sum-row-info{
height: 30px;
font-weight: 600;
font-size: 14px
}
.occupancy-tabs{
display: flex;
border-bottom: 1px solid #e9e9e9
}
.occupancy-tab{
padding: 10px 20px;
border-right: 1px solid #e9e9e9;
font-weight: 600
}
.occupancy-tab:hover{
background: #f8d899;
}
.dashboard-columns{
width: 100%;
overflow:hidden
}
.dashboard-three-graph{
width: 32%;
box-shadow: #0000002b 0px 1px 8px;
border-radius: 10px;
align-content: stretch;
align-items: stretch;
padding: 10px 0 10px 10px;
margin: 0 0.5% 5px 0;
float: left;  
}
.dashboard-three-column{
width: 32%;
box-shadow: #0000002b 0px 1px 8px;
border-radius: 10px;
align-content: stretch;
align-items: stretch;
padding: 10px 0 10px 20px;
margin: 0 0.5% 5px 0;
float: left;
}
.views-menu{
text-align: left;
font-size: 15px;
}
.views-label-view, .views-label{
font-size: 18px;
font-weight: 600;
text-align: center;
color: grey
}
.dashboard-figure{
color: #ffaf00;
    text-shadow: 1px 1px 1px #00000091;
    font-weight: 600;
    font-size: 22px;
}
.dashboard-figure-title{
position: relative;
bottom: 13px;
left: 30%;
}
.pager__items.js-pager__items.calendar-view-pager {
margin: 0;
}
.calendar-view-table caption {
padding: 0;
}
.calendar-view-pager .pager__item a {
width: 50%;
font-size: 10px;
text-align: center;
}
.calendar-view-pager .pager__item > .form-item {
font-size: 14px;
}
.calendar-view-table thead th {
background: #21242b;
}
.calendar-view-table .calendar-view-day__row {
    font-size: 12px;
    border-radius: 10px;
    padding: 5px;
    margin: 0;
    line-height: 1.2;
    background: #f00;
    border: 1px solid #403f3f;
    color: #fff;
    text-decoration: none;
}
.calendar-view-table .calendar-view-day__row > * {
color: #fff;
}
.calendar-view-table .calendar-view-day__row a {
    color: #2e323c;
}
.profile-photo{
 position: absolute
}
.profile-wrapper.personal{
 margin-left: 18%;
 border: 1px solid #e5e4e4;
padding: 20px;
padding: 10px 20px;
}
.profile-wrapper{
 border: 1px solid #e5e4e4;
padding: 10px 20px;
}
.profile-items{
 display: flex;
 padding: 5px 0;
 border-bottom: 1px solid #add8e680;
}
.profile-item{
 margin-right: 20px
}
.views-field-field-referees{
 width: 65%;
 float: right
}
.referees--field_referees{
 display: none;
}
.views-field-field-attachment{
width: 34%;
float: left;
}
.online{color: #61d900;}
.absent{
color:grey;
}
.offline{
color: black;
}
.user-online-status {
 position: relative;
}
.user-online-status h4{
 display: none
}
.user-online-status .status{
 position: absolute;
 top: -27px;
 left: 150px;
 text-transform:capitalize;
}
.user-details-block{
position: relative;
}
.user-profile-wrapper{
 width: 25%;
 text-align: center;
 display: flex;
 box-shadow: #0000002b 0px 1px 8px;
 border-radius: 10px;
}
.user-profile-items{
 margin: 5px;
 padding: 10px 5px; 
}
.user-profile-item{
 border-bottom: 1px solid #e2e2e2;
 padding: 5px 5px; 
}
.user-dashboard{
 width: 74%;
 position:absolute;
 top: 0;
 margin-left:26% 
}
.operations-container{
 width: 49%;
 float: left;
 margin: 10px 0.5% 0 0;
 box-shadow: #0000003d 0px 0px 3px;
 padding: 10px 0;
 border-radius: 10px;
}
.operations-container .views-label{padding: 0 40px;}
.operations-container th{
 color:#21242b;
 font-weight: 500;
 background: #f0f0f099;
 border-bottom: 1px solid #8080806e
}
.operations-container td{
  border-bottom: 1px solid #80808047
}
.operations-container table{
 border: none;
}
.operations-container thead{
 border-radius: 10px
}
.operations-container .more-link, .tasks-container .more-link{
 float: right;
 margin: 10px 15px 5px 0;
}
.operations-container .more-link a, .tasks-container .more-link a{
background:#21242b;
color: white;
 padding: 8px 15px;
 border-radius: 10px;
 font-size: 11px;
}
.tasks-container table{
 border: none;
}
.tasks-container{
border: 1px solid #80808042;
 border-radius: 10px
}
.tasks-container th{
 background: white;
 color: #21242b;
 border-bottom: 1px solid #80808042;
 background: #FAFAFA;
 border-radius: 0;
}
.user-dashboard-container h3{
 padding: 10px 20px 10px 20px;
 border-bottom: 1px solid #80808042;
}
#alert-notify, .alert-notify{
 padding: 10px;
 border-radius: 10px 0;
 width: 100%;
 color: #e10000;
 font-weight: 600
}
#alert-notify td{
 border: 1px solid #8080802e
}
#alert-notify th{
background: #e10000;
 border: 1px solid white
}
.js-pager__items{
 display: flex;
 justify-content: center;
}
.js-pager__items li{
 list-style: none;
 width: 50px;
 text-align: center;
 font-weight: 600;
 font-size: 15px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.js-pager__items li a{
 font-weight: 600;
 font-size: 30px
}
.other-assets-header{
 font-size: 16px;
 font-weight: 600;
 color: red;
 background: #d3d3d31f;
 padding: 5px 20px;
 border: 1px solid #8080804a
}
.other-asset-details{
 display: none
}
#edit-field-beds{
 width: 110px
}
.dashboard-container{
width: 82%;
  float: right;
  margin-top: 20px;
}
   .stat-card {
      background-color: #f8f9fa;
      border-left: 4px solid #0d6efd;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 6px;
    }
    .card-title {
      font-size: 1.2rem;
    }
    .calendar-placeholder {
      height: 300px;
      background-color: #e9ecef;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6c757d;
      font-style: italic;
    }
    
    
        
        .btn-container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
width: 100%;
        }
        
        .dash-btn{
  width: 95%;
 border: 1px solid #ccc;
  height: 345px;
 padding: 10px 2.5%;
  border-radius: 5px;
 position:relative;
}
.long-btn{
 height: 700px;
 right: 0;
 overflow-y: scroll;
}
 .dash-btn table{
border: none;
}
.dash-btn.calendar{
 width: 49.9%;
 padding: 0;
 position: absolute;
 top: 370px;
}
.dash-btn.calendar .pager__item a{
 padding: 0;
 margin: 0;
}
.dash-btn.calendar .js-form-item{
 padding: 0;
 margin: 0;
}
.dash-btn.calendar .calendar-view-table caption {
  line-height: 1;
  font-weight: bold;
}
.dash-btn.calendar .calendar-view-table thead th {
  background: #21242b;
  font-size: 12px;
  padding: 0;
}
.dash-btn.calendar .calendar-view-table td {
  margin: 0;
  padding: 0;
  min-height: 7.5rem;
  min-width: calc(100% / var(--calendar-view-columns));
}
.dash-btn.calendar .calendar-view-day {
  padding: 0;
}
.dash-btn.calendar .calendar-view-table .calendar-view-day__row {
  font-size: 11px;
  border-radius: 0;
  padding: 0px;
  margin: 0;
  line-height: 1.2;
  background: #2b024d;
  border: 1px solid #403f3f;
  color: #402828;
  text-decoration: none;
  display: block;
}
.reservation-block {
    display: inline-flex;
    justify-content: flex-start;
    width: 100%;
    align-items: center;
    align-content: center;
    gap: 20px;
        height: 35px;
}
        
.reservation-block-btn {
position: absolute;
bottom: 10px;
right: 10px;
        }
    
#chart-reservations-main-page-block-5{
  height: 300px !important;
  width: 100% !important;
}   
.dash-btn.bottom{
margin-bottom: 5px;
}
#chart-reservations-main-page-attachment-2{
height: 180px;
}
.user-page-wrapper{
 position: relative;
 width: 99%;
top: -30px;
}