* {
            box-sizing: border-box
        }
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial;
	    //background-color: #feb500;
	    background-color: #FFC30D;
        }
        #chatbox {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        margin-top: 60px;
      }

      #avatarFrame {
          width: 665px;
          height: 827px;
          margin-left: 32px;
          margin-top: 73px;
      }

      #userInput {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        margin-top: 60px;
      }
      #textInput {
        width: 90%;
        border: none;
        border-bottom: 3px solid black;
        font-family: monospace;
        font-size: 17px;
      }
      .userText {
        color: white;
        font-family: monospace;
        font-size: 16px;
        text-align: right;
        line-height: 22px;
      }
      .userText span {
        background-color: #808080;
        padding: 5px;
        border-radius: 2px;
      }

      .botText {
        color: white;
        font-family: monospace;
        font-size: 16px;
        text-align: left;
        line-height: 22px;
      }
      .botText span {
        background-color: #4169e1;
        padding: 5px;
        border-radius: 2px;
      }
      #tidbit {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 300px;
      }
      .boxed {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        height: 60%;
        margin-top: 10px;
        border: 1px solid grey;
        background-color: #ffffff;
      }
      .container {
	text-align: center;
      }
  .colored-div {
	width: 60%;
	height: 10vh; /* 10% of the viewport height */
	background-color: #1CABE2;
  }
    .xlogo-div {
	width: 60%;
	height: 10vh; /* 10% of the viewport height */
padding: 20px; 
	background-color: #1CABE2;
	background-image: url('../UNICEF-med.png');
	background-repeat: no-repeat;
   	background-position: center;
	background-size: contain;
    background-size: 70%; /* Scale the background image down by 30% */
    background-position: center; /* Position the background image at the center of the div */
    background-clip: content-box; 
    }
    .logo-div {
	width: 60%;
	height: 10vh; /* 10% of the viewport height */
	background-color: #1CABE2;
	background-image: url('../UNICEF-med.png');
    background-size: 30%; /* Scale the background image down by 30% */
	    background-position: center; /* Position the background image at the center of the div */
	    background-repeat: no-repeat; /* Ensure background image is not repeated */
    }

  .unicefButton {
    padding: 10px 20px; /* Adjust padding as needed */
    background-color: #1CABE2; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove button border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 24pt;
  }    
  .scrollable-div {
    width: 400px; /* Set the width as needed */
    height: 400px; /* Set the height as needed */
    overflow: auto; /* Set overflow property to auto for automatic scrolling */
    border: 1px solid #ccc; /* Optional: Add border for aesthetics */
    padding: 10px; /* Optional: Add padding for content spacing */
  }
  td img {
	max-width: 100%; /* Set maximum width to 100% of the cell width */
	height: auto; /* Maintain aspect ratio */
	display: block; /* Ensure the image doesn't interfere with other content */
        background-color: #1CABE2; /* UNICEF background color */
  }
 td video {
	    max-width: 100%; /* Set maximum width to 100% of the cell width */
	    width: 100%;
	    padding: 0;
            height: auto;
        }
table {
            width: 100%;
            border-collapse: collapse;
        }
.avatar_video_div {
    width: 600px; /* Set the width as needed */
    height: 600px; /* Set the height as needed */
    //border: 1px solid #ccc; /* Optional: Add border for aesthetics */
    //padding: 10px; /* Optional: Add padding for content spacing */
    object-fit: cover; /* Crops the image or video to fit the cell */
}

/* styles.css */

.rj-div {
    display: flex;
    justify-content: flex-end; /* Align items to the right */
    //padding: 10px; /* Optional: Add padding to the container */
    //border: 1px solid #ccc; /* Optional: Add a border to the container */
}

button {
    background-color: transparent; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 0; /* Remove default button padding */
    cursor: pointer; /* Change cursor to pointer on hover */
}
.rtext {
    background-color: transparent; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 20px 0px; /* Remove default button padding */
    //cursor: pointer; /* Change cursor to pointer on hover */
    float: right; 
}
.rbutton {
    background-color: transparent; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 0 ; /* Remove default button padding */
    cursor: pointer; /* Change cursor to pointer on hover */
float: right; 
}
.rgif {
    background-color: transparent; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 10px 10px ; 
    cursor: none; /* Change cursor to pointer on hover */
float: right; 
}

.rbutton-disabled {
    background-color: transparent; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 0 ; /* Remove default button padding */
    cursor: none; /* Change cursor to pointer on hover */

    float: right; 
    opacity: 0.5; 
}

button img {
    background-color: transparent; /* Remove default button background */
    display: block; /* Ensure the image is block-level element */
    //width: 100px; /* Set the desired width */
    //height: auto; /* Maintain aspect ratio */
}