@import url('https://fonts.googleapis.com/css2?family=KoHo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coda&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto Sans Arabic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu Sans&display=swap');


        .pBackStart {
            overflow: hidden; /* Hide any content overflowing from the container */
			height:100%;

        }
.pBackSignIn{

	background-color: #fefefe;
	font-family: 'Open Sans Condensed', Arial, Verdana, sans-serif;
	margin-left: 0px;
	margin-right: 0px;
	margin-top:0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom:0px;
	
	width: 100%;
	height: 100%;	
	overflow: hidden;

	background-color: #869ED5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%237aa1c6' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%2370a1b5' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23689da2' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23658985' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%2362716C' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%2366a596' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2378cbbe' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2395e7e1' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23bcf7f8' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23EDFDFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;

	/*background:linear-gradient(
      rgba(54, 56, 64, 0.7), 
      rgba(54, 56, 64, 0.7)
	  
    ),url(../../images/SignIn_bg.jpg) ;
	
    background-position: top center;
	background-attachment:fixed;
    background-repeat:no-repeat;
	
	-webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
  background-size: 100% 100%;


	-webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
  background-size: 100% 100%;*/
}

.Pagecontainer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 50px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;	
    width: 100vw;
	overflow-y: auto;
	background-color: transparent !important;
}


.force-reflow {
    display: none;
}


.ChoiceButton{


    background-color: transparent !important;
    border: 2px solid #CD5C5C;
    color: #CD5C5C;
    padding: 8px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 4px;

	animation: fadeInDown 1.5s ease-out forwards, slideInDown 1.5s ease-out forwards;
	
	
}


.custom-link {
    color: #ffffff;  /* Change this to your desired color */
    text-decoration: underline;  /* Optional: Add underline to the link */
	font-weight: bold;
    font-family: 'KoHo', sans-serif;	
	font-size: 18px !important;	
}




.custom-link:hover {
	color:yellow;
}



.chat-image {
    max-width: 25%;  /* Adjust the width as needed */
    height: auto;
    display: inline-block;
    margin-top: 10px;  /* Adjust the spacing between the message and the image */
    margin-left: auto;
    margin-right: auto;


 
}
.chat-image-round {
    max-width: 25%;  /* Adjust the width as needed */
    height: auto;
    display: inline-block;
    margin-top: 10px;  /* Adjust the spacing between the message and the image */
    margin-left: auto;
    margin-right: auto;


    overflow: hidden; /* Hide any parts of the image that extend beyond the container */
    object-fit: cover; /* Ensure the full image is visible inside the container */
    border-radius: 50%; /* Make the image round */
	
}







/* Chat container styles */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
    padding-top: 25px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
    box-sizing: border-box;
    width: 100vw;
    top: 0;
    left: 0;
	overflow-y: auto;
   /*         display: flex;
            flex-direction: column;
            height: calc(100vh - 50px);
            background-color: #f5f5f5;
            padding: 20px;
            box-sizing: border-box;
            width: 100vw;
    */

}



.dateTimeNow {
    font-size: 12px;
    color: #aaa;

}

.message-start {
    width: 100%;
    border-top: 1px solid #eee;

}


.user-name{
    font-size: 12px;
    color: #aaa !important;
	font-weight: bold;
 	
}

/*Openai*/
.openai-iframe {
    width: 100%;
    height: auto;
    overflow-y: hidden;
    border: 0;
}



    .openai-content {
        /* Set maximum width and height for the container */
        max-width: 90%;
		max-height:100%;
        overflow-y: auto; /* Enable vertical scrolling */
        margin: 0;
        padding: 0;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
    }

    .openai-content p,
    .openai-content h1,
    .openai-content h2,
    .openai-content h3,
    .openai-content h4,
    .openai-content h5,
    .openai-content h6 {
        /* Add styles for text elements */
        margin-top: 0;
        margin-bottom: 1rem;
        font-weight: normal;
    }

    .openai-content a {
        /* Add styles for links */
        color: #007bff;
        text-decoration: underline;
    }

    .openai-content a:hover {
        /* Add styles for links on hover */
        color: #0056b3;
        text-decoration: underline;
    }
/*End Openai*/
/* Chat box styles */
.chat-box {
 /*   flex: 1;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow-y: scroll;
    margin-top:30px;*/
	
	
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Enable vertical scrolling */
    margin-top: 30px;
	height:auto;
}

/* Hide scrollbar for webkit browsers (e.g., Chrome, Safari) */
.chat-box::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for non-webkit browsers */
.chat-box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}




.chat-message {
    margin-bottom: 2px;
    padding: 10px 5px;
    border-radius: 10px;
    font-size: 16px;
    max-width: 99vw;
}



.user-message {
    
	background-color: transparent !important;/*#9AD0C2;*/
    /*color: #CD5C5C;*/
	color: #000000;
    align-self: flex-end;
    font-family: 'KoHo', sans-serif;	
	font-size: 16px !important;
    font-weight: bold;
    margin-bottom:-10px;
}

.bot-message-ChatBot {
	background-color: transparent !important;/*#CD5C5C;*/
    /*color: #CD5C5C;*/
	color: #000000;
    align-self: flex-start;
	font-family: 'KoHo', sans-serif;
	font-size: 16px !important;
	
}

.bot-message-FreeAI-En {
	background-color: transparent !important;/*#CD5C5C;*/
    /*color: #CD5C5C;*/
	color: #000000;
    align-self: flex-start;
	font-family: 'KoHo', sans-serif;
	font-size: 16px !important;
	text-align:left;
	direction: ltr; /* Add this line */
}


