@font-face {
  font-family: 'helvetica';
  font-style: normal;
  src: url(Helvetica.ttf);
}

@font-face {
  font-family: 'helvetica';
  font-weight: bold;
  src: url(Helvetica-Bold.ttf);
}


html {
	height:100%;
	overflow: hidden;
}

body
{
    background-color: #7f181c;
    background-image: url(../img/gnd_desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
	margin: 0px;
    font-family: 'helvetica', sans-serif;
    font-size: 26px;
	color:white;
    line-height:26px;
	height:100%;
	overflow: hidden;
}

/* Toastr centered horizontally at the bottom */
#toast-container.toast-center-center {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.hidden {
    display:none;
}

button {
    width:200px;
    padding:15px 5px;
    margin-bottom:10px;
    border-radius:10px;
    color:#ffffff;
    background-color: #c31518;
    font-size:30px;
    font-weight:bold;
    border:0;
    box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 50px rgba(255, 255, 255, 0.8);
}

a
{
border:none;
text-decoration:none;
color:inherit;
}

h2 {
	font-weight:normal;
}

a:hover
{
text-decoration:underline;
}


img
{
	border:none;
}

hr {
	border: none;
    height: 3px;
    color: #d7007a; /* old IE */
    background-color: #d7007a; /* Modern Browsers */
    width:90%;
    margin:60px auto 40px auto;
}

.cursorPointer {
    cursor:pointer;
}

.container {
    max-width:450px;
    width:100%;
    height:100vh;
    margin:0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.container.homePage {
    display: block;
}

.margintop20 {
    margin-top:20px;
}

/** Common **/
.topLogo {
    padding-top:20px;
    text-align:center;
}

.topLogo img {
    width:30%;
}

.backIcon {
    position:absolute;
    top:10px;
    left:10px;
}

.backIcon img {
    width:50px;
}

.topFlake {
    position:absolute;
    top:0px;
    right:0px;
}

.topFlake img {
    width:150px;
}

/** Home Page **/
.homePage {
    display:none;
    position: relative;
}

.homeCenter {
    text-align:center;
    font-size:20px;
    line-height:20px;
    padding:20px;
    box-sizing:border-box;
}

.chatMessages {
    display:table-cell;    
}

.chatMessage {
    background-color:white;
    font-size:13px;
    line-height:15px;
    text-align:left;
    color:black;
    padding:15px 20px;
    box-sizing:border-box;
    border-radius:10px 10px 10px 0;
}

.chatAnswer {
    margin-top:20px;
    background-color:rgb(156, 30, 32);
    font-size:13px;
    line-height:15px;
    text-align:left;
    color:white;
    padding:15px 20px;
    box-sizing:border-box;
    border-radius:10px 10px 0 10px;
    width:fit-content;
    margin-left:auto;
}

.chatContainer {
    display:table;
    margin-top:20px;
    width:100%;
}

.chatIcon {
    display:table-cell;
    vertical-align:bottom;
}

.chatIcon img {
    width:28px;
    margin-right:10px;
}

.chatButton {
    cursor:pointer;
    margin-top:20px;
    background-color:rgb(156, 30, 32);
    font-size:13px;
    line-height:15px;
    text-align:left;
    color:white;
    padding:15px 20px;
    box-sizing:border-box;
    border-radius:10px 10px 10px 10px;
    width:fit-content;
    margin-right:auto;
}

.chatButtons {
    margin-top:17px;
    text-align:left;
    font-size:13px;
    line-height:15px;
    color:#333333;
    font-weight:bold;
}

.chatButton2 {
    margin-top:3px;
    cursor:pointer;
    background-color:rgb(156, 30, 32);
    font-size:13px;
    line-height:15px;
    text-align:left;
    color:white;
    padding:15px 20px;
    box-sizing:border-box;
    border-radius:10px 10px 10px 10px;
    width:100%;
    margin-right:auto;
}

.nameInput {
    background-color:white;
    font-size:13px;
    line-height:15px;
    text-align:left;
    color:black;
    padding:15px 20px;
    box-sizing:border-box;
    border-radius:10px 10px 10px 0;
}

.nameInputContainer {
    margin:10px 0 5px 0;
    width:100%;
    padding:15px 10px;
    box-sizing:border-box;
    border:2px solid rgb(156, 30, 32);
    border-radius:5px;

}

.nameInputContainer input {
    color:black;
    border:0px;
    width:85%;
    font-size:15px;
    line-height:15px;
    box-sizing:border-box;
    padding-bottom:5px;
}

.nameInputContainer svg {
    vertical-align: bottom;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    cursor:pointer;
}

.nameInputContainer svg path {
    fill: rgb(156, 30, 32);
}

.nameInputContainer:has(input:not(:placeholder-shown)) svg,
.nameInputContainer.has-text svg {
    opacity: 1;
}

.hintMessage {
    font-size:12px;
    line-height:12px;
    color:black;
}

.bagResultText {
    
}

.subtitle {
    font-size:10px;
    line-height:12px;
    color:#666666;
    font-weight: bold;
    padding-top:12px;
}

.bagResultImage {
    text-align:center;
}
.bagResultImage img {
    width:250px;
}