/** CUSTOM FORM ELEMENTS [OPTIONAL] This CSS file must be included after all other CSS's. Nothing special - will only rewrite the form elements (input, textarea, select2, buttons) to look more clean, professional. **************************************************************** **/ /** CUSTOM : FORM ELEMENTS *************************** **/ .btn:not(.btn-xs):not(.btn-sm):not(.btn-md):not(.btn-lg):not(.btn-xlg):not(.btn-reveal):not(.btn-3d):not(.btn-social):not(.btn-v1) { height:auto; padding: 14px 20px; } #footer .btn { padding: 6px 12px; } #footer.footer-light input { color: #121212 !important; } input.form-control, select.form-control, textarea.form-control { height: auto; color: #121212; background-color: #fff; border-color: #dee5ed; width: 100%; border-width:1px; font-size: 15px; line-height: 15px; padding: 14px 20px; border-radius: 3px; margin-bottom: 15px; outline: none; -webkit-appearance: none; -webkit-transition: all .300s; -moz-transition: all .300s; -o-transition: all .300s; transition: all .300s; } form .row input.form-control, form .row select.form-control, form .row textarea.form-control { margin-bottom: 0; } @media only screen and (max-width: 768px) { /* mobile fix */ input.form-control, select.form-control, textarea.form-control { line-height: 22px; } } /* label spacing fix */ form label { margin-top:15px; } #topBar form label, #header form label, #footer form label, form div.form-group label { margin-top:0; } input.form-control:hover, select.form-control:hover, textarea.form-control:hover { background-color: #fafafa !important; } section.dark input.form-control:hover, section.dark select.form-control:hover, section.dark textarea.form-control:hover { background-color: #1c2125 !important; } section.dark .select2-container .select2-selection--single .select2-selection__rendered, section.dark input.form-control, section.dark select.form-control, section.dark textarea.form-control { color: #ffffff; background-color: #272e33 ; border-color: #272e33; } section.dark input::placeholder, section.dark select::placeholder, section.dark textarea::placeholder { color: #a3a9b0 !important; } /* textarea */ textarea.form-control { min-height:100px; } /* normal select */ select.form-control:not([size]):not([multiple]) { height: 50px; -webkit-appearance:none; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) no-repeat; background-position: center right 20px; background-color: #fff; color:#a3a9b0; } section.dark select.form-control:not([size]):not([multiple]) { background: #272e33 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 15px center no-repeat; background-position: center right 20px; color:# c9c9c9; } /* SELECT2 CUSTOM */ .select2 { position: relative; } .select2-container--default .select2-selection--single { border: none; background-color: #fff; } .select2-container { width: 100% !important; max-width: 100% !important; font-size: 16px; height: auto; margin-bottom: 15px; } form .row .select2-container { margin-bottom: 0; } @media (min-width: 64em) { .select2-container.select2-container--open { max-width: 393px !important; } } .select2-container .select2-selection--single { height: auto; margin: 0; outline: none; } .select2-container .select2-selection--single .select2-selection__rendered { font-size: 16px; max-width: 100%; padding: 16px 20px; border-radius: 3px; border-style: solid; border-width: 1px; border-color: #dee5ed; resize: none; line-height: 1; outline: none; color: #a3a9b0; text-align: left; margin: 0; height: 50px; } .select2-container .select2-selection--single .select2-selection__rendered:after { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 0 center no-repeat; width: 20px; } .select2-container .select2-results .select2-results__options { width: 100%; text-align: left; font-size: 16px; } .select2-container .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] { background-color: #ccc; } section.dark .select2-container .select2-selection--single .select2-selection__rendered { background-color: #272e33; border-color: #272e33; color: #a3a9b0; } section.dark .select2-container .select2-selection--single .select2-selection__rendered, .select2-container .select2-selection--single .select2-selection__rendered { -webkit-transition: all .300s; -moz-transition: all .300s; -o-transition: all .300s; transition: all .300s; } .select2-container .select2-selection--single .select2-selection__rendered:hover { background-color: #fafafa; } section.dark .select2-container .select2-selection--single .select2-selection__rendered:hover { background-color: #1c2125; } section.dark .select2-container .select2-selection--single .select2-selection__rendered:focus { border-color: #c1d120; } section.dark .select2-container .select2-results .select2-results__options { border-color: #a3a9b0; } section.dark .select2-container .select2-results .select2-results__options .select2-results__option { background-color: #272e33; color: #a3a9b0; } section.dark .select2-container .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] { background-color: #333a3f; } .select2-container--default .select2-selection--single .select2-selection__arrow { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 0 center no-repeat; width: 20px; height: 20px; right: 12px; top: 50%; margin-top: -9px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; } .select2-results__option { padding-left: 20px; padding-right: 20px; } .select2-container.select2-container--open { max-width: 100% !important; } section.dark .select2-dropdown { border: 0; } .select2-dropdown { border-color: #dee5ed; border-width:1px; } .select2-container--focus { outline: 1px solid transparent; z-index: 102; } /* search field */ .select2-container--default .select2-search--dropdown .select2-search__field { padding: 6px !important; border-radius: 0; -webkit-border-radius: 0; } /* optgroup */ .select2-container--default .select2-results__group { font-size:14px; border-top: #eaeaea 1px solid; padding-left: 17px; padding-right: 17px; } /* FANCY FORM */ .fancy-file-upload { height: auto; } .fancy-file-upload>span.button { height: 41px; line-height: 41px; } .fancy-file-upload>i { top: 4px; } /* MISC */ @media only screen and (max-width: 768px) { form .row { margin-bottom:0 !important; } form .row>div { margin-bottom:15px !important; display: block; } form .row>div>.row>div:last-child { margin-bottom: 0 !important; } } /** RTL Add .rtl class to body *************************** **/ /* forms */ body.rtl .select2-container .select2-results .select2-results__options, body.rtl .select2-container .select2-selection--single .select2-selection__rendered { text-align: right !important; } body.rtl .select2-container--default .select2-selection--single .select2-selection__arrow { left:15px; } body.rtl .select2-results__option, body.rtl .select2-container .select2-selection--single .select2-selection__rendered { padding-left:20px; padding-right: 20px; } body.rtl input, body.rtl select, body.rtl textarea { text-align:right !important; } /* normal select */ body.rtl select.form-control:not([size]):not([multiple]) { background-position: center left 15px; } body.rtl section.dark select.form-control:not([size]):not([multiple]) { background-position: center left 15px; }