/* Style the tab */



.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.log_in_outer {
	width: 100%;
}
.log_in_inner {
	margin: 0 auto;
	width: 464px;
	background-color: #faf9f9;
	padding: 0 19px 22px;
	border: solid 1px #ccc;
	position: relative;
	top: 50px;
	box-sizing: border-box;
	border-radius: 5px 5px 4px 4px;
	display: table;
}
h2.heading {
	margin: -1px -20px 8px !important;
	text-align: center;
	background-color: #337ab7;
	padding: 13px 10px;
	box-sizing: border-box;
	color: #fff;
	text-transform: capitalize;
	border-radius: 5px 5px 0px 0px;
}
h2.heading::after, h2.heading::before {
	display: table;
	content: "";
	clear: both;
	box-sizing: border-box;
}

.log_in_inner .btn.btn-primary {
	padding: 4px 27px 5px;
	font-size: 17px;
	float: left;
}
.log_in_inner input {
	height: 39px;
}
.log_in_inner label {
	font-size: 17px;
	font-weight: 500;
}

 
        h3 {
            margin: 55px !important;
            margin-top: 40px !important;
        }
 
        h5 {
            margin: 0px;
            display: flex;
            padding: 10px;
            background-color: #708090;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            color: #ffffff;
            font-weight: bold;
        }
 
        .input-group {
            display: flex;
            gap: 25px;
            margin-top: -20px;
            margin-left: 0px;
            padding-left: 50px;
        }
		 .click-button {
            display: flex;
            gap: 10px;
			margin-top: 10px;
        }
 
        .input-block {
            width: 20%;
            height: 40px;
            padding: 10px;
            border-radius: 5px;
            border: 2px solid #dc3545;
        }
 
        #fetchImages {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #28a745;
            color: #fff;
            cursor: pointer;
            margin-top: 20px;
            margin-left: 50px;
        }
		  #resetAll {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #3822E4;
            color: #fff;
            cursor: pointer;
            margin-top: 20px;
            margin-left: 20px;
        }
		#resetAll:hover {
            background-color: #241692;
        }
 
        #fetchImages:hover {
            background-color: #218838;
        }
 
        .image-container {
            margin: 20px 50px;
            margin-top: 40px;
        }
 
        .image-container h4 {
            margin-top: 50px;
        }
 
        .images {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
 
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}
 
.image-row {
    display: flex;
    align-items: center;
}
 
.image-item img {
    width: 150px; 
    height: 150px;
    margin-right: 10px;
}
 
img{
	width: 150px; 
    height: 150px; 
    margin-right: 10px;
}
 
.image-item input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 15px;
}
 
.image-dimensions {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
	font-size: 15px;
}
 
        .loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(6px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
 
        .loader {
            width: 100px;
            height: 100px;
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
 
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
 
        .progress-text {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }

		#controler-btns{
			justify-content: center;
		}

.control-buttons {
    display: flex;
    justify-content: center; 
    gap: 15px; 
    margin-top: 20px; 
	margin-bottom: 40px;
}
 
/* Style for each button */
#selectAllbtn {
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 150px; 
    height: 40px; 
}
 
#confirmDownloadButton {
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 250px; 
    height: 40px; 
}
 
#deleteSelectedButton {
    background-color: #e34141; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 250px; 
    height: 40px; 
}
 
#unselectAllbtn,#goBackButton  {
    background-color: #ffc107; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 150px; 
    height: 40px; 
}
 
#downloadcreateurl {
    background-color: #007bff; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 250px; 
    height: 40px; 
}
 
/* Hover effect for buttons */
#selectAllbtn:hover {
    background-color: #218838; 
}
 
#unselectAllbtn:hover {
    background-color: #e0a800; 
}
 
#downloadcreateurl:hover {
    background-color: #0056b3; 
}
 
/* Optional: Focus effect for accessibility */
.control-buttons button:focus {
    outline: 2px solid #0056b3; 
    outline-offset: 2px; 
}
 
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}
 
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
	
}
 
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
 
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
 
.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
 
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px; /* Adjust the width as needed */
}
 
.image-item img {
    max-width: 100%;
    margin-bottom: 10px;
}
 
.confirmation-controller-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}
 
