/* Common */
body.embedded a                                                                 { color: #049cdb; text-decoration: none; }
body.embedded a:hover                                                           { color: #000; text-decoration: none; }
body.embedded #main h4                                                          { margin: 30px 0 0; font-size: 17px; font-weight: 600; }
body.embedded #main h4 small                                                    { display: block; font-size: 15px; font-weight: 400; margin-top: 10px; }
body.embedded #main h4 img,
#welcome-avatar                                                                 { display: block; width: 50px; margin: 0 auto 10px; }
body.embedded b, body.embedded strong                                           { font-weight: 600; }
.ninchat-embed-container > .ninchat-promo,
body.embedded .btn                                                              { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
body.embedded hr                                                                { border-top: solid 1px #ddd; margin: 15px 0 10px; }

#ninchat-customercare.ninchat-embed-container.ninchat-open                      { box-shadow: 0 0 20px rgba(0, 0, 0, .4); }

/* Promo, window */

/*.ninchat-embed-container > .ninchat-titlebar .ninchat-action:hover                { background-color: #222 !important; color: #fff !important; }*/
.ninchat-embed-container > .ninchat-titlebar > .ninchat-dropdown > .ninchat-dropdown-content > .ninchat-action { font-size: 15px; }
#ninchat-customercare.ninchat-embed-container > .ninchat-titlebar .ninchat-action .ni:before { line-height: 52px !important; }
.ninchat-embed-container > .ninchat-promo > .ninchat-promo-close                { opacity: .6; }
.ninchat-embed-container > .ninchat-promo .ninchat-promo-title                  { font-size: 17px; font-weight: 600; margin: 10px auto; }
.ninchat-embed-container > .ninchat-promo p                                     { margin: 5px; }
.ninchat-embed-container > .ninchat-promo img                                   { position: absolute; top: -30px; left: 105px; padding: 0; }
.ninchat-embed-container.ninchat-bottom > .ninchat-promo > .ninchat-promo-caret { border-width: 10px 2px 0 18px; }


/* Start screen */

body.embedded #main                                                             { font-family: 'Source Sans Pro'; font-size: 15px; }
body.embedded #embed-welcome                                                    { text-align: center; }
body.embedded .welcome                                                          { margin: 30px 20px 20px; }
body.embedded #welcome-avatar                                                   { display: block; width: 50px; margin: 0 auto 10px; }

body.embedded .motd                                                             { margin-top: 50px; font-size: 14px; }
body.embedded .motd a                                                           { text-decoration: none; }

body.embedded ul#queues                                                         { margin-top: 20px; }
body.embedded #queues li .btn.btn-success,
body.embedded #contactform .btn,
body.embedded #queues li .btn.btn-danger                                        { border: solid 1px #04aef4; border-radius: 28px; font-size: 18px; font-weight: 400; margin-left: auto; margin-right: auto; max-width: 270px; padding: 12px 0; }
body.embedded #queues li .btn.btn-success,
body.embedded #contactform .btn                                                 { background-color: #04aef4; color: #fff; }
body.embedded #queues li .btn.btn-danger                                        { background-color: transparent; color: #04aef4; }
body.embedded #queues li .btn:hover,
body.embedded #contactform .btn:hover                                           { background-color: #000; color: #fff; border-color: #000; }
body.embedded #queues li .btn.btn-danger:hover                                  { background-color: transparent; color: #000; border-color: #000; }

/* Offline - contact form */

body.embedded #contactform                                                      { margin: 10px 0 0; }
body.embedded #contactform .form-group                                          { max-width: 270px; text-align: left; margin: 0 auto 20px; }
body.embedded #contactform input.form-control                                   { max-width: 270px; border: 0; border-bottom: solid 1px #999; font-size: 14px; padding: 10px; }
body.embedded #contactform label                                                { font-size: 13px; margin-bottom: 0; }


/* Alerts, Queued */

.alert-info                                                                     { background-color: transparent; border: 0; color: #000; margin: 10px; font-weight: 600 !important; text-align: center; }
.alert-info.queued                                                              { margin-top: 40px; margin-bottom: 30px; }
.alert-info.queued i.fa.fa-spinner                                              { display: block; font-size: 36px; margin-bottom: 20px; }
.alert-info.queued i.fa.fa-spinner:before                                       { content: "\f1ce"; }
.alert-info.queued .queued-promo                                                { color: #999; font-weight: 300; margin-top: 40px; }
.alert-info.queued .queued-promo i                                              { vertical-align: super; margin-right: 5px; }


/* Conversation */

#channels #video.video-closed                                                   { background-color: transparent !important; }
#channels #video.video-closed .options a                                        { background-color: #fff !important; color: #04aef4; padding-left: 10px; padding-right: 10px; }
#channels #video.video-closed .options a:not(:hover)                            { min-width: 36px; width: 36px; overflow: hidden; }
#channels #video.video-closed .options a > span                                 { padding-left: 6px; }
#channels #video.video-closed .options a .fa-phone:before                       { content: "\f03d" !important; }
#channels #video.video-closed .options a:hover                                  { background-color: #000 !important; border-color: #000 !important; color: #fff; }

#channels .channel .alert                                                       { margin-bottom: 15px; }

.main nui-commandline .nui-form .action[type=submit]                            { border-color: #04aef4; color: #04aef4; }
.main nui-commandline .nui-form .action[type=submit]:hover                      { border-color: #000; background-color: #000; color: #fff; }

.nui-btn.icon:hover                                                             { color: #000; }

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

#ninchat-customercare.ninchat-embed-container.ninchat-ball                      { right: 0 !important; }

}

/* Rating */

body.embedded #rating                                                           { padding: 50px 20px 0; text-align: center; }
body.embedded #rating strong                                                    { font-size: 17px; font-weight: 600; }
body.embedded #rating small                                                     { display: block; color: #999; font-size: 15px; margin: 10px 0 30px; }
body.embedded #rating .ratings                                                  { margin: 30px 0 0; }
body.embedded #rating .ratings + div                                            { margin-top: 80px; }
body.embedded #rating .ratings + div a                                          { text-decoration: none; }
body.embedded #rating .ratings + div a:hover                                    { color: #000; }
body.embedded #rating .fa-2x                                                    { font-size: 3em; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; }
body.embedded #rating .fa-2x:hover                                              { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
body.embedded #rating .rate--1, body.embedded #rating .rate-0                   { float: right; }
body.embedded #rating .rate-1                                                   { float: left; }
