/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
/* Customized Colors */
:root {
	--cnvs-themecolor: #6e8f6c;
	--cnvs-themecolor-rgb: 110, 143, 108;

	--cnvs-body-font: 'Montserrat', Arial, sans-serif;
	--cnvs-secondary-font: 'Archivo Black', Arial, sans-serif;

	--cnvs-color-travel: #6F42C1;
	--cnvs-color-tech: #007BFF;
	--cnvs-color-fashion: #E83E8C;
	--cnvs-color-sports: #DC3545;
	--cnvs-color-lifestyle: #13A774;
	--cnvs-color-food: #17A2B8;
	--cnvs-color-market: #FFC107;
	--cnvs-color-light: #F8F9FA;
	--cnvs-color-dark: #3e3e3e;
	--cnvs-color-darkest: #191a1d;
	--cnvs-border: #6a906c;
}
    .main-subheadline {
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: 2.2vw !important;
      font-weight: 600;
      margin-bottom: 38px;
      letter-spacing: -0.5px;
      line-height: .90;
    }
    @media (max-width: 991px) {
    .login-heading {
      font-size: 1.4rem !important;
    }
    .main-subheadline {
      font-size: 1.5rem !important;

    }
}
	.btn-block {
	  display: block;
	  width: 100%;
	  box-sizing: border-box; /* ensures padding and border are included in the width */
	}
	.btn-outlines {
	  border: 1px solid var(--cnvs-border) !important;
	}
	.btn-outlines:hover,
	.btn-outlines:focus {
	  border: 1px solid var(--cnvs-border) !important;
	  background-color: var(--cnvs-color-darkest) !important;
	}
	.btn:hover,
	.btn:focus {
		background-color: var(--cnvs-color-darkest) !important;
	}

.nav-profile-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    background: #eaeaea;
}
.profile-info-mega-menu .fw-bold {
    font-size: 1rem;
    color: #333;
    margin-top: 4px;
    margin-bottom: 0;
}

    
    .upload-btn {
        padding: 10px 15px;
        border-radius: 5px;
        background-color: #007bff;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        border: none;
        transition: background-color 0.3s;
    }

    .upload-btn:hover {
        background-color: #0056b3;
    }
    .tagcloud a {
	    padding: 4px 8px !important;
	    border: 1px solid #678068 !important;
	    font-size: 14px !important;
	    color: #a7f8bb !important;
    }
    
    .card {
	    box-shadow: rgba(0, 0, 0, 0.36) 0px 2px 6px !important;
	   /* background-color: rgba(0, 0, 0, 0.2) !important; */
    }
    .btn {
	    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px !important;
    }
    .button {
	    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px !important;
    }
    .comment-wrap {
	    background-color: rgba(0, 0, 0, 0.2) !important;
	    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px !important;
    }
    .comment-author {
	    color: #ebebeb !important;
    }
    .comment-verbiage {
	 color: #a8a8a8 !important;   
    }
/* Toggle Switch Styling */
.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.toggle input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--cnvs-border);
}
input:checked + .slider:before {
  transform: translateX(26px);
}


/* Loader styling */
	.loader {
	    display: none;
	    border: 5px solid #f3f3f3;
	    border-radius: 50%;
	    border-top: 5px solid #3498db;
	    width: 40px;
	    height: 40px;
	    animation: spin 1s linear infinite;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-left: -20px;
	    margin-top: -20px;
	    z-index: 9999;
	}
	
	@keyframes spin {
	    0% {
	        transform: rotate(0deg);
	    }
	    100% {
	        transform: rotate(360deg);
	    }
	}
