.modal
 { display : none;
   position : fixed;
   z-index : 1031;
   left : 0;
   top : 0;
   width : calc(100% - 40px);
   height : 100%;
   overflow : auto;
   background-color : rgb(0,0,0);
   background-color : rgba(0,0,0,0.4);
   padding : 20px;
   color : #353535;
 }

.modal-content
 { background-color : #fefefe;
   margin : auto;
   margin-bottom : 40px;
   border : 1px solid #888;
   width : calc(100% - 40px);
   max-width : 600px;
   padding : 20px;
   border-radius : 5px;
   box-shadow : 0px 1px 10px black;
 }

.modal-content .modal-header
 { position : relative;
   border-bottom : 1px solid silver;
   padding-bottom : 5px;
 }

.modal-content .modal-header .modal-title
 { padding-right : 20px;
   font-weight : bold;
   letter-spacing : 0.5px
 }

.modal-content .modal-header .modal-close
 { position : absolute;
   right : 0px;
   top : 0px;
   padding : 0px 0px;
 }

.modal-close
 { color : #aaaaaa;
   font-size : 24px;
   font-weight : bold;
   text-decoration : unset;
   line-height : 0px;
   user-select : none;
 }

.modal-close:hover, .modal-close:focus
 { color : #000;
   text-decoration : none;
   cursor : pointer;
 }

.modal-content .modal-body
 { padding : 20px 0px;
   border-bottom : 1px solid silver;
 }

.modal-content .modal-footer
 { padding-top : 20px;
   text-align : right;
 }