/************
 * サインイン
*************/

html,
body {
  height: 100%;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  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;
}

/************
 * jumbotoron
*************/
.jumbotron2 {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #ffffff;
    border-radius: .3rem;
}


/************
 * s_monitor
*************/

.m_component {
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
}

.card_m{
    background: #FFFFFF;
}

.s_table{
    width: 100%;
    border: solid 1px #000000;
    padding:0;
}


/* Bootstrapのガター幅を調整するための汎用CSS */
.row-0 {
    margin-left:0px;
    margin-right:0px;
}
.row-0>div {
    padding-right:0px;
    padding-left:0px;
}
.row-10 {
    margin-left:-5px;
    margin-right:-5px;
}
.row-10>div {
    padding-right:5px;
    padding-left:5px;
}
.row-20 {
    margin-left:-10px;
    margin-right:-10px;
}
.row-20>div {
        padding-right:10px;
        padding-left:10px;
}
.row-30{
    margin-left:-15px;
    margin-right:-15px;
 }
.row-30>div {
    padding-right:15px;
    padding-left:15px;
}
.row-40{
    margin-left:-20px;
    margin-right:-20px;
}
.row-40>div{
        padding-right:20px;
        padding-left:20px;
}
.row-50{
    margin-left:-25px;
    margin-right:-25px;
}
.row-50>div{
        padding-right:25px;
        padding-left:25px;
}
.row-60{
    margin-left:-30px;
    margin-right:-30px;
}
.row-60>div{
        padding-right:30px;
        padding-left:30px;
}

/************
 * カレンダー
*************/
.calendar {
  font-family: Arial;
  font-size:   12px;
}
table.calendar {
  margin:          auto;
  border-collapse: collapse;
}
.calendar .days td {
  width:            80px;
  height:           80px;
  padding:          4px;
  border:           1px solid #999;
  vertical-align:   top;
  background-color: #DEF;
}
.calendar .days td:hover {
  background-color: #FFF;
}
.calendar .highlight {
  font-weight: bold;
  color:       #00F;
}

/************
 * 生活選択
*************/
ul.image_list li {
  /* liが横並びになるようにします。 */
  display: inline-block;
}
ul.image_list li .image_box {
  width: 150px;
  height: 150px;
  margin: 0 10px;
  /* チェックボックスの親要素にrelativeを指定しておきます。 */
  position: relative;
}
.image_box img.thumbnail {
  width: 100%;
  height: 100%;
  border: 1px solid navy;
  padding: 5px;
  border-radius: 5px; /* 角を丸くする */
  /* 画像にカーソルを合わせたときに、
  カーソルが指のマークになるようにします。 */
  cursor: pointer;
}
.image_box img.thumbnail.checked {
  /* チェックが入った状態だと、枠が表示されるようにします。 */
  border: 6px solid navy;
  /* 線をwidthとheightに含めるようにします。 */
  box-sizing: border-box;
}
.image_box .disabled_checkbox {
  /* チェックボックスの位置は絶対位置にします。 */
  position: absolute;
  /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
  top: 12px;
  right: 12px;
  /* チェック前は非表示にしておきます。 */
  display: none;
  /* チェックボックスを大きくします。 */
  transform: scale(2);
  /* チェックボックスにカーソルを合わせたときに、
  カーソルが指のマークになるようにします。 */
  cursor: pointer;
}
.image_box img.thumbnail.checked + .disabled_checkbox {
  /* 画像にcheckedクラスが指定されたときは、
  チェックボックスの非表示を解除します。 */
  display: block;
}