@font-face {
   font-family: "Raleway SemiBold";
   src: url(../font/Raleway-SemiBold.woff) format('woff');
   font-display: swap; 
}
@font-face {
	font-family: "Sharis Regular"; 
	src: url(../font/Sharis-Regular.woff) format('woff');
	font-display: swap;
}
@font-face {
	font-family: "Raleway Regular"; 
	src: url(../font/Raleway-Regular.woff) format('woff');
	font-display: swap;
}
@font-face{
	font-family:Libertinus Sans Regular;src:url(../font/Libertinus-Sans-Regular.woff);
	font-display:swap
}
@font-face{
	font-family:Karla;src:url(../font/Karla-Light.ttf);
	font-display:swap
}
@font-face{
	font-family:Baisley;src:url(../font/Baisley.otf);
	font-display:swap
} 

/*This will be overwritten in theme settings*/
body {
  background-color: #f6f7f9;
   font-family: 'Karla','sans-serif';
}
.role-administrator .fixed-top {
 z-index: 490;
  top: 80px;
}

/* Custom styles */
    .image-container {
      position: relative;
      overflow: hidden;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .image-container img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease-in-out;
    }
    .image-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 18px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 5px 10px;
      border-radius: 5px;
    }
	
	.image-gallery {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	}

	.image-gallery > li {
	  height: 300px;
	  cursor: pointer;
	  position: relative;
	}

	.image-gallery li img {
	  object-fit: cover;
	  width: 100%;
	  height: 100%;
	  vertical-align: middle;
	  border-radius: 5px;
	}
	
	.image-gallery > li {
    flex: 1 1 auto;
    height: 300px;
    cursor: pointer;
    position: relative;
}
	
	.image-gallery::after {
	  content: "";
	  flex-grow: 999;
	}
	
	ul {
		list-style: none;
	}
	
	.image-gallery li:hover .overlay {
		transform: scale(1);
	}
	
	.overlay, .folder-overlay {
		position: absolute;
		width: 100%;
		height: 15%;
		background: rgba(57, 57, 57, 0.502);
		bottom: 0;
		left: 0;
		transform: scale(0);
		transition: all 0.2s 0.1s ease-in-out;
		color: #fff;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	
	.folder-overlay {
		transform: scale(1);
	}
	
	.folder-overlay a, .image-gallery a{
		color: inherit;
	}
	
	.flex-direction-nav a {
		height: 50px;
	}
	
	.mt-5 {
		margin-top: 3rem;
	}

/* Form Display css */
.tabledrag-toggle-weight-wrapper {
	margin-bottom: 1%;
}
.link-edit-summary {
	line-height: 1px;
}

.view-header {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
	padding: 10px 10px 10px 0;
}
.view-header a{ 
padding: 0 10px 0 10px;
}

.height-150 {
    height: 150px;
}

.box {
    background-color: var(--light);
    padding: 1rem;
    border-radius: 8px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}
.gap {
    gap: 1rem;
}

.items {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(265px,1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit,minmax(265px,1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

img, picture, svg {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
}

.custom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.custom-modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-close {
  color: #aaa;
  float: right;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  text-align: center;
  margin-top: 0;
}

/* Login form */

.user-login-form label,
.user-pass label {
  float: left;
  margin-bottom: 15px;
  color: #292929;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}

.login-form-wrapper {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 0px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}

.user-login-form .site-logo-login {
  max-width: 400px;
  margin: 0 auto 10px;
 /* background: rgb(33, 37, 41);*/
}

#edit-name--description, #edit-pass--description {
  display: none;
}

/* Login form end */

/* Style for the loader */
    .loader-container {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
      z-index: 9999; /* Ensure it's above other elements */
    }
    
    .loader {
      border: 4px solid #f3f3f3; /* Light grey border */
      border-top: 4px solid #3498db; /* Blue border for animation */
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite; /* Animation */
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
	
	.side-by-side {
	  display: flex;
	}
	
	.copy-to-clip {
		display: flex;
		align-items: center;
		margin: 10px;
		margin-top: 30px;
	}
	
	.navbar-nav .nav-link {
	  padding: 0.5rem 1rem;
	  margin: 0 10px;
	  color: white;
	  text-transform: uppercase;
	  font-weight: bold;
	}

	.navbar-nav .nav-link:hover {
	  color: #007bff;
	}
	
	.navbar-brand img {
		margin-left: 15px;
	}
	
	.view-content {
		padding-bottom: 20px;
	}
footer {
  padding: 1rem 0 0 0;
}
.form--inline .form-actions {
  clear: none !important;
}
ul {
  padding-left: unset;
}
input#edit-submit-shared-links,
input#edit-submit-devices,
input#edit-reset {
  margin-top: 1em;
}

/* Device Responsive */

@media(max-width:575.98px) {
  input#edit-field-photos-0-remove-button.button.js-form-submit.form-submit.btn.btn-primary {
    margin-top:30%;
  }
  input#edit-reset {
    margin-left:0;
  }
  [name^="field_photos_"],
  [name^="field_highlight_images_"] {
    margin-top:1em;
  }
  [name^="field_slider_images_"] {
    margin-top:5em;
  }
  .form--inline .form-actions {
    clear: none !important;
  }
  div#edit-actions.form-actions.js-form-wrapper.form-wrapper {
    position: relative;
    margin-left: 80%;
  }
  input#edit-submit-shared-links.button.js-form-submit.form-submit.btn.btn-primary {
    position: relative;
    margin-top: 20%;
  }
}
@media only screen and (min-width:576px) and (max-width:767px) {
  [name^="field_photos_"],
  [name^="field_highlight_images_"] {
    margin-top:1em;
  }
  [name^="field_slider_images_"] {
    margin-top:5em;
  }
}
@media(min-width:768px) and (max-width:991.98px) {
  .items {
    display: inline-flex;
  }
  .form--inline .form-actions {
    clear: none !important;
  }
  input#edit-submit-shared-links.button.js-form-submit.form-submit.btn.btn-primary {
    position: relative;
    margin-top: 1.9%;
  }
  [name^="field_photos_"],
  [name^="field_highlight_images_"] {
    margin-top:1em;
  }
  [name^="field_slider_images_"] {
    margin-top:5em;
  }
}
@media(min-width:992px) and (max-width:1199.98px){
 .items {
  display: inline-flex;
 }
 .form--inline .form-actions {
  clear: none !important;
 }
 input#edit-submit-shared-links.button.js-form-submit.form-submit.btn.btn-primary {
  position: relative;
  margin-top: 1.7%;
 }
 [name^="field_photos_"],
 [name^="field_highlight_images_"] {
    margin-top:1em;
 }
 [name^="field_slider_images_"] {
    margin-top:5em;
 }
}
@media(min-width:1200px) and (max-width:1500px) {
  
  .form--inline .form-actions {
    clear: none !important;
  }
  input#edit-submit-shared-links.button.js-form-submit.form-submit.btn.btn-primary {
    position: relative;
    margin-top: 1em;
  }
  [name^="field_photos_"],
  [name^="field_highlight_images_"] {
    margin-top:1em;
  }
  [name^="field_slider_images_"] {
    margin-top:5em;
  }
}
@media(min-width:1500px) {
  [name^="field_photos_"],
  [name^="field_highlight_images_"] {
    margin-top:1em;
  }
  [name^="field_slider_images_"] {
    margin-top:5em;
  }
}
/* User Login form css 
.{
  background-color: rgb(33, 37, 41);
}
*/