/*@media (max-width: 768px) {
  .menu_icon {
    color: #55b2da !important;
  }
}

@media (max-width: 768px) {
  #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #55b2da !important;
  }
}*/

/*++++++++ START Icon & Link on app index page ++++++++*/
.wrapper{
	text-align: left;
	padding-bottom:25px;
}
.wrapper.item{
	display: inline-block;
}
.icon-index-app{
	font-size: 30px; 
	color: rgb(29,119,210); 
	display: inline-block; 
	margin-right:10px;
}
/*++++++++ END Icon & Link on app index page ++++++++*/


.lightbox_cn {
	border-radius:4px !important;/*lightbox image border radius*/
}

.img-thumbnail-round{
  width: 100px; /* Set the fixed width */
  height: 100px; /* Set the fixed height */
  border-radius: 50%; /* Make the image circular */
  object-fit: cover; /* Ensure the image covers the entire area */
	}

/*,.,.,.,.,.*/

/*
.menu_icon {
  color: #fdb814;
}*/

.btn-xl.button_color {
  color: #ffffff;
  background-color: #327fe7;
}

.section_app {
  /*background-color: #fdb814;*/
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #c92bff;
}

.brand_kayla {
  margin-bottom: 0px;
  color: #d354ff;
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  font-size: 38px;
  text-shadow: 1px 1px 2px #FFFFFF, 0 1px 2px #FFFFFF, -1px 1px 2px #FFFFFF, -1px 0 2px #FFFFFF, -1px -1px 2px #FFFFFF, 0 -1px 2px #FFFFFF, 1px -1px 2px #FFFFFF, 1px 0 2px #FFFFFF;
  /*text-shadow: 1px 1px 4px #FFFFFF, 0 1px 4px #FFFFFF, -1px 1px 4px #FFFFFF, -1px 0 4px #FFFFFF, -1px -1px 4px #FFFFFF, 0 -1px 4px #FFFFFF, 1px -1px 4px #FFFFFF, 1px 0 4px #FFFFFF;*/
  /*text-shadow: 1px 1px 0 #ffffff, 0 1px 0 #ffffff, -1px 1px 0 #ffffff, -1px 0 0 #ffffff, -1px -1px 0 #ffffff, 0 -1px 0 #ffffff;*/
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #dd71ff !important;
  border-color: #e0a8f4 !important;
  color: #fff;
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: #fdf9ff;
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-primary {
  color: #fff;
  /*background-color: #fed136;*/
  background: #d074ef !important;
  /*border-color: #fed136;*/
}

.img_download_btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #DB6DF1;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-top: 5px; /* Adjust spacing as needed */
  border-radius: 5px; /* Optional: Add rounded corners */
  font-weight:600;
  
  /*Works with below hover transition*/
   transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added transition for the original state */
  opacity: 1; /* Ensure original state is fully opaque */
}

.img_download_btn:hover {
  color: #FBE4FF;
  text-align: center;
  background-color: #EB8CFE;
  transform: scale(1.05);
  
  /*Works with above transition*/
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0.9; /* Added opacity change on hover */  
}
.gallery-column {
    /* Add this to center the button and title within the column */
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center the content */
	    border: 2px solid #DB6DF1;
    border-radius: 7px;
}
.spaced-column {
  padding: 5px; /* Creates 5px spacing on all sides */
}