.image-dimensions {
    text-align: center;
}
 
 
.confrimation-controler-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}
 
.image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; /* Space between each image item */
}
 
.image-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Gap between checkbox and image */
}
 
.image-row img {
    max-width: 150px; /* Adjust width as needed */
}
 
.image-dimensions {
    margin-top: 5px; /* Space between image and dimensions */
    font-size: 12px; /* Smaller font size for dimensions */
    text-align: center;
    color: #333; /* Color of the dimensions text */
	font-size:14px;
}
 
 
#headingDownloadReport{
			margin-top: 25px;
            display: flex;
            padding: 10px;
            background-color: #708090;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            color: #ffffff;
            font-weight: bold;
			font-size:20px;
			justify-content:left;
			margin-left:55px;
			margin-right:55px;
}
 
.search-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }
	#searchby {
        margin: 0;
        font-size: 16px;
    }
    select {
        padding: 5px;
        font-size: 16px; /* Match the font size with the label */
    }
	 .input-block-report {
            width: 32%;
            height: 40px;
            padding: 10px;
            border-radius: 5px;
            border: 2px solid #dc3545;
			margin-top: 20px;
			margin-left:55px;
        }
	#downloadButtonReport {
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 250px; 
    height: 40px; 
	margin-left:25px;
}	
#downloadButtonReport:hover {
    background-color: #006400; 
}
 
.imagesData{
	margin-bottom:55px;
}
h6{
	margin-bottom: 20px !important;
    font-weight: bold!important;
	margin-left: 50px!important;
    margin-top: 25px!important;
}

#fetchUrlImage{
	background-color: #555555; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 150px; 
    height: 40px; 
}
#fetchUrlImage:hover {
    background-color: black; 
}
 
#imageUrlInput {
    width: 100%;
    max-width: 600px;
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #435b70;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 25px;
}
 
    #imageUrlInput:focus {
        border-color: #007bff;
    }
 
    #imageUrlInput::placeholder {
        color: #aaa;
        font-style: italic;
    }	
	
	.modal-noimageresponse {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content-noimageresponse {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-btn-noimageresponse {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.modal-btn-noimageresponse:hover {
    background-color: #45a049;
}

#showUrlImage{
	background-color: #555555; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    padding: 10px 20px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    width: 200px; 
    height: 40px; 
	margin-left:10px;
}
#showUrlImage:hover {
    background-color: black; 
}
		/* Style for the main container holding the table */
#imageTableContainer {
    margin: 20px auto;                 /* Center the container */
    margin-left: 40px;
    margin-right: 40px;                /* Maximum width */
    border: 2px solid #dc3545;            /* Light gray border */
    border-radius: 8px;                /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow: hidden;                  /* Rounded corners effect */
}

/* Style for the table heading */
.image-table-heading {
    font-family: 'Arial', sans-serif;  
    font-size: 24px;                  
    color: black;                    
    margin: 15px;                      
    text-align: center;                
	height:0px;
	font-weight:bold;
	
}

/* Table styling */
.image-table {
    width: 100%;                       
    border-collapse: collapse;         
}

/* Table header styling */
.image-table th {
    background-color: #708090;        /* Green background */
    color: white;                     /* White text */
    padding: 12px;                    /* Padding for cells */
    text-align: left;                 /* Align text to the left */
    font-weight: bold;                /* Bold text */
}

/* Table cell styling */
.image-table td {
    border: 1px solid #ddd;           /* Gray border */
    padding: 10px;                    /* Padding for cells */
    text-align: left;                 /* Align text to the left */
    font-family: 'Arial', sans-serif;  /* Font family */
}

/* Hover effect for table rows */
.image-table tr:hover {
    background-color: #f9f9f9;        /* Light gray on hover */
}

/* Style for the image URL */
.image-url {
    color: #007BFF;                   /* Blue color for URLs */
    text-decoration: none;            /* No underline */
    transition: color 0.3s;           /* Smooth transition */
}

/* Change color on hover for image URLs */
.image-url:hover {
    color: #0056b3;                   /* Darker blue on hover */
    text-decoration: underline;       /* Underline on hover */
}

/* Responsive styling */
@media (max-width: 600px) {
    .image-table {
        font-size: 14px;              /* Smaller font size on small screens */
    }
}
}