Cacher is the code snippet organizer for pro developers

/**
 * Modals DEPRECATED
 */

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5em;


  transition: visibility 0s ease-in 0.3s, opacity 0.3s ease-in;
}

.modal.visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.modal {
    position: fixed;
    display: block;
    width: 50vw;

    /*height: 60%;*/
    /*min-height: 60%;*/
    /*max-height: 60%;*/

    /*overflow-y: scroll;*/
    /*top: -100vh;*/
    top: 10vh;
    left: 25vw;
    z-index: 9999;


    visibility: hidden;
    opacity: 0;

    border: 1px solid rgb(166,166,166);
    background-color: rgb(255,255,255);

    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
    /*box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */

    /*transition: top 0.2s cubic-bezier(.17,.67,.83,.67);*/
}

.modal .modal-inner {
    height: 600px;
    overflow-y: scroll;
}

.modal header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: rgb(240,240,240);
    background: linear-gradient(to top, #ECE9E6 , #FFFFFF);
    border-bottom: 1px solid rgb(166,166,166);
}

.modal header h2 {
    display: flex;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
}

.modal header button {
    display: flex;
}

.modal section {
    /*position: relative;*/
    /*height:  80%;*/
    padding: 2em;
    /*overflow-y: scroll;*/
}