* {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html {
    background-color: rgb(219, 219, 219);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(175, 13, 13);
    margin: 5px;
}

h1 {
    font-size: 35px;
}

h2 {
    font-size: 25px;
}

hr {
    width: 100%;
}

legend {
    font-size: 20px;
}

input,
select {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 18px;
    border: rgb(194, 194, 194) solid 1px;
    border-radius: 4px;
    background-color: rgb(238, 238, 238);
    padding: 5px;
    width: auto;
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

#DEMO_OPTION,
#COMMUNICATION_TOOL {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
}

#DEMO_OPTION {
    padding: 30px;
    margin-top: 50px;
    width: 450px !important;
}

#COMMUNICATION_TOOL {
    width: 100%;
}

#INTERNET_BANKING {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
}

#DEMO_OPTION div {
    width: 100%;
    display: block;
    margin: 10px;
}

.div_icon {
    align-self: flex-end;
    margin: 5px;
}

.img_icon {
    width: 25px;
    height: 20px;
    display: inline;
    cursor: pointer;
}

.img_icon_help {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    display: inline;
    cursor: pointer;
    float: left;
}

.app_buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.option_button {
    text-align: center !important;
    width: 95% !important;
    margin: 10px;
}

.connection_content fieldset,
.install_gateway fieldset {
    border-radius: 5px;
    box-shadow: inset 0px 0px 20px 20px rgb(209, 206, 206);
}

.connection_type {
    width: 45% !important;
    float: left;
    text-align: center;
}

.connection_type img {
    width: 100px;
    height: 100px;
}

#login_instructions {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#WELCOME {
    background-color: rgb(255, 255, 255);
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 30px;
}

#POS_LOGIN {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
}

#POS_LOGIN .steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 10px 0;
}

#POS_LOGIN .steps div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 8px 0;
}

#POS_LOGIN p {
    font-size: 18px;
    padding: 2px;
    margin: 0;
}

#POS_LOGIN label {
    font-size: 20px;
    padding: 0px;
}

.verify_token {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.div_gifs {
    margin: 20px;
    padding: 5px;
}

.gif {
    max-width: 400px;
    max-height: 400px;
}

.offline_gif,
.transaction_gif {
    max-width: 250px;
    max-height: 250px;
}

#init_div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#HEADER {
    flex: 1;
    width: 100%;
    border-radius: 5px;
    background-color: rgb(175, 13, 13);
    margin-bottom: 10px;
    font-size: 18px;
}

#HEADER p {
    color: rgb(255, 255, 255);
    white-space: normal;
    word-break: break-all;
}

#user_data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#user_info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#app_info {
    display: flex;
    height: 80px;
    margin-right: 10px;
}

#FOOTER {
    flex: 0;
    width: 100%;
    border-radius: 5px;
    background-color: rgb(228, 228, 228);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 10px;
}

#FOOTER p {
    color: rgb(124, 124, 124);
}

#div_account_pos_login {
    background-color: rgb(175, 13, 13);
    color: rgb(255, 255, 255);
    border-radius: 10px;
    width: inherit;
    min-width: 200px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

#body {
    flex: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}

#side_menu {
    min-width: 15%;
    flex: 2;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    padding: 15px;
    height: 700px;
}

#div_login {
    margin: 10px;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#login_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#div_login_fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#login_footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu_header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu_options {
    height: 100%;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#menu_options input {
    width: 100%;
    margin: 10px 0;
    white-space: normal !important;
    word-break: break-word;
}

#content {
    flex: 8;
    height: 100%;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    min-height: 710px;
}

.receipt {
    flex: 8;
    width: 70%;
    height: 100%;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#div_transaction {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.div_transaction {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 18px;
}

.div_transaction label {
    font-size: 20px;
    padding: 0px;
}

#WARN {
    flex: 2;
    background-color: rgb(255, 226, 226);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 10px;
    min-height: 695px;
    border-radius: 5px;
}

.div_transaction select {
    width: 100%;
}

.div_authentication_type {
    width: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.div_authentication_type p {
    margin: 0 0 0 25px;
    font-size: 20px;
}

.header_tr {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 10px 0;
}

.fields_tr {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.fields_tr input,
textarea {
    width: 100%;
}

.fields_tr div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 10px 0;
}

#transaction_buttons {
    width: 100%;
}

#btn_install_gateway {
    width: 250px;
    margin-left: 25px;
}

.app_buttons input {
    width: 35%;
}

input[type="button"] {
    background-color: rgb(175, 13, 13);
    color: rgb(255, 255, 255);
    width: auto;
    cursor: pointer;
}

input[type="button"]:disabled {
    background-color: rgb(189, 114, 114);
    cursor: default;
}

.message_container {
    z-index: 2000;
    position: absolute;
    top: 50%;
    width: 50%;
    font-size: 15px;
    text-align: center;
    box-shadow: 10px;
}

.show_message {
    display: none;
    color: rgb(255, 255, 255);
    border-radius: 10px;
    border-color: #0000;
    padding: 10px;
}

#interaction_message {
    background-color: rgb(94, 94, 94);
}

#accept_message {
    background-color: rgb(0, 139, 19);
}

#reject_message {
    background-color: rgb(138, 0, 0);
}

#div_manual {
    width: 80vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
}

#sc_connect_btn {
    margin-left: 10px;
}

#sc_disconnect_btn {
    margin-left: 3px;
}

#sc_send_btn,
#sc_clear_btn {
    margin-top: 5px;
    float: left;
}

#div_cmd_count_char,
#div_res_count_char {
    flex-direction: row;
    text-align: right;
    display: block;
    margin-top: 1px;
}

#sp_cmd_count_char,
#sp_res_count_char {
    background-color: lightgray;
    font-weight: bold;
}

#check_otp_title {
    text-align: center;
}

.check_otp_parent_div {
    width: 100% !important;
}

.check_otp_child_div {
    width: 40%;
    float: left;
    padding: 10px;
    margin: 10px;
}

.check_otp_right_div_child {
    border-left: 1px solid gray;
    padding-left: 30px !important;
}

.ws_keep_connection_workaround {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

.box_app_info {
    height: inherit;
    width: 40px;
    align-self: flex-end;
    text-align: center;
    align-content: center;
    color: rgb(255, 255, 255);
    z-index: 1000;
}

#languages {
    border: none;
    font-size: 16px;
    outline: none;
    overflow-y: hidden;
    display: none;
    position: absolute;
    background-color: rgb(175, 13, 13);
    color: rgb(255, 255, 255);
    text-align: center;
    scrollbar-width: none;
    margin-left: -30px;
}

option {
    cursor: pointer;
}

a.menu-link:hover {
    opacity: 0.8;
}