.bot-message-FreeAI-Ar {
	background-color: transparent !important;/*#CD5C5C;*/
    /*color: #CD5C5C;*/
	color: #000000;
    align-self: flex-start;
	font-family: 'Noto Sans Arabic', sans-serif;
	font-size: 16px !important;
	text-align:right;
	direction: rtl; /* Add this line */
}


.code-highlight{
    background-color: #CD5C5C;
    color: #ffffff;
	font-family: 'Noto Sans Arabic', sans-serif;
	font-size: 14px !important;	
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	padding-bottom:20px;
	border-radius: 10px;
}




.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
}

/*****/

.chat-options {
    margin-bottom: -10px;
    text-align: right;
}

.btn-print, .btn-copy, .btn-speak {
    margin-right: 10px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    background-color: transparent;
    color: #6c757d; /* Dark gray font color */
    border: none;
    border-radius: 4px;
    transition: color 0.3s ease;
}

.btn-print {
    background-image: url('../../Images/print.png'); /* Print icon */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px; /* Size of the icon image */
    padding-left: 30px; /* Adjust padding to fit the image */
}

.btn-copy {
    background-image: url('../../Images/copy.png'); /* Copy icon */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px; /* Size of the icon image */
    padding-left: 30px; /* Adjust padding to fit the image */
}

.btn-speak {
    background-image: url('../../Images/speak.png'); /* Copy icon */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px 24px; /* Size of the icon image */
    padding-left: 30px; /* Adjust padding to fit the image */
}

.btn-print:hover, .btn-copy:hover {
    color: #495057; /* Darker gray font color on hover */
}

.btn-print:focus, .btn-copy:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

/*****/

.intro-message {
    color: #202020;
    align-self: flex-start;
	font-family: 'KoHo', sans-serif;
	font-size: 20px !important;
	font-weight: none;
	
    opacity: 0;
    animation: fadeInDown 1.5s ease-out forwards, slideInDown 1.5s ease-out forwards;


}
.textbox-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
	
    overflow-y: auto; /* Enable vertical scrolling */
   /* max-height: 60px; /* Adjusted max height for the textbox container */	

 
}


	
.QRCode-Image{

  width:250px !important;
  height: 250px !important;
  
}	
	
	
.textbox {
    flex: 1;
    width: calc(100% - 120px); /* Adjust as needed */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-right: 10px;
	margin-left: 0px;
    box-sizing: border-box;
}


.textbox-popup {
    flex: 1;
    width: calc(100% - 20px); /* Adjust as needed */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-right: 5px;
	margin-left: 5px;
	margin-bottom:10px;
    box-sizing: border-box;
}


.label-popup{
    font-size: 16px;
	font-family: 'Cairo', sans-serif;
	text-align:left;
	align:left;
	display:block;
	padding-left:10px;
	padding-bottom:2px;
	font-weight: bold !important;
}

.textbox-setting {
    display:flex;
    width: calc(100% - 20px); /* Adjust as needed */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-right: 5px;
	margin-left: 5px;
	margin-bottom:10px;
    box-sizing: border-box;
	resize: none;
}



.button-container {
    float: left;
    margin-right: 10px; /* Add some right margin to separate the button from the label */
	margin-left: 10px;

	padding-top:60px;
	    display: flex;

}

.process-button{
    width: 100px; /* Adjust as needed */
    padding: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
	font-family: 'KoHo', sans-serif;
    cursor: pointer;
}

/***********Language Button********/

/* Style the dropdown list like the send button */
.custom-dropdown {
    width: 90px; /* Adjust as needed */
    padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 17px;
	padding-right: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none; /* Border color, you can change to none if desired */
    border-radius: 5px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    appearance: none; /* Remove default dropdown arrow */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.custom-dropdown:hover {
    color: #FFFF33;
}

/* Style the dropdown arrow */
.custom-dropdown::-ms-expand {
    display: none; /* Remove default arrow in IE */
}

/* Additional styling to enhance the dropdown */
.custom-dropdown-container {
    position: relative;
    display: inline-block;
    width: 100px; /* Adjust as needed */
	padding-left:10px;
	
 }

.custom-dropdown-container23::after {
    content: '\25BC'; /* Downward arrow symbol */
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;

}

/************End Language Button*************/

.send-button {
    width: 100px; /* Adjust as needed */
    padding: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
	font-family: 'KoHo', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
	
    background-image: url('../../Images/send.png'); /* Set default background image */
    background-repeat: no-repeat;
    background-size: 24px 24px; /* Adjust the size of the image to fit the button */
    background-position: 5px center; /* Center the image */	
	padding-left:30px;
}

.send-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}

.datasense-button {
    width: 70px;
	height:auto;
    /*height: 45px;*/
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-family: 'KoHo', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    /*background-color: red; /* Change this to any color */
    

}


.voice-button {
    width: 100px; /* Adjust as needed */
    padding: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
	font-family: 'KoHo', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
	
    /*background-image: url('../../Images/send.png'); /* Set default background image */
    /*background-repeat: no-repeat;
    /*background-size: 24px 24px; /* Adjust the size of the image to fit the button */
    /*background-position: 5px center; /* Center the image */	
	margin-left:10px;
}

.voice-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}




.document-button {
    width: 100px; /* Adjust as needed */
    padding: 10px;
	margin-left:10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
	font-family: 'KoHo', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
	
    background-image: url('../../Images/settings.png'); /* Set default background image */
    background-repeat: no-repeat;
    background-size: 24px 24px; /* Adjust the size of the image to fit the button */
    background-position: 5px center; /* Center the image */	
	padding-left:30px;	
}

