
/*doc
---
title: Alerts
name: alerts
category: Components - Alerts
---


```html_example
<div class="messages">
<ul>
	<li>
		<div class="message-container success-message-container">
			<div class="message-icon">
				<i class="fa fa-check-circle"></i>
			</div>
			<div class="message-text">
				<div>
				   Save
				</div>
			</div>
		</div>
	</li>
</ul>
</div>
```

*/



/*doc
---
title: Error Message
name: error_message
category: Components - Alerts
---


```html_example
<div class="messages">
 	<ul>
        <li>
            <div class="message-container error-message-container">
                <div class="message-text">
                    <div class="types-for-errors error-message">
                        <div>
                            <div class="msg">Error Message</div>
                        </div>
                    </div>
                    <div class="button-wrappper clearfix">
                        <button type="button"  class="copy-btn fl">Copy Error</button>
                        <button type="button"  class="show-btn fr">OK</button>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
```

*/

.messages {
  .message-container{
	width: 35%;
	margin: 5px auto;
	padding: 7px 10px;
	border-radius: 2px;
	font-size: 14px;
	color: #FFF;
	font-family: OpenSansSemiBold;
	text-align: center;
	position: fixed;
	top: 50px;
	left: 32%;
	z-index: 99999999;
	display: table;
	@media (max-width : 1024px){
	  width: 50%;
	  left: 25%;
	}
	@include clearfix;
	.message-icon{
	  display: block;
	  font-size: 30px;
	  text-align: left;
	  width: 12%;
	}
  }
  .error-message-container{
	background: rgb(216, 119, 119);
	background: -moz-linear-gradient(top, rgba(216, 119, 119, 1) 1%, rgba(217, 87, 87, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(216, 119, 119, 1)), color-stop(100%, rgba(217, 87, 87, 1)));
	background: -webkit-linear-gradient(top, rgba(216, 119, 119, 1) 1%, rgba(217, 87, 87, 1) 100%);
	background: -o-linear-gradient(top, rgba(216, 119, 119, 1) 1%, rgba(217, 87, 87, 1) 100%);
	background: -ms-linear-gradient(top, rgba(216, 119, 119, 1) 1%, rgba(217, 87, 87, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d87777', endColorstr = '#d95757', GradientType = 0);
	background: linear-gradient(top, rgba(216, 119, 119, 1) 1%, rgba(217, 87, 87, 1) 100%);
	border: 1px solid #b72224;
	.types-for-errors{
		display: block;
		text-align: left !important;
		> div {
			margin: 7px 0;
		}
	}
	.button-wrappper{
	  .copy-btn, .show-btn, .review-btn, .discard-btn {
		padding: 5px;
		font-family: OpenSansSemiBold;
		font-size: 12px;
		width: 74px;
	  }
	}
	.review-btn, .copy-btn {
		margin-right: 4px;
	} 
	.review-btn[ng-focus] {
		outline: 2px solid $clinicalFormFocus;
	}
  }
  .success-message-container{
	background: rgb(138, 211, 130);
	background: -moz-linear-gradient(top, rgba(138, 211, 130, 1) 0%, rgba(106, 177, 101, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(138, 211, 130, 1)), color-stop(100%, rgba(106, 177, 101, 1)));
	background: -webkit-linear-gradient(top, rgba(138, 211, 130, 1) 0%, rgba(106, 177, 101, 1) 100%);
	background: -o-linear-gradient(top, rgba(138, 211, 130, 1) 0%, rgba(106, 177, 101, 1) 100%);
	background: -ms-linear-gradient(top, rgba(138, 211, 130, 1) 0%, rgba(106, 177, 101, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#8ad382', endColorstr = '#6ab165', GradientType = 0);
	background: linear-gradient(top, rgba(138, 211, 130, 1) 0%, rgba(106, 177, 101, 1) 100%);
	border: 1px solid #4b8048;
	padding: 0px 10px;
	.fa{
	  padding: 0 !important;
	  padding-bottom: 3px !important;
	}
  }

}
.success-message-container {
	.message-icon {
		display: table-cell !important;
	}
	.message-text {
		display: table-cell;
		text-align: left;
		vertical-align: middle;
	}
}
