.deimosButton
{
  font-family: Raleway;
  border: 0;
  color: white;
  background: #FFAA00;
  padding: 5px;
  min-width: 150px;
  min-height: 35px;
  border-radius: 28px;
  opacity: .9;
}

.deimosButton:hover
{
  background: #DA9100;
  cursor: pointer;
}

.cms_button
{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
    color: black;
    border: 2px solid #333;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    transition: all .35s;
}
  
.cms_button span
{
    position: relative;
    z-index: 2;
}
  
.cms_button:after
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgb(61, 162, 236, .4);
    transition: all .35s;
}
  
.cms_button:hover
{
    color: black;
}
  
.cms_button:hover:after
{
    width: 100%;
}

/**** ABORT BUTTON *****/

.cms_abort_button
{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
    color: black;
    border: 2px solid #333;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    transition: all .35s;
}
  
.cms_abort_button:hover
{
    background: rgb(255, 0, 0, .4);
}


.cms_search_button
{
    background: #777a7d;
    background-image: -webkit-linear-gradient(top, #777a7d, #080808);
    background-image: -moz-linear-gradient(top, #777a7d, #080808);
    background-image: -ms-linear-gradient(top, #777a7d, #080808);
    background-image: -o-linear-gradient(top, #777a7d, #080808);
    background-image: linear-gradient(to bottom, #777a7d, #080808);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Georgia;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  }
  
  .cms_search_button:hover
  {
    background: #102938;
    background-image: -webkit-linear-gradient(top, #102938, #0080d6);
    background-image: -moz-linear-gradient(top, #102938, #0080d6);
    background-image: -ms-linear-gradient(top, #102938, #0080d6);
    background-image: -o-linear-gradient(top, #102938, #0080d6);
    background-image: linear-gradient(to bottom, #102938, #0080d6);
    text-decoration: none;
  }

  .button_red {
    -webkit-appearance: none;
    position: absolute;
    width: auto;
    height: 25px;
    font-size: 75%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(#9e1111));
    background: linear-gradient(180deg, red, #9e1111);
    border: 1px solid #3d0606;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .button_red:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#d80303), to(#690101));
    background: linear-gradient(180deg, #d80303, #690101);
    color: #969696;
  }
  
  .button_green {
    -webkit-appearance: none;
    position: absolute;
    width: auto;
    height: 25px;
    font-size: 75%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, from(lime), to(#009b00));
    background: linear-gradient(180deg, lime, #009b00);
    border: 1px solid #043802;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .button_green:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#35d803), to(#0a6901));
    background: linear-gradient(180deg, #35d803, #0a6901);
    color: #969696;
  }

  .button_green_disabled {
    -webkit-appearance: none;
    position: absolute;
    width: auto;
    height: 25px;
    font-size: 75%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, from(lime), to(#009b00));
    background: linear-gradient(180deg, #286713, #1A5208);
    border: 1px solid #043802;
    color: gray;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .button_dark_gray {
    -webkit-appearance: none;
    position: absolute;
    width: auto;
    height: 25px;
    font-size: 75%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, from(#c8c8c8), to(#bebebe));
    background: linear-gradient(180deg, #c8c8c8, #bebebe);
    border: 1px solid #aaaaaa;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .button_dark_gray:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#c8c8c8));
    background: linear-gradient(180deg, #d2d2d2, #c8c8c8);
    color: #969696;
  }
  
.label_button
{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.label_button:hover
{
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

/**
.button_1:
<div class="button_1 button_1_wrap">
  <div class="inner_button_1"></div>
  <span>Click me</span>
</div>
*/

.button_1_wrap {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #BFC0C0;
  margin: 20px 20px 20px 20px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: slategray;
}

.button_1 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button_1 span {
  position: relative;
  transition: all .45s ease-Out;
}

.inner_button_1 {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #BFC0C0;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
  color: #BFC0C0;
  text-decoration: none;
  letter-spacing: 1px;
}

.button_1:hover .inner_button_1 {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

.button_1:hover span {
  color: #2D3142;
}

/******************************************/

/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	--primary-c: #2196F3;
	--secondary-c: #B2D7F5;
	
	--white: #FDFBFB;
	
	--text: #082943;	
	--bg: var(--primary-c);
}


/* Basic Config
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.ulCard
{
	list-style-type: none;
	padding-left: 50px;
	margin: 0;
}

.liCard
{
	display: block;
	position: relative;
	padding: 20px 0px;
}


/* Card
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
	display: inline-block;
	flex-direction: column;	
	background: var(--white);
	width: 300px;
	padding: 20px 25px;
	border-radius: 20px;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.13);
}


/* Radio Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type=radio] {
	position: absolute;
	visibility: hidden;
}

label { 
	cursor: pointer; 
	font-weight: 400;
}

.check {
	width: 30px; height: 30px;
	position: absolute;
	border-radius: 50%;
	transition: transform .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Reset */
input#sms_send_instant ~ .check { 
	transform: translate(-50px, -25px); 
	background: var(--secondary-c); 
}
input#sms_send_schedulded ~ .check { 
	transform: translate(-50px, -83px); 
	background: var(--primary-c);
	box-shadow: 0 6px 12px rgba(33, 150, 243, 0.35);
}

/* Radio Input #1 */
input#sms_send_instant:checked ~ .check { transform: translate(-50px, 33px); }

/* Radio Input #2  */
input#sms_send_schedulded:checked ~ .check { transform: translate(-50px, -25px); }

.backArrow
{
  position: fixed;
  font-size: 2em;
  left: 3%;
}