@charset "utf-8";
/* CSS Document */
/********************************
grid template
********************************/
.master {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  /*background:url(../img/back.jpg) 0 0 repeat fixed;*/
  color: #4B5570;
  font-size: 18px;
  line-height: 1.3em;
}

#app {
  width: 100%;
}

.master #grid_wrapper:not(.no-sidenavi) {
  /*display: inherit;*/ /*20210716*/
}
/*20210716*/
/*.master header#grid_header {
  position: fixed;
  left: 0%;
  transform: translate(0, 0);
  z-index: 10;
  width: 100%;
  height: 5vh;
  margin: 0 auto;
  background: #F7F7F7;
  box-shadow: 3px 0 10px -3px #ccc;
}

.master div.header--title {
  width: 100%;
  height:30px;
  height: 2.5vh;
  padding:0.3em 1.5% 0.3em 0.3em;
  background: #2EC14D;
  box-sizing: content-box;
}

.master p.header_logo {
  width: 56px;
  float: left;
}

.master h1.header_tit {
  width: 200px;
  margin: 0 auto 0 auto;
  font-size: 95%;
  color: #fff;
  text-align: center;
}

.master h1.header_tit img {
  width: 22px;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

.master div.header--title ul {
  position: fixed;
  right: 10px;
}

.master div.header--title ul li {
  width: 20px;
  float: left;
  margin: 0 5px;
}

.master span.notice_num {
  position: absolute;
  top: -1px!important;
  left: 15px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: red;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  display: inline-block;
  color: #fff;
}

.master div.header--teacher {
  height: 5vh;
  padding:5px 0 5px 0;
  background: #FFFFFF;
  border-bottom: 1px solid #CCC;
  box-sizing: content-box;
}

.master div.header--teacher p {
  width: 700px;
  margin: 0 auto;
  font-size:100%;
  text-align: center;
  padding-left: 5vh;
}

.master div.header--teacher p img {
  width: 4vh;
  margin: 0.5vh 10px;
  vertical-align: top;
}

.master div.header--teacher p span {
  font-size: 80%;
}

.master button.btn_back {
  position: absolute;
  top:40px;
  width: 5vh;
  height: 5vh;
  background: #4D546E;
  border: none;
  padding: 0.0em;
}

.master button.btn_back:focus {
  outline: 0;
  border: 0;
  box-shadow: 0 3px 5px 0 inset;
}

.master button.btn_back img {
  width: 70%;
  height: 70%;
}*/
/*20210716*/
/*.master div#cont_wrap {
  z-index: 3;
  position: relative;
  width: 100%;
  margin: 0;
  background: #F7F7F7;
  box-shadow: 3px 0 10px -3px #ccc;
  box-sizing: content-box;
}
*/
.master aside#grid_sidenav_enmaster {
  z-index: 3;
  position: relative; /*20210716*/
  /*float: left;*/ /*20210716*/
  /*top: 8.5vh;*/ /*20210716*/
  /*width:13.5%;*/
  width: 260px;
  height: calc(100vh - 8.9vh);
  box-shadow: 3px 0 5px 0 #DCDCDC;
  background: #FBFBFB;
  overflow-y: auto;
}

.master main#grid_container {
  z-index: 2;
  /*20210716ここから*/
  /*position: absolute;
  top: 8.5vh;
  left: 260px;
  width: 84%;*/
  padding: 20px 10% 20px 20px;
  /*float: right;*/
  height: calc(100vh - 8.9vh);
  box-sizing: content-box;
  background: #F7F7F7;
  overflow-y: scroll;
  overflow-x: scroll;
  /*20210716ここまで*/
}
.account_side_menu aside {
  position: fixed !important;
}
.account_side_menu #grid_wrapper:not(.no-sidenavi){
  display: inherit !important;
}
.account_side_menu main#grid_container{
  padding: 20px 20px 20px 20%;
}

