body{
    padding: 0px;
    margin: 0px;
    background: #dce2ff;
    font-family: Calibri, Arial;
    background-attachment: fixed;
    background-size: 900px;
    font-size: 18px;
}

a{
    text-decoration: none;
    color: #b4b4b4;
}

.product_img{
    margin: 10px 10px;
    width : 50%;
    float: left;
}


.main_image{
    width: 100%;
    cursor: pointer;
}

.footer{
        background: #c0c5ff;
        clear: both;
}

.a_menu_item{
    padding: 10px 20px;
    vertical-align: top;
}

.name_of_chat{
    font-size: 14px;
    position: absolute;
    background: #212121;
    color: #767676;
    border-radius: 14px;
    padding: 0px 10px;
    margin-left: 40px;
    border-top: 1px solid #2e2d2d;   
}

#liqpay_form{
}

.link_grey{
    color: #d0d0d0;
    text-decoration: underline;
}

pre {
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, с 1999 года*/
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
hr{
    border: 1px solid #2e2e2e;
}

label{
    color: #909090;
    font-size: 15px;
}

.validation_error{
    color: red;
    font-size: 13px;
    margin-top: 5px;
}
    
.big_text{
    font-size: 21px;
}

.price_text{
    font-size: 41px;
    color: #361d30;
    font-weight: bold;
    margin: 10px 0px;    
}

.btn{
    background: #54a303;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    margin: 10px 0px 0px 0px;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;    
}
.btn_inline{
    display: inline-block;
}

.show_the_conversation{
    cursor: pointer;
    color: #656565;
    font-size: 14px;
    margin-top: 20px;
    opacity: 0;    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;        
}

.first_run .show_the_conversation{
    opacity: 1;
}

.btn:hover{
    background: #6eca0f;
}

.cancel_payment{
    color: #7e7e7e;
    margin: 20px auto 0px;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
}

.successfully_paid_msg{
    z-index: 1;
    position: absolute;
    width: 50%;
    top: 10%;
    left: 25%;
    box-sizing: border-box;
    padding: 20px 30px;
    background-color: #e9e9e9;
    color: #274800;
    border-radius: 10px;
    text-align: center;
}

.successfully_paid_msg input{
    padding: 10px 5px;
    text-align: center;
    width: 400px;
    box-sizing: border-box;
    background: #4d4d4d;
    color: #fff;
    font-size: 17px;
    font-family: arial;
    border: none;
    outline: none;
    display: inline-block;
    margin: 0 auto;
}

.successfully_paid_msg .btn{
    display: inline-block;
}

.modal{
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    display: none;
}

.description{
    position: relative;
    color: #b5b5b5;
    padding: 10px 30px;
    background: #0f0f0f;
    margin: 30px;
    border-radius: 10px;
    box-sizing: border-box;
    margin-top: 100vh;    
}

main{
}

header{
    background: #5a70de;
    margin: 0px;
    padding: 10px 0px;
    /* vertical-align: middle; */
    /* position: relative; */
    /* display: table-cell; */
    display: flex;
    position: relative;
    width: 100%;
    box-shadow: 0px 5px 5px #0000003a;
    top: 0px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;        
}

.chatgpt_logo{
    z-index: 1;
    background-image: url(/chatbot_logo.png);
    width: 40px;
    height: 40px;
    position: relative;
    top: auto;
    bottom: 100%;
    padding-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px 5px -45px 0px;
    padding: 0px;
    display: inline-block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    transform: translate(10px, 0px);    
}
.chatgpt_logo_text{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    background-image: url(/brilliant_logo.png);
    width: 158px;
    height: 29px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-top: -6px;
    position: relative;
}

.motto{
    margin-top: 10px;
    top: 18px;
    left: 11px;
    position: absolute;
    font-size: 15px;
    color: #ffffff99;
}

.main_wrapper{
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 190px;
    padding: 0px 20px;
}

.question_textarea_wrapper{
    width: 100%;
    height: 160px;
    position: fixed;
    bottom: 0px;
    background: #0f0f0f;
    box-sizing: border-box;
    border-top: 1px solid #464646;
    text-align: center;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;    
}
.question_textarea {
    height: 100%;
    width: 100%;
    border-radius: 15px;
    padding: 20px 35px 20px 25px;
    box-sizing: border-box;
    background: #212121;
    color: #fff;
    font-size: 17px;
    font-family: arial;
    border: none;
    outline: none;
    display: inline-block;
    margin: 0 auto;
}

.textarea_and_btn{
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 800px;
    display: inline-block;
    padding: 20px 0px;
    box-sizing: border-box;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;            
}

.send_question_btn{
    position: absolute;
    bottom: 65px;
    cursor: pointer;
    right: -60px;
    margin-right: 15px;
    height: 30px;
    width: 30px;
    border: none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;        
    background: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-image:url("data:image/png;base64,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");
}

.msg {
    display: inline-block;
    background: #ffffff;
    max-width: 800px;
    width: 100%;
    padding: 15px 20px;
    border-radius: 30px;
    margin: 10px 0px;
    color: #2d2d2d;
    text-align: left;
    font-size: 16px;
    font-family: monospace;
    box-sizing: border-box;
    font-family: Calibri, Arial;
}

.msg.question {
    border-bottom-right-radius: 0px;
    background-color: #766ac8;
}

.msg.answer {
    border-bottom-left-radius: 0px;
}

.msg_wrapper{
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;            
}

.msg_wrapper_answer_dummy, .msg_wrapper_question_dummy{
    transform: translate(0px, 10px);
}

.msg_wrapper.question{
    text-align: right;
}



.typingIndicatorBubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 15px;
  margin: 0px 8px;
  border-radius: 12px;
}

