/*common css start*/
:root {
    --theme-primary: rgba(15,16,24,1);
    --theme-secondary: rgba(25,28,40,1);
    --theme-tertiary: rgba(35,40,55,1);
    --theme-gradient: linear-gradient(135deg, rgba(15,16,24,1) 0%, rgba(25,28,40,1) 50%, rgba(35,40,55,1) 100%);
    --theme-border: rgba(50,55,70,1);
    --theme-hover: rgba(45,50,65,1);
    --theme-accent: rgba(60,65,85,1);
}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter",sans-serif;background:var(--theme-gradient);font-size:16px;margin:0;padding:0;font-weight:400;color:#fff !important}
a{color:#fff;text-decoration:none;transition:all 300ms linear;-moz-transition:all 300ms linear;-o-transition:all 300ms linear;-ms-transition:all 300ms linear;-webkit-transition:all 300ms linear}
a:hover{color:inherit}
h1,h2,h3,h4,h5,h6{clear:both;color:#fff;margin:0px;padding:0px;line-height:1.4;font-weight:700}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}

img{border:0;vertical-align:top;height:auto;max-width:100%}
ul,li{list-style:none;margin:0px;padding:0px}
p{font-size:16px;margin:0px}
/*end common css*/
.modal-content {
  border-radius: 15px;
}

.otp-form input {
  padding: 10px 10px;
  width: 60px;
  height: 60px;
}

.rounded10{border-radius:10px;}
.fs-12{font-size: 12px;}
.img-cover{object-fit: cover;}
.img-pos-top{object-position: top;}
.box45{width: 45px;height: 45px;border-radius: 50px;}
.box20{width: 20px;height: 20px;border-radius: 50px;}
.card {
  border-radius: 10px;
  background: var(--theme-secondary);
  border: 1px solid var(--theme-border);
}

/* Theme Buttons */
.btn-theme {
  background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-tertiary) 100%);
  border: 1px solid var(--theme-border);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-theme:hover {
  background: var(--theme-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn-theme-outline {
  background: transparent;
  border: 1px solid var(--theme-border);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-theme-outline:hover {
  background: var(--theme-hover);
  color: #fff;
}

body{background-color: var(--theme-primary);}

header{position: fixed;
    top:0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    background-color: var(--theme-primary);
    border-bottom: 1px solid var(--theme-border);
    z-index: 11;
    }
header .right ul li.setting a img {width: 30px;}
.header-top .left a.menu img{width: 30px;}
.logo img {width: 130px;}


aside:not(.sidebar) {
    width: 265px;
    position: fixed;
    left: 0;
    height: 100vh;
    border-right: 1px solid var(--theme-border);
    background: var(--theme-primary);
}
aside:not(.sidebar) ul{padding:  20px 0;}
aside:not(.sidebar) ul li{padding-bottom: 15px;}
aside:not(.sidebar) ul li a{padding:10px 30px;margin: 0 15px;border:1px solid transparent;border-radius:50px;transition: all 0.3s ease;}
aside:not(.sidebar) ul li.active a{border-color: var(--theme-border);
    background: var(--theme-hover);}
aside:not(.sidebar) ul li a:hover{background: var(--theme-hover);}
aside:not(.sidebar) ul li a img {
    width: 20px;
}


.page-content{width: calc(100% - 200px);margin: 0 0 0 auto;padding: 110px 30px 30px 30px;}






    
.lightbox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    background: #7f8c8d;
    perspective: 1000;
  }
  
  .filter {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    opacity: 0.5;
    background-position: center;
    background-size: cover;
  }
  
  .lightbox img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(0deg);
    max-height: 95vh;
    max-width: calc(95vw - 100px);
    transition: 0.8s cubic-bezier(0.7, 0, 0.4, 1);
    transform-style: preserve-3d;
  }
  
  
  /*.lightbox:hover img{
    transform: translate(-50%, -50%) rotateY(180deg);
  }*/
  
  [class^="arrow"] {
    height: 200px;
    width: 50px;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  
  [class^="arrow"]:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 15px;
    height: 15px;
  }


  .log-left:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 75%);
}

  .login-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit:fill;
}

.login-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.image-uploaded img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}


.setting-list {
  background: #fff;
 
  border-radius: 10px;
}

