/* Droplet ninja Styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

body > .container-fluid {
  width: 90%;
  margin:0 auto;
}

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
  body.auth {
    /*background: #fff url(../img/bg_xs.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
  body.auth {
    /*background: #fff url(../img/bg_sm.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
  body.auth {
    /*background: #fff url(../img/bg_md.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
  body.auth {
    /*background: #fff url(../img/bg_lg.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 1441px){
  body.auth {
    /*background: #fff url(../img/bg_lg_max.jpg) 50% 0 no-repeat fixed;*/
  }
}


/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){
  body.user {
    /*background: #fff url(../img/bg_lt_xs.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){
  body.user {
    /*background: #fff url(../img/bg_lt_sm.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
  body.user {
    background: #fff url(../img/bg_lt_md.jpg) 50% 0 no-repeat fixed;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){
  body.user {
    /*background: #fff url(../img/bg_lt_lg.jpg) 50% 0 no-repeat fixed;*/
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 1441px){
  body.user {
    /*background: #fff url(../img/bg_lt_lg_max.jpg) 50% 0 no-repeat fixed;*/
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.footer > .container {
  width: 90%;
  /* background-color: #f5f5f5; */
  border-top: 1px solid #aaaaaa;
}

.footer > .container > p {
  margin: 10px 0;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body.auth > .container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

body.admin > .container-fluid {
  width: auto;
  max-width: 90%;
  padding: 0 15px;
}

body.admin > .navbar .container-fluid {
  width: auto;
  padding: 0 8px;
}

.container .text-muted {
  margin: 20px 0;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: 5px;
  // border-bottom-right-radius: 0;
  // border-bottom-left-radius: 0;
}
// .form-signin input[type="password"] {
//   margin-bottom: 10px;
//   border-top-left-radius: 0;
//   border-top-right-radius: 0;
// }

.logo {
  margin-top: 100px;
  margin-bottom: 60px;
}

.navbar-default {
  background-color: white;
  border-color: white;
}

.navbar-brand {
  float: left;
  height: 63px;
  padding: 5px 5px;
  font-size: 18px;
  line-height: 20px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: white;
}

.navbar-fixed-top {
  position: relative;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.navbar-brand {
  padding: 13px 0;
}

@media (min-width: 768px) {
  .navbar-nav>li>a {
      padding-top: 25px;
      padding-bottom: 15px;
  }
}

caption {
  font-size:1.5em;
}

.tos {
  margin-bottom: 50px;
}

.tos > H4 {
  margin-top: 30px;
}


body.user > .navbar-default {
    background: none;
    border: none;
}

.os-icon {
  height: 120px;
  margin: 0 auto;
  text-align:center;
  vertical-align:middle;
  display:table-cell;
  background-position: center center;
  background-repeat: no-repeat;
}

.ubuntu {
  background-image: url(../img/ubuntu_off.png);
}

.ubuntu:hover {
  background-image: url(../img/ubuntu_on.png);
}


.debian {
  background-image: url(../img/debian_off.png);
}

.debian:hover {
  background-image: url(../img/debian_on.png);
}

.centos {
  background-image: url(../img/centos_off.png);
}

.centos:hover {
  background-image: url(../img/centos_on.png);
}

/*** ML ***/
.centos:active{
	background-image: url(../img/centos_on.png);	
}
/***/

.os-version {
  border-top: 1px solid #aaaaaa;
  padding-top: 10px;
  text-align: center;
}

.os-version > .dropdown-menu {
  position: relative;
  float: none;
  text-align: center;
}

.shuriken {
  background-image: url(../img/shuriken_on.png);
}

.kunai {
  background-image: url(../img/kunai_on.png);
}

.makibishi {
  background-image: url(../img/makibishi_on.png);
}

.price-main {
  font-size: 2em;
}

.plan-details {
  border-top: 1px solid #aaaaaa;
  padding-top: 10px;
  text-align: center;
}

.us {
  background-image: url(../img/us.png);
}

.jp {
  background-image: url(../img/jp.png);
}

.title {
  margin-top: 30px;
}

/*** ML ***/
option {
	width : 100%;	
}

option:focus {
	/*margin-bottom: 50px;*/
}

option:hover{
	background-color : grey;
}

.form-select {
	width : 95%;
	text-align : center;
	padding-bottom: 10px;
	-webkit-appearance: none;
	-moz-appearance : none;
	appearance : none;
	border : none;
	text-decoration : none;
	color : #2372BD;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  /*background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;*/
  background-position:
    calc(90% - 20px) 50%,
    calc(90% - 15px) 50%,
    calc(90% - 2.5em) 50%;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.form-select:focus {
  background-image:
    linear-gradient(45deg, #2372BD 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #2372BD 50%),
    linear-gradient(to right, #ccc, #ccc);
  /*background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;*/
  background-position:
    calc(90% - 15px) 50%,
    calc(90% - 20px) 50%,
    calc(90% - 2.5em) 50%;	
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #2372BD;
  outline: 0;
  /*outline-color: grey;
  outline-width: 15px;
  outline-style: outset;  
  */
  margin-bottom : 25%;
}

.form-select:hover{
	/*margin-bottom : 25%;
	background-color: #F5F5F5;*/
}

.form-select option{
  background: white; 
  color: black; 
  box-shadow: inset 20px 20px white;
}

.form-select option:hover{
  color: black;
  moz-appearance: black;
  box-shadow: inset 20px 20px #F5F5F5;
}

.panel-selected{
/*	box-shadow : 0 4px 8px 0 rgba(0, 82, 199, 0.5), 0 6px 20px 0 rgba(0, 82, 199, 0.49);
	border-color: rgba(0, 82, 199, 1);*/
/*	box-shadow : 0 4px 8px 0 rgba(74, 110, 49, 0.5), 0 6px 20px 0 rgba(74, 110, 49, 0.49);
	border-color: rgba(74, 110, 49, 1);*/

  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
	
}
.panel-off{
	border-color: #ddd;
	outline: 0;
	opacity:0.5;
}

/* select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
} */

/*****/

.steps-off{
	width:40px; 
	height:40px; 
	font-size:30px;
	border: 1px solid #DDDDDD; 
	background-color:#DDDDDD; 
	border-radius:50%; 
	color:white;
}

.steps-on{
	width:40px; 
	height:40px;
	font-size:30px;
	border: 1px solid #286090; 
	background-color:#286090; 
	border-radius:50%; 
	color:white;
}

.steps-box{
	float:left; 
	width:33%; 
	margin-bottom: 20px;
}

/*
.form-card{
    background-image: url(../img/images.png), url(../img/images.png);
    background-position: 2px -121px, 260px -61px;
    background-size: 120px 361px, 120px 361px;
    background-repeat: no-repeat;
    padding-left: 54px;
    //width:225px;
}

.visa{background-position:2px -163px,260px -61px}
.visa_electron{background-position:2px -205px,260px -61px}
.card_number.mastercard{background-position:2px -247px,260px -61px}
.maestro{background-position:2px -289px,260px -61px}
.discover{background-position:2px -331px,260px -61px}

.valid.visa{background-position:2px -163px,260px -87px}
.valid.visa_electron{background-position:2px -205px,260px -87px}
.valid.mastercard{background-position:2px -247px,260px -87px}
.valid.maestro{background-position:2px -289px,260px -87px}
.valid.discover{background-position:2px -331px,260px -87px}
.valid{background-position:2px -121px, 260px -87px }
*/
.form-card{
    background-image: url(../img/payment_card.png), url(../img/payment_card.png);
    background-position: 2px -51px, 260px 5px;
    /*background-size: 120px 361px, 120px 361px;*/
    background-size: 45px 361px, 50px 500px;
    background-repeat: no-repeat;
    padding-left: 54px;
    /*width:225px;*/
}

.visa{background-position:2px -93px,260px 5px}
.visa_electron{background-position:2px -135px,260px 5px}
.card_number.mastercard{background-position:2px -177px,260px 5px}
.maestro{background-position:2px -219px,260px 5px}
.discover{background-position:2px -261px,260px 5px}
.amex{background-position:2px -303px,260px 5px}


.valid.visa{background-position:2px -93px,260px -31px}
.valid.visa_electron{background-position:2px -135px,260px -31px}
.valid.mastercard{background-position:2px -177px,260px -31px}
.valid.maestro{background-position:2px -219px,260px -31px}
.valid.discover{background-position:2px -261px,260px -31px}
.valid.amex{background-position:2px -303px,260px -31px}
.valid{background-position:2px -51px, 260px -21px }


.btn-grey{
    background-color: #E5E5E5;
    color:black;
    border-color:#E5E5E5;
}
/*
.btn-grey:hover{
    background-color: #E5E5E5;
    color:red;
    border-color:#E5E5E5;
}

.btn-grey:disabled{
    background-color: #E5E5E5;
    color:black;
    border-color:#E5E5E5;
}

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
    background-color: #ddd;
    background: #ddd;
    color:yellow;
    border-color:#E5E5E5;
    cursor : inherit;
}
*/
.btn-grey.disabled.focus, 
.btn-grey.disabled:focus, 
.btn-grey.disabled:hover, 
.btn-grey.focus[disabled], 
.btn-grey[disabled]:focus, 
.btn-grey[disabled]:hover, 
fieldset[disabled] 
.btn-grey.focus, 
fieldset[disabled] 
.btn-grey:focus, 
fieldset[disabled] 
.btn-grey:hover
{
    background-color: #E5E5E5;
    background: #E5E5E5;
    color:black;
    border-color:#E5E5E5;
    cursor : inherit;   
}