:root {
  --primaryColor:#4c50d3;
  --secondaryColor:#ffce00;
  --fontColor:#1e1e1e;
  --whiteColor:#fff;
  --greyColor: #e7e7e7;
  --darkGreyColor : #5f5f5f;
  --sofPurple: #e7e8ff;
  --softBlue: #c3e1ff;
  --softYellow: #fff5cc;
  --softRed: #ffcbc8;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Lato',sans-serif;
}

body{
  width: 100%;
  height: 100vh;
  display: flex;
}

/* .bookmark-icon {
  display: flex;
  position: relative;
  top: 10px;
  font-size: 20px;
  color: gray; /* Adjust color as needed */
/* Style the bookmark icon */
.bookmark-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  z-index: 1;
}

/* Adjust card container to accommodate the bookmark icon */
.card {
  position: relative;
  border: 2px solid transparent; /* Add border to ensure space for the bookmark icon */
}

/* On hover, change the border color of the card */
.card:hover {
  border-color: lightgray;
}
.bookmark-icon:hover {
  transform: scale(1.2);
}
.sidebar{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2rem;
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  position: fixed;
  left: 0; 
}

.logo{
  letter-spacing: 2;
}

.menus{
  display: flex;
  flex-direction: column;
  gap: 2rem;

}

.menus a{
  display: flex;
  align-items: center;
  color: var(--whiteColor);
  text-decoration: none;
}

.menus ion-icon{
  margin-right: 0.5rem;
}

.menus a:hover{
  color: var(--secondaryColor);
}

.profile{
  display: flex;
  flex-direction: row;
  align-items:center ;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--whiteColor);
  color: var(--fontColor);
  border: none;
  border-radius: 10px;
  box-shadow: rgba(99,99,99,0.2) 0px 2px 8px 0px;
  cursor: pointer;
}
.profile:hover{
  color: var(--secondaryColor);
}
.home-imgHover{
  position: relative;
  left: -50%;
  width: 100%;
}
.profile-img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.profile-name p{
  font-size: 12px;

}

.main{
  width: calc(100% - 20%);
  min-height: 100%;
  min-width: 300px;
  height: max-content;
  display: flex;
  flex-direction: column;
  padding: 2rem 2%;
  margin-left: 20%;
  background-color: var(--sofPurple);
  z-index: 1;
}

.main-header{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-bar{
  background-color: var(--whiteColor);
  padding: 0.5rem;
  border-radius: 20px;
  display: none;
}

.search{
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: none;
  background-color: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  position: relative;
  background-color: var(--whiteColor);
}

.search input {
  width: 90%;
  border: none;
}

.btn-search{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 5%;
  border: none;
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  font-size: 18px;
  border-radius: 20px;
  box-shadow: rgba(0,0,0,16) 0px 1px 4px;
  cursor: pointer;
}
.btn-search:hover{
  background-color: var(--secondaryColor);
  color: var(--fontColor);
}

.filter-wrapper{
  margin: 1rem 0;
  font-size: 14px;
  
}

.filter{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.btn-filter{
  min-width: 110px;
  padding: 0.5rem;
  border-radius: 20px;
  border: none;
  background-color: var(--whiteColor);
  cursor: pointer;
}

.btn-filter:hover{
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  box-shadow: rgba(0,0,0,0.24);
}

.sort{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.sort p{
  font-size: 14px; 
}

.sort-list select{
  background-color: aliceblue;
  height: 1.5rem;
  border-radius: 20px;
  border: none;
  margin-top: 0 0.5rem;
  padding: 0 0.5rem;
  border: 2px solid #4c50d3;
}

.wrapper{
  width: 100%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  gap: 1rem;
  overflow: scroll;
}

body{
  overflow: hidden;
}

.card{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 3%;
  margin: 0 1%;
  background-color: var(--whiteColor);
  line-height: 1.5;
  gap: 1.5rem;
  box-shadow: rgba(0,0,0,0.16) 0px 1px 4px;
  border-radius: 10px;
  cursor: pointer;
}

.card:hover{
  box-shadow: rgba(0,0,0,0.24) 0px 3px 8px;
}
.card-left{
  width: 10%;
  min-width: 50px;
  display: flex;
  justify-content: center;
  border-radius: 20%;
}

.card-left img{
  width: 100%;
  height: auto;
  min-height: 60px;
  padding: 0.5rem;
}

.card-center{
  width: 50%;
}

.card-loc, .card-sub{
  font-size: 13px;
  color: var(--darkGreyColor);
}


.card-sub{
  display: flex;
  flex-wrap: wrap;
}

.card-sub p{
  display: flex;
  padding: 0 0.5rem 0 0;
  align-items: center;
}

.class-detail{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card-right{
  width: 15%;
}

img{
  width: 50px;
  align-items: center;
  justify-content: center;
}

.card-tag a{
  color: var(--fontColor);
  font-size: 13px;
}

.card-salary{
  padding: 0.5rem 0;
  color: var(--primaryColor);
}

.card-salary span{
  color: var(--fontColor);
  font-size: 13px;
}

.detail{
  width: 25%;
  min-width: 250px;
  height: 100%;
  padding: 2rem;
  position: fixed;
  right: 0;
  background-color: var(--whiteColor);
  overflow: auto;
  box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px; 
}

.close-detail{
  display: none;
}

.detail-header{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-header img{
  width: 50px;
  height: 50px;
}

.divider{
  width: 100%;
  height: 1px;
  background-color: var(--greyColor);
  border: none;
  margin: 1rem 0;
}

.detail-desc{
  line-height: 1.5;
}

.about a{
  margin: 0.5rem 0 0 0;
  color: var(--primaryColor);
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-apply{
  background-color: var(--primaryColor);
  color: var(--whiteColor);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.btn-save{
  background-color: var(--secondaryColor);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

.btn-apply:hover{
  border: 1px solid var(--primaryColor);
  background-color: transparent;
  color: var(--primaryColor);
}

.btn-save:hover{
  border: 1px solid var(--secondaryColor);
  background-color: transparent;
}

.sidebar.active{
  display: flex;
  width: 220px;
  z-index: 100;
}

.tempbtn{
  display:none;
}

.tempbtn.active{
  display:block;
}

.card.expanded .additional-details {
  display: block;
}

@media screen and (max-width:880px){
  .menu-bar{
    display: block;
  }
  .siderbar{
    display: none;
  }

  .main{
    width: calc(100%);
    margin-left: 0;
  }

}



@media screen and (max-width:700px){
  .main{
    width: 100%;
  }

  .detail{
    display: none;
  }
  

  .close-detail{
    display: block;
    cursor: pointer;
  }
}

@media screen and(max-width:480px) {
  .card-loc, .card-sub ,.card-tag{
    display: none;
  }
}