@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); *, *:after, *:before { box-sizing: border-box; } body { overflow-x: hidden; font-family: "DM Sans", sans-serif; line-height: 1.5; background-color: #333; padding: 0; } img { max-width: 100%; display: block; } input { appearance: none; border-radius: 0; } .card { margin: 2rem auto; display: flex; flex-direction: column; width: 100%; max-width: 850px; background-color: #fff; border-radius: 10px; box-shadow: 0 10px 20px 0 rgba(153, 153, 153, .25); padding: 0.75rem; } .card-image { border-radius: 8px; overflow: hidden; padding-bottom: 25%; background-image: url('https://assets.codepen.io/285131/coffee_1.jpg'); background-repeat: no-repeat; background-size: 150%; background-position: 0 5%; position: relative; } .card-heading { position: absolute; left: 10%; top: 15%; right: 10%; font-size: 1.75rem; font-weight: 700; color: #735400; line-height: 1.222; } @media(max-width: 768px){ .card-heading { font-size: 1rem; } } .card-heading small { display: block; font-size: 0.75em; font-weight: 400; margin-top: 0.25em; } .card-form { padding: 2rem 1rem 0; } .input { display: flex; flex-direction: column-reverse; position: relative; padding-top: 1.5rem; } .input + .input { margin-top: 1.5rem; } .input-label { user-select: none; color: #8597a3; position: absolute; top: 1.5rem; transition: 0.25s ease; } .input-file{ padding-bottom: 1.5rem; } .input-field { border: 0; background-color: transparent; border-bottom: 2px solid #eee; font: inherit; font-size: 1.125rem; padding: 0.25rem 0; } .input-field:focus, .input-field:valid { outline: 0; border-bottom-color: #6658d3; } .input-field:focus + .input-label, .input-field:valid + .input-label { color: #6658d3; transform: translateY(-1.5rem); } .action { margin-top: 2rem; } .action-button { font: inherit; font-size: 1.25rem; padding: 1em; width: 100%; font-weight: 500; background-color: #6658d3; border-radius: 6px; color: #fff; border: 0; transition: all .3s ease-in-out; } .action-button:hover{ background-color: #382c93; } .action-button:focus { outline: 0; } .card-info { padding: 1rem 1rem; text-align: center; font-size: 0.875rem; color: #8597a3; user-select: none; } .card-info a { display: block; color: #6658d3; text-decoration: none; }td.active { background-color: #2c6ed5; } input[type="date" i] { padding: 14px; } .table-condensed td, .table-condensed th { font-size: 14px; font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif; font-weight: 400; } .daterangepicker td { width: 40px; height: 30px; } .daterangepicker { border: none; -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); display: none; border: 1px solid #e0e0e0; margin-top: 5px; } .daterangepicker::after, .daterangepicker::before { display: none; } .daterangepicker thead tr th { padding: 10px 0; } .daterangepicker .table-condensed th select { border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; padding: 5px; outline: none; }.input-icon { position: absolute; font-size: 18px; color: #ccc; right: 8px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .input--style-1 { padding: 9px 0; color: #666; } .input--style-1::-webkit-input-placeholder {color: #555; } .input--style-1:-moz-placeholder { color: #555; opacity: 1; } .input--style-1::-moz-placeholder { color: #555; opacity: 1; } .input--style-1:-ms-input-placeholder { color: #555; } .input--style-1:-ms-input-placeholder { color: #555; }.select--no-search .select2-search { display: none !important; } .rs-select2 .select2-container { width: 100% !important; outline: none; } .rs-select2 .select2-container .select2-selection--single { outline: none; border: none; height: 34px; } .rs-select2 .select2-container .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 0; color: #555; } .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow { height: 32px; right: 4px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b { display: none; } .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after { font-family: "Material-Design-Iconic-Font"; content: '\f2f9'; font-size: 18px; color: #ccc; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .select2-container--open .select2-dropdown--below { border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); border: 1px solid #e0e0e0; margin-top: 5px; overflow: hidden; } .socials{ display: flex; flex-direction: row; align-items: center; justify-content: center; } .socials a{ padding: 1rem 1rem; transition: all .3s ease-in-out; } .socials a:hover{ transform: translateY(-.3rem); }