/*
//
// Tip: to integrate this plugin seamlessly into your application, use these styles as a starting
// point to build your own stylish alerts and confirmations!
//
*/

/* Modal */
.alertable {
	position: fixed;
	z-index: 9999;
	top: 38vh;
	left: calc(50% - 150px);
	width: 300px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: 4px solid rgba(204,204,204,0.3);
	color: rgba(204,204,204,1.00);
	background-color: rgba(28,25,25,0.5);
	background-image: -webkit-linear-gradient(134deg,rgba(58,55,55,0.55) 0%,rgba(50,47,47,0.55) 27.97%,rgba(79,76,76,0.55) 50.78%,rgba(45,42,42,0.55) 75.13%,rgba(38,35,35,0.55) 100%);
	background-image: -moz-linear-gradient(134deg,rgba(58,55,55,0.55) 0%,rgba(50,47,47,0.55) 27.97%,rgba(79,76,76,0.55) 50.78%,rgba(45,42,42,0.55) 75.13%,rgba(38,35,35,0.55) 100%);
	background-image: -o-linear-gradient(134deg,rgba(58,55,55,0.55) 0%,rgba(50,47,47,0.55) 27.97%,rgba(79,76,76,0.55) 50.78%,rgba(45,42,42,0.55) 75.13%,rgba(38,35,35,0.55) 100%);
	background-image: linear-gradient(316deg,rgba(58,55,55,0.55) 0%,rgba(50,47,47,0.55) 27.97%,rgba(79,76,76,0.55) 50.78%,rgba(45,42,42,0.55) 75.13%,rgba(38,35,35,0.55) 100%);
	color: rgba(204,204,204,1.00);
	opacity: 1;
	padding: 20px;
	margin: 0 auto;
}

/* Overlay */
.alertable-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}

/* Message */
.alertable-message {
  margin-bottom: 20px;
}

/* Prompt */
.alertable-prompt {
  margin-bottom: 20px;
}

.alertable-input {
  width: 100%;
  border-radius: 4px;
  box-shadow: none;
  border: solid 1px #ccc;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 6px 12px;
  display: block;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Button group */
.alertable-buttons {
  text-align: right;
}

/* OK button */
.alertable-ok {
	background-color: #7C0000;
	border: 1px solid #840000;
	font-family: inherit;
	font-size: inherit;
	font-weight: bold;
	color: white;
	border-radius: 4px;
	padding: 6px 12px;
	margin-left: 4px;
	cursor: pointer;
	background-image: -webkit-linear-gradient(270deg,rgba(255,101,103,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,101,103,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,101,103,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,101,103,1.00) 0%,rgba(255,0,0,1.00) 100%);
}

.alertable-ok:hover{
	background-color: #CC0000;
	background-image: -webkit-linear-gradient(270deg,rgba(255,0,0,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,0,0,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,0,0,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,0,0,1.00) 0%,rgba(255,0,0,1.00) 100%);
}

/* Cancel button */
.alertable-cancel {
	border: 1px solid #C8C8C8;
	background-color: white;
	font-family: inherit;
	font-size: inherit;
	color: #888;
	border-radius: 4px;
	padding: 6px 12px;
	margin-left: 4px;
	cursor: pointer;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(164,164,164,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(164,164,164,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(164,164,164,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(164,164,164,1.00) 100%);
}

.alertable-cancel:hover,
.alertable-cancel:focus,
.alertable-cancel:active {
	background-color: #f2f2f2;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 100%);
}