.typingIndicatorBubbleDot {
  width: 4px;
  height: 4px;
  margin-right: 4px;
  background-color: #fff;
  border-radius: 50%;
  animation-name: bounce;
  animation-duration: 1.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.typingIndicatorBubbleDot:first-of-type {
  margin: 0px 4px;
}

.typingIndicatorBubbleDot:nth-of-type(2) {
  animation-delay: 0.15s;
}

.typingIndicatorBubbleDot:nth-of-type(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}



/*.logo{
    color: #fff;
    font-size: 25px;
    text-align: center;
    margin: 20px 10px 10px 10px;
}*/

.first_run .question_textarea_wrapper{
    bottom: 50%;
    border-top: 1px solid transparent;
    background: transparent;
}

.first_run header{
    background: none;
    box-shadow: none;
    margin: -50px 0px;    
}
.first_run .chatgpt_logo{
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 50%;
    margin: 0px 0px 145px 50%;
    /* left: -35px; */
    top: auto;
    transform: translate(-35px, 0px);    
}
.first_run .chatgpt_logo_text{
    visibility: hidden;
    opacity: 0;
    width: 0px;
    margin-left: -240px;
}


.bg_filler{
    position: fixed;
    left: 100%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: #00000077;
    z-index: 1;
}
.bg_filler.opened{
    left: 0px;
}

.burger_menu {
    z-index: 2;
    position: fixed;
    right: 0px;
    width: 55px;
    padding: 14px;
    height: 50px;
    box-sizing: border-box;
    top: 0px;
    cursor: pointer;
    -webkit-transition: all 0.2s 0.1s ease-out;
    -moz-transition: all 0.2s 0.1s ease-out;
    -o-transition: all 0.2s 0.1s ease-out;
    transition: all 0.2s 0.1s ease-out;
    display: none;
}
.side_menu{
    position: relative;
    background: #5a70de;
    padding: 25px;    
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;       
    overflow-y: auto;    
    text-align: center;    
}

.side_menu.opened{
    right: 0px;    
}

.payment_icon{
    width: 60px;
}

.buy_button{
    cursor:pointer;
}

.payment_icon_visa{
    margin: 15px;
}


.side_menu_item{
    color: #fff;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline;
    padding: 10px;
}

.side_menu_item_block{
    color: #fff;
    text-align: left;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #313131;
}


.a_menu_item:hover{
    background: #7085f0;
}

.side_menu_item_bold{
    font-weight: bold;
}

.small_gray_text{
    font-weight: normal;
    font-size: 14px;
    color: #888686;
}

.input.your_email{
    width: 207px;
    margin: 10px 0px;
}

.input {
    padding: 10px 5px;
    text-align: center;
    width: 126px;
    box-sizing: border-box;
    background: #ffffff;
    color: #000;
    font-size: 17px;
    font-family: arial;
    border: none;
    outline: none;
    display: inline-block;
    margin: 0 auto;
}

.btn_small{
    display: inline-block;
    background: #c0c5ff;
    width: 40px;
    text-align: center;
    font-size: 30px;
    vertical-align: top;
    height: 40px;
    padding: 0px;
    box-sizing: border-box;
    cursor: pointer;
}

.btn_small:hover{
    background: #555;    
}

.btn_small:active{
    background: #777;    
}


#deposit_amount_plus:before{
    content:"+";
}


