.lbl-toggle { display: block; font-weight: bold; font-size: 1.2rem; text-transform: uppercase; text-align:left; padding: 1rem; color: #A01F13; /*background: #FAE042;*/ cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } .lbl-toggle:hover { color: #7C5A0B; } .lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } .collapsible-content .content-inner { background: #F5ECDB; border-bottom: 1px solid rgba(250, 224, 66, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } .collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } input[type='checkbox'] { display: none; } .toggle:checked + .lbl-toggle + .collapsible-content { max-height: 500px; } .toggle:checked + .lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } .toggle:checked + .lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .content-inner input[type="text"]{ width:400px; } .content-inner p{ display:table-row; } .content-inner label{ display:table-cell; } .content-inner input{ display: table-cell; margin-bottom: 20px; } .content-inner select{ display: table-cell; margin-bottom: 20px; width:400px; } .search{ display: table; } .search p{ display: table-row; } .search label{ display: table-cell; } /*.search input{ display: table-cell; }*/ .search input[type="text"]{ width: 400px; } .box { /*width: 40%; margin: 0 auto; background: rgba(255,255,255,0.2); padding: 35px; border: 2px solid #fff; border-radius: 20px/50px; background-clip: padding-box; text-align: center;*/ } .button { font-size: 1em; padding: 10px; /*color: #fff;*/ border: 2px solid #000000; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; display: inline; float:right; } .button:hover { background: #06D85F; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 150px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } }