.myc-container {
width: auto;
min-width: 500px; display: inline-block;
}
.myc-chatbot-widget .myc-container {
min-width: 100%; 
}
.myc-conversation-area {
width: auto;
max-width: 100%;
max-height: 320px;
overflow: auto;
padding-right: 20px; padding-left: 20px; }
.myc-conversation-bubble-container + .myc-conversation-bubble-container {
margin-top: 10px;
}
.myc-conversation-bubble {
padding: 6px 9px;
display: inline-block;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
max-width: 80%;
}
.myc-conversation-response {
background-color: #e8e8e8;
color: #323232;
position: relative;
}
.myc-image-response {
padding: 9px 6px 6px 6px;
}
.myc-quick-reply {
display: inline-block;
margin-top: 6px;
margin-left: 6px;
}
.myc-image-response img {
max-width: 300px;
max-height: 200px;
display: inline-block;
}
.myc-conversation-request {
background-color: #1f4c73;
color: #fff;
position: relative;
}
#myc-input-area {
margin-top: 10px;
clear: both;
display: block;
}
.myc-text {
max-width: 100%;
min-width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.myc-debug {
margin-top: 10px;
}
#myc-debug-data {
max-width: 100%;
}
.myc-datetime {
margin-top: 2px;
font-style: italic;
} .myc-content-overlay {
position: fixed;
bottom: 0%;
right: 5%;
width: 350px;
display: block;
box-shadow: 0 0 3px rgba(0,0,0,.3);
z-index: 999;
background-color: #fff;
text-align: left;
}
.myc-content-overlay-header {
height: 50px;
font-weight: 600;
line-height: 50px;
font-size: 22px;
padding-left: 10px;
padding-right: 10px;
display: block;
}
.myc-content-overlay-powered-by {
background-color: #e5e5e5;
color: #333;
font-size: 80%;
padding: 5px;
text-align: right;
font-style: italic;
}
.myc-content-overlay-header .myc-icon-toggle-down, .myc-content-overlay-header .myc-icon-toggle-up {
line-height: 50px;
float: right;
}
.myc-content-overlay-toggle .myc-content-overlay-header {
cursor: pointer;
}
.myc-content-overlay-container {
display: block;
}
.myc-content-overlay-container .myc-container {
width: 100% !important;
min-width: auto !important;
display: block;
}
.myc-content-overlay-container .myc-container .myc-conversation-area {
max-height: inherit;
display: block;
height: 350px;
padding-top: 10px;
}
.myc-content-overlay-container .myc-image-response img {
max-width: 100%;
}
.myc-content-overlay-container #myc-input-area {
padding: 10px;
margin-top: 0px;
}
.myc-card-image {
max-width: 100%;
max-height: 200px;
display: block;
}
.myc-card-response {
padding-bottom: 9px; }
.myc-card-title-wrapper {
padding-top: 6px;
padding-bottom: 6px;
text-align: left;
background-color: #fff;
text-align: left;
}
.myc-card-title, .myc-card-subtitle {
padding-left: 6px;
padding-right: 6px;
}
.myc-card-title {
font-weight: 600;
}
.myc-card-subtitle {
font-size: 80%;
margin-top: -6px;
}
.myc-card-button {
text-align: center;
display:block;
width: 100%;
padding-top: 6px;
font-size: .85em;	
text-decoration: underline;
}
.myc-content-overlay-bottom {
border-top: 1px solid #e5e5e5;
font-size: 80%;
display: flex;
background-color: #fff;
}
.myc-content-overlay-left-icons {
float: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.myc-content-overlay-bottom span {
margin-right: 5px;
}
.myc-clear, .myc-font-size {
cursor: pointer;
color: #333;
}
.myc-text-response iframe {
height: 200px;
max-width: 100%;
} @media only screen and (min-width : 320px) and (max-width : 480px) {
.myc-container {
min-width: 100%;
width: 100%;
max-height: 200px;
}
.myc-image-response img {
max-width: 100%;
}
.myc-content-overlay {
min-width: 100%;
width: auto !important;
max-height: 100%;
right: auto;
}
.myc-content-overlay-popup {
bottom: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;	
}
.myc-content-overlay-container {
font-size: 100%;
}
.myc-content-overlay-container .myc-container {
display: block;
max-height: 100%;
}
.myc-content-overlay-container .myc-container .myc-conversation-area {
position: relative;
max-height: 100%;
}
.myc-content-overlay-container .myc-container #myc-input-area {
width: 100%;
}
}
@media only screen and (min-height : 320px) and (max-height : 480px) and (orientation: landscape) {
.myc-content-overlay-container .myc-container .myc-conversation-area {
max-height: 170px !important;
}
.myc-content-overlay-popup {
max-height: 100% !important;
bottom: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;	
}
}
@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation: portrait) {
.myc-content-overlay-container .myc-container .myc-conversation-area {
max-height: 240px  !important;
}
} @keyframes blink {
50% {
color: transparent;
}
}
.myc-conversation-area .myc-loading {
display: block;
padding: 6px 9px;
margin-top: 10px;
text-align: center;
vertical-align: center;
}
.myc-conversation-area .myc-icon-loading-dot {
animation: 1s blink infinite;
font-size: 1em;
display: clear;
margin-left: 2px;
margin-right: 2px;
}
.myc-conversation-area .myc-icon-loading-dot:nth-child(2) {
animation-delay: 750ms;
}
.myc-conversation-area .myc-icon-loading-dot:nth-child(3) {
animation-delay: 1500ms;
}
@font-face {
font-family: 'myc-icons';
src:  url(//www.d3connections.com/wp-content/plugins/my-chatbot/assets/fonts/icons.eot?6tk1sz);
src:  url(//www.d3connections.com/wp-content/plugins/my-chatbot/assets/fonts/icons.eot?6tk1sz#iefix) format('embedded-opentype'),
url(//www.d3connections.com/wp-content/plugins/my-chatbot/assets/fonts/icons.ttf?6tk1sz) format('truetype'),
url(//www.d3connections.com/wp-content/plugins/my-chatbot/assets/fonts/icons.woff?6tk1sz) format('woff'),
url(//www.d3connections.com/wp-content/plugins/my-chatbot/assets/fonts/icons.svg?6tk1sz#icomoon) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="myc-icon-"], [class*=" myc-icon-"] { font-family: 'myc-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.myc-icon-toggle-up:before {
content: "\f077";
}
.myc-icon-toggle-down:before {
content: "\f078";
}
.myc-icon-loading-dot:before {
content: "\f111";
}
.myc-icon-trash:before {
content: "\f014";
}
.myc-icon-paper-plane:before {
content: "\f1d8";
}
.myc-icon-font-size:before {
content: "\ea61";
}
.myc-icon-close:before {
content: "\f00d";
}
.myc-icon-toggle-left:before {
content: "\f053";
}
.myc-icon-toggle-right:before {
content: "\f054";
}