.document-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;

}
.send-button-WithIcon {
    width: 50px; /* Adjust as needed */
    height: 50px;
    padding: 0; /* Remove padding */
    background-image: url('../../Images/send.png'); /* Set default background image */
    background-repeat: no-repeat;
    background-size: 50px 50px; /* Adjust the size of the image to fit the button */
    background-position: center; /* Center the image */
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    transition: filter 0.3s ease; /* Transition for filter property */
    animation: none; /* Disable animation by default */
    opacity: 1; /* Set default opacity */
}

.send-button-WithIcon:hover {
    background-image: url('../../Images/sendHover.png'); /* Set hover background image */
    animation: fadeAnimation 0.5s ease-in-out infinite alternate; /* Apply fade animation on hover */
}

.send-button-WithIcon:active {
    background-image: url('../../Images/sendHover.png'); /* Set active background image */
    animation: fadeAnimation 0.5s ease-in-out infinite alternate; /* Apply fade animation when pressed */
}

@keyframes fadeAnimation {
    from {
        opacity: 1; /* Start with full opacity */
    }
    to {
        opacity: 0.8; /* End with slightly reduced opacity */
    }
}



    .input-container {
        display: flex;
        align-items: baseline;
        gap: 10px; /* Adjust the gap between elements */
    }



.document-button-WithIcon {
    width: 50px; /* Adjust as needed */
    height: 50px;
	margin-left:20px;
    padding: 0; /* Remove padding */
    background-image: url('../../Images/document.png'); /* Set default background image */
    background-repeat: no-repeat;
    background-size: 50px 50px; /* Adjust the size of the image to fit the button */
    background-position: center; /* Center the image */
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    transition: filter 0.3s ease; /* Transition for filter property */
    animation: none; /* Disable animation by default */
    opacity: 1; /* Set default opacity */
}

.document-button-WithIcon:hover {
    background-image: url('../../Images/document.png'); /* Set hover background image */
    animation: fadeAnimation 0.5s ease-in-out infinite alternate; /* Apply fade animation on hover */
}

.document-button-WithIcon:active {
    background-image: url('../../Images/document.png'); /* Set active background image */
    animation: fadeAnimation 0.5s ease-in-out infinite alternate; /* Apply fade animation when pressed */
}


/*Bottom Menu*/

        /* Container for the icon and text */
        .seetingMenu-container {

            display: flex;
            justify-content: left !important;
            align-items: left !important;
            height: 40px;
            cursor: pointer;
            color: transparent;
            flex-direction: column;
            transition: transform 0.4s;
			margin-top:0px;
			margin-left:0px;			
			
        }

        /* Styles for the menu icon */
        .seetingMenu-icon {
            padding: 0px;
        }

		.menu-icon-img {
			width: 70px;
			height:auto;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			font-family: 'KoHo', sans-serif;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}


    

        /* Styles for the text */
        .seetingMenu-text {
            margin-left: 10px;
            font-size: 18px;
            color: #333;
			font-weight: bold;
			font-family: 'Tajawal', sans-serif !important;	

        }
		

        /* Styles for the popup menu */
        .seetingMenu-popup {
            
			display: none;
		/* background-color: #86A789;*/
			position: fixed;
			bottom: 100px; /* Adjusted for menu height */
			right: 20px; /* Adjusted for menu width */
			width: 20%;
			height: calc(100vh - 500px); /* Full viewport height minus menu height */
			z-index: 999;
			overflow-y: auto;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			  transition: all 0.3s ease;
			background-image: linear-gradient(45deg, #eeeeee 0%, #fffcfc 100%) !important;			
			
        }

        .seetingMenu-popup button {
            width: 100%;
            padding: 12px 16px;
            text-align: left;
            border: none;
            background-color: transparent;
            cursor: pointer;
        }


        .seetingMenu-popup button:hover {
            background-color: #f1f1f1;
        }
		
		.popup-item {
			display: flex;
			align-items: center;
			cursor: pointer;

		}
		
		.popup-item:hover {
			background-color: #f1f1f1;
			border-radius: 4px;
		}

		
		.popup-item:last-child {
			margin-bottom: 0;
		}		
		
		.BottomMenu-button {
			width: 50px;
			height:auto;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			font-family: 'KoHo', sans-serif;
			cursor: pointer;
			transition: background-color 0.3s ease;
			
			/*background-color: red; /* Change this to any color */
			
		
		}		

/*End Bottom Menu*/


.action-container {
    display: flex;
    justify-content: space-between;

            flex-direction: row;
			
}

.send-button, .document-button {
    flex: 1;
}







.add-button{
    width: 100px;
    padding: 7px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
	margin-bottom: 10px;
	
	
	
   
}

.add-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}



.free-button{
    width: 150px;
    padding: 7px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 0px;
	margin-bottom: 0px;
	
	vertical-align:middle;
	
   
}

.free-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}

.save-cancel-button{
    width: 100px;
    padding: 7px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
	margin-top:20px;
	
	
   
}

.save-cancel-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}

.text-center{

    color: #ffffff;
    font-size: 20px;
	font-family: 'KoHo', sans-serif !important;	
    font-weight: bold;
	margin-top:13px;
	z-index: 999999;
	
}


.text-center-RestaurantAss{

    color: #ffffff;
    font-size: 20px;
	font-family: 'Ubuntu Sans', sans-serif !important;	
    font-weight: bold;
	margin-top:15px;
	z-index: 999999;

	
}


.text-right{
	font-weight: bold !important;
    font-family: 'KoHo', sans-serif !important;	
	font-size: 16px !important;
	color: #ffffff;
	margin-top:17px;
	z-index: 999999;	
}


.language-header{
    width:32px;
	height:32px;
	margin-top:10px;
	z-index: 999999;	
}