.monthly_side_menu aside {
  position: fixed !important;
}
.monthly_side_menu #grid_wrapper:not(.no-sidenavi){
  display: inherit !important;
}
.monthly_side_menu main#grid_container{
  padding: 20px 10% 20px 300px;
  width: 100%;
}
/* CHANGE SMO - START====================================== */
/* 小さい画面のときに横スクロールが表示されるように修正 */
@media screen and (min-width:500px) and (max-width:1280px) {
  .master main#grid_container {
    /*20210716ここから*/
    /*z-index: 2;
  position: absolute;
  top: 8.5vh;
  left: 260px;
  width: calc(100% - 260px);
  float: right;
  height: 89.5vh;
  background: #F7F7F7;
  overflow-x: scroll;*/
    padding: 20px;
    /*20210716ここまで*/
  }
}
/* CHANGE SMO - END======================================== */
/*サイドメニュー*/
/*メインメニュー*/
.master ul#main_menu {
  width: 100%;
}

  .master ul#main_menu li {
    border-bottom: 1px solid #DCDCDC;
  }

  .master ul#main_menu li {
    width: 100%;
    padding: 25px 0 25px 25px;
    background: #FBFBFB;
    text-decoration: none;
    font-size: 110%;
    text-align: left;
    border-bottom: 1px solid #DCDCDC;
  }

#en-master ul#main_menu li#menu01 {
  background: #DEF2D9;
}

/*基本案表示時*/
.master ul#main_menu li.greenMenu {
  background: rgb(222, 242, 217);
}

/*コンテンツ*/
.master h2.ttl {
  margin: 0 0 30px 0;
  border-bottom: 2px solid #4B5570;
  font-size: 120%;
}

@media screen and (min-width: 500px) and (max-width: 1720px) {
  .master h2.ttl {
    width: 100%; /*20210716*/
    margin: 0 0 30px 0;
    border-bottom: 2px solid #4B5570;
    font-size: 120%;
  }
}

.master h3.sttl {
  width: 95%;
  margin: 0 0 0 20px; /*20210716*/
  padding: 10px 0 10px 20px;
  background: #FFFAD0;
  border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  box-shadow: 2px 0 2px 0 #DCDCDC;
  box-sizing: border-box; /*20210716*/
}
/* CHANGE SMO - START====================================== */
/* 小さい画面のときに横スクロールが表示されるように修正 */
@media screen and (min-width:1280px) and (max-width:1720px) {
  .master h3.sttl {
    /*20210716*/
    padding: 10px 0 10px 20px;
    background: #FFFAD0;
    border-radius: 10px 10px 0 0 / 10px 10px 0 0;
    box-shadow: 2px 0 2px 0 #DCDCDC;
  }
}

@media screen and (min-width:500px) and (max-width:1280px) {
  .master h3.sttl {
    width: 170%;
    margin: 0; /*20210716*/
    padding: 10px 0 10px 20px;
    background: #FFFAD0;
    border-radius: 10px 10px 0 0 / 10px 10px 0 0;
    box-shadow: 2px 0 2px 0 #DCDCDC;
  }
}
/* CHANGE SMO - END======================================== */
.master h3.sttl02 {
  width: 308px;
  margin: 0;
  padding: 10px 0 10px 20px;
  background: #FFFAD0;
  border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  box-shadow: 2px 0 2px 0 #DCDCDC;
}

.master main#grid_container section.master-sec {
  width: 95%; /*20210716*/
  margin: 0 0 30px 20px;
  padding: 20px;
  background: #fff;
  border-radius: 0 0 10px 10px / 0 0 10px 10px;
  box-shadow: 2px 0 2px 0 #DCDCDC;
  line-height: 2em;
  box-sizing: border-box; /*20210716*/
}

.master main#grid_container section.constwrap-box-section {
  width: 660px
}

  .master main#grid_container section.constwrap-box-section div div button { /*20210716*/
    vertical-align: middle;
    float: right; /*20210716*/
    margin-top: 5px; /*20210716*/
  }

  .master main#grid_container section.constwrap-box-section .btn_plus {
    position: unset;
    text-align: center;
  }
/* CHANGE SMO - START====================================== */
/* 小さい画面のときに横スクロールが表示されるように修正 */
@media screen and (min-width:1280px) and (max-width:1720px) {
  .master main#grid_container section.master-sec {
    /*20210716*/
    padding: 20px;
    background: #fff;
    border-radius: 0 0 10px 10px / 0 0 10px 10px;
    box-shadow: 2px 0 2px 0 #DCDCDC;
    line-height: 2em;
  }
}

