.modal{display:none;position:fixed;z-index:201;top:0;left:0;width:100%;height:100%;background-color:var(--medium-black-opacity)}.modal *{color:var(--modal-font-color);line-height:1.5rem}.modal-content{position:absolute;background-color:var(--modal-header-background-color);left:50%;top:-100%;transform:translate(-50%,-50%);max-width:calc(100% - 20px);min-width:300px;max-height:calc(100% - 20px);height:auto;overflow:hidden;border-radius:20px;box-shadow:2px 2px 2px var(--heavy-black-opacity);transition:.2s ease-in-out}#modal-contact-failure .modal-content,#modal-bug-failure .modal-content{background-color:var(--cancel-button-color-hover)}@media screen and (min-width:1101px){#modal-settings .modal-content,#modal-calendar .modal-content,#modal-statistics .modal-content{min-width:800px}}@media screen and (max-width:1100px){.modal-content{width:calc(75%)}#modal-contact-failure .modal-content,#modal-bug-failure .modal-content,#modal-contact-success .modal-content,#modal-bug-success .modal-content,#modal-login .modal-content{max-width:450px}}@media screen and (max-width:900px){.modal-content{width:calc(80%)}}@media screen and (max-width:700px){.modal-content{width:calc(100% - 20px)}}.modal-header{padding:10px;display:flex;align-items:center}.modal-header h2{color:var(--modal-header-font-color);text-align:center;line-height:1.8rem}.modal-header img{margin:0 20px;cursor:pointer;transition:.2s ease-in-out}.modal-header img:hover{transform:scale(1.1)}.modal-body{padding:20px;height:auto;overflow-y:auto;background-clip:padding-box;max-height:60vh;background:var(--background-color)}.modal-body .content>div{height:auto;overflow-y:auto;background-clip:padding-box}.modal-bar{display:flex;padding:0 10px}.modal-bar div{cursor:pointer;color:var(--modal-header-font-color);font-weight:700;padding:10px;border-radius:15px 15px 0 0}.modal-bar div.active{background-color:var(--background-color);color:var(--header-font-color);margin-bottom:-1px}.modal-content label{margin-left:10px;margin-right:10px;font-weight:700}.modal-content .disclaimer{padding:0 10px}.modal-content .disclaimer *{font-style:italic;font-size:.875rem;margin-bottom:5px}.modal-content .disclaimer ul{margin-left:5px;margin-right:5px}.modal-content .disclaimer li{list-style-type:disc;margin-left:10px;margin-right:10px}.modal-content input[type=email],.modal-content input[type=text],.modal-content textarea{width:calc(100% - 20px);padding:10px;margin:10px;border:1px solid var(--modal-border-color);box-sizing:border-box;resize:vertical}.modal-content input[type=email]:focus,.modal-content input[type=text]:focus,.modal-content textarea:focus{border:1px solid var(--modal-focus-color)}.modal-content textarea{min-height:200px}.modal-content input[type=submit],#reset-color{font-weight:700;cursor:pointer;display:block;height:auto;width:fit-content;margin:20px auto 10px;padding:10px 20px;background:var(--background-color);color:var(--modal-button-color);border:1px solid var(--modal-button-color);border-radius:10px;box-shadow:2px 2px 2px var(--heavy-black-opacity);transition:.2s ease-in-out}#reset-color{margin-left:10px;margin-top:auto;vertical-align:middle;margin-bottom:auto;cursor:pointer}.modal-content input[type=submit]:hover,#reset-color:hover{background:var(--modal-button-color);color:var(--background-color)}.modal-content a{text-decoration:underline;color:var(--modal-link-color)}.modal-content .content form{display:flex;flex-wrap:wrap;padding:10px 0}.modal-content .content form:not(:last-child){border-bottom:1px solid var(--game-background-color)}.modal-content .content form *,.modal-content .content div{margin:5px}.modal-content .content form>span,.modal-content .content p span:first-child,.modal-content .content div{font-weight:700}.modal-content .content p{unicode-bidi:bidi-override}.modal-content .color-picker{display:flex}.modal-content input[type=color]{width:80px;height:80px;margin-left:10px;padding:2px;background:lightgrey;border:1px solid grey;border-radius:5px;cursor:pointer}form[name=card-back-image]>div,form[name=background-image]>div{display:flex;flex-wrap:wrap;width:100%}form[name=card-back-image] label,form[name=background-image] label{display:flex;flex-direction:column;justify-content:center;cursor:pointer}form[name=card-back-image] label{width:calc(25% - 10px)}form[name=background-image] label{width:calc(100%/3 - 10px)}form[name=card-back-image] img,form[name=background-image] img{display:block;width:90%;height:auto;margin:5px auto}form[name=card-back-image] input,form[name=background-image] input{display:block;margin:5px auto}#google-login-button{margin:10px auto;width:fit-content}#google-login-button *{font-weight:700;color:var(--modal-header-font-color)}