.clear-history-button{
    width: 100px; /* Adjust as needed */
    padding: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
	
  /* Flexbox styles */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
	bottom:8%;
    transform: translate(-50%, -50%);

}
		

.message-info {
    font-size: 12px;
    color: #CD5C5C !important;
	margin-bottom: 20px;
}


.file-hidden {
    display: none;
}		

/* Image preview */
.image-preview {
    margin-top: 0px;
    display: block;
    max-width: 50px;
    max-height: 40px;
	align:center;
	text-align:center;
}

.readonly-label {
    border: none;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    pointer-events: none; /* Ensures it behaves like a label (non-editable) */
	display:none !important;
	height:0px !important;
}

.readonly-label:focus {
    outline: none; /* Remove the focus outline */
}


.add-button-SelectImage{
    width: 110px;
    padding: 7px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
	margin-bottom: 10px;
	
	
    padding: 12px;
    margin-top: 10px;
    box-sizing: border-box;


}

.add-button-SelectImage:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}


[dir="rtl"] .add-button-SelectImage{
    font-size: 16px;
	font-family: 'Tajawal', sans-serif !important;	

  
}


.image-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Optional: space between the button and image */
}		



.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.input-group .textbox {
    flex: 1;
    margin-right: 10px;
}







.grid-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    margin: 5px 0 0 80px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
}

.start-header-old {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    margin: -15px 0 0 60px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;

}


.start-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    margin: -5px 0 0 60px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
    position: fixed; /* Fixed position */
    top: 0; /* Position from the top */
    left: 0; /* Position from the left */
    width: 70vw; /* Full width of the viewport */
    z-index: 1001; /* Higher z-index than .menu-container */
   
}



.start-header-RestaurantAss {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    margin: -7px 0 0 25px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
    position: fixed; /* Fixed position */
    top: 0; /* Position from the top */
    left: 0; /* Position from the left */
    width: 70vw; /* Full width of the viewport */
    z-index: 1001; /* Higher z-index than .menu-container */
   
}


.end-header {
    display: flex;
    align-items: right;
    justify-content: flex-end; /* Align items to the start */
    margin: -5px 20px 0 60px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
    position: fixed; /* Fixed position */
    top: 0; /* Position from the top */
    right: 0px; /* Position from the left */
    width: 30vw; /* Full width of the viewport */
    z-index: 1001; /* Higher z-index than .menu-container */
   
	   
}

.start-intro-authentication{
    display: block;
    align-items: center;
    margin: 20px 0px 20px 0px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
}


.live-header-NotWorking { /*Not working because it is for the text beside menu if no menu*/
    display: flex;
    align-items: left;
    justify-content: flex-start; /* Align items to the start */
    margin: -15px 0 0 10px; /* Adjust to the width of the menu and add margin-top */
    padding: 0;
}
/*MENU*/




		.menu-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw; /* Adjusted width */
			height:45px;
			background-color: #CD5C5C !important;
			z-index: 1000;
			display: flex;
			align-items: center; /* Center align items vertically */
			justify-content: space-between; /* Space between items */
			padding: 0px 10px; /* Adjusted padding */
		    
		}
		
		
		.menu-container-Restaurant-Ass {
			position: fixed;
			top: 0;
			left: 0 !important;
			width: 100vw; /* Adjusted width */
			height:45px;
			background-color: #CD5C5C !important;
			z-index: 1000;
			display: flex;
            align-items: left;
            justify-content: left;
			padding: 0px !important; /* Adjusted padding */
		    
		}
		
		
        .menu-container-Old {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;/*80px;*/
            background-color: #CD5C5C !important;/*transparent !important;*/
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: left;
            justify-content: left;
			
        }

        .menu-button {
            display: flex;
            justify-content: left !important;
            align-items: left !important;
            height: 40px;
            cursor: pointer;
            color: transparent;
            flex-direction: column;
            transition: transform 0.4s;
			margin-top:15px;
			margin-left:10px;
			
        }


        .menu-button-For-Start {
            display: flex;
            justify-content: left !important;
            align-items: left !important;
            height: 40px;
            cursor: pointer;
            color: transparent;
            flex-direction: column;
            transition: transform 0.4s;
			margin-top:10px;
			margin-left:10px;
			
        }




/*----------------------*/



