/** ----------------------------------------------------------------------------------------------------- * * form.css file * * @author Szincsák András * @copyright Copyright (c) 2021, Szincsák András * ------------------------------------------------------------------------------------------------------ */ .form-group{position: relative} .form-control {padding:10px 15px ;height:auto; font-size: 1.2em; font-weight: 300;} .form-control:focus { box-shadow: none; border-color: #bccbd2; background: #ebf0f3;} .form-control::-webkit-input-placeholder { color: #bccbd2;} .form-control option{font-size: 1.1em;font-weight: 300;} .pwswitch{color: #7dbacc;background: #e7e7e7;border-left: 1px #bbb solid; width: 36px;font-size:1.3em; max-height: 48px;cursor:pointer; position: absolute; top: 1px; right: 1px; bottom: 1px;border-radius: 0px 5px 5px 0px; display: flex;justify-content: center;align-items: center;} .pwblock.validated li{color:#f00} .pwblock.validated li:after{content:"✘";font-weight:bold;color:#f00;margin-left:7px} .pwblock ul{border:1px solid #ccc;padding:5px 0px 5px 50px} .pwblock ul li{text-align:left} .pwblock.validated li.valid:after{content:"✓";font-weight:bold;color:#bccbd2;margin-left:7px} .pwblock.validated li.valid{color:#5bb755} .pwswitched:valid, .pwswitched:invalid { background-position: right calc(.375em + .1875rem + 40px) center;} #sectionForm {padding: 0;margin: 3% 0 0 0;} #sectionPopup form{padding: 40px 0 70px 0;} .form-compact b{margin-bottom: 10px;display: block;} /*select2*/ .select2-container{outline: 0!Important;} .select2-container--focus{outline: 0!Important;} .select2-container--default .select2-selection--single .select2-selection__arrow{top: 11px;} .select2-container--default .select2-selection--single { padding: 10px 5px 10px 0px; height: 51px;border-radius:0;border-color:#ced4da; font-weight: 300; font-size: 1.2em;} .select2-selection--single:focus{outline:0;border-color: #bccbd2; background: #ebf0f3;} .select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #ccc 1px;outline:0} .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: #617da4;} /*Autocomplete*/ .ui-menu .highlight{background-color: #f6d77c;padding:3px 0; color: #888;} /*float label*/ .has-float-label label {color:#b9b9b9;font-weight: 500!Important;} /*ajax upload*/ #mediaInfoContainer{position: absolute;top: 0;left: 0;right: 0;top: 0;bottom: 0;background: rgba(66,66,66,.6);display:none;} #mediaInfo {display: block;width: 70%; margin: auto; height: 150px; padding: 20px; background: #ebebeb;margin-top: 100px;} /*headerForm*/ .headerForm{width:40%} .small-row{padding:0px 15px} /*ERROR summary*/ .errorSummary{text-align:left} .errorSummary li{list-style: square} .form-group.small{ padding: 0;font-size:.8em} .form-group.small >row{background:#f00} .form-group.small .form-control{ padding: 5px 0 0 5px;} .form-group.small label{left:0;max-width: 7ch; overflow: hidden;} .form-group .hint {font-size: .8em; line-height: 1em; color: #627da4;font-style: italic; display: block; width: 100%;} .form-group .input-group-append{opacity:1!Important} .form-group .input-group-text{background:#627da4;color: #fff} .form-group .error{color:#f00; } .form-group div.error{color:#f00;font-size: .9em;font-style: italic; display: block; width: 100%; } #sectionPopup form.small {padding:15px; position: absolute; bottom: 0; top: 0;} #sectionPopup form.small b{color:#eee} #sectionPopup form.small table {color:#fff} #sectionPopup form.small table td{padding:5px} #sectionPopup form.small label{display:none} #sectionPopup form.small p{ margin: -13px 0 0 0;} #sectionPopup form.small input{font-size: 2em;line-height: 1em;padding : 5px 10px} #sectionPopup form.small input[type=number]::-webkit-inner-spin-button {width:40px} #sectionPopup form.small input[type=number]{font-size: 3.8em;font-weight: bolder;line-height: 1em;} #sectionPopup form.small input::-webkit-input-placeholder { font-size:16px} #sectionPopup form.small.type-3 {background:#03bcc5;color:#fff} #sectionPopup form.small.type-3 input[type=number]{background: #006583;color: #fff;padding: 5px 5px 5px 20px; } #sectionPopup form.small.type-2 {background:#ab797e;color:#fff} #sectionPopup form.small.type-2 input[type=number]{background: #83000e;color: #fff;padding: 5px 5px 5px 20px;} #sectionPopup form.small.type-1 {background:#999;color:#fff} #sectionPopup form.small.type-1 input[type=number]{background: #83000e;color: #fff;padding: 5px 5px 5px 20px;} .live{margin: -15px 0 -10px 0;width: 100%;text-align: center;} .live .badge{margin-right:-3px;font-size:1vw} @media (max-width: 979px) { .live .badge{font-size:75%} } @media (max-width: 360px) { #sectionPopup form.small { height: max-content; } } #sectionPopup form { padding: 0px 0 70px 0;} .sectionEdit textarea{font-size:.8em; line-height: 1em;} .question.hide{display:none} .question.hide +label{display:none} #sectionPopupFull form {margin-top:30px} .ui-autocomplete-input{padding:10px;font-size:1.3em} .form-check-all{font-size:1.2em} .btn-code{margin-bottom: 18px; font-size: 1.5em; line-height: 1em; text-align: left; padding: 12px 15px;} .errorSummary{background:#ebbcbc;padding:10px} .errorSummary p{color:#7c4545} .errorSummary ul{ padding-left: 10px;} .errorSummary li{font-size:.8em;color: #df0000;} /*SPINNER*/ input.changed{background:#f6d06a} .inputSpinner.hasvalue{ font-size:1em} .form-control.inputSpinner{background: #627da4;color:#fff;font-weight:bold; font-size:1em} .form-control.inputSpinner.changed{ background: #f6d06a!Important; border-color: #f6d06a;} .form-control.inputSpinner:focus{ background: #208480;} .btn.disabled strong, .btn:disabled strong{ color:#eee} .btn-light.disabled, .btn-light:disabled {color: #eee; background-color: #a4a4a4;cursor:not-allowed} .inputSpinner.hasvalue{background: #627da4;color:#fff;font-weight:bold} .form-vertical label{text-align:right;display:block} .form-compact h3{ background: #d7d6d6; color: #fff; padding: 5px 0 1px 0; } .form-compact h3 label{ color: #fff; } textarea.full{width:100%;}