.form-group { position: relative; width: 100%; margin-bottom: 1rem !important; padding: 0 2rem; } .accordion { width: 100%; margin-bottom: 1rem; } .accordion-body .card-header { text-align: center; } .accordion-body { display: flex; flex-wrap: wrap; } .full-width { min-width: 100%; } @media (min-width: 992px) { .form-group { flex: 0 0 50%; max-width: 50%; } div.modal-body .form-group { flex: 0 0 100%; max-width: 100%; } } br { display: block; width: 100%; } .form-group .form-control:hover, .form-group .form-control:focus { border-color: #95989a; } .form-group label, .ckEditContainer label { justify-content: left; color: #616E88; max-width: unset; } .form-group label:first-child, .ckEditContainer label:first-child { font-weight: bold; /* we need this because we have col-sm-5 on labels at the moment, once we remove them we don't need this */ padding-left: 0; } .select2-container { width: 100% !important; } .select2-selection { border-color: transparent !important; } /* Fateme - old selector was affecting on ckEditor pop ups */ .pc input[type="radio"], .pc input[type="checkbox"]:not(.form-check-input) { margin-top: 1rem; margin-left: 1rem; margin-right: 1rem; } input[type="radio"] { margin-bottom: 1rem; min-width: 30px; } .moduleContainer form[name="moduleForm"] { text-align: left; display: flex; flex-wrap: wrap; max-width: 1200px; } .moduleContainer form[name="moduleForm"] h1, .moduleContainer form[name="moduleForm"] h2, .moduleContainer form[name="moduleForm"] h3 { width: 100%; } .multiSelectContainer { width: 100%; } .form-group .form-check-input { position: relative; } .btn { align-self: center; } [data-pagemode='iframeMode'] .moduleHeader { display: none !important; } [data-pagemode='iframeMode'] .pcpy { padding-top: 0 !important; } .radioGroupBlock label, .checkBoxGroup label { display: flex; align-items: center; max-width: 100%; } /* To make sure tooltips look fine on this type of input */ .radioGroupBlock label.custom-control-label { display: initial; }