/*----------------------*/

        .menu-button.active .hamburger:nth-child(1),
        .menu-button.active .hamburger:nth-child(3) {
            opacity: 0;
        }

        .menu-button.active .hamburger:nth-child(2) {
            transform: rotate(45deg);
        }

        .menu-button.active .hamburger:nth-child(1) {
            transform: translateY(10px) rotate(-45deg);
        }

        .menu-button.active .hamburger:nth-child(3) {
            transform: translateY(-10px) rotate(45deg);
        }

        .hamburger {
            width: 30px;
            height: 3px;
            background-color: #ffffff;
            margin: 3px;
            transition: 0.4s;
        }

        .menu-dropdown {
        display: none;
       /* background-color: #86A789;*/
        position: fixed;
        top: 45px; /* Adjusted for menu height */
        left: 21px; /* Adjusted for menu width */
        width: 20%;
        height: calc(100vh - 160px); /* Full viewport height minus menu height */
        z-index: 999;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	
		background-image: linear-gradient(45deg, #eeeeee 0%, #fffcfc 100%) !important;

        }




	
		
.menu-item {
    margin: 0 10px !important;
    color: #CD5C5C !important;
    cursor: pointer !important;
	text-align: left !important;
	padding: 10px !important;
    font-family: 'Arial', sans-serif !important; /* Nice font for web and mobile */
    position: relative !important;
	background-color:transparent !important;
    border:0; 
	
   justify-content: flex-start; /* Force content to start from left */
    display: flex;
    align-items: center; /* Align items vertically center */

}

.menu-item:hover {

    color: #ffffff !important;
	background-color:#8c8b8b !important;
	text-decoration: none;
}

.menu-item::before {
    content: '•' !important; /* Bullet point */
    margin-right: 8px;
}

.menu-item button {
    text-align: left !important; /* Force text alignment to left for button */
	background-color:transparent !important;
	border:0px;
	margin-left:-5px;
	width:100%;
	font-family: 'Arial', sans-serif !important;
}

.menu-item button:hover {
    
	background-color:#8c8b8b !important;
	color: #ffffff !important;
}

.menu-item:not(:last-child) {
    border-bottom: 1px dotted #808080; /* Horizontal line */
}	

/*END MENU*/




/* Grid Styles */
.grid-container {
    
    width: 99vw;
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    
    min-height: 50vh;   /* Minimum height */
    max-height: 75vh;   /* Maximum height */
    
    overflow-y: scroll;
    margin-top:90px;
}


/* Grid Styles */
.grid-container-Full {
    
   width: 99vw;
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    
    min-height: 90vh;   /* Minimum height */
    max-height: 90vh;   /* Maximum height */
    
    overflow-y: scroll;
    margin-top:50px;
}


.grid-view {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: auto; /* Enable horizontal scrolling */
    
}


.grid-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for non-webkit browsers */
.grid-container {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}


.grid-view th, .grid-view td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.grid-view th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.grid-view tr:hover {
    background-color: #f5f5f5;
}



	



/* Hide scrollbar for webkit browsers (e.g., Chrome, Safari) */
.grid-view::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for non-webkit browsers */
.grid-view {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
/* End */
/* Add/Edit Popup Styles */


.custom-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Adjust the width as needed */
    max-width: 500px; /* Maximum width for the popup */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000;
	
}

.popup-header {
    text-align: center;
    margin-bottom: 20px;
	
    font-size: 16px;
	font-family: 'Cairo', sans-serif !important;	
    font-weight: bold;	
}

.popup-content {
    display: block;
    text-align: center; /* Center align the items horizontally */
}

/******Clip upload*******/

.upload-icon-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.clip-label {
    cursor: pointer;
}

.clip-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.clip-icon:hover {
    opacity: 1;
}

.hidden-file-upload {
    display: none;
}


/***************/

/**File Upload with Setting**/


   .ImageContainer {
        border: 1px solid #ccc;
		border-radius: 5px;
		margin: 10px auto;
        padding: 5px;
        width: 96vw; /* Set the width as per your requirement */
		top:30%;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
        
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    }

    .ImageContainer label {
        font-weight: none;
        font-family: Arial, sans-serif !important;
		font-size: 18px;

    }

    input[type="file"] {
        width: calc(100% - 30px);
        padding: 10px;
        box-sizing: border-box;
        margin-top: 0px;
		
	
    }



.dropdown-container{
    
    flex-direction: row; /* Force items to be in a row on mobile */
    height: auto; /* Remove fixed height for smaller screens */
    
}



/* Dropdown select styling */
.dropdown-select {
    width: calc(100% - 20px); /* Adjust as needed */
    padding: 10px; /* Padding */
    font-size: 18px; /* Font size */
    border: 1px solid #ccc; /* Border */
    border-radius: 4px; /* Border radius */
    appearance: none; /* Remove default appearance */
    background-color: #fff; /* Background color */
	margin-bottom:10px;

}

/* Style for dropdown arrow */
.dropdown-select::after {
    content: "\25BC"; /* Unicode for down arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Make arrow non-clickable */
}

	
	
.dropdown-select-defaultPrompt {
    width: calc(100% - 200px); /* Adjust as needed */
    padding: 5px; /* Padding */
    font-size: 16px; /* Font size */
    border: 1px solid #ccc; /* Border */
    border-radius: 4px; /* Border radius */
    appearance: none; /* Remove default appearance */
    background-color: #fff; /* Background color */


}

/* Style for dropdown arrow */
.dropdown-select-defaultPrompt::after {
    content: "\25BC"; /* Unicode for down arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Make arrow non-clickable */
}

	
    .dropdown-select-defaultPrompt, .free-button {
        display: inline-block;
        vertical-align: middle; /* Aligns both controls on the same line vertically */
        margin-right: 5px; /* Optional spacing between dropdown and button */
    }
	
	
.setting-text-container {
    display: flex;
    justify-content: center;
    align-items: center;

    }	


.upload-button {
    width: 50%; /* Adjust as needed */
    padding: 10px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 2%;		
       }

.upload-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
}


