.eventdetailmain {
     position: relative;
    //  top: 40px;
      top: 20px;
     .eventnew {
       background: $st-eighth-bg;
       border-radius: 8px;
      //  margin-top: 1.25rem;
       .eventbg {
         background-color: #fff;
         border-radius: 8px;
         width: 100%;
         height: 100%;
         position: relative;
         .eventInfoSec {
          position: absolute;
          right: 0;
          bottom: 0px;
          background: #679227;
          padding: 0;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          opacity: 0.95;
          font-size: 1rem;
          .block-1 {
            width: 50%;
            text-align: center;
            border-right: 1px solid #ccc;
            padding: 8px 0;
            @media #{$small} {
              padding: 6px 0;
            }
          }
          .block-2 {
            width: 50%;
            text-align: center;
            padding: 8px 0;
            @media #{$small} {
              padding: 6px 0;
            }
          }
          @media #{$medium} {
            font-size: 13px;
          }
          @media #{$small} {
            position: relative;
            font-size: 12px;
          }
         }
  
         img {
           width: 100%;
           //height: 250px;
           height: auto;
           border-radius: 8px 8px 0 0;
         }
  
       }
       .eventdetails {
         padding: 1.313rem;
        .eventHeader {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          .event_name{
            width: 65%;
            display: block;
            svg {
              font-size: 16px;
              margin-right: 6px;
            }
          } 
          .eventStatus {
            position: absolute;
            top: 0;
            right: 0;
            padding: 8px 10px;
            border-radius: 22px;
            line-height: 12px;
            // border-top-right-radius: 8px;
            color: #ffffff;
            opacity: 0.95;
            p {
              color: #fff;
            }
            &.Upcoming {
              background: $st-primary-bg;
            }
            &.Expired {
              background: $st-fourth-bg;
            }
            &.Cancelled {
              background: red;
            }
            &.Running {
              background: $st-fifth-bg;
            }
          }
          // .eventlocation{
          //   width: 35%;
          //   /* float: right; */
          //   text-align: right;
          //   margin: 0 auto;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: flex-end;
          //   align-items: flex-end;
          // }
          .eventDate {
            //display: flex;
            .event_start{
              margin-bottom: 15px;
              display: flex;
             }
             .event_end{
              margin-bottom: 0;
              display: flex;
             }
            p {
              margin-top: 0;
              margin-right: 10px;
              svg {
                font-size: 16px;
                margin-right: 6px;
              }
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
        p {
           font-size: $st-font14;
           color: $st-text-secondary;
          //  margin: 7px 0 8px 0;
          margin: 8px 0 0 0;
           @media #{$medium} {
             font-size: 14px;
           }
         }
         a {
           color: $st-text-third ;
         }
         h5 { 
           color: $st-heading-primary;
           font-weight: 500;
           padding: 0px 0 10px 0;
           display: inline;
           margin-bottom: 0;
           @media #{$small} {
             font-size: 24px;
           }
         }
         .righticon {
           float: right;
           color: $st-text-tenth ;
           font-size: $st-font14;
           .menuicon {
             font-size: $st-font16;
             color: $st-text-third;
             font-weight: 600;
             svg {
               margin-top: -8px;
               color: $st-text-tenth;
               font-size: $st-font16 ;
             }
             button {
               background: none;
               border: 0;
               color: $st-text-secondary;
               font-size: 00.75rem
             }
  
           }
         }
  
         .buttonWrap {
           display: flex;
           flex-direction: row;
           justify-content: flex-start;
           margin: 10px 0 0 0;
           .socialbtn {
             padding: 12px 20px;
             margin: 0 8px 0 0;
             border: 1px solid $st-border-secondary;
             font-weight: 500;
             font-size: $st-font16;
             color: $st-text-third;
             border-radius: 8px;
             float: left;
             background: $st-eighth-bg;
  
             @media #{$small} {
               font-size: 1rem;
             }
  
             &:last-child {
               margin: 0;
  
               @media #{$small} {
                 width: 50%;
               }
             }
  
             &.active {
               background: $st-primary-bg;
               color: $st-eighth-bg;
  
               @media #{$small} {
                 width: 50%;
               }
             }
  
             &:hover {
               background-color: $st-btn-fifth;
               color: $st-text-ninth;
             }
           }
           @media #{$small} {
             display: flex;
             margin: 0 auto;
             width: 100%;
             padding:10px 0 0 0;
           }
         }
         .abouteventdetails {
          margin-top: 20px;
           h5 {
             font-size: $st-font20;
             padding: 10px 0 10px 0;
             margin-bottom: 0;
             &.head {
              font-size: 13px;
             }
           }
           
         }
         .eventFooterWrap {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .eventDate {
            display: block;
            .event_start{
             margin-right: 1rem;
             p{
               strong{
                 margin-right: 5px;
               }
             }
             svg{
               margin-right: 5px;
             }
             }
             .event_end{
              svg{
                margin-right: 5px;
              }
              p{
                strong{
                  margin-right: 5px;
                }
              }
             }
        
          }
          .attendeeslist {
            p {
              margin: 0;
              line-height: 24px;
              svg {
                font-size: 18px;
              }
            }
          }
          .buttonWrap {
            margin: 0;
          }
         }
       .head{
        font-size: 16px;
      }
    }
     }
     .connections {
      //  margin-top: 1.25rem;
       background: $st-eighth-bg;
       border-radius: 8px;
  
       @media #{$small} {
        //  display: none;
        margin-top: 20px;
       }
  
       .groups {
         display: inline-block;
        //  padding: 10px;
        padding: 1.25rem;
         width: 100%;
         border-bottom: 1px solid $st-border-fourth;
         svg {
           font-size: 1rem;
           color: #B76C6C;
           margin: 0 10px 0 0;
           float: left;
           @media #{$medium} {
            margin: 0 5px 0 0;
          }
         }
  
         h2 {
           font-size: 1rem;
           font-weight: 700;
           margin: 0;
           padding: 0px 0 2px 0;
           color: $st-heading-primary;
           float: left;
           @media #{$medium} {
            font-size: 13px;
          }
         }
  
         .righticon {
  
  
           a {
             svg {
               float: right;
               color: #C5C4C4;
               font-size: $st-font14;
             }
           }
  
           .accordion {
             border: 0 !important;
  
             .accordion-item {
               margin-top: 10px;
  
               .accordion-header {
                 h6 {
                   font-size: 0.938rem;
                   color: $st-heading-primary;
                 }
  
                 .accordion-button {
                   background: #fff;
                   box-shadow: none;
                   padding: 5px;
                   width: 240px;
  
                   svg {
                     font-size: $st-font14;
                     color: $st-text-tenth;
  
  
                   }
  
                 }
               }
  
               .accordion-body {
                 padding: 5px 20px;
               }
             }
           }
  
         }
          @media #{$medium} {
            padding: 12px;
          }
       }
  
       .profilenav {
         margin: 0;
         padding: 0;
         background: #fff;
         border-radius: 0 0 20px 20px;
  
         li {
           display: inline-block;
           margin: 0;
           width: 100%;
           border-bottom: 1px solid #ccc;
  
           &.personal {
             a {
               font-size: 0.75rem;
               color: $st-text-primary;
               border-top: none;
               //display: flex;
               .personalinfo {
                 float: left;
                 p {
                   font-size: 12px;
                   color: $st-text-secondary;
                 }
                 strong {
                   font-size: 14px;
                 }
               }
               .postimgage {
                 width: 50px;
                 float: left;
                 img {
                  width: 40px;
                  height: auto;
                  border-radius: 50%;
                 }
               }
  
               @media #{$medium} {
                 padding: 15px 10px;
               }
             }
  
             a.active {
               color: $st-text-primary;
               font-weight: 700;
  
               svg {
                 color: $st-text-fourth;
               }
             }
           }
  
           &.details {
             a {
               &:hover {
                 color: $st-text-primary;
                 font-weight: 700;
  
                 svg {
                   color: $st-text-sixth ;
                 }
               }
             }
  
             a.active {
               color: $st-text-primary;
               font-weight: 700;
  
               svg {
                 color: $st-text-sixth ;
               }
             }
           }
  
           a {
             font-size: 15px;
             color: $st-text-secondary;
             padding: 10px 15px;
             border-top: 1px solid rgba(0, 0, 0, 0.2);
             display: block;
  
             svg {
               margin: -3px 10px 0 0;
             }
          }
          &:last-child {
            border-bottom: none;
          }
        }
  
         @media #{$small} {
           display: none;
         }
       }
     }
     @media #{$small} {
      padding: 10px;
    }
   }