/* Main layout adjustments */
   body,
   html {
       height: 100%;
       margin: 0;
       font-family: Arial, sans-serif;
   }

   .dropdown {
       text-align: right
   }

   .dropdown .dropdown-toggle {
       background-color: rgba(0, 0, 0, 0);
       border: 0;
       width: 80px;
       padding: 0;
       text-align: left;
       background-color: #fff;
       border-radius: 50px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       margin-right: 10px;
   }

   .dropdown .dropdown-toggle:active {
       background-color: #c7c7c7;
   }

   .dropdown .dropdown-toggle span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background-color: #ff3c12;
       color: #fff;
       width: 42px;
       height: 42px;
       border-radius: 50%
   }

   .dropdown .dropdown-toggle::after {
       position: absolute;
       content: " ";
       background-image: url("{{ asset('users/assets/images/dropdownArrowBlack.svg') }}");
       width: 20px;
       height: 20px;
       background-size: 20px;
       background-repeat: no-repeat;
       border: 0;
       top: 11px;
       right: 10px
   }

   .dropdown .dropdown-menu {
       border: 1px solid #ff3c12;
       box-shadow: 0 4px 30px rgba(238, 168, 134, .5);
       border-radius: 10px;
       padding: 0;
       overflow: hidden
   }

   .dropdown .dropdown-menu li .dropdown-item {
       color: #414141;
       padding: 10px 15px
   }

   .dropdown .dropdown-menu li .dropdown-item:focus {
       background-color: rgba(0, 0, 0, 0)
   }

   .container-fluid {
       height: 93vh;
       display: flex;
   }

   /* Sidebar styling */
   .sidebar {
       width: 15%;
       background-color: #f5f5f5;
       padding: 10px;
       border-right: 1px solid #ddd;
       overflow-y: auto;
   }

   .sidebar-item {
       background-color: #ffffff;
       border: 1px solid #ddd;
       border-radius: 5px;
       margin-bottom: 15px;
       padding: 10px;
       cursor: pointer;
       transition: background-color 0.2s, transform 0.2s;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .sidebar-item:hover {
       background-color: #e9ecef;
       transform: translateY(-2px);
   }

   .slide-preview {
       width: 100%;
       height: 100px;
       background-color: #f0f8ff;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       border-radius: 5px;
       padding: 5px;
       overflow: hidden;
       position: relative;
   }

   .slide-title-preview {
       font-size: 0.9rem;
       font-weight: bold;
       color: #333;
       text-align: center;
       line-height: 1.2;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       width: 90%;
   }

   .slide-subtitle-preview {
       font-size: 0.75rem;
       color: #666;
       text-align: center;
       margin-top: 5px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       width: 80%;
   }

   .slide-decor {
       position: absolute;
       width: 20px;
       height: 20px;
       background-color: #4cd137;
       border-radius: 50%;
       bottom: 10px;
       right: 10px;
       text-align: center;
       font-size: 13px;
   }

   /* Main content styling */
   .main-content {
       width: 85%;
       padding: 40px;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #f8f9fa;
   }

   .slide {
       width: 100%;
       max-width: 100%;
       background-color: #ffffff;
       /* padding: 30px; */
       border-radius: 8px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .share-ppt {
       text-decoration: none;
       padding: 7px;
       color: #212529;
   }

   .share-ppt:hover {
       text-decoration: none;
       padding: 7px;
       color: #303030;
       border-bottom: 1px solid #303030;
   }

   .share-ppt.active {
       text-decoration: none;
       border-bottom: 1px solid #0d6efd;
       padding: 7px;
       color: #0d6efd;
   }

   .dropdown-container {
       position: relative;
       width: 200px;
       cursor: pointer;
   }

   .dropdown-header {
       padding: 10px;
       border: 1px solid #ccc;
       border-radius: 25px;
       background-color: #fff;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 16px;
       font-weight: 600;
       width: 220px;
       margin-top: 7px;
   }

   .dropdown-header::after {
       content: '▼';
       font-size: 12px;
       margin-left: 10px;
   }

   .dropdown-content {
       display: none;
       position: absolute;
       /* top: -355px; */
       left: 12px;
       width: 320px;
       border: 1px solid #ccc;
       border-radius: 5px;
       background-color: #fff;
       overflow: hidden;
       z-index: 1;
       padding: 10px;
       height: 350px;
       overflow: auto;
   }

   .dropdown-content::-webkit-scrollbar {
       width: 6px;
   }

   .dropdown-content::-webkit-scrollbar-track {
       box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   }

   .dropdown-content::-webkit-scrollbar-thumb {
       background: linear-gradient(110deg, #FF3C12, #000080);
   }

   .dropdown-content .colorHeading {
       text-transform: uppercase;
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 8px;
   }

   .dropdown-container.open .dropdown-content {
       display: block;
   }

   .color-option {
       /* display: flex; */
       align-items: center;
       /* padding: 5px 10px; */
       cursor: pointer;
       transition: background-color 0.2s;
       justify-content: center;
       border: 1px solid #ddd;
       border-radius: 5px;
       padding: 10px;
   }

   .color-option .innerText {
       font-size: 13px;
       margin: 0 0 5px 0;
   }

   .color-option:hover {
       background-color: #f0f0f0;
   }

   .color-palette {
       display: flex;
       /* gap: 2px; */
   }

   .color-box {
       width: 46px;
       height: 35px;
       border-radius: 0;
   }

   .color-box:first-child {
       border-radius: 5px 0 0 5px;
   }

   .color-box:last-child {
       border-radius: 0 5px 5px 0;
   }

   .color-box.color-box2 {
       width: 69px;
   }

   .color-box.color-box3 {
       width: 90px;
   }

   #overlay {
       position: fixed;
       top: 0;
       z-index: 100;
       width: 100%;
       height: 100%;
       display: none;
       background: rgba(0, 0, 0, 0.6);
   }

   .cv-spinner {
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 10px;
   }

   .spinner {
       width: 40px;
       height: 40px;
       border: 4px #ddd solid;
       border-top: 4px #FF451C solid;
       border-radius: 50%;
       animation: sp-anime 0.8s infinite linear;
   }

   @keyframes sp-anime {
       100% {
           transform: rotate(360deg);
       }
   }