.upload-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.container {
    width: 400px;
    margin: 50px auto;
    padding: 20px;
	top:50px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.file-upload {
    margin-bottom: 10px;

}

    img.preview {
        width: 100px;
        height: auto;

    /*    position: absolute;
        top: 25%;
        right: 10%; 
        transform: translateY(-50%);*/
    }
	


.text-setting{
    color: #CD5C5C;
    font-size: 18px;
	font-family: 'Arial', sans-serif !important;
    font-weight: bold;
	text-align:center;
	display:block;
	padding-top:10px;
	padding-bottom:10px;
}

/*Emd Image*/

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

.loading-spinner {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


/*---------LOADER----------*/


.loaderText-robo {
    animation: blinker-robo 1.5s linear infinite !important;
    color: #CD5C5C !important;
    font-family: 'Coda', Arial, Verdana, Georgia, sans-serif !important;
    font-size: 25px;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none;
    width: 100%;
    white-space: nowrap;
    padding-bottom: 50px; /* Removed the negative value */
    padding-top: 50px; /* Removed the negative value */
}

@keyframes blinker-robo {
  50% {
    opacity: 0;
  }
}

#myspindiv.fixed-position {
    position: fixed;
    bottom: 50%;
    top: 30%;
    left: 35%;
    right: 35%;
    z-index: 999999;
    vertical-align: middle;
    text-align: center;
    background: linear-gradient(45deg, #f3f4f7, #e8e9ec); /* subtle gradient */
    border-radius: 8px; /* rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* slight shadow for depth */
    padding: 0px; /* more compact padding */
}

/*************New loader******************/

/* Fixed position container using your styling, now with AISpinner- prefix */
#myspindiv.AISpinner-fixed-position {
    position: fixed;
    bottom: 50%;
    top: 30%;
    left: 35%;
    right: 35%;
    z-index: 999999;
    vertical-align: middle;
    text-align: center;
    background: linear-gradient(45deg, #f3f4f7, #e8e9ec); /* subtle gradient */
    border-radius: 8px; /* rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* slight shadow for depth */
    padding: 0px; /* more compact padding */
}

/* Container for the spinner and text */
.AISpinner-container {
    padding: 20px;
}

/* Spinner style */
.AISpinner-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #CD5C5C;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: AISpinner-spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes AISpinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Text styling with a fade effect */
.AISpinner-text {
    font-family: 'Coda', Arial, Verdana, Georgia, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #CD5C5C;
    animation: AISpinner-fadeText 1.5s linear infinite;
}

@keyframes AISpinner-fadeText {
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/***************end new loader***************/

/**---------------Another one----------**/
        .loader {
            border: 5px solid #f3f3f3;
            /* Light grey */
            border-top: 5px solid #D45D79;
            /* Dark Green */
            border-radius: 50%;
            width: 40px  !important;
            height: 40px !important;
            animation: spinloader 2s linear infinite;
        }
  
  
  
        .loader2 {
            border: 5px solid #D14D72;
            /* Light grey */
            border-top: 5px solid #ffffff;
            /* Dark Green */
            border-radius: 50%;
            width: 40px  !important;
            height: 40px !important;
            animation: spinloader 2s linear infinite;
        }
		
  
        @keyframes spinloader {
            0% {
                transform: rotate(0deg);
            }
  
            100% {
                transform: rotate(360deg);
            }
        }
/*---------END LOADER----------*/


.tooltip {
    position: absolute;
    bottom: 100%; /* Position it above the button */
    left: 50%;
    transform: translateX(-50%);
    background-color: #555;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip.show {
    opacity: 1;
}



/*****************POS Invoice***************************/

.pos-receipt-container {
    
    display: block;
    justify-content: center;
    align-items: center;
    height: 100vh;

	
}

.pos-receipt {
    font-family: Arial, sans-serif;
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top:30px !important;
	font-size:14px;
	animation: 1s ease-out 0s 1 slideInFromAI forwards; /* Apply animation */

}

.receipt-header {
    text-align: center;
	font-size:14px;
	
}

.receipt-header.rtl {
    text-align: right;
}

.receipt-footer {
    text-align: left;
	font-size:12px;
}

.receipt-footer p {
    margin: 5px 0;
}

.receipt-footer hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 5px 0;
}

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

.pos-th, .pos-td {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

/* Gray background for table header */
.pos-th {
    background-color: #f2f2f2;
}



.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkbox-container input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.checkbox-container label {
    font-size: 18px;
	padding-top:10px;
}



.container_Signin{
  height: 80%; /* Full viewport height */
  width:35%;
  
   position: absolute;
  top: 55%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%); 
  
box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 3px 1px, rgba(60, 64, 67, 0.15) 1px 3px 7px 3px;
background:rgba(255, 255, 255, 0.7);

  
}
.center-side {
  background-color: transparent !important; /* Lighter gray background for right side */

}
		

.poweredby{
width:152px;
height:50px;
padding-bottom:20px;
}


.username_value	{
	
    background:linear-gradient(
      rgba(255,255,255,0.0), 
      rgba(255,255,255,0.0)
	  
    ),url(../../Images/user.png);	
	background-position: left;
	background-size: 20px 20px;
	background-repeat: no-repeat;
    background-position:3px 50%; 
    
	
    height:40px;

	border: 1px solid rgba(237,237,237,1.0);
	border-radius: 4px;
	color: #000000;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 20px;
	padding-left: 30px;
	padding-right: 4px;
	padding-top: 2px;
	vertical-align: top;	
	background-color:rgba(237,237,237,0.3);
	outline:none !important;
	}


.loginmessage	{
	color: #404040;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 16px;
	font-weight: normal;
    white-space: wrap;
    
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-47%,-60%);
    transform: translate(-47%,-60%);
}

.password_value	{
    background:linear-gradient(
      rgba(255,255,255,0.0), 
      rgba(255,255,255,0.0)
	  
    ),url(../../Images/locked.png);	
	background-position:3px 50%;
	
	background-size: 20px 20px;
	background-repeat: no-repeat;

    height:40px;

	border: 1px solid rgba(237,237,237,1.0);
	border-radius: 4px;
	color: #000000;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 20px;
	padding-left: 30px;
	padding-right: 4px;
	padding-top: 2px;
	vertical-align: top;	
	background-color:rgba(237,237,237,0.3);
	outline:none !important;
}
.remember_singin	{
    
	color: #404040;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 14px;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 4px;
	text-align: left;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}	

.forget_password	{
    
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif !important;
	font-size: 14px !important;
	font-weight: normal !important;
	text-align: center !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	color: rgba(59,89,152, 1.0) !important;
	
}	
	
	
.remember_singin_checkBox{
   /* color:#555555 !important;
	background: #555555 !important;*/
}

.ForgetPasswordTitle2 { /* mobile main content area default text styles */

	color: #404040;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 16px !important;

    text-align:center;
    word-wrap: break-word; /* Ensures long words break to fit the container */
    overflow-wrap: break-word; /* Alternative for older browsers */	
	}	
/*************CheckBox**************/
input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 15px;
    position: relative;
	margin-top:15px;
	margin-left:-2px;
	margin-bottom:10px;
	padding-top:-20px
  }
  
  input[type=checkbox]:after {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 0;
    content: " ";
    background-color: #f2f2f2;
    color: #757575;
    display: inline-block;
    visibility: visible;
    
	padding-top:0px;
	padding-bottom:0px;
	padding-left:4px;
	padding-right:0px;
	
    border-radius: 3px;
	margin-left:-5px;
	margin-top:-12px;
	
  }
  
  input[type=checkbox]:checked:after {
	  /*content: "\00a0 \00a0 ✓";*/
	  content: " 🗸"; 
	  font-size: 30px;
	  
  }
  
 .signin-button{
    width: 100px;
    padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
    background-color: #CD5C5C;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
	margin-bottom: 10px;
	
	
	
   
}

