ul.messenger { margin: 0; padding: 0; } ul.messenger > li { list-style: none; margin: 0; padding: 0; } ul.messenger.messenger-empty { display: none; } ul.messenger .messenger-message { overflow: hidden; *zoom: 1; } ul.messenger .messenger-message.messenger-hidden { display: none; } ul.messenger .messenger-message .messenger-phrase, ul.messenger .messenger-message .messenger-actions a { padding-right: 5px; } ul.messenger .messenger-message .messenger-actions { float: right; } ul.messenger .messenger-message .messenger-actions a { cursor: pointer; text-decoration: underline; } ul.messenger .messenger-message ul, ul.messenger .messenger-message ol { margin: 10px 18px 0; } ul.messenger.messenger-fixed { position: fixed; z-index: 10000; } ul.messenger.messenger-fixed .messenger-message { min-width: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul.messenger.messenger-fixed .message .messenger-actions { float: left; } ul.messenger.messenger-fixed.messenger-on-top { top: 20px; } ul.messenger.messenger-fixed.messenger-on-bottom { bottom: 20px; } ul.messenger.messenger-fixed.messenger-on-top, ul.messenger.messenger-fixed.messenger-on-bottom { left: 50%; width: 600px; margin-left: -300px; } @media (max-width: 960px) { ul.messenger.messenger-fixed.messenger-on-top, ul.messenger.messenger-fixed.messenger-on-bottom { left: 10%; width: 80%; margin-left: 0px; } } ul.messenger.messenger-fixed.messenger-on-top.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-right { right: 20px; left: auto; } ul.messenger.messenger-fixed.messenger-on-top.messenger-on-left, ul.messenger.messenger-fixed.messenger-on-bottom.messenger-on-left { left: 20px; margin-left: 0px; } ul.messenger.messenger-fixed.messenger-on-right, ul.messenger.messenger-fixed.messenger-on-left { width: 350px; } ul.messenger.messenger-fixed.messenger-on-right .messenger-actions, ul.messenger.messenger-fixed.messenger-on-left .messenger-actions { float: left; } ul.messenger .messenger-spinner { display: none; } @-webkit-keyframes ui-spinner-rotate-right { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(180deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); } } @-webkit-keyframes ui-spinner-rotate-left { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes ui-spinner-rotate-right { 0% { -moz-transform: rotate(0deg); } 25% { -moz-transform: rotate(180deg); } 50% { -moz-transform: rotate(180deg); } 75% { -moz-transform: rotate(360deg); } 100% { -moz-transform: rotate(360deg); } } @-moz-keyframes ui-spinner-rotate-left { 0% { -moz-transform: rotate(0deg); } 25% { -moz-transform: rotate(0deg); } 50% { -moz-transform: rotate(180deg); } 75% { -moz-transform: rotate(180deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes ui-spinner-rotate-right { 0% { transform: rotate(0deg); } 25% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes ui-spinner-rotate-left { 0% { transform: rotate(0deg); } 25% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .messenger-spinner { position: relative; border-radius: 100%; } ul.messenger.messenger-spinner-active .messenger-spinner .messenger-spinner { display: block; } .messenger-spinner .messenger-spinner-side { width: 50%; height: 100%; overflow: hidden; position: absolute; } .messenger-spinner .messenger-spinner-side .messenger-spinner-fill { border-radius: 999px; position: absolute; width: 100%; height: 100%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } .messenger-spinner .messenger-spinner-side-left { left: 0; } .messenger-spinner .messenger-spinner-side-left .messenger-spinner-fill { left: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; -webkit-animation-name: ui-spinner-rotate-left; -moz-animation-name: ui-spinner-rotate-left; -ms-animation-name: ui-spinner-rotate-left; -o-animation-name: ui-spinner-rotate-left; animation-name: ui-spinner-rotate-left; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .messenger-spinner .messenger-spinner-side-right { left: 50%; } .messenger-spinner .messenger-spinner-side-right .messenger-spinner-fill { left: -100%; border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-animation-name: ui-spinner-rotate-right; -moz-animation-name: ui-spinner-rotate-right; -ms-animation-name: ui-spinner-rotate-right; -o-animation-name: ui-spinner-rotate-right; animation-name: ui-spinner-rotate-right; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } ul.messenger-theme-air { -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; font-family: "Raleway", sans-serif; } ul.messenger-theme-air .messenger-message { -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s; -o-transition: background-color 0.4s; transition: background-color 0.4s; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 0 1px white, inset 0 2px white, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 0 0 1px white, inset 0 2px white, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px white, inset 0 2px white, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.2); border: 0px; background-color: white; position: relative; margin-bottom: 1em; font-size: 13px; color: #666666; font-weight: 500; padding: 10px 30px 11px 46px; } ul.messenger-theme-air .messenger-message:hover { background-color: white; } ul.messenger-theme-air .messenger-message .messenger-close { position: absolute; top: 0px; right: 0px; color: #888888; opacity: 1; font-weight: bold; display: block; font-size: 20px; line-height: 20px; padding: 8px 10px 7px 7px; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } ul.messenger-theme-air .messenger-message .messenger-close:hover { color: #444444; } ul.messenger-theme-air .messenger-message .messenger-close:active { color: #222222; } ul.messenger-theme-air .messenger-message .messenger-actions { float: none; margin-top: 10px; } ul.messenger-theme-air .messenger-message .messenger-actions a { -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.05); -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; text-decoration: none; display: inline-block; padding: 10px; color: #888888; margin-right: 10px; padding: 3px 10px 5px; text-transform: capitalize; } ul.messenger-theme-air .messenger-message .messenger-actions a:hover { -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.15); -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.15); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), inset 0px 1px rgba(255, 255, 255, 0.15); color: #444444; } ul.messenger-theme-air .messenger-message .messenger-actions a:active { -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18), inset 0px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18), inset 0px 1px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18), inset 0px 1px rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.04); color: #444444; } ul.messenger-theme-air .messenger-message .messenger-actions .messenger-phrase { display: none; } ul.messenger-theme-air .messenger-message .messenger-message-inner:before { -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; left: 17px; display: block; content: " "; top: 50%; margin-top: -8px; height: 13px; width: 13px; z-index: 20; } ul.messenger-theme-air .messenger-message.alert-success .messenger-message-inner:before { background-color: #5fca4a; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-soon .messenger-spinner { width: 24px; height: 24px; background: transparent; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-soon .messenger-spinner .messenger-spinner-side .messenger-spinner-fill { background: #dd6a45; -webkit-animation-duration: 20s; -moz-animation-duration: 20s; -ms-animation-duration: 20s; -o-animation-duration: 20s; animation-duration: 20s; opacity: 1; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-soon .messenger-spinner:after { content: ""; background: white; position: absolute; width: 19px; height: 19px; border-radius: 50%; top: 2px; left: 2px; display: block; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-later .messenger-spinner { width: 24px; height: 24px; background: transparent; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-later .messenger-spinner .messenger-spinner-side .messenger-spinner-fill { background: #dd6a45; -webkit-animation-duration: 600s; -moz-animation-duration: 600s; -ms-animation-duration: 600s; -o-animation-duration: 600s; animation-duration: 600s; opacity: 1; } ul.messenger-theme-air .messenger-message.alert-error.messenger-retry-later .messenger-spinner:after { content: ""; background: white; position: absolute; width: 19px; height: 19px; border-radius: 50%; top: 2px; left: 2px; display: block; } ul.messenger-theme-air .messenger-message.alert-error .messenger-message-inner:before { background-color: #dd6a45; } ul.messenger-theme-air .messenger-message.alert-info .messenger-message-inner:before { background-color: #61c4b8; } ul.messenger-theme-air .messenger-spinner { display: block; position: absolute; left: 12px; top: 50%; margin-top: -13px; z-index: 999; height: 24px; width: 24px; z-index: 10; }