*{
padding : 0;
margin : 0;
border : 0;
}

textarea, input { border: 1px solid #c5c5c5; border-radius: 3px;}
input {}

.messages_blended_grid { display : block; }
.czat_naglowke { 
    margin: 21px 0px; 
    padding-top: 11px;
    border-top: 1px solid #bbb; 
}

.messages_pageColumnLeft {
border: 1px solid #b1b7a4;
background-color: #fff;
clear : none;
height : 520px;
width : 100%;
margin-top: 1px;
padding: 7px;
}

.textarea_size {
resize:none;
width: 100%;
height: 120px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}

.messages_pageColumnMid{
border: 1px solid #b1b7a4;
width : 100%;
background-color: #fff;
height: 28px;
}

.message_send {
border: 1px solid #b1b7a4;
height : 22px;
width : 100%;
margin-left: 5px;
text-align: center;
}
.opis_chat, .text_chat, .txtopis_chat{ font-size: 14px;}
.opis_chat{margin: 7px 0px;}
.txtopis_chat{font-weight: bold; text-align: right; margin-top: 4px;}
.messages_pageColumnRight { display: grid; grid-template-columns: 1fr 1fr; gap: 11px;}
.czat_add_dialog {display: inline-block; width: 100%;}
.op_tresc:first-child {font-weight:bold;font-size: 15px; border-top: 1px solid #ddd;}
.op_tresc {font-size: 15px; border-top: 1px solid #ddd;}
.user_chat:first-child {color: #155f0a; font-weight:bold; margin-top: 0px;}
.user_chat {color: #398a2d; font-weight:bold; margin-top: 17px; }
.part_chat:first-child {color: #002c96; font-weight:bold; margin-top: 0px;}
.part_chat {color: #2766ad; font-weight:bold; margin-top: 17px; }
.input_z  {
    font-family: Quicksand, Arial, Helvetica, Sans-serif;
    background: #398a2d;
    height: 24px;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    padding: 2px 8px 2.2px 8px;
    color: #fff;
    text-transform: uppercase;
    margin-left: 3px;
    margin-bottom: 2px;
}

.input_z:hover {
    background: #1a4e12;
    color: #FFF;
}
.chatMessage{
   border-bottom: 2px solid #eaeaea;
   border-radius: 9px;
   text-align: left;
   margin: 21px auto;
   padding: 11px;
   background: #fff;
}
.lat_20 {
    font-size: 14px;
    text-transform: lowercase;
    color: #7f7f7f;
    font-family: serif;
    font-style: italic;
    order: 2;
    width: 100%;
}
.formBody {display: grid; grid-template-columns: auto 1fr; gap: 11px; margin: 20px 0 60px;}
.chatArea { width: 100%; height: 120px; }
/* .chatInput { margin: 11px auto; } */
/* .chatInputArea { margin: 31px auto 3px auto; } */
.chatOpis { font-size: 0.9em; text-align: left; }
.chatAcpt { margin: 21px 0px; border-top: 1px solid #bbb; }
.chatData{
      border-top: 1px solid #bbb;
      padding: 11px 0px;
      margin: 21px 0px;
      border-bottom: 1px solid #bbb;
}
.chatSend, .chatEnd{
   font-weight: bold;
   border: none;
   border-radius: 2px;
   padding: 7px 14px 6px 14px;
   color: #fff;
   text-transform: uppercase;
   cursor: pointer;
   height: 32px;
   margin-top: 17px;
}
.chatSend {background: #398a2d;}
.chatEnd {background: #545454;}
.chatSend:hover{background: #aaa; }
.chatEnd:hover{background: #aaa; }
.chatContent{ padding: 11px 0; text-align: center;     width: 60%; margin: auto;}
.chatInpName{ height: 26px; text-align: center;}
@media (max-width: 700px) {
   .chatContent {width: 80%; padding: 11px;}
}
@media (max-width: 485px) {
   .chatContent {width: auto;}
   .formBody {grid-template-columns: 1fr; gap: 2px;}
   .txtopis_chat {text-align: left; margin-top: 15px; }
}