.signin-button:hover {
    /*background-color: #2D8596;*/
	color: #FFFF33;
	text-decoration: none
} 
/***************************/

.languageDropdown {
    width: 200px;
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    outline: none;
    /*margin: 10px 0;*/
	
	
}

.languageDropdown:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/*******************************************/



/* Responsive styles for smaller screens (mobile devices) */
@media screen and (max-width: 768px) {




    .chat-container {
        width: 100vw !important; /* Set width to 100% of viewport width */
		
    }


    .chat-box {
        margin-top: 30px;
		/*max-height: calc(100vh - 80px);*/
		/*NEW 10-6-2024*/
		
		/*max-height: calc(100vh - 165px); /* Adjusted max height for mobile */

    }

    .textbox-container {
        flex-direction: column;

        /*align-items: stretch; /* Ensure elements stretch to container width */
        padding-bottom: 40px; /* Add padding to ensure buttons are not cut off */
		/*NEW 10-6-2024*/
        /*position: absolute;
        bottom: 5px;
		width: calc(100% - 37px)*/
		
    }

.custom-dropdown-container{
        flex: 0 0 100%; /* Forces the dropdown to take full width */
        /* Optionally set margin or padding as needed */
        margin-top: 10px; /* Adjust spacing if needed */		
    }



.dropdown-select-defaultPrompt {
    width: calc(100% - 160px); /* Adjust as needed */

}

.free-button{
    width: 130px;   
    padding: 5px;
    font-size: 14px;

}


    .textbox {
        width: 100%; /* Set width to 100% for mobile devices */
        margin-right: 0;
        margin-bottom: 10px;
    }

    .menu-container {
        width: 100vw;
        position: fixed;
        top: 0px;
        left: 0;
    }
	
	.menu-container-Restaurant-Ass {
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0 !important;
    }

    .menu-dropdown {
        left: 20px;
        right: 0;
        width: 50%;
        height: calc(100vh - 214px); /* Full viewport height minus menu height */
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .grid-container {
        width: 99vw;
    }
	
	
	
	.grid-header {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Align items to the start */
		margin: 7px 0 0 80px; /* Adjust to the width of the menu and add margin-top */
		padding: 0;
	}
	
	.start-header {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Align items to the start */
		margin: -5px 0 0 60px; /* Adjust to the width of the menu and add margin-top */
		padding: 0;	
	}
	
	.start-header-RestaurantAss {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Align items to the start */
		margin: -5px 0 0 25px; /* Adjust to the width of the menu and add margin-top */
		padding: 0;	
	}
	
	
.end-header {

    width: 50vw; /* Full width of the viewport */
	   
}	

	.live-header-NotWorking { /*Not working because it is for the text beside menu if no menu*/
		display: flex;
		align-items: left;
		justify-content: flex-start; /* Align items to the start */
		margin: 3px 0 0 10px; /* Adjust to the width of the menu and add margin-top */
		padding: 0;
	}
	
	.add-buttonOld  {
	   
        width: 100%;
        margin-bottom: 10px; /* space between buttons in mobile */
		
    
	}
	
	
   img.preview {
        width: 100px;
        height: auto;
     
    }	
	
   .ImageContainer {
        width: 90vw; /* Set the width as per your requirement */
    }
	
	
.setting-text-container	{
    flex-direction: row; /* Force items to be in a row on mobile */
    height: auto; /* Remove fixed height for smaller screens */

    }
	
	
 	
.chat-image {
    margin-top: 5px;
    max-width: 40%;  /* Adjust the width as needed */

	}	


.chat-image-round {
    margin-top: 5px;
    max-width: 40%;  /* Adjust the width as needed */
   overflow: hidden; /* Hide any parts of the image that extend beyond the container */
    object-fit: cover; /* Ensure the full image is visible inside the container */
    border-radius: 50%; /* Make the image round */
	}	


	
.text-center{

    font-size: 18px;
	margin-top:15px;

	
}


.text-center-RestaurantAss{

    font-size: 18px;
	margin-top:15px;

	
}


.text-right{
	font-size: 14px !important;
	margin-top:19px;
}	
	
	
	
.openai-iframe {
    width: 100%;
    height: auto;
    overflow-y: hidden;
    border: 0;
}



.loaderText-robo {
    font-size: 16px;

}

#myspindiv.fixed-position {

    left: 20%;
    right: 20%;
}
#myspindiv.AISpinner-fixed-position {
       left: 10%;
    right: 10%;
}

    .input-container {
        flex-direction: column;
        align-items: flex-start;
    }