.setting-list button img {
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

.setting-list button {
  text-align: start;
  display: flex;
  align-items: center;
}

.setting-list .nav-pills .nav-link.active,.setting-list .nav-pills .show>.nav-link {
  color: #000;
  border-left-color:#0D6EFC;
  background-color: transparent;
}

.setting-list .nav-pills .nav-link {
  border-bottom: 1px solid #f1f1f1;
  border-radius: 0px;
  color: #000;
  border-left: 4px solid transparent;
}

.setting-list .nav-pills .nav-link:first-child {border-top: 1px solid #f1f1f1;border-radius: 10px 10px 0 0;}
.setting-list .nav-pills .nav-link:last-child{border-radius: 0 0 10px 10px;}



/*image upload css*/

.avatar-upload {
  position: relative;
  max-width: 165px;
  margin: 0px auto 30px;
}
.avatar-upload .avatar-edit {
  position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
  width: 34px;
  height: 34px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: auto;
  transform: translate(-50%, -50%);
}
.avatar-upload .avatar-preview {
  width: 150px;
  height: 150px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



/*activity css*/
 
.activity {
  position: relative;
}
.activity h1, .activity h2, .activity h3, .activity h4 {
  color: #000;
}
.activity .activity-items {
  position: relative;
}
.activity .activity-items:before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 35px;
  width: 0px;
  border-left: 3px dashed #ddd;
}
.activity .activity-item-wrap {
  padding: 7px 0px 7px 70px;
  position: relative;
}
.activity .activity-item-wrap h4.activity-date {
  font-size: 18px;
  margin: 10px 0 0 0;
  color: #aaa;
}
.activity .activity-item-wrap .activity-item-badge {
  width: 30px;
  height: 30px;
  background: #315782;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 17px;
  left: 21px;
  text-align: center;
  border: 3px solid #fff;
  box-shadow: 0px 2px 3px #ccc;
}
.activity .activity-item-wrap .activity-item-badge i {
  line-height: 30px;
}
.activity .activity-item-wrap .activity-item {
  border-radius: 3px;
  position: relative;
  border: 1px solid #cbd6e2;
  background: #fff;
  padding: 10px 20px 10px 60px;
}
.activity .activity-item-wrap .activity-item:hover {
  box-shadow: 0 0 12px #cbd6e2;
  -webkit-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
.activity .activity-item-wrap .activity-item p {
  margin: 0px;
  color: #000;
}
.activity .activity-item-wrap .activity-item .activity-item-meta {
  margin-bottom: 10px;
}
.activity .activity-item-wrap .activity-item .activity-item-meta .activity-user {
  background: #d4edda;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  margin-right: 10px;
  color: #155724;
  text-align: center;
  line-height: 40px;
  font-size: 13px;
}
.activity .activity-item-wrap .activity-item .activity-item-meta .activity-user img {
  margin-top: -3px;
  border-radius: 50px;
}
.activity .activity-item-wrap .activity-item .activity-item-meta .activity-user.activity-ismember {
  background: #cce5ff;
  color: #004085;
}
 
.activity .activity-item-wrap .activity-item .activity-item-meta .activity-summary {
  font-size: 13px;
}
.activity .activity-item-wrap .activity-item .activity-item-meta .activity-timestamp {
  font-size: 11px;
  color: #aaa;
} 



aside:not(.sidebar).close{width: 100px;}
.page-content.close{width: calc(100% - 100px);}
aside:not(.sidebar).close ul li a span {
    display: none;
}

aside:not(.sidebar).close ul li a {
    justify-content: center;
    padding: 10px;
}


/* mobile menu css */
.mobile-menu.open {left: 0;}
.mobile-menu {
  position: absolute;
  left: -200px;
  height: 100%;
  background: var(--theme-primary);
  z-index: 11;
  top:80px;
  width: 200px;
  transition: all 0.5s ease-in-out;
  padding: 20px 15px ;
}

.mobile-menu ul li a {
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.mobile-menu ul li a img{width: 20px;}

.mobile-menu ul li.active a{
  border-color: var(--theme-border);
  background: var(--theme-hover);}
.mobile-menu ul li a:hover{background: var(--theme-hover);}

.mobile-menu ul li {
  margin-bottom: 10px;
} 

 
ul.list-show li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

ul.list-show li:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background-color: #0D6EFC;
}
.google-sync a {
    border: 1px solid #978686 !important;
}

aside:not(.sidebar) ul li a span {margin-left:15px;}




.page-nt-found{
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-nt-found .error{
  font-size: 150px;
  color:#6054c9;
  text-shadow: 
    1px 1px 1px white,    
    2px 2px 1px white,
    3px 3px 1px white,
    4px 4px 1px white,
    5px 5px 1px white,
    6px 6px 1px white,
    7px 7px 1px white,
    8px 8px 1px white,
    25px 25px 8px rgba(0,0,0, 0.2);
}

.page-text {
  margin: 2rem 0;
  font-size: 20px;
  font-weight: 600;
  color: #444;
}

.back-home{
  display: inline-block;
  border: 2px solid #222;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1rem 0.6rem;
  transition: all 0.2s linear;
  box-shadow: 0 15px 15px -11px rgba(0,0,0, 0.4);
  background: #222;
  border-radius: 6px;
}
.back-home:hover{
  background: #222;
  color: #ddd;
}

.custom-dropdown {
  background: var(--theme-secondary);
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--theme-border);
}

.custom-dropdown li a {
  color: #fff;
  transition: all 0.3s ease;
}
.custom-dropdown li a:hover{background: var(--theme-hover) !important;}
.custom-dropdown li:last-child a:focus,.custom-dropdown li:last-child a:hover{border-radius:0 0 10px 10px ;}
.custom-dropdown li:first-child a:focus,.custom-dropdown li:first-child a:hover{border-radius: 10px 10px 0 0;}

/* Skeleton Loader Styles */
.gallery-item-container.skeleton-loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
position: relative;
overflow: hidden;
}

.gallery-item-container.skeleton-loading img {
opacity: 0;
}

.gallery-item-container.skeleton-loading .hover-actions,
.gallery-item-container.skeleton-loading .checkmark {
display: none !important;
}

@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* Selection Header Fix */
.selection-header {
transition: all 0.3s ease;
}

/* Select All Button States */
.select-all-btn {
transition: all 0.2s ease;
}

/* Update gallery item container styles */
    /* Gallery Container */
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 15px;
margin: 0 auto;
}

/* Gallery Item Container */
.gallery-item-container {
position: relative;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 1/1;
cursor: pointer;
}

/* Gallery Item Image */
.gallery-item {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.gallery-item-container:hover .gallery-item {
transform: scale(1.03);
}

/* Hover Actions */
.hover-actions {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 10px;
pointer-events: none; /* Allow clicks to pass through to the image */
}

.gallery-item-container:hover .hover-actions {
opacity: 1;
}

/* Action Icons */
.action-icon {
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
pointer-events: auto; /* Enable clicks on the icons */
transition: all 0.2s ease;
}

.action-icon:hover {
transform: scale(1.1);
}

.favourite-icon.active {
color: #ff5252;
background-color: white;
}

    /* Selection Styles */
    .gallery-item-container.selected {
      opacity: 0.7;
    }
    
    .gallery-item-container.selected::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(66, 133, 244, 0.3);
      border: 2px solid #4285f4;
      pointer-events: none;
    }
    
    .checkmark {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background-color: #4285f4;
      border-radius: 50%;
      color: white;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      z-index: 10;
    }
    
    .gallery-item-container.selected .checkmark {
      display: flex;
    }
    
    /* Selection Header */
    .selection-header {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 10px 20px;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: space-between;
    }
    
    .selection-count {
      font-weight: 500;
      margin-left: 10px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }
      
      .selection-header {
        padding: 8px 15px;
      }
    }



