/*
    This is for Picture Upload Dialog.
*/
/*
  Background.
*/
.MD_SITE_ADDPIC_MBG {
  position: fixed;
  display: block;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background: rgba(0,0,0,0);
  z-index:100001;
}

  .MD_SITE_ADDPIC_MODAL {
    position:relative;
    top:16%;
    left:16%;
    z-index:100002;
    width: 420px;                   /*Width*/
    height: 390px;                  /*!!Height*/
    display: flex;                  /*Display*/
    -webkit-flex-direction: column; /*Flex_Direction*/
    flex-direction: column;
    justify-content: flex-start;    /*Flex_Justify*/
    align-items: stretch;           /*Flex_Align*/
    flex-glow: 0;                   /*Flex_Grow*/
    color: #C0C0C0;                 /*TX_Color*/
    background: #FFFFFF;            /*BG_Color*/
    font-size: 10px;                /*Font_Size*/
    border: solid 1px #C0C0C0;      /*Border,Border_Color*/

    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
  }

  /*
    For Contents.
  */
  /*Scroll wapper.*/
  .MD_SITE_ADDPIC_MODAL .CONT_WAP{
    margin-top: 0px;
    margin-left: 7px;
    width: 410px;                   /*Width*/
    height: 367px;                  /*!!Contents Height*/
/*
    border: 1px solid #DCDCDC;
*/
    overflow-x: hidden;
    overflow-y: hidden;

  }

  /*
      Contents Area setting.
  */
  .MD_SITE_ADDPIC_MODAL .CONT_BODY{

    display: flex;
    flex-direction: column;

    margin-top: 0px;
    margin-left: 4px;
    width: calc( 410px + 17px );    /*Width*/
    height: 365px;                  /*!!Contents Height*/
    overflow-y: auto;

  }

  /*
    For Message and Buttons.
  */
  .MD_SITE_ADDPIC_MODAL .FUNC_BODY {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 7px;
  }

  .MD_SITE_ADDPIC_MODAL .FUNC_MSG {
    width: 100%;
    margin-top: 4px;
    margin-left: 24px;
    margin-bottom: 0px;
    text-align: left;
  }

  .PIC_BOX_ITEMS_901 {
    width: 100%;
    display: flex;
    margin-top: 5px;
  }

  .PIC_BOX_ITEMS_901 input[type="text"]{
    font-size: 0.9em;
    padding: 4px 8px;
    border: solid 1px #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right:5px;
	}

  /* For Choose File */
  .LB_BASIC_01_901 {
    font-size:  12px;
    display: block;
    float: left;
    width: 138px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;

    color: #71C5E8;
    background-color: #FFFFFF;

    border: solid 1px #71C5E8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

  }

  .LB_BASIC_01_901:hover {
      color: #fff;
      background:#71C5E8;
      cursor:pointer;
  }

  .LB_BASIC_02_901 {
    font-size:  12px;
    display: block;
    float: left;
    width: 40px;
    margin-left: 5px;
    margin-right: 5px;

    color: #79b7e7;

  }

  .LB_BASIC_02_901:hover {
      color: #FC86A9;
      cursor:pointer;
  }

  .LB_BASIC_03_901 {
    font-size:  12px;
    display: block;
    float: left;
    width: 40px;
    margin-left: 5px;
    margin-right: 5px;

    color: #C0C0C0;

  }

  /* Mandatory label */
  .MDR_901 {
    font-size:  12px;
    width: 10px;
    margin-left: 0px;
    margin-right: 2px;

  }

  .IN_BASIC_01_901 {
    font-size: 12px;
    width: 256px;
    margin-left: 0px;
    border: 0;
    padding: 2px;
    border: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 0px;

    color: #C0C0C0;
    background-color: #FFFFFF;

  }

  .IN_BASIC_02_901 {
    width: 346px;
/*    font-size: 12px;
    width: 346px;
    margin-left: 0px;
    border: 0;
    padding: 2px;
    border: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 0px;
*/
    color: #C0C0C0;
    background-color: #FFFFFF;

  }

  #mdl_gallery_pic {
    display: none;
  }

  .PREV_01_901 {
/*    width: 400px;
    height: 300px;
    margin-top: 5px;
    margin-left: 0px;
*/  }

  #mdl_pic_preview {

    width: 400px;
    height: auto;
    display: none;

    border: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

  }

  #mdl_pic_preview img{
    width: 100%;
    height:auto;
	}

  .DROP_01_901 {
    font-size: 12px;
    width: 400px;
    height: 300px;
    margin-top: 5px;
    margin-left: 0px;
    color: #C0C0C0;
    background-color: #FFFFFF;

    text-align: center;

    border: dashed 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

  }

  .IMG_BASIC_901 {
    width: 400px;
    height: 300px;
    margin-top: 2px;
    margin-buttom: 2px;
    margin-left: 0px;

    object-fit: contain;
/*
    object-fit: cover;
*/

  }


  /*
      Function buttons
  */
  .MD_BTNS_901 {
    font-size: 12px;
    width: 70px;
    margin-top: 0px;
    margin-left: 6px;
    text-align: center;

    color: #71C5E8;
    background-color: #FFFFFF;

    border: 1px solid #71C5E8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }

  .MD_BTNS_901:hover {
    background-color: #71C5E8;
    color: #fff;
    cursor:pointer;
  }

/*
    For SP.
*/
@media screen and (max-width:767px){
  .MD_SITE_ADDPIC_MODAL {
    width:90%;
    left:5%;
  }

  .MD_SITE_ADDPIC_MODAL .CONT_WAP{
    width: 100%;
	}

  .MD_SITE_ADDPIC_MODAL .CONT_BODY{
    width: calc( 100% - 20px );
  }

  #mdl_pic_preview {
    width: 100%;
  }

  #mdl_pic_preview img{
    width: 100%;
    height:auto;
  }

  .PREV_01_901 {
    width: 100%;
    margin-top: 0;
  }


}