#deposit_amount_minus:before{
    content:"-";
}

.burger_menu:hover .burger_menu_line{
    background-color: #aaa;    
}

.burger_menu_line {
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #7e7e7e;
    position: absolute;
}

.burger_menu_line_1 {
    transform: translate(0px, 0px);
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;        
}

.burger_menu_line_2 {
    transform: translate(0px, 10px);
    -webkit-transition: all 0.1s  0.05s ease-out;
    -moz-transition: all 0.1s 0.05s ease-out;
    -o-transition: all 0.1s 0.05s ease-out;
    transition: all 0.1s 0.05s ease-out;        
}    


.burger_menu_line_3 {
    transform: translate(0px, 20px);
    -webkit-transition: all 0.1s 0.1s ease-out;
    -moz-transition: all 0.1s 0.1s ease-out;
    -o-transition: all 0.1s 0.1s ease-out;
    transition: all 0.1s 0.1s ease-out;        
}

.burger_menu_line.burger_menu_line_dot {
    background-color: #35c1f1;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    top: 10px;
    left: 36px;
    -webkit-transition: all 0.5s 0.9s ease-out;
    -moz-transition: all 0.5s 0.9s ease-out;
    -o-transition: all 0.5s 0.9s ease-out;
    transition: all 0.5s 0.9s ease-out;
}

.blue_dot{
    background-color: #35c1f1;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 5px;
}

.burger_menu:hover .burger_menu_line.burger_menu_line_dot{
    background-color: #35c1f1;    
}

.burger_menu.opened {
    transform: rotate(90deg);
}

.burger_menu.opened .burger_menu_line_1 {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.burger_menu.opened .burger_menu_line_2 {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger_menu.opened .burger_menu_line_3 {
    transform: rotate(-45deg) translate(-5px, 5px);
}
    
.burger_menu.opened .burger_menu_line_dot{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.03s 0s ease-out;
    -moz-transition: all 0.03s 0s ease-out;
    -o-transition: all 0.03s 0s ease-out;
    transition: all 0.03s 0s ease-out;    
}

@media only screen and (max-width: 1024px)  {

    .chatgpt_logo_text{
        margin-bottom: 20px;
    }

    .side_menu_item{
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 0px 0px;
    }
    
    .a_menu_item{
        padding: 10px 0px;        
        margin: 5px 0px;
        display: block;
    }

    .product_img{
        width : 100%;
    }
    
    .successfully_paid_msg{
        width: 80%;
        left: 10%;
    }

    .successfully_paid_msg input{
        width: 192px;
    }
    
    .textarea_and_btn{
        padding: 0px;
    }
    
    .first_run .textarea_and_btn{
        padding: 0px 15px;
    }
        
    .question_textarea_wrapper{
        padding: 0px;
        border-top: none;
        height: 60px;
    }

    .first_run .question_textarea_wrapper{
        height: 70px;
    }

    .question_textarea{
        border-radius: 0px;
    }     

    .send_question_btn{ 
        bottom: 15px;
        right: 10px;
        margin-right: 10px;
    }

    .first_run .send_question_btn{
        bottom: 20px;
    }
    
    .main_wrapper{
        padding-bottom: 70px;
    }    
    
    .first_run .chatgpt_logo{
        margin: 0px 0px 75px 50%;
    }
    
}