/* Overlay styling */
	.overlay_g {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.7);
	    z-index: 9999;
	    justify-content: center;
	    align-items: center;
	}
	/* Spinner container styling */
	.spinner-container {
	  text-align: center;
	}
	.overlay {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.7);
	    z-index: 9999;
	    justify-content: center;
	    align-items: center;
	}
	.progress-container {
	    text-align: center;
	    background: #fff;
	    padding: 20px;
	    border-radius: 10px;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	    width: 90%;
	    max-width: 400px;
	}
	
	.progress-message {
	    font-size: 18px;
	    margin-bottom: 20px;
	    color: #333;
	}
	
	.progress-bar-wrapper {
	    width: 100%;
	    background: #e6e6e6;
	    border-radius: 10px;
	    overflow: hidden;
	    position: relative;
	    height: 20px;
	}
	
	.progress-bar {
	    height: 100%;
	    width: 0;
	    background: #007bff;
	    transition: width 0.4s;
	}
	
	.progress-text {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    font-weight: bold;
	    color: #fff;
	}
/* Style the message box */
	  #messageBox {
	      position: fixed;
	      top: 20px;
	      right: 20px;
	      z-index: 9999;
	      padding: 10px 20px;
	      border: 1px solid #ccc;
	      border-radius: 4px;
	      background-color: #f8f9fa;
	      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	  }
	  /* Success message styling */
	  .message-box.success {
	      background-color: #d4edda;
	      color: #155724;
	      border-color: #c3e6cb;
	  }
	  /* Error message styling */
	  .message-box.error {
	      background-color: #f8d7da;
	      color: #721c24;
	      border-color: #f5c6cb;
	  }
	  .message {
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
        font-weight: bold;
        text-align: center;
    }

    /* Success and Default Message Styling */
    .message.success {
        background-color: #d4edda; /* Light green background */
        color: #155724; /* Dark green text */
        border: 1px solid #c3e6cb; /* Green border */
    }

    /* Error Message Styling */
    .message.error {
        background-color: #f8d7da; /* Light red background */
        color: #721c24; /* Dark red text */
        border: 1px solid #f5c6cb; /* Red border */
    }
    
/* Profile Image */
	.profile-img {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    object-fit: cover; /* Ensures the image is cropped to fit the circle */
	    object-position: center; /* Center the cropped image */
	    border: 2px solid #ddd;
	}
	.profile-img-small {
	    width: 24px;
	    height: 24px;
	    border-radius: 50%;
	    object-fit: cover; /* Ensures the image is cropped to fit the circle */
	    object-position: center; /* Center the cropped image */
	    border: 2px solid #ddd;
	}
	