@media screen and (min-width:500px) and (max-width:1280px) {
  .master main#grid_container section.master-sec {
    width: 170%;
    margin: 0px 0 20px; /*20210716*/
    padding: 20px;
    background: #fff;
    border-radius: 0 0 10px 10px / 0 0 10px 10px;
    box-shadow: 2px 0 2px 0 #DCDCDC;
    line-height: 2em;
  }
}
/* CHANGE SMO - END======================================== */
.master table.basetable {
  width: 100%;
}

  .master table.basetable th {
    width: 20%;
    padding: 10px 0 10px 20px;
  }
  /*20210721ここから*/
  .master table.basetable td {
    padding: 10px 0 10px 0px;
  }

.master main table.basetable td {
  padding: 10px 0 10px 40px;
  position: relative;
}
/*20210721ここまで*/
.master span.hissu {
  display: inline-block;
  padding: 0px 3px;
  background: #D90000;
  color: #fff;
  font-size: 70%;
  /*vertical-align:middle;*/
  position: absolute;
  top: 0%;
  bottom: 0%;
  margin: auto;
  left: 0;
  height: 25px;
  line-height: 27px;
}

.master span.hissu02 {
  /*float: left;*/
  position: absolute;
  top: 0%;
  bottom: 0%;
  margin: auto;
  left: 0;
  height: 25px;
  line-height: 27px;
  display: inline-block;
  padding: 0px 3px;
  background: #D90000;
  color: #fff;
  font-size: 70%;
  vertical-align: bottom;
}
/*20210716ここまで*/
.master span.hissu03 {
  display: inline;
  margin: 5px 10px 5px 0;
  padding: 1px 3px;
  background: #D90000;
  color: #fff;
  font-size: 70%;
  vertical-align: bottom;
}

.master span.error {
  margin: 0 0 0 40px;
  color: #D90000;
  font-size: 90%;
}

.master span.error_youbi {
  margin: 0 0 0 20px;
  color: #D90000;
  font-size: 90%;
}

.master span.error02 {
  margin: 0 0 0 0;
  color: #D90000;
  font-size: 90%;
}

.master .size65 {
  width: 65px;
}

.master .size85 {
  width: 85px;
}

.master .size100 {
  width: 100px;
}

.master .size140 {
  width: 140px;
}

.master .size215 {
  width: 215px;
}

.master .size360 {
  width: 360px;
}

.master .size400 {
  width: 400px;
  border: 1px solid #ff0000;
}

.master .size450 {
  width: 450px;
}

.master .size480 {
  width: 480px;
}

.master .size615 {
  width: 615px;
}

.master .size670 {
  width: 670px;
}