/* Selection header */
.selection-header {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 11;
  display: none;
}


.album-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}


/*share modal pop*/
.social-icon .icons a{
  height: 50px;
  width: 50px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.social-icon .icons a i{
  transition: transform 0.3s ease-in-out;
}
.social-icon .icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.social-icon .icons a:nth-child(1):hover{
  background: #1877F2;
}
.social-icon .icons a:nth-child(2){
  color: #46C1F6;
  border-color: #b6e7fc;
}
.social-icon .icons a:nth-child(2):hover{
  background: #46C1F6;
}
.social-icon .icons a:nth-child(3){
  color: #e1306c;
  border-color: #f5bccf;
}
.social-icon .icons a:nth-child(3):hover{
  background: #e1306c;
}
.social-icon .icons a:nth-child(4){
  color: #25D366;
  border-color: #bef4d2;
}
.social-icon .icons a:nth-child(4):hover{
  background: #25D366;
}
.social-icon .icons a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.social-icon .icons a:nth-child(5):hover{
  background: #0088cc;
}
.social-icon .icons a:hover{
  color: #fff !important;
  border-color: transparent;
}
.social-icon .icons a:hover i{
  transform: scale(1.2);
}

ul.icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* cpoy input css */
.copy-field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.copy-field.active{
  border-color: #7d2ae8;
}
.copy-field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
}
.copy-field.active i{
  color: #7d2ae8;
}
.copy-field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.copy-field button{
  color: #fff;
  padding: 5px 18px;
  background: #7d2ae8;
}
.copy-field button:hover{
  background: #8d39fa;
}
 

/* Responsive adjustments */
@media (max-width: 768px) {
  .gallery-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}