AtomicOld/simpla/design/css/utils.css

.text-monospace {font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;}
.text-justify {text-align: justify !important;}
.text-wrap {white-space: normal !important;}
.text-nowrap {white-space: nowrap !important;}
.text-truncate {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.text-left {text-align: left !important;}
.text-right {text-align: right !important;}
.text-center {text-align: center !important;}
.text-lowercase {text-transform: lowercase !important;}
.text-uppercase {text-transform: uppercase !important;}
.text-capitalize {text-transform: capitalize !important;}
.text-hide {font: 0/0 a;color: transparent;text-shadow: none;background-color: transparent;border: 0;}
.text-decoration-none {text-decoration: none !important;}
.text-break {word-break: break-word !important;word-wrap: break-word !important;}
.text-reset {color: inherit !important;}

.text-white {color: #fff !important;}
.text-primary {color: #007bff !important;}
a.text-primary:hover, a.text-primary:focus {color: #0056b3 !important;}
.text-secondary {color: #6c757d !important;}
a.text-secondary:hover, a.text-secondary:focus {color: #494f54 !important;}
.text-success {color: #28a745 !important;}
a.text-success:hover, a.text-success:focus {color: #19692c !important;}
.text-info {color: #17a2b8 !important;}
a.text-info:hover, a.text-info:focus {color: #0f6674 !important;}
.text-warning {color: #ffc107 !important;}
a.text-warning:hover, a.text-warning:focus {color: #ba8b00 !important;}
.text-danger {color: #dc3545 !important;}
a.text-danger:hover, a.text-danger:focus {color: #a71d2a !important;}
.text-light {color: #f8f9fa !important;}
a.text-light:hover, a.text-light:focus {color: #cbd3da !important;}
.text-dark {color: #343a40 !important;}
a.text-dark:hover, a.text-dark:focus {color: #121416 !important;}
.text-body {color: #212529 !important;}
.text-muted {color: #6c757d !important;}
.text-black-50 {color: rgba(0, 0, 0, 0.5) !important;}
.text-white-50 {color: rgba(255, 255, 255, 0.5) !important;}

.bg-white { background-color: #fff !important;}
.rounded { border-radius: 1rem }

.w-25 { width: 25% !important;}
.w-50 { width: 50% !important;}
.w-75 { width: 75% !important;}
.w-100 { width: 100% !important;}
.w-auto { width: auto !important;}
.h-25 { height: 25% !important;}
.h-50 { height: 50% !important;}
.h-75 { height: 75% !important;}
.h-100 { height: 100% !important;}
.h-auto { height: auto !important;}

.mw-100 { max-width: 100% !important;}
.mh-100 { max-height: 100% !important;}
.min-vw-100 { min-width: 100vw !important;}
.min-vh-100 { min-height: 100vh !important;}
.vw-100 { width: 100vw !important;}
.vh-100 { height: 100vh !important;}

.m-0 { margin: 0 !important;}
.mt-0, .my-0 { margin-top: 0 !important;}
.mr-0, .mx-0 { margin-right: 0 !important;}
.mb-0, .my-0 { margin-bottom: 0 !important;}
.ml-0, .mx-0 { margin-left: 0 !important;}
.m-1 { margin: 0.25rem !important;}
.mt-1, .my-1 { margin-top: 0.25rem !important;}
.mr-1, .mx-1 { margin-right: 0.25rem !important;}
.mb-1, .my-1 { margin-bottom: 0.25rem !important;}
.ml-1, .mx-1 { margin-left: 0.25rem !important;}
.m-2 { margin: 0.5rem !important;}
.mt-2, .my-2 { margin-top: 0.5rem !important;}
.mr-2, .mx-2 { margin-right: 0.5rem !important;}
.mb-2, .my-2 { margin-bottom: 0.5rem !important;}
.ml-2, .mx-2 { margin-left: 0.5rem !important;}
.m-3 {margin: 1rem !important;}
.mt-3, .my-3 {margin-top: 1rem !important;}
.mr-3, .mx-3 {margin-right: 1rem !important;}
.mb-3, .my-3 {margin-bottom: 1rem !important;}
.ml-3, .mx-3 {margin-left: 1rem !important;}
.m-4 {margin: 1.5rem !important;}
.mt-4, .my-4 {margin-top: 1.5rem !important;}
.mr-4, .mx-4 {margin-right: 1.5rem !important;}
.mb-4, .my-4 {margin-bottom: 1.5rem !important;}
.ml-4, .mx-4 {margin-left: 1.5rem !important;}
.m-5 {margin: 3rem !important;}
.mt-5, .my-5 {margin-top: 3rem !important;}
.mr-5, .mx-5 {margin-right: 3rem !important;}
.mb-5, .my-5 {margin-bottom: 3rem !important;}
.ml-5, .mx-5 {margin-left: 3rem !important;}

.p-0 {padding: 0 !important;}
.pt-0,.py-0 {padding-top: 0 !important;}
.pr-0,.px-0 {padding-right: 0 !important;}
.pb-0,.py-0 {padding-bottom: 0 !important;}
.pl-0,.px-0 {padding-left: 0 !important;}
.p-1 {padding: 0.25rem !important;}
.pt-1,.py-1 {padding-top: 0.25rem !important;}
.pr-1,.px-1 {padding-right: 0.25rem !important;}
.pb-1,.py-1 {padding-bottom: 0.25rem !important;}
.pl-1,.px-1 {padding-left: 0.25rem !important;}
.p-2 {padding: 0.5rem !important;}
.pt-2,.py-2 {padding-top: 0.5rem !important;}
.pr-2,.px-2 {padding-right: 0.5rem !important;}
.pb-2,.py-2 {padding-bottom: 0.5rem !important;}
.pl-2,.px-2 {padding-left: 0.5rem !important;}
.p-3 {padding: 1rem !important;}
.pt-3,.py-3 {padding-top: 1rem !important;}
.pr-3,.px-3 {padding-right: 1rem !important;}
.pb-3,.py-3 {padding-bottom: 1rem !important;}
.pl-3,.px-3 {padding-left: 1rem !important;}
.p-4 {padding: 1.5rem !important;}
.pt-4,.py-4 {padding-top: 1.5rem !important;}
.pr-4,.px-4 {padding-right: 1.5rem !important;}
.pb-4,.py-4 {padding-bottom: 1.5rem !important;}
.pl-4,.px-4 {padding-left: 1.5rem !important;}
.p-5 {padding: 3rem !important;}
.pt-5,.py-5 {padding-top: 3rem !important;}
.pr-5,.px-5 {padding-right: 3rem !important;}
.pb-5,.py-5 {padding-bottom: 3rem !important;}
.pl-5,.px-5 {padding-left: 3rem !important;}

.m-n1 {margin: -0.25rem !important;}
.mt-n1,.my-n1 {margin-top: -0.25rem !important;}
.mr-n1,.mx-n1 {margin-right: -0.25rem !important;}
.mb-n1,.my-n1 {margin-bottom: -0.25rem !important;}
.ml-n1,.mx-n1 {margin-left: -0.25rem !important;}
.m-n2 {margin: -0.5rem !important;}
.mt-n2,.my-n2 {margin-top: -0.5rem !important;}
.mr-n2,.mx-n2 {margin-right: -0.5rem !important;}
.mb-n2,.my-n2 {margin-bottom: -0.5rem !important;}
.ml-n2,.mx-n2 {margin-left: -0.5rem !important;}
.m-n3 {margin: -1rem !important;}
.mt-n3,.my-n3 {margin-top: -1rem !important;}
.mr-n3,.mx-n3 {margin-right: -1rem !important;}
.mb-n3,.my-n3 {margin-bottom: -1rem !important;}
.ml-n3,.mx-n3 {margin-left: -1rem !important;}
.m-n4 {margin: -1.5rem !important;}
.mt-n4,.my-n4 {margin-top: -1.5rem !important;}
.mr-n4,.mx-n4 {margin-right: -1.5rem !important;}
.mb-n4,.my-n4 {margin-bottom: -1.5rem !important;}
.ml-n4,.mx-n4 {margin-left: -1.5rem !important;}
.m-n5 {margin: -3rem !important;}
.mt-n5,.my-n5 {margin-top: -3rem !important;}
.mr-n5,.mx-n5 {margin-right: -3rem !important;}
.mb-n5,.my-n5 { margin-bottom: -3rem !important;}
.ml-n5,.mx-n5 {margin-left: -3rem !important;}
.m-auto {margin: auto !important;}
.mt-auto,.my-auto {margin-top: auto !important;}
.mr-auto,.mx-auto {margin-right: auto !important;}
.mb-auto,.my-auto {margin-bottom: auto !important;}
.ml-auto,.mx-auto {margin-left: auto !important;}

.clearfix::after {display: block;clear: both;content: "";}
.float-left {float: left !important;}
.float-right {float: right !important;}
.float-none {float: none !important;}

.stretched-link::after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;content: "";}
.position-static {position: static !important;}
.position-relative {position: relative !important;}
.position-absolute {position: absolute !important;}
.position-fixed {position: fixed !important;}

.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-grid {display: grid !important;}
.d-table {display: table !important;}
.d-table-row {display: table-row !important;}
.d-table-cell {display: table-cell !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}
.d-none {display: none !important;}
.display-none {display: none;}

.flex-row {flex-direction: row !important;}
.flex-column {flex-direction: column !important;}
.flex-row-reverse {flex-direction: row-reverse !important;}
.flex-column-reverse {flex-direction: column-reverse !important;}
.flex-wrap {flex-wrap: wrap !important;}
.flex-nowrap {flex-wrap: nowrap !important;}
.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}
.flex-fill {flex: 1 1 auto !important;}
.flex-grow-0 {flex-grow: 0 !important;}
.flex-grow-1 {flex-grow: 1 !important;}
.flex-shrink-0 {flex-shrink: 0 !important;}
.flex-shrink-1 {flex-shrink: 1 !important;}
.justify-content-start {justify-content: flex-start !important;}
.justify-content-end {justify-content: flex-end !important;}
.justify-content-center {justify-content: center !important;}
.justify-content-between {justify-content: space-between !important;}
.justify-content-around {justify-content: space-around !important;}
.align-items-start {align-items: flex-start !important;}
.align-items-end {align-items: flex-end !important;}
.align-items-center {align-items: center !important;}
.align-items-baseline {align-items: baseline !important;}
.align-items-stretch {align-items: stretch !important;}
.align-content-start {align-content: flex-start !important;}
.align-content-end {align-content: flex-end !important;}
.align-content-center {align-content: center !important;}
.align-content-between {align-content: space-between !important;}
.align-content-around {align-content: space-around !important;}
.align-content-stretch {align-content: stretch !important;}
.align-self-auto {align-self: auto !important;}
.align-self-start {align-self: flex-start !important;}
.align-self-end {align-self: flex-end !important;}
.align-self-center {align-self: center !important;}
.align-self-baseline {align-self: baseline !important;}
.align-self-stretch {align-self: stretch !important;}

.border {border: 1px solid #dee2e6 !important;}
.border-top {border-top: 1px solid #dee2e6 !important;}
.border-right {border-right: 1px solid #dee2e6 !important;}
.border-bottom {border-bottom: 1px solid #dee2e6 !important;}
.border-left {border-left: 1px solid #dee2e6 !important;}
.border-0 {border: 0 !important;}
.border-top-0 {border-top: 0 !important;}
.border-right-0 {border-right: 0 !important;}
.border-dark {border-color: #aaa !important;}

.stretched-link::after { position: absolute; top: 0;right: 0;bottom: 0;left: 0;z-index: 1;pointer-events: auto;content: "";background-color: rgba(0, 0, 0, 0);}

/* autocomplete */
.autocomplete-w1 {position:absolute; top:0px; left:0px; margin:6px 0 0 6px;}
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; overflow:auto; min-width: 300px; margin:-2px 6px 6px -6px;}
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

.autocomplete-suggestions {
  overflow: auto;
  /*overflow-y: auto;*/
  min-width: 300px;
  border:1px solid #999;
  background: #fff;
  margin:-1px 0 0 0;
}
.autocomplete-suggestions strong { color:#3399FF; }
.autocomplete-suggestion {
  cursor: pointer;
  margin:6px 5px;
  white-space:nowrap;
}

/* формы  */
form .form-group {
  display: flex;
  align-items: center;
  margin-top: .5rem;
}
form .required:after {
  content: '*';
  color: red;
  font-weight: bold;
}
.form-group label {
  width: 50%;
}
.form-group input[type=text] {
  box-sizing: border-box;
}