.master div.btn_hozon {
  width: 180px;
  height: 60px;
  margin: 0 auto 50px auto;
  padding-right: 5%; /*20210716*/
}
/*20210716ここから*/
.master #grid_container > div.btn_hozon, .master #grid_container_teacher > div.btn_hozon, .master #grid_container_class > div.btn_hozon, .master #grid_container_enji > div.btn_hozon {
  padding: 0;
}
/*20210716ここまで*/
.master div.btn_hozon [type="submit"] {
  width: 180px;
  height: 60px;
  display: block;
  border-radius: 100px;
  box-shadow: none;
  background: linear-gradient(to right, #2ED803, #07C184); /* グラデーション */
  font-size: 90%;
  line-height: 1em;
  color: #fff;
  font-size: 120%;
}

.master div.btn_hozon input[type="submit"]:focus {
  background: linear-gradient(to right, #07C184, #2ED803); /* グラデーション */
}

.master div.btn_hozon [type="button"] {
  width: 180px;
  height: 60px;
  display: block;
  border-radius: 100px;
  box-shadow: none;
  background: linear-gradient(to right, #2ED803, #07C184); /* グラデーション */
  font-size: 90%;
  line-height: 1em;
  color: #fff;
  font-size: 120%;
}

.master div.table_cont {
  width: 90%;
  padding: 10px 0 20px 10px;
  margin: 0;
  border: 1px solid #ccc;
}

.master div.cont3wrap {
  width: 96%;
  margin: 0 auto;
}

.master div.cont3wrap-box {
  width: 328px;
  float: left;
  margin: 0 10px 20px 0;
}

  .master div.cont3wrap-box section.cont3wrap-box-section {
    z-index: 3;
    position: relative;
    width: 288px !important;
    margin: 0;
    padding: 20px;
    background: #fff;
    border-radius: 0 0 10px 10px / 0 0 10px 10px;
    box-shadow: 2px 0 2px 0 #DCDCDC;
  }

    .master div.cont3wrap-box section.cont3wrap-box-section input {
      float: left;
    }

    .master div.cont3wrap-box section.cont3wrap-box-section ul {
      float: left;
    }

      .master div.cont3wrap-box section.cont3wrap-box-section ul li {
        height: 13px;
        margin: 0 0 10px 0;
      }

        .master div.cont3wrap-box section.cont3wrap-box-section ul li img {
          cursor: pointer;
        }

    .master div.cont3wrap-box section.cont3wrap-box-section p img {
      float: left;
      margin: 0 0 0 10px;
      padding: 10px 0 0 0;
      line-height: 1em;
    }

    .master div.cont3wrap-box section.cont3wrap-box-section div.btn_plus {
      z-index: 4;
      position: absolute;
      bottom: -20px;
      /*20210716ここから*/
      left: 0%;
      right: 0%;
      margin: auto;
      width: 36px;
      /*20210716ここまで*/
      cursor: pointer;
    }
/*面積*/
.master section.menseki-section {
  position: relative;
}

.master div.common-select {
  margin-bottom: 30px;
}

  .master div.common-select select {
    width: 100px;
    height: 18px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #DCDCDC;
    box-shadow: 0px 0px 5px 2px #DCDCDC inset;
    border-radius: 10px;
    background: url(../img/arrow02.jpg) right 50% no-repeat, #fff;
    background-size: 40px;
    cursor: pointer;
  }

  .master div.common-select select {
    float: left;
  }

.master div.menseki-wrap {
  width: 960px;
  margin: 0 0 20px 0;
}

.master div.menseki-cont {
  float: left;
  width: 855px;
  padding: 10px;
  background: #EEEEEE;
}

.master div.menseki-delete {
  width: 40px;
  margin: 20px;
  float: left;
  text-align: center;
  cursor: pointer;
}

.master table.menseki-box {
  width: 310px;
  float: left;
}

  .master table.menseki-box th {
    width: 100px;
  }

  .master table.menseki-box td {
    padding: 5px 0px;
  }

.master table.menseki-box02 {
  width: 310px;
  margin: 1.5px 0 0 75px; /*20210726*/
  float: left;
}

  .master table.menseki-box02 th {
    width: 100px;
  }

  .master table.menseki-box02 td {
    width: 210px;
    padding: 5px 0; /*20210726*/
  }

    .master table.menseki-box02 td input {
      /*margin: 0;*/ /*20210726*/
      text-align: right;
    }

      .master table.menseki-box02 td input::placeholder {
        text-align: right;
      }

.master table.menseki-box03 {
  width: 320px;
}

  .master table.menseki-box03 th {
    width: 130px;
  }

  .master table.menseki-box03 td input {
    text-align: right;
  }

.master div.common-select02 select {
  width: 200px;
  height: 18px;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #DCDCDC;
  box-shadow: 0px 0px 5px 2px #DCDCDC inset;
  border-radius: 10px;
  background: url(../img/arrow02.jpg) right 50% no-repeat, #fff;
  background-size: 40px;
  line-height: 1em;
  cursor: pointer;
}

.master div.year-add {
  float: left;
  margin: 0 0 0 20px;
  cursor: pointer;
  padding-top: 5px; /*20210716*/
}

.master p.year-add-txt {
  float: left;
  margin: 0 0 0 10px;
  line-height: 3em; /*20210716*/
}

.master div.menseki-add {
  position: absolute;
  bottom: 10px;
  left: 35%;
  cursor: pointer;
}

.master div.menseki-section-mount {
  width: 395px;
  margin: 0 0 20px 320px;
}
/*登園情報*/
.master div.touen-cont {
  padding: 10px;
}

.master div.touen-cont02 {
  float: left;
  width: 855px;
  padding: 10px;
  background: #EEEEEE;
}

.master table.touen-box {
  width: 410px;
  float: left;
}

  .master table.touen-box th {
    width: 105px;
  }

  .master table.touen-box td {
    padding: 5px 0px 5px 40px; /*20210716*/
    position: relative; /*20210716*/
  }

.master table.touen-box02 {
  width: 380px; /*20210721_3*/
  margin-left: 20px; /*20210721_3*/
  float: left;
}

  .master table.touen-box02 th {
    width: 105px;
  }

  .master table.touen-box02 td {
    padding: 5px 0px 5px 40px; /*20210716*/
    position: relative; /*20210716*/
  }

.master table.touen-box03 {
  width: 237px;
  float: left;
}

  .master table.touen-box03 th {
    width: 105px;
  }

  .master table.touen-box03 td {
    padding: 5px 0px;
  }

.master table.touen-box04 {
  margin: 0 0 0 35px;
  float: left;
  width: 237px;
  float: left;
}

  .master table.touen-box04 th {
    width: 105px;
  }

  .master table.touen-box04 td {
    padding: 5px 0px;
  }

.master div.time-select {
  float: left;
}

  .master div.time-select p {
    float: left;
    line-height: 50px; /*20210716*/
    vertical-align: bottom;
  }

  .master div.time-select select {
    width: 60px;
    height: 18px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #DCDCDC;
    box-shadow: 0px 0px 5px 2px #DCDCDC inset;
    border-radius: 10px;
    background: url(../img/arrow02.jpg) right 50% no-repeat, #fff;
    background-size: 40px;
    cursor: pointer;
  }

  .master div.time-select select {
    float: left;
    margin: 5px 0; /*20210721*/
  }

.master div.encyou-cont {
  width: 960px;
  margin: 0 0 20px 0;
}

.master div.encyou-delete {
  float: left;
  width: 42px;
  padding: 40px 20px;
  cursor: pointer;
}

.master div.encyou-wrap {
  position: relative;
  width: 960px;
  margin-bottom: 50px;
}

.master div.btn-encyou-add {
  position: absolute;
  bottom: -20px;
  left: 40%;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.master div.tuuchikakunin p {
  float: left;
  margin: 0 10px 0 0;
  line-height: 2em;
}

.master div.day-select {
  float: left;
  margin: 0 20px 0 0;
}

  .master div.day-select select {
    width: 60px;
    height: 18px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #DCDCDC;
    box-shadow: 0px 0px 5px 2px #DCDCDC inset;
    border-radius: 10px;
    background: url(../img/arrow02.jpg) right 50% no-repeat, #fff;
    background-size: 40px;
    cursor: pointer;
  }
/*えんじの記録情報*/
/*午睡チェック*/
.master div.gosui-cont {
  width: 860px;
  margin-bottom: 30px;
}

.master table.gosui-box {
  width: 410px;
  float: left;
}

  .master table.gosui-box th {
    width: 105px;
  }

  .master table.gosui-box td {
    padding: 5px 0px 5px 40px; /*20210716*/
    position: relative; /*20210716*/
  }

.master div.gosui-check-cont {
  width: 315px;
}

.master table.gosui-check-box {
  width: 315px;
}

  .master table.gosui-check-box th {
    width: 150px;
  }

  .master table.gosui-check-box td {
    padding: 5px 0px;
  }

.master .alignR {
  text-align: right !important;
}
/*検温*/
.master div.taion-select {
  float: left;
}

  .master div.taion-select p {
    float: left;
    line-height: 2.4em; /*20210716*/
    vertical-align: bottom;
  }

  .master div.taion-select select {
    width: 85px;
    height: 18px;
    margin: 0; /*20210716*/
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #DCDCDC;
    box-shadow: 0px 0px 5px 2px #DCDCDC inset;
    border-radius: 10px;
    background: url(../img/arrow02.jpg) right 50% no-repeat, #fff;
    background-size: 40px;
    cursor: pointer;
  }

  .master div.taion-select select {
    float: left;
  }

.master div.kenon-cont {
  width: 645px;
}

.master table.kenon-box {
  width: 645px;
}

  .master table.kenon-box th {
    width: 110px;
  }
  /*20210716ここから*/
  .master table.kenon-box td {
    padding: 10px 0 10px 40px;
    position: relative;
  }

.master .lh2 {
  line-height: 2.4em;
}
/*20210716ここまで*/
/*子供の様子*/
.master section.tango-cont {
  position: relative;
  width: 690px;
}

.master div.tango-box {
  /*width: 690px;*/ /*20210716*/
}

  .master div.tango-box input {
    float: left;
  }

  .master div.tango-box ul {
    float: left;
  }

    .master div.tango-box ul li {
      height: 13px;
      margin: 0 0 10px 0;
    }

      .master div.tango-box ul li img {
        cursor: pointer;
      }

  .master div.tango-box p img {
    float: left;
    padding: 5px 0 0 10px;
    cursor: pointer;
  }

.master div.btn_plus {
  z-index: 4;
  position: absolute;
  bottom: -17px;
  left: 28%;
  cursor: pointer;
}

.master .kuuhakubox {
  height: 30px;
}

.master .zip {
  cursor: pointer;
}

.master section.kensyokubo-cont {
}
/*アレルギー*/
.master ul.kensyokubo-check-box input[type="checkbox"] {
  display: none;
}

.master ul.kensyokubo-check-box {
  margin-bottom: 20px;
}

  .master ul.kensyokubo-check-box li {
    float: left;
    margin: 5px;
  }

    .master ul.kensyokubo-check-box li label {
      padding: 5px 20px;
      background: #FFFFFF;
      border: 1px solid #ccc;
      border-radius: 10px;
      cursor: pointer;
    }

    .master ul.kensyokubo-check-box li input[type="checkbox"]:checked + label {
      background: #30c40c;
      border: 1px solid #30c40c;
      color: #fff;
    }

.master div.kensyokubo-sonota {
  position: relative;
  padding: 15px 0 0 0;
}

  .master div.kensyokubo-sonota img {
    vertical-align: middle;
    cursor: pointer;
  }

  .master div.kensyokubo-sonota p {
    position: absolute;
    bottom: -60px;
    left: 15%;
    margin-bottom: 30px;
  }

.master input.changepass {
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #DCDCDC;
  border-radius: 0;
  box-shadow: 0px 0px 5px 2px #DCDCDC inset;
}

  .master input.changepass[type="checkbox"]:checked {
    background: url(../img/check.png) 5px 5px no-repeat;
    opacity: 1;
  }

.master input.showmenu {
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #DCDCDC;
  border-radius: 0;
  box-shadow: 0px 0px 5px 2px #DCDCDC inset;
}

  .master input.showmenu[type="checkbox"]:checked {
    background: url(../img/check.png) 5px 5px no-repeat;
    opacity: 1;
  }

/*20210716ここから*/
span.no-hissu {
  display: none;
}
/*20210716ここまで*/
.nowrap {
  white-space: nowrap;
}

/* 権限者情報 */
.master .lock {
  display: flex;
    align-items: center;
}
.master .lock-check-flg {
  margin-left: 30px;
}
.master .lock-check-flg input[type="radio"] {
  display: none;
}
.master .lock-check-flg input[type="radio"]:checked + label {
  background: #30C40C;
  border: none;
  color: #fff;
}
.master .lock-check-flg label {
  display: block;
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-right: 10px;
  text-align: center;
  cursor: pointer;
  color: #555d73;
}

.master ul.manager-check-box input[type="checkbox"] {
  display: none;
}
.master ul.manager-check-box {
  margin-bottom: 20px;
}
.master ul.manager-check-box li {
  float: left;
  margin: 5px;
}
.master ul.manager-check-box li label {
  padding: 5px 20px;
  background: #FFFFFF;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
}
.master ul.manager-check-box li input[type="checkbox"]:checked + label {
  background: #30c40c;
  border: 1px solid #30c40c;
  color: #fff;
}
.master ul.manager-check-box li input[type="checkbox"]:disabled + label {
  background: #efefef;
  color: #d0d1d6;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  width: max-content;
}
.master ul.manager-check-box li input[type="checkbox"]:checked:disabled + label {
  background-color: #dcdcdc;
  color: #fff;
  border: 1px solid #ccc;
  width: max-content;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}