.input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Adjust the gap between elements */
}

.process-button {
    margin: auto;
    display: block; /* Ensures it takes full width */
}


.pos-receipt {

    width: 90%;

}




    .action-container button {
      
        margin-top: 10px; /* Add space between buttons */
    }
	
	
	
    .checkbox-container label {
        font-size: 16px;
		
    }	
	





  .container_Signin {
    height:80% !important;
    width: 80% !important;
	
	
  position: fixed;
  top: 50%;
  left: 50%;
 
  transform: translate(-50%, -50%);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 3px 1px, rgba(60, 64, 67, 0.15) 1px 3px 7px 3px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0px;
  box-sizing: border-box;	
  margin:0px;

  overflow:hidden !important;

	
  }

  .poweredby {
    width: 100px; /* Adjust width for smaller screens */
    height: 20px; /* Adjust height for smaller screens */
margin-top:20px;
  padding-bottom: 0px;	
  }

  .username_value, .password_value {
    font-size: 16px; /* Smaller font size for mobile */
    padding-left: 25px; /* Adjust padding */
	margin-left:20px;
	margin-right:20px;
  }

  .loginmessage {
    font-size: 14px; /* Smaller font size for mobile */
  }

  .signin-button {
    width: 80px; /* Adjust width for smaller screens */
    font-size: 16px; /* Smaller font size for mobile */
 
  }

/*************CheckBox**************/
/* Hide the default checkbox appearance */
input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 15px;
    position: relative;
	margin-top:15px;
	margin-left:10px;
	margin-bottom:10px;
	padding-top:-20px
  }
  
  input[type=checkbox]:after {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    content: " ";
    background-color: #f2f2f2;
    color: #757575;
    display: inline-block;
    visibility: visible;
    
	padding-top:0px;
	padding-bottom:0px;
	padding-left:-5px;
	padding-right:0px;
	
    border-radius: 3px;
	margin-left:-5px;
	margin-top:-12px;
	
  }
  
  input[type=checkbox]:checked:after {
	  content: "\00a0 \00a0 ✓";
	  padding-right:20px;
	  /*content: " 🗸";*/ 
	  font-size: 30px;
	
  color: #000; /* Color of the checkmark */
  display: flex;
  align-items: center;
  justify-content: center;

	  
  }



  
  
.pBackSignIn{


	width: 100%;
	height: 100%;	
	overflow: hidden !important;
  
 
  
}

.ForgetPasswordTitle2 { /* mobile main content area default text styles */
    display: block; 
	color: #404040;
	font-family: 'Cairo',Arial, Verdana, Georgia, sans-serif;
	font-size: 14px;
    padding-left:10%  !important;
	padding-right:10% !important;
    text-align:center;

	}	
	
	
	
/*Bottom Menu*/

        /* Container for the icon and text */
        .seetingMenu-container {

            display: flex;
            justify-content: left !important;
            align-items: left !important;
            height: 40px;
            cursor: pointer;
            color: transparent;
            flex-direction: column;
            transition: transform 0.4s;
			margin-top:0px;
			margin-left:0px;			
			
        }

        /* Styles for the menu icon */
        .seetingMenu-icon {
            padding: 0px;
        }

		.menu-icon-img {
			width: 70px;
			height:auto;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			font-family: 'KoHo', sans-serif;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

        /* Styles for the text */
        .seetingMenu-text {
            margin-left: 10px;
            font-size: 18px;
            color: #333;
			font-weight: bold;
			font-family: 'Tajawal', sans-serif !important;	

        }
		

        /* Styles for the popup menu */
        .seetingMenu-popup {
            
			display: none;
		/* background-color: #86A789;*/
			position: fixed;
			bottom: 125px; /* Adjusted for menu height */
			right: 40px; /* Adjusted for menu width */
			width: 40%;
			height: calc(100vh - 600px); /* Full viewport height minus menu height */
			z-index: 999;
			overflow-y: auto;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		
			background-image: linear-gradient(45deg, #eeeeee 0%, #fffcfc 100%) !important;			
			
        }

        .seetingMenu-popup button {
            width: 100%;
            padding: 12px 16px;
            text-align: left;
            border: none;
            background-color: transparent;
            cursor: pointer;
        }


        .seetingMenu-popup button:hover {
            background-color: #f1f1f1;
        }
		
		
		.popup-item {
			display: flex;
			align-items: center;
			cursor: pointer;

		}
		
		.popup-item:hover {
			background-color: #f1f1f1;
			border-radius: 4px;
		}
		
		.popup-item:last-child {
			margin-bottom: 0;
		}		
		
		.BottomMenu-button {
			width: 50px;
			height:auto;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			font-family: 'KoHo', sans-serif;
			cursor: pointer;
			transition: background-color 0.3s ease;
			
			/*background-color: red; /* Change this to any color */
			
		
		}		

/*End Bottom Menu*/	
	

}

/*End @Media*/



/*iOS*/
/* Specific fixes for iOS Safari */
@supports (-webkit-touch-callout: none) {
    .textbox-container {
        padding-bottom: 0px; /* Ensure no extra padding at the bottom */

    }

    .action-container button {
        margin-bottom: 0; /* Ensure no extra margin at the bottom */
    }
}
/*End iOS*/


/*End Mobile*/


/* Add animation effect */
  /* Keyframes for fade in and slide down animations */
  @keyframes fadeInDown {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideInDown {
    from {
      top: -100px;
    }
    to {
      top: 50px; /* Adjust this value to change the final position */
    }
  }