@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

body{margin: 0;padding: 0;width: 100%;font-family: "Raleway";color: #000000;}
p{
 font-size: 13px;
}
.header{
  width: 100%;
  height: 50px;
  background: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  float: right;
  position: fixed;
 border-bottom: 1px solid #A5D6A7;
  z-index: 100;
}
.branding{width: 18%;height: 50px;}
.site-name{
font-size: 14px;
text-align: center;
padding: 10px 10px 0 10px;
}
.site-name h5 {
margin: 0 10px;
}
.logo-container {
 width: 110px;
 margin: 0 20px;
 position: relative;
 top: 5px;
}
.logo-container img {
    width: 100%;
}
.menu .menu-item{font-size: 15px;float: left;padding: 0 20px;text-decoration: none;color: #000000;height: 50px;display: flex;align-items: center;}
.menu .menu-item:hover{
background: black;
color:white;
}
.hrdropdown{
position: relative
}
.menu-block{
position: absolute;
background: black;
top: 51px;
border-radius: 4px;
 display:none;
width: 200px;
}
.menu-block a{
display: block;
  text-decoration: none;
padding: 10px 15px;
color: #ffffff;
border-bottom: 1px solid white;
}
.menu-block a:hover{
 background: white;
 color: #ff02bf;
}
.user-container {
 width: 20%;
 position: absolute;
 right: 0px;
 font-size: 14px;
 display: inline-flex;
}
.user-menu, .user-logout{
 text-transform:capitalize;
 display: flex;
 align-items: center;
 justify-content: center;
}
.user-menu{
width: 60%;
}
.user-logout{
width: 40%;
}
.sidebar{
width: 15%;
float: left;
background: #e2e1e1;
position: fixed;
height: 91vh;
margin: 50px 0;
color: black;
}
.sidebar-menu{
width: 100%;
}
.sidebar-menu-item{
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: flex-start;
padding: 0 0 0 15px;
border-bottom: 1px solid #bfbfbf;
height: 40px;
flex-direction: row;
align-items: center;
}
.sidebar-menu-item a{
 color: black; 
 text-decoration: none;
 font-weight: 100;
}
.sidebar-menu-item:hover{
 color: grey; 
background: white;
}
.sidebar-menu-item-text{
padding: 0 5px;
font-size: 14px;
}
.content{
width: 84%;
margin: 50px auto;
float: right;
}
.main{
width: 91%;
border-radius: 4px;
box-shadow: -1px 0px 8px 1px #cecece;
padding: 30px 40px;
margin: 15px 0;
}
.main-page{
width: 100%;
margin: 30px 0;
}
.page-header{
width: 100%;
display: flex;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
}
.page-title{
width: 50%;
}
.page-buttons{
width: 50%;
display: flex;
justify-content: flex-end;
}
button, .submit-button, .fc-button{
 appearance: button;
  border: 0 solid #e5e7eb;
  border-radius: .5rem;
  box-sizing: border-box;
  color: #000000;
  column-gap: 1rem;
  cursor: pointer;
  display: flex;
  line-height: 24px;
  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;
  margin:0 5px;
  align-content: center;
  align-items: center;
}

button:active, .submit-button:active {
  background-color: #f3f4f6;
  box-shadow: -1px 2px 5px rgba(81,41,10,0.15),0px 1px 1px rgba(81,41,10,0.15);
  transform: translateY(0.125rem);
}

button:focus, .submit-button:focus {
  box-shadow: rgba(72, 35, 7, .46) 0 0 0 4px, -6px 8px 10px rgba(81,41,10,0.1), 0px 2px 2px rgba(81,41,10,0.2);
}
.content-main{
}
a{
text-decoration:none;
color: #ff02bf;
}
h1,h2, h3, h4, h5, h6{
font-weight: 500;
margin: 0;
}
h1{
font-size: 2rem;   
}
h2{
    
}
h3{
    
}
h4{
    
}
h5{
    
}
h6{
    
}
table {
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 17px;
margin: 0 auto;
width: 100%;
}	
th {
color: #fff;
padding: 5px;
position: relative;
background: black;	
}
th:first-child {
border-left: 1px solid #777;	
box-shadow: inset 1px 1px 0 #999;
}
th:last-child {
box-shadow: inset -1px 1px 0 #999;
}
td {
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 4px 5px;
position: relative;
transition: all 300ms;
font-size: 13px;
}
td:first-child {
box-shadow: inset 1px 0 0 #fff;
}	
td:last-child {
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
}	
tr:last-of-type td {
box-shadow: inset 0 -1px 0 #fff; 
}
tr:last-of-type td:first-child {
box-shadow: inset 1px -1px 0 #fff;
}	
tr:last-of-type td:last-child {
box-shadow: inset -1px -1px 0 #fff;
}	
tbody:hover tr:hover td {
color: #444;
}
form {
padding: 0 0 60px;
margin: 0;
}
label{
font-size:14px;
width: 100%;
display: block;
font-weight: 600;
}
.hidden{
display: none;
}
.inline-form{
display: flex;
align-items: center;
justify-content: flex-start;
}
.input-wrapper{margin: 10px 0;}
.form-text, select{
 position: relative;
 cursor: text;
 font-size: 14px;
 line-height: 20px;
 padding: 0 16px;
 height: 40px;
 background-color: #fff;
 border-radius: 3px;
 color: rgb(35, 38, 59);
 overflow: hidden;
 transition: all 100ms ease-in-out;
 border: 1px solid lightgrey;
margin: 0 10px 0 0;
}
.long-textfield{
 width: 500px
}
.medium-textfield{
 width: 300px
}
.short-textfield{
 width: 150px
}
.mini-textfield{
 width: 70px
}
 .login-text{
 width: 90%;
}
.donor-text{
 width: 350px
}
.exchange-text{
width: 70px;
}
.amount-text{
width: 200px;
}
#amount,
#exchange-rate,
#foreign-amount{
display: none;
}
.table-text {
width: 100px;
height: 30px;
padding: 0 5px;
}
.form-text:focus {
border-color: #3c4fe0;
box-shadow: 0 1px 0 0 rgb(35 38 59 / 5%);
}
label[for=comment]{
background: #fcf7ec;
padding: 10px;
position: relative;
top: -14px;
left: 4px
}
textarea{
width: 90%;
height: 114px;
border: 1px solid lightgrey;
}
.login-container{
 width: 30%;
 margin:20px auto;
 box-shadow: 0px -1px 20px #dcdcdc;
 padding: 40px 5%;
}
.login-header{
 text-align:center;
 margin: 0 20px 0;
}
.login-logo img {
    width: 130px;
}
.login-text{
 font-size: 14px;
}
.btn{
color: white;
background: #ff02bf;
border: none;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
}
.submit-btn{
padding: 10px 15px;
}
.login-btn {
 padding: 10px 20px 
}
.donor-application-btn{
 margin: 10px auto;
 display:flex;
 flex-wrap: nowrap;
 justify-content: space-around;
 flex-direction: column;
 align-content: center;
}
.app-btn{
 font-size: 12px;
 padding: 13px 8px;
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 align-content: space-around;
 margin: 5px 20px;
}
.rmv-btn {
height: 5px;
font-size: 12px;
display: flex;
align-items: center;
margin: 0;
padding: 10px 15px;
}
.task-budget-btn{
 width: 100px;
 text-align: center
}
.edit-btn{
border: none;
background: white;
color: #ff02cd;
display: block;
padding: 10px;   
}
.title{
font-weight: 600;
font-size: 25px;
 padding: 0 0 10px;
 text-transform: capitalize;
}
#Tamount{
position: relative;
 top: 10px;
 left: 30px;
 text-align:center;
 font-size: 14px;
 display: flex;
 align-content: stretch;
 flex-wrap: nowrap;
 align-items: center;
}
input[type=file]::file-selector-button {
  border: none;
  padding: 13px 20px;
  border-radius: .2em;
  background-color: #ff02bf;
  transition: 1s;
 color: white
}
input[type=file]::file-selector-button:hover {
  background-color: #000e0e;
}
.file-wrapper{
position: relative;
 margin-right: 170px;
}
.inputfile-box{
 width: 250px;
 height: 40px;
 border: 1px solid lightgrey;
 position: absolute;
 margin: 0 110px
}
#appForm-wrapper{
 margin-right: 170px;
}
.ext-file-box{
 margin: 0 118px
}
.user-pic {
width: 30px
}
.user-pic img{
width: 30px;
height: 30px;
border-radius: 50px;
object-fit: cover;
object-position: top;
}
.dashboard-content{
 width: 60%; 
 margin-left:15%;
 padding-top: 50px
}
.dashboard-main{
 background: #f2f2f2;
 height: 100vh
}
.dashboard-top{
height: 100px;
 padding-left: 1%
}
.dashboard-top-item{
 width: 19%;
 background: white;
 height: 100px;
 float: left;
 margin-right: 1%;
 margin-top: 5px;
 border-radius: 4px;
 box-shadow: 0px 3px 3px 1px #c4c3c3;
 color:white;
}
.dashboard-item{
 width: 49%;
 background: white;
 height: 40vh;
 float: left;
  margin-right: 1%;
 margin-top: 5px;
 border-radius: 4px;
 box-shadow: 0px 3px 3px 1px #c4c3c3;
}
.dashboard-middle,
.dashboard-bottom{
 padding-left: 1%
}
.item-title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
top: 10px;
z-index: 10;
font-size: 15px;
}
.top-item-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
top: 5px;
z-index: 10;
font-size: 14px;
display: flex;
flex-direction: column;
}
.top-item-main{
 font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
align-content: space-between;
flex-direction: column;
position: relative;
top: 10px;
font-weight: 900;
}
.top-item-amount{
 position: relative;
 top: 10px;
 font-size: 12px;
 text-align: center;
 color: #bcbcbc;
}
.dashboard-top-item.one{
background: #373b44; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #373b44, #4286f4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #373b44, #4286f4);   
}
.dashboard-top-item.two{
background: #FF0099;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.dashboard-top-item.three{
background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.dashboard-top-item.four{
background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.dashboard-top-item.five{
background: #ee0979;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff6a00, #ee0979); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.dashboard-right{
 width: 25%;
 position:absolute;
 right: 0;
 top: 0;
 padding: 50px 0px;
 border-left: 1px solid lightgrey;
 height: 100vh;
}
.links-container{
 width: 90%;
 margin: 10px;
 padding: 2%;
 border-radius: 5px;
}
.rigtside-bar-links{
 padding: 5px 10px;
 border-bottom: 1px solid lightgrey;
 border-left: 3px solid #ff02bf;
 margin: 3px 0;
 font-size: 14px;
}
.members-dashboard-container{
 background: whitesmoke;
 margin:20px 5px;
 box-shadow: 0px 0px 7px 1px #c4c3c3;
 border-radius: 5px;
}
.members-dashboard-container h3{
 padding: 5px 10px;
}
table#members-dashboard-table{
border: none;
 text-align: center;
}
#members-dashboard-table tr{
border: none;
}
#members-dashboard-table th{
border: none;
text-align: center;
background: lightgrey;
color: #ff02bf;
border-radius: 5px;
box-shadow: none;
 height: 10px;
 padding: 5px;
 font-weight: 100;
}
#members-dashboard-table td{
border: none;
border-radius: 10px;
box-shadow: none;
font-size: 12px;
text-transform: capitalize;
}
th.empty-th{
background: whitesmoke !important;
}
.pic-td{
width: 40px;
}
.online-status{
 color: #ff0000;
 font-weight: 600;
}
.offline-status{
 color: #6e6e6e;
 font-weight: 600;
}
.system-btn{
  width: 24%;
  background: white;
  height: 100px;
  margin-right: 1%;
  margin-top: 5px;
  border-radius: 4px;
  box-shadow: 0px 3px 3px 1px #c4c3c3;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.system-btn:hover{
 color: white;
 background:#ff02bf
}
.top-page{
display: flex;
justify-content: space-between;
}
.search-box{
margin: 0 0 10px;
}
.add-btn{
height: 15px;
}
.edit-image img{
width: 100px;
 border-radius: 50px;
 margin-left: 100px
}
#suggesstion-box{
 position: absolute;
 background: #e9e9e9;
 z-index: 2;
 font-size: 12px;
 box-shadow: 3px 1px 4px 1px #cbc9c9;
}
#name-list li  {
 list-style: none;
 padding: 0  40px 0 0;
}
#name-list li:hover {
color: #ff02bf; 
}
#donor-ret{
display: none;
}
.checkbox-title{
 font-size: 16px;
 font-weight: 600;
 padding: 0 20px 10px;
}
.checkbox-wrapper{
width: 95%;
border: 1px solid lightgray;
padding: 10px;
margin: 20px 0;
background: #f8f8f8;
border-radius: 4px;
box-shadow: 0px 0px 9px 1px #0000001f;
}
.checkbox-container{
 display: flex;
}
.checkbox-item {
 display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
}
.checkbox-item:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkbox-item input:checked ~ .checkmark {
  background-color: #ff02bf;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-item input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-item .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#website-wrapper,
#appLink-wrapper,
#appForm-wrapper,
#eligibility-wrapper, 
#grantAmount-wrapper,
#phone-wrapper,
#email-wrapper,
#address-wrapper,
#code-wrapper,
#city-wrapper,
#country-wrapper{
display: none;
}
.page-container{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 align-content: center;
}
.align-container{

}
.middle-container{
 width: 70%;
}
.right-container{
  width: 28%;
 box-shadow: -2px 2px 6px 1px lightgrey;
 height: 500px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
}
.donor-contact-conatainer{
 width: 91%;
 border: 1px solid white;
 border-top-left-radius: 10px;
 box-shadow: -2px 2px 6px 1px lightgrey;
 padding: 20px;
}
.donor-contact-item{
 font-size: 14px;
 width: 48%;
 padding: 3px 0 0 0;
 float: left;
}
.donor-contact-conatainer:after {
  content: "";
  clear: both;
  display: table;
}
.donor-contact-item-title{
 font-weight: 900;
 font-size: 15px;
 padding-right: 5px;
 color: #d68000;
}
table#grant-table{
 margin: 5px 0;
 width: 98%;
 border: none;
 box-shadow: 1px 1px 5px 1px lightgrey;
}
#grant-table tr {
 border-radius: 4px;
}
#grant-table th {
background: #005ad6;
border: none;
box-shadow: none;
margin: 0;
border-radius: 4px;
}
#grant-table td {
 border-radius: 4px;
 font-size: 12px;
 text-align: center;
  border: none;
 box-shadow: none;
}
.eligibility-notes{
box-shadow: 0px 0px 8px 1px #b2b2b2;
width: 91%;
margin: 20px 0;
padding: 20px;
border-bottom-left-radius: 10px;
}
.donor-applications{
 margin: 20px 0
}
.app-status-wrapper{
box-shadow: 0px 0px 8px 1px #b2b2b2;
width: 93%;
margin: 10px 0;
padding: 15px;
}
.app-status-container{
 display: flex;
 justify-content: cente;
}
.app-status-btn{
 border: 1px solid lightgrey;
 font-size: 14px;
 border-radius: 5px;
 margin: 10px 5px 0 0
}
.application-true{
 background: red;
 color: white;
 padding: 10px;
 border-radius: 5px;
}
.application-false{
 background: #d3d3d338;
 color: black;
 padding: 10px
}
.application-false:hover{
 cursor: pointer;
 color: red;
}
.app-statistics{text-align: center;margin: 20px 0;}
.app-statistics h4{}
.stat-item{}
.stat-title{font-size: 14px;padding: 5px 0;}
.stat-result{font-size: 25px;font-weight: 900;}
#stat-total{
color:#DC143C; 
}
#stat-unap{
color:#191970;
}
#stat-app{
 color:#00FFFF;  
}
#awrd-app{
color:#8B008B;  
}
#rej-app{
 color:#FFD700;  
}
.letter-template-tabs{
 float:left;
}
.letter-template-tab{
 height: 20px;
 border-top: 1px solid lightgrey;
 border-left: 1px solid lightgrey;
 border-right: 1px solid lightgrey;
 padding: 10px 15px;
 box-shadow: 1px -3px 5px #dedede;
 width:fit-content;
}
.letter-template-container{
}
.map-page-wrapper{width: 82.5%;float: right;position: relative;top: 60px;}
.main-map-container{
 width: 62%;
 height: 90%;
 position: fixed;
 left: 15.2%;
 top: 53px;
}
#map{
width: 100%;
height: 100%;
}
#notes{float: right;width: 27.3%;position: relative;top: -6px;}
.notes-container{border: 1px solid #e1dddd;margin: 5px 0;background: #f5f9fd54;}
#notes h3{
text-align: center;
width: 100%;
background: #cdcdcd;
color: #ff02bf;
font-size: 15px;
height: 35px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
border-radius: 5px;
font-weight: 600;
}
.notes-header{
text-align:center;
}
.notes-title{font-size: 14px;text-align: center;color: #ff02bf;font-weight: 600;}
.notes-body{
font-size: 12px;
}
.notes-body ul{
padding: 0 20px;
margin: 2px
}
.notes-body li{
padding: 0;
margin: 6px 0;
}
#budget-table-wrapper{
 border: 1px solid lightgrey;
 margin: 10px 15px;
 border-radius: 5px;
padding: 0 0 20px 0;
}
.budget-result{
 display:flex;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: center;
 height: 30px;
}
.budget-item h4{
font-weight:600;
}
.budget-item{
width: 100%;
font-size: 13px;
color: rgb(35, 38, 59);
transition: all 100ms ease-in-out;
border-bottom: 1px solid lightgrey;
display: flex;
align-content: center;
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
height: 30px;
}
.grandtotal{
border-bottom: 1px solid lightgrey;
height: 30px;
display: flex;
justify-content: space-around;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
font-weight: 600;
background: #ececec;
}
.add-budget{
 padding: 10px;
}
.budget-wrapper label{
 font-size: 13px
}
.budget-text{
 height: 34px
}
#addItem, 
#modify-bugdet,
#save-bugdet,
#task-budget-btn{
 position: relative;
 top: 7px;
 font-size: 13px;
}
#modify-bugdet,
#save-bugdet,
#task-budget-btn{
 margin: 0 0 0 20px;
}
.expense-edit-column{
 display: none;
}
.task-middle {
font-size: 14px;
width: 100%;
border-bottom: 1px solid lightgrey;
margin-bottom: 20px;
}
.task-right-container{
width: 28%;
height: 500px;
border-radius: 10px;
border: 1px solid lightgrey;  
}
.donation-form-wrapper{
 margin: 20px auto;
}
.donation-form-header{
 text-align: center;
 margin-top: 50px;
}
.donation-form-logo img{
 width: 150px
}
.donation-form-title{
 font-size: 30px;
 padding: 20px 0;
 font-weight: 900
}
.donation-form-container{
 padding: 0 0 30px 15%;
}
.donation-entry-container{
 display: flex;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-content: center;
 align-items: center;
 flex-direction: row;
margin: 10px 0;
}
.donation-form-container label{
font-size: 16px;
font-weight: 600;
width: 21%;
text-align: center;
}
.donation-entry{
 border-bottom: 1px solid lightgrey;
 width: 60%;
 padding: 4px;
 border-radius: 4px;
}
.wrt-stamp img{
 width: 120px;
 float: right;
}