/* Dropzone */
	.dropzone {
	    border: 2px dashed #007bff;
	    padding: 20px;
	    text-align: center;
	    margin-bottom: 20px;
	    cursor: pointer;
	    background-color: rgba(27, 27, 27) !important;
	    transition: background-color 0.3s ease-in-out;
	    border-radius: 5px;
	}
	
	.dropzone.dragover {
	    background-color: #e6f7ff;
	}
	
	.file-preview-wrapper {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	    gap: 10px;
	    justify-content: center;
	    margin-top: 20px;
	}
	
	.file-preview-tile {
	    width: 100px;
	    height: 100px;
	    background-color: #fff;
	    border: 1px solid #ddd;
	    border-radius: 5px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    text-align: center;
	    overflow: hidden;
	    position: relative;
	    transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	
	.file-preview-tile:hover {
	    transform: scale(1.05);
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
	
	.file-preview-tile i {
	    font-size: 1.5rem;
	    color: #007bff;
	}
	
	.file-preview-tile img {
	    max-width: 80%;
	    max-height: 50px;
	    margin-bottom: 5px;
	}
	
	.file-preview-tile .file-name {
	    font-size: 0.8rem;
	    color: #333;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    width: 90%;
	    text-align: center;
	    margin: 0 auto;
	}
	.upload-form-row {
        display: flex;
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
        gap: 20px; /* Add space between items */
        flex-wrap: wrap; /* Allow wrapping for smaller screens */
    }

    .upload-form-row p {
        margin: 0; /* Remove default margin from paragraphs */
    }
/* File grid/list and items */
	.file-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	    gap: 15px;
	}
	.file-list-container {
	    width: 100%;
	    border-radius: 5px; /* list container radius */
	    overflow: hidden;   /* hide any overflow from rounded corners */
	    border: 1px solid #ddd;
	    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	}
	
	.file-row {
	    display: flex;
	    align-items: center;
	    height: 60px;
	    padding: 8px;
	    border-bottom: 1px solid #ddd;
	    background: rgba(250, 250, 250, 0.60) !important;
	    transition: background 0.3s ease-in-out;
	    flex-wrap: nowrap;
	}
	
	.file-row:hover {
	    background: #e6f7ff;
	}
	
	.folder-item {
	    cursor: pointer;
	}
	
	.file-checkbox {
	    width: 20px;
	    height: 20px;
	    margin-right: 10px;
	}
	
	.file-icon, .folder-icon {
	    font-size: 24px;
	    color: #555;
	    margin-right: 10px;
	}
	
	.file-thumbnail {
	    width: 40px;
	    height: 40px;
	    border-radius: 5px;
	    object-fit: cover;
	    margin-right: 10px;
	}
	
	.file-name {
	    flex-grow: 1;
	    flex-shrink: 1;
	    flex-basis: 0;
	    min-width: 0; /* allow shrinking */
	    font-size: 12px; /* smaller font */
	    text-align: center;
	    color: #333;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    margin: 0 10px;
	}
	.folder-description {
	    flex-grow: 1;
	    flex-shrink: 1;
	    flex-basis: 0;
	    min-width: 0; /* allow shrinking */
	    font-size: 12px; /* smaller font */
	    color: #333;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    margin: 0 10px;
	}
	
	.button-row {
	    flex-shrink: 0; /* keep button container intact */
	    display: flex;
	    gap: 10px;
	}
	
	/* Ensure inline forms inside the button row have no extra margins */
	.button-row form {
	    margin: 0;
	}
	
	/* Uniform button styling */
	.view-btn, .download-btn, .delete-btn {
	    padding: 5px 10px;
	    font-size: 12px;
	    border-radius: 5px;
	    text-decoration: none;
	    text-align: center;
	    color: white;
	    display: inline-block;
	}
	
	.view-btn {
	    background-color: #007bff;
	}
	
	.download-btn {
	    background-color: #28a745;
	}
	
	.delete-btn {
	    background-color: #dc3545;
	    border: none;
	    cursor: pointer;
	}
	
	.view-btn:hover {
	    background-color: #0056b3;
	}
	
	.download-btn:hover {
	    background-color: #218838;
	}
	
	.delete-btn:hover {
	    background-color: #c82333;
	}
	
	/* Full-width search bar */
	.search-container {
	    width: 100%;
	    margin-bottom: 10px;
	}
	
	.search-container input {
	    width: 100%;
	    padding: 8px;
	    font-size: 14px;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	}
/* Gold star icon for the newest file */
	.newest-icon {
	    font-size: 1.5rem;
	    color: gold;
	    z-index: 2;
	}

	/* Share Styling */
    .shared-files-container {
        text-align: center;
        margin-top: 20px;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .shared-files-list {
        list-style: none;
        padding: 0;
        margin: 20px 0;
    }
    .shared-file-item {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #f9f9f9;
    }
    .file-list {
        list-style: disc;
        padding-left: 20px;
        margin-top: 10px;
    }
    .action-buttons {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    .action-btn {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    .edit-btn {
        background: #007bff;
        color: #fff;
    }
    
/* shared display section */
    .shared-files-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .shared-file-header {
        margin-bottom: 0px;
        font-size: 16px;
        color: #333;
    }

    .file-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 11px;
    }

    .file-list li {
        display: flex;
        align-items: center;
        color: #555;
    }

    .shared-file-footer {
        margin-top: 5px;
        font-size: 14px;
        color: #555;
    }

    .action-btn.delete-btn {
        background-color: #f44336;
        color: white;
    }

    .action-btn.delete-btn:hover {
        background-color: #c62828;
    }

    .action-btn.edit-btn {
        background-color: #007bff;
        color: white;
    }

    .action-btn.edit-btn:hover {
        background-color: #0056b3;
    }