#mainNav .navbar-toggler {
  font-size: 12px;
  right: 0;
  padding: 13px;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  background-color: #cd5cf4 !important;
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
}



ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #cd5cf4;
}

		
/*333333333333333 -CN- START ToolBaz AI css -CN- 333333333333333-----------*/

        body {
            background-color: #f8f9fa;
        }

        .container {
            margin-top: 20px;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            border-radius: 5px;
            z-index: 1000;
            opacity: 1;
            transition: opacity 0.5s ease-out;
        }

        .notification.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .notification.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .fade-out {
            opacity: 0;
        }

        .img-thumbnail {
            max-width: 100px;
            max-height: 100px;
            object-fit: cover;
        }

        /* Center the content */
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* Make sure it covers the full viewport height */
        }

        /* Style for the content within the container */
        .content {
            width: 100%;
            max-width: 900px; /* Adjust as needed */
        }
		
		.app_heading{
			font-size: 50px;
			color: #327fe7;
			font-weight: bold;
			margin-bottom:30px;
		}
		
		.btn-edit-blue{
			background-color:#0078CA !important;
			color:#FFFFFF !important;
		}
		
		.btn-create-green{
			background-color:#5F9A69 !important;
			border-color:#2FBC18 !important;
			margin-top:5px;
			color:#FFF !important;
		}
		
		.btn-create-green:hover {
  		background-color: #50A742 !important; /* Green */
  		color: white !important;
		}
		
		.form-font{
			color:#FFF;
			font-weight:600;
		}
		
		/*Remove ugly file field and style the lable to use as a button*/
		.form-control-file{
			display:none;
			
		}
		
		.form-control-file-label{
			padding:12px 8px;
			width:200px;
			background-color:#343A40;
			color:#FFF;
			text-align:center;
			border-radius:5px;
			cursor:pointer;
			
		}
		
		.form-control-file-label:hover{
			background-color:#4C4C4C;
		}
		
		.sort{
			height:50px;
			vertical-align:central;
			text-align:center;
			/*margin-top:25px;*/
			margin-left:12px;
		}
		.sorter_td:hover{
			background-color:#DB6DF1;
			
		}


		.sort:hover{
			cursor:move;
		}
		
		.rounded_table{
		border-spacing: 0;
		border-collapse: separate;
		border-radius: 8px;
		/*border: 1px solid black;*/
		overflow: hidden;
			
		}
		
	

		
		/*For not highlighting table row thead*/
		.rounded_table thead tr:hover {
		  text-decoration-line: none; /* Remove underline */
		  text-decoration-color: initial !important; /* Reset color */
		  text-decoration-thickness: initial; /* Reset thickness */
		  text-underline-offset: initial; /* Reset offset */
		  font-weight: normal !important; /* Reset font weight */
		}

		/* Keep the hover effect for table rows in tbody */
		.rounded_table tbody tr:hover {
		  text-decoration-line: underline;
		  text-decoration-color: #DB6DF1 !important;
		  text-decoration-thickness: 5px;
		  text-underline-offset: 0.25em;
		  font-weight: normal !important;
		}
	
	
		
		/*START Divs on app homepage*/
		.container {
		  /*display: flex;
		  flex-direction: row;
		  flex-wrap: nowrap;
		  align-items: flex-start;*/
		}

		.item {

		  width: 100%; /* Adjust as needed */
		  height: 50px; /* Adjust as needed */
		  /*background-color: green;*/
		  /*margin-right: 20px;*/ /* Space between items */
		  /*display: flex;*/
		  /*align-items: left;*/
		  /*justify-content: flex-start;*/
		  text-align:left;
		}

		.item a {
					  color:#000 !important;
		  /*color: white;*/
		  text-decoration: none;
		  font-weight:700;
		  font-size:20px;
		}
		
		.item a:hover {
		  color: #F090FF !important;
		  text-decoration: none;
		  font-weight:700;
		  font-size:22px;
		}	
		/*END Divs on app homepage*/
		.login_btn{
		background: #327fe7;
		color: #FFFFFF !important;
		border-radius:5px;
		padding:8px;
		width:100px;
		margin:auto;
		}
		
		.login_btn:hover{
		background: #5D9BEF;
		color:#FFF;
		}
		
		.intro-text-login{
			margin-top:6em;
			
		}

		input[type="radio"] {
		appearance: none;
		width: 18px;
		height: 18px;
		border: 1px solid #327fe7;
		border-radius: 50%;
		outline: none;
		background-color: white;
		cursor: pointer;
		}

		.welcome_color{
			color: #cd5cf4;
			
		}

		/* ----------START MEDIA QUERIES---------- */
		
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .content {
                padding: 10px;
            }
        }

		/* ----------END MEDIA QUERIES---------- */
		
/*333333333333333 -CN- END ToolBaz AI css -CN- 333333333333333-----------*/


/* 333333333333333 -CN- END ToolBaz AI css -CN- 333333333333333----------- */

		@media (max-width: 767px) {
		  .clean-block.slider.dark.small_screen_top_margin_cn {
			margin-top: 30px !important;
		  }
		}
	

		@media (max-width: 768px) {
		  .menu_icon {
			color: #55b2da !important;
		  }
		}
		
		@media (max-width: 768px) {
		  #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
			color: #55b2da !important;
		  }
		}
		
		

.fancybox_title{
	color:#F2A0FF !important;
	text-align:center;
	margin-bottom:-10px !important;
	
}
.fancybox_description{
	display: block;
	
	text-align:center !important;
}