.ipadRl-boardBtn{
  z-index: 1002!important;
}
  .text-new-board {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: start;
    padding: 10px 5px;
  }
  
  .row-container {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
  }
  
  .section-name {
    position: relative;
    top: 10px;
  }
  
  .row-container-section {
    width: 100%;
    height: 120px;
    display: flex;
    /* align-items: center; */
  }
  
  .row-container-section-second {
    width: 100%;
    /* height: 200px; */
    display: flex;
  }
  
  .text-section-title {
    padding: 10px 5px;
  }
  
  .top-heder-section {
    width: 100%;
    height: 60px;
    background-color:#313131!important ;
    padding: 0px 0px;
    border-bottom: 1px solid black;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px; 
    padding: 5px;
  color: white; }
  
  .icon-container {
    width: 30%;
    padding: 0px 4px;
    position: relative;
    top: 11%;
    /* border: 1px solid black; */
    display: flex;
    gap: 5%;
  }
  
  .add-icon {
    width: 25px;
    height: 25px;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
  }
  
  /* .add-icon>i {
    color: black;
    font-size: 20px;
  } */

  .add-icon>label>i {
    color: black;
    font-size: 20px;
  }
  
  /* new-css-add  */
  
  .board-container {
    display: flex;
    align-items: center;
    /* height: 45px; */
    border-radius: 8px;
  }
  
  .section-board {
    display: flex;
    align-items: center;
    /* height: 35px; */
    position: relative;
    border-radius: 8px;
  }
  
  .section-board>select {
    width: 100%;
    height: 100%;
  }
  
  .row-class-container {
    padding-right: 1rem !important;
  }
  
  .container-row {
    width: 97%;
    padding: 0px 6px;
    position: relative;
    top: 10px;
  
  }
  
  .inner-container {
    width: 100%;
    height: 40px;
    border: 1px solid black;
  }
  
  .card-name-class {
    font-size: 14px;
    margin-left: 1%;
  }
  
  .card-row-width {
    width: 99%;
    height: 45px;
  }
  
  .card-row-width>input {
    width: 100%;
    height: 100%;
  }
  
  .image-container {
    width: 100%;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .image-box {
    width: 130px;
    height: 130px;
    border: 1px solid white;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .image-box>img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
  
  .curser-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: -10%;
    top: -7%;
  }
  
  .curser-icon>img {
    height: 25px;
    object-fit: cover;
  
  }

  .heder-two-container {
    /* width: 200px;
    height: 40px; */
    padding: 0px 0px;
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    justify-content: flex-end;
    flex-direction: column;
}
  



.logo-sercol-box {
  width: 30%;
  height: 30%;
  border-radius: 50%;
  object-fit: cover;
}
.logo-sercol-box1 {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
}

.heder-two-container>P {
  font-size: 17px;

}

.cut-icon-box {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.date-p {
  position: absolute;
  right: 16%;
  font-size: 14px;
}

.desc{
  border-top-left-radius: 0px!important;
                        border-top-right-radius: 0px!important;
                        border-bottom-right-radius: 0px!important;
                        border-bottom-left-radius: 0px!important
}
.row-width-sdg{
   border-radius: 7px;
   position: relative;
   padding: 10px 3px;
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: center;
   border: 1px solid #595b5d;    
 }
 
 .sdg-popup-box{
   width: 7%;
   height:11%;
   padding: 0px 0px !important;
   border-radius: 5px;
   overflow: hidden;
   transition:transform 0.3s ease;
 }

 .sdg-popup-box:hover{
  transform:scale(2);

 }
 
 .sdg-popup-box>img{
   width: 100%;
   /* height: 100%; */
  object-fit: cover;
  
 }

  @media(min-width:1729px) and (max-width:2560px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.7px;
  }
  .board-container{
    font-size: 15.7px;
  }
  .add-icon>label>i{
    font-size: 21px;
  }
  .image-box {
    width: 130px;
    height: 130px;
    border-radius: 8px;
  }
  .top-heder-section{
    height: 62px;
  }
  }
  
  @media only screen and (min-width:2560px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.7px;
  }
  .board-container{
    font-size: 15.7px;
  }
  .add-icon>label>i{
    font-size: 21px;
  }
  .image-box {
    width: 130px;
    height: 130px;
    border-radius: 8px;
  }
  .top-heder-section{
    height: 100px;
  }
  }
  
  @media(max-width:1728px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.7px;
  }
  .board-container{
    font-size: 15.7px;
  }
  .add-icon>label>i{
    font-size: 21px;
  }
  .image-box {
    width: 125px;
    height: 125px;
    border-radius: 8px;

  }
  .top-heder-section{
    height: 60px;
  }
  }
  
  @media(max-width:1668px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.5px;
  }
  .board-container{
    font-size: 15.5px;
  }
  .add-icon>label>i{
    font-size: 20px;
  }
  .image-box {
    width: 115px;
    height: 115px;
    border-radius: 8px;

  }
  .top-heder-section{
    height: 60px;
  }
  }
  
  @media(max-width:1440px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.5px;
  }
  .board-container{
    font-size: 15.5px;
  }
  .add-icon>label>i{
    font-size: 20px;
  }
  .image-box {
    width: 115px;
    height: 115px;
    border-radius: 8px;

  }
  .top-heder-section{
    height: 60px;
  }
  }
  
  @media(max-width:1368px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15.5px;
  }
  .board-container{
    font-size: 15.5px;
  }
  .add-icon>label>i{
    font-size: 20px;
  }
  .image-box {
    width: 115px;
    height: 115px;
    border-radius: 8px;

  }
  .top-heder-section{
    height: 56px;
  }
}
  
  @media(max-width:1280px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15px;
  }
  .board-container{
    font-size: 15px;
  }
  .add-icon>label>i{
    font-size: 19px;
  }
  .image-box {
    width: 110px;
    height: 110px;
  }
  .top-heder-section{
    height: 56px;
  }
  }
  
  @media(max-width:1180px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15px;
  }
  .board-container{
    font-size: 15px;
  }
  .add-icon>label>i{
    font-size: 19px;
  }
  .image-box {
    width: 110px;
    height: 110px;
  }
  .top-heder-section{
    height: 56px;
  }
  }
  
  @media(max-width:1104Px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15px;
  }
  .board-container{
    font-size: 15px;
  }
  .add-icon>label>i{
    font-size: 19px;
  }
  .image-box {
    width: 110px;
    height: 110px;
    border-radius: 8px;

  }

  .top-heder-section{
    height: 56px;
  }
  .ipadRl-boardBtn{
    z-index: 1002!important;
}
  }
  
  @media(max-width:1024px) {
    .add-icon{
      width: 23px;
      height: 23px;
      gap: 4%;
    }
    .section-name {
      position: relative;
      top: 10px;
  }
  
  .section-board>select {
    font-size: 15px;
  }
  .board-container{
    font-size: 15px;
  }
  .add-icon>label>i{
    font-size: 19px;
  }
  .image-box {
    width: 110px;
    height: 110px;
    border-radius: 8px;

  }
  .top-heder-section{
    height: 90px;
  }
  .ipadRl-boardBtn{
       z-index: 1002!important;
  }
  }
  
  @media(max-width:991) {
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 13px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }

    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
      color: black;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
    .ipadRl-boardBtn{
         z-index: 1002!important;;
    }
  }
  
  @media(max-width:768px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 0px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
    .ipadRl-boardBtn{
         z-index: 1002!important;;
    }
  }
  
  @media(max-width:700px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 13px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
    .ipadRl-boardBtn{
         z-index: 1002!important;;
    }
  }
  
  @media(max-width:650px) {
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 13px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
    .ipadRl-boardBtn{
         z-index: 1002!important;;
    }
  }
  
  @media(max-width:600px) {
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 13px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
    .ipadRl-boardBtn{
         z-index: 1002!important;;
    }
  }
  
  @media(max-width:560px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 13px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 15px;
    }
  
    .section-board>select {
      font-size: 15px;
    }
  
    .top-heder-section {
      font-size: 15px;
      height: 52px;
    }
  
    .image-box {
      width: 110px;
      height: 110px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 15px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  @media(max-width:500px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
  
    .add-icon>label>i {
      font-size: 17px;
    }
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 14.5px;
    }
  
    .section-board>select {
      font-size: 14.5px;
    }
  
    .top-heder-section {
      font-size: 14px;
      height: 52px;
    }
  
    .image-box {
      width: 100px;
      height: 100px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 14.5px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  @media(max-width:460px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 14.5px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 17px;
    }
    .add-icon>label>i {
      font-size: 17px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 14.5px;
    }
  
    .section-board>select {
      font-size: 14.5px;
    }
  
    .top-heder-section {
      font-size: 14px;
      height: 50px;
    }
  
    .image-box {
      width: 100px;
      height: 100px;
      border-radius: 8px;


    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 14.5px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  
  @media(max-width:400px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 14px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 15px;
    }
    .add-icon>label>i {
      font-size: 15px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 14px;
    }
  
    .section-board>select {
      font-size: 14px;
    }
  
    .top-heder-section {
      font-size: 14px;
      height: 50px;
    }
  
    .image-box {
      width: 90px;
      height: 90px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 14px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  @media(max-width:375px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 14px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 15px;
    }

    .add-icon>label>i {
      font-size: 15px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 14px;
    }
  
    .section-board>select {
      font-size: 14px;
    }
  
    .top-heder-section {
      font-size: 14px;
      height: 50px;
    }
  
    .image-box {
      width: 80px;
      height: 80px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 14px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  @media(max-width:364px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 14px;
    }
  
    .add-icon {
      width: 22px;
      height: 22px;
    }
  
    .add-icon>i {
      font-size: 15px;
    }
  
    .add-icon>label>i {
      font-size: 15px;
    }
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 14px;
    }
  
    .section-board>select {
      font-size: 14px;
    }
  
    .top-heder-section {
      font-size: 14px;
      height: 50px;
    }
  
    .image-box {
      width: 80px;
      height: 80px;
      border-radius: 8px;

    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 14px;
    }
  
    .card-row-width {
      width: 100%;
    }
  }
  
  @media(max-width:350px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 13px;
    }
  
    .add-icon {
      width: 20px;
      height: 20px;
    }
  
    .add-icon>i {
      font-size: 14px;
    }

    .add-icon>label>i {
      font-size: 14px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 13px;
    }
  
    .section-board>select {
      font-size: 13px;
    }
  
    .top-heder-section {
      font-size: 13px;
    }
  
    .image-box {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 13px;
    }
  }
  
  @media(max-width:320px) {
  
    .container-padding {
      padding: 0px 0px;
      position: relative;
      top: 10px;
    }
  
    .section-name {
      font-size: 13px;
    }
  
    .add-icon {
      width: 20px;
      height: 20px;
    }
  
    .add-icon>i {
      font-size: 14px;
    }
    .add-icon>label>i {
      font-size: 14px;
    }
  
    .icon-container {
      gap: 12%;
    }
  
    .board-container {
      font-size: 13px;
    }
  
    .section-board>select {
      font-size: 13px;
    }
  
    .top-heder-section {
      font-size: 13px;
    }
  
    .image-box {
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }
  
    .card-row-width>input {
      padding: 0px 2px;
      font-size: 13px;
    }
  }