/*------------------------------------------------------------------------*/
/* custom.jspanel.css                                                     */
/*------------------------------------------------------------------------*/

 .jsPanel .jsPanel-ftr {
   display    : block ; 
   background : "#708090" ;         /* 왜 작동 안하는가?? */

/* background-color : "#708090" ;   /* 왜 작동 안하는가?? */

/*  border       : "1px solid green" ;  
   flex-wrap     : wrap ;
  justify-content: flex-start ;
*/

 }

 * ------------------------------------------------------------ */
 /*  CSS for custom controls                                    */
 * ------------------------------------------------------------ */
/.custom-control-icon.custom-smallify::before{
    content: "\025B4";
    /*content: url(../../images/close16x16.png);*/
 }
 .custom-control-icon.custom-minimize::before { content: "\0268A"; }
 .custom-control-icon.custom-normalize::before{ content: "\02750"; }
 .custom-control-icon.custom-maximize::before{ content: "\02610" ; }
 .custom-control-icon.custom-close::before{ content: "\02715"; }

/*------------------------------------------------------------- 
  jsPanel                                                      
------------------------------------------------------------- */
.jsPanel-resizeit-handle.jsPanel-resizeit-e.my-resize-e {
  cursor: e-resize;
  height: calc(100%);   /* (org : 100% - 16px; )  */
  right : -1px;
  top   : 0px ;
  width : 4px ;    /* 12px;  */
  background-color : "#EEEEEE" ;  
}

.jsPanel-resizeit-handle.my-resize-s{
  cursor : s-resize;
  bottom : -2px ;
  height : 4px  ;
  left   : 4px  ;
  width  : calc(100%);
  background-color : "#EEEEEE" ;   
}



/*------------------------------------------------------------- 
 jsPanel-modal                                                
------------------------------------------------------------- */
.jsPanel-modal-backdrop {
  animation-duration: 550ms;
//  background : rgb(0,0,0);
//  opacity    : 0.5 ;
  background-color:rgba(0,0,0, 0.5);  
}

/*
.jsPanel-modal-backdrop {
  animation: modalBackdropFadeIn ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 750ms;
  background: rgb(0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jsPanel-modal-backdrop {
    animation: '';
    animation-fill-mode: unset;
    animation-duration: unset;
    background: rgb(0,0,0);
    opacity: 0.65;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
*/

/*------------------------------------------------------------- 
 jsPanel-dialog jsPanel.dialog.css 는 사용안한다              
--------------------------------------------------------------- */

.jsPanel-dialog {
  min-width: 360px;         /* ORG: 400px */
  margin-top: 50px;
  max-height: calc(90vh - 50px);
}

.jsPanel-dialog .jsPanel-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Add some padding to the dialog content */ 
  padding: 1rem;
}

.jsPanel-dialog .buttonbar {
  display    : flex       ;
  justify-content: right  ;
  margin-top : 10px;
  padding-top: 10px;
  border-top : 1px solid #ccc;
  width      : 100%;
}

.jsPanel-dialog .buttonbar button {
  margin-left: 0.5rem;
}

/* Modals in the background are partly transparent */
.jsPanel-modal.background {
  opacity: 0.3 !important;
}

/* Radio buttons and checkboxes, followed by a span */
input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  margin: 0 0.5rem 0 0;
}

input[type=radio] {
  margin-bottom: 2px;
}

input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}